| | |
| | | <view class="agreement-checkbox"> |
| | | <checkbox-group @change="onAgreementChange"> |
| | | <label class="checkbox-label"> |
| | | <checkbox :checked="agreedToPolicy" value="agreed" color="#007AFF" style="margin-top: 0;" /> |
| | | <checkbox :checked="agreedToPolicy" value="agreed" color="#007AFF" class="round-checkbox" style="margin-top: 0;" /> |
| | | <text class="agreement-text"> |
| | | <text class="text-grey1">同意</text> |
| | | <text @click.stop="handleUserAgrement" class="text-blue agreement-link">《用户协议》</text> |
| | |
| | | captchaEnabled: true, |
| | | // 用户注册开关 |
| | | register: false, |
| | | // 隐私政策同意状态(默认选中) |
| | | agreedToPolicy: true, |
| | | // 隐私政策同意状态(默认未选中,需要用户主动勾选) |
| | | agreedToPolicy: false, |
| | | globalConfig: getApp().globalData.config, |
| | | loginForm: { |
| | | username: "", |
| | |
| | | vertical-align: middle; |
| | | } |
| | | |
| | | // 圆形复选框样式 |
| | | .round-checkbox { |
| | | border-radius: 50% !important; |
| | | } |
| | | |
| | | // 针对微信小程序的圆形样式 |
| | | ::v-deep .uni-checkbox-input, |
| | | ::v-deep .wx-checkbox-input { |
| | | border-radius: 50% !important; |
| | | } |
| | | |
| | | // 针对H5的圆形样式 |
| | | ::v-deep input[type="checkbox"] { |
| | | border-radius: 50% !important; |
| | | -webkit-appearance: none; |
| | | appearance: none; |
| | | width: 36rpx; |
| | | height: 36rpx; |
| | | border: 2rpx solid #d1d1d1; |
| | | background-color: #fff; |
| | | position: relative; |
| | | |
| | | &:checked { |
| | | background-color: #007AFF; |
| | | border-color: #007AFF; |
| | | |
| | | &::after { |
| | | content: ''; |
| | | position: absolute; |
| | | top: 50%; |
| | | left: 50%; |
| | | transform: translate(-50%, -50%); |
| | | width: 12rpx; |
| | | height: 12rpx; |
| | | background-color: #fff; |
| | | border-radius: 50%; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .agreement-text { |
| | | display: inline-flex; |
| | | align-items: center; |