feat(home): apply gradient header and stat cards for construction

- Add gradient TopBar with white user info area
- Unify stat cards with cyan-blue gradient
- Enhance daily task entry card styling
- Replace Tailwind active: pseudo-class with WXSS-compatible hover-class

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/home/ConstructionHome.vue

@@ -1,17 +1,17 @@
 <template>
   <view class="app-container">
-    <TopBar title="">
+    <TopBar title="" gradient>
       <template #left>
         <view class="flex items-center">
-          <view class="w-12 h-12 bg-primary-light rounded-2xl flex items-center justify-center mr-3">
-            <text class="uni-icons uniui-person-filled text-primary text-xl"></text>
+          <view class="w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center mr-3">
+            <text class="uni-icons uniui-person-filled text-white text-xl"></text>
           </view>
           <view>
-            <text class="text-gray-500 text-xs block">工程一班</text>
-            <text class="text-gray-800 text-lg font-bold">张师傅</text>
+            <text class="text-white/80 text-xs block">工程一班</text>
+            <text class="text-white text-lg font-bold">张师傅</text>
           </view>
-          <button class="ml-4 w-10 h-10 bg-surface rounded-full flex items-center justify-center relative" @click="goToNotification">
-            <text class="uni-icons uniui-notification-filled text-gray-500 text-lg"></text>
+          <button class="ml-4 w-10 h-10 bg-white/20 rounded-full flex items-center justify-center relative" @click="goToNotification">
+            <text class="uni-icons uniui-notification-filled text-white text-lg"></text>
           </button>
         </view>
       </template>
@@ -22,26 +22,26 @@
       <!-- 统计卡片 -->
       <uni-card title="工作统计" :is-shadow="false">
         <view class="grid grid-cols-3 gap-3">
-          <view class="bg-surface rounded-xl p-4 text-center" @click="goToHistoryTask">
-            <text class="stat-number text-success block">{{ completedCount }}</text>
-            <text class="text-desc mt-1 block">已完成</text>
+          <view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #06b6d4, #3b82f6);" @click="goToHistoryTask">
+            <text class="stat-number text-white block">{{ completedCount }}</text>
+            <text class="text-white/80 mt-1 block text-xs">已完成</text>
           </view>
-          <view class="bg-surface rounded-xl p-4 text-center" @click="goToTaskList">
-            <text class="stat-number text-primary block">{{ currentTaskCount }}</text>
-            <text class="text-desc mt-1 block">进行中</text>
+          <view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #06b6d4, #3b82f6);" @click="goToTaskList">
+            <text class="stat-number text-white block">{{ currentTaskCount }}</text>
+            <text class="text-white/80 mt-1 block text-xs">进行中</text>
           </view>
-          <view class="bg-surface rounded-xl p-4 text-center" @click="goToTomorrowTask">
-            <text class="stat-number text-warning block">{{ tomorrowCount }}</text>
-            <text class="text-desc mt-1 block">明日任务</text>
+          <view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #06b6d4, #3b82f6);" @click="goToTomorrowTask">
+            <text class="stat-number text-white block">{{ tomorrowCount }}</text>
+            <text class="text-white/80 mt-1 block text-xs">明日任务</text>
           </view>
         </view>
       </uni-card>
 
       <!-- 每日任务入口 -->
       <uni-card :is-shadow="false" @click="goToDailyTask">
-        <view class="flex items-center justify-between cursor-pointer">
+        <view class="flex items-center justify-between cursor-pointer bg-white rounded-xl p-3" hover-class="scale-down" hover-stay-time="150">
           <view class="flex items-center">
-            <view class="icon-box mr-4">
+            <view class="icon-box mr-4 bg-primary-light rounded-xl">
               <text class="uni-icons uniui-gear-filled"></text>
             </view>
             <view>
@@ -60,19 +60,19 @@
       <uni-card title="快捷功能" :is-shadow="false">
         <view class="grid grid-cols-3 gap-4">
           <view class="flex flex-col items-center" @click="goToTaskList">
-            <view class="w-14 h-14 bg-primary-light rounded-2xl flex items-center justify-center mb-2 transition-transform">
+            <view class="w-14 h-14 bg-primary-light rounded-2xl flex items-center justify-center mb-2" hover-class="scale-down" hover-stay-time="150">
               <text class="uni-icons uniui-flag-filled text-primary text-2xl"></text>
             </view>
             <text class="text-xs text-gray-500 font-medium">我的任务</text>
           </view>
           <view class="flex flex-col items-center" @click="goToDailyTask">
