uni-ticket-system/src/pages/facial/index.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>