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 09:28:26 +08:00
co-authored by Claude Opus 4.7
parent f13edf31b7
commit 92b395b8bd
11 changed files with 393 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/app.json
+3 -3
View File
@@ -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"
miniprogram/images/addUser/calendar.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 999 B

miniprogram/images/data/droplet.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 709 B

miniprogram/images/data/user.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 641 B

miniprogram/images/detailedReport/bg.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

miniprogram/images/detailedReport/calendar.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 732 B

miniprogram/images/detailedReport/trendingDown.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 327 B

miniprogram/images/userManagement/reload.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 481 B

miniprogram/pages/detailedReport/detailedReport.less
+112 -45
View File
@@ -1,93 +1,148 @@
.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;
.bg {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 440rpx;
}
.detailedReport-container {
width: 100%;
padding-top: 190rpx;
box-sizing: border-box; box-sizing: border-box;
.title {
width: 100%;
margin-bottom: 20rpx;
.title_1 {
color: #1A3F68;
height: 32rpx;
font-size: 32rpx;
font-weight: bolder;
line-height: 32rpx;
margin-bottom: 20rpx;
}
.title_2 {
color: #446D99;
height: 26rpx;
font-size: 26rpx;
font-weight: bolder;
line-height: 26rpx;
}
}
/* 顶部头部 */ /* 顶部头部 */
.header { .header {
width: 100%; width: 100%;
height: 360rpx; height: 280rpx;
border-radius: 24rpx; border-radius: 32rpx;
background: linear-gradient(135deg, #C0E0FD 0%, #E2E9F9 100%); box-shadow: 0 16rpx 32rpx 0 rgba(19, 133, 250, 0.16);
display: flex; background: linear-gradient(90deg, #1385FA 0%, #0B6FD4 100%);
flex-direction: column; padding: 45rpx;
justify-content: center;
padding: 0 40rpx;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 24rpx; margin-bottom: 24rpx;
.header-slogan { .header-top {
margin-bottom: 24rpx; width: 100%;
height: 38rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
margin-bottom: 50rpx;
.slogan-title { > view:nth-of-type(1) {
color: #1A3F68; width: 38rpx;
height: 32rpx; height: 38rpx;
font-size: 32rpx; display: flex;
line-height: 32rpx; align-items: center;
margin-right: 16rpx;
} }
.slogan-sub { > view:nth-of-type(2) {
color: #446D99;
height: 26rpx;
font-size: 26rpx;
line-height: 26rpx;
margin-top: 12rpx;
}
}
.header-date {
color: #FFFFFF; color: #FFFFFF;
height: 26rpx; height: 26rpx;
font-size: 26rpx; font-size: 26rpx;
line-height: 26rpx; line-height: 26rpx;
} }
}
.header-bottom {
width: 100%;
height: 120rpx;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: end;
.header-weight { .header-weight {
height: 120rpx;
display: flex; display: flex;
align-items: flex-end; flex-wrap: nowrap;
margin-top: 24rpx; align-items: end;
.weight-num { .weight-num1 {
color: #FFFFFF; color: #FFFFFF;
height: 120rpx; height: 120rpx;
font-size: 120rpx; font-size: 120rpx;
line-height: 120rpx; line-height: 120rpx;
} }
.weight-num2 {
color: #FFFFFF;
height: 68rpx;
font-size: 56rpx;
line-height: 68rpx;
margin-right: 10rpx;
}
.weight-unit { .weight-unit {
color: #FFFFFF; color: #FFFFFF;
height: 28rpx; height: 40rpx;
font-size: 28rpx; font-size: 28rpx;
line-height: 28rpx; line-height: 40rpx;
margin: 0 0 24rpx 12rpx;
} }
} }
.header-info { .header-info {
width: 200rpx;
display: flex; display: flex;
align-items: center; flex-wrap: wrap;
margin-top: 16rpx; justify-content: right;
.header-bmi { .header-bmi {
color: #FFFFFF; color: #FFFFFF;
height: 22rpx; height: 48rpx;
font-size: 22rpx; font-size: 22rpx;
line-height: 22rpx; line-height: 48rpx;
margin-right: 24rpx; 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 { .header-change {
color: #FFFFFF; color: #FFFFFF;
height: 22rpx; height: 48rpx;
font-size: 22rpx; font-size: 22rpx;
line-height: 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);
}
} }
} }
} }
@@ -122,15 +177,25 @@
} }
} }
/* 基础指标 2x2 */ /* 基础指标 3 列 2 行 */
.basic-grid { .basic-grid {
.basic-row {
display: flex; display: flex;
flex-wrap: wrap; border-bottom: 2rpx solid #EAECF1;
.basic-item { &:last-of-type {
width: 50%; border-bottom: none;
}
.basic-cell {
flex: 1;
box-sizing: border-box; box-sizing: border-box;
padding: 24rpx 0; padding: 24rpx 0;
border-right: 2rpx solid #EAECF1;
&:last-of-type {
border-right: none;
}
.basic-label { .basic-label {
color: #808080; color: #808080;
@@ -172,6 +237,7 @@
} }
} }
} }
}
/* BMI 刻度 */ /* BMI 刻度 */
.bmi-scale { .bmi-scale {
@@ -274,3 +340,4 @@
} }
} }
} }
}
miniprogram/pages/detailedReport/detailedReport.ts
+9 -2
View File
@@ -11,12 +11,19 @@ Page({
bmi: 'BMI正常', bmi: 'BMI正常',
change: '较上次-0.3kg' change: '较上次-0.3kg'
}, },
basic: [ basic: {
rows: [
[
{ label: '身高', value: '172', unit: 'cm', tag: '' }, { label: '身高', value: '172', unit: 'cm', tag: '' },
{ label: 'BMI', value: '22.4', unit: '', tag: '标准' }, { label: 'BMI', value: '22.4', unit: '', tag: '标准' },
{ label: '身体得分', value: '73', unit: '分', tag: '一般' },
{ label: '体脂率', value: '22.1', unit: '%', tag: '' } { label: '体脂率', value: '22.1', unit: '%', tag: '' }
], ],
[
{ label: '身体得分', value: '73', unit: '分', tag: '' },
{ label: '健康评估', value: '一般', unit: '', tag: '' }
]
]
},
sections: [ sections: [
{ {
title: '身体成分', title: '身体成分',
miniprogram/pages/detailedReport/detailedReport.wxml
+30 -12
View File
@@ -3,23 +3,36 @@
<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>
<view class="detailedReport-container page-container">
<view class="title">
<view class="title_1">设备智联 · 掌握健康</view>
<view class="title_2">留存测量记录，见证身形变化</view>
</view>
<!-- 顶部头部 --> <!-- 顶部头部 -->
<view class="header"> <view class="header">
<view class="header-slogan"> <view class="header-top">
<view class="slogan-title">设备智联 · 掌握健康</view> <view>
<view class="slogan-sub">留存测量记录，见证身形变化</view> <image src="/images/detailedReport/calendar.png" mode="aspectFit" />
</view> </view>
<view class="header-date">{{ header.date }}</view> <view>{{ header.date }}</view>
</view>
<view class="header-bottom">
<view class="header-weight"> <view class="header-weight">
<view class="weight-num">{{ header.weight }}</view> <view class="weight-num1">88</view>
<view class="weight-unit">{{ header.unit }}</view> <view class="weight-num2">.88</view>
<view class="weight-unit">kg</view>
</view> </view>
<view class="header-info"> <view class="header-info">
<view class="header-bmi">{{ header.bmi }}</view> <view class="header-bmi">{{ header.bmi }}</view>
<view class="header-change">{{ header.change }}</view> <view class="header-change">{{ header.change }}</view>
</view> </view>
</view> </view>
</view>
<!-- 基础指标 --> <!-- 基础指标 -->
<view class="card"> <view class="card">
@@ -28,17 +41,21 @@
<view class="title-text">基础指标</view> <view class="title-text">基础指标</view>
</view> </view>
<view class="basic-grid"> <view class="basic-grid">
<block wx:for="{{ basic }}" wx:key="label"> <block wx:for="{{ basic.rows }}" wx:key="index" wx:for-item="row">
<view class="basic-item"> <view class="basic-row">
<view class="basic-label">{{ item.label }}</view> <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-row">
<view class="basic-value">{{ item.value }}</view> <view class="basic-value">{{ cell.value }}</view>
<view class="basic-unit">{{ item.unit }}</view> <view class="basic-unit" wx:if="{{ cell.unit }}">{{ cell.unit }}</view>
<view class="basic-tag" wx:if="{{ item.tag }}">{{ item.tag }}</view> <view class="basic-tag" wx:if="{{ cell.tag }}">{{ cell.tag }}</view>
</view> </view>
</view> </view>
</block> </block>
</view> </view>
</block>
</view>
<view class="bmi-scale"> <view class="bmi-scale">
<view class="scale-track"> <view class="scale-track">
<view class="scale-block scale-block--low"></view> <view class="scale-block scale-block--low"></view>
@@ -94,5 +111,6 @@
</view> </view>
</block> </block>
</view> </view>
</view>
</scroll-view> </scroll-view>
</view> </view>