submit

src/components/display-box/index.vue

@@ -28,7 +28,6 @@ const result = ref(groupObjectsByNumberKeys(slots))
 </script>
 <style scoped lang="scss">
 .content2{
-  margin-top: 38rpx;
   background-color: #fff;
   border-radius: 20rpx;
   padding-left: 18rpx;

src/pages/facial/index.vue

@@ -4,16 +4,80 @@
 <div class="container">
   <custom-title class="title-block" title="人脸核验">
   </custom-title>
-  <div class="main"></div>
+  <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 lang="ts">
+<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>

src/pages/home/index.vue

@@ -20,8 +20,8 @@
           <image :src="'../../static/112121@3x.png'"></image>
         </div>
         <div class="wrap1_2">首都博物馆门票</div>
-        <div class="wrap1_3">{{item.remainingQuantity===-1?'不限':item.remainingQuantity}}/{{item.issueQuantity===-1?'不限':item.issueQuantity}}</div>
+        <div class="wrap1_3" :class="item.remainingQuantity===0?['sold_out']:[]">{{item.remainingQuantity===-1?'不限':item.remainingQuantity}}/{{item.issueQuantity===-1?'不限':item.issueQuantity}}</div>
-        <div class="wrap1_4">预约</div>
+        <div class="wrap1_4" :class="item.remainingQuantity===0?['sold_out']:[]">{{item.remainingQuantity===0?'无票':'预约'}}</div>
       </div>
       <div class="wrap2">
         <image src="../../static/zu758@3x.png"></image>
@@ -167,6 +167,9 @@ const handleTips = () => {
         color: #fff;
         justify-content: center;
         align-items: center;
+        &.sold_out{
+          background-color: #AFAFAF;
+        }
       }
       .wrap1_3{
         color: #F7963B;
@@ -175,7 +178,9 @@ const handleTips = () => {
         justify-content: center;
         align-items: center;
         width: 224rpx;
-
+        &.sold_out{
+          color: #AFAFAF;
+        }
       }
       .wrap1_2{
         width: 140rpx;