From e9f13c55203da7e9cc2c1b7cb863a7ecee04b21c Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期二, 31 十月 2023 11:49:43 +0800
Subject: [PATCH] feat: 任务详情组件;按钮组件;子标题组件
---
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