vue 设置整屏背景色音乐播放-蒲公英云

vue 设置整屏背景色音乐播放

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70

<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>