fix: nav page

pages/avatar/index.vue

@@ -1,9 +1,6 @@
 <template>
-  <view class="avatar-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
-    <view class="nav-bar">
-      <view class="back" @tap="goBack">‹</view>
-      <text class="nav-title">新春头像挂饰</text>
-    </view>
+  <view class="avatar-page">
+    <NavBar title="头像制作" />
     <view class="preview-card">
       <view class="preview-square">
         <image
@@ -160,7 +157,6 @@
 <script setup>
 import { ref, computed } from "vue";
 import { onShareAppMessage, onLoad, onReachBottom } from "@dcloudio/uni-app";
-import { getBavBarHeight, getDeviceInfo } from "@/utils/system";
 import { useUserStore } from "@/stores/user";
 import {
   createShareToken,
@@ -179,6 +175,7 @@ import {
   generateObjectId,
   uploadImage,
 } from "@/utils/common.js";
+import NavBar from "@/components/NavBar/NavBar.vue";
 
 const userStore = useUserStore();
 const loginPopupRef = ref(null);
@@ -719,28 +716,6 @@ const loadImage = (url) => {
   box-sizing: border-box;
   padding-bottom: env(safe-area-inset-bottom);
 }
-.nav-bar {
-  display: flex;
-  align-items: center;
-  padding: 16rpx 24rpx;
-}
-.back {
-  font-size: 50rpx;
-  margin-right: 24rpx;
-  line-height: 1;
-  color: #333;
-  /* 增大点击区域 */
-  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 */
-}
 .preview-card {
   margin: 20rpx 24rpx;
   background: #fff;