17792275749andClaude Opus 4.7
97c135786c
- 删除确认弹窗替代原生 wx.showModal，仿原生风格 - 他人添加成员删除时显示红色加粗警示文案 - 成员列表操作区统一展示编辑/删除按钮 - 名字旁补充「本人」「他人添加」标签 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
392 lines
7.0 KiB
Plaintext
392 lines
7.0 KiB
Plaintext
.equipmentMember {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
/* 顶部浅红提示条(未连接态) */
|
|
.tips {
|
|
width: 100%;
|
|
height: 56rpx;
|
|
display: flex;
|
|
padding-left: 30rpx;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
margin-bottom: 24rpx;
|
|
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%;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
padding-top: 24rpx;
|
|
flex-direction: column;
|
|
margin-bottom: 24rpx;
|
|
|
|
/* 设备卡(大卡:左插画 + 右信息) */
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.scrollViewContent {
|
|
box-sizing: border-box;
|
|
|
|
/* 用户卡(容量小标题 + 列表整体白卡) */
|
|
.member-card {
|
|
width: 100%;
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
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-item {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx 30rpx;
|
|
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-my {
|
|
color: #1385FA;
|
|
background-color: rgba(19, 133, 250, 0.08);
|
|
}
|
|
|
|
.badge-other {
|
|
color: #77849E;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
height: 120rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #FFFFFF;
|
|
|
|
/* 底部添加用户按钮 */
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* 删除确认弹窗 — 仿原生 wx.showModal 风格 */
|
|
.delete-modal-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.delete-modal {
|
|
width: 540rpx;
|
|
border-radius: 16rpx;
|
|
background-color: #FFFFFF;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.delete-modal-title {
|
|
width: 100%;
|
|
padding-top: 40rpx;
|
|
text-align: center;
|
|
font-size: 34rpx;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
}
|
|
|
|
.delete-modal-content {
|
|
padding: 32rpx 32rpx 40rpx;
|
|
font-size: 28rpx;
|
|
color: #353535;
|
|
line-height: 44rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.delete-modal-warning {
|
|
color: #FF4D4F;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.delete-modal-footer {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
display: flex;
|
|
border-top: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.delete-modal-btn {
|
|
flex: 1;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.delete-modal-btn-cancel {
|
|
color: #000000;
|
|
border-right: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.delete-modal-btn-confirm {
|
|
color: #000000;
|
|
font-weight: bold;
|
|
}
|
|
}
|