更新微信小程序

app.wxss

@@ -8,3 +8,5 @@
   padding: 200rpx 0;
   box-sizing: border-box;
 } 
+
+

pages/AcidNeutralizationModel/AcidNeutralizationModel.js

@@ -0,0 +1,34 @@
+// pages/Calculation/Calculation.js
+Page({
+  data: {
+    // 数据绑定
+    initialPH: '', // 土壤初始 pH
+    targetPH: '', // 土壤目标 pH
+    materials: ['石灰石（粉）CaCO3', '生石灰（粉）', '纯CaO (粉）', '熟石灰（粉）', '白云石 (粉)', '硅钙钾镁肥', '其他含CaO和MgO材料'],
+    selectedMaterialIndex: 0, // 默认选中的碱性物料索引
+    selectedMaterial: '石灰石（粉）CaCO3', // 默认物料
+  },
+
+  // 处理土壤初始 pH 的输入
+  onInitialPHChange(e) {
+    this.setData({
+      initialPH: e.detail.value,
+    });
+  },
+
+  // 处理土壤目标 pH 的输入
+  onTargetPHChange(e) {
+    this.setData({
+      targetPH: e.detail.value,
+    });
+  },
+
+  // 处理碱性物料选择
+  onSelectMaterial(e) {
+    const index = e.detail.value;
+    this.setData({
+      selectedMaterialIndex: index,
+      selectedMaterial: this.data.materials[index],
+    });
+  }
+});

pages/AcidNeutralizationModel/AcidNeutralizationModel.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "降酸模型", 
+  "navigationBarBackgroundColor": "#ffffff",  
+  "navigationBarTextStyle": "black"  
+}

pages/AcidNeutralizationModel/AcidNeutralizationModel.wxml

@@ -0,0 +1,75 @@
+<!-- pages/Calculation/Calculation.wxml -->
+<view class="page-body">
+  <view class="white-box">
+    <view class="page-section-title">土地质地：</view>
+    <radio-group name="soilType" bindchange="onSoilTypeChange" class="radio-group">
+      <label class="radio">
+        <radio value="r1" /> <text class="radio-text">壤土/黏质土</text>
+      </label>
+      <label class="radio">
+        <radio value="r2" /> <text class="radio-text">砂质土</text>
+      </label>
+    </radio-group>
+  </view>
+</view>
+
+<view class="page-body">
+  <view class="white-box">
+    <view class="page-section-title">有机质含量：</view>
+    <radio-group name="soilType" bindchange="onSoilTypeChange" class="radio-group">
+      <label class="radio">
+        <radio value="r3" />大于3%
+      </label>
+      <label class="radio">
+        <radio value="r4" />小于等于3%
+      </label>
+    </radio-group>
+  </view>
+</view>
+
+<view class="page-body">
+  <view class="white-box">
+    <view class="page-section-title">土壤初始 pH：</view>
+    <input 
+      class="input-field" 
+      type="text" 
+      placeholder="4.5~6.2" 
+      value="{{initialPH}}" 
+      bindinput="onInitialPHChange" 
+    />
+  </view>
+</view>
+
+<view class="page-body">
+  <view class="white-box">
+    <view class="page-section-title">土壤目标 pH：</view>
+    <input 
+      class="input-field" 
+      type="text" 
+      placeholder="4.5~7.0" 
+      value="{{targetPH}}" 
+      bindinput="onTargetPHChange" 
+    />
+  </view>
+</view>
+
+<view class="page-body">
+  <view class="white-box">
+    <view class="page-section-title">碱性物料：</view>
+    <picker mode="selector" range="{{materials}}" value="{{selectedMaterialIndex}}" bindchange="onSelectMaterial">
+      <view class="input-field bold-text">
+        {{selectedMaterial || '石灰石（粉）CaCO3'}}
+      </view>
+    </picker>
+  </view>
+</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> 

pages/AcidNeutralizationModel/AcidNeutralizationModel.wxss

@@ -0,0 +1,84 @@
+.page-body {
+  padding: 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); /* 添加阴影效果 */
+}
+
+.page-section-title {
+  font-size: 30rpx; /* 标题字体大小 */
+  font-weight: bold; /* 字体加粗 */
+  color: #333; /* 字体颜色为深灰色 */
+  margin-bottom: 10rpx; /* 下边距 10rpx */
+}
+
+/* 设置 radio-group 为横向布局 */
+.radio-group {
+  display: flex;
+  justify-content: space-between;  /* 使两个 radio 按钮左右分开 */
+  align-items: center; /* 垂直居中对齐 */
+  width: 100%; /* 确保 radio-group 容器占满整个宽度 */
+}
+
+.radio {
+  font-size: 28rpx; /* 单选框文本字体大小 */
+  color: #666; /* 字体颜色为浅灰色 */
+  margin: 5rpx 0; /* 上下间距 5rpx */
+  margin-left: 70rpx; /* 控制间距，使两个选项之间更紧凑 */
+  margin-right: 70rpx; /* 控制间距，使两个选项之间更紧凑 */
+}
+
+.input-field {
+  width: 100%; /* 输入框宽度为父容器的 100% */
+  padding: 10rpx; /* 内边距 10rpx */
+  font-size: 28rpx; /* 字体大小为 28rpx */
+  color: #000; /* 字体颜色为深灰色 */
+  border: none; /* 无边框 */
+  border-bottom: 1px solid #ddd; /* 底部边框为浅灰色 */
+}
+
+.green-btn {
+  margin-top: 20rpx; /* 上边距 20rpx */
+  text-align: center; /* 文本居中 */
+}
+
+.btn {
+  width: 80%; /* 按钮宽度为父容器的 80% */
+  padding: 15rpx 0; /* 上下内边距为 15rpx */
+  background-color: #00af92; /* 按钮背景颜色为绿色 */
+  color: #fff; /* 按钮文字颜色为白色 */
+  font-size: 28rpx; /* 字体大小为 28rpx */
+  border-radius: 10rpx; /* 按钮圆角效果 */
+}
+
+.description-box {
+  width: 90%; /* 白色框的宽度为父容器的 90% */
+  margin: 10rpx auto; /* 上下间距 10rpx，水平居中 */
+  padding: 15rpx; /* 增加文字周围空间 */
+  background-color: #fff; /* 背景为白色 */
+}
+
+.bold-text {
+  font-size: 32rpx; /* 加粗字体大小 */
+  color: #000; /* 黑色字体 */
+}
+
+.description-box {
+  width: 90%; /* 输入框宽度为父容器的 100% */
+  background-color: #f8f8f8; /* 浅灰色背景 */
+}
+
+.bold-text {
+  font-weight: bold; /* 加粗字体 */
+  font-size: 26rpx; /* 缩小字体大小 */
+  line-height: 1.5; /* 调整行高，使文本更加紧凑 */
+  color: #333; /* 字体颜色为深灰色 */
+}
+

