[AI Generated]: feat(device): 设备列表添加 scroll-view 支持滚动,优化布局结构
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
0a05fde0ba
commit
14ec4fe177
@@ -2,36 +2,41 @@
|
|||||||
.equipment {
|
.equipment {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 30rpx 30rpx 0;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: #F7F8FA;
|
background-color: #F7F8FA;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
/* 副标题:已配对设备 */
|
/* 副标题:已配对设备 */
|
||||||
.section-title {
|
.section-title {
|
||||||
color: #808080;
|
color: #808080;
|
||||||
height: 28rpx;
|
height: 80rpx;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
line-height: 28rpx;
|
line-height: 28rpx;
|
||||||
padding: 0 30rpx;
|
padding: 0 30rpx;
|
||||||
margin-bottom: 20rpx;
|
line-height: 80rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 卡片列表 */
|
/* 卡片列表(scroll-view) */
|
||||||
.device-list {
|
.device-list {
|
||||||
|
flex: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
.scroll-view-content {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
.device-card {
|
.device-card {
|
||||||
width: 100%;
|
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
padding: 30rpx;
|
padding: 30rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin-bottom: 24rpx;
|
// margin: 0 30rpx 24rpx;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 30rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 上半:图标 + 设备名 + 状态 */
|
/* 上半:图标 + 设备名 + 状态 */
|
||||||
@@ -153,6 +158,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* 底部「添加设备」主按钮 */
|
/* 底部「添加设备」主按钮 */
|
||||||
.add-btn {
|
.add-btn {
|
||||||
@@ -163,7 +169,8 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: #1385FA;
|
background-color: #1385FA;
|
||||||
border-radius: 44rpx;
|
border-radius: 44rpx;
|
||||||
margin: 40rpx auto 0;
|
margin: 40rpx auto;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
.add-btn-icon {
|
.add-btn-icon {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
|
|||||||
@@ -5,6 +5,8 @@
|
|||||||
|
|
||||||
<!-- 设备卡片列表 -->
|
<!-- 设备卡片列表 -->
|
||||||
<view class="device-list">
|
<view class="device-list">
|
||||||
|
<scroll-view class="scrollView" scroll-y>
|
||||||
|
<view class="scroll-view-content">
|
||||||
<block wx:for="{{ deviceList }}" wx:key="id">
|
<block wx:for="{{ deviceList }}" wx:key="id">
|
||||||
<view class="device-card">
|
<view class="device-card">
|
||||||
|
|
||||||
@@ -49,6 +51,8 @@
|
|||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
</view>
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 底部「添加设备」主按钮 -->
|
<!-- 底部「添加设备」主按钮 -->
|
||||||
<view class="add-btn" bind:tap="onTapAdd">
|
<view class="add-btn" bind:tap="onTapAdd">
|
||||||
|
|||||||
Reference in New Issue
Block a user