小程序导航栏设计

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,21 +30,23 @@
           </view>
         </view>
       </view>
+    </container>
+
   </view>
 </template>
 
 <script>
-	import {
+import {
   CommonEnum
-	} from '@/enum/common.js'
+} from '@/enum/common.js'
-	import {
+import {
   MonkEnum
-	} from '@/enum/monk.js'
+} from '@/enum/monk.js'
-	import {
+import {
   getMonkList
-	} from '@/api/monk/monk.js'
+} from '@/api/monk/monk.js'
 
-	export default {
+export default {
   data() {
     return {
       bgc: {
@@ -61,7 +64,7 @@
   methods: {
     async fetchMonkList() {
       try {
-					const res = await getMonkList({ name: this.searchName })
+        const res = await getMonkList({name: this.searchName})
         if (res.code === 200 && Array.isArray(res.rows)) {
           this.monkList = res.rows
         } else {
@@ -98,18 +101,19 @@
       });
     }
   }
-	}
+}
 </script>
 
 <style lang="scss">
-	.page {
+.page {
+  position: relative;
   width: 750rpx;
   min-height: 100vh;
   background: #F5F0E7;
   border-radius: 0rpx 0rpx 0rpx 0rpx;
-	}
+}
 
-	.header {
+.header {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -119,9 +123,9 @@
   width: 694rpx;
   border-radius: 16rpx;
   position: relative;
-	}
+}
 
-	.background-image {
+.background-image {
   position: absolute;
   top: 0;
   left: 0;
@@ -129,9 +133,9 @@
   height: 100%;
   z-index: -1;
   border-radius: 16rpx;
-	}
+}
 
-	.searchBox {
+.searchBox {
   display: flex;
   align-items: center;
   width: 660rpx;
@@ -141,15 +145,15 @@
   border: 1rpx solid #C7A26D;
   margin-top: 20rpx;
   padding: 0 12rpx;
-	}
+}
 
-	.search-icon {
+.search-icon {
   width: 32rpx;
   height: 32rpx;
   margin: 0 28rpx;
-	}
+}
 
-	.search-input {
+.search-input {
   flex: 1;
   font-size: 28rpx;
   color: #333;
@@ -157,14 +161,14 @@
   border: none;
   outline: none;
   height: 100%;
-	}
+}
 
-	.search-placeholder {
+.search-placeholder {
   color: #bfa16b;
   font-size: 28rpx;
-	}
+}
 
-	.search-btn {
+.search-btn {
   background: #bfa16b;
   color: #fff;
   font-size: 26rpx;
@@ -175,44 +179,44 @@
   align-items: center;
   justify-content: center;
   margin-left: 16rpx;
-	}
+}
 
-	.monk-list {
+.monk-list {
   width: 100%;
   margin-top: 24rpx;
-	}
+}
 
-	.monk-item {
+.monk-item {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   background: transparent;
   margin-bottom: 24rpx;
-	}
+}
 
-	.monk-avatar {
+.monk-avatar {
   width: 184rpx;
   height: 184rpx;
   background: #e5e5e5;
   border-radius: 8rpx;
   margin-right: 18rpx;
-	}
+}
 
-	.monk-info {
+.monk-info {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-	}
+}
 
-	.desc-row {
+.desc-row {
   display: flex;
   align-items: flex-end;
   flex-direction: column;
   width: 100%;
-	}
+}
 
-	.monk-desc {
+.monk-desc {
   line-height: 38rpx;
   font-size: 28rpx;
   color: #695347;
@@ -223,11 +227,11 @@
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
-	}
+}
 
-	.monk-detail {
+.monk-detail {
   color: #bfa16b;
   font-size: 24rpx;
   white-space: nowrap;
-	}
+}
 </style>

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;