<template>
<!-- <scroll
    class="wrapper"
    :pullup="true"
    :bounce="false"
    @pullup="onReachBottom"
  > -->
  <div class="index">
    <div class="padTop">
      <div class="banner-block" >
        <div class="unBanner" ref="toShopD" @click="toShop()" v-if="userCourse.goods_id!=null&&userCourse.goods_id>0">
          <img class="bgimg" :src="imgUrl.indexBanener1" alt="">
          <div class="content">
            <div class="title">
              <p class="title1" >唱唱启蒙英语</p>
              <p class="title2" >{{bannerData.course_title}}</p>
            </div>
            <div class="date" >
              <p class="date1" style="text-decoration:line-through;">原价：{{bannerData.original_price/100}}元</p>
              <p class="date2" >限时{{bannerData.current_price/100}}元领取</p>
            </div>
            <div class="triangle">
              <span >专属福利</span>
            </div>
          </div>
        </div>
        <div class="Banner" id="capture33" v-if="userCourse.start_periods_id!=null">
          <img class="bgimg" :src="imgUrl.indexBanener2" alt="">
          <div class="content" >
            <img class="qr" :src="bannerData.qr" alt="">
            <div class="text">
              <p>请扫码添加客服班主任</p>
              <p>领取学习资料</p>
            </div>
            <div class="date" v-if="bannerData.active_start_at">
              <p>开课时间：{{bannerData.start_at}}</p>
              <p v-if="bannerData.active_start_at">全勤打卡活动开始时间：{{bannerData.active_start_at}}</p>
            </div>
            <div class="data_only" v-if="!bannerData.active_start_at">
              <p>开课时间：{{bannerData.start_at}}</p>
            </div>
          </div>
          <div class="triangle">
              <span v-if="bannerData.start_periods_id>0">已开课</span>
              <span v-if="bannerData.start_periods_id==0">待开课</span>
          </div>
          <img class="bgimg canvas"  v-if="canvasData" :src="canvasData" alt="">
        </div>
      </div>
      <div class="btn-block">
        <div class="btn toPreview" ref="preview" @click="toPreview">
          <div v-if="!unlook" class="nolook">1</div>
          <!-- <img alt="课前预习" :src="imgUrl.nindexBtn3"> -->
        </div>
        <div class="btn toBbda" ref="bbda" v-if="!userCourse.is_start_active" @click="toBbda($event)">
          <!-- <img alt="宝宝档案" :src="imgUrl.nindexBtn2"> -->
        </div>
        <div class="btn toCollection" ref="collection" v-if="userCourse.is_start_active==1" @click="toCollection">
          <!-- <img alt="收藏夹" :src="imgUrl.nindexBtn1"> -->
        </div>
        <div class="btn toTeacher" ref="teacher" @click="toTeacher">
          <!-- <img alt="名师介绍" :src="imgUrl.nindexBtn4"> -->
        </div> 
      </div>
      <div class="orderBox" v-if="orderList&&orderList.length" >
        <div class="item groupItem" ref="groupItem" v-for="(data,index) in orderList"   @click="goDetail(index)">
          <div class="top">
            <img :src="data.goods_desc.img[0].url" alt="">
            <div class="info">
              <h3>{{data.goods_name}}</h3>
              <p>还差<span>{{data.group_info.diff_size}}人</span>拼团成功</p>
              <p>剩余拼团时间&nbsp;&nbsp;<span>{{countTime}}</span></p>
            </div>
          </div>
          <div class="line"></div>
          <div class="bottom">
            <span class="text">*拼团成功后即可获取课程</span>
            <span class="btn">去邀请</span>
          </div>
        </div>
        <div class="shadow" v-if="!pt&&orderList.length" @click="pt=true" ></div>
        <div class="imgbox groupItem" ref="groupIcon" v-if="!pt&&orderList.length" @click="goDetail(0)" >
          <div class="text">
            快去邀请好友完成拼团吧~
          </div>
          <img :src="imgUrl.img_title" alt="">
        </div>
      </div>
    </div>
    <div class="contentBox med" v-if="medList.length>0">
      <div class="commonTitle">
        <span class="line"></span>
        <span class="title">磨耳朵</span>
        <span class="tip">每天10分钟 成长看得见</span> 
        <div @click="toHear" ref="med" class="more med">更多 <i class="iconfont icon-youjiantou"></i> </div>
      </div>
      <div class="content">
        <div class="contentItem med" ref="meditem" v-for="(item,index) in medList"  @click="goMed(index)">
          <img :src="item.url" alt="">
          <div class="white"></div>
          <div class="text">
            <div class="title">{{item.title}}</div>
            <div class="enTitle">{{item.sub_title}}</div>
            <div class="lookData"><i class="iconfont icon-yanjing"></i>{{item.watch_num}}人</div>
          </div>
        </div>
      </div>
    </div>
    <div class="contentBox qm"  v-if="qmList.length>0" >
      <div class="commonTitle">
        <span class="line"></span>
        <span class="title">启蒙小课堂</span>
        <span class="tip">名师手把手，爸妈小帮手</span> 
        <a v-if="!bannerData.active_start_at" href="https://appanqlfkth3717.h5.xiaoeknow.com/homepage/10" class="more qm">更多 <i class="iconfont icon-youjiantou"></i> </a>
        <a v-if="bannerData.active_start_at" href="https://appaNQLfktH3717.h5.xiaoeknow.com/content_page/eyJ0eXBlIjozLCJyZXNvdXJjZV90eXBlIjo4LCJyZXNvdXJjZV9pZCI6IiIsInByb2R1Y3RfaWQiOiJwXzVjYjQyMDgzYTA2NDNfMXF0OUFGbnoiLCJhcHBfaWQiOiJhcHBhTlFMZmt0SDM3MTcifQ" class="more qm">更多 <i class="iconfont icon-youjiantou"></i> </a>
      </div>
      <div class="content">
        <div class="contentItem qm" ref="qmitem" v-for="item in qmList" @click="goLink(item.link,'qm')">
          <img  :src="item.url"  alt="">
          <div class="text">
            <div class="title">{{item.title}}</div>
            <div class="line"></div>
            <div class="enTitle">{{item.sub_title}}</div>
            <div class="lookData"><i class="iconfont icon-yanjing"></i>{{item.watch_num}}人</div>
          </div>
        </div>
      </div>
    </div>
    <div class="contentBox mxxy" v-if="mxxyList.length>0">
      <div class="commonTitle">
        <span class="line"></span>
        <span class="title">明星学员</span>
        <span class="tip">百万家庭力荐</span> 
        <a href="https://mp.weixin.qq.com/mp/homepage?__biz=MzU2ODM5NjA5OA==&hid=4&sn=bb876d6313345925e86913bfe42671c6" class="more mxxy">更多 <i class="iconfont icon-youjiantou"></i> </a>
      </div>
      <div class="content">
        <div class="contentItem mxxy" ref="mxxyitem" v-for="item in mxxyList" @click="goLink(item.link,'mxxy')">
          <img v-lazy="item.url" alt="">
          <div class="text">
            <div class="title">{{item.title}}</div>
            <!-- <div class="lookData"><i class="iconfont icon-yanjing"></i>{{item.watch_num}}人</div> -->
          </div>
          <div class="tip">{{item.sub_title}}</div>
        </div>
      </div>
    </div>
    <audio-page ref="audioPage" v-if="showObj.audio.length>0"  sc="1" v-show="showObj.show" :showObj="showObj"/>
      <bottom-tab ref="bottomTab"></bottom-tab>
  </div>
  
