refactor(home): 重构首页布局与样式，改用静态示例数据占位
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
17792275749
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
b264205cf4
commit
8069b2767b
@@ -1,143 +1,84 @@
|
||||
<scroll-view class="scrollView" scroll-y>
|
||||
<view class="header">
|
||||
<view class="bg">
|
||||
<image src="/images/home/header.jpg" mode=""/>
|
||||
</view>
|
||||
<view class="home">
|
||||
<view class="bg"></view>
|
||||
|
||||
<view class="device">
|
||||
<image class="device-icon" src="/images/device/{{ device.name }}.png" mode="aspectFit"></image>
|
||||
<view class="device-info">
|
||||
<view class="device-name">{{ device.name }}</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="home-container page-container">
|
||||
<view class="title">
|
||||
<view class="title_1">智能体重秤</view>
|
||||
<view class="title_2">设备智联 · 掌握健康</view>
|
||||
</view>
|
||||
|
||||
<view class="scrollViewContent">
|
||||
<!-- 有数据态 -->
|
||||
<block wx:if="{{ hasData }}">
|
||||
<view class="user">
|
||||
<view class="userAvatar"></view>
|
||||
<view class="userInfo">
|
||||
<view class="userName">张晓敏</view>
|
||||
<view class="userSex">男·36岁<text>丨</text>172cm</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 最近测量卡 -->
|
||||
<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' : (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 class="recentMeasurements">
|
||||
<view class="recentMeasurementsTitle">
|
||||
<view></view>
|
||||
<view>最近测量</view>
|
||||
<view class="arrow">详细报告</view>
|
||||
</view>
|
||||
<view class="recentMeasurementsContent">
|
||||
<view class="recentMeasurementsContentTop">
|
||||
<view class="recentMeasurementsContentTopL">
|
||||
<view>
|
||||
<view>68</view>
|
||||
<view>.20</view>
|
||||
<view>kg</view>
|
||||
</view>
|
||||
<view>07-22 09:30</view>
|
||||
</view>
|
||||
<view class="recentMeasurementsContentTopR">
|
||||
<view>
|
||||
<view>2.6</view>
|
||||
<view>
|
||||
<view>↑</view>
|
||||
<view>kg</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>体重较上次减轻</view>
|
||||
</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="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>
|
||||
<empty-data />
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="detailedData">
|
||||
<view class="detailedDataTitle">
|
||||
<view></view>
|
||||
<view>详细数据</view>
|
||||
</view>
|
||||
<view class="detailedDataContent">
|
||||
<view>
|
||||
<view>体脂肪量</view>
|
||||
<view>16.0<text>kg</text></view>
|
||||
</view>
|
||||
<view>
|
||||
<view>体水分量</view>
|
||||
<view>39.8<text>kg</text></view>
|
||||
</view>
|
||||
<view>
|
||||
<view>蛋白质量</view>
|
||||
<view>1680<text>kcal</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user