添加navbar组件

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>