修改自适应

backend/src/views/analytics/users/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="statistics-container">
     <el-row :gutter="20" class="data-overview">
-      <el-col :span="6" v-for="item in summaryData" :key="item.title">
+      <el-col :span="6" :xs="12" v-for="item in summaryData" :key="item.title">
         <el-card shadow="hover" class="data-card">
           <div class="card-content">
             <div class="icon-box" :style="{ backgroundColor: item.color }">
@@ -21,12 +21,12 @@
     </el-row>
 
     <el-row :gutter="20" class="charts-row">
-      <el-col :span="16">
+      <el-col :span="16" :xs="24">
         <el-card shadow="hover" header="用户增长趋势">
           <div ref="lineChartRef" class="chart-box"></div>
         </el-card>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" :xs="24">
         <el-card shadow="hover" header="用户等级分布">
           <div ref="pieChartRef" class="chart-box"></div>
         </el-card>
@@ -193,4 +193,89 @@ onUnmounted(() => {
   font-size: 16px;
   border-bottom: 1px solid #ebeef5;
 }
+
+// 手机端适配：概览卡片一行 2 个，图表卡片一行 1 个
+@media (max-width: 768px) {
+  .statistics-container {
+    padding: 12px;
+    overflow-x: hidden;
+
+    // el-row gutter 通过负 margin + col padding 实现，手机端缩小间距并防止横向溢出
+    .data-overview {
+      margin-left: -5px !important;
+      margin-right: -5px !important;
+      margin-bottom: 12px;
+
+      :deep(.el-col) {
+        padding-left: 5px !important;
+        padding-right: 5px !important;
+        margin-bottom: 10px;
+
+        &:nth-last-child(-n + 2) {
+          margin-bottom: 0;
+        }
+      }
+
+      .data-card {
+        :deep(.el-card__body) {
+          padding: 12px;
+        }
+
+        .card-content {
+          .icon-box {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            margin-right: 10px;
+            font-size: 18px;
+          }
+
+          .text-box {
+            min-width: 0;
+
+            .title {
+              font-size: 12px;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+
+            .value {
+              font-size: 18px;
+              margin: 2px 0;
+            }
+
+            .trend {
+              font-size: 11px;
+            }
+          }
+        }
+      }
+    }
+
+    .charts-row {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+
+      :deep(.el-col) {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        margin-bottom: 12px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .chart-box {
+        height: 280px;
+      }
+    }
+  }
+
+  :deep(.el-card__header) {
+    font-size: 14px;
+    padding: 12px 16px;
+  }
+}
 </style>