From b4a603e7e1c123195f5515aa7c3b247e1784fb76 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期三, 24 一月 2024 14:53:00 +0800
Subject: [PATCH] 1

---
 src/views/dashboard/components/TaskInfo.vue |   59 +++++++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/views/dashboard/components/TaskInfo.vue b/src/views/dashboard/components/TaskInfo.vue
index e085d73..6315c9b 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="{
@@ -12,14 +12,25 @@
     </div>
     <div class="task-info-content">
       <div class="row">
-        <div class="col">宸ュ崟鍙�: {{ task.Order.workOrderId }}</div>
-        <div class="col">鐢熶骇鏁伴噺锛歿{ task.Order.amount || 0 }}{{ task.Order.unit }}</div>
+        <div class="col">
+          宸ュ崟鍙�:
+          <span>{{ task.Order.workOrderId }}</span>
+        </div>
+        <div class="col">
+          鐢熶骇鏁伴噺: <span>{{ task.Order.amount || 0 }}{{ task.Order.unit }}</span>
+        </div>
       </div>
       <div class="row">
-        <div class="col">褰撳墠浠诲姟: {{ task.Procedure.procedure.procedureName || '' }}</div>
-        <div class="col">浜у搧鍚嶇О锛歿{ task.Order.productName || '' }}</div>
+        <div class="col">
+          褰撳墠浠诲姟:
+          <span>{{ task.Procedure.procedure.procedureName || '' }}</span>
+        </div>
+        <div class="col">
+          浜у搧鍚嶇О:
+          <span>{{ task.Order.productName || '' }}</span>
+        </div>
       </div>
-      <div class="row">璁″垝鏃堕棿: {{ planTimeText }}</div>
+      <div class="row">璁″垝鏃堕棿:{{ planTimeText }}</div>
     </div>
   </div>
 </template>
@@ -31,17 +42,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 +67,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;
@@ -80,8 +94,8 @@
   background-color: $status-done;
 }
 .task-info-content {
-  font-size: 13px;
-  padding: 10px 20px;
+  font-size: 12px;
+  padding: 10px 15px;
   color: $text-color;
   .row {
     width: 100%;
@@ -92,6 +106,27 @@
   .col {
     width: 50%;
     flex: 1;
+    span {
+      width: calc(100% - 60px);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+}
+.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