From cd11d711d55e1b6c4c624d5bf495b5b6bcb89ff7 Mon Sep 17 00:00:00 2001 From: 17792275749 <812100002@qq.com> Date: Wed, 19 Aug 2026 09:13:37 +0800 Subject: [PATCH] =?UTF-8?q?style(data):=20=E9=80=89=E6=8B=A9=E6=88=90?= =?UTF-8?q?=E5=91=98=E6=8A=BD=E5=B1=89=E5=AF=B9=E9=BD=90=E8=AE=BE=E8=AE=A1?= =?UTF-8?q?=E7=A8=BF=E6=A0=B7=E5=BC=8F=E5=B9=B6=E5=A1=AB=E5=85=85=E9=9D=99?= =?UTF-8?q?=E6=80=81=E6=88=90=E5=91=98=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.7 --- miniprogram/app.json | 6 +- .../selectMemberDrawer.less | 273 ++++++++---------- .../selectMemberDrawer/selectMemberDrawer.ts | 65 ++++- .../selectMemberDrawer.wxml | 65 ++--- miniprogram/pages/data/data.wxml | 1 - 5 files changed, 211 insertions(+), 199 deletions(-) diff --git a/miniprogram/app.json b/miniprogram/app.json index 39d6cb9..81094e7 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -1,12 +1,12 @@ { "pages": [ - "pages/connectedDevice/connectedDevice", - "pages/login/login", + "pages/data/data", + "pages/login/login", "pages/supplementPersonal/supplementPersonal", + "pages/connectedDevice/connectedDevice", "pages/connectedWifi/connectedWifi", "pages/home/home", "pages/equipment/equipment", - "pages/data/data", "pages/my/my" ], "usingComponents": { diff --git a/miniprogram/components/selectMemberDrawer/selectMemberDrawer.less b/miniprogram/components/selectMemberDrawer/selectMemberDrawer.less index ce22bae..a1e47b1 100644 --- a/miniprogram/components/selectMemberDrawer/selectMemberDrawer.less +++ b/miniprogram/components/selectMemberDrawer/selectMemberDrawer.less @@ -21,7 +21,6 @@ bottom: 0; left: 0; width: 100%; - /* 最大高度约 75% 屏幕 */ height: 85vh; background-color: #FFFFFF; border-radius: 24rpx 24rpx 0 0; @@ -36,36 +35,40 @@ } } -/* 标题栏 */ +/* 标题栏（标题居中，关闭按钮绝对定位右侧） */ .drawer-header { + position: relative; width: 100%; - height: 32rpx; - padding: 0 30rpx; + height: 124rpx; box-sizing: border-box; display: flex; align-items: center; - justify-content: space-between; + justify-content: center; .drawer-title { color: #252535; - height: 32rpx; - font-size: 32rpx; - font-weight: 700; - line-height: 32rpx; + font-size: 36rpx; + font-weight: bolder; + line-height: 36rpx; } - /* 关闭按钮 */ - + /* 关闭按钮：圆形浅灰底 + 灰色 × */ .drawer-close { - width: 32rpx; - height: 32rpx; + position: absolute; + right: 32rpx; + top: 50%; + transform: translateY(-50%); + width: 48rpx; + height: 48rpx; + border-radius: 50%; + background-color: #F1F5F9; display: flex; align-items: center; justify-content: center; .drawer-close-icon { - width: 28rpx; - height: 28rpx; + width: 26rpx; + height: 26rpx; position: relative; &::before, @@ -76,7 +79,7 @@ left: 50%; width: 100%; height: 3rpx; - background-color: #252535; + background-color: #77849E; border-radius: 2rpx; } @@ -93,162 +96,122 @@ /* 顶部分隔线 */ .drawer-divider { - width: 690rpx; + width: 100%; height: 2rpx; - background-color: #EAEDF1; - margin: 39rpx 30rpx 0; + background-color: #EAECFA; flex-shrink: 0; } -/* 用户滚动列表 */ -.drawer-list { - flex: 1; - overflow: hidden; - padding-bottom: env(safe-area-inset-bottom); -} - -/* 用户行 */ -.member-item { +.scrollViewContent { width: 100%; - height: 90rpx; - padding: 0 30rpx; + height: 100%; box-sizing: border-box; - display: flex; - flex-direction: row; - align-items: center; - margin-top: 24rpx; - /* 有图片头像 */ - - .member-avatar { - width: 90rpx; - height: 90rpx; - border-radius: 24rpx; - flex-shrink: 0; - - &--selected { - border: 3rpx solid #50A6FF; - } - } - - /* 纯色占位头像 */ - - .member-avatar-placeholder { - width: 90rpx; - height: 90rpx; - border-radius: 24rpx; - flex-shrink: 0; - - /* 男：蓝色 */ - - &--male { - background-color: #C6E6FF; - } - - /* 女：粉色 */ - - &--female { - background-color: #FFD5E3; - } - - /* 选中男 */ - - &--selected-male { - border: 3rpx solid #50A6FF; - width: 96rpx; - height: 96rpx; - margin: -3rpx 0 0 -3rpx; - } - - /* 选中女 */ - - &--selected-female { - border: 3rpx solid #FF8FB5; - width: 96rpx; - height: 96rpx; - margin: -3rpx 0 0 -3rpx; - } - } - - /* 姓名 + 副标题 */ - - .member-info { - flex: 1; - height: 78rpx; + /* 用户行 */ + .member-item { + width: 100%; + padding: 24rpx 0; display: flex; - flex-direction: column; - justify-content: space-between; - margin-left: 23rpx; + flex-direction: row; + align-items: center; + border-bottom: 2rpx solid #EAECF1; - .member-name { - color: #333333; - font-size: 32rpx; - font-weight: 500; - line-height: 32rpx; - white-space: nowrap; + /* 有图片头像 */ + .member-avatar { + width: 88rpx; + height: 88rpx; + overflow: hidden; + margin-right: 15rpx; + border-radius: 24rpx; + + &--selected { + border: 3rpx solid #50A6FF; + } } - .member-sub { - color: #77849E; - font-size: 26rpx; - line-height: 34rpx; - white-space: nowrap; + /* 纯色占位头像 */ + .member-avatar-placeholder { + width: 88rpx; + height: 88rpx; + overflow: hidden; + border-radius: 24rpx; + margin-right: 15rpx; + + /* 男：蓝色 */ + &--male { + background-color: #C6E6FF; + } + + /* 女：粉色 */ + &--female { + background-color: #FFD5E3; + } + + /* 选中男 */ + &--selected-male { + border: 3rpx solid #50A6FF; + width: 94rpx; + height: 94rpx; + margin: -3rpx 0 0 -3rpx; + } + + /* 选中女 */ + &--selected-female { + border: 3rpx solid #FF8FB5; + width: 94rpx; + height: 94rpx; + margin: -3rpx 0 0 -3rpx; + } } - } - .member-type { - height: 40rpx; - flex-shrink: 0; + /* 姓名 + 副标题 */ + .member-info { + flex: 1; + width: 0; - .member-type-tag { + .member-name { + color: #252535; + width: 100%; + height: 32rpx; + font-size: 32rpx; + font-weight: bolder; + line-height: 32rpx; + margin-bottom: 16rpx; + } + + .member-sub { + color: #808080; + width: 100%; + height: 26rpx; + font-size: 26rpx; + line-height: 26rpx; + } + } + + .member-type { height: 40rpx; - padding: 0 14rpx; - font-size: 22rpx; - line-height: 40rpx; - border-radius: 6rpx; - } + flex-shrink: 0; - .member-type-tag--self { - color: #1385FA; - background-color: rgba(19, 133, 250, 0.12); - } + .member-type-tag { + height: 40rpx; + padding: 0 10rpx; + font-size: 24rpx; + line-height: 40rpx; + border-radius: 8rpx; + color: #FFFFFF; + } - .member-type-tag--employee { - color: #10B981; - background-color: rgba(16, 185, 129, 0.12); - } + .member-type-tag--self { + background-color: #1385FA; + } - .member-type-tag--family { - color: #F59E0B; - background-color: rgba(245, 158, 11, 0.12); + .member-type-tag--employee { + background-color: #10B981; + } + + .member-type-tag--family { + background-color: #F59E0B; + } } } -} - -/* 行间水平分隔线 */ -.member-separator { - width: 690rpx; - height: 2rpx; - background-color: #EAEDF1; - margin: 24rpx 30rpx 0; -} - -/* 空态占位 */ -.drawer-empty { - display: flex; - flex-direction: column; - align-items: center; - padding-top: 80rpx; - - .drawer-empty-icon { - width: 193rpx; - height: 138rpx; - margin-bottom: 30rpx; - } - - .drawer-empty-text { - color: #808080; - font-size: 28rpx; - line-height: 28rpx; - } -} +} \ No newline at end of file diff --git a/miniprogram/components/selectMemberDrawer/selectMemberDrawer.ts b/miniprogram/components/selectMemberDrawer/selectMemberDrawer.ts index e54abb8..77643d8 100644 --- a/miniprogram/components/selectMemberDrawer/selectMemberDrawer.ts +++ b/miniprogram/components/selectMemberDrawer/selectMemberDrawer.ts @@ -30,11 +30,6 @@ Component({ type: Boolean, value: false }, - /** 数据来源模式：addMember=新增用户选择 / history=历史数据切换用户 */ - source: { - type: String, - value: 'addMember' - }, /** 需要排除的用户 ID（history 模式下排除当前查看的用户） */ excludeUserId: { type: String, @@ -47,8 +42,64 @@ Component({ innerShow: false, /** 控制 --visible 类，触发 CSS transition */ animVisible: false, - /** 用户列表（组件内部拉取） */ - members: [] as ExistingMember[] + /** 用户列表（静态假数据填充，后续接真实接口替换） */ + members: [ + { + id: '1', + name: '张晓敏', + gender: '男', + age: 36, + height: 170, + weight: 89.6, + idCard: '', + relationType: 1, + selected: false + }, + { + id: '2', + name: '李晓华', + gender: '女', + age: 34, + height: 162, + weight: 52, + idCard: '', + dataType: 1, + selected: false + }, + { + id: '3', + name: '王建军', + gender: '男', + age: 40, + height: 175, + weight: 68, + idCard: '', + dataType: 1, + selected: false + }, + { + id: '4', + name: '陈静', + gender: '女', + age: 28, + height: 158, + weight: 48, + idCard: '', + dataType: 0, + selected: false + }, + { + id: '5', + name: '刘洋', + gender: '男', + age: 30, + height: 180, + weight: 72, + idCard: '', + dataType: 0, + selected: false + } + ] as ExistingMember[] }, observers: { diff --git a/miniprogram/components/selectMemberDrawer/selectMemberDrawer.wxml b/miniprogram/components/selectMemberDrawer/selectMemberDrawer.wxml index 13594ee..2c8d595 100644 --- a/miniprogram/components/selectMemberDrawer/selectMemberDrawer.wxml +++ b/miniprogram/components/selectMemberDrawer/selectMemberDrawer.wxml @@ -7,7 +7,7 @@ - 选择已有用户 + 切换用户 @@ -18,40 +18,39 @@ - - - - - - - - - - + + + + + + + + + + + - - - {{ item.name }} - {{ item.gender }}·{{ item.age }}岁 丨 {{ item.height }}cm + + + {{ item.name }} + {{ item.gender }}·{{ item.age }}岁 丨 {{ item.height }}cm + + + + + 本人 + + + 员工 + + + 家庭用户 + + - - - - 本人 - - - 员工 - - - 家庭用户 - - - - - - - + + diff --git a/miniprogram/pages/data/data.wxml b/miniprogram/pages/data/data.wxml index 7f7c50d..83b8156 100644 --- a/miniprogram/pages/data/data.wxml +++ b/miniprogram/pages/data/data.wxml @@ -85,7 +85,6 @@