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
这个提交包含在:
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
在新工单中引用
屏蔽一个用户