MinNan/xueyuan_fenbao/zhuangJia/zhuangJia.vue

<template>
	<view class="body2">
		<u-navbar :autoBack="true" title="详情介绍" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="">
			<view class="group_1">
				<view class="block_1">
					<view class="box_2">
						<view class="text-group_4">
							<text lines="1" class="text_2">{{ expertInfo.name }}</text>
							<text lines="1" class="text_3">{{ expertInfo.zc }}</text>
						</view>
						<view class="box_6">
							<view class="image-text_2">
								<text lines="1" decode="true" class="text-group_2">&nbsp;教学指数</text>
								<uni-icons style="" type="star-filled" size="18" color="#CA5642"></uni-icons>
								<uni-icons style="" type="star-filled" size="18" color="#CA5642"></uni-icons>
								<uni-icons style="" type="star-filled" size="18" color="#CA5642"></uni-icons>
								<uni-icons style="" type="star-filled" size="18" color="#CA5642"></uni-icons>
								<uni-icons style="" type="star-filled" size="18" color="#CA5642"></uni-icons>
							</view>
						</view>
						<view class="box_4">
							<view class="group_4">
								<image style="width: 100%; height: 100%; border-radius: 50%" :src="expertInfo.img"></image>
							</view>
						</view>
					</view>
					<text lines="1" class="text_4">个人简介</text>
					<view class="text-wrapper_1">
						<view class="text_5">
							<text lines="1" decode="true" class="paragraph_1">{{ expertInfo.title }}</text>
						</view>
					</view>
					<view class="text-wrapper_7">
						<text lines="1" class="text_7">相关活动</text>
						<text lines="1" class="text_8">查看更多》</text>
					</view>
					<view class="list_3">
						<view @click="xqBtn" class="list-items_1-0" v-for="item in 2" :key="item">
							<view class="section_1-0"></view>
							<uni-icons style="margin-top: 50rpx; margin-left: 20rpx" type="paperclip" size="22"></uni-icons>

							<view class="text-wrapper_8-0">
								<text lines="1" class="text_9-0">“答嘴鼓”夏令营第三期活动</text>
								<text lines="1" decode="true" class="text_10-0">2023-01-12&nbsp;&nbsp;&nbsp;&nbsp;08:30</text>
							</view>
						</view>
					</view>
					<view class="text-wrapper_9">
						<text lines="1" class="text_11">视频课程</text>
						<text lines="1" class="text_8">查看更多》</text>
					</view>
					<view class="list-items_2" v-for="item in 2" :key="item">
						<view class="group_5">
							<image style="width: 100%; height: 100%" src="https://huli-app.wenlvti.net/app_static/minnanhun/image/kctp.png"></image>
						</view>
						<view class="group_7">
							<view class="text-group_5">
								<text lines="1" decode="true" class="text_13">奋进新征程&nbsp;永远跟党走</text>
								<text lines="1" class="text_14">讲师：郭建居</text>
							</view>
							<view class="group_8">
								<text lines="1" class="text_16">免费</text>
								<view class="text-wrapper_6">
									<text lines="1" class="text_17">立即观看</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			expertInfo: null // 存储人员信息的对象
		};
	},
	onLoad(options) {
		const itemId = options.id; // 获取从上一个页面传递过来的id参数
		// 调用方法加载人员信息
		this.loadExpertInfo(itemId);
	},
	methods: {
		xqBtn() {
			uni.navigateTo({
				url: '/xueyuan_fenbao/zhuangJia/huodongXq'
			});
		},
		loadExpertInfo(itemId) {
			// 模拟数据源，使用临时数据
			const expertData = [
				{
					id: '1',
					zc: '文史专家',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/lxq.jpg',
					name: '李向群老师',
					title: '福建省闽南文化研究会副会长，厦门市教育学会原副会长、厦门市语言学会原副会长、厦门大学出版社特约编审、集美大学客座教授。著作有《厦门谚语》、《自由行踪----我的二十载台湾行》、《厦门教育史话》、《沧浪---海沧影像纪事》和《见证：厦门1938----日寇侵占厦门前后史料汇刊》等。'
				},
				{
					id: '2',
					zc: '文史专家',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/hgf.jpg',
					name: '黄国富老师',
					title: '湖里区政协特邀研究员、非物质文化遗产保护专家组成员，《湖里区志》特约编审，《湖里文史资料》主编。多年来专注于闽南文化、乡土文化、地名文化、红色文化等方面的研究。主要有《湖里乡村记忆》《故乡家园》等七八部专著。'
				}
			];

			// 根据itemId查找对应的人员信息
			const selectedExpert = expertData.find((expert) => expert.id === itemId);

			if (selectedExpert) {
				// console.log(selectedExpert, 'selectedExpert');
				// 将查找到的人员信息赋值给页面的对象数据属性，用于渲染
				this.expertInfo = selectedExpert;
			}
		}
	}
};
</script>

<style>
.body2 {
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-color: #efefef;
	padding-bottom: 50rpx;
	background-color: #efefef;
}
.group_1 {
	width: 750rpx;
	display: flex;
	flex-direction: column;
	background-color: #efefef;
}

