优化导航栏

pages.json

@@ -25,7 +25,9 @@
   {
 	"path": "pages/mine/index",
 	"style": {
-	  "navigationBarTitleText": "我的"
+	  "navigationBarTitleText": "我的",
+	  "navigationStyle": "custom",
+	  "navigationBarBackgroundColor": "transparent"
 	}  
   },
   {
@@ -34,11 +36,6 @@
       "navigationBarTitleText": "工作台"
     }
   }, {
-    "path": "pages/mine/index",
-    "style": {
-      "navigationBarTitleText": "我的"
-    }
-  }, {
     "path": "pages/mine/avatar/index",
     "style": {
       "navigationBarTitleText": "修改头像"

pages/mine/index.vue

@@ -1,12 +1,14 @@
 <template>
   <view class="mine-container">
-    <!-- 顶部标题 -->
-    <view class="header-title">
-      <text class="title-text">我的</text>
+    <!-- 自定义导航栏 -->
+    <view class="custom-navbar" :style="{paddingTop: statusBarHeight + 'px'}">
+      <view class="navbar-content">
+        <text class="navbar-title">我的</text>
+      </view>
     </view>
 
     <!-- 用户登录/注册卡片 -->
-    <view class="login-card" @click="handleLoginCardClick">
+    <view class="login-card" :style="{marginTop: navbarHeight + 'rpx'}" @click="handleLoginCardClick">
       <view class="login-card-content">
         <view class="avatar-section">
           <view v-if="!avatar" class="avatar-placeholder">
@@ -93,12 +95,22 @@
     },
     data() {
       return {
-        name: this.$store.state.user.name
+        name: this.$store.state.user.name,
+        statusBarHeight: 0
       }
     },
+    onLoad() {
+      // 获取状态栏高度
+      const systemInfo = uni.getSystemInfoSync()
+      this.statusBarHeight = systemInfo.statusBarHeight || 0
+    },
     computed: {
       avatar() {
         return this.$store.state.user.avatar
+      },
+      navbarHeight() {
+        // 状态栏高度(px转rpx) + 导航栏高度(88rpx) + 间距(30rpx)
+        return (this.statusBarHeight * 2) + 88 + 30
       }
     },
     methods: {
@@ -159,23 +171,33 @@
     padding-bottom: 120rpx;
     background-color: #f5f5f5;
 
-    // 顶部标题
-    .header-title {
-      padding: 20rpx 0;
-      text-align: center;
-      background-color: #ffffff;
+    // 自定义导航栏
+    .custom-navbar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 999;
+      background-color: transparent;
 
-      .title-text {
-        font-size: 36rpx;
-        font-weight: 500;
-        color: #000000;
+      .navbar-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 88rpx;
+
+        .navbar-title {
+          font-size: 36rpx;
+          font-weight: 500;
+          color: #000000;
+        }
       }
     }
 
     // 登录卡片
     .login-card {
       position: relative;
-      margin: 30rpx 30rpx 40rpx 30rpx;
+      margin: 0 30rpx 40rpx 30rpx;
       padding: 40rpx 30rpx;
       background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
       border-radius: 24rpx;