Skip to content

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

6666

parent efb98dd6
Hide whitespace changes
Inline Side-by-side
Showing with 333 additions and 220 deletions
pages/shengzhangTestResult/shengzhangTestResult.vue
View file @ 91abda20
......@@ -22,11 +22,11 @@
<view class="tab-item" :class="{ 'active': activeTab === 'history' }" @click="switchTab('history')">
<text class="tab-text">历史</text>
</view>
<view class="tab-decoration">
<!-- <view class="tab-decoration">
<text class="star">★</text>
<text class="star">★</text>
<text class="star">★</text>
</view>
</view> -->
</view>
<!-- 宝宝信息卡片 -->
......@@ -41,25 +41,29 @@
<text class="test-date">测评于2025年06月06日</text>
</view>
<view class="measurement-summary">
<view class="measurement-item">
<text class="measurement-label">身高</text>
<view class="values-row">
<text class="measurement-value">60.6cm</text>
<text class="measurement-status normal">正常</text>
</view>
<view class="measurement-item">
<text class="measurement-label">体重</text>
<text class="measurement-value">5.8kg</text>
<text class="measurement-status normal">正常</text>
</view>
<view class="measurement-item">
<text class="measurement-label">头围</text>
<text class="measurement-value">39.0cm</text>
<text class="measurement-status normal">正常</text>
</view>
<view class="measurement-item">
<text class="measurement-label">BMI</text>
<text class="measurement-value">16.0</text>
<text class="measurement-status normal">正常</text>
</view>
<view class="labels-row">
<view class="measurement-item">
<text class="measurement-label">身高</text>
<text class="measurement-status normal">正常</text>
</view>
<view class="measurement-item">
<text class="measurement-label">体重</text>
<text class="measurement-status normal">正常</text>
</view>
<view class="measurement-item">
<text class="measurement-label">头围</text>
<text class="measurement-status normal">正常</text>
</view>
<view class="measurement-item">
<text class="measurement-label">BMI</text>
<text class="measurement-status normal">正常</text>
</view>
</view>
</view>
<view class="growth-evaluation">
......@@ -97,42 +101,46 @@
</view>
<view class="measurement-bars">
<view class="bar-item">
<view class="bar-container">
<image class="value-bar" src="/static/shengzhangTestResult/valueBar.png" mode="aspectFit"></image>
<view class="value-triangle-container">
<text class="bar-value">60.6cm 正常</text>
<image class="triangle" src="/static/shengzhangTestResult/triangle.png" mode="aspectFit"></image>
</view>
<view class="bar-info">
<text class="bar-value">60.6cm 正常</text>
<view class="bar-row">
<text class="measurement-label">身高</text>
<image class="value-bar" src="/static/shengzhangTestResult/valueBar.png" mode="aspectFit"></image>
<text class="bar-percentage">超过25%同龄宝宝</text>
</view>
</view>
<view class="bar-item">
<view class="bar-container">
<image class="value-bar" src="/static/shengzhangTestResult/valueBar.png" mode="aspectFit"></image>
<view class="value-triangle-container">
<text class="bar-value">5.75kg 正常</text>
<image class="triangle" src="/static/shengzhangTestResult/triangle.png" mode="aspectFit"></image>
</view>
<view class="bar-info">
<text class="bar-value">5.75kg 正常</text>
<view class="bar-row">
<text class="measurement-label">体重</text>
<image class="value-bar" src="/static/shengzhangTestResult/valueBar.png" mode="aspectFit"></image>
<text class="bar-percentage">超过25%同龄宝宝</text>
</view>
</view>
<view class="bar-item">
<view class="bar-container">
<image class="value-bar" src="/static/shengzhangTestResult/valueBar.png" mode="aspectFit"></image>
<view class="value-triangle-container">
<text class="bar-value">39.0cm 正常</text>
<image class="triangle" src="/static/shengzhangTestResult/triangle.png" mode="aspectFit"></image>
</view>
<view class="bar-info">
<text class="bar-value">39.0cm 正常</text>
<view class="bar-row">
<text class="measurement-label">头围</text>
<image class="value-bar" src="/static/shengzhangTestResult/valueBar.png" mode="aspectFit"></image>
<text class="bar-percentage">超过25%同龄宝宝</text>
</view>
</view>
<view class="bar-item">
<view class="bar-container">
<image class="value-bar" src="/static/shengzhangTestResult/valueBar.png" mode="aspectFit"></image>
<view class="value-triangle-container">
<text class="bar-value">15.0 正常</text>
<image class="triangle" src="/static/shengzhangTestResult/triangle.png" mode="aspectFit"></image>
</view>
<view class="bar-info">
<text class="bar-value">15.0 正常</text>
<view class="bar-row">
<text class="measurement-label">BMI</text>
<image class="value-bar" src="/static/shengzhangTestResult/valueBar.png" mode="aspectFit"></image>
<text class="bar-percentage">超过25%同龄宝宝</text>
</view>
</view>
......@@ -146,16 +154,16 @@
</view>
<view class="curve-tabs">
<view class="curve-tab" :class="{ 'active': activeCurveTab === 'height' }" @click="switchCurveTab('height')">
<image class="tab-icon" :src="activeCurveTab === 'height' ? '/static/shengzhangTestResult/shengaoTab1.png' : '/static/shengzhangTestResult/shengaoTab0.png'" mode="aspectFit"></image>
<text class="tab-text">身高</text>
<image v-if="activeCurveTab === 'height'"class="tab-icon" src="/static/shengzhangTestResult/shengaoTab0.png" mode="aspectFit"></image>
<image v-else class="tab-icon" src="/static/shengzhangTestResult/shengaoTab1.png" mode="aspectFit"></image>
</view>
<view class="curve-tab" :class="{ 'active': activeCurveTab === 'weight' }" @click="switchCurveTab('weight')">
<image class="tab-icon" :src="activeCurveTab === 'weight' ? '/static/shengzhangTestResult/tizhongTab1.png' : '/static/shengzhangTestResult/tizhongTab0.png'" mode="aspectFit"></image>
<text class="tab-text">体重</text>
<image v-if="activeCurveTab === 'weight'" class="tab-icon" src="/static/shengzhangTestResult/tizhongTab0.png" mode="aspectFit"></image>
<image v-else class="tab-icon" src="/static/shengzhangTestResult/tizhongTab1.png" mode="aspectFit"></image>
</view>
<view class="curve-tab" :class="{ 'active': activeCurveTab === 'head' }" @click="switchCurveTab('head')">
<image class="tab-icon" :src="activeCurveTab === 'head' ? '/static/shengzhangTestResult/touweiTab1.png' : '/static/shengzhangTestResult/touweiTab.png'" mode="aspectFit"></image>
<text class="tab-text">头围</text>
<image v-if="activeCurveTab === 'head'" class="tab-icon" src="/static/shengzhangTestResult/touweiTab0.png" mode="aspectFit"></image>
<image v-else class="tab-icon" src="/static/shengzhangTestResult/touweiTab1.png" mode="aspectFit"></image>
</view>
</view>
<view class="graph-legend">
......@@ -176,6 +184,9 @@
<text class="legend-text">宝宝记录</text>
</view>
</view>
<view class="graph-title-y">
<text class="graph-title-text">{{getYAxisLabel()}}</text>
</view>
<view class="graph-container">
<scroll-view class="graph-scroll" scroll-x="true" :scroll-left="scrollLeft" @scroll="onScroll">
<view class="graph-content" :style="{ width: totalWidth + 'px' }">
......@@ -183,16 +194,14 @@
</view>
</scroll-view>
</view>
<view class="curve-tips" @click="showCurveTips">
<text class="tips-icon">?</text>
<text class="tips-text">什么是生长曲线</text>
</view>
</view>
<view class="curve-tips" @click="showCurveTips">
<image class="tips-icon" src="/static/shengzhangTestResult/shengzhangTips.png" mode="aspectFit"></image>
</view>
<!-- 专家咨询按钮 -->
<view class="expert-consult-btn" @click="consultExpert">
<image class="consult-bg" src="/static/shengzhangTestResult/zhuanjiazixunBtn.png" mode="aspectFit"></image>
<text class="consult-text">专家在线咨询</text>
</view>
</view>
</view>
......@@ -209,7 +218,7 @@ const activeCurveTab = ref('height')
// 滑动相关状态
const scrollLeft = ref(0)
const totalWidth = ref(3600) // 36个月 * 100px
const totalWidth = ref(1080) // 36个月 * 10px
......@@ -221,6 +230,12 @@ const curveData = ref([
])
// 生成0-36个月的数据点
/**
* @param {number} startValue - 起始值（0个月时的数值）
* @param {number} endValue - 结束值（36个月时的数值）
* @param {string} type - 数据类型（'height'|'weight'|'head'）
* @returns {Array} 包含36个月数据点的数组
*/
const generateCurveData = (startValue, endValue, type) => {
const data = []
for (let i = 0; i <= 36; i++) {
......@@ -252,12 +267,18 @@ const standardCurves = ref({
})
// 切换导航标签
/**
* @param {string} tab - 要切换的标签名称（'latest'|'history'）
*/
const switchTab = (tab) => {
activeTab.value = tab
console.log('切换到标签:', tab)
}
// 切换生长曲线标签
/**
* @param {string} tab - 要切换的曲线类型（'height'|'weight'|'head'）
*/
const switchCurveTab = (tab) => {
activeCurveTab.value = tab
console.log('切换到曲线标签:', tab)
......@@ -290,6 +311,9 @@ const switchCurveTab = (tab) => {
}
// 获取Y轴标签
/**
* @returns {string} 根据当前曲线类型返回对应的Y轴标签
*/
const getYAxisLabel = () => {
if (activeCurveTab.value === 'height') {
return '身高 (cm)'
......@@ -302,18 +326,24 @@ const getYAxisLabel = () => {
}
// 获取Y轴刻度
/**
* @returns {Array<number>} 根据当前曲线类型返回对应的Y轴刻度数组
*/
const getYTicks = () => {
if (activeCurveTab.value === 'height') {
return [120, 100, 80, 60, 40]
return [40, 50, 60, 70, 80, 90, 100]
} else if (activeCurveTab.value === 'weight') {
return [20, 16, 12, 8, 4, 0]
return [0, 3, 6, 9, 12, 15, 18]
} else if (activeCurveTab.value === 'head') {
return [60, 50, 40, 30]
return [0, 3, 6, 9, 12, 15, 18]
}
return [120, 100, 80, 60, 40]
return [40, 50, 60, 70, 80, 90, 100]
}
// 显示生长曲线提示
/**
* 显示生长曲线说明弹窗
*/
const showCurveTips = () => {
console.log('显示生长曲线提示')
uni.showModal({
......@@ -324,6 +354,9 @@ const showCurveTips = () => {
}
// 专家咨询
/**
* 处理专家咨询按钮点击事件
*/
const consultExpert = () => {
console.log('专家在线咨询')
uni.showToast({
......@@ -333,6 +366,9 @@ const consultExpert = () => {
}
// 首页组件逻辑
/**
* 处理返回按钮点击事件，尝试返回上一页或跳转到首页
*/
const backHandler = () => {
try {
uni.navigateBack({
......@@ -358,6 +394,9 @@ onMounted(() => {
})
// 绘制生长曲线
/**
* 绘制完整的生长曲线图表，包括坐标轴、标准曲线和宝宝记录曲线
*/
const drawGrowthCurve = () => {
const query = uni.createSelectorQuery()
query.select('.curve-canvas').boundingClientRect((rect) => {
......@@ -370,7 +409,7 @@ const drawGrowthCurve = () => {
ctx.clearRect(0, 0, width, height)
// 设置画布边距
const margin = { top: 20, right: 20, bottom: 40, left: 60 }
const margin = { top: 20, right: 20, bottom: 25, left: 30 }
const chartWidth = width - margin.left - margin.right
const chartHeight = height - margin.top - margin.bottom
......@@ -393,18 +432,44 @@ const drawGrowthCurve = () => {
}
// 绘制坐标轴
/**
* @param {Object} ctx - Canvas上下文对象
* @param {number} width - Canvas总宽度
* @param {number} height - Canvas总高度
* @param {Object} margin - 边距对象 {top, right, bottom, left}
* @param {number} chartWidth - 图表区域宽度
* @param {number} chartHeight - 图表区域高度
* @param {string} type - 数据类型（'height'|'weight'|'head'）
*/
const drawAxes = (ctx, width, height, margin, chartWidth, chartHeight, type) => {
console.log('drawAxes', width, height, margin, chartWidth, chartHeight, type);
// 绘制X轴
ctx.beginPath()
ctx.setStrokeStyle('#333')
ctx.setStrokeStyle('#000')
ctx.setLineWidth(2)
ctx.moveTo(margin.left, height - margin.bottom)
ctx.lineTo(width - margin.right, height - margin.bottom)
ctx.stroke()
// 先绘制水平网格线
const yTicks = getYTicks()
yTicks.forEach((tick, index) => {
const y = margin.top + (1 - index / (yTicks.length - 1)) * chartHeight
// 绘制水平网格线
ctx.beginPath()
ctx.setStrokeStyle('#faf2e7')
ctx.setLineWidth(1)
ctx.moveTo(margin.left, y)
ctx.lineTo(width - margin.right, y)
ctx.stroke()
})
// 绘制Y轴
ctx.beginPath()
ctx.moveTo(margin.left, margin.top)
ctx.setStrokeStyle('#000')
ctx.setLineWidth(1)
ctx.moveTo(margin.left, margin.top - 8)
ctx.lineTo(margin.left, height - margin.bottom)
ctx.stroke()
......@@ -414,14 +479,14 @@ const drawAxes = (ctx, width, height, margin, chartWidth, chartHeight, type) =>
ctx.lineTo(width - margin.right - 8, height - margin.bottom - 4)
ctx.lineTo(width - margin.right - 8, height - margin.bottom + 4)
ctx.closePath()
ctx.setFillStyle('#333')
ctx.setFillStyle('#000')
ctx.fill()
// 绘制Y轴箭头
ctx.beginPath()
ctx.moveTo(margin.left, margin.top)
ctx.lineTo(margin.left - 4, margin.top + 8)
ctx.lineTo(margin.left + 4, margin.top + 8)
ctx.moveTo(margin.left, margin.top - 16)
ctx.lineTo(margin.left - 4, margin.top + 8 - 16)
ctx.lineTo(margin.left + 4, margin.top + 8 - 16)
ctx.closePath()
ctx.fill()
......@@ -434,57 +499,64 @@ const drawAxes = (ctx, width, height, margin, chartWidth, chartHeight, type) =>
const x = margin.left + (tick / 36) * chartWidth
const y = height - margin.bottom
// 刻度线
ctx.beginPath()
ctx.setStrokeStyle('#999')
ctx.setLineWidth(1)
ctx.moveTo(x, y)
ctx.lineTo(x, y + 1.5) // 缩短为原来的30%
ctx.stroke()
// ctx.beginPath()
// ctx.setStrokeStyle('#000')
// ctx.setLineWidth(1)
// ctx.moveTo(x, y)
// ctx.lineTo(x, y) // 缩短为原来的30%
// ctx.stroke()
// 刻度标签
ctx.setFillStyle('#666')
ctx.setFillStyle('#000')
ctx.setFontSize(12)
ctx.setTextAlign('center')
ctx.fillText(tick.toString(), x, y + 20)
})
// 绘制Y轴刻度
const yTicks = getYTicks()
// 绘制Y轴刻度和标签
yTicks.forEach((tick, index) => {
const x = margin.left
const y = margin.top + (1 - index / (yTicks.length - 1)) * chartHeight
// 刻度线
ctx.beginPath()
ctx.setStrokeStyle('#999')
ctx.setLineWidth(1)
ctx.moveTo(x, y)
ctx.lineTo(x - 5, y)
ctx.stroke()
// ctx.beginPath()
// ctx.setStrokeStyle('#999')
// ctx.setLineWidth(1)
// ctx.moveTo(x, y)
// ctx.lineTo(x - 5, y)
// ctx.stroke()
// 刻度标签
ctx.setFillStyle('#666')
ctx.setFillStyle('#000')
ctx.setFontSize(12)
ctx.setTextAlign('right')
ctx.fillText(tick.toString(), x - 10, y + 4)
})
// 绘制坐标轴标签
ctx.setFillStyle('#333')
ctx.setFillStyle('#000')
ctx.setFontSize(14)
ctx.setTextAlign('center')
ctx.fillText('月龄', width / 2, height - 10)
ctx.setTextAlign('center')
ctx.setFontSize(14)
const yLabel = getYAxisLabel()
ctx.save()
ctx.translate(20, height / 2)
ctx.rotate(-Math.PI / 2)
ctx.fillText(yLabel, 0, 0)
ctx.restore()
// ctx.setTextAlign('center')
// ctx.setFontSize(14)
// const yLabel = getYAxisLabel()
// ctx.save()
// ctx.translate(20, height / 2)
// // ctx.rotate(-Math.PI / 2)
// ctx.fillText(yLabel, 0, -100)
// ctx.restore()
}
// 绘制标准曲线
/**
* @param {Object} ctx - Canvas上下文对象
* @param {Object} curves - 标准曲线数据对象 {slightlyLow, normal, slightlyHigh}
* @param {Object} margin - 边距对象 {top, right, bottom, left}
* @param {number} chartWidth - 图表区域宽度
* @param {number} chartHeight - 图表区域高度
* @param {string} type - 数据类型（'height'|'weight'|'head'）
*/
const drawStandardCurves = (ctx, curves, margin, chartWidth, chartHeight, type) => {
// 绘制略低曲线 - 黄色
drawCurve(ctx, curves.slightlyLow, margin, chartWidth, chartHeight, type, '#ffeaa7', 2)
......@@ -497,6 +569,16 @@ const drawStandardCurves = (ctx, curves, margin, chartWidth, chartHeight, type)
}
// 绘制单条曲线
/**
* @param {Object} ctx - Canvas上下文对象
* @param {Array} data - 曲线数据点数组，每个元素包含 {month, height/weight/head}
* @param {Object} margin - 边距对象 {top, right, bottom, left}
* @param {number} chartWidth - 图表区域宽度
* @param {number} chartHeight - 图表区域高度
* @param {string} type - 数据类型（'height'|'weight'|'head'）
* @param {string} color - 曲线颜色（十六进制颜色值）
* @param {number} lineWidth - 曲线线宽
*/
const drawCurve = (ctx, data, margin, chartWidth, chartHeight, type, color, lineWidth) => {
ctx.beginPath()
ctx.setStrokeStyle(color)
......@@ -526,11 +608,19 @@ const drawCurve = (ctx, data, margin, chartWidth, chartHeight, type, color, line
}
// 绘制宝宝记录曲线
/**
* @param {Object} ctx - Canvas上下文对象
* @param {Array} data - 宝宝记录数据点数组，每个元素包含 {month, height/weight/head}
* @param {Object} margin - 边距对象 {top, right, bottom, left}
* @param {number} chartWidth - 图表区域宽度
* @param {number} chartHeight - 图表区域高度
* @param {string} type - 数据类型（'height'|'weight'|'head'）
*/
const drawBabyCurve = (ctx, data, margin, chartWidth, chartHeight, type) => {
// 绘制折线
ctx.beginPath()
ctx.setStrokeStyle('#8b4513')
ctx.setLineWidth(3)
ctx.setLineWidth(1)
data.forEach((point, index) => {
const x = margin.left + (point.month / 36) * chartWidth
......@@ -576,15 +666,22 @@ const drawBabyCurve = (ctx, data, margin, chartWidth, chartHeight, type) => {
}
// 获取X轴刻度
const getXTicks = () => {
const ticks = []
for (let i = 0; i <= 36; i++) {
ticks.push(i)
}
return ticks
}
/**
* @returns {Array<number>} 返回0-36个月的X轴刻度数组
*/
// const getXTicks = () => {
// const ticks = []
// for (let i = 0; i <= 36; i++) {
// ticks.push(i)
// }
// return ticks
// }
// 处理滑动事件
/**
* @param {Object} e - 滑动事件对象
* @param {number} e.detail.scrollLeft - 当前滑动位置
*/
const onScroll = (e) => {
scrollLeft.value = e.detail.scrollLeft
}
......@@ -680,19 +777,19 @@ const onScroll = (e) => {
}
}
.tab-decoration {
position: absolute;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
.star {
font-size: 20rpx;
color: #b27c1e;
margin-left: 10rpx;
opacity: 0.6;
}
}
// .tab-decoration {
// position: absolute;
// right: 20rpx;
// top: 50%;
// transform: translateY(-50%);
// .star {
// font-size: 20rpx;
// color: #b27c1e;
// margin-left: 10rpx;
// opacity: 0.6;
// }
// }
}
// 宝宝信息卡片
......@@ -749,35 +846,57 @@ const onScroll = (e) => {
.measurement-summary {
display: flex;
justify-content: space-between;
flex-direction: column;
margin-bottom: 30rpx;
.measurement-item {
.values-row {
display: flex;
flex-direction: column;
align-items: center;
.measurement-label {
font-size: 24rpx;
color: #666;
margin-bottom: 10rpx;
}
justify-content: space-between;
margin-bottom: 15rpx;
.measurement-value {
font-size: 28rpx;
font-size: 32rpx;
color: #333;
font-weight: bold;
margin-bottom: 5rpx;
flex: 1;
text-align: center;
}
}
.measurement-status {
font-size: 22rpx;
padding: 4rpx 12rpx;
border-radius: 10rpx;
.labels-row {
display: flex;
justify-content: space-between;
&.normal {
background-color: #e8f5e8;
.measurement-item {
display: flex;
flex-direction: row;
align-items: center;
flex: 1;
justify-content: center;
.measurement-label {
font-size: 24rpx;
color: #666;
margin-right: 8rpx;
}
.measurement-status {
font-size: 22rpx;
color: #52c41a;
display: flex;
align-items: center;
&.normal {
&::before {
content: "";
width: 16rpx;
height: 16rpx;
background-image: url('/static/shengzhangTestResult/duihaoIcon.png');
background-size: contain;
background-repeat: no-repeat;
margin-right: 6rpx;
}
}
}
}
}
......@@ -795,16 +914,15 @@ const onScroll = (e) => {
// 生长情况卡片
.growth-status-card {
background-color: #fff;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
border-radius: 24rpx;
padding: 50rpx 35rpx 15rpx 35rpx;
margin-top: 40rpx;
// box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
position: relative;
.card-header {
display: flex;
align-items: center;
margin-bottom: 20rpx;
.name-icon,
.status-icon {
......@@ -815,7 +933,7 @@ const onScroll = (e) => {
.card-title {
font-size: 32rpx;
color: #333;
color: #000;
font-weight: bold;
}
}
......@@ -823,7 +941,7 @@ const onScroll = (e) => {
.legend {
display: flex;
justify-content: space-between;
margin-bottom: 30rpx;
margin-top: 46rpx;
.legend-item {
display: flex;
......@@ -836,74 +954,79 @@ const onScroll = (e) => {
margin-right: 8rpx;
&.too-low {
background-color: #ffd6d6;
background-color: #ffede0;
}
&.slightly-low {
background-color: #ffeaa7;
background-color: #fde0a5;
}
&.normal {
background-color: #a8e6cf;
background-color: #89caa2;
}
&.slightly-high {
background-color: #d4a5f5;
background-color: #f3d1e9;
}
&.too-high {
background-color: #ff9ff3;
background-color: #a78dbc;
}
}
.legend-text {
font-size: 22rpx;
color: #666;
color: #000;
}
}
}
.measurement-bars {
margin-top: 26rpx;
.bar-item {
display: flex;
align-items: center;
flex-direction: column;
margin-bottom: 20rpx;
.bar-container {
position: relative;
width: 200rpx;
height: 30rpx;
margin-right: 20rpx;
.value-triangle-container {
display: flex;
flex-direction: column;
align-items: center;
.value-bar {
width: 100%;
height: 100%;
.bar-value {
font-size: 24rpx;
color: #b27c1e;
}
.triangle {
position: absolute;
top: 50%;
left: 60%;
transform: translate(-50%, -50%);
top:8rpx;
width: 20rpx;
height: 20rpx;
}
}
.bar-info {
flex: 1;
.bar-row {
display: flex;
align-items: center;
justify-content: space-between;
.bar-value {
font-size: 26rpx;
color: #333;
font-weight: bold;
display: block;
margin-bottom: 5rpx;
.measurement-label {
font-size: 28rpx;
color: #000;
width: 80rpx;
// margin-top: 3rpx;
}
.value-bar {
flex: 1;
height: 30rpx;
}
.bar-percentage {
font-size: 22rpx;
color: #666;
font-size: 24rpx;
color: #000;
width: 200rpx;
text-align: right;
}
}
}
......@@ -913,10 +1036,10 @@ const onScroll = (e) => {
// 生长曲线卡片
.growth-curve-card {
background-color: #fff;
border-radius: 20rpx;
border-radius: 24rpx;
padding: 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
margin-top: 40rpx;
// box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
position: relative;
.card-header {
......@@ -941,35 +1064,36 @@ const onScroll = (e) => {
.curve-tabs {
display: flex;
justify-content: space-around;
margin-bottom: 30rpx;
// justify-items: center;
width: 466rpx;
height: 141rpx;
margin-bottom: 37rpx;
margin-top: 37rpx;
margin-left: 78rpx;
background-color: #f6f8fa;
border-radius: 70rpx;
.curve-tab {
margin-top: 8rpx;
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx;
border-radius: 15rpx;
transition: all 0.3s ease;
justify-content: center;
width: 132rpx;
height: 131rpx;
border-radius: 50%;
// transition: all 0.3s ease;
// background-color: #ffffff;
// box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
position: relative;
&.active {
background-color: #f0f0f0;
border: 2rpx solid #b27c1e;
.tab-text {
color: #b27c1e;
font-weight: bold;
}
// background-color: #e0e0e0;
// box-shadow: none;
}
.tab-icon {
width: 40rpx;
height: 40rpx;
margin-bottom: 10rpx;
}
.tab-text {
font-size: 24rpx;
color: #666;
width: 100%;
height: 100%;
}
}
}
......@@ -977,46 +1101,53 @@ const onScroll = (e) => {
.graph-legend {
display: flex;
justify-content: space-around;
margin-bottom: 20rpx;
.legend-item {
display: flex;
align-items: center;
.legend-color {
width: 16rpx;
height: 16rpx;
border-radius: 2rpx;
width: 20rpx;
height: 20rpx;
border-radius: 4rpx;
margin-right: 6rpx;
&.slightly-low {
background-color: #ffeaa7; // 黄色
background-color: #fde0a5; // 黄色
}
&.normal {
background-color: #a8e6cf; // 浅绿色
background-color: #89caa2; // 浅绿色
}
&.slightly-high {
background-color: #d4a5f5; // 紫色
background-color: #f3d1e9; // 紫色
}
&.baby-record {
background-color: #8b4513; // 棕色
background-color: #b27c1e; // 棕色
}
}
.legend-text {
font-size: 20rpx;
color: #666;
color: #000;
}
}
}
.graph-title-y{
position: relative;
margin-top: 30rpx;
margin-left: 20rpx;
.graph-title-text{
font-size: 20rpx;
color: #000;
}
}
.graph-container {
.graph-container {
position: relative;
height: 400rpx;
margin-bottom: 20rpx;
background-color: #fff;
border-radius: 10rpx;
overflow: hidden;
......@@ -1038,32 +1169,23 @@ const onScroll = (e) => {
}
}
.curve-tips {
}
.curve-tips {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20rpx;
.tips-icon {
width: 24rpx;
height: 24rpx;
background-color: #b27c1e;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16rpx;
margin-right: 10rpx;
}
.tips-text {
font-size: 24rpx;
color: #666;
margin-top: 60rpx;
margin-bottom: 60rpx;
width: 100%;
height: 24rpx;
.tips-icon{
width: 198rpx;
height: 100%;
}
}
}
// 专家咨询按钮
.expert-consult-btn {
position: relative;
......@@ -1072,7 +1194,6 @@ const onScroll = (e) => {
display: flex;
align-items: center;
justify-content: center;
margin-top: 40rpx;
.consult-bg {
position: absolute;
......@@ -1080,14 +1201,6 @@ const onScroll = (e) => {
height: 100%;
z-index: 1;
}
.consult-text {
position: relative;
z-index: 2;
font-size: 32rpx;
color: #fff;
font-weight: bold;
}
}
}
</style>
\ No newline at end of file
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