优化细节

pages/mall/admin/user/Statistic.uvue

@@ -24,14 +24,14 @@
       </view>
     </view>
 
-    <!-- 用户概况卡片区 (使用统一响应式网格) -->
+    <!-- 用户概况卡片区 (使用 6-2-1 响应式网格) -->
     <view class="section-card">
       <view class="section-header">
         <text class="section-title">用户概况</text>
-        <text class="info-icon">ⓘ</text>
+        <text class="info-icon">❓</text>
       </view>
 
-      <view class="kpi-grid">
+      <view class="kpi-grid-6">
         <view class="kpi-card" v-for="item in kpiData" :key="item.title">
           <view class="kpi-icon-box" :style="{ backgroundColor: item.bg }">
             <text class="kpi-icon">{{ item.icon }}</text>
@@ -41,7 +41,10 @@
             <text class="kpi-value">{{ item.value }}</text>
             <view class="kpi-meta">
               <text class="meta-label">环比增长：</text>
-              <text class="meta-value" :class="item.trend">{{ item.percent }} {{ item.trend === 'up' ? '▲' : '▼' }}</text>
+              <text class="meta-value" :class="item.trend">
+                {{ item.percent }} 
+                <text class="trend-icon">{{ item.trend === 'up' ? '▲' : '▼' }}</text>
+              </text>
             </view>
           </view>
         </view>
@@ -82,12 +85,12 @@ import AnalyticsUserMapTable from '@/components/analytics/AnalyticsUserMapTable.
 import AnalyticsUserGenderSection from '@/components/analytics/AnalyticsUserGenderSection.uvue'
 
 const kpiData = [
-  { title: '累计用户', value: '80834', percent: '0.84%', trend: 'up', icon: '👤', bg: '#f3e8ff' },
-  { title: '访客数', value: '1138', percent: '1.04%', trend: 'down', icon: '👤', bg: '#e0f2fe' },
-  { title: '浏览量', value: '9519', percent: '2.34%', trend: 'down', icon: '👁️', bg: '#dcfce7' },
-  { title: '新增用户数', value: '680', percent: '4.36%', trend: 'down', icon: '👤', bg: '#ffedd5' },
-  { title: '成交用户数', value: '132', percent: '11.86%', trend: 'up', icon: '👤', bg: '#f3e8ff' },
-  { title: '付费会员数', value: '79', percent: '7.05%', trend: 'down', icon: '💎', bg: '#f3e8ff' }
+  { title: '累计用户', value: '80887', percent: '0.79%', trend: 'up', icon: '👥', bg: '#efebff' },
+  { title: '访客数', value: '1076', percent: '11.65%', trend: 'down', icon: '👤', bg: '#e8f4ff' },
+  { title: '浏览量', value: '8843', percent: '12.09%', trend: 'down', icon: '📁', bg: '#e6fff1' },
+  { title: '新增用户数', value: '635', percent: '14.65%', trend: 'down', icon: '👤', bg: '#fff7e6' },
+  { title: '成交用户数', value: '122', percent: '0.81%', trend: 'down', icon: '👥', bg: '#f2f0ff' },
+  { title: '付费会员数', value: '76', percent: '13.63%', trend: 'down', icon: '💎', bg: '#f2f0ff' }
 ]
 
 const chartData = {
@@ -198,70 +201,80 @@ function onExport() {
 
 .section-card {
   background-color: #fff;
-  border-radius: 4px;
+  border-radius: 8px;
   padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
 }
 
 .section-header {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 8px;
   margin-bottom: 24px;
 }
 
 .section-title {
   font-size: 16px;
-  font-weight: 500;
-  color: #262626;
+  font-weight: 600;
+  color: #333;
 }
 
 .info-icon {
+  margin-left: 6px;
+  color: #999;
   font-size: 14px;
-  color: #bfbfbf;
 }
 
-/* kpi-row 已废弃，采用全局 kpi-grid */
+/* kpi-row 已废弃，采用全局 kpi-grid-6 */
 .kpi-card {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 16px;
-  padding: 8px;
-  min-width: 0; /* 允许收缩 */
+  padding: 16px 8px;
+  min-width: 0;
 }
 
 .kpi-icon-box {
-  width: 44px;
-  height: 44px;
+  width: 48px;
+  height: 48px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-right: 12px;
+  flex-shrink: 0;
 }
 
 .kpi-icon { font-size: 20px; }
 
 .kpi-content {
+  flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 4px;
 }
 
-.kpi-label { font-size: 14px; color: #8c8c8c; }
-.kpi-value { font-size: 24px; font-weight: 500; color: #262626; }
+.kpi-label { font-size: 13px; color: #666; margin-bottom: 4px; }
+.kpi-value { font-size: 24px; font-weight: 700; color: #333; line-height: 1.2; margin-bottom: 4px; }
 
 .kpi-meta {
   display: flex;
   flex-direction: row;
   align-items: center;
-  font-size: 12px;
+  flex-wrap: wrap;
 }
 
-.meta-label { color: #8c8c8c; }
-.meta-value.up { color: #ff4d4f; }
+.meta-label { font-size: 12px; color: #999; }
+.meta-value { font-size: 12px; font-weight: 500; }
+.meta-value.up { color: #f5222d; }
 .meta-value.down { color: #52c41a; }
 
+.trend-icon {
+  font-size: 10px;
+  margin-left: 2px;
+}
+
 .chart-container {
   border-top: 1px solid #f0f0f0;
   padding-top: 24px;
@@ -281,14 +294,18 @@ function onExport() {
 }
 
 .analysis-row {
-  display: flex;
-  flex-direction: row;
-  gap: 16px;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 20px;
   margin-top: 16px;
   width: 100%;
 }
 
-@media (max-width: 1200px) {
+.map-col, .gender-col {
+  min-width: 0;
+}
+
+@media (max-width: 1199.98px) {
   .filter-card {
     flex-direction: column;
     align-items: flex-start;
@@ -304,20 +321,11 @@ function onExport() {
   }
   
   .analysis-row {
-    flex-direction: column;
+    grid-template-columns: 1fr;
   }
   
   .map-col, .gender-col {
     width: 100%;
-    flex: none;
   }
 }
-
-.map-col {
-  flex: 7;
-}
-
-.gender-col {
-  flex: 3;
-}
 </style>