<template>
	<div @click="itemCk">
		<img class="img" :src="currentImgSrc" alt="" />
		<img class="img" v-for="(imgSrc, index) in imgList" :key="index" :src="imgSrc" alt=""
			style="display: none;" />
	</div>
</template>

<script>
	export default {
		data() {
			return {
				currentFrameIndex: 0,
				imgList: [
					'static/an/qp/0.png', 'static/an/qp/1.png', 'static/an/qp/2.png', 'static/an/qp/3.png',
					'static/an/qp/4.png', 'static/an/qp/5.png', 'static/an/qp/6.png', 'static/an/qp/7.png',
					'static/an/qp/8.png', 'static/an/qp/9.png', 'static/an/qp/10.png', 'static/an/qp/11.png',
					'static/an/qp/12.png', 'static/an/qp/13.png', 'static/an/qp/14.png', 'static/an/qp/15.png',
					'static/an/qp/16.png', 'static/an/qp/17.png', 'static/an/qp/18.png', 'static/an/qp/19.png',
					'static/an/qp/20.png', 'static/an/qp/21.png', 'static/an/qp/22.png', 'static/an/qp/23.png',
					'static/an/qp/24.png', 'static/an/qp/25.png', 'static/an/qp/26.png', 'static/an/qp/27.png',
					'static/an/qp/28.png', 'static/an/qp/29.png', 'static/an/qp/30.png', 'static/an/qp/31.png',
					'static/an/qp/32.png', 'static/an/qp/33.png', 'static/an/qp/34.png', 'static/an/qp/35.png',
					'static/an/qp/36.png', 'static/an/qp/37.png', 'static/an/qp/38.png', 'static/an/qp/39.png',
					'static/an/qp/40.png', 'static/an/qp/41.png', 'static/an/qp/42.png', 'static/an/qp/43.png',
					'static/an/qp/44.png', 'static/an/qp/45.png', 'static/an/qp/46.png', 'static/an/qp/47.png',
					'static/an/qp/48.png', 'static/an/qp/49.png', 'static/an/qp/50.png', 'static/an/qp/51.png',
					'static/an/qp/52.png', 'static/an/qp/53.png', 'static/an/qp/54.png', 'static/an/qp/55.png',
					'static/an/qp/56.png', 'static/an/qp/57.png', 'static/an/qp/58.png', 'static/an/qp/59.png',
					'static/an/qp/60.png', 'static/an/qp/61.png', 'static/an/qp/62.png', 'static/an/qp/63.png',
					'static/an/qp/64.png', 'static/an/qp/65.png', 'static/an/qp/66.png', 'static/an/qp/67.png',
					'static/an/qp/68.png', 'static/an/qp/69.png', 'static/an/qp/70.png', 'static/an/qp/71.png',
					'static/an/qp/72.png', 'static/an/qp/73.png', 'static/an/qp/74.png', 'static/an/qp/75.png',
					'static/an/qp/76.png', 'static/an/qp/77.png', 'static/an/qp/78.png', 'static/an/qp/79.png',
					'static/an/qp/80.png', 'static/an/qp/81.png', 'static/an/qp/82.png', 'static/an/qp/83.png',
					'static/an/qp/84.png', 'static/an/qp/85.png', 'static/an/qp/86.png', 'static/an/qp/87.png',
					'static/an/qp/88.png', 'static/an/qp/89.png', 'static/an/qp/90.png', 'static/an/qp/91.png',
					'static/an/qp/92.png', 'static/an/qp/93.png', 'static/an/qp/94.png', 'static/an/qp/95.png',
					'static/an/qp/96.png', 'static/an/qp/97.png', 'static/an/qp/98.png', 'static/an/qp/99.png',
					'static/an/qp/100.png', 'static/an/qp/101.png', 'static/an/qp/102.png', 'static/an/qp/103.png',
					'static/an/qp/104.png', 'static/an/qp/105.png', 'static/an/qp/106.png', 'static/an/qp/107.png',
					'static/an/qp/108.png', 'static/an/qp/109.png', 'static/an/qp/110.png', 'static/an/qp/111.png',
					'static/an/qp/112.png', 'static/an/qp/113.png', 'static/an/qp/114.png', 'static/an/qp/115.png',
					'static/an/qp/116.png', 'static/an/qp/117.png', 'static/an/qp/118.png', 'static/an/qp/119.png',
					'static/an/qp/120.png', 'static/an/qp/121.png', 'static/an/qp/122.png', 'static/an/qp/123.png',
					'static/an/qp/124.png', 'static/an/qp/125.png', 'static/an/qp/126.png', 'static/an/qp/127.png',
					'static/an/qp/128.png', 'static/an/qp/129.png', 'static/an/qp/130.png', 'static/an/qp/131.png',
					'static/an/qp/132.png', 'static/an/qp/133.png', 'static/an/qp/134.png', 'static/an/qp/135.png',
					'static/an/qp/136.png', 'static/an/qp/137.png', 'static/an/qp/138.png', 'static/an/qp/139.png',
					'static/an/qp/140.png', 'static/an/qp/141.png', 'static/an/qp/142.png', 'static/an/qp/143.png',
					'static/an/qp/144.png', 'static/an/qp/145.png', 'static/an/qp/146.png', 'static/an/qp/147.png',
					'static/an/qp/148.png', 'static/an/qp/149.png', 'static/an/qp/150.png', 'static/an/qp/151.png',
					'static/an/qp/152.png', 'static/an/qp/153.png', 'static/an/qp/154.png', 'static/an/qp/155.png',
					'static/an/qp/156.png', 'static/an/qp/157.png', 'static/an/qp/158.png', 'static/an/qp/159.png',
					'static/an/qp/160.png', 'static/an/qp/161.png', 'static/an/qp/162.png', 'static/an/qp/163.png',
					'static/an/qp/164.png', 'static/an/qp/165.png', 'static/an/qp/166.png', 'static/an/qp/167.png',
					'static/an/qp/168.png', 'static/an/qp/169.png', 'static/an/qp/170.png', 'static/an/qp/171.png',
					'static/an/qp/172.png', 'static/an/qp/173.png', 'static/an/qp/174.png', 'static/an/qp/175.png',
					'static/an/qp/176.png', 'static/an/qp/177.png', 'static/an/qp/178.png', 'static/an/qp/179.png',
					'static/an/qp/180.png', 'static/an/qp/181.png', 'static/an/qp/182.png', 'static/an/qp/183.png',
					'static/an/qp/184.png', 'static/an/qp/185.png', 'static/an/qp/186.png', 'static/an/qp/187.png',
					'static/an/qp/188.png', 'static/an/qp/189.png', 'static/an/qp/190.png', 'static/an/qp/191.png',
					'static/an/qp/192.png', 'static/an/qp/193.png', 'static/an/qp/194.png', 'static/an/qp/195.png',
					'static/an/qp/196.png', 'static/an/qp/197.png', 'static/an/qp/198.png', 'static/an/qp/199.png',
					'static/an/qp/200.png', 'static/an/qp/201.png', 'static/an/qp/202.png', 'static/an/qp/203.png',
					'static/an/qp/204.png', 'static/an/qp/205.png', 'static/an/qp/206.png', 'static/an/qp/207.png',
					'static/an/qp/208.png', 'static/an/qp/209.png', 'static/an/qp/210.png', 'static/an/qp/211.png',
					'static/an/qp/212.png', 'static/an/qp/213.png', 'static/an/qp/214.png', 'static/an/qp/215.png',
					'static/an/qp/216.png', 'static/an/qp/217.png', 'static/an/qp/218.png', 'static/an/qp/219.png',
					'static/an/qp/220.png', 'static/an/qp/221.png', 'static/an/qp/222.png', 'static/an/qp/223.png',
					'static/an/qp/224.png'
				],
				delay: 40,
				timer:null
			};
		},
		computed: {
			currentImgSrc() {
				return this.imgList[this.currentFrameIndex];
			}
		},
		mounted() {
			this.startAnimation();
		},
		methods: {
			startAnimation() {
				this.timer = setInterval(() => {
					this.currentFrameIndex = (this.currentFrameIndex + 1) % this.imgList.length;
				}, this.delay);
			},
			itemCk(){
				this.$emit('click')
			}
		},
  onUnload() {
	// 在页面离开时清除定时器
	clearInterval(this.timer)
  }
		// mounted() {
		// 	const img = document.getElementsByClassName("img")[0]
		// 	const delay = 40
		// 	const imgCount = 224
		// 	const animation = (i) => {
		// 		if (i === imgCount) {
		// 			animation(0)
		// 			return
		// 		}
		// 		img.src = `static/an/qp/${i}.png`
		// 		img.onload = () => {
		// 			setTimeout(() => {
		// 				animation(i + 1)
		// 			}, delay);
		// 		}
		// 	}
		// 	animation(0)
		// }
	}
