yuchunlei/bodyWeight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(home): 重构首页布局与样式，改用静态示例数据占位

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
17792275749
2026-08-17 14:47:43 +08:00
co-authored by Claude Sonnet 4.6
parent b264205cf4
commit 8069b2767b
2 changed files with 343 additions and 548 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/home/home.less
+264 -410
View File
@@ -1,496 +1,350 @@
.header { .home {
width: 100%; width: 100%;
position: relative; height: 100%;
height: 450rpx;
margin-bottom: 25rpx;
.bg { .bg {
width: 100%;
height: 450rpx;
}
.device {
position: absolute; 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;
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 { .home-container {
width: 100%;
padding: 0 30rpx;
box-sizing: border-box;
/* ===== 最近测量卡 ===== */
.weight-card {
width: 100%; width: 100%;
position: relative; height: 100%;
margin-bottom: 24rpx; padding-top: 160rpx;
padding: 2rpx 2rpx 50rpx;
border-radius: 24rpx;
box-sizing: border-box; box-sizing: border-box;
background-color: #FFFFFF;
/* 卡头(带渐变背景) */ .title {
.card-header {
width: 100%; width: 100%;
height: 88rpx; margin-bottom: 30rpx;
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 { .title_1 {
display: flex; color: #1A3F68;
align-items: center; height: 48rpx;
font-size: 48rpx;
.card-title-bar { line-height: 48rpx;
width: 6rpx; margin-bottom: 24rpx;
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 { .title_2 {
display: flex; color: #446D99;
align-items: center; height: 26rpx;
font-size: 26rpx;
line-height: 26rpx;
}
}
.link-text { .user {
color: #77849E; width: 100%;
font-size: 24rpx; padding: 30rpx;
line-height: 24rpx; display: flex;
flex-wrap: nowrap;
align-items: center;
border-radius: 24rpx;
margin-bottom: 24rpx;
box-sizing: border-box;
border: 2rpx solid #ffffff;
background: linear-gradient(180deg, #D3E9FF 0%, #FFFFFF 30%, #FFFFFF 100%);
.userAvatar {
width: 88rpx;
height: 88rpx;
overflow: hidden;
border-radius: 24rpx;
margin-right: 15rpx;
background-color: red;
}
.userInfo {
width: 0;
flex: 1;
.userName {
color: #252535;
height: 32rpx;
font-size: 32rpx;
line-height: 32rpx;
margin-bottom: 20rpx;
} }
.arrow { .userSex {
padding-right: 40rpx; color: #77849E;
box-sizing: border-box; height: 26rpx;
font-size: 26rpx;
line-height: 26rpx;
text {
color: #EAECFA;
}
} }
} }
} }
.card-content { .recentMeasurements {
width: 100%; width: 100%;
padding: 0 30rpx; border-radius: 24rpx;
padding: 40rpx 30rpx 30rpx;
box-sizing: border-box; box-sizing: border-box;
border: 2rpx solid #ffffff;
/* ===== 最近测量:体重主数据行 ===== */ margin-bottom: 24rpx;
.weight-row { background: linear-gradient(180deg, #D3E9FF 0%, #FFFFFF 12%, #FFFFFF 100%);
.recentMeasurementsTitle {
width: 100%;
display: flex; display: flex;
align-items: flex-end; flex-wrap: nowrap;
align-items: center;
margin-bottom: 30rpx; margin-bottom: 30rpx;
.weight-main { > view:nth-of-type(1) {
flex: 1; width: 6rpx;
display: flex; height: 20rpx;
flex-direction: column; margin-right: 15rpx;
border-radius: 16rpx;
.weight-num-wrap { background-color: #1385FA;
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;
}
} }
/* 右侧变化量 */ > view:nth-of-type(2) {
.weight-diff { color: #252535;
width: 250rpx; flex: 1;
height: 32rpx;
font-size: 32rpx;
line-height: 32rpx;
}
> view:nth-of-type(3) {
color: #808080;
height: 32rpx;
font-size: 26rpx;
line-height: 32rpx;
padding-right: 50rpx;
}
}
.recentMeasurementsContent {
width: 100%;
.recentMeasurementsContentTop {
width: 100%;
display: flex; display: flex;
flex-direction: column; flex-wrap: nowrap;
align-items: flex-start; justify-content: space-between;
margin-bottom: 30rpx;
.diff-num-wrap { .recentMeasurementsContentTopL {
display: flex; width: 240rpx;
align-items: flex-end;
margin-bottom: 14rpx;
.diff-num { > view:nth-of-type(1) {
height: 48rpx; width: 100%;
font-size: 48rpx; height: 80rpx;
font-weight: bold; display: flex;
line-height: 48rpx; flex-wrap: nowrap;
margin-right: 6rpx; align-items: end;
} margin-bottom: 15rpx;
.diff-unit {
position: relative;
color: #808080;
height: 28rpx;
font-weight: bold;
font-size: 28rpx;
line-height: 28rpx;
text { > view:nth-of-type(1) {
position: absolute; color: #252535;
left: 0; height: 80rpx;
bottom: 42rpx; font-size: 80rpx;
font-weight: bolder;
line-height: 80rpx;
}
> view:nth-of-type(2) {
color: #252535;
height: 56rpx;
font-size: 56rpx;
font-weight: bolder;
line-height: 56rpx;
margin-right: 10rpx;
}
> view:nth-of-type(3) {
color: #808080;
height: 28rpx;
font-size: 28rpx;
line-height: 28rpx;
} }
} }
/* 向下箭头(减轻) */ > view:nth-of-type(2) {
.arrow-down { width: 100%;
border-left: 10rpx solid transparent; color: #B6B6B6;
border-right: 10rpx solid transparent; height: 24rpx;
border-top: 16rpx solid #2AC79F; font-size: 24rpx;
} line-height: 24rpx;
/* 向上箭头(增重) */
.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-neutral {
color: #000000;
} }
} }
.diff-label { .recentMeasurementsContentTopR {
color: #B6B6B6; width: 240rpx;
font-size: 24rpx;
line-height: 28rpx; > view:nth-of-type(1) {
margin-top: 8rpx; width: 100%;
height: 80rpx;
display: flex;
flex-wrap: nowrap;
align-items: end;
margin-bottom: 15rpx;
> view:nth-of-type(1) {
color: #2AC79F;
height: 48rpx;
font-size: 48rpx;
font-weight: bolder;
line-height: 48rpx;
margin-right: 10rpx;
}
> view:nth-of-type(2) {
flex: 1;
width: 0;
> view:nth-of-type(1) {
width: 14rpx;
height: 18rpx;
font-size: 18rpx;
line-height: 18rpx;
text-align: center;
margin-bottom: 6rpx;
}
> view:nth-of-type(2) {
color: #808080;
height: 28rpx;
font-size: 28rpx;
line-height: 28rpx;
}
}
}
> view:nth-of-type(2) {
width: 100%;
color: #B6B6B6;
height: 24rpx;
font-size: 24rpx;
line-height: 24rpx;
}
} }
} }
}
/* 分割线 */ .recentMeasurementsContentLine {
.card-divider { width: 100%;
width: 100%; height: 2rpx;
height: 2rpx; margin-bottom: 40rpx;
background-color: #EAECF1; background-color: #EAECF1;
margin-bottom: 35rpx; }
}
/* 身高 / BMI / 标准体重 指标行 */ .recentMeasurementsContentBottom {
.metrics-row { width: 100%;
display: flex;
padding: 0 10rpx;
justify-content: space-between;
.metric-col {
display: flex; display: flex;
flex-direction: column; flex-wrap: nowrap;
padding: 0 24rpx;
box-sizing: border-box;
justify-content: space-between;
.metric-label { > view {
color: #808080; width: 150rpx;
height: 30rpx;
display: flex;
font-size: 26rpx;
line-height: 30rpx;
margin-bottom: 20rpx;
.metric-label-text { > view:nth-of-type(1) {
color: #808080; color: #808080;
width: 100%;
height: 30rpx; height: 30rpx;
font-size: 26rpx; font-size: 26rpx;
line-height: 30rpx; line-height: 30rpx;
margin-right: 6rpx; margin-bottom: 20rpx;
text {
color: #FFFFFF;
height: 18rpx;
font-size: 18rpx;
padding: 2rpx 6rpx;
border-radius: 8rpx;
line-height: 18rpx;
margin-left: 16rpx;
background-color: #2AC79F;
}
} }
.metric-label-value { > view:nth-of-type(2) {
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; color: #252535;
height: 44rpx; height: 44rpx;
font-size: 44rpx; font-size: 44rpx;
font-weight: 700; font-weight: bolder;
line-height: 44rpx; line-height: 44rpx;
margin-right: 6rpx;
}
.metric-unit { text {
color: #252535; font-size: 26rpx;
height: 26rpx; }
font-size: 26rpx;
font-weight: bold;
line-height: 26rpx;
} }
} }
} }
} }
} }
.card-lianjie { .detailedData {
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%; width: 100%;
height: 88rpx; border-radius: 24rpx;
padding-left: 30rpx; padding: 40rpx 30rpx 30rpx;
padding-right: 50rpx;
box-sizing: border-box; box-sizing: border-box;
display: flex; border: 2rpx solid #ffffff;
align-items: center; background-color: #FFFFFF;
justify-content: space-between;
.card-header-left { .detailedDataTitle {
width: 100%;
display: flex; display: flex;
flex-wrap: nowrap;
align-items: center; align-items: center;
margin-bottom: 30rpx;
.card-title-bar { > view:nth-of-type(1) {
width: 6rpx; width: 6rpx;
height: 24rpx; height: 20rpx;
border-radius: 3rpx; margin-right: 15rpx;
border-radius: 16rpx;
background-color: #1385FA; background-color: #1385FA;
margin-right: 14rpx;
} }
.card-title { > view:nth-of-type(2) {
color: #252535; color: #252535;
font-size: 30rpx; height: 32rpx;
font-weight: 700; font-size: 32rpx;
line-height: 30rpx; line-height: 32rpx;
} }
} }
.card-header-right { .detailedDataContent {
width: 100%;
display: flex; display: flex;
align-items: center; flex-wrap: nowrap;
justify-content: space-between;
.link-text { > view {
color: #77849E; width: 195rpx;
height: 24rpx; box-sizing: border-box;
font-size: 24rpx; border-radius: 16rpx;
line-height: 24rpx; padding: 24rpx 0 18rpx 24rpx;
} background-color: #F5F7FB;
}
}
/* ===== 详细数据:三格 ===== */ > view:nth-of-type(1) {
.detail-grid { color: #808080;
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; height: 26rpx;
font-size: 26rpx; font-size: 26rpx;
line-height: 26rpx; line-height: 26rpx;
margin-bottom: 20rpx;
}
> view:nth-of-type(2) {
color: #252535;
height: 44rpx;
font-size: 44rpx;
font-weight: bolder;
line-height: 44rpx;
text {
font-size: 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;
border-radius: 20rpx;
}
.empty-text {
color: #808080;
height: 30rpx;
font-size: 30rpx;
line-height: 30rpx;
}
}
}
miniprogram/pages/home/home.wxml
+79 -138
View File
@@ -1,143 +1,84 @@
<scroll-view class="scrollView" scroll-y> <view class="home">
<view class="header"> <view class="bg"></view>
<view class="bg">
<image src="/images/home/header.jpg" mode=""/>
</view>
<view class="device"> <view class="home-container page-container">
<image class="device-icon" src="/images/device/{{ device.name }}.png" mode="aspectFit"></image> <view class="title">
<view class="device-info"> <view class="title_1">智能体重秤</view>
<view class="device-name">{{ device.name }}</view> <view class="title_2">设备智联 · 掌握健康</view>
<view class="device-status"> </view>
<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"> <view class="user">
<!-- 有数据态 --> <view class="userAvatar"></view>
<block wx:if="{{ hasData }}"> <view class="userInfo">
<view class="userName">张晓敏</view>
<view class="userSex">男·36岁<text>丨</text>172cm</view>
</view>
</view>
<!-- 最近测量卡 --> <view class="recentMeasurements">
<view class="weight-card"> <view class="recentMeasurementsTitle">
<!-- 卡头 --> <view></view>
<view class="card-header"> <view>最近测量</view>
<view class="card-header-left"> <view class="arrow">详细报告</view>
<view class="card-title-bar"></view> </view>
<view class="card-title">最近测量</view> <view class="recentMeasurementsContent">
</view> <view class="recentMeasurementsContentTop">
<view class="card-header-right" bind:tap="onTapHistory"> <view class="recentMeasurementsContentTopL">
<view class="link-text">查看历史</view> <view>
<view class="arrow"></view> <view>68</view>
</view> <view>.20</view>
</view> <view>kg</view>
</view>
<view class="card-content"> <view>07-22 09:30</view>
<!-- 体重主数据行 --> </view>
<view class="weight-row"> <view class="recentMeasurementsContentTopR">
<view class="weight-main"> <view>
<view class="weight-num-wrap"> <view>2.6</view>
<text class="weight-int">{{ record.weight }}</text> <view>
<text class="weight-dec">{{ record.weightDecimal }}</text> <view>↑</view>
<text class="weight-unit">kg</text> <view>kg</view>
</view> </view>
<view class="weight-date">{{ record.date }}</view> </view>
</view> <view>体重较上次减轻</view>
<view class="weight-diff"> </view>
<view class="diff-num-wrap">
<view class="diff-num {{ record.diff < 0 ? 'diff-down' : (record.diff > 0 ? 'diff-up' : 'diff-neutral') }}">{{ record.diff < 0 ? -record.diff : record.diff }}</view>
<view class="diff-unit">
kg
<text wx:if="{{ record.diff !== 0 }}" class="diff-arrow {{ record.diff < 0 ? 'arrow-down' : 'arrow-up' }}"></text>
</view>
</view>
<view class="diff-label">{{ record.diff < 0 ? '体重较上次减轻' : (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> <view class="recentMeasurementsContentLine"></view>
<view class="recentMeasurementsContentBottom">
<view>
<view>身高</view>
<view>172<text>cm</text></view>
</view>
<view>
<view>BMI<text>标准</text></view>
<view>22.4</view>
</view>
<view>
<view>体脂率</view>
<view>22.1<text>%</text></view>
</view>
</view>
</view>
</view>
<!-- 详细数据卡 --> <view class="detailedData">
<view class="detail-card"> <view class="detailedDataTitle">
<!-- 卡头 --> <view></view>
<view class="card-header"> <view>详细数据</view>
<view class="card-header-left"> </view>
<view class="card-title-bar"></view> <view class="detailedDataContent">
<view class="card-title">详细数据</view> <view>
</view> <view>体脂肪量</view>
</view> <view>16.0<text>kg</text></view>
</view>
<!-- 三格数据 --> <view>
<view class="detail-grid"> <view>体水分量</view>
<view class="detail-item"> <view>39.8<text>kg</text></view>
<view class="detail-label">体脂率</view> </view>
<view class="detail-value-row"> <view>
<text class="detail-value">{{ record.bodyFat }}</text> <view>蛋白质量</view>
<text class="detail-unit">%</text> <view>1680<text>kcal</text></view>
</view> </view>
</view> </view>
<view class="detail-item"> </view>
<view class="detail-label">体脂肪</view> </view>
<view class="detail-value-row"> </view>
<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>
<empty-data />
</block>
</view>
</scroll-view>