feat: "国内邮箱登陆+忘记密码重置'

src/assets/language/en.json

@@ -1040,11 +1040,14 @@
     "usernameRequired": "Please enter the account name",
     "phone": "cell-phone number",
     "email": "mailbox",
+    "emailChina": "China mailbox",
+    "emailAbroad": "Mailbox",
     "phoneWordSpan": "Enter the mobile phone number when registering",
     "phoneLabel": "phone number",
     "phonePlaceholder": "Please enter your mobile number",
     "phoneRequired": "Please enter your mobile number",
     "emailWordSpan": "Enter the email address at the time of registration",
+    "emailWordSpanChina": "Enter the Chinese email address you used to register",
     "emailLabel": "mailbox",
     "emailPlaceholder": "Please enter your email address",
     "emailRequired": "Please enter your email address",
@@ -1080,6 +1083,7 @@
     "country": "Country/region",
     "chinese": "中国大陆",
     "other": "Abroad/HKMT",
+    "logonMode": "Logon mode",
     "phoneLabel": "Phone number",
     "phonePlaceholder": "Please enter your mobile number",
     "phoneRequired": "Please enter your mobile number",

src/assets/language/zh.json

@@ -1042,6 +1042,8 @@
     "usernameRequired": "请输入账号名称",
     "phone": "手机号",
     "email": "邮箱",
+    "emailChina": "国内邮箱",
+    "emailAbroad": "海外邮箱",
     "phoneWordSpan": "输入注册时的手机号",
     "phoneLabel": "手机号码",
     "phonePlaceholder": "请输入手机号码",
@@ -1082,9 +1084,12 @@
     "country": "国家/地区",
     "chinese": "中国大陆",
     "other": "海外/港澳台",
+    "logonMode": "注册方式",
     "phoneLabel": "手机号码",
     "phonePlaceholder": "请输入手机号码",
     "phoneRequired": "请输入手机号码",
+    "emailWordSpan": "输入注册海外账户邮箱",
+    "emailWordSpanChina": "输入注册时的国内邮箱",
     "seedVerCode": "发送验证码",
     "codeLabel": "短信验证码",
     "codePlaceholder": "请输入短信验证码",

src/views/forgetPassword.vue

@@ -4,69 +4,82 @@
     <s-header :name="$t('forgetPassword.header')" :noback="false"></s-header>
     <div class="forgetPasswordFormBox">
       <van-form @submit="forgetPasswordSubmit">
-        <van-field v-model="username" name="username" :placeholder="$t('forgetPassword.usernamePlaceholder')"
-                   :rules="[{ required: true, message: $t('forgetPassword.usernameRequired') }]" />
-        <span class="word1">{{ $t('forgetPassword.selectForgetPassword') }}</span>
+        <van-field
+          v-model="username"
+          name="username"
+          :placeholder="$t('forgetPassword.usernamePlaceholder')"
+          :rules="[{ required: true, message: $t('forgetPassword.usernameRequired') }]"
+        />
+        <span class="info2">{{$t('forgetPassword.selectForgetPassword')}}</span>
         <div class="van-cell van-field">
-
+          
           <div class="van-cell__value van-field__value radioBox">
             <van-radio-group v-model="ifForeign" direction="horizontal">
-              <van-radio name="0" icon-size="20px">{{ $t('forgetPassword.phone') }}</van-radio>
-              <van-radio name="1" icon-size="20px">{{ $t('forgetPassword.email') }}</van-radio>
+              <van-radio name="0" icon-size="18px">{{$t('forgetPassword.phone')}}</van-radio>
+              <van-radio name="2" icon-size="18px">{{$t('forgetPassword.emailChina')}}</van-radio>
+              <van-radio name="1" icon-size="18px">{{$t('forgetPassword.emailAbroad')}}</van-radio>
             </van-radio-group>
           </div>
         </div>
         <div v-if="ifForeign === '0'">
