<template>
<div class="gif">
<!-- <p class="count">{{count}}</p> -->
<div @click="close" class="close">
<i class="iconfont icon-shengyin1" v-show="show_iocn"></i>
<i class="iconfont icon-shengyinguanbi" v-show="show_iocn2"></i>
</div>
<div class="animation">
<img src="../assets/img/5.gif" alt="">
</div>
<!-- 音乐默认播放 -->
<audio id='music' :src="ling" class="media-audio" ref="MusicPlay" autoplay></audio>
</div>
</template>
<script>
export default {
name: 'animation',
data () {
return {
ling:require("../assets/ling.mp3"), //mp3文件
show_iocn:true, //开图标
show_iocn2:false, //关图标
}
},
methods: {
//关闭音乐
close() {
var audio = document.getElementById('music');
if (audio.paused) {
audio.play(); // 播放
this.show_iocn=true;
this.show_iocn2 = false;
} else {
this.show_iocn=false;
this.show_iocn2 = true;
audio.pause();// 暂停
}
}
},
//vue设置整屏背景色
mounted() {
document.querySelector('body').setAttribute('style', 'background-color:#F5B754')
var _this = this
setTimeout(function(){
_this.$router.push('/studentId');
},8200)
},
//页面跳转去掉背景色
beforeDestroy() {
document.querySelector('body').removeAttribute('style')
}
}
</script>
<style scoped>
.animation{
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
}
.animation img{
width: 100%;
height: 10rem;
}
.close{
float: right;
margin-right: .5rem;
margin-top:.5rem;
}
.close i{
font-size: .7rem;
color: #fff;
}
</style>