合并目前代码

shoping/AcidNeutralizationModel/AcidNeutralizationModel.js

@@ -1,51 +1,70 @@
 Page({
   data: {
+    result: '', // 存储计算结果
+    ph: '', // 土壤PH
     OM: '', // 有机质含量
     CL: '', // 土壤粘粒重量
     H: '', // 氢离子含量
     Al: '', // 铝离子含量
-    ph: '',
+    showModal: false, // 控制弹窗显示与隐藏
   },
 
-  // 更新有机质含量
-  onOMChange: function(e) {
+  // 更新输入数据
+  onOMChange: function (e) {
     this.setData({
-      OM: e.detail.value
+      OM: e.detail.value,
     });
   },
-  
-  // 更新土壤粘粒重量
-  onCLChange: function(e) {
+  onCLChange: function (e) {
     this.setData({
-      CL: e.detail.value
+      CL: e.detail.value,
     });
   },
-  
-  // 更新氢离子含量
-  onHChange: function(e) {
+  onHChange: function (e) {
     this.setData({
-      H: e.detail.value
+      H: e.detail.value,
     });
   },
-  
-  // 更新铝离子含量
-  onAlChange: function(e) {
+  onAlChange: function (e) {
     this.setData({
-      Al: e.detail.value
+      Al: e.detail.value,
     });
   },
-  
-  onPhChange: function(e) {
+  onPhChange: function (e) {
     this.setData({
-      ph: e.detail.value
+      ph: e.detail.value,
     });
   },
 
-  // 计算方法
-  calculate: function() {
+  // 页面加载时处理传递过来的数据（仅初始化，不提示错误）
+  onLoad: function (options) {
+    const encodedResult = options.result || ''; // 如果没有结果传递，设置为空字符串
+    if (encodedResult) {
+      try {
+        // 解码URL编码的字符串
+        const decodedResult = decodeURIComponent(encodedResult);
+        console.log('解码后的数据:', decodedResult);
+
+        // 将解码后的字符串解析为JSON对象
+        const resultArray = JSON.parse(decodedResult);
+
+        // 检查数组是否有效并显示第一个结果
+        if (Array.isArray(resultArray) && resultArray.length > 0) {
+          this.setData({
+            result: resultArray[0].toString(), // 显示第一个结果
+          });
+        }
+      } catch (error) {
+        console.error('解析结果失败:', error);
+      }
+    }
+  },
+
+  // 点击按钮后进行计算并提示结果
+  calculate: function () {
     console.log('开始计算...');
     const data = {
-      model_name: "rf_model_1214_1008",
+      model_name: 'rf_model_1214_1008',
       parameters: {
         pH: this.data.ph,
         OM: this.data.OM,
@@ -54,22 +73,48 @@ Page({
         Al: this.data.Al,
       },
     };
+
     wx.request({
       url: 'http://localhost:5000/predict',
       method: 'POST',
       data: JSON.stringify(data),
       header: {
-        'content-type': 'application/json' 
+        'content-type': 'application/json',
       },
       success: (res) => {
         console.log('预测结果:', res.data.predictions);
-        wx.navigateTo({
-          url: `/pages/Result/Result?result=${encodeURIComponent(JSON.stringify(res.data.predictions))}`
-        });
+
+        // 更新计算结果
+        if (Array.isArray(res.data.predictions) && res.data.predictions.length > 0) {
+          this.setData({
+            result: res.data.predictions[0].toString(),
+            showModal: true, // 显示弹窗
+          });
+          wx.showToast({
+            title: '计算完成！结果已更新',
+            icon: 'success',
+          });
+        } else {
+          wx.showToast({
+            title: '服务器返回数据格式有误',
+            icon: 'none',
+          });
+        }
       },
       fail: (error) => {
         console.error('请求失败:', error);
-      }
+        wx.showToast({
+          title: '计算失败，请重试',
+          icon: 'none',
+        });
+      },
+    });
+  },
+
+  // 关闭弹窗
+  closeModal: function () {
+    this.setData({
+      showModal: false, // 隐藏弹窗
     });
-  }
-});
+  },
+});

shoping/AcidNeutralizationModel/AcidNeutralizationModel.wxml

@@ -1,74 +1,91 @@
 <view class="page-body">
   <view class="white-box">
-    <view class="page-section-title">土壤 pH：</view>
-    <input 
-      class="input-field" 
-      type="text" 
-      placeholder="请输入土壤pH" 
-      value="{{ph}}" 
-      bindinput="onPhChange" 
-    />
+    <view class="input-row">
+      <view class="page-section-title">酸碱度 pH：</view>
+      <input 
+        class="input-field" 
+        data-field="ph" 
+        placeholder="4~6" 
+        value="{{ph}}" 
+        bindinput="onPhChange" 
+      />
+    </view>
   </view>
-</view>
 
-<view class="page-body">
   <view class="white-box">
-    <view class="page-section-title">有机质含量 (OM g/kg)：</view>
-    <input 
-      class="input-field" 
-      type="text" 
-      placeholder="请输入OM含量" 
-      value="{{OM}}" 
-      bindinput="onOMChange" 
-    />
+    <view class="input-row">
+      <view class="page-section-title">有机质含量 OM：</view>
+      <input 
+        class="input-field" 
+        type="text" 
+        placeholder="4~6" 
+        value="{{OM}}" 
+        bindinput="onOMChange" 
+      />
+    </view>
   </view>
-</view>
 
-<view class="page-body">
   <view class="white-box">
-    <view class="page-section-title">土壤粘粒重量 (CL g/kg)：</view>
-    <input 
-      class="input-field" 
-      type="text" 
-      placeholder="请输入CL含量" 
-      value="{{CL}}" 
-      bindinput="onCLChange" 
-    />
+    <view class="input-row">
+      <view class="page-section-title">土壤粘粒重量 CL：</view>
+      <input 
+        class="input-field" 
+        type="text" 
+        placeholder="4~6" 
+        value="{{CL}}" 
+        bindinput="onCLChange" 
+      />
+    </view>
   </view>
-</view>
 
-<view class="page-body">
   <view class="white-box">
-    <view class="page-section-title">氢离子含量 (H cmol/kg)：</view>
-    <input 
-      class="input-field" 
-      type="text" 
-      placeholder="请输入H含量" 
-      value="{{H}}" 
-      bindinput="onHChange" 
-    />
+    <view class="input-row">
+      <view class="page-section-title">氢离子含量 H：</view>
+      <input 
+        class="input-field" 
+        type="text" 
+        placeholder="4~6" 
+        value="{{H}}" 
+        bindinput="onHChange" 
+      />
+    </view>
   </view>
-</view>
 
-<view class="page-body">
   <view class="white-box">
-    <view class="page-section-title">铝离子含量 (Al cmol/kg)：</view>
-    <input 
-      class="input-field" 
-      type="text" 
-      placeholder="请输入Al3+含量" 
-      value="{{Al}}" 
-      bindinput="onAlChange" 
-    />
+    <view class="input-row">
+      <view class="page-section-title">铝离子含量 Al：</view>
+      <input 
+        class="input-field" 
+        type="text" 
+        placeholder="4~6" 
+        value="{{Al}}" 
+        bindinput="onAlChange" 
+      />
+    </view>
   </view>
-</view>
 
-<view class="green-btn">
-  <button class="btn" bindtap="calculate">计算</button>
-</view>
+  <!-- 弹窗部分 -->
+  <view wx:if="{{showModal}}" class="modal-overlay">
+    <view class="modal">
+      <view class="modal-header">
+        <text>计算结果</text>
+        <button class="close-btn" bindtap="closeModal">×</button>
+      </view>
+      <view class="modal-body">
+        <text>{{result}}</text>
+      </view>
+    </view>
+  </view>
 
-<view class="description-box">
-  <text class="bold-text">
-    建议：\n1. 选用Ca0(生石灰)作为碱性物料，每季施用量不宜超过150 kg/亩，当计算用量超过150 kg/亩时，建议分多季施用;建议翻耕时施用，施加后与耕作层土壤混匀，避免苗期施用导致烧苗;施加过程注意防护，避免灼烧眼睛和皮肤;\n 2. 在改良时间富裕，石灰质材料充足的条件下，建议优先选用石灰石粉末、白云石等温和型碱性物料;\n3. 当其它碱性物料计算用量超过500 kg/亩，建议分2季施用;\n 4. 建议每隔3-5年，追踪土壤pH变化，可根据土壤pH变化，追施少量石灰质材料;
-  </text>
-</view> 
+  <!-- 计算按钮 -->
+  <view class="green-btn">
+    <button class="btn" bindtap="calculate">计算</button>
+  </view>
+
+  <!-- 建议 -->
+  <view class="description-box">
+    <text class="bold-text">
+      建议：\n1. 选用Ca0(生石灰)作为碱性物料，每季施用量不宜超过150 kg/亩，当计算用量超过150 kg/亩时，建议分多季施用;建议翻耕时施用，施加后与耕作层土壤混匀，避免苗期施用导致烧苗;施加过程注意防护，避免灼烧眼睛和皮肤;\n 2. 在改良时间富裕，石灰质材料充足的条件下，建议优先选用石灰石粉末、白云石等温和型碱性物料;\n3. 当其它碱性物料计算用量超过500 kg/亩，建议分2季施用;\n 4. 建议每隔3-5年，追踪土壤pH变化，可根据土壤pH变化，追施少量石灰质材料;
+    </text>
+  </view>
+</view>

shoping/AcidNeutralizationModel/AcidNeutralizationModel.wxss

@@ -1,50 +1,121 @@
+/* 页面主体样式 */
 .page-body {
-  padding: 10rpx; /* 页面内容的内边距 */
-  background-color: #f8f8f8; /* 浅灰色背景 */
+  padding-left: 10rpx;             /* 页面内容的左内边距 */
+  background-color: #f8f8f8;       /* 设置页面背景颜色为浅灰色 */
 }
 
+/* 白色盒子样式，常用于容器组件 */
 .white-box {
-  width: 90%; /* 宽度为父容器的 90% */
-  margin: 10rpx auto; /* 上下间距为 10rpx，水平居中 */
-  padding: 20rpx; /* 内边距 20rpx */
-  background-color: #fff; /* 背景颜色为白色 */
-  border-radius: 10rpx; /* 圆角效果 */
-  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+  width: 90%;                      /* 宽度占页面 90% */
+  margin: 10rpx auto;              /* 设置外边距，居中显示 */
+  padding: 20rpx;                  /* 内边距，增加内容与边框的间距 */
+  background-color: #fff;          /* 设置背景颜色为白色 */
+  border-radius: 10rpx;            /* 圆角边框，柔化视觉效果 */
+  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加阴影，提升层次感 */
+}
+
+/* 输入行容器样式 */
+.input-row {
+  display: flex;                  /* 使用 Flexbox 布局 */
+  align-items: center;            /* 垂直居中对齐 */
+  justify-content: space-between; /* 标题和输入框分布在一行 */
+  margin-bottom: 1rpx;           /* 行与行之间的间距 */
 }
 
+/* 页面分区标题样式 */
 .page-section-title {
-  font-size: 30rpx; /* 标题字体大小 */
-  font-weight: bold; /* 字体加粗 */
-  color: #333; /* 字体颜色为深灰色 */
-  margin-bottom: 10rpx; /* 下边距 10rpx */
+  flex-shrink: 0;                 /* 防止标题缩小 */
+  font-size: 30rpx;               /* 标题字体大小 */
+  font-weight: bold;              /* 标题加粗 */
+  color: #333;                    /* 字体颜色 */
+  margin-right: 10rpx;            /* 标题与输入框的间距 */
 }
 
-/* 设置 radio-group 为横向布局 */
-.radio-group {
-  display: flex;
-  justify-content: space-between;  /* 使两个 radio 按钮左右分开 */
-  align-items: center; /* 垂直居中对齐 */
-  width: 100%; /* 确保 radio-group 容器占满整个宽度 */
+/* 输入框样式 */
+.input-field {
+  flex-grow: 1;                   /* 输入框占据剩余空间 */
+  padding: 10rpx;                 /* 输入框内边距 */
+  font-size: 28rpx;               /* 输入框字体大小 */
+  color: #333;                    /* 输入框文本颜色 */
+  border: none;                   /* 移除默认边框 */
+  border-bottom: 1px solid #ddd;  /* 添加下划线边框 */
+  outline: none;                  /* 移除默认选中样式 */
+  transition: border-color 0.3s;  /* 增加选中时边框的动画过渡 */
 }
 
+/* 输入框选中状态 */
+.input-field:focus {
+  border-bottom: 1px solid #3EC01E; /* 输入框选中时底部边框变为绿色 */
+}
+
+/* 占位符样式 */
+.input-field::placeholder {
+  color: #aaa;                     /* 调整占位符颜色为浅灰 */
+}
+
+/* 单选框文本样式 */
 .radio {
-  font-size: 28rpx; /* 单选框文本字体大小 */
-  color: #666; /* 字体颜色为浅灰色 */
-  margin: 5rpx 0; /* 上下间距 5rpx */
-  margin-left: 70rpx; /* 控制间距，使两个选项之间更紧凑 */
-  margin-right: 70rpx; /* 控制间距，使两个选项之间更紧凑 */
+  font-size: 28rpx;                /* 文本字体大小 */
+  color: #666;                     /* 文本颜色为中灰色 */
+  margin: 5rpx 0;                  /* 上下外边距 */
 }
 
-.input-field {
-  width: 100%; /* 输入框宽度为父容器的 100% */
-  padding: 10rpx; /* 内边距 10rpx */
-  font-size: 28rpx; /* 字体大小为 28rpx */
-  color: #000; /* 字体颜色为深灰色 */
-  border: none; /* 无边框 */
-  border-bottom: 1px solid #ddd; /* 底部边框为浅灰色 */
+/* 加粗文本样式 */
+.bold-text {
+  font-weight: bold;               /* 文本加粗 */
 }
 
+/* 绿色按钮容器样式 */
 .green-btn {
+  margin-top: 20rpx;               /* 顶部外边距 */
+  text-align: center;              /* 按钮内容居中 */
+}
+
+/* 按钮样式 */
+.btn {
+  width: 60%;                      /* 按钮宽度占页面 80% */
+  padding: 15rpx 0;                /* 上下内边距 */
+  background-color: #3EC01E;       /* 按钮背景颜色为绿色 */
+  color: #fff;                     /* 按钮文字颜色为白色 */
+  font-size: 28rpx;                /* 按钮文字字体大小 */
+  border-radius: 10rpx;            /* 圆角边框，柔化视觉效果 */
+  transition: all 0.2s;            /* 增加交互的过渡动画 */
+}
+
+/* 按钮点击效果 */
+.btn:active {
+  background-color: #32A317;       /* 按下时按钮颜色稍深 */
+  transform: scale(0.98);          /* 按下时轻微缩放效果 */
+}
+
+/* 下拉选择器的占位文本样式 */
+.picker-placeholder {
+  flex-grow: 1;                    /* 占据剩余空间 */
+  color: #888;                     /* 占位文本颜色为浅灰色 */
+  margin-right: 10px;              /* 右侧外边距 */
+}
+
+/* 下拉选择器样式 */
+.picker {
+  flex-shrink: 0;                  /* 防止组件缩小 */
+  width: 100px;                    /* 设置选择器的宽度 */
+}
+
+/* 响应式设计：适配小屏幕 */
+@media screen and (max-width: 320px) {
+  .page-section-title {
+    font-size: 26rpx;              /* 小屏设备标题字体稍小 */
+  }
+
+  .input-field {
+    font-size: 24rpx;              /* 输入框字体适配小屏 */
+  }
+
+  .btn {
+    font-size: 24rpx;              /* 按钮文字大小调整 */
+  }
+}
+-btn {
   margin-top: 20rpx; /* 上边距 20rpx */
   text-align: center; /* 文本居中 */
 }
@@ -82,3 +153,69 @@
   color: #333; /* 字体颜色为深灰色 */
 }
 
+.result-container {
+  background-color: #f2f2f2;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.result-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.result-content {
+  font-size: 18px;
+}
+
+/* 弹窗背景 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5); /* 背景半透明 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+/* 弹窗内容 */
+.modal {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  width: 80%;
+  max-width: 300px;
+  text-align: center;
+}
+
+/* 弹窗头部 */
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+/* 关闭按钮 */
+.close-btn {
+  position: absolute;  /* 绝对定位 */
+  top: 315px;  /* 距离顶部 10px */
+  left: 335px; /* 距离左侧 10px */
+  background: transparent;
+  border: none;
+  font-size: 15px;
+  color: red;
+  cursor: pointer;
+}
+
+/* 弹窗正文 */
+.modal-body {
+  font-size: 20px;
+  color: #333;
+}

shoping/Calculation/Calculation.js

@@ -1,5 +1,6 @@
 Page({
   data: {
+    result: '', // 用于存储计算结果
     OM: '', // 有机质含量
     CL: '', // 土壤粘粒重量
     CEC: '', // 阳离子交换量
@@ -9,6 +10,7 @@ Page({
     free_alumina: '', // 游离氧化铝含量
     free_iron_oxides: '', // 游离氧化铁含量
     delta_ph: '',
+    showResultPopup: false, // 控制弹窗显示与否
   },
 
   // 更新有机质含量
@@ -90,8 +92,9 @@ Page({
         delta_ph: this.data.delta_ph,
       },
     };
+
     wx.request({
-      url: 'http://localhost:5000/predict',
+      url: 'http://127.0.0.1:5000/predict',
       method: 'POST',
       data: JSON.stringify(data),
       header: {
@@ -99,13 +102,41 @@ Page({
       },
       success: (res) => {
         console.log('预测结果:', res.data.predictions);
-        wx.navigateTo({
-          url: `/pages/Result/Result?result=${encodeURIComponent(JSON.stringify(res.data.predictions))}`
-        });
+
+        // 直接更新页面的 result
+        if (res.data.predictions && Array.isArray(res.data.predictions)) {
+          const result = res.data.predictions[0] ? res.data.predictions[0].toString() : '无结果';
+          this.setData({
+            result: result,
+            showResultPopup: true, // 显示弹窗
+          });
+        } else {
+          console.error('返回数据格式错误');
+          wx.showToast({
+            title: '预测结果无效',
+            icon: 'none'
+          });
+        }
       },
       fail: (error) => {
         console.error('请求失败:', error);
+        wx.showToast({
+          title: '请求失败，请重试',
+          icon: 'none'
+        });
       }
     });
-  }
-});
+  },
+
+  // 关闭弹窗
+  closePopup: function() {
+    this.setData({
+      showResultPopup: false, // 隐藏弹窗
+    });
+  },
+
+  // 页面加载时
+  onLoad: function(options) {
+    // 页面加载时，不再处理解码
+  },
+});

shoping/Calculation/Calculation.wxml

@@ -1,121 +1,152 @@
 <!-- pages/Calculation/Calculation.wxml -->
 <view class="page-body">
   <view class="white-box">
-    <view class="page-section-title">有机质含量 (OM g/kg)：</view>
+  <view class="input-row">
+    <view class="page-section-title">有机质含量 OM：</view>
     <input 
       class="input-field" 
       type="text" 
-      placeholder="请输入有机质含量" 
+      placeholder="4~6" 
       value="{{OM}}" 
       bindinput="onOMChange" 
     />
   </view>
+  </view>
 </view>
 
 <view class="page-body">
   <view class="white-box">
-    <view class="page-section-title">土壤粘粒重量 (CL g/kg)：</view>
+    <view class="input-row">
+    <view class="page-section-title">土壤粘粒重量 CL：</view>
     <input 
       class="input-field" 
       type="text" 
-      placeholder="请输入土壤粘粒重量" 
+      placeholder="4~6" 
       value="{{CL}}" 
       bindinput="onCLChange" 
     />
   </view>
+  </view>
 </view>
 
 <view class="page-body">
   <view class="white-box">
-    <view class="page-section-title">阳离子交换量 (CEC cmol/kg)：</view>
+    <view class="input-row">
+    <view class="page-section-title">阳离子交换量 CEC：</view>
     <input 
       class="input-field" 
       type="text" 
-      placeholder="请输入阳离子交换量" 
+      placeholder="4~6" 
       value="{{CEC}}" 
       bindinput="onCECChange" 
     />
   </view>
+  </view>
 </view>
 
 <view class="page-body">
   <view class="white-box">
-    <view class="page-section-title">氢离子含量 (H cmol/kg)：</view>
+    <view class="input-row">
+    <view class="page-section-title">氢离子含量 H：</view>
     <input 
       class="input-field" 
       type="text" 
-      placeholder="请输入氢离子含量" 
+      placeholder="4~6" 
       value="{{H}}" 
       bindinput="onHChange" 
     />
   </view>
+  </view>
 </view>
 
 <view class="page-body">
   <view class="white-box">
-    <view class="page-section-title">铵离子含量 (HN mg/kg)：</view>
+    <view class="input-row">
+    <view class="page-section-title">铵离子含量 HN：</view>
     <input 
       class="input-field" 
       type="text" 
-      placeholder="请输入铵离子含量" 
+      placeholder="4~6" 
       value="{{HN}}" 
       bindinput="onHNChange" 
     />
   </view>
+  </view>
 </view>
 
 <view class="page-body">
   <view class="white-box">
-    <view class="page-section-title">铝离子含量 (Al cmol/kg)：</view>
+    <view class="input-row">
+    <view class="page-section-title">铝离子含量 Al：</view>
     <input 
       class="input-field" 
       type="text" 
-      placeholder="请输入铝离子含量" 
+      placeholder="4~6" 
       value="{{Al}}" 
       bindinput="onAlChange" 
     />
   </view>
+  </view>
 </view>
 
 <view class="page-body">
   <view class="white-box">
-    <view class="page-section-title">游离氧化铝 (free alumina g/kg)：</view>
+    <view class="input-row">
+    <view class="page-section-title">游离氧化铝 FA：</view>
     <input 
       class="input-field" 
       type="text" 
-      placeholder="请输入游离氧化铝含量" 
+      placeholder="4~6" 
       value="{{free_alumina}}" 
       bindinput="onFreeAluminaChange" 
     />
   </view>
+  </view>
 </view>
 
 <view class="page-body">
   <view class="white-box">
-    <view class="page-section-title">游离氧化铁 (free iron oxides g/kg)：</view>
+    <view class="input-row">
+    <view class="page-section-title">游离氧化铁 FIO：</view>
     <input 
       class="input-field" 
       type="text" 
-      placeholder="请输入游离氧化铁含量" 
+      placeholder="4~6" 
       value="{{free_iron_oxides}}" 
       bindinput="onFreeIronOxidesChange" 
     />
   </view>
+  </view>
 </view>
 
 <view class="page-body">
   <view class="white-box">
+    <view class="input-row">
     <view class="page-section-title">pH差值：</view>
     <input 
       class="input-field" 
       type="text" 
-      placeholder="请输入pH差值" 
+      placeholder="4~6" 
       value="{{delta_ph}}" 
       bindinput="onDeltaPhChange" 
     />
   </view>
+  </view>
 </view>
 
+<!-- 弹窗部分 -->
+  <view wx:if="{{showResultPopup}}" class="modal-overlay">
+    <view class="modal">
+      <view class="modal-header">
+        <text>计算结果</text>
+        <button class="close-btn" bindtap="closePopup">×</button>
+      </view>
+      <view class="modal-body">
+        <text>{{result}}</text>
+      </view>
+    </view>
+  </view>
+
 <view class="green-btn">
   <button class="btn" bindtap="calculate">计算</button>
-</view>
+</view>

shoping/Calculation/Calculation.wxss

@@ -1,65 +1,169 @@
-/* pages/Calculation/Calculation.wxss */
+/* 页面主体样式 */
 .page-body {
-  padding: 10rpx;
-  background-color: #f8f8f8; /* 浅灰色背景 */
+  padding-left: 10rpx;             /* 页面内容的左内边距 */
+  background-color: #f8f8f8;       /* 设置页面背景颜色为浅灰色 */
 }
 
+/* 白色盒子样式，常用于容器组件 */
 .white-box {
-  width: 90%;
-  margin: 10rpx auto;
-  padding: 20rpx;
-  background-color: #fff;
-  border-radius: 10rpx;
-  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
+  width: 90%;                      /* 宽度占页面 90% */
+  margin: 10rpx auto;              /* 设置外边距，居中显示 */
+  padding: 20rpx;                  /* 内边距，增加内容与边框的间距 */
+  background-color: #fff;          /* 设置背景颜色为白色 */
+  border-radius: 10rpx;            /* 圆角边框，柔化视觉效果 */
+  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加阴影，提升层次感 */
 }
 
-.page-section-title {
-  font-size: 30rpx;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 10rpx;
+/* 输入行容器样式 */
+.input-row {
+  display: flex;                  /* 使用 Flexbox 布局 */
+  align-items: center;            /* 垂直居中对齐 */
+  justify-content: space-between; /* 标题和输入框分布在一行 */
+  margin-bottom: 1rpx;           /* 行与行之间的间距 */
 }
 
-.radio {
-  font-size: 28rpx;
-  color: #666;
-  margin: 5rpx 0;
+/* 页面分区标题样式 */
+.page-section-title {
+  flex-shrink: 0;                 /* 防止标题缩小 */
+  font-size: 30rpx;               /* 标题字体大小 */
+  font-weight: bold;              /* 标题加粗 */
+  color: #333;                    /* 字体颜色 */
+  margin-right: 10rpx;            /* 标题与输入框的间距 */
 }
 
+/* 输入框样式 */
 .input-field {
-  width: 100%;
-  padding: 10rpx;
-  font-size: 28rpx;
-  color: #333;
-  border: none;
-  border-bottom: 1px solid #ddd;
+  flex-grow: 1;                   /* 输入框占据剩余空间 */
+  padding: 10rpx;                 /* 输入框内边距 */
+  font-size: 28rpx;               /* 输入框字体大小 */
+  color: #333;                    /* 输入框文本颜色 */
+  border: none;                   /* 移除默认边框 */
+  border-bottom: 1px solid #ddd;  /* 添加下划线边框 */
+  outline: none;                  /* 移除默认选中样式 */
+  transition: border-color 0.3s;  /* 增加选中时边框的动画过渡 */
 }
 
+/* 输入框选中状态 */
+.input-field:focus {
+  border-bottom: 1px solid #3EC01E; /* 输入框选中时底部边框变为绿色 */
+}
+
+/* 占位符样式 */
+.input-field::placeholder {
+  color: #aaa;                     /* 调整占位符颜色为浅灰 */
+}
+
+/* 单选框文本样式 */
+.radio {
+  font-size: 28rpx;                /* 文本字体大小 */
+  color: #666;                     /* 文本颜色为中灰色 */
+  margin: 5rpx 0;                  /* 上下外边距 */
+}
+
+/* 加粗文本样式 */
 .bold-text {
-  font-weight: bold;
+  font-weight: bold;               /* 文本加粗 */
 }
 
+/* 绿色按钮容器样式 */
 .green-btn {
-  margin-top: 20rpx;
-  text-align: center;
+  margin-top: 20rpx;               /* 顶部外边距 */
+  text-align: center;              /* 按钮内容居中 */
 }
 
+/* 按钮样式 */
 .btn {
-  width: 80%;
-  padding: 15rpx 0;
-  background-color: #3EC01E;
-  color: #fff;
-  font-size: 28rpx;
-  border-radius: 10rpx;
+  width: 60%;                      /* 按钮宽度占页面 80% */
+  padding: 15rpx 0;                /* 上下内边距 */
+  background-color: #3EC01E;       /* 按钮背景颜色为绿色 */
+  color: #fff;                     /* 按钮文字颜色为白色 */
+  font-size: 28rpx;                /* 按钮文字字体大小 */
+  border-radius: 10rpx;            /* 圆角边框，柔化视觉效果 */
+  transition: all 0.2s;            /* 增加交互的过渡动画 */
+}
+
+/* 按钮点击效果 */
+.btn:active {
+  background-color: #32A317;       /* 按下时按钮颜色稍深 */
+  transform: scale(0.98);          /* 按下时轻微缩放效果 */
 }
 
+/* 下拉选择器的占位文本样式 */
 .picker-placeholder {
-  flex-grow: 1;
-  color: #888;
-  margin-right: 10px;
+  flex-grow: 1;                    /* 占据剩余空间 */
+  color: #888;                     /* 占位文本颜色为浅灰色 */
+  margin-right: 10px;              /* 右侧外边距 */
 }
 
+/* 下拉选择器样式 */
 .picker {
-  flex-shrink: 0;
-  width: 100px; /* 根据需要调整宽度 */
-}
+  flex-shrink: 0;                  /* 防止组件缩小 */
+  width: 100px;                    /* 设置选择器的宽度 */
+}
+
+/* 响应式设计：适配小屏幕 */
+@media screen and (max-width: 320px) {
+  .page-section-title {
+    font-size: 26rpx;              /* 小屏设备标题字体稍小 */
+  }
+
+  .input-field {
+    font-size: 24rpx;              /* 输入框字体适配小屏 */
+  }
+
+  .btn {
+    font-size: 24rpx;              /* 按钮文字大小调整 */
+  }
+}
+
+/* 弹窗背景 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8); /* 背景半透明 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+/* 弹窗内容 */
+.modal {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  width: 80%;
+  max-width: 300px;
+  text-align: center;
+}
+
+/* 弹窗头部 */
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+/* 关闭按钮 */
+.close-btn {
+  position: absolute;  /* 绝对定位 */
+  top: 315px;  /* 距离顶部 10px */
+  left: 335px; /* 距离左侧 10px */
+  background: transparent;
+  border: none;  /* 隐藏边框 */
+  outline: none; /* 确保没有外部轮廓 */
+  font-size: 15px;
+  color: red;
+  cursor: pointer;
+}
+
+/* 弹窗正文 */
+.modal-body {
+  font-size: 20px;
+  color: #000;
+}

shoping/EditProfile/EditProfile.js

@@ -3,9 +3,6 @@ Page({
     isLogin: false,  // 登录状态
     userInfo: {      // 用户信息
       nickName: '',  // 用户昵称
-      avatarUrl: '/assets/taddar/me.png',  // 默认头像路径
-      username: '',  // 用户名
-      password: '',  // 密码
     },
   },
 

shoping/EditProfile/EditProfile.wxml

@@ -1,14 +1,4 @@
 <view class="container">
-  <!-- 昵称 -->
-  <view class="form-item">
-    <text class="label">昵称：</text>
-    <input class="input" 
-           value="{{userInfo.nickName}}" 
-           bindinput="onNicknameChange" 
-           placeholder="请输入昵称" 
-           wx:if="{{!userInfo.username}}" /> <!-- 只有用户名为空时，才显示昵称输入框 -->
-  </view>
-
   <!-- 用户名 -->
   <view class="form-item">
     <text class="label">用户名：</text>
@@ -18,12 +8,6 @@
            placeholder="请输入用户名" 
            wx:if="{{!userInfo.nickName}}" /> <!-- 只有昵称为空时，才显示用户名输入框 -->
   </view>
-
-  <!-- 头像 -->
-  <view class="form-item">
-    <text class="label">头像：</text>
-    <image class="avatar" src="{{userInfo.avatarUrl}}" bindtap="chooseAvatar" />
-  </view>
   
   <!-- 密码 -->
   <view class="form-item">

shoping/EditProfile/EditProfile.wxss

@@ -33,7 +33,7 @@
 }
 
 .submit-btn {
-  width: 100%;
+  width: 60%;
   height: 80rpx;
   background-color: #3cc51f;
   color: #fff;

shoping/Soil Acidification Iterative Evolution/Soil Acidification Iterative Evolution.js

@@ -1,66 +1,329 @@
-// pages/Regular User/Soil Acidification Iterative Evolution/Soil Acidification Iterative Evolution.js
-Page({
+import * as echarts from '../../components/ec-canvas/echarts';
 
-  /**
-   * 页面的初始数据
-   */
+Page({
   data: {
+    ecBox: {
+      onInit: function (canvas, width, height, dpr) {
+        const boxChart = echarts.init(canvas, null, {
+          width: width,
+          height: height,
+          devicePixelRatio: dpr // new
+        });
+        canvas.setChart(boxChart);
+        boxChart.setOption(getBoxOption());
 
-  },
+        return boxChart;
+      }
+    },
+    ecLine: {
+      onInit: function (canvas, width, height, dpr) {
+        const lineChart = echarts.init(canvas, null, {
+          width: width,
+          height: height,
+          devicePixelRatio: dpr // new
+        });
+        canvas.setChart(lineChart);
+        lineChart.setOption(getLineOption());
 
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad(options) {
+        return lineChart;
+      }
+    },
+    ecScatter: {
+      onInit: function (canvas, width, height, dpr) {
+        const scatterChart = echarts.init(canvas, null, {
+          width: width,
+          height: height,
+          devicePixelRatio: dpr // new
+        });
+        canvas.setChart(scatterChart);
+        scatterChart.setOption(getScatterOption());
 
+        return scatterChart;
+      }
+    },
+    ecBar: {
+      onInit: function (canvas, width, height, dpr) {
+        const barChart = echarts.init(canvas, null, {
+          width: width,
+          height: height,
+          devicePixelRatio: dpr
+        });
+        canvas.setChart(barChart);
+        barChart.setOption(getBarOption());
+        return barChart;
+      }
+    },
+    ecPie: {
+      onInit: function (canvas, width, height, dpr) {
+        const pieChart = echarts.init(canvas, null, {
+          width: width,
+          height: height,
+          devicePixelRatio: dpr // new
+        });
+        canvas.setChart(pieChart);
+        pieChart.setOption(getPieOption());
+
+        return pieChart;
+      }
+    }
   },
 
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
   onReady() {
+    // You can add any additional logic here if needed
+  }
+});
 
+function getBarOption() {
+  return {
+    title: {
+      text: 'Basic Bar Chart'
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    legend: {
+      data: ['Sales']
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        name: 'Sales',
+        type: 'bar',
+        data: [5, 20, 36, 10, 10, 20, 30],
+        itemStyle: {
+          color: '#c23531'
+        }
+      }
+    ]
+  }
+}
+function getBoxOption() {
+  return {
+    title: {
+      text: 'Sample ΔpH'
   },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow() {
-
+  tooltip: {
+      trigger: 'item',
+      axisPointer: {
+          type: 'shadow'
+      }
   },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
+  grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
   },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-
+  xAxis: {
+      type: 'category',
+      data: Array.from({length: 27}, (_, i) => i + 1) // 生成 1 到 27 的样本编号
   },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
+  yAxis: {
+      type: 'value',
+      name: 'ΔpH',
+      min: -1.5,
+      max: 0.5
   },
+  series: [
+      {
+          name: 'ΔpH',
+          type: 'boxplot',
+          data: [
+              // 每个数组代表一个样本的箱型图数据
+              // 格式为 [min, Q1, median, Q3, max]，可以包含异常值作为单独的数组元素
+                [-0.8, -0.6, -0.5, -0.3, 0.0], 
+                [-0.7, -0.5, -0.4, -0.2, 0.1], 
+                [-0.9, -0.7, -0.6, -0.4, -0.1], 
+                [-1.0, -0.8, -0.7, -0.5, -0.3], 
+                [-1.1, -0.9, -0.8, -0.6, -0.4], 
+                [-1.2, -1.0, -0.9, -0.7, -0.5], 
+                [-1.3, -1.1, -1.0, -0.8, -0.6], 
+                [-1.4, -1.2, -1.1, -0.9, -0.7], 
+                [-1.5, -1.3, -1.2, -1.0, -0.8], 
+                [-1.4, -1.2, -1.1, -0.9, -0.7], 
+                [-1.3, -1.1, -1.0, -0.8, -0.6], 
+                [-1.2, -1.0, -0.9, -0.7, -0.5], 
+                [-1.1, -0.9, -0.8, -0.6, -0.4], 
+                [-1.0, -0.8, -0.7, -0.5, -0.3], 
+                [-0.9, -0.7, -0.6, -0.4, -0.1], 
+                [-0.8, -0.6, -0.5, -0.3, 0.0], 
+                [-0.7, -0.5, -0.4, -0.2, 0.1], 
+                [-0.6, -0.4, -0.3, -0.1, 0.2], 
+                [-0.5, -0.3, -0.2, 0.0, 0.3], 
+                [-0.4, -0.2, -0.1, 0.1, 0.4], 
+                [-0.3, -0.1, 0.0, 0.2, 0.5], 
+                [-0.2, 0.0, 0.1, 0.3, 0.6], 
+                [-0.1, 0.1, 0.2, 0.4, 0.7], 
+                [0.0, 0.2, -0.3, 0.5, 0.8], 
+                [-0.1, 0.3, -0.4, 0.6, 0.9], 
+                [-0.2, 0.4, -0.5, 0.7, 1.0], 
+                [-0.3, 0.5, -0.6, 0.8, 1.1]  
+          ],
+          tooltip: {
+              formatter: function (param) {
+                  return [
+                      'Experiment ' + param.name + ': ',
+                      'upper: ' + param.data[5],
+                      'Q3: ' + param.data[4],
+                      'median: ' + param.data[3],
+                      'Q1: ' + param.data[2],
+                      'lower: ' + param.data[1]
+                  ].join(' ');
+              }
+          }
+      }
+  ]
+  };
+}
 
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
-  },
+function getScatterOption() {
+  return {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        legend: {
+          data: ['True vs Predicted']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          name: 'True Values',  // 对应 Python 中的 Ytest
+          type: 'value',
+          boundaryGap: [0, 0.01]
+        },
+        yAxis: {
+          name: 'Predicted Values',  // 对应 Python 中的 y_pred
+          type: 'value',
+          boundaryGap: [0, 0.01]
+        },
+        series: [
+          {
+            name: 'True vs Predicted',
+            type: 'scatter',
+            data: [
+              [-0.003333333333333854, -0.45726666666666654], [-0.1733333333333329, -0.1726333333333331], 
+              [-0.6233333333333331, -0.5226666666666667], [-0.7088888888888892, -0.4791888888888889], 
+              [-0.3366666666666669, -0.3630666666666673], [-0.8888888888888887, -0.48272222222222183], 
+              [-0.5633333333333326, -0.7492444444444444], [-0.7333333333333325, -0.5572666666666672], 
+              [-0.3366666666666663, -0.29379999999999984], [-1.176666666666666, -0.8544111111111106], 
+              [-0.7122222222222225, -0.4959777777777775], [-0.7699999999999996, -0.6149666666666669]
+            ],
+            symbolSize: 10,
+            itemStyle: {
+              
+            }
+          },
+          {
+            name: 'Trendline',
+            type: 'line',
+            data: [
+              // 绘制对角线 y = x (这就是理想情况下 True 和 Predicted 的值相等)
+              [-1.2,-1.2],  // 最小值
+              [-0.0034, -0.0034]   // 最大值
+            ],
+            lineStyle: {
+              type: 'dashed',
+              
+            }
+          }
+        ]
+      };
+}
 
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
+function getLineOption() {
+  return {
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: ['Random Forest', 'XGBoost', 'Gradient Boosting']  // 模型名称
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%']  // train_sizes按10%递增
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        name: 'Random Forest',
+        type: 'line',
+        data: [-0.17101591951095463, -0.556719360354051, -0.04083550751401055, -0.20858221504075436, 0.07297292282221035, 0.19857845644421734, 0.28407131176770184, 0.27979356883596496, 0.36904808817286416, 0.4183018571701477]  // 使用您的实际R2分数数据
+      },
+      {
+        name: 'XGBoost',
+        type: 'line',
+        data: [-1.1811781145886937, -1.5645641005612534, -0.12619079632263497, 0.03324096120721032, 0.06969290639267578, 0.12375262461601955, 0.5331670468884062, 0.49454793164801647, 0.31904329339597803, 0.2712670704381914]
+      },
+      {
+        name: 'Gradient Boosting',
+        type: 'line',
+        data: [-0.8583039298789095, -1.073316171952042, 0.09659300885027666, 0.06097833957434784, 0.191975498544109, 0.3718334600546489, 0.3948098332187753, 0.4398778520728397, 0.452609022210963, 0.41484634172723023]
+      }
+    ]
+  };
+}
 
-  }
-})
+function getPieOption() {
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c} ({d}%)'
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left',
+      data: ['示例1', '示例2', '示例3']
+    },
+    series: [
+      {
+        name: '访问来源',
+        type: 'pie',
+        radius: '55%',
+        center: ['50%', '60%'],
+        data: [
+          { value: 335, name: '示例1' },
+          { value: 310, name: '示例2' },
+          { value: 234, name: '示例3' },
+        ],
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  };
+}

shoping/Soil Acidification Iterative Evolution/Soil Acidification Iterative Evolution.json

@@ -1,5 +1,7 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "ec-canvas": "/components/ec-canvas/ec-canvas"
+  },
   "navigationBarTitleText": "反酸模型迭代进化",
   "navigationBarBackgroundColor": "#dbdbdb",  
   "navigationBarTextStyle": "black"  

shoping/Soil Acidification Iterative Evolution/Soil Acidification Iterative Evolution.wxml

@@ -1,2 +1,17 @@
-<!--pages/Regular User/Soil Acidification Iterative Evolution/Soil Acidification Iterative Evolution.wxml-->
-<text>这里可以放"反酸模型"计算图片</text>
+<view class="container">
+  <view class="chart-container">
+    <ec-canvas id="boxChart" canvas-id="boxChart" ec="{{ecBox}}"></ec-canvas>
+  </view>
+  <view class="chart-container">
+    <ec-canvas id="lineChart" canvas-id="lineChart" ec="{{ecLine}}"></ec-canvas>
+  </view>
+  <view class="chart-container">
+    <ec-canvas id="scatterChart" canvas-id="scatterChart" ec="{{ecScatter}}"></ec-canvas>
+  </view>
+  <view class="chart-container">
+    <ec-canvas id="pieChart" canvas-id="pieChart" ec="{{ecPie}}"></ec-canvas>
+  </view>
+  <view class="chart-container">
+    <ec-canvas id="barChart" canvas-id="barChart" ec="{{ecBar}}"></ec-canvas>
+  </view>
+</view>

shoping/Soil Acidification Iterative Evolution/Soil Acidification Iterative Evolution.wxss

@@ -1 +1,21 @@
-/* pages/Regular User/Soil Acidification Iterative Evolution/Soil Acidification Iterative Evolution.wxss */
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  gap: 20px; /* 添加容器之间的间隔 */
+}
+
+.chart-container {
+  width: 100%;
+  height: 300px;
+  margin-bottom: 20px; /* 添加底部间隔 */
+}
+
+.ec-canvas {
+  width: 100%;
+  height: 100%;
+  margin: 0 10px; /* 添加左右间隔 */
+}

