87 lines
2.4 KiB
Plaintext
87 lines
2.4 KiB
Plaintext
|
|
<van-nav-bar
|
|
title="遗传靶身高计算"
|
|
left-text=""
|
|
left-arrow
|
|
bind:click-left="onClickLeft"
|
|
/>
|
|
<view class="container">
|
|
<view class="form-container">
|
|
<view class="form-group">
|
|
<text class="form-label">父亲身高(cm)</text>
|
|
<input
|
|
class="form-input"
|
|
type="number"
|
|
placeholder="请输入父亲身高"
|
|
value="{{fatherHeight}}"
|
|
bindinput="inputFatherHeight"
|
|
/>
|
|
</view>
|
|
|
|
<view class="form-group">
|
|
<text class="form-label">母亲身高(cm)</text>
|
|
<input
|
|
class="form-input"
|
|
type="number"
|
|
placeholder="请输入母亲身高"
|
|
value="{{motherHeight}}"
|
|
bindinput="inputMotherHeight"
|
|
/>
|
|
</view>
|
|
|
|
<view class="form-group">
|
|
<text class="form-label">孩子性别</text>
|
|
<view class="gender-group">
|
|
<view
|
|
class="gender-item {{childGender === 'male' ? 'active' : ''}}"
|
|
bindtap="selectGender"
|
|
data-gender="male"
|
|
>
|
|
男
|
|
</view>
|
|
<view
|
|
class="gender-item {{childGender === 'female' ? 'active' : ''}}"
|
|
bindtap="selectGender"
|
|
data-gender="female"
|
|
>
|
|
女
|
|
</view>
|
|
</view>
|
|
<input
|
|
name="childGender"
|
|
value="{{childGender}}"
|
|
style="display:none"
|
|
/>
|
|
</view>
|
|
|
|
<view class="button-group">
|
|
<view class="button" bindtap="calculate">计算</view>
|
|
<view class="button secondary" bindtap="reset">重置</view>
|
|
</view>
|
|
</view>
|
|
<!-- 计算结果 -->
|
|
<view class="result-container" wx:if="{{targetHeight !== null}}">
|
|
<text class="result-title">计算结果</text>
|
|
|
|
<view class="result-item">
|
|
<text class="result-label">遗传靶身高</text>
|
|
<text class="result-value">{{targetHeight}} cm</text>
|
|
</view>
|
|
|
|
<view class="result-item">
|
|
<text class="result-label">生长潜力</text>
|
|
<text class="result-value">{{growthPotential}}</text>
|
|
</view>
|
|
|
|
<view class="tips">
|
|
注：遗传靶身高是根据父母身高预测的儿童成年身高范围，实际身高可能受多种因素影响。
|
|
具体诊断请咨询专业医生。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 图表展示 -->
|
|
<view class="chart-container" wx:if="{{targetHeight !== null}}">
|
|
<canvas canvas-id="growthChart" style="width: 100%; height: 100%;"></canvas>
|
|
</view>
|
|
</view>
|