minman-tv/pages/index2/JZ_xiangQing/JZ_xiangQing.vue

<template>
	<view class="box">
		<view class="top_bg">
			<topBox></topBox>

			<view @click="backBtn" class="back">⬅返回上一级</view>
		</view>

		<view class="box_left">
			<image style="width: 100%; height: 100%" :src="list.image"></image>
		</view>
		<view class="box_right">
			<view class="banner">
				<view class="right_tit">
					<view class="">
						{{ list.title }}
					</view>
					<view class="info">
						<view style="width: 50%">始建年代:{{ list.age }}</view>

						<view style="width: 50%">文物类型:{{ list.cr_type }}</view>

						<view style="width: 50%">文物等级:{{ list.level }}</view>

						<view style="width: 50%">所属区域:{{ list.region }}</view>
					</view>
				</view>
				<view class="" style="font-size: 10px; color: #aa734d">文物介绍:</view>
				<view class="right_txt">
					<view class="jieshao">
						{{ list.intro ? list.intro : '暂无介绍' | removeHTMLTag }}
					</view>
				</view>
				<view class="" style="font-size: 10px; color: #aa734d">文物价值:</view>
				<view class="" style="width: 105%; height: 30%; overflow: hidden">
					<view v-if="list.value" class="jieshao" style="width: 95%; height: 30%">
						{{ list.value | removeHTMLTag }}
					</view>

					<view v-else class="" style="font-size: 12px; color: rgba(170, 115, 77, 0.5)">暂无评估</view>
				</view>
				<view class="btm_box">
					<scroll-view v-if="list.images" scroll-x="true" style="width: 100%; height: 100%; display: flex; white-space: nowrap">
						<view class="container" @click="clickImg(index)" v-for="(item, index) in list.images" :key="item.index">
							<view class="mn_box">
								<image style="width: 100%; height: 100%" :src="item"></image>
							</view>
						</view>
					</scroll-view>

					<view v-else class="mn_box2">
						<image @click="clickImg" style="width: 100%; height: 100%" :src="list.image"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			list: []
		};
	},
	onLoad(o) {
		that = this;
		this.getContentDetails(o.id);
	},
	filters: {
		removeHTMLTag(str) {
			str = str.replace(/<\/?[^>]*>/g, ''); // 去除HTML tag
			str = str.replace(/[ | ]*\n/g, '\n'); // 去除行尾空白
			str = str.replace(/\n[\s| | ]*\r/g, '\n'); //去除多余空行
			str = str.replace(/ /gi, ''); // 去掉
			const arrEntities = {
				lt: '<',
				gt: '>',
				nbsp: ' ',
				amp: '&',
				quot: '"'
			}; // 转义符换成普通字符
			str = str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function (all, t) {
				return arrEntities[t];
			});
			return str;
		}
	},

	methods: {
		// 详情
		getContentDetails(id) {
			this.$api.getContentDetails(
				{
					main_body_id: 1,
					id: id
				},
				function (res) {
					that.list = res.data;
				}
			);
		},
		clickImg(i) {
			let img = [];
			img.push(this.list.image);
			uni.previewImage({
				urls: this.list.images ? this.list.images : img, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: this.list.images[i] // 当前显示图片的http链接，默认是第一个
			});
		},

		backBtn() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style>
.box {
	display: flex;
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
}
/deep/.MsoNormal span {
	font-size: 12px !important;
	letter-spacing: 0.2em !important;
	font-weight: 400 !important;
	color: #aa734d !important;
	/* line-height: 70rpx !important; */
}
/deep/.MsoNormal {
	font-size: 12px !important;
	letter-spacing: 0.2em !important;
	font-weight: 400 !important;
	color: #aa734d !important;
	/* line-height: 70rpx !important; */
}
/deep/._undefined span {
	font-size: 12px !important;
	letter-spacing: 0.2em !important;
	font-weight: 400 !important;
	color: #aa734d !important;
	/* line-height: 70rpx !important; */
}
.back {
	width: 12%;
	height: 20%;
	margin-left: 5%;
	margin-top: -4%;
	font-size: 12px;
}
.info {
	width: 125%;
	font-size: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.img {
	width: 100%;
	height: 100%;
}
.box_left {
	width: 40%;
	height: 100%;
	/* 	background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/jz_img.png') no-repeat center;
	background-size: 100% 100%; */
}
.box_right {
	flex: 1;
	height: 100%;
	margin-left: -10%;
	z-index: 1;
	background: linear-gradient(90deg, rgba(240, 235, 222, 0.1) 0%, #f0ebde 15%, #f0ebde 100%);
}
.top_bg {
	height: 16%;
	width: 100%;
	position: absolute;
	color: #ffffff;
	z-index: 2;
	background: linear-gradient(10deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2) 100%);
}
.right_tit {
	width: 80%;
	letter-spacing: 0.3em;
	font-size: 14px;
	color: #aa734d;
}

.banner {
	width: 70%;
	height: 72%;
	margin-left: 25%;
	margin-top: 13%;
}
.right_txt {
	width: 100%;
	height: 30%;
	font-weight: 400;
	box-sizing: border-box;
	margin: 0 0 2% 0;
	overflow: hidden;
}
@keyframes wordsLoop {
	0% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
		-webkit-transform: translateY(-100%);
	}
}

@-webkit-keyframes wordsLoop {
	0% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
		-webkit-transform: translateY(-100%);
	}
}
.jieshao {
	font-size: 12px;
	line-height: 20px;
	color: rgba(170, 115, 77, 0.5);
	animation: 40s wordsLoop linear infinite normal;
}
.btm_box {
	width: 100%;
	height: 30%;
}
.container {
	width: 18%;
	height: 100%;
	position: relative;
	display: inline-block;
	margin-right: 2%;
	text-align: center;
	/* margin-top: 5%; */
}
.mn_box {
	width: 100%;
	height: 100%;
	margin-left: 2%;
	box-sizing: border-box;
	border: 2px solid #fed57d;
}
.mn_box2 {
	width: 20%;
	height: 100%;
	margin-left: 2%;
	box-sizing: border-box;
	border: 2px solid #fed57d;
}
</style>