style(runScreen): 优化数据卡片和模块标题的样式布局

- 重构模块标题样式，使其更突出
- 调整数据卡片布局，改进数值显示方式
- 优化响应式设计，提升移动端显示效果

src/views/runData/runScreen/index.vue

@@ -6,144 +6,165 @@
     </div>
 
     <!-- 模块一：运行数据 -->
-    <div class="module-section">
+    <div class="module-title-wrapper">
       <div class="module-title">模块一：运行数据</div>
-      
-      <!-- 第一行 -->
-      <el-row :gutter="20" class="row-margin">
-        <!-- 左边50%：两个div -->
-        <el-col :span="12">
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="data-card">
-                <div class="card-title">旅检过检总人数</div>
-                <div class="card-value">{{ runData.travelInspectionTotal }}人</div>
+    </div>
+
+
+
+    <!-- 第一行 -->
+    <el-row :gutter="20" class="row-margin">
+      <!-- 左边50%：两个div -->
+      <el-col :span="12">
+        <el-row :gutter="20" style="height: 100%;">
+          <el-col :span="12">
+            <div class="data-card">
+              <div class="card-title">旅检过检总人数</div>
+              <div class="card-value-wrapper" style="color: #E8B140;">
+                <span class="card-value">{{ runData.travelInspectionTotal }}</span>
+                <span class="card-unit">人</span>
               </div>
-            </el-col>
-            <el-col :span="12">
-              <div class="data-card">
-                <div class="card-title">行检过检总行李数</div>
-                <div class="card-value">{{ runData.luggageInspectionTotal }}件</div>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="data-card">
+              <div class="card-title">行检过检总行李数</div>
+              <div class="card-value-wrapper" style="color: #26B6BE;">
+                <span class="card-value">{{ runData.luggageInspectionTotal }}</span>
+                <span class="card-unit">件</span>
               </div>
-            </el-col>
-          </el-row>
-        </el-col>
-        <!-- 右边50%：T1旅检过检人数折线图 -->
-        <el-col :span="12">
-          <div class="chart-card">
-            <div class="chart-title">T1旅检过检人数</div>
-            <div ref="t1TravelChart" class="chart-container"></div>
-          </div>
-        </el-col>
-      </el-row>
-
-      <!-- 第二行 -->
-      <el-row :gutter="20" class="row-margin">
-        <el-col :span="12">
-          <div class="chart-card">
-            <div class="chart-title">T2旅检过检人数</div>
-            <div ref="t2TravelChart" class="chart-container"></div>
-          </div>
-        </el-col>
-        <el-col :span="12">
-          <div class="chart-card">
-            <div class="chart-title">行检过检数</div>
-            <div ref="luggageChart" class="chart-container"></div>
-          </div>
-        </el-col>
-      </el-row>
-
-      <!-- 第三行 -->
-      <el-row :gutter="20" class="row-margin">
-        <el-col :span="8">
-          <div class="data-card">
-            <div class="card-title">国内货站总过检数</div>
-            <div class="card-value">{{ runData.domesticCargoTotal }}件</div>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="data-card">
-            <div class="card-title">国际货站总过检数</div>
-            <div class="card-value">{{ runData.internationalCargoTotal }}件</div>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="data-card">
-            <div class="card-title">道口车辆过检数</div>
-            <div class="card-value">{{ runData.vehicleInspectionTotal }}辆</div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+      <!-- 右边50%：T1旅检过检人数折线图 -->
+      <el-col :span="12">
+        <div class="chart-card">
+          <div class="chart-title">T1旅检过检人数</div>
+          <div ref="t1TravelChart" class="chart-container"></div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 第二行 -->
+    <el-row :gutter="20" class="row-margin">
+      <el-col :span="12">
+        <div class="chart-card">
+          <div class="chart-title">T2旅检过检人数</div>
+          <div ref="t2TravelChart" class="chart-container"></div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="chart-card">
+          <div class="chart-title">行检过检数</div>
+          <div ref="luggageChart" class="chart-container"></div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 第三行 -->
+    <el-row :gutter="20" class="row-margin">
+      <el-col :span="8">
+        <div class="data-card">
+          <div class="card-title">国内货站总过检数</div>
+          <div class="card-value-wrapper" style="color: #E8B140;padding: 30px;">
+            <span class="card-value">{{ runData.domesticCargoTotal }}</span>
+            <span class="card-unit">件</span>
           </div>
