.equipmentMember { width: 100%; height: 100%; /* 顶部浅红提示条(未连接态) */ .tips { width: 100%; height: 56rpx; display: flex; padding-left: 30rpx; align-items: center; flex-shrink: 0; box-sizing: border-box; background-color: rgba(255, 77, 79, 0.12); .tips-icon { color: #FF4D4F; width: 28rpx; height: 28rpx; font-size: 20rpx; font-weight: bold; margin-right: 10rpx; line-height: 24rpx; text-align: center; border-radius: 50%; box-sizing: border-box; border: 1rpx solid #FF4D4F; } .tips-text { color: #FF4D4F; height: 24rpx; font-size: 24rpx; line-height: 24rpx; } } .seaction { width: 100%; height: 100%; padding: 24rpx 30rpx 0 ; box-sizing: border-box; /* 设备卡(大卡:左插画 + 右信息) */ .device-card { width: 100%; display: flex; align-items: center; padding: 30rpx; border-radius: 20rpx; box-sizing: border-box; margin-bottom: 24rpx; background-color: #FFFFFF; .device-illustration { width: 90rpx; height: 90rpx; border-radius: 24rpx; margin-right: 24rpx; background-color: rgba(19, 133, 250, 0.12); } .device-info { flex: 1; height: auto; .device-name { color: #252535; height: 32rpx; font-size: 32rpx; font-weight: bold; line-height: 32rpx; margin-bottom: 10rpx; } .device-status { height: 28rpx; display: flex; align-items: center; .status-dot { width: 12rpx; height: 12rpx; border-radius: 50%; margin-right: 10rpx; } .status-dot-on { background-color: #2AC79F; } .status-dot-off { background-color: #B6B6B6; } .status-text { color: #77849E; height: 28rpx; font-size: 28rpx; line-height: 28rpx; } } } } /* 成员卡(容量小标题 + 列表整体白卡) */ .member-card { width: 100%; margin-bottom: 40rpx; border-radius: 20rpx; background-color: #FFFFFF; /* 容量小标题 */ .member-card-header { width: 100%; height: 88rpx; display: flex; padding: 0 30rpx; box-sizing: border-box; border-bottom: 1rpx solid #EAECF1; justify-content: space-between; .capacity-label { color: #252535; height: 88rpx; font-size: 30rpx; font-weight: bold; line-height: 88rpx; } .capacity-value { color: #1385FA; height: 88rpx; font-size: 28rpx; font-weight: bold; line-height: 88rpx; } } /* 列表 */ .member-card-list { width: 100%; padding: 0 30rpx; box-sizing: border-box; .member-item { width: 100%; display: flex; align-items: center; padding: 20rpx 0; box-sizing: border-box; border-bottom: 1rpx solid #F0F0F2; &:last-child { border-bottom: none; } .member-avatar { width: 90rpx; height: 90rpx; border-radius: 20rpx; margin-right: 24rpx; background-color: #1385FA; color: #ffffff; font-size: 36rpx; font-weight: bold; line-height: 90rpx; text-align: center; } .member-info { flex: 1; display: flex; flex-flow: column; justify-content: center; overflow: hidden; .member-name-row { height: 40rpx; display: flex; align-items: center; margin-bottom: 16rpx; .member-name { color: #252535; height: 40rpx; font-size: 32rpx; font-weight: bold; line-height: 40rpx; margin-right: 20rpx; } } .member-meta { height: 26rpx; display: flex; align-items: center; .meta-text { color: #77849E; height: 26rpx; font-size: 26rpx; line-height: 26rpx; } .meta-divider { color: #B6B6B6; height: 26rpx; font-size: 26rpx; line-height: 26rpx; margin: 0 12rpx; } } } /* 右侧:badge 或纯文字编辑/删除 */ .member-actions { height: 48rpx; display: flex; align-items: center; flex-shrink: 0; .action-text { color: #808080; height: 48rpx; font-size: 24rpx; line-height: 46rpx; margin-left: 20rpx; border-radius: 8rpx; box-sizing: border-box; padding: 0 20rpx; border: 1rpx solid #E6E6EA; } .action-text-danger { color: #FF4D4F; border: 1rpx solid #FF4D4F; } } } } } /* 通用 badge(本人 / 他人添加) */ .badge { height: 40rpx; padding: 0 18rpx; font-size: 24rpx; line-height: 40rpx; border-radius: 8rpx; } .badge-self { color: #1385FA; background-color: rgba(19, 133, 250, 0.12); } .badge-other { color: #77849E; background-color: rgba(0, 0, 0, 0); } /* 底部添加成员按钮 */ .add-member { width: 580rpx; height: 88rpx; display: flex; align-items: center; justify-content: center; margin: 0 auto; border-radius: 44rpx; background-color: #1385FA; .add-member-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-member-text { color: #FFFFFF; height: 88rpx; font-size: 32rpx; font-weight: bold; line-height: 88rpx; text { font-weight: 500; } } } .add-member-disabled { opacity: 0.4; } } }