/* 设备管理页 —— 已配对设备列表 + 添加设备主按钮 */ .equipment { width: 100%; height: 100%; padding: 30rpx 30rpx 0; box-sizing: border-box; background-color: #F7F8FA; /* 副标题:已配对设备 */ .section-title { color: #808080; height: 28rpx; font-size: 26rpx; line-height: 28rpx; padding: 0 30rpx; margin-bottom: 20rpx; } /* 卡片列表 */ .device-list { width: 100%; display: flex; flex-direction: column; .device-card { width: 100%; background-color: #FFFFFF; border-radius: 16rpx; padding: 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; background-color: rgba(19, 133, 250, 0.1); 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; 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; } } } } } /* 底部「添加设备」主按钮 */ .add-btn { width: 580rpx; height: 88rpx; display: flex; align-items: center; justify-content: center; background-color: #1385FA; border-radius: 44rpx; margin: 40rpx auto 0; .add-btn-icon { color: #FFFFFF; width: 32rpx; font-size: 28rpx; font-weight: bold; height: 32rpx; line-height: 30rpx; border-radius: 50%; text-align: center; margin-right: 15rpx; border: 2rpx solid #ffffff; } .add-btn-text { color: #FFFFFF; font-size: 32rpx; font-weight: bold; line-height: 32rpx; } } }