采样说明和计算页面样式统一

src/locales/zh.json

@@ -135,22 +135,22 @@
   },
   "grainRemoval": {
     "Title": "籽粒移除",
-    "samplingDesc1": "采样说明",
+    "samplingDesc1": "籽粒移除采样说明",
     "grainRemovalInputFlux": "籽粒移除输出通量"
   },
   "strawRemoval": {
     "Title": "秸秆移除",
-    "samplingDesc2": "采样说明",
+    "samplingDesc2": "秸秆移除说明",
     "strawRemovalInputFlux": "秸秆移除输出通量"
   },
   "subsurfaceLeakage": {
     "Title": "地下渗漏",
-    "samplingDesc3": "采样说明",
+    "samplingDesc3": "地下渗漏说明",
     "subsurfaceLeakageInputFlux": "地下渗漏输出通量"
   },
   "surfaceRunoff": {
     "Title": "地表径流",
-    "samplingDesc4": "采样说明",
+    "samplingDesc4": "地表径流说明",
     "surfaceRunoffInputFlux": "地表径流输出通量"
   },
   "mapView": {

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

@@ -1,238 +1,390 @@
 <template>
-  <div class="fertilizer-input-form">
-    <!-- 输入表单部分 -->
-    <el-card v-if="showInputForm" shadow="always" class="form-card">
-      <div class="card-content">
-        <div class="input-section">
-          <el-form label-width="250px" label-position="left">
-            <div class="form-section">
-              <!-- 第一行：氮肥的两个输入栏 -->
-              <div class="input-row">
-                <el-form-item label="氮肥镉含量平均值 (mg/kg)" class="form-item">
-                  <el-input v-model="formData.f3_nitrogen_cd_content" placeholder="0.12"></el-input>
-                </el-form-item>
-                <el-form-item label="氮肥单位面积使用量 (t/ha/a)" class="form-item">
-                  <el-input v-model="formData.nf_nitrogen_usage" placeholder="0.25"></el-input>
-                </el-form-item>
+  <div class="agricultural-input-management">
+    <!-- 计算页面 -->
+    <div v-if="showInputForm" class="page-container">
+      <el-card class="gradient-card">
+        <div class="calculation-content">
+          <h2 class="page-title">农业投入品输入通量计算</h2>
+          
+          <div class="scrollable-content">
+            <el-form label-position="left">
+              <div class="input-section">
+                <!-- 第一行：氮肥的两个输入栏 -->
+                <div class="input-row">
+                  <div class="input-item">
+                    <div class="input-title">氮肥镉含量平均值 (mg/kg)</div>
+                    <el-input
+                      v-model="formData.f3_nitrogen_cd_content"
+                      placeholder="0.12"
+                      size="large"
+                    />
+                  </div>
+                  <div class="input-item">
+                    <div class="input-title">氮肥单位面积使用量 (t/ha/a)</div>
+                    <el-input
+                      v-model="formData.nf_nitrogen_usage"
+                      placeholder="0.25"
+                      size="large"
+                    />
+                  </div>
+                </div>
+                
+                <!-- 第二行：磷肥的两个输入栏 -->
+                <div class="input-row">
+                  <div class="input-item">
+                    <div class="input-title">磷肥镉含量平均值 (mg/kg)</div>
+                    <el-input
+                      v-model="formData.f4_phosphorus_cd_content"
+                      placeholder="0.85"
+                      size="large"
+                    />
+                  </div>
+                  <div class="input-item">
+                    <div class="input-title">磷肥单位面积使用量 (t/ha/a)</div>
+                    <el-input
+                      v-model="formData.pf_phosphorus_usage"
+                      placeholder="0.15"
+                      size="large"
+                    />
+                  </div>
+                </div>
+                
+                <!-- 第三行：钾肥的两个输入栏 -->
+                <div class="input-row">
+                  <div class="input-item">
+                    <div class="input-title">钾肥镉含量平均值 (mg/kg)</div>
+                    <el-input
+                      v-model="formData.f5_potassium_cd_content"
+                      placeholder="0.05"
+                      size="large"
+                    />
+                  </div>
+                  <div class="input-item">
+                    <div class="input-title">钾肥单位面积使用量 (t/ha/a)</div>
+                    <el-input
+                      v-model="formData.kf_potassium_usage"
+                      placeholder="0.12"
+                      size="large"
+                    />
+                  </div>
+                </div>
+                
+                <!-- 第四行：复合肥的两个输入栏 -->
+                <div class="input-row">
+                  <div class="input-item">
+                    <div class="input-title">复合肥镉含量平均值 (mg/kg)</div>
+                    <el-input
+                      v-model="formData.f6_compound_cd_content"
+                      placeholder="0.45"
+                      size="large"
+                    />
+                  </div>
+                  <div class="input-item">
+                    <div class="input-title">复合肥单位面积使用量 (t/ha/a)</div>
+                    <el-input
+                      v-model="formData.cf_compound_usage"
+                      placeholder="0.30"
+                      size="large"
+                    />
+                  </div>
+                </div>
+                
+                <!-- 第五行：有机肥的两个输入栏 -->
+                <div class="input-row">
+                  <div class="input-item">
+                    <div class="input-title">有机肥镉含量平均值 (mg/kg)</div>
+                    <el-input
+                      v-model="formData.f7_organic_cd_content"
+                      placeholder="0.22"
+                      size="large"
+                    />
+                  </div>
+                  <div class="input-item">
+                    <div class="input-title">有机肥单位面积使用量 (t/ha/a)</div>
+                    <el-input
+                      v-model="formData.of_organic_usage"
+                      placeholder="2.50"
+                      size="large"
+                    />
+                  </div>
+                </div>
+                
+                <!-- 第六行：农药的两个输入栏 -->
+                <div class="input-row">
+                  <div class="input-item">
+                    <div class="input-title">农药镉含量 (mg/kg)</div>
+                    <el-input
+                      v-model="formData.f8_pesticide_cd_content"
+                      placeholder="0.08"
+                      size="large"
+                    />
+                  </div>
+                  <div class="input-item">
+                    <div class="input-title">农药单位面积使用量 (t/ha/a)</div>
+                    <el-input
+                      v-model="formData.p_pesticide_usage"
+                      placeholder="0.02"
+                      size="large"
+                    />
+                  </div>
+                </div>
+                
+                <!-- 第七行：农家肥的两个输入栏 -->
+                <div class="input-row">
+                  <div class="input-item">
+                    <div class="input-title">农家肥镉含量 (mg/kg)</div>
+                    <el-input
+                      v-model="formData.f9_farmyard_cd_content"
+                      placeholder="0.15"
+                      size="large"
+                    />
+                  </div>
+                  <div class="input-item">
+                    <div class="input-title">农家肥单位面积使用量 (t/ha/a)</div>
+                    <el-input
+                      v-model="formData.ff_farmyard_usage"
+                      placeholder="1.80"
+                      size="large"
+                    />
+                  </div>
+                </div>
+                
+                <!-- 第八行：农膜的两个输入栏 -->
+                <div class="input-row">
+                  <div class="input-item">
+                    <div class="input-title">农膜镉含量 (mg/kg)</div>
+                    <el-input
+                      v-model="formData.f10_film_cd_content"
+                      placeholder="0.03"
+                      size="large"
+                    />
+                  </div>
+                  <div class="input-item">
+                    <div class="input-title">农膜(存留)单位面积使用量 (t/ha/a)</div>
+                    <el-input
+                      v-model="formData.af_film_usage"
+                      placeholder="0.05"
+                      size="large"
+                    />
+                  </div>
+                </div>
               </div>
-              
-              <!-- 第二行：磷肥的两个输入栏 -->
-              <div class="input-row">
-                <el-form-item label="磷肥镉含量平均值 (mg/kg)" class="form-item">
-                  <el-input v-model="formData.f4_phosphorus_cd_content" placeholder="0.85"></el-input>
-                </el-form-item>
-                <el-form-item label="磷肥单位面积使用量 (t/ha/a)" class="form-item">
-                  <el-input v-model="formData.pf_phosphorus_usage" placeholder="0.15"></el-input>
-                </el-form-item>
-              </div>
-              
-              <!-- 第三行：钾肥的两个输入栏 -->
-              <div class="input-row">
-                <el-form-item label="钾肥镉含量平均值 (mg/kg)" class="form-item">
-                  <el-input v-model="formData.f5_potassium_cd_content" placeholder="0.05"></el-input>
-                </el-form-item>
-                <el-form-item label="钾肥单位面积使用量 (t/ha/a)" class="form-item">
-                  <el-input v-model="formData.kf_potassium_usage" placeholder="0.12"></el-input>
-                </el-form-item>
-              </div>
-              
-              <!-- 第四行：复合肥的两个输入栏 -->
-              <div class="input-row">
-                <el-form-item label="复合肥镉含量平均值 (mg/kg)" class="form-item">
-                  <el-input v-model="formData.f6_compound_cd_content" placeholder="0.45"></el-input>
-                </el-form-item>
-                <el-form-item label="复合肥单位面积使用量 (t/ha/a)" class="form-item">
-                  <el-input v-model="formData.cf_compound_usage" placeholder="0.30"></el-input>
-                </el-form-item>
-              </div>
-              
-              <!-- 第五行：有机肥的两个输入栏 -->
-              <div class="input-row">
-                <el-form-item label="有机肥镉含量平均值 (mg/kg)" class="form-item">
-                  <el-input v-model="formData.f7_organic_cd_content" placeholder="0.22"></el-input>
-                </el-form-item>
-                <el-form-item label="有机肥单位面积使用量 (t/ha/a)" class="form-item">
-                  <el-input v-model="formData.of_organic_usage" placeholder="2.50"></el-input>
-                </el-form-item>
-              </div>
-              
-              <!-- 第六行：农药的两个输入栏 -->
-              <div class="input-row">
-                <el-form-item label="农药镉含量 (mg/kg)" class="form-item">
-                  <el-input v-model="formData.f8_pesticide_cd_content" placeholder="0.08"></el-input>
-                </el-form-item>
-                <el-form-item label="农药单位面积使用量 (t/ha/a)" class="form-item">
-                  <el-input v-model="formData.p_pesticide_usage" placeholder="0.02"></el-input>
-                </el-form-item>
+            </el-form>
+          </div>
+
+          <div class="button-container">
+            <el-button
+              class="calculate-btn"
+              @click="calculateAndVisualize"
+              :loading="loading"
+              size="large"
+            >
+              计算农业投入品输入通量
+            </el-button>
+          </div>
+        </div>
+      </el-card>
+    </div>
+
+    <!-- 结果页面 -->
+    <div v-if="!showInputForm" class="page-container">
+      <div class="toolbar">
+        <el-button class="custom-button back-button" @click="showInputForm = true">
+          返回计算
+        </el-button>
+      </div>
+      
+      <el-card class="results-card">
+        <div class="results-content">
+          <!-- 地图区域 -->
+          <div class="map-section">
+            <h3>农业投入品Cd通量分布图</h3>
+            <div v-if="loadingMap" class="loading-container">
+              <el-icon class="loading-icon"><Loading /></el-icon>
+              <span>地图加载中...</span>
+            </div>
+            <div class="image-container">
+              <img v-if="mapImageUrl" :src=mapImageUrl class="result-image"></img>
+              <div v-if="!mapImageUrl && !loadingMap" class="no-data">
+                <el-icon><Picture /></el-icon>
+                <p>暂无地图数据</p>
               </div>
-              
-              <!-- 第七行：农家肥的两个输入栏 -->
-              <div class="input-row">
-                <el-form-item label="农家肥镉含量 (mg/kg)" class="form-item">
-                  <el-input v-model="formData.f9_farmyard_cd_content" placeholder="0.15"></el-input>
-                </el-form-item>
-                <el-form-item label="农家肥单位面积使用量 (t/ha/a)" class="form-item">
-                  <el-input v-model="formData.ff_farmyard_usage" placeholder="1.80"></el-input>
-                </el-form-item>
+            </div>
+          </div>
+          
+          <!-- 统计图表区域 -->
+          <div class="stats-area">
+            <h3>农业投入品Cd通量统计信息</h3>
+            <div class="model-info">
+              <el-tag type="info">农业投入品Cd通量模型</el-tag>
+              <span class="update-time">
+                最后更新: {{ updateTime ? new Date(updateTime).toLocaleString() : '未知' }}
+              </span>
+            </div>
+            
+            <div v-if="loadingStats" class="loading-container">
+              <el-icon class="loading-icon"><Loading /></el-icon>
+              <span>统计数据加载中...</span>
+            </div>
+            
+            <div v-if="!loadingStats && customResult.data" class="stats-container">
+              <div class="total-flux">
+                总通量: {{ customResult.data.total_cd_flux }} g/ha/a
               </div>
               
-              <!-- 第八行：农膜的两个输入栏 -->
-              <div class="input-row">
-                <el-form-item label="农膜镉含量 (mg/kg)" class="form-item">
-                  <el-input v-model="formData.f10_film_cd_content" placeholder="0.03"></el-input>
-                </el-form-item>
-                <el-form-item label="农膜(存留)单位面积使用量 (t/ha/a)" class="form-item">
-                  <el-input v-model="formData.af_film_usage" placeholder="0.05"></el-input>
-                </el-form-item>
-              </div>
+              <el-table 
+                :data="customResultDetails" 
+                style="width: 100%; margin-bottom: 15px;"
+                border
+                stripe
+              >
+                <el-table-column prop="type" label="投入类型" align="center" min-width="120" />
+                <el-table-column prop="flux" label="Cd通量(g/ha/a)" align="center" :formatter="formatNumber" min-width="120" />
+              </el-table>
             </div>
-          </el-form>
-        </div>
-        
-        <!-- 计算按钮放在页面最下方 -->
-        <div class="button-section">
-          <div class="button-bg"></div>
-          <div class="bottom-overlay"></div>
-          <el-button 
-            class="calculate-btn" 
-            @click="calculateAndVisualize"
-            :loading="loading"
-          >
-            <span class="btn-text">计算农业投入品输入通量</span>
-          </el-button>
-        </div>
-      </div>
-    </el-card>
-    
-    <!-- 结果页面部分 -->
-    <div v-if="!showInputForm" class="results-page">
-      <!-- 返回按钮 -->
-      <el-button 
-        type="primary" 
-        class="back-button"
-        @click="showInputForm = true"
-      >
-        返回计算
-      </el-button>
-      <!-- 结果页面标题 -->
-      <h2 class="results-title">农业投入Cd通量计算结果</h2>
-      
-      <!-- 自定义数据计算结果卡片 -->
-      <el-card class="result-card" v-if="customResult.success">
-         <!-- 添加地图展示区域 -->
-        <div class="map-container">
-          <div class="map-wrapper">
-            <div v-if="mapImageUrl" class="map-image-container">
-              <img :src=mapImageUrl alt="农业投入品输入通量分布图" class="map-image">
+            
+            <div v-if="!loadingStats && !customResult.data" class="no-data">
+              <el-icon><DataAnalysis /></el-icon>
+              <p>暂无统计数据</p>
             </div>
-            <div v-else class="map-placeholder">
-              <p>地图生成中...</p>
-              <el-progress :percentage="mapProgress" :status="mapStatus"></el-progress>
+          </div>
+          
+          <!-- 饼图区域 -->
+          <div class="chart-section">
+            <h3>农业投入品Cd通量占比</h3>
+            <div class="image-container">
+              <div ref="pieChart" style="width: 100%; height: 350px;"></div>
             </div>
           </div>
         </div>
-        <p>总通量: {{ customResult.data.total_cd_flux }} g/ha/a</p>
-        <el-table :data="customResultDetails" border>
-          <el-table-column prop="type" label="投入类型"></el-table-column>
-          <el-table-column prop="flux" label="Cd通量(g/ha/a)"></el-table-column>
-        </el-table>
-        <div class="chart-container">
-            <div ref="customPieChart" style="width: 100%; height: 400px;"></div>
-          </div>
       </el-card>
     </div>
   </div>
 </template>
 
 <script>
-import axios from 'axios';
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { 
+  ElInput, 
+  ElButton, 
+  ElMessage, 
+  ElCard, 
+  ElTable, 
+  ElTableColumn,
+  ElTag,
+  ElIcon,
+  ElForm
+} from 'element-plus';
+import { 
+  Loading, 
+  Picture, 
+  DataAnalysis 
+} from '@element-plus/icons-vue';
 import * as echarts from 'echarts';
-import { ElNotification } from 'element-plus';
-import { api8000 } from '@/utils/request';  // 导入api8000
+import { api8000 } from '@/utils/request';
 
 export default {
-  data() {
-    return {
-      showInputForm: true,
-      formData: {
-        f3_nitrogen_cd_content: "0.12",
-        f4_phosphorus_cd_content: "0.85",
-        f5_potassium_cd_content: "0.05",
-        f6_compound_cd_content: "0.45",
-        f7_organic_cd_content: "0.22",
-        f8_pesticide_cd_content: "0.08",
-        f9_farmyard_cd_content: "0.15",
-        f10_film_cd_content: "0.03",
-        nf_nitrogen_usage: "0.25",
-        pf_phosphorus_usage: "0.15",
-        kf_potassium_usage: "0.12",
-        cf_compound_usage: "0.30",
-        of_organic_usage: "2.50",
-        p_pesticide_usage: "0.02",
-        ff_farmyard_usage: "1.80",
-        af_film_usage: "0.05",
-        description: "自定义数据计算结果"
-      },
-      loading: false,
-      customResult: {},
-      customPieChart: null,
-      mapImageUrl: null,
-      mapProgress: 0,
-      mapStatus: 'success',
-      mapInterval: null
-    };
-  },
-  computed: {
-    customResultDetails() {
-      if (!this.customResult.data || !this.customResult.data.details) return [];
-      return Object.entries(this.customResult.data.details).map(([type, flux]) => ({
-        type: this.getTypeName(type),
-        flux: flux
-      }));
-    },
-    customPieData() {
-      if (!this.customResult.data || !this.customResult.data.details) return [];
-      return Object.entries(this.customResult.data.details).map(([type, value]) => ({
-        name: this.getTypeName(type),
-        value: value
-      }));
-    }
+  components: {
+    ElInput,
+    ElButton,
+    ElCard,
+    ElTable,
+    ElTableColumn,
+    ElTag,
+    ElIcon,
+    ElForm,
+    Loading,
+    Picture,
+    DataAnalysis
   },
-  methods: {
-    async calculateAndVisualize() {
+  setup() {
+    // 计算页面数据
+    const showInputForm = ref(true);
+    const formData = ref({
+      f3_nitrogen_cd_content: "0.12",
+      f4_phosphorus_cd_content: "0.85",
+      f5_potassium_cd_content: "0.05",
+      f6_compound_cd_content: "0.45",
+      f7_organic_cd_content: "0.22",
+      f8_pesticide_cd_content: "0.08",
+      f9_farmyard_cd_content: "0.15",
+      f10_film_cd_content: "0.03",
+      nf_nitrogen_usage: "0.25",
+      pf_phosphorus_usage: "0.15",
+      kf_potassium_usage: "0.12",
+      cf_compound_usage: "0.30",
+      of_organic_usage: "2.50",
+      p_pesticide_usage: "0.02",
+      ff_farmyard_usage: "1.80",
+      af_film_usage: "0.05"
+    });
+    const loading = ref(false);
+    
+    // 结果页面数据
+    const mapImageUrl = ref('');
+    const customResult = ref({});
+    const updateTime = ref(new Date().toISOString());
+    const loadingMap = ref(false);
+    const loadingStats = ref(false);
+    const pieChart = ref(null);
+    
+    // 格式化数字显示（保留4位小数）
+    const formatNumber = (row, column, cellValue) => {
+      if (typeof cellValue === 'number') {
+        return cellValue.toFixed(4);
+      }
+      return cellValue;
+    };
+    
+    // 获取类型名称
+    const getTypeName = (type) => {
+      const typeNames = {
+        'nitrogen_fertilizer': '氮肥',
+        'phosphorus_fertilizer': '磷肥',
+        'potassium_fertilizer': '钾肥',
+        'compound_fertilizer': '复合肥',
+        'organic_fertilizer': '有机肥',
+        'pesticide': '农药',
+        'farmyard_manure': '农家肥',
+        'agricultural_film': '农膜'
+      };
+      return typeNames[type] || type;
+    };
+    
+    // 计算详情数据
+    const customResultDetails = ref([]);
+    
+    // 计算并可视化
+    const calculateAndVisualize = async () => {
       try {
-        this.loading = true;
-        this.mapImageUrl = null;
-        this.mapProgress = 0;
-        this.mapStatus = 'success';
+        loading.value = true;
+        loadingMap.value = true;
+        loadingStats.value = true;
+        mapImageUrl.value = '';
         
         // 准备请求数据
         const requestBody = {
-          ...this.formData,
+          ...formData.value,
           // 将字符串值转换为数字
-          f3_nitrogen_cd_content: parseFloat(this.formData.f3_nitrogen_cd_content),
-          f4_phosphorus_cd_content: parseFloat(this.formData.f4_phosphorus_cd_content),
-          f5_potassium_cd_content: parseFloat(this.formData.f5_potassium_cd_content),
-          f6_compound_cd_content: parseFloat(this.formData.f6_compound_cd_content),
-          f7_organic_cd_content: parseFloat(this.formData.f7_organic_cd_content),
-          f8_pesticide_cd_content: parseFloat(this.formData.f8_pesticide_cd_content),
-          f9_farmyard_cd_content: parseFloat(this.formData.f9_farmyard_cd_content),
-          f10_film_cd_content: parseFloat(this.formData.f10_film_cd_content),
-          nf_nitrogen_usage: parseFloat(this.formData.nf_nitrogen_usage),
-          pf_phosphorus_usage: parseFloat(this.formData.pf_phosphorus_usage),
-          kf_potassium_usage: parseFloat(this.formData.kf_potassium_usage),
-          cf_compound_usage: parseFloat(this.formData.cf_compound_usage),
-          of_organic_usage: parseFloat(this.formData.of_organic_usage),
-          p_pesticide_usage: parseFloat(this.formData.p_pesticide_usage),
-          ff_farmyard_usage: parseFloat(this.formData.ff_farmyard_usage),
-          af_film_usage: parseFloat(this.formData.af_film_usage),
-          description: this.formData.description
+          f3_nitrogen_cd_content: parseFloat(formData.value.f3_nitrogen_cd_content),
+          f4_phosphorus_cd_content: parseFloat(formData.value.f4_phosphorus_cd_content),
+          f5_potassium_cd_content: parseFloat(formData.value.f5_potassium_cd_content),
+          f6_compound_cd_content: parseFloat(formData.value.f6_compound_cd_content),
+          f7_organic_cd_content: parseFloat(formData.value.f7_organic_cd_content),
+          f8_pesticide_cd_content: parseFloat(formData.value.f8_pesticide_cd_content),
+          f9_farmyard_cd_content: parseFloat(formData.value.f9_farmyard_cd_content),
+          f10_film_cd_content: parseFloat(formData.value.f10_film_cd_content),
+          nf_nitrogen_usage: parseFloat(formData.value.nf_nitrogen_usage),
+          pf_phosphorus_usage: parseFloat(formData.value.pf_phosphorus_usage),
+          kf_potassium_usage: parseFloat(formData.value.kf_potassium_usage),
+          cf_compound_usage: parseFloat(formData.value.cf_compound_usage),
+          of_organic_usage: parseFloat(formData.value.of_organic_usage),
+          p_pesticide_usage: parseFloat(formData.value.p_pesticide_usage),
+          ff_farmyard_usage: parseFloat(formData.value.ff_farmyard_usage),
+          af_film_usage: parseFloat(formData.value.af_film_usage)
         };
 
-        // 启动进度条模拟
-        this.startProgressSimulation();
-
-        // 调用计算并可视化接口（返回FileResponse）
+        // 调用计算并可视化接口
         const [mapResponse, calcResponse] = await Promise.all([
           api8000.post(
             '/api/agricultural-input/calculate-and-visualize-file',
@@ -249,459 +401,486 @@ export default {
               responseType: 'blob'
             }
           ),
-          // 使用api8000调用计算接口
           api8000.post(
             '/api/agricultural-input/calculate-with-custom-data',
             requestBody
           )
         ]);
+        
         // 处理地图响应
         const blob = new Blob([mapResponse.data], { type: 'image/jpeg' });
-        this.mapImageUrl = URL.createObjectURL(blob);
-
+        mapImageUrl.value = URL.createObjectURL(blob);
+        
         // 处理计算结果
         if (calcResponse.data.success) {
-          this.customResult = {
+          customResult.value = {
             success: true,
             data: calcResponse.data.data
           };
-
-          this.showInputForm = false;
-          this.$nextTick(() => {
-            this.initCharts();
-          });
+          
+          // 更新详情数据
+          customResultDetails.value = Object.entries(customResult.value.data.details).map(([type, flux]) => ({
+            type: getTypeName(type),
+            flux: flux
+          }));
+          
+          showInputForm.value = false;
+          updateTime.value = new Date().toISOString();
+          
+          // 初始化图表
+          initPieChart();
+          
+          ElMessage.success('计算完成，结果已展示');
         } else {
           throw new Error(calcResponse.data.message);
         }
         
       } catch (error) {
         console.error('API调用错误:', error);
-        this.mapStatus = 'exception';
-        ElNotification.error({
-          title: '计算失败',
-          message: error.message || '请检查网络连接',
-          duration: 5000
-        });
+        ElMessage.error('计算失败: ' + (error.message || '请检查网络连接'));
       } finally {
-        this.stopProgressSimulation();
-        this.loading = false;
+        loading.value = false;
+        loadingMap.value = false;
+        loadingStats.value = false;
       }
-    },
-
-    getTypeName(type) {
-      const typeNames = {
-        'nitrogen_fertilizer': '氮肥',
-        'phosphorus_fertilizer': '磷肥',
-        'potassium_fertilizer': '钾肥',
-        'compound_fertilizer': '复合肥',
-        'organic_fertilizer': '有机肥',
-        'pesticide': '农药',
-        'farmyard_manure': '农家肥',
-        'agricultural_film': '农膜'
-      };
-      return typeNames[type] || type;
-    },
-
-    initCharts() {
-      if (this.customPieChart) {
-        this.customPieChart.dispose();
-      }
-      
-      this.customPieChart = echarts.init(this.$refs.customPieChart);
-      this.customPieChart.setOption(this.getPieChartOption('各项投入通量占比', this.customPieData));
+    };
+    
+    // 初始化饼图
+    const initPieChart = () => {
+      if (!customResult.value.data || !customResult.value.data.details) return;
       
-      window.addEventListener('resize', this.onResize);
-    },
-
-    getPieChartOption(title, data) {
-      return {
-        title: {
-          text: title,
-          left: 'center',
-          textStyle: {
-            fontSize: 16,
-            fontWeight: 'bold'
-          }
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b}: {c} g/ha/a ({d}%)'
-        },
-        legend: {
-          orient: 'vertical',
-          right: 10,
-          top: 'center',
-          data: data.map(item => item.name)
-        },
-        series: [
-          {
-            name: title,
-            type: 'pie',
-            radius: ['40%', '70%'],
-            center: ['40%', '50%'],
-            avoidLabelOverlap: false,
-            itemStyle: {
-              borderRadius: 10,
-              borderColor: '#fff',
-              borderWidth: 2
-            },
-            label: {
-              show: false,
-              position: 'center'
-            },
-            emphasis: {
+      nextTick(() => {
+        const chartContainer = document.querySelector('.chart-section .image-container');
+        if (!chartContainer) {
+          console.error('图表容器未找到');
+          return;
+        }
+        
+        // 处理图表数据
+        const chartData = Object.entries(customResult.value.data.details)
+          .filter(([_, value]) => value > 0)
+          .map(([type, value]) => ({
+            name: getTypeName(type),
+            value: parseFloat(value.toFixed(4))
+          }));
+        
+        // 销毁旧图表实例
+        if (pieChart.value) {
+          pieChart.value.dispose();
+        }
+        
+        // 初始化新图表
+        pieChart.value = echarts.init(chartContainer);
+        
+        // 设置图表选项
+        const option = {
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c} g/ha/a ({d}%)'
+          },
+          legend: {
+            orient: 'vertical',
+            right: 10,
+            top: 'center',
+            data: chartData.map(item => item.name)
+          },
+          series: [
+            {
+              name: '农业投入品Cd通量占比',
+              type: 'pie',
+              radius: ['40%', '70%'],
+              center: ['40%', '50%'],
+              avoidLabelOverlap: false,
+              itemStyle: {
+                borderRadius: 10,
+                borderColor: '#fff',
+                borderWidth: 2
+              },
               label: {
-                show: true,
-                fontSize: '16',
-                fontWeight: 'bold',
-                formatter: '{b}\n{c} g/ha/a\n{d}%'
-              }
-            },
-            labelLine: {
-              show: false
-            },
-            data: data
-          }
-        ]
-      };
-    },
-
-    onResize() {
-      if (this.customPieChart) {
-        this.customPieChart.resize();
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '16',
+                  fontWeight: 'bold',
+                  formatter: '{b}\n{c} g/ha/a\n({d}%)'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: chartData
+            }
+          ],
+          responsive: true,
+          animation: true,
+          animationDuration: 1000,
+          animationEasing: 'cubicOut'
+        };
+        
+        // 设置图表选项
+        pieChart.value.setOption(option);
+        
+        // 添加窗口大小变化监听
+        window.addEventListener('resize', function() {
+          pieChart.value.resize();
+        });
+      });
+    };
+    
+    // 响应式调整
+    const handleResize = () => {
+      if (pieChart.value) {
+        pieChart.value.resize();
       }
-    },
-
-    startProgressSimulation() {
-      this.mapInterval = setInterval(() => {
-        if (this.mapProgress < 90) {
-          this.mapProgress += 10;
-        } else if (this.mapProgress < 99) {
-          this.mapProgress += 1;
-        }
-      }, 500);
-    },
-
-    stopProgressSimulation() {
-      if (this.mapInterval) {
-        clearInterval(this.mapInterval);
-        this.mapInterval = null;
+    };
+    
+    onMounted(() => {
+      window.addEventListener('resize', handleResize);
+    });
+    
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', handleResize);
+      if (pieChart.value) {
+        pieChart.value.dispose();
       }
-      this.mapProgress = 100;
-    }
-  },
-  beforeUnmount() {
-    window.removeEventListener('resize', this.onResize);
-    if (this.customPieChart) {
-      this.customPieChart.dispose();
-    }
-    if (this.mapInterval) {
-      clearInterval(this.mapInterval);
-    }
-    // 释放Blob URL内存
-    if (this.mapImageUrl) {
-      URL.revokeObjectURL(this.mapImageUrl);
-    }
+      if (mapImageUrl.value) {
+        URL.revokeObjectURL(mapImageUrl.value);
+      }
+    });
+    
+    return {
+      showInputForm,
+      formData,
+      loading,
+      mapImageUrl,
+      customResult,
+      updateTime,
+      loadingMap,
+      loadingStats,
+      customResultDetails,
+      formatNumber,
+      calculateAndVisualize
+    };
   }
 };
 </script>
 
 <style scoped>
-.fertilizer-input-form {
-  padding: 20px;
+/* 整体布局优化 - 紧凑版 */
+.agricultural-input-management {
+  padding: 15px;
+  background: linear-gradient(
+    135deg, 
+    rgba(230, 247, 255, 0.7) 0%, 
+    rgba(240, 248, 255, 0.7) 100%
+  );
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+.page-container {
+  width: 100%;
+  height: 100%;
+}
+
+.gradient-card, .results-card {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 6px;
+  padding: 15px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+  height: 100%;
+  box-sizing: border-box;
+}
+
+/* 工具栏样式 */
+.toolbar {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  margin-bottom: 15px;
+  padding: 12px;
   background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
 }
 
-.form-card {
-  width: 90%;
-  max-width: 1200px; /* 增加宽度以容纳两列 */
-  margin: 0 auto;
-  background: linear-gradient(135deg, #FAFDFF, #FFFAA2);
-  border: 1px solid #e6e6e6;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+.custom-button {
+  background-color: #47C3B9 !important;
+  color: #DCFFFA !important;
+  border: none;
+  border-radius: 155px;
+  padding: 8px 16px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
 }
 
-.card-content {
+/* 计算页面样式 */
+.calculation-content {
+  height: 100%;
   display: flex;
   flex-direction: column;
-  min-height: 600px;
 }
 
-.input-section {
-  width: 90%;
-  padding: 30px;
+.page-title {
+  text-align: center;
+  margin-bottom: 18px;
+  color: #333;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.scrollable-content {
   flex: 1;
   overflow-y: auto;
+  padding: 8px;
 }
 
-.button-section {
+/* 输入区域样式 - 紧凑布局 */
+.input-section {
   width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 30px;
-  position: relative;
-  overflow: hidden;
-  margin-top: auto; /* 将按钮推到页面底部 */
+  padding: 8px;
 }
 
-.form-section {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-/* 修改：输入行样式 - 一行两个输入栏 */
 .input-row {
   display: flex;
-  justify-content: space-between;
-  margin-bottom: 15px;
-  width: 100%;
-  gap: 20px; /* 添加间距 */
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+  gap: 12px;
 }
 
-.form-item {
-  flex: 1; /* 每个输入栏占据相同宽度 */
-  min-width: 0; /* 防止内容溢出 */
-  margin-bottom: 0;
+.input-item {
+  flex: 1;
+  min-width: calc(50% - 6px);
   display: flex;
-  flex-direction: row; /* 横向排列标签和输入框 */
-  align-items: center; /* 垂直居中 */
+  flex-direction: column;
 }
 
-/* 增大标签字体 */
-.el-form-item__label {
-  font-size: 24px; /* 增大标签字体 */
-  text-align: left; /* 标签左对齐 */
-  margin-bottom: 0; /* 移除底部间距 */
-  padding: 0 !important;
-  font-weight: 600;
-  color: #333;
-  width: 250px; /* 固定标签宽度 */
-  flex-shrink: 0; /* 防止标签被压缩 */
+.input-title {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 6px;
+  text-align: left;
+  font-weight: 500;
 }
 
 .el-input {
   width: 100%;
 }
 
-:deep(.el-input) .el-input__inner {
-  width: 100% !important;
-  padding: 12px 15px; /* 增加内边距 */
-  border: none;
-  border-radius: 8px; /* 增加圆角 */
-  background: rgba(255, 255, 255, 0.9);
+/* 输入框样式增强 */
+:deep(.el-input__inner) {
+  height: 36px;
+  line-height: 36px;
+  padding: 0 12px;
+  border-radius: 4px;
   border: 1px solid #dcdfe6;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
-  transition: all 0.3s ease;
-  font-size: 18px; /* 增大输入框字体 */
-  text-align: left; /* 输入文本左对齐 */
+  transition: border-color 0.3s ease;
+  font-size: 14px;
 }
 
-:deep(.el-input) .el-input__inner:focus {
-  border: 2px solid #409EFF;
-  box-shadow: 0 0 10px rgba(64, 158, 255, 0.2);
-  background: rgba(255, 255, 255, 1);
+:deep(.el-input__inner:hover) {
+  border-color: #c0c4cc;
 }
 
-:deep(.el-input) .el-input__inner::placeholder {
-  color: #a0a0a0;
-  font-style: italic;
-  font-size: 16px; /* 增大占位符字体 */
+:deep(.el-input__inner:focus) {
+  border-color: #47C3B9;
+  box-shadow: 0 0 0 2px rgba(71, 195, 185, 0.2);
+}
+
+.button-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
 }
 
 .calculate-btn {
-  width: 90%;
-  max-width: 350px;
-  height: 60px;
-  border: none;
-  border-radius: 25px !important;
-  font-size: 24px;
+  width: 280px;
+  background-color: #47C3B9 !important;
+  color: white !important;
   font-weight: bold;
-  transition: all 0.4s ease;
-  position: relative;
-  z-index: 2;
-  background: linear-gradient(to right, #8DF9F0, #26B046);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15),
-              0 4px 10px rgba(38, 176, 70, 0.3) inset;
-}
-
-.calculate-btn:hover {
-  transform: scale(1.03);
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2),
-              0 4px 12px rgba(38, 176, 70, 0.4) inset;
-  background: linear-gradient(to right, #7de8df, #20a03d);
-}
-
-.calculate-btn:active {
-  transform: scale(0.98);
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15),
-              0 2px 8px rgba(38, 176, 70, 0.4) inset;
-}
-
-.btn-text {
-  position: relative;
-  color: white;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-  font-size: 26px;
-  letter-spacing: 1px;
-  z-index: 1;
-  padding: 20px;
-  text-align: center;
-  line-height: 1.4;
+  height: 40px;
+  border-radius: 6px;
+  font-size: 15px;
 }
 
 /* 结果页面样式 */
-.results-page {
-  width: 90%;
-  max-width: 1200px;
-  padding: 30px;
-  background: linear-gradient(135deg, #FAFDFF, #FFFAA2);
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  position: relative;
-}
-
-.results-title {
-  text-align: center;
-  color: #333;
-  margin-bottom: 30px;
-  font-size: 28px;
+.results-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
-.result-card {
-  width: 90%;
-  margin: 0 auto;
-  padding: 20px;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+.map-section, .stats-area, .chart-section {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 6px;
+  padding: 15px;
+  margin-bottom: 15px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.result-card h3 {
-  text-align: center;
-  margin-bottom: 20px;
+h3 {
+  margin-bottom: 12px;
   color: #333;
-  font-size: 24px; /* 增大标题字体 */
-}
-
-.result-card p {
-  margin: 10px 0;
-  font-size: 18px; /* 增大字体 */
-  text-align: center;
-  font-weight: bold;
-  color: #26B046;
+  font-size: 16px;
+  font-weight: 600;
 }
 
-.chart-container {
-  margin-top: 20px;
-  border: 1px solid #eee;
-  border-radius: 8px;
-  padding: 10px;
-  background: #f9f9f9;
+.model-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
 }
 
-.map-container {
-  margin-top: 30px;
-  padding: 20px;
-  background-color: #f9f9f9;
-  border-radius: 8px;
-  border: 1px solid #eee;
+.update-time {
+  color: #666;
+  font-size: 13px;
 }
 
-.map-container h3 {
+.total-flux {
   text-align: center;
+  font-size: 16px;
+  font-weight: bold;
   margin-bottom: 15px;
-  color: #333;
-  font-size: 22px; /* 增大字体 */
 }
 
-.map-wrapper {
-  position: relative;
-  min-height: 400px;
+/* 图片容器限定大小 */
+.image-container {
+  width: 100%;
+  height: 350px;
   display: flex;
-  align-items: center;
   justify-content: center;
-  background-color: white;
+  align-items: center;
+  background-color: #f9f9f9;
   border-radius: 6px;
   overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.map-image-container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.map-image {
+.result-image {
   max-width: 100%;
-  max-height: 500px;
+  max-height: 100%;
   object-fit: contain;
 }
 
-.map-placeholder {
-  text-align: center;
-  padding: 20px;
-  width: 80%;
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 250px;
+  color: #47C3B9;
 }
 
-.map-placeholder p {
-  margin-bottom: 15px;
-  font-size: 18px; /* 增大字体 */
-  color: #666;
+.no-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 250px;
+  color: #999;
+  font-size: 14px;
 }
 
-.back-button {
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  width: 120px;
-  font-size: 18px; /* 增大字体 */
-  padding: 10px;
-  background: linear-gradient(to right, #8DF9F0, #26B046);
-  color: white;
-  border: none;
-  border-radius: 20px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+.no-data .el-icon {
+  font-size: 40px;
+  margin-bottom: 8px;
+}
+
+.loading-icon {
+  font-size: 32px;
+  margin-bottom: 8px;
+  animation: rotate 2s linear infinite;
 }
 
-.back-button:hover {
-  background: linear-gradient(to right, #7de8df, #20a03d);
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
-/* 响应式调整 */
+/* 响应式设计 */
 @media (max-width: 992px) {
   .input-row {
-    flex-direction: column; /* 小屏幕下垂直排列 */
     gap: 10px;
   }
   
-  .form-item {
-    width: 100%;
+  .input-item {
+    min-width: calc(50% - 5px);
+  }
+  
+  .page-title {
+    font-size: 18px;
+    margin-bottom: 15px;
+  }
+}
+
+@media (max-width: 768px) {
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+  
+  .input-item {
+    min-width: 100%;
+  }
+  
+  .input-row {
+    gap: 8px;
   }
   
-  .el-form-item__label {
-    font-size: 20px; /* 在小屏幕上保持较大字体 */
-    width: 200px; /* 在小屏幕上减小标签宽度 */
+  .input-title {
+    font-size: 13px;
   }
   
-  :deep(.el-input) .el-input__inner {
+  .image-container {
+    height: 280px;
+  }
+  
+  :deep(.el-input__inner) {
+    height: 34px;
+    line-height: 34px;
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 480px) {
+  .agricultural-input-management {
+    padding: 10px;
+  }
+  
+  .gradient-card, .results-card {
+    padding: 12px;
+  }
+  
+  .page-title {
     font-size: 16px;
+    margin-bottom: 12px;
+  }
+  
+  .input-title {
+    font-size: 12px;
   }
   
   .calculate-btn {
-    height: 50px;
-    font-size: 20px;
+    width: 100%;
+    max-width: 280px;
+    height: 38px;
+    font-size: 14px;
+  }
+  
+  .image-container {
+    height: 220px;
   }
   
-  .btn-text {
-    font-size: 20px;
+  .total-flux {
+    font-size: 15px;
   }
 }
 </style>

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

@@ -1,102 +1,111 @@
 <template>
-  <div class="atmosphere-flux-container">
-    <div class="map-title">大气通量分布图</div>
-    <div class="map-image-container">
-      <img 
-        src="/大气通量(1).jpg" 
-        alt="大气通量分布图" 
-        class="map-image"
-      >
+  <div class="agricultural-input-management">
+    <div class="page-container">
+      <el-card class="results-card">
+        <div class="results-content">
+          <!-- 地图区域 -->
+          <div class="map-section">
+            <h3>大气Cd通量分布图</h3>
+            <div class="image-container">
+               <img 
+                  src="/大气通量(1).jpg" 
+                  alt="大气通量分布图" 
+                  class="result-image"
+                >
+            </div>
+          </div>
+        </div>
+      </el-card>
     </div>
   </div>
 </template>
 
 <script>
+import { ElButton, ElCard } from 'element-plus';
+
 export default {
   name: 'AtmosphereFluxMap',
+  components: {
+    ElButton,
+    ElCard
+  }
 };
 </script>
 
 <style scoped>
-.atmosphere-flux-container {
+
+.page-container {
   width: 100%;
-  max-width: 800px;
-  margin: 0 auto;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
-  overflow: hidden;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  height: 100%;
 }
-
-.map-title {
-  background: linear-gradient(to right, #1a5fad, #2c8fd1);
-  color: white;
-  text-align: center;
-  padding: 18px 0;
-  font-size: 1.8rem;
-  font-weight: 600;
-  letter-spacing: 1px;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+/* 结果卡片样式 */
+.results-card {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+  height: 100%;
+  box-sizing: border-box;
 }
 
-.map-content {
+.results-content {
+  height: 100%;
   display: flex;
   flex-direction: column;
+}
+
+.map-section {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
   padding: 20px;
-  background: #f8fafc;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+h3 {
+  margin-bottom: 15px;
+  color: #333;
+  font-size: 18px;
+  font-weight: 600;
 }
 
-.map-image-container {
-  flex: 1;
+/* 图片容器限定大小 */
+.image-container {
+  width: 100%;
+  height: 500px;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 10px;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
-.map-image {
+.result-image {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
-  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 {
+.result-image:hover {
   transform: scale(1.02);
 }
 
-
+/* 响应式设计 */
 @media (max-width: 768px) {
-  .map-title {
-    font-size: 1.5rem;
-    padding: 15px 0;
-  }
-  
-  .map-image-container {
-    padding: 15px;
-    min-height: 350px;
-  }
-  
-  .map-footer {
-    font-size: 0.85rem;
+  .image-container {
+    height: 400px;
   }
 }
 
 @media (max-width: 480px) {
-  .map-title {
-    font-size: 1.3rem;
+  .agricultural-input-management {
+    padding: 10px;
   }
   
-  .map-image-container {
-    min-height: 280px;
+  .image-container {
+    height: 300px;
   }
 }
 </style>

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

@@ -1,114 +1,92 @@
 <template>
-  <div class="irrigation-management" style="display: flex; justify-content: center; height: 100%;">
+  <div class="irrigation-management">
     <!-- 计算页面 -->
-    <div v-if="showCalculation" class="page-container" style="width: 100%; height: 100%;">
-      <el-card shadow="always" class="gradient-card" style="height: 100%;">
+    <div v-if="showCalculation" class="page-container">
+      <el-card class="gradient-card">
         <div class="calculation-content">
           <h2 class="page-title">灌溉水输入通量计算</h2>
           
-          <!-- 将多选框和输入栏放在同一行 -->
-          <div class="scrollable-content compact-layout">
-            <el-checkbox-group v-model="selectedLandTypes" style="width: 100%;">
+          <div class="scrollable-content">
+            <el-checkbox-group v-model="selectedLandTypes">
               <!-- 水田 -->
-              <div class="land-type-section compact">
-                <div class="radio-container compact">
-                  <el-checkbox 
-                    label="water" 
-                    border 
-                    size="large"
-                    class="custom-checkbox compact"
-                  >
-                    <span class="checkbox-label">水田</span>
-                  </el-checkbox>
-                </div>
+              <div class="land-type-section">
+                <el-checkbox label="water" border size="large" class="custom-checkbox">
+                  <span class="checkbox-label">水田</span>
+                </el-checkbox>
                 
-                <div class="input-group compact">
-                  <div class="input-column compact">
+                <div class="input-group">
+                  <div class="input-column">
                     <div class="input-title">灌溉水用量 (m³/亩/年)</div>
                     <el-input
                       v-model="irrigationWaterUsage"
                       placeholder="711"
                       size="large"
-                      class="compact-input"
+                      class="fixed-width-input"
                     />
                   </div>
-                  <div class="input-column compact">
+                  <div class="input-column">
                     <div class="input-title">有效利用率</div>
                     <el-input
                       v-model="irrigationEfficiency"
                       placeholder="0.524"
                       size="large"
-                      class="compact-input"
+                      class="fixed-width-input"
                     />
                   </div>
                 </div>
               </div>
 
               <!-- 水浇地 -->
-              <div class="land-type-section compact">
-                <div class="radio-container compact">
-                  <el-checkbox 
-                    label="irrigated" 
-                    border 
-                    size="large"
-                    class="custom-checkbox compact"
-                  >
-                    <span class="checkbox-label">水浇地</span>
-                  </el-checkbox>
-                </div>
+              <div class="land-type-section">
+                <el-checkbox label="irrigated" border size="large" class="custom-checkbox">
+                  <span class="checkbox-label">水浇地</span>
+                </el-checkbox>
                 
-                <div class="input-group compact">
-                  <div class="input-column compact">
+                <div class="input-group">
+                  <div class="input-column">
                     <div class="input-title">灌溉水用量 (m³/亩/年)</div>
                     <el-input
                       v-model="irrigatedWaterUsage"
                       placeholder="427"
                       size="large"
-                      class="compact-input"
+                      class="fixed-width-input"
                     />
                   </div>
-                  <div class="input-column compact">
+                  <div class="input-column">
                     <div class="input-title">有效利用率</div>
                     <el-input
                       v-model="irrigatedEfficiency"
                       placeholder="0.599"
                       size="large"
-                      class="compact-input"
+                      class="fixed-width-input"
                     />
                   </div>
                 </div>
               </div>
 
               <!-- 旱地 -->
-              <div class="land-type-section compact">
-                <div class="radio-container compact">
-                  <el-checkbox 
-                    label="dry" 
-                    border 
-                    size="large"
-                    class="custom-checkbox compact"
-                  >
-                    <span class="checkbox-label">旱地</span>
-                  </el-checkbox>
-                </div>
+              <div class="land-type-section">
+                <el-checkbox label="dry" border size="large" class="custom-checkbox">
+                  <span class="checkbox-label">旱地</span>
+                </el-checkbox>
                 
-                <div class="input-group compact">
-                  <div class="input-column compact">
+                <div class="input-group">
+                  <div class="input-column">
                     <div class="input-title">灌溉水用量 (m³/亩/年)</div>
                     <el-input
                       v-model="dryWaterUsage"
                       placeholder="200"
                       size="large"
-                      class="compact-input"
+                      class="fixed-width-input"
                     />
                   </div>
-                  <div class="input-column compact">
+                  <div class="input-column">
                     <div class="input-title">有效利用率</div>
                     <el-input
                       v-model="dryEfficiency"
                       placeholder="0.7"
                       size="large"
-                      class="compact-input"
+                      class="fixed-width-input"
                     />
                   </div>
                 </div>
@@ -116,97 +94,109 @@
             </el-checkbox-group>
           </div>
 
-          <el-row justify="center" style="margin-top: 20px; margin-bottom: 10px;">
+          <div class="button-container">
             <el-button
-              class="calculate-btn compact"
+              class="calculate-btn"
               @click="calculateFlux"
               :loading="loading"
               size="large"
             >
               计算灌溉水输入通量
             </el-button>
-          </el-row>
+          </div>
         </div>
       </el-card>
     </div>
 
     <!-- 结果页面 -->
-    <div v-if="showResults" class="page-container" style="width: 100%; height: 100%;">
-      <el-card shadow="always" class="results-card" style="height: 100%;">
+    <div v-if="showResults" class="page-container">
+      <div class="toolbar">
+        <el-button class="custom-button back-button" @click="backToCalculation">
+          返回计算
+        </el-button>
+      </div>
+      
+      <el-card class="results-card">
         <div class="results-content">
-          <div class="results-header">
-            <el-button 
-            type="primary" 
-            @click="backToCalculation"
-            class="back-button">
-              返回计算
-            </el-button>
-            <div class="result-title">计算结果</div>
+          <!-- 地图区域 -->
+          <div class="map-section">
+            <h3>Cd含量地图</h3>
+            <div v-if="loadingMap" class="loading-container">
+              <el-icon class="loading-icon"><Loading /></el-icon>
+              <span>地图加载中...</span>
+            </div>
+            <div class="image-container">
+              <img v-if="mapImageUrl" :src="mapImageUrl" alt="Cd含量地图" class="result-image">
+              <div v-if="!mapImageUrl && !loadingMap" class="no-data">
+                <el-icon><Picture /></el-icon>
+                <p>暂无地图数据</p>
+              </div>
+            </div>
           </div>
           
-          <!-- 添加滚动容器 -->
-          <div class="scrollable-results">
-            <div class="results-container">
-              <!-- 地图 -->
-              <div class="image-row">
-                <div class="image-container">
-                  <div class="result-subtitle">Cd含量地图</div>
-                  <div class="image-wrapper">
-                    <img v-if="mapImageUrl" :src="mapImageUrl" alt="Cd含量地图" class="result-image">
-                    <div v-else class="image-placeholder">地图加载中...</div>
-                  </div>
-                </div>
-              </div>
-              
-              <!-- 统计结果 -->
-              <el-row style="margin-top: 20px;">
-                <el-col :span="24">
-                  <div class="result-subtitle">统计结果</div>
-                  <div class="statistics-container">
-                    <!-- 基础统计表格 -->
-                    <el-table
-                      v-if="statisticsData"
-                      :data="[statisticsData]"
-                      border
-                      size="large"
-                      style="width: 100%; margin-bottom: 15px;"
-                    >
-                      <el-table-column prop="土地类型" label="土地类型" align="center"></el-table-column>
-                      <el-table-column prop="数据更新时间" label="数据更新时间" align="center"></el-table-column>
-                      <el-table-column prop="数据点总数" label="数据点总数" align="center"></el-table-column>
-                      <el-table-column prop="均值" label="均值" align="center" :formatter="formatNumber"></el-table-column>
-                      <el-table-column prop="中位数" label="中位数" align="center" :formatter="formatNumber"></el-table-column>
-                      <el-table-column prop="标准差" label="标准差" align="center" :formatter="formatNumber"></el-table-column>
-                      <el-table-column prop="最小值" label="最小值" align="center" :formatter="formatNumber"></el-table-column>
-                      <el-table-column prop="最大值" label="最大值" align="center" :formatter="format极简版Number"></el-table-column>
-                    </el-table>
-                    
-                    <!-- 分位数和形态统计表格 -->
-                    <el-table
-                      v-if="statisticsData"
-                      :data="[statisticsData]"
-                      border
-                      size="large"
-                      style="width: 100%; margin-bottom: 15px;"
-                    >
-                      <el-table-column prop="25%分位数" label="25%分位数" align="center" :formatter="formatNumber"></el-table-column>
-                      <el-table-column prop="75%分位数" label="75%分位数" align="center" :formatter="formatNumber"></el-table-column>
-                      <el-table-column prop="偏度" label="偏度" align="center" :formatter="formatNumber"></el-table-column>
-                      <el-table-column prop="峰度" label="峰度" align="center" :formatter="formatNumber"></el-table-column>
-                    </el-table>
-                  </div>
-                </el-col>
-              </el-row>
+          <!-- 统计图表区域 -->
+          <div class="stats-area">
+            <h3>Cd含量统计信息</h3>
+            <div class="model-info">
+              <el-tag type="info">Cd含量模型</el-tag>
+              <span class="update-time">
+                最后更新: {{ updateTime ? new Date(updateTime).toLocaleString() : '未知' }}
+              </span>
+            </div>
+            
+            <div v-if="loadingStats" class="loading-container">
+              <el-icon class="loading-icon"><Loading /></el-icon>
+              <span>统计数据加载中...</span>
+            </div>
+            
+            <div v-if="!loadingStats && statisticsData" class="stats-container">
+              <el-table 
+                :data="[statisticsData]" 
+                style="width: 100%; margin-bottom: 20px;"
+                border
+                stripe
+              >
+                <el-table-column prop="土地类型" label="土地类型" align="center" min-width="120" />
+                <el-table-column prop="数据更新时间" label="数据更新时间" align="center" min-width="150" />
+                <el-table-column prop="数据点总数" label="数据点总数" align="center" min-width="120" />
+                <el-table-column prop="均值" label="均值" align="center" :formatter="formatNumber" min-width="100" />
+                <el-table-column prop="中位数" label="中位数" align="center" :formatter="formatNumber" min-width="100" />
+                <el-table-column prop="标准差" label="标准差" align="center" :formatter="formatNumber" min-width="100" />
+                <el-table-column prop="最小值" label="最小值" align="center" :formatter="formatNumber" min-width="100" />
+                <el-table-column prop="最大值" label="最大值" align="center" :formatter="formatNumber" min-width="100" />
+              </el-table>
               
-              <!-- 直方图 -->
-              <div class="image-row" style="margin-top: 20px;">
-                <div class="image-container">
-                  <div class="result-subtitle">Cd含量分布直方图</div>
-                  <div class="image-wrapper">
-                    <img v-if="histogramImageUrl" :src="histogramImageUrl" alt="Cd含量直方图" class="result-image">
-                    <div v-else class="image-placeholder">直方图加载中...</div>
-                  </div>
-                </div>
+              <el-table 
+                :data="[statisticsData]" 
+                style="width: 100%;"
+                border
+                stripe
+              >
+                <el-table-column prop="25%分位数" label="25%分位数" align="center" :formatter="formatNumber" min-width="120" />
+                <el-table-column prop="75%分位数" label="75%分位数" align="center" :formatter="formatNumber" min-width="120" />
+                <el-table-column prop="偏度" label="偏度" align="center" :formatter="formatNumber" min-width="100" />
+                <el-table-column prop="峰度" label="峰度" align="center" :formatter="formatNumber" min-width="100" />
+              </el-table>
+            </div>
+            
+            <div v-if="!loadingStats && !statisticsData" class="no-data">
+              <el-icon><DataAnalysis /></el-icon>
+              <p>暂无统计数据</p>
+            </div>
+          </div>
+          
+          <!-- 直方图区域 -->
+          <div class="histogram-section">
+            <h3>Cd含量分布直方图</h3>
+            <div v-if="loadingHistogram" class="loading-container">
+              <el-icon class="loading-icon"><Loading /></el-icon>
+              <span>直方图加载中...</span>
+            </div>
+            <div class="image-container">
+                <img v-if="histogramImageUrl" :src="histogramImageUrl" alt="Cd含量直方图" class="result-image">
+              <div v-if="!histogramImageUrl && !loadingHistogram" class="no-data">
+                <el-icon><Histogram /></el-icon>
+                <p>暂无直方图数据</p>
               </div>
             </div>
           </div>
@@ -225,12 +215,19 @@ import {
   ElButton, 
   ElMessage, 
   ElCard, 
-  ElRow, 
-  ElCol, 
   ElTable, 
-  ElTableColumn 
+  ElTableColumn,
+  ElTag,
+  ElIcon
 } from 'element-plus';
-import { api8000 } from '@/utils/request';  // 导入api8000
+import { 
+  Loading, 
+  Picture, 
+  Histogram, 
+  Download, 
+  DataAnalysis 
+} from '@element-plus/icons-vue';
+import { api8000 } from '@/utils/request';
 
 // 土地类型映射
 const landTypeMap = {
@@ -245,37 +242,39 @@ export default {
     ElCheckboxGroup,
     ElInput,
     ElButton,
-    ElMessage,
     ElCard,
-    ElRow,
-    ElCol,
     ElTable,
-    ElTableColumn
+    ElTableColumn,
+    ElTag,
+    ElIcon,
+    Loading,
+    Picture,
+    Histogram,
+    Download,
+    DataAnalysis
   },
   setup() {
-    // 将单选改为多选，初始值为空数组
-    const selectedLandTypes = ref([]);
-    
-    // 设置默认值
+    // 计算页面数据
+    const selectedLandTypes = ref(['water']);
     const irrigationWaterUsage = ref('711');
     const irrigationEfficiency = ref('0.524');
-
     const irrigatedWaterUsage = ref('427');
     const irrigatedEfficiency = ref('0.599');
-
     const dryWaterUsage = ref('200');
     const dryEfficiency = ref('0.7');
-
-    const fluxResult = ref(null);
-    const showCalculation = ref(true); // 显示计算页面
-    const showResults = ref(false); // 显示结果页面
+    const showCalculation = ref(true);
+    const showResults = ref(false);
     const loading = ref(false);
     
-    // 结果展示数据
+    // 结果页面数据
     const mapImageUrl = ref('');
     const histogramImageUrl = ref('');
     const statisticsData = ref(null);
-
+    const updateTime = ref(new Date().toISOString());
+    const loadingMap = ref(false);
+    const loadingHistogram = ref(false);
+    const loadingStats = ref(false);
+    
     // 格式化数字显示（保留4位小数）
     const formatNumber = (row, column, cellValue) => {
       if (typeof cellValue === 'number') {
@@ -283,44 +282,47 @@ export default {
       }
       return cellValue;
     };
-
+    
     // 获取默认地图
     const fetchDefaultMap = async (landTypeChinese) => {
       try {
+        loadingMap.value = true;
         const response = await api8000.get('/api/water/default-map', {
           params: { land_type: landTypeChinese },
-          responseType: 'blob' // 接收二进制数据
+          responseType: 'blob'
         });
-        
-        // 创建对象URL
         return URL.createObjectURL(response.data);
       } catch (error) {
         console.error('获取默认地图失败:', error);
         ElMessage.error('获取地图失败，请重试');
         return '';
+      } finally {
+        loadingMap.value = false;
       }
     };
-
+    
     // 获取默认直方图
     const fetchDefaultHistogram = async (landTypeChinese) => {
       try {
+        loadingHistogram.value = true;
         const response = await api8000.get('/api/water/default-histogram', {
           params: { land_type: landTypeChinese },
-          responseType: 'blob' // 接收二进制数据
+          responseType: 'blob'
         });
-        
-        // 创建对象URL
-        return URL.createObjectURL(response.data)
+        return URL.createObjectURL(response.data);
       } catch (error) {
         console.error('获取默认直方图失败:', error);
         ElMessage.error('获取直方图失败，请重试');
         return '';
+      } finally {
+        loadingHistogram.value = false;
       }
     };
-
+    
     // 获取统计数据
     const fetchStatistics = async (landTypeChinese) => {
       try {
+        loadingStats.value = true;
         const response = await api8000.get('/api/water/statistics', {
           params: { land_type: landTypeChinese }
         });
@@ -329,119 +331,34 @@ export default {
         console.error('获取统计数据失败:', error);
         ElMessage.error('获取统计数据失败，请重试');
         return null;
+      } finally {
+        loadingStats.value = false;
       }
     };
-
+    
     // 返回计算页面
     const backToCalculation = () => {
       showCalculation.value = true;
       showResults.value = false;
     };
-
+    
+    // 计算通量
     const calculateFlux = async () => {
-      // 检查是否选择了土地类型
       if (selectedLandTypes.value.length === 0) {
         ElMessage.warning('请至少选择一种土地类型');
         return;
       }
-
-      // 收集所有土地类型的通量计算结果
-      const landFluxResults = [];
-      let inputValid = true;  // 修复：在循环外部定义验证变量
       
-      // 遍历所有选中的土地类型
-      for (const landType of selectedLandTypes.value) {
-        let flux = 0;
-        let usage, efficiency;
-
-        // 根据土地类型获取对应的输入值
-        if (landType === 'water') {
-          usage = irrigationWaterUsage.value;
-          efficiency = irrigationEfficiency.value;
-        } else if (landType === 'irrigated') {
-          usage = irrigatedWaterUsage.value;
-          efficiency = irrigatedEfficiency.value;
-        } else if (landType === 'dry') {
-          usage = dryWaterUsage.value;
-          efficiency = dryEfficiency.value;
-        }
-
-        // 验证输入有效性
-        if (!usage || !efficiency) {
-          ElMessage.warning(`请输入${landTypeMap[landType]}的灌溉水用量和有效利用率`);
-          inputValid = false;
-          break;
-        }
-
-        const usageValue = parseFloat(usage);
-        const efficiencyValue = parseFloat(efficiency) / 100;
-
-        if (isNaN(usageValue) || isNaN(efficiencyValue)) {
-          ElMessage.error(`请输入${landTypeMap[landType]}的有效数字`);
-          inputValid = false;
-          break;
-        } else if (efficiencyValue > 1 || efficiencyValue < 0) {
-          ElMessage.error(`${landTypeMap[landType]}的有效利用率应在0-100%之间`);
-          inputValid = false;
-          break;
-        }
-
-        // 计算通量
-        flux = usageValue * efficiencyValue;
-        landFluxResults.push({
-          landType: landTypeMap[landType],
-          flux,
-          efficiency: efficiencyValue
-        });
-      }
-
-      if (!inputValid) return;  // 使用在外部定义的验证变量
-
       loading.value = true;
       
       try {
-        // 准备调用后端接口的数据
-        const formData = new FormData();
-        
-        // 构建土地类型列表（中文名称）
         const landTypesChinese = selectedLandTypes.value.map(type => landTypeMap[type]);
-        
-        // 重要修改：将 land_types 作为数组传递（JSON字符串）
-        landTypesChinese.forEach(landType => formData.append('land_types', landType));
-
-        
-        // 构建系数参数对象（每个土地类型对应的系数）
-        const coefficientParams = {};
-        landFluxResults.forEach(result => {
-          coefficientParams[result.landType] = [result.flux, result.efficiency];
-        });
-        formData.append('coefficient_params', JSON.stringify(coefficientParams));
-        
-        // 其他固定参数
-        formData.append('color_map_name', "绿-黄-红-紫");
-        formData.append('output_size', 8);
-
-        // 调用计算接口
-        await api8000.post('/api/water/calculate', formData, {
-          headers: {
-            'Content-Type': 'multipart/form-data'
-          }
-        });
-        
-        // 获取并显示结果
-        // 使用下划线连接的土地类型名称作为参数获取结果
         const landTypeParam = landTypesChinese.join('_');
         
-        // 获取默认地图
         mapImageUrl.value = await fetchDefaultMap(landTypeParam);
-        
-        // 获取默认直方图
         histogramImageUrl.value = await fetchDefaultHistogram(landTypeParam);
-        
-        // 获取统计数据
         statisticsData.value = await fetchStatistics(landTypeParam);
         
-        // 切换到结果页面
         showCalculation.value = false;
         showResults.value = true;
         
@@ -453,7 +370,7 @@ export default {
         loading.value = false;
       }
     };
-
+    
     return {
       selectedLandTypes,
       irrigationWaterUsage,
@@ -463,14 +380,17 @@ export default {
       dryWaterUsage,
       dryEfficiency,
       calculateFlux,
-      fluxResult,
       showCalculation,
       showResults,
       loading,
       mapImageUrl,
       histogramImageUrl,
       statisticsData,
+      updateTime,
       formatNumber,
+      loadingMap,
+      loadingHistogram,
+      loadingStats,
       backToCalculation
     };
   }
@@ -480,255 +400,244 @@ export default {
 <style scoped>
 /* 整体布局优化 */
 .irrigation-management {
-  height: 100vh;
-  overflow: hidden;
-  background: linear-gradient(135deg, #f5f7fa 0%, #e6f7ff 100%);
   padding: 20px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background: linear-gradient(
+    135deg, 
+    rgba(230, 247, 255, 0.7) 0%, 
+    rgba(240, 248, 255, 0.7) 100%
+  );
+  min-height: 100vh;
+  box-sizing: border-box;
 }
 
 .page-container {
-  width: 90%;
-  height: 90%;
-  margin: 0 auto;
-  max-width: 1200px;
+  width: 100%;
+  height: 100%;
 }
 
-.gradient-card {
-  background: linear-gradient(
-    135deg, 
-    rgba(250, 253, 255, 0.9), 
-    rgba(210, 240, 252, 0.9)
-  );
-  height: 100%;
+.gradient-card, .results-card {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
   padding: 20px;
-  border-radius: 12px;
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+  height: 100%;
+  box-sizing: border-box;
+}
+
+/* 工具栏样式 */
+.toolbar {
+  display: flex;
+  justify-content: flex-start;
+  gap: 15px;
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+}
+
+.custom-button {
+  background-color: #47C3B9 !important;
+  color: #DCFFFA !important;
+  border: none;
+  border-radius: 155px;
+  padding: 10px 20px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
 }
 
+/* 计算页面样式 */
 .calculation-content {
   height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
 }
 
-/* 标题样式 */
 .page-title {
   text-align: center;
-  font-size: 26px;
+  margin-bottom: 25px;
+  color: #333;
+  font-size: 24px;
   font-weight: 600;
-  margin-bottom: 20px;
-  color: #1a8cff;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-  letter-spacing: 0.5px;
 }
 
-/* 紧凑布局调整 */
-.compact-layout {
+.scrollable-content {
   flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  padding: 0 10px;
+  overflow-y: auto;
+  padding: 10px;
 }
 
-.land-type-section.compact {
+/* 多选栏和输入栏同一行布局 */
+.land-type-section {
   display: flex;
   align-items: center;
-  padding: 12px 15px;
+  gap: 20px;
+  margin-bottom: 20px;
+  padding: 15px;
   background-color: rgba(255, 255, 255, 0.7);
-  border-radius: 10px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-  margin-bottom: 10px;
-  transition: all 0.3s ease;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
-.land-type-section.compact:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
-}
-
-.radio-container.compact {
-  margin-bottom: 0;
+.custom-checkbox {
   flex-shrink: 0;
-  width: 100px;
+  width: 120px;
 }
 
-.input-group.compact {
-  margin-left: 0;
-  margin-top: 0;
-  flex-grow: 1;
+.input-group {
   display: flex;
-  gap: 15px;
+  gap: 20px;
+  width: 100px;
+  flex-grow: 1;
 }
 
-.input-column.compact {
+.input-column {
   flex: 1;
   min-width: 0;
 }
 
-/* 输入栏优化 - 宽度减少，字体增大 */
-.compact-input {
-  margin-top: 5px;
-  width: 80%; /* 减少宽度 */
-  max-width: 300px; /* 设置最大宽度 */
-  font-size: 18px; /* 增大字体 */
-  height: 42px; /* 适当增加高度 */
+.input-title {
+  font-size: 18px;
+  color: #666;
+  margin-bottom: 12px;
 }
 
-:deep(.el-input__inner) {
-  font-size: 18px !important; /* 确保输入文字也增大 */
-  padding: 0 15px !important;
-  height: 42px !important;
+.calculate-btn {
+  width: 300px;
+  margin-top: 20px;
+  background-color: #47C3B9 !important;
+  color: white !important;
+  font-weight: bold;
+  height: 45px;
+  border-radius: 8px;
 }
 
-.custom-checkbox.compact {
-  padding: 10px 12px;
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.7);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
-  border: 2px solid #dcdfe6;
-  height: 44px;
+/* 结果页面样式 */
+.results-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.map-section, .stats-area, .histogram-section {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+h3 {
+  margin-bottom: 15px;
+  color: #333;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.model-info {
   display: flex;
   align-items: center;
+  gap: 15px;
+  margin-bottom: 15px;
 }
 
-.custom-checkbox.compact:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
-  border-color: #1a8cff;
+.update-time {
+  color: #666;
+  font-size: 14px;
 }
 
-.custom-checkbox.compact.is-checked {
-  background-color: #e6f7ff;
-  border-color: #1a8cff;
-  box-shadow: 0 4px 10px rgba(26, 140, 255, 0.2);
+/* 图片容器限定大小 */
+.image-container {
+  width: 100%;
+  height: 400px; /* 固定高度 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
-.checkbox-label {
-  font-size: 18px; /* 增大字体 */
-  font-weight: 600;
-  color: #333;
-  margin-left: 10px;
+.result-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
 }
 
-.input-title {
-  font-size: 18px; /* 增大字体 */
-  font-weight: 500;
-  color: #2c3e50;
-  margin-bottom: 8px;
-  text-align: left;
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  color: #47C3B9;
 }
 
-/* 计算按钮优化 */
-.calculate-btn.compact {
-  width: 90%;
-  max-width: 380px;
-  height: 46px;
-  border-radius: 10px;
-  font-size: 18px; /* 增大字体 */
-  font-weight: 600;
-  background: linear-gradient(45deg, #1a8cff, #00cc99);
-  color: white;
-  margin-top: 10px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-  letter-spacing: 1px;
+.no-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  color: #999;
+  font-size: 16px;
+}
+
+.no-data .el-icon {
+  font-size: 48px;
+  margin-bottom: 10px;
+}
+
+.loading-icon {
+  font-size: 36px;
+  margin-bottom: 10px;
+  animation: rotate 2s linear infinite;
 }
 
-.calculate-btn.compact:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
-/* 响应式调整 */
+/* 响应式设计 */
 @media (max-width: 992px) {
-  .land-type-section.compact {
+  .land-type-section {
     flex-direction: column;
     align-items: flex-start;
-    padding: 15px;
   }
   
-  .radio-container.compact {
-    width: 100%;
-    margin-bottom: 10px;
-  }
-  
-  .input-group.compact {
-    width: 100%;
-    margin-left: 0;
+  .input-group {
+    width: 100px;
     flex-direction: column;
-    gap: 12px;
-  }
-  
-  .compact-input {
-    width: 95%; /* 在小屏幕上增加宽度 */
-    max-width: none;
+    gap: 10px;
   }
   
-  .page-title {
-    font-size: 24px;
+  .image-container {
+    height: 300px;
   }
 }
 
-@media (max-height: 800px) {
-  .gradient-card {
-    padding: 15px;
-  }
-  
-  .land-type-section.compact {
-    padding: 10px 12px;
-  }
-  
-  .custom-checkbox.compact {
-    padding: 8px 10px;
-    height: 40px;
-  }
-  
-  .input-title {
-    font-size: 16px;
-  }
-  
-  .checkbox-label {
-    font-size: 16px;
-  }
-  
-  .page-title {
-    font-size: 22px;
-    margin-bottom: 15px;
-  }
-  
-  .calculate-btn.compact {
-    height: 42px;
-    font-size: 16px;
-  }
-  
-  .compact-input {
-    font-size: 16px;
-    height: 38px;
+@media (max-width: 768px) {
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
   }
   
-  :deep(.el-input__inner) {
-    font-size: 16px !important;
-    height: 38px !important;
+  .image-container {
+    height: 250px;
   }
 }
-
-@media (max-height: 700px) {
-  .page-title {
-    font-size: 20px;
-    margin-bottom: 12px;
-  }
-  
-  .compact-layout {
-    gap: 10px;
-  }
-  
-  .land-type-section.compact {
-    padding: 8px 10px;
-    margin-bottom: 8px;
-  }
+/* 固定输入栏宽度 */
+.fixed-width-input {
+  width: 250px;
 }
+.button-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 30px;
+}
+
 </style>

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

@@ -1,119 +1,112 @@
 <template>
-  <div class="container">
-    <div class="gradient-card">
-      <div class="card-header">
-        <h1>籽粒移除输出通量计算结果</h1>
-        <p>{{ area }}地区作物籽粒移除Cd通量分析报告</p>
-      </div>
-
-      <div v-if="loading" class="loading-section">
-        <i class="fas fa-spinner fa-spin"></i> 正在加载数据...
-      </div>
-
-      <div v-if="error" class="error-section">
-        <i class="fas fa-exclamation-triangle"></i> {{ error }}
-      </div>
-
-      <div class="visualization-section">
-          <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>
-
-      <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 class="agricultural-input-management">
+    <!-- 直接展示结果页面 -->
+    <div class="page-container">
+      <el-card class="results-card">
+        <div class="results-content">
+          <!-- 地图区域 -->
+          <div class="map-section">
+            <h3>籽粒移除Cd通量分布图</h3>
+            <div v-if="loading" class="loading-container">
+              <el-icon class="loading-icon"><Loading /></el-icon>
+              <span>数据加载中...</span>
             </div>
-            <div class="stat-card">
-              <div class="stat-value">{{ statistics.max_flux.toFixed(2) }} g/ha/a</div>
-              <div class="stat-label">最大通量</div>
+            <div v-else-if="error" class="error-container">
+              <el-icon class="error-icon"><Warning /></el-icon>
+              <span>{{ error }}</span>
             </div>
-            <div class="stat-card">
-              <div class="stat-value">{{ statistics.min_flux.toFixed(2) }} g/ha/a</div>
-              <div class="stat-label">最小通量</div>
+            <div v-else class="image-container">
+              <img :src="visualizationImage" class="result-image"></img>
             </div>
           </div>
-        </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="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 class="stats-area">
+            <h3>籽粒移除Cd通量统计信息</h3>
+            <div class="model-info">
+              <el-tag type="info">籽粒移除Cd通量模型</el-tag>
+              <span class="update-time">
+                最后更新: {{ reportTime }}
+              </span>
+            </div>
+            
+            <div v-if="loading" class="loading-container">
+              <el-icon class="loading-icon"><Loading /></el-icon>
+              <span>统计数据加载中...</span>
+            </div>
+            
+            <div v-else-if="error" class="error-container">
+              <el-icon class="error-icon"><Warning /></el-icon>
+              <span>{{ error }}</span>
+            </div>
+            
+            <div v-else class="stats-container">
+              <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(4) }}</div>
+                  <div class="stat-label">平均通量</div>
+                </div>
+                <div class="stat-card">
+                  <div class="stat-value">{{ statistics.max_flux.toFixed(4) }}</div>
+                  <div class="stat-label">最大通量</div>
+                </div>
+                <div class="stat-card">
+                  <div class="stat-value">{{ statistics.min_flux.toFixed(4) }}</div>
+                  <div class="stat-label">最小通量</div>
+                </div>
+              </div>
+              
+              <div v-if="resultDetails.length > 0" class="details-table">
+                <el-table 
+                  :data="resultDetails" 
+                  style="width: 100%; margin-top: 20px;"
+                  border
+                  stripe
+                >
+                  <el-table-column prop="type" label="区域类型" align="center" min-width="120" />
+                  <el-table-column prop="flux" label="Cd通量(g/ha/a)" align="center" :formatter="formatNumber" min-width="150" />
+                </el-table>
+              </div>
+            </div>
           </div>
         </div>
-
-        <div class="card-footer">
-          <p><i class="fas fa-clock"></i> 报告生成时间: {{ reportTime }}</p>
-        </div>
-      </template>
+      </el-card>
     </div>
   </div>
 </template>
 
 <script>
-import { ref, computed, onMounted } from 'vue';
-import { ElTable, ElTableColumn, ElPagination } from 'element-plus';
-import { api8000 } from '@/utils/request';  // 导入api8000
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { 
+  ElButton, 
+  ElCard, 
+  ElTable, 
+  ElTableColumn,
+  ElTag,
+  ElIcon
+} from 'element-plus';
+import { 
+  Loading, 
+  Picture, 
+  Warning 
+} from '@element-plus/icons-vue';
+import { api8000 } from '@/utils/request';
 
 export default {
-  name: 'GrainRemovalResult',
   components: {
+    ElButton,
+    ElCard,
     ElTable,
     ElTableColumn,
-    ElPagination
+    ElTag,
+    ElIcon,
+    Loading,
+    Picture,
+    Warning
   },
   props: {
     area: {
@@ -130,37 +123,28 @@ export default {
       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; // 重置到第一页
+    // 格式化数字显示（保留4位小数）
+    const formatNumber = (row, column, cellValue) => {
+      if (typeof cellValue === 'number') {
+        return cellValue.toFixed(4);
+      }
+      return cellValue;
     };
     
-    const handleCurrentChange = (newPage) => {
-      currentPage.value = newPage;
-    };
+    // 计算详情数据
+    const resultDetails = ref([]);
     
     // 从API获取数据
     const fetchData = async () => {
       try {
+        loading.value = true;
+        error.value = null;
+        
         // 获取计算结果数据
         const dataResponse = await api8000.get(
           `/api/cd-flux-removal/grain-removal?area=${encodeURIComponent(props.area)}`
@@ -173,18 +157,28 @@ export default {
         // 设置数据
         results.value = dataResponse.data.data.results;
         statistics.value = dataResponse.data.data.statistics;
-        formula.value = dataResponse.data.data.formula;
-        unit.value = dataResponse.data.data.unit;
         
-        // 获取可视化图片
-        const imageResponse = await api8000.get(
-          `/api/cd-flux-removal/grain-removal/visualize?area=${encodeURIComponent(props.area)}&level=county`,
-          { responseType: 'blob' }
-        );
+        // 更新详情数据
+        if (dataResponse.data.data.details) {
+          resultDetails.value = Object.entries(dataResponse.data.data.details).map(([type, flux]) => ({
+            type: getTypeName(type),
+            flux: flux
+          }));
+        }
         
-        // 创建图片Blob URL
-        const blob = new Blob([imageResponse.data], { type: imageResponse.headers['content-type'] });
-        visualizationImage.value = URL.createObjectURL(blob);
+        // 获取可视化图片
+        try {
+          const imageResponse = await api8000.get(
+            `/api/cd-flux-removal/grain-removal/visualize?area=${encodeURIComponent(props.area)}&level=county`,
+            { responseType: 'blob' }
+          );
+          
+          // 创建图片Blob URL
+          const blob = new Blob([imageResponse.data], { type: imageResponse.headers['content-type'] });
+          visualizationImage.value = URL.createObjectURL(blob);
+        } catch (imgErr) {
+          console.error('图片加载错误:', imgErr);
+        }
         
         // 设置报告时间
         reportTime.value = new Date().toLocaleString('zh-CN', {
@@ -208,96 +202,118 @@ export default {
       fetchData();
     });
     
+    onBeforeUnmount(() => {
+      if (visualizationImage.value) {
+        URL.revokeObjectURL(visualizationImage.value);
+      }
+    });
+    
     return {
       results,
       statistics,
-      formula,
-      unit,
       visualizationImage,
       reportTime,
       loading,
       error,
-      tableData,
-      currentPage,
-      pageSize,
-      handleSizeChange,
-      handleCurrentChange
+      resultDetails,
+      formatNumber
     };
   }
 };
 </script>
 
 <style scoped>
-/* 保留您原有的样式，只添加Element UI的自定义样式 */
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
+/* 整体布局优化 - 与农业投入品保持一致 */
+.agricultural-input-management {
   padding: 20px;
-  background: linear-gradient(135deg, #e6f7ff, #b3e0ff);
+  background: linear-gradient(
+    135deg, 
+    rgba(230, 247, 255, 0.7) 0%, 
+    rgba(240, 248, 255, 0.7) 100%
+  );
+  min-height: 100vh;
+  box-sizing: border-box;
 }
 
-.gradient-card {
-  background: linear-gradient(135deg,
-      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;
+.page-container {
   width: 100%;
-  max-width: 1000px;
-  backdrop-filter: blur(8px);
+  height: 100%;
+}
+
+/* 工具栏样式 */
+.toolbar {
+  display: flex;
+  justify-content: flex-start;
+  gap: 15px;
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+}
+
+.custom-button {
+  background-color: #47C3B9 !important;
+  color: #DCFFFA !important;
   border: none;
+  border-radius: 155px;
+  padding: 10px 20px;
+  font-weight: bold;
   display: flex;
-  flex-direction: column;
-  overflow: hidden;
+  align-items: center;
 }
 
-.card-header {
-  text-align: center;
-  margin-bottom: 30px;
-  border-bottom: 2px solid rgba(0, 96, 100, 0.1);
-  padding-bottom: 20px;
+/* 结果卡片样式 */
+.results-card {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+  height: 100%;
+  box-sizing: border-box;
 }
 
-.card-header h1 {
-  font-size: 2.2rem;
-  color: #006064;
-  margin-bottom: 10px;
-  font-weight: 700;
+.results-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
-.card-header p {
-  font-size: 1.2rem;
-  color: #00838f;
-  opacity: 0.9;
+.map-section, .stats-area {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 
-.loading-section, .error-section {
-  text-align: center;
-  padding: 40px;
-  font-size: 1.4rem;
-  color: #006064;
+h3 {
+  margin-bottom: 15px;
+  color: #333;
+  font-size: 18px;
+  font-weight: 600;
 }
 
-.loading-section i {
-  margin-right: 15px;
-  font-size: 1.8rem;
-  color: #00838f;
+.model-info {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 15px;
 }
 
-.error-section i {
-  margin-right: 15px;
-  font-size: 1.8rem;
-  color: #d32f2f;
+.update-time {
+  color: #666;
+  font-size: 14px;
 }
 
+/* 统计卡片样式 */
 .stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 20px;
-  margin-top: 20px;
+  margin-bottom: 20px;
 }
 
 .stat-card {
@@ -306,7 +322,7 @@ export default {
   padding: 20px;
   text-align: center;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
-  transition: transform 0.3s ease;
+  transition: all 0.3s ease;
 }
 
 .stat-card:hover {
@@ -326,90 +342,98 @@ export default {
   color: #00838f;
 }
 
-.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);
-}
-
-.visualization-section h2,
-.data-section h2,
-.formula-section h2,
-.statistics-section h2 {
-  font-size: 1.6rem;
-  color: #006064;
-  margin-bottom: 20px;
+/* 图片容器限定大小 */
+.image-container {
+  width: 100%;
+  height: 400px;
   display: flex;
+  justify-content: center;
   align-items: center;
-  gap: 10px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 .result-image {
   max-width: 100%;
-  max-height: 500px;
-  border-radius: 10px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
-}
-
-.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;
-  margin: 20px 0;
-  border: 1px dashed #00838f;
-  color: #006064;
+  max-height: 100%;
+  object-fit: contain;
 }
 
-.unit-note {
-  text-align: center;
-  font-size: 1.1rem;
-  color: #00838f;
+.loading-container, .error-container {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  height: 300px;
+  gap: 15px;
 }
 
-.card-footer {
-  text-align: center;
-  font-size: 1rem;
-  color: #00838f;
-  padding-top: 20px;
-  border-top: 1px solid rgba(0, 150, 136, 0.2);
+.loading-container {
+  color: #47C3B9;
+}
+
+.error-container {
+  color: #F56C6C;
+}
+
+.loading-icon {
+  font-size: 36px;
+  margin-bottom: 10px;
+  animation: rotate 2s linear infinite;
+}
+
+.error-icon {
+  font-size: 36px;
+  margin-bottom: 10px;
+}
+
+.no-data {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  height: 300px;
+  color: #999;
+  font-size: 16px;
+}
+
+.no-data .el-icon {
+  font-size: 48px;
+  margin-bottom: 10px;
+}
+
+.details-table {
+  margin-top: 20px;
+}
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-  .stats-grid {
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
   }
   
-  .card-header h1 {
-    font-size: 1.8rem;
+  .stats-grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }
   
-  .visualization-section h2,
-  .data-section h2,
-  .formula-section h2,
-  .statistics-section h2 {
-    font-size: 1.4rem;
+  .image-container {
+    height: 300px;
   }
 }
 
 @media (max-width: 480px) {
-  .gradient-card {
+  .agricultural-input-management {
+    padding: 10px;
+  }
+  
+  .results-card {
     padding: 15px;
   }
   
@@ -421,44 +445,12 @@ export default {
     padding: 15px;
   }
   
+  .image-container {
+    height: 250px;
+  }
+  
   .stat-value {
     font-size: 1.5rem;
   }
 }
-
-.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,34 +1,42 @@
 <template>
   <div class="sampling-process">
-    <div class="header-section">
-      <h2>籽粒移除</h2>
-    </div>
-    
-    <div class="content-section">
-      <div class="text-content">
-        <p>
-          籽粒移除与人体健康风险的关联更为直接。重金属在作物籽粒中积累后，会通过食物链对人体健康构成潜在威胁，像中国湖南水稻的镉污染就已成为突出的环境健康问题。
-        </p>
-        <p>
-          如图所示，土壤中的重金属通过植物根系被吸收并最终富集于籽粒中。当农作物成熟后，农民收割作物并将富含重金属的籽粒收集起来，这一过程使得籽粒中积累的重金属随之离开农田系统，构成重要的重金属输出途径。
-        </p>
+    <!-- 籽粒移除部分 -->
+    <div class="section-container">
+      <div class="section-header">
+        <div class="section-number">1</div>
+        <h2>籽粒移除</h2>
       </div>
-
-      <!-- 图片区域 -->
-      <div class="image-row">
-        <div class="image-container">
-          <el-image :src="image1" alt="籽粒移除是重金属输出的重要途径" class="sampling-image"></el-image>
+      
+      <div class="section-content">
+        <div class="description-card">
+          <div class="icon">🌾</div>
+          <div class="description-text">
+            <p>
+              籽粒移除与人体健康风险的关联更为直接。重金属在作物籽粒中积累后，会通过食物链对人体健康构成潜在威胁，像中国湖南水稻的镉污染就已成为突出的环境健康问题。
+            </p>
+            <p>
+              如图所示，土壤中的重金属通过植物根系被吸收并最终富集于籽粒中。当农作物成熟后，农民收割作物并将富含重金属的籽粒收集起来，这一过程使得籽粒中积累的重金属随之离开农田系统，构成重要的重金属输出途径。
+            </p>
+          </div>
         </div>
-      </div>
-
-      <!-- 新增视频区域 -->
-      <div class="video-section">
-        <h3 class="video-title">籽粒移除过程视频演示</h3>
-        <div class="video-container">
-          <video controls class="sampling-video">
-            <source src="@/assets/videos/秸秆移除和籽粒移除.mp4" type="video/mp4">
-            您的浏览器不支持HTML5视频播放。
-          </video>
+        
+        <div class="image-gallery">
+          <div class="image-card">
+            <el-image :src="image1" alt="籽粒移除是重金属输出的重要途径" class="sampling-image"></el-image>
+            <div class="image-info">
+              <h3>籽粒移除过程</h3>
+            </div>
+          </div>
+          
+          <div class="image-card">
+            <video controls class="sampling-image">
+              <source src="@/assets/videos/秸秆移除和籽粒移除.mp4" type="video/mp4">
+              您的浏览器不支持HTML5视频播放。
+            </video>
+            <div class="image-info">
+              <h3>籽粒移除视频演示</h3>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -48,11 +56,10 @@ export default {
 <style scoped>
 .sampling-process {
   padding: 30px;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
+  background: linear-gradient(135deg, rgba(245, 250, 255, 0.85) 0%, rgba(235, 245, 255, 0.85) 100%);
   position: relative;
   overflow: hidden;
-  border-radius: 16px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .sampling-process::before {
@@ -63,351 +70,200 @@ 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.15;
+  opacity: 0.12;
   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);
+.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;
 }
 
-.content-section:hover {
+.section-container:hover {
   transform: translateY(-5px);
-  box-shadow: 0 8px 25px rgba(极简版0, 0, 0, 0.15);
-  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 12px 35px rgba(0, 60, 120, 0.15);
 }
 
-.text-content {
-  margin-bottom: 30px;
-}
-
-p {
-  text-indent: 2em;
-  margin: 20px 0;
-  line-height: 1.8;
-  color: #2d3748;
-  font-size: 1.1rem;
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 25px;
   position: relative;
-  padding-left: 20px;
-}
-
-p::before {
-  content: "•";
-  position: absolute;
-  left: 0;
-  top: 0;
-  color: #3a9fd3;
-  font-size: 1.5rem;
-  line-height: 1.8;
+  padding-bottom: 15px;
+  border-bottom: 2px solid rgba(58, 160, 207, 0.25);
 }
 
-/* 图片区域 */
-.image-row {
+.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;
-  margin-bottom: 30px;
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin-right: 20px;
+  box-shadow: 0 5px 12px rgba(74, 158, 247, 0.25);
 }
 
-.image-container {
-  border-radius: 12px;
-  overflow: hidden;
-  position: relative;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  max-width: 800px; /* 设置最大宽度 */
-  width: 100%; /* 宽度100% */
-  margin: 0 auto;
-  transition: all 0.4s ease;
+h2 {
+  color: #1a365d;
+  font-size: 1.9rem;
+  margin: 0;
+  font-weight: 650;
+  letter-spacing: 0.5px;
 }
 
-.image-container:hover {
-  transform: scale(1.01);
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+.section-content {
+  padding: 0 10px;
 }
 
-.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;
+.description-card {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 30px;
+  padding: 20px;
+  background: rgba(235, 245, 255, 0.6);
+  border-radius: 15px;
 }
 
-.image-container:hover .sampling-image {
-  transform: scale(1.02);
+.icon {
+  font-size: 2.5rem;
+  margin-right: 25px;
+  color: #3a9fd3;
 }
 
-.image-caption {
-  text-align: center;
+.description-text p {
   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));
+  line-height: 1.8;
+  color: #2d3748;
   margin: 0;
-  border-top: 1px dashed #cbd5e0;
-  position: relative;
 }
 
-.image-caption::before {
-  content: "📌";
-  position: absolute;
-  left: 20px;
-  top: 50%;
-  transform: translateY(-50%);
+/* 图片画廊样式 */
+.image-gallery {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 25px;
+  margin-top: 20px;
 }
 
-/* 视频区域 */
-.video-section {
-  margin-top: 40px;
-  padding-top: 30px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.video-title {
-  text-align: center;
-  color: #1a365d;
-  font-size: 1.5rem;
-  margin-bottom: 20px;
-  position: relative;
-  padding-bottom: 10px;
-}
-
-.video-title::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 60px;
-  height: 3px;
-  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
-  border-radius: 2px;
-}
-
-.video-container {
-  border-radius: 12px;
+.image-card {
+  border-radius: 15px;
   overflow: hidden;
-  position: relative;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  max-width: 800px; /* 设置与图片相同的最大宽度 */
-  width: 100%; /* 宽度100% */
-  margin: 0 auto;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
   transition: all 0.4s ease;
+  background: white;
 }
 
-.video-container:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+.image-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
 }
 
-.sampling-video {
+.sampling-image {
   width: 100%;
-  height: auto;
+  height: 250px;
   display: block;
-  background: #f8fafc;
-  min-height: 350px;
-}
-
-.video-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;
+  object-fit: cover;
+  transition: transform 0.4s ease;
+  background: rgba(245, 249, 255, 0.4);
 }
 
-.video-caption::before {
-  content: "📹";
-  position: absolute;
-  left: 20px;
-  top: 50%;
-  transform: translateY(-50%);
+.image-card:hover .sampling-image {
+  transform: scale(1.05);
 }
 
-/* 装饰元素 */
-.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;
+.image-info {
+  padding: 20px;
 }
 
-.decorative-element:nth-child(1) {
-  top: 10%;
-  left: 5%;
-  width: 80px;
-  height: 80px;
+.image-info h3 {
+  color: #1a365d;
+  font-size: 1.25rem;
+  margin-top: 0;
+  margin-bottom: 10px;
 }
 
-.decorative-element:nth-child(2) {
-  bottom: 15%;
-  right: 8%;
-  width: 60px;
-  height: 60px;
+.image-info p {
+  font-size: 0.95rem;
+  color: #4a5568;
+  margin: 0;
+  line-height: 1.6;
 }
 
 /* 响应式设计 */
-@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,
-  .sampling-video {
-    min-height: 300px;
-  }
-  
-  .image-container,
-  .video-container {
-    max-width: 700px; /* 小屏幕上减小最大宽度 */
+@media (max-width: 1100px) {
+  .image-gallery {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
 @media (max-width: 768px) {
-  .sampling-process {
-    padding: 15px;
-  }
-  
-  .header-section h2 {
-    font-size: 1.6rem;
+  .image-gallery {
+    grid-template-columns: 1fr;
   }
   
-  p {
-    font-size: 1rem;
-    padding-left: 15px;
+  .section-container {
+    padding: 25px;
   }
   
-  .image-caption,
-  .video-caption {
-    font-size: 1rem;
-    padding: 12px;
+  .section-number {
+    width: 45px;
+    height: 45px;
+    font-size: 1.6rem;
   }
   
-  .sampling-image,
-  .sampling-video {
-    min-height: 250px;
+  h2 {
+    font-size: 1.7rem;
   }
   
-  .video-title {
-    font-size: 1.3rem;
+  .description-card {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
   }
   
-  .image-container,
-  .video-container {
-    max-width: 600px; /* 小屏幕上减小最大宽度 */
+  .icon {
+    margin-right: 0;
+    margin-bottom: 15px;
   }
 }
 
 @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;
+    padding: 20px;
   }
   
-  .image-caption,
-  .video-caption {
-    font-size: 0.9rem;
-    padding: 10px 15px 10px 35px;
+  .section-container {
+    padding: 20px;
   }
   
-  .image-caption::before,
-  .video-caption::before {
-    left: 10px;
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
   }
   
-  .sampling-image,
-  .sampling-video {
-    min-height: 200px;
+  .section-number {
+    margin-right: 0;
+    margin-bottom: 15px;
   }
   
-  .video-title {
-    font-size: 1.1rem;
+  h2 {
+    font-size: 1.6rem;
   }
   
-  .image-container,
-  .video-container {
-    max-width: 100%; /* 小屏幕上宽度100% */
+  .sampling-image {
+    height: 200px;
   }
 }
 </style>

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

@@ -1,33 +1,42 @@
 <template>
   <div class="sampling-process">
-    <div class="header-section">
-      <h2>秸秆移除</h2>
-    </div>
-    
-    <div class="content-section">
-      <div class="text-content">
-        <p>
-          移除秸秆是重金属输出的重要途径之一，这些重金属主要积累在植物的地上部分（包括秸秆）。
-        </p>
-        <p>
-          如图所示，土壤中的重金属通过植物根系被吸收并转运至地上部分，最终富集于秸秆中。当秸秆被移除时，其中积累的重金属也随之离开农田系统，构成重要的重金属输出途径。
-        </p>
+    <!-- 秸秆移除部分 -->
+    <div class="section-container">
+      <div class="section-header">
+        <div class="section-number">1</div>
+        <h2>秸秆移除</h2>
       </div>
-
-      <div class="image-row">
-        <div class="image-container">
-          <el-image :src="image1" alt="秸秆移除是重金属输出的重要途径" class="sampling-image"></el-image>
+      
+      <div class="section-content">
+        <div class="description-card">
+          <div class="icon">🌿</div>
+          <div class="description-text">
+            <p>
+              移除秸秆是重金属输出的重要途径之一，这些重金属主要积累在植物的地上部分（包括秸秆）。
+            </p>
+            <p>
+              如图所示，土壤中的重金属通过植物根系被吸收并转运至地上部分，最终富集于秸秆中。当秸秆被移除时，其中积累的重金属也随之离开农田系统，构成重要的重金属输出途径。
+            </p>
+          </div>
         </div>
-      </div>
-
-       <!-- 新增视频区域 -->
-      <div class="video-section">
-        <h3 class="video-title">秸秆移除过程视频演示</h3>
-        <div class="video-container">
-          <video controls class="sampling-video">
-            <source src="@/assets/videos/秸秆移除和籽粒移除.mp4" type="video/mp4">
-            您的浏览器不支持HTML5视频播放。
-          </video>
+        
+        <div class="image-gallery">
+          <div class="image-card">
+            <el-image :src="image1" alt="秸秆移除是重金属输出的重要途径" class="sampling-image"></el-image>
+            <div class="image-info">
+              <h3>秸秆移除过程</h3>
+            </div>
+          </div>
+          
+          <div class="image-card">
+            <video controls class="sampling-image">
+              <source src="@/assets/videos/秸秆移除和籽粒移除.mp4" type="video/mp4">
+              您的浏览器不支持HTML5视频播放。
+            </video>
+            <div class="image-info">
+              <h3>秸秆移除视频演示</h3>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -47,11 +56,10 @@ export default {
 <style scoped>
 .sampling-process {
   padding: 30px;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
+  background: linear-gradient(135deg, rgba(230, 247, 255, 0.85) 0%, rgba(240, 248, 255, 0.85) 100%);
   position: relative;
   overflow: hidden;
-  border-radius: 16px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .sampling-process::before {
@@ -62,351 +70,193 @@ 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.15;
+  opacity: 0.12;
   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);
+.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;
 }
 
-.content-section:hover {
+.section-container:hover {
   transform: translateY(-5px);
-  box-shadow: 0 8px 25px rgba(极简版0, 0, 0, 0.15);
-  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 12px 35px rgba(0, 60, 120, 0.15);
 }
 
-.text-content {
-  margin-bottom: 30px;
-}
-
-p {
-  text-indent: 2em;
-  margin: 20px 0;
-  line-height: 1.8;
-  color: #2d3748;
-  font-size: 1.1rem;
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 25px;
   position: relative;
-  padding-left: 20px;
-}
-
-p::before {
-  content: "•";
-  position: absolute;
-  left: 0;
-  top: 0;
-  color: #3a9fd3;
-  font-size: 1.5rem;
-  line-height: 1.8;
+  padding-bottom: 15px;
+  border-bottom: 2px solid rgba(58, 160, 207, 0.25);
 }
 
-/* 图片区域 */
-.image-row {
+.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;
-  margin-bottom: 30px;
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin-right: 20px;
+  box-shadow: 0 5px 12px rgba(74, 158, 247, 0.25);
 }
 
-.image-container {
-  border-radius: 12px;
-  overflow: hidden;
-  position: relative;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  max-width: 800px; /* 设置最大宽度 */
-  width: 100%; /* 宽度100% */
-  margin: 0 auto;
-  transition: all 0.4s ease;
+h2 {
+  color: #1a365d;
+  font-size: 1.9rem;
+  margin: 0;
+  font-weight: 650;
+  letter-spacing: 0.5px;
 }
 
-.image-container:hover {
-  transform: scale(1.01);
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+.section-content {
+  padding: 0 10px;
 }
 
-.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;
+.description-card {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 30px;
+  padding: 20px;
+  background: rgba(235, 245, 255, 0.6);
+  border-radius: 15px;
 }
 
-.image-container:hover .sampling-image {
-  transform: scale(1.02);
+.icon {
+  font-size: 2.5rem;
+  margin-right: 25px;
+  color: #3a9fd3;
 }
 
-.image-caption {
-  text-align: center;
+.description-text p {
   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));
+  line-height: 1.8;
+  color: #2d3748;
   margin: 0;
-  border-top: 1px dashed #cbd5e0;
-  position: relative;
-}
-
-.image-caption::before {
-  content: "📌";
-  position: absolute;
-  left: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-/* 视频区域 */
-.video-section {
-  margin-top: 40px;
-  padding-top: 30px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.video-title {
-  text-align: center;
-  color: #1a365d;
-  font-size: 1.5rem;
-  margin-bottom: 20px;
-  position: relative;
-  padding-bottom: 10px;
+/* 图片画廊样式 */
+.image-gallery {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 25px;
+  margin-top: 20px;
 }
 
-.video-title::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 60px;
-  height: 3px;
-  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
-  border-radius: 2px;
-}
-
-.video-container {
-  border-radius: 12px;
+.image-card {
+  border-radius: 15px;
   overflow: hidden;
-  position: relative;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  max-width: 800px; /* 设置与图片相同的最大宽度 */
-  width: 100%; /* 宽度100% */
-  margin: 0 auto;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
   transition: all 0.4s ease;
+  background: white;
 }
 
-.video-container:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+.image-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
 }
 
-.sampling-video {
+.sampling-image {
   width: 100%;
-  height: auto;
+  height: 250px;
   display: block;
-  background: #f8fafc;
-  min-height: 350px;
-}
-
-.video-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;
-}
-
-.video-caption::before {
-  content: "📹";
-  position: absolute;
-  left: 20px;
-  top: 50%;
-  transform: translateY(-50%);
+  object-fit: cover;
+  transition: transform 0.4s ease;
+  background: rgba(245, 249, 255, 0.4);
 }
 
-/* 装饰元素 */
-.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;
+.image-card:hover .sampling-image {
+  transform: scale(1.05);
 }
 
-.decorative-element:nth-child(1) {
-  top: 10%;
-  left: 5%;
-  width: 80px;
-  height: 80px;
+.image-info {
+  padding: 20px;
 }
 
-.decorative-element:nth-child(2) {
-  bottom: 15%;
-  right: 8%;
-  width: 60px;
-  height: 60px;
+.image-info h3 {
+  color: #1a365d;
+  font-size: 1.25rem;
+  margin-top: 0;
+  margin-bottom: 10px;
 }
 
 /* 响应式设计 */
-@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,
-  .sampling-video {
-    min-height: 300px;
-  }
-  
-  .image-container,
-  .video-container {
-    max-width: 700px; /* 小屏幕上减小最大宽度 */
+@media (max-width: 1100px) {
+  .image-gallery {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
 @media (max-width: 768px) {
-  .sampling-process {
-    padding: 15px;
+  .image-gallery {
+    grid-template-columns: 1fr;
   }
   
-  .header-section h2 {
-    font-size: 1.6rem;
+  .section-container {
+    padding: 25px;
   }
   
-  p {
-    font-size: 1rem;
-    padding-left: 15px;
-  }
-  
-  .image-caption,
-  .video-caption {
-    font-size: 1rem;
-    padding: 12px;
+  .section-number {
+    width: 45px;
+    height: 45px;
+    font-size: 1.6rem;
   }
   
-  .sampling-image,
-  .sampling-video {
-    min-height: 250px;
+  h2 {
+    font-size: 1.7rem;
   }
   
-  .video-title {
-    font-size: 1.3rem;
+  .description-card {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
   }
   
-  .image-container,
-  .video-container {
-    max-width: 600px; /* 小屏幕上减小最大宽度 */
+  .icon {
+    margin-right: 0;
+    margin-bottom: 15px;
   }
 }
 
 @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;
+    padding: 20px;
   }
   
-  .image-caption,
-  .video-caption {
-    font-size: 0.9rem;
-    padding: 10px 15px 10px 35px;
+  .section-container {
+    padding: 20px;
   }
   
-  .image-caption::before,
-  .video-caption::before {
-    left: 10px;
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
   }
   
-  .sampling-image,
-  .sampling-video {
-    min-height: 200px;
+  .section-number {
+    margin-right: 0;
+    margin-bottom: 15px;
   }
   
-  .video-title {
-    font-size: 1.1rem;
+  h2 {
+    font-size: 1.6rem;
   }
   
-  .image-container,
-  .video-container {
-    max-width: 100%; /* 小屏幕上宽度100% */
+  .sampling-image {
+    height: 200px;
   }
 }
 </style>

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

@@ -1,119 +1,102 @@
 <template>
-  <div class="container">
-    <div class="gradient-card">
-      <div class="card-header">
-        <h1>秸秆移除输出通量计算结果</h1>
-        <p>{{ area }}地区作物秸秆移除Cd通量分析报告</p>
-      </div>
-
-      <div v-if="loading" class="loading-section">
-        <i class="fas fa-spinner fa-spin"></i> 正在加载数据...
-      </div>
-
-      <div v-if="error" class="error-section">
-        <i class="fas fa-exclamation-triangle"></i> {{ error }}
-      </div>
-
-       <div class="visualization-section">
-          <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>
-
-      <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 class="agricultural-input-management">
+    <!-- 直接展示结果页面 -->
+    <div class="page-container">
+      <el-card class="results-card">
+        <div class="results-content">
+          <!-- 地图区域 -->
+          <div class="map-section">
+            <h3>秸秆移除Cd通量分布图</h3>
+            <div v-if="loading" class="loading-container">
+              <el-icon class="loading-icon"><Loading /></el-icon>
+              <span>数据加载中...</span>
             </div>
-            <div class="stat-card">
-              <div class="stat-value">{{ statistics.max_flux.toFixed(2) }} g/ha/a</div>
-              <div class="stat-label">最大通量</div>
+            <div v-else-if="error" class="error-container">
+              <el-icon class="error-icon"><Warning /></el-icon>
+              <span>{{ error }}</span>
             </div>
-            <div class="stat-card">
-              <div class="stat-value">{{ statistics.min_flux.toFixed(2) }} g/ha/a</div>
-              <div class="stat-label">最小通量</div>
+            <div v-else class="image-container">
+              <img :src="visualizationImage" class="result-image"></img>
             </div>
           </div>
-        </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="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 class="stats-area">
+            <h3>秸秆移除Cd通量统计信息</h3>
+            <div class="model-info">
+              <el-tag type="info">秸秆移除Cd通量模型</el-tag>
+              <span class="update-time">
+                最后更新: {{ reportTime }}
+              </span>
+            </div>
+            
+            <div v-if="loading" class="loading-container">
+              <el-icon class="loading-icon"><Loading /></el-icon>
+              <span>统计数据加载中...</span>
+            </div>
+            
+            <div v-else-if="error" class="error-container">
+              <el-icon class="error-icon"><Warning /></el-icon>
+              <span>{{ error }}</span>
+            </div>
+            
+            <div v-else class="stats-container">
+              <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(4) }}</div>
+                  <div class="stat-label">平均通量</div>
+                </div>
+                <div class="stat-card">
+                  <div class="stat-value">{{ statistics.max_flux.toFixed(4) }}</div>
+                  <div class="stat-label">最大通量</div>
+                </div>
+                <div class="stat-card">
+                  <div class="stat-value">{{ statistics.min_flux.toFixed(4) }}</div>
+                  <div class="stat-label">最小通量</div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-
-        <div class="card-footer">
-          <p><i class="fas fa-clock"></i> 报告生成时间: {{ reportTime }}</p>
-        </div>
-      </template>
+      </el-card>
     </div>
   </div>
 </template>
 
 <script>
-import { ref, computed, onMounted } from 'vue';
-import { ElTable, ElTableColumn, ElPagination } from 'element-plus';
-import { api8000 } from '@/utils/request';  // 导入api8000
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { 
+  ElButton, 
+  ElCard, 
+  ElTable, 
+  ElTableColumn,
+  ElTag,
+  ElIcon,
+  ElPagination
+} from 'element-plus';
+import { 
+  Loading, 
+  Picture, 
+  Warning 
+} from '@element-plus/icons-vue';
+import { api8000 } from '@/utils/request';
 
 export default {
-  name: 'StrawRemovalResult',
   components: {
+    ElButton,
+    ElCard,
     ElTable,
     ElTableColumn,
-    ElPagination
+    ElTag,
+    ElIcon,
+    ElPagination,
+    Loading,
+    Picture,
+    Warning
   },
   props: {
     area: {
@@ -161,6 +144,9 @@ export default {
     // 从API获取数据
     const fetchData = async () => {
       try {
+        loading.value = true;
+        error.value = null;
+        
         // 获取计算结果数据
         const dataResponse = await api8000.get(
           `/api/cd-flux-removal/straw-removal?area=${encodeURIComponent(props.area)}`
@@ -177,14 +163,18 @@ export default {
         unit.value = dataResponse.data.data.unit;
         
         // 获取可视化图片
-        const imageResponse = await api8000.get(
-          `/api/cd-flux-removal/straw-removal/visualize?area=${encodeURIComponent(props.area)}&level=county`,
-          { responseType: 'blob' }
-        );
-        
-        // 创建图片Blob URL
-        const blob = new Blob([imageResponse.data], { type: imageResponse.headers['content-type'] });
-        visualizationImage.value = URL.createObjectURL(blob);
+        try {
+          const imageResponse = await api8000.get(
+            `/api/cd-flux-removal/straw-removal/visualize?area=${encodeURIComponent(props.area)}&level=county`,
+            { responseType: 'blob' }
+          );
+          
+          // 创建图片Blob URL
+          const blob = new Blob([imageResponse.data], { type: imageResponse.headers['content-type'] });
+          visualizationImage.value = URL.createObjectURL(blob);
+        } catch (imgErr) {
+          console.error('图片加载错误:', imgErr);
+        }
         
         // 设置报告时间
         reportTime.value = new Date().toLocaleString('zh-CN', {
@@ -208,6 +198,12 @@ export default {
       fetchData();
     });
     
+    onBeforeUnmount(() => {
+      if (visualizationImage.value) {
+        URL.revokeObjectURL(visualizationImage.value);
+      }
+    });
+    
     return {
       results,
       statistics,
@@ -226,77 +222,99 @@ export default {
   }
 };
 </script>
+
 <style scoped>
-/* 保留您原有的样式，只添加Element UI的自定义样式 */
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
+/* 整体布局优化 - 与农业投入品保持一致 */
+.agricultural-input-management {
   padding: 20px;
-  background: linear-gradient(135deg, #e6f7ff, #b3e0ff);
+  background: linear-gradient(
+    135deg, 
+    rgba(230, 247, 255, 0.7) 0%, 
+    rgba(240, 248, 255, 0.7) 100%
+  );
+  min-height: 100vh;
+  box-sizing: border-box;
 }
 
-.gradient-card {
-  background: linear-gradient(135deg,
-      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;
+.page-container {
   width: 100%;
-  max-width: 1000px;
-  backdrop-filter: blur(8px);
+  height: 100%;
+}
+
+/* 工具栏样式 */
+.toolbar {
+  display: flex;
+  justify-content: flex-start;
+  gap: 15px;
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+}
+
+.custom-button {
+  background-color: #47C3B9 !important;
+  color: #DCFFFA !important;
   border: none;
+  border-radius: 155px;
+  padding: 10px 20px;
+  font-weight: bold;
   display: flex;
-  flex-direction: column;
-  overflow: hidden;
+  align-items: center;
 }
 
-.card-header {
-  text-align: center;
-  margin-bottom: 30px;
-  border-bottom: 2px solid rgba(0, 96, 100, 0.1);
-  padding-bottom: 20px;
+/* 结果卡片样式 */
+.results-card {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+  height: 100%;
+  box-sizing: border-box;
 }
 
-.card-header h1 {
-  font-size: 2.2rem;
-  color: #006064;
-  margin-bottom: 10px;
-  font-weight: 700;
+.results-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
-.card-header p {
-  font-size: 1.2rem;
-  color: #00838f;
-  opacity: 0.9;
+.map-section, .stats-area {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 
-.loading-section, .error-section {
-  text-align: center;
-  padding: 40px;
-  font-size: 1.4rem;
-  color: #006064;
+h3 {
+  margin-bottom: 15px;
+  color: #333;
+  font-size: 18px;
+  font-weight: 600;
 }
 
-.loading-section i {
-  margin-right: 15px;
-  font-size: 1.8rem;
-  color: #00838f;
+.model-info {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+ margin-bottom: 15px;
 }
 
-.error-section i {
-  margin-right: 15px;
-  font-size: 1.8rem;
-  color: #d32f2f;
+.update-time {
+  color: #666;
+  font-size: 14px;
 }
 
+/* 统计卡片样式 */
 .stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 20px;
-  margin-top: 20px;
+  margin-bottom: 20px;
 }
 
 .stat-card {
@@ -305,7 +323,7 @@ export default {
   padding: 20px;
   text-align: center;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
-  transition: transform 0.3s ease;
+  transition: all 0.3s ease;
 }
 
 .stat-card:hover {
@@ -325,90 +343,104 @@ export default {
   color: #00838f;
 }
 
-.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);
-}
-
-.visualization-section h2,
-.data-section h2,
-.formula-section h2,
-.statistics-section h2 {
-  font-size: 1.6rem;
-  color: #006064;
-  margin-bottom: 20px;
+/* 图片容器限定大小 */
+.image-container {
+  width: 100%;
+  height: 400px;
   display: flex;
+  justify-content: center;
   align-items: center;
-  gap: 10px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 .result-image {
   max-width: 100%;
-  max-height: 500px;
-  border-radius: 10px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+  max-height: 100%;
+  object-fit: contain;
 }
 
-.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;
-  margin: 20px 0;
-  border: 1px dashed #00838f;
-  color: #006064;
+.loading-container, .error-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  gap: 15px;
 }
 
-.unit-note {
-  text-align: center;
-  font-size: 1.1rem;
-  color: #00838f;
+.loading-container {
+  color: #47C3B9;
+}
+
+.error-container {
+  color: #F56C6C;
+}
+
+.loading-icon {
+  font-size: 36px;
+  margin-bottom: 10px;
+  animation: rotate 2s linear infinite;
+}
+
+.error-icon {
+  font-size: 36px;
+  margin-bottom: 10px;
+}
+
+.no-data {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  height: 300px;
+  color: #999;
+  font-size: 16px;
 }
 
-.card-footer {
-  text-align: center;
-  font-size: 1rem;
-  color: #00838f;
-  padding-top: 20px;
-  border-top: 1px solid rgba(0, 150, 136, 0.2);
+.no-data .el-icon {
+  font-size: 48px;
+  margin-bottom: 10px;
+}
+
+.details-table {
+  margin-top: 20px;
+}
+
+.custom-pagination {
+  margin-top: 20px;
   display: flex;
-  align-items: center;
   justify-content: center;
-  gap: 10px;
+}
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-  .stats-grid {
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
   }
   
-  .card-header h1 {
-    font-size: 1.8rem;
+  .stats-grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }
   
-  .visualization-section h2,
-  .data-section h2,
-  .formula-section h2,
-  .statistics-section h2 {
-    font-size: 1.4rem;
+  .image-container {
+    height: 300px;
   }
 }
 
 @media (max-width: 480px) {
-  .gradient-card {
+  .agricultural-input-management {
+    padding: 10px;
+  }
+  
+  .results-card {
     padding: 15px;
   }
   
@@ -420,44 +452,12 @@ export default {
     padding: 15px;
   }
   
+  .image-container {
+    height: 250px;
+  }
+  
   .stat-value {
     font-size: 1.5rem;
   }
 }
-
-.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,34 +1,45 @@
 <template>
   <div class="sampling-process">
-    <div class="header-section">
-      <h2>地下渗漏</h2>
-    </div>
-    
-    <div class="content-section">
-      <div class="text-content">
+    <!-- 地下渗漏部分 -->
+    <div class="section-container">
+      <div class="section-header">
+        <div class="section-number">1</div>
+        <h2>地下渗漏</h2>
+      </div>
+      
+      <div class="section-content">
+        <div class="description-card">
+          <div class="icon">💧</div>
+          <div class="description-text">
             <p>
               地下渗漏是农田土壤重金属输出的重要途径。
             </p>
-             <p>
+            <p>
               如图所示，土壤中的重金属在降水和重力作用下，通过土壤孔隙向下渗透，最终进入地下水系统。
             </p>
-      </div>
-       <div class="image-row">
-          <div class="image-container">
-            <el-image :src="image3" alt="地下渗漏是重金属迁移的重要途径" class="sampling-image"></el-image>
           </div>
         </div>
-         <!-- 新增视频区域 -->
-          <div class="video-section">
-            <h3 class="video-title">地下渗漏过程视频演示</h3>
-            <div class="video-container">
-              <video controls class="sampling-video">
-                <source src="@/assets/videos/地下渗漏.mp4" type="video/mp4">
-                您的浏览器不支持HTML5视频播放。
-              </video>
+        
+        <div class="image-gallery">
+          <div class="image-card">
+            <el-image :src="image3" alt="地下渗漏是重金属迁移的重要途径" class="sampling-image"></el-image>
+            <div class="image-info">
+              <h3>地下渗漏过程</h3>
+            </div>
+          </div>
+          
+          <div class="image-card">
+            <video controls class="sampling-image">
+              <source src="@/assets/videos/地下渗漏.mp4" type="video/mp4">
+              您的浏览器不支持HTML5视频播放。
+            </video>
+            <div class="image-info">
+              <h3>地下渗漏视频演示</h3>
             </div>
           </div>
         </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -45,11 +56,10 @@ export default {
 <style scoped>
 .sampling-process {
   padding: 30px;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
+  background: linear-gradient(135deg, rgba(230, 247, 255, 0.85) 0%, rgba(240, 248, 255, 0.85) 100%);
   position: relative;
   overflow: hidden;
-  border-radius: 16px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .sampling-process::before {
@@ -60,351 +70,193 @@ 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.15;
+  opacity: 0.12;
   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);
+.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;
 }
 
-.content-section:hover {
+.section-container: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;
+  box-shadow: 0 12px 35px rgba(0, 60, 120, 0.15);
 }
 
-p {
-  text-indent: 2em;
-  margin: 20px 0;
-  line-height: 1.8;
-  color: #2d3748;
-  font-size: 1.1rem;
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 25px;
   position: relative;
-  padding-left: 20px;
-}
-
-p::before {
-  content: "•";
-  position: absolute;
-  left: 0;
-  top: 0;
-  color: #3a9fd3;
-  font-size: 1.5rem;
-  line-height: 1.8;
+  padding-bottom: 15px;
+  border-bottom: 2px solid rgba(58, 160, 207, 0.25);
 }
 
-/* 图片区域 */
-.image-row {
+.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;
-  margin-bottom: 30px;
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin-right: 20px;
+  box-shadow: 0 5px 12px rgba(74, 158, 247, 0.25);
 }
 
-.image-container {
-  border-radius: 12px;
-  overflow: hidden;
-  position: relative;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  max-width: 800px; /* 设置最大宽度 */
-  width: 100%; /* 宽度100% */
-  margin: 0 auto;
-  transition: all 0.4s ease;
+h2 {
+  color: #1a365d;
+  font-size: 1.9rem;
+  margin: 0;
+  font-weight: 650;
+  letter-spacing: 0.5px;
 }
 
-.image-container:hover {
-  transform: scale(1.01);
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+.section-content {
+  padding: 0 10px;
 }
 
-.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;
+.description-card {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 30px;
+  padding: 20px;
+  background: rgba(235, 245, 255, 0.6);
+  border-radius: 15px;
 }
 
-.image-container:hover .sampling-image {
-  transform: scale(1.02);
+.icon {
+  font-size: 2.5rem;
+  margin-right: 25px;
+  color: #3a9fd3;
 }
 
-.image-caption {
-  text-align: center;
+.description-text p {
   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));
+  line-height: 1.8;
+  color: #2d3748;
   margin: 0;
-  border-top: 1px dashed #cbd5e0;
-  position: relative;
-}
-
-.image-caption::before {
-  content: "📌";
-  position: absolute;
-  left: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-/* 视频区域 */
-.video-section {
-  margin-top: 40px;
-  padding-top: 30px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.video-title {
-  text-align: center;
-  color: #1a365d;
-  font-size: 1.5rem;
-  margin-bottom: 20px;
-  position: relative;
-  padding-bottom: 10px;
 }
 
-.video-title::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 60px;
-  height: 3px;
-  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
-  border-radius: 2px;
+/* 图片画廊样式 */
+.image-gallery {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 25px;
+  margin-top: 20px;
 }
 
-.video-container {
-  border-radius: 12px;
+.image-card {
+  border-radius: 15px;
   overflow: hidden;
-  position: relative;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  max-width: 800px; /* 设置与图片相同的最大宽度 */
-  width: 100%; /* 宽度100% */
-  margin: 0 auto;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
   transition: all 0.4s ease;
+  background: white;
 }
 
-.video-container:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+.image-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
 }
 
-.sampling-video {
+.sampling-image {
   width: 100%;
-  height: auto;
+  height: 250px;
   display: block;
-  background: #f8fafc;
-  min-height: 350px;
-}
-
-.video-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;
-}
-
-.video-caption::before {
-  content: "📹";
-  position: absolute;
-  left: 20px;
-  top: 50%;
-  transform: translateY(-50%);
+  object-fit: cover;
+  transition: transform 0.4s ease;
+  background: rgba(245, 249, 255, 0.4);
 }
 
-/* 装饰元素 */
-.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;
+.image-card:hover .sampling-image {
+  transform: scale(1.05);
 }
 
-.decorative-element:nth-child(1) {
-  top: 10%;
-  left: 5%;
-  width: 80px;
-  height: 80px;
+.image-info {
+  padding: 20px;
 }
 
-.decorative-element:nth-child(2) {
-  bottom: 15%;
-  right: 8%;
-  width: 60px;
-  height: 60px;
+.image-info h3 {
+  color: #1a365d;
+  font-size: 1.25rem;
+  margin-top: 0;
+  margin-bottom: 10px;
 }
 
 /* 响应式设计 */
-@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,
-  .sampling-video {
-    min-height: 300px;
-  }
-  
-  .image-container,
-  .video-container {
-    max-width: 700px; /* 小屏幕上减小最大宽度 */
+@media (max-width: 1100px) {
+  .image-gallery {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
 @media (max-width: 768px) {
-  .sampling-process {
-    padding: 15px;
+  .image-gallery {
+    grid-template-columns: 1fr;
   }
   
-  .header-section h2 {
-    font-size: 1.6rem;
-  }
-  
-  p {
-    font-size: 1rem;
-    padding-left: 15px;
+  .section-container {
+    padding: 25px;
   }
   
-  .image-caption,
-  .video-caption {
-    font-size: 1rem;
-    padding: 12px;
+  .section-number {
+    width: 45px;
+    height: 45px;
+    font-size: 1.6rem;
   }
   
-  .sampling-image,
-  .sampling-video {
-    min-height: 250px;
+  h2 {
+    font-size: 1.7rem;
   }
   
-  .video-title {
-    font-size: 1.3rem;
+  .description-card {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
   }
   
-  .image-container,
-  .video-container {
-    max-width: 600px; /* 小屏幕上减小最大宽度 */
+  .icon {
+    margin-right: 0;
+    margin-bottom: 15px;
   }
 }
 
 @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;
+    padding: 20px;
   }
   
-  .image-caption,
-  .video-caption {
-    font-size: 0.9rem;
-    padding: 10px 15px 10px 35px;
+  .section-container {
+    padding: 20px;
   }
   
-  .image-caption::before,
-  .video-caption::before {
-    left: 10px;
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
   }
   
-  .sampling-image,
-  .sampling-video {
-    min-height: 200px;
+  .section-number {
+    margin-right: 0;
+    margin-bottom: 15px;
   }
   
-  .video-title {
-    font-size: 1.1rem;
+  h2 {
+    font-size: 1.6rem;
   }
   
-  .image-container,
-  .video-container {
-    max-width: 100%; /* 小屏幕上宽度100% */
+  .sampling-image {
+    height: 200px;
   }
 }
 </style>

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

@@ -1,47 +1,48 @@
 <template>
-  <div class="leakage-flux-container">
-    <div class="map-title">地下渗漏Cd通量分布图</div>
-    <div class="map-content">
-      <div class="map-image-container">
-        <!-- 加载状态 -->
-        <div v-if="isLoading" class="loading-overlay">
-          <div class="spinner"></div>
-          <p>地图加载中...</p>
+  <div class="agricultural-input-management">
+    <div class="page-container">
+      <el-card class="results-card">
+        <div class="results-content">
+          <!-- 地图区域 -->
+          <div class="map-section">
+            <h3>地下渗漏Cd通量分布图</h3>
+            <div v-if="isLoading" class="loading-container">
+              <el-icon class="loading-icon"><Loading /></el-icon>
+              <span>数据加载中...</span>
+            </div>
+            <div v-else-if="isError" class="error-container">
+              <el-icon class="error-icon"><Warning /></el-icon>
+              <span>{{ errorMessage }}</span>
+              <el-button class="retry-btn" @click="fetchMap">
+                <el-icon><Refresh /></el-icon> 重新加载
+              </el-button>
+            </div>
+            <div v-else class="image-container">
+              <img :src="mapImageUrl" class="result-image"></img>
+              </div>
+          </div>
         </div>
-        
-        <!-- 错误状态 -->
-        <div v-if="isError" class="error-overlay">
-          <i class="fas fa-exclamation-triangle"></i>
-          <p>{{ errorMessage }}</p>
-          <button class="retry-btn" @click="fetchMap">
-            <i class="fas fa-redo"></i> 重新加载
-          </button>
-        </div>
-        
-        <!-- 地图图片 -->
-        <img 
-          v-if="mapImageUrl"
-          :src="mapImageUrl" 
-          alt="地下渗漏Cd通量分布图" 
-          class="map-image"
-          @load="handleImageLoad"
-        >
-        
-        <!-- 默认占位图 -->
-        <div v-else class="placeholder">
-          <i class="fas fa-map"></i>
-          <p>准备加载地下渗漏Cd通量分布图</p>
-        </div>
-      </div>
+      </el-card>
     </div>
   </div>
 </template>
 
 <script>
-import { api8000 } from '@/utils/request';  // 导入api8000
+import { ElButton, ElCard, ElIcon } from 'element-plus';
+import { Loading, Warning, Picture, Refresh } from '@element-plus/icons-vue';
+import { api8000 } from '@/utils/request';
 
 export default {
   name: 'LeakageFluxMap',
+  components: {
+    ElButton,
+    ElCard,
+    ElIcon,
+    Loading,
+    Warning,
+    Picture,
+    Refresh
+  },
   data() {
     return {
       mapImageUrl: null,
@@ -51,8 +52,6 @@ export default {
       area: '乐昌市',
       level: 'county',
       colormap: 'blues',
-      avgFlux: '0.023',
-      lastUpdated: '2025年8月21日',
     };
   },
   mounted() {
@@ -64,7 +63,6 @@ export default {
       this.isError = false;
       
       try {
-        // 发送API请求
         const response = await api8000.get(
           `/api/cd-flux-removal/groundwater_leaching/visualize`,
           {
@@ -73,11 +71,10 @@ export default {
               level: this.level,
               colormap: this.colormap
             },
-            responseType: 'blob' // 接收二进制数据
+            responseType: 'blob'
           }
         );
         
-        // 创建图片URL
         const blob = new Blob([response.data], { type: response.headers['content-type'] });
         this.mapImageUrl = URL.createObjectURL(blob);
         
@@ -90,7 +87,6 @@ export default {
       }
     },
     handleImageLoad() {
-      // 图片加载完成后的处理
       console.log('地图图片加载完成');
     }
   }
@@ -98,251 +94,133 @@ export default {
 </script>
 
 <style scoped>
-.leakage-flux-container {
+
+.page-container {
   width: 100%;
-  max-width: 900px;
-  margin: 0 auto;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
-  overflow: hidden;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  height: 100%;
 }
-
-.map-title {
-  background: linear-gradient(to right, #1a5fad, #2c8fd1);
-  color: white;
-  text-align: center;
-  padding: 18px 0;
-  font-size: 1.8rem;
-  font-weight: 600;
-  letter-spacing: 1px;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+/* 结果卡片样式 */
+.results-card {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+  height: 100%;
+  box-sizing: border-box;
 }
 
-.map-content {
+.results-content {
+  height: 100%;
   display: flex;
   flex-direction: column;
+}
+
+.map-section {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
   padding: 20px;
-  background: #f8fafc;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 
-.map-image-container {
-  flex: 1;
+h3 {
+  margin-bottom: 15px;
+  color: #333;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+/* 图片容器限定大小 */
+.image-container {
+  width: 100%;
+  height: 500px;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 10px;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
-  margin-bottom: 20px;
-  min-height: 600px;
-  position: relative;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
-.map-image {
+.result-image {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
-  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 {
+.result-image:hover {
   transform: scale(1.02);
 }
 
-/* 修改后的map-info样式 - 居中显示 */
-.map-info {
-  display: flex;
-  justify-content: center; /* 水平居中 */
-  align-items: center; /* 垂直居中 */
-  background: rgba(26, 95, 173, 0.05);
-  border-radius: 10px;
-  padding: 20px;
-}
-
-.info-item {
-  display: flex;
-  align-items: center;
-  padding: 10px 20px; /* 增加左右内边距 */
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  width: fit-content; /* 使宽度适应内容 */
-}
-
-.info-item i {
-  font-size: 1.2rem;
-  color: #1a5fad;
-  margin-right: 10px;
-}
-
-.map-footer {
-  background: rgba(26, 95, 173, 0.1);
-  padding: 15px;
-  text-align: center;
-  font-size: 0.9rem;
-  color: #1a5fad;
-}
-
-/* 加载状态样式 */
-.loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+/* 加载和错误状态 */
+.loading-container, .error-container {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
-  background: rgba(255, 255, 255, 0.8);
-  z-index: 10;
-}
-
-.spinner {
-  width: 50px;
-  height: 50px;
-  border: 5px solid rgba(26, 95, 173, 0.2);
-  border-top: 5px solid #1a5fad;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 15px;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.loading-overlay p {
-  font-size: 1.2rem;
-  color: #1a5fad;
-  font-weight: 500;
-}
-
-/* 错误状态样式 */
-.error-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
   justify-content: center;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.9);
-  z-index: 10;
-  padding: 20px;
-  text-align: center;
+  height: 300px;
+  gap: 15px;
 }
 
-.error-overlay i {
-  font-size: 3rem;
-  color: #e74c3c;
-  margin-bottom: 15px;
+.loading-container {
+  color: #47C3B9;
 }
 
-.error-overlay p {
-  font-size: 1.2rem;
-  color: #333;
-  margin-bottom: 20px;
+.error-container {
+  color: #F56C6C;
 }
 
-.retry-btn {
-  background: #1a5fad;
-  color: white;
-  border: none;
-  border-radius: 30px;
-  padding: 10px 25px;
-  font-size: 1rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  transition: background 0.3s;
+.loading-icon {
+  font-size: 36px;
+  margin-bottom: 10px;
+  animation: rotate 2s linear infinite;
 }
 
-.retry-btn:hover {
-  background: #154a8a;
+.error-icon {
+  font-size: 36px;
+  margin-bottom: 10px;
 }
 
-.retry-btn i {
-  font-size: 1rem;
-  margin-right: 8px;
-  color: white;
+.retry-btn {
+  margin-top: 15px;
 }
 
-/* 占位符样式 */
-.placeholder {
+.no-data {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: #1a5fad;
+  height: 300px;
+  color: #999;
+  font-size: 16px;
 }
 
-.placeholder i {
-  font-size: 4rem;
-  margin-bottom: 20px;
+.no-data .el-icon {
+  font-size: 48px;
+  margin-bottom: 10px;
 }
 
-.placeholder p {
-  font-size: 1.2rem;
-  font-weight: 500;
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
+/* 响应式设计 */
 @media (max-width: 768px) {
-  .map-title {
-    font-size: 1.5rem;
-    padding: 15px 0;
-  }
-  
-  .map-image-container {
-    min-height: 450px;
-  }
-  
-  .map-image {
-    height: 450px;
-  }
-  
-  /* 移动端调整信息项样式 */
-  .map-info {
-    padding: 15px;
-  }
-  
-  .info-item {
-    padding: 10px 15px;
+  .image-container {
+    height: 400px;
   }
 }
 
 @media (max-width: 480px) {
-  .map-title {
-    font-size: 1.3rem;
-  }
-  
-  .map-image-container {
-    min-height: 350px;
-  }
-  
-  .map-image {
-    height: 350px;
-  }
-  
-  .info-item {
-    font-size: 0.9rem;
-    padding: 8px 12px;
+  .agricultural-input-management {
+    padding: 10px;
   }
   
-  .info-item i {
-    font-size: 1rem;
+  .image-container {
+    height: 300px;
   }
 }
 </style>

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

@@ -1,33 +1,45 @@
 <template>
   <div class="sampling-process">
-     <div class="header-section"> 
-      <h2>地表径流</h2>
-    </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="image4" alt="地表径流是重金属迁移的主要途径" class="sampling-image"></el-image>
+    <!-- 地表径流部分 -->
+    <div class="section-container">
+      <div class="section-header">
+        <div class="section-number">1</div>
+        <h2>地表径流</h2>
       </div>
-    </div>
-    <!-- 新增视频区域 -->
-      <div class="video-section">
-        <h3 class="video-title">地表径流过程视频演示</h3>
-        <div class="video-container">
-          <video controls class="sampling-video">
-            <source src="@/assets/videos/地表径流.mp4" type="video/mp4">
-            您的浏览器不支持HTML5视频播放。
-          </video>
+      
+      <div class="section-content">
+        <div class="description-card">
+          <div class="icon">🌊</div>
+          <div class="description-text">
+            <p>
+              地表径流是重力作用下的降水沿地表流动并汇入水体的过程，也是土壤重金属输出的主要途径。研究显示，地表径流中重金属浓度输出量与土壤中重金属溶解态和颗粒态的分配情况有关。
+            </p>
+            <p>
+              如图所示，降水落在农田表面后，在重力作用下沿地表流动，形成地表径流。土壤中的重金属随着地表径流一起被冲刷并汇入水体，最终在河流或湖泊中沉积。
+            </p>
+          </div>
+        </div>
+        
+        <div class="image-gallery">
+          <div class="image-card">
+            <el-image :src="image4" alt="地表径流是重金属迁移的主要途径" class="sampling-image"></el-image>
+            <div class="image-info">
+              <h3>地表径流过程</h3>
+            </div>
+          </div>
+          
+          <div class="image-card">
+            <video controls class="sampling-image">
+              <source src="@/assets/videos/地表径流.mp4" type="video/mp4">
+              您的浏览器不支持HTML5视频播放。
+            </video>
+            <div class="image-info">
+              <h3>地表径流视频演示</h3>
+            </div>
+          </div>
         </div>
       </div>
-       </div>
+    </div>
   </div>
 </template>
 
@@ -35,7 +47,6 @@
 export default {
   data() {
     return {
-    
       image4: 'https://hunyuan-plugin-1258344706.cos.ap-nanjing.myqcloud.com/pdf_youtu/img/baf4078408e6b4dee9eb96875aac3573-image.png'
     };
   }
@@ -45,11 +56,10 @@ export default {
 <style scoped>
 .sampling-process {
   padding: 30px;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
+  background: linear-gradient(135deg, rgba(230, 247, 255, 0.85) 0%, rgba(240, 248, 255, 0.85) 100%);
   position: relative;
   overflow: hidden;
-  border-radius: 16px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .sampling-process::before {
@@ -60,351 +70,193 @@ 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.15;
+  opacity: 0.12;
   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);
+.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;
 }
 
-.content-section:hover {
+.section-container:hover {
   transform: translateY(-5px);
-  box-shadow: 0 8px 25px rgba(极简版0, 0, 0, 0.15);
-  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 12px 35px rgba(0, 60, 120, 0.15);
 }
 
-.text-content {
-  margin-bottom: 30px;
-}
-
-p {
-  text-indent: 2em;
-  margin: 20px 0;
-  line-height: 1.8;
-  color: #2d3748;
-  font-size: 1.1rem;
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 25px;
   position: relative;
-  padding-left: 20px;
-}
-
-p::before {
-  content: "•";
-  position: absolute;
-  left: 0;
-  top: 0;
-  color: #3a9fd3;
-  font-size: 1.5rem;
-  line-height: 1.8;
+  padding-bottom: 15px;
+  border-bottom: 2px solid rgba(58, 160, 207, 0.25);
 }
 
-/* 图片区域 */
-.image-row {
+.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;
-  margin-bottom: 30px;
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin-right: 20px;
+  box-shadow: 0 5px 12px rgba(74, 158, 247, 0.25);
 }
 
-.image-container {
-  border-radius: 12px;
-  overflow: hidden;
-  position: relative;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  max-width: 800px; /* 设置最大宽度 */
-  width: 100%; /* 宽度100% */
-  margin: 0 auto;
-  transition: all 0.4s ease;
+h2 {
+  color: #1a365d;
+  font-size: 1.9rem;
+  margin: 0;
+  font-weight: 650;
+  letter-spacing: 0.5px;
 }
 
-.image-container:hover {
-  transform: scale(1.01);
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+.section-content {
+  padding: 0 10px;
 }
 
-.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;
+.description-card {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 30px;
+  padding: 20px;
+  background: rgba(235, 245, 255, 0.6);
+  border-radius: 15px;
 }
 
-.image-container:hover .sampling-image {
-  transform: scale(1.02);
+.icon {
+  font-size: 2.5rem;
+  margin-right: 25px;
+  color: #3a9fd3;
 }
 
-.image-caption {
-  text-align: center;
+.description-text p {
   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));
+  line-height: 1.8;
+  color: #2d3748;
   margin: 0;
-  border-top: 1px dashed #cbd5e0;
-  position: relative;
 }
 
-.image-caption::before {
-  content: "📌";
-  position: absolute;
-  left: 20px;
-  top: 50%;
-  transform: translateY(-50%);
+/* 图片画廊样式 */
+.image-gallery {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 25px;
+  margin-top: 20px;
 }
 
-/* 视频区域 */
-.video-section {
-  margin-top: 40px;
-  padding-top: 30px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.video-title {
-  text-align: center;
-  color: #1a365d;
-  font-size: 1.5rem;
-  margin-bottom: 20px;
-  position: relative;
-  padding-bottom: 10px;
-}
-
-.video-title::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 60px;
-  height: 3px;
-  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
-  border-radius: 2px;
-}
-
-.video-container {
-  border-radius: 12px;
+.image-card {
+  border-radius: 15px;
   overflow: hidden;
-  position: relative;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  max-width: 800px; /* 设置与图片相同的最大宽度 */
-  width: 100%; /* 宽度100% */
-  margin: 0 auto;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
   transition: all 0.4s ease;
+  background: white;
 }
 
-.video-container:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+.image-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
 }
 
-.sampling-video {
+.sampling-image {
   width: 100%;
-  height: auto;
+  height: 250px;
   display: block;
-  background: #f8fafc;
-  min-height: 350px;
-}
-
-.video-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;
-}
-
-.video-caption::before {
-  content: "📹";
-  position: absolute;
-  left: 20px;
-  top: 50%;
-  transform: translateY(-50%);
+  object-fit: cover;
+  transition: transform 0.4s ease;
+  background: rgba(245, 249, 255, 0.4);
 }
 
-/* 装饰元素 */
-.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;
+.image-card:hover .sampling-image {
+  transform: scale(1.05);
 }
 
-.decorative-element:nth-child(1) {
-  top: 10%;
-  left: 5%;
-  width: 80px;
-  height: 80px;
+.image-info {
+  padding: 20px;
 }
 
-.decorative-element:nth-child(2) {
-  bottom: 15%;
-  right: 8%;
-  width: 60px;
-  height: 60px;
+.image-info h3 {
+  color: #1a365d;
+  font-size: 1.25rem;
+  margin-top: 0;
+  margin-bottom: 10px;
 }
 
 /* 响应式设计 */
-@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,
-  .sampling-video {
-    min-height: 300px;
-  }
-  
-  .image-container,
-  .video-container {
-    max-width: 700px; /* 小屏幕上减小最大宽度 */
+@media (max-width: 1100px) {
+  .image-gallery {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
 @media (max-width: 768px) {
-  .sampling-process {
-    padding: 15px;
+  .image-gallery {
+    grid-template-columns: 1fr;
   }
   
-  .header-section h2 {
-    font-size: 1.6rem;
+  .section-container {
+    padding: 25px;
   }
   
-  p {
-    font-size: 1rem;
-    padding-left: 15px;
-  }
-  
-  .image-caption,
-  .video-caption {
-    font-size: 1rem;
-    padding: 12px;
+  .section-number {
+    width: 45px;
+    height: 45px;
+    font-size: 1.6rem;
   }
   
-  .sampling-image,
-  .sampling-video {
-    min-height: 250px;
+  h2 {
+    font-size: 1.7rem;
   }
   
-  .video-title {
-    font-size: 1.3rem;
+  .description-card {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
   }
   
-  .image-container,
-  .video-container {
-    max-width: 600px; /* 小屏幕上减小最大宽度 */
+  .icon {
+    margin-right: 0;
+    margin-bottom: 15px;
   }
 }
 
 @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;
+    padding: 20px;
   }
   
-  .image-caption,
-  .video-caption {
-    font-size: 0.9rem;
-    padding: 10px 15px 10px 35px;
+  .section-container {
+    padding: 20px;
   }
   
-  .image-caption::before,
-  .video-caption::before {
-    left: 10px;
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
   }
   
-  .sampling-image,
-  .sampling-video {
-    min-height: 200px;
+  .section-number {
+    margin-right: 0;
+    margin-bottom: 15px;
   }
   
-  .video-title {
-    font-size: 1.1rem;
+  h2 {
+    font-size: 1.6rem;
   }
   
-  .image-container,
-  .video-container {
-    max-width: 100%; /* 小屏幕上宽度100% */
+  .sampling-image {
+    height: 200px;
   }
 }
 </style>

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

@@ -1,47 +1,48 @@
 <template>
-  <div class="runoff-flux-container">
-    <div class="map-title">地表径流Cd通量分布图</div>
-    <div class="map-content">
-      <div class="map-image-container">
-        <!-- 加载状态 -->
-        <div v-if="isLoading" class="loading-overlay">
-          <div class="spinner"></div>
-          <p>地图加载中...</p>
+  <div class="agricultural-input-management">
+    <div class="page-container">
+      <el-card class="results-card">
+        <div class="results-content">
+          <!-- 地图区域 -->
+          <div class="map-section">
+            <h3>地下渗漏Cd通量分布图</h3>
+            <div v-if="isLoading" class="loading-container">
+              <el-icon class="loading-icon"><Loading /></el-icon>
+              <span>数据加载中...</span>
+            </div>
+            <div v-else-if="isError" class="error-container">
+              <el-icon class="error-icon"><Warning /></el-icon>
+              <span>{{ errorMessage }}</span>
+              <el-button class="retry-btn" @click="fetchMap">
+                <el-icon><Refresh /></el-icon> 重新加载
+              </el-button>
+            </div>
+            <div v-else class="image-container">
+              <img :src="mapImageUrl" class="result-image"></img>
+              </div>
+          </div>
         </div>
-        
-        <!-- 错误状态 -->
-        <div v-if="isError" class="error-overlay">
-          <i class="fas fa-exclamation-triangle"></i>
-          <p>{{ errorMessage }}</p>
-          <button class="retry-btn" @click="fetchMap">
-            <i class="fas fa-redo"></i> 重新加载
-          </button>
-        </div>
-        
-        <!-- 地图图片 -->
-        <img 
-          v-if="mapImageUrl"
-          :src="mapImageUrl" 
-          alt="地表径流Cd通量分布图" 
-          class="map-image"
-          @load="handleImageLoad"
-        >
-        
-        <!-- 默认占位图 -->
-        <div v-else class="placeholder">
-          <i class="fas fa-map"></i>
-          <p>准备加载地表径流Cd通量分布图</p>
-        </div>
-      </div>
+      </el-card>
     </div>
   </div>
 </template>
 
 <script>
-import { api8000 } from '@/utils/request';  // 导入api8000
+import { ElButton, ElCard, ElIcon } from 'element-plus';
+import { Loading, Warning, Picture, Refresh } from '@element-plus/icons-vue';
+import { api8000 } from '@/utils/request';
 
 export default {
-  name: 'RunoffFluxMap',
+  name: 'LeakageFluxMap',
+  components: {
+    ElButton,
+    ElCard,
+    ElIcon,
+    Loading,
+    Warning,
+    Picture,
+    Refresh
+  },
   data() {
     return {
       mapImageUrl: null,
@@ -51,7 +52,6 @@ export default {
       area: '乐昌市',
       level: 'county',
       colormap: 'blues',
-      lastUpdated: '2025年8月21日',
     };
   },
   mounted() {
@@ -63,7 +63,6 @@ export default {
       this.isError = false;
       
       try {
-        // 发送API请求
         const response = await api8000.get(
           `/api/cd-flux-removal/surface_runoff/visualize`,
           {
@@ -72,11 +71,10 @@ export default {
               level: this.level,
               colormap: this.colormap
             },
-            responseType: 'blob' // 接收二进制数据
+            responseType: 'blob'
           }
         );
         
-        // 创建图片URL
         const blob = new Blob([response.data], { type: response.headers['content-type'] });
         this.mapImageUrl = URL.createObjectURL(blob);
         
@@ -89,7 +87,6 @@ export default {
       }
     },
     handleImageLoad() {
-      // 图片加载完成后的处理
       console.log('地图图片加载完成');
     }
   }
@@ -97,251 +94,133 @@ export default {
 </script>
 
 <style scoped>
-.runoff-flux-container {
+
+.page-container {
   width: 100%;
-  max-width: 900px;
-  margin: 0 auto;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
-  overflow: hidden;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  height: 100%;
 }
-
-.map-title {
-  background: linear-gradient(to right, #1a5fad, #2c8fd1);
-  color: white;
-  text-align: center;
-  padding: 18px 0;
-  font-size: 1.8rem;
-  font-weight: 600;
-  letter-spacing: 1px;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+/* 结果卡片样式 */
+.results-card {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+  height: 100%;
+  box-sizing: border-box;
 }
 
-.map-content {
+.results-content {
+  height: 100%;
   display: flex;
   flex-direction: column;
+}
+
+.map-section {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
   padding: 20px;
-  background: #f8fafc;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 
-.map-image-container {
-  flex: 1;
+h3 {
+  margin-bottom: 15px;
+  color: #333;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+/* 图片容器限定大小 */
+.image-container {
+  width: 100%;
+  height: 500px;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 10px;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
-  margin-bottom: 20px;
-  min-height: 600px;
-  position: relative;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
-.map-image {
+.result-image {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
-  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 {
+.result-image:hover {
   transform: scale(1.02);
 }
 
-/* 修改后的map-info样式 - 居中显示 */
-.map-info {
-  display: flex;
-  justify-content: center; /* 水平居中 */
-  align-items: center; /* 垂直居中 */
-  background: rgba(26, 95, 173, 0.05);
-  border-radius: 10px;
-  padding: 20px;
-}
-
-.info-item {
-  display: flex;
-  align-items: center;
-  padding: 10px 20px; /* 增加左右内边距 */
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  width: fit-content; /* 使宽度适应内容 */
-}
-
-.info-item i {
-  font-size: 1.2rem;
-  color: #1a5fad;
-  margin-right: 10px;
-}
-
-.map-footer {
-  background: rgba(26, 95, 173, 0.1);
-  padding: 15px;
-  text-align: center;
-  font-size: 0.9rem;
-  color: #1a5fad;
-}
-
-/* 加载状态样式 */
-.loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+/* 加载和错误状态 */
+.loading-container, .error-container {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
-  background: rgba(255, 255, 255, 0.8);
-  z-index: 10;
-}
-
-.spinner {
-  width: 50px;
-  height: 50px;
-  border: 5px solid rgba(26, 95, 173, 0.2);
-  border-top: 5px solid #1a5fad;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 15px;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.loading-overlay p {
-  font-size: 1.2rem;
-  color: #1a5fad;
-  font-weight: 500;
-}
-
-/* 错误状态样式 */
-.error-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
   justify-content: center;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.9);
-  z-index: 10;
-  padding: 20px;
-  text-align: center;
+  height: 300px;
+  gap: 15px;
 }
 
-.error-overlay i {
-  font-size: 3rem;
-  color: #e74c3c;
-  margin-bottom: 15px;
+.loading-container {
+  color: #47C3B9;
 }
 
-.error-overlay p {
-  font-size: 1.2rem;
-  color: #333;
-  margin-bottom: 20px;
+.error-container {
+  color: #F56C6C;
 }
 
-.retry-btn {
-  background: #1a5fad;
-  color: white;
-  border: none;
-  border-radius: 30px;
-  padding: 10px 25px;
-  font-size: 1rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  transition: background 0.3s;
+.loading-icon {
+  font-size: 36px;
+  margin-bottom: 10px;
+  animation: rotate 2s linear infinite;
 }
 
-.retry-btn:hover {
-  background: #154a8a;
+.error-icon {
+  font-size: 36px;
+  margin-bottom: 10px;
 }
 
-.retry-btn i {
-  font-size: 1rem;
-  margin-right: 8px;
-  color: white;
+.retry-btn {
+  margin-top: 15px;
 }
 
-/* 占位符样式 */
-.placeholder {
+.no-data {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: #1a5fad;
+  height: 300px;
+  color: #999;
+  font-size: 16px;
 }
 
-.placeholder i {
-  font-size: 4rem;
-  margin-bottom: 20px;
+.no-data .el-icon {
+  font-size: 48px;
+  margin-bottom: 10px;
 }
 
-.placeholder p {
-  font-size: 1.2rem;
-  font-weight: 500;
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
+/* 响应式设计 */
 @media (max-width: 768px) {
-  .map-title {
-    font-size: 1.5rem;
-    padding: 15px 0;
-  }
-  
-  .map-image-container {
-    min-height: 450px;
-  }
-  
-  .map-image {
-    height: 450px;
-  }
-  
-  /* 移动端调整信息项样式 */
-  .map-info {
-    padding: 15px;
-  }
-  
-  .info-item {
-    padding: 10px 15px;
+  .image-container {
+    height: 400px;
   }
 }
 
 @media (max-width: 480px) {
-  .map-title {
-    font-size: 1.3rem;
-  }
-  
-  .map-image-container {
-    min-height: 350px;
-  }
-  
-  .map-image {
-    height: 350px;
-  }
-  
-  .info-item {
-    font-size: 0.9rem;
-    padding: 8px 12px;
+  .agricultural-input-management {
+    padding: 10px;
   }
   
-  .info-item i {
-    font-size: 1rem;
+  .image-container {
+    height: 300px;
   }
 }
 </style>