<template>
  <div>
    <div class="unit-block">
      <!--竖屏 主题栏-->
      <swiper :options="swiperOption" class="banner" v-if="$route.query.course_type==0" ref="mySwiper">
        <swiper-slide v-for="(data,index) in unitList" :key="index">
          <div class="line"></div>
          <div :class="{'unit-li':true,active:data.category_id == parent_category_id}" @click="changeCateGory(data,data.category_id == parent_category_id)">
            <div>
              <img :src="data.category_cover">
            </div>
            {{data.category_name}}
          </div>
        </swiper-slide>
        <swiper-slide v-if="more">
          <div class="line"></div>
          <div class="unit-li">
            <div>
              <img :src="nextUnitUrl">
            </div>
            <span style="color: #cccccc">敬请期待</span>
          </div>
        </swiper-slide>
          <swiper-slide v-for="a in 3-unitList.length > 0 ? 3-unitList.length : 0" :key="a*10">
            <div class="unit-li">
              <div>
              </div>
            </div>
          </swiper-slide>
      </swiper>
      <!--横屏主题栏-->
      <div class="btn-conntent banner-left">
        <img :src="nextToURL" class="">
      </div>
      <div class="btn-conntent banner-right">
        <img :src="nextToURL" class="">
      </div>
      <swiper :options="swiperOption2" class="banner2" v-if="$route.query.course_type==0" ref="mySwiper2">
        <swiper-slide v-for="(data,index) in unitList" :key="index">
          <div class="line"></div>
          <div :class="{'unit-li':true,active:data.category_id == parent_category_id}" @click="changeCateGory(data,data.category_id == parent_category_id)">
            <img :src="data.category_cover">
            <div>{{data.category_name}}</div>
          </div>
        </swiper-slide>
        <swiper-slide v-if="more">
          <div class="line"></div>
          <div class="unit-li">
            <div>
              <img :src="nextUnitUrl">
            </div>
            <span style="color: #cccccc">敬请期待</span>
          </div>
        </swiper-slide>
        <swiper-slide v-for="a in 6-unitList.length > 0 ? 6-unitList.length : 0" :key="a*10">
          <div class="unit-li">
            <div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <!--竖屏 课程-->
    <div class="lesson-block">
      <div v-if="noLesson" class="noLesson">
        <img :src="errorURL" />
        <div>
          暂无课程
        </div>
      </div>
      <div class="card-block" v-for="(data,index) in lessonList">
        <img :src="data[0].cover+'?imageslim'"/>
        <div :class="'card-li cid'+item.id" v-for="(item,x) in data" @click="showDia(item,x+1)">
          <div class="text-block">
            <div class="title">
              {{item.name | substr10}}
            </div>
            <div class="tips">
              <span v-if="item.push_time !== '0000-00-00'"> 开课时间：{{item.push_time}}</span>
              <span v-if="item.push_time === '0000-00-00'">课程还未开始哦</span>
            </div>
          </div>
          <div class="star-block" v-if="item.push_time !== '0000-00-00'">
            <img class="star-img" :src="star_act" v-for="s in item.star_num">
            <img class="star-img" :src="star_def" v-for="s in 3-item.star_num">
          </div>
          <div class="icon-block">
            <i
              :class="{
              map:true,
              right:index !== item.length-1 && item.push_time !== '0000-00-00',
              money:item.push_time !== '0000-00-00' && ((data[x+1] && data[x+1].push_time === '0000-00-00' || ( x === data.length-1 && lessonList[index+1] && lessonList[index+1][0].push_time === '0000-00-00'))|| ($route.query.course_type == 0 &&  findUnit(parent_category_id) && findUnit(parent_category_id).status === 2 || $route.query.course_type ==1 ) && x===data.length-1 && index == lessonList.length-1),
              clock:item.push_time === '0000-00-00'
              }"></i>
          </div>
        </div>
      </div>
    </div>
    <!--横屏 课程-->
    <div class="lesson-block-hp">
      <swiper :options="swiperOptionLesson" class="lesson-sw" ref="mySwiperLesson">
          <swiper-slide v-for="(item,x) in hpLessonList" :key="x" style="width: 50vh">
            <div class="lesson-content-hp" @click="showDia(item)">
              <div class="clock-hp" v-if="item.push_time === '0000-00-00'">
                等待开课
              </div>
              <div class="lesson-day-hp">{{item.dayText}}</div>
              <div class="lesson-img-hp"><img :src="item.cover"></div>
              <div class="lesson-name-hp">
                {{item.sub_title}}
              </div>
              <div class="star-block">
                <img class="star-img" :src="star_act" v-for="s in item.star_num">
                <img class="star-img" :src="star_def" v-for="s in 3-item.star_num">
              </div>
              <i class="map money" v-if="item.push_time !== '0000-00-00' && ((hpLessonList[x+1] && hpLessonList[x+1].push_time === '0000-00-00' ||  ($route.query.course_type == 0 &&  findUnit(parent_category_id) && findUnit(parent_category_id).status === 2 || $route.query.course_type ==1 ) && x===hpLessonList.length-1 ))"></i>
            </div>
          </swiper-slide>
      </swiper>
    </div>
    <guide-content v-if="popupVisible && thisLesson"/>
    <mt-popup
      v-model="popupVisible" style="background: transparent">
      <div v-if="thisLesson" class="popup-block">
        <i class="map close" @click="popupVisible=false"></i>
        <div class="header" :style="{backgroundImage:`url(${diaBGI})`}">
          <div class="title">
            {{thisLesson.title}}
          </div>
          <div class="tips" v-if="thisLesson.content.tips">
            {{thisLesson.content.tips.content}}
          </div>
          <div class="tips" v-if="!thisLesson.content.tips">
            DAY {{thisLesson.day}}
          </div>
        </div>
        <div class="content" v-if="thisLesson.content.tips">
          <div class="tips-title">{{thisLesson.content.tips.title1}}</div>
          <div class="title-content">
            <ul>
              <li style="text-align: center" v-for="data in splitContent">{{data}}</li>
            </ul>
          </div>
          <div class="tips-title">{{thisLesson.content.tips.title2}}</div>
          <div class="title-content">{{thisLesson.content.tips.title2_content}}</div>
        </div>

        <div class="content" v-if="!thisLesson.content.tips">
          <div style="color: #cccccc;padding: 21.3333vw 0;font-size: 5.3333vw;">快去开始课程吧!</div>
        </div>
        <div>
          <i class="map goLesson" @click="goDetail()"></i>
        </div>
      </div>
    </mt-popup>
    <bottom-tab></bottom-tab>
    <guide-page></guide-page>
  </div>
