- app.js 通过 wx.getSystemInfoSync 获取 statusBarHeight 存入 globalData
- 所有12个自定义导航页面的 JS 读取 statusBarHeight
- WXML 通过 style="padding-top: {{statusBarHeight + 24}}px" 动态适配
- 普通手机和灵动岛手机都能正确显示
32 行
1021 B
Plaintext
32 行
1021 B
Plaintext
<view class="page">
|
|
<view class="page-header page-header-blue" 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="countdown-area">
|
|
<text class="countdown-time">{{remainingText}}</text>
|
|
<view class="countdown-label">剩余时间</view>
|
|
</view>
|
|
|
|
<view class="progress-bar">
|
|
<view class="progress-fill" style="width: {{progress}}%;"></view>
|
|
</view>
|
|
|
|
<view class="mode-tag-area">
|
|
<text class="mode-tag">{{mode === 1 ? '✨ 智能模式' : '🔄 普通模式'}} · 全脸护理</text>
|
|
</view>
|
|
|
|
<view class="relax-card">
|
|
<text class="relax-icon">💆</text>
|
|
<view class="relax-text">
|
|
<text>请放松心情</text>
|
|
<text>享受护理时光</text>
|
|
</view>
|
|
</view>
|
|
|
|
<button class="btn-primary btn-primary-red" bindtap="onStop">停止护理</button>
|
|
</view>
|
|
</view>
|