兼容性修改

src/App.vue

@@ -98,6 +98,19 @@ page {
   background-color: #f5f6fb;
 }
 
+/* #ifdef H5 */
+uni-page-head,
+uni-page-head .uni-page-head {
+  height: 44px !important;
+  min-height: 44px !important;
+  padding-top: 0 !important;
+}
+
+uni-page-head .uni-page-head__title {
+  line-height: 44px !important;
+}
+/* #endif */
+
 .container {
   height: 100%;
   display: flex;

src/components/CustomNavBar.vue

@@ -0,0 +1,113 @@
+<template>
+  <view class="custom-navbar" :style="{ '--top-inset': topInset + 'px' }">
+    <view class="navbar-content">
+      <view class="navbar-left" v-if="showBack" @click="handleBack">
+        <text class="back-icon">‹</text>
+      </view>
+      <text class="navbar-title">{{ title }}</text>
+      <view class="navbar-right"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'CustomNavBar',
+  props: {
+    title: {
+      type: String,
+      default: '量化交易大师'
+    },
+    showBack: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function() {
+    return {
+      topInset: 0
+    }
+  },
+  created: function() {
+    // #ifdef H5
+    // H5（含微信内置浏览器）优先使用 CSS 的 env(safe-area-inset-top) 处理刘海屏
+    // uni.getSystemInfoSync 在 H5 下返回的 statusBarHeight/safeArea 可能不准确，容易导致顶部叠加出空白
+    this.topInset = 0
+    return
+    // #endif
+
+    var systemInfo = uni.getSystemInfoSync()
+
+    var statusBarHeight = systemInfo.statusBarHeight || 0
+    var safeTop = 0
+    if (systemInfo.safeAreaInsets && systemInfo.safeAreaInsets.top) {
+      safeTop = systemInfo.safeAreaInsets.top
+    } else if (systemInfo.safeArea && systemInfo.safeArea.top) {
+      safeTop = systemInfo.safeArea.top
+    }
+
+    this.topInset = Math.max(statusBarHeight, safeTop, 0)
+  },
+  methods: {
+    handleBack: function() {
+      uni.navigateBack({
+        delta: 1,
+        fail: function() {
+          uni.switchTab({ url: '/pages/index/index' })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.custom-navbar {
+  width: 100%;
+  background-color: #ffffff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  padding-top: calc(var(--top-inset, 0px) + env(safe-area-inset-top));
+  padding-top: calc(var(--top-inset, 0px) + constant(safe-area-inset-top));
+}
+
+.navbar-content {
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.navbar-left {
+  width: 60px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: 10px;
+}
+
+.back-icon {
+  font-size: 28px;
+  font-weight: 300;
+  color: #000000;
+  line-height: 1;
+}
+
+.navbar-title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+  font-weight: 500;
+  color: #000000;
+}
+
+.navbar-right {
+  width: 60px;
+}
+</style>

src/pages.json

@@ -2,7 +2,9 @@
   "pages": [
     {
       "path": "pages/index/index",
-      "style": {}
+      "style": {
+        "navigationBarTitleText": "量化交易大师"
+      }
     },
     {
       "path": "pages/login/login",
@@ -12,19 +14,27 @@
     },
     {
       "path": "pages/pool/pool",
-      "style": {}
+      "style": {
+        "navigationBarTitleText": "量化交易大师"
+      }
     },
     {
       "path": "pages/strong/strong",
-      "style": {}
+      "style": {
+        "navigationBarTitleText": "量化交易大师"
+      }
     },
     {
       "path": "pages/rank/rank",
-      "style": {}
+      "style": {
+        "navigationBarTitleText": "量化交易大师"
+      }
     },
     {
       "path": "pages/mine/mine",
-      "style": {}
+      "style": {
+        "navigationBarTitleText": "量化交易大师"
+      }
     },
     {
       "path": "pages/profile/edit",
@@ -73,7 +83,12 @@
     "navigationBarBackgroundColor": "#ffffff",
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "量化交易大师",
-    "backgroundColor": "#f5f6fb"
+    "backgroundColor": "#f5f6fb",
+    "titleNView": {
+      "titleColor": "#3F51F7",
+      "titleSize": "18",
+      "titleWeight": "800"
+    }
   },
   "tabBar": {
 	"custom": true, // 👈 关键：启用自定义 tabBar