</template>

<script>
  import {getCourseListApi,getLessonDetailApi,getLessonListApi} from "../../service/api";
  import star_act from '../../assets/newLesson/star_act.png'
  import star_def from '../../assets/newLesson/star_def.png'
  import guidePage from '../guide/map'
  import guideContent from '../guide/content'
  import diaBGI from '../../assets/newLesson/diaBG.png'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import {Indicator,Toast} from 'mint-ui'
  import bottomTab from '../public/bottomTab';
  import errorURL from '../../assets/error.png'
  import nextUnitUrl from '../../assets/newLesson/nextUnit.png'
  import nextToURL from '../../assets/newLesson/index-to.png'
  export default {
    name: "mapDefault",
    components:{
      swiper,
      swiperSlide,
      bottomTab,
      guidePage,
      guideContent
    },
    data() {
      let that = this;
      return {
        star_act:star_act,
        star_def:star_def,
        shopType:this.$route.query.course_type,
        diaBGI:diaBGI,
        goodsID:'',
        themeName:'',
        course_id:'',
        push_time:'',
        course_name:'',
        nextUnitUrl:nextUnitUrl,
        periods_id:this.$route.query.periods_id,
        parent_category_id:this.$route.query.parent_category_id,
        unitList:[],
        more:false,
        errorURL:errorURL,
        popupVisible:false,
        lessonList:[],
        lesson:'',
        classID:'',
        noLesson:false,
        nextToURL:nextToURL,
        hpLessonList:[],
        thisLesson:null,
        swiperOption: {
          width: window.innerWidth * 0.25,
          on: {
            slideChangeTransitionStart: function(){
              if(this.activeIndex >= that.swiper.slides.length - 4  && that.more){
                that.swiper.slidePrev();
              }
            },
            resize: function () {
              this.params.width = window.innerWidth * 0.25;
              this.update(true);
            }
          },
          pagination: {
            el: '.swiper-pagination'
          }
        },
        swiperOption2: {
          slidesPerView:5,
          navigation: {
            nextEl: '.banner-right',
            prevEl: '.banner-left',
          },
          on: {
            slideChangeTransitionStart: function(){
              if(this.activeIndex == that.swiper2.slides.length - 5  && that.more){
                that.swiper2.slidePrev();
              }
            },
          },
          pagination: {
            el: '.swiper-pagination'
          }
        },
        swiperOptionLesson:{
          slidesPerView:'auto',
          spaceBetween : 20,
        }
      }
    },
    mounted(){
      this.initPage();
    },
    filters:{
      substr10(value){
        return value.substr(0,10)
      }
    },
    computed: {
      swiper() {
        if(this.$route.query.course_type == 0){
          return this.$refs.mySwiper.swiper
        }else {
          return ''
        }
      },
      swiper2() {
        if(this.$route.query.course_type == 0){
          return this.$refs.mySwiper2.swiper
        }else {
          return ''
        }
      },
      swiperLesson() {
          return this.$refs.mySwiperLesson.swiper
      },
      splitContent(){
        let arr = [];
        if(this.thisLesson.content.tips.title1_content){
          arr = this.thisLesson.content.tips.title1_content.split('\n');
        }
        return arr
      },
    },
    methods:{
      findUnit(data){
        return this.unitList.find(i=>{return i.category_id == data})
      },
      dateParse(dateString){
        var SEPARATOR_BAR = "-";
        var SEPARATOR_SLASH = "/";
        var SEPARATOR_DOT = ".";
        var dateArray;
        if(dateString.indexOf(SEPARATOR_BAR) > -1){
          dateArray = dateString.split(SEPARATOR_BAR);
        }else if(dateString.indexOf(SEPARATOR_SLASH) > -1){
          dateArray = dateString.split(SEPARATOR_SLASH);
        }else{
          dateArray = dateString.split(SEPARATOR_DOT);
        }
        return new Date(dateArray[0], dateArray[1]-1, dateArray[2]);
      },
      dateCompare(compareDateString){
        var dateTime = new Date().getTime();
        var compareDateTime = compareDateString.getTime();
        if(compareDateTime > dateTime){
          return 1;
        }else if(compareDateTime == dateTime){
          return 0;
        }else{
          return -1;
        }
      },
      // 进入课程
      goDetail(){
        // 神策埋点 开始课程
        this.$sa.track('StartCourse',{
          elementID:this.thisLesson.id.toString(),
          elementName:this.thisLesson.title,
          themeID:this.parent_category_id,
          themeName:this.themeName,
          goodsID:this.goodsID,
          classID:this.classID,
          is_view_today:!!new Date().setHours(0, 0, 0, 0) ===  new Date(this.push_time).setHours(0, 0, 0, 0)
        });
        if(this.thisLesson.content.tips){
          let query = {
            periods_id:this.periods_id,
            category_id:this.thisLesson.categoryId,
            elementId:this.thisLesson.id,
            course_type:this.$route.query.course_type,
            parent_category_id:this.parent_category_id,
          };
          let lessonData = JSON.parse(JSON.stringify(this.thisLesson));
          lessonData.push_time = this.push_time;
          lessonData.themeID=this.parent_category_id;
          lessonData.themeName=this.themeName;
          lessonData.goodsID=this.goodsID;
          lessonData.classID=this.classID;
          localStorage.setItem('lessonDetail',JSON.stringify(lessonData));
          this.thisLesson.nowTime = Date.parse(new Date());
          localStorage.setItem('lessonDetail',JSON.stringify(this.thisLesson));
          this.$router.push({name:'newLesson',query:query})
        }else{
          let query = {
            periods_id:this.periods_id,
            category_id:this.thisLesson.categoryId,
            parent_category_id:this.parent_category_id,
            element_id:this.thisLesson.id,
            course_type:this.$route.query.course_type,
            type:'1'
          };
          this.$router.push({name:'lesson',query:query})
        }
      },
      // 切换主题
      changeCateGory(data,flag){
        // 神策埋点 选择主题
        this.themeName=data.category_name.toString()
        this.$sa.track('selectCategory',{
          themeID:data.category_id.toString(),
          themeName:data.category_name.toString(),
          courseID:this.course_id.toString(),
          goodsID:this.goodsID,
          classID:this.classID
        });
        if(!flag){
          this.parent_category_id = data.category_id;
          this.$router.push({name:'map',query:{periods_id:this.periods_id,course_type:this.shopType,parent_category_id: this.parent_category_id}});
          this.getLessonList(true)
        }
      },
      // 显示课程弹窗
      showDia(data,i){
        if(data.push_time !== '0000-00-00'){
          getLessonDetailApi(this.periods_id,data.id,data.ele_id).then(res=>{
            res.content = JSON.parse(res.content);
            this.thisLesson = res;
            this.thisLesson.id = data.ele_id.toString();
            this.thisLesson.categoryId = data.id;
            this.thisLesson.domTitle = data.name;
            this.thisLesson.day = i;
            this.thisLesson.star_num = data.star_num;
            this.popupVisible=true;
            this.push_time = data.push_time;
            // 神策埋点 选择课时
            this.$sa.track('selectElement',{
              elementID:data.ele_id.toString(),
              elementName:data.name.toString(),
              themeID:this.parent_category_id.toString(),
              themeName:this.parent_category_id.toString(),
              goodsID:this.goodsID,
              classID:this.classID,
              courseID:this.course_id.toString()
            });
          })
        }else{
          Toast('课程还未开始哦')
        }
      },
      // 页面初始化
      initPage(){
        this.getLessonList();
        if (this.$route.query.course_type == 0){
          this.getUnitList()
        }
      },
      // 获取列表
      getUnitList(){
        getCourseListApi(this.periods_id).then(res=>{
          this.unitList = [];
          res.forEach(i=>{
            if(i.status === 1 || i.status === 2 ){
              this.unitList.push(i)
            }
          });
          if(res.find(i=>{return i.status === 0})){
            this.more = true
          }
          this.$nextTick(()=>{
            let index=null;
            let index2 = null;
            this.unitList.forEach((i,x)=>{
              if(i.category_id ==this.parent_category_id){
                this.themeName = i.category_name;
                if(x>=3){
                  index=x-3
                }else{
                  index = 0
                }
                if(x>=4){
                  index2 = x-4
                }else{
                  index2 = 0
                }
              }
            });
            this.swiper.slideTo(index, 800, false);
            this.swiper2.slideTo(index2, 800, false)
          })
        })
      },
      // 获取课程
      getLessonList(data){
        getLessonListApi(this.periods_id+'/v2',{category_id:this.parent_category_id}).then(res=>{
          if(this.course_id !== res.periods_info.course_id){
            this.course_id = res.periods_info.course_id;
            this.course_name = res.periods_info.title;
            this.goodsID=res.periods_info.goods_id;
            this.classID = res.periods_info.class_id;
            // 神策埋点 进入课程
            this.$sa.track('EnterCourse',{
              goodsID:res.periods_info.goods_id,
              classID:res.periods_info.class_id,
            });
          }
          this.lessonList=[];
          this.hpLessonList = [];
          this.noLesson = !!res.list.length<1;
          let list = [];
          let x = 0;
          for(let i = 0; i < res.list.length; i ++ ){
            if(res.list[i].push_time !== '0000-00-00'){
              x++
            }
           if(res.list[i].name.indexOf('Day1')>-1 && list.length > 0){
             this.lessonList.push(list);
             list = [];
             list.push(res.list[i]);
           }else{
             list.push(res.list[i]);
             if(i==res.list.length-1){
               this.lessonList.push(list);
             }
           }
           res.list[i].dayText = 'DAY '+list.length;
            this.hpLessonList.push(res.list[i])
          }
          if(!data){
            this.$nextTick(()=>{
              if(x !== this.hpLessonList.length){
                this.swiperLesson.slideTo(x-1)
              }else if(this.$route.query.category_id){

              }
              if(this.$route.query.category_id){
                let dom = document.getElementsByClassName('cid'+this.$route.query.category_id);
                if(dom.length>0 && dom[0].style.display !== 'none'){
                  this.scroll_to(dom[0].offsetTop);
                  let data = null ;
                  let index = 0;
                  this.lessonList.forEach(i=>{
                    i.forEach((x,i)=>{
                      if(x.id == this.$route.query.category_id){
                        data = x;
                        index = i+1
                      }
                    })
                  });
                  this.showDia(data,index)
                }
              }else if(this.$route.query.back_id){
                let dom = document.getElementsByClassName('cid'+this.$route.query.back_id);
                if(dom.length>0&& dom[0].style.display !== 'none'){
                  this.scroll_to(dom[0].offsetTop)
                }
              }else{
                let moneyDom = document.getElementsByClassName('money');
                if(moneyDom.length>0 && moneyDom[0].offsetLeft !== 0){
                  this.scroll_to(moneyDom[0].offsetParent.offsetTop)
                }
              }
            })
          }else{
            this.scroll_to(0);
            this.swiperLesson.slideTo(0)
          }
        });
      },
      scroll_to(offsetTop){
        let top = offsetTop-200;
        for(let i = 0 ; i < 30 ; i ++){
          let scrollTop = document.documentElement.scrollTop | document.body.scrollTop;
          let Dvalue = scrollTop - top;
          let time = i*10;
          setTimeout(()=>{
            document.documentElement.scrollTop = scrollTop - Dvalue/30*i;
            document.body.scrollTop=  scrollTop - Dvalue/30*i;
          },time);
        }
      }
    }
  }
