diff --git a/miniprogram/components/selectMemberDrawer/selectMemberDrawer.less b/miniprogram/components/selectMemberDrawer/selectMemberDrawer.less index 6fc6ca1..13a94c3 100644 --- a/miniprogram/components/selectMemberDrawer/selectMemberDrawer.less +++ b/miniprogram/components/selectMemberDrawer/selectMemberDrawer.less @@ -41,31 +41,32 @@ height: 6rpx; background-color: #77849E; border-radius: 3rpx; - margin: 32rpx auto 40rpx; + margin: 32rpx auto 0; } /* 标题栏 */ .drawer-header { width: 100%; - height: 32rpx; - padding: 0 30rpx; + height: 100rpx; + padding: 30rpx; box-sizing: border-box; display: flex; - align-items: center; + flex-wrap: nowrap; justify-content: space-between; + border-bottom: 2rpx solid #EAEDF1; .drawer-title { color: #252535; - height: 32rpx; + height: 40rpx; font-size: 32rpx; - font-weight: 700; - line-height: 32rpx; + font-weight: bolder; + line-height: 40rpx; } /* 关闭按钮 */ .drawer-close { - width: 32rpx; - height: 32rpx; + width: 40rpx; + height: 40rpx; display: flex; align-items: center; justify-content: center; @@ -98,160 +99,125 @@ } } -/* 顶部分隔线 */ -.drawer-divider { - width: 690rpx; - height: 2rpx; - background-color: #EAEDF1; - margin: 39rpx 30rpx 0; - flex-shrink: 0; -} - /* 用户滚动列表 */ -.drawer-list { +.drawer-user-list { flex: 1; overflow: hidden; - padding-bottom: env(safe-area-inset-bottom); } -/* 用户行 */ -.member-item { - width: 100%; - height: 90rpx; +.scrollViewContent { + width: 100%; padding: 0 30rpx; 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; + /* 用户行 */ + .member-item { + width: 100%; + display: flex; + flex-wrap: nowrap; + align-items: center; + padding: 24rpx 0; + border-bottom: 2rpx solid #EAEDF1; - &--selected { - border: 3rpx solid #50A6FF; - } - } + /* 有图片头像 */ + .member-avatar { + width: 90rpx; + height: 90rpx; + border-radius: 24rpx; + flex-shrink: 0; - /* 纯色占位头像 */ - .member-avatar-placeholder { - width: 90rpx; - height: 90rpx; - border-radius: 24rpx; - flex-shrink: 0; + &--selected { + border: 3rpx solid #50A6FF; + } + } - /* 男:蓝色 */ - &--male { - background-color: #C6E6FF; - } + /* 纯色占位头像 */ + .member-avatar-placeholder { + width: 90rpx; + height: 90rpx; + border-radius: 24rpx; + flex-shrink: 0; - /* 女:粉色 */ - &--female { - background-color: #FFD5E3; - } + /* 男:蓝色 */ + &--male { + background-color: #C6E6FF; + } - /* 选中男 */ - &--selected-male { - border: 3rpx solid #50A6FF; - width: 96rpx; - height: 96rpx; - margin: -3rpx 0 0 -3rpx; - } + /* 女:粉色 */ + &--female { + background-color: #FFD5E3; + } - /* 选中女 */ - &--selected-female { - border: 3rpx solid #FF8FB5; - width: 96rpx; - height: 96rpx; - margin: -3rpx 0 0 -3rpx; - } - } + /* 选中男 */ + &--selected-male { + border: 3rpx solid #50A6FF; + width: 96rpx; + height: 96rpx; + margin: -3rpx 0 0 -3rpx; + } - /* 姓名 + 副标题 */ - .member-info { - flex: 1; - height: 78rpx; - display: flex; - flex-direction: column; - justify-content: space-between; - margin-left: 23rpx; + /* 选中女 */ + &--selected-female { + border: 3rpx solid #FF8FB5; + width: 96rpx; + height: 96rpx; + margin: -3rpx 0 0 -3rpx; + } + } - .member-name { - color: #333333; - height: 32rpx; - font-size: 32rpx; - font-weight: 500; - line-height: 32rpx; - white-space: nowrap; - } + /* 姓名 + 副标题 */ + .member-info { + flex: 1; + height: 78rpx; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-left: 23rpx; - .member-sub { - color: #77849E; - height: 34rpx; - font-size: 26rpx; - line-height: 34rpx; - white-space: nowrap; - } - } + .member-name { + color: #333333; + height: 32rpx; + font-size: 32rpx; + font-weight: 500; + line-height: 32rpx; + white-space: nowrap; + } - .member-type { - height: 40rpx; - flex-shrink: 0; + .member-sub { + color: #77849E; + height: 34rpx; + font-size: 26rpx; + line-height: 34rpx; + white-space: nowrap; + } + } - .member-type-tag { - height: 40rpx; - padding: 0 14rpx; - font-size: 22rpx; - line-height: 40rpx; - border-radius: 6rpx; - } + .member-type { + height: 40rpx; + flex-shrink: 0; - .member-type-tag--self { - color: #1385FA; - background-color: rgba(19, 133, 250, 0.12); - } + .member-type-tag { + height: 40rpx; + padding: 0 14rpx; + font-size: 22rpx; + line-height: 40rpx; + border-radius: 6rpx; + } - .member-type-tag--employee { - color: #10B981; - background-color: rgba(16, 185, 129, 0.12); - } + .member-type-tag--self { + color: #1385FA; + background-color: rgba(19, 133, 250, 0.12); + } - .member-type-tag--family { - color: #F59E0B; - background-color: rgba(245, 158, 11, 0.12); - } - } -} - -/* 行间水平分隔线 */ -.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; - height: 28rpx; - font-size: 28rpx; - line-height: 28rpx; - } + .member-type-tag--employee { + color: #10B981; + background-color: rgba(16, 185, 129, 0.12); + } + + .member-type-tag--family { + color: #F59E0B; + background-color: rgba(245, 158, 11, 0.12); + } + } + } } diff --git a/miniprogram/components/selectMemberDrawer/selectMemberDrawer.wxml b/miniprogram/components/selectMemberDrawer/selectMemberDrawer.wxml index 2c939ef..67e24da 100644 --- a/miniprogram/components/selectMemberDrawer/selectMemberDrawer.wxml +++ b/miniprogram/components/selectMemberDrawer/selectMemberDrawer.wxml @@ -1,69 +1,63 @@ - - + + - - - - + + + + - - - 选择已有用户 - - - - + + + 选择已有用户 + + + + - - + + + + + + + + + + + + + + - - - - - - - - - - - - + + + {{ item.name }} + {{ item.gender }}·{{ item.age }}岁 丨 {{ item.height }}cm + - - - {{ item.name }} - {{ item.gender }}·{{ item.age }}岁 丨 {{ item.height }}cm - + + + 本人 + + + 员工 + + + 家庭用户 + + + + + + + - - - 本人 - - - 员工 - - - 家庭用户 - - - - - - - - - - - - - - - 暂无可选用户 - - - - + + + + + + + \ No newline at end of file