shoping/Soil Acidification/Soil Acidification.wxml

@@ -22,7 +22,19 @@
 <text class="sub-title">4. 模型进化能力</text>
 <text class="sub-title">\n模型迭代：</text>我们的模型将会随着用户数据量的增加和多样化，逐步迭代进化，提升预测的准确性和泛化能力。
 <text class="sub-title">用户贡献：</text>您提交的真实数据和反馈将为模型的优化和进步提供宝贵的支持。
+    </text>
+</view>
+
+<image class="navigat-arrow" src="/assets/taddar/微信图片_20241209174643.png" />
+
+<view class="container">
+  <button class="full-width-button" bindtap="Calculation">反酸模型计算</button>
+  <button class="full-width-button" bindtap="Soil_Acidification_Iterative_Evolution">反酸模型迭代进化</button>
+</view>
 
+<view class="containe">
+  <view class="containes">
+  <text class="regular-text">
 <text class="sub-title">5. 技术支持</text>
 如果在使用过程中遇到问题或对模型预测有疑问，请联系技术支持团队。
 邮箱：support@example.com
@@ -32,13 +44,7 @@
 本软件仅供科研和教学用途，预测结果需与实际田间数据结合使用。
 因使用本软件导致的任何决策后果，开发团队不承担法律责任。
     </text>
