feiYi/pages/index/feiYiShiPin/feiYiShiPin.vue

<template>
	<view class="body">
		<view class="header">
			<view class="tit">湖里文化遗产保护中心</view>
			<view class="thumbnail_1">
				<image style="width: 100%; height: 100%" src="/static/img/img_seal@2x.png"></image>
			</view>
		</view>
		<!--  -->
		<view class="" style="position: relative">
			<view class="fybk_zc">
				<view class="fybk_tit">
					<image style="width: 120rpx; height: 860rpx" src="/static/img/img_sp.png"></image>
				</view>
				<view class="fybk_tab">科普·系列片</view>
			</view>
		</view>

		<view class="banner">
			<!-- 中间音频 -->

			<view class="aa" style="display: flex; justify-content: space-between; width: 2400rpx; align-items: center">
				<view class="" :class="{ bianda1: index === middleIndex }" @click="vidoBtn(index)" v-for="(item, index) in videoList" :key="item.id">
					<view class="" :class="{ bianda2: index === middleIndex }">
						<view class="biank_3" :class="{ bianda3: index === middleIndex }">
							<view class="biank_4" :class="{ bianda4: index === middleIndex }">
								<view class="section_2" :class="{ bianda5: index === middleIndex }">
									<image class="img_center" :src="item.image"></image>
									<view class="image-wrapper_2">
										<image
											class="label_2"
											referrerpolicy="no-referrer"
											src="https://lanhu.oss-cn-beijing.aliyuncs.com/FigmaDDSSlicePNGfcafc88f2aa1bada5e71071780734be8.png"
										/>
									</view>
									<view class=""></view>
								</view>
							</view>
							<view class="" style="position: relative">
								<view class="potit">非物质文化遗产</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-popup mode="center" :show="detailsShow">
			<view class="details_box">
				<view @click="detailsShow = false" style="position: absolute; top: 70rpx; left: 80rpx; z-index: 5" class="">
					<image style="width: 80rpx; height: 80rpx" src="/static/img/icon_back@2x.png"></image>
				</view>
				<view class="details_box2">
					<view class="details_tit_box">
						<view class="details_tit">{{ title }}</view>
					</view>

					<view class="box_vido">
						<video style="width: 100%; height: 100%" id="myVideo" :src="vidourl" autopla loop="true" @error="videoErrorCallback" controls></video>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 切换按钮 -->
		<view class="anNiu">
			<view class="anNiu_item" @click="leftBtn">
				<image style="width: 120rpx; height: 120rpx" src="/static/img/Group 834@2x.png"></image>
				<view class="dd_1"></view>
				<view class="dd_2"></view>
				<view class="dd_3"></view>
				<view class="dd_4"></view>
			</view>
			<view class="anNiu_item" @click="righrBtn">
				<view class="dd_2"></view>
				<view class="dd_3"></view>
				<view class="dd_4"></view>
				<view class="dd_1"></view>
				<image style="width: 120rpx; height: 120rpx" src="/static/img/Group 834@2x(1).png"></image>
			</view>
		</view>

		<!-- 菜单按钮 -->
		<view class="caidan" @click="navBtn">
			<image class="img" src="../../../static/img/icon_menu@2x.png"></image>
			<view class="dh">导航</view>
		</view>
		<!-- 菜单弹层 -->
		<u-popup :show="show" @close="close" mode="left" bgColor="#f8efe1" customStyle="width:500rpx">
			<LeftNav></LeftNav>
		</u-popup>
	</view>
</template>

