<template>
  <div>
    <div class="guide" v-if="show" @click="show=false">
      <img :src="bgUrl" class="bg"/>
      <div class="tips">
        需要先在课程中将歌曲<span class="color-red">加入收藏</span>
        才可以使用哦
      </div>
    </div>
  </div>
</template>

<script>
  import {getGuideApi,setGuideApi} from "../../service/api";
  import bgUrl from '../../assets/guide/collect.png'

  export default {
    name: "guide",
    data(){
      return{
        bgUrl:bgUrl,
        show:false
      }
    },
    mounted(){
      let json = {
        page_name:'collection'
      };
      this.show=true;
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .color-red{
    color:#FF5050 ;
  }
  .guide{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    right: 0;
    background-size: 100% 100%;
    color: white;
    z-index: 9999;
    background:rgba(0,0,0,0.8);
    .bg{
      margin-top: -60*@toVw;
      width: 100%;
    }
    .tips{
      width: 196*@toVw;
      position: absolute;
      top: 440*@toVw;
      left: 20*@toVw;
      font-size:14*@toVw;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(255,255,255,1);
      text-align: center;
      padding: 10*@toVw;
      border: 1*@toVw solid #fff;
      border-radius: 8*@toVw;
    }
  }
</style>