minman-tv/pages/index2/fY_xiangQing/xiangMuXQ.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">{{ list.title }}</view>
				<view class="right_txt">
					<!-- <u-parse :content="list.intro ? list.intro : '暂无介绍'"></u-parse> -->
					<view class="jieshao scrolling-text" :data-scroll-height="scrollHeight">
						{{ list.intro ? list.intro : list.content ? list.content : list.prize ? list.prize : '暂无介绍' | removeHTMLTag }}
					</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.image"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			scrollHeight: '',
			list: []
		};
	},

	onLoad(o) {
		that = this;
		this.getContentDetails(o);
	},
	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;
		}
	},
	mounted() {
		this.calculateScrollHeight();
		this.applyAnimation();
	},
	methods: {
		calculateScrollHeight() {
			const element = this.$el;
			const textHeight = element.offsetHeight;
			const containerHeight = element.parentNode.offsetHeight;

			// 计算需要滚动的距离，确保文本能够在容器内完全滚动
			const scrollHeight = textHeight > containerHeight ? textHeight - containerHeight : textHeight;

			this.scrollHeight = scrollHeight + 'px';
		},
		applyAnimation() {
			const element = this.$el;
			element.style.webkitAnimation = 'rowup 20s linear infinite';
			element.style.animation = 'rowup 20s linear infinite';

			// 动态修改关键帧动画，使其根据计算出的滚动距离进行移动
			element.addEventListener('animationiteration', () => {
				element.style.webkitAnimationName = 'rowup-' + this.scrollHeight;
				element.style.animationName = 'rowup-' + this.scrollHeight;
			});
		},
		// 详情
		getContentDetails(o) {
			this.$api.getContentDetails(
				{
					main_body_id: 5,
					id: o.id
				},
				function (res) {
					that.list = res.data;
					console.log(that.list, 'list');
				}
			);
		},
		clickImg() {
			let img = [];
			img.push(this.list.image);
			uni.previewImage({
				urls: img, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function (res) {},
				fail: function (res) {}
			});
		},
		backBtn() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	display: flex;
	height: 100vh;
	box-sizing: border-box;
	overflow: hidden;
}
.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: 15%;
}
@-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>