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 行删除
+9 -4
查看文件
@@ -18,16 +18,19 @@
<view class="page-content" wx:if="{{!loading && hasDevice}}"> <view class="page-content" wx:if="{{!loading && hasDevice}}">
<view class="device-card"> <view class="device-card">
<view class="device-card-top">
<view class="device-icon">💆</view> <view class="device-icon">💆</view>
<view class="device-info">
<view class="device-name">{{deviceName || '我的光面膜'}}</view> <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 status-badge-green" wx:if="{{connected}}">已连接</text>
<text class="status-badge" style="background:#ccc;" wx:else>未连接</text> <text class="status-badge" style="background:#ccc;" wx:else>未连接</text>
<button class="btn-secondary btn-sm" bindtap="onConnectBle" wx:if="{{hasDevice && !connected}}">重新连接</button> <text class="device-battery-text" wx:if="{{connected}}">🔋 {{battery}}%</text>
<view class="device-battery" wx:if="{{connected}}">
<text>🔋</text>
<text>电量 {{battery}}%</text>
</view> </view>
</view> </view>
</view>
<button class="btn-reconnect" bindtap="onConnectBle" wx:if="{{hasDevice && !connected}}">重新连接</button>
</view>
<view class="sub-info" bindtap="onViewSubscription"> <view class="sub-info" bindtap="onViewSubscription">
<view class="sub-info-left"> <view class="sub-info-left">
@@ -38,7 +41,9 @@
<text class="sub-info-arrow"></text> <text class="sub-info-arrow"></text>
</view> </view>
<view class="action-buttons">
<button class="btn-primary" bindtap="onStartTreatment">开始护理</button> <button class="btn-primary" bindtap="onStartTreatment">开始护理</button>
<button class="btn-secondary" bindtap="onManageDevice">设备管理</button> <button class="btn-secondary" bindtap="onManageDevice">设备管理</button>
</view> </view>
</view> </view>
</view>
+63
查看文件
@@ -19,6 +19,69 @@
border: none; border: none;
} }
.device-card {
background: #fff;
border-radius: 16rpx;
padding: 28rpx;
}
.device-card-top {
display: flex;
align-items: center;
gap: 20rpx;
}
.device-icon {
font-size: 64rpx;
flex-shrink: 0;
}
.device-info {
flex: 1;
}
.device-name {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 8rpx;
}
.device-meta {
display: flex;
align-items: center;
gap: 16rpx;
}
.device-battery-text {
font-size: 24rpx;
color: #666;
}
.btn-reconnect {
display: block;
width: 100%;
margin-top: 20rpx;
padding: 20rpx;
background: #f5f5f5;
color: #E6508C;
border: 2rpx solid #E6508C;
border-radius: 12rpx;
font-size: 28rpx;
text-align: center;
}
.btn-reconnect::after {
border: none;
}
.action-buttons {
margin-top: 30rpx;
display: flex;
flex-direction: column;
gap: 20rpx;
}
.sub-info { .sub-info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;