小程序导航栏设计

enum/common.js

@@ -1,6 +1,7 @@
 export const CommonEnum = {
 
-    BACKGROUND: "https://api.ccttiot.com/image-1753769939853.png", //返回的按钮图像
+    BACKGROUND: "https://api.ccttiot.com/image-1753769939853.png", //背景图片
-	RIGHT_CHEVRON:"https://api.ccttiot.com/image-1753773619878.png"
+	RIGHT_CHEVRON:"https://api.ccttiot.com/image-1753773619878.png",
+    BACK_BUTTON:"https://api.ccttiot.com/image-1753868358514.png"
 };
 export default CommonEnum;

pages/monk/monk.vue

@@ -3,6 +3,7 @@
 		<u-navbar title="寺庙高僧" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
 			title-size='36' height='36' id="navbar">
 		</u-navbar>
+    <container>
       <view class="header">
         <image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
         <view class='searchBox'>
@@ -29,6 +30,8 @@
           </view>
         </view>
       </view>
+    </container>
+
   </view>
 </template>
 
@@ -103,6 +106,7 @@
 
 <style lang="scss">
 .page {
+  position: relative;
   width: 750rpx;
   min-height: 100vh;
   background: #F5F0E7;

pages/walkInto/walkInto.vue

@@ -1,29 +1,65 @@
 <template>
   <view class="page">
-    <u-navbar title="走进平山" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
+    <!-- 自定义导航栏 -->
-              title-size='36' height='36' id="navbar">
+    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px', height: navBarHeight + 'px' }">
-    </u-navbar>
+      <view class="navbar-left" @click="goBack" :style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }">
-    <view class="header">
+        <image :src="CommonEnum.BACK_BUTTON" mode="aspectFit" class="back-icon"></image>
+      </view>
+      <view class="navbar-title" :style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }">走进平山</view>
+      <view class="navbar-right" :style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }"></view>
+    </view>
+
+    <view class="header" :style="{ marginTop: navBarHeight + 'px' }">
   <!--    <image src="" mode=""></image> -->
-	  <view>111</view>
+	  <view>111222</view>
     </view>
   </view>
 </template>
 
 <script>
+import CommonEnum from "../../enum/common";
+
 export default {
+  computed: {
+    CommonEnum() {
+      return CommonEnum
+    }
+  },
   data() {
     return {
       bgc: {
         backgroundColor: "#F5F0E7",
       },
+      statusBarHeight: 0,
+      navBarHeight: 0,
+      menuButtonInfo: null,
+      capsuleHeight: 0,
     }
   },
   onLoad() {
-
+    this.getSystemInfo();
   },
   methods: {
+    goBack() {
+      uni.navigateBack({
+        delta: 1
+      });
+    },
+    getSystemInfo() {
+      // 获取系统信息
+      const systemInfo = uni.getSystemInfoSync();
+      // 获取状态栏高度
+      this.statusBarHeight = systemInfo.statusBarHeight;
       
+      // 获取胶囊按钮信息
+      this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+      
+      // 计算胶囊高度
+      this.capsuleHeight = this.menuButtonInfo.height;
+      
+      // 计算导航栏高度（胶囊底部到状态栏顶部的距离）
+      this.navBarHeight = this.menuButtonInfo.bottom + 8;
+    }
   }
 }
 </script>
@@ -35,6 +71,54 @@ page {
 	background: #F5F0E7;
 	border-radius: 0rpx 0rpx 0rpx 0rpx;
 }
+
+/* 自定义导航栏样式 */
+.custom-navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  padding-top: 0;
+  background-color: #F5F0E7;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 30rpx;
+  padding-right: 30rpx;
+  box-sizing: border-box;
+}
+
+.navbar-left {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60rpx;
+
+  .back-icon {
+    width: 56rpx;
+    height: 56rpx;
+  }
+}
+
+.navbar-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #695347;
+  flex: 1;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navbar-right {
+  width: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .header {
   min-height: 100vh;
   display: flex;