</script>

<style lang="scss" scoped>
	.img {
		position: absolute;
		top: -40rpx;
		width: 750rpx;
		height: 600rpx;
		z-index: 3;
		object-fit: contain;
	}

	#id {
		position: absolute;
		top: -40rpx;
		width: 750rpx;
		height: 520rpx;
		border: 1px solid red;
	}

	.bubble-icon {
		position: absolute;
		top: -40rpx;
		width: 750rpx;
		height: 520rpx;
		background-image: url('@/static/an/qp/0.png');
		background-size: cover;
		/* 调整背景图片大小以填充容器 */
		animation-name: bubbleAnimation;
		animation-duration: 10s;
		/* 动画持续时间，根据需要进行调整 */
		animation-timing-function: steps(1);
		/* 动画步进方式，每一帧为一步 */
		animation-iteration-count: infinite;
	}

	$qpCount: 224;

	@keyframes bubbleAnimation {
		@for $i from 0 through $qpCount {
			#{($i * 100%/$qpCount)} {
				background-image: url(@/static/an/qp/#{$i}.png);
			}
		}

		// 0% { background-image: url('@/static/an/qp/0.png'); }
		// 0.4% { background-image: url('@/static/an/qp/1.png'); }
		// 0.8% { background-image: url('@/static/an/qp/2.png'); }
		// 1.2% { background-image: url('@/static/an/qp/3.png'); }
		// 1.6% { background-image: url('@/static/an/qp/4.png'); }
		// 2% { background-image: url('@/static/an/qp/5.png'); }
		// 2.4% { background-image: url('@/static/an/qp/6.png'); }
		// 2.8% { background-image: url('@/static/an/qp/7.png'); }
		// 3.2% { background-image: url('@/static/an/qp/8.png'); }
		// 3.6% { background-image: url('@/static/an/qp/9.png'); }
		// 4% { background-image: url('@/static/an/qp/10.png'); }
		// 4.4% { background-image: url('@/static/an/qp/11.png'); }
		// 4.8% { background-image: url('@/static/an/qp/12.png'); }
		// 5.2% { background-image: url('@/static/an/qp/13.png'); }
		// 5.6% { background-image: url('@/static/an/qp/14.png'); }
		// 6% { background-image: url('@/static/an/qp/15.png'); }
		// 6.4% { background-image: url('@/static/an/qp/16.png'); }
		// 6.8% { background-image: url('@/static/an/qp/17.png'); }
		// 7.2% { background-image: url('@/static/an/qp/18.png'); }
		// 7.6% { background-image: url('@/static/an/qp/19.png'); }
		// 8% { background-image: url('@/static/an/qp/20.png'); }
		// 8.4% { background-image: url('@/static/an/qp/21.png'); }
		// 8.8% { background-image: url('@/static/an/qp/22.png'); }
		// 9.2% { background-image: url('@/static/an/qp/23.png'); }
		// 9.6% { background-image: url('@/static/an/qp/24.png'); }
		// 10% { background-image: url('@/static/an/qp/25.png'); }
		// 10.4% { background-image: url('@/static/an/qp/26.png'); }
		// 10.8% { background-image: url('@/static/an/qp/27.png'); }
		// 11.2% { background-image: url('@/static/an/qp/28.png'); }
		// 11.6% { background-image: url('@/static/an/qp/29.png'); }
		// 12% { background-image: url('@/static/an/qp/30.png'); }
		// 12.4% { background-image: url('@/static/an/qp/31.png'); }
		// 12.8% { background-image: url('@/static/an/qp/32.png'); }
		// 13.2% { background-image: url('@/static/an/qp/33.png'); }
		// 13.6% { background-image: url('@/static/an/qp/34.png'); }
		// 14% { background-image: url('@/static/an/qp/35.png'); }
		// 14.4% { background-image: url('@/static/an/qp/36.png'); }
		// 14.8% { background-image: url('@/static/an/qp/37.png'); }
		// 15.2% { background-image: url('@/static/an/qp/38.png'); }
		// 15.6% { background-image: url('@/static/an/qp/39.png'); }
		// 16% { background-image: url('@/static/an/qp/40.png'); }
		// 16.4% { background-image: url('@/static/an/qp/41.png'); }
		// 16.8% { background-image: url('@/static/an/qp/42.png'); }
		// 17.2% { background-image: url('@/static/an/qp/43.png'); }
		// 17.6% { background-image: url('@/static/an/qp/44.png'); }
		// 18% { background-image: url('@/static/an/qp/45.png'); }
		// 18.4% { background-image: url('@/static/an/qp/46.png'); }
		// 18.8% { background-image: url('@/static/an/qp/47.png'); }
		// 19.2% { background-image: url('@/static/an/qp/48.png'); }
		// 19.6% { background-image: url('@/static/an/qp/49.png'); }
		// 20% { background-image: url('@/static/an/qp/50.png'); }
		// 20.4% { background-image: url('@/static/an/qp/51.png'); }
		// 20.8% { background-image: url('@/static/an/qp/52.png'); }
		// 21.2% { background-image: url('@/static/an/qp/52.png'); }
		// 21.6% { background-image: url('@/static/an/qp/53.png'); }
		// 22% { background-image: url('@/static/an/qp/54.png'); }
		// 22.4% { background-image: url('@/static/an/qp/55.png'); }
		// 22.8% { background-image: url('@/static/an/qp/56.png'); }
		// 23.2% { background-image: url('@/static/an/qp/57.png'); }
		// 23.6% { background-image: url('@/static/an/qp/58.png'); }
		// 24% { background-image: url('@/static/an/qp/59.png'); }
		// 24.4% { background-image: url('@/static/an/qp/60.png'); }
		// 24.8% { background-image: url('@/static/an/qp/61.png'); }
		// 25.2% { background-image: url('@/static/an/qp/62.png'); }
		// 25.6% { background-image: url('@/static/an/qp/63.png'); }
		// 26% { background-image: url('@/static/an/qp/64.png'); }
		// 26.4% { background-image: url('@/static/an/qp/65.png'); }
		// 26.8% { background-image: url('@/static/an/qp/66.png'); }
		// 27.2% { background-image: url('@/static/an/qp/67.png'); }
		// 27.6% { background-image: url('@/static/an/qp/68.png'); }
		// 28% { background-image: url('@/static/an/qp/69.png'); }
		// 28.4% { background-image: url('@/static/an/qp/70.png'); }
		// 28.8% { background-image: url('@/static/an/qp/71.png'); }
		// 29.2% { background-image: url('@/static/an/qp/73.png'); }
		// 29.6% { background-image: url('@/static/an/qp/74.png'); }
		// 30% { background-image: url('@/static/an/qp/75.png'); }
		// 30.4% { background-image: url('@/static/an/qp/76.png'); }
		// 30.8% { background-image: url('@/static/an/qp/77.png'); }
		// 31.2% { background-image: url('@/static/an/qp/78.png'); }
		// 31.6% { background-image: url('@/static/an/qp/79.png'); }
		// 32% { background-image: url('@/static/an/qp/80.png'); }
		// 32.4% { background-image: url('@/static/an/qp/81.png'); }
		// 32.8% { background-image: url('@/static/an/qp/82.png'); }
		// 33.2% { background-image: url('@/static/an/qp/83.png'); }
		// 33.6% { background-image: url('@/static/an/qp/84.png'); }
		// 34% { background-image: url('@/static/an/qp/85.png'); }
		// 34.4% { background-image: url('@/static/an/qp/86.png'); }
		// 34.8% { background-image: url('@/static/an/qp/87.png'); }
		// 35.2% { background-image: url('@/static/an/qp/88.png'); }
		// 35.6% { background-image: url('@/static/an/qp/89.png'); }
		// 36% { background-image: url('@/static/an/qp/90.png'); }
		// 36.4% { background-image: url('@/static/an/qp/91.png'); }
		// 36.8% { background-image: url('@/static/an/qp/92.png'); }
		// 37.2% { background-image: url('@/static/an/qp/93.png'); }
		// 37.6% { background-image: url('@/static/an/qp/94.png'); }
		// 38% { background-image: url('@/static/an/qp/95.png'); }
		// 38.4% { background-image: url('@/static/an/qp/96.png'); }
		// 38.8% { background-image: url('@/static/an/qp/97.png'); }
		// 39.2% { background-image: url('@/static/an/qp/98.png'); }
		// 39.6% { background-image: url('@/static/an/qp/99.png'); }
		// 40% { background-image: url('@/static/an/qp/100.png'); }
		// 40.4% { background-image: url('@/static/an/qp/101.png'); }
		// 40.8% { background-image: url('@/static/an/qp/102.png'); }
		// 41.2% { background-image: url('@/static/an/qp/103.png'); }
		// 41.6% { background-image: url('@/static/an/qp/104.png'); }
		// 42% { background-image: url('@/static/an/qp/105.png'); }
		// 42.4% { background-image: url('@/static/an/qp/106.png'); }
		// 42.8% { background-image: url('@/static/an/qp/107.png'); }
		// 43.2% { background-image: url('@/static/an/qp/108.png'); }
		// 43.6% { background-image: url('@/static/an/qp/109.png'); }
		// 44% { background-image: url('@/static/an/qp/110.png'); }
		// 44.4% { background-image: url('@/static/an/qp/111.png'); }
		// 44.8% { background-image: url('@/static/an/qp/112.png'); }
		// 45.2% { background-image: url('@/static/an/qp/113.png'); }
		// 45.6% { background-image: url('@/static/an/qp/114.png'); }
		// 46% { background-image: url('@/static/an/qp/115.png'); }
		// 46.4% { background-image: url('@/static/an/qp/116.png'); }
		// 46.8% { background-image: url('@/static/an/qp/117.png'); }
		// 47.2% { background-image: url('@/static/an/qp/118.png'); }
		// 47.6% { background-image: url('@/static/an/qp/119.png'); }
		// 48% { background-image: url('@/static/an/qp/120.png'); }
		// 48.4% { background-image: url('@/static/an/qp/121.png'); }
		// 48.8% { background-image: url('@/static/an/qp/122.png'); }
		// 49.2% { background-image: url('@/static/an/qp/123.png'); }
		// 49.6% { background-image: url('@/static/an/qp/124.png'); }
		// 50% { background-image: url('@/static/an/qp/125.png'); }
		// 50.4% { background-image: url('@/static/an/qp/126.png'); }
		// 50.8% { background-image: url('@/static/an/qp/127.png'); }
		// 51.2% { background-image: url('@/static/an/qp/128.png'); }
		// 51.6% { background-image: url('@/static/an/qp/129.png'); }
		// 52% { background-image: url('@/static/an/qp/130.png'); }
		// 52.4% { background-image: url('@/static/an/qp/131.png'); }
		// 52.8% { background-image: url('@/static/an/qp/132.png'); }
		// 53.2% { background-image: url('@/static/an/qp/133.png'); }
		// 53.6% { background-image: url('@/static/an/qp/134.png'); }
		// 54% { background-image: url('@/static/an/qp/135.png'); }
		// 54.4% { background-image: url('@/static/an/qp/136.png'); }
		// 54.8% { background-image: url('@/static/an/qp/137.png'); }
		// 55.2% { background-image: url('@/static/an/qp/138.png'); }
		// 55.6% { background-image: url('@/static/an/qp/139.png'); }
		// 56% { background-image: url('@/static/an/qp/140.png'); }
		// 56.4% { background-image: url('@/static/an/qp/141.png'); }
		// 56.8% { background-image: url('@/static/an/qp/142.png'); }
		// 57.2% { background-image: url('@/static/an/qp/143.png'); }
		// 57.6% { background-image: url('@/static/an/qp/144.png'); }
		// 58% { background-image: url('@/static/an/qp/145.png'); }
		// 58.4% { background-image: url('@/static/an/qp/146.png'); }
		// 58.8% { background-image: url('@/static/an/qp/147.png'); }
		// 59.2% { background-image: url('@/static/an/qp/148.png'); }
		// 59.6% { background-image: url('@/static/an/qp/149.png'); }
		// 60% { background-image: url('@/static/an/qp/150.png'); }
		// 60.4% { background-image: url('@/static/an/qp/151.png'); }
		// 60.8% { background-image: url('@/static/an/qp/152.png'); }
		// 61.2% { background-image: url('@/static/an/qp/153.png'); }
		// 61.6% { background-image: url('@/static/an/qp/154.png'); }
		// 62% { background-image: url('@/static/an/qp/155.png'); }
		// 62.4% { background-image: url('@/static/an/qp/156.png'); }
		// 62.8% { background-image: url('@/static/an/qp/157.png'); }
		// 63.2% { background-image: url('@/static/an/qp/158.png'); }
		// 63.6% { background-image: url('@/static/an/qp/159.png'); }
		// 64% { background-image: url('@/static/an/qp/160.png'); }
		// 64.4% { background-image: url('@/static/an/qp/161.png'); }
		// 64.8% { background-image: url('@/static/an/qp/162.png'); }
		// 65.2% { background-image: url('@/static/an/qp/163.png'); }
		// 65.6% { background-image: url('@/static/an/qp/164.png'); }
		// 66% { background-image: url('@/static/an/qp/165.png'); }
		// 66.4% { background-image: url('@/static/an/qp/166.png'); }
		// 66.8% { background-image: url('@/static/an/qp/167.png'); }
		// 67.2% { background-image: url('@/static/an/qp/168.png'); }
		// 67.6% { background-image: url('@/static/an/qp/169.png'); }
		// 68% { background-image: url('@/static/an/qp/170.png'); }
		// 68.4% { background-image: url('@/static/an/qp/171.png'); }
		// 68.8% { background-image: url('@/static/an/qp/172.png'); }
		// 69.2% { background-image: url('@/static/an/qp/173.png'); }
		// 69.6% { background-image: url('@/static/an/qp/174.png'); }
		// 70% { background-image: url('@/static/an/qp/175.png'); }
		// 70.4% { background-image: url('@/static/an/qp/176.png'); }
		// 70.8% { background-image: url('@/static/an/qp/177.png'); }
		// 71.2% { background-image: url('@/static/an/qp/178.png'); }
		// 71.6% { background-image: url('@/static/an/qp/179.png'); }
		// 72% { background-image: url('@/static/an/qp/180.png'); }
		// 72.4% { background-image: url('@/static/an/qp/181.png'); }
		// 72.8% { background-image: url('@/static/an/qp/182.png'); }
		// 73.2% { background-image: url('@/static/an/qp/183.png'); }
		// 73.6% { background-image: url('@/static/an/qp/184.png'); }
		// 74% { background-image: url('@/static/an/qp/185.png'); }
		// 74.4% { background-image: url('@/static/an/qp/186.png'); }
		// 74.8% { background-image: url('@/static/an/qp/187.png'); }
		// 75.2% { background-image: url('@/static/an/qp/188.png'); }
		// 75.6% { background-image: url('@/static/an/qp/189.png'); }
		// 76% { background-image: url('@/static/an/qp/190.png'); }
		// 76.4% { background-image: url('@/static/an/qp/191.png'); }
		// 76.8% { background-image: url('@/static/an/qp/192.png'); }
		// 77.2% { background-image: url('@/static/an/qp/193.png'); }
		// 77.6% { background-image: url('@/static/an/qp/194.png'); }
		// 78% { background-image: url('@/static/an/qp/195.png'); }
		// 78.4% { background-image: url('@/static/an/qp/196.png'); }
		// 78.8% { background-image: url('@/static/an/qp/197.png'); }
		// 79.2% { background-image: url('@/static/an/qp/198.png'); }
		// 79.6% { background-image: url('@/static/an/qp/199.png'); }
		// 80% { background-image: url('@/static/an/qp/200.png'); }
		// 80.4% { background-image: url('@/static/an/qp/201.png'); }
		// 80.8% { background-image: url('@/static/an/qp/202.png'); }
		// 81.2% { background-image: url('@/static/an/qp/203.png'); }
		// 81.6% { background-image: url('@/static/an/qp/204.png'); }
		// 82% { background-image: url('@/static/an/qp/205.png'); }
		// 82.4% { background-image: url('@/static/an/qp/206.png'); }
		// 82.8% { background-image: url('@/static/an/qp/207.png'); }
		// 83.2% { background-image: url('@/static/an/qp/208.png'); }
		// 84.6% { background-image: url('@/static/an/qp/209.png'); }
		// 85% { background-image: url('@/static/an/qp/210.png'); }
		// 86% { background-image: url('@/static/an/qp/211.png'); }
		// 87% { background-image: url('@/static/an/qp/212.png'); }
		// 88% { background-image: url('@/static/an/qp/213.png'); }
		// 89% { background-image: url('@/static/an/qp/214.png'); }
		// 90% { background-image: url('@/static/an/qp/215.png'); }
		// 91% { background-image: url('@/static/an/qp/216.png'); }
		// 92% { background-image: url('@/static/an/qp/217.png'); }
		// 93% { background-image: url('@/static/an/qp/218.png'); }
		// 94% { background-image: url('@/static/an/qp/219.png'); }
		// 95% { background-image: url('@/static/an/qp/220.png'); }
		// 96% { background-image: url('@/static/an/qp/221.png'); }
		// 98% { background-image: url('@/static/an/qp/222.png'); }
		// 99% { background-image: url('@/static/an/qp/223.png'); }
		// 100% { background-image: url('@/static/an/qp/224.png'); }
	}
</style>