图表

app.json

@@ -8,6 +8,7 @@
     "pages/guanyu/guanyu",
     "pages/ghdCalculator/ghdCalculator",
     "pages/webpage/webpage",
+    "pages/sexChart/sexChart",
     "pages/tool/tool",
     "pages/igfrefer/igfrefer",
     "pages/tarhei/tarhei",
@@ -34,12 +35,6 @@
         "iconPath": "pages/image/首页@2x.png",
         "selectedIconPath": "pages/image/首页亮.png"
       },
-      {
-        "pagePath": "pages/tool/tool",
-        "text": "计算收藏",
-        "iconPath": "pages/image/计算收藏@2x (3).png",
-        "selectedIconPath": "pages/image/计算@2x.png"
-      },
       {
         "pagePath": "pages/my/my",
         "text": "个人中心",

pages/ghdCalculator/ghdCalculator.wxss

@@ -1,6 +1,6 @@
 /* pages/ghdCalculator/ghdCalculator.wxss *//* 页面容器 */
 .container {
-  padding: 40rpx;
+  padding: 20rpx;
   background: #f5f5f5;
   min-height: 100vh;
 }

pages/grocur/grocur.wxml

@@ -9,7 +9,15 @@
 
   <view class="image-container">
     <image 
-      src="/pages/image/grocur.png" 
+      src="/pages/image/szqx02.jpg" 
+      mode="widthFix"
+      style="width: 100%;"
+    />
+  </view>
+
+    <view class="image-container">
+    <image 
+      src="/pages/image/szqx01.jpg" 
       mode="widthFix"
       style="width: 100%;"
     />

pages/grocur/grocur.wxss

@@ -1,11 +1,10 @@
 .container {
-  padding: 20px;
+  padding: 0px;
 }
 
 .image-container {
   width: 100%;
   background: #fff;
-  padding: 10px;
   border-radius: 8px;
   box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
 }

pages/home/home.wxml

@@ -16,16 +16,16 @@
   
   <view class="name" style="margin-top: 30rpx;"><text>{{"生长发育相关参考计算和图表"}}</text></view>
     <view class="main" style="margin-top: 32rpx;">
-      <view class="main-item"  bindtap="go_peizhen">
+      <!-- <view class="main-item"  bindtap="go_peizhen">
         <image style="height: 86rpx;width: 86rpx;margin-left: 64rpx;margin-top: 40rpx;" src="../image/home/生长曲线图@2x.png" mode="aspectFit"></image>
         <view class="title-view">
           <text class="main-title">GHD预测计算</text>
         </view>
-      </view>
+      </view> -->
       <view class="main-item" style="background-color: #EDFFFC;"  bindtap="go_cpp">
         <image style="height: 86rpx;width: 86rpx;margin-left: 64rpx;margin-top: 40rpx;" src="../image/home/计算收藏@2x.png" mode="aspectFit"></image>
         <view class="title-view">
-          <text class="main-title">CPP预测计算</text>
+          <text class="main-title">GHD预测计算</text>
         </view>
       </view>
       <view class="main-item"  bindtap="go_peihu">
@@ -42,7 +42,7 @@
       </view>
     </view>
     <view class="main" style="margin-top: 24rpx;">
-      <view class="main-item" bindtap="go_peizhen">
+      <view class="main-item" bindtap="go_chart">
         <image style="height: 86rpx;width: 86rpx;margin-left: 64rpx;margin-top: 40rpx;" src="../image/home/性发育图表@2x.png" mode="aspectFit"></image>
         <view class="title-view">
           <text class="main-title">性发育图表</text>

pages/sexChart/sexChart.js

@@ -0,0 +1,172 @@
+// pages/sexChart/sexChart.js
+const app = getApp();
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    // 基础数据
+    gender: 'female', // 默认选择女性
+    activeTab: 'integrated', // 默认显示综合表格
+    
+    // 图片路径
+    images: {
+      female: '/pages/image/xfytb01.png',
+      male: '/pages/image/xfytb02.png'
+    },
+    
+    // 女孩发育分期数据
+    femaleStages: [
+      {
+        stage: 1,
+        breast: '幼儿型',
+        pubic: '无',
+        other: ''
+      },
+      {
+        stage: 2,
+        breast: '出现硬结，乳头及乳晕稍增大',
+        pubic: '少许稀疏直毛，色浅；女孩限阴唇处；男孩限阴茎根部',
+        other: '生长增速'
+      },
+      {
+        stage: 3,
+        breast: '乳房和乳晕更增大，侧面呈半圆状',
+        pubic: '毛色变深、变粗，见于耻骨联合上',
+        other: '生长速率渐达高峰；女孩出现腋毛；男孩渐见胡须、痤疮、声音变调'
+      },
+      {
+        stage: 4,
+        breast: '乳晕、乳头增大，侧面观突起于乳房半圆上',
+        pubic: '如同成人，但分布面积小',
+        other: '生长速率开始下降，女孩见初潮'
+      },
+      {
+        stage: 5,
+        breast: '成人型',
+        pubic: '成人型',
+        other: ''
+      }
+    ],
+    
+    // 男孩发育分期数据
+    maleStages: [
+      {
+        stage: 1,
+        genital: '幼儿型，睾丸直径<2.5cm (1~3ml)',
+        pubic: '无',
+        other: ''
+      },
+      {
+        stage: 2,
+        genital: '双睾和阴囊增大；睾丸直径>2.5cm (4~8ml)；阴囊皮肤变红、薄、起皱纹；阴茎稍增大',
+        pubic: '少许稀疏直毛，色浅；限阴茎根部',
+        other: '生长增速'
+      },
+      {
+        stage: 3,
+        genital: '阴囊、双睾增大，睾丸长径约3.5cm (10~15ml)；阴茎开始增长',
+        pubic: '毛色变深、变粗，见于耻骨联合上',
+        other: '生长速率渐达高峰；渐见胡须、痤疮、声音变调'
+      },
+      {
+        stage: 4,
+        genital: '阴囊皮肤色泽变深；阴茎增长、增粗，龟头发育；睾丸长径约4cm (15~20ml)',
+        pubic: '如同成人，但分布面积小',
+        other: '生长速率开始下降'
+      },
+      {
+        stage: 5,
+        genital: '成人型，睾丸长径>4cm (>20ml)',
+        pubic: '成人型',
+        other: ''
+      }
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+
+  // 切换性别
+  switchGender(e) {
+    this.setData({
+      gender: e.currentTarget.dataset.gender
+    });
+  },
+
+  // 切换标签页
+  switchTab(e) {
+    this.setData({
+      activeTab: e.currentTarget.dataset.tab
+    });
+  },
+
+  // 返回上一页
+  onClickLeft() {
+    wx.navigateBack();
+  },
+  
+  // 预览图片
+  previewImage(e) {
+    const imagePath = e.currentTarget.dataset.image;
+    wx.previewImage({
+      current: imagePath,
+      urls: ['/pages/image/xfytb01.jpg', '/pages/image/xfytb02.jpg']
+    });
+  }
+})

