submit

src/components/dashed-line/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="content3">
+
+  </div>
+</template>
+<script setup>
+
+</script>
+
+
+
+<style scoped>
+.content3{
+  height: 1rpx;
+  width: 100%;
+  background-image: url("../../static/zx303@3x (1).png");
+  background-size: 100%;
+}
+</style>

src/components/display-box/index.vue

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

src/pages/ticket-details/index.vue

@@ -10,6 +10,7 @@
       <image
           src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/2ec9fcae-55af-4ccd-8e92-6848282101bb.png"></image>
     </div>
+   <div class="content3">
      <display-box>
        <template #l1>
          <div class="box-left">
@@ -23,7 +24,55 @@
        </template>
        <template #l2>
          <div class="box-left">
-          预留手机号(+86)
+           预留手机号 <span style="font-size: 18rpx">(+86)</span>
+         </div>
+       </template>
+       <template #r2>
+         <div class="box-right">
+           192119280121
+         </div>
+       </template>
+       <template #l3>
+         <div class="box-left">
+           预约时间
+         </div>
+       </template>
+       <template #r3>
+         <div class="box-right">
+           2023年12月16日
+         </div>
+       </template>
+       <template #l4>
+         <div class="box-left">
+           预约人数
+         </div>
+       </template>
+       <template #r4>
+         <div class="box-right">
+           2
+         </div>
+       </template>
+     </display-box>
+   </div>
+    <div class="content4">
+      <dashed-line></dashed-line>
+    </div>
+    <div class="content5">*参观人的身份证信息</div>
+    <div class="content6">
+      <display-box>
+        <template #l1>
+          <div class="box-left">
+            姓名
+          </div>
+        </template>
+        <template #r1>
+          <div class="box-right">
+            陈x
+          </div>
+        </template>
+        <template #l2>
+          <div class="box-left">
+            身份证号
           </div>
         </template>
         <template #r2>
@@ -33,10 +82,38 @@
         </template>
       </display-box>
     </div>
+    <div class="content7">
+      <display-box>
+        <template #l1>
+          <div class="box-left">
+            姓名
+          </div>
+        </template>
+        <template #r1>
+          <div class="box-right">
+            陈x
+          </div>
+        </template>
+        <template #l2>
+          <div class="box-left">
+            身份证号
+          </div>
+        </template>
+        <template #r2>
+          <div class="box-right">
+            192119280121
+          </div>
+        </template>
+      </display-box>
+    </div>
+    <div class="content8">
+      退票
+    </div>
+  </div>
 </template>
 <script setup>
 import displayBox from '../../components/display-box/index.vue'
-const list = [{}]
+import dashedLine from '../../components/dashed-line/index.vue'
 </script>
 <style scoped lang="scss">
 .box-left{
@@ -52,7 +129,38 @@ const list = [{}]
   background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
   background-size: 100%;
   padding: 32rpx 42rpx 0 42rpx;
+  .content8{
+    margin: 0 auto;
+    border-radius: 30rpx;
+    font-size: 28rpx;
+    color: #fff;
+    width: 436rpx;
+    height: 60rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #FF5C62;
+  }
+  .content7{
+    margin-bottom: 72rpx;
+  }
 
+  .content6{
+      margin-bottom: 20rpx;
+  }
+  .content5{
+    margin-bottom: 20rpx;
+    font-size: 24rpx;
+    color: #F7963B;
+    text-align: left;
+  }
+    .content3{
+      margin-top: 42rpx;
+      margin-bottom: 42rpx;
+    }
+  .content4{
+    margin-bottom: 24rpx;
+  }
   .content2 {
     margin-top: 12rpx;
     width: 100%;