From 1c22b65361d81ef23bd76d0f76a3dce7ef72fd99 Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期二, 31 十月 2023 10:06:56 +0800 Subject: [PATCH] 拉代码 --- src/views/dashboard/components/TaskInfo.vue | 24 ++++++++++++++++++++---- 1 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/views/dashboard/components/TaskInfo.vue b/src/views/dashboard/components/TaskInfo.vue index e085d73..d0ba6e1 100644 --- a/src/views/dashboard/components/TaskInfo.vue +++ b/src/views/dashboard/components/TaskInfo.vue @@ -1,5 +1,5 @@ <template> - <div class="task-info" :class="{ selected }"> + <div class="task-info" :class="{ active }"> <div class="task-info-title" :class="{ @@ -31,13 +31,13 @@ export interface TaskInfoProps { task: Task - selected?: boolean + active?: boolean } const props = withDefaults(defineProps<TaskInfoProps>(), { - selected: false + active: false }) -const { task, selected } = toRefs(props) +const { task, active } = toRefs(props) const planTimeText = computed(() => { const format = (date: number) => { @@ -56,9 +56,12 @@ $status-ready: #13235a; $status-done: #13235a; $text-color: #d7d7d7; +$active-color: #00dfdf; .task-info { background-color: #6b83ff; border-radius: 4px; + overflow: initial; + cursor: pointer; } .task-info-title { height: 34px; @@ -94,4 +97,17 @@ flex: 1; } } +.active { + position: relative; + &:before { + content: ''; + width: 8px; + background-color: $active-color; + height: 100%; + position: absolute; + top: 0; + left: 0; + border-radius: 6px 0 0 6px; + } +} </style> -- Gitblit v1.8.0