diff --git a/.vscode/settings.json b/.vscode/settings.json
index 03691c14..b2451a12 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,5 +3,6 @@
         "src/tmui/locale",
         "src/tmui/tool/dayjs/locale",
         "src/tmui/tool/dayjs/esm/locale"
-    ]
+    ],
+    "vue-i18n.i18nPaths": "src\\tmui\\locale,src\\tmui\\tool\\dayjs\\locale,src\\tmui\\tool\\dayjs\\esm\\locale"
 }
\ No newline at end of file
diff --git a/src/components/title/index.vue b/src/components/title/index.vue
new file mode 100644
index 00000000..3d932009
--- /dev/null
+++ b/src/components/title/index.vue
@@ -0,0 +1,61 @@
+<template>
+    <div class="content1" :style="{ marginTop: `${statusBarHeight}px` }">
+        <div class="wrap1" v-if="isBack">
+            <tm-icon name="tmicon-angle-left" color="#FFFFFF" @click="back"></tm-icon>
+        </div>
+        <div class="wrap2">{{ title }}</div>
+    </div>
+</template>
+
+<script setup >
+import { ref } from 'vue'
+const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight + 5)
+defineProps({
+    title: {
+        type: String,
+        default: ''
+    },
+    isBack: {
+        type: Boolean,
+        default: true
+    }
+})
+const back = () => {
+    uni.navigateBack({
+        delta: 2
+    });
+}
+</script>
+
+<style scoped lang="scss">
+.content1 {
+    height: 60rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .wrap1 {
+        flex-basis: 0;
+        width: 34rpx;
+        height: 34rpx;
+        display: flex;
+    }
+
+    .wrap3 {
+        flex-grow: 1;
+        flex-basis: 0;
+    }
+
+    .wrap2 {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-grow: 1;
+        flex-basis: 0;
+        color: #FFFFFF;
+        font-size: 32rpx;
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 13e20798..346a9031 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,9 +4,11 @@ import tmui from "./tmui";
 import App from "./App.vue";
 // @ts-ignore
 import api from "@/http";
+import title from "./components/title/index.vue";
 export function createApp() {
   const app = createSSRApp(App);
   app.config.globalProperties.$api = api;
+  app.component("title", title);
   app.use(tmui, { shareDisable: false } as Tmui.tmuiConfig);
   return {
     app,
diff --git a/src/pages.json b/src/pages.json
index 1c888378..e88fc3f9 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -9,6 +9,7 @@
 	{
 		"path": "pages/login/index",
 		"style": {
+      "navigationStyle": "custom",
 		  "navigationBarTitleText": "",
 		  "enablePullDownRefresh": false,
 		  "app-plus": {
@@ -26,6 +27,27 @@
         }
       }
     },
+	{
+		"path": "pages/home/index",
+		"style": {
+		  "navigationBarTitleText": "",
+		  "enablePullDownRefresh": false,
+		  "app-plus": {
+			"titleNView": false // 禁用原生导航
+		  }
+		}
+	  },
+	  {
+		"path": "pages/ticket/index",
+		"style": {
+			"navigationStyle": "custom",
+			"navigationBarTitleText": "",
+			"enablePullDownRefresh": false
+		},
+		"app-plus":{
+			"bounce":"none"
+		}
+	  },
     {
       "path": "pages/fankui/index",
       "style": {
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index ed7d4c3f..bf4d69fd 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -1,15 +1,71 @@
 <template>
-  <div>home
-<div>
-  <tm-button>13212121212</tm-button>
-</div>
-    homehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehome
-    homehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehome
+  <div class="main">
+    <div class="header">
+      <div>门票名称</div>
+      <div>剩余数量</div>
+    </div>
+    <div class="container">
+      <div class="item">
+        <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
+        <div class="detail">
+          <div style="width: 140rpx;">首都博物馆门票</div>
+          <div>1023/20000</div>
+          <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
+        </div>
+      </div>
+
+    </div>
   </div>
 </template>
 <script setup>
-
 </script>
-<style scoped>
+<style scoped lang="scss">
+.main {
+  height: 100vh;
+  width: 100%;
+  background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
+  background-size: 100%;
+  padding: 38rpx 32rpx;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  .header {
+    width: 100%;
+    background: #AB2F23;
+    height: 70rpx;
+    border-radius: 20rpx;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    color: #FFFFFF;
+    font-size: 28rpx;
+  }
+
+  .container {
+    box-sizing: border-box;
+    flex: 1;
+    overflow-y: auto;
+    margin-top: 20rpx;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 2rpx;
+
+    .item {
+      display: flex;
+      align-items: center;
+      background: #FFFFFF;
+      border-radius: 20rpx;
+      margin-bottom: 20rpx;
 
+      .detail {
+        flex: 1;
+        margin-left: 18rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/pages/ticket/index.vue b/src/pages/ticket/index.vue
new file mode 100644
index 00000000..fbf440fc
--- /dev/null
+++ b/src/pages/ticket/index.vue
@@ -0,0 +1,211 @@
+<template>
+    <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>
+            <div>
+                <image src="../../static/logo.png" mode="scaleToFill"
+                    style="width: 664rpx;height:354rpx;margin-top: 20rpx;display: ;" />
+            </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>
+                </div>
+            </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>
+                <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>
+            </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;">
+                            选择
+                            <tm-icon name="tmicon-angle-right" :font-size="24"></tm-icon>
+                        </div>
+                    </div>
+                </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="reactive.num" color="#ef952e" bgColor="primary" circular :defaultValue="0"
+                                :max="10" :height="40" :width="160" class="itme-stepper"></tm-stepper>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref, reactive, watch } from "vue";
+import { useTimer } from '@/tmui/tool/useFun/useTimer'
+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)
+const formData = reactive({
+    phone: '',
+    code: '',
+    num: 0
+})
+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();
+    }
+}
+watch(times, (newValue) => {
+    console.log(newValue)
+    if (newValue === 0) {
+        code.value = '重新获取';
+        isCode.value = true;
+        stop()
+    }
+})
+
+
+</script>
+
+<style lang="scss" scoped>
+.main {
+    height: 100vh;
+    width: 100%;
+    background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
+    background-size: 100%;
+    padding: 0 32rpx 38rpx 32rpx;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+
+    .container {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 32rpx;
+        box-sizing: border-box;
+        overflow-y: auto;
+
+        .title {
+            width: 100%;
+            background: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/f4eff459-319c-4588-8efe-8638b5c66a4f.png") no-repeat;
+            background-size: cover;
+            height: 60rpx;
+            display: flex;
+            align-items: center;
+            padding: 10rpx 20rpx;
+            box-sizing: border-box;
+            color: #fff;
+        }
+
+        .title-detail {
+            margin-top: 20rpx;
+            width: 100%;
+            height: 190rpx;
+            background-color: #B1292E;
+            border-radius: 24rpx;
+            padding: 32rpx;
+            display: flex;
+            flex-direction: column;
+            box-sizing: border-box;
+
+            .item {
+                display: flex;
+                color: #fff;
+                align-items: center;
+                font-size: 28rpx;
+
+                .name {
+                    width: 200rpx;
+                    border-right: 1rpx solid #fff;
+                }
+
+                .code {
+                    flex: 1;
+                    margin-left: 20rpx;
+                    color: #000000;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+
+                    .inputCode {
+                        width: 250rpx;
+                    }
+                }
+
+                .stepper {
+                    flex: 1;
+                    margin-left: 20rpx;
+                    color: #000000;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                }
+
+                .time {
+                    flex: 1;
+                    width: 100%;
+                    display: flex;
+                    margin-left: 20rpx;
+                    color: #000000;
+                    align-items: center;
+                    justify-content: space-between;
+                }
+            }
+        }
+
+        .line {
+            margin: 30rpx 0;
+            width: 100%;
+            border-bottom: 1rpx #BBC5E0 dashed;
+        }
+    }
+
+    :deep(.stepper--flex) {
+        width: 130rpx !important;
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/static/line.png b/src/static/line.png
new file mode 100644
index 00000000..4bd304fc
Binary files /dev/null and b/src/static/line.png differ