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

阳光穿透心脏的1/2处 2023-06-25 08:07 3阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]

<template>
      <div class="gif">
          
          <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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191227112538911.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70