<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>