-          <span class="word2">{{ $t('forgetPassword.phoneWordSpan') }}</span>
-          <van-field v-model="phone" name="phone" type="tel" :placeholder="$t('forgetPassword.phonePlaceholder')"
-                     :rules="[{ required: true, message: $t('forgetPassword.phoneRequired') }]">
+          <span class="word2">{{$t('forgetPassword.phoneWordSpan')}}</span>
+          <van-field
+            v-model="phone"
+            name="phone"
+            type="tel"
+            :placeholder="$t('forgetPassword.phonePlaceholder')"
+            :rules="[{ required: true, message: $t('forgetPassword.phoneRequired') }]"
+          >
+            <template #button>
+              <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0">{{time === 0 ? $t('forgetPassword.seedVerCode') : time + '秒后可重发'}}</van-button>
+            </template>
+          </van-field>
+        </div>
+        <div v-if="ifForeign === '2'">
+          <span class="word2">{{$t('forgetPassword.emailWordSpanChina')}}</span>
+          <van-field
+              v-model="email"
+              name="email"
+              :placeholder="$t('forgetPassword.emailPlaceholder')"
+              :rules="[{ required: true, message: $t('forgetPassword.emailRequired') }]"
+          >
+            <template #button>
+              <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0">{{time === 0 ? $t('forgetPassword.seedVerCode') : time + '秒后可重发'}}</van-button>
+            </template>
           </van-field>
         </div>
         <div v-if="ifForeign === '1'">
-          <span class="word2">{{ $t('forgetPassword.emailWordSpan') }}</span>
-          <van-field v-model="email" name="email" :placeholder="$t('forgetPassword.emailPlaceholder')"
-                     :rules="[{ required: true, message: $t('forgetPassword.emailRequired') }]">
-
+          <span class="word2">{{$t('forgetPassword.emailWordSpan')}}</span>
+          <van-field
+            v-model="email"
+            name="email"
+            :placeholder="$t('forgetPassword.emailPlaceholder')"
+            :rules="[{ required: true, message: $t('forgetPassword.emailRequired') }]"
+          >
+            <template #button>
+              <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0">{{time === 0 ? $t('forgetPassword.seedVerCode') : time + '秒后可重发'}}</van-button>
+            </template>
           </van-field>
         </div>
-        <br>
-        <van-field v-model="code" name="code" :placeholder="$t('forgetPassword.codePlaceholder')"
-                   :rules="[{ required: true, message: $t('forgetPassword.codeRequired') }]">
-          <template #button>
-            <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0">
-              {{ time === 0 ? $t('forgetPassword.seedVerCode') : time + '秒后可重发' }}</van-button>
-          </template>
-        </van-field>
-        <van-button round type="primary" class="register" native-type="submit">
-          {{ $t('forgetPassword.registerButton') }}</van-button>
+        <van-field
+          v-model="code"
+          name="code"
+          :placeholder="$t('forgetPassword.codePlaceholder')"
+          :rules="[{ required: true, message: $t('forgetPassword.codeRequired') }]"
+        />
+        <van-button round type="primary" class="register" native-type="submit">{{$t('forgetPassword.registerButton')}}</van-button>
       </van-form>
     </div>
   </div>
 </template>
 
 <script>
-import {
-  ref,
-  reactive,
-  toRefs,
-  onMounted
-} from 'vue';
-import {
-  Toast
-} from 'vant';
-import {
-  setLocal,
-  getLocal,
-  styleUrl
-} from '@/common/js/utils';
+import { ref, reactive, toRefs, onMounted } from 'vue';
+import { Toast } from 'vant';
+import { setLocal, getLocal } from '@/common/js/utils';
 import sHeader from "@/components/SimpleHeader";
