feat(detailedReport): 详细报告身体指标卡片静态实现
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
17792275749
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
01bbcdecaf
commit
1f5cc2c743
@@ -307,6 +307,91 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 指标卡片 */
|
||||||
|
.metricCard {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
|
.metricCardTitle {
|
||||||
|
width: 100%;
|
||||||
|
height: 96rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 32rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: 2rpx solid #EAECF1;
|
||||||
|
|
||||||
|
.metricCardBar {
|
||||||
|
width: 6rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
background-color: #1385FA;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metricCardTitleText {
|
||||||
|
color: #252535;
|
||||||
|
height: 32rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
line-height: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.metricCardList {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 32rpx 40rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.metricCardRow {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 2rpx dashed #EAECF1;
|
||||||
|
|
||||||
|
.metricCardLabel {
|
||||||
|
flex: 1;
|
||||||
|
color: #77849E;
|
||||||
|
height: 28rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metricCardValue {
|
||||||
|
color: #252535;
|
||||||
|
height: 28rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 28rpx;
|
||||||
|
margin-right: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metricCardStatus {
|
||||||
|
height: 40rpx;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metricCardStatus--normal {
|
||||||
|
background-color: #2AC79F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metricCardStatus--low {
|
||||||
|
background-color: #1385FA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metricCardStatus--high {
|
||||||
|
background-color: #F24439;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,96 +8,7 @@ Page({
|
|||||||
date: '2026-07-23 16:32',
|
date: '2026-07-23 16:32',
|
||||||
bmi: 'BMI正常',
|
bmi: 'BMI正常',
|
||||||
change: '较上次-0.3kg'
|
change: '较上次-0.3kg'
|
||||||
},
|
|
||||||
basic: {
|
|
||||||
rows: [
|
|
||||||
[
|
|
||||||
{ label: '体重', value: '172', unit: 'kg', tag: '' },
|
|
||||||
{ label: 'BMI', value: '22.4', unit: '', tag: '标准' },
|
|
||||||
{ label: '体脂率', value: '22.1', unit: '%', tag: '' }
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{ label: '身体得分', value: '73', unit: '分', tag: '' },
|
|
||||||
{ label: '健康评估', value: '一般', unit: '', tag: '' }
|
|
||||||
]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
sections: [
|
|
||||||
{
|
|
||||||
title: '身体成分',
|
|
||||||
items: [
|
|
||||||
{ label: '水分率', value: '50%', status: '不足', statusClass: 'low' },
|
|
||||||
{ label: '水分量', value: '30.6kg', status: '标准', statusClass: 'normal' },
|
|
||||||
{ label: '蛋白质率', value: '10%', status: '超量', statusClass: 'high' },
|
|
||||||
{ label: '蛋白质量', value: '8.2kg', status: '标准', statusClass: 'normal' },
|
|
||||||
{ label: '脂肪量', value: '14.3kg', status: '标准', statusClass: 'normal' },
|
|
||||||
{ label: '肌肉量', value: '38.8kg', status: '标准', statusClass: 'normal' },
|
|
||||||
{ label: '肌肉率', value: '69.2%', status: '标准', statusClass: 'normal' },
|
|
||||||
{ label: '骨骼肌量', value: '22.5kg', status: '标准', statusClass: 'normal' },
|
|
||||||
{ label: '骨骼肌率', value: '40%', status: '标准', statusClass: 'normal' },
|
|
||||||
{ label: '骨量', value: '2.3kg', status: '标准', statusClass: 'normal' }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '脂肪分析',
|
|
||||||
items: [
|
|
||||||
{ label: '内脏脂肪', value: '6', status: '不足', statusClass: 'low' },
|
|
||||||
{ label: '皮下脂肪率', value: '22.5%', status: '标准', statusClass: 'normal' },
|
|
||||||
{ label: '皮下脂肪量', value: '12.6kg', status: '标准', statusClass: 'normal' }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '体态管理',
|
|
||||||
items: [
|
|
||||||
{ label: '理想体重', value: '62.1kg', status: '标准', statusClass: 'normal' },
|
|
||||||
{ label: '去脂体重', value: '41.7kg', status: '标准', statusClass: 'normal' },
|
|
||||||
{ label: '身体年龄', value: '20岁', status: '标准', statusClass: 'normal' },
|
|
||||||
{ label: '身体类型', value: '缺乏运动型', status: '标准', statusClass: 'normal' },
|
|
||||||
{ label: '推测腰臀比', value: '0.8%', status: '标准', statusClass: 'normal' }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '体重管控',
|
|
||||||
items: [
|
|
||||||
{ label: '控制体重', value: '3.9kg', status: '标准', statusClass: 'normal' },
|
|
||||||
{ label: '脂肪控制量', value: '-0.5kg', status: '标准', statusClass: 'normal' },
|
|
||||||
{ label: '肌肉控制量', value: '4.4kg', status: '标准', statusClass: 'normal' }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '细胞液分析',
|
|
||||||
items: [
|
|
||||||
{ label: '细胞内水量', value: '19.1kg', status: '标准', statusClass: 'normal' },
|
|
||||||
{ label: '细胞外水量', value: '11.4kg', status: '标准', statusClass: 'normal' }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '进阶成分',
|
|
||||||
items: [
|
|
||||||
{ label: '无机盐量', value: '2.9kg', status: '不足', statusClass: 'low' },
|
|
||||||
{ label: '身体细胞量', value: '27.4kg', status: '标准', statusClass: 'normal' },
|
|
||||||
{ label: '骨骼肌质量指数', value: '7.2kg/m²', status: '标准', statusClass: 'normal' }
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
],
|
|
||||||
limbSections: [
|
|
||||||
{
|
|
||||||
title: '躯干/四肢脂肪',
|
|
||||||
rows: [
|
|
||||||
[{ label: '左臂', value: '2.3kg丨80.9%' }, { label: '右臂', value: '2.3kg丨80.9%' }],
|
|
||||||
[{ label: '左腿', value: '6.3kg丨100%' }, { label: '右腿', value: '6.3kg丨100%' }],
|
|
||||||
[{ label: '躯干', value: '18.4kg丨97.8%' }]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '躯干/四肢肌肉',
|
|
||||||
rows: [
|
|
||||||
[{ label: '左臂', value: '2.3kg丨80.9%' }, { label: '右臂', value: '2.3kg丨80.9%' }],
|
|
||||||
[{ label: '左腿', value: '6.3kg丨100%' }, { label: '右腿', value: '6.3kg丨100%' }],
|
|
||||||
[{ label: '躯干', value: '18.4kg丨97.8%' }]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 滚动时导航栏背景渐显
|
// 滚动时导航栏背景渐显
|
||||||
|
|||||||
@@ -102,6 +102,196 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 身体成分 -->
|
||||||
|
<view class="metricCard">
|
||||||
|
<view class="metricCardTitle">
|
||||||
|
<view class="metricCardBar"></view>
|
||||||
|
<view class="metricCardTitleText">身体成分</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardList">
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">水分率</view>
|
||||||
|
<view class="metricCardValue">50%</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--low">不足</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">水分量</view>
|
||||||
|
<view class="metricCardValue">30.6kg</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">蛋白质率</view>
|
||||||
|
<view class="metricCardValue">10%</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--high">超量</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">蛋白质量</view>
|
||||||
|
<view class="metricCardValue">8.2kg</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">脂肪量</view>
|
||||||
|
<view class="metricCardValue">14.3kg</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">肌肉量</view>
|
||||||
|
<view class="metricCardValue">38.8kg</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">肌肉率</view>
|
||||||
|
<view class="metricCardValue">69.2%</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">骨骼肌量</view>
|
||||||
|
<view class="metricCardValue">22.5kg</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">骨骼肌率</view>
|
||||||
|
<view class="metricCardValue">40%</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">骨量</view>
|
||||||
|
<view class="metricCardValue">2.3kg</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 脂肪分析 -->
|
||||||
|
<view class="metricCard">
|
||||||
|
<view class="metricCardTitle">
|
||||||
|
<view class="metricCardBar"></view>
|
||||||
|
<view class="metricCardTitleText">脂肪分析</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardList">
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">内脏脂肪</view>
|
||||||
|
<view class="metricCardValue">6</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--low">不足</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">皮下脂肪率</view>
|
||||||
|
<view class="metricCardValue">22.5%</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">皮下脂肪量</view>
|
||||||
|
<view class="metricCardValue">12.6kg</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 体态管理 -->
|
||||||
|
<view class="metricCard">
|
||||||
|
<view class="metricCardTitle">
|
||||||
|
<view class="metricCardBar"></view>
|
||||||
|
<view class="metricCardTitleText">体态管理</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardList">
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">理想体重</view>
|
||||||
|
<view class="metricCardValue">62.1kg</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">去脂体重</view>
|
||||||
|
<view class="metricCardValue">41.7kg</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">身体年龄</view>
|
||||||
|
<view class="metricCardValue">20岁</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">身体类型</view>
|
||||||
|
<view class="metricCardValue">缺乏运动型</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">推测腰臀比</view>
|
||||||
|
<view class="metricCardValue">0.8%</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 体重管控 -->
|
||||||
|
<view class="metricCard">
|
||||||
|
<view class="metricCardTitle">
|
||||||
|
<view class="metricCardBar"></view>
|
||||||
|
<view class="metricCardTitleText">体重管控</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardList">
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">控制体重</view>
|
||||||
|
<view class="metricCardValue">3.9kg</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">脂肪控制量</view>
|
||||||
|
<view class="metricCardValue">-0.5kg</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">肌肉控制量</view>
|
||||||
|
<view class="metricCardValue">4.4kg</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 细胞液分析 -->
|
||||||
|
<view class="metricCard">
|
||||||
|
<view class="metricCardTitle">
|
||||||
|
<view class="metricCardBar"></view>
|
||||||
|
<view class="metricCardTitleText">细胞液分析</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardList">
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">细胞内水量</view>
|
||||||
|
<view class="metricCardValue">19.1kg</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">细胞外水量</view>
|
||||||
|
<view class="metricCardValue">11.4kg</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 进阶成分 -->
|
||||||
|
<view class="metricCard">
|
||||||
|
<view class="metricCardTitle">
|
||||||
|
<view class="metricCardBar"></view>
|
||||||
|
<view class="metricCardTitleText">进阶成分</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardList">
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">无机盐量</view>
|
||||||
|
<view class="metricCardValue">2.9kg</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--low">不足</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">身体细胞量</view>
|
||||||
|
<view class="metricCardValue">27.4kg</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
<view class="metricCardRow">
|
||||||
|
<view class="metricCardLabel">骨骼肌质量指数</view>
|
||||||
|
<view class="metricCardValue">7.2kg/m²</view>
|
||||||
|
<view class="metricCardStatus metricCardStatus--normal">标准</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|||||||
Reference in New Issue
Block a user