-        </el-col>
-      </el-row>
-
-      <!-- 第四行 -->
-      <el-row :gutter="20" class="row-margin">
-        <el-col :span="12">
-          <div class="chart-card">
-            <div class="chart-title">货物过检数</div>
-            <div ref="cargoChart" class="chart-container"></div>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="data-card">
+          <div class="card-title">国际货站总过检数</div>
+          <div class="card-value-wrapper" style="color: #26B6BE;padding: 30px;">
+            <span class="card-value">{{ runData.internationalCargoTotal }}</span>
+            <span class="card-unit">件</span>
           </div>
-        </el-col>
-        <el-col :span="12">
-          <div class="chart-card">
-            <div class="chart-title">车辆过检数</div>
-            <div ref="vehicleChart" class="chart-container"></div>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="data-card">
+          <div class="card-title">道口车辆过检数</div>
+          <div class="card-value-wrapper" style="color: #5680C9;padding: 30px;">
+            <span class="card-value">{{ runData.vehicleInspectionTotal }}</span>
+            <span class="card-unit">辆</span>
           </div>
-        </el-col>
-      </el-row>
-    </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 第四行 -->
+    <el-row :gutter="20" class="row-margin">
+      <el-col :span="12">
+        <div class="chart-card">
+          <div class="chart-title">货物过检数</div>
+          <div ref="cargoChart" class="chart-container"></div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="chart-card">
+          <div class="chart-title">车辆过检数</div>
+          <div ref="vehicleChart" class="chart-container"></div>
+        </div>
+      </el-col>
+    </el-row>
+
 
     <!-- 模块二：查获/收缴数据 -->
-    <div class="module-section">
+    <div class="module-title-wrapper">
       <div class="module-title">模块二：查获/收缴数据</div>
-      
-      <!-- 第一行 -->
-      <el-row :gutter="20" class="row-margin">
-        <el-col :span="12">
-          <div class="chart-card">
-            <div class="chart-title">查获数据</div>
-            <div ref="seizePieChart" class="chart-container"></div>
-          </div>
-        </el-col>
-        <el-col :span="12">
-          <div class="chart-card">
-            <div class="chart-title">大队查获数对比图</div>
-            <div ref="teamSeizeBarChart" class="chart-container"></div>
-          </div>
-        </el-col>
-      </el-row>
-
-      <!-- 第二行 -->
-      <el-row :gutter="20" class="row-margin">
-        <el-col :span="12">
-          <div class="chart-card">
-            <div class="chart-title">T1区域各大队查获数对比图</div>
-            <div ref="t1TeamBarChart" class="chart-container"></div>
-          </div>
-        </el-col>
-        <el-col :span="12">
-          <div class="chart-card">
-            <div class="chart-title">T2区域各大队查获数对比图</div>
-            <div ref="t2TeamBarChart" class="chart-container"></div>
-          </div>
-        </el-col>
-      </el-row>
-
-      <!-- 第三行 -->
-      <el-row :gutter="20" class="row-margin">
-        <el-col :span="12">
-          <div class="chart-card">
-            <div class="chart-title">不合格充电宝劝阻数组</div>
-            <div ref="powerBankPieChart" class="chart-container"></div>
-          </div>
-        </el-col>
-        <el-col :span="12">
-          <div class="chart-card">
-            <div class="chart-title">待检区收缴禁限带物品数据表</div>
-            <div ref="waitingAreaPieChart" class="chart-container"></div>
-          </div>
-        </el-col>
-      </el-row>
     </div>
+
+
+
+    <!-- 第一行 -->
+    <el-row :gutter="20" class="row-margin">
+      <el-col :span="12">
+        <div class="chart-card">
+          <div class="chart-title">查获数据</div>
+          <div ref="seizePieChart" class="chart-container"></div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="chart-card">
+          <div class="chart-title">大队查获数对比图</div>
+          <div ref="teamSeizeBarChart" class="chart-container"></div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 第二行 -->
+    <el-row :gutter="20" class="row-margin">
+      <el-col :span="12">
+        <div class="chart-card">
+          <div class="chart-title">T1区域各大队查获数对比图</div>
+          <div ref="t1TeamBarChart" class="chart-container"></div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="chart-card">
+          <div class="chart-title">T2区域各大队查获数对比图</div>
+          <div ref="t2TeamBarChart" class="chart-container"></div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 第三行 -->
+    <el-row :gutter="20" class="row-margin">
+      <el-col :span="12">
+        <div class="chart-card">
+          <div class="chart-title">不合格充电宝劝阻数组</div>
+          <div ref="powerBankPieChart" class="chart-container"></div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="chart-card">
+          <div class="chart-title">待检区收缴禁限带物品数据表</div>
+          <div ref="waitingAreaPieChart" class="chart-container"></div>
+        </div>
+      </el-col>
+    </el-row>
+
   </div>
 </template>
 
@@ -436,7 +457,7 @@ function handleResize() {
     teamSeizeBarChartInstance, t1TeamBarChartInstance, t2TeamBarChartInstance,
     powerBankPieChartInstance, waitingAreaPieChartInstance
   ]
-  
+
   charts.forEach(chart => {
     if (chart) {
       chart.resize()
@@ -460,13 +481,13 @@ onUnmounted(() => {
     teamSeizeBarChartInstance, t1TeamBarChartInstance, t2TeamBarChartInstance,
     powerBankPieChartInstance, waitingAreaPieChartInstance
   ]
-  
+
   charts.forEach(chart => {
     if (chart) {
       chart.dispose()
     }
   })
-  
+
   window.removeEventListener('resize', handleResize)
 })
 </script>
@@ -490,21 +511,30 @@ onUnmounted(() => {
   margin: 0;
 }
 
-.module-section {
-  margin-bottom: 30px;
+.module-title-wrapper {
+  text-align: center;
+  width: 100%;
   background: #fff;
   border-radius: 8px;
-  padding: 20px;
+  padding: 15px 20px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
 }
 
 .module-title {
   font-size: 20px;
   font-weight: bold;
   color: #333;
+  margin: 0;
+}
+
+.module-section {
+  width: 100%;
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   margin-bottom: 20px;
-  padding-bottom: 10px;
-  border-bottom: 2px solid #409eff;
 }
 
 .row-margin {
@@ -512,27 +542,41 @@ onUnmounted(() => {
 }
 
 .data-card {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #fff;
   border-radius: 8px;
-  padding: 20px;
-  color: white;
-  text-align: center;
-  height: 120px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 15px;
+  color: #333;
+  height: 100%;
+
+
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e6e8eb;
 }
 
 .card-title {
   font-size: 16px;
-  margin-bottom: 10px;
-  opacity: 0.9;
+  color: #333;
+  font-weight: bold;
+  text-align: left;
+}
+
+.card-value-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .card-value {
-  font-size: 28px;
+  font-size: 50px;
   font-weight: bold;
+
+}
+
+.card-unit {
+  font-size: 16px;
+
 }
 
 .chart-card {
@@ -549,7 +593,7 @@ onUnmounted(() => {
   font-weight: bold;
   color: #333;
   margin-bottom: 15px;
-  text-align: center;
+  text-align: left;
 }
 
 .chart-container {
@@ -562,11 +606,11 @@ onUnmounted(() => {
   .data-card {
     height: 100px;
   }
-  
+
   .card-value {
-    font-size: 24px;
+    font-size: 30px;
   }
-  
+
   .chart-card {
     height: 250px;
   }
@@ -576,24 +620,24 @@ onUnmounted(() => {
   .run-screen-container {
     padding: 10px;
   }
-  
+
   .module-section {
     padding: 15px;
   }
-  
+
   .data-card {
     height: 80px;
     padding: 15px;
   }
-  
+
   .card-title {
     font-size: 14px;
   }
-  
+
   .card-value {
     font-size: 20px;
   }
-  
+
   .chart-card {
     height: 200px;
   }