فهرست منبع

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

xuyunhui 1 هفته پیش
والد
کامیت
9158185b31
1فایلهای تغییر یافته به همراه21 افزوده شده و 21 حذف شده
  1. 21 21
      src/components/home/DispatchHome.vue

+ 21 - 21
src/components/home/DispatchHome.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,17 +22,17 @@
       <!-- 统计卡片 -->
       <uni-card title="今日任务统计" :is-shadow="false" :is-full="false">
         <view class="grid grid-cols-3 gap-3">
-          <view class="bg-surface rounded-xl p-4 text-center" @click="goToTaskList">
-            <text class="stat-number text-primary block">{{ taskStore.total }}</text>
-            <text class="text-desc mt-1 block">今日任务</text>
+          <view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #3b82f6, #6366f1);" @click="goToTaskList">
+            <text class="stat-number text-white block">{{ taskStore.total }}</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-warning block">{{ taskStore.pendingCount }}</text>
-            <text class="text-desc mt-1 block">待排班</text>
+          <view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #3b82f6, #6366f1);" @click="goToTaskList">
+            <text class="stat-number text-white block">{{ taskStore.pendingCount }}</text>
+            <text class="text-white/80 mt-1 block text-xs">待排班</text>
           </view>
-          <view class="bg-surface rounded-xl p-4 text-center" @click="goToEmergencyTeam">
-            <text class="stat-number text-danger block">{{ emergencyCount }}</text>
-            <text class="text-desc mt-1 block">应急中</text>
+          <view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #3b82f6, #6366f1);" @click="goToEmergencyTeam">
+            <text class="stat-number text-white block">{{ emergencyCount }}</text>
+            <text class="text-white/80 mt-1 block text-xs">应急中</text>
           </view>
         </view>
       </uni-card>
@@ -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 transition-transform">
+            <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">
               <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 transition-transform">
+            <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">
               <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 transition-transform">
+            <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">
               <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 transition-transform">
+            <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">
               <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"
+            class="card p-3 border-l-4 border-warning cursor-pointer active:scale-95 transition-transform duration-150"
             @click="goToTaskDetail(task.id)"
           >
             <view class="flex justify-between items-start mb-2">