<script>
let that;
var md5 = require('@/GraceUI5/js/md5.js');
export default {
	data() {
		return {
			middleIndex: 1,
			vidourl: '',
			title: '',
			show: false,
			list: [],
			videoList: [],
			detailsShow: false,
			j: 0
		};
	},
	onLoad() {
		that = this;
		this.getIchVideoLists();
	},
	mounted() {
		// this.list.forEach((item, index) => {
		// 	const box = this.$refs[`box${index}`]; // 通过ref获取DOM元素实例
		// 	if (index === this.middleIndex) {
		// 		// 如果是中间的盒子，添加动态类名
		// 		box.classList.add('bianda1'); // 添加动态类名，可以根据需要替换成其他类名
		// 	}
		// });
	},
	methods: {
		navBtn() {
			this.show = true;
		},
		close() {
			this.show = false;
			// console.log('close');
		},
		getIchVideoLists() {
			let randomStr = that.randomString(6);
			let timeStamp = parseInt(Date.now() / 1000);
			let secretKey = '101001010011';
			let sign = md5.md5(btoa('randomStr=' + randomStr + '&timeStamp=' + timeStamp + '&secretKey=' + secretKey));
			that.$api.getIchVideoLists(
				{
					randomStr: randomStr,
					timeStamp: timeStamp,
					sign: sign
				},
				(data) => {
					// console.log(data, 'data');
					that.list = data.data;
					// console.log(that.list, 'that.list');
					for (let i = 0; i < 3; i++) {
						that.videoList.push(data.data[that.j]);
						that.j++;
					}
				}
			);
		},
		leftBtn() {
			this.j = this.j - 4;

			if (this.j < 0) {
				uni.showToast({
					title: '没有更多了',
					icon: 'error'
				});
				this.j = this.j + 4;
				return;
			}
			this.getIchVideoLists();
			that.videoList = [];
		},
		righrBtn() {
			console.log(that.videoList, 'videoList');
			this.j = this.j - 2;
			if (this.j == that.list.length - 2) {
				uni.showToast({
					title: '没有更多了',
					icon: 'error'
				});
				return;
			}
			this.getIchVideoLists();
			that.videoList = [];

			// console.log(that.videoList, 65465);
		},
		// 点击视频
		vidoBtn(index) {
			this.vidourl = this.videoList[index].video;
			this.title = this.videoList[index].title;
			this.detailsShow = true;
		},
		randomString(len) {
			len = len || 32;
			var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
			var maxPos = $chars.length;
			var pwd = '';
			for (var i = 0; i < len; i++) {
				pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
			}
			return pwd;
		},
		videoErrorCallback: function (e) {
			uni.showModal({
				content: e.target.errMsg,
				showCancel: false
			});
		},
		close() {
			this.show = false;
			this.detailsShow = false;
		}
	}
};
</script>

<style>
/deep/.uni-video-container {
	background-color: transparent !important;
}
/deep/.uni-video-cover {
	background-color: transparent !important;
}
.body {
	padding-top: 100rpx;
	height: 1825rpx;
}

.header {
	margin-left: 10%;
	width: 960rpx;
	height: 96rpx;

	align-items: center;
	display: flex;
}
.box_vido {
	width: 100%;
	height: 80%;
}
.details_box2 {
	width: 1980rpx;
	height: 1180rpx;
	margin: auto;
	margin-top: 10rpx;
	padding: 0 60rpx 0 60rpx;
	background-color: #f8efe1;
	box-sizing: border-box;
}
.details_tit_box {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: #f8efe1;
	width: 100%;
	height: 200rpx;
	border-bottom: 1px solid #ddd7d6;
	display: flex;
	align-items: center;
}
.details_tit {
	width: 100%;
	text-align: center;
	font-size: 48rpx;
	letter-spacing: 0.3em;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
}
.tit {
	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);

	height: 96rpx;
	font-size: 48rpx;
	letter-spacing: 0.3em;
	font-weight: NaN;
	text-align: left;
	white-space: nowrap;
	line-height: 100rpx;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.thumbnail_1 {
	width: 16rpx;
	height: 60rpx;
}

