Commit c8f1bce8 authored by 王炽's avatar 王炽

生长曲线提示

parent 7723f2bd
...@@ -13,32 +13,11 @@ ...@@ -13,32 +13,11 @@
<!-- 弹窗内容 --> <!-- 弹窗内容 -->
<cover-view class="popup-body"> <cover-view class="popup-body">
<!-- 第一段文字 --> <cover-image class="curve-image" :src="`${$baseUrl}shengzhangTestResult/1001/quxianTipsCon.png`" ></cover-image>
<cover-view class="content-section">
<cover-view class="section-title">什么是生长曲线</cover-view>
<text class="content-text">生长曲线,就是把宝宝在每个成长节点测量的身高、体重、头围绘制在一个表格里,并形成一条曲线图,数据落在不同的区间内代表当前不同的发育情况。</text>
</cover-view>
<!-- 图片区域 -->
<cover-view class="image-section">
<cover-image class="curve-image" :src="`${$baseUrl}shengzhangTestResult/1001/quxianTipsImg.png`" mode="aspectFit"></cover-image>
</cover-view>
<!-- 第二段文字 -->
<cover-view class="content-section">
<cover-view class="section-title">生长曲线有什么作用</cover-view>
<cover-view class="content-text">将宝宝的生长曲线与标准的生长曲线对比,可以看出宝宝当前的身高、体重、头围与全国儿童的标准值相比是偏高(大)还是偏低(偏小)。通过连续的生长曲线的趋势和变化状态,可以判断宝宝的体格发育是否正常,以及当前的基本健康状况。</cover-view>
</cover-view>
<!-- 第三段文字 -->
<cover-view class="content-section">
<cover-view class="section-title">生长曲线怎么使用</cover-view>
<cover-view class="content-text">定期连续测量宝宝的身高、体重、头围数据,使用本软件测评即可。0-3岁儿童每月至少测量一次。</cover-view>
</cover-view>
</cover-view> </cover-view>
<!-- 确认按钮 --> <!-- 确认按钮 -->
<cover-view class="confirm-btn" @click="closePopup"> <cover-view class="confirm-btn" @click="closePopup" scroll-y="true">
<cover-image class="btn-bg" :src="`${$baseUrl}shengzhangTool/1001/tipsOkBtn.png`" mode="aspectFit"></cover-image> <cover-image class="btn-bg" :src="`${$baseUrl}shengzhangTool/1001/tipsOkBtn.png`" mode="aspectFit"></cover-image>
</cover-view> </cover-view>
</cover-view> </cover-view>
...@@ -77,102 +56,85 @@ const closePopup = () => { ...@@ -77,102 +56,85 @@ const closePopup = () => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
pointer-events: none; // 允许点击穿透到背景页面 .popup-content {
} width: 661rpx;
height: 882rpx;
background-color: #ffffff;
border-radius: 24rpx;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
pointer-events: auto; // 恢复弹窗内容的点击事件
.close-btn {
position: absolute;
top: 30rpx;
right: 30rpx;
width: 40rpx;
height: 40rpx;
z-index: 10;
.close-icon {
width: 100%;
height: 100%;
}
}
.popup-content { .title-icon {
width: 661rpx; height: 90rpx;
max-height: 882rpx; margin-top: 20rpx;
background-color: #ffffff; margin-bottom: 20rpx;
border-radius: 24rpx; display: flex;
position: relative; align-items: center;
display: flex; justify-content: center;
flex-direction: column; .icon-image {
overflow: hidden;
pointer-events: auto; // 恢复弹窗内容的点击事件
}
.close-btn { width: 79rpx;
position: absolute; height: 79rpx;
top: 30rpx; }
right: 30rpx; }
width: 40rpx;
height: 40rpx;
z-index: 10;
.close-icon {
width: 100%;
height: 100%;
}
}
.title-icon {
height: 90rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: center;
.icon-image {
width: 79rpx; .popup-body {
height: 79rpx; flex: 1;
} padding-left: 40rpx;
} padding-right: 40rpx;
overflow: auto !important;
width: 570rpx;
height: 449rpx;
position: relative;
.popup-body { .curve-image {
flex: 1; width: 570rpx;
padding-left: 40rpx; height: 1044rpx;
padding-right: 40rpx; border-radius: 12rpx;
overflow-y: auto; background-color: #ffffff;
} position: absolute;
}
}
.content-section { .confirm-btn {
margin-bottom: 30rpx; position: relative;
height: 150rpx;
.section-title { display: flex;
font-size: 30rpx; justify-content: center;
color: #d3a358; align-items: center;
font-weight: bold;
line-height: 1.4; .btn-bg {
display: block; position: absolute;
margin-bottom: 15rpx; width: 565rpx;
} height: 97rpx;
z-index: 1;
.content-text { }
font-size: 28rpx; }
color: #666666;
line-height: 1.6;
display: block;
margin-bottom: 15rpx;
} }
}
.image-section {
margin: 30rpx 0;
display: flex;
justify-content: center;
align-items: center;
.curve-image {
width: 100%;
height: 300rpx;
border-radius: 12rpx;
background-color: #ffffff;
}
}
.confirm-btn {
position: relative;
height: 150rpx;
display: flex;
justify-content: center;
.btn-bg {
position: absolute;
width: 565rpx;
height: 97rpx;
z-index: 1;
}
} }
</style> </style>
\ No newline at end of file
...@@ -209,7 +209,7 @@ ...@@ -209,7 +209,7 @@
</view> </view>
<view class="guide-container" v-if="guideIndex != -1" @click="guideHandler"> <view class="guide-container" v-if="guideIndex != -1" @click="guideHandler">
<image v-if="guideIndex == 0" class="guide-img0" :src="`${$baseUrl}shengzhangTool/1001/guide0.png`" mode="aspectFit"></image> <image v-if="guideIndex == 0" class="guide-img0" :src="`${$baseUrl}shengzhangTool/1001/guide0.png`" mode="aspectFit"></image>
<image v-if="guideIndex == 1" class="guide-img1" :src="`${$baseUrl}shengzhangTool/1001/guide1.png`" mode="aspectFit"></image> <image v-if="guideIndex == 1" class="guide-img1" :src="`${$baseUrl}shengzhangTool/1001/guide1-2.png`" mode="aspectFit"></image>
<image v-if="guideIndex == 2" class="guide-img2" :src="`${$baseUrl}shengzhangTool/1001/guide2.png`" mode="aspectFit"></image> <image v-if="guideIndex == 2" class="guide-img2" :src="`${$baseUrl}shengzhangTool/1001/guide2.png`" mode="aspectFit"></image>
</view> </view>
<view class="loading-container" v-if="showLoading"> <view class="loading-container" v-if="showLoading">
...@@ -321,7 +321,7 @@ const babyId = ref(0); ...@@ -321,7 +321,7 @@ const babyId = ref(0);
const assessmentDate = ref(''); const assessmentDate = ref('');
const feedingType = ref(''); const feedingType = ref('');
// 添加picker-view相关数据 // 添加picker-view相关数据
const indicatorStyle = `height: 45px; border: none;` const indicatorStyle = `height: 40px; border: none;`
// 生成数值范围 // 生成数值范围
const generateRange = (min, max, step = 0.1) => { const generateRange = (min, max, step = 0.1) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment