ydd-quyuan-minapp/pages/zhongduxiub/zhongduxiub.vue

<template>
	<view class="container">
		<view class="loading" v-if="loadingState" :class="[loadingOutAnime?'loadingOut':'']">
			<view class="loadingBox">
				<image :src="loadingAImg" mode="aspectFit"></image>
				<image class="loadingRotate" :src="loadingBImg" mode="aspectFit"></image>
			</view>
			<image class="loadingText" :src="loadingText" mode="aspectFit"></image>
		</view>
		<view class="changeAudio" :class="[audioState?'changeAudioPlay':'']" @click="changeAudio">
			<image :src="audioImgA" v-show="audioState" mode="aspectFit"></image>
			<image :src="audioImgB" v-show="!audioState" mode="aspectFit"></image>
		</view>
		<view class="videoContent">
			<video id="myVideoBg" :src="videoBgPath" :loop="true" :controls="false" :muted="true"
				objectFit='cover' :show-progress='false' :enable-progress-gesture='false' :show-play-btn='false'
				:show-fullscreen-btn='false' @loadedmetadata="videoLoadingEnd"></video>
		</view>
		<view class="imgLayer">
			<view class="imgMask" v-if="imgShowIndex!='close'">
			</view>
			<view class="imgItem" v-for="(item,index) in personList" :key="item.name"
				:style="{width:item.width,height:item.height,left:item.x,top:item.y}" v-show="imgShowIndex==item.name">
				<image :src="item.url" mode="aspectFill"></image>
			</view>
		</view>
		<view class="clickLayer">
			<view class="clickItem clickItem1" @click="openImg('person1')">

			</view>
			<view class="clickItem clickItem2" @click="openImg('person2')">

			</view>
			<view class="clickItem clickItem3" @click="openImg('person3')">

			</view>
			<view class="clickItem clickItem4" @click="openImg('person4')">

			</view>
			<view class="clickItem clickItem5" @click="openImg('person5')">

			</view>
		</view>
		<view class="textLayer">
			<view class="textItem" v-for="(item,index) in textList" :key="item.name" v-show="imgShowIndex==item.name">
				<image :src="item.url" mode="aspectFill"></image>
			</view>
		</view>
		<view class="closeBtn" v-show="imgShowIndex!='close'" @click="closeContent">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadingState: true,
				loadingOutAnime: false, //加载退场动画
				videoCtx:"",
				audioImgA: "https://dadu.ispush.com/static/zhongduxiu/img/audioOn.png",
				audioImgB: "https://dadu.ispush.com/static/zhongduxiu/img/audioOff.png",
				loadingAImg: "https://dadu.ispush.com/static/shouyu/loadingA.png",
				loadingBImg: "https://dadu.ispush.com/static/shouyu/loadingB.png",
				loadingText: "https://dadu.ispush.com/static/shouyu/loadingText.png",
				audioUrl: "",
				webUrl: "https://dadu.ispush.com/api/getHtml",
				audioState: true,
				innerAudioContext: "",
				imgShowIndex: "close",
				videoBgPath: "https://dadu.ispush.com/static/zhongduxiu/video/bg.mp4",
				personList: [{
						"name": "person1",
						"width": "180rpx",
						"height": "461rpx",
						"x": "-10rpx",
						"y": "980rpx",
						"url": "https://dadu.ispush.com/static/zhongduxiu/person/1.png"
					},
					{
						"name": "person2",
						"width": "192rpx",
						"height": "466rpx",
						"x": "130rpx",
						"y": "980rpx",
						"url": "https://dadu.ispush.com/static/zhongduxiu/person/2.png"
					},
					{
						"name": "person3",
						"width": "246rpx",
						"height": "474rpx",
						"x": "278rpx",
						"y": "950rpx",
						"url": "https://dadu.ispush.com/static/zhongduxiu/person/3.png"
					},
					{
						"name": "person4",
						"width": "179rpx",
						"height": "466rpx",
						"x": "485rpx",
						"y": "972rpx",
						"url": "https://dadu.ispush.com/static/zhongduxiu/person/4.png"
					},
					{
						"name": "person5",
						"width": "148rpx",
						"height": "458rpx",
						"x": "610rpx",
						"y": "980rpx",
						"url": "https://dadu.ispush.com/static/zhongduxiu/person/5.png"
					}
				],
				textList: [{
						"name": "person1",
						"url": "https://dadu.ispush.com/static/zhongduxiu/img/text1.png"
					},
					{
						"name": "person2",
						"url": "https://dadu.ispush.com/static/zhongduxiu/img/text2.png"
					},
					{
						"name": "person3",
						"url": "https://dadu.ispush.com/static/zhongduxiu/img/text3.png"
					},
					{
						"name": "person4",
						"url": "https://dadu.ispush.com/static/zhongduxiu/img/text4.png"
					},
					{
						"name": "person5",
						"url": "https://dadu.ispush.com/static/zhongduxiu/img/text5.png"
					}
				]
			}
		},
		methods: {
			createAudio() {
				this.innerAudioContext = uni.createInnerAudioContext()
				this.innerAudioContext.autoplay = true
				this.innerAudioContext.loop = true
				this.innerAudioContext.src = `${this.$g.baseUrl}/static/zhongduxiu/audio/audio.mp3`
			},
			changeAudio() {
				if (this.audioState) {
					this.innerAudioContext.pause()
				} else {
					this.innerAudioContext.play()
				}
				this.audioState = !this.audioState
			},
			videoLoadingEnd() {
				this.loadingOutAnime = true
				this.videoCtx.play()
				let t = setTimeout(() => {
					this.loadingState = false
					clearTimeout(t)
				}, 600)
			},
			openImg(index) {
				this.imgShowIndex = index
			},
			closeContent() {
				this.imgShowIndex = 'close'
			}
		},
		onReady() {
			this.videoCtx = uni.createVideoContext('myVideoBg')
			this.createAudio()
		}
	}