-import {
-  useRouter
-} from "vue-router";
-import {
-  sentForgetCode,
-  checkForgetCode
-} from '@/service/forgetPassword';
+import { useRouter } from "vue-router";
+import { sentForgetCode, checkForgetCode } from '@/service/forgetPassword';
 
 export default {
   setup() {
@@ -81,9 +94,7 @@ export default {
     const router = useRouter();
     // 发送验证码
     const seedVerCode = async () => {
-      const {
-        data
-      } = await sentForgetCode({
+      const { data } = await sentForgetCode({
         username: username.value,
         ifForeign: ifForeign.value,
         phoneOrEmail: ifForeign.value === '0' ? phone.value : email.value
@@ -92,37 +103,24 @@ export default {
         Toast('验证码发送成功');
         verCodeTime.time = 3 * 60;
         verCodeTimeInterval();
-      } else {
-        Toast.fail(data.message);
-      }
+      } else { Toast.fail(data.message); }
     }
     // 验证码发送成功开始3分钟倒计时
     const verCodeTimeInterval = () => {
       verCodeTime.time--;
       setLocal('forgetVerCodeTime', verCodeTime.time)
-      if (verCodeTime.time !== 0) {
-        setTimeout(() => {
-          verCodeTimeInterval();
-        }, 1000);
-      }
+      if (verCodeTime.time !== 0) { setTimeout(() => { verCodeTimeInterval(); }, 1000); }
     }
     // 验证-表单
     const forgetPasswordSubmit = async () => {
-      const {
-        data
-      } = await checkForgetCode({
+      const { data } = await checkForgetCode({
         ifForeign: ifForeign.value,
         phoneOrEmail: ifForeign.value === '0' ? phone.value : email.value,
         code: code.value
       });
       if (data.code === '00000') {
         Toast('校验成功');
-        router.push({
-          path: '/changepassword',
-          query: {
-            name: username.value
-          }
-        });
+        router.push({ path: '/changepassword', query:{name: username.value} });
       } else {
         Toast.fail(data.message);
       }
@@ -133,15 +131,8 @@ export default {
       verCodeTime.time = getLocal('forgetVerCodeTime');
       if (verCodeTime.time && verCodeTime.time !== '') {
         verCodeTime.time = parseInt(verCodeTime.time);
-        if (verCodeTime.time > 0) {
-          verCodeTimeInterval();
-        }
-      } else {
-        verCodeTime.time = 0;
-      }
-
-      // 加载样式
-      styleUrl('forgetPassword');
+        if (verCodeTime.time > 0) { verCodeTimeInterval(); }
+      } else { verCodeTime.time = 0; }
     });
 
     return {
@@ -155,12 +146,116 @@ export default {
       forgetPasswordSubmit
     };
   },
-  components: {
-    sHeader
-  },
+  components: { sHeader },
 };
 </script>
 
 <style lang="less" scoped>
 @import "../common/style/mixin";
+.forgetPassword {
+  .forgetPasswordFormBox {
+    width: 313px;
+    margin: 0 auto;
+    text-align: center;
+    .van-form {
+      .van-cell {
+        width: 313px;
+        height: 38px;
+        background-color: rgba(255, 255, 255, 1);
+        padding: 0;
+        color: rgba(168, 168, 197, 1);
+        font-size: 13px;
+        margin: 0 auto;
+        margin-top: 20px;
+        overflow: visible;
+        &::after { display: none;}
+		.van-field__button button { background-color: #8096ec; color: #fff; }
+        /deep/.van-field__control {
+          height: 38px;
+          line-height: 38px;
+          padding: 6px;
+          border-radius: 2px;
+          border: 0.5px solid rgba(185, 186, 208, 1);
+          &:-internal-autofill-previewed,
+          &:-internal-autofill-selected {
+            -webkit-text-fill-color: #323233 !important;
+            transition: background-color 5000s ease-in-out 0s !important;
+          }
+        }
+        .van-field__control::-webkit-input-placeholder {
+          color: rgba(168, 168, 197, 1);
+        }
+        .van-cell__value { width: 100%; flex: 0 auto; }
+        .van-field__label {
+          height: 38px;
+          line-height: 38px;
+          width: 5em;
+        }
+        .radioBox {
+          display: flex;
+          .van-radio-group--horizontal {
+            width: 100%;
+            justify-content: space-around;
+          }
+          .van-radio { overflow: visible; }
+          .van-radio__icon {
+            font-size: 13px;
+            .van-icon {
+              width: 12px;
+              height: 12px;
+              border-color: #4d6add;
+            }
+          }
+          .van-radio__label { line-height: 13px; }
+          .van-radio__icon--checked .van-icon-success{
+            border-color: #4d6add;
+            background: #4d6add;
+          }
+          .van-radio__icon--checked .van-icon-success::before {
+            content: '';
+            background: #fff;
+            width: 40%;
+            height: 40%;
+            position: absolute;
+            top: 30%;
+            left: 30%;
+            border-radius: 100%;
+          }
+          .van-radio__icon--checked + .van-radio__label { color: #4d6add; }
+        }
+      }
+    }
+    .info2 {
+      height: 13px;
+      overflow-wrap: break-word;
+      color: rgba(64, 77, 116, 1);
+      font-size: 13px;
+      text-align: left;
+      white-space: nowrap;
+      line-height: 13px;
+      display: block;
+      margin: 34px 0 0 0;
+    }
+    .word2 {
+      height: 13px;
+      overflow-wrap: break-word;
+      color: rgba(64, 77, 116, 1);
+      font-size: 13px;
+      text-align: left;
+      white-space: nowrap;
+      line-height: 13px;
+      display: block;
+      margin: 14px 0 0 0;
+    }
+    .register {
+      background-color: rgba(77, 106, 221, 1);
+      border-radius: 17px;
+      height: 34px;
+      width: 220px;
+      margin-top: 60px;
+      font-size: 15px;
+      font-family: PingFangSC-Medium;
+    }
+  }
+}
 </style>

src/views/register.vue

@@ -17,9 +17,11 @@
                    :rules="[{ required: true, message: $t('register.passwordRequired') }]"/>
         <br>
         <van-field v-model="passwordCheck" name="passwordCheck" type="password"
-                   :label="$t('register.passwordCheckLabel')" :placeholder="$t('register.passwordCheckPlaceholder')"
+                   :label="$t('register.passwordCheckLabel')"
+                   :placeholder="$t('register.passwordCheckPlaceholder')"
                    :rules="[{ required: true, message: $t('register.passwordCheckRequired') }]"/>
         <br>
+        <!-- 国家或地区 -->
         <div class="van-cell van-field">
           <div class="van-cell__title van-field__label"><span>{{ $t('register.country') }}</span></div>
           <div class="van-cell__value van-field__value radioBox">
@@ -29,68 +31,84 @@
             </van-radio-group>
           </div>
         </div>
-        <van-tabs v-model:active="active" type="card" swipeable v-if="ifForeign === '0'">
-          <van-tab :title="$t('register.phoneRegistration')">
-            <!-- 手机号码 -->
-            <van-field v-if="ifForeign === '0'" v-model="phone" name="phone" type="tel"
-                       :label="$t('register.phoneLabel')" :placeholder="$t('register.phonePlaceholder')"
-                       :rules="[{ required: ifForeign === '0', message: $t('register.phoneRequired') }]">
-            </van-field>
-            <br>
-            <!-- 短信验证码 -->
-            <van-field v-if="ifForeign === '0'" v-model="code" name="code" :label="$t('register.codeLabel')"
-                       :placeholder="$t('register.codePlaceholder')"
-                       :rules="[{ required: true, message: $t('register.codeRequired') }]">
-              <template #button v-if="ifForeign === '0'">
-                <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0">{{
-                    time === 0 ?
-                        $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
-                  }}
-                </van-button>
-              </template>
-            </van-field>
-          </van-tab>
-          <van-tab :title="$t('register.emailRegistration')">
-            <!-- 邮箱 -->
-            <van-field v-if="ifForeign === '0'" v-model="email" name="email" :label="$t('register.emailLabel')"
-                       :placeholder="$t('register.emailPlaceholder')"
-                       :rules="[{ required: ifForeign === '0', message: $t('register.emailRequired') }]">
-            </van-field>
-            <br>
-            <!-- 邮箱验证码 -->
-            <van-field v-if="ifForeign === '0'" v-model="code" name="code"
-                       :label="$t('register.emailCodeLabel')" :placeholder="$t('register.emailCodePlaceholder')"
-                       :rules="[{ required: true, message: $t('register.emailCodeRequired') }]">
-              <template #button v-if="ifForeign === '0'">
-                <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0">{{
-                    time === 0 ?
-                        $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
-                  }}
-                </van-button>
-              </template>
-            </van-field>
-          </van-tab>
-        </van-tabs>
-        <br v-if="ifForeign === '0'">
-        <van-field v-if="ifForeign === '1'" v-model="email" name="email" :label="$t('register.emailLabel')"
-                   :placeholder="$t('register.emailPlaceholder')"
-                   :rules="[{ required: ifForeign === '1', message: $t('register.emailRequired') }]">
-        </van-field>
-        <br v-if="ifForeign === '1'">
-        <!-- 海外，邮箱验证码 -->
-        <van-field v-if="ifForeign === '1'" v-model="code" name="code" :label="$t('register.emailCodeLabel')"
-                   :placeholder="$t('register.emailCodePlaceholder')"
-                   :rules="[{ required: true, message: $t('register.emailCodeRequired') }]">
-          <template #button v-if="ifForeign === '1'">
-            <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0">{{
-                time === 0
-                    ?
-                    $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
-              }}
-            </van-button>
-          </template>
-        </van-field>
-        <br v-if="ifForeign === '1'">
+        <!-- 中国 -->
+        <div v-if="ifForeign === '0'">
+          <div class="van-cell van-field">
+            <div class="van-cell__title van-field__label"><span>{{ $t('register.logonMode') }}</span></div>
+            <div class="van-cell__value van-field__value radioBox">
+              <van-radio-group v-model="logonMode" direction="horizontal">
+                <van-radio name="10" icon-size="18px" :value="0">{{ $t('register.phoneRegistration') }}</van-radio>
+                <van-radio name="11" icon-size="18px" :value="1">{{ $t('register.emailRegistration') }}</van-radio>
+              </van-radio-group>
+            </div>
+          </div>
+          <!-- 国内手机 -->
+          <van-field v-if="logonMode === '10'" v-model="phone" name="phone" type="tel"
+                     :label="$t('register.phoneLabel')"
+                     :placeholder="$t('register.phonePlaceholder')"
+                     :rules="[{ required: ifForeign === '0' && logonMode === '10', message: $t('register.phoneRequired') }]"
+          >
+            <template #button v-if="ifForeign === '0' && logonMode === '10'">
+              <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0 || phone.length === 0">{{
+                  time === 0 ?
+                      $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
+                }}
+              </van-button>
+            </template>
+          </van-field>
+          <br v-if="ifForeign === '0' && logonMode === '10'">
+          <!-- 短信验证码 -->
+          <van-field v-if="logonMode === '10'" v-model="code" name="code" :label="$t('register.codeLabel')"
+                     :placeholder="$t('register.codePlaceholder')"
+                     :rules="[{ required: true, message: $t('register.codeRequired') }]"/>
+          <!-- 国内邮箱 -->
+          <van-field v-if="logonMode === '11'" v-model="email" name="email"
+                     :label="$t('register.emailLabel')"
+                     :placeholder="$t('register.emailPlaceholder')"
+                     :rules="[
+                       { required: ifForeign === '0' && logonMode === '11', message: $t('register.emailRequired') },
+                       { pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/, message: '邮箱格式错误！'}
+                     ]"
+                    :minlength="3"
+                    :maxlength="20"
+          >
+            <template #button v-if="ifForeign === '0' && logonMode === '11'">
+              <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0 || email.length === 0">{{
+                  time === 0 ?
+                      $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
+                }}
+              </van-button>
+            </template>
+          </van-field>
+          <br v-if="ifForeign === '0' && logonMode === '11'">
+          <!-- 国内邮箱验证码 -->
+          <van-field v-if="logonMode === '11'" v-model="code" name="code"
+                     :label="$t('register.emailCodeLabel')"
+                     :placeholder="$t('register.emailCodePlaceholder')"
+                     :rules="[{ required: true, message: $t('register.emailCodeRequired') }]"/>
+        </div>
+        <!-- 海外 -->
+        <div v-if="ifForeign === '1'">
+          <!-- 海外邮箱 -->
+          <van-field v-if="ifForeign === '1'" v-model="email" name="email"
+                     :label="$t('register.emailLabel')"
+                     :placeholder="$t('register.emailPlaceholder')"
+                     :rules="[{ required: ifForeign === '1', message: $t('register.emailRequired') }]"
+          >
+            <template #button v-if="ifForeign === '1'">
+              <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0 || email.length === 0">{{
+                  time === 0 ?
+                      $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
+                }}
+              </van-button>
+            </template>
+          </van-field>
+          <br v-if="ifForeign === '1'">
+          <!-- 海外邮箱验证码 -->
+          <van-field v-if="ifForeign === '1'" v-model="code" name="code" :label="$t('register.emailCodeLabel')"
+                     :placeholder="$t('register.emailCodePlaceholder')"
+                     :rules="[{ required: true, message: $t('register.emailCodeRequired') }]"/>
+        </div>
         <!-- 提交验证信息 -->
         <van-button round type="primary" class="register" native-type="submit">{{
             $t('register.registerButton')
@@ -104,11 +122,11 @@
 import md5 from 'js-md5';
 import {ref, onMounted, reactive, toRefs} from 'vue';
 import {Toast} from 'vant';
-import {sentRegisterCode, tAdminSave} from '../service/register';
-import sHeader from '../components/SimpleHeader';
-import logiLogoImgUrl from "../assets/login/logo.png";
+import {sentRegisterCode, tAdminSave} from '@/service/register';
+import sHeader from '@/components/SimpleHeader';
+import logiLogoImgUrl from "@/assets/login/logo.png";
 import {useRouter} from 'vue-router';
-import {getLocal, setLocal, styleUrl} from '../common/js/utils';
+import {getLocal, setLocal, styleUrl} from '@/common/js/utils';
 
 
 export default {
@@ -119,6 +137,7 @@ export default {
     const password = ref('');
     const passwordCheck = ref('');
     const ifForeign = ref('0');
+    const logonMode = ref('10');
     const phone = ref('');
     const email = ref('');
     const code = ref('');
@@ -127,8 +146,8 @@ export default {
       time: 0
     });
 
-
     const router = useRouter();
+
     // 注册点击
     const registerSubmit = async () => {
       if (password.value !== passwordCheck.value) {
@@ -151,11 +170,20 @@ export default {
         Toast.fail(data.message);
       }
     };
+
+    let phoneOrEmail = '';
     // 发送验证码
     const seedVerCode = async () => {
+      if (ifForeign.value === '1') {
+        phoneOrEmail = email.value;
+      } else if (ifForeign.value === '0' && logonMode.value === '10') {
+        phoneOrEmail = phone.value;
+      } else {
+        phoneOrEmail = email.value;
+      }
       const {data} = await sentRegisterCode({
         ifForeign: ifForeign.value,
-        phoneOrEmail: ifForeign.value === '0' ? phone.value : email.value
+        phoneOrEmail: phoneOrEmail
       });
       console.log('seedVerCodeSuccess', data);
       if (data.code === '00000') {
@@ -232,12 +260,132 @@ export default {
       option2,
       signOptions,
       signinModel: 'aaabb',
-      active
+      active,
+      logonMode,
     }
   },
-  components: {sHeader}
+  components: { sHeader }
 }
 </script>
 <style lang="less" scoped>
 @import '../common/style/mixin';
+
+.registerPage {
+  .registerFormBox {
+    width: 100%;
+    margin-top: 38px;
+    text-align: center;
+
+    /deep/ .van-form {
+      .van-cell {
+        width: 90%;
+        height: 38px;
+        background-color: rgba(255, 255, 255, 1);
+        padding: 0;
+        color: rgba(168, 168, 197, 1);
+        font-size: 13px;
+        margin: 0 auto;
+        margin-top: 10px;
+        overflow: visible;
+
+        &::after {
+          display: none;
+        }
+
+        .van-field__button button {
+          background-color: #8096ec;
+          color: #fff;
+        }
+
+        .van-field__control {
+          height: 38px;
+          line-height: 38px;
+          padding: 6px;
+          border-radius: 2px;
+          border: 0.5px solid rgba(185, 186, 208, 1);
+
+          &:-internal-autofill-previewed,
+          &:-internal-autofill-selected {
+            -webkit-text-fill-color: #323233 !important;
+            transition: background-color 5000s ease-in-out 0s !important;
+          }
+        }
+
+        .van-field__control::-webkit-input-placeholder {
+          color: rgba(168, 168, 197, 1);
+        }
+
+        .van-cell__value {
+          width: 100%;
+          flex: 0 auto;
+        }
+
+        .van-field__label {
+			display: flex;
+          height: 38px;
+		  align-items: center;
+          // line-height: 38px;
+          width: 100px;
+        }
+
+        .radioBox {
+          display: flex;
+
+          .van-radio-group--horizontal {
+            width: 100%;
+            justify-content: space-around;
+          }
+
+          .van-radio {
+            overflow: visible;
+          }
+
+          .van-radio__icon {
+            font-size: 13px;
+
+            .van-icon {
+              width: 12px;
+              height: 12px;
+              border-color: #4d6add;
+            }
+          }
+
+          .van-radio__label {
+            line-height: 13px;
+          }
+
+          .van-radio__icon--checked .van-icon-success {
+            border-color: #4d6add;
+            background: #4d6add;
+          }
+
+          .van-radio__icon--checked .van-icon-success::before {
+            content: '';
+            background: #fff;
+            width: 40%;
+            height: 40%;
+            position: absolute;
+            top: 30%;
+            left: 30%;
+            border-radius: 100%;
+          }
+
+          .van-radio__icon--checked+.van-radio__label {
+            color: #4d6add;
+          }
+        }
+      }
+    }
+  }
+
+  .register {
+    background-color: rgba(77, 106, 221, 1);
+    border-radius: 17px;
+    height: 34px;
+    width: 220px;
+    margin-top: 60px;
+    font-size: 15px;
+    font-family: PingFangSC-Medium;
+  }
+}
 </style>