feat: alipay navbar

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>
+</style>