</script>

<style scoped>
	.conatiner {
		position: relative;
		width: 100vw;
		height: 100vh;
	}

	.container .loading {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 9999999;
		background: #4c4c4c;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container .loading .loadingBox {
		position: relative;
		width: 73rpx;
		height: 72rpx;
	}

	.container .loading .loadingBox image {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.container .loading .loadingBox .loadingRotate {
		animation: 1s loadingRotateAnime linear infinite;
	}

	.container .loading .loadingText {
		position: absolute;
		top: 43%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 169rpx;
		height: 40rpx;
	}

	@keyframes loadingRotateAnime {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.container .loadingOut {
		animation: 1s loadingOutAnime linear forwards;
	}

	@keyframes loadingOutAnime {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	.container .changeAudio {
		position: absolute;
		right: 45rpx;
		top: 105rpx;
		width: 47rpx;
		height: 47rpx;
		z-index: 999999;
	}

	.container .changeAudio image {
		width: 100%;
		height: 100%;
	}

	.container .changeAudioPlay {
		animation: 1s changeAudioAnime linear infinite;
	}

	@keyframes changeAudioAnime {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.videoContent {
		width: 750rpx;
		height: 1624rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.videoContent video {
		width: 100%;
		height: 100%;
	}

	.imgLayer {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.imgLayer .imgMask {
		width: 750rpx;
		height: 1624rpx;
		background: rgba(0, 0, 0, 0.6);
		opacity: 0;
		animation: 1s imgMaskAnime linear forwards;
	}

	@keyframes imgMaskAnime {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.imgLayer .imgItem {
		position: absolute;
		animation: 0.5s imgItemAnime linear forwards;
	}

	@keyframes imgItemAnime {
		from {
			transform: scale(1);
		}

		to {
			transform: scale(1.05);
		}
	}

	.imgLayer .imgItem image {
		width: 100%;
		height: 100%;
	}

	.clickLayer {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99999;
	}

	.clickLayer .clickItem {
		width: 200rpx;
		height: 150rpx;
		position: absolute;
		/* 		background: pink; */
		z-index: 9999;
	}

	.clickLayer .clickItem1 {
		width: 150rpx;
		height: 460rpx;
		left: 0rpx;
		top: 970rpx;
	}

	.clickLayer .clickItem2 {
		width: 160rpx;
		height: 460rpx;
		left: 152rpx;
		top: 970rpx;
	}

	.clickLayer .clickItem3 {
		width: 170rpx;
		height: 460rpx;
		left: 315rpx;
		top: 970rpx;
	}

	.clickLayer .clickItem4 {
		width: 140rpx;
		height: 460rpx;
		left: 486rpx;
		top: 970rpx;
	}

	.clickLayer .clickItem5 {
		width: 123rpx;
		height: 460rpx;
		left: 628rpx;
		top: 970rpx;
	}

	.textLayer {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 1624rpx;
		z-index: 999;
	}

	.textLayer .textItem {
		position: absolute;
		width: 643rpx;
		height: 280rpx;
		top: 657rpx;
		left: 50%;
		opacity: 0;
		transform: translateX(-50%);
		animation: 0.5s textItemAnime 1s linear forwards;
	}

	@keyframes textItemAnime {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.textLayer .textItem image {
		width: 100%;
		height: 100%;
	}

	.closeBtn {
		position: absolute;
		z-index: 99999;
		top: 665rpx;
		left: 625rpx;
		width: 60rpx;
		height: 60rpx;
		opacity: 0;
		animation: 0.5s textItemAnime linear 1s forwards;
	}
</style>