保留页面布局

pages/mall/admin/user/Statistic.uvue

@@ -24,14 +24,14 @@
       </view>
     </view>
 
-    <!-- 用户概况卡片区 -->
+    <!-- 用户概况卡片区 (使用统一响应式网格) -->
     <view class="section-card">
       <view class="section-header">
         <text class="section-title">用户概况</text>
         <text class="info-icon">ⓘ</text>
       </view>
 
-      <view class="kpi-row">
+      <view class="kpi-grid">
         <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>
@@ -221,22 +221,14 @@ function onExport() {
   color: #bfbfbf;
 }
 
-.kpi-row {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 20px;
-  margin-bottom: 40px;
-}
-
+/* kpi-row 已废弃，采用全局 kpi-grid */
 .kpi-card {
-  flex: 1;
-  min-width: 200px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 16px;
   padding: 8px;
+  min-width: 0; /* 允许收缩 */
 }
 
 .kpi-icon-box {
@@ -296,6 +288,31 @@ function onExport() {
   width: 100%;
 }
 
+@media (max-width: 1200px) {
+  .filter-card {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+  
+  .filter-item {
+    width: 100%;
+  }
+  
+  .select-box, .date-picker-box {
+    flex: 1;
+  }
+  
+  .analysis-row {
+    flex-direction: column;
+  }
+  
+  .map-col, .gender-col {
+    width: 100%;
+    flex: none;
+  }
+}
+
 .map-col {
   flex: 7;
 }