<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" v-if="!couponInfo.money" >
              <p class="date1"  style="text-decoration:line-through;">原价:{{bannerData.original_price/100}}元</p>
              <p class="date2" >限时{{bannerData.current_price/100}}元领取</p>
            </div>
            <div class="date" v-if="couponInfo.money">
              <p class="date1" style="text-decoration:line-through;">原价:{{bannerData.current_price/100}}元</p>
              <p class="date2" >券后{{(bannerData.current_price-couponInfo.money)/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="couponActivity" v-if="couponInfo.money&&!orientationchange">
          <div class="textBox">
            <div>
              <span class="line"></span>
                <img :src="icon_point" alt="">
                <span class="textcontent">真幸运!您有课程代金券,使用立减 <span class="price">{{couponInfo.money/100}}</span> 元!</span>
              <span class="line"></span>
            </div>
          </div>
          <div @click="toShop(1)" ref="couponShop" :class="{couponItem:true,shaBox:couponShadow}">
            <div class="left">
              <img :src="imgUrl.coupon" alt="">
              <div>¥<span>{{couponInfo.money/100}}</span></div>
            </div>
            <div class="content">
              <div class="top">
                <div class="left">
                  <p>课程代金券</p>
                  <p class="date">{{couponInfo.deadline_at}}失效</p>
                </div>
                <div class="btn">
                  立即使用
                </div>
              </div>
              <div class="bottom">
                适用于购买21天训练营
              </div>
            </div>
          </div>
          <div class="shadow" @click="couponShadow=false" v-if="couponShadow&&!pt"></div>
          <div class="toptext" v-if="couponShadow&&!pt">
            <img :src="icon_point2" alt="">
            <span class="textcontent">真幸运!您有课程代金券,使用立减 <span class="price">{{couponInfo.money/100}}</span> 元!</span>
          </div>
      </div>
      <div class="btn-block">
        <div class="btn toPreview" ref="preview" @click="toPreview">
          <div v-if="!unlook" class="nolook">1</div>
        </div>
        <div class="btn toBbda" ref="bbda" v-if="!userCourse.is_start_active" @click="toBbda($event)">
        </div>
        <!-- <div class="btn toBbda" ref="bbda"  @click="toBbda($event)">
        </div> -->
        <div class="btn toCollection" ref="collection" v-if="userCourse.is_start_active==1" @click="toCollection">
        </div>
        <div class="btn toTeacher" ref="teacher" @click="toTeacher">
        </div> 
      </div>
    </div>
    <div :class="{orderBox:true,lowIndex:!pt&&orderList.length}" v-if="orderList.length"  >
        <div class="item groupItem" ref="groupItem" v-for="(data,index) in orderList" :key="index"  @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="shadowClick()" ></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 class="couponActivity" v-if="couponInfo.money&&orientationchange">
          <div class="textBox">
            <div>
              <span class="line"></span>
                <img :src="icon_point" alt="">
                <span class="textcontent">真幸运!您有课程代金券,使用立减 <span class="price">{{couponInfo.money/100}}</span> 元!</span>
              <span class="line"></span>
            </div>
          </div>
          <div @click="toShop(1)" ref="couponShop" :class="{couponItem:true,shaBox:couponShadow}">
            <div class="left">
              <img :src="imgUrl.coupon" alt="">
              <div>¥<span>{{couponInfo.money/100}}</span></div>
            </div>
            <div class="content">
              <div class="top">
                <div class="left">
                  <p>课程代金券</p>
                  <p class="date">{{couponInfo.deadline_at}}失效</p>
                </div>
                <div class="btn">
                  立即使用
                </div>
              </div>
              <div class="bottom">
                适用于购买21天训练营
              </div>
            </div>
          </div>
          <div class="shadow" @click="couponShadow=false" v-if="couponShadow&&!pt"></div>
          <div class="toptext" v-if="couponShadow&&!pt">
            <img :src="icon_point2" alt="">
            <span class="textcontent">真幸运!您有课程代金券,使用立减 <span class="price">{{couponInfo.money/100}}</span> 元!</span>
          </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 zb"  v-if="zbList.length>0" >
      <div class="commonTitle">
        <span class="line"></span>
        <span class="title">精彩直播课</span>
        <span class="tip">在线与名师互动</span> 
        <a @click="toZb" ref="zb" class="more qm">更多 <i class="iconfont icon-youjiantou"></i> </a>
      </div>
      <div class="content">
        <div class="contentItem qm" ref="zbitem" v-for="item in zbList" @click="goLink(item.link,'zb')">
          <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 qm"  v-if="qmList.length>0" >
      <div class="commonTitle">
        <span class="line"></span>
        <span class="title">启蒙小课堂</span>
        <span class="tip">名师手把手,爸妈小帮手</span> 
        <a v-if="userCourse.is_free_course==0" href="https://appanqlfkth3717.h5.xiaoeknow.com/homepage/10" class="more qm">更多 <i class="iconfont icon-youjiantou"></i> </a>
        <a v-if="userCourse.is_free_course==1" 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>
    <div @click="liuyiBtn" v-if="userCourse.goods_id!=null&&userCourse.goods_id>0&&liuyuActivity" class="liuyiBtn">
      <img :src="imgUrl.popup_btn" alt="">
    </div>
    <van-popup class="liuyudialog" v-model="liuyucoolie" position="top"  :overlay="true">
      <div class="content">
        <img class="main" :src="imgUrl.popup_img" alt="">
        <div class="textBox">
          <p>儿童节感恩回馈!</p>
          <p>给宝贝送专属心意好礼! </p>
        </div>
        <div @click="toActivity" ref="toActivity" class="btn toActivity">立即参与</div>
      </div>
    </van-popup>
    <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,
  getCouponListApi,
  getAutomationCouponApi,
  getUserDetailApi
} from "../service/api";
import { IndexImage } from "../util/imgUrl";
import localStorageFn from "../util/localStorage";
import cookieFn from "../util/cookie";
import icon_point from '../assets/activity/icon_arrow@2x.png'
import icon_point2 from '../assets/newLesson/icon_point@2x.png'
import bottomTab from "./public/bottomTab";
import commom from "../util/common";
import audioPage from './collection/audio'
import html2canvas from 'html2canvas'
import { Toast,Popup } from 'vant';
// import localStorage from '../util/localStorage';
export default {
  name: "index",
  components: {
    bottomTab,
    audioPage,
    [Popup.name]:Popup
  },
  data() {
    let that = this;
    return {
      couponShadow:false,
      icon_point2:icon_point2,
      icon_point:icon_point,
      pt:false,
      countTime:'00:00:00',
      orderList:[],
      bannerList: [],
      teacherQ2: false,
      teacherDetail: null,
      imgUrl: IndexImage,
      user_id: null,
      newUrl: "",
      lessonList:[],
      medList:[],
      qmList:[],
      mxxyList:[],
      zbList:[],
      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',
      coupon:true,
      couponInfo:{
      },
      liuyuActivity:true,
      liuyucoolie:false,
      orientationchange:false
    };
  },
  created() {
    // console.log(this.imgUrl)
    this.initPage();
    Toast.loading({
          mask: true,
          message: ''
        });
  },
  mounted() {
    // window.scrollTo(0,0);
    let that = this
    // localStorageFn.set('liuyi',true)
    // debugger
    // cookie.delete('liuyi')
    if(typeof ss !== 'undefined'){
      console.log(ss,'345')
    }
    this.unlook = localStorage.getItem('unlook');
    if(document.body.clientWidth>700){
      that.orientationchange=true
    }
    getUserDetailApi().then(res=>{
      localStorage.setItem('userDesc',JSON.stringify(res));
    })
  },
  methods: {
    shadowClick(){
      this.pt=false
      sessionStorage.setItem('orderShadow',true);
    },
    toActivity(){
      this.$sa.quick('trackHeatMap',this.$refs.toActivity)
      this.$router.push({
         name: 'liuyi',
        query:{}
      });
    },
    liuyiBtn(){
      // this.lyshow = true
      this.$sa.quick('trackHeatMap',this.$refs.liuyiBtn)
      this.$router.push({
         name: 'liuyi',
        query:{}
      });
    },
    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('orderShadow',true);
    },
    onReachBottom(){
    },
    toShop(index){
      if(index==1){
        this.$sa.quick('trackHeatMap',this.$refs.couponShop)
      }else{
        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){
      // console.log(ss)
      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)
        if(this.userCourse.is_free_course==1){
          window.location.href = 'https://appaNQLfktH3717.h5.xiaoeknow.com/content_page/eyJ0eXBlIjozLCJyZXNvdXJjZV90eXBlIjo4LCJyZXNvdXJjZV9pZCI6IiIsInByb2R1Y3RfaWQiOiJwXzVjYjQyMDgzYTA2NDNfMXF0OUFGbnoiLCJhcHBfaWQiOiJhcHBhTlFMZmt0SDM3MTcifQ'
        }else{
          window.location.href = link
        }
      }else if(word=='mxxy'){
        this.$sa.quick('trackHeatMap',this.$refs.mxxyitem)
        window.location.href = link
      }else if(word=='zb'){
        this.$sa.quick('trackHeatMap',this.$refs.zbitem)
        window.location.href = link
      }
      // qmitem
    },
    getBannerListApi() {
      this.medList=[]
      let json = {
          limit: 4,
          page: 1
        };
      bannerListApi(5,{limit:1,page:1}).then(res=>{
        this.zbList = res.list
      })
      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.
      // console.log(this.couponInfo.money)
      // debugger
      // console.log(ss)
      let that = this

      getCourseInfoApi().then(res =>{
        localStorage.setItem('userCourse','');
        let is_view_course = "没有课程";
        // console.log(ss)
        if (res.start_periods_course_type) {
          if(res.start_periods_course_type==0){
            is_view_course = "正式课";
          }else{
            is_view_course = "体验课";
          }
        }
        this.$sa.track("viewHomepage", {
        });
        // debugger
        this.getBannerListApi()
        let course = res
        
        // 无老师带用户
        if(!res.periods_list){
          // 优惠券
            getCouponListApi(course.goods_id).then(res =>{
              // debugger
              if(res.length){
                this.couponInfo = res[0]
                this.$sa.track("view61index", {});
                if(this.pt){
                    // chrome
                    document.body.scrollTop = 150
                    // firefox
                    document.documentElement.scrollTop =150
                    // safari
                    window.pageYOffset =150
                }
              }
              // debugger
              // console.log(this.$store.couponShadow)
              if(this.$store.state.couponShadow){
                // debugger
                this.couponShadow=true
                console.log(this.pt)
                this.$sa.track("view61tipshadow", {});
                this.$store.dispatch('setCouponShadow',false)
              }
              // if(!localStorage.getItem('activity')){
              //   localStorage.setItem('activity');
              // }
              console.log(course)
              // console.log(Date.parse(new Date()))
              // console.log(Date.parse(new Date('2019/6/4')))
              if(!res.length&&Date.parse(new Date())<Date.parse(new Date('2019/6/4'))&&!course.automation_id){
                console.log('490')
                if(localStorageFn.get('liuyi')==0){
                  console.log('492')
                  this.liuyucoolie = true
                  localStorageFn.set('liuyi',1)
                  this.$sa.track("view61window",{});
                }
              }
            })
            //六一活动
            if(Date.parse(new Date())>Date.parse(new Date('2019/6/4 00:00:00'))){
              // debugger
              this.liuyuActivity = false
              localStorageFn.set('liuyi',1)
            }
        }
        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
            let ownDetail = JSON.parse(localStorage.getItem("userDesc"));
            if(ownDetail.family_user!=1){
              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()});
              })
               window.addEventListener('orientationchange',function(){
                setTimeout(function(){
                  that.canvasData = ''
                  that.$nextTick(()=>{
                        html2canvas(document.getElementById('capture33'),{
                          async: true,
                          scrollX:0,
                          scale: 2,
                          letterRendering: true,
                          useCORS:true
                        }).then((canvas) => {
                          that.divShow = false;
                          let dataURL = canvas.toDataURL("image/jpg");
                          that.canvasData = dataURL
                        }).catch(res=>{alert(res);console.log()});
                      })
                },300)
              },false);
          }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));
            let ownDetail = JSON.parse(localStorage.getItem("userDesc"));
            if(ownDetail.family_user!=1){
              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 => {
          console.log()
          if(el.buy_type==2&&el.status==1){
            if(!sessionStorage.getItem('orderShadow')){
                this.pt = true
            }
            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)
            } 
          }
        });
        console.log(arr)
        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) {
        let ownDetail = JSON.parse(localStorage.getItem("userDesc"));
        if(ownDetail.family_user!=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.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" });
      }
    },
    toZb(){
      this.$sa.quick('trackHeatMap',this.$refs.zb)
      this.$router.push({ name: "zhibo" });
    },
    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', params: {index: '1'}})
    },
  }
};
</script>

