拉代码

haoxuan

2023-10-31 1c22b65361d81ef23bd76d0f76a3dce7ef72fd99

 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>