From 790f0c19fb288d03d05dbcb43154ed07c92337c3 Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Sat, 31 Jan 2026 23:44:00 +0800
Subject: [PATCH] fix: navbar commpontents

---
 components/NavBar/NavBar.vue |  8 ++++--
 pages/fortune/detail.vue     |  2 +-
 pages/fortune/index.vue      | 50 ++++--------------------------------
 3 files changed, 12 insertions(+), 48 deletions(-)

diff --git a/components/NavBar/NavBar.vue b/components/NavBar/NavBar.vue
index af6234c..65e8ea0 100644
--- a/components/NavBar/NavBar.vue
+++ b/components/NavBar/NavBar.vue
@@ -2,7 +2,7 @@
   <view>
     <!-- Placeholder to occupy space if fixed -->
     <view
-      v-if="fixed && placeholder"
+      v-if="fixed && placeholder && !transparent"
       class="nav-placeholder"
       :style="{ height: navBarHeight + 'px' }"
     ></view>
@@ -14,7 +14,7 @@
       :style="{
         height: navBarHeight + 'px',
         paddingTop: statusBarHeight + 'px',
-        backgroundColor: background,
+        backgroundColor: transparent ? 'transparent' : background,
         color: color
       }"
     >
@@ -60,6 +60,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  transparent: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const navBarHeight = ref(64);
diff --git a/pages/fortune/detail.vue b/pages/fortune/detail.vue
index 579bc48..daf2bc0 100644
--- a/pages/fortune/detail.vue
+++ b/pages/fortune/detail.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="fortune-detail-page">
-    <NavBar title="2026 灵马贺岁" />
+    <NavBar title="2026 灵马贺岁" :transparent="true"/>
 
     <!-- 顶部提示条 -->
     <view class="top-banner" v-if="inviterName">
diff --git a/pages/fortune/index.vue b/pages/fortune/index.vue
index d7a3424..5a329a7 100644
--- a/pages/fortune/index.vue
+++ b/pages/fortune/index.vue
@@ -1,10 +1,6 @@
 <template>
-  <view class="fortune-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
-    <!-- 顶部导航 -->
-    <view class="nav-bar">
-      <view class="back" @tap="goBack">‹</view>
-      <text class="nav-title">2026 新年运势</text>
-    </view>
+  <view class="fortune-page" >
+     <NavBar title="2026 新年运势" :transparent="true" color="#ffd700"/>
 
     <!-- 初始状态：签筒 -->
     <view class="state-initial" v-if="status !== 'result'">
@@ -119,7 +115,7 @@
 
 <script setup>
 import { ref, onUnmounted, computed } from "vue";
-import { getBavBarHeight, getDeviceInfo } from "@/utils/system";
+import { getDeviceInfo } from "@/utils/system";
 import { onLoad, onShow, onShareAppMessage } from "@dcloudio/uni-app";
 import { abilityCheck } from "@/api/system.js";
 import { drawFortune } from "@/api/fortune.js";
@@ -127,6 +123,7 @@ import { createShareToken, getShareReward } from "@/api/system.js";
 import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
 import { useUserStore } from "@/stores/user";
 import { saveRemoteImageToLocal, saveRecordRequest } from "@/utils/common.js";
+import NavBar from "@/components/NavBar/NavBar.vue";
 
 const userStore = useUserStore();
 const loginPopupRef = ref(null);
@@ -199,14 +196,6 @@ const checkDrawStatus = async () => {
 const currentFortune = ref({});
 const cardId = ref("");
 
-const goBack = () => {
-  if (status.value === "result") {
-    status.value = "initial";
-  } else {
-    uni.navigateBack();
-  }
-};
-
 const goToRecord = () => {
   uni.navigateTo({
     url: "/pages/fortune/record",
@@ -391,35 +380,6 @@ const saveCard = () => {
   z-index: 0;
 }
 
-/* 导航栏 */
-.nav-bar {
-  width: 100%;
-  height: 44px;
-  display: flex;
-  align-items: center;
-  padding: 0 24rpx;
-  z-index: 100;
-  position: relative;
-}
-.back {
-  font-size: 50rpx;
-  color: #ffd700;
-  margin-right: 24rpx;
-  line-height: 1;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-  padding: 20rpx;
-  margin-left: -20rpx;
-}
-.nav-title {
-  font-size: 34rpx;
-  font-weight: 600;
-  color: #ffd700;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-  flex: 1;
-  text-align: center;
-  margin-right: 50rpx;
-}
-
 /* 初始状态 */
 .state-initial {
   width: 100%;
@@ -435,7 +395,7 @@ const saveCard = () => {
 
 .header-text {
   text-align: center;
-  margin-bottom: 50px;
+  margin-bottom: 150rpx;
 }
 .title {
   font-size: 22px;