pages/Calculate/Calculate.js

@@ -2,11 +2,19 @@ Page({
   // 页面相关数据
   data: {},
 
-  // 登录逻辑（跳转页面）
-  login: function () {
+  // 反酸计算跳转
+  reverseAcidCalculation: function () {
     // 使用 wx.navigateTo 跳转到 "pages/Calculation/Calculation"
     wx.navigateTo({
-      url: '/pages/Calculation/Calculation'  // 目标页面路径
+      url: '/pages/Calculation/Calculation'  // 反酸页面路径
+    });
+  },
+
+  // 降酸计算跳转
+  acidCalculation: function () {
+    // 使用 wx.navigateTo 跳转到 "pages/AcidNeutralizationModel/AcidNeutralizationModel"
+    wx.navigateTo({
+      url: '/pages/AcidNeutralizationModel/AcidNeutralizationModel'  // 降酸页面路径
     });
   }
 });

pages/Calculate/Calculate.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {},
   "navigationBarTitleText": "模型",
-  "navigationBarBackgroundColor": "#00AF92"
+  "navigationBarBackgroundColor": "#f8f8f8",  
+  "navigationBarTextStyle": "black"  
 }

pages/Calculate/Calculate.wxml

@@ -1,46 +1,31 @@
 <view class="green-box">
-  <text class="title">NAU timeCalculator</text>
-  <text class="subtitle">石灰用量计算横型</text>
+  <text class="title-en">NAU timeCalculator</text>
+  <text class="title-cn">石灰用量计算横型</text>
 </view>
+<text class="container">本软件用于我国酸性土壤改良，计算达到目标 pH，单位面积需要石灰质材料的施用量。</text>
+
 
-<view class="description-box">
-  <text class="bold-text">
-    本软件用于我国酸性土壤改良，计算达到目标 pH，单位面积需要石灰质材料的施用量
-  </text>
-</view>
 
-<view class="description-box">
+<!-- #elif  <view class="description-box">
   <text class="bold-text">
-    注意事项如下：
+    本软件用于我国酸性土壤改良，计算达到目标 pH，单位面积需要石灰质材料的施用量
   </text>
+</view> -->
+<view class="container">
   <text class="regular-text">
+    注意事项如下：
     1. 本模型是基于我国南方 23 份酸性土壤样品开发的；
-  </text>
-  <text class="regular-text">
-    2. 土壤起始 pH 和目标 pH 是指在土水比为 1:2.5 下的 pH 值；
-  </text>
-  <text class="regular-text">
-    3. 施用最佳时期为翻耕前，将农用石灰质物料均匀撒加到土壤表面，然后与耕作层土壤（0-20 cm）混匀；
-  </text>
-  <text class="regular-text">
-    4. 本软件同时可以计算不同类型碱性物料的施用量，包括石灰石粉、生石灰、熟石灰、白云石、以及已知 CaO 和 MgO 含量的碱性材料。
-  </text>
+    2. 土壤起始 pH 和目标 pH 是指在土水比为 1:2.5 下的 pH 值；\n3. 施用最佳时期为翻耕前，将农用石灰质物料均匀撒加到土壤表面，然后与耕作层土壤（0-20 cm）混匀；\n4. 本软件同时可以计算不同类型碱性物料的施用量，包括石灰石粉、生石灰、熟石灰、白云石、以及已知 CaO 和 MgO 含量的碱性材料。
+    </text>
 </view>
-<view class="description-box">
-  <text class="bold-text">
-    从重金属污染土壤安全利用的目的，还需注意：
-  </text>
-  <text class="regular-text">
-    1. 土壤目标 pH 为 6.5 时能有效降低土壤镉的活性和稻米镉的积累；
-  </text>
-  <text class="regular-text">
-    2. 农用石灰质物料重金属含量不能超过农用物料重金属含量标准；
-  </text>
-  <text class="regular-text">
-    3. 一次施用后，稻米降镉效果可持续多年，每隔 3-5 年通过监测土壤 pH 变化，根据土壤 pH 的变化，可适当追加少量石灰质物料。
+
+<view class="container">
+<text class="regular-text">
+    从重金属污染土壤安全利用的目的，还需注意：\n1. 土壤目标 pH 为 6.5 时能有效降低土壤镉的活性和稻米镉的积累；\n2. 农用石灰质物料重金属含量不能超过农用物料重金属含量标准；\n3. 一次施用后，稻米降镉效果可持续多年，每隔 3-5 年通过监测土壤 pH 变化，根据土壤 pH 的变化，可适当追加少量石灰质物料。
   </text>
 </view>
 
 <view class="green-btn">
-  <button class="btn" bindtap="login">进入计算</button>
+  <button class="btn" bindtap="reverseAcidCalculation">反酸计算</button>
+  <button class="btn" bindtap="acidCalculation">降酸计算</button>
 </view>

pages/Calculate/Calculate.wxss

@@ -1,65 +1,95 @@
+/* 页面整体背景 */
 .green-box {
-  width: 95%; /* 绿色框的宽度 */
-  margin: 10rpx auto 0; /* 减少顶部外边距 */
-  padding: 10rpx; /* 内边距 */
-  background-color: #1aad19; /* 背景绿色 */
-  border-radius: 10rpx; /* 圆角 */
-  text-align: center; /* 内容水平居中 */
-  color: #fff; /* 字体白色 */
+  background-color: #4caf50; /* 绿色背景 */
+  padding: 10px 20px;  /* 减小上下内边距，控制高度 */
+  text-align: center;
+  display: flex;
+  flex-direction: column; /* 设置垂直方向布局 */
+  justify-content: center;
+  align-items: center;
+  max-height: 100rpx; /* 限制最大高度 */
+  max-width: calc(100% - 10px); /* 宽度最大100%，两边各留5px */
+  margin-left: 18px;  /* 左边留5px */
+  margin-right: 18px; /* 右边留5px */
+  box-sizing: border-box; /* 确保 padding 和 margin 不影响宽度计算 */
 }
 
