84 lines
2.1 KiB
Vue
84 lines
2.1 KiB
Vue
|
|
|
|
<template>
|
|
<div class="container">
|
|
<custom-title class="title-block" title="人脸核验">
|
|
</custom-title>
|
|
<div class="main">
|
|
<div class="content1">
|
|
身份证认证
|
|
</div>
|
|
<div class="content2">
|
|
<display-box>
|
|
<template #l1>
|
|
<div class="box-left">
|
|
真实姓名
|
|
</div>
|
|
</template>
|
|
<template #r1>
|
|
<div class="box-right">
|
|
<input type="text" v-model="idInfo.name" placeholder="请填写您的真实姓名" placeholder-style="color:#DBDBDB;font-size:24rpx"/>
|
|
</div>
|
|
</template>
|
|
<template #l2>
|
|
<div class="box-left">
|
|
身份证号码
|
|
</div>
|
|
</template>
|
|
<template #r2>
|
|
<div class="box-right">
|
|
<input type="text" v-model="idInfo.idCard" placeholder="填写您的身份证号码" placeholder-style="color:#DBDBDB;font-size:24rpx"/>
|
|
</div>
|
|
</template>
|
|
</display-box>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import displayBox from '../../components/display-box/index.vue'
|
|
import {ref} from "vue";
|
|
const idInfo=ref({
|
|
name:'',
|
|
idCard:''
|
|
})
|
|
const validateIDCardNumber=(idNumber)=> {
|
|
const regExpMainland = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
|
|
return regExpMainland.test(idNumber);
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.container{
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
.main{
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
padding: 0rpx 42rpx 0 42rpx;
|
|
width: 100vw;
|
|
flex: 1;
|
|
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
|
|
background-size: 100%;
|
|
.content2{
|
|
margin-top: 38rpx;
|
|
.box-left{
|
|
font-size: 24rpx;
|
|
color: #000;
|
|
}
|
|
}
|
|
.content1{
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 68rpx;
|
|
border-radius: 24rpx;
|
|
height: 82rpx;
|
|
background-color: #B1292E;
|
|
}
|
|
}
|
|
}
|
|
</style>
|