haoxuan
2023-12-09 592164b38f12dd2a605c20f6d1c84ec6b28b4f56
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,17 +31,17 @@
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) => {
    return useDateFormat(date, 'YYYY-MM-DD', { locales: 'zh-cn' })
    return useDateFormat(date, 'YYYY-MM-DD HH:mm:ss', { locales: 'zh-cn' })
  }
  const startTime = task.value.Procedure?.startTime
@@ -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>