更新框架

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

@@ -1,126 +1,97 @@
 <template>
-  <div class="agricultural-input-container">
-    <!-- 第一部分：实地走访调查 -->
-    <div class="section">
-      <h2 class="section-title">
-        <i class="fas fa-tractor"></i>
-        1. 实地走访调查农业投入品使用情况
-      </h2>
-      <p class="section-content">
-        实地走访调查项目实施区域作物种植面积、氮肥、磷肥、钾肥、复合肥、商品有机肥、农药和农家肥等年均施用量。
-        后期方案可利用无人机光谱识别技术调查项目区内的种植结构，再根据具体种植结构详细调查施肥习惯（如水稻田、蔬菜地等）。
-      </p>
-
+  <div class="sampling-process">
+    <h2>1. 实地走访调查农业投入品使用情况:</h2>
+    <p>
+      实地走访调查项目实施区域作物种植面积、氮肥、磷肥、钾肥、复合肥、商品有机肥、农药和农家肥等年均施用量。
+      后期方案可利用无人机光谱识别技术调查项目区内的种植结构，再根据具体种植结构详细调查施肥习惯（如水稻田、蔬菜地等等）。
+    </p>
+
+    <div class="image-row">
       <div class="image-container">
-        <el-image :src="image1" alt="农业投入品使用情况" class="main-image"></el-image>
+        <el-image :src="image1" alt="农业投入品使用情况" class="sampling-image"></el-image>
+        <p class="image-caption">
+          图1 农业投入品使用情况
+        </p>
       </div>
-
-      <p class="image-caption">图1 农业投入品使用情况调查</p>
     </div>
 
-    <!-- 第二部分：样品采集 -->
-    <div class="section">
-      <h2 class="section-title">
-        <i class="fas fa-vial"></i>
-        2. 市面流通的农业投入品样品采集
-      </h2>
-      <p class="section-content">
-        调查农业投入品的使用情况，并按县区采集不同种类的农业投入品样品（氮肥、磷肥、钾肥、复合肥、商品有机肥、农家肥）以检测其中的重金属含量。
-      </p>
+    <h2>2.市面流通的农业投入品样品采集:</h2>
+    <p>
+      （1）合计采集市面上流通的及相关行业生产的各种农业投入品合计137份;<br>
+      （2）种类包含但不限于磷肥、钾肥、复合肥、叶面肥、常用农药、农家肥、地膜等;
+    </p>
 
-      <div class="subsection-container">
-        <div class="subsection">
-          <h3 class="subsection-title">
-            <i class="fas fa-1"></i>
-            ① 农业化肥采集
-          </h3>
-          <p>收集氮肥、磷肥、钾肥和复合肥样品，记录品牌、产地和使用量</p>
-        </div>
-        <div class="subsection">
-          <h3 class="subsection-title">
-            <i class="fas fa-2"></i>
-            ② 农药采集
-          </h3>
-          <p>采集常用农药样品，包括杀虫剂、除草剂和杀菌剂</p>
-        </div>
-        <div class="subsection">
-          <h3 class="subsection-title">
-            <i class="fas fa-3"></i>
-            ③ 农膜采集
-          </h3>
-          <p>收集不同材质和厚度的农膜样品，分析其成分</p>
-        </div>
-        <div class="subsection">
-          <h3 class="subsection-title">
-            <i class="fas fa-4"></i>
-            ④ 有机肥采集
-          </h3>
-          <p>采集商品有机肥和农家肥样品，分析其重金属含量</p>
-        </div>
+    <div class="image-row">
+      <div class="image-container">
+        <el-image :src="image2" alt="农业化肥采集" class="sampling-image"></el-image>
+        <p class="image-caption">
+          图2-1 农业化肥采集
+        </p>
       </div>
-
       <div class="image-container">
-        <el-image :src="image2" alt="农业投入品样品采集" class="main-image"></el-image>
+        <el-image :src="image3" alt="农药采集" class="sampling-image"></el-image>
+        <p class="image-caption">
+          图2-2 农药采集
+        </p>
+      </div>
+      <div class="image-container">
+        <el-image :src="image4" alt="农膜采集" class="sampling-image"></el-image>
+        <p class="image-caption">
+          图2-3 农膜采集
+        </p>
+      </div>
+      <div class="image-container">
+        <el-image :src="image5" alt="有机肥采集" class="sampling-image"></el-image>
+        <p class="image-caption">
+          图2-4 有机肥采集
+        </p>
       </div>
-
-      <p class="image-caption">图2 农业投入品样品采集流程</p>
     </div>
 
-    <!-- 第三部分：重金属测试 -->
-    <div class="section">
-      <h2 class="section-title">
-        <i class="fas fa-microscope"></i>
-        3. 采集农业投入品样品重金属含量测试
-      </h2>
+    <h2>3. 采集农业投入品样品重金属含量测试:</h2>
+    <p>
+      在完成农业投入品重金属输入通量计算公式的构建和优化后，最终的结果输出将包括各类农业投入品的重金属输入通量数据。
+      这些数据能够量化每种农业投入品在农田中所引入的重金属污染，并为后续的政策制定和管理提供依据。
+    </p>
 
-      <div class="subsection-container">
-        <div class="subsection">
-          <h3 class="subsection-title">
-            <i class="fas fa-chart-bar"></i>
-            各农业投入品测试结果
-          </h3>
-          <p>对采集样品进行重金属含量分析，包括铅、镉、汞、砷等元素</p>
-        </div>
-        <div class="subsection">
-          <h3 class="subsection-title">
-            <i class="fas fa-vial-circle-check"></i>
-            农业投入品镉含量
-          </h3>
-          <p>重点分析镉元素在各类农业投入品中的含量分布</p>
-        </div>
+    <div class="image-row">
+      <div class="image-container">
+        <el-image :src="image6" alt="各农业投入品测试结果" class="sampling-image"></el-image>
+        <p class="image-caption">图3-1 各农业投入品测试结果</p>
       </div>
-
-      <div class="image-row">
-        <div class="image-wrapper">
-          <el-image :src="image3" alt="各农业投入品测试结果" class="dual-image"></el-image>
-          <p class="figure-description">图3 各农业投入品测试结果</p>
-        </div>
-        <div class="image-wrapper">
-          <el-image :src="image4" alt="农业投入品镉含量" class="dual-image"></el-image>
-          <p class="figure-description">图4 农业投入品镉含量</p>
-        </div>
+      <div class="image-container">
+        <el-image :src="image7" alt="农业投入品镉含量" class="sampling-image"></el-image>
+        <p class="image-caption">图3-2 农业投入品镉含量</p>
       </div>
     </div>
 
-    <!-- 第四部分：输入通量计算 -->
-    <div class="section">
-      <h2 class="section-title">
-        <i class="fas fa-calculator"></i>
-        4. 农业投入品重金属输入通量计算方法
-      </h2>
-      <p class="section-content">
-        通过系统分析方法计算农业投入品中重金属的输入通量，评估其对土壤环境的影响。
-        输入通量计算考虑了投入品使用量、重金属含量及迁移转化系数等因素。
-      </p>
+    <h2>4. 农业投入品重金属输入通量计算方法:</h2>
+    <p>
+      通过农业投入品的施用数据与重金属检测结果，建立重金属输入通量计算公式，精确计算不同农业投入品在农田中所引入的重金属污染通量。
+      该阶段包括公式的初步构建、验证与校准，以及公式的持续优化。
+    </p>
 
-      <div class="image-row">
-        <div class="image-wrapper">
-          <el-image :src="image5" alt="农业投入品用量计算方法" class="paired-chart"></el-image>
-          <p class="figure-description">图5 农业投入品用量计算方法</p>
+    <div class="image-row">
+      <div class="image-container">
+        <el-image :src="image8" alt="农业投入品用量计算方法" class="sampling-image"></el-image>
+        <p class="image-caption">图4-1 农业投入品用量计算方法</p>
+        <div class="formula-text">
+          <p>
+            式中，Ni为农业投入品i的单位面积年施用量，单位：kg/ha/a；
+            Mi为农业投入品i年施用总量，单位：kg/a；
+            Ax为项目区域全年农作物总播种面积，单位：ha；
+          </p>
         </div>
-        <div class="image-wrapper">
-          <el-image :src="image6" alt="农业投入品重金属输入通量计算方法" class="paired-chart"></el-image>
-          <p class="figure-description">图6 农业投入品重金属输入通量计算方法</p>
+      </div>
+      <div class="image-container">
+        <el-image :src="image9" alt="农业投入品重金属输入通量计算方法" class="sampling-image"></el-image>
+        <p class="image-caption">图4-2 农业投入品重金属输入通量计算方法</p>
+        <div class="formula-text">
+          <p>
+            式中，Ff为单位面积农业投入品途径的重金属输入通量，g/ha/a；
+            Ni为农业投入品i的单位面积年施用量，kg/ha/a；
+            Cij为重金属j在农业投入品i中的含量，mg/kg。
+          </p>
         </div>
       </div>
     </div>
