[AI Generated]: refactor(Views): 优化测量报告页面结构与样式
This commit is contained in:
17792275749
@@ -1,5 +0,0 @@
|
|||||||
{
|
|
||||||
"component": true,
|
|
||||||
"styleIsolation": "apply-shared",
|
|
||||||
"usingComponents": {}
|
|
||||||
}
|
|
||||||
@@ -1,96 +0,0 @@
|
|||||||
.weui-navigation-bar {
|
|
||||||
--weui-FG-0:rgba(0,0,0,.9);
|
|
||||||
--height: 44px;
|
|
||||||
--left: 16px;
|
|
||||||
}
|
|
||||||
.weui-navigation-bar .android {
|
|
||||||
--height: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weui-navigation-bar {
|
|
||||||
overflow: hidden;
|
|
||||||
color: var(--weui-FG-0);
|
|
||||||
flex: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weui-navigation-bar__inner {
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: calc(var(--height) + env(safe-area-inset-top));
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding-top: env(safe-area-inset-top);
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weui-navigation-bar__left {
|
|
||||||
position: relative;
|
|
||||||
padding-left: var(--left);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-start;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weui-navigation-bar__btn_goback_wrapper {
|
|
||||||
padding: 11px 18px 11px 16px;
|
|
||||||
margin: -11px -18px -11px -16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weui-navigation-bar__btn_goback_wrapper.weui-active {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weui-navigation-bar__btn_goback {
|
|
||||||
font-size: 12px;
|
|
||||||
width: 12px;
|
|
||||||
height: 24px;
|
|
||||||
-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
|
||||||
mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
|
||||||
-webkit-mask-size: cover;
|
|
||||||
mask-size: cover;
|
|
||||||
background-color: var(--weui-FG-0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.weui-navigation-bar__center {
|
|
||||||
font-size: 17px;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: bold;
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weui-navigation-bar__loading {
|
|
||||||
margin-right: 4px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weui-loading {
|
|
||||||
font-size: 16px;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
display: block;
|
|
||||||
background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
|
|
||||||
background-size: 100%;
|
|
||||||
margin-left: 0;
|
|
||||||
animation: loading linear infinite 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes loading {
|
|
||||||
from {
|
|
||||||
transform: rotate(0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,105 +0,0 @@
|
|||||||
Component({
|
|
||||||
options: {
|
|
||||||
multipleSlots: true // 在组件定义时的选项中启用多slot支持
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 组件的属性列表
|
|
||||||
*/
|
|
||||||
properties: {
|
|
||||||
extClass: {
|
|
||||||
type: String,
|
|
||||||
value: ''
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
value: ''
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
type: String,
|
|
||||||
value: ''
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
value: ''
|
|
||||||
},
|
|
||||||
back: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true
|
|
||||||
},
|
|
||||||
loading: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false
|
|
||||||
},
|
|
||||||
homeButton: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false,
|
|
||||||
},
|
|
||||||
animated: {
|
|
||||||
// 显示隐藏的时候opacity动画效果
|
|
||||||
type: Boolean,
|
|
||||||
value: true
|
|
||||||
},
|
|
||||||
show: {
|
|
||||||
// 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
observer: '_showChange'
|
|
||||||
},
|
|
||||||
// back为true的时候，返回的页面深度
|
|
||||||
delta: {
|
|
||||||
type: Number,
|
|
||||||
value: 1
|
|
||||||
},
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 组件的初始数据
|
|
||||||
*/
|
|
||||||
data: {
|
|
||||||
displayStyle: ''
|
|
||||||
},
|
|
||||||
lifetimes: {
|
|
||||||
attached() {
|
|
||||||
const rect = wx.getMenuButtonBoundingClientRect()
|
|
||||||
wx.getSystemInfo({
|
|
||||||
success: (res) => {
|
|
||||||
const isAndroid = res.platform === 'android'
|
|
||||||
const isDevtools = res.platform === 'devtools'
|
|
||||||
this.setData({
|
|
||||||
ios: !isAndroid,
|
|
||||||
innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`,
|
|
||||||
leftWidth: `width: ${res.windowWidth - rect.left }px`,
|
|
||||||
safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px` : ``
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 组件的方法列表
|
|
||||||
*/
|
|
||||||
methods: {
|
|
||||||
_showChange(show: boolean) {
|
|
||||||
const animated = this.data.animated
|
|
||||||
let displayStyle = ''
|
|
||||||
if (animated) {
|
|
||||||
displayStyle = `opacity: ${
|
|
||||||
show ? '1' : '0'
|
|
||||||
};transition:opacity 0.5s;`
|
|
||||||
} else {
|
|
||||||
displayStyle = `display: ${show ? '' : 'none'}`
|
|
||||||
}
|
|
||||||
this.setData({
|
|
||||||
displayStyle
|
|
||||||
})
|
|
||||||
},
|
|
||||||
back() {
|
|
||||||
const data = this.data
|
|
||||||
if (data.delta) {
|
|
||||||
wx.navigateBack({
|
|
||||||
delta: data.delta
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.triggerEvent('back', { delta: data.delta }, {})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
<view class="weui-navigation-bar {{extClass}}">
|
|
||||||
<view class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}" style="color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}};">
|
|
||||||
|
|
||||||
<!-- 左侧按钮 -->
|
|
||||||
<view class='weui-navigation-bar__left' style="{{leftWidth}};">
|
|
||||||
<block wx:if="{{back || homeButton}}">
|
|
||||||
<!-- 返回上一页 -->
|
|
||||||
<block wx:if="{{back}}">
|
|
||||||
<view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_goback">
|
|
||||||
<view
|
|
||||||
bindtap="back"
|
|
||||||
class="weui-navigation-bar__btn_goback_wrapper"
|
|
||||||
hover-class="weui-active"
|
|
||||||
hover-stay-time="100"
|
|
||||||
aria-role="button"
|
|
||||||
aria-label="返回"
|
|
||||||
>
|
|
||||||
<view class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</block>
|
|
||||||
<!-- 返回首页 -->
|
|
||||||
<block wx:if="{{homeButton}}">
|
|
||||||
<view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_home">
|
|
||||||
<view
|
|
||||||
bindtap="home"
|
|
||||||
class="weui-navigation-bar__btn_home_wrapper"
|
|
||||||
hover-class="weui-active"
|
|
||||||
aria-role="button"
|
|
||||||
aria-label="首页"
|
|
||||||
>
|
|
||||||
<view class="weui-navigation-bar__button weui-navigation-bar__btn_home"></view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</block>
|
|
||||||
</block>
|
|
||||||
<block wx:else>
|
|
||||||
<slot name="left"></slot>
|
|
||||||
</block>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 标题 -->
|
|
||||||
<view class='weui-navigation-bar__center'>
|
|
||||||
<view wx:if="{{loading}}" class="weui-navigation-bar__loading" aria-role="alert">
|
|
||||||
<view
|
|
||||||
class="weui-loading"
|
|
||||||
aria-role="img"
|
|
||||||
aria-label="加载中"
|
|
||||||
></view>
|
|
||||||
</view>
|
|
||||||
<block wx:if="{{title}}">
|
|
||||||
<text>{{title}}</text>
|
|
||||||
</block>
|
|
||||||
<block wx:else>
|
|
||||||
<slot name="center"></slot>
|
|
||||||
</block>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 右侧留空 -->
|
|
||||||
<view class='weui-navigation-bar__right'>
|
|
||||||
<slot name="right"></slot>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
@@ -6,21 +6,21 @@
|
|||||||
/* ===== 测量信息卡片 ===== */
|
/* ===== 测量信息卡片 ===== */
|
||||||
.info-card {
|
.info-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 40rpx 30rpx;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 36rpx 30rpx;
|
||||||
margin-bottom: 24rpx;
|
margin-bottom: 24rpx;
|
||||||
border-radius: 24rpx;
|
border-radius: 24rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: #FFFFFF;
|
//background-color: #FFFFFF;
|
||||||
|
background: linear-gradient(180deg, #D3E9FF 0%, #FCFBFD 100%);
|
||||||
.info-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.info-avatar {
|
.info-avatar {
|
||||||
width: 96rpx;
|
width: 90rpx;
|
||||||
height: 96rpx;
|
height: 90rpx;
|
||||||
border-radius: 50%;
|
border-radius: 24rpx;
|
||||||
margin-right: 24rpx;
|
margin-right: 24rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
background-color: #C6E6FF;
|
background-color: #C6E6FF;
|
||||||
border: 3rpx solid #50A6FF;
|
border: 3rpx solid #50A6FF;
|
||||||
}
|
}
|
||||||
@@ -28,43 +28,45 @@
|
|||||||
.info-meta {
|
.info-meta {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
.info-time {
|
|
||||||
color: #77849E;
|
|
||||||
font-size: 26rpx;
|
|
||||||
line-height: 34rpx;
|
|
||||||
margin-bottom: 16rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-name {
|
.info-name {
|
||||||
color: #333333;
|
color: #333333;
|
||||||
|
height: 32rpx;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
font-weight: 700;
|
font-weight: bold;
|
||||||
line-height: 32rpx;
|
line-height: 32rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.info-time {
|
||||||
|
color: #77849E;
|
||||||
|
height: 26rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 26rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== 体重卡片 ===== */
|
/* ===== 最近测量卡 ===== */
|
||||||
.weight-card {
|
.weight-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
margin-bottom: 24rpx;
|
margin-bottom: 24rpx;
|
||||||
padding: 2rpx 2rpx 50rpx;
|
padding: 2rpx 2rpx 50rpx;
|
||||||
border-radius: 24rpx;
|
border-radius: 24rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
|
|
||||||
/* 卡头 */
|
/* 卡头(带渐变背景) */
|
||||||
.card-header {
|
.card-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 88rpx;
|
height: 88rpx;
|
||||||
padding-left: 30rpx;
|
padding-left: 30rpx;
|
||||||
padding-right: 30rpx;
|
padding-right: 10rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-bottom: 18rpx;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
background: linear-gradient(180deg, rgba(211, 233, 255, 0.6) 0%, rgba(252, 251, 253, 0.6) 100%);
|
|
||||||
|
|
||||||
.card-header-left {
|
.card-header-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -92,7 +94,7 @@
|
|||||||
padding: 0 30rpx;
|
padding: 0 30rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
/* 体重主数据行 */
|
/* ===== 最近测量:体重主数据行 ===== */
|
||||||
.weight-row {
|
.weight-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
@@ -169,7 +171,7 @@
|
|||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
line-height: 28rpx;
|
line-height: 28rpx;
|
||||||
|
|
||||||
.diff-arrow {
|
text {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 42rpx;
|
bottom: 42rpx;
|
||||||
@@ -253,6 +255,30 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* BMI 行(标签 + badge 并排) */
|
||||||
|
.metric-label-row {
|
||||||
|
height: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.metric-label {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* BMI 标准/偏高 badge */
|
||||||
|
.bmi-badge {
|
||||||
|
height: 30rpx;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
font-size: 18rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background-color: #2AC79F;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.metric-value-row {
|
.metric-value-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
@@ -270,13 +296,21 @@
|
|||||||
color: #252535;
|
color: #252535;
|
||||||
height: 26rpx;
|
height: 26rpx;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
font-weight: 500;
|
font-weight: bold;
|
||||||
line-height: 26rpx;
|
line-height: 26rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-lianjie {
|
||||||
|
position: absolute;
|
||||||
|
right: 24rpx;
|
||||||
|
width: 32rpx;
|
||||||
|
height: 84rpx;
|
||||||
|
bottom: -55rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== 详细数据卡 ===== */
|
/* ===== 详细数据卡 ===== */
|
||||||
@@ -288,12 +322,12 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
|
|
||||||
/* 卡头 */
|
/* 卡头(带渐变背景) */
|
||||||
.card-header {
|
.card-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 88rpx;
|
height: 88rpx;
|
||||||
padding-left: 30rpx;
|
padding-left: 30rpx;
|
||||||
padding-right: 30rpx;
|
padding-right: 50rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -318,16 +352,28 @@
|
|||||||
line-height: 30rpx;
|
line-height: 30rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.link-text {
|
||||||
|
color: #77849E;
|
||||||
|
height: 24rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 详细数据:三格 */
|
/* ===== 详细数据:三格 ===== */
|
||||||
.detail-grid {
|
.detail-grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0 30rpx;
|
padding: 0 30rpx;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.detail-item {
|
.detail-item {
|
||||||
width: 194rpx;
|
width: 195rpx;
|
||||||
padding: 24rpx;
|
padding: 24rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
@@ -350,7 +396,7 @@
|
|||||||
color: #252535;
|
color: #252535;
|
||||||
height: 44rpx;
|
height: 44rpx;
|
||||||
font-size: 44rpx;
|
font-size: 44rpx;
|
||||||
font-weight: 500;
|
font-weight: bold;
|
||||||
line-height: 44rpx;
|
line-height: 44rpx;
|
||||||
margin-right: 2rpx;
|
margin-right: 2rpx;
|
||||||
}
|
}
|
||||||
@@ -359,7 +405,6 @@
|
|||||||
color: #252535;
|
color: #252535;
|
||||||
height: 26rpx;
|
height: 26rpx;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
font-weight: 500;
|
|
||||||
line-height: 26rpx;
|
line-height: 26rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,15 +1,11 @@
|
|||||||
/** 测量报告数据 */
|
/** 测量报告数据 */
|
||||||
interface ReportData {
|
interface WeightRecord {
|
||||||
/** 测量时间 */
|
|
||||||
measureTime: string
|
|
||||||
/** 用户姓名 */
|
|
||||||
userName: string
|
|
||||||
/** 体重整数部分 */
|
/** 体重整数部分 */
|
||||||
weight: number
|
weight: number
|
||||||
/** 体重小数部分,如 ".20" */
|
/** 体重小数部分,含小数点,如 ".20" */
|
||||||
weightDecimal: string
|
weightDecimal: string
|
||||||
/** 测量时间显示,如 "05-06 09:30" */
|
/** 测量时间显示,如 "今日 07:30" */
|
||||||
weightDate: string
|
date: string
|
||||||
/** 与上次相比差值(负=减轻,正=增重) */
|
/** 与上次相比差值(负=减轻,正=增重) */
|
||||||
diff: number
|
diff: number
|
||||||
/** 身高(cm) */
|
/** 身高(cm) */
|
||||||
@@ -35,13 +31,11 @@ interface ReportData {
|
|||||||
Page({
|
Page({
|
||||||
data: {
|
data: {
|
||||||
// 报告数据
|
// 报告数据
|
||||||
report: {
|
record: {
|
||||||
measureTime: '2026-05-06 09:30',
|
|
||||||
userName: '陈万宁',
|
|
||||||
weight: 68,
|
weight: 68,
|
||||||
weightDecimal: '.20',
|
weightDecimal: '.20',
|
||||||
weightDate: '05-06 09:30',
|
date: '今日 07:30',
|
||||||
diff: -2.6,
|
diff: -0.3,
|
||||||
height: 176,
|
height: 176,
|
||||||
bmi: 22.4,
|
bmi: 22.4,
|
||||||
bmiLabel: '标准',
|
bmiLabel: '标准',
|
||||||
@@ -49,7 +43,7 @@ Page({
|
|||||||
bodyFat: 22.3,
|
bodyFat: 22.3,
|
||||||
bodyFatMass: 52.1,
|
bodyFatMass: 52.1,
|
||||||
bmr: 1652
|
bmr: 1652
|
||||||
} as ReportData
|
} as WeightRecord
|
||||||
},
|
},
|
||||||
|
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
|
|||||||
@@ -2,16 +2,14 @@
|
|||||||
<view class="scrollViewContent">
|
<view class="scrollViewContent">
|
||||||
<!-- 测量信息卡片 -->
|
<!-- 测量信息卡片 -->
|
||||||
<view class="info-card">
|
<view class="info-card">
|
||||||
<view class="info-header">
|
|
||||||
<view class="info-avatar"></view>
|
<view class="info-avatar"></view>
|
||||||
<view class="info-meta">
|
<view class="info-meta">
|
||||||
<view class="info-time">{{ report.measureTime }}</view>
|
<view class="info-name">陈万宁</view>
|
||||||
<view class="info-name">{{ report.userName }}</view>
|
<view class="info-time">2026-05-06 09:30</view>
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 体重卡片 -->
|
<!-- 最近测量卡 -->
|
||||||
<view class="weight-card">
|
<view class="weight-card">
|
||||||
<!-- 卡头 -->
|
<!-- 卡头 -->
|
||||||
<view class="card-header">
|
<view class="card-header">
|
||||||
@@ -26,21 +24,21 @@
|
|||||||
<view class="weight-row">
|
<view class="weight-row">
|
||||||
<view class="weight-main">
|
<view class="weight-main">
|
||||||
<view class="weight-num-wrap">
|
<view class="weight-num-wrap">
|
||||||
<text class="weight-int">{{ report.weight }}</text>
|
<text class="weight-int">{{ record.weight }}</text>
|
||||||
<text class="weight-dec">{{ report.weightDecimal }}</text>
|
<text class="weight-dec">{{ record.weightDecimal }}</text>
|
||||||
<text class="weight-unit">kg</text>
|
<text class="weight-unit">kg</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="weight-date">{{ report.weightDate }}</view>
|
<view class="weight-date">{{ record.date }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="weight-diff">
|
<view class="weight-diff">
|
||||||
<view class="diff-num-wrap">
|
<view class="diff-num-wrap">
|
||||||
<view class="diff-num {{ report.diff < 0 ? 'diff-down' : 'diff-up' }}">{{ report.diff < 0 ? -report.diff : report.diff }}</view>
|
<view class="diff-num {{ record.diff < 0 ? 'diff-down' : 'diff-up' }}">{{ record.diff < 0 ? -record.diff : record.diff }}</view>
|
||||||
<view class="diff-unit">
|
<view class="diff-unit">
|
||||||
kg
|
kg
|
||||||
<text class="diff-arrow {{ report.diff < 0 ? 'arrow-down' : 'arrow-up' }}"></text>
|
<text class="diff-arrow {{ record.diff < 0 ? 'arrow-down' : 'arrow-up' }}"></text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="diff-label">{{ report.diff < 0 ? '体重较上次减轻' : '体重较上次增加' }}</view>
|
<view class="diff-label">{{ record.diff < 0 ? '体重较上次减轻' : '体重较上次增加' }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -54,17 +52,17 @@
|
|||||||
<view class="metric-label-text">身高</view>
|
<view class="metric-label-text">身高</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="metric-value-row">
|
<view class="metric-value-row">
|
||||||
<text class="metric-value">{{ report.height }}</text>
|
<text class="metric-value">{{ record.height }}</text>
|
||||||
<text class="metric-unit">cm</text>
|
<text class="metric-unit">cm</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="metric-col">
|
<view class="metric-col">
|
||||||
<view class="metric-label">
|
<view class="metric-label">
|
||||||
<view class="metric-label-text">BMI</view>
|
<view class="metric-label-text">BMI</view>
|
||||||
<view class="metric-label-value">{{ report.bmiLabel }}</view>
|
<view class="metric-label-value">{{ record.bmiLabel }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="metric-value-row">
|
<view class="metric-value-row">
|
||||||
<text class="metric-value">{{ report.bmi }}</text>
|
<text class="metric-value">{{ record.bmi }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="metric-col">
|
<view class="metric-col">
|
||||||
@@ -72,12 +70,16 @@
|
|||||||
<view class="metric-label-text">标准体重</view>
|
<view class="metric-label-text">标准体重</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="metric-value-row">
|
<view class="metric-value-row">
|
||||||
<text class="metric-value">{{ report.stdWeight }}</text>
|
<text class="metric-value">{{ record.stdWeight }}</text>
|
||||||
<text class="metric-unit">kg</text>
|
<text class="metric-unit">kg</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view class="card-lianjie">
|
||||||
|
<image src="/images/home/lianjie.png" mode=""/>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 详细数据卡 -->
|
<!-- 详细数据卡 -->
|
||||||
@@ -95,21 +97,21 @@
|
|||||||
<view class="detail-item">
|
<view class="detail-item">
|
||||||
<view class="detail-label">体脂率</view>
|
<view class="detail-label">体脂率</view>
|
||||||
<view class="detail-value-row">
|
<view class="detail-value-row">
|
||||||
<text class="detail-value">{{ report.bodyFat }}</text>
|
<text class="detail-value">{{ record.bodyFat }}</text>
|
||||||
<text class="detail-unit">%</text>
|
<text class="detail-unit">%</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="detail-item">
|
<view class="detail-item">
|
||||||
<view class="detail-label">体脂肪</view>
|
<view class="detail-label">体脂肪</view>
|
||||||
<view class="detail-value-row">
|
<view class="detail-value-row">
|
||||||
<text class="detail-value">{{ report.bodyFatMass }}</text>
|
<text class="detail-value">{{ record.bodyFatMass }}</text>
|
||||||
<text class="detail-unit">kg</text>
|
<text class="detail-unit">kg</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="detail-item">
|
<view class="detail-item">
|
||||||
<view class="detail-label">基础代谢</view>
|
<view class="detail-label">基础代谢</view>
|
||||||
<view class="detail-value-row">
|
<view class="detail-value-row">
|
||||||
<text class="detail-value">{{ report.bmr }}</text>
|
<text class="detail-value">{{ record.bmr }}</text>
|
||||||
<text class="detail-unit">kcal</text>
|
<text class="detail-unit">kcal</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
Reference in New Issue
Block a user