WenWuGuanJia/xueYuan_fenbao/zhuangJia/zhuangJia.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="专家介绍" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="box_2">
			<view class="text-group_4">
				<text lines="1" class="text_2">{{ expertInfo.title }}</text>
				<text lines="1" class="text_3">文史专家</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.image || 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/gj_wxstx.png'"
					></image>
				</view>
			</view>
		</view>
		<text class="text_4">个人简介</text>
		<view class="text-wrapper_1">
			<view class="text_5">
				<u-parse :content="expertInfo.content ? expertInfo.content : '暂无介绍'"></u-parse>
			</view>
		</view>
		<text class="text_4">成就</text>
		<view class="text-wrapper_1">
			<view class="text_5">
				<u-parse :content="expertInfo.prize"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			expertInfo: {}
		};
	},
	onLoad(o) {
		that = this;
		this.getContentDetail(o.id);
	},
	methods: {
		getContentDetail(id) {
			this.$api.getContentDetail({ main_body_id: 1, id: id }, function (res) {
				console.log(res, '专家详情');
				that.expertInfo = res.data;
			});
		}

		// getPeopleList(id) {
		// 	console.log(id, 666);
		// 	uni.request({
		// 		url: 'https://huli-app.wenlvti.net/api/wuyuan/biographies/details',
		// 		data: {
		// 			id: id
		// 		},
		// 		success: function (res) {
		// 			console.log(res, 545);
		// 			that.expertInfo = res.data.data;
		// 		}
		// 	});
		// }
	}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100% 100%;
	min-height: 100%;
	height: auto;
	/* background-color: #fff9e9; */
}
.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 40rpx 30rpx;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 20rpx 15px -6rpx, rgba(0, 0, 0, 0.05) 0px 8rpx 12rpx -4rpx;
}
.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;
	white-space: nowrap;
	line-height: 30rpx;
	margin-left: 115rpx;
}
.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: 32rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
	margin: 60rpx 0 0 47rpx;
}
.text-wrapper_1 {
	/* background-color: rgba(255, 255, 255, 1); */
	display: flex;
	flex-direction: column;
	width: 686rpx;
	margin: 10rpx 0 80rpx 32rpx;
	/* box-shadow: rgba(0, 0, 0, 0.1) 0px 20rpx 15px -6rpx, rgba(0, 0, 0, 0.05) 0px 8rpx 12rpx -4rpx; */
}
.text_5 {
	width: 652rpx;
	overflow-wrap: break-word;
	font-size: 28rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: justifyLeft;
	line-height: 48rpx;
	margin: 44rpx 0 0 16rpx;
	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;
}
</style>