diff --git a/miniprogram/pages/equipment/equipment.less b/miniprogram/pages/equipment/equipment.less index edeccdb..0b911ea 100644 --- a/miniprogram/pages/equipment/equipment.less +++ b/miniprogram/pages/equipment/equipment.less @@ -2,152 +2,158 @@ .equipment { width: 100%; height: 100%; - padding: 30rpx 30rpx 0; box-sizing: border-box; background-color: #F7F8FA; + display: flex; + flex-direction: column; /* 副标题:已配对设备 */ .section-title { color: #808080; - height: 28rpx; + height: 80rpx; font-size: 26rpx; line-height: 28rpx; padding: 0 30rpx; - margin-bottom: 20rpx; + line-height: 80rpx; + flex-shrink: 0; } - /* 卡片列表 */ + /* 卡片列表(scroll-view) */ .device-list { + flex: 1; width: 100%; - display: flex; - flex-direction: column; - .device-card { + .scroll-view-content { width: 100%; - background-color: #FFFFFF; - border-radius: 16rpx; - padding: 30rpx; + padding: 0 30rpx; box-sizing: border-box; - margin-bottom: 24rpx; - &:last-child { - margin-bottom: 0; - } - - /* 上半:图标 + 设备名 + 状态 */ - .card-top { - width: 100%; - display: flex; - align-items: center; - - .card-icon { - width: 90rpx; - height: 90rpx; - border-radius: 24rpx; - margin-right: 24rpx; - } - - .card-info { - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - - .card-name { - color: #252535; - height: 32rpx; - font-size: 32rpx; - font-weight: bold; - line-height: 32rpx; - margin-bottom: 16rpx; - } - - .card-status { - display: flex; - align-items: center; - - .card-dot { - width: 12rpx; - height: 12rpx; - border-radius: 50%; - margin-right: 14rpx; - } - - .card-dot-on { - background-color: #2AC79F; - } - - .card-dot-off { - background-color: #F24439; - } - - .card-status-text { - height: 28rpx; - font-size: 28rpx; - font-weight: 500; - line-height: 28rpx; - } - - .card-status-on { - color: #2AC79F; - } - - .card-status-off { - color: #F24439; - } - } - } - } - - /* 分隔线 */ - .card-divider { - width: 100%; - height: 2rpx; - background-color: #EAECF1; - border-radius: 1rpx; - margin: 30rpx 0 30rpx; - } - - /* 操作按钮区:单/双形态共用 */ - .card-actions { - width: 100%; - padding: 0 24rpx; + .device-card { + background-color: #FFFFFF; + border-radius: 16rpx; + padding: 30rpx; box-sizing: border-box; - display: flex; - align-items: center; - - /* 单按钮:已连接态 */ - &.card-actions-single { - - .btn-ghost-full { - width: 100%; - height: 82rpx; - line-height: 78rpx; - text-align: center; - color: #77849E; - font-size: 28rpx; - background-color: #FFFFFF; - border: 2rpx solid #E6E6EA; - border-radius: 39rpx; - box-sizing: border-box; + // margin: 0 30rpx 24rpx; + + &:last-child { + margin-bottom: 30rpx; + } + + /* 上半:图标 + 设备名 + 状态 */ + .card-top { + width: 100%; + display: flex; + align-items: center; + + .card-icon { + width: 90rpx; + height: 90rpx; + border-radius: 24rpx; + margin-right: 24rpx; + } + + .card-info { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + + .card-name { + color: #252535; + height: 32rpx; + font-size: 32rpx; + font-weight: bold; + line-height: 32rpx; + margin-bottom: 16rpx; + } + + .card-status { + display: flex; + align-items: center; + + .card-dot { + width: 12rpx; + height: 12rpx; + border-radius: 50%; + margin-right: 14rpx; + } + + .card-dot-on { + background-color: #2AC79F; + } + + .card-dot-off { + background-color: #F24439; + } + + .card-status-text { + height: 28rpx; + font-size: 28rpx; + font-weight: 500; + line-height: 28rpx; + } + + .card-status-on { + color: #2AC79F; + } + + .card-status-off { + color: #F24439; + } + } } } - - /* 双按钮:未连接态 */ - &.card-actions-double { - justify-content: space-between; - - .btn-ghost-half { - width: 280rpx; - height: 82rpx; - line-height: 78rpx; - text-align: center; - color: #77849E; - font-size: 28rpx; - background-color: #FFFFFF; - border: 2rpx solid #E6E6EA; - border-radius: 39rpx; - box-sizing: border-box; + + /* 分隔线 */ + .card-divider { + width: 100%; + height: 2rpx; + background-color: #EAECF1; + border-radius: 1rpx; + margin: 30rpx 0 30rpx; + } + + /* 操作按钮区:单/双形态共用 */ + .card-actions { + width: 100%; + padding: 0 24rpx; + box-sizing: border-box; + display: flex; + align-items: center; + + /* 单按钮:已连接态 */ + &.card-actions-single { + + .btn-ghost-full { + width: 100%; + height: 82rpx; + line-height: 78rpx; + text-align: center; + color: #77849E; + font-size: 28rpx; + background-color: #FFFFFF; + border: 2rpx solid #E6E6EA; + border-radius: 39rpx; + box-sizing: border-box; + } + } + + /* 双按钮:未连接态 */ + &.card-actions-double { + justify-content: space-between; + + .btn-ghost-half { + width: 280rpx; + height: 82rpx; + line-height: 78rpx; + text-align: center; + color: #77849E; + font-size: 28rpx; + background-color: #FFFFFF; + border: 2rpx solid #E6E6EA; + border-radius: 39rpx; + box-sizing: border-box; + } } } } @@ -163,7 +169,8 @@ justify-content: center; background-color: #1385FA; border-radius: 44rpx; - margin: 40rpx auto 0; + margin: 40rpx auto; + flex-shrink: 0; .add-btn-icon { color: #FFFFFF; diff --git a/miniprogram/pages/equipment/equipment.wxml b/miniprogram/pages/equipment/equipment.wxml index f50698d..2255ec6 100644 --- a/miniprogram/pages/equipment/equipment.wxml +++ b/miniprogram/pages/equipment/equipment.wxml @@ -5,49 +5,53 @@ - - + + + + - - - - - {{ item.scaleDeviceName }} - - - - - 已连接 - - - - - 未连接 - + + + + + {{ item.scaleDeviceName }} + + + + + 已连接 + + + + + 未连接 + + + - - - - + + + + + + + + 成员管理 + + + + + + 连接 + 成员管理 + + - - - - - 成员管理 - - - - 连接 - 成员管理 - - - - +