fix: navbar commpontents

pages/detail/index.vue

@@ -1,18 +1,6 @@
 <template>
-  <view class="detail-page" :style="{ paddingTop: navBarHeight + 'px' }">
-    <!-- Custom Navigation Bar -->
-    <view
-      class="nav-bar"
-      :style="{
-        height: navBarHeight + 'px',
-        paddingTop: statusBarHeight + 'px',
-      }"
-    >
-      <view class="nav-left" @tap="goHome">
-        <uni-icons type="home" size="24" color="#333"></uni-icons>
-      </view>
-      <text class="nav-title">新春祝福详情</text>
-    </view>
+  <view class="detail-page" >
+     <NavBar title="祝福贺卡" />
 
     <scroll-view scroll-y class="content-scroll">
       <view class="content-wrap">
@@ -112,14 +100,11 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
-import { getBavBarHeight } from "@/utils/system";
+import { ref } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import { getPageDetail } from "@/api/system.js";
 import { saveViewRequest } from "@/utils/common.js";
-
-const navBarHeight = ref(44);
-const statusBarHeight = ref(20);
+import NavBar from "@/components/NavBar/NavBar.vue";
 
 const cardId = ref("");
 const cardDetail = ref({});
@@ -133,22 +118,6 @@ onLoad(async (options) => {
   }
 });
 
-onMounted(() => {
-  const sysInfo = uni.getSystemInfoSync();
-  statusBarHeight.value = sysInfo.statusBarHeight;
-  navBarHeight.value = getBavBarHeight();
-});
-
-const goBack = () => {
-  uni.navigateBack();
-};
-
-const goHome = () => {
-  uni.switchTab({
-    url: "/pages/index/index",
-  });
-};
-
 const makeGreeting = () => {
   uni.switchTab({ url: "/pages/make/index" });
 };
@@ -211,34 +180,6 @@ const decorList = ref([
   box-sizing: border-box;
 }
 
-.nav-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  padding: 0 24rpx;
-  background: #fff6f6; /* Match page bg */
-}
-.nav-left {
-  display: flex;
-  align-items: center;
-  margin-right: 24rpx;
-  /* 增大点击区域 */
-  padding: 20rpx;
-  margin-left: -20rpx;
-}
-.nav-title {
-  font-size: 34rpx;
-  font-weight: bold;
-  color: #333;
-  flex: 1;
-  text-align: center;
-  margin-right: 50rpx; /* Balance back button */
-}
-
 .content-scroll {
   height: 100%;
 }