Monk页面优化

pages/monk/monk.vue

@@ -1,9 +1,7 @@
 <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">
+    <custom-navbar title="寺庙高僧" />
-		</u-navbar>
-    <container>
 		<view class="header">
 			<image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
 			<view class='searchBox'>
@@ -30,23 +28,25 @@
 				</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'
+	import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
 
-export default {
+	export default {
+		components: {
+			CustomNavbar
+		},
 		data() {
 			return {
 				bgc: {
@@ -64,7 +64,7 @@ export default {
 		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 {
@@ -101,31 +101,31 @@ export default {
 				});
 			}
 		}
-}
+	}
 </script>
 
 <style lang="scss">
-.page {
+	.page {
-  position: relative;
 		width: 750rpx;
 		min-height: 100vh;
 		background: #F5F0E7;
 		border-radius: 0rpx 0rpx 0rpx 0rpx;
-}
+		/* 移除padding-top，因为导航栏已经处理了状态栏适配 */
+	}
 
-.header {
+	.header {
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 100vh;
   background-color: transparent;
-  margin: 20px 14px 40rpx 14px;
+  margin: 10px 14px 40rpx 14px; /* 减少顶部间距 */
   width: 694rpx;
   border-radius: 16rpx;
   position: relative;
 }
 
-.background-image {
+	.background-image {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -133,9 +133,10 @@ export default {
 		height: 100%;
 		z-index: -1;
 		border-radius: 16rpx;
-}
+		/* 确保背景图不被导航栏遮挡 */
+	}
 
-.searchBox {
+	.searchBox {
   display: flex;
   align-items: center;
   width: 660rpx;
@@ -143,17 +144,17 @@ export default {
   background: #FFFBF5;
   border-radius: 10rpx;
   border: 1rpx solid #C7A26D;
-  margin-top: 20rpx;
+  margin-top: 10rpx; /* 进一步减少顶部间距 */
   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;
@@ -161,14 +162,14 @@ export default {
 		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;
@@ -179,44 +180,45 @@ export default {
 		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;
@@ -227,11 +229,11 @@ export default {
 		-webkit-line-clamp: 4;
 		-webkit-box-orient: vertical;
 		overflow: hidden;
-}
+	}
 
-.monk-detail {
+	.monk-detail {
 		color: #bfa16b;
 		font-size: 24rpx;
 		white-space: nowrap;
-}
+	}
 </style>