-</view>
-
-<image class="navigat-arrow" src="/assets/taddar/微信图片_20241209174643.png" />
-
-<view class="container">
-  <button class="full-width-button" bindtap="Calculation">反酸模型计算</button>
-  <button class="full-width-button" bindtap="Soil_Acidification_Iterative_Evolution">反酸模型迭代进化</button>
+  </view>
 </view>
 
 <nav-tabar selected="{{selected}}"></nav-tabar> 

shoping/Soil Acidification/Soil Acidification.wxss

@@ -15,22 +15,24 @@
   color: #333333;
 }
 
-
 /* 父容器样式 */
 .container {
   display: flex;
   flex-direction: column; /* 垂直排列 */
   align-items: center;    /* 居中对齐 */
-  padding: 10px 0;        /* 增加上下内边距 */
-  margin: 1px 20px 20px  20px;  /* 增加顶部外边距 */
-  padding-bottom: 100px;   
+  padding: 1px 0;        /* 增加上下内边距 */
+  margin: 1px 20px 2px  20px;     /* 增加顶部外边距 */  
+}
+
+.containes {
+  padding-bottom: 100px; 
 }
 
 /* 按钮样式 */
 .full-width-button {
   width: 100%;            /* 按钮占满宽度 */
   padding: 5px 0;        /* 按钮内边距，控制高度 */
-  margin: 15px 0;         /* 按钮间距 */
+  margin: 10px 0;         /* 按钮间距 */
   background-color: #3EC01E; /* 按钮背景颜色 */
   color: white;           /* 按钮文字颜色 */
   font-size: 18px;        /* 按钮文字大小 */
@@ -46,7 +48,7 @@
 }
 
 .navigat-arrow {
-  padding: 5px;
-  width: 700rpx;
-  height: 400rpx;
+  padding: 10px 15px;
+  width: 650rpx;
+  height: 350rpx;
 }

