Guoguo
52cb1f72dc
- app.js 通过 wx.getSystemInfoSync 获取 statusBarHeight 存入 globalData
- 所有12个自定义导航页面的 JS 读取 statusBarHeight
- WXML 通过 style="padding-top: {{statusBarHeight + 24}}px" 动态适配
- 普通手机和灵动岛手机都能正确显示
44 行
1.6 KiB
Plaintext
44 行
1.6 KiB
Plaintext
<view class="page">
|
|
<view class="page-header page-header-pink" style="padding-top: {{statusBarHeight + 24}}px;">
|
|
<view class="page-header-title">确认佩戴</view>
|
|
<view class="page-header-subtitle">请确保面罩贴合面部</view>
|
|
</view>
|
|
|
|
<view class="page-content">
|
|
<view class="device-row">
|
|
<view class="device-row-icon">💆</view>
|
|
<view class="device-row-info">
|
|
<view class="device-row-name">
|
|
光子美容仪
|
|
<text class="status-badge status-badge-green">已连接</text>
|
|
</view>
|
|
<view class="device-row-battery">电量 85%</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="guide-card">
|
|
<view class="guide-title">佩戴指引</view>
|
|
<view class="guide-img">面罩佩戴示意图</view>
|
|
<view class="guide-steps">
|
|
<view class="guide-step">1. 取出面罩，展开弹性绑带</view>
|
|
<view class="guide-step">2. 将面罩贴合面部</view>
|
|
<view class="guide-step">3. 调节绑带至舒适位置</view>
|
|
</view>
|
|
</view>
|
|
|
|
<button class="btn-primary" bindtap="checkWearing" disabled="{{checking}}" loading="{{checking}}">
|
|
确认已佩戴
|
|
</button>
|
|
<button class="btn-secondary" bindtap="onRetry">重新连接</button>
|
|
|
|
<view class="check-result" wx:if="{{result === 'ok'}}">
|
|
<text class="check-ok">✓ 佩戴确认成功</text>
|
|
</view>
|
|
<view class="check-result" wx:if="{{result === 'fail'}}">
|
|
<text class="check-fail">{{error}}</text>
|
|
</view>
|
|
|
|
<button wx:if="{{result === 'ok'}}" class="btn-primary mt-30" bindtap="onNext">设置护理参数</button>
|
|
</view>
|
|
</view>
|