buddhism/pages/Monk/Monk.vue

<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 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 { CommonEnum } from '@/enum/common.js';
import { MonkEnum } from '@/enum/monk.js';

export default {
	data() {
		return {
			bgc: {
				backgroundColor: "#F5F0E7",
			},
			CommonEnum,
			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代传人，深耕禅修。',
				}
			]
		}
	},
	methods: {
		goDetail(item) {
			uni.showToast({
				title: '详情功能待开发',
				icon: 'none'
			})
		}
	}
}
</script>

<style lang="scss">
.page {
	width: 750rpx;
	min-height: 100vh;
	background: #F5F0E7;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	background-color: transparent;
	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;
	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;
}
.monk-list {
	width: 100%;
	margin-top: 24rpx;
}
.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>