shoping/Soil Deacidification/Soil Deacidification.wxml

@@ -21,7 +21,19 @@
 <text class="sub-title">4. 注意事项</text>
 •	输入的土壤起始 pH 和目标 pH 差值（ΔpH）不宜过大，以免因物料施用量过多导致次生盐碱化等问题。
 •	在计算结果应用于实际田间施用时，应结合当地的农业实践和技术指导。
+    </text>
+</view>
+
+<image class="navigat-arrow" src="/assets/taddar/微信图片_20241209174946.png" />
+
+<view class="container">
+  <button class="full-width-button" bindtap="AcidNeutralizationModel">降酸模型计算</button>
+  <button class="full-width-button" bindtap="Soil_Acid_Reduction_Iterative_Evolution">降酸模型迭代进化</button>
+</view>
 
+<view class="containe">
+  <view class="containes">
+  <text class="regular-text">
 <text class="sub-title">5. 技术支持</text>
 如果在使用过程中遇到问题或对模型预测有疑问，请联系技术支持团队。
 邮箱：support@example.com
@@ -31,13 +43,7 @@
 本软件仅供科研和教学用途，预测结果需与实际田间数据结合使用。
 因使用本软件导致的任何决策后果，开发团队不承担法律责任。
     </text>
-</view>
-
-<image class="navigat-arrow" src="/assets/taddar/微信图片_20241209174946.png" />
-
-<view class="container">
-  <button class="full-width-button" bindtap="AcidNeutralizationModel">降酸模型计算</button>
-  <button class="full-width-button" bindtap="Soil_Acid_Reduction_Iterative_Evolution">降酸模型迭代进化</button>
+  </view>
 </view>
 
 <nav-tabar selected="{{selected}}"></nav-tabar> 

