更新样式

.env

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

components.d.ts

@@ -18,6 +18,7 @@ declare module 'vue' {
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -30,11 +31,16 @@ declare module 'vue' {
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
     IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']

package-lock.json

@@ -9,6 +9,9 @@
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
+        "@fortawesome/fontawesome-svg-core": "^7.0.0",
+        "@fortawesome/free-solid-svg-icons": "^7.0.0",
+        "@fortawesome/vue-fontawesome": "^3.1.1",
         "@turf/turf": "^7.2.0",
         "@types/d3": "^7.4.3",
         "@wangeditor/editor": "^5.1.23",
@@ -1188,6 +1191,49 @@
       "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
       "license": "MIT"
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.0.0.tgz",
+      "integrity": "sha512-PGMrIYXLGA5K8RWy8zwBkd4vFi4z7ubxtet6Yn13Plf6krRTwPbdlCwlcfmoX0R7B4Z643QvrtHmdQ5fNtfFCg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.0.0.tgz",
+      "integrity": "sha512-obBEF+zd98r/KtKVW6A+8UGWeaOoyMpl6Q9P3FzHsOnsg742aXsl8v+H/zp09qSSu/a/Hxe9LNKzbBaQq1CEbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.0.0.tgz",
+      "integrity": "sha512-njSLAllkOddYDCXgTFboXn54Oe5FcvpkWq+FoetOHR64PbN0608kM02Lze0xtISGpXgP+i26VyXRQA0Irh3Obw==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/vue-fontawesome": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.1.1.tgz",
+      "integrity": "sha512-U5azn4mcUVpjHe4JO0Wbe7Ih8e3VbN83EH7OTBtA5/QGw9qcPGffqcmwsLyZYgEkpVkYbq/6dX1Iyl5KUGMp6Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6 || ~7",
+        "vue": ">= 3.0.0 < 4"
+      }
+    },
     "node_modules/@iconify-json/ep": {
       "version": "1.2.2",
       "resolved": "https://registry.npmmirror.com/@iconify-json/ep/-/ep-1.2.2.tgz",

package.json

@@ -13,6 +13,9 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@fortawesome/fontawesome-svg-core": "^7.0.0",
+    "@fortawesome/free-solid-svg-icons": "^7.0.0",
+    "@fortawesome/vue-fontawesome": "^3.1.1",
     "@turf/turf": "^7.2.0",
     "@types/d3": "^7.4.3",
     "@wangeditor/editor": "^5.1.23",

src/components/layout/AppLayout.vue

@@ -1,54 +1,33 @@
 <template>
-  <div class="layout-wrapper" :class="{ 'full-screen': isFullScreen }">
-    <!-- 背景层 - 只在需要透明的地方显示 -->
-    <div 
-      class="background-layer" 
-      v-if="!isFullScreen && !isSelectCity && !isExcludedRoute"
-    ></div>
-    
-    <!-- Header 部分 -->
-    <el-header 
-      class="layout-header" 
-      v-if="!isFullScreen"
-      :class="{ 'excluded-bg-header': isExcludedRoute }"
-    >
+  <div class="layout-wrapper" :class="{ 'full-screen': isFullScreen }" :style="isSpecialBg ? backgroundStyle : {}">
+    <!-- 背景层 - 关键修改 -->
+    <div v-if="isSpecialBg" class="background-layer"></div>
+
+    <!-- Header 部分（透明背景） -->
+    <el-header class="layout-header" v-if="!isFullScreen" :class="{ 'transparent-header': isSpecialBg }">
       <div class="logo-title-row">
         <img src="@/assets/logo.png" alt="Logo" class="logo" />
         <div class="title-and-user">
-          <span 
-            class="project-name"
-            :class="{ 'excluded-text': isExcludedRoute }"
-          >
+          <span class="project-name" :class="{ 'light-text': isSpecialBg }">
             区域土壤重金属污染风险评估
           </span>
-          
+
           <!-- 用户信息 - 在select-city页面隐藏 -->
-          <div 
-            class="user-info-row" 
-            v-if="!isSelectCity"
-            :class="{ 'excluded-text': isExcludedRoute }"
-          >
-            <span class="welcome-text">
+          <div class="user-info-row" v-if="!isSelectCity">
+            <span class="welcome-text" :class="{ 'light-text': isSpecialBg }">
               欢迎{{
                 tokenStore.token.loginType === "admin" ? "管理员" : "用户"
               }}登录成功
             </span>
             <el-dropdown>
               <span class="el-dropdown-link">
-                <el-avatar
-                  :size="40"
-                  :class="{ 'excluded-avatar-border': isExcludedRoute }"
-                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
-                />
+                <el-avatar :size="40" :class="{ 'light-avatar-border': isSpecialBg }"
+                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
               </span>
               <template #dropdown>
                 <el-dropdown-menu>
-                  <el-dropdown-item disabled
-                    >用户名：{{ userInfo.name }}</el-dropdown-item
-                  >
-                  <el-dropdown-item divided @click="handleLogout"
-                    >退出登录</el-dropdown-item
-                  >
+                  <el-dropdown-item disabled>用户名：{{ userInfo.name }}</el-dropdown-item>
+                  <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -57,15 +36,9 @@
       </div>
     </el-header>
 
-    <!-- Tab 区域 - 不透明 -->
+    <!-- Tab 区域（不加背景图） -->
     <div class="tabs-row" v-if="!isFullScreen">
-      <el-tabs
-        v-if="showTabs"
-        v-model="activeName"
-        class="demo-tabs"
-        :style="tabStyle"
-        @tab-click="handleClick"
-      >
+      <el-tabs v-if="showTabs" v-model="activeName" class="demo-tabs" :style="tabStyle" @tab-click="handleClick">
         <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">
           <template #label>
             <i :class="['tab-icon', tab.icon]"></i>
@@ -81,27 +54,14 @@
 
     <!-- 主体区域 -->
     <el-container class="layout-main-container">
-      <!-- 侧边栏 - 不透明 -->
+      <!-- 侧边栏（不加背景图） -->
       <el-aside v-if="showAside && showTabs" class="layout-aside">
-        <component
-          :is="AsideComponent"
-          :activeTab="activeName"
-          :showTabs="showTabs"
-        />
+        <component :is="AsideComponent" :activeTab="activeName" :showTabs="showTabs" />
       </el-aside>
 
-      <!-- 内容区域 -->
-      <el-main 
-        class="layout-content-wrapper" 
-        :style="mainStyle"
-        :class="{ 'excluded-bg-content': isExcludedRoute }"
-      >
-        <div
-          class="scrollable-content"
-          :style="{ 
-            backgroundImage: currentBgImage,
-          }"
-        >
+      <!-- 内容区域（透明背景） -->
+      <el-main class="layout-content-wrapper" :style="mainStyle">
+        <div class="scrollable-content" :class="{ 'transparent-scroll': isSpecialBg }">
           <div :class="{ 'select-city-container': isSelectCity }">
             <RouterView />
           </div>
@@ -118,43 +78,85 @@ import { useTokenStore } from "@/stores/mytoken";
 import { ElMessageBox, ElMessage } from "element-plus";
 import { logout } from "@/API/users";
 
-// 使用更可靠的图片导入方式
-function getImageUrl(name: string) {
-  try {
-    return new URL(`../../assets/bg/${name}`, import.meta.url).href;
-  } catch (error) {
-    console.error("加载背景图失败:", error);
-    return "";
-  }
-}
-
 const router = useRouter();
 const route = useRoute();
 const tokenStore = useTokenStore();
 const currentBgImage = ref("");
 
+// 定义需要背景图的特殊路由和对应图片文件名
+const bgRouteMap: Record<string, string> = {
+  // 添加灌溉水相关页面的背景图
+  "/samplingMethodDevice1": "irrigation.jpg",
+  "/irriSampleData": "irrigation.jpg",
+  "/csSampleData": "irrigation.jpg",
+  "/irriInputFlux": "irrigation.jpg",
+  // 添加大农产品投入相关页面的背景图
+  "/farmInputSamplingDesc": "agricultural_input.png",
+  "/prodInputFlux": "agricultural_input.png",
+  // 添加大气干湿沉降相关页面的背景图
+  "/AtmosDepositionSamplingDesc": "atmospheric_deposition.png",
+  "/heavyMetalEnterprise": "atmospheric_deposition.png",
+  "/airSampleData": "atmospheric_deposition.png",
+  "/airInputFlux": "atmospheric_deposition.png",
+  //添加籽粒移除相关页面的背景图
+  "/samplingDesc1": "rain_removal.png",
+  "/grainRemovalInputFlux": "rain_removal.png",
+  //添加秸秆移除相关页面的背景图
+  "/samplingDesc2": "straw-removal.png",
+  "/strawRemovalInputFlux": "straw-removal.png",
+  //添加地下渗漏相关页面的背景图
+  "/samplingDesc3": "subsurface-leakage.jpg",
+  "/subsurfaceLeakageInputFlux": "subsurface-leakage.jpg",
+  //添加地表径流相关页面的背景图
+  "/samplingDesc4": "surface-runoff.jpg",
+  "/surfaceRunoffInputFlux": "surface-runoff.jpg",
+};
+
+// 当前是否为特殊背景图页面
+const isSpecialBg = computed(() => Object.keys(bgRouteMap).includes(route.path));
+
+function getBgImageUrl(): string {
+  const bgFile = bgRouteMap[route.path];
+  console.log("根据路径查找背景文件名:", bgFile);
+  if (bgFile) {
+    try {
+      const url = `url(${new URL(`../../assets/bg/${bgFile}`, import.meta.url).href})`;
+      return url;
+    } catch (error) {
+      console.error("加载背景图失败:", error);
+      return "";
+    }
+  }
+  return "";
+}
+
+// 监听路由变化更新背景图，并打印日志
+watch(
+  () => route.path,
+  (newPath) => {
+    currentBgImage.value = getBgImageUrl();
+    console.log(`[背景图更新] 当前路径: ${newPath}, 背景图: ${currentBgImage.value}`);
+  },
+  { immediate: true }
+);
+
+// 背景图样式 - 关键修改
+const backgroundStyle = computed(() => {
+  return {
+    backgroundImage: currentBgImage.value,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    backgroundAttachment: 'fixed'
+  };
+});
+
 // 是否为全屏页面
 const isFullScreen = computed(() => route.meta.fullScreen === true);
 
 // 判断是否是select-city页面
 const isSelectCity = computed(() => route.path === "/select-city");
 
