<template>
  <div>
    <div class="guide" v-if="show" @click="show=false">
      <div class="Unit" v-if="unit">
        Unit
        <br>
        我家农场
      </div>
      <img :class="{'toUntil':true,'unit-no':!unit}" :src="goUrl" v-if="unit"/>
      <div :class="{'until-test':true,'unit-no':!unit}" v-if="unit">
        点击这里可以<span class="color-red">切换主题</span>
      </div>
      <img :src="goUrl" :class="{toLesson:true,'unit-no':!unit}"/>
      <div :class="{'lesson-text':true,'unit-no':!unit}">点击这里可以<span class="color-red">选择课程</span></div>
      <div :class="{'lesson-block':true,'unit-no':!unit}">
        <img :src="mapUrl"/>
      </div>
      <img :class="{'i-know':true,'unit-no':!unit}" :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'
  import mapUrl from '../../assets/guide/map.png'

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

<style scoped lang="less">
  @import "../../util/public";
  .star{
    width: 23*@toVw;
  }
  .to1{
    width: 50*@toVw;
    transform: rotate(190deg);
    position: absolute;
    left: 180*@toVw;
    top: 50*@toVw;
  }
  .to2{
    width: 50*@toVw;
    transform: rotate(160deg);
    position: absolute;
    left: 220*@toVw;
    top: 65*@toVw;
  }
  .to3{
    width: 50*@toVw;
    transform: rotate(140deg);
    position: absolute;
    left: 265*@toVw;
    top: 70*@toVw;
  }
  .text1{
    position: absolute;
    top: 65*@toVw;
    left: 30*@toVw;
  }
  .text2{
    position: absolute;
    top: 90*@toVw;
    left: 80*@toVw;
  }
  .text3{
    position: absolute;
    top: 120*@toVw;
    left: 150*@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);
  }
  .Unit{
    font-size:14*@toVw;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(255,255,255,1);
    border: 1*@toVw solid #fff;
    position: absolute;
    text-align: center;
    border-radius: 8*@toVw;
    width:69*@toVw;
    top: 7*@toVw;
    right: 20*@toVw;
    padding-top:10*@toVw ;
    height:55*@toVw;
    border-radius:8*@toVw;
  }
  .until-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: 87*@toVw;
    right: 100*@toVw;
  }
  .toUntil{
    width: 45*@toVw;
    position: absolute;
    top: 77*@toVw;
    transform: rotate(180deg);
    right: 43*@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: 123*@toVw;
      top: 410*@toVw;
    }
    .toLesson{
      &.unit-no{
        top: 120*@toVw;
      }
      width: 45*@toVw;
      position: absolute;
      top: 190*@toVw;
      left: 91*@toVw;
    }
    .color-red{
      color: #FF6477;
    }
    .lesson-block{
      &.unit-no{
        top: 160*@toVw;
      }
      width:336*@toVw;
      position: absolute;
      top: 230*@toVw;
      left: 19*@toVw;
      img{
        width: 100%;
      }
    }
    .lesson-text{
      &.unit-no{
        top: 110*@toVw;
      }
      width:154*@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;
      top: 187*@toVw;
      left: 137*@toVw;
      text-align: center;
      border:1*@toVw solid rgba(255,255,255,1)
    }
    .go{
      width: 67*@toVw;
      position: absolute;
      bottom: 254*@toVw;
      left: 83*@toVw;
    }
  }
</style>