shoping/Soil Deacidification/Soil Deacidification.wxss

@@ -20,16 +20,19 @@
   display: flex;
   flex-direction: column; /* 垂直排列 */
   align-items: center;    /* 居中对齐 */
-  padding: 10px 0;        /* 增加上下内边距 */
-  margin: 1px 20px 20px  20px;     /* 增加顶部外边距 */
-  padding-bottom: 100px;   
+  padding: 1px 0;        /* 增加上下内边距 */
+  margin: 1px 20px 2px  20px;     /* 增加顶部外边距 */  
+}
+
+.containes {
+  padding-bottom: 100px; 
 }
 
 /* 按钮样式 */
 .full-width-button {
   width: 100%;            /* 按钮占满宽度 */
   padding: 5px 0;        /* 按钮内边距，控制高度 */
-  margin: 15px 0;         /* 按钮间距 */
+  margin: 10px 0;         /* 按钮间距 */
   background-color: #3EC01E; /* 按钮背景颜色 */
   color: white;           /* 按钮文字颜色 */
   font-size: 18px;        /* 按钮文字大小 */
@@ -45,7 +48,7 @@
 }
 
 .navigat-arrow {
-  padding: 5px;
-  width: 700rpx;
-  height: 400rpx;
+  padding: 15px;
+  width: 650rpx;
+  height: 350rpx;
 }

shoping/Staff/Staff.js

@@ -123,7 +123,7 @@ Page({
 
     // 跳转到登录页面
     wx.reLaunch({
-      url: '/pages/admin/admin' // 登录页面的路径
+      url: '/pages/RoleSelectionPage/RoleSelectionPage' // 登录页面的路径
     });
   }
 });

shoping/Staff/Staff.wxss

@@ -46,7 +46,7 @@ page {
 /* 用户名样式 */
 .uer-name {
   height: 60rpx;
-  line-height: 10rpx;
+  line-height: 20rpx;
   font-size: 38rpx;
   color: #FFFFFF;
 }