修改登录注册提示样式，统一地图直方图大小，调整灌溉水计算和农业投入品计算的样式

.eslintrc-auto-import.json

@@ -5,6 +5,7 @@
     "ComputedRef": true,
     "DirectiveBinding": true,
     "EffectScope": true,
+    "ElMessage": true,
     "ExtractDefaultPropTypes": true,
     "ExtractPropTypes": true,
     "ExtractPublicPropTypes": true,

src/components/layout/AppHeader.vue

@@ -29,7 +29,7 @@
 
 <script setup lang="ts">
 import { reactive } from "vue";
-import { ElMessageBox, ElMessage } from "element-plus";
+import { ElMessage } from "element-plus";
 import { useTokenStore } from "@/stores/mytoken";
 import { logout } from "@/API/users";
 import router from "@/router";
@@ -37,7 +37,6 @@ import router from "@/router";
 // 获取 tokenStore 实例
 const tokenStore = useTokenStore();
 
-
 // 日志记录函数
 function logAction(action: string) {
   console.log(`[AppHeader] ${action}`);
@@ -52,11 +51,6 @@ function showError(message: string) {
 const handleLogout = async () => {
   try {
     logAction("Logout initiated");
-    await ElMessageBox.confirm("确定要退出登录吗？", "提示", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    });
     await logout(); // 调用退出接口
     tokenStore.clearToken(); // 清除本地存储的 token
     ElMessage.success("退出成功");
@@ -66,8 +60,6 @@ const handleLogout = async () => {
     logAction("Logout failed");
     if (error instanceof Error) {
       showError(`退出失败：${error.message}`);
-    } else {
-      ElMessage.info("已取消退出");
     }
   }
 };

src/components/layout/AppLayout.vue

@@ -106,7 +106,7 @@
 import { ref, reactive, computed, watch, defineAsyncComponent, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useTokenStore } from "@/stores/mytoken";
-import { ElMessageBox } from "element-plus";
+import { ElMessageBox, ElMessage } from "element-plus"; // 确保导入ElMessage
 import { logout } from "@/API/users";
 import { useI18n } from "vue-i18n";
 
@@ -441,15 +441,21 @@ const handleLogout = async () => {
     await logout();
     tokenStore.clearToken();
     
-    // 使用全局消息提示
-    showMessage("退出登录成功");
+    // 使用ElMessage而不是全局消息提示
+    ElMessage.success("退出登录成功");
     
     // 延迟跳转，让用户看到提示消息
     setTimeout(() => {
       router.push("/login");
     }, 1000);
-  } catch {
-    showMessage("已取消退出", "error");
+  } catch (error) {
+    // 区分用户取消操作和真正的错误
+    if (error === 'cancel' || error?.toString().includes('cancel')) {
+      console.log("用户取消退出登录");
+    } else {
+      ElMessage.error("退出失败，请重试");
+      console.error("退出登录错误:", error);
+    }
   }
 };
 
@@ -771,55 +777,4 @@ const mainStyle = computed(() => ({
 .scrollable-content.transparent-scroll {
   background-color: transparent;
 }
-
-/* 全局消息提示样式 */
-.global-message {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-  pointer-events: none; /* 允许点击穿透 */
-}
-
-.message-content {
-  padding: 30px 60px;
-  border-radius: 12px;
-  font-size: 48px;
-  font-weight: bold;
-  text-align: center;
-  animation: messageAnimation 0.5s ease-out forwards;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-  max-width: 80%;
-  word-break: break-word;
-}
-
-.message-content.success {
-  background-color: rgba(103, 194, 58, 0.9); /* 成功消息绿色背景 */
-  color: white;
-}
-
-.message-content.error {
-  background-color: rgba(245, 108, 108, 0.9); /* 错误消息红色背景 */
-  color: white;
-}
-
-@keyframes messageAnimation {
-  0% {
-    transform: scale(0.5);
-    opacity: 0;
-  }
-  70% {
-    transform: scale(1.1);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
 </style>

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

@@ -5,7 +5,6 @@
       <el-card class="gradient-card">
         <div class="calculation-content">
           <h2 class="page-title">农业投入品输入通量计算</h2>
-          
           <div class="scrollable-content">
             <el-form label-position="left">
               <div class="input-section">
@@ -17,6 +16,7 @@
                       v-model="formData.f3_nitrogen_cd_content"
                       placeholder="0.12"
                       size="large"
+                      class="fixed-width-input"
                     />
                   </div>
                   <div class="input-item">
@@ -25,6 +25,7 @@
                       v-model="formData.nf_nitrogen_usage"
                       placeholder="0.25"
                       size="large"
+                      class="fixed-width-input"
                     />
                   </div>
                 </div>
@@ -37,6 +38,7 @@
                       v-model="formData.f4_phosphorus_cd_content"
                       placeholder="0.85"
                       size="large"
+                      class="fixed-width-input"
                     />
                   </div>
                   <div class="input-item">
@@ -45,6 +47,7 @@
                       v-model="formData.pf_phosphorus_usage"
                       placeholder="0.15"
                       size="large"
+                      class="fixed-width-input"
                     />
                   </div>
                 </div>
@@ -57,6 +60,7 @@
                       v-model="formData.f5_potassium_cd_content"
                       placeholder="0.05"
                       size="large"
+                      class="fixed-width-input"
                     />
                   </div>
                   <div class="input-item">
@@ -65,6 +69,7 @@
                       v-model="formData.kf_potassium_usage"
                       placeholder="0.12"
                       size="large"
+                      class="fixed-width-input"
                     />
                   </div>
                 </div>
@@ -77,6 +82,7 @@
                       v-model="formData.f6_compound_cd_content"
                       placeholder="0.45"
                       size="large"
+                      class="fixed-width-input"
                     />
                   </div>
                   <div class="input-item">
@@ -85,6 +91,7 @@
                       v-model="formData.cf_compound_usage"
                       placeholder="0.30"
                       size="large"
+                      class="fixed-width-input"
                     />
                   </div>
                 </div>
@@ -97,6 +104,7 @@
                       v-model="formData.f7_organic_cd_content"
                       placeholder="0.22"
                       size="large"
+                      class="fixed-width-input"
                     />
                   </div>
                   <div class="input-item">
@@ -105,6 +113,7 @@
                       v-model="formData.of_organic_usage"
                       placeholder="2.50"
                       size="large"
+                      class="fixed-width-input"
                     />
                   </div>
                 </div>
@@ -117,6 +126,7 @@
                       v-model="formData.f8_pesticide_cd_content"
                       placeholder="0.08"
                       size="large"
+                      class="fixed-width-input"
                     />
                   </div>
                   <div class="input-item">
@@ -125,6 +135,7 @@
                       v-model="formData.p_pesticide_usage"
                       placeholder="0.02"
                       size="large"
+                      class="fixed-width-input"
                     />
                   </div>
                 </div>
@@ -137,6 +148,7 @@
                       v-model="formData.f9_farmyard_cd_content"
                       placeholder="0.15"
                       size="large"
+                      class="fixed-width-input"
                     />
                   </div>
                   <div class="input-item">
@@ -145,6 +157,7 @@
                       v-model="formData.ff_farmyard_usage"
                       placeholder="1.80"
                       size="large"
+                      class="fixed-width-input"
                     />
                   </div>
                 </div>
@@ -157,14 +170,16 @@
                       v-model="formData.f10_film_cd_content"
                       placeholder="0.03"
                       size="large"
+                      class="fixed-width-input"
                     />
                   </div>
                   <div class="input-item">
-                    <div class="input-title">农膜(存留)单位面积使用量 (t/ha/a)</div>
+                    <div class="input-title">农膜单位面积使用量 (t/ha/a)</div>
                     <el-input
                       v-model="formData.af_film_usage"
                       placeholder="0.05"
                       size="large"
+                      class="fixed-width-input"
                     />
                   </div>
                 </div>
@@ -577,13 +592,14 @@ export default {
     rgba(230, 247, 255, 0.7) 0%, 
     rgba(240, 248, 255, 0.7) 100%
   );
-  min-height: 100vh;
   box-sizing: border-box;
 }
 
 .page-container {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .gradient-card, .results-card {
@@ -592,45 +608,21 @@ export default {
   padding: 15px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(5px);
-  height: 100%;
-  box-sizing: border-box;
-}
-
-/* 工具栏样式 */
-.toolbar {
-  display: flex;
-  justify-content: flex-start;
-  gap: 10px;
-  margin-bottom: 15px;
-  padding: 12px;
-  background-color: rgba(255, 255, 255, 0.8);
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(5px);
-}
-
-.custom-button {
-  background-color: #47C3B9 !important;
-  color: #DCFFFA !important;
-  border: none;
-  border-radius: 155px;
-  padding: 8px 16px;
-  font-weight: bold;
+  flex: 1;
   display: flex;
-  align-items: center;
-  font-size: 14px;
+  flex-direction: column;
 }
 
-/* 计算页面样式 */
+/* 计算内容区域 */
 .calculation-content {
-  height: 100%;
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
 .page-title {
   text-align: center;
-  margin-bottom: 18px;
+  margin-bottom: 5px;
   color: #333;
   font-size: 20px;
   font-weight: 600;
@@ -640,12 +632,13 @@ export default {
   flex: 1;
   overflow-y: auto;
   padding: 8px;
+  margin-bottom: 10px;
 }
 
-/* 输入区域样式 - 紧凑布局 */
+/* 输入区域样式 - 标题在左侧 */
 .input-section {
   width: 100%;
-  padding: 8px;
+  padding: 8px 0;
 }
 
 .input-row {
@@ -659,45 +652,31 @@ export default {
   flex: 1;
   min-width: calc(50% - 6px);
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  gap: 10px;
 }
 
 .input-title {
-  font-size: 14px;
+  font-size: 16px;
   color: #666;
-  margin-bottom: 6px;
   text-align: left;
   font-weight: 500;
+  width:220px;
+  white-space: nowrap;
 }
 
-.el-input {
-  width: 100%;
-}
-
-/* 输入框样式增强 */
-:deep(.el-input__inner) {
-  height: 36px;
-  line-height: 36px;
-  padding: 0 12px;
-  border-radius: 4px;
-  border: 1px solid #dcdfe6;
-  transition: border-color 0.3s ease;
-  font-size: 14px;
-}
-
-:deep(.el-input__inner:hover) {
-  border-color: #c0c4cc;
-}
-
-:deep(.el-input__inner:focus) {
-  border-color: #47C3B9;
-  box-shadow: 0 0 0 2px rgba(71, 195, 185, 0.2);
+/* 固定输入栏宽度 */
+.fixed-width-input {
+  width: 300px;
+  flex-shrink: 0; /* 防止输入框被压缩 */
 }
 
+/* 按钮容器 */
 .button-container {
+  padding: 10px 0;
   display: flex;
   justify-content: center;
-  margin-top: 20px;
+  margin-top: auto;
 }
 
 .calculate-btn {
@@ -710,13 +689,21 @@ export default {
   font-size: 15px;
 }
 
-/* 结果页面样式 */
+.results-card {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+  height: 100%;
+  box-sizing: border-box;
+}
+
 .results-content {
   height: 100%;
   display: flex;
   flex-direction: column;
 }
-
 .map-section, .stats-area, .chart-section {
   background-color: rgba(255, 255, 255, 0.8);
   border-radius: 6px;
@@ -754,7 +741,7 @@ h3 {
 /* 图片容器限定大小 */
 .image-container {
   width: 100%;
-  height: 350px;
+  height: 500px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -811,13 +798,17 @@ h3 {
   }
   
   .input-item {
-    min-width: calc(50% - 5px);
+    min-width: 100%;
   }
   
   .page-title {
     font-size: 18px;
     margin-bottom: 15px;
   }
+  
+  .fixed-width-input {
+    width: 100%;
+  }
 }
 
 @media (max-width: 768px) {
@@ -827,15 +818,8 @@ h3 {
     gap: 8px;
   }
   
-  .input-item {
-    min-width: 100%;
-  }
-  
-  .input-row {
-    gap: 8px;
-  }
-  
   .input-title {
+    min-width: 150px;
     font-size: 13px;
   }
   
@@ -864,10 +848,21 @@ h3 {
     margin-bottom: 12px;
   }
   
+  .input-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  
   .input-title {
+    min-width: 100%;
     font-size: 12px;
   }
   
+  .el-input {
+    width: 100%;
+  }
+  
   .calculate-btn {
     width: 100%;
     max-width: 280px;
@@ -883,4 +878,26 @@ h3 {
     font-size: 15px;
   }
 }
+.custom-button {
+  background-color: #47C3B9 !important;
+  color: #DCFFFA !important;
+  border: none;
+  border-radius: 155px;
+  padding: 10px 20px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+}
+/* 工具栏样式 */
+.toolbar {
+  display: flex;
+  justify-content: flex-start;
+  gap: 15px;
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+}
 </style>

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

@@ -10,90 +10,90 @@
             <el-checkbox-group v-model="selectedLandTypes">
               <!-- 水田 -->
               <div class="land-type-section">
-                <el-checkbox label="water" border size="large" class="custom-checkbox">
-                  <span class="checkbox-label">水田</span>
-                </el-checkbox>
-                
-                <div class="input-group">
-                  <div class="input-column">
-                    <div class="input-title">灌溉水用量 (m³/亩/年)</div>
-                    <el-input
-                      v-model="waterParams.irrigationWater"
-                      placeholder="711"
-                      size="large"
-                      class="fixed-width-input"
-                      :disabled="!selectedLandTypes.includes('water')"
-                    />
-                  </div>
-                  <div class="input-column">
-                    <div class="input-title">有效利用率</div>
-                    <el-input
-                      v-model="waterParams.utilizationRate"
-                      placeholder="0.524"
-                      size="large"
-                      class="fixed-width-input"
-                      :disabled="!selectedLandTypes.includes('water')"
-                    />
+                <div class="land-type-row">
+                  <el-checkbox label="water" border size="large" class="custom-checkbox">
+                    <span class="checkbox-label">水田</span>
+                  </el-checkbox>
+                  
+                  <div class="input-group">
+                    <div class="input-item">
+                      <div class="input-title">灌溉水用量 (m³/亩/年)</div>
+                      <el-input
+                        v-model="waterParams.irrigationWater"
+                        placeholder="711"
+                        size="large"
+                        :disabled="!selectedLandTypes.includes('water')"
+                      />
+                    </div>
+                    <div class="input-item">
+                      <div class="input-title">有效利用率</div>
+                      <el-input
+                        v-model="waterParams.utilizationRate"
+                        placeholder="0.524"
+                        size="large"
+                        :disabled="!selectedLandTypes.includes('water')"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
 
               <!-- 水浇地 -->
               <div class="land-type-section">
-                <el-checkbox label="irrigated" border size="large" class="custom-checkbox">
-                  <span class="checkbox-label">水浇地</span>
-                </el-checkbox>
-                
-                <div class="input-group">
-                  <div class="input-column">
-                    <div class="input-title">灌溉水用量 (m³/亩/年)</div>
-                    <el-input
-                      v-model="irrigatedParams.irrigationWater"
-                      placeholder="427"
-                      size="large"
-                      class="fixed-width-input"
-                      :disabled="!selectedLandTypes.includes('irrigated')"
-                    />
-                  </div>
-                  <div class="input-column">
-                    <div class="input-title">有效利用率</div>
-                    <el-input
-                      v-model="irrigatedParams.utilizationRate"
-                      placeholder="0.599"
-                      size="large"
-                      class="fixed-width-input"
-                      :disabled="!selectedLandTypes.includes('irrigated')"
-                    />
+                <div class="land-type-row">
+                  <el-checkbox label="irrigated" border size="large" class="custom-checkbox">
+                    <span class="checkbox-label">水浇地</span>
+                  </el-checkbox>
+                  
+                  <div class="input-group">
+                    <div class="input-item">
+                      <div class="input-title">灌溉水用量 (m³/亩/年)</div>
+                      <el-input
+                        v-model="irrigatedParams.irrigationWater"
+                        placeholder="427"
+                        size="large"
+                        :disabled="!selectedLandTypes.includes('irrigated')"
+                      />
+                    </div>
+                    <div class="input-item">
+                      <div class="input-title">有效利用率</div>
+                      <el-input
+                        v-model="irrigatedParams.utilizationRate"
+                        placeholder="0.599"
+                        size="large"
+                        :disabled="!selectedLandTypes.includes('irrigated')"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
 
               <!-- 旱地 -->
               <div class="land-type-section">
-                <el-checkbox label="dry" border size="large" class="custom-checkbox">
-                  <span class="checkbox-label">旱地</span>
-                </el-checkbox>
-                
-                <div class="input-group">
-                  <div class="input-column">
-                    <div class="input-title">灌溉水用量 (m³/亩/年)</div>
-                    <el-input
-                      v-model="dryParams.irrigationWater"
-                      placeholder="200"
-                      size="large"
-                      class="fixed-width-input"
-                      :disabled="!selectedLandTypes.includes('dry')"
-                    />
-                  </div>
-                  <div class="input-column">
-                    <div class="input-title">有效利用率</div>
-                    <el-input
-                      v-model="dryParams.utilizationRate"
-                      placeholder="0.7"
-                      size="large"
-                      class="fixed-width-input"
-                      :disabled="!selectedLandTypes.includes('dry')"
-                    />
+                <div class="land-type-row">
+                  <el-checkbox label="dry" border size="large" class="custom-checkbox">
+                    <span class="checkbox-label">旱地</span>
+                  </el-checkbox>
+                  
+                  <div class="input-group">
+                    <div class="input-item">
+                      <div class="input-title">灌溉水用量 (m³/亩/年)</div>
+                      <el-input
+                        v-model="dryParams.irrigationWater"
+                        placeholder="200"
+                        size="large"
+                        :disabled="!selectedLandTypes.includes('dry')"
+                      />
+                    </div>
+                    <div class="input-item">
+                      <div class="input-title">有效利用率</div>
+                      <el-input
+                        v-model="dryParams.utilizationRate"
+                        placeholder="0.7"
+                        size="large"
+                        :disabled="!selectedLandTypes.includes('dry')"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
@@ -396,10 +396,6 @@ export default {
           formData.append('dry_utilization_rate', parseFloat(dryParams.value.utilizationRate) || 0.7);
         }
         
-        // 添加其他参数（使用默认值）
-        formData.append('color_map_name', '绿-黄-红-紫');
-        formData.append('output_size', 8);
-        
         // 发送计算请求
         const response = await api8000.post('/api/water/calculate', formData, {
           headers: {
@@ -461,7 +457,6 @@ export default {
     rgba(230, 247, 255, 0.7) 0%, 
     rgba(240, 248, 255, 0.7) 100%
   );
-  min-height: 100vh;
   box-sizing: border-box;
 }
 
@@ -470,40 +465,16 @@ export default {
   height: 100%;
 }
 
-.gradient-card, .results-card {
+.gradient-card {
   background-color: rgba(255, 255, 255, 0.8);
   border-radius: 8px;
-  padding: 20px;
+  padding: 25px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(5px);
   height: 100%;
   box-sizing: border-box;
 }
 
-/* 工具栏样式 */
-.toolbar {
-  display: flex;
-  justify-content: flex-start;
-  gap: 15px;
-  margin-bottom: 20px;
-  padding: 15px;
-  background-color: rgba(255, 255, 255, 0.8);
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(5px);
-}
-
-.custom-button {
-  background-color: #47C3B9 !important;
-  color: #DCFFFA !important;
-  border: none;
-  border-radius: 155px;
-  padding: 10px 20px;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-}
-
 /* 计算页面样式 */
 .calculation-content {
   height: 100%;
@@ -522,55 +493,159 @@ export default {
 .scrollable-content {
   flex: 1;
   overflow-y: auto;
-  padding: 10px;
+  padding: 10px 15px;
 }
 
-/* 多选栏和输入栏同一行布局 */
+/* 多选栏和输入栏布局 */
 .land-type-section {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  margin-bottom: 20px;
+  margin-bottom: 25px;
   padding: 15px;
   background-color: rgba(255, 255, 255, 0.7);
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
+.land-type-row {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  width: 100%;
+}
+
 .custom-checkbox {
   flex-shrink: 0;
   width: 120px;
 }
 
+.checkbox-label {
+  font-size: 16px;
+  font-weight: 500;
+}
+
 .input-group {
   display: flex;
-  gap: 20px;
-  width: 100px;
-  flex-grow: 1;
+  gap: 30px;
+  flex: 1;
 }
 
-.input-column {
+.input-item {
   flex: 1;
-  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 15px; /* 减少标题与输入框的间距 */
 }
 
 .input-title {
-  font-size: 18px;
+  font-size: 16px;
   color: #666;
-  margin-bottom: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+
+}
+
+.el-input {
+  flex: 1;
+}
+
+/* 按钮容器 */
+.button-container {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0 10px;
 }
 
 .calculate-btn {
   width: 300px;
-  margin-top: 20px;
   background-color: #47C3B9 !important;
   color: white !important;
   font-weight: bold;
   height: 45px;
   border-radius: 8px;
+  font-size: 16px;
+}
+
+.no-data .el-icon {
+  font-size: 48px;
+  margin-bottom: 10px;
+}
+
+.loading-icon {
+  font-size: 36px;
+  margin-bottom: 10px;
+  animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* 响应式设计 */
+@media (max-width: 992px) {
+  .land-type-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+  }
+  
+  .input-group {
+    width: 100%;
+    flex-direction: column;
+    gap: 15px;
+  }
+  
+  .input-item {
+    width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .gradient-card {
+    padding: 20px;
+  }
+  
+  .input-title {
+    min-width: 150px;
+    font-size: 14px;
+  }
+  
+  .calculate-btn {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+
+@media (max-width: 480px) {
+  .input-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 5px;
+  }
+  
+  .input-title {
+    min-width: 100%;
+    font-size: 14px;
+  }
+  
+  .el-input {
+    width: 100%;
+  }
+  
+  .page-title {
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+}
+.results-card {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+  height: 100%;
+  box-sizing: border-box;
 }
 
-/* 结果页面样式 */
 .results-content {
   height: 100%;
   display: flex;
@@ -607,7 +682,7 @@ h3 {
 /* 图片容器限定大小 */
 .image-container {
   width: 100%;
-  height: 400px; /* 固定高度 */
+  height: 500px; /* 固定高度 */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -656,43 +731,26 @@ h3 {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
-
-/* 响应式设计 */
-@media (max-width: 992px) {
-  .land-type-section {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  
-  .input-group {
-    width: 100px;
-    flex-direction: column;
-    gap: 10px;
-  }
-  
-  .image-container {
-    height: 300px;
-  }
-}
-
-@media (max-width: 768px) {
-  .toolbar {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  
-  .image-container {
-    height: 250px;
-  }
-}
-/* 固定输入栏宽度 */
-.fixed-width-input {
-  width: 250px;
+.custom-button {
+  background-color: #47C3B9 !important;
+  color: #DCFFFA !important;
+  border: none;
+  border-radius: 155px;
+  padding: 10px 20px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
 }
-.button-container {
+/* 工具栏样式 */
+.toolbar {
   display: flex;
-  justify-content: center;
-  margin-top: 30px;
+  justify-content: flex-start;
+  gap: 15px;
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
 }
-
 </style>

src/views/User/cadmiumPrediction/CropCadmiumPrediction.vue

@@ -409,7 +409,7 @@ export default {
 .map-image {
   width: 100%;
   height: 100%;
-  max-height: 600px;
+  max-height: 500px;
   object-fit: contain;
   border-radius: 4px;
 }

src/views/User/cadmiumPrediction/EffectiveCadmiumPrediction.vue

@@ -434,7 +434,7 @@ export default {
 .map-image {
   width: 100%;
   height: 100%;
-  max-height: 600px;
+  max-height: 500px;
   object-fit: contain;
   border-radius: 4px;
 }

src/views/User/cadmiumPrediction/currentYearConcentration.vue

@@ -439,7 +439,7 @@ export default {
 .map-image, .histogram-image {
   width: 100%;
   height: 100%;
-  max-height: 600px;
+  max-height: 500px;
   object-fit: contain;
   border-radius: 4px;
 }

src/views/User/cadmiumPrediction/netFlux.vue

@@ -436,7 +436,7 @@ export default {
 .map-image, .histogram-image {
   width: 100%;
   height: 100%;
-  max-height: 600px;
+  max-height: 500px;
   object-fit: contain;
   border-radius: 4px;
 }

src/views/User/cadmiumPrediction/totalInputFlux.vue

@@ -445,7 +445,7 @@ export default {
 .map-image, .histogram-image {
   width: 100%;
   height: 100%;
-  max-height: 600px;
+  max-height: 500px;
   object-fit: contain;
   border-radius: 4px;
 }

src/views/User/cadmiumPrediction/totalOutputFlux.vue

@@ -439,7 +439,7 @@ export default {
 .map-image, .histogram-image {
   width: 100%;
   height: 100%;
-  max-height: 600px;
+  max-height: 500px;
   object-fit: contain;
   border-radius: 4px;
 }

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

@@ -345,7 +345,7 @@ h3 {
 /* 图片容器限定大小 */
 .image-container {
   width: 100%;
-  height: 400px;
+  height: 500px;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -346,7 +346,7 @@ h3 {
 /* 图片容器限定大小 */
 .image-container {
   width: 100%;
-  height: 400px;
+  height: 500px;
   display: flex;
   justify-content: center;
   align-items: center;

src/views/login/loginView.vue

@@ -38,6 +38,11 @@
           </el-form-item>
         </div>
 
+        <!-- 错误提示区域 -->
+        <div v-if="showError" class="error-message">
+          {{ errorMessage }}
+        </div>
+
         <div class="language-toggle-wrapper">
           <span class="text-toggle" @click="toggleLanguage">{{
             currentLanguageName
@@ -98,6 +103,11 @@
           </el-form-item>
         </div>
 
+        <!-- 错误提示区域 -->
+        <div v-if="showError" class="error-message">
+          {{ errorMessage }}
+        </div>
+
         <div class="language-toggle-wrapper">
           <span class="text-toggle" @click="toggleLanguage">{{
             currentLanguageName
@@ -123,13 +133,6 @@
         </el-form-item>
       </el-form>
     </div>
-    
-    <!-- 全局消息提示组件 -->
-    <div v-if="showGlobalMessage" class="global-message">
-      <div class="message-content" :class="messageType">
-        {{ globalMessage }}
-      </div>
-    </div>
   </div>
 </template>
 
@@ -143,11 +146,6 @@ import { useI18n } from "vue-i18n";
 import { User } from "@element-plus/icons-vue";
 import { useRouter } from "vue-router";
 
-// ============ 新增状态 ============
-const showGlobalMessage = ref(false);
-const globalMessage = ref("");
-const messageType = ref("success"); // 消息类型: success/error
-
 // ============ 类型定义 ============
 interface LoginForm {
   name: string;
@@ -168,6 +166,8 @@ const router = useRouter();
 const isLogin = ref(true);
 const userType = ref<"user" | "admin">("user");
 const loading = ref(false);
+const showError = ref(false);
+const errorMessage = ref("");
 
 const form = reactive<LoginForm>({ name: "", password: "" });
 const registerForm = reactive<RegisterForm>({
@@ -182,6 +182,7 @@ const registerFormRef = ref<InstanceType<typeof ElForm> | null>(null);
 // ============ 表单切换 ============
 const toggleForm = () => {
   isLogin.value = !isLogin.value;
+  showError.value = false; // 切换表单时隐藏错误提示
 };
 const toggleUserType = () => {
   userType.value = userType.value === "user" ? "admin" : "user";
@@ -199,15 +200,14 @@ const currentUserTypeName = computed(() =>
   userType.value === "user" ? t("login.switchToAdmin") : t("login.switchToUser")
 );
 
-// ============ 显示全局消息 ============
-const showMessage = (message: string, type: "success" | "error" = "success") => {
-  globalMessage.value = message;
-  messageType.value = type;
-  showGlobalMessage.value = true;
+// ============ 显示错误消息 ============
+const showErrorMsg = (message: string) => {
+  errorMessage.value = message;
+  showError.value = true;
   
   // 3秒后自动隐藏消息
   setTimeout(() => {
-    showGlobalMessage.value = false;
+    showError.value = false;
   }, 3000);
 };
 
@@ -219,6 +219,7 @@ const onSubmit = async () => {
     // 验证表单
     await formRef.value.validate();
     loading.value = true;
+    showError.value = false; // 开始验证时隐藏错误提示
 
     // 调用登录API
     const response = await login({
@@ -248,9 +249,6 @@ const onSubmit = async () => {
       loginType: userData.userType || userType.value, // 优先使用后端返回的userType
     });
 
-    // 显示成功消息
-    showMessage(response.data.message || '登录成功');
-
     // 跳转到目标页面
     await router.push({ name: 'samplingMethodDevice1' });
 
@@ -262,10 +260,10 @@ const onSubmit = async () => {
     });
     
     // 显示错误消息
-    const errorMsg = error.response?.data?.detail || 
+    const errorMsg = error.response?.data.message || 
                     error.message || 
                     '登录失败，请检查用户名和密码';
-    showMessage(errorMsg, 'error');
+    showErrorMsg(errorMsg);
   } finally {
     loading.value = false;
   }
@@ -277,6 +275,7 @@ const onRegister = async () => {
   try {
     await registerFormRef.value.validate();
     loading.value = true;
+    showError.value = false; // 开始验证时隐藏错误提示
 
     const res = await register({
       name: registerForm.name,
@@ -285,17 +284,46 @@ const onRegister = async () => {
     });
 
     if (res.data?.message) {
-      // 使用全局消息提示
-      showMessage(res.data.message);
-      toggleForm();
+      // 注册成功后自动登录
+      try {
+        // 调用登录API
+        const loginResponse = await login({
+          name: registerForm.name,
+          password: registerForm.password,
+          usertype: userType.value,
+        });
+
+        // 检查登录响应结构
+        if (loginResponse.data?.user) {
+          const userData = loginResponse.data.user;
+          
+          // 保存用户信息到store
+          store.saveToken({
+            userId: Number(userData.id),
+            name: userData.name,
+            loginType: userData.userType || userType.value,
+          });
+
+          // 跳转到目标页面
+          await router.push({ name: 'samplingMethodDevice1' });
+        } else {
+          showErrorMsg(loginResponse.data?.message || '自动登录失败，请手动登录');
+          toggleForm(); // 返回登录页面
+        }
+      } catch (loginError: any) {
+        console.error('自动登录失败:', loginError);
+        showErrorMsg(
+          loginError?.response?.data?.message || '自动登录失败，请手动登录'
+        );
+        toggleForm(); // 返回登录页面
+      }
     } else {
-      showMessage(res.data?.message || t("register.registerFailed"), "error");
+      showErrorMsg(res.data?.message || t("register.registerFailed"));
     }
   } catch (error: any) {
     console.error("注册异常:", error);
-    showMessage(
-      error?.response?.data?.detail || t("register.registerFailed"),
-      "error"
+    showErrorMsg(
+      error?.response?.data?.message || t("register.registerFailed")
     );
   } finally {
     loading.value = false;
@@ -377,7 +405,7 @@ onMounted(() => {
   display: flex;
   height: 100vh;
   background-color: #f6f6f6;
-  position: relative; /* 为全局消息组件提供定位上下文 */
+  position: relative;
 }
 .auth-left {
   width: 35%;
@@ -492,54 +520,17 @@ onMounted(() => {
   margin-bottom: 20px;
 }
 
-/* 全局消息提示样式 */
-.global-message {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-  pointer-events: none; /* 允许点击穿透 */
-}
-
-.message-content {
-  padding: 30px 60px;
-  border-radius: 12px;
-  font-size: 48px;
-  font-weight: bold;
+/* 错误提示样式 */
+.error-message {
+  color: #f56c6c;
+  font-size: 16px;
   text-align: center;
-  animation: messageAnimation 0.5s ease-out forwards;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-  max-width: 80%;
-  word-break: break-word;
-}
-
-.message-content.success {
-  background-color: rgba(103, 194, 58, 0.9); /* 成功消息绿色背景 */
-  color: white;
+  margin: 15px 0;
+  animation: fadeIn 0.3s ease-out forwards;
 }
 
-.message-content.error {
-  background-color: rgba(245, 108, 108, 0.9); /* 错误消息红色背景 */
-  color: white;
-}
-
-@keyframes messageAnimation {
-  0% {
-    transform: scale(0.5);
-    opacity: 0;
-  }
-  70% {
-    transform: scale(1.1);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 </style>