Sfoglia il codice sorgente

refactor: admin-h5 首页指标卡片去除图标,统一文字大小

4 个指标卡片(今日订单/消费总额/平均消费/平均时长)移除图标,保留简洁的居中数值+标签布局,数值统一 38rpx 字重 700

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
skyline 1 giorno fa
parent
commit
d50334180f
1 ha cambiato i file con 5 aggiunte e 35 eliminazioni
  1. 5 35
      admin-h5/src/pages/index/index.vue

+ 5 - 35
admin-h5/src/pages/index/index.vue

@@ -75,16 +75,10 @@
       <!-- 主指标:订单 + 消费 -->
       <view class="metrics-primary">
         <view class="metric-card-lg">
-          <view class="metric-lg-icon">
-            <AppIcon name="clipboard" :size="20" color="#C6171E" />
-          </view>
           <text class="metric-lg-value">{{ todayOrders }}</text>
           <text class="metric-lg-label">今日订单</text>
         </view>
         <view class="metric-card-lg">
-          <view class="metric-lg-icon">
-            <AppIcon name="dollar" :size="20" color="#C6171E" />
-          </view>
           <text class="metric-lg-value">¥{{ formatAmount(todayConsumption) }}</text>
           <text class="metric-lg-label">消费总额</text>
         </view>
@@ -93,16 +87,10 @@
       <!-- 次指标:均价 + 时长 -->
       <view class="metrics-secondary">
         <view class="metric-card-sm">
-          <view class="metric-sm-icon">
-            <AppIcon name="trending-up" :size="18" color="#C6171E" />
-          </view>
           <text class="metric-sm-value">¥{{ formatAmount(avgOrderPrice) }}</text>
           <text class="metric-sm-label">平均消费</text>
         </view>
         <view class="metric-card-sm">
-          <view class="metric-sm-icon">
-            <AppIcon name="clock" :size="18" color="#C6171E" />
-          </view>
           <text class="metric-sm-value">{{ avgDuration }} 分钟</text>
           <text class="metric-sm-label">平均时长</text>
         </view>
@@ -419,24 +407,15 @@ onPullDownRefresh(async () => {
   gap: 12rpx;
   transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.metric-lg-icon {
-  width: 64rpx;
-  height: 64rpx;
-  border-radius: 18rpx;
-  background: #F5F7FA;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 .metric-card-lg:active {
   transform: translateY(-2rpx);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
 }
 .metric-lg-value {
-  font-size: 44rpx;
+  font-size: 38rpx;
   font-weight: 700;
   color: #1A1A1A;
-  line-height: 1;
+  line-height: 1.2;
 }
 .metric-lg-label {
   font-size: 24rpx;
@@ -464,23 +443,14 @@ onPullDownRefresh(async () => {
   transform: translateY(-2rpx);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
 }
-.metric-sm-icon {
-  width: 56rpx;
-  height: 56rpx;
-  border-radius: 16rpx;
-  background: #F5F7FA;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 .metric-sm-value {
-  font-size: 30rpx;
-  font-weight: 600;
+  font-size: 38rpx;
+  font-weight: 700;
   color: #1A1A1A;
   line-height: 1.2;
 }
 .metric-sm-label {
-  font-size: 22rpx;
+  font-size: 24rpx;
   color: #999999;
 }