<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>剩余拼团时间 <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>