<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&&userCourse.teacher_alias_flag"
        >
          <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="userCourse.periods_list[0].is_start_course>0">已开课</span>
            <span v-if="!userCourse.periods_list[0].is_start_course">待开课</span>
          </div>
          <img class="bgimg canvas" v-if="canvasData" :src="canvasData" alt />
        </div>
        <div
          class="unBanner"
          ref="toShopD"
          v-if="!userCourse.goods_id&&!userCourse.teacher_alias_flag&&userCourse.periods_list"
        >
          <img class="bgimg" :src="banner_bg" alt />
          <div class="content" v-if="userCourse.periods_list">
            <div class="title titleSpc">
              <p class="title1">欢迎加入唱唱启蒙英语</p>
              <p class="title2">{{userCourse.periods_list[0].course_title}}</p>
            </div>
            <div class="date spc">
              <p>开课时间</p>
              <p>{{userCourse.periods_list[0].start_at}}</p>
            </div>
            <div
              class="triangle"
              style="background:transparent;"
              v-if="userCourse.periods_list[0].is_start_course">
              <span>已开课</span>
            </div>
            <div
              class="triangle"
              style="background:transparent;"
              v-if="!userCourse.periods_list[0].is_start_course">
              <span>待开课</span>
            </div>
          </div>
        </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.start_periods_id"
          @click="toBbda($event)"
          ></div>
        <!-- <div class="btn toBbda" ref="bbda"  @click="toBbda($event)">
        </div>-->
        <div
          class="btn toCollection"
          ref="collection"
          v-if="userCourse.start_periods_id"
          @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"
          :key='item.id'
          @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"
          :key='item.id'
          @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://wx840a79781fa6f66d.h5.xiaoe-tech.com"
          class="more qm"
        >
          更多
          <i class="iconfont icon-youjiantou"></i>
        </a>
        <a
          v-if="userCourse.is_free_course==1"
          href="https://wx840a79781fa6f66d.h5.xiaoe-tech.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"
          :key='item.id'
          @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"
          :key='item.id'
          @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,
  getCourseInfoApi,
  getOrderListApi,
  getCouponListApi,
} 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 banner_bg from "../assets/yb/img_bg@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 Vue from "vue";
// import localStorage from '../util/localStorage';
export default {
  name: "index",
  components: {
    bottomTab,
    audioPage,
    [Popup.name]: Popup
  },
  data() {
    let that = this;
    return {
      banner_bg: banner_bg,
      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() {
    // debugger
    this.initPage();
    Toast.loading({
      mask: true,
      message: ""
    });
  },
  mounted() {
    let that = this;
    //课前预习点击提示
    this.unlook = localStorage.getItem("unlook");
    //处理横屏banner二维码渲染
    if (document.body.clientWidth > 700) {
      that.orientationchange = true;
    }
  },
  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) {
      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") {
        this.$sa.quick("trackHeatMap", this.$refs.qmitem);
        if (this.userCourse.is_free_course == 1) {
          window.location.href =
            "https://wx840a79781fa6f66d.h5.xiaoe-tech.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() {
      let json = {
        limit: 4,
        page: 1
      };
      bannerListApi(5, { limit: 2, 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() {
      // debugger
      let that = this;
      getCourseInfoApi().then(res => {
        //是否分配老师
        if (res.teacher_alias) {
          if (res.teacher_alias.substr(0, 1) != 1) {
            res.teacher_alias_flag = false;
          } else {
            res.teacher_alias_flag = true;
          }
        }
        this.userCourse = res;
        localStorage.setItem("userCourse", JSON.stringify(this.userCourse));
        this.$sa.track("viewHomepage", {});
        this.getBannerListApi();
        let course = res;
        // 无老师带用户
        if (!res.periods_list) {
          // 优惠券
          getCouponListApi(course.goods_id).then(res => {
            if (res.length) {
              this.couponInfo = res[0];
              this.$sa.track("view61index", {});
              if (this.pt) {
                document.body.scrollTop = 150;
                document.documentElement.scrollTop = 150;
                window.pageYOffset = 150;
              }
            }
            if (this.$store.state.couponShadow) {
              this.couponShadow = true;
              this.$sa.track("view61tipshadow", {});
              this.$store.dispatch("setCouponShadow", false);
            }
            if (
              !res.length &&
              Date.parse(new Date()) < Date.parse(new Date("2019/6/4")) &&
              !course.automation_id
            ) {
              if (localStorageFn.get("liuyi") == 0) {
                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"))
          ) {
            this.liuyuActivity = false;
            localStorageFn.set("liuyi", 1);
          }
        }
        if (res.goods_id && !res.automation_id) {
          // 无课
          // this.userCourse.start_periods_id='-1'
          this.bannerData = res;
          this.$refs.bottomTab.setBtn();
        } 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.$refs.bottomTab.setBtn();
            let ownDetail = JSON.parse(localStorage.getItem("userDesc"));
            if (ownDetail.family_user != 1) {
              if (!sessionStorage.getItem("frist") &&this.bannerData.start_periods_id) {
                sessionStorage.setItem("frist", true);
                this.$router.push({
                  name: "map",
                  query: {
                    course_type: res.start_periods_course_type
                  }
                });
              }
            }
            this.$nextTick(() => {map
              if (document.getElementById("capture33")) {
                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", 1.0);
                    this.canvasData = dataURL;
                  })
                  .catch(res => {});
              }
            });
            window.addEventListener(
              "orientationchange",
              function() {
                if(that.html2canvas){
                  setTimeout(function() {
                  that.canvasData = "";
                  that.$nextTick(() => {
                    html2canvas(document.getElementById("capture33"), {
                      async: true,
                      scrollX: 0,
                      scale: 3,
                      letterRendering: true,
                      useCORS: true
                    })
                      .then(canvas => {
                        that.divShow = false;
                        let dataURL = canvas.toDataURL("image/jpg", 1.0);
                        that.canvasData = dataURL;
                      })
                      .catch(res => {});
                  });
                }, 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.$refs.bottomTab.setBtn();
          } else if (res.automation_id.length) {
            // 自化课
            this.bannerData = res;
            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 => {
          if (el.buy_type == 2 && el.status == 1) {
            if (!sessionStorage.getItem("orderShadow")) {
              this.pt = true;
            }
            if(el.group_info){
              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;
      });
    },
    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: {
              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.userCourse.is_free_course == 1) {
        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/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;
      }
    }
    .titleSpc {
      .title2 {
        font-size: 32 * @toVw;
        margin-top: 10 * @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;
      }
    }
    .spc {
      background: transparent;
      animation: none;
      width: 168 * @toVw;
      p {
        font-size: 19 * @toVw;
        text-align: center;
        margin-top: 3 * @toVw;
        font-weight: bold;
      }
    }
    .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;
    }
  }
}
.zb {
  height: 265 * @toVw;
  overflow: hidden;
}
.med {
  .commonTitle {
    .line {
      background: #4a90e2;
    }
  }
  .content {
    display: flex;
    display: -webkit-flex;
    text-align: center;
    flex-wrap: wrap;
    height: 212 * @toVw;
    overflow: hidden;
    .contentItem {
      width: 48%;
      height: 191 * @toVw;
      margin-top: 18 * @toVw;
      margin-left: 1%;
      margin-right: 1%;
      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: 12 * @toVw 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;
      }
    }
  }
  .zb {
    height: auto;
  }
  .med {
    .content {
      display: flex;
      display: -webkit-flex;
      text-align: center;
      flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      height: 299 * @toVw;
      // overflow: hidden;
      .contentItem {
        flex: 1;
        justify-content: space-between;
        height: 257 * @toVw;
        margin-top: 18 * @toVw;
        position: relative;
        margin-left: 0;
        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>