Просмотр исходного кода

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

- Add red left border for emergency tasks (border-l-4 border-red-500)
- Add light green background for completed tasks (bg-green-50)
- Add tap feedback via hover-class=scale-down + scoped CSS
- Avoid Tailwind active: variants due to WXSS escape selector issues

Task 9: ConstructionTaskCard 任务卡片样式增强

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
xuyunhui 1 неделя назад
Родитель
Сommit
992176914a
1 измененных файлов с 18 добавлено и 1 удалено
  1. 18 1
      src/components/task/ConstructionTaskCard.vue

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

@@ -1,5 +1,13 @@
 <template>
-  <view class="card p-4 mb-3 clickable" @click="$emit('click', task.id)">
+  <view
+    class="card p-4 mb-3 clickable"
+    hover-class="scale-down"
+    :class="{
+      'border-l-4 border-red-500': task.type === 'emergency',
+      'bg-green-50': task.status === 'completed'
+    }"
+    @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>
@@ -79,3 +87,12 @@ const steps = computed(() => {
   ]
 })
 </script>
+
+<style scoped>
+.scale-down {
+  transition: transform 0.15s ease;
+}
+.scale-down:active {
+  transform: scale(0.95);
+}
+</style>