<template>
  <div>
    <div class="guide" v-if="show" @click="show=false">
      <img class="i-know" :src="iKnowUrl" @click="show=false"/>
      <img class="go"  :src="goUrl"/>
      <div class="tips">
        已购课程，点击<span>开始上课!</span>
      </div>
      <img class="banner" src="https://cdn.singsingenglish.com/new-sing/20181018/3dd8d55b0b6e9bf4fa1f96d500b69f6b2145640b1539836003313.jpeg"/>
    </div>

  </div>
</template>

<script>
  import {getGuideApi,setGuideApi} from "../../service/api";
  import iKnowUrl from '../../assets/guide/iKnow.png'
  import goUrl from '../../assets/guide/go.png'
  export default {
    name: "index",
    data(){
      return{
        iKnowUrl:iKnowUrl,
        goUrl:goUrl,
        show:false
      }
    },
    mounted(){
      let json = {
        page_name:'index'
      };
      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;
    .i-know{
      position: absolute;
      width: 129*@toVw;
      left: 123*@toVw;
      bottom: 351*@toVw;
    }
    .go{
      width: 67*@toVw;
      position: absolute;
      bottom: 254*@toVw;
      left: 83*@toVw;
    }
    .banner{
      position: absolute;
      left: 19*@toVw;
      bottom: 49*@toVw;
      width: 336*@toVw;
      height: 215*@toVw;
      border-radius: 8*@toVw;
      border: 1*@toVw solid #fff;
    }
    .tips{
      padding: 5*@toVw 7*@toVw;
      left: 155*@toVw;
      bottom: 275*@toVw;
      border-radius: 8*@toVw;
      border: 1*@toVw solid #fff;
      position: absolute;
      font-size:16*@toVw;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(255,255,255,1);
      span{
        color: #FF6477;
      }
    }
  }
</style>