.block_1 {
	width: 750rpx;
	display: flex;
	flex-direction: column;
}
.box_2 {
	box-shadow: 0px 30px 60px 0px rgba(19, 104, 158, 0.1);
	background-color: rgba(255, 255, 255, 1);
	border-radius: 20rpx;
	position: relative;
	width: 690rpx;
	height: 322rpx;
	display: flex;
	flex-direction: column;
	margin: 116rpx 0 0 30rpx;
}
.text-group_4 {
	width: 263rpx;
	height: 61rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 163rpx 0 0 180rpx;
}
.text_2 {
	width: 87rpx;
	height: 29rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
	margin-left: 88rpx;
}
.text_3 {
	width: 263rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(102, 102, 102, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: center;
	margin-left: 30rpx;
	white-space: nowrap;
	line-height: 24rpx;
	margin-top: 9rpx;
}
.box_6 {
	width: 245rpx;
	height: 24rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 23rpx 0 51rpx 222rpx;
}
.image-text_2 {
	width: 163rpx;
	height: 24rpx;
	line-height: 30rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
}
.text-group_2 {
	width: 95rpx;
	height: 22rpx;
	overflow-wrap: break-word;
	color: rgba(102, 102, 102, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-ExtraLight;
	font-weight: 250;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin-top: 2rpx;
}

.box_4 {
	border-radius: 50%;
	height: 216rpx;
	border: 3px solid rgba(202, 86, 66, 1);
	display: flex;
	flex-direction: column;
	width: 216rpx;
	position: absolute;
	left: 237rpx;
	top: -81rpx;
}
.group_4 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50%;
	width: 182rpx;
	height: 182rpx;
	display: flex;
	flex-direction: column;
	margin: 12rpx 0 0 12rpx;
}
.text_4 {
	width: 112rpx;
	height: 28rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
	margin: 51rpx 0 0 47rpx;
}
.text-wrapper_1 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 20rpx;
	height: 371rpx;
	display: flex;
	flex-direction: column;
	width: 686rpx;
	margin: 32rpx 0 0 32rpx;
}
.text_5 {
	width: 652rpx;
	height: 279rpx;
	overflow-wrap: break-word;
	font-size: 0rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: justifyLeft;
	line-height: 48rpx;
	margin: 44rpx 0 0 16rpx;
	overflow: scroll;
	text-indent: 2rem;
}
.paragraph_1 {
	width: 652rpx;
	height: 279rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	line-height: 48rpx;
}

.text-wrapper_7 {
	width: 668rpx;
	height: 28rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 41rpx 0 0 47rpx;
}
.text_7 {
	width: 111rpx;
	height: 28rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}
.text_8 {
	width: 89rpx;
	height: 20rpx;
	color: rgba(18, 18, 18, 1);
	font-size: 22rpx;
	white-space: nowrap;
	line-height: 20rpx;
	margin-top: 4rpx;
}
.list_3 {
	width: 686rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 32rpx 0 0 32rpx;
}
.list-items_1-0 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 20rpx;
	width: 686rpx;
	height: 149rpx;
	margin-bottom: 32rpx;
	flex-direction: row;
	display: flex;
}
.section_1-0 {
	background-color: rgba(202, 86, 66, 1);
	width: 8rpx;
	height: 80rpx;
	margin-top: 35rpx;
	display: flex;
	flex-direction: column;
}

.text-wrapper_8-0 {
	width: 389rpx;
	height: 73rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 36rpx 197rpx 0 20rpx;
}
.text_9-0 {
	width: 371rpx;
	height: 30rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
	margin-left: 18rpx;
}
.text_10-0 {
	width: 198rpx;
	height: 18rpx;
	overflow-wrap: break-word;
	color: rgba(153, 153, 153, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin-top: 25rpx;
}

.text-wrapper_9 {
	width: 666rpx;
	height: 27rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 32rpx 0 0 49rpx;
}
.text_11 {
	width: 111rpx;
	height: 27rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}

.list-items_2 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 10rpx;
	width: 686rpx;
	flex-direction: row;
	display: flex;
	margin: 20rpx 0 10rpx 34rpx;
}
.group_5 {
	border-radius: 10rpx;
	width: 307rpx;
	height: 170rpx;
	margin-left: -1rpx;
	display: flex;
	flex-direction: column;
}
.group_7 {
	width: 341rpx;
	height: 130rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 24rpx 22rpx 0 17rpx;
}
.text-group_5 {
	width: 285rpx;
	height: 61rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.text_13 {
	width: 285rpx;
	height: 26rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}
.text_14 {
	width: 129rpx;
	height: 21rpx;
	overflow-wrap: break-word;
	color: rgba(102, 102, 102, 1);
	font-size: 22rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 22rpx;
	margin-top: 14rpx;
}
.group_8 {
	width: 340rpx;
	height: 44rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 25rpx 0 0 1rpx;
}
.text_16 {
	width: 55rpx;
	height: 27rpx;
	overflow-wrap: break-word;
	color: rgba(202, 86, 66, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
	margin-top: 11rpx;
}
.text-wrapper_6 {
	background-color: rgba(202, 86, 66, 1);
	border-radius: 10rpx;
	height: 44rpx;
	display: flex;
	flex-direction: column;
	width: 129rpx;
}
.text_17 {
	width: 94rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(248, 226, 175, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin: 10rpx 0 0 18rpx;
}
</style>