Parcourir la source

feat(task-card): enhance dispatch task card status styles

xuyunhui il y a 1 semaine
Parent
commit
72995febe7
1 fichiers modifiés avec 18 ajouts et 1 suppressions
  1. 18 1
      src/components/task/DispatchTaskCard.vue

+ 18 - 1
src/components/task/DispatchTaskCard.vue

@@ -1,5 +1,14 @@
 <template>
-  <view class="card p-4 mb-3 clickable border-l-4 border-primary" :style="borderStyle" @click="$emit('click', task.id)">
+  <view
+    class="card p-4 mb-3 clickable border-l-4 border-primary"
+    hover-class="scale-down"
+    :class="{
+      'border-red-500': task.type === 'emergency',
+      'bg-green-50': task.status === 'completed'
+    }"
+    :style="borderStyle"
+    @click="$emit('click', task.id)"
+  >
     <view class="flex justify-between items-start mb-2">
       <view class="flex-1 min-w-0 mr-3">
         <text class="text-sm font-semibold text-gray-800 truncate block">{{ task.projectName || '未命名任务' }}</text>
@@ -112,4 +121,12 @@ const actionColor = computed(() => {
 .border-l-4 {
   border-left-width: 4px;
 }
+.scale-down {
+  transition: transform 0.15s ease;
+  transform: scale(0.95);
+}
+.scale-down:hover,
+.scale-down:active {
+  transform: scale(0.95);
+}
 </style>