389 lines
21 KiB
Vue
389 lines
21 KiB
Vue
<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> |