<template>
  <div>
    <div class="guide" v-if="show" @click="show=false">
      <img class="toVideo" :src="goUrl"/>
      <div class="video-test">
        点击<span class="color-red">查看视频课程</span>
      </div>
      <div class="video-block">

      </div>
      <div class="change-block">
        <div>视频教学</div>
        <div>音频教学</div>
      </div>
      <img class="toUntil" :src="goDownUrl"/>
      <div class="until-test">
        点击<span class="color-red">音画切换</span>
      </div>
      <img class="i-know" :src="iKnowUrl" @click="show=false"/>
    </div>
  </div>
</template>
<script>
  import {getGuideApi} 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:'video'
      };
      getGuideApi(json).then(res=>{
        if(res == 0){
          this.show=true;
        }
      });
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .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);
  }
  .guide{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
    background:rgba(0,0,0,0.8);
    z-index: 9999;
    .toVideo{
      transform: rotate(-30deg);
      width: 50*@toVw;
      position: absolute;
      top: 100*@toVw;
      left: 50*@toVw;
    }
    .video-block{
      width:320*@toVw;
      height:185*@toVw;
      border-radius:8*@toVw;
      border:1*@toVw solid rgba(255,255,255,1);
      position: absolute;
      top: 154*@toVw;
      left: 27*@toVw;
    }
    .change-block{
      position: absolute;
      top: 356*@toVw;
      left: 115*@toVw;
      width:145*@toVw;
      height:28*@toVw;
      border-radius:14*@toVw;
      border:1*@toVw solid rgba(255,255,255,1);
      font-size:12*@toVw;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(255,255,255,1);
      div{
        width: 49%;
        float: left;
        border-radius: 100*@toVw;
        line-height: 28*@toVw;
        text-align: center;
        &:first-child{
          border:1*@toVw solid rgba(255,255,255,1);
        }
      }
    }
    .video-test{
      width:148*@toVw;
      position: absolute;
      left: 99*@toVw;
      top: 80*@toVw;
      height:26*@toVw;
      border-radius:8*@toVw;
      border:1*@toVw solid rgba(255,255,255,1);
      font-size:14*@toVw;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      line-height: 26*@toVw;
      text-align: center;
      color:rgba(255,255,255,1);
    }
    .i-know{
      position: absolute;
      width: 129*@toVw;
      left: 123*@toVw;
      top: 430*@toVw;
    }
    .color-red{
      color: #FF6477;
    }
    .toUntil{
      width: 50*@toVw;
      position: absolute;
      left: 150*@toVw;
      top: 390*@toVw;
    }
    .until-test{
      width:108*@toVw;
      position: absolute;
      left: 209*@toVw;
      top: 400*@toVw;
      height:26*@toVw;
      border-radius:8*@toVw;
      border:1*@toVw solid rgba(255,255,255,1);
      font-size:14*@toVw;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      line-height: 26*@toVw;
      text-align: center;
      color:rgba(255,255,255,1);
    }
  }
</style>