.fybk_tit {
	width: 200rpx;
	height: 530rpx;
	text-align: center;
}
.fybk_tit {
	width: 120rpx;
	height: 530rpx;
	text-align: center;
}
.fybk_tab {
	height: 380rpx;
	margin-top: 10%;
	padding-right: 20rpx;
	font-size: 42rpx;
	color: #563530;
	border-right: 1px solid #563530;
	writing-mode: vertical-rl;
	text-align: center;
	letter-spacing: 0.3em;
	margin-left: 20rpx;
}
.fybk_zc {
	left: 10%;
	top: 220rpx;
	display: flex;
	position: absolute;
}
.caidan {
	margin-left: 10%;
	margin-top: 2%;
	display: flex;
	width: 180rpx;
	align-items: center;
}
.img {
	width: 80rpx;
	height: 80rpx;
}
.dh {
	margin-left: 10rpx;
	font-size: 36rpx;
	color: #563530;
}
.banner {
	display: flex;
	align-items: center;
	justify-content: space-around;
	/* width: 2400rpx; */
	height: 1200rpx;
	/* margin-left: 18%; */
}
.bianda1 {
	border-radius: 50% !important;
	height: 800rpx !important;
	/* display: flex; */
	border: 1px solid rgba(86, 53, 48, 0.5) !important;
	width: 800rpx !important;
	margin: 24rpx 0 0 100rpx !important;
}
.bianda2 {
	border-radius: 50% !important;
	margin: 24rpx 0 0 24rpx !important;
	height: 760rpx !important;
	border: 1px solid #ded1c5 !important;
	width: 760rpx !important;
	margin: 20rpx 0 0 20rpx !important;
}
.bianda3 {
	border-radius: 50% !important;
	height: 656rpx !important;
	border: 1px solid rgba(86, 53, 48, 0.5) !important;
	width: 656rpx !important;
	margin: 48rpx 0 0 48rpx !important;
}
.bianda4 {
	border-radius: 50% !important;
	height: 600rpx !important;
	border: 2.4000000953674316px solid rgba(86, 53, 48, 1) !important;
	width: 600rpx !important;
	margin: 24rpx 0 0 24rpx !important;
}
.bianda5 {
	position: relative !important;
	border-radius: 960rpx !important;
	height: 520rpx !important;
	width: 520rpx !important;
	margin: 24rpx 0 0 28rpx !important;
}
.biank_1 {
	border-radius: 50%;
	height: 600rpx;
	/* display: flex; */
	border: 1px solid rgba(86, 53, 48, 0.5);
	width: 600rpx;
	margin: 24rpx 0 0 100rpx;
}

.biank_2 {
	border-radius: 50%;
	margin: 24rpx 0 0 24rpx;
	height: 540rpx;
	border: 1px solid #ded1c5;
	width: 540rpx;
	margin: 20rpx 0 0 20rpx;
}
.biank_3 {
	border-radius: 50%;
	height: 540rpx;
	border: 1px solid rgba(86, 53, 48, 0.5);
	width: 540rpx;
	margin: 48rpx 0 0 48rpx;
}
.biank_4 {
	border-radius: 50%;
	height: 500rpx;
	border: 2.4000000953674316px solid rgba(86, 53, 48, 1);
	width: 500rpx;
	margin: 16rpx 0 0 16rpx;
}

.section_2 {
	position: relative;
	border-radius: 960rpx;
	height: 420rpx;
	width: 420rpx;
	margin: 24rpx 0 0 28rpx;
}

.image-wrapper_2 {
	position: absolute;
	top: 38%;
	left: 40%;
	height: 118rpx;
	background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/FigmaDDSSlicePNGc178b30cb277add6394c32395832ff03.png) 100% no-repeat;
	background-size: 100% 100%;
	width: 120rpx;
}
.image-wrapper_3 {
	position: absolute;
	top: 30%;
	left: 30%;
	height: 118rpx;
	background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/FigmaDDSSlicePNGc178b30cb277add6394c32395832ff03.png) 100% no-repeat;
	background-size: 100% 100%;
	width: 120rpx;
}

.label_2 {
	width: 58rpx;
	height: 58rpx;
	margin: 30rpx 0 0 30rpx;
}
.potit {
	position: absolute;
	top: -720rpx;
	left: 100%;
	display: flex;
	align-items: center;
	font-size: 40rpx;
	color: #563530;
	width: 80rpx;
	/* height: 360rpx; */
	letter-spacing: 0.3em;
	padding-top: 20rpx;
	writing-mode: vertical-rl;
	border: 1px solid rgba(86, 53, 48, 1);
	background-color: #fff9ec;
}
.img_center {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	margin: 14rpx 0 0 12rpx;
}
.y_img {
	height: 450rpx;
	width: 450rpx;
	border-radius: 50%;
	margin: 0 0 0 -2rpx;
}
.anNiu {
	display: flex;
	justify-content: space-between;
	width: 680rpx;
	margin-left: 42%;
}
.anNiu_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 200rpx;
}
.dd_1 {
	width: 20rpx;
	height: 20rpx;
	background-color: #8a7d6d;
	border-radius: 50%;
}
.dd_2 {
	width: 10rpx;
	height: 10rpx;
	background-color: #8a7d6d;
	border-radius: 50%;
}
.dd_3 {
	width: 10rpx;
	height: 10rpx;
	background-color: #8a7d6d;
	border-radius: 50%;
}
.dd_4 {
	width: 10rpx;
	height: 10rpx;
	background-color: #8a7d6d;
	border-radius: 50%;
}
</style>