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

<template>
	<view class="container">
		<view class="loading" v-if="loadingState" :class="[loadingOutAnime?'loadingOut':'']">
			<view class="loadingBox" v-if="loadPointState">
				<span class="span1"></span>
				<span class="span2"></span>
				<span class="span3"></span>
				<span class="span4"></span>
				<span class="span5"></span>
				<span class="span6"></span>
			</view>
			<image class="loadingText" @load="loadImgEnd" :src="loadingText" mode="aspectFit"></image>
		</view>
		<view class="yunBg" :class="[yunBgState?'yunBgOut':'']" v-if="yunShowState">
			<video id="videoYunDom" :src="yunVideoPath" :loop="false" :controls="false" :muted="true" objectFit='cover'
				:show-progress='false' :custom-cache="false" :enable-progress-gesture='false' :show-play-btn='false'
				:show-fullscreen-btn='false' @loadedmetadata="videoYunLoadingEnd"></video>
		</view>
		<view class="containerBg" @touchmove="touchStart">
			<video id="videoBgDom" :src="bgVideoPath" :loop="true" :controls="false" :muted="true" objectFit='cover'
				:show-progress='false' :custom-cache="false" :enable-progress-gesture='false' :show-play-btn='false'
				:show-fullscreen-btn='false' @loadedmetadata="videoBgLoadingEnd"></video>

			<view class="point" v-if="pointShow" v-for="(item,index) in pointList" :key="item.title"
				:style="{width:item.width,height:item.height,left:item.left,top:item.top}"
				@click="pointClick(item,index)">
				<image v-show="!item.showState" class="pointImg" :src="item.img" mode="aspectFill"></image>
				<image v-show="item.showState" class="pointImgA" :src="item.imgA" mode="aspectFill"></image>
			</view>
			<view class="openBook" @click="clickOpenBook">
				<image :src="bookUrl" mode="aspectFit"></image>
			</view>
			<view class="bookPlane" v-show="bookOpenState">
				<view class="bookClose" @click="clickCloseBook">
					<image :src="bookCloseUrl" mode="aspectFit"></image>
				</view>
				<!-- 书页 -->
				<view class="swiperContent">
					<view class="uni-margin-wrap">
						<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
							:interval="interval" :duration="duration">
							<swiper-item>
								<view class="swiper-itemA uni-bg-red">
									<image :src="'https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/pic'+0+'.png'"
										mode="aspectFill"></image>
								</view>
							</swiper-item>
							<swiper-item v-for="(item,index) in swiperList" :key="item">
								<view class="swiper-item uni-bg-red">
									<image :src="'https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/pic'+(item+1)+'.png'"
										mode="aspectFill"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<view class="animeBox" :style="{left:animeLine[animeIndex].x,top:animeLine[animeIndex].y}">
				<image :src="shipImg" alt=""></image>
			</view>
		</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="content" v-show="contentOpenState">
			<view class="videoLayer" v-if="openType=='video'">
			
				<view class="videoCloseTips">
					<image :src="videoCloseTips" mode="aspectFit"></image>
				</view>
			</view>
			<view class="videoBox" :class="[openType=='video'?'videoShow':'videoNone']">
				<view class="closeVideoLayer" @click="closeContent"></view>
				<view class="videoBorder">
					<view class="videoTitle">
						<image :src="videoTitle" mode="aspectFit"></image>
					</view>
					<video id="videoDom" :src="videoPath" :controls="true" :play-strategy="0" :autoplay="false"
						:custom-cache="false" objectFit="fill" :show-progress='true' enable-progress-gesture='false'
						:direction="90" :show-fullscreen-btn="true" :show-loading="true" :show-play-btn='false'
						@play="videoPlay" @error="videoPlayErr"></video>
				</view>
			</view>
			<view class="imageBox" v-if="openType=='image'">
				<view class="textBox">
					<view class="closeImgContent" @click="closeImgContentFn"></view>
					<image :src="textImg" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request.js"
	export default {
		data() {
			return {
				loadPointState: false,
				loadingState: true,
				loadingOutAnime: false, //加载退场动画
				loadingCount: 0,
				bookOpenState: false,
				bookUrl: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/book.png",
				bookCloseUrl: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/bookClose.png",
				loadingText: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/loading2.jpg",
				baseUrl: "",
				bgVideoPath: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/zmfbg.mp4",
				videoTitle: "",
				textImg: "",
				yunBgState: false,
				yunShowState: true,
				yunVideoPath: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/zmfyun.mp4",
				audioImgA: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/audioOn.png",
				audioImgB: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/audioOff.png",
				currentIndex: 0, //当前被点击的动画索引
				animeIndex: 0, //当前动画播放的位置
				audioState: true,
				clickState: true, //控制动画结束才能在点击
				videoContext: "", //视频组件
				videoPath: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/11.mp4",
				videoYunDomCtx: "",
				videoBgCtx: "",
				pointShow: false,
				contentOpenState: false, //内容打开状态
				openType: "video", //打开的类型
				btnClickIndex: 0, //被点击按钮的下标
				shipImg: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/ship.png",
				videoCloseTips: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/videoCloseTips.png",
				pointList: [{
						"title": "1",
						"width": "234rpx",
						"height": "190rpx",
						"showState": false,
						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/01C.png",
						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/01D.png",
						"left": "90rpx",
						"top": "268rpx",
						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/01.mp4",
						"type": "video",
						"index": 600
					},
					{
						"title": "2",
						"width": "119rpx",
						"height": "140rpx",
						"showState": false,
						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/02C.png",
						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/02D.png",
						"left": "72rpx",
						"top": "536rpx",
						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/02.mp4",
						"type": "video",
						"index": 440
					},
					{
						"title": "3",
						"width": "34rpx",
						"height": "90rpx",
						"showState": false,
						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/03C.png",
						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/03D.png",
						"left": "269rpx",
						"top": "590rpx",
						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/text03.png",
						"type": "image",
						"index": 420
					},
					{
						"title": "4",
						"width": "110rpx",
						"height": "124rpx",
						"showState": false,
						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/04C.png",
						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/04D.png",
						"left": "139rpx",
						"top": "719rpx",
						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/04.mp4",
						"type": "video",
						"index": 360
					},
					{
						"title": "5",
						"width": "113rpx",
						"height": "94rpx",
						"showState": false,
						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/05C.png",
						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/05D.png",
						"left": "200rpx",
						"top": "837rpx",
						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/text05.png",
						"type": "image",
						"index": 295
					},
					{
						"title": "6",
						"width": "114rpx",
						"height": "105rpx",
						"showState": false,
						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/06C.png",
						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/06D.png",
						"left": "379rpx",
						"top": "791rpx",
						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/text06.png",
						"type": "image",
						"index": 295
					},
					{
						"title": "7",
						"width": "131rpx",
						"height": "109rpx",
						"showState": false,
						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/07C.png",
						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/07D.png",
						"left": "531rpx",
						"top": "955rpx",
						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/text07.png",
						"type": "image",
						"index": 130
					},
					{
						"title": "8",
						"width": "105rpx",
						"height": "90rpx",
						"showState": false,
						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/08C.png",
						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/08D.png",
						"left": "399rpx",
						"top": "1048rpx",
						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/08.mp4",
						"type": "video",
						"index": 100
					},
					{
						"title": "9",
						"width": "125rpx",
						"height": "99rpx",
						"showState": false,
						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/09C.png",
						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/09D.png",
						"left": "292rpx",
						"top": "930rpx",
						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/text09.png",
						"type": "image",
						"index": 200
					},
					{
						"title": "10",
						"width": "115rpx",
						"height": "133rpx",
						"showState": false,
						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/10C.png",
						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/10D.png",
						"left": "602rpx",
						"top": "1068rpx",
						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/10.mp4",
						"type": "video",
						"index": 40
					},
					{
						"title": "11",
						"width": "147rpx",
						"height": "139rpx",
						"showState": false,
						"img": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/11C.png",
						"imgA": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/11D.png",
						"left": "498rpx",
						"top": "1285rpx",
						"data": "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhaomengfu/11.mp4",
						"type": "video",
						"index": 0
					}
				],
				animeLine: [],
				T: "", //当前定时器
				aI: 0, //动画帧索引
				animeState: false, //是否进行动画
				animeStart: 0, //当前动画开始的数组下标
				animeEnd: 0, //当前动画结束的数组下标
				animeDirection: 1,
				saveAnime: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				swiperList: 9,
			}
		},
		methods: {
			async initData() {
				this.baseUrl = this.$g.baseUrl
				this.audioImg = `${this.$g.baseUrl}/static/zhaomengfu/audio.png`
				this.videoContext = uni.createVideoContext('videoDom', this)
				this.videoYunDomCtx = uni.createVideoContext('videoYunDom', this)
				this.videoBgCtx = uni.createVideoContext('videoBgDom', this)
				let res = await request({
					url: "/api/getAnimeLine",
					method: "GET",
					data: {
						code: "getAnime"
					},
				})
				this.animeLine = res.data.data
			},
			loadImgEnd(e) {
				this.loadPointState = true
			},
			clickOpenBook() {
				this.bookOpenState = true
			},
			clickCloseBook() {
				this.bookOpenState = false
			},
			closeContent() {
				this.audioState = true
				this.innerAudioContext.play()
				this.videoContext.stop()
				this.videoPath = ""
				this.contentOpenState = false
			},
			closeImgContentFn() {
				this.contentOpenState = false
			},
			createAudio() {
				this.innerAudioContext = uni.createInnerAudioContext()
				this.innerAudioContext.loop = true
				this.innerAudioContext.src = `${this.$g.baseUrl}/static/zhaomengfu/audio.mp3`
			},
			changeAudio() {
				if (this.audioState) {
					this.innerAudioContext.pause()
					// console.log(JSON.stringify(this.saveAnime))
				} else {
					this.innerAudioContext.play()
				}
				this.audioState = !this.audioState
			},
			videoYunLoadingEnd() {
				this.loadingCount++
				if (this.loadingCount == 2) {
					this.yunAnimeStart()
				}
			},
			yunAnimeStart() {
				this.loadingOutAnime = true
				let tX = setTimeout(() => {
					this.loadingState = false
					this.videoYunDomCtx.play()
					this.yunBgState = true
					clearTimeout(tX)
				}, 1000)
				let yunT = setTimeout(() => {
					this.yunShowState = false
					this.pointShow = true
					clearTimeout(yunT)
				}, 4000)
			},
			videoBgLoadingEnd() {
				this.loadingCount++
				this.videoBgCtx.play()
				if (this.loadingCount == 2) {
					this.yunAnimeStart()
				}
			},
			videoPlay() {
				if (this.innerAudioContext) {
					this.innerAudioContext.pause()
					this.audioState = false
				}
			},
			videoPlayErr(){
				this.videoBgCtx.play()
			},
			pointClick(data, index) {
				if (this.clickState) {
					this.pointList[this.btnClickIndex].showState = false
					data.showState = true
					this.btnClickIndex = index
					this.animeStart = this.currentIndex
					this.animeEnd = data.index
					this.openType = data.type
					if (this.currentIndex - data.index == 0) {
						this.contentOpenState = true
						this.openType = data.type
						if (this.openType == 'video') {
							this.videoTitle = `${this.$g.baseUrl}/static/zhaomengfu/titlev${data.title}.png`
							this.videoPath = data.data
							let t = setTimeout(() => {
								// this.videoContext.pause()
								this.videoContext.play();
								clearTimeout(t)
							}, 1000)
						}
						if (this.openType == 'image') {
							this.textImg = `${this.$g.baseUrl}/static/zhaomengfu/text${data.title}.png`
						}
						return
					}
					if (this.openType == 'video') {
						this.videoTitle = `${this.$g.baseUrl}/static/zhaomengfu/titlev${data.title}.png`
						this.videoPath = data.data
					}
					if (this.openType == 'image') {
						this.textImg = `${this.$g.baseUrl}/static/zhaomengfu/text${data.title}.png`
					}
					if (this.currentIndex - data.index > 0) {
						this.animeDirection = -1
					}
					if (this.currentIndex - data.index < 0) {
						this.animeDirection = 1
					}
					this.clickState = false
					this.animeState = true
				}

				// console.log(data)
			},
			animeRender() {
				setInterval(() => {
					if (this.animeState) {
						this.animeStart += this.animeDirection
						// console.log(this.animeIndex)
						this.animeIndex = this.animeStart
						if (this.animeStart == this.animeEnd) {
							this.currentIndex = this.animeEnd
							this.animeState = false
							this.clickState = true
							this.contentOpenState = true
							if (this.openType == 'video') {
								// this.videoContext.pause()
								this.videoContext.play();
							}
						}
					}
				}, 10)
			},
			touchStart(e) {
				// this.animeLine = []
				// let x = this.rpxTopx(e.touches[0].pageX)
				// let y = this.rpxTopx(e.touches[0].pageY)
				// let json1 = {
				// 	"x": `${e.touches[0].pageX-40.5}rpx`,
				// 	"y": `${e.touches[0].pageY-42.5}rpx`
				// }
				// this.saveAnime.push(json1)
				// this.animeLine.push(json1)
				// this.aI++
				// console.log(this.aI)
			},
			touchCilick() {
				// console.log(this.aI)
			},
			rpxTopx(px) {

				let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度

				let rpx = (750 / deviceWidth) * Number(px)

				return Math.floor(rpx);

			}
		},
		onLoad() {
			uni.hideHomeButton()
			this.initData()
			this.createAudio()
			this.animeRender()
		},
		onHide() {
			this.audioState = false
			this.innerAudioContext.pause()
			clearInterval(this.T)
		},
		onShow() {
			if (this.innerAudioContext) {
				this.audioState = true
				this.innerAudioContext.play()
			}
		},
		onUnload() {
			this.innerAudioContext.stop()
			this.innerAudioContext.destroy()
		}
	}