pages/sexChart/sexChart.json

@@ -0,0 +1,10 @@
+{
+  "navigationBarTitleText": "性发育图表",
+  "usingComponents": {
+    "van-nav-bar": "/miniprogram/miniprogram_npm/@vant/weapp/nav-bar/index",
+    "van-overlay": "/miniprogram/miniprogram_npm/@vant/weapp/overlay/index",
+    "van-field": "/miniprogram/miniprogram_npm/@vant/weapp/field/index",
+    "van-button": "/miniprogram/miniprogram_npm/@vant/weapp/button/index",
+    "van-toast": "/miniprogram/miniprogram_npm/@vant/weapp/toast/index"
+  }
+}

pages/sexChart/sexChart.wxml

@@ -0,0 +1,69 @@
+<!--pages/sexChart/sexChart.wxml-->
+<van-nav-bar 
+  title="性发育图表" 
+  left-text="" 
+  left-arrow 
+  bind:click-left="onClickLeft"
+  class="nav-bar custom-nav"
+/>
+
+<view class="container">
+  <!-- 页面标题 -->
+  <view class="page-title">Tanner性发育分期标准</view>
+  
+  <!-- 图片容器 -->
+  <view class="image-card">
+    <view class="card-title"></view>
+    <view class="image-container">
+      <image 
+        src="/pages/image/xfytb01.jpg" 
+        mode="widthFix"
+        class="chart-image"
+        bindtap="previewImage"
+        data-image="/pages/image/xfytb01.jpg"
+        style="width: 100%;"
+      />
+    </view>
+  </view>
+
+  <view class="image-card">
+    <view class="card-title"></view>
+    <view class="image-container">
+      <image 
+        src="/pages/image/xfytb02.jpg" 
+        mode="widthFix"
+        class="chart-image"
+        bindtap="previewImage"
+        data-image="/pages/image/xfytb02.jpg"
+        style="width: 100%;"
+      />
+    </view>
+  </view>
+
+  <!-- 说明信息 -->
+  <view class="info-section">
+    <view class="info-title">说明</view>
+    <view class="info-content">
+      <view class="info-item">
+        <text class="info-number">1</text>
+        <text class="info-text">Tanner分期是评估青春期发育的国际标准。</text>
+      </view>
+      <view class="info-item">
+        <text class="info-number">2</text>
+        <text class="info-text">B代表乳房发育，G代表男性生殖器发育，P代表阴毛发育。</text>
+      </view>
+      <view class="info-item">
+        <text class="info-number">3</text>
+        <text class="info-text">正常女孩青春期发育一般在8-13岁开始，男孩在9-14岁开始。</text>
+      </view>
+      <view class="info-item">
+        <text class="info-number">4</text>
+        <text class="info-text">如有发育异常，请咨询专业医生。</text>
+      </view>
+    </view>
+  </view>
+  
+  <view class="footer-tip">
+    <text>点击图片可放大查看</text>
+  </view>
+</view>

