<template>
  <div>
    <div class="guide" v-if="show" @click="show=false">
      <div class="radius-block">
        <div class="radius"></div>
        <div class="radius"></div>
        <div class="radius"></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,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:'look'
      };
      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;
    .radius-block{
      padding: 10*@toVw;
      &:after{
        content: '';
        display: block;
        clear: both;
      }
      .radius{
        margin-right: 5*@toVw;
        float: right;
        width:96*@toVw;
        height:40*@toVw;
        border-radius:20*@toVw;
        border:1*@toVw solid rgba(255,255,255,1);
      }
    }
    .i-know{
      position: absolute;
      width: 129*@toVw;
      left: 123*@toVw;
      bottom: 160*@toVw;
    }
    .color-red{
      color: #FF6477;
    }
    .toUntil{
      width: 50*@toVw;
      position: absolute;
      left: 80*@toVw;
      top: 60*@toVw;
      transform: rotate(20deg);
    }
    .until-test{
      width:158*@toVw;
      position: absolute;
      left: 139*@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);
    }
  }
</style>