diff --git a/src/pages-sub/reserve-room/reserve-room.vue b/src/pages-sub/reserve-room/reserve-room.vue
new file mode 100644
index 0000000..7ade130
--- /dev/null
+++ b/src/pages-sub/reserve-room/reserve-room.vue
@@ -0,0 +1,60 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
+<route lang="jsonc" type="page">{
+	"layout": "tabbar",
+	"style": {
+		"navigationStyle": "custom"
+	}
+}</route>
+
+<template>
+	<view>
+		<view>
+			<wd-navbar safeAreaInsetTop :bordered="false">
+				<template #left>
+					<view class="h-48rpx flex items-center" @click="reserveRoom.back">
+						<wd-img width="48rpx" height="48rpx" :src="`${OSS}icon/icon_arrow_left.png`" class="mt-6rpx"></wd-img>
+						<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">预约茶室</view>
+					</view>
+				</template>
+				<template #right>
+					<view class="flex items-center ml-114rpx right-slot">
+						<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc.png`" class="mr-16rpx"></wd-img>
+						<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_kefu.png`"></wd-img>
+					</view>
+				</template>
+			</wd-navbar>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { ref, inject } from 'vue'
+	import { getNavBarHeight, getCapsuleOffset } from '@/utils/index'
+
+	let navbarHeight = ref<number>(0)
+	let OSS = inject('OSS')
+	const rightPadding = ref<string>('')
+
+	onLoad(() => {
+		navbarHeight.value = getNavBarHeight()
+        rightPadding.value = getCapsuleOffset()
+	})
+
+    const reserveRoom = {
+        back: () => {       
+            uni.navigateBack({
+                delta: 1,
+            })
+        } 
+    }  
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #fff;
+	}
+
+	.right-slot {
+		padding-right: v-bind(rightPadding);
+	}
+</style>