优化

hdApp/src/admin/home/workbench.vue

@@ -15,47 +15,49 @@
     <view class="app-main app-content" v-if="loginStyle  == 2">
       <template v-if="lookMoney == 1">
         <view class="today-overview-card">
-          <view class="today-header">
-            <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="bubble-header">
+            <view class="bubble-title">📊 数据看板</view>
+            <view class="message-btn" @click="pageTo({url:'/admin/chat/list'})">
+              <view class="msg-icon">💬</view>
               <view class="red-mind" v-if="unReadMsgNum>0">{{ unReadMsgNum>9?'9+':unReadMsgNum }}</view>
             </view>
           </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 class="bubble-grid">
+            <!-- 今日收入 - 主气泡 -->
+            <view class="bubble bubble-primary" @click.stop="pageTo({url:'/admin/stat/kdIncome'})">
+              <view class="bubble-inner">
+                <view class="bubble-label">今日收入</view>
+                <view class="bubble-value">{{ $util.numberFormat(data.todayData.income) }}</view>
               </view>
-              <view class="income-date-small">{{ currentDate }}</view>
             </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 class="bubble bubble-secondary" @click.stop="pageTo({url:'/admin/custom/visit'})">
+              <view class="bubble-inner">
+                <view class="bubble-label">访客</view>
+                <view class="bubble-value">{{ $util.numberFormat(data.todayData.visit) || 0 }}</view>
               </view>
+            </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>
+            <!-- 订单 -->
+            <navigator
+              url="/admin/home/order"
+              open-type="switchTab"
+              class="bubble bubble-secondary"
+              @click.stop="pageTo({url:'/admin/home/order'})"
+            >
+              <view class="bubble-inner">
+                <view class="bubble-label">订单</view>
+                <view class="bubble-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 class="bubble bubble-secondary" @click.stop="">
+              <view class="bubble-inner">
+                <view class="bubble-label">昨日收入</view>
+                <view class="bubble-value">{{ $util.numberFormat(data.yesterdayIncome) || 0 }}</view>
               </view>
             </view>
           </view>
@@ -1150,117 +1152,146 @@ export default {
 // 功能网格部分 - 删除
 
 
-// 今日概况卡片
+// 今日概况卡片 - 圆形气泡布局
 .today-overview-card {
   background: linear-gradient(to right, #1ba85e 0%, #22C55E 50%, #16A34A 100%);
   padding: 0;
   margin: 0 0 -20upx 0;
-  overflow: hidden;
+  overflow: visible;
+  border-radius: 0;
   
-  .today-header {
+  .bubble-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 24upx 28upx 16upx;
+    padding: 20upx 24upx 24upx;
     
-    .today-title {
-      font-size: 32upx;
+    .bubble-title {
+      font-size: 28upx;
       font-weight: 700;
       color: #ffffff;
-      letter-spacing: 1upx;
+      letter-spacing: 0.5upx;
     }
     
-    .header-actions {
+    .message-btn {
       position: relative;
+      width: 44upx;
+      height: 44upx;
       display: flex;
       align-items: center;
-    }
-  }
-  
-  .today-stats-grid {
-    display: flex;
-    padding: 20upx;
-    gap: 16upx;
-    
-    .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);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
       justify-content: center;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 50%;
+      transition: all 0.3s ease;
       
       &:active {
-        background: rgba(255, 255, 255, 0.2);
+        background: rgba(255, 255, 255, 0.35);
+        transform: scale(0.95);
       }
       
-      .income-label-small {
+      .msg-icon {
         font-size: 24upx;
-        color: rgba(255, 255, 255, 0.85);
-        margin-bottom: 12upx;
-        font-weight: 500;
+        line-height: 1;
       }
       
-      .income-value-large {
+      .red-mind {
+        position: absolute;
+        top: -6upx;
+        right: -6upx;
+        width: 32upx;
+        height: 32upx;
+        line-height: 28upx;
+        font-size: 20upx;
+        font-weight: 700;
+        text-align: center;
+        color: white;
+        background-color: #ff2842;
+        border: 2upx solid #ffffff;
+        border-radius: 50%;
         display: flex;
-        align-items: baseline;
+        align-items: center;
         justify-content: center;
-        
-        .income-number-large {
-          font-size: 48upx;
-          font-weight: 800;
-          color: #ffffff;
-          line-height: 1;
-        }
-      }
-      
-      .income-date-small {
-        font-size: 24upx;
-        color: white;
-        margin-top: 35upx;
-        font-weight: bold;
       }
     }
+  }
+  
+  .bubble-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20upx;
+    padding: 20upx 24upx 30upx;
+    align-items: center;
+    justify-content: center;
     
-    .stats-right {
-      flex: 1.2;
+    .bubble {
+      position: relative;
       display: flex;
-      flex-direction: column;
-      gap: 12upx;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      cursor: pointer;
+      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+      box-shadow: 0 8upx 20upx rgba(0, 0, 0, 0.15);
       
-      .stat-item-vertical {
-        flex: 1;
-        background: rgba(255, 255, 255, 0.12);
-        border-radius: 12upx;
-        padding: 14upx 12upx;
-        text-align: center;
+      &:active {
+        transform: scale(0.92);
+        box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.2);
+      }
+      
+      .bubble-inner {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
-        backdrop-filter: blur(8px);
+        padding: 20upx;
+        box-sizing: border-box;
+      }
+      
+      &.bubble-primary {
+        width: 180upx;
+        height: 180upx;
+        background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
         
-        &:active {
-          background: rgba(255, 255, 255, 0.18);
+        .bubble-inner {
+          .bubble-label {
+            font-size: 22upx;
+            color: rgba(255, 255, 255, 0.9);
+            font-weight: 600;
+            margin-bottom: 12upx;
+          }
+          
+          .bubble-value {
+            font-size: 44upx;
+            font-weight: 800;
+            color: #ffffff;
+            line-height: 1;
+          }
         }
+      }
+      
+      &.bubble-secondary {
+        width: 140upx;
+        height: 140upx;
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
+        backdrop-filter: blur(10px);
+        border: 2upx solid rgba(255, 255, 255, 0.3);
         
-        .stat-content {
-          width: 100%;
-          
-          .stat-label {
-            font-size: 22upx;
-            color: rgba(255, 255, 255, 0.8);
-            margin-bottom: 6upx;
-            font-weight: 500;
+        .bubble-inner {
+          .bubble-label {
+            font-size: 18upx;
+            color: rgba(255, 255, 255, 0.9);
+            font-weight: 600;
+            margin-bottom: 8upx;
           }
           
-          .stat-value {
+          .bubble-value {
             font-size: 32upx;
             font-weight: 700;
             color: #ffffff;
+            line-height: 1;
           }
         }
       }