首页优化

hdApp/src/admin/home/workbench.vue

@@ -9,33 +9,41 @@
   <block v-else>
     <view class="app-main app-content" v-if="loginStyle  == 2">
       <template v-if="lookMoney == 1">
-        <view class="user-wrap" :style="{ backgroundImage: `url(${constant.imgUrl}/home/bg_hd_home2.png)` }">
-          <view class="user-top">
-            <view class="app-size-28">今日概况</view>
+        <view class="today-overview-card">
+          <view class="today-header">
+            <view class="today-title">今日概况</view>
+            <view class="today-date">{{ todayDate }}</view>
           </view>
-          <view class="income-amount" @click="pageTo({url:'/admin/stat/kdIncome'})">
-            <view>收入</view>
-            <view class="price">{{ $util.numberFormat(data.todayData.income) }}</view>
+          
+          <view class="today-income-section" @click="pageTo({url:'/admin/stat/kdIncome'})">
+            <view class="income-label">今日收入</view>
+            <view class="income-value">
+              <text class="currency-symbol">¥</text>
+              <text class="income-number">{{ $util.numberFormat(data.todayData.income) }}</text>
+            </view>
+            <view class="income-hint">点击查看详情</view>
           </view>
-          <view class="user-bottom">
-            <view class="info-list">
-              <view class="info-list-name">访客</view>
-              <view class="info-list-value">
-                {{ $util.numberFormat(data.todayData.visit) || 0 }}
+          
+          <view class="today-stats">
+            <view class="stat-item">
+              <view class="stat-icon">
+                <image class="stat-icon-img" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
+              </view>
+              <view class="stat-content">
+                <view class="stat-value">{{ $util.numberFormat(data.todayData.visit) || 0 }}</view>
+                <view class="stat-label">访客</view>
               </view>
             </view>
-            <navigator url="/admin/home/order" open-type="switchTab" class="info-list">
-              <view class="info-list-name">订单</view>
-              <view class="info-list-value">
-                {{ $util.numberFormat(data.todayData.order) || 0 }}
+            
+            <navigator url="/admin/home/order" open-type="switchTab" class="stat-item">
+              <view class="stat-icon">
+                <image class="stat-icon-img" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
               </view>
-            </navigator>
-            <view class="info-list">
-              <view class="info-list-name">昨天</view>
-              <view class="info-list-value">
-                {{ $util.numberFormat(0) || 0 }}
+              <view class="stat-content">
+                <view class="stat-value">{{ $util.numberFormat(data.todayData.order) || 0 }}</view>
+                <view class="stat-label">订单</view>
               </view>
-            </view>
+            </navigator>
           </view>
         </view>
       </template>
@@ -398,9 +406,10 @@ export default {
         admin: {},
         asset: {},
         notice: {},
-        todayData: { income:0.00, order:0, custom:0, expend:0.00 },
+        todayData: { income:0.00, order:0, custom:0, expend:0.00, visit:0 },
         isMini:0
       },
+      yesterdayIncome: 0,
 
       tabsData: [
         { name: "商城", img: `ghs/home/shop2.png`, url: "/admin/cg/mall",pf:1},
@@ -438,7 +447,15 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({ loginInfo: "getLoginInfo",dictInfo:"getDictionariesInfo",myShopInfo:"getMyShopInfo" })
+    ...mapGetters({ loginInfo: "getLoginInfo",dictInfo:"getDictionariesInfo",myShopInfo:"getMyShopInfo" }),
+    todayDate() {
+      const date = new Date()
+      const month = date.getMonth() + 1
+      const day = date.getDate()
+      const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+      const weekday = weekdays[date.getDay()]
+      return `${month}月${day}日 ${weekday}`
+    }
   },
 	watch: {
 		//只需要采购花材的花店不显示底部菜单
@@ -813,6 +830,145 @@ export default {
   margin-bottom: 20upx;
   background-color: #fff;
 }
+
+// 今日概况卡片
+.today-overview-card {
+  background: #ffffff;
+  padding: 0;
+  margin: 0 0 20upx 0;
+  overflow: hidden;
+  
+  .today-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 30upx 30upx 20upx;
+    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
+    
+    .today-title {
+      font-size: 34upx;
+      font-weight: 600;
+      color: #ffffff;
+    }
+    
+    .today-date {
+      font-size: 26upx;
+      color: rgba(255, 255, 255, 0.9);
+    }
+  }
+  
+  .today-income-section {
+    padding: 40upx 30upx;
+    text-align: center;
+    position: relative;
+    background: linear-gradient(180deg, #ffffff 0%, #f8fdfb 100%);
+    border-bottom: 1upx solid #f0f0f0;
+    
+    &:active {
+      background: linear-gradient(180deg, #f8fdfb 0%, #f0faf5 100%);
+    }
+    
+    .income-label {
+      font-size: 26upx;
+      color: #666;
+      margin-bottom: 16upx;
+    }
+    
+    .income-value {
+      display: flex;
+      align-items: baseline;
+      justify-content: center;
+      margin-bottom: 12upx;
+      
+      .currency-symbol {
+        font-size: 32upx;
+        color: #22C55E;
+        font-weight: 500;
+        margin-right: 8upx;
+      }
+      
+      .income-number {
+        font-size: 56upx;
+        font-weight: 700;
+        color: #22C55E;
+        line-height: 1;
+      }
+    }
+    
+    .income-hint {
+      font-size: 24upx;
+      color: #22C55E;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      &::after {
+        content: '>';
+        margin-left: 8upx;
+        font-weight: 600;
+      }
+    }
+  }
+  
+  .today-stats {
+    display: flex;
+    padding: 30upx 60upx;
+    
+    .stat-item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20upx 0;
+      position: relative;
+      
+      &:first-child::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 1upx;
+        height: 60upx;
+        background: #f0f0f0;
+      }
+      
+      &:active {
+        opacity: 0.8;
+      }
+      
+      .stat-icon {
+        width: 80upx;
+        height: 80upx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20upx;
+        
+        .stat-icon-img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      
+      .stat-content {
+        text-align: left;
+        
+        .stat-value {
+          font-size: 32upx;
+          font-weight: 600;
+          color: #333;
+          margin-bottom: 4upx;
+        }
+        
+        .stat-label {
+          font-size: 24upx;
+          color: #999;
+        }
+      }
+    }
+  }
+}
 .user-wrap {
   padding: 20upx 30upx 34upx 30upx;
   color: #fff;