feat(login): 添加国家地区选择功能并创建实名认证页面

- 在登录页面添加国家地区选择功能,点击可跳转到国家地区选择页面
- 新增实名认证页面,包括大陆居民和非大陆居民两个选项卡
- 实名认证页面采用vant组件库,样式进行了自定义
This commit is contained in:
xingyy 2025-01-10 14:00:42 +08:00
parent afe57c16f7
commit 40efacf65a
2 changed files with 44 additions and 2 deletions

View File

@ -1,7 +1,12 @@
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
function goToPage() {
router.push('/countryRegion');
}
const phoneNum=ref('')
const code=ref('')
const pane=ref(0)
</script>
@ -12,7 +17,7 @@ const pane=ref(0)
</div>
<div v-if="pane===0">
<div class="">
<div class="w-full flex justify-between">
<div class="w-full flex justify-between" @click="goToPage">
<div class="text-[16px] text-[#000]">
中国大陆
</div>

View File

@ -0,0 +1,37 @@
<script setup>
</script>
<template>
<div class="px-[31px] bg-#fff w-100vw h-100vh pt-[46px]">
<van-tabs>
<van-tab title="大陆居民" class="pt-[80px]">
<div class="text-[#BDBDBD] text-[16px] mb-[34px]">请填写身份证相关信息</div>
<div class="mb-[100px]">
<div class="border-b-[1.7px] mt-[8px]">
<van-field label="身份证号" clearable placeholder="请输入身份证号"></van-field>
</div>
<div class="border-b-[1.7px] mt-[8px]">
<van-field label="姓名" clearable placeholder="请输入姓名"></van-field>
</div>
</div>
<div class="flex justify-between">
<van-button style="width: 151px;height: 48px" color="#E9F1F8">
<div class="text-#2B53AC text-16px">取消</div>
</van-button>
<van-button style="width: 151px;height: 48px" color="#2B53AC">
<div class="text-#FFFFFF text-16px">确定</div>
</van-button>
</div>
</van-tab>
<van-tab title="非大陆居民">内容 2</van-tab>
</van-tabs>
</div>
</template>
<style scoped>
:deep(.van-tabs__line){
height: 2px;
width: 107px;
}
</style>