</script>
<style scoped lang="less">
  @import "../../util/public";
  // 精灵图
  .map{background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/map.png')  no-repeat;background-size:136*@toVw 207*@toVw}
  .defultStar{height:20*@toVw;width:20*@toVw;background-position:0 0;;display: inline-block}
  .right{height:20*@toVw;width:20*@toVw;background-position:0 -20*@toVw;display: inline-block}
  .close{position:absolute;top:-11*@toVw;right: -32*@toVw ;height:20*@toVw;width:20*@toVw;background-position:0 -40*@toVw;display: inline-block}
  .actStar{height:20*@toVw;width:20*@toVw;background-position:0 -60*@toVw;display: inline-block}
  .clock{height:28*@toVw;width:28*@toVw;background-position:0 -80*@toVw;display: inline-block}
  .money{height:40*@toVw;width:40*@toVw;background-position:0 -108*@toVw;display: inline-block;animation: dodge 1s infinite;}
  .goLesson{height:59*@toVw;width:136*@toVw;background-position:0 -148*@toVw;display: inline-block;margin-top:15*@toVw;margin-bottom: 10*@toVw }
  // 主题列表
  .noLesson{
    margin: 20*@toVw;
    text-align: center;
    img{
      width: 80%;
    }
  }
  .btn-conntent{
    display: none;
  }
  .line{
    position: absolute;
    right: 0;
    width: 1px;
    background: #eeeeee;
    top: 15*@toVw;
    bottom: 15*@toVw;
  }
  .lesson-block-hp{
    display: none;
  }
  .unit-block{
    box-shadow:0*@toVw 1*@toVw 4*@toVw 0*@toVw rgba(204,204,204,0.5);
    width: 100%;
    position: fixed;
    background: white;
    z-index: 2;
    top: 0;
    left: 0;
    .banner2{
      display: none;
    }
    .unit-li{
      width: 68 * @toVw;
      text-align: center;
      margin-top: 2.6666vw;
      height:60 * @toVw;
      border-radius:8 * @toVw 8 * @toVw  0*@toVw 0*@toVw;
      font-size:12* @toVw;
      font-family:PingFangSC-Semibold;
      font-weight:600;
      padding-top: 12 * @toVw;
      color:rgba(102,102,102,1);
      line-height:20* @toVw;
      img{
        width: 28*@toVw;
        height: 28*@toVw;
      }
      &.active{
        background: #60ADF0;
        color: #ffffff;
      }
    }
  }
  // 课包样式
  .lesson-block{
    width: 100%;
    margin-top: 80*@toVw;
    padding-bottom: 50*@toVw;
    overflow: auto;
    -webkit-overflow-scrolling:touch;
    .card-block{
      box-shadow:0* @toVw 2* @toVw 5* @toVw 1* @toVw rgba(153,153,153,0.56);
      margin: 20 * @toVw;
      border-radius: 8*@toVw;
      img{
        width: 100%;
        height: 140 *@toVw;
        border-radius: 8*@toVw 8*@toVw 0 0 ;
      }
      .card-li{
        display: flex;
        justify-content: space-between;
        margin: auto;
        padding: 10 * @toVw;
        position: relative;
        border-bottom: 1 * @toVw solid #EEEEEE;
        .text-block{
          margin-left: 0;
        }
        .star-block{
          img{
            width: 20*@toVw;
            height: 20*@toVw;
            margin-left: 3*@toVw;
          }
        }
        .icon-block{
          margin: auto 0;
          width: 30*@toVw;
          text-align: center;
        }

        .clock-block{
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background: rgba(255,255,255,0.8);
          text-align: center;
          font-size:12*@toVw;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(153,153,153,1);
          padding: 10*@toVw;
        }
        .title{
          font-size:16*@toVw;
          font-family:PingFangSC-Semibold;
          font-weight:600;
          color:rgba(0,0,0,1);
          line-height:28*@toVw;

        }
        .tips{
          font-size:14*@toVw;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          min-width: 170 * @toVw;
          overflow: hidden;
          white-space:nowrap;
          text-overflow:ellipsis;
          color:rgba(102,102,102,1);
          line-height:20*@toVw;
        }
      }
    }
  }
  // 弹窗样式
  .popup-block{
    text-align: center;
    background: white;
    border-radius: 8*@toVw;
    width: 276 * @toVw;
    .header{
      width: 276 * @toVw;
      height: 137 * @toVw;
      padding-top: 36 * @toVw;
      background-size: 100% 100%;
      position: relative;
      .title{
        text-align: center;
        font-size:24*@toVw;
        font-family:Helvetica-Bold;
        font-weight:bold;
        padding: 0 20*@toVw;
        color:rgba(255,255,255,1);
        line-height:26*@toVw;
      }
      .tips{
        width:92*@toVw;
        height:36*@toVw;
        background: rgba(0,0,0,0.2);
        text-align: center;
        border-radius: 4*@toVw;
        position: absolute;
        left: 50%;
        margin-left: -46*@toVw;
        bottom: 20*@toVw;
        line-height: 36 * @toVw;
        font-size:16*@toVw;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        color:rgba(255,255,255,1);
      }
    }
    .content{
      padding-top: 14*@toVw;
      .tips-title{
        height:25*@toVw;
        width: fit-content;
        margin: 12*@toVw auto 10*@toVw auto;
        font-size:16*@toVw;
        font-family:PingFangSC-Semibold;
        font-weight:600;
        color:rgba(145,237,250,1);
        line-height:25*@toVw;
        display: block;
        border-radius: 1000*@toVw;
        padding: 3*@toVw 18*@toVw;
        border: 2*@toVw solid #91EDFA;
      }
      .title-content {
        word-break: break-all;
        padding: 0 18*@toVw;
        font-size: 14*@toVw;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: #666666;
        line-height: 17*@toVw;
        ul{
          margin: 0;
          padding: 0;
          font-size:14*@toVw;
          height:58*@toVw;
          overflow: hidden;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(102,102,102,1);
          line-height:20*@toVw;
          list-style-type:none;
          &:after{
            content: '';
            display: block;
            clear: both;
          }
          li{
            width: 50%;
            float: left;
            text-align: left;
          }
        }
      }
    }
  }


  @media screen and (orientation: landscape) {
    @toVw:100/667vw;
    .map{background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/map.png')  no-repeat;background-size:136*@toVw 207*@toVw}
    .defultStar{height:20*@toVw;width:20*@toVw;background-position:0 0;;display: inline-block}
    .right{height:20*@toVw;width:20*@toVw;background-position:0 -20*@toVw;display: inline-block}
    .close{position:absolute;top:-11*@toVw;right: -32*@toVw ;height:20*@toVw;width:20*@toVw;background-position:0 -40*@toVw;display: inline-block}
    .actStar{height:20*@toVw;width:20*@toVw;background-position:0 -60*@toVw;display: inline-block}
    .clock{height:28*@toVw;width:28*@toVw;background-position:0 -80*@toVw;display: inline-block}
    .money{height:40*@toVw;width:40*@toVw;background-position:0 -108*@toVw;display: inline-block;animation: dodgehp 1s infinite;}
    .goLesson{height:59*@toVw;width:136*@toVw;background-position:0 -148*@toVw;display: inline-block;margin-top:15*@toVw;margin-bottom: 10*@toVw }
    // 主题列表
    .noLesson{
      margin: 20*@toVw;
      text-align: center;
      img{
        width: 80%;
      }
    }
    .line{
      position: absolute;
      right: 0;
      width: 1px;
      background: #eeeeee;
      top: 15*@toVw;
      bottom: 15*@toVw;
    }

    .lesson-block-hp{
      display: block;
    }
    .unit-block{
      box-shadow:0*@toVw 1*@toVw 4*@toVw 0*@toVw rgba(204,204,204,0.5);
      width: 100vw;
      position: fixed;
      background: white;
      z-index: 2;
      top: 0;
      left: 0;
      .banner{
        display: none;
      }
      .btn-conntent{
        position: absolute;
        display: block;
        height: 48*@toVw;
        text-align: center;
        line-height: 55*@toVw;
        width: 20*@toVw;
        &.banner-right{
          img{transform: rotate(180deg)}
          top: 0;
          right: 5*@toVw;
        }
        &.banner-left{
          top: 0;
          left: 5*@toVw;
        }
      }
      .banner2{
        display: block;
        width: 90vw;
      }
      .unit-li{
        display: flex;
        text-align: center;
        height:38 * @toVw;
        line-height: 38*@toVw;
        border-radius:8 * @toVw;
        font-size:12* @toVw;
        font-family:PingFangSC-Semibold;
        font-weight:600;
        padding-top:0;
        margin: 5*@toVw;
        width: auto;
        color:rgba(102,102,102,1);
        img{
          width: 28*@toVw;
          height: 28*@toVw;
        }
        &.active{
          background: #60ADF0;
          color: #ffffff;
        }
      }
    }
    // 课包样式
    .lesson-block{
      display: none;
    }
    .lesson-block-hp{
      padding-top: 55*@toVw;
      background: #eeeeee;
      .lesson-content-hp{
        .money{
          position: absolute;
          right: 0;
          top:  calc(88vh - 20.99550225vw);
        }
        .star-block{
          img{
            width: 20*@toVw;
            height: 20*@toVw;
            margin-left: 3*@toVw;
          }
        }
        display: inline-block;
        width: 100%;
        position: relative;
        margin: 0 5*@toVw;
        background: white;
        box-shadow:0*@toVw 2*@toVw 4*@toVw 0*@toVw rgba(0,0,0,0.2);
        height: calc(100vh - 13.29550225vw);
        border: 1*@toVw solid #000;
        border-radius: 8*@toVw;
        text-align: center;
        .clock-hp{
          position: absolute;
          font-size: 12*@toVw;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(255,255,255,0.8);
          border-radius: 8*@toVw;
          line-height: calc(100vh - 13.29550225vw);

        }
        .lesson-day-hp{
          margin-top: 10*@toVw;
          width: 72*@toVw;
          border-radius: 4*@toVw;
          border: 1*@toVw solid #000;
          height: 24*@toVw;
          line-height: 24*@toVw;
          font-size:14*@toVw;
          font-family:PingFang-SC-Bold;
          font-weight:bold;
          color:rgba(0,0,0,1);
        }
        .lesson-img-hp{
          margin: calc((100vh - 23.99550225vw) / 2 - 12vh) auto;
          width: 20vh;
          height: 20vh;
          border-radius: 100*@toVw;
          overflow: hidden;
          img{
            height: 100%;
          }
        }
        .lesson-name-hp{
          font-size:12*@toVw;
          font-family:PingFang-SC-Medium;
          max-height: 24*@toVw;
          line-height: 12*@toVw;
          overflow: hidden;
          font-weight:500;
          color:rgba(0,0,0,1);
        }
      }
    }
    // 弹窗样式
    .popup-block{
      text-align: center;
      background: white;
      border-radius: 8*@toVw;
      width: 493 * @toVw;
      height: 220*@toVw;
      position: relative;
      .header{
        position: absolute;
        height: auto;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 0;
        margin: 0;
        width: 215*@toVw;
        background-size: 100% 100%;
        .title{
          margin-top: 10*@toVw;
          text-align: center;
          font-size:24*@toVw;
          font-family:Helvetica-Bold;
          font-weight:bold;
          padding: 0 20*@toVw;
          color:rgba(255,255,255,1);
          line-height:26*@toVw;
        }
        .tips{
          width:92*@toVw;
          height:36*@toVw;
          background: rgba(0,0,0,0.2);
          text-align: center;
          border-radius: 4*@toVw;
          position: absolute;
          left: 50%;
          margin-left: -46*@toVw;
          top: 50*@toVw;
          line-height: 36 * @toVw;
          font-size:16*@toVw;
          font-family:PingFang-SC-Bold;
          font-weight:bold;
          color:rgba(255,255,255,1);
        }
      }
      .content{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 278*@toVw;
        padding: 0;
        .tips-title{
          height:25*@toVw;
          width: fit-content;
          margin: 12*@toVw auto 10*@toVw auto;
          font-size:16*@toVw;
          font-family:PingFangSC-Semibold;
          font-weight:600;
          color:rgba(145,237,250,1);
          line-height:25*@toVw;
          display: block;
          border-radius: 1000*@toVw;
          padding: 3*@toVw 18*@toVw;
          border: 2*@toVw solid #91EDFA;
        }
        .title-content {
          word-break: break-all;
          padding: 0 18*@toVw;
          font-size: 14*@toVw;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: #666666;
          line-height: 17*@toVw;
          ul{
            margin: 0;
            padding: 0;
            font-size:14*@toVw;
            height:58*@toVw;
            overflow: hidden;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(102,102,102,1);
            line-height:20*@toVw;
            list-style-type:none;
            &:after{
              content: '';
              display: block;
              clear: both;
            }
            li{
              width: 50%;
              float: left;
              text-align: left;
            }
          }
        }
      }
      .goLesson{
        position: absolute;
        right: 40*@toVw;
        bottom: 10*@toVw;
      }
    }
  }
  @keyframes dodge
  {
    0%{
      transform:scale(0.9,0.9)
    }
    50%{
      transform:scale(1.1,1.1)
    }
    100%{
      transform:scale(0.9,0.9)
    }
  }
  @keyframes dodgehp
  {
    0%{
      transform:scale(0.5,0.5)
    }
    50%{
      transform:scale(0.7,0.7)
    }
    100%{
      transform:scale(0.5,0.5)
    }
  }
</style>