-.title {
-  display: block; /* 强制换行 */
-  font-size: 40rpx; /* 标题字体大小 */
-  font-weight: bold; /* 加粗 */
+
+.title-en {
+  font-size: 16px;
+  color: #fff;
+  font-weight: bold;
+  margin-bottom: 5px; /* 英文标题和中文标题之间的间距 */
 }
 
-.subtitle {
-  display: block; /* 强制换行 */
-  font-size: 36rpx; /* 副标题字体大小 */
-  font-weight: bold; /* 加粗 */
-  margin-top: 5rpx; /* 减少上下间距 */
+.title-cn {
+  font-size: 16px;
+  color: #f1f1f1;
+  font-weight: normal;
 }
 
-.description-box {
-  width: 90%; /* 白色框的宽度 */
-  margin: 10rpx auto; /* 减少上下间距 */
-  padding: 15rpx; /* 增加文字周围空间 */
-  background-color: #fff; /* 背景为白色 */
+/* 描述文本样式 */
+.description {
+  font-size: 16px;
+  color: #000;
+  margin-top: 5px;  /* 确保文本紧接着标题下面 */
+  text-align: center; /* 保持文本居中 */
 }
 
-.bold-text {
-  font-size: 32rpx; /* 加粗字体大小 */
-  font-weight: bold; /* 加粗 */
-  color: #000; /* 黑色字体 */
+/* 普通文本样式 */
+.container {
+  padding: 10px 20px;  /* 调整容器的内边距，减小文字与容器的距离 */
+  line-height: 1;  /* 调整行高，控制文字的垂直间距 */
 }
 
 .regular-text {
-  font-size: 28rpx; /* 正文字体大小 */
-  color: #333; /* 深灰色字体 */
+  font-size: 16px;  /* 设置字体大小 */
+  color: #333333;
+}
+
+.green-box {
+  padding: 20px;
+  background-color: #4CAF50;
+}
+
+.green-btn {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
 }
 
 .btn {
-  width: 100%;
-  height: 80rpx;
-  background-color: var(--primary-color, #1aad19);
-  color: #fff;
-  border: none;
-  border-radius: var(--border-radius, 10rpx);
+  width: 45%;
+  padding: 6px 0;  /* 减小内边距，按钮看起来会更矮 */
+  background-color: #00C853;
+  color: white;
   text-align: center;
-  line-height: 45rpx;
-  font-size: 36rpx;
-  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);  /* 添加阴影 */
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;  /* 背景颜色和阴影过渡效果 */
+  border-radius: 5px;
+  font-size: 24px;  /* 调整字体大小，适应按钮高度 */
+  line-height: 30px; /* 调整按钮内文字的行高 */
+}
+
+
+
+.btn:hover {
+  background-color: #45a049; /* 按钮悬停时的颜色变化 */
 }
 
 .btn:active {
-  background-color: var(--active-color, #128c13);
-  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);  /* 按钮点击时阴影变化 */
+  background-color: #388e3c; /* 按钮点击时的颜色变化 */
 }
 
-.btn:hover {
-  background-color: var(--hover-color, #16b818);
-  cursor: pointer;  /* 鼠标悬浮时显示手型 */
+/*.green-btn {
+  display: flex; /* 使用 flex 布局 
+  justify-content: space-between; /* 水平分布按钮，间距自动 
+  gap: 10rpx; /* 添加按钮之间的间距 
 }
 
+.btn {
+  background-color: #32cd32;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+}*/

pages/Calculation/Calculation.js

@@ -11,11 +11,6 @@ Page({
     free_iron_oxides: '', // 游离氧化铁含量
     collection_location: '', // 采样地点
     collection_date: '', // 采样时间
-    initialPH: '', // 土壤初始 pH
-    targetPH: '', // 土壤目标 pH
-    materials: ['石灰石（粉）CaCO3', '生石灰（粉）', '纯CaO (粉）', '熟石灰（粉）', '白云石 (粉)', '硅钙钾镁肥', '其他含CaO和MgO材料'],
-    selectedMaterialIndex: 0, // 默认选中的碱性物料索引
-    selectedMaterial: '石灰石（粉）CaCO3', // 默认物料
   },
 
   // 更新有机质含量
@@ -88,60 +83,18 @@ Page({
     });
   },
 
-  // 处理土壤初始 pH 的输入
-  onInitialPHChange(e) {
-    this.setData({
-      initialPH: e.detail.value,
-    });
-  },
-
-  // 处理土壤目标 pH 的输入
-  onTargetPHChange(e) {
-    this.setData({
-      targetPH: e.detail.value,
-    });
-  },
-
-  // 处理碱性物料选择
-  onSelectMaterial(e) {
-    const index = e.detail.value;
-    this.setData({
-      selectedMaterialIndex: index,
-      selectedMaterial: this.data.materials[index],
-    });
-  },
-
   // 计算方法
   calculate: function() {
     console.log('开始计算...');
-    const data = {
-      organic_matter: this.data.OM,
-      chloride: this.data.CL,
-      cec: this.data.CEC,
-      h_concentration: this.data.H,
-      hn: this.data.HN,
-      al_concentration: this.data.Al,
-      free_alumina: this.data.free_alumina,
-      free_iron: this.data.free_iron_oxides,
-      delta_ph: this.data.targetPH - this.data.initialPH // 假设delta_ph是目标pH和初始pH的差值
-    };
-  
-    wx.request({
-      url: 'http://localhost:5000/predict',
-      method: 'POST',
-      data: JSON.stringify(data),
-      header: {
-        'content-type': 'application/json' 
-      },
-      success: (res) => {
-        console.log('预测结果:', res.data.predictions);
-        wx.navigateTo({
-          url: `/pages/Result/Result?result=${encodeURIComponent(JSON.stringify(res.data.predictions))}`
-        });
-      },
-      fail: (error) => {
-        console.error('请求失败:', error);
-      }
-    });
+    console.log('有机质含量:', this.data.OM);
+    console.log('土壤粘粒重量:', this.data.CL);
+    console.log('阳离子交换量:', this.data.CEC);
+    console.log('氢离子含量', this.data.H);
+    console.log('铵离子含量:', this.data.HN);
+    console.log('铝离子含量:', this.data.Al);
+    console.log('游离氧化铝含量:', this.data.free_alumina);
+    console.log('游离氧化铁含量:', this.data.free_iron_oxides);
+    console.log('采样地点:', this.data.collection_location);
+    console.log('采样时间:', this.data.collection_date);
   }
-})
+});

pages/Calculation/Calculation.json

@@ -1,5 +1,5 @@
 {
-  "navigationBarTitleText": "模型", 
-  "navigationBarBackgroundColor": "#00AF92",  
-  "navigationBarTextStyle": "white"  
+  "navigationBarTitleText": "反酸模型", 
+  "navigationBarBackgroundColor": "#ffffff",  
+  "navigationBarTextStyle": "black"  
 }

pages/Calculation/Calculation.wxml

@@ -1,3 +1,4 @@
+<!-- pages/Calculation/Calculation.wxml -->
 <view class="page-body">
   <view class="white-box">
     <view class="page-section-title">有机质含量 (OM g/kg)：</view>
@@ -126,44 +127,6 @@
   </view>
 </view>
 
-
-<view class="page-body">
-  <view class="white-box">
-    <view class="page-section-title">土壤初始 pH：</view>
-    <input 
-      class="input-field" 
-      type="text" 
-      placeholder="4.5~6.2" 
-      value="{{initialPH}}" 
-      bindinput="onInitialPHChange" 
-    />
-  </view>
-</view>
-
-<view class="page-body">
-  <view class="white-box">
-    <view class="page-section-title">土壤目标 pH：</view>
-    <input 
-      class="input-field" 
-      type="text" 
-      placeholder="4.5~7.0" 
-      value="{{targetPH}}" 
-      bindinput="onTargetPHChange" 
-    />
-  </view>
-</view>
-
-<view class="page-body">
-  <view class="white-box">
-    <view class="page-section-title">碱性物料：</view>
-    <picker mode="selector" range="{{materials}}" value="{{selectedMaterialIndex}}" bindchange="onSelectMaterial">
-      <view class="input-field bold-text">
-        {{selectedMaterial || '石灰石（粉）CaCO3'}}
-      </view>
-    </picker>
-  </view>
-</view>
-
 <view class="green-btn">
   <button class="btn" bindtap="calculate">计算</button>
 </view>

pages/Calculation/Calculation.wxss

@@ -1,6 +1,6 @@
 /* pages/Calculation/Calculation.wxss */
 .page-body {
-  padding: 20rpx;
+  padding: 10rpx;
   background-color: #f8f8f8; /* 浅灰色背景 */
 }
 

pages/Data Visualization/Data Visualization.js

@@ -0,0 +1,66 @@
+// pages/Data Visualization/Data Visualization.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/Data Visualization/Data Visualization.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/Data Visualization/Data Visualization.wxml

@@ -0,0 +1,2 @@
+<!--pages/Data Visualization/Data Visualization.wxml-->
+<text>pages/Data Visualization/Data Visualization.wxml</text>

pages/Data Visualization/Data Visualization.wxss

@@ -0,0 +1 @@
+/* pages/Data Visualization/Data Visualization.wxss */

pages/Staff/Staff.js

@@ -1,66 +1,95 @@
-// pages/Staff/Staff.js
 Page({
-
-  /**
-   * 页面的初始数据
-   */
   data: {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad(options) {
-
+    isLogin: false,  // 登录状态
+    userInfo: {},    // 存储用户信息（头像和昵称）
   },
 
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady() {
-
+  // 页面加载时获取缓存的昵称和头像
+  onLoad() {
+    const storedUserInfo = wx.getStorageSync('userinfo'); // 获取缓存中的用户信息
+
+    if (storedUserInfo) {
+      // 如果缓存中有用户信息，更新页面上的数据
+      this.setData({
+        userInfo: storedUserInfo,  // 更新用户信息
+        isLogin: true, // 设置登录状态为 true
+      });
+    }
   },
 
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow() {
-
+  // 获取用户头像
+  getAvatar(e) {
+    const avatarUrl = e.detail.avatarUrl;
+    this.setData({
+      'userInfo.avatarUrl': avatarUrl
+    });
+
+    // 保存头像到缓存
+    let userInfo = wx.getStorageSync('userinfo') || {};
+    userInfo.avatarUrl = avatarUrl;
+    wx.setStorageSync('userinfo', userInfo);
   },
 
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
+  // 获取用户昵称
+  getName(e) {
+    const nickName = e.detail.value;
+    this.setData({
+      'userInfo.nickName': nickName
+    });
+
+    // 保存昵称到缓存
+    let userInfo = wx.getStorageSync('userinfo') || {};
+    userInfo.nickName = nickName;
+    wx.setStorageSync('userinfo', userInfo);
   },
 
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-
+  // 显示登录弹窗
+  gologin() {
+    this.setData({
+      isHidden: false
+    });
   },
 
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
+  // 取消登录弹窗
+  potNo() {
+    this.setData({
+      isHidden: true
+    });
   },
 
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
+  // 确认登录弹窗
+  popYes() {
+    const { avatarUrl, nickName } = this.data.userInfo;
+    if (!avatarUrl || !nickName) {
+      wx.showToast({
+        icon: 'error',
+        title: '请获取头像和昵称',
+      });
+      return;
+    }
+
+    // 保存头像和昵称到缓存
+    wx.setStorageSync('userinfo', this.data.userInfo);
+
+    this.setData({
+      isLogin: true,  // 设置登录状态为 true
+      isHidden: true, // 隐藏弹窗
+    });
   },
 
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
+  // 退出登录
+  tuichu() {
+    this.setData({
+      isLogin: false,  // 设置登录状态为 false
+      userInfo: {},    // 清除用户信息
+    });
+
+    // 清除缓存中的用户信息
+    wx.removeStorageSync('userinfo');
+    
+    // 跳转到 "pages/b/b" 页面
+    wx.navigateTo({
+      url: '/pages/b/b', // 路径可以根据实际情况修改
+    });
   }
-})
+});

pages/Staff/Staff.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {},
   "navigationBarTitleText": "个人中心",
-  "navigationBarBackgroundColor": "#00AF92"
+  "navigationBarBackgroundColor": "#ffffff",  
+  "navigationBarTextStyle": "black"  
 }

pages/Staff/Staff.wxml

@@ -1,2 +1,37 @@
-<!--pages/Staff/Staff.wxml-->
-<text>pages/Staff/Staff.wxml</text>
+<view class="center">
+  <!-- 处理点击事件和hover类 -->
+  <view class="logo" bindtap="goLogin" hover-class="{{!isLogin ? 'logo-hover' : ''}}">
+  <!-- 如果已登录并且有头像，则显示用户头像 -->
+  <image class="logo-img" wx:if="{{isLogin && userInfo && userInfo.avatarUrl}}" src="{{ userInfo.avatarUrl }}" />
+  <!-- 如果未登录或没有头像，则显示默认头像 -->
+  <image class="logo-img" wx:if="{{!isLogin || !userInfo.avatarUrl}}" src="/assets/taddar/me.png" />
+  <view class="logo-title">
+    <!-- 显示昵称，如果已登录，则显示昵称 -->
+    <text class="uer-name">Hi，{{ isLogin ? userInfo.nickName : '未登录' }}</text>
+    <!-- 未登录时显示登录图标 -->
+    <image class="go-login" wx:if="{{!isLogin}}" src="/assets/taddar/right (1).png" />
+  </view>
+</view>
+
+
+  <view class="center-list">
+    <view class="center-list-item">
+      <image class="list-icon" src="/assets/taddar/lock.png" />
+      <text class="list-text">帐号管理</text>
+      <image class="navigat-arrow" src="/assets/taddar/right.png" />
+    </view>
+    <view class="center-list-item">
+      <image class="list-icon" src="/assets/taddar/edit.png" />
+      <text class="list-text">编辑个人信息</text>
+      <image class="navigat-arrow" src="/assets/taddar/right.png" />
+    </view>
+  </view>
+
+  <view class="center-list">
+    <view class="center-list-item border-bottom">
+      <image class="list-icon" src="/assets/taddar/logout.png" />
+      <text class="list-text" bindtap="tuichu">退出登录</text>
+      <image class="navigat-arrow" src="/assets/taddar/right.png" />
+    </view>
+  </view>
+</view>

pages/Staff/Staff.wxss

@@ -1 +1,121 @@
-/* pages/Staff/Staff.wxss */
+/* 页面和视图容器样式 */
+page,
+view {
+  display: flex;
+}
+
+page {
+  background-color: #f8f8f8;
+}
+
+.center {
+  flex-direction: column;
+}
+
+/* Logo容器样式 */
+.logo {
+  width: 750rpx;
+  height: 240rpx;
+  padding: 20rpx;
+  box-sizing: border-box;
+  background-color: #a9c6b6;
+  flex-direction: row;
+  align-items: center;
+}
+
+.logo-hover {
+  opacity: 0.8;
+}
+
+.logo-img {
+  width: 150rpx;  /* 设置图片的大小 */
+  height: 150rpx;  /* 设置图片的大小 */
+  border-radius: 150rpx; /* 圆形边框 */
+}
+
+/* Logo标题样式 */
+.logo-title {
+  height: 150rpx;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  margin-left: 20rpx;
+}
+
+/* 用户名样式 */
+.uer-name {
+  height: 60rpx;
+  line-height: 60rpx;
+  font-size: 38rpx;
+  color: #FFFFFF;
+}
+
+.go-login {
+    height: 40rpx; /* 设置箭头图片的高度 */
+    width: 40rpx;  /* 设置箭头图片的宽度 */
+    line-height: 90rpx; /* 图片垂直居中 */
+    margin-left: 10rpx; /* 设置箭头和文本之间的间距 */
+    object-fit: contain; /* 保证图片不被拉伸 */
+}
+
+.login-title {
+  height: 150rpx;
+  align-items: self-start;
+  justify-content: center;
+  flex-direction: column;
+  margin-left: 20rpx;
+}
+
+/* 中心列表样式 */
+.center-list {
+  background-color: #FFFFFF;
+  margin-top: 20rpx;
+  width: 750rpx;
+  flex-direction: column;
+}
+
+/* 列表项样式 */
+.center-list-item {
+  height: 90rpx;
+  width: 750rpx;
+  box-sizing: border-box;
+  flex-direction: row;
+  padding: 0 20rpx;
+  display: flex;
+  justify-content: center; /* 图片和文本水平居中 */
+  align-items: center;     /* 图片和文本垂直居中 */
+}
+
+/* 边框样式 */
+.border-bottom {
+  border-bottom-width: 1rpx;
+  border-color: #c8c7cc;
+  border-bottom-style: solid;
+}
+
+/* 图片图标样式 */
+.list-icon {
+  width: 40rpx;  /* 设置图片宽度 */
+  height: 40rpx;  /* 设置图片高度 */
+  margin-right: 10rpx; /* 图标和文本之间的间距 */
+  object-fit: contain; /* 保证图片不被拉伸 */
+}
+
+/* 列表文字样式 */
+.list-text {
+  height: 90rpx;
+  line-height: 90rpx;
+  font-size: 34rpx;
+  color: #555;
+  flex: 1;
+  text-align: left;  /* 使文字水平居中 */
+}
+
+/* 导航箭头样式 */
+.navigat-arrow {
+  width: 40rpx;  /* 设置箭头图片的宽度 */
+  height: 40rpx; /* 设置箭头图片的高度 */
+  margin-left: 10rpx; /* 设置箭头和文本之间的间距 */
+  object-fit: contain; /* 保证图片不被拉伸 */
+}

pages/Visualization/Visualization.js

@@ -185,7 +185,7 @@ Page({
         'Content-Type': 'application/json'
       },
       data: {
-        table: 'your_table_name',
+        table: 'Soil_samples',
         item: newRow
       },
       success: (res) => {
@@ -226,42 +226,39 @@ Page({
   onEdit: function() {
     const updatedRow = this.data.currentRow.row;  // 获取当前编辑的行数据
     wx.request({
-      url: 'http://localhost:5000/update_item',
-      method: 'PUT',
+      url: `http://127.0.0.1:5000/delete_item?${condition}`,
+      method: 'DELETE',
       header: {
         'Content-Type': 'application/json'
       },
-      data: {
-        table: 'your_table_name',
-        item: updatedRow
-      },
       success: (res) => {
+        console.log('响应数据:', res);  // 输出响应数据，检查服务器返回的内容
         if (res.data.success) {
           let rows = [...this.data.rows];
-          rows[this.data.currentRow.index] = updatedRow;  // 更新数据
+          rows.splice(index, 1);  // 删除选中的行
           this.setData({
             rows: rows,
             showModal: false
           });
           wx.showToast({
-            title: '更新成功',
+            title: '删除成功',
             icon: 'success'
           });
         } else {
           wx.showToast({
-            title: '更新失败',
+            title: '删除失败',
             icon: 'none'
           });
         }
       },
       fail: (err) => {
+        console.error('请求失败:', err);
         wx.showToast({
           title: '请求失败，请重试',
           icon: 'none'
         });
-        console.error('请求失败:', err);
       }
-    });
+    });    
   },
 
   // 删除按钮点击
@@ -270,13 +267,13 @@ Page({
     const condition = `id=${row.id}`;
 
     wx.request({
-      url: 'http://localhost:5000/delete_item',
+      url: 'http://127.0.0.1:5000/delete_item',
       method: 'DELETE',
       header: {
         'Content-Type': 'application/json'
       },
       data: {
-        table: 'your_table_name',
+        table: 'Soil_samples',
         condition: condition
       },
       success: (res) => {

pages/Visualization/Visualization.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {},
   "navigationBarTitleText": "数据展示",
-  "navigationBarBackgroundColor": "#00AF92"
+  "navigationBarBackgroundColor": "#ffffff",  
+  "navigationBarTextStyle": "black"  
 }

pages/Visualization/Visualization.wxml

@@ -12,6 +12,8 @@
   <!-- 新增按钮 -->
   <view class="add-btn-container">
     <button class="add-btn" bindtap="onAdd">新增</button>
+    <button class="add-btn" bindtap="onAdd">导入</button>
+    <button class="add-btn" bindtap="onAdd">导出</button>
   </view>
 
   <!-- 表头 -->

pages/b/b.js

@@ -0,0 +1,176 @@
+Page({
+  data: {
+    isLogin: false, // 登录状态
+    isHidden: true, // 弹窗状态
+    avatarUrl: '', // 用户头像
+    nickName: '', // 用户昵称
+    username: '', // 用户名（用户名密码登录）
+    password: '', // 密码（用户名密码登录）
+    errorMessage: '', // 错误信息
+  },
+
+  // 获取用户头像
+  getAvatar(e) {
+    const avatarUrl = e.detail.avatarUrl; // 从事件中获取头像URL
+
+    if (avatarUrl) {
+      this.setData({
+        avatarUrl: avatarUrl
+      });
+
+      // 授权登录后，自动设置默认密码到缓存
+      wx.setStorageSync('password', '123');
+
+      // 创建userInfo对象，保存头像和昵称到缓存
+      let userInfo = {
+        avatarUrl: avatarUrl,
+        nickName: this.data.nickName
+      };
+      wx.setStorageSync('userinfo', userInfo); // 保存到缓存
+    } else {
+      wx.showToast({
+        title: '头像获取失败',
+        icon: 'error',
+        duration: 2000
+      });
+    }
+  },
+
+  // 获取用户昵称
+  getName(e) {
+    const nickName = e.detail.value; // 获取昵称
+    this.setData({
+      nickName: nickName
+    });
+
+    // 在授权登录时，将昵称更新到缓存的 userInfo 对象中
+    let userInfo = wx.getStorageSync('userinfo') || {};
+    userInfo.nickName = nickName;
+    wx.setStorageSync('userinfo', userInfo); // 更新缓存
+  },
+
+  // 显示登录弹窗
+  gologin() {
+    this.setData({
+      isHidden: false
+    });
+  },
+
+  // 取消登录弹窗
+  potNo() {
+    this.setData({
+      isHidden: true
+    });
+  },
+
+  // 确认登录弹窗
+  popYes() {
+    const { avatarUrl, nickName } = this.data;
+    if (!avatarUrl || !nickName) {
+      wx.showToast({
+        icon: 'error',
+        title: '请获取头像和昵称',
+      });
+      return;
+    }
+
+    this.setData({
+      isLogin: true,
+      isHidden: true,
+    });
+
+    // 登录成功后跳转到指定页面
+    wx.switchTab({
+      url: '/pages/Calculate/Calculate',
+    });
+  },
+
+  // 用户名密码登录
+  inputUsername(e) {
+    this.setData({
+      username: e.detail.value
+    });
+  },
+
+  inputPassword(e) {
+    this.setData({
+      password: e.detail.value
+    });
+  },
+
+  // 登录验证
+  login() {
+    const { username, password } = this.data;
+
+    if (!username || !password) {
+      this.setData({
+        errorMessage: '用户名和密码不能为空'
+      });
+      return;
+    }
+
+    wx.showLoading({
+      title: '登录中...'
+    });
+
+    setTimeout(() => {
+      wx.hideLoading();
+
+      // 假设用户名和密码为123时登录成功
+      if (username === '123' && password === '123') {
+        wx.showToast({
+          title: '登录成功',
+          icon: 'success',
+          duration: 2000
+        });
+        this.setData({
+          isLogin: true,
+          errorMessage: '',
+        });
+
+        // 登录成功后跳转到指定页面
+        wx.switchTab({
+          url: '/pages/Calculate/Calculate',
+        });
+      } else {
+        this.setData({
+          errorMessage: '用户名或密码错误'
+        });
+        wx.showToast({
+          title: '用户名或密码错误',
+          icon: 'none',
+          duration: 2000
+        });
+      }
+    }, 1500);
+  },
+
+  // 页面加载时，检查是否有缓存的密码
+  onLoad() {
+    const storedPassword = wx.getStorageSync('password');
+    const storedUserInfo = wx.getStorageSync('userinfo');
+
+    // 如果有缓存的密码，则自动填充
+    if (storedPassword) {
+      this.setData({
+        password: storedPassword // 自动填充缓存的密码
+      });
+    }
+
+    // 如果有缓存的用户信息，自动填充头像和昵称
+    if (storedUserInfo) {
+      this.setData({
+        avatarUrl: storedUserInfo.avatarUrl || '/assets/taddar/授权管理.png', // 默认头像
+        nickName: storedUserInfo.nickName || '未登录', // 默认昵称
+        isLogin: true, // 设置已登录状态
+      });
+    }
+
+    // 如果没有设置头像，使用默认头像
+    if (!this.data.avatarUrl) {
+      this.setData({
+        avatarUrl: '/assets/taddar/授权管理.png' // 默认头像
+      });
+    }
+  }
+});

pages/b/b.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/b/b.wxml

@@ -0,0 +1,37 @@
+<view class="container">
+   <!-- 用户名密码登录 -->
+   <view >
+    <input class="input" bindinput="inputUsername" placeholder="请输入用户名" />
+    <input class="input" bindinput="inputPassword" placeholder="请输入密码" type="password" />
+    <button class="gologin" bindtap="login">登录</button>
+    <text class="error">{{errorMessage}}</text>
+  </view>
+  <view class="container">
+<button bindtap="gologin">微信登录</button>
+</view>
+
+  <!-- 登录弹窗 -->
+  <view class="pop_root" hidden="{{isHidden}}">
+    <view class="pop_content">
+      <view class="pot_tip">授权登录弹窗</view>
+      
+      <!-- 获取头像 -->
+      <button class="pop_avatar" open-type="chooseAvatar" bindchooseavatar="getAvatar">
+        <image class="pop_img" wx:if="{{avatarUrl}}" src="{{avatarUrl}}" />
+        <view wx:else>获取头像</view>
+      </button>
+      
+      <!-- 获取昵称 -->
+      <input 
+    class="pop_name" 
+    type="nickname" 
+    bindblur="getName"
+    placeholder="获取昵称"/>
+      
+      <view class="pop_bot">
+        <view class="btn" bind:tap="potNo">取消</view>
+        <view class="btn1" bind:tap="popYes">确定</view>
+      </view>
+    </view>
+  </view>
+</view>

pages/b/b.wxss

@@ -0,0 +1,177 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20rpx 40rpx;
+  height: 50vh; /* 使容器占据整个屏幕高度 */
+}
+
+.input {
+  width: 100%;
+  height: 80rpx;
+  margin-bottom: 20rpx;
+  padding: 0 20rpx;
+  border: 1px solid #ddd;
+  border-radius: var(--border-radius, 10rpx);
+  box-sizing: border-box;
+}
+
+.btn {
+  width: 100%;
+  height: 80rpx;
+  background-color: var(--primary-color, #1aad19);
+  color: #fff;
+  border: none;
+  border-radius: var(--border-radius, 10rpx);
+  text-align: center;
+  line-height: 45rpx;
+  font-size: 36rpx;
+  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);  /* 添加阴影 */
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;  /* 背景颜色和阴影过渡效果 */
+}
+
+.btn:active {
+  background-color: var(--active-color, #128c13);
+  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);  /* 按钮点击时阴影变化 */
+}
+
+.btn:hover {
+  background-color: var(--hover-color, #16b818);
+  cursor: pointer;  /* 鼠标悬浮时显示手型 */
+}
+
+.error {
+  color: red;
+  margin-top: 10rpx;
+  animation: fadeIn 0.5s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.avatar {
+  width: 150rpx;
+  height: 150rpx;
+  border-radius: 50%;
+  margin-top: 20rpx;
+  object-fit: cover;
+}
+
+@media screen and (max-width: 375px) {
+  .container {
+    padding: 100rpx 20rpx;
+  }
+  .btn {
+    font-size: 28rpx;
+    height: 60rpx;
+    line-height: 60rpx;
+  }
+  .input {
+    height: 60rpx;
+  }
+}
+
+/* pages/demo/demo.wxss */
+.root {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.touxiang {
+  width: 300rpx;
+  height: 300rpx;
+  border-radius: 50%;
+  margin-top: 30rpx;
+}
+
+.name {
+  margin-top: 30rpx;
+}
+
+/* 弹窗 */
+.pop_root {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgb(0, 0, 0, 0.6);
+  z-index: 1000;
+}
+
+.pop_content {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 30rpx 30rpx 0 0;
+}
+
+.pot_tip {
+  font-size: 48rpx;
+  margin-top: 30rpx;
+}
+
+.pop_avatar {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 50%;
+  background: gainsboro;
+  font-size: 35rpx;
+  display: flex;
+  flex-direction: center;
+  align-items: center;
+  margin: 30rpx;
+  padding: 0;
+}
+
+.pop_img {
+  width: 100%;
+  height: 100%;
+}
+
+.pop_name {
+  width: 300rpx;
+  bottom: 1px solid gray;
+  border-radius: 25epx;
+  padding-left: 160rpx;
+  margin-bottom: 50rpx;
+}
+
+.pop_bot {
+  display: flex;
+  margin-bottom: 50rpx;
+
+}
+
+.btn {
+  width: 150rpx;
+  border: 1px solid gray;
+  border-radius: 20rpx;
+  text-align: center;
+  background: red;
+  color: white;
+}
+
+.btn1 {
+  width: 150rpx;
+  border: 1px solid gray;
+  border-radius: 20rpx;
+  text-align: center;
+  background: green;
+  color: white;
+  margin-left: 90rpx;
+}

pages/demo/demo.js

@@ -0,0 +1,79 @@
+// pages/demo/demo.js
+Page({
+  data: {
+    isHidden: true,
+  },
+
+  onShow() {
+    let userInfo = wx.getAccountInfoSync('userinfo')
+    if (userInfo && userInfo.uickName) {
+      this.setData({
+        userInfo: userInfo
+      })
+    } else {
+
+    }
+  },
+
+  //获取用户头像
+  getAvatar(e) {
+    console.log(e);
+    this.setData({
+      avatarUrl: e.detail.avatarUrl
+    })
+  },
+
+  //获取用户名称
+  getName(e) {
+    console.log("昵称获取:", e.detail.value);
+    this.setData({
+      nickName: e.detail.value
+    })
+  },
+  gologin() {
+    this.setData({
+      isHidden: false
+    })
+  },
+  //退出登录
+  tuichu() {
+    this.setData({
+      userInfo:null,
+    })
+    wx.setStorageSync('userInfo', null)
+  },
+  potNo() { 
+    this.setData({
+      isHidden: true
+    })
+  },
+  popYes() {
+    console.log("头像:", this.data.avatarUrl);
+    console.log("昵称:", this.data.nickName);
+    let avatarUrl=this.data.avatarUrl
+    let nickName =this.data.nickName
+    if (!avatarUrl){
+      wx .showToast({
+        icon:'error',
+        title:'请获取头像',
+      })
+      return
+    }
+    if (!nickName){
+      wx .showToast({
+        icon:'error',
+        title:'请获取昵称',
+      })
+      return
+    }
+
+    let userInfo ={}
+    userInfo.avatarUrl = avatarUrl
+    userInfo.nickName = nickName
+    wx.setStorageSync('userinfo', userInfo)
+    this.setData({
+      isHidden: true,
+      userInfo: userInfo
+    })
+  }
+})

pages/demo/demo.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/demo/demo.wxml

@@ -0,0 +1,24 @@
+
+<view class="container">
+<button bindtap="gologin">微信登录</button>
+</view>
+<!-- 弹框  -->
+<view class="pop_root" hidden="{{isHidden}}">
+  <view class="pop_content">
+   <view class="pot_tip">授权登录弹窗</view>
+   <button class="pop_avatar" open-type="chooseAvatar" bindchooseavatar="getAvatar">
+    <image class="pop_img" wx:if="{{avatarUrl}}" src="{{avatarUrl}}" />
+    <view wx:else>获取头像</view>
+   </button>
+   <input 
+    class="pop_name" 
+    type="nickname" 
+    bindblur="getName"
+    placeholder="点击获取昵称"/>
+
+    <view class="pop_bot">
+    <view class="btn" bind:tap="potNo">取消</view>
+    <view class="btn1" bind:tap="popYes">确定</view>
+    </view>
+  </view>
+</view>  

pages/demo/demo.wxss

@@ -0,0 +1,80 @@
+/* pages/demo/demo.wxss */
+
+/* 弹窗 */
+.pop_root {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgb(0, 0, 0, 0.6);
+  z-index: 1000;
+}
+
+.pop_content {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 30rpx 30rpx 0 0;
+}
+
+.pot_tip {
+  font-size: 48rpx;
+  margin-top: 30rpx;
+}
+
+.pop_avatar {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 50%;
+  background: gainsboro;
+  font-size: 35rpx;
+  display: flex;
+  flex-direction: center;
+  align-items: center;
+  margin: 30rpx;
+  padding: 0;
+}
+
+.pop_img {
+  width: 100%;
+  height: 100%;
+}
+
+.pop_name {
+  width: 400rpx;
+  bottom: 1px solid gray;
+  border-radius: 25rpx;
+  padding-left: 160rpx;
+  margin-bottom: 50rpx;
+}
+
+.pop_bot {
+  display: flex;
+  margin-bottom: 50rpx;
+
+}
+
+.btn {
+  width: 150rpx;
+  border: 1px solid gray;
+  border-radius: 20rpx;
+  text-align: center;
+  background: red;
+  color: white;
+}
+
+.btn1 {
+  width: 150rpx;
+  border: 1px solid gray;
+  border-radius: 20rpx;
+  text-align: center;
+  background: green;
+  color: white;
+  margin-left: 90rpx;
+}

pages/logs/logs.js

@@ -1,20 +1,22 @@
-// logs.js
-const util = require('../../utils/util.js')
-
-Component({
+Page({
   data: {
-    logs: []
+    login: false,
+    uerInfo: {}
   },
-  lifetimes: {
-    attached() {
-      this.setData({
-        logs: (wx.getStorageSync('logs') || []).map(log => {
-          return {
-            date: util.formatTime(new Date(log)),
-            timeStamp: log
-          }
-        })
-      })
-    }
+
+  // 退出登录
+  tuichu() {
+    this.setData({
+      avatarUrl: '',
+      nickName: '',
+      isLogin: false
+    });
   },
-})
+  
+  goLogin() {
+    if (!this.data.login) {
+      console.log("点击前往登录");
+      // 这里你可以加入逻辑去处理登录操作
+    }
+  }
+});

pages/logs/logs.wxml

@@ -1,7 +1,33 @@
-<!--logs.wxml-->
-<navigation-bar title="查看启动日志" back="{{true}}" color="black" background="#FFF"></navigation-bar>
-<scroll-view class="scrollarea" scroll-y type="list">
-  <block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
-    <view class="log-item">{{index + 1}}. {{log.date}}</view>
-  </block>
-</scroll-view>
+<view class="center">
+  <!-- 处理点击事件和hover类 -->
+  <view class="logo" bindtap="goLogin" hover-class="{{!login ? 'logo-hover' : ''}}">
+    <image class="logo-img" src="/assets/taddar/me.png"></image>
+    <view class="logo-title">
+      <text class="uer-name">Hi，{{ login ? uerInfo.name : '未登录' }}</text>
+      <!-- 未登录时显示登录图标 -->
+      <image class="go-login" wx:if="{{!login}}" src="/assets/taddar/right (1).png"></image>
+    </view>
+  </view>
+
+  <view class="center-list">
+    <view class="center-list-item">
+      <!-- 使用图片替代 iconfont 字体图标 -->
+      <image class="list-icon" src="/assets/taddar/lock.png"></image>
+      <text class="list-text">帐号管理</text>
+      <image class="navigat-arrow" src="/assets/taddar/right.png"></image>
+    </view>
+    <view class="center-list-item">
+      <image class="list-icon" src="/assets/taddar/edit.png"></image>
+      <text class="list-text">编辑个人信息</text>
+      <image class="navigat-arrow" src="/assets/taddar/right.png"></image>
+    </view>
+  </view>
+
+  <view class="center-list">
+    <view class="center-list-item border-bottom">
+      <image class="list-icon" src="/assets/taddar/logout.png"></image>
+      <button class="list-text" bind:tap="tuichu">退出登录</button> 
+      <image class="navigat-arrow" src="/assets/taddar/right.png"></image>
+    </view>
+  </view>
+</view>

pages/logs/logs.wxss

@@ -1,16 +1,120 @@
-page {
-  height: 100vh;
+/* 页面和视图容器样式 */
+page,
+view {
   display: flex;
+}
+
+page {
+  background-color: #f8f8f8;
+}
+
+.center {
   flex-direction: column;
 }
-.scrollarea {
+
+/* Logo容器样式 */
+.logo {
+  width: 750rpx;
+  height: 240rpx;
+  padding: 20rpx;
+  box-sizing: border-box;
+  background-color: #a9c6b6;
+  flex-direction: row;
+  align-items: center;
+}
+
+.logo-hover {
+  opacity: 0.8;
+}
+
+.logo-img {
+  width: 150rpx;  /* 设置图片的大小 */
+  height: 150rpx;  /* 设置图片的大小 */
+  border-radius: 150rpx; /* 圆形边框 */
+}
+
+/* Logo标题样式 */
+.logo-title {
+  height: 150rpx;
   flex: 1;
-  overflow-y: hidden;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  margin-left: 20rpx;
+}
+
+/* 用户名样式 */
+.uer-name {
+  height: 60rpx;
+  line-height: 60rpx;
+  font-size: 38rpx;
+  color: #FFFFFF;
 }
-.log-item {
+
+.go-login {
+    height: 40rpx; /* 设置箭头图片的高度 */
+    width: 40rpx;  /* 设置箭头图片的宽度 */
+    line-height: 90rpx; /* 图片垂直居中 */
+    margin-left: 10rpx; /* 设置箭头和文本之间的间距 */
+    object-fit: contain; /* 保证图片不被拉伸 */
+}
+
+.login-title {
+  height: 150rpx;
+  align-items: self-start;
+  justify-content: center;
+  flex-direction: column;
+  margin-left: 20rpx;
+}
+
+/* 中心列表样式 */
+.center-list {
+  background-color: #FFFFFF;
   margin-top: 20rpx;
-  text-align: center;
+  width: 750rpx;
+  flex-direction: column;
 }
-.log-item:last-child {
-  padding-bottom: env(safe-area-inset-bottom);
+
+/* 列表项样式 */
+.center-list-item {
+  height: 90rpx;
+  width: 750rpx;
+  box-sizing: border-box;
+  flex-direction: row;
+  padding: 0 20rpx;
+}
+
+/* 边框样式 */
+.border-bottom {
+  border-bottom-width: 1rpx;
+  border-color: #c8c7cc;
+  border-bottom-style: solid;
+}
+
+/* 图片图标样式 */
+.list-icon {
+  width: 40rpx;  /* 设置图片宽度 */
+  height: 40rpx;  /* 设置图片高度 */
+  line-height: 90rpx; /* 图片垂直居中 */
+  margin-right: 20rpx;
+  object-fit: contain; /* 保证图片不被拉伸 */
+}
+
+/* 列表文字样式 */
+.list-text {
+  height: 90rpx;
+  line-height: 90rpx;
+  font-size: 34rpx;
+  color: #555;
+  flex: 1;
+  text-align: left;
 }
+
+/* 导航箭头样式 */
+.navigat-arrow {
+  height: 40rpx; /* 设置箭头图片的高度 */
+  width: 40rpx;  /* 设置箭头图片的宽度 */
+  line-height: 90rpx; /* 图片垂直居中 */
+  margin-left: 10rpx; /* 设置箭头和文本之间的间距 */
+  object-fit: contain; /* 保证图片不被拉伸 */
+}

project.config.json

@@ -1,5 +1,5 @@
 {
-  "appid": "wxa4088d00b5849cba",
+  "appid": "wxc75e060d54a6f54c",
   "compileType": "miniprogram",
   "libVersion": "trial",
   "packOptions": {