-            <view class="w-14 h-14 bg-primary-light rounded-2xl flex items-center justify-center mb-2 transition-transform">
+            <view class="w-14 h-14 bg-primary-light rounded-2xl flex items-center justify-center mb-2" hover-class="scale-down" hover-stay-time="150">
               <text class="uni-icons uniui-gear-filled text-primary text-2xl"></text>
             </view>
             <text class="text-xs text-gray-500 font-medium">车辆检查</text>
           </view>
           <view class="flex flex-col items-center" @click="goToHelpCenter">
-            <view class="w-14 h-14 bg-primary-light rounded-2xl flex items-center justify-center mb-2 transition-transform">
+            <view class="w-14 h-14 bg-primary-light rounded-2xl flex items-center justify-center mb-2" hover-class="scale-down" hover-stay-time="150">
               <text class="uni-icons uniui-help-filled text-primary text-2xl"></text>
             </view>
             <text class="text-xs text-gray-500 font-medium">帮助中心</text>
@@ -94,7 +94,7 @@
           <view
             v-for="task in currentTasks"
             :key="task.id"
-            class="card p-3 cursor-pointer"
+            class="card p-3 cursor-pointer" hover-class="scale-down" hover-stay-time="150"
             @click="goToTaskDetail(task.id)"
           >
             <view class="flex justify-between items-start mb-2">
@@ -210,4 +210,8 @@ onMounted(() => {
   font-size: 24px;
   font-weight: 700;
 }
+.scale-down {
+  transform: scale(0.95);
+  transition: transform 0.15s ease;
+}
 </style>

src/components/home/DispatchHome.vue

@@ -41,25 +41,25 @@
       <uni-card title="快捷操作" :is-shadow="false">
         <view class="grid grid-cols-4 gap-4">
           <view class="flex flex-col items-center" @click="goToSchedule">
-            <view class="w-14 h-14 bg-primary-light rounded-2xl flex items-center justify-center mb-2 active:scale-95 transition-transform duration-150">
+            <view class="w-14 h-14 bg-primary-light rounded-2xl flex items-center justify-center mb-2" hover-class="scale-down" hover-stay-time="150">
               <text class="uni-icons uniui-calendar-filled text-primary text-2xl"></text>
             </view>
             <text class="text-xs text-gray-500 font-medium">排班管理</text>
           </view>
           <view class="flex flex-col items-center" @click="goToTaskList">
-            <view class="w-14 h-14 bg-warning-light rounded-2xl flex items-center justify-center mb-2 active:scale-95 transition-transform duration-150">
+            <view class="w-14 h-14 bg-warning-light rounded-2xl flex items-center justify-center mb-2" hover-class="scale-down" hover-stay-time="150">
               <text class="uni-icons uniui-flag-filled text-warning text-2xl"></text>
             </view>
             <text class="text-xs text-gray-500 font-medium">任务列表</text>
           </view>
           <view class="flex flex-col items-center" @click="goToVehicleList">
-            <view class="w-14 h-14 bg-success-light rounded-2xl flex items-center justify-center mb-2 active:scale-95 transition-transform duration-150">
+            <view class="w-14 h-14 bg-success-light rounded-2xl flex items-center justify-center mb-2" hover-class="scale-down" hover-stay-time="150">
               <text class="uni-icons uniui-cart-filled text-success text-2xl"></text>
             </view>
             <text class="text-xs text-gray-500 font-medium">车辆管理</text>
           </view>
           <view class="flex flex-col items-center" @click="goToVisualization">
-            <view class="w-14 h-14 bg-danger-light rounded-2xl flex items-center justify-center mb-2 active:scale-95 transition-transform duration-150">
+            <view class="w-14 h-14 bg-danger-light rounded-2xl flex items-center justify-center mb-2" hover-class="scale-down" hover-stay-time="150">
               <text class="uni-icons uniui-map-filled text-danger text-2xl"></text>
             </view>
             <text class="text-xs text-gray-500 font-medium">可视化</text>
@@ -81,7 +81,7 @@
           <view
             v-for="task in pendingTasks"
             :key="task.id"
-            class="card p-3 border-l-4 border-warning cursor-pointer active:scale-95 transition-transform duration-150"
+            class="card p-3 border-l-4 border-warning cursor-pointer" hover-class="scale-down" hover-stay-time="150"
             @click="goToTaskDetail(task.id)"
           >
             <view class="flex justify-between items-start mb-2">
@@ -156,4 +156,8 @@ onMounted(() => {
   font-size: 24px;
   font-weight: 700;
 }
+.scale-down {
+  transform: scale(0.95);
+  transition: transform 0.15s ease;
+}
 </style>