Monk组件中搜索框的创建

enum/common.js

@@ -0,0 +1,5 @@
+export const CommonEnum = {
+
+    BACKGROUND: "https://api.ccttiot.com/image-1753769939853.png", //返回的按钮图像
+};
+export default CommonEnum;

enum/monk.js

@@ -0,0 +1,7 @@
+
+export const MonkEnum = {
+
+    SEARCH: "https://api.ccttiot.com/image-1753769500465.png", //返回的按钮图像
+};
+
+export default MonkEnum;

enum/navBar.js

@@ -0,0 +1,6 @@
+export const navBarEnum = {
+
+    BACK: "https://api.ccttiot.com/image-1753761480650.png", //返回的按钮图像
+};
+
+export default navBarEnum;

pages.json

@@ -70,6 +70,15 @@
 				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/Monk/Monk",
+			"style" : 
+			{
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
 		}
 	],
 

pages/Monk/Monk.vue

@@ -0,0 +1,104 @@
+<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">
+		</u-navbar>
+		<view class="container">
+			<image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
+			<view class='searchBox'>
+				<image class="search-icon" :src="MonkEnum.SEARCH" mode="aspectFit"></image>
+				<text class="search-text">张姗姗</text>
+				<view class="search-btn">搜索</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		CommonEnum
+	} from '@/enum/common.js';
+	import { MonkEnum } from '@/enum/monk.js'
+	export default {
+		data() {
+			return {
+				bgc: {
+					backgroundColor: "#F5F0E7",
+				},
+				CommonEnum,
+				MonkEnum
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		width: 750rpx;
+		height: 2492rpx;
+		background: #F5F0E7;
+		border-radius: 0rpx 0rpx 0rpx 0rpx;
+	}
+
+	.container {
+		display: flex;
+		justify-content: center;
+		min-height: 100vh;
+		background-color: transparent;
+		width: 750rpx;
+		position: relative;
+	}
+
+	.searchBox {
+		display: flex;
+		align-items: center;
+		width: 660rpx;
+		height: 70rpx;
+		background: #FFFBF5;
+		border-radius: 10rpx;
+		border: 1rpx solid #C7A26D;
+		margin-top: 20rpx;
+		padding: 0 12rpx;
+	}
+
+	.search-icon {
+		width: 32rpx;
+		height: 32rpx;
+		margin: 0 16rpx 0 0;
+	}
+
+	.search-text {
+		flex: 1;
+		font-size: 28rpx;
+		color: #bfa16b;
+	}
+
+	.search-btn {
+		background: #bfa16b;
+		color: #fff;
+		font-size: 26rpx;
+		border-radius: 6rpx;
+		padding: 0 24rpx;
+		height: 48rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-left: 16rpx;
+	}
+
+	.background-image {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: -1;
+		border-radius: 16rpx;
+	}
+</style>

pages/walkInto/walkInto.vue

@@ -4,6 +4,7 @@
               title-size='36' height='36' id="navbar">
     </u-navbar>
     <view class="container">
+  <!--    <image src="" mode=""></image> -->
 	  <view>111</view>
     </view>
   </view>
@@ -29,15 +30,20 @@ export default {
 
 <style lang="scss">
 page {
+	  width: 750rpx;
+	height: 2492rpx;
 	background: #F5F0E7;
+	border-radius: 0rpx 0rpx 0rpx 0rpx;
 }
 .container {
-  width: 100%;
-  height: 100%;
+  min-height: 100vh;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: flex-start;
   flex-direction: column;
   background-color: #FFFBF5;
+  margin: 20px 14px 40rpx 14px;
+  width: 694rpx;
+  background: #FFFBF5;
+  border-radius: 16rpx 16rpx 16rpx 16rpx;
 }
 </style>