数据看板

hdApp/src/admin/home/workbench.vue

@@ -17,42 +17,45 @@
       <template v-if="lookMoney == 1">
         <view class="today-overview-card">
           <view class="today-header">
-            <view class="today-title">今日概况</view>
-            <zui-svg-icon icon="home-message" color="#FFFFFF" :width="32" :height="29" @click.native="pageTo({url:'/admin/chat/list'})" />
-            <view class="red-mind" v-if="unReadMsgNum>0">{{ unReadMsgNum>9?'9+':unReadMsgNum }}</view>
-          </view>
-
-          <view class="today-income-section" @click.stop="pageTo({url:'/admin/stat/kdIncome'})">
-            <view class="income-label">收入</view>
-            <view class="income-value">
-              <text class="income-number">{{ $util.numberFormat(data.todayData.income) }}</text>
+            <view class="today-title">数据看板</view>
+            <view class="header-actions">
+              <zui-svg-icon icon="home-message" color="#FFFFFF" :width="32" :height="29" @click.native="pageTo({url:'/admin/chat/list'})" />
+              <view class="red-mind" v-if="unReadMsgNum>0">{{ unReadMsgNum>9?'9+':unReadMsgNum }}</view>
             </view>
           </view>
 
-          <view class="today-stats" @click.stop="pageTo({url:'/admin/custom/visit'})">
-            <view class="stat-item">
-              <view class="stat-content">
-                <view class="stat-label">访客</view>
-                <view class="stat-value">{{ $util.numberFormat(data.todayData.visit) || 0 }}</view>
+          <view class="today-stats-grid">
+            <view class="stats-left" @click.stop="pageTo({url:'/admin/stat/kdIncome'})">
+              <view class="income-label-small">今日收入</view>
+              <view class="income-value-large">
+                <text class="income-number-large">{{ $util.numberFormat(data.todayData.income) }}</text>
               </view>
             </view>
-
-            <navigator
-              url="/admin/home/order"
-              open-type="switchTab"
-              class="stat-item"
-              @click.stop="pageTo({url:'/admin/home/order'})"
-            >
-              <view class="stat-content">
-                <view class="stat-label">订单</view>
-                <view class="stat-value">{{ $util.numberFormat(data.todayData.order) || 0 }}</view>
+            <view class="stats-right">
+              <view class="stat-item-vertical" @click.stop="pageTo({url:'/admin/custom/visit'})">
+                <view class="stat-content">
+                  <view class="stat-label">访客</view>
+                  <view class="stat-value">{{ $util.numberFormat(data.todayData.visit) || 0 }}</view>
+                </view>
               </view>
-            </navigator>
 
-            <view class="stat-item" @click.stop="">
-              <view class="stat-content">
-                <view class="stat-label">昨日收入</view>
-                <view class="stat-value">{{ $util.numberFormat(data.yesterdayIncome) || 0 }}</view>
+              <navigator
+                url="/admin/home/order"
+                open-type="switchTab"
+                class="stat-item-vertical"
+                @click.stop="pageTo({url:'/admin/home/order'})"
+              >
+                <view class="stat-content">
+                  <view class="stat-label">订单</view>
+                  <view class="stat-value">{{ $util.numberFormat(data.todayData.order) || 0 }}</view>
+                </view>
+              </navigator>
+
+              <view class="stat-item-vertical" @click.stop="">
+                <view class="stat-content">
+                  <view class="stat-label">昨日收入</view>
+                  <view class="stat-value">{{ $util.numberFormat(data.yesterdayIncome) || 0 }}</view>
+                </view>
               </view>
             </view>
           </view>
