fix: index page layout — separate badge from reconnect, space buttons

- Device card: top row with icon+name+badge, reconnect button below
- Action buttons wrapped in flex column with 20rpx gap
- Removed inline device-battery, now part of device-meta row
这个提交包含在:
Guoguo
2026-05-18 05:51:13 -07:00
父节点 46cc225fe8
当前提交 b9a4f484bb
修改 2 个文件,包含 78 行新增10 行删除
+15 -10
查看文件
@@ -18,15 +18,18 @@
<view class="page-content" wx:if="{{!loading && hasDevice}}">
<view class="device-card">
<view class="device-icon">💆</view>
<view class="device-name">{{deviceName || '我的光面膜'}}</view>
<text class="status-badge status-badge-green" wx:if="{{connected}}">已连接</text>
<text class="status-badge" style="background:#ccc;" wx:else>未连接</text>
<button class="btn-secondary btn-sm" bindtap="onConnectBle" wx:if="{{hasDevice && !connected}}">重新连接</button>
<view class="device-battery" wx:if="{{connected}}">
<text>🔋</text>
<text>电量 {{battery}}%</text>
<view class="device-card-top">
<view class="device-icon">💆</view>
<view class="device-info">
<view class="device-name">{{deviceName || '我的光面膜'}}</view>
<view class="device-meta">
<text class="status-badge status-badge-green" wx:if="{{connected}}">已连接</text>
<text class="status-badge" style="background:#ccc;" wx:else>未连接</text>
<text class="device-battery-text" wx:if="{{connected}}">🔋 {{battery}}%</text>
</view>
</view>
</view>
<button class="btn-reconnect" bindtap="onConnectBle" wx:if="{{hasDevice && !connected}}">重新连接</button>
</view>
<view class="sub-info" bindtap="onViewSubscription">
@@ -38,7 +41,9 @@
<text class="sub-info-arrow"></text>
</view>
<button class="btn-primary" bindtap="onStartTreatment">开始护理</button>
<button class="btn-secondary" bindtap="onManageDevice">设备管理</button>
<view class="action-buttons">
<button class="btn-primary" bindtap="onStartTreatment">开始护理</button>
<button class="btn-secondary" bindtap="onManageDevice">设备管理</button>
</view>
</view>
</view>