diff --git a/src/components/navbar.vue b/src/components/navbar.vue
new file mode 100644
index 0000000..360543c
--- /dev/null
+++ b/src/components/navbar.vue
@@ -0,0 +1,63 @@
+
+<template>
+    <view class="w-[100%] fixed top-0 left-0 z-8">
+        <wd-navbar safeAreaInsetTop :bordered="false" :custom-class="customClass">
+            <template #left>
+                <view class="h-48rpx flex items-center" @click="navbar.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">{{ title }}</view>
+                </view>
+            </template>
+
+            <template #center>
+                <view class="h-48rpx flex items-center">
+                    <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>
+                <slot name="right"></slot>
+            </template>
+        </wd-navbar>
+    </view>
+</template>
+
+<script lang="ts" setup>
+	import { ref, inject } from 'vue'
+	import { getNavBarHeight, getCapsuleOffset } from '@/utils/index'
+
+	const OSS = inject('OSS')
+	const navbarHeight = ref<number>(0)
+
+    onMounted (() => {
+		navbarHeight.value = getNavBarHeight()
+    })
+
+    const props = defineProps({
+        title: {
+            type: String,
+            default: ''
+        },
+        customClass: {
+            type: String,
+            default: ''
+        }
+    })
+
+    const navbar = {
+        back: () => {
+            uni.navigateBack({
+                delta: 1
+            })
+        }
+    }
+</script>
+
+<script lang="ts">
+    export default {}
+</script>
+
+<style lang="scss" scoped>
+//
+</style>
diff --git a/src/main.ts b/src/main.ts
index 26559da..bc32aee 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,18 +3,27 @@ import { createSSRApp } from 'vue'
 import App from './App.vue'
 import { requestInterceptor } from './http/interceptor'
 import { routeInterceptor } from './router/interceptor'
+import navBar from '@/components/navbar.vue'
 
 import store from './store'
 import '@/style/index.scss'
 import 'virtual:uno.css'
 
+import { getNavBarHeight, getCapsuleOffset } from '@/utils/index'
+
+
 export function createApp() {
 	const app = createSSRApp(App)
+	/* 注册全局组件 */
+	app.component('navBar', navBar) // 注册全局组件
+
 	app.use(store)
 	app.use(routeInterceptor)
 	app.use(requestInterceptor)
 	app.use(VueQueryPlugin)
 	app.provide('OSS', 'https://shchazhi.oss-cn-hangzhou.aliyuncs.com/fronted/')
+	app.provide('navbarHeight', getNavBarHeight())
+	app.provide('capsuleOffset', getCapsuleOffset())
 
 	return {
 		app,
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 540ffd0..3c16a19 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -208,4 +208,4 @@ export function getCapsuleOffset() {
 	// #endif
 
 	return rightPadding
-}
+}
\ No newline at end of file