@@ -1174,113 +1177,106 @@ export default {
 
 // 今日概况卡片
 .today-overview-card {
-  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
+  background: linear-gradient(to right, #1ba85e 0%, #22C55E 50%, #16A34A 100%);
   padding: 0;
   margin: 0 0 -20upx 0;
   overflow: hidden;
+  border-radius: 0 0 24upx 24upx;
   
   .today-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 30upx 30upx 20upx;
+    padding: 24upx 28upx 16upx;
     
     .today-title {
-      font-size: 34upx;
-      font-weight: 600;
+      font-size: 32upx;
+      font-weight: 700;
       color: #ffffff;
-    }
-  }
-  
-  .today-income-section {
-    padding: 20upx 30upx 40upx 30upx;
-    text-align: center;
-    position: relative;
-    
-    &:active {
-      background: rgba(0, 0, 0, 0.05);
-    }
-    
-    .income-label {
-      font-size: 26upx;
-      color: rgba(255, 255, 255, 0.9);
-      margin-bottom: 16upx;
-    }
-    
-    .income-value {
-      display: flex;
-      align-items: baseline;
-      justify-content: center;
-      margin-bottom: 12upx;
-      
-      .currency-symbol {
-        font-size: 32upx;
-        color: #ffffff;
-        font-weight: 500;
-        margin-right: 8upx;
-      }
-      
-      .income-number {
-        font-size: 56upx;
-        font-weight: 700;
-        color: #ffffff;
-        line-height: 1;
-      }
+      letter-spacing: 1upx;
     }
     
-    .income-hint {
-      font-size: 24upx;
-      color: rgba(255, 255, 255, 0.9);
+    .header-actions {
+      position: relative;
       display: flex;
       align-items: center;
-      justify-content: center;
-      
-      &::after {
-        content: '>';
-        margin-left: 8upx;
-        font-weight: 600;
-      }
     }
   }
   
-  .today-stats {
+  .today-stats-grid {
     display: flex;
-    padding: 0;
+    padding: 20upx;
+    gap: 16upx;
     
-    .stat-item {
-      flex: 1;
-      padding: 10upx 0 50upx 0;
-      position: relative;
+    .stats-left {
+      flex: 0.8;
+      background: rgba(255, 255, 255, 0.15);
+      border-radius: 16upx;
+      padding: 24upx 20upx;
       text-align: center;
+      backdrop-filter: blur(10px);
       
-      &:not(:last-child)::after {
-        content: '';
-        position: absolute;
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 1upx;
-        height: 60upx;
+      &:active {
         background: rgba(255, 255, 255, 0.2);
       }
       
-      &:active {
-        background: rgba(0, 0, 0, 0.1);
+      .income-label-small {
+        font-size: 24upx;
+        color: rgba(255, 255, 255, 0.85);
+        margin-bottom: 12upx;
+        font-weight: 500;
+      }
+      
+      .income-value-large {
+        display: flex;
+        align-items: baseline;
+        justify-content: center;
+        
+        .income-number-large {
+          font-size: 48upx;
+          font-weight: 800;
+          color: #ffffff;
+          line-height: 1;
+        }
       }
+    }
+    
+    .stats-right {
+      flex: 1.2;
+      display: flex;
+      flex-direction: column;
+      gap: 12upx;
       
-      .stat-content {
+      .stat-item-vertical {
+        flex: 1;
+        background: rgba(255, 255, 255, 0.12);
+        border-radius: 12upx;
+        padding: 14upx 12upx;
         text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        backdrop-filter: blur(8px);
         
-        .stat-label {
-          font-size: 26upx;
-          color: rgba(255, 255, 255, 0.9);
-          margin-bottom: 8upx;
+        &:active {
+          background: rgba(255, 255, 255, 0.18);
         }
         
-        .stat-value {
-          font-size: 36upx;
-          font-weight: 600;
-          color: #ffffff;
+        .stat-content {
+          width: 100%;
+          
+          .stat-label {
+            font-size: 22upx;
+            color: rgba(255, 255, 255, 0.8);
+            margin-bottom: 6upx;
+            font-weight: 500;
+          }
+          
+          .stat-value {
+            font-size: 32upx;
+            font-weight: 700;
+            color: #ffffff;
+          }
         }
       }
     }