fix: navbar commpontents

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 */