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
f13edf31b7
commit
92b395b8bd
@@ -1,10 +1,11 @@
|
|||||||
{
|
{
|
||||||
"pages": [
|
"pages": [
|
||||||
"pages/home/home",
|
"pages/detailedReport/detailedReport",
|
||||||
"pages/login/login",
|
"pages/login/login",
|
||||||
"pages/supplementPersonal/supplementPersonal",
|
"pages/supplementPersonal/supplementPersonal",
|
||||||
"pages/connectedDevice/connectedDevice",
|
"pages/connectedDevice/connectedDevice",
|
||||||
"pages/connectedWifi/connectedWifi",
|
"pages/connectedWifi/connectedWifi",
|
||||||
|
"pages/home/home",
|
||||||
"pages/equipment/equipment",
|
"pages/equipment/equipment",
|
||||||
"pages/userManagement/userManagement",
|
"pages/userManagement/userManagement",
|
||||||
"pages/addUser/addUser",
|
"pages/addUser/addUser",
|
||||||
@@ -12,8 +13,7 @@
|
|||||||
"pages/my/my",
|
"pages/my/my",
|
||||||
"pages/personalInformation/personalInformation",
|
"pages/personalInformation/personalInformation",
|
||||||
"pages/helpCenter/helpCenter",
|
"pages/helpCenter/helpCenter",
|
||||||
"pages/questionDetails/questionDetails",
|
"pages/questionDetails/questionDetails"
|
||||||
"pages/detailedReport/detailedReport"
|
|
||||||
],
|
],
|
||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"empty-data": "/components/emptyData/emptyData"
|
"empty-data": "/components/emptyData/emptyData"
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 999 B |
Binary file not shown.
|
After Width: | Height: | Size: 709 B |
Binary file not shown.
|
After Width: | Height: | Size: 641 B |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 732 B |
Binary file not shown.
|
After Width: | Height: | Size: 327 B |
Binary file not shown.
|
After Width: | Height: | Size: 481 B |
@@ -1,274 +1,341 @@
|
|||||||
.detailedReport {
|
.detailedReport {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
//padding: 24rpx 32rpx;
|
|
||||||
//box-sizing: border-box;
|
|
||||||
//background-color: #F5F7FB;
|
|
||||||
|
|
||||||
.scrollViewContent {
|
.scrollViewContent {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 24rpx 32rpx;
|
position: relative;
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
/* 顶部头部 */
|
.bg {
|
||||||
.header {
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 360rpx;
|
height: 440rpx;
|
||||||
border-radius: 24rpx;
|
}
|
||||||
background: linear-gradient(135deg, #C0E0FD 0%, #E2E9F9 100%);
|
|
||||||
display: flex;
|
.detailedReport-container {
|
||||||
flex-direction: column;
|
width: 100%;
|
||||||
justify-content: center;
|
padding-top: 190rpx;
|
||||||
padding: 0 40rpx;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin-bottom: 24rpx;
|
|
||||||
|
|
||||||
.header-slogan {
|
.title {
|
||||||
margin-bottom: 24rpx;
|
width: 100%;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
.slogan-title {
|
.title_1 {
|
||||||
color: #1A3F68;
|
color: #1A3F68;
|
||||||
height: 32rpx;
|
height: 32rpx;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
|
font-weight: bolder;
|
||||||
line-height: 32rpx;
|
line-height: 32rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slogan-sub {
|
.title_2 {
|
||||||
color: #446D99;
|
color: #446D99;
|
||||||
height: 26rpx;
|
height: 26rpx;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
|
font-weight: bolder;
|
||||||
line-height: 26rpx;
|
line-height: 26rpx;
|
||||||
margin-top: 12rpx;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-date {
|
/* 顶部头部 */
|
||||||
color: #FFFFFF;
|
.header {
|
||||||
height: 26rpx;
|
width: 100%;
|
||||||
font-size: 26rpx;
|
height: 280rpx;
|
||||||
line-height: 26rpx;
|
border-radius: 32rpx;
|
||||||
}
|
box-shadow: 0 16rpx 32rpx 0 rgba(19, 133, 250, 0.16);
|
||||||
|
background: linear-gradient(90deg, #1385FA 0%, #0B6FD4 100%);
|
||||||
.header-weight {
|
padding: 45rpx;
|
||||||
display: flex;
|
box-sizing: border-box;
|
||||||
align-items: flex-end;
|
|
||||||
margin-top: 24rpx;
|
|
||||||
|
|
||||||
.weight-num {
|
|
||||||
color: #FFFFFF;
|
|
||||||
height: 120rpx;
|
|
||||||
font-size: 120rpx;
|
|
||||||
line-height: 120rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weight-unit {
|
|
||||||
color: #FFFFFF;
|
|
||||||
height: 28rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
line-height: 28rpx;
|
|
||||||
margin: 0 0 24rpx 12rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-info {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 16rpx;
|
|
||||||
|
|
||||||
.header-bmi {
|
|
||||||
color: #FFFFFF;
|
|
||||||
height: 22rpx;
|
|
||||||
font-size: 22rpx;
|
|
||||||
line-height: 22rpx;
|
|
||||||
margin-right: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-change {
|
|
||||||
color: #FFFFFF;
|
|
||||||
height: 22rpx;
|
|
||||||
font-size: 22rpx;
|
|
||||||
line-height: 22rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 卡片 */
|
|
||||||
.card {
|
|
||||||
width: 100%;
|
|
||||||
padding: 32rpx;
|
|
||||||
border-radius: 24rpx;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-bottom: 24rpx;
|
|
||||||
|
|
||||||
.card-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 24rpx;
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
.title-bar {
|
.header-top {
|
||||||
width: 6rpx;
|
width: 100%;
|
||||||
height: 20rpx;
|
height: 38rpx;
|
||||||
border-radius: 4rpx;
|
display: flex;
|
||||||
background-color: #1385FA;
|
flex-wrap: nowrap;
|
||||||
margin-right: 16rpx;
|
align-items: center;
|
||||||
}
|
margin-bottom: 50rpx;
|
||||||
|
|
||||||
.title-text {
|
> view:nth-of-type(1) {
|
||||||
color: #252535;
|
width: 38rpx;
|
||||||
height: 32rpx;
|
height: 38rpx;
|
||||||
font-size: 32rpx;
|
display: flex;
|
||||||
line-height: 32rpx;
|
align-items: center;
|
||||||
}
|
margin-right: 16rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 基础指标 2x2 */
|
> view:nth-of-type(2) {
|
||||||
.basic-grid {
|
color: #FFFFFF;
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.basic-item {
|
|
||||||
width: 50%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 24rpx 0;
|
|
||||||
|
|
||||||
.basic-label {
|
|
||||||
color: #808080;
|
|
||||||
height: 26rpx;
|
height: 26rpx;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
line-height: 26rpx;
|
line-height: 26rpx;
|
||||||
margin-bottom: 16rpx;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 120rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: end;
|
||||||
|
|
||||||
|
.header-weight {
|
||||||
|
height: 120rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: end;
|
||||||
|
|
||||||
|
.weight-num1 {
|
||||||
|
color: #FFFFFF;
|
||||||
|
height: 120rpx;
|
||||||
|
font-size: 120rpx;
|
||||||
|
line-height: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weight-num2 {
|
||||||
|
color: #FFFFFF;
|
||||||
|
height: 68rpx;
|
||||||
|
font-size: 56rpx;
|
||||||
|
line-height: 68rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weight-unit {
|
||||||
|
color: #FFFFFF;
|
||||||
|
height: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.basic-value-row {
|
.header-info {
|
||||||
|
width: 200rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
flex-wrap: wrap;
|
||||||
|
justify-content: right;
|
||||||
|
|
||||||
.basic-value {
|
.header-bmi {
|
||||||
color: #252535;
|
|
||||||
height: 48rpx;
|
|
||||||
font-size: 48rpx;
|
|
||||||
line-height: 48rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basic-unit {
|
|
||||||
color: #252535;
|
|
||||||
height: 26rpx;
|
|
||||||
font-size: 26rpx;
|
|
||||||
line-height: 26rpx;
|
|
||||||
margin: 0 0 6rpx 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basic-tag {
|
|
||||||
height: 30rpx;
|
|
||||||
padding: 0 10rpx;
|
|
||||||
font-size: 18rpx;
|
|
||||||
line-height: 30rpx;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
background-color: #2AC79F;
|
height: 48rpx;
|
||||||
margin: 0 0 6rpx 12rpx;
|
font-size: 22rpx;
|
||||||
|
line-height: 48rpx;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
border: 2rpx solid rgba(255, 255, 255, 0.20);
|
||||||
|
background-color: rgba(255, 255, 255, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-change {
|
||||||
|
color: #FFFFFF;
|
||||||
|
height: 48rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
line-height: 48rpx;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border: 2rpx solid rgba(255, 255, 255, 0.20);
|
||||||
|
background-color: rgba(255, 255, 255, 0.12);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* BMI 刻度 */
|
/* 卡片 */
|
||||||
.bmi-scale {
|
.card {
|
||||||
margin-top: 24rpx;
|
width: 100%;
|
||||||
|
padding: 32rpx;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
.scale-track {
|
.card-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 20rpx;
|
align-items: center;
|
||||||
border-radius: 6rpx;
|
margin-bottom: 24rpx;
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.scale-block {
|
.title-bar {
|
||||||
flex: 1;
|
width: 6rpx;
|
||||||
}
|
height: 20rpx;
|
||||||
|
border-radius: 4rpx;
|
||||||
.scale-block--low {
|
|
||||||
background-color: #1385FA;
|
background-color: #1385FA;
|
||||||
|
margin-right: 16rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scale-block--normal {
|
.title-text {
|
||||||
background-color: #2AC79F;
|
color: #252535;
|
||||||
}
|
height: 32rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
.scale-block--over {
|
line-height: 32rpx;
|
||||||
background-color: #FFA151;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scale-block--obese {
|
|
||||||
background-color: #F24439;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.scale-row {
|
/* 基础指标 3 列 2 行 */
|
||||||
display: flex;
|
.basic-grid {
|
||||||
margin-top: 16rpx;
|
.basic-row {
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 2rpx solid #EAECF1;
|
||||||
|
|
||||||
> view {
|
&:last-of-type {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.basic-cell {
|
||||||
|
flex: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 24rpx 0;
|
||||||
|
border-right: 2rpx solid #EAECF1;
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.basic-label {
|
||||||
|
color: #808080;
|
||||||
|
height: 26rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 26rpx;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.basic-value-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
.basic-value {
|
||||||
|
color: #252535;
|
||||||
|
height: 48rpx;
|
||||||
|
font-size: 48rpx;
|
||||||
|
line-height: 48rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.basic-unit {
|
||||||
|
color: #252535;
|
||||||
|
height: 26rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 26rpx;
|
||||||
|
margin: 0 0 6rpx 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.basic-tag {
|
||||||
|
height: 30rpx;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
font-size: 18rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background-color: #2AC79F;
|
||||||
|
margin: 0 0 6rpx 12rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* BMI 刻度 */
|
||||||
|
.bmi-scale {
|
||||||
|
margin-top: 24rpx;
|
||||||
|
|
||||||
|
.scale-track {
|
||||||
|
display: flex;
|
||||||
|
height: 20rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.scale-block {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scale-block--low {
|
||||||
|
background-color: #1385FA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scale-block--normal {
|
||||||
|
background-color: #2AC79F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scale-block--over {
|
||||||
|
background-color: #FFA151;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scale-block--obese {
|
||||||
|
background-color: #F24439;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scale-row {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
|
||||||
|
> view {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
color: #77849E;
|
||||||
|
height: 24rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scale-row--range {
|
||||||
|
margin-top: 12rpx;
|
||||||
|
|
||||||
|
> view {
|
||||||
|
color: #B6B6B6;
|
||||||
|
height: 20rpx;
|
||||||
|
font-size: 20rpx;
|
||||||
|
line-height: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 指标行 */
|
||||||
|
.metric-row {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
|
||||||
|
.metric-label {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: center;
|
|
||||||
color: #77849E;
|
color: #77849E;
|
||||||
|
height: 28rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-value {
|
||||||
|
color: #252535;
|
||||||
|
height: 28rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 28rpx;
|
||||||
|
margin-right: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-status {
|
||||||
height: 24rpx;
|
height: 24rpx;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
line-height: 24rpx;
|
line-height: 24rpx;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.scale-row--range {
|
.metric-status--normal {
|
||||||
margin-top: 12rpx;
|
color: #2AC79F;
|
||||||
|
|
||||||
> view {
|
|
||||||
color: #B6B6B6;
|
|
||||||
height: 20rpx;
|
|
||||||
font-size: 20rpx;
|
|
||||||
line-height: 20rpx;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 指标行 */
|
.metric-status--low {
|
||||||
.metric-row {
|
color: #1385FA;
|
||||||
width: 100%;
|
}
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 20rpx 0;
|
|
||||||
|
|
||||||
.metric-label {
|
.metric-status--high {
|
||||||
flex: 1;
|
color: #F24439;
|
||||||
color: #77849E;
|
}
|
||||||
height: 28rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
line-height: 28rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-value {
|
|
||||||
color: #252535;
|
|
||||||
height: 28rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
line-height: 28rpx;
|
|
||||||
margin-right: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-status {
|
|
||||||
height: 24rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
line-height: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-status--normal {
|
|
||||||
color: #2AC79F;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-status--low {
|
|
||||||
color: #1385FA;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-status--high {
|
|
||||||
color: #F24439;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,12 +11,19 @@ Page({
|
|||||||
bmi: 'BMI正常',
|
bmi: 'BMI正常',
|
||||||
change: '较上次-0.3kg'
|
change: '较上次-0.3kg'
|
||||||
},
|
},
|
||||||
basic: [
|
basic: {
|
||||||
{ label: '身高', value: '172', unit: 'cm', tag: '' },
|
rows: [
|
||||||
{ label: 'BMI', value: '22.4', unit: '', tag: '标准' },
|
[
|
||||||
{ label: '身体得分', value: '73', unit: '分', tag: '一般' },
|
{ label: '身高', value: '172', unit: 'cm', tag: '' },
|
||||||
{ label: '体脂率', value: '22.1', unit: '%', tag: '' }
|
{ label: 'BMI', value: '22.4', unit: '', tag: '标准' },
|
||||||
],
|
{ label: '体脂率', value: '22.1', unit: '%', tag: '' }
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{ label: '身体得分', value: '73', unit: '分', tag: '' },
|
||||||
|
{ label: '健康评估', value: '一般', unit: '', tag: '' }
|
||||||
|
]
|
||||||
|
]
|
||||||
|
},
|
||||||
sections: [
|
sections: [
|
||||||
{
|
{
|
||||||
title: '身体成分',
|
title: '身体成分',
|
||||||
|
|||||||
@@ -3,96 +3,114 @@
|
|||||||
<view class="detailedReport">
|
<view class="detailedReport">
|
||||||
<scroll-view class="scrollView" scroll-y bindscroll="onScroll">
|
<scroll-view class="scrollView" scroll-y bindscroll="onScroll">
|
||||||
<view class="scrollViewContent">
|
<view class="scrollViewContent">
|
||||||
|
<view class="bg">
|
||||||
<!-- 顶部头部 -->
|
<image src="/images/home/bg.jpg" mode="aspectFit" />
|
||||||
<view class="header">
|
|
||||||
<view class="header-slogan">
|
|
||||||
<view class="slogan-title">设备智联 · 掌握健康</view>
|
|
||||||
<view class="slogan-sub">留存测量记录，见证身形变化</view>
|
|
||||||
</view>
|
|
||||||
<view class="header-date">{{ header.date }}</view>
|
|
||||||
<view class="header-weight">
|
|
||||||
<view class="weight-num">{{ header.weight }}</view>
|
|
||||||
<view class="weight-unit">{{ header.unit }}</view>
|
|
||||||
</view>
|
|
||||||
<view class="header-info">
|
|
||||||
<view class="header-bmi">{{ header.bmi }}</view>
|
|
||||||
<view class="header-change">{{ header.change }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 基础指标 -->
|
<view class="detailedReport-container page-container">
|
||||||
<view class="card">
|
<view class="title">
|
||||||
<view class="card-title">
|
<view class="title_1">设备智联 · 掌握健康</view>
|
||||||
<view class="title-bar"></view>
|
<view class="title_2">留存测量记录，见证身形变化</view>
|
||||||
<view class="title-text">基础指标</view>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="basic-grid">
|
|
||||||
<block wx:for="{{ basic }}" wx:key="label">
|
<!-- 顶部头部 -->
|
||||||
<view class="basic-item">
|
<view class="header">
|
||||||
<view class="basic-label">{{ item.label }}</view>
|
<view class="header-top">
|
||||||
<view class="basic-value-row">
|
<view>
|
||||||
<view class="basic-value">{{ item.value }}</view>
|
<image src="/images/detailedReport/calendar.png" mode="aspectFit" />
|
||||||
<view class="basic-unit">{{ item.unit }}</view>
|
</view>
|
||||||
<view class="basic-tag" wx:if="{{ item.tag }}">{{ item.tag }}</view>
|
<view>{{ header.date }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="header-bottom">
|
||||||
|
<view class="header-weight">
|
||||||
|
<view class="weight-num1">88</view>
|
||||||
|
<view class="weight-num2">.88</view>
|
||||||
|
<view class="weight-unit">kg</view>
|
||||||
|
</view>
|
||||||
|
<view class="header-info">
|
||||||
|
<view class="header-bmi">{{ header.bmi }}</view>
|
||||||
|
<view class="header-change">{{ header.change }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 基础指标 -->
|
||||||
|
<view class="card">
|
||||||
|
<view class="card-title">
|
||||||
|
<view class="title-bar"></view>
|
||||||
|
<view class="title-text">基础指标</view>
|
||||||
|
</view>
|
||||||
|
<view class="basic-grid">
|
||||||
|
<block wx:for="{{ basic.rows }}" wx:key="index" wx:for-item="row">
|
||||||
|
<view class="basic-row">
|
||||||
|
<block wx:for="{{ row }}" wx:key="label" wx:for-item="cell">
|
||||||
|
<view class="basic-cell">
|
||||||
|
<view class="basic-label">{{ cell.label }}</view>
|
||||||
|
<view class="basic-value-row">
|
||||||
|
<view class="basic-value">{{ cell.value }}</view>
|
||||||
|
<view class="basic-unit" wx:if="{{ cell.unit }}">{{ cell.unit }}</view>
|
||||||
|
<view class="basic-tag" wx:if="{{ cell.tag }}">{{ cell.tag }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
</view>
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view class="bmi-scale">
|
||||||
|
<view class="scale-track">
|
||||||
|
<view class="scale-block scale-block--low"></view>
|
||||||
|
<view class="scale-block scale-block--normal"></view>
|
||||||
|
<view class="scale-block scale-block--over"></view>
|
||||||
|
<view class="scale-block scale-block--obese"></view>
|
||||||
|
</view>
|
||||||
|
<view class="scale-row">
|
||||||
|
<view>消瘦</view>
|
||||||
|
<view>正常</view>
|
||||||
|
<view>超重</view>
|
||||||
|
<view>肥胖</view>
|
||||||
|
</view>
|
||||||
|
<view class="scale-row scale-row--range">
|
||||||
|
<view>BMI<18.5</view>
|
||||||
|
<view>18.5≤BMI<24</view>
|
||||||
|
<view>24≤BMI<28</view>
|
||||||
|
<view>BMI≥28</view>
|
||||||
</view>
|
</view>
|
||||||
</block>
|
|
||||||
</view>
|
|
||||||
<view class="bmi-scale">
|
|
||||||
<view class="scale-track">
|
|
||||||
<view class="scale-block scale-block--low"></view>
|
|
||||||
<view class="scale-block scale-block--normal"></view>
|
|
||||||
<view class="scale-block scale-block--over"></view>
|
|
||||||
<view class="scale-block scale-block--obese"></view>
|
|
||||||
</view>
|
|
||||||
<view class="scale-row">
|
|
||||||
<view>消瘦</view>
|
|
||||||
<view>正常</view>
|
|
||||||
<view>超重</view>
|
|
||||||
<view>肥胖</view>
|
|
||||||
</view>
|
|
||||||
<view class="scale-row scale-row--range">
|
|
||||||
<view>BMI<18.5</view>
|
|
||||||
<view>18.5≤BMI<24</view>
|
|
||||||
<view>24≤BMI<28</view>
|
|
||||||
<view>BMI≥28</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 指标卡片 -->
|
||||||
|
<block wx:for="{{ sections }}" wx:key="title" wx:for-item="section">
|
||||||
|
<view class="card">
|
||||||
|
<view class="card-title">
|
||||||
|
<view class="title-bar"></view>
|
||||||
|
<view class="title-text">{{ section.title }}</view>
|
||||||
|
</view>
|
||||||
|
<block wx:for="{{ section.items }}" wx:key="label" wx:for-item="item">
|
||||||
|
<view class="metric-row">
|
||||||
|
<view class="metric-label">{{ item.label }}</view>
|
||||||
|
<view class="metric-value">{{ item.value }}</view>
|
||||||
|
<view class="metric-status metric-status--{{ item.statusClass }}">{{ item.status }}</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<!-- 躯干/四肢 -->
|
||||||
|
<block wx:for="{{ limbSections }}" wx:key="title" wx:for-item="section">
|
||||||
|
<view class="card">
|
||||||
|
<view class="card-title">
|
||||||
|
<view class="title-bar"></view>
|
||||||
|
<view class="title-text">{{ section.title }}</view>
|
||||||
|
</view>
|
||||||
|
<block wx:for="{{ section.items }}" wx:key="label" wx:for-item="item">
|
||||||
|
<view class="metric-row">
|
||||||
|
<view class="metric-label">{{ item.label }}</view>
|
||||||
|
<view class="metric-value">{{ item.value }}</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 指标卡片 -->
|
|
||||||
<block wx:for="{{ sections }}" wx:key="title" wx:for-item="section">
|
|
||||||
<view class="card">
|
|
||||||
<view class="card-title">
|
|
||||||
<view class="title-bar"></view>
|
|
||||||
<view class="title-text">{{ section.title }}</view>
|
|
||||||
</view>
|
|
||||||
<block wx:for="{{ section.items }}" wx:key="label" wx:for-item="item">
|
|
||||||
<view class="metric-row">
|
|
||||||
<view class="metric-label">{{ item.label }}</view>
|
|
||||||
<view class="metric-value">{{ item.value }}</view>
|
|
||||||
<view class="metric-status metric-status--{{ item.statusClass }}">{{ item.status }}</view>
|
|
||||||
</view>
|
|
||||||
</block>
|
|
||||||
</view>
|
|
||||||
</block>
|
|
||||||
|
|
||||||
<!-- 躯干/四肢 -->
|
|
||||||
<block wx:for="{{ limbSections }}" wx:key="title" wx:for-item="section">
|
|
||||||
<view class="card">
|
|
||||||
<view class="card-title">
|
|
||||||
<view class="title-bar"></view>
|
|
||||||
<view class="title-text">{{ section.title }}</view>
|
|
||||||
</view>
|
|
||||||
<block wx:for="{{ section.items }}" wx:key="label" wx:for-item="item">
|
|
||||||
<view class="metric-row">
|
|
||||||
<view class="metric-label">{{ item.label }}</view>
|
|
||||||
<view class="metric-value">{{ item.value }}</view>
|
|
||||||
</view>
|
|
||||||
</block>
|
|
||||||
</view>
|
|
||||||
</block>
|
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
Reference in New Issue
Block a user