-// 背景图路径映射 - 使用简单路径
-const routeBackgroundMap: Record<string, string> = {
-  "/samplingMethodDevice1": getImageUrl("irrigation.jpg"),
-  "/irriSampleData": getImageUrl("irrigation.jpg"),
-  "/csSampleData": getImageUrl("irrigation.jpg"),
-  "/irriInputFlux": getImageUrl("irrigation.jpg"),
-  "/prodInputFlux": getImageUrl("agricultural_input.png"),
-  "/airSampleData": getImageUrl("atmospheric_deposition.png"),
-  "/airInputFlux": getImageUrl("atmospheric_deposition.png"),
-  "/heavyMetalEnterprise": getImageUrl("atmospheric_deposition.png"),
-  "/grainRemovalInputFlux": getImageUrl("grain_removal.png"),
-  "/strawRemovalInputFlux": getImageUrl("straw_removal.png"),
-  "/subsurfaceLeakageInputFlux": getImageUrl("subsurface_leakage.jpg"),
-  "/surfaceRunoffInputFlux": getImageUrl("surface_runoff.jpg"),
-};
-
 // Tab 配置
 const tabs = computed(() => {
   if (tokenStore.token.loginType === "admin") {
@@ -226,9 +228,10 @@ const tabs = computed(() => {
           "/irriSampleData",
           "/csSampleData",
           "/irriInputFlux",
-          "/samplingDesc2",
+          "/farmInputSamplingDesc",
           "/prodInputFlux",
-          "/samplingDesc3",
+          "/AtmosDepositionSamplingDesc",
+          "/heavyMetalEnterprise",
           "/airSampleData",
           "/airInputFlux",
         ],
@@ -310,7 +313,7 @@ const tabs = computed(() => {
   }
 });
 
-// 计算：当前激活 tab - 保持不变
+// 当前激活 tab
 const activeName = ref(tabs.value[0]?.name || "");
 const showTabs = computed(() => tabs.value.length > 1);
 const tabStyle = computed(() =>
@@ -334,43 +337,6 @@ watch(
   { immediate: true }
 );
 
-// 显式列出所有不需要背景图的路由路径
-const bgExcludedRoutes = computed(() => {
-  return [
-    // 列出所有不需要背景图的路由路径
-    "/shuJuKanBan",
-    "/mapView",
-    "/cropRiskAssessment",
-    "/farmlandQualityAssessment",
-    "/dataStatistics",
-    
-    // 强制"重金属输入通量"和"重金属输出通量"下的所有路由为白色背景
-    ...tabs.value
-      .filter(tab => ["HmOutFlux", "hmInFlux"].includes(tab.name))
-      .flatMap(tab => tab.routes)
-  ];
-});
-
-// 判断当前路由是否在排除列表中
-const isExcludedRoute = computed(() => bgExcludedRoutes.value.includes(route.path));
-
-// 获取当前页面的背景图
-const getBgImage = (path: string) => {
-  // 若当前路径属于排除项，不显示背景图
-  if (isExcludedRoute.value) return "";
-  
-  return routeBackgroundMap[path] || "";
-};
-
-// 当前背景图
-watch(
-  () => route.path,
-  (newPath) => {
-    currentBgImage.value = getBgImage(newPath) ? `url(${getBgImage(newPath)})` : "";
-  },
-  { immediate: true }
-);
-
 // 点击切换 tab
 const handleClick = (tab: any, event: Event) => {
   activeAsideTab.value = tab.props.name;
@@ -429,12 +395,15 @@ const mainStyle = computed(() => {
 <style>
 /* 隐藏所有滚动条 */
 *::-webkit-scrollbar {
-  display: none; /* Chrome, Safari, Opera */
+  display: none;
+  /* Chrome, Safari, Opera */
 }
 
 * {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
 }
 
 /* 整体布局容器 */
@@ -444,6 +413,22 @@ const mainStyle = computed(() => {
   height: 100vh;
   overflow: hidden;
   position: relative;
+  background-color: #f5f7fa;
+  /* 默认背景色 */
+}
+
+/* 背景层 - 关键修改 */
+.background-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  filter: brightness(0.8);
 }
 
 /* 全屏页面特殊处理 */
@@ -452,39 +437,46 @@ const mainStyle = computed(() => {
   min-height: 100vh;
 }
 
-/* 背景层 - 用于透明部分 */
-.background-layer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("@/assets/header-bg.jpg") center center / cover no-repeat;
-  background-attachment: fixed;
-  z-index: -1; /* 确保在内容下方 */
+/* 特殊背景页面的Header样式 */
+.transparent-header {
+  background: transparent !important;
+  backdrop-filter: blur(2px);
+  /* 添加轻微模糊效果增强可读性 */
+}
+
+/* 特殊背景页面的文字颜色 */
+.light-text {
+  color: #ffffff !important;
+  /* 白色文字 */
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
+  /* 文字阴影增强可读性 */
+}
+
+/* 特殊背景页面的头像边框 */
+.light-avatar-border {
+  border: 2px solid #ffffff !important;
+  /* 白色边框 */
+}
+
+/* 内容区域在特殊背景页面透明 */
+.transparent-scroll {
+  background-color: transparent !important;
 }
 
-/* 透明 Header */
+/* Header 样式 */
 .layout-header {
   height: 150px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: transparent !important;
-  backdrop-filter: none !important;
-  -webkit-backdrop-filter: none !important;
-  border-bottom: none;
-  box-shadow: none !important;
-  color: #f0f3f7;
+  color: #333;
+  /* 深色文字 */
   flex-shrink: 0;
-  position: relative; /* 确保在背景层上方 */
-  z-index: 1;
-}
-
-/* 排除背景图页面的Header样式 */
-.excluded-bg-header {
-  background-color: #ffffff !important;
-  border-bottom: 1px solid #eee !important;
+  position: relative;
+  z-index: 2;
+  /* 确保在背景层上方 */
+  background-color: white;
+  /* 默认背景色 */
 }
 
 .logo-title-row {
@@ -506,38 +498,18 @@ const mainStyle = computed(() => {
   align-items: center;
   justify-content: flex-end;
   gap: 24px;
-  background-color: transparent !important;
-  box-shadow: none !important;
-  color: #ffffff;
+  color: #333;
+  /* 深色文字 */
   padding-top: 1px;
   position: static;
-  z-index: 100;
-}
-
-/* 排除背景图页面的文字颜色 */
-.excluded-text {
-  color: #333 !important;
-}
-
-/* 头像边框白色 */
-.el-dropdown-link .el-avatar {
-  border: 2px solid white;
-}
-
-/* 排除背景图页面的头像边框 */
-.excluded-avatar-border {
-  border: 2px solid #333 !important;
+  z-index: 1;
 }
 
 .welcome-text {
   font-size: 28px;
   font-weight: 500;
-  color: #ffffff !important;
-}
-
-/* 排除背景图页面的欢迎文字颜色 */
-.excluded-text .welcome-text {
   color: #333 !important;
+  /* 深色文字 */
 }
 
 /* Tab 区域 - 不透明 */
@@ -548,14 +520,11 @@ const mainStyle = computed(() => {
   align-items: center;
   padding: 0 24px;
   background: linear-gradient(to right, #1092d8, #02c3ad);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
   border-bottom: none !important;
-  box-shadow: none !important;
-  margin-bottom: 0 !important;
   flex-shrink: 0;
-  position: relative; /* 确保在背景层上方 */
-  z-index: 1;
+  position: relative;
+  z-index: 2;
+  /* 确保在背景层上方 */
 }
 
 /* el-tabs 外层容器 */
@@ -592,7 +561,6 @@ const mainStyle = computed(() => {
   padding: 0 20px !important;
   font-size: 20px;
   font-weight: 600;
-  color: #cfd8dc;
   border-radius: 10px;
   transition: all 0.2s ease-in-out;
   background-color: transparent;
@@ -638,12 +606,8 @@ const mainStyle = computed(() => {
   font-size: 48px;
   font-weight: bold;
   margin-top: 30px;
-  color: #f0f3f7;
-}
-
-/* 排除背景图页面的项目名称颜色 */
-.excluded-text.project-name {
-  color: #333 !important;
+  color: #333;
+  /* 深色文字 */
 }
 
 .layout-main-container {
@@ -653,19 +617,21 @@ const mainStyle = computed(() => {
   min-height: 0;
   position: relative;
   z-index: 1;
+  /* 确保在背景层上方 */
 }
 
-/* 侧边栏 - 不透明 */
+/* 侧边栏 - 白色背景 */
 .layout-aside {
   width: 360px;
-  background: linear-gradient(to bottom, #B7F1FC, #FFF8F0 );
+  background: linear-gradient(to bottom, #B7F1FC, #FFF8F0);
   border-right: 1px solid;
   overflow-y: auto;
   color: #000000;
   padding-top: 8px;
   height: 100%;
   position: relative;
-  z-index: 2; /* 确保在背景层上方 */
+  z-index: 2;
+  /* 确保在背景层上方 */
 }
 
 /* 隐藏侧边栏滚动条 */
@@ -707,19 +673,6 @@ const mainStyle = computed(() => {
   position: relative;
 }
 
-/* 排除背景图页面的内容区域 */
-.excluded-bg-content {
-  background-color: #ffffff !important;
-}
-
-/* 可滑动内容区域 */
-.scrollable-content {
-  flex: 1;
-  overflow: auto;
-  padding: 0 20px;
-  box-sizing: border-box;
-}
-
 /* 强制重置 el-tabs header 高度/边距/背景/阴影，避免背景层穿透错位 */
 .el-tabs__header.is-top {
   height: 48px !important;
@@ -741,9 +694,11 @@ const mainStyle = computed(() => {
   overflow: auto;
   padding: 0 20px;
   box-sizing: border-box;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  transition: background-image 0.3s ease-in-out;
+  background-color: white;
+  /* 默认背景色 */
+}
+
+.scrollable-content.transparent-scroll {
+  background-color: transparent;
 }
 </style>

src/components/layout/isCollapse.ts

@@ -1,4 +1,3 @@
 import { ref } from 'vue';
 
 export const isCollapse = ref(false);
-

src/components/layout/menuItems.ts

@@ -98,7 +98,7 @@ import {
       tab: 'HmOutFlux',
       children: [
         {
-          index: '/samplingDesc2',
+          index: '/farmInputSamplingDesc',
           label: '采样说明',
           icon: Sunny,
           tab: 'HmOutFlux'
@@ -118,7 +118,7 @@ import {
       tab: 'HmOutFlux',
       children: [
         {
-          index: '/samplingDesc3',
+          index: '/AtmosDepositionSamplingDesc',
           label: '采样说明',
           icon: Sunny,
           tab: 'HmOutFlux'
@@ -359,5 +359,5 @@ import {
       icon: List,
       tab: 'dataStatistics'
     }
-  ].filter(tab => !["shuJuKanBan", "mapView", "introduction"].includes(tab.name));
+  ].filter(tab => !["shuJuKanBan", "mapView", "introduction"].includes(tab.tab));
   

src/router/index.ts

@@ -108,9 +108,9 @@ const routes = [
       //   meta: { title: "农产品投入" },
       // },
       {
-        path: "samplingDesc2",
-        name: "samplingDesc2",
-        component: () => import("@/views/User/HmOutFlux/agriInput/samplingDesc2.vue"),  
+        path: "farmInputSamplingDesc",
+        name: "farmInputSamplingDesc",
+        component: () => import("@/views/User/HmOutFlux/agriInput/farmInputSamplingDesc.vue"),  
         meta: { title: "采样说明" },
       },
       {
@@ -126,9 +126,9 @@ const routes = [
       //   meta: { title: "大气干湿沉降" },
       // },
       {
-        path: "samplingDesc3",
-        name: "samplingDesc3",
-        component: () => import("@/views/User/HmOutFlux/atmosDeposition/samplingDesc3.vue"), 
+        path: "AtmosDepositionSamplingDesc",
+        name: "AtmosDepositionSamplingDesc",
+        component: () => import("@/views/User/HmOutFlux/atmosDeposition/AtmosDepositionSamplingDesc.vue"), 
         meta: { title: "采样说明" },
       },
       {

src/views/AboutView.vue

@@ -13,3 +13,4 @@
   }
 }
 </style>
+}

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

@@ -0,0 +1,390 @@
+<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="image-container">
+        <el-image :src="image1" alt="农业投入品使用情况" class="main-image"></el-image>
+      </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>
+
+      <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>
+
+      <div class="image-container">
+        <el-image :src="image2" alt="农业投入品样品采集" class="main-image"></el-image>
+      </div>
+
+      <p class="image-caption">图2 农业投入品样品采集流程</p>
+    </div>
+
+    <!-- 第三部分：重金属测试 -->
+    <div class="section">
+      <h2 class="section-title">
+        <i class="fas fa-microscope"></i>
+        3. 采集农业投入品样品重金属含量测试
+      </h2>
+
+      <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>
+
+      <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>
+    </div>
+
+    <!-- 第四部分：输入通量计算 -->
+    <div class="section">
+      <h2 class="section-title">
+        <i class="fas fa-calculator"></i>
+        4. 农业投入品重金属输入通量计算方法
+      </h2>
+      <p class="section-content">
+        通过系统分析方法计算农业投入品中重金属的输入通量，评估其对土壤环境的影响。
+        输入通量计算考虑了投入品使用量、重金属含量及迁移转化系数等因素。
+      </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>
+        <div class="image-wrapper">
+          <el-image :src="image6" alt="农业投入品重金属输入通量计算方法" class="paired-chart"></el-image>
+          <p class="figure-description">图6 农业投入品重金属输入通量计算方法</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      image1: '/农业投入品使用情况.png',
+      image2: '/农业投入品样品采集.png',
+      image3: '/各农业投入品测试结果.png',
+      image4: '/农业投入品镉含量.png',
+      image5: '/农业投入品用量计算方法.png',
+      image6: '/农业投入品重金属输入通量计算方法.png'
+    };
+  }
+};
+</script>
+
+<style scoped>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+}
+
+.agricultural-input-container {
+  padding: 20px;
+  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;
+}
+
+.section-title i {
+  font-size: 28px;
+  color: #2c9eaf;
+  background: rgba(44, 158, 175, 0.1);
+  padding: 10px;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  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;
+  margin: 30px 0;
+}
+
+.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;
+  line-height: 1.6;
+  padding-left: 46px;
+}
+
+/* 图片样式 */
+.image-container {
+  display: flex;
+  justify-content: center;
+  margin: 30px 0;
+}
+
+.main-image {
+  width: 90%;
+  max-height: 500px;
+  border-radius: 12px;
+  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 {
+  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);
+}
+
+.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);
+}
+
+.dual-image:hover {
+  transform: scale(1.03);
+}
+
+.image-caption,
+.figure-description {
+  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;
+}
+
+/* 响应式调整 */
+@media (max-width: 1200px) {
+
+  .paired-chart,
+  .dual-image {
+    width: 100%;
+    max-width: 500px;
+  }
+}
+
+@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;
+  }
+}
+
+@media (max-width: 480px) {
+  .agricultural-input-container {
+    padding: 10px;
+  }
+
+  .section-title {
+    font-size: 20px;
+  }
+
+  .subsection-title {
+    font-size: 16px;
+  }
+}
+</style>

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

@@ -1,25 +0,0 @@
-<template>
-  <div class="">
-    
-  </div>
-</template>
-
-<script>
-export default {
-  name: '',
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-  }
-};
-</script>
-
-<style scoped>
-  . {
-    
-  }
-</style>

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

@@ -0,0 +1,308 @@
+<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>
+
+        <div class="image-row">
+          <div class="image-container">
+            <img :src="image1" alt="农田土壤重金属主要的输入输出途径" class="process-image">
+            <p class="caption">图 1 农田土壤重金属主要的输入输出途径</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="step-card">
+      <div class="step-number">2</div>
+      <h2>2. 现场调研和样品分析</h2>
+      <h3>现场调研</h3>
+      <div class="step-content">
+        <p>
+          制定重金属排放源的详细调研计划，包括调研时间、地点、人员分工、调研方法等。根据研究目的和问题，选择合适的调研方法，如问卷调查、访谈、观察法等。按照调研计划，前往现场进行调研，对企业进行前期的实地考察，了解能源使用、生产工艺及废气排放情况。对企业所在区域进行调查，大气排放是否会对周围区域产生影响。在调研过程中，注意信息的获取与保存，比如拍照、排污口测距、风向记录等等。
+        </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');
+
+    return {
+      image1,
+      image2,
+      image3
+    };
+  }
+};
+</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;
+  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 {
+  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;
+}
+
+.image-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: 25px 0;
+  gap: 20px;
+}
+
+.image-container {
+  flex: 1;
+  min-width: 280px;
+  border-radius: 10px;
+  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);
+}
+
+.image-container:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+}
+
+.process-image {
+  width: 100%;
+  height: 300px;
+  object-fit: cover;
+  display: block;
+  border-bottom: 1px solid rgba(234, 234, 234, 0.5);
+  transition: transform 0.5s ease;
+}
+
+.image-container:hover .process-image {
+  transform: scale(1.03);
+}
+
+.caption {
+  text-align: center;
+  font-size: 15px;
+  color: #2d3748;
+  padding: 12px;
+  font-weight: 500;
+  background: rgba(248, 250, 252, 0.7);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .step-card {
+    padding: 20px 15px;
+  }
+
+  h2 {
+    font-size: 22px;
+    padding-right: 60px;
+  }
+
+  .step-number {
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+    top: 15px;
+    right: 15px;
+  }
+
+  .image-container {
+    min-width: 100%;
+    margin-bottom: 20px;
+  }
+
+  .process-image {
+    height: 250px;
+  }
+}
+
+@media (max-width: 480px) {
+  .sampling-process {
+    padding: 10px;
+  }
+
+  h2 {
+    font-size: 20px;
+  }
+
+  h3 {
+    font-size: 18px;
+  }
+
+  p {
+    font-size: 15px;
+  }
+
+  .process-image {
+    height: 200px;
+  }
+
+  .step-card {
+    padding: 15px 10px;
+  }
+
+  .step-number {
+    width: 35px;
+    height: 35px;
+    font-size: 18px;
+    top: 10px;
+    right: 10px;
+  }
+}
+</style>
+
+
+

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

@@ -1,25 +0,0 @@
-<template>
-  <div class="">
-    
-  </div>
-</template>
-
-<script>
-export default {
-  name: '',
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-  }
-};
-</script>
-
-<style scoped>
-  . {
-    
-  }
-</style>

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

@@ -1,39 +1,41 @@
 <template>
-  <div class="map-page">
-    <h3 class="table-title">断面数据地图展示</h3>
-    <div ref="mapContainer" class="map-container"></div>
-  </div>
+  <div class="page-container">
+    <div class="map-page">
+      <h3 class="table-title">断面数据地图展示</h3>
+      <div ref="mapContainer" class="map-container"></div>
+    </div>
 
-  <div class="map-page">
-    <!-- 数据表格容器 -->
-    <div class="table-container">
-      <h3 class="table-title">断面数据详情</h3>
-      <table class="data-table">
-        <!-- 表头 -->
-        <thead>
-          <tr>
-            <th>断面编号</th>
-            <th>所属河流</th>
-            <th>断面位置</th>
-            <th>所属区县</th>
-            <th>Cd含量(mg/L)</th>
-            <th>经度</th>
-            <th>纬度</th>
-          </tr>
-        </thead>
-        <!-- 表体（遍历数据） -->
-        <tbody>
-          <tr v-for="item in state.excelData" :key="item.id">
-            <td>{{ item.id }}</td>
-            <td>{{ item.river }}</td>
-            <td>{{ item.location }}</td>
-            <td>{{ item.district }}</td>
-            <td>{{ item.cdValue }}</td>
-            <td>{{ item.longitude.toFixed(6) }}</td> <!-- 保留6位小数 -->
-            <td>{{ item.latitude.toFixed(6) }}</td>
-          </tr>
-        </tbody>
-      </table>
+    <div class="table-page">
+      <!-- 数据表格容器 -->
+      <div class="table-container">
+        <h3 class="table-title">断面数据详情</h3>
+        <table class="data-table">
+          <!-- 表头 -->
+          <thead>
+            <tr>
+              <th>断面编号</th>
+              <th>所属河流</th>
+              <th>断面位置</th>
+              <th>所属区县</th>
+              <th>Cd含量(mg/L)</th>
+              <th>经度</th>
+              <th>纬度</th>
+            </tr>
+          </thead>
+          <!-- 表体（遍历数据） -->
+          <tbody>
+            <tr v-for="item in state.excelData" :key="item.id">
+              <td>{{ item.id }}</td>
+              <td>{{ item.river }}</td>
+              <td>{{ item.location }}</td>
+              <td>{{ item.district }}</td>
+              <td>{{ item.cdValue }}</td>
+              <td>{{ item.longitude.toFixed(6) }}</td> <!-- 保留6位小数 -->
+              <td>{{ item.latitude.toFixed(6) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </template>
@@ -235,41 +237,130 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-/* 地图容器保持不变 */
+/* 新增：整体页面容器 */
+.page-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  padding: 20px;
+  box-sizing: border-box;
+  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
+  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+}
+
+/* 地图容器 */
 .map-page { 
-  width: 100vw; 
-  height: 40vw; 
-  background-color: white;
-  border-radius:  12px;
+  width: 100%; 
+  height: 50vh;
+  background-color: rgba(255, 255, 255, 0.85);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   margin-bottom: 24px;
+  overflow: hidden;
+  transition: transform 0.3s ease;
+}
+
+.map-page:hover {
+  transform: translateY(-5px);
 }
 
 .map-container { 
   width: 100%; 
-  height: 50%; 
-  margin: 1rem auto;
+  height: calc(100% - 60px); 
+  margin: 0;
   padding: 0;
 }
 
-/* 信息窗口核心调整：暴力放大 + 宽高适配 */
+/* 表格容器 */
+.table-page { 
+  width: 100%; 
+  background-color: rgba(255, 255, 255, 0.85);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transition: transform 0.3s ease;
+}
+
+.table-page:hover {
+  transform: translateY(-3px);
+}
+
+.table-container {
+  padding: 20px;
+  flex: 1;
+  overflow: auto;
+}
+
+.table-title {
+  text-align: left;
+  margin: 0;
+  padding: 15px 15px 15px 24px;
+  position: relative;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1e88e5;
+  line-height: 1.2;
+  background-color: rgba(30, 136, 229, 0.08);
+  border-bottom: 1px solid rgba(30, 136, 229, 0.15);
+}
+
+/* 蓝色小方块 */
+.table-title::before {
+  content: "";
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  background-color: #1e88e5;
+  border-radius: 50%;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 800px;
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+.data-table th,.data-table td {
+  padding: 12px 15px;
+  text-align: center;
+  border: 1px solid rgba(229, 231, 235, 0.7);
+}
+
+.data-table th {
+  background-color: rgba(243, 244, 246, 0.7);
+  font-weight: bold;
+  color: #1f2937;
+}
+
+.data-table tr:nth-child(even){
+  background-color: rgba(249, 250, 251, 0.7);
+}
+
+.data-table tr:hover{
+  background-color: rgba(243, 244, 246, 0.7);
+}
+
+/* 信息窗口核心调整 */
 :v-deep(.tmap-infowindow) {
-  padding: 20px !important;  /* 超大内边距 */
-  min-width: 320px !important; /* 强制加宽 */
-  font-size: 1.25rem !important; /* 基准字体爆炸大 */
-  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; /* 阴影增强 */
+  padding: 20px !important;
+  min-width: 320px !important;
+  font-size: 1.25rem !important;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
+  border-radius: 8px !important;
+  background: rgba(255, 255, 255, 0.95) !important;
+  backdrop-filter: blur(4px);
 }
 
 .water-info-window {
-  background-color: #FFFFFF;
-  border-radius: 8px;
-  box-shadow: 0 6px 20px rgba(0, 32, 71, 0.15);
   font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
-  transition: transform 0.3s ease;
-  border: 1px solid #e0e7ef;
 }
 
 .info-title {
-  background: linear-gradient(135deg, #1e88e5, #1565c0);
+  background: linear-gradient(135deg, rgba(30, 136, 229, 0.85), rgba(21, 101, 192, 0.85));
   color: white;
   font-size: 1.15rem;
   font-weight: 600;
@@ -277,7 +368,7 @@ onBeforeUnmount(() => {
   margin: 0;
   position: relative;
   letter-spacing: 0.5px;
-  border-bottom: 1px solid #e0e7ef;
+  border-radius: 6px 6px 0 0;
 }
 
 .info-title:after {
@@ -295,6 +386,7 @@ onBeforeUnmount(() => {
   margin-bottom: 15px;
   align-items: center;
   position: relative;
+  padding-left: 20px;
 }
 
 .info-row:last-child {
@@ -339,7 +431,7 @@ onBeforeUnmount(() => {
   flex: 1;
   color: #263238;
   font-size: 1rem;
-  background: #f8f9fa;
+  background: rgba(248, 249, 250, 0.7);
   padding: 10px 15px;
   border-radius: 6px;
   border-left: 3px solid #64b5f6;
@@ -364,62 +456,30 @@ onBeforeUnmount(() => {
   color: #78909c;
 }
 
-.table-container {
-  padding: 20px;
-  flex: 1;
-  overflow: auto;
-}
-
-.table-title {
-  /* 基础布局：左对齐 + 紧凑间距 */
-  text-align: left;        /* 强制左对齐，告别居中 */
-  margin: 12px 0;          /* 上下间距缩小，更紧凑（原16px→12px） */
-  padding-left: 24px;      /* 给蓝色方块留空间 */
-  position: relative;      /* 为伪元素定位做准备 */
-
-  /* 文字样式：简约但醒目 */
-  font-size: 1.7rem;      /* 稍小一号，更克制（原1.5rem→1.25rem） */
-  font-weight: 600;        /* 适度加粗，比正文突出但不夸张 */
-  color: #1e88e5;          /* 统一蓝色，和方块颜色呼应 */
-  line-height: 1.2;        /* 紧凑行高，避免臃肿 */
-}
-
-/* 蓝色小方块：用伪元素实现，无额外HTML */
-.table-title::before {
-  content: "";
-  position: absolute;
-  left: 0;                /* 靠最左侧 */
-  top: 50%;              /* 垂直居中 */
-  transform: translateY(-50%);
-  width: 12px;           /* 方块大小，适中即可 */
-  height: 12px;
-  background-color: #1e88e5; /* 和文字同色，统一感 */
-  border-radius: 2px;    /* 轻微圆角，比直角更柔和 */
-}
-
-.data-table {
-  width: 100%;
-  border-collapse: collapse;/*合并边框 */
-  min-width: 800px;
-}
-
-.data-table th,.data-table td {
-  padding: 12px 15px;
-  text-align: center;
-  border: 1px solid #e5e7eb;
-}
-
-.data-table th {
-  background-color: #f3f4f6;
-  font-weight: bold;
-  color: #1f2937;
-}
-
-.data-table tr:nth-child(even){
-  background-color: #f9fafb;
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .map-page {
+    height: 40vh;
+  }
+  
+  .table-title {
+    font-size: 1.3rem;
+    padding: 12px 12px 12px 20px;
+  }
+  
+  .data-table th, .data-table td {
+    padding: 8px 10px;
+    font-size: 0.9rem;
+  }
 }
 
-.data-table tr:hover{
-  background-color: #f3f4f6;
+@media (max-width: 480px) {
+  .page-container {
+    padding: 15px;
+  }
+  
+  .table-title {
+    font-size: 1.2rem;
+  }
 }
 </style>

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

@@ -1,83 +1,122 @@
 <template>
-  <div class="irrigation-management">
+  <div class="container">
     <el-card shadow="always" class="gradient-card">
-      <el-row :gutter="20" style="margin-bottom: 10px;">
-        <el-col :span="6">
-          <el-checkbox v-model="waterLand" label="水地" />
-        </el-col>
-        <el-col :span="9">
-          <el-input
-            v-model="irrigationWaterUsage"
-            placeholder="请输入灌溉水用量"
-            :disabled="!waterLand"
-            style="margin-top: 10px;"
-          />
-        </el-col>
-        <el-col :span="9">
-          <el-input
-            v-model="irrigationEfficiency"
-            placeholder="请输入灌溉水有效利用率"
-            :disabled="!waterLand"
-            style="margin-top: 10px;"
-          />
-        </el-col>
-      </el-row>
+      <!-- 标题区域 -->
+      <div class="title-section">
+        <h1 class="main-title">灌溉水输入通量计算</h1>
+        <p class="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>
+            <el-input
+              v-model="irrigationWaterUsage"
+              placeholder="请输入灌溉水用量"
+              :disabled="!waterLand"
+              size="large"
+            />
+          </el-col>
+          <el-col :span="9">
+            <div class="input-label">
+              <i class="fas fa-percentage"></i> 有效利用率 (%)
+            </div>
+            <el-input
+              v-model="irrigationEfficiency"
+              placeholder="请输入有效利用率"
+              :disabled="!waterLand"
+              size="large"
+            />
+          </el-col>
+        </el-row>
+      </div>
 
-      <el-row :gutter="20" style="margin-bottom: 10px;">
-        <el-col :span="6">
-          <el-checkbox v-model="irrigatedLand" label="水浇地" />
-        </el-col>
-        <el-col :span="9">
-          <el-input
-            v-model="irrigatedWaterUsage"
-            placeholder="请输入灌溉水用量"
-            :disabled="!irrigatedLand"
-            style="margin-top: 10px;"
-          />
-        </el-col>
-        <el-col :span="9">
-          <el-input
-            v-model="irrigatedEfficiency"
-            placeholder="请输入灌溉水有效利用率"
-            :disabled="!irrigatedLand"
-            style="margin-top: 10px;"
-          />
-        </el-col>
-      </el-row>
+      <!-- 水浇地参数输入 -->
+      <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>
+            <el-input
+              v-model="irrigatedWaterUsage"
+              placeholder="请输入灌溉水用量"
+              :disabled="!irrigatedLand"
+              size="large"
+            />
+          </el-col>
+          <el-col :span="9">
+            <div class="input-label">
+              <i class="fas fa-percentage"></i> 有效利用率 (%)
+            </div>
+            <el-input
+              v-model="irrigatedEfficiency"
+              placeholder="请输入有效利用率"
+              :disabled="!irrigatedLand"
+              size="large"
+            />
+          </el-col>
+        </el-row>
+      </div>
 
-      <el-row :gutter="20" style="margin-bottom: 10px;">
-        <el-col :span="6">
-          <el-checkbox v-model="dryLand" label="旱地" />
-        </el-col>
-        <el-col :span="9">
-          <el-input
-            v-model="dryWaterUsage"
-            placeholder="请输入灌溉水用量"
-            :disabled="!dryLand"
-            style="margin-top: 10px;"
-          />
-        </el-col>
-        <el-col :span="9">
-          <el-input
-            v-model="dryEfficiency"
-            placeholder="请输入灌溉水有效利用率"
-            :disabled="!dryLand"
-            style="margin-top: 10px;"
-          />
-        </el-col>
-      </el-row>
+      <!-- 旱地参数输入 -->
+      <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>
+            <el-input
+              v-model="dryWaterUsage"
+              placeholder="请输入灌溉水用量"
+              :disabled="!dryLand"
+              size="large"
+            />
+          </el-col>
+          <el-col :span="9">
+            <div class="input-label">
+              <i class="fas fa-percentage"></i> 有效利用率 (%)
+            </div>
+            <el-input
+              v-model="dryEfficiency"
+              placeholder="请输入有效利用率"
+              :disabled="!dryLand"
+              size="large"
+            />
+          </el-col>
+        </el-row>
+      </div>
 
-      <el-row justify="center" style="margin-top: 20px;">
+      <!-- 计算按钮 -->
+      <el-row justify="center" class="button-section">
         <el-button
           class="calculate-btn"
           @click="calculateFlux"
         >
-          计算灌溉水输入通量
+          <i class="fas fa-calculator"></i> 计算灌溉水输入通量
         </el-button>
       </el-row>
 
-      <div v-if="fluxResult !== null" style="margin-top: 20px; text-align: center; font-weight: bold;">
-        灌溉水输入通量为: {{ fluxResult.toFixed(2) }} m³
+      <!-- 计算结果 -->
+      <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>
     </el-card>
   </div>
@@ -86,6 +125,11 @@
 <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);
 
 export default {
   components: {
@@ -95,7 +139,8 @@ export default {
     ElMessage,
     ElCard,
     ElRow,
-    ElCol
+    ElCol,
+    FontAwesomeIcon
   },
   setup() {
     const waterLand = ref(false);
@@ -123,11 +168,14 @@ export default {
           valid = false;
         } else {
           const usage = parseFloat(irrigationWaterUsage.value);
-          const efficiency = parseFloat(irrigationEfficiency.value);
+          const efficiency = parseFloat(irrigationEfficiency.value) / 100; // 转换为小数
 
           if (isNaN(usage) || isNaN(efficiency)) {
             ElMessage.error('请输入有效的数字');
             valid = false;
+          } else if (efficiency > 1 || efficiency < 0) {
+            ElMessage.error('有效利用率应在0-100%之间');
+            valid = false;
           } else {
             totalFlux += usage * efficiency;
           }
@@ -140,11 +188,14 @@ export default {
           valid = false;
         } else {
           const usage = parseFloat(irrigatedWaterUsage.value);
-          const efficiency = parseFloat(irrigatedEfficiency.value);
+          const efficiency = parseFloat(irrigatedEfficiency.value) / 100;
 
           if (isNaN(usage) || isNaN(efficiency)) {
             ElMessage.error('请输入有效的数字');
             valid = false;
+          } else if (efficiency > 1 || efficiency < 0) {
+            ElMessage.error('有效利用率应在0-100%之间');
+            valid = false;
           } else {
             totalFlux += usage * efficiency;
           }
@@ -157,11 +208,14 @@ export default {
           valid = false;
         } else {
           const usage = parseFloat(dryWaterUsage.value);
-          const efficiency = parseFloat(dryEfficiency.value);
+          const efficiency = parseFloat(dryEfficiency.value) / 100;
 
           if (isNaN(usage) || isNaN(efficiency)) {
             ElMessage.error('请输入有效的数字');
             valid = false;
+          } else if (efficiency > 1 || efficiency < 0) {
+            ElMessage.error('有效利用率应在0-100%之间');
+            valid = false;
           } else {
             totalFlux += usage * efficiency;
           }
@@ -196,80 +250,174 @@ export default {
 </script>
 
 <style scoped>
-.irrigation-management {
-  padding: 20px;
+.container {
   display: flex;
   justify-content: center;
   align-items: center;
+  min-height: 100vh;
+  padding: 20px;
 }
 
 .gradient-card {
-  /* 半透明渐变背景 */
-  background: linear-gradient(
-    135deg, 
-    rgba(250, 253, 255, 0.8), 
-    rgba(137, 223, 252, 0.8)
-  );
-  width: 80%;
-  max-width: 600px;
-  padding: 25px;
-  box-sizing: border-box;
-  border-radius: 12px;
+  background: linear-gradient(90deg, rgba(250, 253, 255, 0.7) 0%, rgba(137, 223, 252, 0.7) 90%);
+  padding: 40px;
   border: none;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
+  width: 90%;
+  max-width: 900px;
+  border-radius: 20px;
 }
 
-.el-checkbox {
-  margin-bottom: 10px;
-  font-weight: 500;
+.title-section {
+  text-align: center;
+  margin-bottom: 40px;
 }
 
-.el-input {
-  width: 100%;
+.main-title {
+  font-size: 2.5rem;
+  color: #1a3c7a;
+  margin-bottom: 15px;
+  font-weight: 700;
+}
+
+.sub-title {
+  font-size: 1.4rem;
+  color: #555;
+}
+
+.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);
+}
+
+.land-checkbox {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.land-checkbox :deep(.el-checkbox__label) {
+  font-size: 1.6rem;
+  font-weight: 600;
+  color: #1a3c7a;
+}
+
+.land-checkbox :deep(.el-checkbox__inner) {
+  width: 24px;
+  height: 24px;
+}
+
+.land-checkbox :deep(.el-checkbox__inner::after) {
+  height: 12px;
+  left: 7px;
+  width: 6px;
+}
+
+.input-label {
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin-bottom: 15px;
+  color: #2c3e50;
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-/* 使用 Vue 3 推荐的 :deep() 选择器 */
 :deep(.el-input) .el-input__inner {
-  border-radius: 6px;
-  border: 1px solid #dcdfe6;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-  background: rgba(255, 255, 255, 0.03); /* 输入框半透明白色背景 */
+  height: 60px;
+  font-size: 1.5rem;
+  border-radius: 10px;
+  padding: 0 20px;
+  border: 2px solid #dcdfe6;
+  transition: all 0.3s ease;
 }
 
 :deep(.el-input) .el-input__inner:focus {
   border-color: #409EFF;
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
+}
+
+:deep(.el-input) .el-input__inner:disabled {
+  background-color: #f5f7fa;
+  opacity: 0.7;
+}
+
+.button-section {
+  margin: 40px 0 30px;
 }
 
 .calculate-btn {
   width: 100%;
-  max-width: 300px;
-  height: 50px;
+  max-width: 500px;
+  height: 70px;
   border: none;
-  border-radius: 25px !important;
-  font-size: 18px;
+  border-radius: 35px;
+  font-size: 1.8rem;
   font-weight: bold;
   transition: all 0.4s ease;
-  
-  /* 渐变背景色 */
-  background: linear-gradient(to right, #8DF9F0, #26B046);
-  color: white !important;
-  /* 按钮整体阴影 */
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15),
-              0 2px 6px rgba(38, 176, 70, 0.3) inset;
+  background: linear-gradient(45deg, #1a8cff, #00cc99);
+  color: white;
+  box-shadow: 0 6px 15px rgba(26, 140, 255, 0.4);
 }
 
 .calculate-btn:hover {
-  transform: scale(1.03);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2),
-              0 2px 8px rgba(38, 176, 70, 0.4) inset;
-  background: linear-gradient(to right, #7de8df, #20a03d);
+  transform: translateY(-3px);
+  box-shadow: 0 10px 20px rgba(26, 140, 255, 0.5);
+  background: linear-gradient(45deg, #0d7de0, #00b386);
 }
 
 .calculate-btn:active {
-  transform: scale(0.98);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1),
-              0 1px 6px rgba(38, 176, 70, 0.4) inset;
+  transform: translateY(1px);
+  box-shadow: 0 4px 10px rgba(26, 140, 255, 0.4);
+}
+
+.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;
+}
+
+.result-title {
+  font-size: 1.8rem;
+  color: #1a3c7a;
+  margin-bottom: 25px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+}
+
+.flux-value {
+  font-size: 3.5rem;
+  font-weight: 800;
+  color: #e91e63;
+  margin: 10px 0;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.unit {
+  font-size: 2rem;
+  color: #555;
+  font-weight: 600;
+  margin-left: 10px;
+}
+
+.result-description {
+  font-size: 1.4rem;
+  color: #555;
+  margin-top: 15px;
 }
 </style>

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

@@ -1,99 +1,198 @@
 <template>
   <div class="page-container">
-    
-   <div class="point-map">
-    <div class="component-title">采样点地图展示</div>
-   <TencentMapView/>
-   </div>
+    <div class="main-content">
+      <div class="header">
+        <h1>灌溉水采样点分析系统</h1>
+        <p>韶关市水环境重金属监测数据可视化分析平台</p>
+      </div>
+      
+      <div class="content-wrapper">
+        <!-- 第一行：采样点地图 -->
+        <div class="single-row">
+          <div class="component-title">采样点地图展示</div>
+          <div class="map-container">
+            <TencentMapView/>
+          </div>
+        </div>
 
-  
-   <div class="point-line">
-    <div class="component-title">采样点数据列表展示</div>
-    <Waterdataline/>
-   </div>
-
-   <div class="charts-line">
-    <div class="component-title">韶关市各区县重金属平均浓度</div>
-    <Waterassaydata2/>
-   </div>
+        <!-- 第二行：数据列表 -->
+        <div class="single-row">
+          <div class="component-title">采样点数据列表展示</div>
+          <div class="data-container">
+            <Waterdataline/>
+          </div>
+        </div>
+
+        <!-- 第三行：浓度图表 -->
+        <div class="single-row">
+          <div class="component-title">韶关市各区县重金属平均浓度</div>
+          <div class="chart-container">
+            <Waterassaydata2/>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="footer">
+      <p>© 2023 水环境重金属监测分析系统 | 环境科学研究院</p>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch, computed } from 'vue';
-import * as echarts from 'echarts';
 import TencentMapView from './tencentMapView.vue';
 import Waterdataline from './waterdataline.vue';
 import Waterassaydata2 from './waterassaydata2.vue';
-
-
-
-
 </script>
 
 <style scoped>
 .page-container {
   display: flex;
   flex-direction: column;
-  height: 100vh; /* 整屏高度 */
-  padding: 0;
+  min-height: 100vh;
+  padding: 20px;
   box-sizing: border-box;
-  background-color: #f5f7fa;
-  gap: 20px;
-  margin: 0;
+  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
+  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
 }
 
-.point-map {
-    flex: 0 0 70%;
-    margin-bottom: 20px;
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,1);
-    overflow: hidden;
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  max-width: 1800px;
+  margin: 0 auto;
+  width: 100%;
 }
 
-.point-line {
-    background-color: white;
-    border-radius: 12px;/*圆角 */
-    box-shadow: 0 2px 8px rgba(0, 0,0, 0.08);
-    padding: 16px;/*内部间距 */
-    box-sizing: border-box;
+.header {
+  text-align: center;
+  padding: 20px 0 30px;
+  margin-bottom: 20px;
 }
-.charts-line{
-  background-color: white;
+
+.header h1 {
+  color: #1e88e5;
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.header p {
+  color: #546e7a;
+  font-size: 1.2rem;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  flex: 1;
+}
+
+.single-row {
+  background-color: rgba(255, 255, 255, 0.85);
   border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  padding: 16px;
-  box-sizing: border-box;
-  max-width: 1800px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transition: transform 0.3s ease;
   width: 100%;
-  margin: 20px auto;
 }
-.component-title {
-  /* 基础布局：左对齐 + 紧凑间距 */
-  text-align: left;        /* 强制左对齐，告别居中 */
-  margin: 12px 0;          /* 上下间距缩小，更紧凑（原16px→12px） */
-  padding-left: 24px;      /* 给蓝色方块留空间 */
-  position: relative;      /* 为伪元素定位做准备 */
 
-  /* 文字样式：简约但醒目 */
-  font-size: 1.7rem;      /* 稍小一号，更克制（原1.5rem→1.25rem） */
-  font-weight: 600;        /* 适度加粗，比正文突出但不夸张 */
-  color: #1e88e5;          /* 统一蓝色，和方块颜色呼应 */
-  line-height: 1.2;        /* 紧凑行高，避免臃肿 */
+.single-row:hover {
+  transform: translateY(-5px);
+}
+
+.map-container {
+  height: 500px;
+  padding: 10px;
+}
+
+.data-container, .chart-container {
+  padding: 10px;
+  height: 350px;
+}
+
+.component-title {
+  text-align: left;
+  margin: 0 0 20px 0;
+  padding: 15px 15px 15px 24px;
+  position: relative;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1e88e5;
+  line-height: 1.2;
+  background-color: rgba(30, 136, 229, 0.08);
+  border-bottom: 1px solid rgba(30, 136, 229, 0.15);
 }
 
-/* 蓝色小方块：用伪元素实现，无额外HTML */
 .component-title::before {
   content: "";
   position: absolute;
-  left: 0;                /* 靠最左侧 */
-  top: 50%;              /* 垂直居中 */
+  left: 8px;
+  top: 50%;
   transform: translateY(-50%);
-  width: 12px;           /* 方块大小，适中即可 */
-  height: 12px;
-  background-color: #1e88e5; /* 和文字同色，统一感 */
-  border-radius: 2px;    /* 轻微圆角，比直角更柔和 */
+  width: 8px;
+  height: 8px;
+  background-color: #1e88e5;
+  border-radius: 50%;
+}
+
+.footer {
+  text-align: center;
+  padding: 20px;
+  margin-top: 30px;
+  color: #546e7a;
+  font-size: 0.9rem;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .map-container {
+    height: 450px;
+  }
 }
 
-</style>
+@media (max-width: 768px) {
+  .header h1 {
+    font-size: 2rem;
+  }
+  
+  .header p {
+    font-size: 1rem;
+  }
+  
+  .map-container {
+    height: 400px;
+  }
+  
+  .data-container, .chart-container {
+    height: 300px;
+  }
+  
+  .component-title {
+    font-size: 1.3rem;
+    padding: 12px 12px 12px 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .header h1 {
+    font-size: 1.8rem;
+  }
+  
+  .component-title {
+    font-size: 1.2rem;
+  }
+  
+  .map-container {
+    height: 350px;
+  }
+  
+  .page-container {
+    padding: 15px;
+  }
+}
+</style>

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

@@ -1,24 +1,41 @@
 <template>
   <div class="sampling-process">
-    <el-card shadow="always" style="margin-bottom: 20px;">
       <h2>1.采样容器与过程</h2>
       <p>采样容器均为500mL的白色聚乙烯瓶，采样体积均为500mL，采样过程在不同天气条件下进行，主要天气状况包括多云、阴天和小雨，采样点周边环境主要为河流，只有少数样品采集于水渠或瀑布区域。</p>
+      
       <div class="image-row">
-        <el-image :src="image1" alt="图1" style="width: 30%; margin-right: 2%"></el-image>
-        <el-image :src="image2" alt="图2" style="width: 30%; margin-right: 2%"></el-image>
-        <el-image :src="image3" alt="图3" style="width: 30%;"></el-image>
+        <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>
       </div>
-      <p class="caption">图 3 灌溉水采样设备</p>
 
       <h2>2.样品保存与现场情况</h2>
       <p>绝大多数样品状态为无色、无沉淀、无味、无悬浮物，只有少量样品稍显浑浊并含有沉淀物,为了保证样品的完整性和数据的准确性，采样后的保存方式包括了冷藏、避光、确保标签完好以及采取有效的减震措施，以避免运输过程中的振动和损坏。</p>
+      
       <div class="image-row">
-        <el-image :src="fieldImage1" alt="图4-1" style="width: 30%; margin-right: 2%"></el-image>
-        <el-image :src="fieldImage2" alt="图4-2" style="width: 30%; margin-right: 2%"></el-image>
-        <el-image :src="fieldImage3" alt="图4-3" style="width: 30%;"></el-image>
+        <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>
-      <p class="caption">图 4 工作人员采样现场</p>
-    </el-card>
+      <p class="section-caption">图4 工作人员采样现场</p>
   </div>
 </template>
 
@@ -40,36 +57,109 @@ export default {
 <style scoped>
 .sampling-process {
   padding: 20px;
-}
-.el-card {
-  background-color: rgba(255, 255, 255, 0.3); 
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-}
-.el-card h2 {
-  font-size: 24px;
-  margin-bottom: 10px;
+  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;
 }
 
-P {
-  text-indent: 2em;
-}
-.el-card p {
-  line-height: 1.6;
+.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;
 }
+
 .image-row {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
-  margin-top: 10px;
+  margin: 30px 0;
+  gap: 20px;
 }
-.el-image {
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
+
+.image-container {
+  flex: 1;
+  min-width: 280px;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.image-container:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  background: rgba(255, 255, 255, 0.85);
+}
+
+.sampling-image {
+  border-radius: 12px 12px 0 0 !important;
+  overflow: hidden;
+  border: none !important;
+  width: 100% !important;
+  height: 250px;
+  display: block;
+  transition: transform 0.5s ease;
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.image-container:hover .sampling-image {
+  transform: scale(1.03);
+}
+
+.image-caption {
+  text-align: center;
+  font-size: 15px;
+  color: #2d3748;
+  padding: 12px;
+  font-weight: 500;
+  background: rgba(248, 250, 252, 0.7);
+  margin: 0;
 }
-.caption {
+
+.section-caption {
   text-align: center;
-  font-size: 14px;
-  color: #000; /* 确保图注为黑色 */
-  margin-top: 10px;
+  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 {
+    min-width: 48%;
+  }
+}
+
+@media (max-width: 768px) {
+ 
+  .image-container {
+    min-width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .sampling-process {
+    padding: 10px;
+  }
+
+  .sampling-image {
+    height: 200px;
+  }
 }
-</style>
+</style>

src/views/User/cadmiumPrediction/CropCadmiumPrediction.vue

@@ -539,16 +539,14 @@ export default {
 </script>
 
 <style scoped>
-::v-deep .el-table th.el-table__cell {
-  text-align: center;
-  background-color: #f5f7fa !important;
-}
-::v-deep .el-table td.el-table__cell {
-  text-align: center;
-}
 .container {
   padding: 20px;
-  background-color: #f5f7fa;
+  /* 添加70%透明度的渐变背景 */
+  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;
 }
@@ -559,9 +557,10 @@ export default {
   gap: 15px;
   margin-bottom: 20px;
   padding: 15px;
-  background-color: white;
+  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); /* 添加模糊效果增强半透明感 */
 }
 
 .upload-section {
@@ -569,7 +568,7 @@ export default {
   align-items: center;
   gap: 15px;
   padding-bottom: 15px;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 调整边框透明度 */
 }
 
 .file-name {
@@ -619,12 +618,13 @@ export default {
 .map-section, .histogram-section {
   flex: 1;
   min-width: 300px;
-  background-color: white;
+  background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
   border-radius: 8px;
   padding: 15px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   min-height: 400px;
+  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
 }
 
 .map-image, .histogram-image {
@@ -635,32 +635,14 @@ export default {
   border-radius: 4px;
 }
 
-.stats-area {
+.table-area {
   width: 100%;
-  background-color: white;
+  background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
   border-radius: 8px;
   padding: 15px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-}
-
-.stats-container {
   margin-top: 20px;
-}
-
-.charts-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  margin-top: 30px;
-}
-
-.chart-item {
-  flex: 1;
-  min-width: 300px;
-  background: #f9f9f9;
-  padding: 15px;
-  border-radius: 8px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
 }
 
 .loading-container {
@@ -713,29 +695,4 @@ export default {
     flex: none;
   }
 }
-.model-info {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  margin: 10px 0;
-  color: #666;
-}
-
-.update-time {
-  font-size: 14px;
-}
-
-.chart-item {
-  flex: 1;
-  min-width: 400px;
-  background: white;
-  padding: 15px;
-  border-radius: 8px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-  margin-bottom: 20px;
-}
-
-.el-table {
-  margin-top: 20px;
-}
 </style>

src/views/User/cadmiumPrediction/EffectiveCadmiumPrediction.vue

@@ -539,16 +539,14 @@ export default {
 </script>
 
 <style scoped>
-::v-deep .el-table th.el-table__cell {
-  text-align: center;
-  background-color: #f5f7fa !important;
-}
-::v-deep .el-table td.el-table__cell {
-  text-align: center;
-}
 .container {
   padding: 20px;
-  background-color: #f5f7fa;
+  /* 添加70%透明度的渐变背景 */
+  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;
 }
@@ -559,9 +557,10 @@ export default {
   gap: 15px;
   margin-bottom: 20px;
   padding: 15px;
-  background-color: white;
+  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); /* 添加模糊效果增强半透明感 */
 }
 
 .upload-section {
@@ -569,7 +568,7 @@ export default {
   align-items: center;
   gap: 15px;
   padding-bottom: 15px;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 调整边框透明度 */
 }
 
 .file-name {
@@ -619,12 +618,13 @@ export default {
 .map-section, .histogram-section {
   flex: 1;
   min-width: 300px;
-  background-color: white;
+  background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
   border-radius: 8px;
   padding: 15px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   min-height: 400px;
+  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
 }
 
 .map-image, .histogram-image {
@@ -635,32 +635,14 @@ export default {
   border-radius: 4px;
 }
 
-.stats-area {
+.table-area {
   width: 100%;
-  background-color: white;
+  background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
   border-radius: 8px;
   padding: 15px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-}
-
-.stats-container {
   margin-top: 20px;
-}
-
-.charts-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  margin-top: 30px;
-}
-
-.chart-item {
-  flex: 1;
-  min-width: 300px;
-  background: #f9f9f9;
-  padding: 15px;
-  border-radius: 8px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
 }
 
 .loading-container {
@@ -713,29 +695,4 @@ export default {
     flex: none;
   }
 }
-.model-info {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  margin: 10px 0;
-  color: #666;
-}
-
-.update-time {
-  font-size: 14px;
-}
-
-.chart-item {
-  flex: 1;
-  min-width: 400px;
-  background: white;
-  padding: 15px;
-  border-radius: 8px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-  margin-bottom: 20px;
-}
-
-.el-table {
-  margin-top: 20px;
-}
 </style>

src/views/User/cadmiumPrediction/TotalCadmiumPrediction.vue

@@ -297,7 +297,12 @@ export default {
 <style scoped>
 .container {
   padding: 20px;
-  background-color: #f5f7fa;
+  /* 添加70%透明度的渐变背景 */
+  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;
 }
@@ -308,9 +313,10 @@ export default {
   gap: 15px;
   margin-bottom: 20px;
   padding: 15px;
-  background-color: white;
+  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); /* 添加模糊效果增强半透明感 */
 }
 
 .upload-section {
@@ -318,7 +324,7 @@ export default {
   align-items: center;
   gap: 15px;
   padding-bottom: 15px;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 调整边框透明度 */
 }
 
 .file-name {
@@ -367,13 +373,14 @@ export default {
 
 .map-section, .histogram-section {
   flex: 1;
-  min-width: 300px; /* 最小宽度，确保在小屏幕上也能正常显示 */
-  background-color: white;
+  min-width: 300px;
+  background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
   border-radius: 8px;
   padding: 15px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   min-height: 400px;
+  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
 }
 
 .map-image, .histogram-image {
@@ -386,11 +393,12 @@ export default {
 
 .table-area {
   width: 100%;
-  background-color: white;
+  background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
   border-radius: 8px;
   padding: 15px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   margin-top: 20px;
+  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
 }
 
 .loading-container {

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

@@ -1,237 +1,409 @@
 <template>
-  <div class="crop-cd-model-container">
-    <el-card shadow="always" class="gradient-card">
-      <h2>作物镉模型计算</h2>
-      
-      <el-button class="enable-btn" @click="enableInputs">作物镉模型计算</el-button>
-      
-      <el-form label-width="250px" label-position="top" class="form-container">
-        <div class="form-section">
-          <!-- 作物亩产量 (单独一行) -->
-          <div class="input-row single-input">
-            <el-form-item label="作物亩产量 (斤)" class="input-item">
-              <el-input 
-                v-model="yieldPerMu" 
-                placeholder="800" 
-                :disabled="!inputsEnabled"
-                class="custom-input"
-              ></el-input>
-            </el-form-item>
+  <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>
+        
+        <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 class="input-row">
-            <el-form-item label="标题" class="input-item">
-              <el-input 
-                v-model="soilCdContent" 
-                placeholder="15" 
-                :disabled="!inputsEnabled"
-                class="custom-input"
-              ></el-input>
-            </el-form-item>
-            <el-form-item label="标题" class="input-item">
-              <el-input 
-                v-model="safetyThreshold" 
-                placeholder="15/1000" 
-                :disabled="!inputsEnabled"
-                class="custom-input"
-              ></el-input>
-            </el-form-item>
+          <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>
         </div>
         
-        <div class="button-container">
-          <el-button 
-            type="primary" 
-            class="calculate-btn" 
-            :disabled="!inputsEnabled"
-          >
-            计算
-          </el-button>
+        <div class="card-footer">
+          <p>安全标准依据: GB 2762-2022 食品安全国家标准</p>
         </div>
-      </el-form>
-    </el-card>
+      </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>
   </div>
 </template>
 
 <script>
 export default {
+  name: 'CropCdCalculator',
   data() {
     return {
       inputsEnabled: false,
-      yieldPerMu: '800',
-      soilCdContent: '0.76',
-      absorptionFactor: '0.0034',
-      soilPH: '0.5',
-      safetyThreshold: '15/1000'
+      yieldPerMu: 800,
+      cropCd: 0
     };
   },
   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-model-container {
+.crop-cd-calculator {
+  max-width: 900px;
+  margin: 0 auto;
   padding: 20px;
-  display: flex;
-  justify-content: center;
+  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);
 }
 
-.gradient-card {
-  /* 半透明渐变背景 */
-  background: linear-gradient(
-    135deg, 
-    rgba(250, 253, 255, 0.8), 
-    rgba(137, 223, 252, 0.8)
-  );
-  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
+.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);
+}
+
+.header h1 {
+  font-size: 2.2rem;
+  margin-bottom: 10px;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.header p {
+  font-size: 1.1rem;
+  opacity: 0.9;
+}
+
+.card-container {
+  margin-bottom: 30px;
+}
+
+.card {
+  background: rgba(255, 255, 255, 0.9);
   border-radius: 12px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-  padding: 30px;
-  width: 90%;
-  max-width: 800px;
-  border: none;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
 }
 
-h2 {
-  font-size: 24px;
-  margin-bottom: 20px;
-  text-align: center;
-  color: #333;
+.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;
+}
+
+.card-header h2 {
+  font-size: 1.6rem;
   font-weight: 600;
-  padding-bottom: 15px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.form-container {
-  margin-top: 25px;
+.card-header i {
+  font-size: 1.8rem;
+}
+
+.card-body {
+  padding: 25px;
 }
 
-.form-section {
+.enable-section {
+  text-align: center;
+  padding: 30px 20px;
+}
+
+.enable-section p {
+  margin-bottom: 25px;
+  font-size: 1.1rem;
+  color: #555;
+}
+
+.input-section {
+  display: grid;
+  gap: 20px;
+}
+
+.input-group {
   display: flex;
   flex-direction: column;
+  gap: 8px;
 }
 
-.input-row {
+.input-group label {
+  font-weight: 600;
+  color: #2c3e50;
   display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
+  align-items: center;
+  gap: 10px;
+}
+
+.input-group input {
+  padding: 14px 15px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 16px;
+  transition: all 0.3s;
+  background: #f9fbfd;
+}
+
+.input-group input:focus {
+  outline: none;
+  border-color: #3498db;
+  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
+}
+
+.button-group {
+  display: flex;
+  gap: 15px;
+  margin-top: 15px;
   flex-wrap: wrap;
 }
 
-.single-input {
+button {
+  padding: 14px 25px;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
   justify-content: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 200px;
 }
 
-.input-item {
-  flex: 0 0 calc(50% - 15px); /* 两个输入框各占50%，减去间距 */
-  margin-bottom: 0;
+.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);
 }
 
-.single-input .input-item {
-  flex: 0 0 100%; /* 单行输入框占满宽度 */
-  max-width: 500px; /* 限制最大宽度 */
+.enable-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(38, 176, 70, 0.4);
 }
 
-:deep(.el-form-item__label) {
-  font-size: 16px;
-  font-weight: 500;
-  color: #333;
-  margin-bottom: 8px;
-  display: block;
+.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);
 }
 
-.custom-input {
-  width: 100%;
+.calculate-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);
 }
 
-:deep(.custom-input .el-input__inner) {
-  background: rgba(255, 255, 255, 0.7);
-  border-radius: 8px;
-  border: 1px solid #dcdfe6;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-  padding: 12px 15px;
-  font-size: 16px;
-  color: #333;
-  transition: all 0.3s ease;
+.reset-btn {
+  background: linear-gradient(to right, rgba(241, 196, 15, 0.7), rgba(243, 156, 18, 0.7));
+  color: white;
+  box-shadow: 0 4px 10px rgba(241, 196, 15, 0.3);
 }
 
-:deep(.custom-input .el-input__inner:focus) {
-  border-color: #409EFF;
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+.reset-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(241, 196, 15, 0.4);
 }
 
-:deep(.custom-input .el-input__inner:disabled) {
-  background: rgba(245, 247, 250, 0.5);
-  color: #a8abb2;
+.result-section {
+  margin-top: 30px;
+  border-top: 1px solid #eee;
+  padding-top: 25px;
 }
 
-.enable-btn, .calculate-btn {
-  width: 100%;
-  max-width: 300px;
-  height: 50px;
-  border: none;
-  border-radius: 25px !important;
-  font-size: 18px;
-  font-weight: bold;
-  transition: all 0.4s ease;
-  display: block;
-  margin: 0 auto;
-  
-  /* 渐变背景色 */
-  background: linear-gradient(to right, #8DF9F0, #26B046);
-  color: white !important;
-  /* 按钮整体阴影 */
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15),
-              0 2px 6px rgba(38, 176, 70, 0.3) inset;
+.result-card {
+  background: rgba(249, 251, 253, 0.7);
+  border-radius: 10px;
+  padding: 20px;
+  border-left: 4px solid #3498db;
 }
 
-.enable-btn {
-  margin-top: 10px;
-  margin-bottom: 20px;
+.result-card h3 {
+  margin-bottom: 15px;
+  color: #2c3e50;
 }
 
-.calculate-btn {
-  margin-top: 20px;
+.result-content {
+  display: grid;
+  gap: 15px;
 }
 
-.enable-btn:hover, .calculate-btn:hover {
-  transform: scale(1.03);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2),
-              0 2px 8px rgba(38, 176, 70, 0.4) inset;
-  background: linear-gradient(to right, #7de8df, #20a03d);
+.result-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px dashed #eee;
 }
 
-.enable-btn:active, .calculate-btn:active {
-  transform: scale(0.98);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1),
-              0 1px 6px rgba(38, 176, 70, 0.4) inset;
+.highlight {
+  font-weight: 700;
+  color: #e74c3c;
+  font-size: 1.1rem;
 }
 
-.button-container {
+.result-status {
+  padding: 12px;
+  border-radius: 8px;
+  text-align: center;
+  font-weight: 600;
+  margin-top: 10px;
   display: flex;
+  align-items: center;
   justify-content: center;
+  gap: 10px;
 }
 
-/* 响应式调整 */
+.result-status.safe {
+  background: rgba(46, 204, 113, 0.15);
+  color: #27ae60;
+}
+
+.result-status.warning {
+  background: rgba(231, 76, 60, 0.15);
+  color: #c0392b;
+}
+
+.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;
+}
+
+.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);
+}
+
+.info-section h3 {
+  color: #2c3e50;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.info-section ol {
+  padding-left: 25px;
+  margin-bottom: 25px;
+}
+
+.info-section ol li {
+  margin-bottom: 10px;
+  line-height: 1.6;
+}
+
+.info-section p {
+  line-height: 1.6;
+  margin-bottom: 15px;
+}
+
+/* 响应式设计 */
 @media (max-width: 768px) {
-  .input-row {
-    flex-direction: column;
+  .header {
+    padding: 15px;
   }
   
-  .input-item {
-    flex: 0 0 100%;
-    margin-bottom: 20px;
+  .header h1 {
+    font-size: 1.8rem;
   }
   
-  .gradient-card {
+  .card-body {
     padding: 20px;
   }
   
-  .enable-btn, .calculate-btn {
+  .button-group {
+    flex-direction: column;
+  }
+  
+  button {
     width: 100%;
   }
 }

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

@@ -1,257 +1,409 @@
 <template>
-  <div class="crop-cd-model-container">
-    <el-card shadow="always" class="gradient-card">
-      <h2>作物镉模型计算</h2>
-      
-      <el-button class="enable-btn" @click="enableInputs">作物镉模型计算</el-button>
-      
-      <el-form label-width="250px" label-position="top" class="form-container">
-        <div class="form-section">
-          <div class="input-row">
-            <el-form-item label="作物亩产量 (斤)" class="input-item">
-              <el-input 
-                v-model="yieldPerMu" 
-                placeholder="800" 
-                :disabled="!inputsEnabled"
-                class="custom-input"
-              ></el-input>
-            </el-form-item>
-            
-            <el-form-item label="标题" class="input-item">
-              <el-input 
-                v-model="soilCdContent" 
-                placeholder="0.76" 
-                :disabled="!inputsEnabled"
-                class="custom-input"
-              ></el-input>
-            </el-form-item>
+  <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>
+        
+        <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 class="input-row">
-            <el-form-item label="标题" class="input-item">
-              <el-input 
-                v-model="absorptionFactor" 
-                placeholder="0.0034" 
-                :disabled="!inputsEnabled"
-                class="custom-input"
-              ></el-input>
-            </el-form-item>
+          <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>
             
-            <el-form-item label="标题" class="input-item">
-              <el-input 
-                v-model="soilPH" 
-                placeholder="0.5" 
-                :disabled="!inputsEnabled"
-                class="custom-input"
-              ></el-input>
-            </el-form-item>
+            <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 class="input-row single-input">
-            <el-form-item label="标题" class="input-item">
-              <el-input 
-                v-model="safetyThreshold" 
-                placeholder="15/1000" 
-                :disabled="!inputsEnabled"
-                class="custom-input"
-              ></el-input>
-            </el-form-item>
+          <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>
         </div>
         
-        <div class="button-container">
-          <el-button 
-            type="primary" 
-            class="calculate-btn" 
-            :disabled="!inputsEnabled"
-          >
-            计算
-          </el-button>
+        <div class="card-footer">
+          <p>安全标准依据: GB 2762-2022 食品安全国家标准</p>
         </div>
-      </el-form>
-    </el-card>
+      </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>
   </div>
 </template>
 
 <script>
 export default {
+  name: 'CropCdCalculator',
   data() {
     return {
       inputsEnabled: false,
-      yieldPerMu: '800',
-      soilCdContent: '0.76',
-      absorptionFactor: '0.0034',
-      soilPH: '0.5',
-      safetyThreshold: '15/1000'
+      yieldPerMu: 800,
+      cropCd: 0
     };
   },
   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-model-container {
+.crop-cd-calculator {
+  max-width: 900px;
+  margin: 0 auto;
   padding: 20px;
-  display: flex;
-  justify-content: center;
+  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);
 }
 
-.gradient-card {
-  /* 半透明渐变背景 */
-  background: linear-gradient(
-    135deg, 
-    rgba(250, 253, 255, 0.8), 
-    rgba(137, 223, 252, 0.8)
-  );
-  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
-  border-radius: 12px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-  padding: 30px;
-  width: 90%;
-  max-width: 800px; /* 增加最大宽度以容纳两列 */
-  border: none;
+.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);
 }
 
-h2 {
-  font-size: 24px;
-  margin-bottom: 20px;
-  text-align: center;
-  color: #333;
-  font-weight: 600;
-  padding-bottom: 15px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+.header h1 {
+  font-size: 2.2rem;
+  margin-bottom: 10px;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
 }
 
-.form-container {
-  margin-top: 25px;
+.header p {
+  font-size: 1.1rem;
+  opacity: 0.9;
 }
 
-.form-section {
-  display: flex;
-  flex-direction: column;
+.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;
 }
 
-.input-row {
+.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;
-  justify-content: space-between;
-  margin-bottom: 20px;
-  flex-wrap: wrap;
+  align-items: center;
+  gap: 15px;
 }
 
-.input-item {
-  flex: 0 0 calc(50% - 15px); /* 两个输入框各占50%，减去间距 */
-  margin-bottom: 0;
+.card-header h2 {
+  font-size: 1.6rem;
+  font-weight: 600;
 }
 
-.single-input {
-  justify-content: center;
+.card-header i {
+  font-size: 1.8rem;
 }
 
-.single-input .input-item {
-  flex: 0 0 100%; /* 单行输入框占满宽度 */
-  max-width: 500px; /* 限制最大宽度 */
+.card-body {
+  padding: 25px;
 }
 
-:deep(.el-form-item__label) {
-  font-size: 16px;
-  font-weight: 500;
-  color: #333;
-  margin-bottom: 8px;
-  display: block;
+.enable-section {
+  text-align: center;
+  padding: 30px 20px;
 }
 
-.custom-input {
-  width: 100%;
+.enable-section p {
+  margin-bottom: 25px;
+  font-size: 1.1rem;
+  color: #555;
 }
 
-:deep(.custom-input .el-input__inner) {
-  background: rgba(255, 255, 255, 0.7);
+.input-section {
+  display: grid;
+  gap: 20px;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.input-group label {
+  font-weight: 600;
+  color: #2c3e50;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.input-group input {
+  padding: 14px 15px;
+  border: 1px solid #ddd;
   border-radius: 8px;
-  border: 1px solid #dcdfe6;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-  padding: 12px 15px;
   font-size: 16px;
-  color: #333;
-  transition: all 0.3s ease;
+  transition: all 0.3s;
+  background: #f9fbfd;
 }
 
-:deep(.custom-input .el-input__inner:focus) {
-  border-color: #409EFF;
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+.input-group input:focus {
+  outline: none;
+  border-color: #3498db;
+  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
 }
 
-:deep(.custom-input .el-input__inner:disabled) {
-  background: rgba(245, 247, 250, 0.5);
-  color: #a8abb2;
+.button-group {
+  display: flex;
+  gap: 15px;
+  margin-top: 15px;
+  flex-wrap: wrap;
 }
 
-.enable-btn, .calculate-btn {
-  width: 100%;
-  max-width: 300px;
-  height: 50px;
+button {
+  padding: 14px 25px;
   border: none;
-  border-radius: 25px !important;
-  font-size: 18px;
-  font-weight: bold;
-  transition: all 0.4s ease;
-  display: block;
-  margin: 0 auto;
-  
-  /* 渐变背景色 */
-  background: linear-gradient(to right, #8DF9F0, #26B046);
-  color: white !important;
-  /* 按钮整体阴影 */
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15),
-              0 2px 6px rgba(38, 176, 70, 0.3) inset;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 200px;
 }
 
 .enable-btn {
-  margin-top: 10px;
-  margin-bottom: 20px;
+  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);
+}
+
+.enable-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(38, 176, 70, 0.4);
 }
 
 .calculate-btn {
-  margin-top: 20px;
+  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);
 }
 
-.enable-btn:hover, .calculate-btn:hover {
-  transform: scale(1.03);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2),
-              0 2px 8px rgba(38, 176, 70, 0.4) inset;
-  background: linear-gradient(to right, #7de8df, #20a03d);
+.reset-btn {
+  background: linear-gradient(to right, rgba(241, 196, 15, 0.7), rgba(243, 156, 18, 0.7));
+  color: white;
+  box-shadow: 0 4px 10px rgba(241, 196, 15, 0.3);
 }
 
-.enable-btn:active, .calculate-btn:active {
-  transform: scale(0.98);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1),
-              0 1px 6px rgba(38, 176, 70, 0.4) inset;
+.reset-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(241, 196, 15, 0.4);
 }
 
-.button-container {
+.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;
+  font-weight: 600;
+  margin-top: 10px;
   display: flex;
+  align-items: center;
   justify-content: center;
+  gap: 10px;
+}
+
+.result-status.safe {
+  background: rgba(46, 204, 113, 0.15);
+  color: #27ae60;
 }
 
-/* 响应式调整 */
+.result-status.warning {
+  background: rgba(231, 76, 60, 0.15);
+  color: #c0392b;
+}
+
+.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;
+}
+
+.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);
+}
+
+.info-section h3 {
+  color: #2c3e50;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.info-section ol {
+  padding-left: 25px;
+  margin-bottom: 25px;
+}
+
+.info-section ol li {
+  margin-bottom: 10px;
+  line-height: 1.6;
+}
+
+.info-section p {
+  line-height: 1.6;
+  margin-bottom: 15px;
+}
+
+/* 响应式设计 */
 @media (max-width: 768px) {
-  .input-row {
-    flex-direction: column;
+  .header {
+    padding: 15px;
   }
   
-  .input-item {
-    flex: 0 0 100%;
-    margin-bottom: 20px;
+  .header h1 {
+    font-size: 1.8rem;
   }
   
-  .gradient-card {
+  .card-body {
     padding: 20px;
   }
   
-  .enable-btn, .calculate-btn {
+  .button-group {
+    flex-direction: column;
+  }
+  
+  button {
     width: 100%;
   }
 }

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

@@ -1,118 +1,264 @@
 <template>
-  <div class="leakage-container">
-    <el-card class="gradient-card" shadow="hover">
-      <el-row :gutter="20">
-        <el-col :span="24">
-          <p class="label">地下渗漏(g/ha/a)</p>
-        </el-col>
-        <el-col :span="24">
-          <el-input
-            v-model="leakage"
-            placeholder="请输入"
-            class="custom-input"
-          />
-        </el-col>
-        <el-col :span="24" style="margin-top: 20px;">
-          <el-button class="calculate-btn" @click="onCalculate">计算</el-button>
-        </el-col>
-      </el-row>
-    </el-card>
+  <div class="container">
+    <div class="gradient-card">
+      <div class="card-header">
+        <h1>地下渗漏计算器</h1>
+        <p>评估地下水渗漏量及其环境影响</p>
+      </div>
+
+      <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" />
+          </div>
+
+          <div class="info-panel">
+            <div class="info-item">
+              <i class="fas fa-info-circle"></i>
+              <span>当前值: {{ leakage || '0.023' }}</span>
+            </div>
+            <div class="info-item">
+              <i class="fas fa-chart-line"></i>
+              <span>建议范围: 0.01 - 0.05</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="button-section">
+          <button class="calculate-btn" @click="onCalculate">
+            <i class="fas fa-calculator"></i> 计算渗漏量
+          </button>
+        </div>
+      </div>
+
+      <div class="card-footer">
+        <p><i class="fas fa-lightbulb"></i> 提示: 输入渗漏量后点击计算按钮获取详细分析</p>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup>
+<script>
 import { ref } from 'vue';
-import { ElCard, ElRow, ElCol, ElInput, ElButton } from 'element-plus';
 
-const leakage = ref('0.023');
+export default {
+  name: 'LeakageCalculator',
+  setup() {
+    const leakage = ref('0.023');
 
-const onCalculate = () => {
-  // 暂无计算逻辑，仅作展示
-  alert('计算按钮已点击');
+    const onCalculate = () => {
+      alert(`计算完成！当前渗漏量: ${leakage.value || '0.023'} g/ha/a`);
+    };
+
+    return {
+      leakage,
+      onCalculate
+    };
+  }
 };
 </script>
 
 <style scoped>
-.leakage-container {
+.container {
   display: flex;
   justify-content: center;
   align-items: center;
+  height: 100vh;
   padding: 20px;
+  background-size: 400% 400%;
 }
 
 .gradient-card {
-  /* 半透明渐变背景 */
-  background: linear-gradient(
-    135deg, 
-    rgba(250, 253, 255, 0.8), 
-    rgba(137, 223, 252, 0.8)
-  );
-  border-radius: 12px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-  padding: 30px;
-  text-align: left; /* 改为左对齐 */
-  width: 300px;
-  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
+  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: 40px;
+  width: 700px; /* 固定宽度 */
+  height: 700px; /* 固定高度 */
+  backdrop-filter: blur(8px);
   border: none;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.card-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.card-header h1 {
+  font-size: 2.5rem;
+  color: #006064;
+  margin-bottom: 10px;
+  font-weight: 700;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.card-header p {
+  font-size: 1.2rem;
+  color: #00838f;
+  opacity: 0.9;
+}
+
+.input-section {
+  margin: 30px 0;
+}
+
+.input-group {
+  margin-bottom: 25px;
 }
 
 .label {
-  font-weight: bold;
-  font-size: 18px;
-  margin-bottom: 10px; /* 减少底部外边距 */
-  color: #333;
+  display: block;
+  font-weight: 600;
+  font-size: 1.4rem;
+  margin-bottom: 15px;
+  color: #006064;
 }
 
 .custom-input {
   width: 100%;
-  max-width: 200px;
-  margin-left: 0; /* 确保输入框靠左对齐 */
+  padding: 18px 10px;
+  border-radius: 12px;
+  border: 2px solid #80deea;
+  font-size: 1.3rem;
+  background: rgba(255, 255, 255, 0.7);
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
 }
 
-/* 自定义输入框样式 */
-:deep(.custom-input .el-input__inner) {
-  background: rgba(255, 255, 255, 0.7);
-  border-radius: 8px;
-  border: 1px solid #dcdfe6;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-  padding: 10px 15px;
-  font-size: 16px;
-  color: #333;
+.custom-input:focus {
+  outline: none;
+  border-color: #26c6da;
+  box-shadow: 0 0 0 4px rgba(38, 198, 218, 0.3);
 }
 
-:deep(.custom-input .el-input__inner:focus) {
-  border-color: #409EFF;
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+.info-panel {
+  background: rgba(178, 235, 242, 0.4);
+  border-radius: 12px;
+  padding: 20px;
+  margin-top: 20px;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 1.2rem;
+  color: #006064;
+}
+
+.info-item i {
+  margin-right: 12px;
+  font-size: 1.4rem;
+  color: #00838f;
+}
+
+.button-section {
+  margin: 35px 0;
+  text-align: center;
+  flex-grow: 1;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
 }
 
 .calculate-btn {
-  width: 100%;
-  max-width: 200px;
-  height: 50px;
+  background: linear-gradient(to right, #8DF9F0, #26B046);
+  color: white;
   border: none;
-  border-radius: 25px !important;
-  font-size: 18px;
-  font-weight: bold;
+  border-radius: 50px;
+  padding: 20px 40px;
+  font-size: 1.5rem;
+  font-weight: 600;
+  cursor: pointer;
   transition: all 0.4s ease;
-  
-  /* 渐变背景色 */
-  background: linear-gradient(to right, #8DF9F0, #26B046);
-  color: white !important;
-  /* 按钮整体阴影 */
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15),
-              0 2px 6px rgba(38, 176, 70, 0.3) inset;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 300px;
+  position: relative;
+  overflow: hidden;
+}
+
+.calculate-btn i {
+  margin-right: 12px;
+  font-size: 1.6rem;
 }
 
 .calculate-btn:hover {
-  transform: scale(1.03);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2),
-              0 2px 8px rgba(38, 176, 70, 0.4) inset;
+  transform: translateY(-5px);
+  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
   background: linear-gradient(to right, #7de8df, #20a03d);
 }
 
 .calculate-btn:active {
-  transform: scale(0.98);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1),
-              0 1px 6px rgba(38, 176, 70, 0.4) inset;
+  transform: translateY(-2px);
+}
+
+.card-footer {
+  text-align: center;
+  font-size: 1.2rem;
+  color: #00838f;
+  font-style: italic;
+  padding-top: 20px;
+  border-top: 1px solid rgba(0, 150, 136, 0.2);
+}
+
+.card-footer i {
+  margin-right: 10px;
+}
+
+/* 水波纹效果 */
+.calculate-btn::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
+}
+
+.calculate-btn:active::after {
+  width: 300px;
+  height: 300px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .gradient-card {
+    padding: 25px;
+    width: 100%;
+    height: auto;
+    min-height: 500px;
+  }
+
+  .card-header h1 {
+    font-size: 2rem;
+  }
+
+  .label {
+    font-size: 1.2rem;
+  }
+
+  .custom-input {
+    padding: 15px;
+    font-size: 1.1rem;
+  }
+
+  .calculate-btn {
+    padding: 16px 30px;
+    font-size: 1.3rem;
+    min-width: 250px;
+  }
 }
 </style>

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

@@ -1,119 +1,264 @@
 <template>
-  <div class="runoff-container">
-    <el-card class="gradient-card" shadow="hover">
-      <el-row :gutter="20">
-        <el-col :span="24">
-          <p class="label">地表径流(g/ha/a)</p>
-        </el-col>
-        <el-col :span="24">
-          <el-input
-            v-model="runoff"
-            placeholder="请输入"
-            class="custom-input"
-          />
-        </el-col>
-        <el-col :span="24" style="margin-top: 20px;">
-          <el-button class="calculate-btn" @click="onCalculate">计算</el-button>
-        </el-col>
-      </el-row>
-    </el-card>
+  <div class="container">
+    <div class="gradient-card">
+      <div class="card-header">
+        <h1>地表径流计算器</h1>
+        <p>评估地表径流量及其环境影响</p>
+      </div>
+
+      <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" />
+          </div>
+
+          <div class="info-panel">
+            <div class="info-item">
+              <i class="fas fa-info-circle"></i>
+              <span>当前值: {{ leakage || '0.368' }}</span>
+            </div>
+            <div class="info-item">
+              <i class="fas fa-chart-line"></i>
+              <span>建议范围: 0.01 - 0.05</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="button-section">
+          <button class="calculate-btn" @click="onCalculate">
+            <i class="fas fa-calculator"></i> 计算渗漏量
+          </button>
+        </div>
+      </div>
+
+      <div class="card-footer">
+        <p><i class="fas fa-lightbulb"></i> 提示: 输入渗漏量后点击计算按钮获取详细分析</p>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup>
+<script>
 import { ref } from 'vue';
-import { ElCard, ElRow, ElCol, ElInput, ElButton } from 'element-plus';
 
-const runoff = ref('0.368');
+export default {
+  name: 'LeakageCalculator',
+  setup() {
+    const leakage = ref('0.368');
 
-const onCalculate = () => {
-  // 暂无计算逻辑，仅作展示
-  alert('计算按钮已点击');
+    const onCalculate = () => {
+      alert(`计算完成！当前渗漏量: ${leakage.value || '0.368'} g/ha/a`);
+    };
+
+    return {
+      leakage,
+      onCalculate
+    };
+  }
 };
 </script>
 
 <style scoped>
-.runoff-container {
+.container {
   display: flex;
   justify-content: center;
   align-items: center;
+  height: 100vh;
   padding: 20px;
-  margin-left: 10px; /* 确保输入框靠左对齐 */
+  background-size: 400% 400%;
 }
 
 .gradient-card {
-  /* 半透明渐变背景 */
-  background: linear-gradient(
-    135deg, 
-    rgba(250, 253, 255, 0.8), 
-    rgba(137, 223, 252, 0.8)
-  );
-  border-radius: 12px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-  padding: 30px;
-  text-align: left; /* 改为左对齐 */
-  width: 300px;
-  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
+  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: 40px;
+  width: 700px; /* 固定宽度 */
+  height: 700px; /* 固定高度 */
+  backdrop-filter: blur(8px);
   border: none;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.card-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.card-header h1 {
+  font-size: 2.5rem;
+  color: #006064;
+  margin-bottom: 10px;
+  font-weight: 700;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.card-header p {
+  font-size: 1.2rem;
+  color: #00838f;
+  opacity: 0.9;
+}
+
+.input-section {
+  margin: 30px 0;
+}
+
+.input-group {
+  margin-bottom: 25px;
 }
 
 .label {
-  font-weight: bold;
-  font-size: 18px;
-  margin-bottom: 10px; /* 减少底部外边距 */
-  color: #333;
+  display: block;
+  font-weight: 600;
+  font-size: 1.4rem;
+  margin-bottom: 15px;
+  color: #006064;
 }
 
 .custom-input {
   width: 100%;
-  max-width: 200px;
-  margin-left: 10px; /* 确保输入框靠左对齐 */
+  padding: 18px 10px;
+  border-radius: 12px;
+  border: 2px solid #80deea;
+  font-size: 1.3rem;
+  background: rgba(255, 255, 255, 0.7);
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
 }
 
-/* 自定义输入框样式 */
-:deep(.custom-input .el-input__inner) {
-  background: rgba(255, 255, 255, 0.7);
-  border-radius: 8px;
-  border: 1px solid #dcdfe6;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-  padding: 10px 15px;
-  font-size: 16px;
+.custom-input:focus {
+  outline: none;
+  border-color: #26c6da;
+  box-shadow: 0 0 0 4px rgba(38, 198, 218, 0.3);
+}
+
+.info-panel {
+  background: rgba(178, 235, 242, 0.4);
+  border-radius: 12px;
+  padding: 20px;
+  margin-top: 20px;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 1.2rem;
+  color: #006064;
 }
 
-:deep(.custom-input .el-input__inner:focus) {
-  border-color: #409EFF;
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+.info-item i {
+  margin-right: 12px;
+  font-size: 1.4rem;
+  color: #00838f;
+}
+
+.button-section {
+  margin: 35px 0;
+  text-align: center;
+  flex-grow: 1;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
 }
 
 .calculate-btn {
-  width: 100%;
-  max-width: 200px;
-  height: 50px;
+  background: linear-gradient(to right, #8DF9F0, #26B046);
+  color: white;
   border: none;
-  border-radius: 25px !important;
-  font-size: 18px;
-  font-weight: bold;
+  border-radius: 50px;
+  padding: 20px 40px;
+  font-size: 1.5rem;
+  font-weight: 600;
+  cursor: pointer;
   transition: all 0.4s ease;
-  
-  /* 渐变背景色 */
-  background: linear-gradient(to right, #8DF9F0, #26B046);
-  color: white !important;
-  /* 按钮整体阴影 */
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15),
-              0 2px 6px rgba(38, 176, 70, 0.3) inset;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 300px;
+  position: relative;
+  overflow: hidden;
+}
+
+.calculate-btn i {
+  margin-right: 12px;
+  font-size: 1.6rem;
 }
 
 .calculate-btn:hover {
-  transform: scale(1.03);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2),
-              0 2px 8px rgba(38, 176, 70, 0.4) inset;
+  transform: translateY(-5px);
+  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
   background: linear-gradient(to right, #7de8df, #20a03d);
 }
 
 .calculate-btn:active {
-  transform: scale(0.98);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1),
-              0 1px 6px rgba(38, 176, 70, 0.4) inset;
+  transform: translateY(-2px);
 }
 
+.card-footer {
+  text-align: center;
+  font-size: 1.2rem;
+  color: #00838f;
+  font-style: italic;
+  padding-top: 20px;
+  border-top: 1px solid rgba(0, 150, 136, 0.2);
+}
+
+.card-footer i {
+  margin-right: 10px;
+}
+
+/* 水波纹效果 */
+.calculate-btn::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
+}
+
+.calculate-btn:active::after {
+  width: 300px;
+  height: 300px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .gradient-card {
+    padding: 25px;
+    width: 100%;
+    height: auto;
+    min-height: 500px;
+  }
+
+  .card-header h1 {
+    font-size: 2rem;
+  }
+
+  .label {
+    font-size: 1.2rem;
+  }
+
+  .custom-input {
+    padding: 15px;
+    font-size: 1.1rem;
+  }
+
+  .calculate-btn {
+    padding: 16px 30px;
+    font-size: 1.3rem;
+    min-width: 250px;
+  }
+}
 </style>

src/views/User/selectCityAndCounty.vue

@@ -3,7 +3,7 @@
     <!-- 左侧背景图容器 -->
     <div class="background-container">
       <h1 class="title">选择市县及地区</h1>
-      <!-- 城市按钮容器放在背景图内 -->
+      <!-- 城市按钮容器 -->
       <div class="city-buttons-container">
         <el-button
           v-for="city in cities"
@@ -34,14 +34,21 @@
                 :class="{ selected: isDistrictSelected(district.name) }"
                 @click="toggleDistrict(district.name)"
               >
-                <img :src="district.image" class="district-image" />
+                <!-- 左侧图片区域 -->
+                <div class="image-container">
+                  <img :src="district.image" class="district-image" />
+                </div>
+                
+                <!-- 右侧内容区域 - 优化布局 -->
                 <div class="district-content">
-                  <span class="district-name">{{ district.name }}</span>
-                  <p class="district-desc">{{ district.description }}</p>
+                  <div class="text-content">
+                    <span class="district-name">{{ district.name }}</span>
+                    <p class="district-desc">{{ district.description || "该地区详细信息" }}</p>
+                  </div>
+                  <el-icon class="arrow-icon">
+                    <arrow-right />
+                  </el-icon>
                 </div>
-                <el-icon class="arrow-icon">
-                  <arrow-right />
-                </el-icon>
               </div>
             </div>
           </div>
@@ -80,39 +87,39 @@ export default {
 
     const districts = {
       韶关: [
-        { name: "武江区", image: "/images/武江区.jpg" },
-        { name: "浈江区", image: "/images/浈江区.jpg" },
-        { name: "曲江区", image: "/images/曲江区.jpg" },
-        { name: "始兴县", image: "/images/始兴县.jpg" },
-        { name: "仁化县", deimage: "/images/仁化县.jpg" },
-        { name: "翁源县", image: "/images/翁源县.jpg" },
-        { name: "乳源瑶族自治县", image: "/images/乳源瑶族自治县.jpg" },
-        { name: "新丰县", image: "/images/新丰县.jpg" },
-        { name: "乐昌市", image: "/images/乐昌市.jpg" },
-        { name: "南雄市", image: "/images/南雄市.jpg" }
+        { name: "武江区", image: "/images/武江区.jpg", description: "位于韶关市西部，工业发达，环境优美" },
+        { name: "浈江区", image: "/images/浈江区.jpg", description: "韶关市中心城区，商业繁荣，交通便利" },
+        { name: "曲江区", image: "/images/曲江区.jpg", description: "历史文化名城，旅游资源丰富" },
+        { name: "始兴县", image: "/images/始兴县.jpg", description: "生态环境优良，农业发达" },
+        { name: "仁化县", image: "/images/仁化县.jpg", description: "丹霞地貌核心区，世界自然遗产" },
+        { name: "翁源县", image: "/images/翁源县.jpg", description: "中国兰花之乡，生态农业示范区" },
+        { name: "乳源瑶族自治县", image: "/images/乳源瑶族自治县.jpg", description: "瑶族文化发源地，自然风光秀丽" },
+        { name: "新丰县", image: "/images/新丰县.jpg", description: "生态旅游胜地，温泉资源丰富" },
+        { name: "乐昌市", image: "/images/乐昌市.jpg", description: "粤北门户城市，农业特色鲜明" },
+        { name: "南雄市", image: "/images/南雄市.jpg", description: "历史文化名城，银杏之乡" }
       ],
       河池: [
-        { name: "金城江区", image: "/images/金城江区.jpg" },
-        { name: "宜州区", image: "/images/宜州区.jpg" },
-        { name: "南丹县", image: "/images/南丹县.jpg" },
-        { name: "天峨县", image: "/images/天峨县.jpg" },
-        { name: "凤山县", image: "/images/凤山县.jpg" },
-        { name: "东兰县", image: "/images/东兰县.jpg" },
-        { name: "罗城仫佬族自治县", image: "/images/罗城仫佬族自治县.jpg" },
-        { name: "环江毛南族自治县", image: "/images/环江毛南族自治县.jpg" },
-        { name: "巴马瑶族自治县", image: "/images/巴马瑶族自治县.png" },
-        { name: "都安瑶族自治县", image: "/images/都安瑶族自治县.jpg" },
-        { name: "大化瑶族自治县", image: "/images/大化瑶族自治县.jpg" }
+        { name: "金城江区", image: "/images/金城江区.jpg", description: "河池市中心城区，交通枢纽，商业中心" },
+        { name: "宜州区", image: "/images/宜州区.jpg", description: "刘三姐故乡，壮族文化发源地" },
+        { name: "南丹县", image: "/images/南丹县.jpg", description: "有色金属之乡，白裤瑶文化中心" },
+        { name: "天峨县", image: "/images/天峨县.jpg", description: "红水河上游，森林覆盖率高达85%" },
+        { name: "凤山县", image: "/images/凤山县.jpg", description: "世界地质公园，喀斯特地貌典型区" },
+        { name: "东兰县", image: "/images/东兰县.jpg", description: "革命老区，长寿之乡" },
+        { name: "罗城仫佬族自治县", image: "/images/罗城仫佬族自治县.jpg", description: "全国唯一的仫佬族自治县" },
+        { name: "环江毛南族自治县", image: "/images/环江毛南族自治县.jpg", description: "世界自然遗产地，喀斯特地貌典型" },
+        { name: "巴马瑶族自治县", image: "/images/巴马瑶族自治县.png", description: "世界长寿之乡，养生旅游胜地" },
+        { name: "都安瑶族自治县", image: "/images/都安瑶族自治县.jpg", description: "喀斯特地貌典型区，地下河之乡" },
+        { name: "大化瑶族自治县", image: "/images/大化瑶族自治县.jpg", description: "红水河畔明珠，水电资源丰富" }
       ],
       腾冲: [
-        { name: "腾冲市区", image: "/images/腾冲市区.jpg" },
-        { name: "和顺古镇", image: "/images/和顺古镇.jpg" },
-        { name: "固东镇", image: "/images/固东镇.jpg" },
-        { name: "界头镇", image: "/images/界头镇.jpg" },
-        { name: "曲石镇", image: "/images/曲石镇.jpg" },
-        { name: "明光镇", image: "/images/明光镇.jpg" },
-        { name: "清水乡", image: "/images/清水乡.jpg" },
-        { name: "猴桥镇", image: "/images/猴桥镇.jpg" }
+        { name: "腾冲市区", image: "/images/腾冲市区.jpg", description: "云南边陲重镇，历史文化名城" },
+        { name: "和顺古镇", image: "/images/和顺古镇.jpg", description: "中国第一魅力名镇，侨乡文化代表" },
+        { name: "固东镇", image: "/images/固东镇.jpg", description: "银杏村所在地，秋季摄影胜地" },
+        { name: "界头镇", image: "/images/界头镇.jpg", description: "高黎贡山脚下，油菜花海之乡" },
+        { name: "曲石镇", image: "/images/曲石镇.jpg", description: "火山地质奇观，黑鱼河风景区" },
+        { name: "明光镇", image: "/images/明光镇.jpg", description: "边境贸易重镇，多元文化交融" },
+        { name: "清水乡", image: "/images/清水乡.jpg", description: "温泉度假胜地，热海景区所在地" },
+        { name: "猴桥镇", image: "/images/猴桥镇.jpg", description: "中缅边境口岸，跨境贸易枢纽" }
       ],
     };
 
@@ -122,34 +129,30 @@ export default {
 
     const selectCity = (cityName) => {
       selectedCity.value = cityName;
-      selectedDistricts.value = []; // 切换城市时清空所选项
+      selectedDistricts.value = [];
     };
     
-    // 切换地区选择状态
     const toggleDistrict = (districtName) => {
       const index = selectedDistricts.value.indexOf(districtName);
       if (index >= 0) {
-        // 如果已选中，则移除
         selectedDistricts.value.splice(index, 1);
       } else {
-        // 如果未选中，则添加
         selectedDistricts.value.push(districtName);
       }
     };
     
-    // 检查地区是否被选中
     const isDistrictSelected = (districtName) => {
       return selectedDistricts.value.includes(districtName);
     };
 
     const goToKanBan = () => {
       localStorage.setItem("selectedDistricts", JSON.stringify(selectedDistricts.value));
-      const userType = localStorage.getItem("userType"); // 获取用户类型
+      const userType = localStorage.getItem("userType");
       if (userType === "admin") {
-        router.push({ name: "parameterConfig" }); // 管理员跳转到 parameterConfig
+        router.push({ name: "parameterConfig" });
       } else {
         router.push({
-          name: "samplingMethodDevice1", // 普通用户跳转到 samplingMethodDevice1
+          name: "samplingMethodDevice1",
           query: { districts: selectedDistricts.value.join(",") },
         });
       }
@@ -176,8 +179,9 @@ export default {
   top: 0;
   left: 0;
   width: 300px;
-  height: 100vh;
-  background-image: url('@/assets/city-bg.jpg');
+  height: 100%;
+  min-height: 100vh;
+  background-image: url('@/assets/city-bg.jpg'); /* 添加背景图 */
   background-size: cover;
   background-position: center;
   z-index: 0;
@@ -185,6 +189,7 @@ export default {
   flex-direction: column;
   align-items: center;
   padding-top: 40px;
+  box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
 }
 
 .city-selection {
@@ -193,24 +198,27 @@ export default {
   position: relative;
 }
 
+/* 右侧内容区域 - 移除背景图 */
 .content-area {
   margin-left: 300px;
   flex: 1;
   padding: 20px;
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  min-height: 100vh;
   box-sizing: border-box;
+  background: linear-gradient(to bottom, #FFECB8 0%, #EBEBEB 100%); /* 添加渐变色背景 */
 }
 
+
 .title {
   color: #fff;
   font-weight: 700;
   font-size: 36px;
   margin-bottom: 60px;
   text-align: center;
-  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
   padding: 0 20px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
 }
 
 /* 城市按钮容器 */
@@ -219,30 +227,37 @@ export default {
   flex-direction: column;
   gap: 35px;
   width: 80%;
-  padding: 90px 70px 0 30px;
+  padding: 90px 70px 0 50px;
 }
 
+.city-button {
+  position: relative; /* 添加相对定位 */
+}
+
+.city-button:first-child {
+  left: 9px; /* 第一个按钮向右移动5px */
+}
 .city-button {
   width: 100%;
   height: 80px;
   font-size: 28px;
   border: none;
   border-radius: 15px;
-  background-color: rgba(255, 255, 255, 0.3);
-  color: #fff;
+  background-color: rgba(255, 255, 255, 0.4);
+  color: #333;
   transition: all 0.3s ease;
   cursor: pointer;
-  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-  backdrop-filter: blur(5px);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 }
 
 .city-button:hover {
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.6);
 }
 
+/* 加深选中状态 */
 .city-button.selected {
-  background-color: rgba(18, 102, 252, 0.8);
-  color: #E9FEFF;
+  background-color: #B36F00;
+  color: #FFFFFF;
   box-shadow: 0 6px 12px rgba(0,0,0,0.3);
 }
 
@@ -290,52 +305,83 @@ export default {
 .district-card {
   width: 95%;
   height: 150px;
-  background-color: #B5DBF0;
+  background: linear-gradient(180deg, #FFFFFF 0%, #FFFACD 100%);
   border-radius: 12px;
   display: flex;
-  align-items: center;
-  padding: 20px;
   box-shadow: 0 4px 15px rgba(0,0,0,0.1);
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
-  border: 2px solid transparent; /* 默认透明边框 */
+  overflow: hidden;
+  border: 2px solid transparent;
 }
 
 /* 选中状态的卡片样式 */
 .district-card.selected {
-  border-color: #1266FC;
-  background-color: #a1c3e6;
-  box-shadow: 0 6px 20px rgba(18, 102, 252, 0.3);
+  box-shadow: 0 6px 20px rgba(179, 111, 0, 0.2);
+  border: 2px solid #E6B559;
 }
 
 .district-card:hover {
-  background-color: #a1c3e6;
-  transform: translateY(-5px);
-  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
+  transform: translateY(-3px);
+  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
 }
 
-.district-image {
+/* 左侧图片容器 */
+.image-container {
   width: 170px;
+  height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(180deg, #FFFFFF 0%, #FFFACD 100%);
+  border-radius: 12px 0 0 12px;
+  overflow: hidden;
+}
+
+/* 选中状态左侧图片区域背景色 */
+.district-card.selected .image-container {
+  background: linear-gradient(180deg, #FFFBE6 0%, #FFE8B8 100%);
+}
+
+.district-card.selected:hover .image-container {
+  background: linear-gradient(180deg, #FFF6D9 0%, #FFE1A6 100%);
+}
+
+.district-image {
+  width: 160px;
   height: 110px;
   object-fit: cover;
   border-radius: 8px;
-  margin-right: 20px;
-  flex-shrink: 0;
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
+/* 右侧内容区域 - 优化垂直居中 */
 .district-content {
+  flex: 1;
+  display: flex;
+  padding: 20px;
+  position: relative;
+  background: linear-gradient(180deg, #FFFFFF 0%, #FFFACD 100%);
+  border-radius: 0 12px 12px 0;
+  align-items: center; /* 垂直居中 */
+}
+
+/* 文字内容容器 */
+.text-content {
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  justify-content: center; /* 垂直居中 */
+  padding-right: 30px; /* 为箭头留出空间 */
 }
 
+/* 未选中状态文字颜色 */
 .district-name {
   font-size: 22px;
   font-weight: 700;
-  color: #222;
-  margin-bottom: 10px;
+  color: #333333;
+  margin-bottom: 8px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -343,24 +389,43 @@ export default {
 
 .district-desc {
   font-size: 16px;
-  color: #444;
+  color: #666666;
   line-height: 1.4;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  flex-grow: 1;
 }
 
+/* 选中状态文字颜色 */
+.district-card.selected .district-name,
+.district-card.selected .district-desc {
+  color: #333333;
+  font-weight: bold;
+}
+
+/* 箭头图标垂直居中 */
 .arrow-icon {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
   font-size: 24px;
-  color: #1266FC;
-  margin-left: 15px;
-  flex-shrink: 0;
+  color: #333;
+  transition: transform 0.3s ease;
 }
 
-/* 按钮容器 - 固定在底部 */
+.district-card:hover .arrow-icon {
+  transform: translateY(-50%) translateX(3px);
+}
+
+.district-card.selected .arrow-icon {
+  color: #E6B559;
+}
+
+/* 按钮容器 */
 .button-container {
   padding: 20px 0;
   text-align: center;
@@ -369,29 +434,32 @@ export default {
   bottom: 20px;
   z-index: 10;
   border-radius: 10px;
-  margin-top: auto; /* 确保按钮在底部 */
+  margin-top: auto;
 }
 
+/* 跳转按钮 */
 .go-button {
-  width: 200px;
+  width: 220px;
   height: 60px;
   font-size: 20px;
   border-radius: 30px;
-  margin-right: -1130px;
-  background: linear-gradient(to right, #1266FC, #4e8cff);
+  margin-right: -1080px;
+  background: linear-gradient(135deg, #E6B559 0%, #DBAD55 100%);
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(219, 173, 85, 0.4);
   border: none;
-  box-shadow: 0 6px 15px rgba(18, 102, 252, 0.4);
   transition: all 0.3s ease;
 }
 
 .go-button:hover {
   transform: scale(1.05);
-  box-shadow: 0 8px 20px rgba(18, 102, 252, 0.6);
+  box-shadow: 0 6px 15px rgba(219, 173, 85, 0.6);
 }
 
 .go-button:disabled {
   opacity: 0.6;
   cursor: not-allowed;
+  background: linear-gradient(135deg, #c0a47f 0%, #b5a189 100%);
 }
 
 /* 滚动条样式 */
@@ -400,21 +468,67 @@ export default {
 }
 
 .districts-group::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  background: rgba(241, 241, 241, 0.5);
   border-radius: 4px;
 }
 
 .districts-group::-webkit-scrollbar-thumb {
-  background: #888;
+  background: rgba(136, 136, 136, 0.7);
   border-radius: 4px;
 }
 
 .districts-group::-webkit-scrollbar-thumb:hover {
-  background: #555;
+  background: rgba(85, 85, 85, 0.8);
 }
 
-.el-button, .el-button.is-round {
-    margin-left: 15px ;
+/* 响应式调整 */
+@media (max-width: 1200px) {
+  .district-item {
+    width: 100%;
+    max-width: 100%;
+  }
+  
+  .background-container {
+    width: 250px;
+  }
+  
+  .content-area {
+    margin-left: 250px;
+  }
 }
 
+@media (max-width: 768px) {
+  .background-container {
+    position: relative;
+    width: 100%;
+    height: auto;
+    padding-bottom: 30px;
+  }
+  
+  .content-area {
+    margin-left: 0;
+  }
+  
+  .city-buttons-container {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 30px 20px 20px;
+    gap: 15px;
+  }
+  
+  .city-button {
+    width: 45%;
+    height: 60px;
+    font-size: 18px;
+  }
+  
+  .title {
+    margin-bottom: 30px;
+  }
+  
+  .district-item {
+    min-width: 100%;
+  }
+}
 </style>

src/views/login/loginView.vue

@@ -6,14 +6,7 @@
     <!-- 登录/注册表单部分 -->
     <div class="auth-form-container">
       <!-- 登录表单 -->
-      <el-form
-        v-if="isLogin"
-        ref="formRef"
-        :model="form"
-        :rules="rules"
-        label-width="100px"
-        class="login-form"
-      >
+      <el-form v-if="isLogin" ref="formRef" :model="form" :rules="rules" label-width="116px" class="login-form">
         <div class="form-header">
           <!-- 根据用户类型显示不同的标题 -->
           <h2 class="form-title">
@@ -25,20 +18,26 @@
           </h2>
           <!-- 切换用户类型的按钮 -->
           <el-button class="user-type-toggle" @click="toggleUserType" link>
-            <el-icon><User /></el-icon>
+            <el-icon>
+              <User />
+            </el-icon>
             <span>{{ currentUserTypeName }}</span>
           </el-button>
         </div>
 
         <!-- 用户名输入框 -->
-        <el-form-item :label="$t('login.username')" prop="name">
-          <el-input v-model="form.name"></el-input>
-        </el-form-item>
+        <div class="input-frame">
+          <el-form-item label="账号：" prop="name">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+        </div>
 
         <!-- 密码输入框 -->
-        <el-form-item :label="$t('login.password')" prop="password">
-          <el-input type="password" v-model="form.password"></el-input>
-        </el-form-item>
+        <div class="input-frame">
+          <el-form-item label="密码：" prop="password">
+            <el-input type="password" v-model="form.password"></el-input>
+          </el-form-item>
+        </div>
 
         <!-- 语言切换按钮 -->
         <div class="language-toggle-wrapper">
@@ -50,12 +49,7 @@
         <!-- 提交登录按钮和注册链接 -->
         <el-form-item>
           <div class="button-group">
-            <el-button
-              type="primary"
-              @click="onSubmit"
-              :loading="loading"
-              class="login-button"
-            >
+            <el-button type="primary" @click="onSubmit" :loading="loading" class="login-button">
               {{ $t("login.loginButton") }}
             </el-button>
           </div>
@@ -68,44 +62,40 @@
       </el-form>
 
       <!-- 注册表单 -->
-      <el-form
-        v-else
-        ref="registerFormRef"
-        :model="registerForm"
-        :rules="registerRules"
-        label-width="100px"
-        class="login-form"
-      >
+      <el-form v-else ref="registerFormRef" :model="registerForm" :rules="registerRules" label-width="116px"
+        class="login-form">
         <div class="form-header">
           <!-- 注册表单标题 -->
           <h2 class="form-title">{{ $t("register.title") }}</h2>
           <!-- 切换用户类型的按钮 -->
           <el-button class="user-type-toggle" @click="toggleUserType" link>
-            <el-icon><User /></el-icon>
+            <el-icon>
+              <User />
+            </el-icon>
             <span>{{ currentUserTypeName }}</span>
           </el-button>
         </div>
 
         <!-- 用户名输入框 -->
-        <el-form-item :label="$t('register.username')" prop="name">
-          <el-input v-model="registerForm.name"></el-input>
-        </el-form-item>
+        <div class="input-frame">
+          <el-form-item label="账号：" prop="name">
+            <el-input v-model="registerForm.name"></el-input>
+          </el-form-item>
+        </div>
 
         <!-- 密码输入框 -->
-        <el-form-item :label="$t('register.password')" prop="password">
-          <el-input type="password" v-model="registerForm.password"></el-input>
-        </el-form-item>
+        <div class="input-frame">
+          <el-form-item label="密码：" prop="password">
+            <el-input type="password" v-model="registerForm.password"></el-input>
+          </el-form-item>
+        </div>
 
         <!-- 确认密码输入框 -->
-        <el-form-item
-          :label="$t('register.confirmPassword')"
-          prop="confirmPassword"
-        >
-          <el-input
-            type="password"
-            v-model="registerForm.confirmPassword"
-          ></el-input>
-        </el-form-item>
+        <div class="input-frame">
+          <el-form-item label="确认密码：" prop="confirmPassword">
+            <el-input type="password" v-model="registerForm.confirmPassword"></el-input>
+          </el-form-item>
+        </div>
 
         <!-- 语言切换按钮 -->
         <div class="language-toggle-wrapper">
@@ -116,17 +106,12 @@
         <!-- 提交注册按钮和返回登录链接 -->
         <el-form-item>
           <div class="button-group">
-            <el-button
-              type="primary"
-              @click="onRegister"
-              :loading="loading"
-              class="login-button"
-            >
+            <el-button type="primary" @click="onRegister" :loading="loading" class="login-button">
               {{ $t("register.registerButton") }}
             </el-button>
           </div>
-          <div class="button-group">
-            <span type="primary" @click="toggleForm" :loading="loading" class="register-button">
+          <div class="button-group register-link-container">
+            <span @click="toggleForm" class="register-button">
               {{ $t("register.backToLoginButton") }}
             </span>
           </div>
@@ -368,23 +353,29 @@ const registerRules = reactive({
 }
 
 .auth-left {
-  width: 45%;
+  width: 35%;
   background: url("@/assets/login-bg.png") no-repeat center center;
   background-size: cover;
 }
 
+/* 调整表单容器大小 */
 .auth-form-container {
-  width: 50%;
-  padding: 0 40px 0 90px;
+  width: 55%;
+  padding: 0 40px 0 60px;
   display: flex;
   justify-content: center;
-  align-items: flex-start;
+  align-items: center;
+  flex-direction: column;
 }
 
+/* 调整表单整体大小 */
 .login-form {
   width: 100%;
-  padding: 40px 0 60px 60px;
-  margin-top: 70px;
+  max-width: 700px;
+  padding: 40px 30px;
+  margin-top: 50px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 15px;
 }
 
 /* 表单头部 */
@@ -392,8 +383,8 @@ const registerRules = reactive({
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 50px;
-  margin-top: 40px;
+  margin-bottom: 40px;
+  margin-top: 20px;
 }
 
 .form-title {
@@ -420,8 +411,7 @@ const registerRules = reactive({
 /* 语言切换按钮 */
 .language-toggle-wrapper {
   text-align: right;
-  margin: 5px 0 1px;
-  transform: translateX(-210px);
+  margin: 5px 0 10px;
 }
 
 /* 表单项样式 */
@@ -430,39 +420,61 @@ const registerRules = reactive({
   display: block;
   text-align: left;
   font-size: 24px;
-  padding-bottom: 4px;
+  padding-bottom: 8px;
+  color: #7E7878;
 }
 
 :deep(.el-form-item) {
   display: flex;
   flex-direction: column;
-  margin-bottom: 25px;
+  margin-bottom: 0;
+}
+
+/* 输入框样式 - 改为长方形 */
+:deep(.el-input) {
+  width: 100%;
+}
+
+:deep(.el-input .el-input__inner) {
+  height: 50px;
+  font-size: 20px;
+  border-radius: 0; /* 将圆角改为0，变成直角 */
+  border: 1px solid #dcdfe6;
+  background-color: #ffffff;
+  padding: 0 15px;
 }
 
 /* 登录按钮 */
 .login-button {
   background: linear-gradient(to right, #8df9f0, #26b046);
-  width: 393px;
+  width: 100%;
+  max-width: 400px;
   height: 56px;
   color: white;
   border: none;
   border-radius: 20px;
   font-size: 24px;
   cursor: pointer;
-  margin-top: -30px; /* 向上移动20px */
+  margin-top: 10px;
 }
 
 .login-button:hover {
   opacity: 0.9;
 }
 
+/* 注册按钮容器 */
+.register-link-container {
+  margin-top: 20px;
+}
+
 .register-button {
-  text-align: right;
-  margin: 90px 0 1px;
+  display: block;
+  text-align: center;
   color: #478bf0;
-  font-size: 14px;
+  font-size: 18px;
   cursor: pointer;
-  transform: translateX(-240px);
+  padding: 10px 0;
+  width: 100%;
 }
 
 .register-button:hover {
@@ -474,11 +486,12 @@ const registerRules = reactive({
 .button-group {
   display: flex;
   justify-content: center;
+  width: 100%;
 }
 
 .text-toggle {
   color: #478bf0;
-  font-size: 14px;
+  font-size: 16px;
   cursor: pointer;
 }
 
@@ -489,17 +502,18 @@ const registerRules = reactive({
 
 .language-toggle-wrapper {
   text-align: right;
-  margin: 10px 0 40px;
+  margin: 15px 0 20px;
 }
 
 .text-link-wrapper {
   text-align: center;
-  margin-left: -295px;
-  margin-top: 120px;
+  margin-top: 20px;
 }
 
-:deep(.el-input) {
-  max-width: 560px;
+.input-frame {
+  background-color: #fff;
   width: 100%;
+  padding: 15px 10px;
+  margin-bottom: 20px;
 }
-</style>
+</style>