fix: navbar commpontents

pages/fortune/detail.vue

@@ -1,11 +1,6 @@
 <template>
   <view class="fortune-detail-page">
-    <!-- 顶部导航栏 (透明) -->
-    <view class="nav-bar">
-      <view class="back-btn" @click="goHome">
-        <text class="uni-icons">🏠</text>
-      </view>
-    </view>
+    <NavBar title="2026 灵马贺岁" />
 
     <!-- 顶部提示条 -->
     <view class="top-banner" v-if="inviterName">
@@ -38,9 +33,6 @@
           :src="fortuneData.imageUrl || defaultImage"
           mode="widthFix"
         />
-        <view class="tag-pill">
-          <text class="tag-text">马到成功</text>
-        </view>
       </view>
 
       <view class="card-content">
@@ -94,6 +86,7 @@ import { ref } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import { getPageDetail } from "@/api/system.js";
 import { saveViewRequest } from "@/utils/common.js";
+import NavBar from "@/components/NavBar/NavBar.vue";
 
 const inviterName = ref("");
 const inviterAvatar = ref("");
@@ -176,37 +169,6 @@ const saveCard = () => {
   font-family: sans-serif;
 }
 
-.nav-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 44px;
-  display: flex;
-  align-items: center;
-  padding-left: 16px;
-  z-index: 100;
-}
-.back-btn {
-  width: 32px;
-  height: 32px;
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #fff;
-  position: relative;
-}
-.back-btn::after {
-  content: "";
-  position: absolute;
-  top: -10px;
-  left: -10px;
-  right: -10px;
-  bottom: -10px;
-}
-
 .top-banner {
   background: rgba(255, 215, 0, 0.1);
   border: 1px solid rgba(255, 215, 0, 0.2);
@@ -271,23 +233,6 @@ const saveCard = () => {
   width: 100%;
   display: block;
 }
-.tag-pill {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  background: #ffd700; /* 黄色背景 */
-  padding: 10px 6px;
-  border-radius: 20px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-  border: 2px solid #fff;
-}
-.tag-text {
-  writing-mode: vertical-rl;
-  font-size: 16px;
-  font-weight: bold;
-  color: #333;
-  letter-spacing: 4px;
-}
 
 .card-content {
   padding: 24px;

pages/fortune/record.vue

@@ -1,12 +1,6 @@
 <template>
-  <view class="record-page" :style="{ paddingTop: navBarHeight + 'px' }">
-    <!-- 导航栏 -->
-    <view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
-      <view class="nav-content" :style="{ paddingTop: statusBarHeight + 'px' }">
-        <view class="back" @tap="goBack">‹</view>
-        <text class="nav-title">我的运势记录</text>
-      </view>
-    </view>
+  <view class="record-page">
+     <NavBar title="我的运势记录" />
 
     <scroll-view
       scroll-y
@@ -93,12 +87,9 @@
 
 <script setup>
 import { ref, computed } from "vue";
-import { getBavBarHeight, getStatusBarHeight } from "@/utils/system";
 import { onLoad } from "@dcloudio/uni-app";
 import { getList } from "@/api/fortune.js";
-
-const navBarHeight = getBavBarHeight();
-const statusBarHeight = getStatusBarHeight();
+import NavBar from "@/components/NavBar/NavBar.vue";
 
 // 状态管理
 const records = ref([]);
@@ -195,37 +186,6 @@ onLoad(() => {
   overflow: hidden;
 }
 
-.nav-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  background-color: #1a1a1a;
-  z-index: 100;
-}
-.nav-content {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  padding: 0 24rpx;
-}
-.back {
-  font-size: 50rpx;
-  color: #fff;
-  margin-right: 24rpx;
-  line-height: 1;
-  padding: 20rpx;
-  margin-left: -20rpx;
-}
-.nav-title {
-  font-size: 34rpx;
-  font-weight: 600;
-  color: #fff;
-  flex: 1;
-  text-align: center;
-  margin-right: 50rpx;
-}
-
 .content-scroll {
   flex: 1;
   height: 0; /* Important for scroll-view in flex container */