</script>

<style scoped>
	.container {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	.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;
	}
	.videoShow{
		display: flex !important;
	}
	.videoNone{
		display: none !important;
	}

	.container .loading .loadingBox {
		position: absolute;
		width: 105rpx;
		height: 41rpx;
		display: flex;
		top: 345rpx;
		left: 459rpx;
		z-index: 1;
		opacity: 0;
		justify-content: space-around;
		align-items: center;
		animation: 0.8s loadingBoxAnime 0.5s linear forwards;
	}

	@keyframes loadingBoxAnime {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.container .loading .loadingBox span {
		width: 8rpx;
		height: 8rpx;
		background: #c8841a;
		border-radius: 50%;
	}

	.container .loading .loadingBox .span1 {
		animation: 0.8s spanAnime 0.2s alternate infinite;
	}

	.container .loading .loadingBox .span2 {
		animation: 0.8s spanAnime 0.4s alternate infinite;
	}

	.container .loading .loadingBox .span3 {
		animation: 0.8s spanAnime 0.6s alternate infinite;
	}

	.container .loading .loadingBox .span4 {
		animation: 0.8s spanAnime 0.8s alternate infinite;
	}

	.container .loading .loadingBox .span5 {
		animation: 0.8s spanAnime 1s alternate infinite;
	}

	.container .loading .loadingBox .span6 {
		animation: 0.8s spanAnime 1.2s alternate infinite;
	}

	@keyframes spanAnime {
		from {
			transform: scale(1.5);
		}

		to {
			transform: scale(0.7);
		}
	}

	.container .loading .loadingText {
		position: absolute;
		top: 0%;
		left: 0%;
		width: 750rpx;
		height: 1624rpx;
		will-change: transform;
	}

	.container .yunBg {
		position: absolute;
		left: 0;
		top: 0;
		width: 750rpx;
		height: 1624rpx;
		z-index: 99999;
	}

	.container .yunBg video {
		width: 100%;
		height: 100%;
	}

	.container .yunBgOut {
		will-change: opacity;
		animation: 1s yunBgOutAnime 2s linear forwards;
	}

	@keyframes yunBgOutAnime {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	.container .containerBg {
		width: 750rpx;
		height: 1624rpx;
		position: absolute;
		left: 0;
		top: 0;
		overflow: hidden;
		opacity: 0;
		animation: 1s containerBgAnime linear 1s forwards;
	}

	@keyframes containerBgAnime {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.container .containerBg #videoBgDom {
		width: 100%;
		height: 100%;
	}

	.container .containerBg .point {
		position: absolute;
		width: 5vw;
		height: 5vw;
		z-index: 9999;
		opacity: 0;
		animation: 0.5s pointAnime linear forwards;
	}

	@keyframes pointAnime {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.container .containerBg .point .pointImg {
		animation: 1s pointImgAnime linear forwards;
	}

	.container .containerBg .point .pointImgA {
		animation: 1s pointImgAnimeA linear forwards;
	}

	@keyframes pointImgAnime {
		from {
			opacity: 0.8;
			transform: scale(1.1);
		}

		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	@keyframes pointImgAnimeA {
		from {
			opacity: 0.8;
			transform: scale(0.9);
		}

		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	.container .containerBg .openBook {
		position: absolute;
		width: 55rpx;
		height: 220rpx;
		right: 0;
		top: 555rpx;
		z-index: 9999;
	}

	.container .containerBg .openBook image {
		width: 100%;
		height: 100%;
	}

	.container .containerBg .bookPlane {
		position: absolute;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 9999;
		background: rgba(70, 72, 71, 0.63)
	}

	.container .containerBg .bookPlane .bookClose {
		position: absolute;
		right: 90rpx;
		top: 440rpx;
		width: 41rpx;
		height: 41rpx;
	}

	.container .containerBg .bookPlane .bookClose image {
		width: 100%;
		height: 100%;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiperContent {
		width: 100vw;
		height: 560rpx;
		position: absolute;
		top: 500rpx;
		left: 0;
	}

	.swiper {
		height: 600rpx;
	}

	.swiper-itemA {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 287rpx;
		height: 558rpx;
		margin: 0 auto;
	}

	.swiper-itemA image {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 507rpx;
		height: 558rpx;
		line-height: 300rpx;
		text-align: center;
		margin: 0 auto;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.container .containerBg .animeBox {
		width: 81rpx;
		height: 84rpx;
		position: absolute;
		will-change: left, top;
	}

	.container .containerBg .animeBox image {
		width: 100%;
		height: 100%;
	}

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

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

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

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

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

	.container .content {
		position: absolute;
		z-index: 99;
		width: 750rpx;
		height: 1624rpx;
		background: #0000008a;
		animation: 1s contentAnime linear forwards;
	}

	@keyframes contentAnime {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.container .content .videoLayer {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container .content .videoLayer .videoCloseTips {
		position: absolute;
		top: 990rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 199rpx;
		height: 26rpx;
		animation: 1s videoCloseTipsAnime linear 2s alternate infinite;
	}

	@keyframes videoCloseTipsAnime {
		from {
			opacity: 0.5;
		}

		to {
			opacity: 1;
		}
	}

	.container .content .videoLayer .videoCloseTips image {
		width: 100%;
		height: 100%;
	}

	.container .content .videoBox {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container .content .videoBox .closeVideoLayer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;

	}

	.container .content .videoBox .videoBorder {
		position: relative;
		width: 100vw;
	}
	.container .content .videoBox .videoBorder .videoTitle {
		position: absolute;
		top: -50rpx;
		left: 50%;
		transform: translateX(-50%);
		max-width: 740rpx;
		min-width: 644rpx;
		height: 37rpx;
	}
	
	.container .content .videoBox .videoBorder .videoTitle image {
		width: 100%;
		height: 100%;
	}

	.container .content .videoBox .videoBorder video {
		width: 100vw;
		border-top: 2px solid #a9f9e5;
		border-bottom: 2px solid #a9f9e5;
	}

	.container .containerBg .point image {
		width: 100%;
		height: 100%;
		will-change: transform;
	}

	.container .content .imageBox {
		position: absolute;
		z-index: 99;
		width: 100vw;
		height: 100vh;
	}

	.container .content .imageBox .textBox {
		position: absolute;
		right: 135rpx;
		top: 430rpx;
		width: 537rpx;
		height: 646rpx;
	}

	.container .content .imageBox .textBox image {
		width: 100%;
		height: 100%;
	}

	.container .content .imageBox .textBox .closeImgContent {
		position: absolute;
		right: 14rpx;
		top: 0rpx;
		width: 55rpx;
		height: 55rpx;
		z-index: 99;
	}
</style>