样式调整

.env

@@ -1,3 +1,3 @@
-VITE_API_URL= 'http://localhost:5000'
+VITE_API_URL= 'https://www.soilgd.com:5000'
 VITE_TMAP_KEY='2R4BZ-FF4RM-Q6C6U-6TCJL-O2EN5-DVFH5'
 'https://www.soilgd.com:5000''https://127.0.0.1:5000'

components.d.ts

@@ -23,6 +23,7 @@ declare module 'vue' {
     CrossSetionData1: typeof import('./src/components/irrpollution/crossSetionData1.vue')['default']
     CrossSetionData2: typeof import('./src/components/irrpollution/crossSetionData2.vue')['default']
     CrossSetionTencentmap: typeof import('./src/components/irrpollution/crossSetionTencentmap.vue')['default']
+    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
@@ -43,6 +44,7 @@ declare module 'vue' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
@@ -54,6 +56,8 @@ declare module 'vue' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     HeavyMetalEnterprisechart: typeof import('./src/components/atmpollution/heavyMetalEnterprisechart.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
@@ -75,4 +79,7 @@ declare module 'vue' {
     Waterdataline: typeof import('./src/components/irrpollution/waterdataline.vue')['default']
     WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/components/layout/AppLayout.vue

@@ -527,7 +527,7 @@ const mainStyle = computed(() => {
 .welcome-text {
   font-size: 28px;
   font-weight: 500;
-  color: #333 !important;
+  color: #ffffff !important;
   /* 深色文字 */
 }
 
@@ -620,7 +620,6 @@ const mainStyle = computed(() => {
 .logo {
   height: 60px;
 }
-
 .project-name {
   font-size: 48px;
   font-weight: bold;

src/views/User/HmOutFlux/agriInput/farmInputSamplingDesc.vue

@@ -1,97 +1,187 @@
 <template>
   <div class="sampling-process">
-    <h2>1. 实地走访调查农业投入品使用情况:</h2>
-    <p>
-      实地走访调查项目实施区域作物种植面积、氮肥、磷肥、钾肥、复合肥、商品有机肥、农药和农家肥等年均施用量。
-      后期方案可利用无人机光谱识别技术调查项目区内的种植结构，再根据具体种植结构详细调查施肥习惯（如水稻田、蔬菜地等等）。
-    </p>
-
-    <div class="image-row">
-      <div class="image-container">
-        <el-image :src="image1" alt="农业投入品使用情况" class="sampling-image"></el-image>
-        <p class="image-caption">
-          图1 农业投入品使用情况
-        </p>
+    <!-- 第一部分：实地走访调查 -->
+    <div class="process-section">
+      <div class="section-header">
+        <div class="section-number">1</div>
+        <h2>实地走访调查农业投入品使用情况</h2>
       </div>
-    </div>
-
-    <h2>2.市面流通的农业投入品样品采集:</h2>
-    <p>
-      （1）合计采集市面上流通的及相关行业生产的各种农业投入品合计137份;<br>
-      （2）种类包含但不限于磷肥、钾肥、复合肥、叶面肥、常用农药、农家肥、地膜等;
-    </p>
-
-    <div class="image-row">
-      <div class="image-container">
-        <el-image :src="image2" alt="农业化肥采集" class="sampling-image"></el-image>
-        <p class="image-caption">
-          图2-1 农业化肥采集
-        </p>
-      </div>
-      <div class="image-container">
-        <el-image :src="image3" alt="农药采集" class="sampling-image"></el-image>
-        <p class="image-caption">
-          图2-2 农药采集
-        </p>
+      
+      <div class="section-content">
+        <div class="info-card">
+          <div class="card-icon">🚜</div>
+          <div class="card-content">
+            <p>
+              实地走访调查项目实施区域作物种植面积、氮肥、磷肥、钾肥、复合肥、商品有机肥、
+              农药和农家肥等年均施用量。
+            </p>
+            <p>
+              <span class="highlight">后期方案：</span>利用无人机光谱识别技术调查项目区内的种植结构，
+              再根据具体种植结构详细调查施肥习惯（如水稻田、蔬菜地等）。
+            </p>
+          </div>
+        </div>
+        
+        <div class="image-container">
+          <el-image :src="image1" alt="农业投入品使用情况" class="sampling-image"></el-image>
+          <p class="image-caption">图1 农业投入品使用情况</p>
+        </div>
       </div>
-      <div class="image-container">
-        <el-image :src="image4" alt="农膜采集" class="sampling-image"></el-image>
-        <p class="image-caption">
-          图2-3 农膜采集
-        </p>
+    </div>
+    
+    <!-- 第二部分：样品采集 -->
+    <div class="process-section">
+      <div class="section-header">
+        <div class="section-number">2</div>
+        <h2>市面流通的农业投入品样品采集</h2>
       </div>
-      <div class="image-container">
-        <el-image :src="image5" alt="有机肥采集" class="sampling-image"></el-image>
-        <p class="image-caption">
-          图2-4 有机肥采集
-        </p>
+      
+      <div class="section-content">
+        <div class="collection-info">
+          <div class="collection-card">
+            <div class="collection-icon">📦</div>
+            <div class="collection-text">
+              <h3>样品数量</h3>
+              <p>合计采集市面上流通的及相关行业生产的各种农业投入品共137份</p>
+            </div>
+          </div>
+          
+          <div class="collection-card">
+            <div class="collection-icon">📋</div>
+            <div class="collection-text">
+              <h3>样品种类</h3>
+              <p>包含但不限于：磷肥、钾肥、复合肥、叶面肥、常用农药、农家肥、地膜等</p>
+            </div>
+          </div>
+        </div>
+        
+        <div class="image-gallery">
+          <div class="gallery-card">
+            <el-image :src="image2" alt="农业化肥采集" class="sampling-image"></el-image>
+            <p class="image-caption">图2-1 农业化肥采集</p>
+          </div>
+          <div class="gallery-card">
+            <el-image :src="image3" alt="农药采集" class="sampling-image"></el-image>
+            <p class="image-caption">图2-2 农药采集</p>
+          </div>
+          <div class="gallery-card">
+            <el-image :src="image4" alt="农膜采集" class="sampling-image"></el-image>
+            <p class="image-caption">图2-3 农膜采集</p>
+          </div>
+          <div class="gallery-card">
+            <el-image :src="image5" alt="有机肥采集" class="sampling-image"></el-image>
+            <p class="image-caption">图2-4 有机肥采集</p>
+          </div>
+        </div>
       </div>
     </div>
-
-    <h2>3. 采集农业投入品样品重金属含量测试:</h2>
-    <p>
-      在完成农业投入品重金属输入通量计算公式的构建和优化后，最终的结果输出将包括各类农业投入品的重金属输入通量数据。
-      这些数据能够量化每种农业投入品在农田中所引入的重金属污染，并为后续的政策制定和管理提供依据。
-    </p>
-
-    <div class="image-row">
-      <div class="image-container">
-        <el-image :src="image6" alt="各农业投入品测试结果" class="sampling-image"></el-image>
-        <p class="image-caption">图3-1 各农业投入品测试结果</p>
+    
+    <!-- 第三部分：重金属含量测试（保持原图比例） -->
+    <div class="process-section">
+      <div class="section-header">
+        <div class="section-number">3</div>
+        <h2>采集农业投入品样品重金属含量测试</h2>
       </div>
-      <div class="image-container">
-        <el-image :src="image7" alt="农业投入品镉含量" class="sampling-image"></el-image>
-        <p class="image-caption">图3-2 农业投入品镉含量</p>
+      
+      <div class="section-content">
+        <div class="testing-info">
+          <div class="info-card">
+            <div class="card-icon">🔬</div>
+            <div class="card-content">
+              <p>
+                在完成农业投入品重金属输入通量计算公式的构建和优化后，最终的结果输出将包括
+                各类农业投入品的重金属输入通量数据。
+              </p>
+              <p>
+                这些数据能够量化每种农业投入品在农田中所引入的重金属污染，并为后续的政策制定
+                和管理提供依据。
+              </p>
+            </div>
+          </div>
+          
+          <!-- 保持原图比例的测试结果 -->
+          <div class="testing-gallery">
+            <div class="results-card">
+              <div class="results-header">
+                <h3>各农业投入品重金属含量测试结果</h3>
+                <p>不同种类农业投入品中重金属含量对比分析</p>
+              </div>
+              <div class="image-container-proportional">
+                <el-image 
+                  :src="image6" 
+                  alt="各农业投入品测试结果" 
+                  class="results-image-proportional">
+                </el-image>
+              </div>
+              <p class="image-caption">图3-1 各农业投入品测试结果</p>
+            </div>
+            
+            <div class="results-card">
+              <div class="results-header">
+                <h3>农业投入品镉含量专项分析</h3>
+                <p>各类农业投入品中镉元素含量分布情况</p>
+              </div>
+              <div class="image-container-proportional">
+                <el-image 
+                  :src="image7" 
+                  alt="农业投入品镉含量" 
+                  class="results-image-proportional">
+                </el-image>
+              </div>
+              <p class="image-caption">图3-2 农业投入品镉含量</p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-
-    <h2>4. 农业投入品重金属输入通量计算方法:</h2>
-    <p>
-      通过农业投入品的施用数据与重金属检测结果，建立重金属输入通量计算公式，精确计算不同农业投入品在农田中所引入的重金属污染通量。
-      该阶段包括公式的初步构建、验证与校准，以及公式的持续优化。
-    </p>
-
-    <div class="image-row">
-      <div class="image-container">
-        <el-image :src="image8" alt="农业投入品用量计算方法" class="sampling-image"></el-image>
-        <p class="image-caption">图4-1 农业投入品用量计算方法</p>
-        <div class="formula-text">
-          <p>
-            式中，Ni为农业投入品i的单位面积年施用量，单位：kg/ha/a；
-            Mi为农业投入品i年施用总量，单位：kg/a；
-            Ax为项目区域全年农作物总播种面积，单位：ha；
-          </p>
-        </div>
+    
+    <!-- 第四部分：计算方法 -->
+    <div class="process-section">
+      <div class="section-header">
+        <div class="section-number">4</div>
+        <h2>农业投入品重金属输入通量计算方法</h2>
       </div>
-      <div class="image-container">
-        <el-image :src="image9" alt="农业投入品重金属输入通量计算方法" class="sampling-image"></el-image>
-        <p class="image-caption">图4-2 农业投入品重金属输入通量计算方法</p>
-        <div class="formula-text">
-          <p>
-            式中，Ff为单位面积农业投入品途径的重金属输入通量，g/ha/a；
-            Ni为农业投入品i的单位面积年施用量，kg/ha/a；
-            Cij为重金属j在农业投入品i中的含量，mg/kg。
-          </p>
+      
+      <div class="section-content">
+        <div class="info-card">
+          <div class="card-icon">🧮</div>
+          <div class="card-content">
+            <p>
+              通过农业投入品的施用数据与重金属检测结果，建立重金属输入通量计算公式，
+              精确计算不同农业投入品在农田中所引入的重金属污染通量。
+            </p>
+            <p>
+              该阶段包括公式的初步构建、验证与校准，以及公式的持续优化。
+            </p>
+          </div>
+        </div>
+        
+        <div class="formula-section">
+          <div class="formula-card">
+            <div class="formula-image">
+              <el-image :src="image8" alt="农业投入品用量计算方法" class="sampling-image"></el-image>
+              <p class="image-caption">图4-1 农业投入品用量计算方法</p>
+            </div>
+            <div class="formula-text">
+              <p>式中：</p>
+              <p>N<sub>i</sub>为农业投入品i的单位面积年施用量，单位：kg/ha/a；</p>
+              <p>M<sub>i</sub>为农业投入品i年施用总量，单位：kg/a；</p>
+              <p>A<sub>x</sub>为项目区域全年农作物总播种面积，单位：ha；</p>
+            </div>
+          </div>
+          
+          <div class="formula-card">
+            <div class="formula-image">
+              <el-image :src="image9" alt="农业投入品重金属输入通量计算方法" class="sampling-image"></el-image>
+              <p class="image-caption">图4-2 农业投入品重金属输入通量计算方法</p>
+            </div>
+            <div class="formula-text">
+              <p>式中：</p>
+              <p>F<sub>f</sub>为单位面积农业投入品途径的重金属输入通量，g/ha/a；</p>
+              <p>N<sub>i</sub>为农业投入品i的单位面积年施用量，kg/ha/a；</p>
+              <p>C<sub>ij</sub>为重金属j在农业投入品i中的含量，mg/kg。</p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -118,11 +208,11 @@ export default {
 
 <style scoped>
 .sampling-process {
-  padding: 20px;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
-  min-height: 100vh;
+  padding: 30px;
+  background: linear-gradient(135deg, rgba(245, 252, 240, 0.8) 0%, rgba(235, 248, 255, 0.8) 100%);
   position: relative;
   overflow: hidden;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .sampling-process::before {
@@ -133,105 +223,376 @@ export default {
   width: 100%;
   height: 100%;
   background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
-  opacity: 0.3;
+  opacity: 0.08;
   z-index: -1;
+  filter: blur(2px);
 }
 
-.image-row {
+.process-section {
+  margin-bottom: 50px;
+  padding: 30px;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.88);
+  box-shadow: 0 8px 25px rgba(0, 60, 120, 0.08);
+  transition: all 0.4s ease;
+  overflow: hidden;
+  position: relative;
+}
+
+.process-section:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 35px rgba(0, 60, 120, 0.15);
+}
+
+.section-header {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: 30px 0;
-  gap: 20px;
+  align-items: center;
+  margin-bottom: 25px;
+  position: relative;
+  padding-bottom: 15px;
+  border-bottom: 2px solid rgba(58, 160, 207, 0.25);
 }
 
-p {
-  text-indent: 2em;
-  margin: 15px 0;
-  line-height: 1.6;
+.section-number {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(135deg, #4a9ef7, #3a9fd3);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin-right: 20px;
+  box-shadow: 0 5px 12px rgba(74, 158, 247, 0.25);
+}
+
+h2 {
+  color: #1a365d;
+  font-size: 1.9rem;
+  margin: 0;
+  font-weight: 650;
+  letter-spacing: 0.5px;
+}
+
+.section-content {
+  padding: 0 10px;
+}
+
+.info-card {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 30px;
+  padding: 20px;
+  background: rgba(235, 245, 255, 0.6);
+  border-radius: 15px;
+  border-left: 4px solid #3a9fd3;
 }
 
-/* 特定段落取消缩进 */
-p:has(> br) {
-  text-indent: 0;
+.card-icon {
+  font-size: 2.5rem;
+  margin-right: 25px;
+  color: #3a9fd3;
 }
 
-.image-container {
+.card-content p {
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: #2d3748;
+  margin: 0 0 15px 0;
+}
+
+.highlight {
+  font-weight: 600;
+  color: #1a6fb3;
+}
+
+/* 样品采集部分样式 */
+.collection-info {
+  display: flex;
+  gap: 25px;
+  margin-bottom: 30px;
+}
+
+.collection-card {
   flex: 1;
-  min-width: 280px;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-  background: rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.5);
   display: flex;
-  flex-direction: column;
+  padding: 20px;
+  background: rgba(245, 252, 255, 0.7);
+  border-radius: 15px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+  border-top: 3px solid #3a9fd3;
 }
 
-.image-container:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  background: rgba(255, 255, 255, 0.85);
+.collection-icon {
+  font-size: 2.2rem;
+  margin-right: 20px;
+  color: #3a9fd3;
 }
 
-.sampling-image {
-  border-radius: 12px 12px 0 0 !important;
+.collection-text h3 {
+  color: #1a365d;
+  font-size: 1.3rem;
+  margin-top: 0;
+  margin-bottom: 12px;
+}
+
+.collection-text p {
+  font-size: 1.05rem;
+  line-height: 1.6;
+  color: #2d3748;
+  margin: 0;
+}
+
+/* 图片画廊样式 */
+.image-gallery {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 25px;
+}
+
+.gallery-card {
+  border-radius: 15px;
   overflow: hidden;
-  border: none !important;
-  width: 100% !important;
-  height: 450px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
+  transition: all 0.4s ease;
+  background: white;
+}
+
+.gallery-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
+}
+
+.sampling-image {
+  width: 100%;
+  height: 230px;
   display: block;
-  transition: transform 0.5s ease;
-  background: rgba(255, 255, 255, 0.4);
   object-fit: cover;
+  transition: transform 0.4s ease;
+  background: rgba(245, 249, 255, 0.4);
 }
 
-.image-container:hover .sampling-image {
-  transform: scale(1.03);
+.gallery-card:hover .sampling-image {
+  transform: scale(1.05);
 }
 
 .image-caption {
   text-align: center;
   font-size: 15px;
   color: #2d3748;
-  padding: 12px;
+  padding: 15px;
   font-weight: 500;
-  background: rgba(248, 250, 252, 0.7);
+  background: rgba(248, 250, 252, 0.8);
   margin: 0;
+  border-top: 1px dashed #cbd5e0;
 }
 
-.formula-text {
+/* 第三部分：重金属含量测试（保持原图比例） */
+.testing-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.testing-gallery {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 40px;
+  margin-top: 20px;
+}
+
+.results-card {
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+  transition: all 0.4s ease;
+  background: white;
+  padding: 0;
+}
+
+.results-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+}
+
+.results-header {
+  padding: 20px;
+  background: linear-gradient(90deg, #f0f9ff, #e6f7ff);
+  border-bottom: 1px solid #cce5ff;
+}
+
+.results-header h3 {
+  color: #1a365d;
+  font-size: 1.5rem;
+  margin: 0 0 10px 0;
+  font-weight: 600;
+}
+
+.results-header p {
+  font-size: 1.1rem;
+  color: #4a5568;
+  margin: 0;
+  line-height: 1.6;
+}
+
+/* 保持原图比例的图片容器 */
+.image-container-proportional {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  background: white;
+}
+
+.results-image-proportional {
+  max-width: 100%;
+  max-height: 350px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  display: block;
+  margin: 0 auto;
+  transition: transform 0.4s ease;
+}
+
+.results-card:hover .results-image-proportional {
+  transform: scale(1.03);
+}
+
+/* 公式部分样式 */
+.formula-section {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 30px;
+}
+
+.formula-card {
+  display: flex;
+  flex-direction: column;
+  border-radius: 15px;
+  overflow: hidden;
+  background: rgba(250, 255, 245, 0.7);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
+  border-top: 3px solid #5cb85c;
+}
+
+.formula-image {
   padding: 15px;
-  background: rgba(245, 249, 255, 0.6);
-  border-top: 1px dashed #cbd5e0;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.formula-text {
+  padding: 20px;
 }
+
 .formula-text p {
-  text-indent: 0;
-  font-size: 14px;
-  color: #1a365d;
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: #2d3748;
+  margin: 0 0 10px 0;
+}
+
+.formula-text sub {
+  font-size: 0.8em;
+  vertical-align: sub;
 }
 
 /* 响应式设计 */
+@media (max-width: 1200px) {
+  .image-gallery {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .formula-section {
+    grid-template-columns: 1fr;
+  }
+  
+  .testing-gallery {
+    grid-template-columns: 1fr;
+  }
+}
+
 @media (max-width: 900px) {
-  .image-container {
-    min-width: 48%;
+  .collection-info {
+    flex-direction: column;
+  }
+  
+  .process-section {
+    padding: 25px;
+  }
+  
+  .section-number {
+    width: 45px;
+    height: 45px;
+    font-size: 1.6rem;
+  }
+  
+  h2 {
+    font-size: 1.7rem;
   }
 }
 
 @media (max-width: 768px) {
-  .image-container {
-    min-width: 100%;
+  .image-gallery {
+    grid-template-columns: 1fr;
+  }
+  
+  .sampling-process {
+    padding: 20px;
+  }
+  
+  .info-card {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .card-icon {
+    margin-right: 0;
+    margin-bottom: 15px;
+  }
+  
+  .collection-card {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .results-image-proportional {
+    max-height: 300px;
   }
 }
 
 @media (max-width: 480px) {
   .sampling-process {
-    padding: 10px;
+    padding: 15px;
   }
-
+  
+  .process-section {
+    padding: 20px;
+  }
+  
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .section-number {
+    margin-right: 0;
+    margin-bottom: 15px;
+  }
+  
+  h2 {
+    font-size: 1.6rem;
+  }
+  
   .sampling-image {
     height: 200px;
   }
+  
+  .results-image-proportional {
+    max-height: 250px;
+  }
 }
 </style>

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

@@ -1,68 +1,106 @@
 <template>
   <div class="sampling-process">
-    <h2>1.建立大气污染源清单：</h2>
-    <p>
-      <strong>污染源统计：</strong>
-      根据韶关市环保部门或政府官方网站公开资料及全国排污许可证管理信息平台，
-      对韶关具有排污许可证的企业进行数据统计与调查分析；
-    </p>
-    <p>
-      <strong>污染源统计：</strong>
-      根据韶关市环保部门或政府官方网站公开资料及全国排污许可证管理信息平台，
-      对韶关具有排污许可证的企业进行数据统计与调查分析；
-    </p>
-    <p>
-      <strong>行业调查与筛选：</strong>
-      针对可能存在重金属排放的行业进行全面调查和筛选。这些行业包括燃煤电厂、蓄电池制造、危险废物治理、矿山采选、
-      有色金属冶炼、化工、电子电路制造等。
-    </p>
-    <p>
-      <strong>企业调查与统计分析：</strong>
-      对所有重金属排放企业进行详细调查和统计分析，包括但不限于企业名称、地址坐标、生产工艺、主要产品、排放设施、
-      排放标准等信息，建立源清单的详细数据库。对企业的生产规模、产值、用地情况等进行综合评估，确定其在污染排放中的影响程度。
-    </p>
-    <p>
-      <strong>排放数据收集：</strong>
-      收集以上所有企业的大气排放数据，包括但不限于污染物排放许可值、重金属排放总量、大气颗粒物排放总量、氮氧化物排放总量、
-      硫化物排放总量等大气污染物。获取数据的来源包括企业排污许可证、环保部门监管数据、企业自行监测报告、第三方监测机构数据等。
-    </p>
-    <p>
-      <strong>数据验证与质量控制：</strong>
-      对收集到的排放数据进行查找验证和质量控制，确保数据的准确性和可靠性。检查数据的完整性和一致性，
-      排除可能存在的错误和异常数据，提高数据的可信度。
-    </p>
-    <div class="image-row">
-      <div class="image-container">
+    <!-- 第一部分：建立大气污染源清单 -->
+    <div class="content-section">
+      <div class="section-header">
+        <div class="step-number">1</div>
+        <h2>建立大气污染源清单</h2>
+      </div>
+      
+      <div class="process-steps">
+        <div class="step-card">
+          <div class="step-icon">📊</div>
+          <div class="step-content">
+            <h3>污染源统计</h3>
+            <p>根据韶关市环保部门或政府官方网站公开资料及全国排污许可证管理信息平台，对韶关具有排污许可证的企业进行数据统计与调查分析</p>
+          </div>
+        </div>
+        
+        <div class="step-card">
+          <div class="step-icon">🔍</div>
+          <div class="step-content">
+            <h3>行业调查与筛选</h3>
+            <p>针对可能存在重金属排放的行业进行全面调查和筛选。这些行业包括燃煤电厂、蓄电池制造、危险废物治理、矿山采选、有色金属冶炼、化工、电子电路制造等</p>
+          </div>
+        </div>
+        
+        <div class="step-card">
+          <div class="step-icon">🏭</div>
+          <div class="step-content">
+            <h3>企业调查与统计分析</h3>
+            <p>对所有重金属排放企业进行详细调查和统计分析，包括但不限于企业名称、地址坐标、生产工艺、主要产品、排放设施、排放标准等信息，建立源清单的详细数据库</p>
+          </div>
+        </div>
+        
+        <div class="step-card">
+          <div class="step-icon">📥</div>
+          <div class="step-content">
+            <h3>排放数据收集</h3>
+            <p>收集以上所有企业的大气排放数据，包括但不限于污染物排放许可值、重金属排放总量、大气颗粒物排放总量、氮氧化物排放总量、硫化物排放总量等大气污染物</p>
+          </div>
+        </div>
+        
+        <div class="step-card">
+          <div class="step-icon">✅</div>
+          <div class="step-content">
+            <h3>数据验证与质量控制</h3>
+            <p>对收集到的排放数据进行查找验证和质量控制，确保数据的准确性和可靠性。检查数据的完整性和一致性，排除可能存在的错误和异常数据</p>
+          </div>
+        </div>
+      </div>
+      
+      <div class="compact-image-container">
         <el-image :src="image1" alt="大气干湿沉降示意图" class="sampling-image"></el-image>
         <p class="image-caption">图1 大气干湿沉降示意图</p>
       </div>
     </div>
-
-    <h2>2.现场调研：</h2>
-    <p>
-      制定重金属排放源的详细调研计划，包括调研时间、地点、人员分工、调研方法等。根据研究目的和问题，
-      选择合适的调研方法，如问卷调查、访谈、观察法等。按照调研计划，前往现场进行调研，对企业进行前期的实地考察，
-      了解能源使用、生产工艺及废气排放情况。对企业所在区域进行调查，大气排放是否会对周围区域产生影响。在调研过程中，
-      注意信息的获取与保存，比如拍照、排污口测距、风向记录等等。
-    </p>
-    <div class="image-row">
-      <div class="image-container">
+    
+    <!-- 第二部分：现场调研 -->
+    <div class="content-section">
+      <div class="section-header">
+        <div class="step-number">2</div>
+        <h2>现场调研</h2>
+      </div>
+      
+      <div class="text-content">
+        <p>制定重金属排放源的详细调研计划，包括调研时间、地点、人员分工、调研方法等。根据研究目的和问题，选择合适的调研方法，如问卷调查、访谈、观察法等。</p>
+        <p>按照调研计划，前往现场进行调研，对企业进行前期的实地考察，了解能源使用、生产工艺及废气排放情况。对企业所在区域进行调查，大气排放是否会对周围区域产生影响。</p>
+        <p>在调研过程中，注意信息的获取与保存，比如拍照、排污口测距、风向记录等等。</p>
+      </div>
+      
+      <div class="compact-image-container">
         <el-image :src="image2" alt="干湿沉降收集装置" class="sampling-image"></el-image>
         <p class="image-caption">图2 干湿沉降收集装置</p>
       </div>
     </div>
-
-    <h2>3.样品分析：</h2>
-    <p>
-      <strong>重金属检测技术：</strong>
-      例如原子吸收光谱法（AAS）、电感耦合等离子体质谱法（ICP-MS）、X射线荧光光谱法（XRF）等。
-    </p>
-    <p>
-      <strong>数据处理与分析：</strong>
-      质量控制和数据分析的统计方法。
-    </p>
-
-
+    
+    <!-- 第三部分：样品分析 -->
+    <div class="content-section">
+      <div class="section-header">
+        <div class="step-number">3</div>
+        <h2>样品分析</h2>
+      </div>
+      
+      <div class="analysis-methods">
+        <div class="method-card">
+          <h3>重金属检测技术</h3>
+          <ul>
+            <li>原子吸收光谱法（AAS）</li>
+            <li>电感耦合等离子体质谱法（ICP-MS）</li>
+            <li>X射线荧光光谱法（XRF）</li>
+          </ul>
+        </div>
+        
+        <div class="method-card">
+          <h3>数据处理与分析</h3>
+          <ul>
+            <li>质量控制方法</li>
+            <li>统计分析技术</li>
+            <li>数据可视化工具</li>
+          </ul>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -79,11 +117,11 @@ export default {
 
 <style scoped>
 .sampling-process {
-  padding: 20px;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
-  min-height: 100vh;
+  padding: 30px;
+  background: linear-gradient(135deg, rgba(240, 248, 255, 0.8) 0%, rgba(230, 247, 255, 0.8) 100%);
   position: relative;
   overflow: hidden;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .sampling-process::before {
@@ -92,95 +130,249 @@ export default {
   top: 0;
   left: 0;
   width: 100%;
+  height: 100%;
   background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
-  opacity: 0.3;
+  opacity: 0.15;
   z-index: -1;
+  filter: blur(2px);
+}
+
+.content-section {
+  margin-bottom: 50px;
+  padding: 25px;
+  border-radius: 15px;
+  background: rgba(255, 255, 255, 0.85);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+  transition: all 0.4s ease;
+  overflow: hidden;
+  position: relative;
 }
 
-.image-row {
+.content-section:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+}
+
+.section-header {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: 30px 0;
-  gap: 20px;
+  align-items: center;
+  margin-bottom: 25px;
+  position: relative;
+  padding-bottom: 15px;
+  border-bottom: 2px solid rgba(58, 207, 213, 0.3);
+}
+
+.step-number {
+  width: 45px;
+  height: 45px;
+  background: linear-gradient(135deg, #4a9ef7, #3acfd5);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.6rem;
+  font-weight: bold;
+  margin-right: 20px;
+  box-shadow: 0 4px 8px rgba(74, 158, 247, 0.3);
+}
+
+h2 {
+  color: #1a365d;
+  font-size: 1.8rem;
+  margin: 0;
+  font-weight: 600;
+}
+
+.text-content {
+  margin-bottom: 25px;
 }
 
 p {
-  text-indent: 2em;
+  margin: 15px 0;
+  line-height: 1.8;
+  color: #2d3748;
+  font-size: 1.05rem;
 }
 
-.image-container {
-  flex: 1;
-  min-width: 280px;
+/* 步骤卡片样式 */
+.process-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.step-card {
+  display: flex;
+  background: rgba(245, 249, 255, 0.6);
   border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  padding: 20px;
   transition: all 0.3s ease;
-  background: rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.5);
+  border-left: 4px solid #4a9ef7;
+}
+
+.step-card:hover {
+  background: rgba(230, 242, 255, 0.8);
+  transform: translateX(5px);
+}
+
+.step-icon {
+  font-size: 2rem;
+  margin-right: 20px;
+  color: #3acfd5;
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-content h3 {
+  color: #1a365d;
+  margin-top: 0;
+  margin-bottom: 12px;
+  font-size: 1.3rem;
+}
 
-  /* 新增：使用 flex 布局，垂直方向堆叠，内容居中 */
+/* 分析方法卡片 */
+.analysis-methods {
   display: flex;
-  flex-direction: column;
-  align-items: center; /* 水平居中 */
+  gap: 20px;
+  margin-top: 20px;
 }
 
-.image-container:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  background: rgba(255, 255, 255, 0.85);
+.method-card {
+  flex: 1;
+  background: rgba(245, 249, 255, 0.6);
+  border-radius: 12px;
+  padding: 20px;
+  border-top: 3px solid #3acfd5;
 }
 
-.sampling-image {
-  border-radius: 12px 12px 0 0 !important;
+.method-card h3 {
+  color: #1a365d;
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 1.3rem;
+}
+
+.method-card ul {
+  padding-left: 20px;
+  margin: 0;
+}
+
+.method-card li {
+  margin-bottom: 8px;
+  line-height: 1.6;
+}
+
+/* 紧凑图片容器 */
+.compact-image-container {
+  max-width: 700px;
+  margin: 0 auto;
+  margin-top: 25px;
+  border-radius: 12px;
   overflow: hidden;
-  border: none !important;
-  width: 100%;     /* 改为 100% 宽度，填满容器 */
-  max-width: 600px; 
+  position: relative;
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+  transition: all 0.4s ease;
+}
+
+.compact-image-container:hover {
+  transform: scale(1.02);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.sampling-image {
+  width: 100%;
+  height: auto;
   display: block;
   transition: transform 0.5s ease;
-  background: rgba(255, 255, 255, 0.4);
-
-  /* 新增：居中对齐 */
-  margin-left: auto;
-  margin-right: auto;
+  background: rgba(245, 249, 255, 0.4);
+  object-fit: cover;
 }
 
-.image-container:hover .sampling-image {
+.compact-image-container:hover .sampling-image {
   transform: scale(1.03);
 }
 
 .image-caption {
   text-align: center;
-  font-size: 15px;
+  font-size: 16px;
   color: #2d3748;
-  padding: 12px;
+  padding: 15px;
   font-weight: 500;
-  background: rgba(248, 250, 252, 0.7);
+  background: rgba(248, 250, 252, 0.8);
   margin: 0;
+  border-top: 1px dashed #cbd5e0;
 }
 
 /* 响应式设计 */
 @media (max-width: 900px) {
-  .image-container {
-    min-width: 48%;
+  .sampling-process {
+    padding: 20px;
+  }
+  
+  .content-section {
+    padding: 20px;
+  }
+  
+  .analysis-methods {
+    flex-direction: column;
   }
 }
 
 @media (max-width: 768px) {
-
-  .image-container {
-    min-width: 100%;
+  .sampling-process {
+    padding: 15px;
+  }
+  
+  h2 {
+    font-size: 1.6rem;
+  }
+  
+  .step-number {
+    width: 40px;
+    height: 40px;
+    font-size: 1.4rem;
+  }
+  
+  .compact-image-container {
+    max-width: 90%;
   }
 }
 
 @media (max-width: 480px) {
   .sampling-process {
-    padding: 10px;
+    padding: 12px;
   }
-
-  .sampling-image {
-    height: 200px;
+  
+  .content-section {
+    padding: 18px;
+  }
+  
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .step-number {
+    margin-right: 0;
+    margin-bottom: 15px;
+  }
+  
+  h2 {
+    font-size: 1.5rem;
+  }
+  
+  .step-card {
+    flex-direction: column;
+  }
+  
+  .step-icon {
+    margin-right: 0;
+    margin-bottom: 15px;
+    text-align: center;
   }
 }
 </style>

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

@@ -20,7 +20,7 @@ export default {
 <style scoped>
 .atmosphere-flux-container {
   width: 100%;
-  max-width: 900px;
+  max-width: 800px;
   margin: 0 auto;
   background: white;
   border-radius: 12px;
@@ -40,37 +40,39 @@ export default {
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
-.map-image-container {
-  padding: 25px;
+.map-content {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
   background: #f8fafc;
+}
+
+.map-image-container {
+  flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 500px;
+  padding: 10px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
 }
 
 .map-image {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
-  border: 1px solid #e0e7ff;
   border-radius: 8px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
+  height: 600px;
+  width: 100%;
 }
 
 .map-image:hover {
   transform: scale(1.02);
 }
 
-.map-footer {
-  background: #f1f5f9;
-  padding: 15px 0;
-  text-align: center;
-  font-size: 0.95rem;
-  color: #4b5563;
-  border-top: 1px solid #e5e7eb;
-}
 
 @media (max-width: 768px) {
   .map-title {

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

@@ -1,131 +1,580 @@
 <template>
   <div class="page-container">
+    <!-- 系统标题区域 -->
+    <div class="header-section">
+      <div class="header-content">
+        <h1 class="system-title">韶关市大气污染监测系统</h1>
+        <div class="calculation-selector">
+          <span class="selector-title">计算方式：</span>
+          <select 
+            v-model="calculationMethod" 
+            class="calculation-select"
+          >
+            <option value="weight">按重量计算</option>
+            <option value="volume">按体积计算</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 地图展示区域 -->
+    <div class="dashboard-section map-section">
+      <div class="section-header">
+        <div class="section-icon">🗺️</div>
+        <h2 class="section-title">采样点地理分布</h2>
+      </div>
+      <div class="dashboard-card map-card">
+        <div class="map-holder">
+          <atmsamplemap :calculation-method="calculationMethod" :map-type="mapType"/>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 数据展示区域 - 上下排列 -->
+    <div class="data-section">
+      <!-- 数据列表 -->
+      <div class="dashboard-section">
+        <div class="section-header">
+          <div class="section-icon">📋</div>
+          <h2 class="section-title">采样点数据详情</h2>
+          <div class="data-info">
+            <span class="info-item">当前计算方式: {{ calculationMethod === 'weight' ? '按重量' : '按体积' }}</span>
+            <span class="info-item">最后更新: 2025-08-16</span>
+          </div>
+        </div>
+        <div class="dashboard-card data-card">
+          <div class="table-container">
+            <AirsampleLine :calculation-method="calculationMethod"/>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 图表分析 -->
+      <div class="dashboard-section">
+        <div class="section-header">
+          <div class="section-icon">📊</div>
+          <h2 class="section-title">区域污染分析</h2>
+        </div>
+        <div class="dashboard-card chart-card">
+          <div class="chart-header">
+            <h3>各区县平均大气重金属污染柱状图</h3>
+            <p>大气污染物区域分布情况 ({{ calculationMethod === 'weight' ? 'mg/m³' : 'μg/m³' }})</p>
+          </div>
+          <div class="chart-container">
+            <AirsampleChart :calculation-method="calculationMethod"/>
+          </div>
+        </div>
+      </div>
+    </div>
     
-   <div class="calculation-selector">
-    <span class="selector-title">计算方式：</span>
-    <select 
-      v-model="calculationMethod" 
-      class="calculation-select"
-    >
-      <option value="weight">按重量计算</option>
-      <option value="volume">按体积计算</option>
-    </select>
-  </div>
-
-   <div class="point-map">
-    <div class="component-title">采样点地图展示</div>
-    <div class="map-holder">
-      <atmsamplemap :calculation-method="calculationMethod"/>
-     </div>
-   </div>
-
   
-   <div class="point-line">
-    <div class="component-title">采样点数据列表展示</div>
-    <AirsampleLine :calculation-method="calculationMethod"/>
-   </div>
-
-   <div>
-    <div class="component-title">各区县平均大气重金属污染柱状图</div>
-    <AirsampleChart :calculation-method="calculationMethod"/>
-   </div>
   </div>
 </template>
-<!--污染企业-->
 
 <script setup>
-import {ref} from 'vue'
+import { ref } from 'vue'
 import AirsampleLine from '@/components/atmpollution/airsampleLine.vue';
 import atmsamplemap from '@/components/atmpollution/atmsamplemap.vue';
 import AirsampleChart from '@/components/atmpollution/airsampleChart.vue';
 
 const calculationMethod = ref('weight')
+const mapType = ref('standard') // standard/satellite
 
-
+const toggleMapType = () => {
+  mapType.value = mapType.value === 'standard' ? 'satellite' : 'standard'
+}
 </script>
 
 <style scoped>
+/* 基础样式重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border极;
+  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+}
+
 .page-container {
   display: flex;
   flex-direction: column;
-  height: 100vh; /* 整屏高度 */
-  padding: 0;
-  box-sizing: border-box;
-  
-  gap: 20px;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
+  padding: 25px;
+  gap: 30px;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* 页眉区域 */
+.header-section {
+   text-align: center;
+  padding: 30px 0 20px;
+  position: relative;
+}
+
+.header-content {
+ display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.system-title {
+  color: #1a365d;
+  font-size: 2.8rem;
+  margin-bottom: 12px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.system-subtitle {
+  font-size: 1.3rem;
+  color: #cbd5e0;
   margin: 0;
 }
 
+.calculation-selector {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+.selector-icon {
+  font-size: 1.8rem;
+  color: #4a9ef7;
+}
+
+.selector-title {
+  font-size: 1.1rem;
+  color: black;
+  font-weight: 500;
+}
+
 .calculation-select {
-  padding: 12px 24px;
-  border: 2px solid #ddd;
-  border-radius: 6px;
-  font-size: 16px;
-  color: #333;
-  background-color: #fff;
+  padding: 10px 20px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.15);
+  color: black;
+  font-size: 1rem;
   cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.calculation-select:hover {
+  background: rgba(255, 255, 255, 0.25);
 }
+
 .calculation-select:focus {
   outline: none;
-  border-color: #1e88e5;
+  border-color: #4a9ef7;
+  box-shadow: 0 0 0 2px rgba(74, 158, 247, 0.5);
 }
 
+.header-stats {
+  display: flex;
+  gap: 20px;
+}
 
-.map-holder {
-  position: relative;
-  height: 450px;
-  z-index: 100; /* 保持地图在中间层级 */
-  overflow: visible; /* 允许内容溢出 */
+.stat-card {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 15px;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
-.point-map {
-    flex: 0 0 70%;
-    margin-bottom: 20px;
-    
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,1);
-    overflow: visible;
+
+.stat-icon {
+  font-size: 2.2rem;
+  color: #4a9ef7;
 }
 
-.point-line {
-    border-radius: 12px;/*圆角 */
-    box-shadow: 0 2px 8px rgba(0, 0,0, 0.08);
-    padding: 16px;/*内部间距 */
-    box-sizing: border-box;
+.stat-info {
+  flex: 1;
 }
-.charts-line{
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  padding: 16px;
-  box-sizing: border-box;
-  max-width: 1800px;
-  width: 100%;
-  margin: 20px auto;
-}
-.component-title {
-  /* 基础布局：左对齐 + 紧凑间距 */
-  text-align: left;        /* 强制左对齐，告别居中 */
-  margin: 12px 0;          /* 上下间距缩小，更紧凑（原16px→12px） */
-  padding-left: 24px;      /* 给蓝色方块留空间 */
-  position: relative;      /* 为伪元素定位做准备 */
-
-  /* 文字样式：简约但醒目 */
-  font-size: 1.5rem;      /* 稍小一号，更克制（原1.5rem→1.25rem） */
-  font-weight: 600;        /* 适度加粗，比正文突出但不夸张 */
-  color: #1e88e5;          /* 统一蓝色，和方块颜色呼应 */
-  line-height: 1.2;        /* 紧凑行高，避免臃肿 */
-}
-
-/* 蓝色小方块：用伪元素实现，无额外HTML */
-.component-title::before {
+
+.stat-value {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: white;
+  line-height: 1.2;
+}
+
+.stat-label {
+  font-size: 1rem;
+  color: #cbd5e0;
+  font-weight: 500;
+}
+
+/* 地图区域 */
+.dashboard-section {
+  margin-bottom: 20px;
+}
+
+.map-section {
+  background: white;
+  border-radius: 16px;
+  padding: 25px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.section-icon {
+  font-size: 2.2rem;
+  color: #3a9fd3;
+}
+
+.section-title {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #1a365d;
+  margin: 0;
+  position: relative;
+  padding-left: 10px;
+}
+
+.section-title::before {
   content: "";
   position: absolute;
-  left: 0;                /* 靠最左侧 */
-  top: 50%;              /* 垂直居中 */
+  left: 0;
+  top: 50%;
   transform: translateY(-50%);
-  width: 12px;           /* 方块大小，适中即可 */
-  height: 12px;
-  background-color: #1e88e5; /* 和文字同色，统一感 */
-  border-radius: 2px;    /* 轻微圆角，比直角更柔和 */
+  width: 4px;
+  height: 80%;
+  background: linear-gradient(to bottom, #4a9ef7, #3acfd5);
+  border-radius: 2px;
+}
+
+.map-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 15px;
+}
+
+.map-action-btn {
+  padding: 8px 16px;
+  border: 1px solid #cbd5e0;
+  border-radius: 6px;
+  background: #f0f7ff;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.map-action-btn:hover {
+  background: #e1f0ff;
+  transform: translateY(-2px);
+}
+
+/* 卡片设计 */
+.dashboard-card {
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 6px 20px rgba(0, 60, 120, 0.12);
+  transition: all 0.4s ease;
+  overflow: hidden;
+  position: relative;
+}
+
+.dashboard-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 30px rgba(0, 60, 120, 0.18);
+}
+
+/* 地图容器 */
+.map-card {
+  height: 550px;
+  position: relative;
+}
+
+.map-holder {
+  position: relative;
+  height: 100%;
+  z-index: 100;
+}
+
+.map-legend {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  z-index: 200;
+  display: flex;
+  gap: 15px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 8px;
+  padding: 10px 15px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-</style>
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.legend-color {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+
+.high-pollution { background-color: #e53e3e; }
+.medium-pollution { background-color: #dd6b20; }
+.low-pollution { background-color: #38a169; }
+
+/* 数据展示区域 - 上下排列 */
+.data-section {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+/* 数据卡片 - 固定高度滚动条 */
+.data-card {
+  height: 450px;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 15px;
+}
+
+.table-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.pagination {
+  display: flex;
+  gap: 10px;
+}
+
+.page-btn {
+  padding: 6px 12px;
+  border: 1px solid #cbd5e0;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.page-btn:hover {
+  background: #edf2f7;
+}
+
+.page-btn.active {
+  background: #4a9ef7;
+  color: white;
+  border-color: #4a9ef7;
+}
+
+/* 图表卡片 */
+.chart-card {
+  height: 550px;
+  padding: 20px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-container {
+  flex: 1;
+  min-height: 0; /* 修复flex容器滚动问题 */
+}
+
+.data-info {
+  display: flex;
+  gap: 20px;
+  margin-left: 30px;
+  font-size: 0.9rem;
+  color: #4a5568;
+}
+
+.chart-header {
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.chart-header h3 {
+  font-size: 1.4rem;
+  color: #1a365d;
+  margin: 0 0 5px 0;
+  font-weight: 600;
+}
+
+.chart-header p {
+  font-size: 1rem;
+  color: #718096;
+  margin: 0;
+}
+
+.chart-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: auto;
+}
+
+.data-select {
+  padding: 8px 12px;
+  border: 1px solid #cbd5e0;
+  border-radius: 6px;
+  background: white;
+  font-size: 0.9rem;
+}
+
+.chart-legend {
+  display: flex;
+  justify-content: center;
+  gap: 25px;
+  margin-top: 15px;
+  padding-top: 10px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.color-box {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+
+.cadmium { background-color: #ff6b6b; }
+.lead { background-color: #4ecdc4; }
+.chromium { background-color: #ffd166; }
+.arsenic { background-color: #6a0572; }
+
+/* 页脚区域 */
+.footer-section {
+  margin-top: 30px;
+  padding: 20px 0;
+  text-align: center;
+  color: #546e7a;
+  font-size: 1rem;
+  border-top: 1px solid #e2e8f0;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin-top: 10px;
+  font-size: 0.9rem;
+  color: #718096;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .header-stats {
+    flex-wrap: wrap;
+  }
+  
+  .stat-card {
+    flex: 0 0 calc(50% - 10px);
+    margin-bottom: 10px;
+  }
+}
+
+@media (max-width: 900px) {
+  .header-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+  }
+  
+  .system-title {
+    font-size: 2rem;
+  }
+  
+  .section-title {
+    font-size: 1.6rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-container {
+    padding: 15px;
+    gap: 20px;
+  }
+  
+  .map-card {
+    height: 450px;
+  }
+  
+  .data-card, .chart-card {
+    height: 350px;
+  }
+  
+  .section-header {
+    flex-wrap: wrap;
+  }
+  
+  .map-actions {
+    margin-top: 10px;
+    width: 100%;
+  }
+  
+  .data-info {
+    margin-left: 0;
+    margin-top: 10px;
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .system-title {
+    font-size: 1.8rem;
+  }
+  
+  .section-title {
+    font-size: 1.4rem;
+  }
+  
+  .map-card {
+    height: 400px;
+  }
+  
+  .data-card, .chart-card {
+    height: 300px;
+  }
+  
+  .footer-links {
+    flex-direction: column;
+    gap: 5px;
+  }
+  
+  .header-stats {
+    gap: 10px;
+  }
+  
+  .stat-card {
+    flex: 0 0 100%;
+  }
+}
+</style>

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

@@ -1,108 +1,492 @@
 <template>
   <div class="page-container">
+    <!-- 页面标题区域 -->
+    <div class="header-section">
+      <div class="header-content">
+        <h1 class="system-title">韶关市涉重企业环境数据监测系统</h1>
+      </div>
+    </div>
     
-   <div class="point-map">
-    <div class="component-title">涉重企业地图展示</div>
-    <div class="map-holder">
-      <atmcompanymap/>
+    <!-- 地图展示区域 -->
+    <div class="dashboard-section map-section">
+      <div class="section-header">
+        <div class="section-icon">🗺️</div>
+        <h2 class="section-title">涉重企业地理分布</h2>
+      </div>
+      <div class="map-container">
+        <div class="map-holder">
+          <atmcompanymap/>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 数据展示区域 - 上下排列 -->
+    <div class="data-section">
+      <!-- 企业数据列表 -->
+      <div class="dashboard-section table-section">
+        <div class="section-header">
+          <div class="section-icon">📋</div>
+          <h2 class="section-title">涉重企业数据列表</h2>
+          <div class="data-info">
+            <span class="info-item">数据更新时间: 2025-08-16</span>
+            <span class="info-item">当前显示: 42家企业</span>
+          </div>
+        </div>
+        <div class="data-card">
+          <div class="table-container">
+            <atmcompanyline/>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 排放分析图表 -->
+      <div class="dashboard-section chart-section">
+        <div class="section-header">
+          <div class="section-icon">📊</div>
+          <h2 class="section-title">大气颗粒物排放分析</h2>
+          <div class="emission-info">
+            <span class="info-item">单位: 吨/年 (t/a)</span>
+            <span class="info-item">统计周期: 2025年</span>
+          </div>
+        </div>
+        <div class="chart-card">
+          <div class="chart-header">
+            <h3>各区县企业平均大气颗粒物排放量</h3>
+            <p>重金属企业大气污染物排放分布情况</p>
+          </div>
+          <div class="chart-container">
+            <HeavyMetalEnterprisechart/>
+          </div>
+          <div class="chart-legend">
+            <div class="legend-item">
+              <div class="legend-color primary"></div>
+              <span>颗粒物排放量</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-   </div>
-
-  
-   <div class="point-line">
-    <div class="component-title">涉重企业数据列表展示</div>
-    <atmcompanyline/>
-   </div>
-
-   <div>
-    <div class="component-title">各区县企业平均大气颗粒物排放（t/a）</div>
-    <HeavyMetalEnterprisechart/>
-   </div>
   </div>
 </template>
-<!--污染企业-->
 
 <script setup>
 import atmcompanyline from '@/components/atmpollution/atmcompanyline.vue';
 import atmcompanymap from '@/components/atmpollution/atmcompanymap.vue';
 import HeavyMetalEnterprisechart from '@/components/atmpollution/heavyMetalEnterprisechart.vue';
-
-
-
-
 </script>
 
 <style scoped>
+/* 基础样式重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+}
+
 .page-container {
   display: flex;
   flex-direction: column;
-  height: 100vh; /* 整屏高度 */
-  padding: 0;
-  box-sizing: border-box;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e9ecef 100%);
+  padding: 25px;
+  gap: 30px;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* 页眉区域 */
+.header-section {
+ text-align: center;
+  padding: 30px 0 20px;
+  position: relative;
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.system-title {
+  color: #1a365d;
+  font-size: 2.8rem;
+  margin-bottom: 12px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.system-subtitle {
+  font-size: 1.3rem;
+  color: #cbd5e0;
+  margin: 10px 0 0;
+}
+
+.header-actions {
+  display: flex;
+  gap: 15px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  background: rgba(255, 255, 255, 0.15);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 极 0.3);
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.action-btn:hover {
+  background: rgba(255, 255, 255, 0.25);
+  transform: translateY(-3px);
+}
+
+.btn-icon {
+  font-size: 1.2rem;
+}
+
+.header-stats {
+  display: flex;
   gap: 20px;
+}
+
+.stat-card {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 15极 px;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.stat-icon {
+  font-size: 2.5rem;
+  color: #4a9ef7;
+}
+
+.stat-info {
+  flex: 1;
+}
+
+.stat-value {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: white;
+  line-height: 1.2;
+}
+
+.stat-label {
+  font-size: 1rem;
+  color: #cbd5e0;
+  font-weight: 500;
+}
+
+/* 地图区域 */
+.dashboard-section {
+  margin-bottom: 20px;
+}
+
+.map-section {
+  background: white;
+  border-radius: 16px;
+  padding: 25px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.section-icon {
+  font-size: 2.2rem;
+  color: #3a9fd3;
+}
+
+.section-title {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #1a365d;
   margin: 0;
-  position: relative !important; /* 防止被 Leaflet 修改 */
-  overflow: visible !important; /* 确保标题不被裁剪 */
+  position: relative;
+  padding-left: 10px;
+}
+
+.section-title::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 80%;
+  background: linear-gradient(to bottom, #4a9ef7, #3acfd5);
+  border-radius: 2px;
+}
+
+.map-controls {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.control-label {
+  font-size: 0.9rem;
+  color: #4a5568;
+}
+
+.control-select {
+  padding: 8px 12px;
+  border: 1px solid #cbd5e0;
+  border-radius: 6px;
+  background: white;
+  font-size: 0.9rem;
+}
+
+.map-container {
+  position: relative;
+  height: 550px;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .map-holder {
-  position: relative ;
+  position: relative;
+  height: 100%;
+  z-index: 100;
+}
+
+.map-legend {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  z-index: 200;
+  display: flex;
+  gap: 15px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 8px;
+  padding: 10px 15px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.legend-color {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+
+.high-risk { background-color: #e53e3e; }
+.medium-risk { background-color: #dd6b20; }
+.low-risk { background-color: #38a169; }
+
+/* 数据展示区域 - 上下排列 */
+.data-section {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+/* 企业数据列表 - 固定高度滚动条 */
+.data-card {
   height: 450px;
-  z-index: 100; /* 保持地图在中间层级 */
-  overflow: visible; /* 允许内容溢出 */
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-.point-map {
-  flex: 0 0 70%;
-    margin-bottom: 20px;
-    
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,1);
-    overflow: visible !important;
+.table-container {
+  height: 100%;
+  overflow-y: auto;
+  padding: 15px;
 }
 
-.point-line {
-    
-    border-radius: 12px;/*圆角 */
-    box-shadow: 0 2px 8px rgba(0, 0,0, 0.08);
-    padding: 16px;/*内部间距 */
-    box-sizing: border-box;
+/* 图表区域 - 固定高度 */
+.chart-card {
+  height: 750px;
+  padding: 20px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-container {
+  flex: 1;
+  min-height: 0; /* 修复flex容器滚动问题 */
+}
+
+.data-info, .emission-info {
+  display: flex;
+  gap: 20px;
+  margin-left: 30px;
+  font-size: 0.9rem;
+  color: #4a5568;
+}
+
+.chart-header {
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e2e8f0;
 }
-.charts-line{
+
+.chart-header h3 {
+  font-size: 1.4rem;
+  color: #1a365d;
+  margin: 0 0 5px 0;
+}
+
+.chart-header p {
+  font-size: 1rem;
+  color: #718096;
+  margin: 0;
+}
+
+.chart-legend {
+  display: flex;
+  justify-content: center;
+  margin-top: 15px;
+  padding-top: 10px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.legend-item .primary {
+  background-color: #3182ce;
+}
+
+/* 页脚区域 */
+.footer-section {
+  margin-top: 30px;
+  padding: 20px 0;
+  text-align: center;
+  color: #546e7a;
+  font-size: 1rem;
+  border-top: 1px solid #e2e8f0;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin-top: 10px;
+  font-size: 0.9rem;
+  color: #718096;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .header-stats {
+    flex-wrap: wrap;
+  }
   
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  padding: 16px;
-  box-sizing: border-box;
-  max-width: 1800px;
-  width: 100%;
-  margin: 20px auto;
-}
-.component-title {
-  /* 基础布局：左对齐 + 紧凑间距 */
-  text-align: left;        /* 强制左对齐，告别居中 */
-  margin: 12px 0;          /* 上下间距缩小，更紧凑（原16px→12px） */
-  padding-left: 24px;      /* 给蓝色方块留空间 */
-  position: relative;      /* 为伪元素定位做准备 */
-
-  /* 文字样式：简约但醒目 */
-  font-size: 1.5rem;      /* 稍小一号，更克制（原1.5rem→1.25rem） */
-  font-weight: 600;        /* 适度加粗，比正文突出但不夸张 */
-  color: #1e88e5;          /* 统一蓝色，和方块颜色呼应 */
-  line-height: 1.2;        /* 紧凑行高，避免臃肿 */
-}
-
-/* 蓝色小方块：用伪元素实现，无额外HTML */
-.component-title::before {
-  content: "";
-  position: absolute;
-  left: 0;                /* 靠最左侧 */
-  top: 50%;              /* 垂直居中 */
-  transform: translateY(-50%);
-  width: 12px;           /* 方块大小，适中即可 */
-  height: 12px;
-  background-color: #1e88e5; /* 和文字同色，统一感 */
-  border-radius: 2px;    /* 轻微圆角，比直角更柔和 */
+  .stat-card {
+    flex: 0 0 calc(50% - 10px);
+    margin-bottom: 10px;
+  }
+}
+
+@media (max-width: 900px) {
+  .header-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+  }
+  
+  .header-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+  
+  .system-title {
+    font-size: 2rem;
+  }
+  
+  .section-title {
+    font-size: 1.6rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-container {
+    padding: 15px;
+    gap: 20px;
+  }
+  
+  .map-container {
+    height: 450px;
+  }
+  
+  .data-card, .chart-card {
+    height: 350px;
+  }
+  
+  .section-header {
+    flex-wrap: wrap;
+  }
+  
+  .map-controls {
+    margin-top: 10px;
+    width: 100%;
+  }
+  
+  .data-info, .emission-info {
+    margin-left: 0;
+    margin-top: 10px;
+    width: 100%;
+  }
 }
 
-</style>
+@media (max-width: 480px) {
+  .system-title {
+    font-size: 1.8rem;
+  }
+  
+  .section-title {
+    font-size: 1.4rem;
+  }
+  
+  .map-container {
+    height: 400px;
+  }
+  
+  .data-card, .chart-card {
+    height: 300px;
+  }
+  
+  .footer-links {
+    flex-direction: column;
+    gap: 5px;
+  }
+  
+  .header-stats {
+    gap: 10px;
+  }
+  
+  .stat-card {
+    flex: 0 0 100%;
+  }
+}
+</style>

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

@@ -1,18 +1,89 @@
 <template>
   <div class="cross-container">
-    <h3 class="table-title">断面数据地图展示</h3>
-    <div class="map-holder"><crosssectionmap/></div>
-
-     <h3 class="table-title">断面数据详情</h3>
-     <div><CrossSectionSamplelineData/></div>
-
-     <h3 class="table-title"> 各河流Cd的平均浓度柱状图</h3>
-     <div><CrossSetionData1/></div>
-
-     <h3 class="table-title">各区县的Cd平均浓度柱状图</h3>
-     <div><CrossSetionData2/></div>
+    <!-- 页面标题 -->
+    <div class="section-header">
+      <div class="section-icon">📊</div>
+      <h1 class="page-title">韶关市河流断面水质监测分析系统</h1>
+    </div>
+    
+    <!-- 地图展示区域 -->
+    <div class="dashboard-section">
+      <div class="section-header">
+        <div class="section-icon">🗺️</div>
+        <h2 class="component-title">断面空间分布图</h2>
+      </div>
+      <div class="dashboard-card map-card">
+        <div class="map-holder">
+          <crosssectionmap/>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 表格区域 - 上下排列 -->
+    <div class="tables-section">
+      <!-- 断面数据详情 -->
+      <div class="dashboard-section table-section">
+        <div class="section-header">
+          <div class="section-icon">📋</div>
+          <h2 class="component-title">断面水质数据详情</h2>
+          <div class="table-info">
+            <span class="info-item">数据更新时间: 2025-08-16</span>
+          </div>
+        </div>
+        <div class="dashboard-card data-card">
+          <div class="table-container">
+            <CrossSectionSamplelineData/>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 河流Cd浓度分析 -->
+      <div class="dashboard-section table-section">
+        <div class="section-header">
+          <div class="section-icon">📈</div>
+          <h2 class="component-title">河流Cd浓度分析</h2>
+          <div class="analysis-legend">
+            <div class="legend-item">
+              <div class="legend-color cadmium"></div>
+              <span>镉(Cd)浓度</span>
+            </div>
+          </div>
+        </div>
+        <div class="dashboard-card chart-card">
+          <div class="chart-header">
+            <h3>各河流Cd平均浓度对比</h3>
+            <p>韶关市主要河流镉元素含量分布</p>
+          </div>
+          <div class="chart-container">
+            <CrossSetionData1/>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 区县Cd浓度分析 -->
+      <div class="dashboard-section table-section">
+        <div class="section-header">
+          <div class="section-icon">📉</div>
+          <h2 class="component-title">区县Cd浓度分析</h2>
+          <div class="analysis-legend">
+            <div class="legend-item">
+              <div class="legend-color cadmium"></div>
+              <span>镉(Cd)浓度</span>
+            </div>
+          </div>
+        </div>
+        <div class="dashboard-card chart-card">
+          <div class="chart-header">
+            <h3>各区县Cd平均浓度对比</h3>
+            <p>韶关市行政区划镉元素含量分布</p>
+          </div>
+          <div class="chart-container">
+            <CrossSetionData2/>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
-
 </template>
 
 <script setup lang="ts">
@@ -20,45 +91,305 @@ import CrossSectionSamplelineData from '@/components/irrpollution/crossSectionSa
 import CrossSetionData1 from '@/components/irrpollution/crossSetionData1.vue';
 import CrossSetionData2 from '@/components/irrpollution/crossSetionData2.vue';
 import crosssectionmap from '@/components/irrpollution/crosssectionmap.vue';
-
 </script>
 
 <style scoped>
+/* 基础样式重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+}
+
+.cross-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
+  padding: 25px;
+  gap: 30px;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* 页面标题 */
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.page-title {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: #1a365d;
+  margin: 0;
+  position: relative;
+  padding-left: 15px;
+  flex-grow: 1;
+}
+
+.page-title::after {
+  content: "";
+  position: absolute;
+  bottom: -8px;
+  left: 0;
+  width: 100px;
+  height: 4px;
+  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
+  border-radius: 2px;
+}
+
+.section-icon {
+  font-size: 2.5rem;
+  color: #3a9fd3;
+}
+
+/* 主内容区 */
+.dashboard-section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* 卡片设计 */
+.dashboard-card {
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 6px 20px rgba(0, 60, 120, 0.12);
+  transition: all 0.4s ease;
+  overflow: hidden;
+  position: relative;
+}
+
+.dashboard-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 30px rgba(0, 60, 120, 0.18);
+}
+
+/* 地图容器 */
+.map-card {
+  height: 550px;
+  position: relative;
+}
+
 .map-holder {
   position: relative;
-  height: 600px; /* 减去标题高度，避免覆盖 */
-  overflow: visible;
+  height: 100%;
   z-index: 100;
 }
-.cross-container {
-  position: relative !important; /* 防止被 Leaflet 修改 */
-    overflow: visible !important; /* 确保标题不被裁剪 */
-}
-.table-title {
-  /* 基础布局：左对齐 + 紧凑间距 */
-  text-align: left;        /* 强制左对齐，告别居中 */
-  margin: 12px 0;          /* 上下间距缩小，更紧凑（原16px→12px） */
-  padding-left: 24px;      /* 给蓝色方块留空间 */
-  position: relative;      /* 为伪元素定位做准备 */
-  z-index: 200;
-
-  /* 文字样式：简约但醒目 */
-  font-size: 1.5rem;      /* 稍小一号，更克制（原1.5rem→1.25rem） */
-  font-weight: 600;        /* 适度加粗，比正文突出但不夸张 */
-  color: #1e88e5;          /* 统一蓝色，和方块颜色呼应 */
-  line-height: 1.2;        /* 紧凑行高，避免臃肿 */
-}
-
-/* 蓝色小方块：用伪元素实现，无额外HTML */
-.table-title::before {
+
+/* 表格区域 */
+.tables-section {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+/* 数据卡片 - 添加滚动条 */
+.data-card {
+  height: 550px;
+  padding: 0; /* 移除内边距 */
+  display: flex;
+  flex-direction: column;
+}
+
+.table-container {
+  flex: 1;
+  overflow-y: auto; /* 添加垂直滚动条 */
+  padding: 15px;
+}
+
+/* 图表卡片 */
+.chart-card {
+  height: 600px;
+  padding: 0; /* 移除内边距 */
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-container {
+  flex: 1;
+  overflow: hidden; /* 确保图表不会溢出 */
+  padding: 20px;
+}
+
+.chart-header {
+  margin-bottom: 15px;
+  padding: 20px 20px 10px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.chart-header h3 {
+  font-size: 1.4rem;
+  color: #1a365d;
+  margin: 0 0 5px 0;
+}
+
+.chart-header p {
+  font-size: 1rem;
+  color: #718096;
+  margin: 0;
+}
+
+/* 组件标题 */
+.component-title {
+  font-size: 1.6rem;
+  font-weight: 600;
+  color: #1a365d;
+  position: relative;
+  padding-left: 10px;
+}
+
+.component-title::before {
   content: "";
   position: absolute;
-  left: 0;                /* 靠最左侧 */
-  top: 50%;              /* 垂直居中 */
+  left: 0;
+  top: 50%;
   transform: translateY(-50%);
-  width: 12px;           /* 方块大小，适中即可 */
-  height: 12px;
-  background-color: #1e88e5; /* 和文字同色，统一感 */
-  border-radius: 2px;    /* 轻微圆角，比直角更柔和 */
+  width: 4px;
+  height: 80%;
+  background: linear-gradient(to bottom, #4a9ef7, #3acfd5);
+  border-radius: 2px;
+}
+
+.table-info {
+  display: flex;
+  gap: 20px;
+  margin-left: 30px;
+  font-size: 0.9rem;
+  color: #4a5568;
+}
+
+.analysis-legend {
+  display: flex;
+  gap: 15px;
+  margin-left: 30px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.legend-color {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+
+.cadmium {
+  background-color: #ff6b6b;
+}
+
+/* 页脚区域 */
+.footer-section {
+  margin-top: 30px;
+  padding: 20px 0;
+  text-align: center;
+  color: #546e7a;
+  font-size: 1rem;
+  border-top: 1px solid #e2e8f0;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin-top: 10px;
+  font-size: 0.9rem;
+  color: #78909c;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .map-card {
+    height: 500px;
+  }
+  
+  .data-card,
+  .chart-card {
+    height: 500px;
+  }
+}
+
+@media (max-width: 900px) {
+  .page-title {
+    font-size: 1.8rem;
+  }
+  
+  .component-title {
+    font-size: 1.4rem;
+  }
+  
+  .data-card,
+  .chart-card {
+    height: 450px;
+  }
+}
+
+@media (max-width: 768px) {
+  .cross-container {
+    padding: 15px;
+    gap: 20px;
+  }
+  
+  .section-header {
+    flex-wrap: wrap;
+  }
+  
+  .page-title {
+    font-size: 1.6rem;
+    width: 100%;
+    padding-left: 0;
+  }
+  
+  .component-title {
+    font-size: 1.3rem;
+  }
+  
+  .map-card {
+    height: 450px;
+  }
+  
+  .data-card,
+  .chart-card {
+    height: 350px;
+  }
+  
+  .table-info,
+  .analysis-legend {
+    margin-left: 0;
+    margin-top: 10px;
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .page-title {
+    font-size: 1.5rem;
+  }
+  
+  .component-title {
+    font-size: 1.2rem;
+  }
+  
+  .map-card {
+    height: 400px;
+  }
+  
+  .data-card,
+  .chart-card {
+    height: 300px;
+  }
+  
+  .footer-links {
+    flex-direction: column;
+    gap: 5px;
+  }
 }
 </style>

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

@@ -1,29 +1,61 @@
 <template>
   <div class="page-container">
+    <!-- 页眉设计 -->
     <div class="header">
-        <h1>灌溉水采样点分析系统</h1>
-        <p>韶关市水环境重金属监测数据可视化分析平台</p>
+      <div class="header-content">
+        <div class="header-left">
+          <h1>灌溉水采样点分析系统</h1>
+        </div>
       </div>
-
-  <div class="main-content">
-   <div class="point-map">
-    <div class="component-title">采样点地图展示</div>
-    <div class="map-holder">
-        <irrwatermap/>
+      <div class="header-divider"></div>
     </div>
-   </div>
 
-  
-   <div class="point-line">
-    <div class="component-title">采样点数据列表展示</div>
-    <Waterdataline/>
-   </div>
+    <!-- 主内容区 -->
+    <div class="main-content">
+      <!-- 地图展示区域 -->
+      <div class="dashboard-section">
+        <div class="section-header">
+          <div class="section-icon">🗺️</div>
+          <h2 class="component-title">采样点地理分布</h2>
+        </div>
+        <div class="dashboard-card map-card">
+          <div class="map-holder">
+            <irrwatermap/>
+          </div>
+        </div>
+      </div>
 
-   <div class="charts-line">
-    <div class="component-title">韶关市各区县重金属平均浓度</div>
-    <Waterassaydata2/>
-   </div>
-  </div>
+      <!-- 数据展示区域 - 上下排列 -->
+      <div class="data-section">
+        <!-- 数据列表 - 固定高度滚动条 -->
+        <div class="dashboard-section">
+          <div class="section-header">
+            <div class="section-icon">📋</div>
+            <h2 class="component-title">采样点水质数据</h2>
+          </div>
+          <div class="dashboard-card data-card">
+            <div class="table-container">
+              <Waterdataline/>
+            </div>
+          </div>
+        </div>
+
+        <!-- 图表分析 - 上下排列 -->
+        <div class="dashboard-section">
+          <div class="section-header">
+            <div class="section-icon">📊</div>
+            <h2 class="component-title">区域重金属分析</h2>
+          </div>
+          <div class="dashboard-card chart-card">
+            <div class="chart-header">
+              <h3>各区县重金属平均浓度对比</h3>
+              <p>韶关市水环境重金属污染分布情况</p>
+            </div>
+            <Waterassaydata2/>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -31,188 +63,481 @@
 import Waterdataline from '@/components/irrpollution/waterdataline.vue';
 import Waterassaydata2 from '@/components/irrpollution/waterassaydata2.vue';
 import irrwatermap from '@/components/irrpollution/irrwatermap.vue';
-
-
-
-
 </script>
 
 <style scoped>
-.map-holder {
-  position: relative;
-  height: 60%; 
-  z-index: 100;
+/* 基础样式重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
 }
+
 .page-container {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
   padding: 20px;
-  box-sizing: border-box;
-  
-  gap: 20px;
-  margin: 0;
-  position: relative !important; /* 防止被 Leaflet 修改 */
-  overflow: visible !important; /* 确保标题不被裁剪 */
+  gap: 25px;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* 页眉样式 */
+.header {
+  border-radius: 16px;
+  padding: 25px;
 }
 
-.point-map {
-    flex: 2; /* 自适应剩余空间 */
-  min-height: 600px; /* 最小高度保证显示 */
-  max-height: 70vh; /* 最大高度限制，避免溢出 */
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 20px;
-  
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 弱化阴影，避免视觉冲突 */
-  position: relative;
-  overflow: hidden; /* 隐藏超出容器的内容 */
 }
 
-.point-line {
-    
-    border-radius: 12px;/*圆角 */
-    box-shadow: 0 2px 8px rgba(0, 0,0, 0.08);
-    padding: 16px;/*内部间距 */
-    box-sizing: border-box;
+.header-left h1 {
+  color: #1a365d;
+  font-size: 2.4rem;
+  margin-bottom: 10px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
 }
-.charts-line{
+
+.header-left p {
+  color: #2d5986;
+  font-size: 1.3rem;
+  font-weight: 400;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.data-indicator {
+  display: flex;
+  gap: 30px;
+  padding: 15px 25px;
+  background: rgba(235, 245, 255, 0.7);
   border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  padding: 16px;
-  box-sizing: border-box;
-  margin: 0 auto;
-  width: 100%;
+  border-left: 4px solid #3a9fd3;
 }
 
-.header {
+.indicator-item {
   text-align: center;
-  padding: 20px 0 30px;
-  margin-bottom: 20px;
 }
 
-.header h1 {
-  color: #1e88e5;
-  font-size: 2.5rem;
-  margin-bottom: 10px;
-  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+.indicator-value {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: #1a6fb0;
+  line-height: 1.2;
 }
 
-.header p {
-  color: #546e7a;
-  font-size: 1.2rem;
-  max-width: 600px;
-  margin: 0 auto;
+.indicator-label {
+  font-size: 1rem;
+  color: #4a5568;
+  font-weight: 500;
+}
+
+.header-divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, #cbd5e0, transparent);
 }
 
-.content-wrapper {
+/* 主内容区 */
+.main-content {
   display: flex;
   flex-direction: column;
-  gap: 25px;
+  gap: 30px;
   flex: 1;
 }
 
-.single-row {
-  background-color: rgba(255, 255, 255, 0.85);
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  overflow: hidden;
-  transition: transform 0.3s ease;
-  width: 100%;
-}
-
-.single-row:hover {
-  transform: translateY(-5px);
+/* 区域标题 */
+.dashboard-section {
+  margin-bottom: 30px;
 }
 
-.map-container {
-  height: 500px;
-  padding: 10px;
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+  padding: 0 10px;
 }
 
-.data-container, .chart-container {
-  padding: 10px;
-  height: 350px;
+.section-icon {
+  font-size: 2rem;
+  color: #3a9fd3;
 }
 
 .component-title {
-  /* 基础布局：左对齐 + 紧凑间距 */
-  text-align: left;        /* 强制左对齐，告别居中 */
-  margin: 12px 0 5px;          /* 上下间距缩小，更紧凑（原16px→12px） */
-  padding-left: 24px;      /* 给蓝色方块留空间 */
-  position: relative;      /* 为伪元素定位做准备 */
-  z-index: 10000;
-  /* 文字样式：简约但醒目 */
-  font-size: 1.5rem;      /* 稍小一号，更克制（原1.5rem→1.25rem） */
-  font-weight: 600;        /* 适度加粗，比正文突出但不夸张 */
-  color: #1e88e5;          /* 统一蓝色，和方块颜色呼应 */
-  line-height: 1.2;        /* 紧凑行高，避免臃肿 */
+  font-size: 1.6rem;
+  font-weight: 600;
+  color: #1a365d;
+  position: relative;
+  padding-left: 15px;
+  flex-grow: 1;
 }
 
 .component-title::before {
   content: "";
   position: absolute;
-  left: 8px;
+  left: 0;
   top: 50%;
   transform: translateY(-50%);
-  width: 8px;
-  height: 8px;
-  background-color: #1e88e5;
-  border-radius: 50%;
+  width: 6px;
+  height: 80%;
+  background: linear-gradient(to bottom, #4a9ef7, #3acfd5);
+  border-radius: 3px;
 }
 
-.footer {
-  text-align: center;
+.map-actions, .data-actions, .chart-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.map-action-btn, .data-select {
+  padding: 8px 16px;
+  border: 1px solid #cbd5e0;
+  border-radius: 6px;
+  background: white;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.map-action-btn:hover {
+  background: #f0f7ff;
+}
+
+.data-select {
+  padding: 8px 12px;
+}
+
+/* 卡片设计 */
+.dashboard-card {
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 6px 20px rgba(0, 60, 120, 0.12);
+  transition: all 0.4s ease;
+  overflow: hidden;
+  position: relative;
+}
+
+.dashboard-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 30px rgba(0, 60, 120, 0.18);
+}
+
+/* 地图容器 */
+.map-card {
+  height: 550px;
+  position: relative;
+}
+
+.map-holder {
+  position: relative;
+  height: 100%;
+  z-index: 100;
+}
+
+.map-overlay {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  z-index: 200;
+}
+
+.map-stats {
+  display: flex;
+  gap: 25px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 12px;
+  padding: 15px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.stat-icon {
+  font-size: 1.8rem;
+}
+
+.stat-value {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #1a6fb0;
+  line-height: 1.2;
+}
+
+.stat-label {
+  font-size: 0.95rem;
+  color: #4a5568;
+  font-weight: 500;
+}
+
+/* 数据区域 - 上下排列 */
+.data-section {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+/* 数据卡片 - 固定高度滚动条 */
+.data-card {
+  height: 450px;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 15px;
+}
+
+.table-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.pagination {
+  display: flex;
+  gap: 10px;
+}
+
+.page-btn {
+  padding: 6px 12px;
+  border: 1px solid #cbd5e0;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.page-btn:hover {
+  background: #edf2f7;
+}
+
+.page-btn.active {
+  background: #4a9ef7;
+  color: white;
+  border-color: #4a9ef7;
+}
+
+/* 图表卡片 */
+.chart-card {
+  height: 600px;
   padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-header {
+  margin-bottom: 20px;
+}
+
+.chart-header h3 {
+  font-size: 1.4rem;
+  color: #1a365d;
+  margin: 0 0 8px 0;
+  font-weight: 600;
+}
+
+.chart-header p {
+  font-size: 1rem;
+  color: #718096;
+  margin: 0;
+}
+
+.chart-legend {
+  display: flex;
+  justify-content: center;
+  gap: 25px;
+  margin-top: 20px;
+  padding: 15px 0;
+  border-top: 1px solid #e2e8f0;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.color-box {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+
+.cadmium { background-color: #ff6b6b; }
+.lead { background-color: #4ecdc4; }
+.chromium { background-color: #ffd166; }
+.arsenic { background-color: #6a0572; }
+
+/* 页脚样式 */
+.footer {
   margin-top: 30px;
+  padding: 25px 0;
+  text-align: center;
   color: #546e7a;
+  font-size: 1rem;
+  position: relative;
+}
+
+.footer::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 200px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, #cbd5e0, transparent);
+}
+
+.footer-content {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin-top: 15px;
   font-size: 0.9rem;
+  color: #78909c;
 }
 
 /* 响应式设计 */
 @media (max-width: 1200px) {
-  .map-container {
-    height: 450px;
+  .header-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+  }
+  
+  .header-right {
+    width: 100%;
   }
 }
 
-@media (max-width: 768px) {
-  .header h1 {
+@media (max-width: 900px) {
+  .header-left h1 {
     font-size: 2rem;
   }
   
-  .header p {
-    font-size: 1rem;
+  .header-left p {
+    font-size: 1.1rem;
+  }
+  
+  .map-stats {
+    gap: 15px;
+    padding: 12px;
   }
   
-  .map-container {
+  .stat-value {
+    font-size: 1.6rem;
+  }
+  
+  .data-card, .chart-card {
     height: 400px;
   }
+}
+
+@media (max-width: 768px) {
+  .page-container {
+    padding: 15px;
+    gap: 20px;
+  }
   
-  .data-container, .chart-container {
-    height: 300px;
+  .header {
+    padding: 20px;
+  }
+  
+  .header-left h1 {
+    font-size: 1.8rem;
   }
   
   .component-title {
-    font-size: 1.3rem;
-    padding: 12px 12px 12px 20px;
+    font-size: 1.4rem;
+  }
+  
+  .map-card {
+    height: 450px;
+  }
+  
+  .data-card, .chart-card {
+    height: 350px;
+  }
+  
+  .map-actions, .data-actions, .chart-actions {
+    flex-wrap: wrap;
+    margin-top: 10px;
+  }
+  
+  .stat-item {
+    flex-direction: column;
+    text-align: center;
+    gap: 5px;
+  }
+  
+  .table-footer {
+    flex-direction: column;
+    gap: 15px;
   }
 }
 
 @media (max-width: 480px) {
-  .header h1 {
-    font-size: 1.8rem;
+  .header-left h1 {
+    font-size: 1.6rem;
   }
   
   .component-title {
-    font-size: 1.2rem;
+    font-size: 1.3rem;
+    padding-left: 10px;
   }
   
-  .map-container {
-    height: 350px;
+  .component-title::before {
+    width: 4px;
   }
   
-  .page-container {
-    padding: 15px;
+  .map-card {
+    height: 400px;
+  }
+  
+  .data-card, .chart-card {
+    height: 300px;
+  }
+  
+  .map-stats {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .stat-item {
+    flex: 0 0 calc(50% - 10px);
+    margin-bottom: 10px;
+  }
+  
+  .footer-links {
+    flex-direction: column;
+    gap: 8px;
   }
 }
 </style>

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

@@ -1,44 +1,110 @@
 <template>
   <div class="sampling-process">
-    <h2>1.采样容器与过程</h2>
-    <p>
-      采样容器均为500mL的白色聚乙烯瓶，采样体积均为500mL，采样过程在不同天气条件下进行，主要天气状况包括多云、阴天和小雨，
-      采样点周边环境主要为河流，只有少数样品采集于水渠或瀑布区域。
-    </p>
-
-    <div class="image-row">
-      <div class="image-container">
-        <el-image :src="image1" alt="采样容器" class="sampling-image"></el-image>
-        <p class="image-caption">图1-1 采样容器</p>
+    <!-- 采样容器与过程部分 -->
+    <div class="section-container">
+      <div class="section-header">
+        <div class="section-number">1</div>
+        <h2>采样容器与过程</h2>
       </div>
-      <div class="image-container">
-        <el-image :src="image2" alt="采样现场" class="sampling-image"></el-image>
-        <p class="image-caption">图1-2 采样现场</p>
-      </div>
-      <div class="image-container">
-        <el-image :src="image3" alt="灌溉水采样设备" class="sampling-image"></el-image>
-        <p class="image-caption">图1-3 灌溉水采样设备</p>
+      
+      <div class="section-content">
+        <div class="description-card">
+          <div class="icon">🧪</div>
+          <div class="description-text">
+            <p>
+              采样容器均为500mL的白色聚乙烯瓶，采样体积均为500mL，采样过程在不同天气条件下进行，
+              主要天气状况包括多云、阴天和小雨，采样点周边环境主要为河流，只有少数样品采集于水渠或瀑布区域。
+            </p>
+          </div>
+        </div>
+        
+        <div class="image-gallery">
+          <div class="image-card">
+            <el-image :src="image1" alt="采样容器" class="sampling-image"></el-image>
+            <div class="image-info">
+              <h3>采样容器</h3>
+              <p>500mL白色聚乙烯瓶，符合水质采样标准</p>
+            </div>
+          </div>
+          
+          <div class="image-card">
+            <el-image :src="image2" alt="采样现场" class="sampling-image"></el-image>
+            <div class="image-info">
+              <h3>采样现场</h3>
+              <p>河流环境采样，多云天气条件下进行</p>
+            </div>
+          </div>
+          
+          <div class="image-card">
+            <el-image :src="image3" alt="灌溉水采样设备" class="sampling-image"></el-image>
+            <div class="image-info">
+              <h3>灌溉水采样设备</h3>
+              <p>专业水质采样设备，确保样品完整性</p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-
-    <h2>2.样品保存与现场情况</h2>
-    <p>
-      绝大多数样品状态为无色、无沉淀、无味、无悬浮物，只有少量样品稍显浑浊并含有沉淀物,为了保证样品的完整性和数据的准确性，
-      采样后的保存方式包括了冷藏、避光、确保标签完好以及采取有效的减震措施，以避免运输过程中的振动和损坏。
-    </p>
-
-    <div class="image-row">
-      <div class="image-container">
-        <el-image :src="fieldImage1" alt="工作人员采样现场" class="sampling-image"></el-image>
-        <p class="image-caption">图2-1 采样现场</p>
+    
+    <!-- 样品保存与现场情况部分 -->
+    <div class="section-container">
+      <div class="section-header">
+        <div class="section-number">2</div>
+        <h2>样品保存与现场情况</h2>
       </div>
-      <div class="image-container">
-        <el-image :src="fieldImage2" alt="工作人员采样现场" class="sampling-image"></el-image>
-        <p class="image-caption">图2-2 采样现场</p>
-      </div>
-      <div class="image-container">
-        <el-image :src="fieldImage3" alt="工作人员采样现场" class="sampling-image"></el-image>
-        <p class="image-caption">图2-3 采样现场</p>
+      
+      <div class="section-content">
+        <div class="preservation-info">
+          <div class="preservation-card">
+            <div class="preservation-icon">🌡️</div>
+            <div>
+              <h3>样品保存</h3>
+              <ul>
+                <li>冷藏保存，温度控制在4℃</li>
+                <li>避光处理，防止光化学反应</li>
+                <li>标签完好，清晰记录采样信息</li>
+                <li>减震措施，防止运输过程损坏</li>
+              </ul>
+            </div>
+          </div>
+          
+          <div class="preservation-card">
+            <div class="preservation-icon">🔍</div>
+            <div>
+              <h3>样品状态</h3>
+              <ul>
+                <li>绝大多数样品：无色、无沉淀、无味、无悬浮物</li>
+                <li>少数样品：稍显浑浊并含有沉淀物</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        
+        <div class="field-gallery">
+          <div class="field-card">
+            <el-image :src="fieldImage1" alt="工作人员采样现场" class="sampling-image"></el-image>
+            <div class="field-info">
+              <h3>河流采样现场</h3>
+              <p>多云天气下的河流采样工作</p>
+            </div>
+          </div>
+          
+          <div class="field-card">
+            <el-image :src="fieldImage2" alt="工作人员采样现场" class="sampling-image"></el-image>
+            <div class="field-info">
+              <h3>水渠采样现场</h3>
+              <p>小雨天气下的水渠采样工作</p>
+            </div>
+          </div>
+          
+          <div class="field-card">
+            <el-image :src="fieldImage3" alt="工作人员采样现场" class="sampling-image"></el-image>
+            <div class="field-info">
+              <h3>瀑布区域采样</h3>
+              <p>特殊地形条件下的采样工作</p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -61,11 +127,11 @@ export default {
 
 <style scoped>
 .sampling-process {
-  padding: 20px;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
-  min-height: 100vh;
+  padding: 30px;
+  background: linear-gradient(135deg, rgba(245, 250, 255, 0.85) 0%, rgba(235, 245, 255, 0.85) 100%);
   position: relative;
   overflow: hidden;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .sampling-process::before {
@@ -76,83 +142,255 @@ export default {
   width: 100%;
   height: 100%;
   background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
-  opacity: 0.3;
+  opacity: 0.12;
   z-index: -1;
+  filter: blur(2px);
 }
 
-.image-row {
+.section-container {
+  margin-bottom: 50px;
+  padding: 30px;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.88);
+  box-shadow: 0 8px 25px rgba(0, 60, 120, 0.08);
+  transition: all 0.4s ease;
+  overflow: hidden;
+  position: relative;
+}
+
+.section-container:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 35px rgba(0, 60, 120, 0.15);
+}
+
+.section-header {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: 30px 0;
-  gap: 20px;
+  align-items: center;
+  margin-bottom: 25px;
+  position: relative;
+  padding-bottom: 15px;
+  border-bottom: 2px solid rgba(58, 160, 207, 0.25);
 }
 
-p {
-  text-indent: 2em;
+.section-number {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(135deg, #4a9ef7, #3a9fd3);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin-right: 20px;
+  box-shadow: 0 5px 12px rgba(74, 158, 247, 0.25);
 }
 
-.image-container {
-  flex: 1;
-  min-width: 280px;
-  border-radius: 12px;
+h2 {
+  color: #1a365d;
+  font-size: 1.9rem;
+  margin: 0;
+  font-weight: 650;
+  letter-spacing: 0.5px;
+}
+
+.section-content {
+  padding: 0 10px;
+}
+
+.description-card {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 30px;
+  padding: 20px;
+  background: rgba(235, 245, 255, 0.6);
+  border-radius: 15px;
+}
+
+.icon {
+  font-size: 2.5rem;
+  margin-right: 25px;
+  color: #3a9fd3;
+}
+
+.description-text p {
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: #2d3748;
+  margin: 0;
+}
+
+/* 图片画廊样式 */
+.image-gallery, .field-gallery {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 25px;
+  margin-top: 20px;
+}
+
+.image-card, .field-card {
+  border-radius: 15px;
   overflow: hidden;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-  background: rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
+  transition: all 0.4s ease;
+  background: white;
 }
 
-.image-container:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  background: rgba(255, 255, 255, 0.85);
+.image-card:hover, .field-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
 }
 
 .sampling-image {
-  border-radius: 12px 12px 0 0 !important;
-  overflow: hidden;
-  border: none !important;
-  width: 100% !important;
-  height: 250px;
+  width: 100%;
+  height: 230px;
   display: block;
-  transition: transform 0.5s ease;
-  background: rgba(255, 255, 255, 0.4);
+  object-fit: cover;
+  transition: transform 0.4s ease;
+  background: rgba(245, 249, 255, 0.4);
 }
 
-.image-container:hover .sampling-image {
-  transform: scale(1.03);
+.image-card:hover .sampling-image, .field-card:hover .sampling-image {
+  transform: scale(1.05);
 }
 
-.image-caption {
-  text-align: center;
-  font-size: 15px;
-  color: #2d3748;
-  padding: 12px;
-  font-weight: 500;
-  background: rgba(248, 250, 252, 0.7);
+.image-info, .field-info {
+  padding: 20px;
+}
+
+.image-info h3, .field-info h3 {
+  color: #1a365d;
+  font-size: 1.25rem;
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.image-info p, .field-info p {
+  font-size: 0.95rem;
+  color: #4a5568;
+  margin: 0;
+  line-height: 1.6;
+}
+
+/* 样品保存信息 */
+.preservation-info {
+  display: flex;
+  gap: 25px;
+  margin-bottom: 35px;
+}
+
+.preservation-card {
+  flex: 1;
+  display: flex;
+  padding: 20px;
+  background: rgba(245, 252, 255, 0.7);
+  border-radius: 15px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+  border-left: 4px solid #3a9fd3;
+}
+
+.preservation-icon {
+  font-size: 2.2rem;
+  margin-right: 20px;
+  color: #3a9fd3;
+}
+
+.preservation-card h3 {
+  color: #1a365d;
+  font-size: 1.3rem;
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
+.preservation-card ul {
+  padding-left: 20px;
   margin: 0;
 }
 
+.preservation-card li {
+  margin-bottom: 10px;
+  font-size: 1.05rem;
+  line-height: 1.6;
+  color: #2d3748;
+}
+
 /* 响应式设计 */
-@media (max-width: 900px) {
-  .image-container {
-    min-width: 48%;
+@media (max-width: 1100px) {
+  .image-gallery, .field-gallery {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .preservation-info {
+    flex-direction: column;
   }
 }
 
 @media (max-width: 768px) {
-
-  .image-container {
-    min-width: 100%;
+  .image-gallery, .field-gallery {
+    grid-template-columns: 1fr;
+  }
+  
+  .section-container {
+    padding: 25px;
+  }
+  
+  .section-number {
+    width: 45px;
+    height: 45px;
+    font-size: 1.6rem;
+  }
+  
+  h2 {
+    font-size: 1.7rem;
+  }
+  
+  .description-card {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .icon {
+    margin-right: 0;
+    margin-bottom: 15px;
+  }
+  
+  .preservation-card {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .preservation-icon {
+    margin-right: 0;
+    margin-bottom: 15px;
   }
 }
 
 @media (max-width: 480px) {
   .sampling-process {
-    padding: 10px;
+    padding: 20px;
   }
-
+  
+  .section-container {
+    padding: 20px;
+  }
+  
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .section-number {
+    margin-right: 0;
+    margin-bottom: 15px;
+  }
+  
+  h2 {
+    font-size: 1.6rem;
+  }
+  
   .sampling-image {
     height: 200px;
   }

src/views/User/hmInFlux/grainRemoval/grainRemovalInputFlux.vue

@@ -2,110 +2,260 @@
   <div class="container">
     <div class="gradient-card">
       <div class="card-header">
-        <h1>籽粒移除输出通量计算器</h1>
-        <p>评估作物镉含量及籽粒移除对镉的影响，助力农业安全生产</p>
+        <h1>籽粒移除输出通量计算结果</h1>
+        <p>{{ area }}地区作物籽粒移除Cd通量分析报告</p>
       </div>
 
-      <div class="instruction-section">
-        <h2>使用说明</h2>
-        <ol>
-          <li>首次使用请点击"作物镉模型计算"按钮。</li>
-          <li>点击"作物镉模型计算"按钮跳转到作物镉模型计算页面。</li>
-          <li>在作物镉模型计算页面完成计算后返回此页面。</li>
-        </ol>
+      <div v-if="loading" class="loading-section">
+        <i class="fas fa-spinner fa-spin"></i> 正在加载数据...
       </div>
 
-      <div class="crop-cd-model-section">
-        <button class="calculate-btn" @click="openCropCdModelPage">
-          <i class="fas fa-calculator"></i> 作物镉模型计算
-        </button>
+      <div v-if="error" class="error-section">
+        <i class="fas fa-exclamation-triangle"></i> {{ error }}
       </div>
 
-      <div class="input-section">
-        <div class="input-group">
-          <label class="label">作物亩产量 (斤)</label>
-          <input v-model="yieldPerMu" placeholder="800" class="custom-input" :disabled="!cropCdModelCalculated" />
+      <template v-if="!loading && !error">
+        <div class="statistics-section">
+          <h2><i class="fas fa-chart-bar"></i> 统计分析</h2>
+          <div class="stats-grid">
+            <div class="stat-card">
+              <div class="stat-value">{{ statistics.total_samples.toLocaleString() }}</div>
+              <div class="stat-label">总样本数</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-value">{{ statistics.mean_flux.toFixed(2) }} g/ha/a</div>
+              <div class="stat-label">平均通量</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-value">{{ statistics.max_flux.toFixed(2) }} g/ha/a</div>
+              <div class="stat-label">最大通量</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-value">{{ statistics.min_flux.toFixed(2) }} g/ha/a</div>
+              <div class="stat-label">最小通量</div>
+            </div>
+          </div>
         </div>
 
-        <div class="info-panel">
-          <div class="info-item">
-            <i class="fas fa-chart-line"></i>
-            <span>建议范围: 500 - 1500</span>
+        <div class="visualization-section">
+          <h2><i class="fas fa-map"></i> 可视化分析图</h2>
+          <img v-if="visualizationImage" :src="visualizationImage" alt="Cd含量地图" class="result-image">
+          <div v-if="visualizationError" class="error-section">
+            <i class="fas fa-exclamation-triangle"></i> {{ visualizationError }}
+          </div>
+          <div v-else class="image-container">
+            
           </div>
         </div>
-      </div>
 
-      <div class="button-section">
-        <button class="calculate-btn" :disabled="!cropCdModelCalculated || !yieldPerMu" @click="onCalculate">
-          <i class="fas fa-calculator"></i> 籽粒移除计算
-        </button>
-      </div>
+        <div class="data-section">
+          <h2><i class="fas fa-table"></i> 详细数据</h2>
+          <el-table
+            :data="tableData"
+            height="400"
+            style="width: 100%"
+            class="custom-table"
+            :header-cell-style="{ background: 'rgba(0, 150, 136, 0.1)', color: '#006064', fontWeight: '600' }"
+          >
+            <el-table-column prop="farmland_id" label="农田ID" width="120" align="center"></el-table-column>
+            <el-table-column prop="sample_id" label="样本ID" width="120" align="center"></el-table-column>
+            <el-table-column prop="crop_cd_value" label="作物镉Cd(mg/kg)" align="center">
+              <template #default="scope">
+                {{ scope.row.crop_cd_value.toFixed(5) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="f11_yield" label="作物亩产量（斤）" width="150" align="center"></el-table-column>
+            <el-table-column prop="grain_removal_flux" label="籽粒移除通量(g/ha/a)" width="170" align="center">
+              <template #default="scope">
+                {{ scope.row.grain_removal_flux.toFixed(5) }}
+              </template>
+            </el-table-column>
+          </el-table>
+          
+          <el-pagination
+            background
+            layout="prev, pager, next, sizes, total"
+            :total="results.length"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            :page-sizes="[5, 10, 20, 50]"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            class="custom-pagination"
+          >
+          </el-pagination>
+        </div>
 
-      <div class="card-footer">
-        <p><i class="fas fa-lightbulb"></i> 提示: 输入数据后点击"籽粒移除计算"按钮获取详细分析</p>
-      </div>
+        <div class="formula-section">
+          <h2><i class="fas fa-calculator"></i> 计算公式</h2>
+          <div class="formula-card">
+            {{ formula }}
+          </div>
+          <div class="unit-note">
+            <i class="fas fa-info-circle"></i> 单位: {{ unit }}
+          </div>
+        </div>
+
+        <div class="card-footer">
+          <p><i class="fas fa-clock"></i> 报告生成时间: {{ reportTime }}</p>
+        </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script>
-import { ref } from 'vue';
+import { ref, computed, onMounted } from 'vue';
+import { ElTable, ElTableColumn, ElPagination } from 'element-plus';
 
 export default {
-  name: 'GrainRemovalCalculator',
-  setup() {
-    const cropCdModelCalculated = ref(false);
-    const yieldPerMu = ref(null);
-
-    const openCropCdModelPage = () => {
-      // 这里可以实现跳转到作物镉模型计算页面的逻辑
-      // 例如：window.location.href = '/crop-cd-model';
-      alert('打开作物镉模型计算页面');
-      cropCdModelCalculated.value = true;
+  name: 'GrainRemovalResult',
+  components: {
+    ElTable,
+    ElTableColumn,
+    ElPagination
+  },
+  props: {
+    area: {
+      type: String,
+      default: '韶关'
+    }
+  },
+  setup(props) {
+    // 响应式数据
+    const results = ref([]);
+    const statistics = ref({
+      total_samples: 0,
+      mean_flux: 0,
+      max_flux: 0,
+      min_flux: 0
+    });
+    const formula = ref("");
+    const unit = ref("");
+    const visualizationImage = ref("");
+    const reportTime = ref("");
+    const loading = ref(true);
+    const error = ref(null);
+    
+    // 分页相关变量
+    const currentPage = ref(1);
+    const pageSize = ref(5);
+    
+    // 计算分页后的数据
+    const tableData = computed(() => {
+      const start = (currentPage.value - 1) * pageSize.value;
+      const end = start + pageSize.value;
+      return results.value.slice(start, end);
+    });
+    
+    // 分页事件处理
+    const handleSizeChange = (newSize) => {
+      pageSize.value = newSize;
+      currentPage.value = 1; // 重置到第一页
     };
-
-    const onCalculate = () => {
-      if (!yieldPerMu.value) {
-        alert('请输入作物亩产量');
-        return;
+    
+    const handleCurrentChange = (newPage) => {
+      currentPage.value = newPage;
+    };
+    
+    // 从API获取数据
+    const fetchData = async () => {
+      try {
+        // 获取计算结果数据
+        const dataResponse = await fetch(
+          `http://127.0.0.1:8000/api/cd-flux-removal/grain-removal?area=${encodeURIComponent(props.area)}`
+        );
+        
+        if (!dataResponse.ok) {
+          throw new Error(`数据获取失败: ${dataResponse.statusText}`);
+        }
+        
+        const dataJson = await dataResponse.json();
+        
+        if (!dataJson.success) {
+          throw new Error(`API错误: ${dataJson.message}`);
+        }
+        
+        // 设置数据
+        results.value = dataJson.data.results;
+        statistics.value = dataJson.data.statistics;
+        formula.value = dataJson.data.formula;
+        unit.value = dataJson.data.unit;
+        
+        // 获取可视化图片
+        const imageResponse = await fetch(
+          `http://127.0.0.1:8000/api/cd-flux-removal/grain-removal/visualize?area=${encodeURIComponent(props.area)}&level=city`
+        );
+        
+        if (!imageResponse.ok) {
+          throw new Error(`图片获取失败: ${imageResponse.statusText}`);
+        }
+        
+        // 创建图片Blob URL
+        const blob = await imageResponse.blob();
+        visualizationImage.value = URL.createObjectURL(blob);
+        
+        // 设置报告时间
+        reportTime.value = new Date().toLocaleString('zh-CN', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit'
+        });
+        
+      } catch (err) {
+        console.error('数据获取错误:', err);
+        error.value = err.message || '获取数据时发生错误';
+      } finally {
+        loading.value = false;
       }
-      alert(`计算完成！当前亩产量: ${yieldPerMu.value} 斤`);
     };
-
+    
+    // 组件挂载时获取数据
+    onMounted(() => {
+      fetchData();
+    });
+    
     return {
-      cropCdModelCalculated,
-      yieldPerMu,
-      openCropCdModelPage,
-      onCalculate
+      results,
+      statistics,
+      formula,
+      unit,
+      visualizationImage,
+      reportTime,
+      loading,
+      error,
+      tableData,
+      currentPage,
+      pageSize,
+      handleSizeChange,
+      handleCurrentChange
     };
   }
 };
 </script>
 
 <style scoped>
-body, html {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  overflow: hidden; /* 禁止页面滚动 */
-}
-
+/* 保留您原有的样式，只添加Element UI的自定义样式 */
 .container {
   display: flex;
   justify-content: center;
-  align-items: center; /* 居中对齐 */
-  height: 100vh;
+  align-items: center;
+  min-height: 100vh;
+  padding: 20px;
+  background: linear-gradient(135deg, #e6f7ff, #b3e0ff);
 }
 
 .gradient-card {
   background: linear-gradient(135deg,
-      rgba(250, 253, 255, 0.8),
-      rgba(137, 223, 252, 0.8));
+      rgba(250, 253, 255, 0.9),
+      rgba(220, 240, 255, 0.9));
   border-radius: 20px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
   padding: 30px;
   width: 100%;
-  max-width: 500px;
+  max-width: 1000px;
   backdrop-filter: blur(8px);
   border: none;
   display: flex;
@@ -115,227 +265,209 @@ body, html {
 
 .card-header {
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
+  border-bottom: 2px solid rgba(0, 96, 100, 0.1);
+  padding-bottom: 20px;
 }
 
 .card-header h1 {
-  font-size: 2rem;
+  font-size: 2.2rem;
   color: #006064;
   margin-bottom: 10px;
   font-weight: 700;
-  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .card-header p {
-  font-size: 1.1rem;
+  font-size: 1.2rem;
   color: #00838f;
   opacity: 0.9;
 }
 
-.instruction-section {
+.loading-section, .error-section {
   text-align: center;
-  margin-bottom: 20px;
-}
-
-.instruction-section h2 {
-  font-size: 1.5rem;
+  padding: 40px;
+  font-size: 1.4rem;
   color: #006064;
-  margin-bottom: 10px;
-}
-
-.instruction-section ol {
-  list-style-type: decimal;
-  padding-left: 20px;
-  margin-bottom: 20px;
 }
 
-.instruction-section li {
-  font-size: 1rem;
+.loading-section i {
+  margin-right: 15px;
+  font-size: 1.8rem;
   color: #00838f;
-  margin-bottom: 5px;
 }
 
-.crop-cd-model-section {
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-.input-section {
-  margin: 20px 0;
+.error-section i {
+  margin-right: 15px;
+  font-size: 1.8rem;
+  color: #d32f2f;
 }
 
-.input-group {
-  margin-bottom: 20px;
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
 }
 
-.label {
-  display: block;
-  font-weight: 600;
-  font-size: 1.2rem;
-  margin-bottom: 10px;
-  color: #006064;
+.stat-card {
+  background: rgba(178, 235, 242, 0.3);
+  border-radius: 15px;
+  padding: 20px;
+  text-align: center;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s ease;
 }
 
-.custom-input {
-  width: 100%;
-  padding: 15px 10px;
-  border-radius: 12px;
-  border: 2px solid #80deea;
-  font-size: 1rem;
-  background: rgba(255, 255, 255, 0.7);
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+.stat-card:hover {
+  transform: translateY(-5px);
+  background: rgba(178, 235, 242, 0.5);
 }
 
-.custom-input:focus {
-  outline: none;
-  border-color: #26c6da;
-  box-shadow: 0 0 0 4px rgba(38, 198, 218, 0.3);
+.stat-value {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #006064;
+  margin-bottom: 8px;
 }
 
-.custom-input:disabled {
-  background: rgba(255, 255, 255, 0.3);
-  border-color: #ccc;
-  cursor: not-allowed;
+.stat-label {
+  font-size: 1.1rem;
+  color: #00838f;
 }
 
-.info-panel {
-  background: rgba(178, 235, 242, 0.4);
-  border-radius: 12px;
-  padding: 15px;
-  margin-top: 15px;
+.visualization-section, 
+.data-section, 
+.formula-section,
+.statistics-section {
+  margin-bottom: 30px;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 15px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }
 
-.info-item {
+.visualization-section h2,
+.data-section h2,
+.formula-section h2,
+.statistics-section h2 {
+  font-size: 1.6rem;
+  color: #006064;
+  margin-bottom: 20px;
   display: flex;
   align-items: center;
-  margin-bottom: 10px;
-  font-size: 1rem;
-  color: #006064;
+  gap: 10px;
 }
 
-.info-item i {
-  margin-right: 10px;
-  font-size: 1.2rem;
-  color: #00838f;
+.result-image {
+  max-width: 100%;
+  max-height: 500px;
+  border-radius: 10px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }
 
-.button-section {
-  margin: 25px 0;
+.formula-card {
+  font-family: 'Courier New', monospace;
+  font-size: 1.2rem;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 20px;
+  border-radius: 10px;
   text-align: center;
-  flex-grow: 1;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
+  margin: 20px 0;
+  border: 1px dashed #00838f;
+  color: #006064;
 }
 
-.calculate-btn {
-  background: linear-gradient(to right, #8DF9F0, #26B046);
-  color: white;
-  border: none;
-  border-radius: 50px;
-  padding: 15px 30px;
-  font-size: 1.2rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.4s ease;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  display: inline-flex;
+.unit-note {
+  text-align: center;
+  font-size: 1.1rem;
+  color: #00838f;
+  display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 250px;
-  position: relative;
-  overflow: hidden;
-}
-
-.calculate-btn i {
-  margin-right: 10px;
-  font-size: 1.4rem;
-}
-
-.calculate-btn:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
-  background: linear-gradient(to right, #7de8df, #20a03d);
-}
-
-.calculate-btn:active {
-  transform: translateY(-2px);
-}
-
-.calculate-btn:disabled {
-  background: gray;
-  cursor: not-allowed;
+  gap: 8px;
 }
 
 .card-footer {
   text-align: center;
   font-size: 1rem;
   color: #00838f;
-  font-style: italic;
-  padding-top: 15px;
+  padding-top: 20px;
   border-top: 1px solid rgba(0, 150, 136, 0.2);
-}
-
-.card-footer i {
-  margin-right: 10px;
-}
-
-/* 水波纹效果 */
-.calculate-btn::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  background: rgba(255, 255, 255, 0.3);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  transition: width 0.6s, height 0.6s;
-}
-
-.calculate-btn:active::after {
-  width: 200px;
-  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
 }
 
 /* 响应式设计 */
-@media (max-width: 480px) {
-  .gradient-card {
-    padding: 20px;
-    width: 100%;
-    max-width: 100%;
+@media (max-width: 768px) {
+  .stats-grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }
-
+  
   .card-header h1 {
     font-size: 1.8rem;
   }
-
-  .instruction-section h2 {
+  
+  .visualization-section h2,
+  .data-section h2,
+  .formula-section h2,
+  .statistics-section h2 {
     font-size: 1.4rem;
   }
+}
 
-  .label {
-    font-size: 1rem;
+@media (max-width: 480px) {
+  .gradient-card {
+    padding: 15px;
   }
-
-  .custom-input {
-    padding: 12px;
-    font-size: 0.9rem;
+  
+  .stats-grid {
+    grid-template-columns: 1fr;
   }
-
-  .calculate-btn {
-    padding: 12px 25px;
-    font-size: 1rem;
-    min-width: 200px;
+  
+  .stat-card {
+    padding: 15px;
   }
-
-  .info-item span {
-    font-size: 0.9rem;
+  
+  .stat-value {
+    font-size: 1.5rem;
   }
 }
-</style>
 
+.result-image {
+  width: 100%;
+  max-height: 400px;
+  object-fit: contain;
+  border-radius: 8px;
+  border: 1px solid #e4e7ed;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  background-color: #f8f8f8;
+}
 
+/* Element UI 自定义样式 */
+.custom-table {
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  margin-top: 20px;
+}
 
+.custom-table .el-table__row {
+  transition: background-color 0.3s;
+}
+
+.custom-table .el-table__row:hover {
+  background-color: rgba(178, 235, 242, 0.3) !important;
+}
+
+.custom-table .el-table__row:nth-child(even) {
+  background-color: rgba(178, 235, 242, 0.15);
+}
+
+.custom-pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+</style>

src/views/User/hmInFlux/grainRemoval/samplingDesc1.vue

@@ -1,25 +1,302 @@
 <template>
-  <div class="">
+  <div class="sampling-process">
+    <div class="header-section">
+      <h2>籽粒移除</h2>
+      <div class="subtitle">重金属在土壤-农作物系统中的迁移与输出机制</div>
+    </div>
     
+    <div class="content-section">
+      <div class="text-content">
+        <p>
+          籽粒移除与人体健康风险的关联更为直接。重金属在作物籽粒中积累后，会通过食物链对人体健康构成潜在威胁，像中国湖南水稻的镉污染就已成为突出的环境健康问题，珠江三角洲各地市水稻籽粒对镉的富集程度甚至超过了蔬菜和水果。
+        </p>
+        <p>
+          图生动描绘了重金属在籽粒中的积累过程，以及籽粒收获后重金属随之输出农田并进入食物链的关联链条。如图所示，土壤中的重金属通过植物根系被吸收并最终富集于籽粒中。当农作物成熟后，农民收割作物并将富含重金属的籽粒收集起来，这一过程使得籽粒中积累的重金属随之离开农田系统，构成重要的重金属输出途径。
+        </p>
+      </div>
+
+      <div class="image-row">
+        <div class="image-container">
+          <el-image :src="image1" alt="籽粒移除是重金属输出的重要途径" class="sampling-image"></el-image>
+          <p class="image-caption">
+            籽粒移除是重金属输出的重要途径
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: '',
   data() {
     return {
-      
+      image1: 'https://hunyuan-plugin-1258344706.cos.ap-nanjing.myqcloud.com/pdf_youtu/img/833199a40a0e01e74cc3cfaca476e556-image.png',
     };
-  },
-  methods: {
-    
   }
 };
 </script>
 
 <style scoped>
-  . {
-    
+.sampling-process {
+  padding: 30px;
+  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.sampling-process::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
+  opacity: 0.15;
+  z-index: -1;
+  filter: blur(2px);
+}
+
+/* 标题区域 */
+.header-section {
+  text-align: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.header-section h2 {
+  position: relative;
+  padding-bottom: 15px;
+  margin-bottom: 10px;
+  color: #1a365d;
+  font-size: 2rem;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-section h2::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
+  border-radius: 3px;
+}
+
+.subtitle {
+  font-size: 1.2rem;
+  color: #2d5986;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+/* 内容区域 */
+.content-section {
+  margin-bottom: 40px;
+  padding: 25px;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+  transition: all 0.4s ease;
+  overflow: hidden;
+}
+
+.content-section:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.text-content {
+  margin-bottom: 30px;
+}
+
+p {
+  text-indent: 2em;
+  margin: 20px 0;
+  line-height: 1.8;
+  color: #2d3748;
+  font-size: 1.1rem;
+  position: relative;
+  padding-left: 20px;
+}
+
+p::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #3a9fd3;
+  font-size: 1.5rem;
+  line-height: 1.8;
+}
+
+/* 图片区域 */
+.image-row {
+  display: flex;
+  justify-content: center;
+}
+
+.image-container {
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  max-width: 800px;
+  margin: 0 auto;
+  transition: all 0.4s ease;
+}
+
+.image-container:hover {
+  transform: scale(1.01);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+}
+
+.sampling-image {
+  width: 100%;
+  height: auto;
+  min-height: 350px;
+  display: block;
+  background: rgba(245, 249, 255, 0.4);
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.image-container:hover .sampling-image {
+  transform: scale(1.02);
+}
+
+.image-caption {
+  text-align: center;
+  font-size: 1.1rem;
+  color: #1a365d;
+  padding: 15px;
+  font-weight: 600;
+  background: linear-gradient(to right, rgba(248, 250, 252, 0.9), rgba(240, 248, 255, 0.9));
+  margin: 0;
+  border-top: 1px dashed #cbd5e0;
+  position: relative;
+}
+
+.image-caption::before {
+  content: "📌";
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* 装饰元素 */
+.decorative-element {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(74, 158, 247, 0.1), rgba(58, 207, 213, 0.1));
+  z-index: -1;
+}
+
+.decorative-element:nth-child(1) {
+  top: 10%;
+  left: 5%;
+  width: 80px;
+  height: 80px;
+}
+
+.decorative-element:nth-child(2) {
+  bottom: 15%;
+  right: 8%;
+  width: 60px;
+  height: 60px;
+}
+
+/* 响应式设计 */
+@media (max-width: 900px) {
+  .sampling-process {
+    padding: 20px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.8rem;
+  }
+  
+  .subtitle {
+    font-size: 1.1rem;
+  }
+  
+  .content-section {
+    padding: 20px;
+  }
+  
+  .sampling-image {
+    min-height: 300px;
+  }
+}
+
+@media (max-width: 768px) {
+  .sampling-process {
+    padding: 15px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.6rem;
+  }
+  
+  p {
+    font-size: 1rem;
+    padding-left: 15px;
+  }
+  
+  .image-caption {
+    font-size: 1rem;
+    padding: 12px;
+  }
+  
+  .sampling-image {
+    min-height: 250px;
+  }
+}
+
+@media (max-width: 480px) {
+  .sampling-process {
+    padding: 10px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.4rem;
+  }
+  
+  .subtitle {
+    font-size: 0.95rem;
+  }
+  
+  .content-section {
+    padding: 15px;
+  }
+  
+  p {
+    font-size: 0.95rem;
+    padding-left: 10px;
+  }
+  
+  .image-caption {
+    font-size: 0.9rem;
+    padding: 10px 15px 10px 35px;
+  }
+  
+  .image-caption::before {
+    left: 10px;
+  }
+  
+  .sampling-image {
+    min-height: 200px;
   }
+}
 </style>

src/views/User/hmInFlux/strawRemoval/samplingDesc2.vue

@@ -1,25 +1,302 @@
 <template>
-  <div class="">
+  <div class="sampling-process">
+    <div class="header-section">
+      <h2>秸秆移除</h2>
+      <div class="subtitle">重金属在土壤-农作物系统中的迁移与输出机制</div>
+    </div>
     
+    <div class="content-section">
+      <div class="text-content">
+        <p>
+          秸秆移除是重金属输出的重要方式之一。重金属在植物地上部分(包括秸秆)积累,其生物可利用性及在土壤-农作物系统中的迁移转化备受关注。秸秆作为作物残茬，在农田生态系统的重金属循环中扮演关键角色，同时也可能带来人体暴露风险。
+        </p>
+        <p>
+          图清晰地展示了秸秆移除过程中重金属输出的具体路径。如图所示，土壤中的重金属通过植物根系被吸收并转运至地上部分，最终富集于秸秆中。当秸秆被移除时，其中积累的重金属也随之离开农田系统，构成重要的重金属输出途径。图中通过不同颜色标注，展示了不同作物秸秆中重金属种类及含量的差异，进一步说明了在估算秸秆移除的重金属输出量时，必须收集秸秆样品进行处理和化学分析，并将其重金属含量纳入作物收获输出通量计算的必要性。
+        </p>
+      </div>
+
+      <div class="image-row">
+        <div class="image-container">
+          <el-image :src="image1" alt="秸秆移除是重金属输出的重要途径" class="sampling-image"></el-image>
+          <p class="image-caption">
+            秸秆移除是重金属输出的重要途径
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: '',
   data() {
     return {
-      
+      image1: 'https://hunyuan-plugin-1258344706.cos.ap-nanjing.myqcloud.com/pdf_youtu/img/d2b2d067ccd777c5d9d0d26618f9b569-image.png',
     };
-  },
-  methods: {
-    
   }
 };
 </script>
 
 <style scoped>
-  . {
-    
+.sampling-process {
+  padding: 30px;
+  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.sampling-process::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
+  opacity: 0.15;
+  z-index: -1;
+  filter: blur(2px);
+}
+
+/* 标题区域 */
+.header-section {
+  text-align: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.header-section h2 {
+  position: relative;
+  padding-bottom: 15px;
+  margin-bottom: 10px;
+  color: #1a365d;
+  font-size: 2rem;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-section h2::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
+  border-radius: 3px;
+}
+
+.subtitle {
+  font-size: 1.2rem;
+  color: #2d5986;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+/* 内容区域 */
+.content-section {
+  margin-bottom: 40px;
+  padding: 25px;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+  transition: all 0.4s ease;
+  overflow: hidden;
+}
+
+.content-section:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.text-content {
+  margin-bottom: 30px;
+}
+
+p {
+  text-indent: 2em;
+  margin: 20px 0;
+  line-height: 1.8;
+  color: #2d3748;
+  font-size: 1.1rem;
+  position: relative;
+  padding-left: 20px;
+}
+
+p::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #3a9fd3;
+  font-size: 1.5rem;
+  line-height: 1.8;
+}
+
+/* 图片区域 */
+.image-row {
+  display: flex;
+  justify-content: center;
+}
+
+.image-container {
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  max-width: 800px;
+  margin: 0 auto;
+  transition: all 0.4s ease;
+}
+
+.image-container:hover {
+  transform: scale(1.01);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+}
+
+.sampling-image {
+  width: 100%;
+  height: auto;
+  min-height: 350px;
+  display: block;
+  background: rgba(245, 249, 255, 0.4);
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.image-container:hover .sampling-image {
+  transform: scale(1.02);
+}
+
+.image-caption {
+  text-align: center;
+  font-size: 1.1rem;
+  color: #1a365d;
+  padding: 15px;
+  font-weight: 600;
+  background: linear-gradient(to right, rgba(248, 250, 252, 0.9), rgba(240, 248, 255, 0.9));
+  margin: 0;
+  border-top: 1px dashed #cbd5e0;
+  position: relative;
+}
+
+.image-caption::before {
+  content: "📌";
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* 装饰元素 */
+.decorative-element {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(74, 158, 247, 0.1), rgba(58, 207, 213, 0.1));
+  z-index: -1;
+}
+
+.decorative-element:nth-child(1) {
+  top: 10%;
+  left: 5%;
+  width: 80px;
+  height: 80px;
+}
+
+.decorative-element:nth-child(2) {
+  bottom: 15%;
+  right: 8%;
+  width: 60px;
+  height: 60px;
+}
+
+/* 响应式设计 */
+@media (max-width: 900px) {
+  .sampling-process {
+    padding: 20px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.8rem;
+  }
+  
+  .subtitle {
+    font-size: 1.1rem;
+  }
+  
+  .content-section {
+    padding: 20px;
+  }
+  
+  .sampling-image {
+    min-height: 300px;
+  }
+}
+
+@media (max-width: 768px) {
+  .sampling-process {
+    padding: 15px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.6rem;
+  }
+  
+  p {
+    font-size: 1rem;
+    padding-left: 15px;
+  }
+  
+  .image-caption {
+    font-size: 1rem;
+    padding: 12px;
+  }
+  
+  .sampling-image {
+    min-height: 250px;
+  }
+}
+
+@media (max-width: 480px) {
+  .sampling-process {
+    padding: 10px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.4rem;
+  }
+  
+  .subtitle {
+    font-size: 0.95rem;
+  }
+  
+  .content-section {
+    padding: 15px;
+  }
+  
+  p {
+    font-size: 0.95rem;
+    padding-left: 10px;
+  }
+  
+  .image-caption {
+    font-size: 0.9rem;
+    padding: 10px 15px 10px 35px;
+  }
+  
+  .image-caption::before {
+    left: 10px;
+  }
+  
+  .sampling-image {
+    min-height: 200px;
   }
+}
 </style>

src/views/User/hmInFlux/strawRemoval/strawRemovalInputFlux.vue

@@ -2,113 +2,260 @@
   <div class="container">
     <div class="gradient-card">
       <div class="card-header">
-        <h1>秸秆移除含量计算器</h1>
-        <p>评估作物镉含量及秸秆移除的影响，助力农业安全生产</p>
+        <h1>秸秆移除输出通量计算结果</h1>
+        <p>{{ area }}地区作物秸秆移除Cd通量分析报告</p>
       </div>
 
-      <div class="instruction-section">
-        <h2>使用说明</h2>
-        <ol>
-          <li>首次使用请点击"作物镉模型计算"按钮。</li>
-          <li>点击"作物镉模型计算"按钮跳转到作物镉模型计算页面。</li>
-          <li>在作物镉模型计算页面完成计算后返回此页面。</li>
-        </ol>
+      <div v-if="loading" class="loading-section">
+        <i class="fas fa-spinner fa-spin"></i> 正在加载数据...
       </div>
 
-      <div class="crop-cd-model-section">
-        <button class="calculate-btn" @click="openCropCdModelPage">
-          <i class="fas fa-calculator"></i> 作物镉模型计算
-        </button>
+      <div v-if="error" class="error-section">
+        <i class="fas fa-exclamation-triangle"></i> {{ error }}
       </div>
 
-      <div class="input-section">
-        <div class="input-group">
-          <label class="label">作物亩产量 (斤)</label>
-          <input v-model="yieldPerMu" placeholder="800" class="custom-input" :disabled="!cropCdModelCalculated" />
+      <template v-if="!loading && !error">
+        <div class="statistics-section">
+          <h2><i class="fas fa-chart-bar"></i> 统计分析</h2>
+          <div class="stats-grid">
+            <div class="stat-card">
+              <div class="stat-value">{{ statistics.total_samples.toLocaleString() }}</div>
+              <div class="stat-label">总样本数</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-value">{{ statistics.mean_flux.toFixed(2) }} g/ha/a</div>
+              <div class="stat-label">平均通量</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-value">{{ statistics.max_flux.toFixed(2) }} g/ha/a</div>
+              <div class="stat-label">最大通量</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-value">{{ statistics.min_flux.toFixed(2) }} g/ha/a</div>
+              <div class="stat-label">最小通量</div>
+            </div>
+          </div>
         </div>
 
-        <div class="info-panel">
-          <div class="info-item">
-            <i class="fas fa-chart-line"></i>
-            <span>建议范围: 500 - 1500</span>
+        <div class="visualization-section">
+          <h2><i class="fas fa-map"></i> 可视化分析图</h2>
+          <img v-if="visualizationImage" :src="visualizationImage" alt="Cd含量地图" class="result-image">
+          <div v-if="visualizationError" class="error-section">
+            <i class="fas fa-exclamation-triangle"></i> {{ visualizationError }}
+          </div>
+          <div v-else class="image-container">
+            
           </div>
         </div>
-      </div>
 
-      <div class="button-section">
-        <button class="calculate-btn" :disabled="!cropCdModelCalculated || !yieldPerMu" @click="onCalculate">
-          <i class="fas fa-calculator"></i> 秸秆移除计算
-        </button>
-      </div>
+        <div class="data-section">
+          <h2><i class="fas fa-table"></i> 详细数据</h2>
+          <el-table
+            :data="tableData"
+            height="400"
+            style="width: 100%"
+            class="custom-table"
+            :header-cell-style="{ background: 'rgba(0, 150, 136, 0.1)', color: '#006064', fontWeight: '600' }"
+          >
+            <el-table-column prop="farmland_id" label="农田ID" width="120" align="center"></el-table-column>
+            <el-table-column prop="sample_id" label="样本ID" width="120" align="center"></el-table-column>
+            <el-table-column prop="crop_cd_value" label="作物镉Cd(mg/kg)" align="center">
+              <template #default="scope">
+                {{ scope.row.crop_cd_value.toFixed(5) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="f11_yield" label="作物亩产量（斤）" width="150" align="center"></el-table-column>
+            <el-table-column prop="straw_removal_flux" label="秸秆移除通量(g/ha/a)" width="170" align="center">
+              <template #default="scope">
+                {{ scope.row.straw_removal_flux.toFixed(5) }}
+              </template>
+            </el-table-column>
+          </el-table>
+          
+          <el-pagination
+            background
+            layout="prev, pager, next, sizes, total"
+            :total="results.length"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            :page-sizes="[5, 10, 20, 50]"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            class="custom-pagination"
+          >
+          </el-pagination>
+        </div>
 
-      <div class="card-footer">
-        <p><i class="fas fa-lightbulb"></i> 提示: 输入数据后点击"秸秆移除计算"按钮获取详细分析</p>
-      </div>
+        <div class="formula-section">
+          <h2><i class="fas fa-calculator"></i> 计算公式</h2>
+          <div class="formula-card">
+            {{ formula }}
+          </div>
+          <div class="unit-note">
+            <i class="fas fa-info-circle"></i> 单位: {{ unit }}
+          </div>
+        </div>
+
+        <div class="card-footer">
+          <p><i class="fas fa-clock"></i> 报告生成时间: {{ reportTime }}</p>
+        </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script>
-import { ref } from 'vue';
+import { ref, computed, onMounted } from 'vue';
+import { ElTable, ElTableColumn, ElPagination } from 'element-plus';
 
 export default {
-  name: 'GrainRemovalCalculator',
-  setup() {
-    const cropCdModelCalculated = ref(false);
-    const yieldPerMu = ref(null);
-
-    const openCropCdModelPage = () => {
-      // 这里可以实现跳转到作物镉模型计算页面的逻辑
-      // 例如：window.location.href = '/crop-cd-model';
-      alert('打开作物镉模型计算页面');
-      cropCdModelCalculated.value = true;
+  name: 'StrawRemovalResult',
+  components: {
+    ElTable,
+    ElTableColumn,
+    ElPagination
+  },
+  props: {
+    area: {
+      type: String,
+      default: '韶关'
+    }
+  },
+  setup(props) {
+    // 响应式数据
+    const results = ref([]);
+    const statistics = ref({
+      total_samples: 0,
+      mean_flux: 0,
+      max_flux: 0,
+      min_flux: 0
+    });
+    const formula = ref("");
+    const unit = ref("");
+    const visualizationImage = ref("");
+    const reportTime = ref("");
+    const loading = ref(true);
+    const error = ref(null);
+    
+    // 分页相关变量
+    const currentPage = ref(1);
+    const pageSize = ref(5);
+    
+    // 计算分页后的数据
+    const tableData = computed(() => {
+      const start = (currentPage.value - 1) * pageSize.value;
+      const end = start + pageSize.value;
+      return results.value.slice(start, end);
+    });
+    
+    // 分页事件处理
+    const handleSizeChange = (newSize) => {
+      pageSize.value = newSize;
+      currentPage.value = 1; // 重置到第一页
     };
-
-    const onCalculate = () => {
-      if (!yieldPerMu.value) {
-        alert('请输入作物亩产量');
-        return;
+    
+    const handleCurrentChange = (newPage) => {
+      currentPage.value = newPage;
+    };
+    
+    // 从API获取数据
+    const fetchData = async () => {
+      try {
+        // 获取计算结果数据
+        const dataResponse = await fetch(
+          `http://127.0.0.1:8000/api/cd-flux-removal/straw-removal?area=${encodeURIComponent(props.area)}`
+        );
+        
+        if (!dataResponse.ok) {
+          throw new Error(`数据获取失败: ${dataResponse.statusText}`);
+        }
+        
+        const dataJson = await dataResponse.json();
+        
+        if (!dataJson.success) {
+          throw new Error(`API错误: ${dataJson.message}`);
+        }
+        
+        // 设置数据
+        results.value = dataJson.data.results;
+        statistics.value = dataJson.data.statistics;
+        formula.value = dataJson.data.formula;
+        unit.value = dataJson.data.unit;
+        
+        // 获取可视化图片
+        const imageResponse = await fetch(
+          `http://127.0.0.1:8000/api/cd-flux-removal/straw-removal/visualize?area=${encodeURIComponent(props.area)}&level=city`
+        );
+        
+        if (!imageResponse.ok) {
+          throw new Error(`图片获取失败: ${imageResponse.statusText}`);
+        }
+        
+        // 创建图片Blob URL
+        const blob = await imageResponse.blob();
+        visualizationImage.value = URL.createObjectURL(blob);
+        
+        // 设置报告时间
+        reportTime.value = new Date().toLocaleString('zh-CN', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit'
+        });
+        
+      } catch (err) {
+        console.error('数据获取错误:', err);
+        error.value = err.message || '获取数据时发生错误';
+      } finally {
+        loading.value = false;
       }
-      alert(`计算完成！当前亩产量: ${yieldPerMu.value} 斤`);
     };
-
+    
+    // 组件挂载时获取数据
+    onMounted(() => {
+      fetchData();
+    });
+    
     return {
-      cropCdModelCalculated,
-      yieldPerMu,
-      openCropCdModelPage,
-      onCalculate
+      results,
+      statistics,
+      formula,
+      unit,
+      visualizationImage,
+      reportTime,
+      loading,
+      error,
+      tableData,
+      currentPage,
+      pageSize,
+      handleSizeChange,
+      handleCurrentChange
     };
   }
 };
 </script>
 
 <style scoped>
-body,
-html {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  overflow: hidden;
-  /* 禁止页面滚动 */
-}
-
+/* 保留您原有的样式，只添加Element UI的自定义样式 */
 .container {
   display: flex;
   justify-content: center;
   align-items: center;
-  /* 居中对齐 */
-  height: 100vh;
+  min-height: 100vh;
+  padding: 20px;
+  background: linear-gradient(135deg, #e6f7ff, #b3e0ff);
 }
 
 .gradient-card {
   background: linear-gradient(135deg,
-      rgba(250, 253, 255, 0.8),
-      rgba(137, 223, 252, 0.8));
+      rgba(250, 253, 255, 0.9),
+      rgba(220, 240, 255, 0.9));
   border-radius: 20px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
   padding: 30px;
   width: 100%;
-  max-width: 500px;
+  max-width: 1000px;
   backdrop-filter: blur(8px);
   border: none;
   display: flex;
@@ -118,224 +265,209 @@ html {
 
 .card-header {
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
+  border-bottom: 2px solid rgba(0, 96, 100, 0.1);
+  padding-bottom: 20px;
 }
 
 .card-header h1 {
-  font-size: 2rem;
+  font-size: 2.2rem;
   color: #006064;
   margin-bottom: 10px;
   font-weight: 700;
-  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .card-header p {
-  font-size: 1.1rem;
+  font-size: 1.2rem;
   color: #00838f;
   opacity: 0.9;
 }
 
-.instruction-section {
+.loading-section, .error-section {
   text-align: center;
-  margin-bottom: 20px;
-}
-
-.instruction-section h2 {
-  font-size: 1.5rem;
+  padding: 40px;
+  font-size: 1.4rem;
   color: #006064;
-  margin-bottom: 10px;
-}
-
-.instruction-section ol {
-  list-style-type: decimal;
-  padding-left: 20px;
-  margin-bottom: 20px;
 }
 
-.instruction-section li {
-  font-size: 1rem;
+.loading-section i {
+  margin-right: 15px;
+  font-size: 1.8rem;
   color: #00838f;
-  margin-bottom: 5px;
 }
 
-.crop-cd-model-section {
-  text-align: center;
-  margin-bottom: 20px;
+.error-section i {
+  margin-right: 15px;
+  font-size: 1.8rem;
+  color: #d32f2f;
 }
 
-.input-section {
-  margin: 20px 0;
-}
-
-.input-group {
-  margin-bottom: 20px;
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
 }
 
-.label {
-  display: block;
-  font-weight: 600;
-  font-size: 1.2rem;
-  margin-bottom: 10px;
-  color: #006064;
+.stat-card {
+  background: rgba(178, 235, 242, 0.3);
+  border-radius: 15px;
+  padding: 20px;
+  text-align: center;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s ease;
 }
 
-.custom-input {
-  width: 100%;
-  padding: 15px 10px;
-  border-radius: 12px;
-  border: 2px solid #80deea;
-  font-size: 1rem;
-  background: rgba(255, 255, 255, 0.7);
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+.stat-card:hover {
+  transform: translateY(-5px);
+  background: rgba(178, 235, 242, 0.5);
 }
 
-.custom-input:focus {
-  outline: none;
-  border-color: #26c6da;
-  box-shadow: 0 0 0 4px rgba(38, 198, 218, 0.3);
+.stat-value {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #006064;
+  margin-bottom: 8px;
 }
 
-.custom-input:disabled {
-  background: rgba(255, 255, 255, 0.3);
-  border-color: #ccc;
-  cursor: not-allowed;
+.stat-label {
+  font-size: 1.1rem;
+  color: #00838f;
 }
 
-.info-panel {
-  background: rgba(178, 235, 242, 0.4);
-  border-radius: 12px;
-  padding: 15px;
-  margin-top: 15px;
+.visualization-section, 
+.data-section, 
+.formula-section,
+.statistics-section {
+  margin-bottom: 30px;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 15px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }
 
-.info-item {
+.visualization-section h2,
+.data-section h2,
+.formula-section h2,
+.statistics-section h2 {
+  font-size: 1.6rem;
+  color: #006064;
+  margin-bottom: 20px;
   display: flex;
   align-items: center;
-  margin-bottom: 10px;
-  font-size: 1rem;
-  color: #006064;
+  gap: 10px;
 }
 
-.info-item i {
-  margin-right: 10px;
-  font-size: 1.2rem;
-  color: #00838f;
+.result-image {
+  max-width: 100%;
+  max-height: 500px;
+  border-radius: 10px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }
 
-.button-section {
-  margin: 25px 0;
+.formula-card {
+  font-family: 'Courier New', monospace;
+  font-size: 1.2rem;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 20px;
+  border-radius: 10px;
   text-align: center;
-  flex-grow: 1;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
+  margin: 20px 0;
+  border: 1px dashed #00838f;
+  color: #006064;
 }
 
-.calculate-btn {
-  background: linear-gradient(to right, #8DF9F0, #26B046);
-  color: white;
-  border: none;
-  border-radius: 50px;
-  padding: 15px 30px;
-  font-size: 1.2rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.4s ease;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  display: inline-flex;
+.unit-note {
+  text-align: center;
+  font-size: 1.1rem;
+  color: #00838f;
+  display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 250px;
-  position: relative;
-  overflow: hidden;
-}
-
-.calculate-btn i {
-  margin-right: 10px;
-  font-size: 1.4rem;
-}
-
-.calculate-btn:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
-  background: linear-gradient(to right, #7de8df, #20a03d);
-}
-
-.calculate-btn:active {
-  transform: translateY(-2px);
-}
-
-.calculate-btn:disabled {
-  background: gray;
-  cursor: not-allowed;
+  gap: 8px;
 }
 
 .card-footer {
   text-align: center;
   font-size: 1rem;
   color: #00838f;
-  font-style: italic;
-  padding-top: 15px;
+  padding-top: 20px;
   border-top: 1px solid rgba(0, 150, 136, 0.2);
-}
-
-.card-footer i {
-  margin-right: 10px;
-}
-
-/* 水波纹效果 */
-.calculate-btn::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  background: rgba(255, 255, 255, 0.3);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  transition: width 0.6s, height 0.6s;
-}
-
-.calculate-btn:active::after {
-  width: 200px;
-  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
 }
 
 /* 响应式设计 */
-@media (max-width: 480px) {
-  .gradient-card {
-    padding: 20px;
-    width: 100%;
-    max-width: 100%;
+@media (max-width: 768px) {
+  .stats-grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }
-
+  
   .card-header h1 {
     font-size: 1.8rem;
   }
-
-  .instruction-section h2 {
+  
+  .visualization-section h2,
+  .data-section h2,
+  .formula-section h2,
+  .statistics-section h2 {
     font-size: 1.4rem;
   }
+}
 
-  .label {
-    font-size: 1rem;
+@media (max-width: 480px) {
+  .gradient-card {
+    padding: 15px;
   }
-
-  .custom-input {
-    padding: 12px;
-    font-size: 0.9rem;
+  
+  .stats-grid {
+    grid-template-columns: 1fr;
   }
-
-  .calculate-btn {
-    padding: 12px 25px;
-    font-size: 1rem;
-    min-width: 200px;
+  
+  .stat-card {
+    padding: 15px;
   }
-
-  .info-item span {
-    font-size: 0.9rem;
+  
+  .stat-value {
+    font-size: 1.5rem;
   }
 }
-</style>
+
+.result-image {
+  width: 100%;
+  max-height: 400px;
+  object-fit: contain;
+  border-radius: 8px;
+  border: 1px solid #e4e7ed;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  background-color: #f8f8f8;
+}
+
+/* Element UI 自定义样式 */
+.custom-table {
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  margin-top: 20px;
+}
+
+.custom-table .el-table__row {
+  transition: background-color 0.3s;
+}
+
+.custom-table .el-table__row:hover {
+  background-color: rgba(178, 235, 242, 0.3) !important;
+}
+
+.custom-table .el-table__row:nth-child(even) {
+  background-color: rgba(178, 235, 242, 0.15);
+}
+
+.custom-pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+</style>

src/views/User/hmInFlux/subsurfaceLeakage/samplingDesc3.vue

@@ -1,25 +1,302 @@
 <template>
-  <div class="">
+  <div class="sampling-process">
+    <div class="header-section">
+      <h2>土壤渗流</h2>
+      <div class="subtitle">重金属在土壤-农作物系统中的迁移与输出机制</div>
+    </div>
     
+    <div class="content-section">
+      <div class="text-content">
+            <p>
+              土壤渗流是农田土壤重金属输出的重要途径，过度耕种会加剧土壤水分和营养的流失，而降水会对这一过程产生影响。通常，土壤重金属渗流通量通过质量平衡模型间接计算，该模型假设土壤中未渗流的重金属通过径流途径输出。
+            </p>
+             <p>
+              图详细展示了土壤渗流作为重金属纵向迁移重要途径的过程。如图所示，土壤中的重金属在降水和重力作用下，通过土壤孔隙向下渗透，最终进入地下水系统。图中左侧部分清晰地描绘了农田土壤剖面，包括表层土壤、根系分布区以及下方的地下水层。土壤中的水分和溶解态重金属随着水流向下移动，形成明显的渗流路径。
+            </p>
+      </div>
+    </div>
+
+    <div class="image-row">
+      <div class="image-container">
+        <el-image :src="image3" alt="土壤渗流是重金属迁移的重要途径" class="sampling-image"></el-image>
+        <p class="image-caption">
+          土壤渗流是重金属迁移的重要途径
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: '',
   data() {
     return {
-      
+      image3: 'https://hunyuan-plugin-1258344706.cos.ap-nanjing.myqcloud.com/pdf_youtu/img/2412b59952255362b77987e45875b820-image.png',
     };
-  },
-  methods: {
-    
   }
 };
 </script>
 
 <style scoped>
-  . {
-    
+.sampling-process {
+  padding: 30px;
+  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.sampling-process::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
+  opacity: 0.15;
+  z-index: -1;
+  filter: blur(2px);
+}
+
+/* 标题区域 */
+.header-section {
+  text-align: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.header-section h2 {
+  position: relative;
+  padding-bottom: 15px;
+  margin-bottom: 10px;
+  color: #1a365d;
+  font-size: 2rem;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-section h2::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
+  border-radius: 3px;
+}
+
+.subtitle {
+  font-size: 1.2rem;
+  color: #2d5986;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+/* 内容区域 */
+.content-section {
+  margin-bottom: 40px;
+  padding: 25px;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+  transition: all 0.4s ease;
+  overflow: hidden;
+}
+
+.content-section:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.text-content {
+  margin-bottom: 30px;
+}
+
+p {
+  text-indent: 2em;
+  margin: 20px 0;
+  line-height: 1.8;
+  color: #2d3748;
+  font-size: 1.1rem;
+  position: relative;
+  padding-left: 20px;
+}
+
+p::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #3a9fd3;
+  font-size: 1.5rem;
+  line-height: 1.8;
+}
+
+/* 图片区域 */
+.image-row {
+  display: flex;
+  justify-content: center;
+}
+
+.image-container {
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  max-width: 800px;
+  margin: 0 auto;
+  transition: all 0.4s ease;
+}
+
+.image-container:hover {
+  transform: scale(1.01);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+}
+
+.sampling-image {
+  width: 100%;
+  height: auto;
+  min-height: 350px;
+  display: block;
+  background: rgba(245, 249, 255, 0.4);
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.image-container:hover .sampling-image {
+  transform: scale(1.02);
+}
+
+.image-caption {
+  text-align: center;
+  font-size: 1.1rem;
+  color: #1a365d;
+  padding: 15px;
+  font-weight: 600;
+  background: linear-gradient(to right, rgba(248, 250, 252, 0.9), rgba(240, 248, 255, 0.9));
+  margin: 0;
+  border-top: 1px dashed #cbd5e0;
+  position: relative;
+}
+
+.image-caption::before {
+  content: "📌";
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* 装饰元素 */
+.decorative-element {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(74, 158, 247, 0.1), rgba(58, 207, 213, 0.1));
+  z-index: -1;
+}
+
+.decorative-element:nth-child(1) {
+  top: 10%;
+  left: 5%;
+  width: 80px;
+  height: 80px;
+}
+
+.decorative-element:nth-child(2) {
+  bottom: 15%;
+  right: 8%;
+  width: 60px;
+  height: 60px;
+}
+
+/* 响应式设计 */
+@media (max-width: 900px) {
+  .sampling-process {
+    padding: 20px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.8rem;
+  }
+  
+  .subtitle {
+    font-size: 1.1rem;
+  }
+  
+  .content-section {
+    padding: 20px;
+  }
+  
+  .sampling-image {
+    min-height: 300px;
+  }
+}
+
+@media (max-width: 768px) {
+  .sampling-process {
+    padding: 15px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.6rem;
+  }
+  
+  p {
+    font-size: 1rem;
+    padding-left: 15px;
+  }
+  
+  .image-caption {
+    font-size: 1rem;
+    padding: 12px;
+  }
+  
+  .sampling-image {
+    min-height: 250px;
+  }
+}
+
+@media (max-width: 480px) {
+  .sampling-process {
+    padding: 10px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.4rem;
+  }
+  
+  .subtitle {
+    font-size: 0.95rem;
+  }
+  
+  .content-section {
+    padding: 15px;
+  }
+  
+  p {
+    font-size: 0.95rem;
+    padding-left: 10px;
+  }
+  
+  .image-caption {
+    font-size: 0.9rem;
+    padding: 10px 15px 10px 35px;
+  }
+  
+  .image-caption::before {
+    left: 10px;
+  }
+  
+  .sampling-image {
+    min-height: 200px;
   }
+}
 </style>

src/views/User/hmInFlux/surfaceRunoff/samplingDesc4.vue

@@ -1,25 +1,301 @@
 <template>
-  <div class="">
-    
+  <div class="sampling-process">
+     <div class="header-section"> 
+      <h2>地表径流</h2>
+      <div class="subtitle">重金属在土壤-农作物系统中的迁移与输出机制</div>
+    </div>
+   <div class="content-section">
+      <div class="text-content">
+    <p>
+      地表径流是重力作用下的降水沿地表流动并汇入水体的过程，也是土壤重金属输出的主要途径。研究显示，地表径流中重金属浓度与土壤中重金属浓度相关，其输出量则与土壤中重金属溶解态和颗粒态的分配情况有关。随暴雨径流迁移是不同土地利用类型中重金属转移的最主要方式，也是造成地表水大面积非点源重金属污染的根本原因。
+    </p>
+    <p>
+      图动态模拟了降雨条件下土壤中镉、铅、铬等重金属随地表径流进行横向迁移的过程，以及其迁移量和形态随时间的变化规律。如图所示，降水落在农田表面后，在重力作用下沿地表流动，形成地表径流。土壤中的重金属随着地表径流一起被冲刷并汇入水体，最终在河流或湖泊中沉积。
+    </p>
+      </div>
+   </div>
+    <div class="image-row">
+      <div class="image-container">
+        <el-image :src="image4" alt="地表径流是重金属迁移的主要途径" class="sampling-image"></el-image>
+        <p class="image-caption">
+           地表径流是重金属迁移的主要途径
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: '',
   data() {
     return {
-      
-    };
-  },
-  methods: {
     
+      image4: 'https://hunyuan-plugin-1258344706.cos.ap-nanjing.myqcloud.com/pdf_youtu/img/baf4078408e6b4dee9eb96875aac3573-image.png'
+    };
   }
 };
 </script>
 
 <style scoped>
-  . {
-    
+.sampling-process {
+  padding: 30px;
+  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.sampling-process::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
+  opacity: 0.15;
+  z-index: -1;
+  filter: blur(2px);
+}
+
+/* 标题区域 */
+.header-section {
+  text-align: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.header-section h2 {
+  position: relative;
+  padding-bottom: 15px;
+  margin-bottom: 10px;
+  color: #1a365d;
+  font-size: 2rem;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-section h2::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
+  border-radius: 3px;
+}
+
+.subtitle {
+  font-size: 1.2rem;
+  color: #2d5986;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+/* 内容区域 */
+.content-section {
+  margin-bottom: 40px;
+  padding: 25px;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+  transition: all 0.4s ease;
+  overflow: hidden;
+}
+
+.content-section:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.text-content {
+  margin-bottom: 30px;
+}
+
+p {
+  text-indent: 2em;
+  margin: 20px 0;
+  line-height: 1.8;
+  color: #2d3748;
+  font-size: 1.1rem;
+  position: relative;
+  padding-left: 20px;
+}
+
+p::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #3a9fd3;
+  font-size: 1.5rem;
+  line-height: 1.8;
+}
+
+/* 图片区域 */
+.image-row {
+  display: flex;
+  justify-content: center;
+}
+
+.image-container {
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  max-width: 800px;
+  margin: 0 auto;
+  transition: all 0.4s ease;
+}
+
+.image-container:hover {
+  transform: scale(1.01);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+}
+
+.sampling-image {
+  width: 100%;
+  height: auto;
+  min-height: 350px;
+  display: block;
+  background: rgba(245, 249, 255, 0.4);
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.image-container:hover .sampling-image {
+  transform: scale(1.02);
+}
+
+.image-caption {
+  text-align: center;
+  font-size: 1.1rem;
+  color: #1a365d;
+  padding: 15px;
+  font-weight: 600;
+  background: linear-gradient(to right, rgba(248, 250, 252, 0.9), rgba(240, 248, 255, 0.9));
+  margin: 0;
+  border-top: 1px dashed #cbd5e0;
+  position: relative;
+}
+
+.image-caption::before {
+  content: "📌";
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* 装饰元素 */
+.decorative-element {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(74, 158, 247, 0.1), rgba(58, 207, 213, 0.1));
+  z-index: -1;
+}
+
+.decorative-element:nth-child(1) {
+  top: 10%;
+  left: 5%;
+  width: 80px;
+  height: 80px;
+}
+
+.decorative-element:nth-child(2) {
+  bottom: 15%;
+  right: 8%;
+  width: 60px;
+  height: 60px;
+}
+
+/* 响应式设计 */
+@media (max-width: 900px) {
+  .sampling-process {
+    padding: 20px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.8rem;
+  }
+  
+  .subtitle {
+    font-size: 1.1rem;
+  }
+  
+  .content-section {
+    padding: 20px;
+  }
+  
+  .sampling-image {
+    min-height: 300px;
+  }
+}
+
+@media (max-width: 768px) {
+  .sampling-process {
+    padding: 15px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.6rem;
+  }
+  
+  p {
+    font-size: 1rem;
+    padding-left: 15px;
+  }
+  
+  .image-caption {
+    font-size: 1rem;
+    padding: 12px;
+  }
+  
+  .sampling-image {
+    min-height: 250px;
+  }
+}
+
+@media (max-width: 480px) {
+  .sampling-process {
+    padding: 10px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.4rem;
+  }
+  
+  .subtitle {
+    font-size: 0.95rem;
+  }
+  
+  .content-section {
+    padding: 15px;
+  }
+  
+  p {
+    font-size: 0.95rem;
+    padding-left: 10px;
+  }
+  
+  .image-caption {
+    font-size: 0.9rem;
+    padding: 10px 15px 10px 35px;
+  }
+  
+  .image-caption::before {
+    left: 10px;
+  }
+  
+  .sampling-image {
+    min-height: 200px;
   }
+}
 </style>