diff --git a/src/main.ts b/src/main.ts
index 346a9031..7b2984c6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,7 +4,7 @@ import tmui from "./tmui";
 import App from "./App.vue";
 // @ts-ignore
 import api from "@/http";
-import title from "./components/title/index.vue";
+import title from "./components/Title/index.vue";
 export function createApp() {
   const app = createSSRApp(App);
   app.config.globalProperties.$api = api;
diff --git a/src/pages.json b/src/pages.json
index 6801f8ab..81ade14e 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -16,8 +16,9 @@
 		}
 		},
 		{
-			"path": "pages/ticket-details/index",
+			"path": "pages/ticket/index",
 			"style": {
+				"navigationStyle": "custom",
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
 				"app-plus": {
diff --git a/src/pages/ticket/index.vue b/src/pages/ticket/index.vue
index fbf440fc..3728c144 100644
--- a/src/pages/ticket/index.vue
+++ b/src/pages/ticket/index.vue
@@ -47,8 +47,8 @@
                     <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;">
-                            选择
+                        <div style="display: flex;align-items: center;" @click="showHandle">
+                            <span>选择</span>
                             <tm-icon name="tmicon-angle-right" :font-size="24"></tm-icon>
                         </div>
                     </div>
@@ -59,12 +59,29 @@
                     <div style="margin-left: 20rpx;" class="stepper">
                         <div style="color: #B29E92;font-size: 24rpx">*单次最多可预约10人</div>
                         <div>
-                            <tm-stepper v-model="reactive.num" color="#ef952e" bgColor="primary" circular :defaultValue="0"
-                                :max="10" :height="40" :width="160" class="itme-stepper"></tm-stepper>
+                            <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>
             </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>
+                <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>
+            <tm-button @click="reservation" color="#000000" :width="436" :height="60" :round="25">预约</tm-button>
+            <select-day :show.sync="show"></select-day>
         </div>
     </div>
 </template>
@@ -72,17 +89,22 @@
 <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)
+
 onMounted(() => {
     uni.createSelectorQuery().select('.title-block').boundingClientRect(data => {
         let res = uni.getSystemInfoSync();
@@ -97,15 +119,49 @@ const sendCode = () => {
     }
 }
 watch(times, (newValue) => {
-    console.log(newValue)
     if (newValue === 0) {
         code.value = '重新获取';
         isCode.value = true;
         stop()
     }
 })
+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: ''
+            })
+        }
+    }
+    if (newValue < oldValue) {
+        visitorsList.value.splice(-(oldValue - newValue))
+    }
+})
 
-
+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",
+        });
+    }
+    if (Object.values(formData).some((item) => !item)) {
+        return uni.showToast({
+            title: '信息填写完整',
+            icon: "error",
+        });
+    }
+}
+const showHandle = () => {
+    show.value = false
+}
 </script>
 
 <style lang="scss" scoped>
@@ -140,6 +196,30 @@ watch(times, (newValue) => {
             color: #fff;
         }
 
+        .card {
+            margin-top: 20rpx;
+            width: 100%;
+            height: 190rpx;
+            background-color: #fff;
+            border-radius: 24rpx;
+            padding: 32rpx;
+            display: flex;
+            flex-direction: column;
+            box-sizing: border-box;
+            color: black;
+
+            .card-item {
+                display: flex;
+                align-items: center;
+            }
+
+            .name {
+                width: 200rpx;
+                border-right: 1rpx solid #BBC5E0;
+            }
+
+        }
+
         .title-detail {
             margin-top: 20rpx;
             width: 100%;
diff --git a/src/pages/ticket/select-day/index.vue b/src/pages/ticket/select-day/index.vue
new file mode 100644
index 00000000..73567ad1
--- /dev/null
+++ b/src/pages/ticket/select-day/index.vue
@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <tm-drawer placement="bottom" okText='确认' v-model:show="show" @close="close">
+        </tm-drawer>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, onMounted, defineEmits, watch } from 'vue'
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const emits = defineEmits(["update:show"]);
+
+
+const close = () => {
+    emits("update:show", false);
+}
+</script>
+
+<style lang="scss" scoped></style>
\ No newline at end of file