修改自适应

backend/src/views/apps/oa/dashboard/index.vue

@@ -2,7 +2,7 @@
   <div class="erp-dashboard">
     <!-- 第一行统计卡片 -->
     <el-row :gutter="16" class="stat-row">
-      <el-col :span="4" v-for="(item, index) in firstRowStats" :key="'first-' + index">
+      <el-col :span="4" :xs="12" v-for="(item, index) in firstRowStats" :key="'first-' + index">
         <div class="stat-card">
           <div class="stat-header">
             <span class="stat-label">{{ item.label }}</span>
@@ -18,7 +18,7 @@
 
     <!-- 第二行统计卡片 -->
     <el-row :gutter="16" class="stat-row" style="margin-top: 16px;">
-      <el-col :span="4" v-for="(item, index) in secondRowStats" :key="'second-' + index">
+      <el-col :span="4" :xs="12" v-for="(item, index) in secondRowStats" :key="'second-' + index">
         <div class="stat-card">
           <div class="stat-header">
             <span class="stat-label">{{ item.label }}</span>
@@ -34,19 +34,19 @@
 
     <!-- 图表区域 -->
     <el-row :gutter="16" class="chart-row" style="margin-top: 16px;">
-      <el-col :span="8">
+      <el-col :span="8" :xs="24">
         <div class="chart-card">
           <div class="chart-title">销售统计</div>
           <div ref="salesChartRef" class="chart-container"></div>
         </div>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" :xs="24">
         <div class="chart-card">
           <div class="chart-title">零售统计</div>
           <div ref="retailChartRef" class="chart-container"></div>
         </div>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" :xs="24">
         <div class="chart-card">
           <div class="chart-title">采购统计</div>
           <div ref="purchaseChartRef" class="chart-container"></div>
@@ -324,6 +324,66 @@ onUnmounted(() => {
   .chart-container {
     flex: 1;
     min-height: 0;
+    width: 100%;
+  }
+}
+
+// 手机端适配：统计卡片每行 2 个，图表卡片每行 1 个
+@media (max-width: 768px) {
+  .erp-dashboard {
+    overflow-x: hidden;
+  }
+
+  // el-row gutter 通过负 margin + col padding 实现，手机端缩小间距并防止横向溢出
+  .stat-row {
+    margin-left: -4px !important;
+    margin-right: -4px !important;
+
+    :deep(.el-col) {
+      padding-left: 4px !important;
+      padding-right: 4px !important;
+      margin-bottom: 8px;
+
+      &:nth-last-child(-n + 2) {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .chart-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;
+      }
+    }
+  }
+
+  // 一行两个统计卡片，缩小内边距与字号防止挤压
+  .stat-card {
+    padding: 10px 12px;
+
+    .stat-header {
+      margin-bottom: 8px;
+
+      .stat-label {
+        font-size: 12px;
+      }
+    }
+
+    .stat-value .number {
+      font-size: 16px;
+    }
+  }
+
+  .chart-card {
+    height: 280px;
   }
 }
 </style>