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/home/home",
|
||||
"pages/detailedReport/detailedReport",
|
||||
"pages/login/login",
|
||||
"pages/supplementPersonal/supplementPersonal",
|
||||
"pages/connectedDevice/connectedDevice",
|
||||
"pages/connectedWifi/connectedWifi",
|
||||
"pages/home/home",
|
||||
"pages/equipment/equipment",
|
||||
"pages/userManagement/userManagement",
|
||||
"pages/addUser/addUser",
|
||||
@@ -12,8 +13,7 @@
|
||||
"pages/my/my",
|
||||
"pages/personalInformation/personalInformation",
|
||||
"pages/helpCenter/helpCenter",
|
||||
"pages/questionDetails/questionDetails",
|
||||
"pages/detailedReport/detailedReport"
|
||||
"pages/questionDetails/questionDetails"
|
||||
],
|
||||
"usingComponents": {
|
||||
"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,93 +1,148 @@
|
||||
.detailedReport {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
//padding: 24rpx 32rpx;
|
||||
//box-sizing: border-box;
|
||||
//background-color: #F5F7FB;
|
||||
|
||||
.scrollViewContent {
|
||||
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;
|
||||
|
||||
.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 {
|
||||
width: 100%;
|
||||
height: 360rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(135deg, #C0E0FD 0%, #E2E9F9 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 40rpx;
|
||||
height: 280rpx;
|
||||
border-radius: 32rpx;
|
||||
box-shadow: 0 16rpx 32rpx 0 rgba(19, 133, 250, 0.16);
|
||||
background: linear-gradient(90deg, #1385FA 0%, #0B6FD4 100%);
|
||||
padding: 45rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.header-slogan {
|
||||
margin-bottom: 24rpx;
|
||||
.header-top {
|
||||
width: 100%;
|
||||
height: 38rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
margin-bottom: 50rpx;
|
||||
|
||||
.slogan-title {
|
||||
color: #1A3F68;
|
||||
height: 32rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 32rpx;
|
||||
> view:nth-of-type(1) {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.slogan-sub {
|
||||
color: #446D99;
|
||||
height: 26rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.header-date {
|
||||
> view:nth-of-type(2) {
|
||||
color: #FFFFFF;
|
||||
height: 26rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.header-bottom {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
|
||||
.header-weight {
|
||||
height: 120rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-top: 24rpx;
|
||||
flex-wrap: nowrap;
|
||||
align-items: end;
|
||||
|
||||
.weight-num {
|
||||
.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: 28rpx;
|
||||
height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
margin: 0 0 24rpx 12rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.header-info {
|
||||
width: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 16rpx;
|
||||
flex-wrap: wrap;
|
||||
justify-content: right;
|
||||
|
||||
.header-bmi {
|
||||
color: #FFFFFF;
|
||||
height: 22rpx;
|
||||
height: 48rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 22rpx;
|
||||
margin-right: 24rpx;
|
||||
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: 22rpx;
|
||||
height: 48rpx;
|
||||
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-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border-bottom: 2rpx solid #EAECF1;
|
||||
|
||||
.basic-item {
|
||||
width: 50%;
|
||||
&: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;
|
||||
@@ -172,6 +237,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* BMI 刻度 */
|
||||
.bmi-scale {
|
||||
@@ -274,3 +340,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,12 +11,19 @@ Page({
|
||||
bmi: 'BMI正常',
|
||||
change: '较上次-0.3kg'
|
||||
},
|
||||
basic: [
|
||||
basic: {
|
||||
rows: [
|
||||
[
|
||||
{ label: '身高', value: '172', unit: 'cm', tag: '' },
|
||||
{ label: 'BMI', value: '22.4', unit: '', tag: '标准' },
|
||||
{ label: '身体得分', value: '73', unit: '分', tag: '一般' },
|
||||
{ label: '体脂率', value: '22.1', unit: '%', tag: '' }
|
||||
],
|
||||
[
|
||||
{ label: '身体得分', value: '73', unit: '分', tag: '' },
|
||||
{ label: '健康评估', value: '一般', unit: '', tag: '' }
|
||||
]
|
||||
]
|
||||
},
|
||||
sections: [
|
||||
{
|
||||
title: '身体成分',
|
||||
|
||||
@@ -3,23 +3,36 @@
|
||||
<view class="detailedReport">
|
||||
<scroll-view class="scrollView" scroll-y bindscroll="onScroll">
|
||||
<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-slogan">
|
||||
<view class="slogan-title">设备智联 · 掌握健康</view>
|
||||
<view class="slogan-sub">留存测量记录，见证身形变化</view>
|
||||
<view class="header-top">
|
||||
<view>
|
||||
<image src="/images/detailedReport/calendar.png" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="header-date">{{ header.date }}</view>
|
||||
<view>{{ header.date }}</view>
|
||||
</view>
|
||||
<view class="header-bottom">
|
||||
<view class="header-weight">
|
||||
<view class="weight-num">{{ header.weight }}</view>
|
||||
<view class="weight-unit">{{ header.unit }}</view>
|
||||
<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">
|
||||
@@ -28,17 +41,21 @@
|
||||
<view class="title-text">基础指标</view>
|
||||
</view>
|
||||
<view class="basic-grid">
|
||||
<block wx:for="{{ basic }}" wx:key="label">
|
||||
<view class="basic-item">
|
||||
<view class="basic-label">{{ item.label }}</view>
|
||||
<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">{{ item.value }}</view>
|
||||
<view class="basic-unit">{{ item.unit }}</view>
|
||||
<view class="basic-tag" wx:if="{{ item.tag }}">{{ item.tag }}</view>
|
||||
<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>
|
||||
</block>
|
||||
</view>
|
||||
<view class="bmi-scale">
|
||||
<view class="scale-track">
|
||||
<view class="scale-block scale-block--low"></view>
|
||||
@@ -94,5 +111,6 @@
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user