minman-tv/pages/index/index_xq.vue

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

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

		<view class="box_left">
			<image :src="list[id].image" class="img"></image>
		</view>
		<view class="box_right">
			<view class="banner">
				<view class="right_tit">{{ list[id].name }}</view>
				<view class="right_txt">
					<!-- <u-parse :content="list.intro ? list.intro : '暂无介绍'"></u-parse> -->
					<view class="jieshao">
						{{ list[id].title }}
					</view>
				</view>
				<view class="btm_box">
					<!-- 			<scroll-view scroll-x="true" style="display: flex; white-space: nowrap">
						<view class="container" v-for="(item, index) in projectList" :key="item.index">
							<view class="mn_box">
								<image style="width: 100%; height: 100%" :src="item.img"></image>
							</view>
							<text class="title">{{ item.name }}</text>
						</view>
					</scroll-view> -->

					<view class="mn_box">
						<image @click="clickImg" style="width: 100%; height: 100%" :src="list[id].image"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			id: '',
			music: false,
			list: [
				{
					name: '开漳圣王',
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv4.jpg',
					title: '陈元光(657—711年)，字廷炬，号龙湖。唐朝光州固始县人（今河南省固始县人）。漳州首任刺史。他是闽台地区重要的民间信仰之一，被奉为开漳圣王。号称“蛮荒”之地的闽南，经济文化得到了迅速发展。 陈元光成为促进中原文化与闽越文化融合的奠基者。'
				},
				{
					name: '南普陀寺',
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv5.jpg',
					title: '南普陀寺位于福建省厦门市五老峰前，背依秀奇群峰，面临碧澄海港，风景绝佳。它是一座千年古刹，始建于唐代，为闽南佛教胜地之一。'
				},
				{
					name: '威镇阁',
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv6.jpg',
					title: '威镇阁高3层，采用阴阳八卦为顶面，阁上都用长宽相同的长方形巨石铺成八角形状，每块巨石按方位分别刻着“乾、坤、震、艮、坎、兑、巽、离”的方正大字，所以俗称八卦楼。该楼与芝山顶峰的威镇亭遥相对峙，互为犄角，故名为威镇阁'
				},
				{
					name: '送王船',
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv_wc.jpg',
					title: '送王船是畲族传统的民间习俗，传统木造王船，传承古意，结合了造船技艺与彩绘艺术，用色丰富，其技巧、彩绘题材与构图都有明显的特色，可说是精致的畲族民间艺术。艺存在着浓厚的畲族宗教信仰色彩，代表少数民族民间传统习俗，是在传统宗教信仰的基础下，所发展出来的民间手工技艺，而王船本身存在着造王船技艺的艺术表现，进一步突显出传承造王船技艺的重要性。'
				},
				{
					name: '漳州文庙',
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv8.jpg',
					title: '漳州文庙位于市区修文西路，是我国四大孔庙之一，也是漳州城内最大的古建筑群，国家级重点文物保护单位。文庙始建于宋庆历四年（公元1044年），元、明、清均有重修，漳州府学亦设于此。漳州文庙具有很高的古文化和历史文物价值，是漳州文化发展史重要的实证物。'
				}
			]
		};
	},

	onLoad(o) {
		that = this;
		this.id = 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: {
		clickImg() {
			let img = [];
			img.push(this.list[this.id].image);
			uni.previewImage({
				urls: img, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '' // 当前显示图片的http链接，默认是第一个
			});
		},
		backBtn() {
			uni.navigateTo({
				url: '/pages/index/index?music=' + this.music
			});
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	display: flex;
	height: 100vh;
	box-sizing: border-box;
}
.back {
	width: 12%;
	height: 25%;
	margin-left: 5%;
	margin-top: -2%;
	font-size: 12px;
}

.img {
	width: 100%;
	height: 100%;
}
.box_left {
	width: 40%;
	height: 100%;
	/* background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/fy_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 {
	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 {
	/* line-height: 70px; */
	letter-spacing: 0.3em;
	font-size: 14px;
	color: #aa734d;
}

.banner {
	width: 70%;
	height: 45%;
	margin-left: 25%;
	margin-top: 13%;
}
/* 字体滚动 */
/* @-webkit-keyframes rowup {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}
}

@keyframes rowup {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}
} */
.right_txt {
	width: 95%;
	height: 100%;
	font-size: 12px;
	letter-spacing: 0.2em;
	margin-bottom: 8%;
	font-weight: 400;
	color: rgba(170, 115, 77, 0.5);
	overflow: hidden;
}
.jieshao {
	/* -webkit-animation: 25s rowup linear infinite normal;
	animation: 25s rowup linear infinite normal;
	animation-delay: 3s;
	overflow: hidden; */
}
/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; */
}
.btm_box {
	width: 100%;
	height: 50%;
}
.container {
	position: relative;
	display: inline-block;
	margin-right: 2%;
	text-align: center;
}
.mn_box {
	width: 18%;
	height: 90%;
	margin-left: 2%;
	box-sizing: border-box;
	border: 2px solid #fed57d;
}
</style>