Skip to content

飞
飞鹤小程序
Commit e90f06f6 authored by 王炽's avatar 王炽
Browse files
Options

666666

parent 034f5b4f
Hide whitespace changes
Inline Side-by-side
Showing with 49 additions and 69 deletions
components/shengzhangQuxianTipsPopup.vue
View file @ e90f06f6
<template>
<view v-if="visible" class="popup-overlay">
<view class="popup-content" @click.stop>
<cover-view v-if="visible" class="popup-overlay">
<cover-view class="popup-content" @click.stop>
<!-- 关闭按钮 -->
<view class="close-btn" @click="closePopup">
<image class="close-icon" :src="`${$baseUrl}shengzhangTool/1001/changeBaby/closeBtn.png`" mode="aspectFit"></image>
</view>
<cover-view class="close-btn" @click="closePopup">
<cover-image class="close-icon" :src="`${$baseUrl}shengzhangTool/1001/changeBaby/closeBtn.png`" mode="aspectFit"></cover-image>
</cover-view>
<!-- 固定标题区域 -->
<view class="fixed-title">
<view class="title-icon">
<image class="icon-image" :src="`${$baseUrl}shengzhangTool/1001/tipsPopIcon.png`" mode="aspectFit"></image>
</view>
</view>
<cover-view class="title-icon">
<cover-image class="icon-image" :src="`${$baseUrl}shengzhangTool/1001/tipsPopIcon.png`" mode="aspectFit"></cover-image>
</cover-view>
<!-- 弹窗内容 -->
<view class="popup-body">
<cover-view class="popup-body">
<!-- 第一段文字 -->
<view class="content-section">
<text class="section-title">什么是生长曲线</text>
<cover-view class="content-section">
<cover-view class="section-title">什么是生长曲线</cover-view>
<text class="content-text">生长曲线，就是把宝宝在每个成长节点测量的身高、体重、头围绘制在一个表格里，并形成一条曲线图，数据落在不同的区间内代表当前不同的发育情况。</text>
</view>
</cover-view>
<!-- 图片区域 -->
<view class="image-section">
<image class="curve-image" :src="`${$baseUrl}shengzhangTestResult/1001/quxianTipsImg.png`" mode="aspectFit"></image>
</view>
<cover-view class="image-section">
<cover-image class="curve-image" :src="`${$baseUrl}shengzhangTestResult/1001/quxianTipsImg.png`" mode="aspectFit"></cover-image>
</cover-view>
<!-- 第二段文字 -->
<view class="content-section">
<text class="section-title">生长曲线有什么作用</text>
<text class="content-text">将宝宝的生长曲线与标准的生长曲线对比，可以看出宝宝当前的身高、体重、头围与全国儿童的标准值相比是偏高(大)还是偏低(偏小)。通过连续的生长曲线的趋势和变化状态，可以判断宝宝的体格发育是否正常，以及当前的基本健康状况。</text>
</view>
<cover-view class="content-section">
<cover-view class="section-title">生长曲线有什么作用</cover-view>
<cover-view class="content-text">将宝宝的生长曲线与标准的生长曲线对比，可以看出宝宝当前的身高、体重、头围与全国儿童的标准值相比是偏高(大)还是偏低(偏小)。通过连续的生长曲线的趋势和变化状态，可以判断宝宝的体格发育是否正常，以及当前的基本健康状况。</cover-view>
</cover-view>
<!-- 第三段文字 -->
<view class="content-section">
<text class="section-title">生长曲线怎么使用</text>
<text class="content-text">定期连续测量宝宝的身高、体重、头围数据，使用本软件测评即可。0-3岁儿童每月至少测量一次。</text>
</view>
</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>
<!-- 确认按钮 -->
<view class="confirm-btn" @click="closePopup">
<image class="btn-bg" :src="`${$baseUrl}shengzhangTool/1001/tipsOkBtn.png`" mode="aspectFit"></image>
</view>
</view>
</view>
<cover-view class="confirm-btn" @click="closePopup">
<cover-image class="btn-bg" :src="`${$baseUrl}shengzhangTool/1001/tipsOkBtn.png`" mode="aspectFit"></cover-image>
</cover-view>
</cover-view>
</cover-view>
</template>
<script setup>
......@@ -108,39 +106,24 @@ const closePopup = () => {
}
}
.fixed-title {
padding: 60rpx 40rpx 30rpx 40rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: #ffffff;
.title-icon {
width: 79rpx;
height: 79rpx;
.title-icon {
height: 90rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: center;
.icon-image {
width: 100%;
height: 100%;
width: 79rpx;
height: 79rpx;
}
}
.title-text {
font-size: 30rpx;
color: #d3a358;
font-weight: bold;
line-height: 1.2;
text-align: center;
}
}
.popup-body {
flex: 1;
padding: 0 40rpx 20rpx 40rpx;
padding-left: 40rpx;
padding-right: 40rpx;
overflow-y: auto;
}
......@@ -181,10 +164,8 @@ const closePopup = () => {
.confirm-btn {
position: relative;
margin: 30rpx 40rpx 40rpx 40rpx;
height: 97rpx;
height: 150rpx;
display: flex;
align-items: center;
justify-content: center;
.btn-bg {
......
pages/shengzhangTestResult/shengzhangTestResult.vue
View file @ e90f06f6
......@@ -219,7 +219,7 @@
<text class="graph-title-text">{{getYAxisLabel()}}</text>
</view>
<view class="graph-container">
<canvas class="curve-canvas" canvas-id="growthCurve" :style="{ width: totalWidth + 'px', height: '100%' }" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"></canvas>
<canvas class="curve-canvas" canvas-id="growthCurve" :style="{ width: 630 + 'rpx', height: '100%' }" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"></canvas>
</view>
<view class="graph-title-x">
<text class="graph-title-text">月龄</text>
......@@ -294,9 +294,9 @@
</view>
<!-- 专家咨询按钮 -->
<view class="expert-consult-btn" @click="consultExpert">
<image class="consult-bg" :src="`${$baseUrl}shengzhangTestResult/1001/zhuanjiazixunBtn.png`" mode="aspectFit"></image>
</view>
<cover-view class="expert-consult-btn" @click="consultExpert">
<cover-image class="consult-bg" :src="`${$baseUrl}shengzhangTestResult/1001/zhuanjiazixunBtn.png`" mode="aspectFit"></cover-image>
</cover-view>
<!-- 生长曲线提示弹窗 -->
<ShengzhangQuxianTipsPopup
......@@ -347,7 +347,7 @@ const scrollOffset = ref(0) // X轴绘制元素的偏移量
const isDragging = ref(false)
const startX = ref(0)
const lastX = ref(0)
const canvasWidth = ref(400) // 可视区域宽度
const canvasWidth = ref(630) // 可视区域宽度
const babyInfo = ref()
......@@ -1154,7 +1154,6 @@ const onTouchMove = (e) => {
// 计算新的滚动偏移量
const newOffset = scrollOffset.value + deltaX
// const maxOffset = Math.max(0, totalWidth.value - canvasWidth.value)
// 限制滚动范围，允许一定的弹性效果
// if (newOffset >= -50 && newOffset <= maxOffset + 50) {
......@@ -1162,11 +1161,11 @@ const onTouchMove = (e) => {
// drawGrowthCurve() // 重新绘制图表
// }
const maxOffset = Math.max(0, totalWidth.value - canvasWidth.value)
const maxOffset = Math.max(0, totalWidth.value - canvasWidth.value -20)
if (newOffset <= 0) {
scrollOffset.value = 0;
} else if (newOffset >= 750){//maxOffset) {
scrollOffset.value = 750//maxOffset
} else if (newOffset >= maxOffset) {
scrollOffset.value = maxOffset
}else{
scrollOffset.value = newOffset;
}
......@@ -1858,9 +1857,9 @@ const onTouchEnd = () => {
.expert-consult-btn {
position: fixed;
bottom: 60rpx;
left: 0;
width: 100%;
height: 100rpx;
left: 35rpx;
width: 681rpx;
height: 98rpx;
display: flex;
align-items: center;
justify-content: center;
......
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