修改数据展示缺陷，统一页面

src/components/atmpollution/airsampleChart.vue

@@ -295,7 +295,7 @@ async function initChart() {
           titleText: '各区域空气颗粒物重量指标平均值' ,
         } 
       : { 
-          unit: 'ug/m³',  // 假设体积单位为ug/m³，可根据实际需求修改
+          unit: 'ug/m³',  // 体积单位为ug/m³，可根据实际需求修改
           titleText: '各区域空气颗粒物体积指标平均值' ,
         };
 
@@ -347,11 +347,12 @@ async function initChart() {
       })),
       legend: { //图例
         data: chartData.series.map(s => s.name),
-        bottom: 10,
+        top:'10%',
+        right:'5%',
         textStyle:{fontSize:18}
       },
       grid: {
-        left: '5%', right: '5%', bottom: '20%', top: '15%',
+        left: '5%', right: '5%', bottom: '5%', top: '25%',
         containLabel: true,
         axisLabel:{fontSize:18}
       }
@@ -395,7 +396,7 @@ onUnmounted(() => {
 
 .chart-box {
   width: 100%;
-  height: 600px;
+  height: 500px;
   min-height: 400px;
   background: #fff;
   border: 1px solid #e9ecef;

src/components/atmpollution/airsampleLine.vue

@@ -22,7 +22,7 @@
         <!-- 表格 -->
         <div class="w-full md:w-1/2 overflow-x-auto">
           <table class="min-w-full divide-y divide-gray-200">
-            <thead class="bg-gray-50">
+            <thead class="bg-white">
               <tr>
                 <th 
                   v-for="(col, index) in displayColumns" 
@@ -42,7 +42,7 @@
             </thead>
             <tbody class="bg-white divide-y divide-gray-200">
               <tr v-for="(item, rowIndex) in sortedData" :key="rowIndex" 
-                  class="hover:bg-gray-50 transition-colors duration-150">
+                  class="hover:bg-white transition-colors duration-150">
                 <td 
                   v-for="(col, colIndex) in displayColumns" 
                   :key="colIndex"
@@ -420,7 +420,8 @@ onUnmounted(() => {
 table {
   border-collapse: collapse;
   table-layout: fixed; 
-  width: 100%;         
+  width: 100%; 
+  background-color: white;        
 }
 
 th, td {
@@ -431,6 +432,7 @@ th, td {
   white-space: normal; 
   overflow: hidden;    
   text-overflow: ellipsis; 
+  background-color: white;
 }
 
 /* 地图 & 图表容器 */

src/components/atmpollution/atmcompanyline.vue

@@ -190,6 +190,7 @@ onMounted(() => {
 /* 最基础的表格样式 */
 .table-container {
   overflow-x: auto;
+  background-color: white;
 }
 .data-table {
   width: 100%;

src/components/atmpollution/heavyMetalEnterprisechart.vue

@@ -235,7 +235,7 @@ const initChart = (data) => {
       },
       
       series: data.series,
-      grid: { left: '5%', right: '5%', bottom: '20%', containLabel: true }
+      grid: { left: '5%', right: '5%', bottom: '5%', containLabel: true }
     });
     console.log('✅ 图表初始化成功');
   } catch (err) {

src/components/irrpollution/crossSectionSamplelineData.vue

@@ -166,28 +166,31 @@ onMounted(async () => {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
+.data-container {
+  width: 100%;
+  overflow-x: auto;
+  padding: 0;
+  margin: 0;
+}
 
 .data-table {
   width: 100%;
   border-collapse: collapse;
-  min-width: 800px;
 }
 
 .data-table th, .data-table td {
   padding: 12px 15px;
   text-align: center;
   border: 1px solid #e5e7eb;
+  background-color: white;
 }
 
 .data-table th {
-  background-color: #f3f4f6;
+  background-color: white;
   font-weight: bold;
   color: #1f2937;
 }
 
-.data-table tr:nth-child(even) {
-  background-color: #f9fafb;
-}
 
 .data-table tr:hover {
   background-color: #f3f4f6;

src/components/irrpollution/crossSetionData2.vue

@@ -166,7 +166,7 @@ const updateChart = () => {
         type: 'rect',
         left: '5%',   // 与 grid.left 对齐
         right: '5%',  // 与 grid.right 对齐
-        bottom: '15%',// 与 grid.bottom 对齐（位于绘图区域底部）
+        bottom: '5%',// 与 grid.bottom 对齐（位于绘图区域底部）
         height: 30,   // 圆弧高度
         // 顶部左右圆角（半径 15，与高度 30 配合形成上凸圆弧）
         borderRadius: [15, 15, 0, 0], 

src/components/irrpollution/waterassaydata2.vue

@@ -233,17 +233,18 @@ const initChart = ({ regions, series, totalSamples }) => {
       end: 100
     }],
     series,
-    legend: { 
+    legend: { //图例
       data: series.map(s => s.name), 
-      bottom: 10,
+      top:'10%',
+      right:'5%',
       textStyle: {
         fontSize: 15
       }
     },
-    grid: { 
+    grid: { //整个图的位置
       left: '3%', 
       right: '3%', 
-      bottom: '15%', 
+      bottom: '5%', 
       containLabel: true 
     },
   };

src/components/irrpollution/waterdataline.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="container mx-auto px-4 py-8">
+  <div class="line-page">
+    <div class="container mx-auto px-4 py-8">
     <div class="bg-white rounded-xl shadow-lg overflow-hidden">
       
       
@@ -31,7 +32,7 @@
       <!-- 数据表格 -->
       <div v-else-if="filteredData.length > 0" class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
+          <thead class="bg-white">
             <tr>
               <th 
                 v-for="(col, index) in displayColumns" 
@@ -79,7 +80,7 @@
       </div>
   
       <!-- 数据统计 -->
-      <div class="p-4 bg-gray-50 border-t border-gray-200">
+      <div class="p-4 bg-white border-t border-gray-200">
         <div class="flex flex-col md:flex-row justify-between items-center">
           <div class="text-sm text-gray-500 mb-2 md:mb-0">
             共 <span class="font-medium text-gray-900">{{ filteredData.length }}</span> 条数据
@@ -88,6 +89,8 @@
       </div>
     </div>
   </div>
+  </div>
+  
 </template>
 
 <script setup>
@@ -167,6 +170,15 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.line-page {
+    width: 100%;
+  margin: 0 auto 24px;
+  background-color: white;
+  border-radius: 12px;
+  padding: 20px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+} 
 /* 布局 */
 .container {
   max-width: 1280px;
@@ -202,12 +214,14 @@ onMounted(() => {
 table { 
   width: 100%; 
   border-collapse: collapse; /* 合并边框线 */
+  background-color: white;
 }
 th, td {
   border: 1px solid #d1d5db; /* 灰色边框 */
   text-align: center; /* 内容居中 */
   padding: 12px 8px; /* 内边距优化 */
   font-size: 14px;
+  background-color: white;
 }
 .px-6 { padding: 0 1.5rem; }
 .py-4 { padding: 1rem 0; }

src/views/User/HmOutFlux/atmosDeposition/airSampleData.vue

@@ -51,7 +51,7 @@ const calculationMethod = ref('weight')
   height: 100vh; /* 整屏高度 */
   padding: 0;
   box-sizing: border-box;
-  background-color: #f5f7fa;
+  
   gap: 20px;
   margin: 0;
 }
@@ -80,21 +80,19 @@ const calculationMethod = ref('weight')
 .point-map {
     flex: 0 0 70%;
     margin-bottom: 20px;
-    background-color: white;
+    
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,1);
     overflow: visible;
 }
 
 .point-line {
-    background-color: white;
     border-radius: 12px;/*圆角 */
     box-shadow: 0 2px 8px rgba(0, 0,0, 0.08);
     padding: 16px;/*内部间距 */
     box-sizing: border-box;
 }
 .charts-line{
-  background-color: white;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   padding: 16px;

src/views/User/HmOutFlux/atmosDeposition/heavyMetalEnterprise.vue

@@ -39,7 +39,6 @@ import HeavyMetalEnterprisechart from '@/components/atmpollution/heavyMetalEnter
   height: 100vh; /* 整屏高度 */
   padding: 0;
   box-sizing: border-box;
-  background-color: #f5f7fa;
   gap: 20px;
   margin: 0;
   position: relative !important; /* 防止被 Leaflet 修改 */
@@ -56,21 +55,21 @@ import HeavyMetalEnterprisechart from '@/components/atmpollution/heavyMetalEnter
 .point-map {
   flex: 0 0 70%;
     margin-bottom: 20px;
-    background-color: white;
+    
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,1);
     overflow: visible !important;
 }
 
 .point-line {
-    background-color: white;
+    
     border-radius: 12px;/*圆角 */
     box-shadow: 0 2px 8px rgba(0, 0,0, 0.08);
     padding: 16px;/*内部间距 */
     box-sizing: border-box;
 }
 .charts-line{
-  background-color: white;
+  
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   padding: 16px;

src/views/User/HmOutFlux/irrigationWater/irriWaterSampleData.vue

@@ -49,7 +49,7 @@ import irrwatermap from '@/components/irrpollution/irrwatermap.vue';
   min-height: 100vh;
   padding: 20px;
   box-sizing: border-box;
-  background-color: #f5f7fa;
+  
   gap: 20px;
   margin: 0;
   position: relative !important; /* 防止被 Leaflet 修改 */
@@ -61,7 +61,7 @@ import irrwatermap from '@/components/irrpollution/irrwatermap.vue';
   min-height: 600px; /* 最小高度保证显示 */
   max-height: 70vh; /* 最大高度限制，避免溢出 */
   margin-bottom: 20px;
-  background-color: white;
+  
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 弱化阴影，避免视觉冲突 */
   position: relative;
@@ -69,19 +69,17 @@ import irrwatermap from '@/components/irrpollution/irrwatermap.vue';
 }
 
 .point-line {
-    background-color: white;
+    
     border-radius: 12px;/*圆角 */
     box-shadow: 0 2px 8px rgba(0, 0,0, 0.08);
     padding: 16px;/*内部间距 */
     box-sizing: border-box;
 }
 .charts-line{
-  background-color: white;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   padding: 16px;
   box-sizing: border-box;
-  max-width: 1800px;
   margin: 0 auto;
   width: 100%;
 }