[AI Generated]: refactor(Views): 首页卡片分离命名 weight-card/detail-card
This commit is contained in:
17792275749
@@ -66,7 +66,7 @@
|
||||
<block wx:for="{{ recordList }}" wx:key="id">
|
||||
<view class="list">
|
||||
<view>{{ item.time }}</view>
|
||||
<view>
|
||||
<view class="arrow">
|
||||
<view>体重：<text>{{ item.weight }}kg</text></view>
|
||||
<view>BMI：<text>{{ item.bmi }}</text></view>
|
||||
<view>体脂率：<text>{{ item.bodyFat }}%</text></view>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
"usingComponents": {},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
|
||||
@@ -1,6 +1,493 @@
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
.header {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 450rpx;
|
||||
margin-bottom: 25rpx;
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 450rpx;
|
||||
}
|
||||
|
||||
.device {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 285rpx;
|
||||
left: 60rpx;
|
||||
right: 60rpx;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.device-icon {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 24rpx;
|
||||
background-color: red;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.device-info {
|
||||
flex: 1;
|
||||
|
||||
.device-name {
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
line-height: 36rpx;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.status-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.dot-on {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.dot-off {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.device-switch {
|
||||
color: #FFFFFF;
|
||||
height: 48rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
line-height: 44rpx;
|
||||
border-radius: 8rpx;
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollViewContent {
|
||||
width: 100%;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* ===== 最近测量卡 ===== */
|
||||
.weight-card {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 2rpx 2rpx 50rpx;
|
||||
border-radius: 24rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
/* 卡头(带渐变背景) */
|
||||
.card-header {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 10rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 18rpx;
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.card-title-bar {
|
||||
width: 6rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 3rpx;
|
||||
background-color: #1385FA;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: #252535;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.link-text {
|
||||
color: #77849E;
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
padding-right: 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
width: 100%;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* ===== 最近测量:体重主数据行 ===== */
|
||||
.weight-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.weight-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.weight-num-wrap {
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
align-items: baseline;
|
||||
|
||||
.weight-int {
|
||||
color: #252535;
|
||||
height: 96rpx;
|
||||
font-size: 96rpx;
|
||||
font-weight: bold;
|
||||
line-height: 96rpx;
|
||||
}
|
||||
|
||||
.weight-dec {
|
||||
color: #252535;
|
||||
font-size: 56rpx;
|
||||
font-weight: bold;
|
||||
line-height: 56rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.weight-unit {
|
||||
color: #808080;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.weight-date {
|
||||
color: #B6B6B6;
|
||||
height: 24rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 右侧变化量 */
|
||||
.weight-diff {
|
||||
width: 250rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.diff-num-wrap {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 14rpx;
|
||||
|
||||
.diff-num {
|
||||
height: 48rpx;
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
line-height: 48rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.diff-unit {
|
||||
position: relative;
|
||||
color: #808080;
|
||||
height: 28rpx;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
|
||||
text {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 42rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 向下箭头(减轻) */
|
||||
.arrow-down {
|
||||
border-left: 10rpx solid transparent;
|
||||
border-right: 10rpx solid transparent;
|
||||
border-top: 16rpx solid #2AC79F;
|
||||
}
|
||||
|
||||
/* 向上箭头(增重) */
|
||||
.arrow-up {
|
||||
border-left: 10rpx solid transparent;
|
||||
border-right: 10rpx solid transparent;
|
||||
border-bottom: 16rpx solid #FF4D4F;
|
||||
}
|
||||
|
||||
.diff-down {
|
||||
color: #2AC79F;
|
||||
}
|
||||
|
||||
.diff-up {
|
||||
color: #FF4D4F;
|
||||
}
|
||||
}
|
||||
|
||||
.diff-label {
|
||||
color: #B6B6B6;
|
||||
font-size: 24rpx;
|
||||
line-height: 28rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
.card-divider {
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background-color: #EAECF1;
|
||||
margin-bottom: 35rpx;
|
||||
}
|
||||
|
||||
/* 身高 / BMI / 标准体重 指标行 */
|
||||
.metrics-row {
|
||||
display: flex;
|
||||
padding: 0 10rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
.metric-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.metric-label {
|
||||
color: #808080;
|
||||
height: 30rpx;
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
line-height: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.metric-label-text {
|
||||
color: #808080;
|
||||
height: 30rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 30rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.metric-label-value {
|
||||
color: #FFFFFF;
|
||||
height: 30rpx;
|
||||
padding: 0 6rpx;
|
||||
font-size: 18rpx;
|
||||
line-height: 30rpx;
|
||||
background-color: #2AC79F;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.metric-value {
|
||||
color: #252535;
|
||||
height: 44rpx;
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
line-height: 44rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.metric-unit {
|
||||
color: #252535;
|
||||
height: 26rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
line-height: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-lianjie {
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
width: 32rpx;
|
||||
height: 84rpx;
|
||||
bottom: -55rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 详细数据卡 ===== */
|
||||
.detail-card {
|
||||
width: 100%;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 2rpx 2rpx 30rpx;
|
||||
border-radius: 24rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
/* 卡头(带渐变背景) */
|
||||
.card-header {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 50rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.card-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.card-title-bar {
|
||||
width: 6rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 3rpx;
|
||||
background-color: #1385FA;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: #252535;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
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 {
|
||||
display: flex;
|
||||
padding: 0 30rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
.detail-item {
|
||||
width: 195rpx;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 16rpx;
|
||||
background-color: #F3F4F6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.detail-label {
|
||||
color: #808080;
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.detail-value-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.detail-value {
|
||||
color: #252535;
|
||||
height: 44rpx;
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
line-height: 44rpx;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.detail-unit {
|
||||
color: #252535;
|
||||
height: 26rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 空态 ===== */
|
||||
.empty-state {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 280rpx;
|
||||
|
||||
.empty-icon {
|
||||
width: 193rpx;
|
||||
height: 138rpx;
|
||||
margin-bottom: 40rpx;
|
||||
background-color: #E8EBF2;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
color: #808080;
|
||||
font-size: 30rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,118 @@
|
||||
Page({
|
||||
data: {},
|
||||
/** 加载状态机 */
|
||||
type LoadStatus = 'idle' | 'loading' | 'loaded'
|
||||
|
||||
onLoad() {},
|
||||
/** 设备信息 */
|
||||
interface DeviceInfo {
|
||||
/** 设备名称 */
|
||||
name: string
|
||||
/** 蓝牙是否已连接 */
|
||||
connected: boolean
|
||||
}
|
||||
|
||||
/** 最近一次测量记录 */
|
||||
interface WeightRecord {
|
||||
/** 体重整数部分 */
|
||||
weight: number
|
||||
/** 体重小数部分,含小数点,如 ".20" */
|
||||
weightDecimal: string
|
||||
/** 测量时间显示,如 "今日 07:30" */
|
||||
date: string
|
||||
/** 与上次相比差值(负=减轻,正=增重) */
|
||||
diff: number
|
||||
/** 身高(cm) */
|
||||
height: number
|
||||
/** BMI 值 */
|
||||
bmi: number
|
||||
/** BMI 评级标签,如 "标准" */
|
||||
bmiLabel: string
|
||||
/** 标准体重(kg) */
|
||||
stdWeight: number
|
||||
/** 体脂率(%) */
|
||||
bodyFat: number
|
||||
/** 体脂肪(kg) */
|
||||
bodyFatMass: number
|
||||
/** 基础代谢(kcal) */
|
||||
bmr: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 首页
|
||||
* 状态机:idle → loading → loaded
|
||||
* loaded 后按 hasData 分为有数据态 / 空态
|
||||
*/
|
||||
Page({
|
||||
data: {
|
||||
// 加载状态
|
||||
status: 'idle' as LoadStatus,
|
||||
|
||||
// 是否有称重数据
|
||||
hasData: true,
|
||||
|
||||
// 设备信息
|
||||
device: {
|
||||
name: '智能体重秤 Pro',
|
||||
connected: true
|
||||
} as DeviceInfo,
|
||||
|
||||
// 最近一次测量记录(hasData=true 时有效)
|
||||
record: {
|
||||
weight: 68,
|
||||
weightDecimal: '.20',
|
||||
date: '今日 07:30',
|
||||
diff: -0.3,
|
||||
height: 176,
|
||||
bmi: 22.4,
|
||||
bmiLabel: '标准',
|
||||
stdWeight: 67.2,
|
||||
bodyFat: 22.3,
|
||||
bodyFatMass: 52.1,
|
||||
bmr: 1652
|
||||
} as WeightRecord
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
// idle 起步,通过统一入口触发加载
|
||||
this.loadData()
|
||||
},
|
||||
|
||||
onReady() {},
|
||||
|
||||
onShow() {},
|
||||
|
||||
onHide() {},
|
||||
|
||||
onUnload() {},
|
||||
|
||||
onPullDownRefresh() {},
|
||||
|
||||
onReachBottom() {},
|
||||
|
||||
onShareAppMessage(opts): WechatMiniprogram.Page.ICustomShareContent {
|
||||
console.log(opts.target)
|
||||
return {}
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载首页数据(后续接入真实接口)
|
||||
*/
|
||||
loadData() {
|
||||
this.setData({ status: 'loading' })
|
||||
// TODO: 后续接入真实接口,当前使用 mock
|
||||
this.setData({ status: 'loaded' })
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转数据页查看历史
|
||||
*/
|
||||
onTapHistory() {
|
||||
wx.switchTab({ url: '/pages/data/data' })
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换设备(后续接入设备选择浮层)
|
||||
*/
|
||||
onTapSwitchDevice() {
|
||||
// TODO: 接入设备选择浮层
|
||||
wx.showToast({ title: '切换设备', icon: 'none' })
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,3 +1,146 @@
|
||||
<view class="container">
|
||||
<text>首页</text>
|
||||
</view>
|
||||
<scroll-view class="scrollView" scroll-y>
|
||||
<view class="header">
|
||||
<view class="bg">
|
||||
<image src="/images/home/header.jpg" mode=""/>
|
||||
</view>
|
||||
|
||||
<view class="device">
|
||||
<view class="device-icon"></view>
|
||||
<view class="device-info">
|
||||
<view class="device-name">智能体脂秤 Pro</view>
|
||||
<view class="device-status">
|
||||
<view class="status-dot {{ device.connected ? 'dot-on' : 'dot-off' }}"></view>
|
||||
<view class="status-text">{{ device.connected ? '蓝牙已连接' : '未连接' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="device-switch" bind:tap="onTapSwitchDevice">切换设备</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="scrollViewContent">
|
||||
<!-- 有数据态 -->
|
||||
<block wx:if="{{ hasData }}">
|
||||
|
||||
<!-- 最近测量卡 -->
|
||||
<view class="weight-card">
|
||||
<!-- 卡头 -->
|
||||
<view class="card-header">
|
||||
<view class="card-header-left">
|
||||
<view class="card-title-bar"></view>
|
||||
<view class="card-title">最近测量</view>
|
||||
</view>
|
||||
<view class="card-header-right" bind:tap="onTapHistory">
|
||||
<view class="link-text">查看历史</view>
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-content">
|
||||
<!-- 体重主数据行 -->
|
||||
<view class="weight-row">
|
||||
<view class="weight-main">
|
||||
<view class="weight-num-wrap">
|
||||
<text class="weight-int">{{ record.weight }}</text>
|
||||
<text class="weight-dec">{{ record.weightDecimal }}</text>
|
||||
<text class="weight-unit">kg</text>
|
||||
</view>
|
||||
<view class="weight-date">{{ record.date }}</view>
|
||||
</view>
|
||||
<view class="weight-diff">
|
||||
<view class="diff-num-wrap">
|
||||
<view class="diff-num {{ record.diff < 0 ? 'diff-down' : 'diff-up' }}">{{ record.diff < 0 ? -record.diff : record.diff }}</view>
|
||||
<view class="diff-unit">
|
||||
kg
|
||||
<text class="diff-arrow {{ record.diff < 0 ? 'arrow-down' : 'arrow-up' }}"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="diff-label">{{ record.diff < 0 ? '体重较上次减轻' : '体重较上次增加' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<view class="card-divider"></view>
|
||||
|
||||
<!-- 身高 / BMI / 标准体重 指标行 -->
|
||||
<view class="metrics-row">
|
||||
<view class="metric-col">
|
||||
<view class="metric-label">
|
||||
<view class="metric-label-text">身高</view>
|
||||
</view>
|
||||
<view class="metric-value-row">
|
||||
<text class="metric-value">{{ record.height }}</text>
|
||||
<text class="metric-unit">cm</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="metric-col">
|
||||
<view class="metric-label">
|
||||
<view class="metric-label-text">BMI</view>
|
||||
<view class="metric-label-value">{{ record.bmiLabel }}</view>
|
||||
</view>
|
||||
<view class="metric-value-row">
|
||||
<text class="metric-value">{{ record.bmi }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="metric-col">
|
||||
<view class="metric-label">
|
||||
<view class="metric-label-text">标准体重</view>
|
||||
</view>
|
||||
<view class="metric-value-row">
|
||||
<text class="metric-value">{{ record.stdWeight }}</text>
|
||||
<text class="metric-unit">kg</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-lianjie">
|
||||
<image src="/images/home/lianjie.png" mode=""/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 详细数据卡 -->
|
||||
<view class="detail-card">
|
||||
<!-- 卡头 -->
|
||||
<view class="card-header">
|
||||
<view class="card-header-left">
|
||||
<view class="card-title-bar"></view>
|
||||
<view class="card-title">详细数据</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 三格数据 -->
|
||||
<view class="detail-grid">
|
||||
<view class="detail-item">
|
||||
<view class="detail-label">体脂率</view>
|
||||
<view class="detail-value-row">
|
||||
<text class="detail-value">{{ record.bodyFat }}</text>
|
||||
<text class="detail-unit">%</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<view class="detail-label">体脂肪</view>
|
||||
<view class="detail-value-row">
|
||||
<text class="detail-value">{{ record.bodyFatMass }}</text>
|
||||
<text class="detail-unit">kg</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<view class="detail-label">基础代谢</view>
|
||||
<view class="detail-value-row">
|
||||
<text class="detail-value">{{ record.bmr }}</text>
|
||||
<text class="detail-unit">kcal</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 空态(无称重数据) -->
|
||||
<block wx:else>
|
||||
<view class="empty-state">
|
||||
<view class="empty-icon"></view>
|
||||
<view class="empty-text">暂无称重数据</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
"usingComponents": {},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
|
||||
@@ -1,6 +1,101 @@
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
margin-bottom: 26rpx;
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.user {
|
||||
position: absolute;
|
||||
top: 185rpx;
|
||||
left: 40rpx;
|
||||
right: 40rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
|
||||
.user-avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-right: 30rpx;
|
||||
box-sizing: border-box;
|
||||
border: 5rpx solid #ffffff;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
.user-name {
|
||||
color: #252536;
|
||||
height: 40rpx;
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
|
||||
.user-meta {
|
||||
height: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.meta-text {
|
||||
color: #77849E;
|
||||
height: 28rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
.meta-divider {
|
||||
color: #B6B6B6;
|
||||
height: 28rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
margin: 0 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.list-item {
|
||||
width: 100%;
|
||||
height: 110rpx;
|
||||
display: flex;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 20rpx;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
border-radius: 16rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
>view:nth-of-type(1) {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-right: 22rpx;
|
||||
}
|
||||
|
||||
>view:nth-of-type(2) {
|
||||
flex: 1;
|
||||
height: 30rpx;
|
||||
color: #394356;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,29 @@
|
||||
<view class="container">
|
||||
<text>我的</text>
|
||||
<view class="header">
|
||||
<view class="bg">
|
||||
<image src="/images/my/header.png" mode=""/>
|
||||
</view>
|
||||
|
||||
<view class="user">
|
||||
<view class="user-avatar"></view>
|
||||
<view class="user-info">
|
||||
<view class="user-name">陈知夏</view>
|
||||
<view class="user-meta">
|
||||
<text class="meta-text">男</text>
|
||||
<text class="meta-divider">·</text>
|
||||
<text class="meta-text">56岁</text>
|
||||
<text class="meta-divider">|</text>
|
||||
<text class="meta-text">182cm</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list">
|
||||
<view class="list-item">
|
||||
<view>
|
||||
<image src="/images/my/about.png" mode=""/>
|
||||
</view>
|
||||
<view>关于我们</view>
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user