yuchunlei/bodyWeight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(detailedReport): 详细报告身体指标卡片静态实现

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
17792275749
2026-08-20 10:18:33 +08:00
co-authored by Claude Opus 4.7
parent 01bbcdecaf
commit 1f5cc2c743
3 changed files with 276 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/detailedReport/detailedReport.less
+85
View File
@@ -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;
}
}
}
}
}
}
}
miniprogram/pages/detailedReport/detailedReport.ts
+1 -90
View File
@@ -8,96 +8,7 @@ Page({
date: '2026-07-23 16:32',
bmi: 'BMI正常',
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%' }]
]
}
]
}
},
// 滚动时导航栏背景渐显
miniprogram/pages/detailedReport/detailedReport.wxml
+190
View File
@@ -102,6 +102,196 @@
</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>
</scroll-view>