.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; padding: 0 30rpx; box-sizing: border-box; /* 表单卡片 */ .form-card { width: 100%; padding: 40rpx 30rpx; border-radius: 16rpx; box-sizing: border-box; margin-bottom: 40rpx; background-color: #FFFFFF; .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; } /* 输入框 + 后缀容器(身高 cm) */ .form-input-wrap { position: relative; width: 630rpx; .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: 630rpx; height: 88rpx; box-sizing: border-box; padding: 0 24rpx; background: #F6F6F6; border-radius: 16rpx; display: flex; align-items: center; .readonly-text { color: #252535; font-size: 26rpx; } .readonly-placeholder { color: #B6B6B6; font-size: 26rpx; } } .form-readonly-with-suffix { justify-content: space-between; .form-suffix { color: #77849E; height: 88rpx; font-size: 26rpx; line-height: 88rpx; } } } /* 从已有成员中选择(蓝色描边幽灵按钮) */ .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; } } }