@@ -132,259 +103,135 @@ export default {
   data() {
     return {
       image1: '/农业投入品使用情况.png',
-      image2: '/农业投入品样品采集.png',
-      image3: '/各农业投入品测试结果.png',
-      image4: '/农业投入品镉含量.png',
-      image5: '/农业投入品用量计算方法.png',
-      image6: '/农业投入品重金属输入通量计算方法.png'
+      image2: '/农业化肥采集.png',
+      image3: '/农药采集.png',
+      image4: '/农膜采集.png',
+      image5: '/有机肥采集.png',
+      image6: '/各农业投入品测试结果.png',
+      image7: '/农业投入品镉含量.png',
+      image8: '/农业投入品用量计算方法.png',
+      image9: '/农业投入品重金属输入通量计算方法.png'
     };
   }
 };
 </script>
 
 <style scoped>
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
-}
-
-.agricultural-input-container {
+.sampling-process {
   padding: 20px;
+  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
   min-height: 100vh;
   position: relative;
   overflow: hidden;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
-}
-
-.section {
-  margin-bottom: 40px;
-  padding-bottom: 30px;
-  border-bottom: 1px dashed rgba(30, 87, 153, 0.3);
-  position: relative;
 }
 
-.section:last-child {
-  border-bottom: none;
-  margin-bottom: 10px;
-}
-
-.section-title {
-  font-size: 26px;
-  color: #1a3b5d;
-  margin-bottom: 20px;
-  padding-bottom: 15px;
-  border-bottom: 2px solid rgba(30, 87, 153, 0.3);
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-weight: 600;
+.sampling-process::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
+  opacity: 0.3;
+  z-index: -1;
 }
 
-.section-title i {
-  font-size: 28px;
-  color: #2c9eaf;
-  background: rgba(44, 158, 175, 0.1);
-  padding: 10px;
-  border-radius: 50%;
-  width: 50px;
-  height: 50px;
+.image-row {
   display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.section-content {
-  line-height: 1.8;
-  font-size: 16px;
-  color: #2d3748;
-  margin-bottom: 25px;
-  text-indent: 2em;
-  position: relative;
-  z-index: 1;
-}
-
-/* 子部分样式 */
-.subsection-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 20px;
+  flex-wrap: wrap;
+  justify-content: space-between;
   margin: 30px 0;
+  gap: 20px;
 }
 
-.subsection {
-  background: rgba(255, 255, 255, 0.7);
-  border-radius: 12px;
-  padding: 20px;
-  border-left: 4px solid #3498db;
-  transition: all 0.3s ease;
-  backdrop-filter: blur(5px);
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.subsection:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
-  background: rgba(255, 255, 255, 0.85);
-}
-
-.subsection-title {
-  font-size: 18px;
-  color: #2c3e50;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 10px;
-}
-
-.subsection-title i {
-  font-size: 20px;
-  color: #3498db;
-  background: rgba(52, 152, 219, 0.1);
-  padding: 8px;
-  border-radius: 50%;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.subsection p {
-  color: #4a5568;
-  font-size: 14px;
+p {
+  text-indent: 2em;
+  margin: 15px 0;
   line-height: 1.6;
-  padding-left: 46px;
 }
 
-/* 图片样式 */
-.image-container {
-  display: flex;
-  justify-content: center;
-  margin: 30px 0;
+/* 特定段落取消缩进 */
+p:has(> br) {
+  text-indent: 0;
 }
 
-.main-image {
-  width: 90%;
-  max-height: 500px;
+.image-container {
+  flex: 1;
+  min-width: 280px;
   border-radius: 12px;
+  overflow: hidden;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease;
-  background: rgba(255, 255, 255, 0.5);
-  border: 1px solid rgba(255, 255, 255, 0.4);
-}
-
-.main-image:hover {
-  transform: scale(1.02);
-}
-
-.image-row {
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
-  gap: 30px;
-  margin: 30px 0;
-}
-
-.image-wrapper {
+  transition: all 0.3s ease;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.5);
   display: flex;
   flex-direction: column;
-  align-items: center;
-}
-
-.paired-chart {
-  width: 450px;
-  height: 300px;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  transition: transform 0.3s ease;
-  background: rgba(255, 255, 255, 0.5);
-  border: 1px solid rgba(255, 255, 255, 0.4);
 }
 
-.paired-chart:hover {
-  transform: scale(1.03);
+.image-container:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  background: rgba(255, 255, 255, 0.85);
 }
 
-.dual-image {
-  width: 400px;
-  height: 300px;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  transition: transform 0.3s ease;
-  background: rgba(255, 255, 255, 0.5);
-  border: 1px solid rgba(255, 255, 255, 0.4);
+.sampling-image {
+  border-radius: 12px 12px 0 0 !important;
+  overflow: hidden;
+  border: none !important;
+  width: 100% !important;
+  height: 450px;
+  display: block;
+  transition: transform 0.5s ease;
+  background: rgba(255, 255, 255, 0.4);
+  object-fit: cover;
 }
 
-.dual-image:hover {
+.image-container:hover .sampling-image {
   transform: scale(1.03);
 }
 
-.image-caption,
-.figure-description {
+.image-caption {
   text-align: center;
-  font-size: 16px;
-  color: #1e5799;
-  font-weight: 600;
-  margin-top: 15px;
-  background: rgba(255, 255, 255, 0.6);
-  padding: 8px 16px;
-  border-radius: 20px;
-  display: inline-block;
+  font-size: 15px;
+  color: #2d3748;
+  padding: 12px;
+  font-weight: 500;
+  background: rgba(248, 250, 252, 0.7);
+  margin: 0;
 }
 
-/* 响应式调整 */
-@media (max-width: 1200px) {
+.formula-text {
+  padding: 15px;
+  background: rgba(245, 249, 255, 0.6);
+  border-top: 1px dashed #cbd5e0;
+}
+.formula-text p {
+  text-indent: 0;
+  font-size: 14px;
+  color: #1a365d;
+}
 
-  .paired-chart,
-  .dual-image {
-    width: 100%;
-    max-width: 500px;
+/* 响应式设计 */
+@media (max-width: 900px) {
+  .image-container {
+    min-width: 48%;
   }
 }
 
 @media (max-width: 768px) {
-  .section-title {
-    font-size: 22px;
-  }
-
-  .section-title i {
-    width: 40px;
-    height: 40px;
-    font-size: 22px;
-  }
-
-  .subsection-container {
-    grid-template-columns: 1fr;
-  }
-
-  .image-row {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .main-image {
-    width: 100%;
-  }
-
-  .section-content {
-    font-size: 15px;
+  .image-container {
+    min-width: 100%;
   }
 }
 
 @media (max-width: 480px) {
-  .agricultural-input-container {
+  .sampling-process {
     padding: 10px;
   }
 
-  .section-title {
-    font-size: 20px;
-  }
-
-  .subsection-title {
-    font-size: 16px;
+  .sampling-image {
+    height: 200px;
   }
 }
-</style>
+</style>

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

@@ -1,271 +1,176 @@
 <template>
   <div class="sampling-process">
-    <div class="step-card">
-      <div class="step-number">1</div>
-      <h2>1. 建立大气污染源清单</h2>
-      <div class="step-content">
-        <p>（1）污染源统计：根据韶关市环保部门或政府官方网站公开资料及全国排污许可证管理信息平台，对韶关具有排污许可证的企业进行数据统计与调查分析；</p>
-        <p>（2）行业调查与筛选：针对可能存在重金属排放的行业进行全面调查和筛选。这些行业包括燃煤电厂、蓄电池制造、危险废物治理、矿山采选、有色金属冶炼、化工、电子电路制造等。</p>
-        <p>
-          （3）企业调查与统计分析：对所有重金属排放企业进行详细调查和统计分析，包括但不限于企业名称、地址坐标、生产工艺、主要产品、排放设施、排放标准等信息，建立源清单的详细数据库。对企业的生产规模、产值、用地情况等进行综合评估，确定其在污染排放中的影响程度。
-        </p>
-        <p>
-          （4）排放数据收集：收集以上所有企业的大气排放数据，包括但不限于污染物排放许可值、重金属排放总量、大气颗粒物排放总量、氮氧化物排放总量、硫化物排放总量等大气污染物。获取数据的来源包括企业排污许可证、环保部门监管数据、企业自行监测报告、第三方监测机构数据等。
-        </p>
-        <p>（5）数据验证与质量控制：对收集到的排放数据进行查找验证和质量控制，确保数据的准确性和可靠性。检查数据的完整性和一致性，排除可能存在的错误和异常数据，提高数据的可信度。</p>
+    <h2>1.建立大气污染源清单：</h2>
+    <p>
+      <strong>污染源统计：</strong>
+      根据韶关市环保部门或政府官方网站公开资料及全国排污许可证管理信息平台，
+      对韶关具有排污许可证的企业进行数据统计与调查分析；
+    </p>
+    <p>
+      <strong>污染源统计：</strong>
+      根据韶关市环保部门或政府官方网站公开资料及全国排污许可证管理信息平台，
+      对韶关具有排污许可证的企业进行数据统计与调查分析；
+    </p>
+    <p>
+      <strong>行业调查与筛选：</strong>
+      针对可能存在重金属排放的行业进行全面调查和筛选。这些行业包括燃煤电厂、蓄电池制造、危险废物治理、矿山采选、
+      有色金属冶炼、化工、电子电路制造等。
+    </p>
+    <p>
+      <strong>企业调查与统计分析：</strong>
+      对所有重金属排放企业进行详细调查和统计分析，包括但不限于企业名称、地址坐标、生产工艺、主要产品、排放设施、
+      排放标准等信息，建立源清单的详细数据库。对企业的生产规模、产值、用地情况等进行综合评估，确定其在污染排放中的影响程度。
+    </p>
+    <p>
+      <strong>排放数据收集：</strong>
+      收集以上所有企业的大气排放数据，包括但不限于污染物排放许可值、重金属排放总量、大气颗粒物排放总量、氮氧化物排放总量、
+      硫化物排放总量等大气污染物。获取数据的来源包括企业排污许可证、环保部门监管数据、企业自行监测报告、第三方监测机构数据等。
+    </p>
+    <p>
+      <strong>数据验证与质量控制：</strong>
+      对收集到的排放数据进行查找验证和质量控制，确保数据的准确性和可靠性。检查数据的完整性和一致性，
+      排除可能存在的错误和异常数据，提高数据的可信度。
+    </p>
+    <div class="image-row">
+      <div class="image-container">
+        <el-image :src="image1" alt="大气干湿沉降示意图" class="sampling-image"></el-image>
+        <p class="image-caption">图1 大气干湿沉降示意图</p>
+      </div>
+    </div>
 
-        <div class="image-row">
-          <div class="image-container">
-            <img :src="image1" alt="农田土壤重金属主要的输入输出途径" class="process-image">
-            <p class="caption">图 1 农田土壤重金属主要的输入输出途径</p>
-          </div>
-        </div>
+    <h2>2.现场调研：</h2>
+    <p>
+      制定重金属排放源的详细调研计划，包括调研时间、地点、人员分工、调研方法等。根据研究目的和问题，
+      选择合适的调研方法，如问卷调查、访谈、观察法等。按照调研计划，前往现场进行调研，对企业进行前期的实地考察，
+      了解能源使用、生产工艺及废气排放情况。对企业所在区域进行调查，大气排放是否会对周围区域产生影响。在调研过程中，
+      注意信息的获取与保存，比如拍照、排污口测距、风向记录等等。
+    </p>
+    <div class="image-row">
+      <div class="image-container">
+        <el-image :src="image2" alt="干湿沉降收集装置" class="sampling-image"></el-image>
+        <p class="image-caption">图2 干湿沉降收集装置</p>
       </div>
     </div>
 
-    <div class="step-card">
-      <div class="step-number">2</div>
-      <h2>2. 现场调研和样品分析</h2>
-      <h3>现场调研</h3>
-      <div class="step-content">
-        <p>
-          制定重金属排放源的详细调研计划，包括调研时间、地点、人员分工、调研方法等。根据研究目的和问题，选择合适的调研方法，如问卷调查、访谈、观察法等。按照调研计划，前往现场进行调研，对企业进行前期的实地考察，了解能源使用、生产工艺及废气排放情况。对企业所在区域进行调查，大气排放是否会对周围区域产生影响。在调研过程中，注意信息的获取与保存，比如拍照、排污口测距、风向记录等等。
-        </p>
+    <h2>3.样品分析：</h2>
+    <p>
+      <strong>重金属检测技术：</strong>
+      例如原子吸收光谱法（AAS）、电感耦合等离子体质谱法（ICP-MS）、X射线荧光光谱法（XRF）等。
+    </p>
+    <p>
+      <strong>数据处理与分析：</strong>
+      质量控制和数据分析的统计方法。
+    </p>
 
-        <h3>样品分析</h3>
-        <p>（1）重金属检测技术：例如原子吸收光谱法（AAS）、电感耦合等离子体质谱法（ICP-MS）、X射线荧光光谱法（XRF）等。</p>
-        <p>（2）数据处理与分析：质量控制和数据分析的统计方法。</p>
 
-        <div class="image-row">
-          <div class="image-container">
-            <img :src="image2" alt="大气干湿沉降示意图" class="process-image">
-            <p class="caption">图 2 大气干湿沉降示意图</p>
-          </div>
-          <div class="image-container">
-            <img :src="image3" alt="干湿沉降收集装置" class="process-image">
-            <p class="caption">图 3 干湿沉降收集装置</p>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
-import { ref } from 'vue';
-
 export default {
-  setup() {
-    const image1 = ref('/农田土壤重金属主要的输入输出途径.png');
-    const image2 = ref('/大气干湿沉降示意图.png');
-    const image3 = ref('/干湿沉降收集装置.png');
-
+  data() {
     return {
-      image1,
-      image2,
-      image3
+      image1: '/大气干湿沉降示意图.png',
+      image2: '/干湿沉降收集装置.png',
     };
   }
 };
 </script>
 
 <style scoped>
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
-}
-
-body,
-html {
-  height: 100%;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
-  background-size: 300% 300%;
-  animation: gradientBG 15s ease infinite;
-}
-
-@keyframes gradientBG {
-  0% {
-    background-position: 0% 50%;
-  }
-
-  50% {
-    background-position: 100% 50%;
-  }
-
-  100% {
-    background-position: 0% 50%;
-  }
-}
-
 .sampling-process {
-  max-width: 1200px;
-  margin: 0 auto;
   padding: 20px;
+  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
   min-height: 100vh;
-}
-
-.step-card {
-  background: rgba(255, 255, 255, 0.7);
-  /* 70%透明度 */
-  border-radius: 15px;
-  margin-bottom: 30px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-  transition: all 0.4s ease;
-  padding: 30px;
   position: relative;
   overflow: hidden;
-  backdrop-filter: blur(5px);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.step-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
 }
 
-.step-card::before {
+.sampling-process::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
-  height: 5px;
   width: 100%;
-  background: linear-gradient(90deg, #1a6dcc, #2c9eaf);
-}
-
-.step-number {
-  position: absolute;
-  top: 20px;
-  right: 30px;
-  background: linear-gradient(135deg, #1a6dcc, #2c9eaf);
-  color: white;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  font-weight: bold;
-  box-shadow: 0 4px 15px rgba(26, 109, 204, 0.5);
-}
-
-h2 {
-  font-size: 26px;
-  margin-bottom: 20px;
-  color: #1a3b5d;
-  padding-bottom: 10px;
-  border-bottom: 2px solid rgba(26, 109, 204, 0.3);
-  position: relative;
-  margin-top: 10px;
-}
-
-h2::after {
-  content: "";
-  position: absolute;
-  bottom: -2px;
-  left: 0;
-  width: 80px;
-  height: 2px;
-  background: linear-gradient(90deg, #1a6dcc, #2c9eaf);
-}
-
-h3 {
-  font-size: 22px;
-  margin: 20px 0 15px;
-  color: #2c5282;
-  padding-left: 15px;
-  border-left: 4px solid #2c9eaf;
-  background: rgba(44, 158, 175, 0.1);
-  padding: 10px 15px;
-  border-radius: 0 8px 8px 0;
-}
-
-p {
-  line-height: 1.8;
-  color: #2d3748;
-  margin-bottom: 15px;
-  text-align: justify;
-  padding: 0 10px;
-}
-
-.step-content p {
-  text-indent: 2em;
+  background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
+  opacity: 0.3;
+  z-index: -1;
 }
 
 .image-row {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  margin: 25px 0;
+  margin: 30px 0;
   gap: 20px;
 }
 
+p {
+  text-indent: 2em;
+}
+
 .image-container {
   flex: 1;
   min-width: 280px;
-  border-radius: 10px;
+  border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
-  background: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+
+  /* 新增：使用 flex 布局，垂直方向堆叠，内容居中 */
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* 水平居中 */
 }
 
 .image-container:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  background: rgba(255, 255, 255, 0.85);
 }
 
-.process-image {
-  width: 100%;
-  height: 300px;
-  object-fit: cover;
+.sampling-image {
+  border-radius: 12px 12px 0 0 !important;
+  overflow: hidden;
+  border: none !important;
+  width: 100%;     /* 改为 100% 宽度，填满容器 */
+  max-width: 600px; 
   display: block;
-  border-bottom: 1px solid rgba(234, 234, 234, 0.5);
   transition: transform 0.5s ease;
+  background: rgba(255, 255, 255, 0.4);
+
+  /* 新增：居中对齐 */
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.image-container:hover .process-image {
+.image-container:hover .sampling-image {
   transform: scale(1.03);
 }
 
-.caption {
+.image-caption {
   text-align: center;
   font-size: 15px;
   color: #2d3748;
   padding: 12px;
   font-weight: 500;
   background: rgba(248, 250, 252, 0.7);
+  margin: 0;
 }
 
 /* 响应式设计 */
-@media (max-width: 768px) {
-  .step-card {
-    padding: 20px 15px;
-  }
-
-  h2 {
-    font-size: 22px;
-    padding-right: 60px;
+@media (max-width: 900px) {
+  .image-container {
+    min-width: 48%;
   }
+}
 
-  .step-number {
-    width: 40px;
-    height: 40px;
-    font-size: 20px;
-    top: 15px;
-    right: 15px;
-  }
+@media (max-width: 768px) {
 
   .image-container {
     min-width: 100%;
-    margin-bottom: 20px;
-  }
-
-  .process-image {
-    height: 250px;
   }
 }
 
@@ -274,35 +179,8 @@ p {
     padding: 10px;
   }
 
-  h2 {
-    font-size: 20px;
-  }
-
-  h3 {
-    font-size: 18px;
-  }
-
-  p {
-    font-size: 15px;
-  }
-
-  .process-image {
+  .sampling-image {
     height: 200px;
   }
-
-  .step-card {
-    padding: 15px 10px;
-  }
-
-  .step-number {
-    width: 35px;
-    height: 35px;
-    font-size: 18px;
-    top: 10px;
-    right: 10px;
-  }
 }
-</style>
-
-
-
+</style>

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

@@ -1,122 +1,111 @@
 <template>
-  <div class="container">
-    <el-card shadow="always" class="gradient-card">
-      <!-- 标题区域 -->
-      <div class="title-section">
-        <h1 class="main-title">灌溉水输入通量计算</h1>
-        <p class="sub-title">请选择土地类型并输入相应的灌溉参数</p>
+  <div class="compact-container">
+    <el-card shadow="always" class="compact-card">
+      <!-- 紧凑标题区域 -->
+      <div class="compact-title-section">
+        <h2 class="compact-main-title">灌溉水输入通量计算</h2>
+        <p class="compact-sub-title">选择土地类型并输入灌溉参数</p>
       </div>
       
-      <!-- 水地参数输入 -->
-      <div class="land-section">
-        <el-row :gutter="30">
-          <el-col :span="6">
-            <el-checkbox v-model="waterLand" label="水地" class="land-checkbox" />
-          </el-col>
-          <el-col :span="9">
-            <div class="input-label">
-              <i class="fas fa-faucet"></i> 灌溉水用量 (m³)
-            </div>
+      <!-- 紧凑参数输入区域 -->
+      <div class="compact-input-section">
+        <!-- 水地参数输入 -->
+        <div class="compact-land-section">
+          <el-checkbox v-model="waterLand" class="compact-land-checkbox">
+            <span class="compact-land-label">水地</span>
+          </el-checkbox>
+          <div class="compact-input-group">
+            <div class="compact-input-label">灌溉水用量 (m³)</div>
             <el-input
               v-model="irrigationWaterUsage"
-              placeholder="请输入灌溉水用量"
+              placeholder="用量"
               :disabled="!waterLand"
-              size="large"
+              size="small"
+              class="compact-input"
             />
-          </el-col>
-          <el-col :span="9">
-            <div class="input-label">
-              <i class="fas fa-percentage"></i> 有效利用率 (%)
-            </div>
+          </div>
+          <div class="compact-input-group">
+            <div class="compact-input-label">有效利用率 (%)</div>
             <el-input
               v-model="irrigationEfficiency"
-              placeholder="请输入有效利用率"
+              placeholder="利用率"
               :disabled="!waterLand"
-              size="large"
+              size="small"
+              class="compact-input"
             />
-          </el-col>
-        </el-row>
-      </div>
+          </div>
+        </div>
 
-      <!-- 水浇地参数输入 -->
-      <div class="land-section">
-        <el-row :gutter="30">
-          <el-col :span="6">
-            <el-checkbox v-model="irrigatedLand" label="水浇地" class="land-checkbox" />
-          </el-col>
-          <el-col :span="9">
-            <div class="input-label">
-              <i class="fas fa-faucet"></i> 灌溉水用量 (m³)
-            </div>
+        <!-- 水浇地参数输入 -->
+        <div class="compact-land-section">
+          <el-checkbox v-model="irrigatedLand" class="compact-land-checkbox">
+            <span class="compact-land-label">水浇地</span>
+          </el-checkbox>
+          <div class="compact-input-group">
+            <div class="compact-input-label">灌溉水用量 (m³)</div>
             <el-input
               v-model="irrigatedWaterUsage"
-              placeholder="请输入灌溉水用量"
+              placeholder="用量"
               :disabled="!irrigatedLand"
-              size="large"
+              size="small"
+              class="compact-input"
             />
-          </el-col>
-          <el-col :span="9">
-            <div class="input-label">
-              <i class="fas fa-percentage"></i> 有效利用率 (%)
-            </div>
+          </div>
+          <div class="compact-input-group">
+            <div class="compact-input-label">有效利用率 (%)</div>
             <el-input
               v-model="irrigatedEfficiency"
-              placeholder="请输入有效利用率"
+              placeholder="利用率"
               :disabled="!irrigatedLand"
-              size="large"
+              size="small"
+              class="compact-input"
             />
-          </el-col>
-        </el-row>
-      </div>
+          </div>
+        </div>
 
-      <!-- 旱地参数输入 -->
-      <div class="land-section">
-        <el-row :gutter="30">
-          <el-col :span="6">
-            <el-checkbox v-model="dryLand" label="旱地" class="land-checkbox" />
-          </el-col>
-          <el-col :span="9">
-            <div class="input-label">
-              <i class="fas fa-faucet"></i> 灌溉水用量 (m³)
-            </div>
+        <!-- 旱地参数输入 -->
+        <div class="compact-land-section">
+          <el-checkbox v-model="dryLand" class="compact-land-checkbox">
+            <span class="compact-land-label">旱地</span>
+          </el-checkbox>
+          <div class="compact-input-group">
+            <div class="compact-input-label">灌溉水用量 (m³)</div>
             <el-input
               v-model="dryWaterUsage"
-              placeholder="请输入灌溉水用量"
+              placeholder="用量"
               :disabled="!dryLand"
-              size="large"
+              size="small"
+              class="compact-input"
             />
-          </el-col>
-          <el-col :span="9">
-            <div class="input-label">
-              <i class="fas fa-percentage"></i> 有效利用率 (%)
-            </div>
+          </div>
+          <div class="compact-input-group">
+            <div class="compact-input-label">有效利用率 (%)</div>
             <el-input
               v-model="dryEfficiency"
-              placeholder="请输入有效利用率"
+              placeholder="利用率"
               :disabled="!dryLand"
-              size="large"
+              size="small"
+              class="compact-input"
             />
-          </el-col>
-        </el-row>
+          </div>
+        </div>
       </div>
 
-      <!-- 计算按钮 -->
-      <el-row justify="center" class="button-section">
+      <!-- 紧凑计算按钮 -->
+      <div class="compact-button-section">
         <el-button
-          class="calculate-btn"
+          class="compact-calculate-btn"
           @click="calculateFlux"
         >
-          <i class="fas fa-calculator"></i> 计算灌溉水输入通量
+          <i class="fas fa-calculator"></i> 计算输入通量
         </el-button>
-      </el-row>
+      </div>
 
-      <!-- 计算结果 -->
-      <div v-if="fluxResult !== null" class="result-section">
-        <div class="result-title">
-          <i class="fas fa-chart-bar"></i> 计算结果
-        </div>
-        <div class="flux-value">{{ fluxResult.toFixed(2) }} <span class="unit">m³</span></div>
-        <p class="result-description">灌溉水输入通量计算结果</p>
+      <!-- 紧凑计算结果 -->
+      <div v-if="fluxResult !== null" class="compact-result-section">
+        <div class="compact-result-title">计算结果</div>
+        <div class="compact-flux-value">{{ fluxResult.toFixed(2) }} <span class="compact-unit">m³</span></div>
+        <p class="compact-result-description">灌溉水输入通量</p>
       </div>
     </el-card>
   </div>
@@ -124,12 +113,7 @@
 
 <script>
 import { ref } from 'vue';
-import { ElCheckbox, ElInput, ElButton, ElMessage, ElCard, ElRow, ElCol } from 'element-plus';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faFaucet, faPercentage, faCalculator, faChartBar } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-
-library.add(faFaucet, faPercentage, faCalculator, faChartBar);
+import { ElCheckbox, ElInput, ElButton, ElMessage, ElCard } from 'element-plus';
 
 export default {
   components: {
@@ -137,10 +121,7 @@ export default {
     ElInput,
     ElButton,
     ElMessage,
-    ElCard,
-    ElRow,
-    ElCol,
-    FontAwesomeIcon
+    ElCard
   },
   setup() {
     const waterLand = ref(false);
@@ -164,11 +145,11 @@ export default {
 
       if (waterLand.value) {
         if (!irrigationWaterUsage.value || !irrigationEfficiency.value) {
-          ElMessage.warning('请输入水地的灌溉水用量和灌溉水有效利用率');
+          ElMessage.warning('请输入水地的灌溉水用量和有效利用率');
           valid = false;
         } else {
           const usage = parseFloat(irrigationWaterUsage.value);
-          const efficiency = parseFloat(irrigationEfficiency.value) / 100; // 转换为小数
+          const efficiency = parseFloat(irrigationEfficiency.value) / 100;
 
           if (isNaN(usage) || isNaN(efficiency)) {
             ElMessage.error('请输入有效的数字');
@@ -184,7 +165,7 @@ export default {
 
       if (irrigatedLand.value) {
         if (!irrigatedWaterUsage.value || !irrigatedEfficiency.value) {
-          ElMessage.warning('请输入水浇地的灌溉水用量和灌溉水有效利用率');
+          ElMessage.warning('请输入水浇地的灌溉水用量和有效利用率');
           valid = false;
         } else {
           const usage = parseFloat(irrigatedWaterUsage.value);
@@ -204,7 +185,7 @@ export default {
 
       if (dryLand.value) {
         if (!dryWaterUsage.value || !dryEfficiency.value) {
-          ElMessage.warning('请输入旱地的灌溉水用量和灌溉水有效利用率');
+          ElMessage.warning('请输入旱地的灌溉水用量和有效利用率');
           valid = false;
         } else {
           const usage = parseFloat(dryWaterUsage.value);
@@ -224,7 +205,7 @@ export default {
 
       if (valid) {
         fluxResult.value = totalFlux;
-        ElMessage.success(`灌溉水输入通量为: ${totalFlux.toFixed(2)} m³`);
+        ElMessage.success(`灌溉水输入通量: ${totalFlux.toFixed(2)} m³`);
       }
     };
 
@@ -250,174 +231,168 @@ export default {
 </script>
 
 <style scoped>
-.container {
+.compact-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 100vh;
-  padding: 20px;
+  padding: 10px;
 }
 
-.gradient-card {
-  background: linear-gradient(90deg, rgba(250, 253, 255, 0.7) 0%, rgba(137, 223, 252, 0.7) 90%);
-  padding: 40px;
-  border: none;
-  width: 90%;
-  max-width: 900px;
-  border-radius: 20px;
+.compact-card {
+  background: linear-gradient(135deg,
+      rgba(250, 253, 255, 0.8),
+      rgba(137, 223, 252, 0.8));
+  padding: 20px;
+  border: 1px solid #e0f7fa;
+  border-radius: 12px;
+  width: 100%;
+  max-width: 650px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 
-.title-section {
+.compact-title-section {
   text-align: center;
-  margin-bottom: 40px;
+  margin-bottom: 20px;
 }
 
-.main-title {
-  font-size: 2.5rem;
+.compact-main-title {
+  font-size: 1.5rem;
   color: #1a3c7a;
-  margin-bottom: 15px;
-  font-weight: 700;
+  margin-bottom: 8px;
+  font-weight: 600;
 }
 
-.sub-title {
-  font-size: 1.4rem;
+.compact-sub-title {
+  font-size: 0.9rem;
   color: #555;
+  margin-bottom: 10px;
 }
 
-.land-section {
-  background: rgba(255, 255, 255, 0.85);
-  border-radius: 15px;
-  padding: 25px;
-  margin-bottom: 30px;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
-}
-
-.land-section:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+.compact-input-section {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  margin-bottom: 20px;
 }
 
-.land-checkbox {
-  height: 100%;
+.compact-land-section {
   display: flex;
   align-items: center;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 10px;
+  padding: 12px 15px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease;
 }
 
-.land-checkbox :deep(.el-checkbox__label) {
-  font-size: 1.6rem;
-  font-weight: 600;
-  color: #1a3c7a;
+.compact-land-section:hover {
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.compact-land-checkbox {
+  width: 80px;
 }
 
-.land-checkbox :deep(.el-checkbox__inner) {
-  width: 24px;
-  height: 24px;
+.compact-land-label {
+  font-weight: 600;
+  font-size: 1rem;
+  color: #1a3c7a;
 }
 
-.land-checkbox :deep(.el-checkbox__inner::after) {
-  height: 12px;
-  left: 7px;
-  width: 6px;
+.compact-input-group {
+  flex: 1;
+  margin: 0 8px;
 }
 
-.input-label {
-  font-size: 1.4rem;
-  font-weight: 600;
-  margin-bottom: 15px;
+.compact-input-label {
+  font-size: 0.85rem;
+  font-weight: 500;
+  margin-bottom: 6px;
   color: #2c3e50;
-  display: flex;
-  align-items: center;
-  gap: 12px;
 }
 
-:deep(.el-input) .el-input__inner {
-  height: 60px;
-  font-size: 1.5rem;
-  border-radius: 10px;
-  padding: 0 20px;
-  border: 2px solid #dcdfe6;
-  transition: all 0.3s ease;
+:deep(.compact-input .el-input__inner) {
+  height: 36px;
+  font-size: 0.9rem;
+  border-radius: 8px;
+  padding: 0 12px;
+  border: 1px solid #dcdfe6;
 }
 
-:deep(.el-input) .el-input__inner:focus {
+:deep(.compact-input .el-input__inner:focus) {
   border-color: #409EFF;
-  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
 }
 
-:deep(.el-input) .el-input__inner:disabled {
+:deep(.compact-input .el-input__inner:disabled) {
   background-color: #f5f7fa;
   opacity: 0.7;
 }
 
-.button-section {
-  margin: 40px 0 30px;
+.compact-button-section {
+  display: flex;
+  justify-content: center;
+  margin: 15px 0;
 }
 
-.calculate-btn {
+.compact-calculate-btn {
   width: 100%;
-  max-width: 500px;
-  height: 70px;
+  max-width: 300px;
+  height: 42px;
   border: none;
-  border-radius: 35px;
-  font-size: 1.8rem;
-  font-weight: bold;
-  transition: all 0.4s ease;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 600;
+  transition: all 0.3s ease;
   background: linear-gradient(45deg, #1a8cff, #00cc99);
   color: white;
-  box-shadow: 0 6px 15px rgba(26, 140, 255, 0.4);
+  box-shadow: 0 4px 10px rgba(26, 140, 255, 0.3);
 }
 
-.calculate-btn:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 10px 20px rgba(26, 140, 255, 0.5);
+.compact-calculate-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(26, 140, 255, 0.4);
   background: linear-gradient(45deg, #0d7de0, #00b386);
 }
 
-.calculate-btn:active {
+.compact-calculate-btn:active {
   transform: translateY(1px);
-  box-shadow: 0 4px 10px rgba(26, 140, 255, 0.4);
 }
 
-.result-section {
+.compact-result-section {
   text-align: center;
-  margin-top: 30px;
-  padding: 30px;
-  border-radius: 15px;
-  background: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-  border: 2px solid #e0f7fa;
+  margin-top: 15px;
+  padding: 15px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
+  border: 1px solid #e0f7fa;
 }
 
-.result-title {
-  font-size: 1.8rem;
+.compact-result-title {
+  font-size: 1.1rem;
   color: #1a3c7a;
-  margin-bottom: 25px;
+  margin-bottom: 10px;
   font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 15px;
 }
 
-.flux-value {
-  font-size: 3.5rem;
-  font-weight: 800;
+.compact-flux-value {
+  font-size: 1.8rem;
+  font-weight: 700;
   color: #e91e63;
-  margin: 10px 0;
-  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  margin: 5px 0;
 }
 
-.unit {
-  font-size: 2rem;
+.compact-unit {
+  font-size: 1.2rem;
   color: #555;
   font-weight: 600;
-  margin-left: 10px;
 }
 
-.result-description {
-  font-size: 1.4rem;
+.compact-result-description {
+  font-size: 0.9rem;
   color: #555;
-  margin-top: 15px;
+  margin-top: 5px;
 }
 </style>

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

@@ -1,41 +1,46 @@
 <template>
   <div class="sampling-process">
-      <h2>1.采样容器与过程</h2>
-      <p>采样容器均为500mL的白色聚乙烯瓶，采样体积均为500mL，采样过程在不同天气条件下进行，主要天气状况包括多云、阴天和小雨，采样点周边环境主要为河流，只有少数样品采集于水渠或瀑布区域。</p>
-      
-      <div class="image-row">
-        <div class="image-container">
-          <el-image :src="image1" alt="采样容器" class="sampling-image"></el-image>
-          <p class="image-caption">图1 采样容器</p>
-        </div>
-        <div class="image-container">
-          <el-image :src="image2" alt="采样现场" class="sampling-image"></el-image>
-          <p class="image-caption">图2 采样现场</p>
-        </div>
-        <div class="image-container">
-          <el-image :src="image3" alt="灌溉水采样设备" class="sampling-image"></el-image>
-          <p class="image-caption">图3 灌溉水采样设备</p>
-        </div>
+    <h2>1.采样容器与过程</h2>
+    <p>
+      采样容器均为500mL的白色聚乙烯瓶，采样体积均为500mL，采样过程在不同天气条件下进行，主要天气状况包括多云、阴天和小雨，
+      采样点周边环境主要为河流，只有少数样品采集于水渠或瀑布区域。
+    </p>
+
+    <div class="image-row">
+      <div class="image-container">
+        <el-image :src="image1" alt="采样容器" class="sampling-image"></el-image>
+        <p class="image-caption">图1-1 采样容器</p>
+      </div>
+      <div class="image-container">
+        <el-image :src="image2" alt="采样现场" class="sampling-image"></el-image>
+        <p class="image-caption">图1-2 采样现场</p>
       </div>
+      <div class="image-container">
+        <el-image :src="image3" alt="灌溉水采样设备" class="sampling-image"></el-image>
+        <p class="image-caption">图1-3 灌溉水采样设备</p>
+      </div>
+    </div>
+
+    <h2>2.样品保存与现场情况</h2>
+    <p>
+      绝大多数样品状态为无色、无沉淀、无味、无悬浮物，只有少量样品稍显浑浊并含有沉淀物,为了保证样品的完整性和数据的准确性，
+      采样后的保存方式包括了冷藏、避光、确保标签完好以及采取有效的减震措施，以避免运输过程中的振动和损坏。
+    </p>
 
-      <h2>2.样品保存与现场情况</h2>
-      <p>绝大多数样品状态为无色、无沉淀、无味、无悬浮物，只有少量样品稍显浑浊并含有沉淀物,为了保证样品的完整性和数据的准确性，采样后的保存方式包括了冷藏、避光、确保标签完好以及采取有效的减震措施，以避免运输过程中的振动和损坏。</p>
-      
-      <div class="image-row">
-        <div class="image-container">
-          <el-image :src="fieldImage1" alt="工作人员采样现场" class="sampling-image"></el-image>
-          <p class="image-caption">图4-1 采样现场</p>
-        </div>
-        <div class="image-container">
-          <el-image :src="fieldImage2" alt="工作人员采样现场" class="sampling-image"></el-image>
-          <p class="image-caption">图4-2 采样现场</p>
-        </div>
-        <div class="image-container">
-          <el-image :src="fieldImage3" alt="工作人员采样现场" class="sampling-image"></el-image>
-          <p class="image-caption">图4-3 采样现场</p>
-        </div>
+    <div class="image-row">
+      <div class="image-container">
+        <el-image :src="fieldImage1" alt="工作人员采样现场" class="sampling-image"></el-image>
+        <p class="image-caption">图2-1 采样现场</p>
       </div>
-      <p class="section-caption">图4 工作人员采样现场</p>
+      <div class="image-container">
+        <el-image :src="fieldImage2" alt="工作人员采样现场" class="sampling-image"></el-image>
+        <p class="image-caption">图2-2 采样现场</p>
+      </div>
+      <div class="image-container">
+        <el-image :src="fieldImage3" alt="工作人员采样现场" class="sampling-image"></el-image>
+        <p class="image-caption">图2-3 采样现场</p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -43,7 +48,7 @@
 export default {
   data() {
     return {
-      image1: '/图1.png', 
+      image1: '/图1.png',
       image2: '/图片2.png',
       image3: '/图片3.png',
       fieldImage1: '/图片4.jpg',
@@ -83,6 +88,10 @@ export default {
   gap: 20px;
 }
 
+p {
+  text-indent: 2em;
+}
+
 .image-container {
   flex: 1;
   min-width: 280px;
@@ -125,20 +134,6 @@ export default {
   margin: 0;
 }
 
-.section-caption {
-  text-align: center;
-  font-size: 15px;
-  color: #2d3748;
-  font-weight: 500;
-  margin-top: -10px;
-  margin-bottom: 20px;
-  background: rgba(255, 255, 255, 0.6);
-  padding: 8px;
-  border-radius: 4px;
-  display: inline-block;
-  width: 100%;
-}
-
 /* 响应式设计 */
 @media (max-width: 900px) {
   .image-container {
@@ -147,7 +142,7 @@ export default {
 }
 
 @media (max-width: 768px) {
- 
+
   .image-container {
     min-width: 100%;
   }

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

@@ -1,410 +1,341 @@
 <template>
-  <div class="crop-cd-calculator">
-    <div class="header">
-      <h1>籽粒移除含量计算器</h1>
-      <p>评估作物镉含量及籽粒移除的影响，助力农业安全生产</p>
-    </div>
-    
-    <div class="card-container">
-      <div class="card">
-        <div class="card-header">
-          <i class="fas fa-leaf"></i>
-          <h2>作物镉模型计算</h2>
+  <div class="container">
+    <div class="gradient-card">
+      <div class="card-header">
+        <h1>籽粒移除输出通量计算器</h1>
+        <p>评估作物镉含量及籽粒移除对镉的影响，助力农业安全生产</p>
+      </div>
+
+      <div class="instruction-section">
+        <h2>使用说明</h2>
+        <ol>
+          <li>首次使用请点击"作物镉模型计算"按钮。</li>
+          <li>点击"作物镉模型计算"按钮跳转到作物镉模型计算页面。</li>
+          <li>在作物镉模型计算页面完成计算后返回此页面。</li>
+        </ol>
+      </div>
+
+      <div class="crop-cd-model-section">
+        <button class="calculate-btn" @click="openCropCdModelPage">
+          <i class="fas fa-calculator"></i> 作物镉模型计算
+        </button>
+      </div>
+
+      <div class="input-section">
+        <div class="input-group">
+          <label class="label">作物亩产量 (斤)</label>
+          <input v-model="yieldPerMu" placeholder="800" class="custom-input" :disabled="!cropCdModelCalculated" />
         </div>
-        
-        <div class="card-body">
-          <div v-if="!inputsEnabled" class="enable-section">
-            <p>首次使用请点击下方按钮启用计算功能</p>
-            <button class="enable-btn" @click="enableInputs">
-              <i class="fas fa-calculator"></i> 启用作物镉模型计算
-            </button>
-          </div>
-          
-          <div v-if="inputsEnabled" class="input-section">
-            <div class="input-group">
-              <label for="yieldPerMu">
-                <i class="fas fa-weight-hanging"></i> 作物亩产量 (斤)
-              </label>
-              <input 
-                type="number" 
-                id="yieldPerMu" 
-                v-model.number="yieldPerMu" 
-                placeholder="800"
-                min="0"
-              >
-            </div>
-            
-            <div class="button-group">
-              <button class="calculate-btn" @click="showStrawRemovalMessage">
-                <i class="fas fa-calculator"></i> 计算籽粒移除含量
-              </button>
-              <button class="reset-btn" @click="resetInputs">
-                <i class="fas fa-redo"></i> 重置作物镉模型计算
-              </button>
-            </div>
-          </div>
-          
-          <div v-if="cropCd > 0" class="result-section">
-            <div class="result-card">
-              <h3>作物镉模型计算结果</h3>
-              <div class="result-content">
-                <div class="result-item">
-                  <span>作物镉含量:</span>
-                  <span class="highlight">{{ cropCd.toFixed(4) }} mg/kg</span>
-                </div>
-                <div class="result-item">
-                  <span>国家标准限值:</span>
-                  <span>0.2 mg/kg</span>
-                </div>
-                <div class="result-status" :class="{'safe': cropCd <= 0.2, 'warning': cropCd > 0.2}">
-                  <i :class="cropCd <= 0.2 ? 'fas fa-check-circle' : 'fas fa-exclamation-triangle'"></i>
-                  {{ cropCd <= 0.2 ? '符合安全标准' : '超出安全标准' }}
-                </div>
-              </div>
-            </div>
+
+        <div class="info-panel">
+          <div class="info-item">
+            <i class="fas fa-chart-line"></i>
+            <span>建议范围: 500 - 1500</span>
           </div>
         </div>
-        
-        <div class="card-footer">
-          <p>安全标准依据: GB 2762-2022 食品安全国家标准</p>
-        </div>
       </div>
-    </div>
-    
-    <div class="info-section">
-      <h3><i class="fas fa-info-circle"></i> 使用说明</h3>
-      <ol>
-        <li>首次使用请点击"启用作物镉模型计算"按钮</li>
-        <li>输入土壤镉含量、作物镉富集系数和作物亩产量</li>
-        <li>点击"计算作物镉含量"按钮获取结果</li>
-        <li>"重置作物镉模型计算"按钮用于重置所有输入数据</li>
-      </ol>
-      
-      <h3><i class="fas fa-lightbulb"></i> 计算原理</h3>
-      <p>作物镉含量 = 土壤镉含量 × 作物镉富集系数</p>
-      <p>计算结果与国家食品安全标准(0.2 mg/kg)对比评估安全性</p>
+
+      <div class="button-section">
+        <button class="calculate-btn" :disabled="!cropCdModelCalculated || !yieldPerMu" @click="onCalculate">
+          <i class="fas fa-calculator"></i> 籽粒移除计算
+        </button>
+      </div>
+
+      <div class="card-footer">
+        <p><i class="fas fa-lightbulb"></i> 提示: 输入数据后点击"籽粒移除计算"按钮获取详细分析</p>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
-  name: 'CropCdCalculator',
-  data() {
+  name: 'GrainRemovalCalculator',
+  setup() {
+    const cropCdModelCalculated = ref(false);
+    const yieldPerMu = ref(null);
+
+    const openCropCdModelPage = () => {
+      // 这里可以实现跳转到作物镉模型计算页面的逻辑
+      // 例如：window.location.href = '/crop-cd-model';
+      alert('打开作物镉模型计算页面');
+      cropCdModelCalculated.value = true;
+    };
+
+    const onCalculate = () => {
+      if (!yieldPerMu.value) {
+        alert('请输入作物亩产量');
+        return;
+      }
+      alert(`计算完成！当前亩产量: ${yieldPerMu.value} 斤`);
+    };
+
     return {
-      inputsEnabled: false,
-      yieldPerMu: 800,
-      cropCd: 0
+      cropCdModelCalculated,
+      yieldPerMu,
+      openCropCdModelPage,
+      onCalculate
     };
-  },
-  methods: {
-    enableInputs() {
-      this.inputsEnabled = true;
-    },
-    calculateCropCd() {
-      // 假设土壤镉含量和作物镉富集系数默认值分别为 0.5 和 0.05
-      const soilCd = 0.5;
-      const enrichmentFactor = 0.05;
-      // 作物镉含量计算模型
-      this.cropCd = soilCd * enrichmentFactor;
-    },
-    resetInputs() {
-      this.yieldPerMu = 800;
-      this.cropCd = 0;
-    },
-    showStrawRemovalMessage() {
-      alert("计算秸秆移除含量功能未启用");
-    }
   }
 };
 </script>
 
 <style scoped>
-.crop-cd-calculator {
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 20px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  color: #333;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
-  border-radius: 15px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+body, html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden; /* 禁止页面滚动 */
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center; /* 居中对齐 */
+  height: 100vh;
+}
+
+.gradient-card {
+  background: linear-gradient(135deg,
+      rgba(250, 253, 255, 0.8),
+      rgba(137, 223, 252, 0.8));
+  border-radius: 20px;
+  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
+  padding: 30px;
+  width: 100%;
+  max-width: 500px;
+  backdrop-filter: blur(8px);
+  border: none;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.header {
+.card-header {
   text-align: center;
-  margin-bottom: 30px;
-  padding: 25px;
-  background: linear-gradient(135deg, rgba(38, 176, 70, 0.7) 0%, rgba(26, 122, 50, 0.7) 100%);
-  border-radius: 10px;
-  color: white;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
 }
 
-.header h1 {
-  font-size: 2.2rem;
+.card-header h1 {
+  font-size: 2rem;
+  color: #006064;
   margin-bottom: 10px;
-  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+  font-weight: 700;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
 }
 
-.header p {
+.card-header p {
   font-size: 1.1rem;
+  color: #00838f;
   opacity: 0.9;
 }
 
-.card-container {
-  margin-bottom: 30px;
-}
-
-.card {
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 12px;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
-  overflow: hidden;
-}
-
-.card-header {
-  background: linear-gradient(135deg, rgba(52, 152, 219, 0.7) 0%, rgba(31, 111, 181, 0.7) 100%);
-  color: white;
-  padding: 18px 25px;
-  display: flex;
-  align-items: center;
-  gap: 15px;
+.instruction-section {
+  text-align: center;
+  margin-bottom: 20px;
 }
 
-.card-header h2 {
-  font-size: 1.6rem;
-  font-weight: 600;
+.instruction-section h2 {
+  font-size: 1.5rem;
+  color: #006064;
+  margin-bottom: 10px;
 }
 
-.card-header i {
-  font-size: 1.8rem;
+.instruction-section ol {
+  list-style-type: decimal;
+  padding-left: 20px;
+  margin-bottom: 20px;
 }
 
-.card-body {
-  padding: 25px;
+.instruction-section li {
+  font-size: 1rem;
+  color: #00838f;
+  margin-bottom: 5px;
 }
 
-.enable-section {
+.crop-cd-model-section {
   text-align: center;
-  padding: 30px 20px;
-}
-
-.enable-section p {
-  margin-bottom: 25px;
-  font-size: 1.1rem;
-  color: #555;
+  margin-bottom: 20px;
 }
 
 .input-section {
-  display: grid;
-  gap: 20px;
+  margin: 20px 0;
 }
 
 .input-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+  margin-bottom: 20px;
 }
 
-.input-group label {
+.label {
+  display: block;
   font-weight: 600;
-  color: #2c3e50;
-  display: flex;
-  align-items: center;
-  gap: 10px;
+  font-size: 1.2rem;
+  margin-bottom: 10px;
+  color: #006064;
 }
 
-.input-group input {
-  padding: 14px 15px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  font-size: 16px;
-  transition: all 0.3s;
-  background: #f9fbfd;
+.custom-input {
+  width: 100%;
+  padding: 15px 10px;
+  border-radius: 12px;
+  border: 2px solid #80deea;
+  font-size: 1rem;
+  background: rgba(255, 255, 255, 0.7);
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
 }
 
-.input-group input:focus {
+.custom-input:focus {
   outline: none;
-  border-color: #3498db;
-  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
+  border-color: #26c6da;
+  box-shadow: 0 0 0 4px rgba(38, 198, 218, 0.3);
 }
 
-.button-group {
-  display: flex;
-  gap: 15px;
+.custom-input:disabled {
+  background: rgba(255, 255, 255, 0.3);
+  border-color: #ccc;
+  cursor: not-allowed;
+}
+
+.info-panel {
+  background: rgba(178, 235, 242, 0.4);
+  border-radius: 12px;
+  padding: 15px;
   margin-top: 15px;
-  flex-wrap: wrap;
 }
 
-button {
-  padding: 14px 25px;
-  border: none;
-  border-radius: 8px;
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
+.info-item {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 10px;
-  flex: 1;
-  min-width: 200px;
+  margin-bottom: 10px;
+  font-size: 1rem;
+  color: #006064;
 }
 
-.enable-btn {
-  background: linear-gradient(to right, rgba(38, 176, 70, 0.7), rgba(26, 122, 50, 0.7));
-  color: white;
-  max-width: 350px;
-  margin: 0 auto;
-  box-shadow: 0 4px 10px rgba(38, 176, 70, 0.3);
+.info-item i {
+  margin-right: 10px;
+  font-size: 1.2rem;
+  color: #00838f;
 }
 
-.enable-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 15px rgba(38, 176, 70, 0.4);
+.button-section {
+  margin: 25px 0;
+  text-align: center;
+  flex-grow: 1;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
 }
 
 .calculate-btn {
-  background: linear-gradient(to right, rgba(52, 152, 219, 0.7), rgba(31, 111, 181, 0.7));
-  color: white;
-  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
-}
-
-.calculate-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);
-}
-
-.reset-btn {
-  background: linear-gradient(to right, rgba(241, 196, 15, 0.7), rgba(243, 156, 18, 0.7));
+  background: linear-gradient(to right, #8DF9F0, #26B046);
   color: white;
-  box-shadow: 0 4px 10px rgba(241, 196, 15, 0.3);
-}
-
-.reset-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 15px rgba(241, 196, 15, 0.4);
-}
-
-.result-section {
-  margin-top: 30px;
-  border-top: 1px solid #eee;
-  padding-top: 25px;
-}
-
-.result-card {
-  background: rgba(249, 251, 253, 0.7);
-  border-radius: 10px;
-  padding: 20px;
-  border-left: 4px solid #3498db;
-}
-
-.result-card h3 {
-  margin-bottom: 15px;
-  color: #2c3e50;
-}
-
-.result-content {
-  display: grid;
-  gap: 15px;
-}
-
-.result-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 10px 0;
-  border-bottom: 1px dashed #eee;
-}
-
-.highlight {
-  font-weight: 700;
-  color: #e74c3c;
-  font-size: 1.1rem;
-}
-
-.result-status {
-  padding: 12px;
-  border-radius: 8px;
-  text-align: center;
+  border: none;
+  border-radius: 50px;
+  padding: 15px 30px;
+  font-size: 1.2rem;
   font-weight: 600;
-  margin-top: 10px;
-  display: flex;
+  cursor: pointer;
+  transition: all 0.4s ease;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  min-width: 250px;
+  position: relative;
+  overflow: hidden;
 }
 
-.result-status.safe {
-  background: rgba(46, 204, 113, 0.15);
-  color: #27ae60;
+.calculate-btn i {
+  margin-right: 10px;
+  font-size: 1.4rem;
 }
 
-.result-status.warning {
-  background: rgba(231, 76, 60, 0.15);
-  color: #c0392b;
+.calculate-btn:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
+  background: linear-gradient(to right, #7de8df, #20a03d);
 }
 
-.card-footer {
-  background: rgba(245, 247, 250, 0.7);
-  padding: 15px 25px;
-  text-align: center;
-  color: #7f8c8d;
-  font-size: 0.9rem;
-  border-top: 1px solid #eee;
+.calculate-btn:active {
+  transform: translateY(-2px);
 }
 
-.info-section {
-  background: rgba(255, 255, 255, 0.7);
-  border-radius: 12px;
-  padding: 25px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+.calculate-btn:disabled {
+  background: gray;
+  cursor: not-allowed;
 }
 
-.info-section h3 {
-  color: #2c3e50;
-  margin-bottom: 15px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
+.card-footer {
+  text-align: center;
+  font-size: 1rem;
+  color: #00838f;
+  font-style: italic;
+  padding-top: 15px;
+  border-top: 1px solid rgba(0, 150, 136, 0.2);
 }
 
-.info-section ol {
-  padding-left: 25px;
-  margin-bottom: 25px;
+.card-footer i {
+  margin-right: 10px;
 }
 
-.info-section ol li {
-  margin-bottom: 10px;
-  line-height: 1.6;
+/* 水波纹效果 */
+.calculate-btn::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
 }
 
-.info-section p {
-  line-height: 1.6;
-  margin-bottom: 15px;
+.calculate-btn:active::after {
+  width: 200px;
+  height: 200px;
 }
 
 /* 响应式设计 */
-@media (max-width: 768px) {
-  .header {
-    padding: 15px;
+@media (max-width: 480px) {
+  .gradient-card {
+    padding: 20px;
+    width: 100%;
+    max-width: 100%;
   }
-  
-  .header h1 {
+
+  .card-header h1 {
     font-size: 1.8rem;
   }
-  
-  .card-body {
-    padding: 20px;
+
+  .instruction-section h2 {
+    font-size: 1.4rem;
   }
-  
-  .button-group {
-    flex-direction: column;
+
+  .label {
+    font-size: 1rem;
   }
-  
-  button {
-    width: 100%;
+
+  .custom-input {
+    padding: 12px;
+    font-size: 0.9rem;
+  }
+
+  .calculate-btn {
+    padding: 12px 25px;
+    font-size: 1rem;
+    min-width: 200px;
+  }
+
+  .info-item span {
+    font-size: 0.9rem;
   }
 }
-</style>
+</style>
+
+
+

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

@@ -1,410 +1,341 @@
 <template>
-  <div class="crop-cd-calculator">
-    <div class="header">
-      <h1>秸秆移除含量计算器</h1>
-      <p>评估作物镉含量及秸秆移除的影响，助力农业安全生产</p>
-    </div>
-    
-    <div class="card-container">
-      <div class="card">
-        <div class="card-header">
-          <i class="fas fa-leaf"></i>
-          <h2>作物镉模型计算</h2>
+  <div class="container">
+    <div class="gradient-card">
+      <div class="card-header">
+        <h1>秸秆移除含量计算器</h1>
+        <p>评估作物镉含量及秸秆移除的影响，助力农业安全生产</p>
+      </div>
+
+      <div class="instruction-section">
+        <h2>使用说明</h2>
+        <ol>
+          <li>首次使用请点击"作物镉模型计算"按钮。</li>
+          <li>点击"作物镉模型计算"按钮跳转到作物镉模型计算页面。</li>
+          <li>在作物镉模型计算页面完成计算后返回此页面。</li>
+        </ol>
+      </div>
+
+      <div class="crop-cd-model-section">
+        <button class="calculate-btn" @click="openCropCdModelPage">
+          <i class="fas fa-calculator"></i> 作物镉模型计算
+        </button>
+      </div>
+
+      <div class="input-section">
+        <div class="input-group">
+          <label class="label">作物亩产量 (斤)</label>
+          <input v-model="yieldPerMu" placeholder="800" class="custom-input" :disabled="!cropCdModelCalculated" />
         </div>
-        
-        <div class="card-body">
-          <div v-if="!inputsEnabled" class="enable-section">
-            <p>首次使用请点击下方按钮启用计算功能</p>
-            <button class="enable-btn" @click="enableInputs">
-              <i class="fas fa-calculator"></i> 启用作物镉模型计算
-            </button>
-          </div>
-          
-          <div v-if="inputsEnabled" class="input-section">
-            <div class="input-group">
-              <label for="yieldPerMu">
-                <i class="fas fa-weight-hanging"></i> 作物亩产量 (斤)
-              </label>
-              <input 
-                type="number" 
-                id="yieldPerMu" 
-                v-model.number="yieldPerMu" 
-                placeholder="800"
-                min="0"
-              >
-            </div>
-            
-            <div class="button-group">
-              <button class="calculate-btn" @click="showStrawRemovalMessage">
-                <i class="fas fa-calculator"></i> 计算秸秆移除含量
-              </button>
-              <button class="reset-btn" @click="resetInputs">
-                <i class="fas fa-redo"></i> 重置作物镉模型计算
-              </button>
-            </div>
-          </div>
-          
-          <div v-if="cropCd > 0" class="result-section">
-            <div class="result-card">
-              <h3>作物镉模型计算结果</h3>
-              <div class="result-content">
-                <div class="result-item">
-                  <span>作物镉含量:</span>
-                  <span class="highlight">{{ cropCd.toFixed(4) }} mg/kg</span>
-                </div>
-                <div class="result-item">
-                  <span>国家标准限值:</span>
-                  <span>0.2 mg/kg</span>
-                </div>
-                <div class="result-status" :class="{'safe': cropCd <= 0.2, 'warning': cropCd > 0.2}">
-                  <i :class="cropCd <= 0.2 ? 'fas fa-check-circle' : 'fas fa-exclamation-triangle'"></i>
-                  {{ cropCd <= 0.2 ? '符合安全标准' : '超出安全标准' }}
-                </div>
-              </div>
-            </div>
+
+        <div class="info-panel">
+          <div class="info-item">
+            <i class="fas fa-chart-line"></i>
+            <span>建议范围: 500 - 1500</span>
           </div>
         </div>
-        
-        <div class="card-footer">
-          <p>安全标准依据: GB 2762-2022 食品安全国家标准</p>
-        </div>
       </div>
-    </div>
-    
-    <div class="info-section">
-      <h3><i class="fas fa-info-circle"></i> 使用说明</h3>
-      <ol>
-        <li>首次使用请点击"启用作物镉模型计算"按钮</li>
-        <li>输入土壤镉含量、作物镉富集系数和作物亩产量</li>
-        <li>点击"计算作物镉含量"按钮获取结果</li>
-        <li>"重置作物镉模型计算"按钮用于重置所有输入数据</li>
-      </ol>
-      
-      <h3><i class="fas fa-lightbulb"></i> 计算原理</h3>
-      <p>作物镉含量 = 土壤镉含量 × 作物镉富集系数</p>
-      <p>计算结果与国家食品安全标准(0.2 mg/kg)对比评估安全性</p>
+
+      <div class="button-section">
+        <button class="calculate-btn" :disabled="!cropCdModelCalculated || !yieldPerMu" @click="onCalculate">
+          <i class="fas fa-calculator"></i> 秸秆移除计算
+        </button>
+      </div>
+
+      <div class="card-footer">
+        <p><i class="fas fa-lightbulb"></i> 提示: 输入数据后点击"秸秆移除计算"按钮获取详细分析</p>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
-  name: 'CropCdCalculator',
-  data() {
+  name: 'GrainRemovalCalculator',
+  setup() {
+    const cropCdModelCalculated = ref(false);
+    const yieldPerMu = ref(null);
+
+    const openCropCdModelPage = () => {
+      // 这里可以实现跳转到作物镉模型计算页面的逻辑
+      // 例如：window.location.href = '/crop-cd-model';
+      alert('打开作物镉模型计算页面');
+      cropCdModelCalculated.value = true;
+    };
+
+    const onCalculate = () => {
+      if (!yieldPerMu.value) {
+        alert('请输入作物亩产量');
+        return;
+      }
+      alert(`计算完成！当前亩产量: ${yieldPerMu.value} 斤`);
+    };
+
     return {
-      inputsEnabled: false,
-      yieldPerMu: 800,
-      cropCd: 0
+      cropCdModelCalculated,
+      yieldPerMu,
+      openCropCdModelPage,
+      onCalculate
     };
-  },
-  methods: {
-    enableInputs() {
-      this.inputsEnabled = true;
-    },
-    calculateCropCd() {
-      // 假设土壤镉含量和作物镉富集系数默认值分别为 0.5 和 0.05
-      const soilCd = 0.5;
-      const enrichmentFactor = 0.05;
-      // 作物镉含量计算模型
-      this.cropCd = soilCd * enrichmentFactor;
-    },
-    resetInputs() {
-      this.yieldPerMu = 800;
-      this.cropCd = 0;
-    },
-    showStrawRemovalMessage() {
-      alert("计算秸秆移除含量功能未启用");
-    }
   }
 };
 </script>
 
 <style scoped>
-.crop-cd-calculator {
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 20px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  color: #333;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
-  border-radius: 15px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+body,
+html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+  /* 禁止页面滚动 */
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* 居中对齐 */
+  height: 100vh;
+}
+
+.gradient-card {
+  background: linear-gradient(135deg,
+      rgba(250, 253, 255, 0.8),
+      rgba(137, 223, 252, 0.8));
+  border-radius: 20px;
+  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
+  padding: 30px;
+  width: 100%;
+  max-width: 500px;
+  backdrop-filter: blur(8px);
+  border: none;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.header {
+.card-header {
   text-align: center;
-  margin-bottom: 30px;
-  padding: 25px;
-  background: linear-gradient(135deg, rgba(38, 176, 70, 0.7) 0%, rgba(26, 122, 50, 0.7) 100%);
-  border-radius: 10px;
-  color: white;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
 }
 
-.header h1 {
-  font-size: 2.2rem;
+.card-header h1 {
+  font-size: 2rem;
+  color: #006064;
   margin-bottom: 10px;
-  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+  font-weight: 700;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
 }
 
-.header p {
+.card-header p {
   font-size: 1.1rem;
+  color: #00838f;
   opacity: 0.9;
 }
 
-.card-container {
-  margin-bottom: 30px;
-}
-
-.card {
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 12px;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
-  overflow: hidden;
-}
-
-.card-header {
-  background: linear-gradient(135deg, rgba(52, 152, 219, 0.7) 0%, rgba(31, 111, 181, 0.7) 100%);
-  color: white;
-  padding: 18px 25px;
-  display: flex;
-  align-items: center;
-  gap: 15px;
+.instruction-section {
+  text-align: center;
+  margin-bottom: 20px;
 }
 
-.card-header h2 {
-  font-size: 1.6rem;
-  font-weight: 600;
+.instruction-section h2 {
+  font-size: 1.5rem;
+  color: #006064;
+  margin-bottom: 10px;
 }
 
-.card-header i {
-  font-size: 1.8rem;
+.instruction-section ol {
+  list-style-type: decimal;
+  padding-left: 20px;
+  margin-bottom: 20px;
 }
 
-.card-body {
-  padding: 25px;
+.instruction-section li {
+  font-size: 1rem;
+  color: #00838f;
+  margin-bottom: 5px;
 }
 
-.enable-section {
+.crop-cd-model-section {
   text-align: center;
-  padding: 30px 20px;
-}
-
-.enable-section p {
-  margin-bottom: 25px;
-  font-size: 1.1rem;
-  color: #555;
+  margin-bottom: 20px;
 }
 
 .input-section {
-  display: grid;
-  gap: 20px;
+  margin: 20px 0;
 }
 
 .input-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+  margin-bottom: 20px;
 }
 
-.input-group label {
+.label {
+  display: block;
   font-weight: 600;
-  color: #2c3e50;
-  display: flex;
-  align-items: center;
-  gap: 10px;
+  font-size: 1.2rem;
+  margin-bottom: 10px;
+  color: #006064;
 }
 
-.input-group input {
-  padding: 14px 15px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  font-size: 16px;
-  transition: all 0.3s;
-  background: #f9fbfd;
+.custom-input {
+  width: 100%;
+  padding: 15px 10px;
+  border-radius: 12px;
+  border: 2px solid #80deea;
+  font-size: 1rem;
+  background: rgba(255, 255, 255, 0.7);
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
 }
 
-.input-group input:focus {
+.custom-input:focus {
   outline: none;
-  border-color: #3498db;
-  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
+  border-color: #26c6da;
+  box-shadow: 0 0 0 4px rgba(38, 198, 218, 0.3);
 }
 
-.button-group {
-  display: flex;
-  gap: 15px;
+.custom-input:disabled {
+  background: rgba(255, 255, 255, 0.3);
+  border-color: #ccc;
+  cursor: not-allowed;
+}
+
+.info-panel {
+  background: rgba(178, 235, 242, 0.4);
+  border-radius: 12px;
+  padding: 15px;
   margin-top: 15px;
-  flex-wrap: wrap;
 }
 
-button {
-  padding: 14px 25px;
-  border: none;
-  border-radius: 8px;
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
+.info-item {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 10px;
-  flex: 1;
-  min-width: 200px;
+  margin-bottom: 10px;
+  font-size: 1rem;
+  color: #006064;
 }
 
-.enable-btn {
-  background: linear-gradient(to right, rgba(38, 176, 70, 0.7), rgba(26, 122, 50, 0.7));
-  color: white;
-  max-width: 350px;
-  margin: 0 auto;
-  box-shadow: 0 4px 10px rgba(38, 176, 70, 0.3);
+.info-item i {
+  margin-right: 10px;
+  font-size: 1.2rem;
+  color: #00838f;
 }
 
-.enable-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 15px rgba(38, 176, 70, 0.4);
+.button-section {
+  margin: 25px 0;
+  text-align: center;
+  flex-grow: 1;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
 }
 
 .calculate-btn {
-  background: linear-gradient(to right, rgba(52, 152, 219, 0.7), rgba(31, 111, 181, 0.7));
-  color: white;
-  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
-}
-
-.calculate-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);
-}
-
-.reset-btn {
-  background: linear-gradient(to right, rgba(241, 196, 15, 0.7), rgba(243, 156, 18, 0.7));
+  background: linear-gradient(to right, #8DF9F0, #26B046);
   color: white;
-  box-shadow: 0 4px 10px rgba(241, 196, 15, 0.3);
-}
-
-.reset-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 15px rgba(241, 196, 15, 0.4);
-}
-
-.result-section {
-  margin-top: 30px;
-  border-top: 1px solid #eee;
-  padding-top: 25px;
-}
-
-.result-card {
-  background: rgba(249, 251, 253, 0.7);
-  border-radius: 10px;
-  padding: 20px;
-  border-left: 4px solid #3498db;
-}
-
-.result-card h3 {
-  margin-bottom: 15px;
-  color: #2c3e50;
-}
-
-.result-content {
-  display: grid;
-  gap: 15px;
-}
-
-.result-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 10px 0;
-  border-bottom: 1px dashed #eee;
-}
-
-.highlight {
-  font-weight: 700;
-  color: #e74c3c;
-  font-size: 1.1rem;
-}
-
-.result-status {
-  padding: 12px;
-  border-radius: 8px;
-  text-align: center;
+  border: none;
+  border-radius: 50px;
+  padding: 15px 30px;
+  font-size: 1.2rem;
   font-weight: 600;
-  margin-top: 10px;
-  display: flex;
+  cursor: pointer;
+  transition: all 0.4s ease;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  min-width: 250px;
+  position: relative;
+  overflow: hidden;
 }
 
-.result-status.safe {
-  background: rgba(46, 204, 113, 0.15);
-  color: #27ae60;
+.calculate-btn i {
+  margin-right: 10px;
+  font-size: 1.4rem;
 }
 
-.result-status.warning {
-  background: rgba(231, 76, 60, 0.15);
-  color: #c0392b;
+.calculate-btn:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
+  background: linear-gradient(to right, #7de8df, #20a03d);
 }
 
-.card-footer {
-  background: rgba(245, 247, 250, 0.7);
-  padding: 15px 25px;
-  text-align: center;
-  color: #7f8c8d;
-  font-size: 0.9rem;
-  border-top: 1px solid #eee;
+.calculate-btn:active {
+  transform: translateY(-2px);
 }
 
-.info-section {
-  background: rgba(255, 255, 255, 0.7);
-  border-radius: 12px;
-  padding: 25px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+.calculate-btn:disabled {
+  background: gray;
+  cursor: not-allowed;
 }
 
-.info-section h3 {
-  color: #2c3e50;
-  margin-bottom: 15px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
+.card-footer {
+  text-align: center;
+  font-size: 1rem;
+  color: #00838f;
+  font-style: italic;
+  padding-top: 15px;
+  border-top: 1px solid rgba(0, 150, 136, 0.2);
 }
 
-.info-section ol {
-  padding-left: 25px;
-  margin-bottom: 25px;
+.card-footer i {
+  margin-right: 10px;
 }
 
-.info-section ol li {
-  margin-bottom: 10px;
-  line-height: 1.6;
+/* 水波纹效果 */
+.calculate-btn::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
 }
 
-.info-section p {
-  line-height: 1.6;
-  margin-bottom: 15px;
+.calculate-btn:active::after {
+  width: 200px;
+  height: 200px;
 }
 
 /* 响应式设计 */
-@media (max-width: 768px) {
-  .header {
-    padding: 15px;
+@media (max-width: 480px) {
+  .gradient-card {
+    padding: 20px;
+    width: 100%;
+    max-width: 100%;
   }
-  
-  .header h1 {
+
+  .card-header h1 {
     font-size: 1.8rem;
   }
-  
-  .card-body {
-    padding: 20px;
+
+  .instruction-section h2 {
+    font-size: 1.4rem;
   }
-  
-  .button-group {
-    flex-direction: column;
+
+  .label {
+    font-size: 1rem;
   }
-  
-  button {
-    width: 100%;
+
+  .custom-input {
+    padding: 12px;
+    font-size: 0.9rem;
+  }
+
+  .calculate-btn {
+    padding: 12px 25px;
+    font-size: 1rem;
+    min-width: 200px;
+  }
+
+  .info-item span {
+    font-size: 0.9rem;
   }
 }
-</style>
+</style>

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

@@ -9,8 +9,8 @@
       <div class="card-content">
         <div class="input-section">
           <div class="input-group">
-            <label class="label">地下渗漏量 (g/ha/a)</label>
-            <input v-model="leakage" placeholder="请输入渗漏量" class="custom-input" />
+            <label class="label">地下渗漏 (g/ha/a)</label>
+            <input v-model="leakage" placeholder="请输入地表径流" class="custom-input" />
           </div>
 
           <div class="info-panel">
@@ -27,13 +27,13 @@
 
         <div class="button-section">
           <button class="calculate-btn" @click="onCalculate">
-            <i class="fas fa-calculator"></i> 计算渗漏量
+            <i class="fas fa-calculator"></i> 计算地表径流
           </button>
         </div>
       </div>
 
       <div class="card-footer">
-        <p><i class="fas fa-lightbulb"></i> 提示: 输入渗漏量后点击计算按钮获取详细分析</p>
+        <p><i class="fas fa-lightbulb"></i> 提示: 输入地表径流后点击计算按钮获取详细分析</p>
       </div>
     </div>
   </div>
@@ -48,7 +48,7 @@ export default {
     const leakage = ref('0.023');
 
     const onCalculate = () => {
-      alert(`计算完成！当前渗漏量: ${leakage.value || '0.023'} g/ha/a`);
+      alert(`计算完成！当前地表径流: ${leakage.value || '0.023'} g/ha/a`);
     };
 
     return {
@@ -60,13 +60,11 @@ export default {
 </script>
 
 <style scoped>
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  padding: 20px;
-  background-size: 400% 400%;
+body, html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden; /* 禁止页面滚动 */
 }
 
 .gradient-card {
@@ -75,9 +73,10 @@ export default {
       rgba(137, 223, 252, 0.8));
   border-radius: 20px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
-  padding: 40px;
-  width: 700px; /* 固定宽度 */
-  height: 700px; /* 固定高度 */
+  padding: 30px;
+  width: 100%;
+  max-width: 500px;
+  margin-left: 350px; /* 左侧留出空间 */
   backdrop-filter: blur(8px);
   border: none;
   display: flex;
@@ -87,11 +86,11 @@ export default {
 
 .card-header {
   text-align: center;
-  margin-bottom: 30px;
+  margin-bottom: 20px;
 }
 
 .card-header h1 {
-  font-size: 2.5rem;
+  font-size: 2rem;
   color: #006064;
   margin-bottom: 10px;
   font-weight: 700;
@@ -99,33 +98,33 @@ export default {
 }
 
 .card-header p {
-  font-size: 1.2rem;
+  font-size: 1.1rem;
   color: #00838f;
   opacity: 0.9;
 }
 
 .input-section {
-  margin: 30px 0;
+  margin: 20px 0;
 }
 
 .input-group {
-  margin-bottom: 25px;
+  margin-bottom: 20px;
 }
 
 .label {
   display: block;
   font-weight: 600;
-  font-size: 1.4rem;
-  margin-bottom: 15px;
+  font-size: 1.2rem;
+  margin-bottom: 10px;
   color: #006064;
 }
 
 .custom-input {
   width: 100%;
-  padding: 18px 10px;
+  padding: 15px 10px;
   border-radius: 12px;
   border: 2px solid #80deea;
-  font-size: 1.3rem;
+  font-size: 1rem;
   background: rgba(255, 255, 255, 0.7);
   transition: all 0.3s ease;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
@@ -140,26 +139,26 @@ export default {
 .info-panel {
   background: rgba(178, 235, 242, 0.4);
   border-radius: 12px;
-  padding: 20px;
-  margin-top: 20px;
+  padding: 15px;
+  margin-top: 15px;
 }
 
 .info-item {
   display: flex;
   align-items: center;
-  margin-bottom: 12px;
-  font-size: 1.2rem;
+  margin-bottom: 10px;
+  font-size: 1rem;
   color: #006064;
 }
 
 .info-item i {
-  margin-right: 12px;
-  font-size: 1.4rem;
+  margin-right: 10px;
+  font-size: 1.2rem;
   color: #00838f;
 }
 
 .button-section {
-  margin: 35px 0;
+  margin: 25px 0;
   text-align: center;
   flex-grow: 1;
   display: flex;
@@ -172,8 +171,8 @@ export default {
   color: white;
   border: none;
   border-radius: 50px;
-  padding: 20px 40px;
-  font-size: 1.5rem;
+  padding: 15px 30px;
+  font-size: 1.2rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.4s ease;
@@ -181,14 +180,14 @@ export default {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 300px;
+  min-width: 250px;
   position: relative;
   overflow: hidden;
 }
 
 .calculate-btn i {
-  margin-right: 12px;
-  font-size: 1.6rem;
+  margin-right: 10px;
+  font-size: 1.4rem;
 }
 
 .calculate-btn:hover {
@@ -203,10 +202,10 @@ export default {
 
 .card-footer {
   text-align: center;
-  font-size: 1.2rem;
+  font-size: 1rem;
   color: #00838f;
   font-style: italic;
-  padding-top: 20px;
+  padding-top: 15px;
   border-top: 1px solid rgba(0, 150, 136, 0.2);
 }
 
@@ -229,36 +228,39 @@ export default {
 }
 
 .calculate-btn:active::after {
-  width: 300px;
-  height: 300px;
+  width: 200px;
+  height: 200px;
 }
 
 /* 响应式设计 */
-@media (max-width: 768px) {
+@media (max-width: 480px) {
   .gradient-card {
-    padding: 25px;
+    padding: 20px;
     width: 100%;
-    height: auto;
-    min-height: 500px;
+    max-width: 100%;
   }
 
   .card-header h1 {
-    font-size: 2rem;
+    font-size: 1.8rem;
   }
 
   .label {
-    font-size: 1.2rem;
+    font-size: 1rem;
   }
 
   .custom-input {
-    padding: 15px;
-    font-size: 1.1rem;
+    padding: 12px;
+    font-size: 0.9rem;
   }
 
   .calculate-btn {
-    padding: 16px 30px;
-    font-size: 1.3rem;
-    min-width: 250px;
+    padding: 12px 25px;
+    font-size: 1rem;
+    min-width: 200px;
+  }
+
+  .info-item span {
+    font-size: 0.9rem;
   }
 }
 </style>

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

@@ -10,7 +10,7 @@
         <div class="input-section">
           <div class="input-group">
             <label class="label">地表径流 (g/ha/a)</label>
-            <input v-model="leakage" placeholder="请输入渗漏量" class="custom-input" />
+            <input v-model="leakage" placeholder="请输入地表径流" class="custom-input" />
           </div>
 
           <div class="info-panel">
@@ -27,13 +27,13 @@
 
         <div class="button-section">
           <button class="calculate-btn" @click="onCalculate">
-            <i class="fas fa-calculator"></i> 计算渗漏量
+            <i class="fas fa-calculator"></i> 计算地表径流
           </button>
         </div>
       </div>
 
       <div class="card-footer">
-        <p><i class="fas fa-lightbulb"></i> 提示: 输入渗漏量后点击计算按钮获取详细分析</p>
+        <p><i class="fas fa-lightbulb"></i> 提示: 输入地表径流后点击计算按钮获取详细分析</p>
       </div>
     </div>
   </div>
@@ -48,7 +48,7 @@ export default {
     const leakage = ref('0.368');
 
     const onCalculate = () => {
-      alert(`计算完成！当前渗漏量: ${leakage.value || '0.368'} g/ha/a`);
+      alert(`计算完成！当前地表径流: ${leakage.value || '0.368'} g/ha/a`);
     };
 
     return {
@@ -60,13 +60,11 @@ export default {
 </script>
 
 <style scoped>
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  padding: 20px;
-  background-size: 400% 400%;
+body, html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden; /* 禁止页面滚动 */
 }
 
 .gradient-card {
@@ -75,9 +73,10 @@ export default {
       rgba(137, 223, 252, 0.8));
   border-radius: 20px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
-  padding: 40px;
-  width: 700px; /* 固定宽度 */
-  height: 700px; /* 固定高度 */
+  padding: 30px;
+  width: 100%;
+  max-width: 500px;
+  margin-left: 350px; /* 左侧留出空间 */
   backdrop-filter: blur(8px);
   border: none;
   display: flex;
@@ -87,11 +86,11 @@ export default {
 
 .card-header {
   text-align: center;
-  margin-bottom: 30px;
+  margin-bottom: 20px;
 }
 
 .card-header h1 {
-  font-size: 2.5rem;
+  font-size: 2rem;
   color: #006064;
   margin-bottom: 10px;
   font-weight: 700;
@@ -99,33 +98,33 @@ export default {
 }
 
 .card-header p {
-  font-size: 1.2rem;
+  font-size: 1.1rem;
   color: #00838f;
   opacity: 0.9;
 }
 
 .input-section {
-  margin: 30px 0;
+  margin: 20px 0;
 }
 
 .input-group {
-  margin-bottom: 25px;
+  margin-bottom: 20px;
 }
 
 .label {
   display: block;
   font-weight: 600;
-  font-size: 1.4rem;
-  margin-bottom: 15px;
+  font-size: 1.2rem;
+  margin-bottom: 10px;
   color: #006064;
 }
 
 .custom-input {
   width: 100%;
-  padding: 18px 10px;
+  padding: 15px 10px;
   border-radius: 12px;
   border: 2px solid #80deea;
-  font-size: 1.3rem;
+  font-size: 1rem;
   background: rgba(255, 255, 255, 0.7);
   transition: all 0.3s ease;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
@@ -140,26 +139,26 @@ export default {
 .info-panel {
   background: rgba(178, 235, 242, 0.4);
   border-radius: 12px;
-  padding: 20px;
-  margin-top: 20px;
+  padding: 15px;
+  margin-top: 15px;
 }
 
 .info-item {
   display: flex;
   align-items: center;
-  margin-bottom: 12px;
-  font-size: 1.2rem;
+  margin-bottom: 10px;
+  font-size: 1rem;
   color: #006064;
 }
 
 .info-item i {
-  margin-right: 12px;
-  font-size: 1.4rem;
+  margin-right: 10px;
+  font-size: 1.2rem;
   color: #00838f;
 }
 
 .button-section {
-  margin: 35px 0;
+  margin: 25px 0;
   text-align: center;
   flex-grow: 1;
   display: flex;
@@ -172,8 +171,8 @@ export default {
   color: white;
   border: none;
   border-radius: 50px;
-  padding: 20px 40px;
-  font-size: 1.5rem;
+  padding: 15px 30px;
+  font-size: 1.2rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.4s ease;
@@ -181,14 +180,14 @@ export default {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 300px;
+  min-width: 250px;
   position: relative;
   overflow: hidden;
 }
 
 .calculate-btn i {
-  margin-right: 12px;
-  font-size: 1.6rem;
+  margin-right: 10px;
+  font-size: 1.4rem;
 }
 
 .calculate-btn:hover {
@@ -203,10 +202,10 @@ export default {
 
 .card-footer {
   text-align: center;
-  font-size: 1.2rem;
+  font-size: 1rem;
   color: #00838f;
   font-style: italic;
-  padding-top: 20px;
+  padding-top: 15px;
   border-top: 1px solid rgba(0, 150, 136, 0.2);
 }
 
@@ -229,36 +228,42 @@ export default {
 }
 
 .calculate-btn:active::after {
-  width: 300px;
-  height: 300px;
+  width: 200px;
+  height: 200px;
 }
 
 /* 响应式设计 */
-@media (max-width: 768px) {
+@media (max-width: 480px) {
   .gradient-card {
-    padding: 25px;
+    padding: 20px;
     width: 100%;
-    height: auto;
-    min-height: 500px;
+    max-width: 100%;
   }
 
   .card-header h1 {
-    font-size: 2rem;
+    font-size: 1.8rem;
   }
 
   .label {
-    font-size: 1.2rem;
+    font-size: 1rem;
   }
 
   .custom-input {
-    padding: 15px;
-    font-size: 1.1rem;
+    padding: 12px;
+    font-size: 0.9rem;
   }
 
   .calculate-btn {
-    padding: 16px 30px;
-    font-size: 1.3rem;
-    min-width: 250px;
+    padding: 12px 25px;
+    font-size: 1rem;
+    min-width: 200px;
+  }
+
+  .info-item span {
+    font-size: 0.9rem;
   }
 }
-</style>
+</style>
+
+
+