Bläddra i källkod

feat(task-card): enhance sales 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" with scoped CSS
- Add borderStyle computed property for non-emergency status colors

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
xuyunhui 1 vecka sedan
förälder
incheckning
e84cab1746
1 ändrade filer med 36 tillägg och 1 borttagningar
  1. 36 1
      src/components/task/SalesTaskCard.vue

+ 36 - 1
src/components/task/SalesTaskCard.vue

@@ -1,5 +1,16 @@
 <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"
+    :hover-start-time="0"
+    :hover-stay-time="150"
+    :class="{
+      'border-l-4 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>
@@ -74,4 +85,28 @@ const progressPercent = computed(() => {
   }
   return map[props.task.status] ?? 0
 })
+
+const borderStyle = computed(() => {
+  if (props.task.type === 'emergency') return {}
+  const color = {
+    pending: '#f59e0b',
+    confirmed: '#2563eb',
+    scheduled: '#2563eb',
+    departed: '#8b5cf6',
+    arrived: '#10b981',
+    constructing: '#2563eb',
+    inspecting: '#f59e0b',
+    completed: '#10b981',
+    cancelled: '#ef4444',
+    rejected: '#ef4444',
+  }[props.task.status] || '#2563eb'
+  return { borderLeftColor: color }
+})
 </script>
+
+<style scoped>
+.scale-down {
+  transform: scale(0.95);
+  transition: transform 0.15s ease;
+}
+</style>