<!-- </scroll> -->
</template>

<script>
import {
  bannerListApi,
  getUserLessonApi,
  getTeacherApi,
  getCourseInfoApi,
  getOrderListApi
} from "../service/api";
import { IndexImage } from "../util/imgUrl";
import bottomTab from "./public/bottomTab";
import commom from "../util/common";
import audioPage from './collection/audio'
import html2canvas from 'html2canvas'
import { Toast } from 'vant';
export default {
  name: "index",
  components: {
    bottomTab,
    audioPage
  },
  data() {
    let that = this;
    return {
      pt:false,
      countTime:'00:00:00',
      orderList:[],
      bannerList: [],
      teacherQ2: false,
      teacherDetail: null,
      imgUrl: IndexImage,
      user_id: null,
      newUrl: "",
      lessonList:[],
      medList:[],
      qmList:[],
      mxxyList:[],
      userCourse:{
        // start_periods_id:'-1'
      },
      bannerData:{
        qr:"",
        start_at:'',
        active_start_at:'',
        is_start_active:''
      },
      showObj:{
        audio:[],
        audioIndex:0,
        show:false
      },
      unlook:false,
      canvasData:'1'
    };
  },
  created() {
    // console.log(this.imgUrl)
    this.initPage();
    Toast.loading({
          mask: true,
          message: ''
        });
  },
  mounted() {
     window.scrollTo(0,0);
    this.unlook = localStorage.getItem('unlook');
    this.pt = sessionStorage.getItem('pt');
  },
  methods: {
    goDetail(index){
      this.$sa.quick('trackHeatMap',this.$refs.groupItem)
      this.$sa.quick('trackHeatMap',this.$refs.groupIcon)
          this.$router.push({
            name: 'success',
            query:{
              out_trade_no:this.orderList[index].out_trade_no
            }
          });
          sessionStorage.setItem('pt',true);
    },
    onReachBottom(){
    },
    toShop(){
      this.$sa.quick('trackHeatMap',this.$refs.toShopD)
      this.$router.push({name:'buyDetail', query: {
         shopId: this.bannerData.goods_id,
         invite_code: this.bannerData.invite_code,
        }},
     )
    },
    goMed(index){
      this.$sa.quick('trackHeatMap',this.$refs.meditem[index])
      // debugger
      this.showObj.audioIndex = index;
      this.showObj.show = true
      this.$refs.audioPage.onPlay()
    },
    goLink(link,word){
      if(word=='qm'){
        console.log(this.$refs.qmitem)
        this.$sa.quick('trackHeatMap',this.$refs.qmitem)
        // debugger
        if(this.bannerData.active_start_at){
          window.location.href = 'https://appaNQLfktH3717.h5.xiaoeknow.com/content_page/eyJ0eXBlIjozLCJyZXNvdXJjZV90eXBlIjo4LCJyZXNvdXJjZV9pZCI6IiIsInByb2R1Y3RfaWQiOiJwXzVjYjQyMDgzYTA2NDNfMXF0OUFGbnoiLCJhcHBfaWQiOiJhcHBhTlFMZmt0SDM3MTcifQ'
        }else{
          // debugger
          window.location.href = link
        }
      }else{
        // debugger
        this.$sa.quick('trackHeatMap',this.$refs.mxxyitem)
        window.location.href = link
      }
      // qmitem
    },
    getBannerListApi() {
      this.medList=[]
      let json = {
          limit: 4,
          page: 1
        };
      bannerListApi(2,{limit: 99,page: 1}).then(res=>{
        for(let i=0;i<4;i++){
          this.medList.push(res.list[i])
        }
        // this.medList = res.list
        this.showObj.audio = res.list
        bannerListApi(4,json).then(res=>{
        this.mxxyList = res.list
       })
      })
      bannerListApi(3,{limit:2,page:1}).then(res=>{
        this.qmList = res.list
      })
      Toast.clear()
    },
    initPage() {
      // sessionStorage.
      getCourseInfoApi().then(res =>{
        localStorage.setItem('userCourse','');
        let is_view_course = "没有课程";
        if (res.start_periods_course_type) {
          if(res.start_periods_course_type==0){
            is_view_course = "正式课";
          }else{
            is_view_course = "体验课";
          }
        }
        this.$sa.track("viewHomepage", {
          is_view_course: is_view_course
        });
        // debugger
        this.getBannerListApi()
        if(res.goods_id&&!res.automation_id){
          // 无课
            this.userCourse = Object.assign({},res)
            // this.userCourse.start_periods_id='-1'
            localStorage.setItem('userCourse',JSON.stringify(this.userCourse));
            this.bannerData = res
            this.$refs.bottomTab.setBtn()
        }else{
          if(res.start_periods_id!=undefined&&res.start_periods_id>0){
            // debugger
            // 已开课
            if(res.teacher_qr){
              this.bannerData.qr = res.teacher_qr
            }
            this.bannerData.start_at = res.periods_list[0].start_at
            this.bannerData.active_start_at = res.periods_list[0].active_start_at
            this.bannerData.is_start_active = res.is_start_active
            this.bannerData.start_periods_id = res.start_periods_id
            this.userCourse = Object.assign({},res)
            localStorage.setItem('userCourse',JSON.stringify(this.userCourse));
            this.$refs.bottomTab.setBtn()
            //  debugger
             if(!sessionStorage.getItem('frist')&&this.bannerData.is_start_active){
               sessionStorage.setItem('frist',true)
               this.$router.push({
                name: "map",
                query: {
                    periods_id: res.start_periods_id,
                    course_type: res.start_periods_course_type
                  }
                });
             }
              this.$nextTick(()=>{
                html2canvas(document.getElementById('capture33'),{
                  async: true,
                  scrollX:0,
                  scale: 2,
                  letterRendering: true,
                  useCORS:true
                }).then((canvas) => {
                  this.divShow = false;
                  let dataURL = canvas.toDataURL("image/jpg");
                  this.canvasData = dataURL
                }).catch(res=>{alert(res);console.log()});
              })
          }else if(res.start_periods_id!=undefined&&res.start_periods_id==0){
            // 没开课
             if(res.teacher_qr){
              this.bannerData.qr = res.teacher_qr
            }
              this.bannerData.start_at = res.periods_list[0].start_at
              this.bannerData.active_start_at = res.periods_list[0].active_start_at
              this.bannerData.is_start_active = res.is_start_active
              this.bannerData.start_periods_id = res.start_periods_id
            this.userCourse = Object.assign({},res)
             localStorage.setItem('userCourse',JSON.stringify(this.userCourse));
             console.log(this.userCourse)
              this.$refs.bottomTab.setBtn()
          }else if(res.automation_id.length){
            //  debugger
            this.bannerData = res
            this.userCourse = Object.assign({},res)
            localStorage.setItem('userCourse',JSON.stringify(this.userCourse));
            if(!sessionStorage.getItem('frist')){
               sessionStorage.setItem('frist',true)
               this.$router.push({
                name: "map",
                query: {
                  }
                });
             }
          }
        }
      })
      // 未成团订单
      getOrderListApi().then(res=>{
        let that = this
        let arr = []
        res.list.forEach(el => {
          if(el.buy_type==2&&el.status==1){
            if(new Date(el.group_info.deadline.replace(/-/g, '/')).getTime()>=new Date().getTime()){
                el.goods_desc= JSON.parse(el.goods_desc)
                arr.push(el)
                let Interval = setInterval(function () {
                that.countTime = commom.leftTimer(new Date(el.group_info.deadline.replace(/-/g, '/')),Interval)
              }, 1000)
            } 
          }
        });
        this.orderList = arr
        console.log(arr)
      })
    },
    dateParse(dateString) {
      let SEPARATOR_BAR = "-";
      let SEPARATOR_SLASH = "/";
      let SEPARATOR_DOT = ".";
      let 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(dateString, compareDateString) {
      let dateTime = dateString.getTime();
      let compareDateTime = compareDateString.getTime();
      if (compareDateTime > dateTime) {
        return 1;
      } else if (compareDateTime == dateTime) {
        return 0;
      } else {
        return -1;
      }
    },
    toMap(data) {
      this.$sa.track("buttonClick", {
        tabTitle: "首页",
        moduleTitle: "课程",
        buttonType: "课程",
        buttonName: "进入课程"
      });
      if (this.dateCompare(new Date(), this.dateParse(data.start_at)) < 1) {
        this.$router.push({
          name: "map",
          query: {
            periods_id: data.periods_id,
            parent_category_id: data.parent_category_id,
            course_type: data.course_type
          }
        });
      } else {
        Toast("该课程暂未开始");
      }
    },
    toHear(){
      // this.$sa.track("buttonClick", {
      //   tabTitle: "首页",
      //   moduleTitle: "功能按钮",
      //   buttonType: "板块按钮",
      //   buttonName: "磨耳朵"
      // });
      // console.log(this.$refs.med)
      this.$sa.quick('trackHeatMap',this.$refs.med)
      // debugger
      if(this.bannerData.active_start_at){
        window.location.href='https://appaNQLfktH3717.h5.xiaoeknow.com/content_page/eyJ0eXBlIjozLCJyZXNvdXJjZV90eXBlIjo4LCJyZXNvdXJjZV9pZCI6IiIsInByb2R1Y3RfaWQiOiJwXzVjYjQyMDgzYTA2NDNfMXF0OUFGbnoiLCJhcHBfaWQiOiJhcHBhTlFMZmt0SDM3MTcifQ'
      }else{
        this.$router.push({ name: "med" });
      }
    },
    toCollection(){
      this.$sa.quick('trackHeatMap',this.$refs.collection)
      // debugger
      this.$router.push({ name: "collection" });
    },
    toTeacher(){
      this.$sa.quick('trackHeatMap',this.$refs.teacher)
      window.location.href = "https://www.changchangenglish.com/m-home.html"
    },
    toPreview(){
      this.$sa.quick('trackHeatMap',this.$refs.preview)
      localStorage.setItem('unlook','1');
       this.$router.push({ name: "preview" });
    },
    toBbda(){
      this.$sa.quick('trackHeatMap',this.$refs.bbda)
      this.$router.push({name:'bbda'})
    },
  }
};
</script>

<style scoped lang="less">
@import "../util/public";
.index {
  background: #F5F5F9;
  padding-bottom: 50 * @toVw;
}
.banner-block {
  width: 335 * @toVw;
  height: 246 * @toVw;
  position: relative;
  background: white;
  padding:14*@toVw 20*@toVw 20*@toVw;
  margin: 0;
  // box-sizing: border-box;
  .bgimg {
    position: absolute;
    width: 335 * @toVw;
    z-index: 0;
  }
  .canvas{width: 336 * @toVw;z-index: 2;}
  .content {
    position: absolute;
    z-index: 1;
    height: 246 * @toVw;
    width:335 * @toVw;
    border-radius: 16 * @toVw;
    overflow: hidden;
  }
  .Banner{
    border-radius: 16 * @toVw;
    overflow: hidden;
    position: relative;
    // background: white;
    height: 246 * @toVw;
    width:335 * @toVw;
    box-shadow: 1 * @toVw 2 * @toVw 5 * @toVw 0 * @toVw rgba(0,0,0,0.2);
    .qr{width: 126 * @toVw;
     position: absolute;left: 104* @toVw;top:20* @toVw ;z-index: 2;
    }
    .text{font-size: 16 * @toVw;color: #FF4D4F;text-align: center;position: absolute;top: 153* @toVw;width: 100%;font-weight:600;
    }
    .date{color: white;text-align: center;position: absolute;bottom: 8*@toVw;width: 100%;font-size: 12 * @toVw;}
    .data_only{color: white;text-align: center;position: absolute;bottom: 11*@toVw;width: 100%;font-size: 19 * @toVw;}
    .triangle{background: #FFC53D;width:104* @toVw ;height: 104* @toVw;position: absolute;right: -46* @toVw; top: -62* @toVw; transform:rotate(-50deg);z-index: 3;
      span{color: white;font-size: 14 * @toVw;transform:rotate(91deg);position: absolute;top: 52* @toVw;font-size: 13 * @toVw;  }
     }
  }
  .unBanner{
    border-radius: 25 * @toVw;
    overflow: hidden;
    height: 246 * @toVw;
    width:335 * @toVw;
    position: relative;
    box-shadow: 1 * @toVw 2 * @toVw 5 * @toVw 0 * @toVw rgba(0,0,0,0.2);
    .title{
      position: absolute;color: white;top: 35* @toVw;left: 20* @toVw;
      .title1{font-size:20 * @toVw;}
      .title2{font-size:36 * @toVw;}
      }
    .date{color: white;text-align: center;position: absolute;bottom: 30*@toVw;padding-top: 10* @toVw;border-radius:28 * @toVw;
    box-sizing: border-box;background:#FFC53D;
     animation:myfirst 3s linear infinite;
    left: 20* @toVw;font-size: 14 * @toVw;width: 152* @toVw;height:56* @toVw ;
    .date1{font-size:12 * @toVw;}
    .date2{font-size:16 * @toVw;}
    @keyframes myfirst
    {
        0%   {transform:scale(1)}
        50% {transform:scale(1.1)}
        100% {transform:scale(1)}
    }
    }
    .triangle{background: #FFC53D;width:104* @toVw ;height: 104* @toVw;position: absolute;right: -46* @toVw; top: -62* @toVw; transform:rotate(-50deg);
      span{color: white;font-size: 14 * @toVw;transform:rotate(85deg);position: absolute;top: 54* @toVw;font-size: 13 * @toVw;bottom: 74* @toVw;}
     }
  }
}
.contentBox{
  padding: 10 * @toVw 20 * @toVw;
  background: white;
  margin: 10 * @toVw 0;
  .commonTitle{
    display: flex;
    display: -webkit-flex;
    vertical-align: top;
    .line{height: 20 * @toVw;width: 4 * @toVw;border-radius:2 * @toVw;margin-right: 10 * @toVw;margin:auto 10 * @toVw auto 0;}
    .more{height: 33 * @toVw;line-height:43 * @toVw;font-size: 12 * @toVw;color: #666666;flex:1;text-align:right;overflow: hidden;
    .iconfont{font-size: 14 * @toVw;color: #666666;}
     }
    .title{font-size: 24 * @toVw;height: 33 * @toVw;line-height: 33 * @toVw;display: inline-block;margin-right: 10 * @toVw;font-weight: bold;}
    .tip{font-size: 12 * @toVw;color: #999999;height: 33 * @toVw;display: inline-block;line-height: 43 * @toVw;overflow: hidden;}
  }
  .lookData{font-size: 12 * @toVw;
  .iconfont{font-size: 12 * @toVw;}
  }
}
.med{
  .commonTitle{
    .line{
    background: #4A90E2;
   }
  }
  .content{
    display: flex;
    display: -webkit-flex;
    text-align: center;
    flex-wrap:wrap;
    height: 212 * @toVw;
    overflow: hidden;
    .contentItem{
    width: 50%;
    height: 191 * @toVw;
    margin-top: 18 * @toVw;
    position: relative;
    img{width: 107 * @toVw;height:107 * @toVw;position: absolute;top: 0;left: 27 * @toVw;border-radius:53 * @toVw ; }
    .white{position: absolute;background: white;width: 20 * @toVw;height: 20 * @toVw;border-radius: 10 * @toVw;top:43.5 * @toVw ; left: 70.5 * @toVw;}
    .text{
      width: 161 * @toVw;
      height: 161 * @toVw;
      margin-top: 30 * @toVw;
      color: #999999;
      padding-top: 90 * @toVw;
      box-shadow: 1 * @toVw 2 * @toVw 5 * @toVw 0 * @toVw rgba(0,0,0,0.2);
      border-radius:16 * @toVw;
      box-sizing: border-box;
      .title{font-size: 14 * @toVw;color: black;}
      .enTitle{font-size: 12 * @toVw;line-height: 17 * @toVw;}
    }
    }
  }
}
.qm{
  .commonTitle{
    .line{
    background: #FF7875;
   }
  }
  .content{
    text-align: center;
    .contentItem{
    margin-top: 18 * @toVw;
    position: relative;
    box-shadow: 1 * @toVw 2 * @toVw 5 * @toVw 0 * @toVw rgba(0,0,0,0.2);
    border-radius:16 * @toVw;
    overflow: hidden;
    img{width: 335 * @toVw;height:150 * @toVw;  }
      .text{
        display: flex;
        display: -webkit-flex;
        width: 335 * @toVw;
        color: #999999;
        padding: 19 * @toVw 15 * @toVw;
        box-sizing: border-box;
        .title{font-size: 12 * @toVw;color: black;}
        .line{border-right:1 * @toVw solid #999999;height: 20 * @toVw;margin: 0 10 * @toVw; }
        .lookData{flex: 1;text-align: right;}
        .enTitle{font-size: 12 * @toVw;}
      }
    }
  }
}
.mxxy{
  .commonTitle{
    .line{
    background: #7ED321;
   }
  }
  .content{
    display: flex;
    display: -webkit-flex;
    text-align: center;
    flex-wrap:wrap;
    justify-content: space-between;
    .contentItem{
    width: 162*@toVw;
    margin-top: 18 * @toVw;
    position: relative;
    box-shadow: 1 * @toVw 2 * @toVw 5 * @toVw 0 * @toVw rgba(0,0,0,0.2);
    border-radius:16 * @toVw;
    overflow: hidden;
    padding-bottom: 18 * @toVw;
    img{width:100%;  }
    .text{
      color: #999999;
      box-sizing: border-box;
      padding: 10 * @toVw 15 * @toVw 0;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      .title{font-size: 14 * @toVw;color: black;text-align: left;width: 50%;}
      .lookData{}
    }
    .tip{color: #999999;padding: 0 15 * @toVw ;text-align: left;margin-top: 4 * @toVw;font-size: 12 * @toVw;}
    }
  }
}


.btn-block {
  display: flex;
  display: -webkit-flex;
  padding: 0 20 * @toVw 12 * @toVw;
  background: white;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  width: 335 * @toVw;
  .btn {
    width: 105 * @toVw;
    height:44 * @toVw;
    border-radius: 12 * @toVw;
    box-shadow: 1 * @toVw 2 * @toVw 5 * @toVw 0 * @toVw rgba(0,0,0,0.2);
    position: relative;
    .nolook{position: absolute;top: -5 * @toVw;left: -5 * @toVw; background: #ff4d4f;width: 16 * @toVw;height: 16 * @toVw;
    color: white;border-radius: 8 * @toVw;text-align: center;font-size: 12 * @toVw;line-height: 16 * @toVw;}
    img {
      width: 105* @toVw;
      height: 44* @toVw;
    }
  }
  .toPreview{
    background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index_icon_min.png') 0 -63 * @toVw;background-size:100% ;
  }
  .toBbda{
    background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index_icon_min.png') ;background-size:100%;
  }
  .toCollection{
    background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index_icon_min.png') 0 -128 * @toVw ;background-size:100%;
  }
  .toTeacher{
    background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index_icon_min.png') 0 -191 * @toVw ;background-size:100%;
  }
}
.orderBox{
  position: relative;
  padding: 0 20 * @toVw 12 * @toVw;
  background: white;
  .item:first-child{position: relative;z-index: 1000;background: white; }
  .item{
    box-shadow:1px 2px 7px 0px rgba(255,210,207,1);
    border-radius: 16* @toVw;
    .top{display: flex;padding: 15* @toVw 10 * @toVw;
    img{width: 74 * @toVw;height: 74 * @toVw ;border-radius:10* @toVw; }
      .info{
        padding-left: 10 * @toVw;
        h3{font-size: 15 * @toVw;color: #333333;}
        p{font-size: 13 * @toVw;color:#666666;
        span{color: #FF7171;}
        }
      }
    }
    .line{height: 0;border-bottom: 1px solid #E2E2E2;}
    .bottom{padding: 4* @toVw 8 * @toVw;
    display: flex;
    justify-content: space-between;
    .text{height: 34* @toVw;line-height: 34* @toVw;color: #333333;font-size: 13* @toVw;}
    .btn{width: 80* @toVw;height: 34* @toVw;background: #FF7171;color: white;
    border-radius: 17* @toVw;
    font-size: 15* @toVw;
    line-height: 34* @toVw;text-align: center;}
    }
  }
  .imgbox{img{width:261*@toVw;}
  .text{color: white;position: absolute;top: 30* @toVw;left: 10* @toVw;font-size: 17* @toVw;}
  position: absolute;z-index: 1000;top: -94* @toVw;left: 70* @toVw;}
  .shadow{position: fixed;bottom: 0;top: 0;left: 0;top: 0;background: black;opacity: 0.6;width: 100%;z-index: 999;}
}
.lesson-block {
  padding-bottom: 20 * @toVw;
  .goods-block {
    position: relative;
    width: 335 * @toVw;
    .tips {
      display: inline-block;
      font-size: 12 * @toVw;
      font-family: PingFang-SC-Bold;
      font-weight: normal;
      color: rgba(255, 255, 255, 1);
      line-height: 17 * @toVw;
      padding: 2 * @toVw 5 * @toVw;
      position: absolute;
      right: 10 * @toVw;
      top: 12 * @toVw;
      background: rgba(245, 166, 35, 1);
      border-radius: 11 * @toVw;
    }
    img {
      width: 335 * @toVw;
      height: 236 * @toVw;
      border-radius: 8 * @toVw;
    }
  }
}
.class-block {
  margin-top: 10 * @toVw;
  font-family: PingFang-SC-Medium;
  font-size: 18 * @toVw;
  color: #333333;
  text-align: center;
  background: white;
  .title {
    padding: 8 * @toVw;
    position: relative;
    .more {
      position: absolute;
      width: 30 * @toVw;
      bottom: 10 * @toVw;
      right: 20 * @toVw;
    }
  }
}
@media screen and (min-width: 600px) {
  @toVw:100/1024vw;
  .index {
  background: #F5F5F9;
  padding-bottom: 50 * @toVw;
  }
  
  .padTop{display: flex;justify-content: space-around;display: -webkit-flex;-webkit-justify-content: space-around;
  background: white;
  .btn-block {
      display: block;
      padding: 15* @toVw 42 * @toVw 0 30 * @toVw;
      background: white;
      -webkit-justify-content: space-around;
      width: 268 * @toVw;
      box-sizing: border-box;
      .btn {
        width: 196 * @toVw;
        height:161 * @toVw;
        border-radius: 24 * @toVw;
        box-shadow: 1 * @toVw 2 * @toVw 5 * @toVw 0 * @toVw rgba(0,0,0,0.2);
        margin-bottom: 20 * @toVw;
        position: relative;
        background: #ff9c6e;
        .nolook{position: absolute;top: -5 * @toVw;left: -5 * @toVw; background: #ff4d4f;width: 26 * @toVw;height: 26 * @toVw;
        color: white;border-radius: 13 * @toVw;text-align: center;font-size: 12 * @toVw;line-height: 26 * @toVw;}
        img {
          width: 196* @toVw;
          height: 161* @toVw;
        }
      }
      .toPreview{
        background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index_icon_max.png')  0 0 ;background-size:100% ;
      }
      .toBbda{
        background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index_icon_max.png') 0 -540 * @toVw;background-size:100% ;
      }
      .toCollection{
        background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index_icon_max.png') 0 -180 * @toVw;background-size:100% ;
      }
      .toTeacher{
        background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index_icon_max.png') 0 -360 * @toVw;background-size:100% ;
      }
    }
  .banner-block{
      width:756* @toVw;
      height: 525 * @toVw;
      position: relative;
      background: white;
      padding:14*@toVw 30*@toVw 20*@toVw 42*@toVw;
      box-sizing: border-box;
      margin: 0;
      // box-sizing: border-box;
      .bgimg {
        position: absolute;
        width: 714 * @toVw;
        z-index: 2;
      }
      .content {
        position: absolute;
        z-index: 3;
        height: 525 * @toVw;
        width:714 * @toVw;
        border-radius: 30 * @toVw;
        overflow: hidden;
      }
      .Banner{
        border-radius: 33 * @toVw;
        overflow: hidden;
        position: relative;
        // background: white;
        height: 525 * @toVw;
        width:714 * @toVw;
        box-shadow: 1 * @toVw 2 * @toVw 5 * @toVw 0 * @toVw rgba(0,0,0,0.2);
        .qr{width: 257 * @toVw;
        position: absolute;left: 230* @toVw;top:60* @toVw ;z-index: 2;
        }
        .text{font-size: 26 * @toVw;color: #FF4D4F;text-align: center;position: absolute;top: 331* @toVw;width: 100%;font-weight:500;
        // font-size: 
        }
        .date{color: white;text-align: center;position: absolute;bottom: 30*@toVw;width: 100%;font-size: 22 * @toVw;}
        .triangle{background: #FFC53D;width:144* @toVw ;height: 144* @toVw;position: absolute;right: -78* @toVw; top: -64* @toVw; transform:rotate(-41deg);z-index: 3;
          span{color: white;font-size: 18 px;transform:rotate(91deg);position: absolute;top: 62* @toVw;font-size: 18 * @toVw;  }
        }
      }
      .unBanner{
        border-radius: 33 * @toVw;
        overflow: hidden;
        height: 525 * @toVw;
        width:714 * @toVw;
        position: relative;
        background: #ff7d77;
        box-shadow: 1 * @toVw 2 * @toVw 5 * @toVw 0 * @toVw rgba(0,0,0,0.2);
        .title{position: absolute;color: white;top: 35* @toVw;left: 20* @toVw;
        }
        .date{color: white;text-align: center;position: absolute;bottom: 66*@toVw;padding-top: 10* @toVw;border-radius:56 * @toVw;
        box-sizing: border-box;background:#FFC53D; 
        left: 45* @toVw;font-size: 14 * @toVw;width: 324* @toVw;height:116* @toVw;
        .date1{font-size: 30 * @toVw;}
        .date2{font-size: 34 * @toVw;}
        }
        .triangle{background: #FFC53D;width:144* @toVw ;height: 144* @toVw;position: absolute;right: -78* @toVw; top: -64* @toVw; transform:rotate(-41deg);z-index: 3;
          span{color: white;transform:rotate(91deg);position: absolute;top: 68* @toVw;font-size: 18 * @toVw;  }
        }
      }
      .canvas{width: 716 * @toVw;z-index: 2;}
    }
  }


  .contentBox{
  padding: 20 * @toVw 42 * @toVw 20 * @toVw;
  background: white;
  margin: 10 * @toVw 0;
  .commonTitle{
    display: flex;
    display: -webkit-flex;
    vertical-align: top;
    .line{height: 20 * @toVw;width: 4 * @toVw;border-radius:2 * @toVw;margin-right: 10 * @toVw;margin:auto 10 * @toVw auto 0;}
    .more{height: 33 * @toVw;line-height:43 * @toVw;font-size: 12 * @toVw;color: #666666;flex:1;text-align:right;overflow: hidden;
    .iconfont{font-size: 14 * @toVw;color: #666666;}
     }
    .title{font-size: 24 * @toVw;height: 33 * @toVw;line-height: 33 * @toVw;display: inline-block;margin-right: 10 * @toVw;font-weight: bold;}
    .tip{font-size: 12 * @toVw;color: #999999;height: 33 * @toVw;display: inline-block;line-height: 43 * @toVw;overflow: hidden;}
  }
  .lookData{font-size: 12 * @toVw;
  .iconfont{font-size: 12 * @toVw;}
  }
}
.med{
  .content{
    display: flex;
    display: -webkit-flex;
    text-align: center;
    flex-wrap:wrap;
    -webkit-flex-wrap:wrap;
    height: 299 * @toVw;
    // overflow: hidden;
    .contentItem{
    width: auto;
    height: 257 * @toVw;
    margin-top: 18 * @toVw;
    margin-right: 19*@toVw;
    position: relative;
    img{width: 146 * @toVw;height:146 * @toVw;position: absolute;top: 0;left: 37 * @toVw;border-radius:73 * @toVw ; }
    .white{position: absolute;background: white;width: 26 * @toVw;height: 26 * @toVw;border-radius: 13 * @toVw;top:61.5 * @toVw ; left: 98 * @toVw;}
    .text{
      width: 220 * @toVw;
      height: 205 * @toVw;
      margin-top: 72 * @toVw;
      color: #999999;
      padding-top: 90 * @toVw;
      box-shadow: 1 * @toVw 2 * @toVw 5 * @toVw 0 * @toVw rgba(0,0,0,0.2);
      border-radius:16 * @toVw;
      box-sizing: border-box;
      .title{font-size: 18 * @toVw;color: black;}
      .enTitle{font-size: 14 * @toVw;line-height: 30 * @toVw;}
    }
   }
   .contentItem:nth-child(4){margin-right: 0;}
  }
}
.qm{
  .content{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    .contentItem{
    width: 460* @toVw;
    margin-top: 18 * @toVw;
    position: relative;
    box-shadow: 1 * @toVw 2 * @toVw 5 * @toVw 0 * @toVw rgba(0,0,0,0.2);
    border-radius:16 * @toVw;
    overflow: hidden;
    img{width: 460 * @toVw;height:auto;  }
      .text{
        display: flex;
        display: -webkit-flex;
        width: 100%;
        color: #999999;
        padding: 19 * @toVw 15 * @toVw;
        box-sizing: border-box;
        .title{font-size: 15 * @toVw;color: black;}
        .line{border-right:1 * @toVw solid #999999;height: 20 * @toVw;margin: 0 10 * @toVw; }
        .lookData{flex: 1;text-align: right;}
        .enTitle{font-size: 13 * @toVw;}
      }
    }
  }
}
.mxxy{
  .commonTitle{
    .line{
    background: #7ED321;
   }
  }
  .content{
    display: flex;
    display: -webkit-flex;
    text-align: center;
    flex-wrap:wrap;
    -webkit-flex-wrap:wrap;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    .contentItem{
    width: 221*@toVw;
    margin-top: 18 * @toVw;
    position: relative;
    box-shadow: 1 * @toVw 2 * @toVw 5 * @toVw 0 * @toVw rgba(0,0,0,0.2);
    border-radius:16 * @toVw;
    overflow: hidden;
    padding-bottom: 18 * @toVw;
    img{width:100%;  }
    .text{
      color: #999999;
      box-sizing: border-box;
      padding: 10 * @toVw 15 * @toVw 0;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      .title{font-size: 18 * @toVw;color: black;text-align: left;width: 50%;}
      .lookData{}
    }
    .tip{color: #999999;padding: 0 15 * @toVw ;text-align: left;margin-top: 4 * @toVw;font-size: 12 * @toVw;}
    }
  }
}

}
@media screen and (min-width: 1200px) {
.med .content .contentItem{margin-right:1.4vw;}
}
*{margin: 0;}

</style>