实名认证页面

src/assets/css/index.less

@@ -41,6 +41,9 @@ body #app {
 .orange{
   color: #f98f1a;
 }
+.blue{
+  color: #3974f6;
+}
 .flex{
   display: flex;
   .flex1{

src/assets/css/vant-theme.less

@@ -1,4 +1,4 @@
-@blue: #4F94FF;
+@blue: #3974f6;
 @gray-5: #C1C1C1;
 @border-color: #EAEAEA;
 @black: #333333;

src/views/home/index.less

@@ -5,10 +5,13 @@
     height: 160px;
 }
 .content{
-    position: relative;
+    position: fixed;
-    top: -150px;
+    width: 100%;
+    height: 100%;
+    top: 0;
     padding: 0 15px;
     box-sizing: border-box;
+    overflow-y: scroll;
 }
 .notice_time{
     padding-right: 5px;

src/views/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="pages">
         <div class="blueBg"></div>
         <div class="content">
             <div class="flex flex-end">

src/views/register/index.less

@@ -12,3 +12,7 @@
 .gender {
   display: flex;
 }
+
+.button{
+  margin-top: 35px;
+}

src/views/register/index.vue

@@ -1,20 +1,38 @@
 <template>
-  <div class="container">
+  <div class="" style="padding-top: 0;">
-    <div class="block">
+    <van-tabs @click="onClickTab" :active="active">
-      <van-field v-model="phone" label="手机号" placeholder="请输入" required/>
+      <van-tab title="手机号注册">
-      <van-field v-model="smsCode" label="验证码" placeholder="请输入" required>
+        <div class="block container">
-        <template #button>
+          <van-field v-model="phone" label="手机号" placeholder="请输入" required />
-          <van-button v-if="time === 60" round size="mini" type="info" @click="getCode">获取验证码</van-button>
+          <van-field v-model="smsCode" label="验证码" placeholder="请输入" required>
-          <van-button v-else disabled round size="mini" type="info">{{ time }}s后重试</van-button>
+            <template #button>
-        </template>
+              <span v-if="time === 60" @click="getCode" class="blue">获取验证码</span>
-      </van-field>
+              <span v-else class="blue">{{ time }}s后重试</span>
-    </div>
+            </template>
-    <van-button block color="linear-gradient(to right, #81B5FB, #3E92FF)" round @click="submit">注册</van-button>
+          </van-field>
+          <van-button block class="button" type="info" round @click="submit">注册</van-button>
+        </div>
+      </van-tab>
+      <van-tab title="实名认证">
+        <div class="block container">
+          <van-field v-model="name" label="真实姓名" placeholder="请输入" required />
+          <van-field v-model="idCard" label="身份证号" placeholder="请输入" required/>
+          <van-field v-model="phone" label="手机号" placeholder="请输入" required />
+          <van-field v-model="smsCode" label="验证码" placeholder="请输入" required>
+            <template #button>
+              <span v-if="time === 60" @click="getCode" class="blue">获取验证码</span>
+              <span v-else class="blue">{{ time }}s后重试</span>
+            </template>
+          </van-field>
+          <van-button block class="button" type="info" round @click="submit">提交</van-button>
+        </div>
+      </van-tab>
+    </van-tabs>
   </div>
 </template>
 
 <script>
-import {register, sendsmscode} from '@/api/user'
+import { register, sendsmscode } from '@/api/user'
 
 var leftTime
 export default {
@@ -28,7 +46,10 @@ export default {
       smsCode: '',
       surName: '',
       gender: '',
-      userId: ''
+      userId: '',
+      active:0,
+      idCard:null,
+      name:null,
     }
   },
 
@@ -39,6 +60,9 @@ export default {
     clearInterval(leftTime)
   },
   methods: {
+    onClickTab(val){
+
+    },
     init() {
       this.type = this.$route.params.type ? this.$route.params.type : ''
       this.userInfo = this.$store.state.app.userInfo