diff --git a/miniprogram/pages/userManagement/userManagement.less b/miniprogram/pages/userManagement/userManagement.less
index 810fe03..cdbb72a 100644
--- a/miniprogram/pages/userManagement/userManagement.less
+++ b/miniprogram/pages/userManagement/userManagement.less
@@ -13,13 +13,12 @@
.device-card {
width: 100%;
- padding: 32rpx;
+ padding: 30rpx;
+ display: flex;
border-radius: 24rpx;
background-color: #FFFFFF;
box-sizing: border-box;
margin-bottom: 24rpx;
- display: flex;
- align-items: center;
.device-icon {
width: 88rpx;
@@ -28,7 +27,6 @@
margin-right: 24rpx;
border-radius: 24rpx;
background-color: #1385FA;
- flex-shrink: 0;
}
.device-info {
@@ -36,6 +34,7 @@
.device-name-row {
width: 100%;
+ height: 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
@@ -45,13 +44,17 @@
color: #252535;
height: 32rpx;
font-size: 32rpx;
+ font-weight: bolder;
line-height: 32rpx;
}
.device-status {
- height: 22rpx;
+ height: 40rpx;
display: flex;
+ padding: 0 16rpx;
+ border-radius: 20rpx;
align-items: center;
+ background-color: #EAFAF6;
.status-dot {
width: 12rpx;
@@ -75,13 +78,13 @@
height: 26rpx;
font-size: 26rpx;
line-height: 26rpx;
- margin-bottom: 8rpx;
}
}
}
.section-header {
width: 100%;
+ height: 48rpx;
display: flex;
align-items: center;
justify-content: space-between;
@@ -91,17 +94,18 @@
color: #252535;
height: 32rpx;
font-size: 32rpx;
+ font-weight: bolder;
line-height: 32rpx;
}
.sync-btn {
- height: 48rpx;
- padding: 0 20rpx;
- border-radius: 24rpx;
- background-color: #1385FA;
color: #FFFFFF;
+ height: 48rpx;
font-size: 24rpx;
line-height: 48rpx;
+ padding: 0 20rpx;
+ border-radius: 8rpx;
+ background-color: #1385FA;
}
}
@@ -142,124 +146,166 @@
.scrollViewContent {
width: 100%;
- padding: 0 30rpx;
+ padding: 0 30rpx 30rpx;
box-sizing: border-box;
-
+ .group-title {
+ color: #252535;
+ height: 26rpx;
+ font-size: 26rpx;
+ line-height: 26rpx;
+ margin-bottom: 24rpx;
+ }
.member-card {
width: 100%;
- padding: 32rpx;
+ padding: 30rpx;
border-radius: 24rpx;
background-color: #FFFFFF;
box-sizing: border-box;
margin-bottom: 24rpx;
- display: flex;
- align-items: center;
- .member-avatar {
- width: 88rpx;
- height: 88rpx;
- border-radius: 24rpx;
- margin-right: 24rpx;
- flex-shrink: 0;
- }
-
- .member-avatar--male {
- background-color: #C6E6FF;
- }
-
- .member-avatar--female {
- background-color: #FFD5E3;
- }
-
- .member-info {
- flex: 1;
-
- .member-name-row {
- display: flex;
- align-items: center;
- margin-bottom: 16rpx;
-
- .member-name {
- color: #252535;
- height: 32rpx;
- font-size: 32rpx;
- line-height: 32rpx;
- margin-right: 16rpx;
- }
-
- .member-type-tag {
- height: 40rpx;
- padding: 0 10rpx;
- font-size: 24rpx;
- line-height: 40rpx;
- border-radius: 8rpx;
- color: #FFFFFF;
- }
-
- .member-type-tag--self {
- background-color: #1385FA;
- }
-
- .member-type-tag--employee {
- background-color: #10B981;
- }
-
- .member-type-tag--family {
- background-color: #F59E0B;
- }
- }
-
- .member-sub {
- color: #808080;
- height: 26rpx;
- font-size: 26rpx;
- line-height: 26rpx;
- }
- }
-
- .member-right {
+ .member-top {
+ width: 100%;
display: flex;
- flex-direction: column;
- align-items: flex-end;
+ align-items: center;
+
+ .member-avatar {
+ width: 88rpx;
+ height: 88rpx;
+ overflow: hidden;
+ border-radius: 24rpx;
+ margin-right: 24rpx;
+
+ &.member-avatar--male {
+ background-color: #C6E6FF;
+ }
+
+ &.member-avatar--female {
+ background-color: #FFD5E3;
+ }
+ }
+
+ .member-info {
+ width: 0;
+ flex: 1;
+
+ .member-name-row {
+ width: 100%;
+ height: 36rpx;
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ margin-bottom: 14rpx;
+
+ .member-name {
+ color: #252535;
+ height: 36rpx;
+ font-size: 32rpx;
+ font-weight: bolder;
+ line-height: 36rpx;
+ margin-right: 16rpx;
+
+ text {
+ color: #808080;
+ font-weight: normal;
+ font-size: 24rpx;
+ }
+ }
+
+ .member-type-tag {
+ color: #FFFFFF;
+ height: 36rpx;
+ padding: 0 10rpx;
+ font-size: 24rpx;
+ line-height: 36rpx;
+ border-radius: 8rpx;
+ }
+
+ .member-type-tag--self {
+ background-color: #1385FA;
+ }
+ }
+
+ > .member-name {
+ color: #252535;
+ height: 40rpx;
+ font-size: 32rpx;
+ font-weight: bolder;
+ line-height: 40rpx;
+ margin-bottom: 10rpx;
+ }
+
+ .member-sub {
+ color: #808080;
+ height: 26rpx;
+ font-size: 26rpx;
+ line-height: 26rpx;
+ }
+ }
.member-sync {
height: 22rpx;
font-size: 22rpx;
line-height: 22rpx;
- margin-bottom: 16rpx;
- }
-
- .member-sync--done {
- color: #2AC79F;
- }
-
- .member-sync--pending {
- color: #F2994A;
- }
-
- .member-sync--deleted {
- color: #F24439;
- }
-
- .member-ops {
display: flex;
+ align-items: center;
- .op-edit {
- color: #77849E;
- height: 26rpx;
- font-size: 26rpx;
- line-height: 26rpx;
- margin-right: 24rpx;
+ > view:nth-of-type(1) {
+ width: 12rpx;
+ height: 12rpx;
+ border-radius: 50%;
+ margin-right: 8rpx;
}
- .op-delete {
- color: #F24439;
- height: 26rpx;
- font-size: 26rpx;
- line-height: 26rpx;
+ > view:nth-of-type(2) {
+ height: 22rpx;
+ font-size: 22rpx;
+ line-height: 22rpx;
}
+
+ &.member-sync--done {
+ color: #2AC79F;
+
+ > view:nth-of-type(1) {
+ background-color: #2AC79F;
+ }
+ }
+
+ &.member-sync--pending {
+ color: #F2994A;
+
+ > view:nth-of-type(1) {
+ background-color: #F2994A;
+ }
+ }
+ }
+ }
+
+ .member-divider {
+ width: 100%;
+ height: 2rpx;
+ background-color: #EAECF1;
+ margin: 24rpx 0;
+ }
+
+ .member-ops {
+ display: flex;
+ justify-content: flex-end;
+
+ .op-edit {
+ color: #77849E;
+ height: 26rpx;
+ font-size: 26rpx;
+ line-height: 26rpx;
+ margin-right: 60rpx;
+ }
+
+ .op-delete {
+ color: #F24439;
+ height: 26rpx;
+ font-size: 26rpx;
+ line-height: 26rpx;
}
}
}
diff --git a/miniprogram/pages/userManagement/userManagement.ts b/miniprogram/pages/userManagement/userManagement.ts
index 3f89b7e..0c06efa 100644
--- a/miniprogram/pages/userManagement/userManagement.ts
+++ b/miniprogram/pages/userManagement/userManagement.ts
@@ -7,13 +7,31 @@ Page({
model: 'BS-A100',
serial: 'BL2024B00321'
},
- memberCount: 4,
- members: [
- { id: 1, name: '张晓敏', gender: '男', age: 36, height: 172, type: '本人', typeClass: 'self', sync: '已同步', syncClass: 'done' },
- { id: 2, name: '李建国', gender: '男', age: 36, height: 182, type: '员工', typeClass: 'employee', sync: '已同步', syncClass: 'done' },
- { id: 3, name: '吉夏', gender: '女', age: 28, height: 165, type: '家庭用户', typeClass: 'family', sync: '未同步', syncClass: 'pending' },
- { id: 4, name: '张雪（他人添加）', gender: '女', age: 32, height: 158, type: '家庭用户', typeClass: 'family', sync: '已同步', syncClass: 'done' },
- { id: 5, name: '赵明亮', gender: '男', age: 32, height: 172, type: '员工', typeClass: 'employee', sync: '已删除未同步', syncClass: 'deleted' }
+ memberCount: 5,
+ hasData: true,
+ self: {
+ name: '张晓敏',
+ gender: '男',
+ age: 36,
+ height: 172,
+ sync: '已同步',
+ syncClass: 'done'
+ },
+ groups: [
+ {
+ title: '员工',
+ members: [
+ { id: 2, name: '李建国', gender: '男', age: 36, height: 182, sync: '已同步', syncClass: 'done' },
+ { id: 5, name: '赵明亮', gender: '男', age: 32, height: 172, sync: '已同步', syncClass: 'done' }
+ ]
+ },
+ {
+ title: '家庭用户',
+ members: [
+ { id: 3, name: '吉夏', gender: '女', age: 28, height: 165, sync: '已同步', syncClass: 'done' },
+ { id: 4, name: '张雪', gender: '女', age: 32, height: 158, sync: '未同步', syncClass: 'pending' }
+ ]
+ }
],
syncShow: false,
syncPercent: 0,
diff --git a/miniprogram/pages/userManagement/userManagement.wxml b/miniprogram/pages/userManagement/userManagement.wxml
index e68bac8..f685855 100644
--- a/miniprogram/pages/userManagement/userManagement.wxml
+++ b/miniprogram/pages/userManagement/userManagement.wxml
@@ -12,7 +12,7 @@
{{ device.connected ? '已连接' : '未连接' }}
- 型号：{{ device.model }}
+ 型号：{{ device.model }}
设备编号：{{ device.serial }}
@@ -29,26 +29,55 @@
-
+
-
-
-
+
+
+
+
- {{ item.name }}
- {{ item.type }}
+ {{ self.name }}
+ 本人
- {{ item.gender }}·{{ item.age }}岁 丨 {{ item.height }}cm
+ {{ self.gender }}·{{ self.age }}岁 丨 {{ self.height }}cm
-
- {{ item.sync }}
+
+
+ {{ self.sync }}
+
+
+
+
+ 删除
+
+
+
+
+
+ {{ group.title }}
+
+
+
+
+
+
+ {{ member.name }} （他人添加）
+
+ {{ member.gender }}·{{ member.age }}岁 丨 {{ member.height }}cm
+
+
+
+ {{ member.sync }}
+
+
+
编辑
删除
-
+