.add-member { width: 100%; height: 100%; display: flex; flex-flow: column; /* 顶部浅蓝提示条 */ .tips { width: 100%; height: 56rpx; display: flex; margin-bottom: 24rpx; padding-left: 30rpx; align-items: center; box-sizing: border-box; background-color: rgba(19, 133, 250, 0.2); .tips-icon { color: #1385FA; 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 #1385FA; } .tips-text { color: #1385FA; height: 24rpx; font-size: 24rpx; line-height: 24rpx; } } .form { width: 100%; flex: 1; overflow: hidden; .scrollViewContent { width: 100%; padding: 0 30rpx; box-sizing: border-box; /* 顶部 tabs - 圆角卡片样式 */ .tabsDom { width: 100%; box-sizing: border-box; padding: 30rpx 30rpx 40rpx; border-radius: 16rpx 16rpx 0 0; background-color: #ffffff; .tabs { width: 100%; height: 80rpx; padding: 4rpx; display: flex; flex-wrap: nowrap; box-sizing: border-box; border-radius: 16rpx; background-color: #F3F5F8; .tab-item { color: #808080; flex: 1; height: 72rpx; font-size: 32rpx; text-align: center; line-height: 72rpx; box-sizing: border-box; border-radius: 16rpx; &.active { color: #1385FA; font-weight: bold; background-color: #FFFFFF; } } } } .selectWorkNo { width: 100%; margin-bottom: 30rpx; box-sizing: border-box; padding: 0 30rpx 40rpx; border-radius: 0 0 16rpx 16rpx; background-color: #ffffff; .selectWorkNoBtn { color: #FFFFFF; width: 580rpx; height: 88rpx; font-size: 32rpx; font-weight: bold; line-height: 88rpx; border-radius: 44rpx; text-align: center; margin: 0 auto; background-color: #1385FA; } } .workNoDesc { color: #B6B6B6; width: 100%; height: 24rpx; font-size: 24rpx; text-align: center; line-height: 24rpx; } .workNoNull { color: #F24439; margin: 56rpx auto 0; width: 640rpx; height: 88rpx; font-size: 28rpx; line-height: 88rpx; border-radius: 16rpx; text-align: center; background: rgba(242,68,57,0.12); } .workNoInfo { width: 100%; padding-bottom: 100rpx; .workNoInfo_ { width: 100%; margin-bottom: 20rpx; .workNoInfoTitle { color: #808080; width: 100%; height: 64rpx; font-size: 24rpx; line-height: 64rpx; } .workNoInfoContent { width: 100%; border-radius: 16rpx; box-sizing: border-box; padding: 40rpx 30rpx 30rpx; background-color: #FFFFFF; > view { width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; .form-row { width: 300rpx; } } } } } .familyInfo { } .form-row { width: 100%; margin-bottom: 40rpx; &:last-child { margin-bottom: 0; } } .form-label { width: 100%; height: 40rpx; display: flex; flex-wrap: nowrap; margin-bottom: 18rpx; .label-text { color: #252535; height: 40rpx; font-size: 28rpx; line-height: 40rpx; font-weight: bold; margin-right: 6rpx; } .label-star { color: #FF4D4F; height: 40rpx; font-weight: 500; font-size: 28rpx; line-height: 40rpx; } } .form-control { width: 100%; } /* 可输入区域 */ .form-input { width: 100%; height: 88rpx; padding: 0 30rpx; color: #252535; font-size: 26rpx; border-radius: 16rpx; box-sizing: border-box; background-color: #FFFFFF; border: 2rpx solid #E6E6EA; } .form-placeholder { color: #B6B6B6; font-size: 26rpx; } /* 日期选择器 */ .form-picker { width: 100%; height: 88rpx; padding: 0 30rpx; color: #252535; font-size: 26rpx; line-height: 88rpx; border-radius: 16rpx; box-sizing: border-box; background-color: #FFFFFF; border: 2rpx solid #E6E6EA; } .form-picker-placeholder { color: #B6B6B6; } /* 输入框 + 后缀容器(身高 cm / 体重 kg) */ .form-input-wrap { position: relative; width: 100%; .form-input-with-suffix { padding-right: 80rpx; } .form-suffix-inside { position: absolute; right: 30rpx; top: 0; height: 88rpx; color: #77849E; font-size: 26rpx; line-height: 88rpx; } } /* 只读区域(单位 / 性别 / 年龄 / 出生年月) */ .form-readonly { width: 100%; height: 88rpx; box-sizing: border-box; padding: 0 24rpx; background: #F6F6F6; border-radius: 16rpx; display: flex; align-items: center; border: 2rpx solid #E6E6EA; .readonly-text { color: #252535; font-size: 26rpx; } } .form-readonly-with-suffix { justify-content: space-between; .form-suffix { color: #77849E; height: 88rpx; font-size: 26rpx; line-height: 88rpx; } } /* 性别切换按钮(家庭用户) */ .gender-toggle { display: flex; gap: 24rpx; .gender-option { width: 300rpx; height: 88rpx; font-size: 28rpx; text-align: center; line-height: 88rpx; border-radius: 16rpx; box-sizing: border-box; color: #77849E; background-color: #FFFFFF; border: 2rpx solid #E6E6EA; } .gender-option-active { color: #FFFFFF; font-weight: bold; background-color: #1385FA; border-color: #1385FA; } } } /* 从已有用户中选择(蓝色描边幽灵按钮) */ // .ghost-btn { // color: #1385FA; // width: 580rpx; // height: 88rpx; // font-size: 32rpx; // font-weight: bold; // text-align: center; // line-height: 84rpx; // border-radius: 44rpx; // box-sizing: border-box; // border: 2rpx solid #1385FA; // margin: 0 auto; // } } /* 底部双按钮 */ .actions { width: 100%; height: 120rpx; padding: 0 55rpx; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; box-sizing: border-box; background-color: #FFFFFF; box-shadow: 0 2rpx 8rpx 0 rgba(19, 133, 250, 0.06); .btn-cancel { color: #1385FA; width: 300rpx; height: 88rpx; font-size: 32rpx; text-align: center; line-height: 84rpx; border-radius: 44rpx; box-sizing: border-box; border: 2rpx solid #1385FA; background-color: #FFFFFF; } .btn-primary { color: #FFFFFF; width: 300rpx; height: 88rpx; font-size: 32rpx; font-weight: bold; text-align: center; line-height: 88rpx; border-radius: 44rpx; background-color: #1385FA; } } }