<template>
  <div>
    <div class="guide" v-if="show" @click="show=false">
      <div class="guide-content">
        <div class="title">
          The Bear Went Over the Mountain
        </div>
        <img class="toTitle" :src="goDownUrl"/>
        <div class="title-test">
          该天<span class="color-red">歌曲名称</span>
        </div>
        <img :src="goUrl" class="toLesson"/>
        <div class="lesson-text">点击<span class="color-red">开始课程</span></div>
        <div class="lesson-block">
          开始课程
        </div>
        <img class="i-know" :src="iKnowUrl" @click="show=false"/>
      </div>
    </div>
  </div>
</template>

<script>

  import {getGuideApi,setGuideApi} from "../../service/api";
  import iKnowUrl from '../../assets/guide/iKnow.png'
  import goUrl from '../../assets/guide/go.png'
  import goDownUrl from '../../assets/guide/go-down.png'
  import starUrl from '../../assets/guide/star.png'

  export default {
    name: "guide",
    data(){
      return{
        iKnowUrl:iKnowUrl,
        goDownUrl:goDownUrl,
        goUrl:goUrl,
        starUrl:starUrl,
        show:false
      }
    },
    mounted(){
      let json = {
        page_name:'content'
      };
      getGuideApi(json).then(res=>{
        if(res == 0){
          this.show=true;
        }
      });
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .star{
    width: 23*@toVw;
  }
  .guide-content{
    width: 276*@toVw;
    height: 468*@toVw;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -234*@toVw;
    margin-left: -138*@toVw;
  }
  .off{
    position: absolute;
    top: 9*@toVw;
    z-index: 99999;
    right: 20*@toVw;
    font-size:12*@toVw;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(255,255,255,1);
  }
  .title{
    width:237*@toVw;
    height:58*@toVw;
    padding: 10*@toVw;
    font-size:24*@toVw;
    font-family:PingFangSC-Semibold;
    font-weight:600;
    color:rgba(255,255,255,1);
    line-height:29*@toVw;
    border-radius:8*@toVw;
    border:1*@toVw solid rgba(255,255,255,1);
    position: absolute;
    text-align: center;
    border-radius: 8*@toVw;
    top: 20*@toVw;
    left: 10*@toVw;
    padding-top:10*@toVw ;
    border-radius:8*@toVw;
  }
  .title-test{
    font-size:14*@toVw;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:26*@toVw;
    position: absolute;
    width:144*@toVw;
    height:26*@toVw;
    border-radius:8*@toVw;
    border:1*@toVw solid rgba(255,255,255,1);
    text-align: center;
    top: 120*@toVw;
    left: 110*@toVw;
  }
  .toTitle{
    width: 45*@toVw;
    position: absolute;
    top: 110*@toVw;
    left: 60*@toVw ;
  }
  .guide{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
    background:rgba(0,0,0,0.8);
    z-index: 9999;
    .i-know{
      position: absolute;
      width: 129*@toVw;
      left: 50%;
      margin-left: -64.5*@toVw;
      margin-top: -32*@toVw;
      top: 50%;
    }
    .toLesson{
      width: 45*@toVw;
      position: absolute;
      bottom: 90*@toVw;
      left: 91*@toVw;
      transform: rotate(-20deg);
    }
    .color-red{
      color: #FF6477;
    }
    .lesson-block{
      width:134px;
      height:57px;
      border-radius:29px;
      border:1px solid rgba(255,255,255,1);
      font-size:20px;
      font-family:PingFangSC-Semibold;
      font-weight:600;
      color:rgba(255,255,255,1);
      line-height: 57*@toVw;
      text-align: center;
      position: absolute;
      bottom: 20*@toVw;
      left: 50%;
      margin-left: -67*@toVw;
    }
    .lesson-text{
      width:114*@toVw;
      height:26*@toVw;
      line-height: 26*@toVw;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      font-size: 14*@toVw;
      border-radius:8*@toVw;
      position: absolute;
      bottom: 110*@toVw;
      left: 137*@toVw;
      text-align: center;
      border:1*@toVw solid rgba(255,255,255,1)
    }
  }
</style>