diff --git a/src/components/display-box/index.vue b/src/components/display-box/index.vue
index b2029643..36fa43d0 100644
--- a/src/components/display-box/index.vue
+++ b/src/components/display-box/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="content2">
+  <div class="content2" :style="styleColor">
     <div class="wrap1" v-for="item in result">
       <div class="wrap1_1">
         <slot  :name="Object.keys(item).find(x=>x.includes('l'))"></slot>
@@ -11,8 +11,16 @@
   </div>
 </template>
 <script setup >
-import {useSlots,ref} from 'vue'
+import {useSlots,ref,defineProps} from 'vue'
 const slots = useSlots();
+const prop=defineProps({
+  styleColor:{
+    type:Object,
+    default:()=>{
+      return {backgroundColor:'#fff'}
+    }
+  }
+})
 const groupObjectsByNumberKeys=(obj)=> {
   const grouped = {};
   for (const key in obj) {
@@ -28,7 +36,7 @@ const result = ref(groupObjectsByNumberKeys(slots))
 </script>
 <style scoped lang="scss">
 .content2{
-  background-color: #fff;
+
   border-radius: 20rpx;
   padding-left: 18rpx;
   padding-right: 32rpx;
@@ -38,7 +46,11 @@ const result = ref(groupObjectsByNumberKeys(slots))
     padding-bottom: 22rpx;
     border-bottom: 1rpx solid #E4EAF1;;
     display: flex;
+    &:last-child{
+      border-bottom: none;
+    }
     .wrap1_2{
+      flex-grow: 1;
       padding-left: 36rpx;
       font-size: 24rpx;
       color: #939393;
diff --git a/src/http/apis.js b/src/http/apis.js
index 2450eda7..0374d2f7 100644
--- a/src/http/apis.js
+++ b/src/http/apis.js
@@ -17,6 +17,20 @@ export const ticketlist = (data) => {
         data
     })
 }
+export const unusedTickets = (data) => {
+    return uniReq.post({
+        url: '/api/smart/appointment/get/all/unused/tickets',
+        isLoading:false,
+        data
+    })
+}
+export const historicalTickets = (data) => {
+    return uniReq.post({
+        url: '/api/smart/appointment/get/all/historical/tickets',
+        isLoading:false,
+        data
+    })
+}
 export const upload = (data) => {
     return uniReq.upload({
         name: data.name,
diff --git a/src/http/init.js b/src/http/init.js
index 1b8231bf..116791fc 100644
--- a/src/http/init.js
+++ b/src/http/init.js
@@ -25,8 +25,6 @@ const uniReq=uniRequest.created({
                     duration: 50000
                 })
             }
-
-
             return response.data
         }
     }
diff --git a/src/pages/blind-box/index.vue b/src/pages/blind-box/index.vue
index 2057a553..74feed15 100644
--- a/src/pages/blind-box/index.vue
+++ b/src/pages/blind-box/index.vue
@@ -23,6 +23,7 @@
 </div>
 </template>
 <script setup>
+
 import {ref} from 'vue'
 const imgList=ref([{url:'https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/8395f322-b677-4f24-a13d-b79474c09d35.png'},{url:'https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/8395f322-b677-4f24-a13d-b79474c09d35.png'}])
 </script>
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index d1e37fd6..b5c45ed2 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -1,5 +1,4 @@
 <template>
-
   <div class="main">
     <div class="content3">
       <div class="wrap1">
@@ -16,12 +15,12 @@
     </div>
     <div class="content2">
       <div class="wrap1" v-for="(item,index) in [...tableData,...tableData]" :key="item.id">
-        <div class="wrap1_1">
-          <image :src="'../../static/112121@3x.png'"></image>
+        <div @click="viewImg(item)" class="wrap1_1">
+          <image :src="item.ticketImage"></image>
         </div>
         <div class="wrap1_2">首都博物馆门票</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" :class="item.remainingQuantity===0?['sold_out']:[]">{{item.remainingQuantity===0?'无票':'预约'}}</div>
+        <div class="wrap1_4" @click="goBooking(item)"  :class="item.remainingQuantity===0?['sold_out']:[]">{{item.remainingQuantity===0?'无票':'预约'}}</div>
       </div>
       <div class="wrap2">
         <image src="../../static/zu758@3x.png"></image>
@@ -47,6 +46,12 @@ let isShow = ref(true)
 const tableData=ref([])
 const page=ref(1)
 const pageSize=ref(9999)
+const viewImg=(item)=>{
+  uni.previewImage({
+    urls:[item.ticketImage],
+    indicator:'none'
+  })
+}
 const getData=async ()=>{
   const data={
     "keyword": "",
@@ -59,9 +64,25 @@ const getData=async ()=>{
     tableData.value=res.data.data
   }
 }
+const goBooking=(item)=>{
+  if (item.remainingQuantity!==0){
+    uni.navigateTo({
+      url: '/pages/ticket/index'
+    })
+  }else {
+    uni.showToast({
+      title: '该门票已售罄',
+      icon: 'none',
+      duration: 1000
+    })
+  }
+  uni.setStorageSync('currentBooking',item)
+  store.currentBooking=item
+}
 const viewBlindBoxDetail=()=>{
 uni.navigateTo({
   url: '/pages/blind-box/index'
+
 })
 }
 getData()
diff --git a/src/pages/mine/index.vue b/src/pages/mine/index.vue
index 18e2b0b9..fd5bf0cf 100644
--- a/src/pages/mine/index.vue
+++ b/src/pages/mine/index.vue
@@ -73,6 +73,7 @@
 <script setup>
 import {ref} from 'vue'
 import {onShow} from "@dcloudio/uni-app";
+import {historicalTickets, unusedTickets} from "@/http/apis";
 const modeClass = ref('')
 const currentTab = ref(0)
 const show = ref(true)
@@ -80,9 +81,18 @@ const userInfo = ref(uni.getStorageSync('userInfo') ?? {})
 onShow(() => {
   show.value = true
 })
-const switchOptions=(num)=>{
+const switchOptions=async (num)=>{
+  let res
+  if (num===0){
+  res=await  unusedTickets()
+  }else if (num===1){
+    res=await  historicalTickets()
+  }
+  console.log(res,'res')
+
   currentTab.value=num
 }
+
 const goViewVenues = () => {
   uni.navigateTo({
     url: '/pages/view-venues/index'
diff --git a/src/pages/ticket/index.vue b/src/pages/ticket/index.vue
index 40ad8ccb..594a7a62 100644
--- a/src/pages/ticket/index.vue
+++ b/src/pages/ticket/index.vue
@@ -1,173 +1,671 @@
 <template>
+  <div class="container">
+    <custom-title   class="title-block" :title="info.ticketName">
+    </custom-title>
     <div class="main">
-        <title class="title-block" title="门票系统的某个场馆">
-        </title>
-        <div :style="height + 'px'" class="container">
-            <div class="title">
-                <tm-icon name="tmicon-position" color="#fff" :fontSize="40"></tm-icon>
-                <div style="margin-left: 10rpx;">门票系统的某个场馆</div>
+      <div class="content1">
+        <div class="wrap1">
+          <image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/47742fc2-6608-48da-b2f8-b47b36eaffbb.png"></image>
+        </div>
+        <div class="wrap2">
+          {{info.ticketName}}
+        </div>
+      </div>
+      <div class="content2">
+        <image :src="info.ticketImage"></image>
+      </div>
+      <div class="content3"  >
+        <display-box :styleColor="{backgroundColor: '#B1292E'}">
+          <template #l1 >
+            <div class="box-left">
+              门票名称
+            </div>
+          </template>
+          <template #r1 >
+            <div class="box-right">
+              门票名称
+            </div>
+          </template>
+          <template #l2 >
+            <div class="box-left">
+              剩余数量
+            </div>
+          </template>
+          <template #r2 >
+            <div class="box-right">
+              1023/20000
             </div>
+          </template>
+        </display-box>
+      </div>
+      <div class="content4"></div>
+      <div class="content5">
+        <display-box>
+          <template #l1 >
+            <div  class="box-left">
+              预留手机号 <span style="font-size: 18rpx">(+86)</span>
+            </div>
+          </template>
+          <template #r1 >
             <div>
-                <image src="../../static/logo.png" mode="scaleToFill"
-                    style="width: 664rpx;height:354rpx;margin-top: 20rpx;display: ;" />
+              <input type="text" placeholder="填写手机号" placeholder-style="color:#DBDBDB;fontSize:24rpx"/>
             </div>
-            <div class="title-detail">
-                <div class="item">
-                    <div class="name">门票名称</div>
-                    <div style="margin-left: 20rpx;">首都博物馆门票</div>
-                </div>
-                <tm-divider realColor></tm-divider>
-                <div class="item">
-                    <div class="name">剩余数量</div>
-                    <div style="margin-left: 20rpx;">1023/20000</div>
+          </template>
+          <template #l2 >
+            <div class="box-left">
+              验证码
+            </div>
+          </template>
+          <template #r2 >
+            <div  style="position: relative;width: 100%">
+              <div >
+                <input type="text" placeholder="填写验证码" placeholder-style="color:#DBDBDB;fontSize:24rpx"/>
+              </div>
+
+              <div style="position: absolute;top: 50%;transform: translateY(-50%);right: 12rpx;color: #B1292E;font-size: 24rpx">获取验证码</div>
+            </div>
+          </template>
+        </display-box>
+      </div>
+      <div class="content6">
+        <display-box>
+          <template #l1>
+            <div  class="box-left">
+             选择时间
+            </div>
+          </template>
+          <template #r1 >
+            <div class="r1">
+              <div class="r1_1">2023年12月16日</div>
+              <div class="r1_2" @click="showWin=true">
+                <image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/2c4872f9-aee5-4b04-9494-94b08c282ed9.png"></image>
+              </div>
+            </div>
+          </template>
+          <template #l2 >
+            <div class="box-left">
+              选择人数
+            </div>
+          </template>
+          <template #r2 >
+            <div class="r2">
+              <div class="r2_1" >
+                *单次最多可预约10人
+              </div>
+             <div class="r2_2">
+                <div class="r2_2_1">
+                  <image src="../../static/zu1149@3x.png"></image>
                 </div>
+               <div class="r2_2_2">
+                 <input type="text">
+               </div>
+               <div class="r2_2_3">
+                 <image src="../../static/zu1150@3x.png"></image>
+               </div>
+             </div>
+            </div>
+          </template>
+        </display-box>
+      </div>
+      <div class="content7">
+        *请填写所有参观人的身份证信息
+      </div>
+      <div class="content8">
+        <div class="wrap1">  <display-box>
+          <template #l1>
+            <div class="box-left">
+              真实姓名
+            </div>
+          </template>
+          <template #r1>
+            <div class="box-right">
+              <input type="text"  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"  placeholder="填写您的身份证号码" placeholder-style="color:#DBDBDB;font-size:24rpx"/>
+            </div>
+          </template>
+        </display-box></div>
+      </div>
+      <div class="content9">
+        <div class="wrap1">*预约后信息不可更改，请仔细核对预约信息</div>
+        <div class="wrap2">预约</div>
+      </div>
+        <tm-drawer :height="1054" :round="8" hideHeader inContent ref="calendarView" :placement="'bottom'" v-model:show="showWin">
+          <div class="content10" >
+            <div class="wrap1">
+              <image src="../../static/Close@3x.png"></image>
+            </div>
+            <div class="wrap2">
+              请选择参观日期
+            </div>
+            <div class="wrap3"></div>
+            <div class="wrap4">
+              当前年月：2023年12月
             </div>
-            <div class="line"></div>
-            <div class="title-detail" style="background: #fff;">
-                <div class="item">
-                    <div class="name" style="color: #000000;border-right:1rpx solid #BBC5E0;">预留手机号
-                        <span style="font-size: 20rpx;"> (+86)</span>
-                    </div>
-                    <div style="margin-left: 20rpx; color: #000000;">
-                        <input type="text" v-model="formData.phone" @input="changePhone" />
-                    </div>
+            <div class="wrap3"></div>
+            <div class="wrap5">
+              <div class="wrap5_1">
+                <div class="wrap5_1_1">
+                  12月02日·周六
                 </div>
-                <tm-divider realColor></tm-divider>
-                <div class="item">
-                    <div class="name" style="color: #000000;border-right:1rpx solid #BBC5E0;">验证码</div>
-                    <div class="code">
-                        <input type="text" v-model="formData.code" @input="changePhone" class="inputCode" />
-                        <div style="color:#B1292E" @click="sendCode" v-if="isCode">{{ code }}</div>
-                        <div v-else style="color:#B1292E">{{ formattedTime() }}</div>
-                    </div>
+                <div class="wrap5_1_2">
+                  *不可预约
                 </div>
-            </div>
-            <div class="title-detail" style="background: #fff; color: #000000">
-                <div class="item">
-                    <div class="name" style="color: #000000;border-right:1rpx solid #BBC5E0;">选择时间</div>
-                    <div class="time">
-                        <span style="width: 300rpx;">2023年12月16日</span>
-                        <div style="display: flex;align-items: center;" @click="showHandle">
-                            <span>选择</span>
-                            <tm-icon name="tmicon-angle-right" :font-size="24"></tm-icon>
-                        </div>
-                    </div>
+              </div>
+              <div class="wrap5_2">
+                <div class="wrap5_2_1">
+                  12月03日·周日
                 </div>
-                <tm-divider realColor></tm-divider>
-                <div class="item">
-                    <div class="name" style=" color: #000000;border-right:1rpx solid #BBC5E0;">选择人数</div>
-                    <div style="margin-left: 20rpx;" class="stepper">
-                        <div style="color: #B29E92;font-size: 24rpx">*单次最多可预约10人</div>
-                        <div>
-                            <tm-stepper v-model="formData.num" color="#ef952e" bgColor="primary" circular :defaultValue="0"
-                                :max="10" :height="40" :width="160" @change="changeNum"></tm-stepper>
-                        </div>
-                    </div>
+                <div class="wrap5_2_2">
+                  *可预约
                 </div>
-            </div>
-            <div v-for="(item, index) in visitorsList" class="card" :key="index">
-                <div class="card-item">
-                    <div class="name">姓名</div>
-                    <div style="margin-left: 20rpx; color: #000000;">
-                        <input type="text" v-model="item.name" />
-                    </div>
+                <div class="wrap5_2_3">
+                  今日
+                </div>
+              </div>
+              <div class="wrap5_3">
+                <div class="wrap5_3_1">
+                  12月04日·周一
+                </div>
+                <div class="wrap5_3_2">
+                  *可预约
+                </div>
+                <div class="wrap5_3_3">
+                  明日
                 </div>
-                <tm-divider realColor></tm-divider>
-                <div class="card-item">
-                    <div class="name">身份证号</div>
-                    <div style="margin-left: 20rpx; color: #000000;">
-                        <input type="idcard" v-model="item.idCard" />
-                    </div>
+              </div>
+              <div class="wrap5_4">
+                <div class="wrap5_4_1">更多</div>
+                <div class="wrap5_4_2">
+                  <image src="../../static/lj781@3x.png"></image>
                 </div>
+              </div>
             </div>
-            <tm-button @click="reservation" color="#000000" :width="436" :height="60" :round="25"
-                style="margin-top: 20rpx !important;">预约</tm-button>
-            <select-day v-model:show="show"></select-day>
-        </div>
+            <div class="wrap3"></div>
+            <div class="wrap6">
+              请选择参观时间
+            </div>
+            <div class="wrap7">
+              <div class="wrap7_1">
+                <div class="wrap7_1_1">08:00入场</div>
+                <div class="wrap7_1_2">*不可选</div>
+              </div>
+              <div class="wrap7_2">
+                <div class="wrap7_2_1">10:00入场</div>
+                <div class="wrap7_2_2">*可选</div>
+              </div>
+              <div class="wrap7_3">
+                <div class="wrap7_3_1">12:00入场</div>
+                <div class="wrap7_3_2">*可选</div>
+              </div>
+              <div class="wrap7_2">
+                <div class="wrap7_2_1">10:00入场</div>
+                <div class="wrap7_2_2">*可选</div>
+              </div>
+            </div>
+            <div class="wrap3"></div>
+            <div class="wrap8">
+              *参观当日需要携带游客本人身份证件<br/>
+              *入馆时间：<br/>
+              工作日08:30-18:00、节假日/双休09:00-20:00（具体时间以景区为准）<br/>
+            </div>
+            <div class="wrap3" style="margin-bottom: 30rpx"></div>
+            <div class="wrap9">确定</div>
+          </div>
+        </tm-drawer>
     </div>
+  </div>
 </template>
 
 <script setup>
-import { onMounted, ref, reactive, watch } from "vue";
-import { useTimer } from '@/tmui/tool/useFun/useTimer'
-import selectDay from './select-day/index'
-const { start, stop, formattedTime, status, restart, timeObj, times, change } = useTimer({
-    totalTime: 10, unit: 'ss', format: 'ss秒'
-});
-let height = ref(0)
-let code = ref('获取验证码')
-let isCode = ref(true)
-let show = ref(false)
-const formData = reactive({
-    phone: '',
-    code: '',
-    num: 0
-})
-let visitorsList = ref([])
-const msg = ref(null)
+import displayBox from '@/components/display-box/index.vue'
+import {useMainStore} from "@/store"
+import {ref} from 'vue'
+const showWin=ref(true)
+const store=useMainStore()
+const info=ref(uni.getStorageSync('currentBooking'))
+const rpxToPx=(rpx)=>{
+  const systemInfo = uni.getSystemInfoSync();
+  const screenWidth = systemInfo.windowWidth;
+  return rpx * screenWidth / 750;
+}
+</script>
+
+<style lang="scss" scoped>
+.content10{
+  position: relative;
+  padding: 64rpx 24rpx 108rpx 24rpx;
+  .wrap9{
+    margin: 0 auto;
 
-onMounted(() => {
-    uni.createSelectorQuery().select('.title-block').boundingClientRect(data => {
-        let res = uni.getSystemInfoSync();
-        height = res.windowHeight - data.bottom;
-    }).exec()
-})
-const sendCode = () => {
-    restart()
-    isCode.value = false;
-    if (status.value == -1 || status.value == 0) {
-        start();
+    width: 436rpx;
+    height: 60rpx;
+    background-color: #000;
+    color: #fff;
+    font-size: 28rpx;
+    border-radius: 30rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .wrap8{
+    margin-bottom: 24rpx;
+    margin-top: 18rpx;
+    font-size: 20rpx;
+    color:#B29E92 ;
+  }
+  .wrap7{
+    margin-bottom: 70rpx;
+    margin-top: 20rpx;
+    display: flex;
+    justify-content: space-between;
+    .wrap7_3{
+      box-sizing: border-box;
+      border-radius: 32rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 152rpx;
+      height: 98rpx;
+      background-color: #F7963B;
+      .wrap7_3_2{
+        font-size: 16rpx;
+        color: #fff;
+      }
+      .wrap7_3_1{
+        margin-bottom: 2rpx;
+        color: #fff;
+        font-size: 24rpx;
+      }
     }
-}
-watch(times, (newValue) => {
-    if (newValue === 0) {
-        code.value = '重新获取';
-        isCode.value = true;
-        stop()
+    .wrap7_2{
+      border: 2rpx solid #F7963B;
+      box-sizing: border-box;
+      border-radius: 32rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 152rpx;
+      height: 98rpx;
+      background-color: #fff;
+      .wrap7_2_2{
+        font-size: 16rpx;
+        color: #B29E92;
+      }
+      .wrap7_2_1{
+        margin-bottom: 2rpx;
+        color: #000;
+        font-size: 24rpx;
+      }
+    }
+    .wrap7_1{
+      border-radius: 32rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 152rpx;
+      height: 98rpx;
+      background-color: #D8D8D8;
+      .wrap7_1_2{
+        font-size: 16rpx;
+        color: #868686;
+      }
+      .wrap7_1_1{
+        margin-bottom: 2rpx;
+        color: #000;
+        font-size: 24rpx;
+      }
+    }
+  }
+  .wrap6{
+    margin-top: 38rpx;
+      font-size: 32rpx;
+    color: #000;
+
+  }
+  .wrap5{
+    margin-bottom: 72rpx;
+    margin-top: 54rpx;
+    display: flex;
+    justify-content: space-between;
+    .wrap5_4{
+      width: 60rpx;
+      height: 98rpx;
+      border-radius: 30rpx;
+      background-color: #F7963B;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .wrap5_4_1{
+        margin-right: 8rpx;
+        font-size: 20rpx;
+        color: #fff;
+
+        writing-mode: vertical-rl;
+      }
+      .wrap5_4_2{
+
+        image{
+          width: 11.77rpx;
+          height: 25.53rpx;
+
+        }
+      }
+    }
+    .wrap5_3{
+      position: relative;
+      width: 196rpx;
+      height: 98rpx;
+      background-color: #F7963B;
+      border-radius: 32rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .wrap5_3_3{
+        left: 50%;
+        transform: translateX(-50%);
+        position: absolute;
+        bottom: -40rpx;
+        font-size: 24rpx;
+        color: #F7963B;
+      }
+      .wrap5_3_2{
+        color: #fff;
+        font-size: 16rpx;
+      }
+      .wrap5_3_1{
+        margin-bottom: 10rpx;
+        color: #fff;
+        font-size: 24rpx;
+      }
+    }
+    .wrap5_2{
+      border: 2rpx solid #F7963B;
+      box-sizing: border-box;
+      width: 196rpx;
+      height: 98rpx;
+      background-color: #fff;
+      border-radius: 32rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      .wrap5_2_3{
+        left: 50%;
+        transform: translateX(-50%);
+        position: absolute;
+        bottom: -40rpx;
+        font-size: 24rpx;
+        color: #F7963B;
+      }
+      .wrap5_2_2{
+        color: #B29E92;
+        font-size: 16rpx;
+      }
+      .wrap5_2_1{
+        margin-bottom: 10rpx;
+        color: #000;
+        font-size: 24rpx;
+      }
+    }
+    .wrap5_1{
+      width: 196rpx;
+      height: 98rpx;
+      background-color: #D8D8D8;
+      border-radius: 32rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .wrap5_1_2{
+        color: #868686;
+        font-size: 16rpx;
+      }
+      .wrap5_1_1{
+        margin-bottom: 10rpx;
+        color: #000;
+        font-size: 24rpx;
+      }
+    }
+  }
+  .wrap4{
+    margin-bottom: 24rpx;
+    margin-top: 16rpx;
+    font-size: 24rpx;
+    color:#F7963B;
+  }
+  .wrap3{
+    background-color: #868686;
+    height: 1rpx;
+
+    width: 100%;
+  }
+  .wrap2{
+    margin-bottom: 44rpx;
+    font-weight: bold;
+    color: #000;
+    font-size: 32rpx;
+  }
+  .wrap1{
+    top: 52rpx;
+    right: 46rpx;
+    position: absolute;
+    width: 48rpx;
+    height: 48rpx;
+    image{
+      width: 100%;
+      height: 100%;
     }
-})
-const changeNum = (value) => {
-    formData.num = value
+  }
 }
-watch(() => formData.num, (newValue, oldValue) => {
-    console.log(newValue, oldValue)
-    if (newValue > oldValue) {
-        for (let i = 0; i < newValue - oldValue; i++) {
-            visitorsList.value.push({
-                name: '',
-                idCard: ''
-            })
+.container{
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  .main{
+    overflow-y: auto;
+    box-sizing: border-box;
+    padding: 32rpx 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%;
+
+    .content9{
+      margin-bottom: 78rpx;
+      margin-top: 80rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .wrap2{
+        margin-top: 14rpx;
+        font-size: 28rpx;
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #000;
+        border-radius: 30rpx;
+        width: 436rpx;
+        height: 60rpx;
+      }
+      .wrap1{
+        color: #B1292E;
+        font-size: 16rpx;
+      }
+    }
+    .content8{
+      margin-top: 12rpx;
+      .wrap1{
+        .box-left{
+          color: #000;
+          font-size: 24rpx;
         }
+      }
     }
-    if (newValue < oldValue) {
-        visitorsList.value.splice(-(oldValue - newValue))
+    .content7{
+      color: #F7963B;
+      margin-top: 20rpx;
+      font-size: 24rpx;
     }
-})
+    .content6{
+      margin-top:24rpx;
+      .r2{
+        position: relative;
+        .r2_2{
+          position: absolute;
+          top: 50%;
+          transform: translateY(-45%);
+          right: 0;
+          display: flex;
+          align-items: center;
+          .r2_2_3{
+            width: 31rpx;
+            height: 31rpx;
+            image{
+              height: 100%;
+              width: 100%;
+            }
+          }
+          .r2_2_1{
+            width: 31rpx;
+            height: 31rpx;
+            margin-right: 10rpx;
+            image{
+              height: 100%;
+              width: 100%;
+            }
+          }
+          .r2_2_2{
+            margin-right: 10rpx;
+            input{
+        text-align: center;
+              color: #000;
+              font-size: 24rpx;
+              width: 114rpx;
+              height: 54rpx;
+              background-color: #EFEFEF;
+            }
+
+          }
+        }
+        .r2_1{
+          color: #B29E92;
+          font-size: 16rpx;
+        }
+      }
+      .r1{
+        position: relative;
+        .r1_2{
+          top: 50%;
+          position: absolute;
+          transform: translateY(-50%);
+          right: 12rpx;
+          image{
+            width: 64rpx;
+            height: 32rpx;
+          }
+        }
+      }
+      .box-left{
+        display: flex;
+        align-items: center;
+        color: #000;
+        font-size: 24rpx;
+      }
+    }
+    .content5{
+      margin-top:40rpx ;
+      .r2{
+        position: relative;
+
+        .r2_2{
+          right: 42rpx;
+          top: 50%;
+          transform: translateY(-10%);
+          position: absolute;
+          color:#B1292E ;
+          font-size: 24rpx;
+        }
 
-const reservation = () => {
-    console.log(visitorsList.value)
-    const result = visitorsList.value.filter((item) => item.name && item.idCard)
-    if (result.map((item) => item.idCard).some((n, index, arr) => arr.indexOf(n) !== index)) {
-        return uni.showToast({
-            title: '身份证不能重复',
-            icon: "error",
-        });
+      }
+      .box-left{
+        color: #000;
+        font-size: 24rpx;
+      }
     }
-    if (Object.values(formData).some((item) => !item)) {
-        return uni.showToast({
-            title: '信息填写完整',
-            icon: "error",
-        });
+    .content4 {
+      margin-top: 30rpx;
+      height: 1rpx;
+      width: 100%;
+      background-image: url("../../static/zx303@3x.png");
+      background-size: 100%;
     }
+    .content3{
+      margin-top: 20rpx;
+      .box-right{
+        color: #fff;
+        font-size: 24rpx;
+      }
+      .box-left{
+        color: #fff;
+        font-size: 24rpx;
+      }
+    }
+    .content2{
+      margin-top: 12rpx;
+border-radius: 20rpx;
+      overflow: hidden;
+
+      image{
+        width: 664rpx;
+        height: 354rpx;
+      }
+    }
+    .content1{
+      box-sizing: border-box;
+      background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/20a57e10-8b08-4694-b083-d09e345a58a4.png");
+      width: 100%;
+      height: 60rpx;
+      background-size: 100%;
+      display: flex;
+      align-items: center;
+      padding-left: 20rpx;
+      .wrap2{
+        font-size: 32rpx;
+        color: #fff;
+      }
+      .wrap1{
+        margin-right: 10rpx;
+        image{
+          width: 21.18rpx;
+          height: 29rpx;
+        }
+      }
+    }
+  }
 }
-const showHandle = () => {
-    show.value = true
+/*.top{
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
-</script>
-
-<style lang="scss" scoped>
 .main {
-    height: 100vh;
+  overflow-y: auto;
+    flex-grow: 1;
     width: 100%;
     background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
     background-size: 100%;
@@ -288,5 +786,5 @@ const showHandle = () => {
         width: 130rpx !important;
     }
 
-}
+}*/
 </style>
diff --git a/src/static/Close@3x.png b/src/static/Close@3x.png
new file mode 100644
index 00000000..3542503b
Binary files /dev/null and b/src/static/Close@3x.png differ
diff --git a/src/static/lj781@3x.png b/src/static/lj781@3x.png
new file mode 100644
index 00000000..42f1d3dd
Binary files /dev/null and b/src/static/lj781@3x.png differ
diff --git a/src/static/zu1149@3x.png b/src/static/zu1149@3x.png
new file mode 100644
index 00000000..b333c0b6
Binary files /dev/null and b/src/static/zu1149@3x.png differ
diff --git a/src/static/zu1150@3x.png b/src/static/zu1150@3x.png
new file mode 100644
index 00000000..28066c10
Binary files /dev/null and b/src/static/zu1150@3x.png differ
diff --git a/src/store/index.js b/src/store/index.js
index 32b51121..3b009be1 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@ import {ref} from 'vue'
 export const useMainStore = defineStore('main', () => {
         const titleHeight = ref('')
         const tabHeight = ref('')
+        const currentBooking = ref(null)
         const isShow = ref(true)
         return {titleHeight, tabHeight, isShow}
     }