Monk组件静态创建

enum/common.js

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

pages/Monk/Monk.vue

@@ -10,15 +10,23 @@
 				<text class="search-text">张姗姗</text>
 				<view class="search-btn">搜索</view>
 			</view>
+			<view class="monk-list">
+				<view class="monk-item" v-for="(item, idx) in monkList" :key="idx">
+					<image class="monk-avatar" :src="item.avatar" mode="aspectFill"></image>
+					<view class="monk-info">
+						<view class="monk-desc">{{ item.desc }}</view>
+						<view class="monk-detail" @click="goDetail(item)">查看详情></view>
+					</view>
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
 
 <script>
-	import {
+import { CommonEnum } from '@/enum/common.js';
-		CommonEnum
+import { MonkEnum } from '@/enum/monk.js';
-	} from '@/enum/common.js';
+
-	import { MonkEnum } from '@/enum/monk.js'
 export default {
 	data() {
 		return {
@@ -26,35 +34,61 @@
 				backgroundColor: "#F5F0E7",
 			},
 			CommonEnum,
-				MonkEnum
+			MonkEnum,
+			monkList: [
+				{
+					avatar: 'https://api.ccttiot.com/image-1753770000001.png',
+					desc: '释某某法师，现任平山寺方丈。法师于2000年在平山寺剃度出家，2001年平山寺龙坛受具足戒，师承临济宗第11代传人，深耕禅修。',
+				},
+				{
+					avatar: 'https://api.ccttiot.com/image-1753770000001.png',
+					desc: '释某某法师，现任平山寺方丈。法师于2000年在平山寺剃度出家，2001年平山寺龙坛受具足戒，师承临济宗第11代传人，深耕禅修。',
+				},
+				{
+					avatar: 'https://api.ccttiot.com/image-1753770000001.png',
+					desc: '释某某法师，现任平山寺方丈。法师于2000年在平山寺剃度出家，2001年平山寺龙坛受具足戒，师承临济宗第11代传人，深耕禅修。',
+				}
+			]
 		}
-		},
-		onLoad() {
-
 	},
 	methods: {
-
+		goDetail(item) {
+			uni.showToast({
+				title: '详情功能待开发',
+				icon: 'none'
+			})
+		}
 	}
 }
 </script>
 
 <style lang="scss">
-	page {
+.page {
 	width: 750rpx;
-		height: 2492rpx;
+	min-height: 100vh;
 	background: #F5F0E7;
 	border-radius: 0rpx 0rpx 0rpx 0rpx;
 }
-
 .container {
 	display: flex;
-		justify-content: center;
+	flex-direction: column;
+	align-items: center;
 	min-height: 100vh;
 	background-color: transparent;
-		width: 750rpx;
+	margin: 20px 14px 40rpx 14px;
+	width: 694rpx;
+	border-radius: 16rpx;
 	position: relative;
 }
-
+.background-image {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: -1;
+	border-radius: 16rpx;
+}
 .searchBox {
 	display: flex;
 	align-items: center;
@@ -66,19 +100,16 @@
 	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;
@@ -91,14 +122,40 @@
 	justify-content: center;
 	margin-left: 16rpx;
 }
-
+.monk-list {
-	.background-image {
-		position: absolute;
-		top: 0;
-		left: 0;
 	width: 100%;
-		height: 100%;
+	margin-top: 24rpx;
-		z-index: -1;
+}
-		border-radius: 16rpx;
+.monk-item {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	background: transparent;
+	margin-bottom: 24rpx;
+}
+.monk-avatar {
+	width: 100rpx;
+	height: 100rpx;
+	background: #e5e5e5;
+	border-radius: 8rpx;
+	margin-right: 18rpx;
+}
+.monk-info {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+.monk-desc {
+	font-size: 26rpx;
+	color: #695347;
+	line-height: 1.6;
+	margin-bottom: 8rpx;
+	word-break: break-all;
+}
+.monk-detail {
+	color: #bfa16b;
+	font-size: 24rpx;
+	align-self: flex-end;
 }
 </style>