diff --git a/components/NavBar/NavBar.vue b/components/NavBar/NavBar.vue
index 65e8ea0..a6cf15c 100644
--- a/components/NavBar/NavBar.vue
+++ b/components/NavBar/NavBar.vue
@@ -15,16 +15,14 @@
         height: navBarHeight + 'px',
         paddingTop: statusBarHeight + 'px',
         backgroundColor: transparent ? 'transparent' : background,
-        color: color
+        color: color,
+        boxSizing: 'border-box',
       }"
     >
       <view class="nav-content">
-        <view
-          v-if="back"
-          class="back"
-          @tap="goBack"
-          :style="{ color: color }"
-        >‹</view>
+        <view v-if="back" class="back" @tap="goBack" :style="{ color: color }"
+          >‹</view
+        >
         <text class="nav-title" :style="{ color: color }">{{ title }}</text>
       </view>
     </view>
@@ -33,7 +31,7 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
-import { getBavBarHeight, getStatusBarHeight } from "@/utils/system";
+import { getTitleBarHeight } from "@/utils/system";
 
 const props = defineProps({
   title: {
@@ -70,8 +68,9 @@ const navBarHeight = ref(64);
 const statusBarHeight = ref(20);
 
 onMounted(() => {
-  navBarHeight.value = getBavBarHeight();
-  statusBarHeight.value = getStatusBarHeight();
+  const systemInfo = uni.getSystemInfoSync();
+  statusBarHeight.value = systemInfo.statusBarHeight || 20;
+  navBarHeight.value = statusBarHeight.value + getTitleBarHeight();
 });
 
 const goBack = () => {
@@ -89,7 +88,7 @@ const goBack = () => {
   width: 100%;
   box-sizing: border-box;
   z-index: 999;
-  
+
   &.fixed {
     position: fixed;
     top: 0;
@@ -121,4 +120,4 @@ const goBack = () => {
   text-align: center;
   margin-right: 50rpx; /* Balance back button */
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages.json b/pages.json
index 7d4e76a..1abbee7 100644
--- a/pages.json
+++ b/pages.json
@@ -157,7 +157,11 @@
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "uni-app",
     "navigationBarBackgroundColor": "#F8F8F8",
-    "backgroundColor": "#F8F8F8"
+    "backgroundColor": "#F8F8F8",
+    "mp-alipay": {
+      "transparentTitle": "always",
+      "titlePenetrate": "YES"
+    }
   },
   "tabBar": {
     "color": "#999999",
diff --git a/utils/system.js b/utils/system.js
index f30bbb3..3d1a753 100644
--- a/utils/system.js
+++ b/utils/system.js
@@ -2,12 +2,21 @@ const SYSTEM = uni.getSystemInfoSync();
 
 export const getStatusBarHeight = () => SYSTEM.statusBarHeight || 15;
 export const getTitleBarHeight = () => {
+  // #ifdef MP-ALIPAY
+  return 44;
+  // #endif
+
   if (uni.getMenuButtonBoundingClientRect) {
-    const { top, height } = uni.getMenuButtonBoundingClientRect();
-    return height + (top - getStatusBarHeight()) * 2;
-  } else {
-    return 40;
+    try {
+      const rect = uni.getMenuButtonBoundingClientRect();
+      if (rect && rect.top && rect.height) {
+        return rect.height + (rect.top - getStatusBarHeight()) * 2;
+      }
+    } catch (e) {
+      console.error(e);
+    }
   }
+  return 44;
 };
 
 export const getBavBarHeight = () => getStatusBarHeight() + getTitleBarHeight();