pages/sexChart/sexChart.wxss

@@ -0,0 +1,259 @@
+/* pages/sexChart/sexChart.wxss */
+/* 页面容器 */
+.container {
+  padding: 30rpx;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+/* 页面标题 */
+.page-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  margin-bottom: 30rpx;
+  padding: 20rpx 0;
+}
+
+/* 图片卡片 */
+.image-card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-bottom: 30rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.card-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #27C2A7;
+  margin-bottom: 20rpx;
+  text-align: center;
+}
+
+/* 图片容器 */
+.image-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 8rpx;
+}
+
+.chart-image {
+  width: 100%;
+  height: auto;
+  display: block;
+  transition: transform 0.3s ease;
+}
+
+.chart-image:active {
+  transform: scale(0.98);
+}
+
+/* 说明信息 */
+.info-section {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-top: 20rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
+}
+
+.info-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20rpx;
+  border-left: 8rpx solid #27C2A7;
+  padding-left: 20rpx;
+}
+
+.info-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.info-item {
+  display: flex;
+  margin-bottom: 16rpx;
+  align-items: flex-start;
+}
+
+.info-number {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40rpx;
+  height: 40rpx;
+  background: #27C2A7;
+  color: #fff;
+  border-radius: 50%;
+  font-size: 24rpx;
+  margin-right: 16rpx;
+  flex-shrink: 0;
+}
+
+.info-text {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.6;
+  flex: 1;
+}
+
+/* 底部提示 */
+.footer-tip {
+  text-align: center;
+  font-size: 24rpx;
+  color: #999;
+  margin: 30rpx 0;
+}
+
+/* 性别选择器 */
+.gender-selector {
+  display: flex;
+  margin-bottom: 30rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+
+.gender-item {
+  flex: 1;
+  text-align: center;
+  padding: 20rpx 0;
+  font-size: 28rpx;
+  color: #666;
+}
+
+.gender-item.active {
+  background: #27C2A7;
+  color: #fff;
+}
+
+/* 标签页选择器 */
+.tab-selector {
+  display: flex;
+  margin-bottom: 30rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+
+.tab-item {
+  flex: 1;
+  text-align: center;
+  padding: 20rpx 0;
+  font-size: 28rpx;
+  color: #666;
+}
+
+.tab-item.active {
+  background: #e6f7f4;
+  color: #27C2A7;
+  font-weight: bold;
+}
+
+/* 图表内容 */
+.chart-content {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-bottom: 30rpx;
+}
+
+.chart-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  margin-bottom: 30rpx;
+}
+
+/* 表格样式 */
+.table-container {
+  width: 100%;
+  border: 1px solid #e0e0e0;
+  border-radius: 8rpx;
+  overflow: hidden;
+}
+
+.table-header {
+  display: flex;
+  background-color: #f0f8ff;
+  font-weight: bold;
+}
+
+.table-row {
+  display: flex;
+  border-top: 1px solid #e0e0e0;
+}
+
+.table-row:nth-child(odd) {
+  background-color: #f9f9f9;
+}
+
+.table-cell {
+  flex: 1;
+  padding: 20rpx 10rpx;
+  font-size: 24rpx;
+  border-right: 1px solid #e0e0e0;
+  word-break: break-all;
+  line-height: 1.5;
+}
+
+.table-cell:last-child {
+  border-right: none;
+}
+
+.stage-cell {
+  flex: 0.3;
+  text-align: center;
+  font-weight: bold;
+  background-color: #e6f7f4;
+}
+
+/* 图片网格 */
+.image-grid {
+  display: flex;
+  flex-direction: column;
+}
+
+.image-row {
+  display: flex;
+  margin-bottom: 30rpx;
+}
+
+.image-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 10rpx;
+}
+
+.image-label {
+  font-size: 28rpx;
+  font-weight: bold;
+  margin-bottom: 10rpx;
+  color: #27C2A7;
+}
+
+.stage-image {
+  width: 100%;
+  height: 240rpx;
+  background: #f9f9f9;
+  border-radius: 8rpx;
+  border: 1px solid #e0e0e0;
+}
+
+.full-image {
+  width: 100%;
+  border-radius: 8rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
+}