<style scoped lang="less">
@import "../util/public";
.index {
  background: #F5F5F9;
  padding-bottom: 50 * @toVw;
}
.couponActivity{
  padding:0  20 * @toVw 12 * @toVw;
  background: white;
  margin: 0 0 10 * @toVw;
  position: relative;
    .textBox{
      width: 290* @toVw;
      margin: 0 auto;
      // border-right: 4px solid #FFD7D5;
      // border-left: 4px solid #FFD7D5;
      color: #666666;
      div{
        width: 100%;
        line-height:  34* @toVw;
        height:  34* @toVw;
        display: -webkit-flex;
        .textcontent{flex: 1;}
        img{width: 10* @toVw;height:10* @toVw ;margin: 12* @toVw 8* @toVw 0;}
        .price{color: #FF7D77;}
      }
      font-size: 13* @toVw;
      .line{display: inline-block;width: 5* @toVw;height: 34* @toVw;background: #FFD7D5;box-shadow:0px 2* @toVw 4* @toVw 0px rgba(255,125,119,0.3);}
    }
    .toptext{
      font-size: 13* @toVw;
      position: absolute;
      z-index: 1001;
      color: white;
      left:55* @toVw ;
      top: 6* @toVw;
      img{
        width: 10* @toVw;height:10* @toVw ;margin: 0  4* @toVw 0 0;
        }
      }
    .couponItem{
      display: -webkit-flex;
      height: 89* @toVw;
      position: relative;
      z-index: 1002;
      .left{
        img{width: 93* @toVw;position: absolute;z-index: 0;}
        div{
          position: relative;
          z-index: 1;
          padding: 22* @toVw 16* @toVw 0;
          color: white;
          // font-size: 12rem;
          span{font-size: 40* @toVw;}
          // span{font-size: 40rem;}
        }
      }
      .content{
        background: white;
        padding: 10* @toVw 12* @toVw 0 17* @toVw;
        box-shadow:1px 2px 7px 0px rgba(255,210,207,1);
        flex: 1;
        border-radius:0px 5px 5px 0px;
        .top{display: flex;
          .left{
            font-size: 15* @toVw;
            .date{font-size: 10* @toVw;color: #999999;margin-top: 2* @toVw;}
          }
          .btn{
            width:58* @toVw;
            height:25* @toVw;
            background:rgba(255,255,255,1);
            border-radius:15* @toVw;
            border:1px solid rgba(255,115,114,1);
            font-size: 11* @toVw;
            line-height: 25* @toVw;
            text-align: center;
            color: rgba(255,115,114,1);
            margin-left: 26* @toVw;
            margin:auto ;
            margin-right: 0;
          }
          height: 46* @toVw;
          border-bottom: 1px solid #E2E2E2;
        }
        .bottom{
          line-height: 32* @toVw;
          color: #999999;
          font-size: 11* @toVw;
        }
      }
    }
    .shaBox{
      .content{
        box-shadow:none;
      }
    }
    .shadow{position: fixed;bottom: 0;top: 0;left: 0;top: 0;background: black;opacity: 0.6;width: 100%;z-index: 999;}
  }
.van-popup{
  width: 283* @toVw;
  top: 20vh;
  border-radius: 22* @toVw;
  overflow: hidden;
  text-align: center;
  padding-bottom: 26* @toVw;
  font-size: 14* @toVw;
  .content{
    img{width: 100%;}
    .textBox{
      margin: 20* @toVw 0;
    }
    .btn{
      background: #40A9FF;
      width: 180* @toVw;
      height: 44* @toVw;
      line-height: 44* @toVw;
      color: white;
      display: inline-block;
      border-radius: 22* @toVw;
      font-size: 22* @toVw;
    }
  }
}
.liuyiBtn{
  position: fixed;
  bottom: 80* @toVw;
  right: 10* @toVw;
  z-index: 100;
  img{width: 100* @toVw;}
  -webkit-animation-name: swing;
  -webkit-animation-duration: 0.8s;
  -webkit-transform-origin:50% 50%;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count:3;
}
@-webkit-keyframes swing {
    10% {
      transform: rotate(15deg);
    }
    20% {
      transform: rotate(-10deg);
    }
    30% {
      transform: rotate(5deg);
    }
    40% {
      transform: rotate(-5deg);
    }
    50%, 100% {
      transform: rotate(0deg);
    }
  }
.banner-block {
  width: 335 * @toVw;
  height: 246 * @toVw;
  position: relative;
  background: white;
  padding:14*@toVw 20*@toVw 0*@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;
     -webkit-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;}
    }
    .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;}
      }
    }
  }
}
.zb{
  .commonTitle{
    .line{
    background: #FFD454;
   }
  }
}
.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: 12 * @toVw 20 * @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;
  margin-top: 10* @toVw;
  .item:first-child{position: relative;z-index: 2000;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: 2000;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: 1999;}
}
.lowIndex{
  .item:first-child{position: relative;z-index: 10;background: white; }
}
.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;}
        }
        .data_only{bottom: 12*@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>