fix(导航): 修复H5标题栏高度计算问题

在H5环境下添加对标题栏高度的动态计算，确保导航栏高度正确
调整顶部标题组件样式以适配H5环境

components/nav/nav.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { onLoad } from "@dcloudio/uni-app";
-import { ref } from "vue";
-import { useHeight } from "@/libs/utils";
+import { nextTick, ref } from "vue";
+import { useHeight, useRect } from "@/libs/utils";
 import useStore from "@/store";
 
 const store = useStore();
@@ -17,13 +17,22 @@ const safeHeight = ref({
 onLoad(() => {
   store.fontScale = uni.getStorageSync("fontScale") || 1;
   const height = useHeight();
-  // console.log(height);
 
   safeHeight.value.status = height.status;
   safeHeight.value.menu = height.menu;
   safeHeight.value.screen = height.screen;
   safeHeight.value.content = height.content;
   safeHeight.value.bottom = height.bottom;
+
+  // #ifdef H5
+  nextTick(async () => {
+    const rect = await useRect(".h5Title");
+    if (rect) {
+      safeHeight.value.menu = rect.height;
+    }
+  });
+
+  // #endif
 });
 </script>
 
@@ -40,6 +49,14 @@ onLoad(() => {
       :bottom="safeHeight.bottom"
       :tabbar="safeHeight.tabbar"
       :content="safeHeight.content"
+      :style="{
+        height: safeHeight.menu ? `${safeHeight.menu}px` : '45px',
+        paddingTop: `${safeHeight.status}px`,
+        backgroundColor: '#f8f8f8',
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+      }"
       :fix-style=" {
         height: safeHeight.menu ? `${safeHeight.menu}px` : '45px',
         paddingTop: `${safeHeight.status}px`,

components/topTitle/topTitle.vue

@@ -15,7 +15,7 @@ const props = defineProps(
 </script>
 
 <template>
-  <view class="left">
+  <view class="left h5Title">
     <text
       class="iconfont icon-back"
       :style="{ color: '#333' }"