<template>
<div>
<van-actionsheet v-model="actionsheetShow" :actions="actions" @select="onSelect"/>
<div class="course_title" @click="actionsheetShow=true">
{{secActions.name}}
<i class="iconfont icon-below-s"></i>
</div>
<!--竖屏 课程-->
<div class="lesson-block">
<!-- <div v-if="noLesson" class="noLesson">
<img :src="errorURL">
<div>暂无课程</div>
</div>-->
<div v-if="lessonList1.length" class="card-block">
<img :src="lessonList1[0].cover+'?imageslim'">
<!-- {{lessonList1[0].name}} -->
<div :class="'card-li cid'+item.id" v-for="(item,x) in lessonList1" :key="x" @click="showDia(item,x+1)" >
<div :class="{textblock:true,gray:!item.open}">
<div class="title">{{item.name | substr10}}</div>
<div class="tips">
<span v-if="item.open&&x==0">点击看一看 英语启蒙很轻松</span>
<span v-if="item.open&&x==1">每天10分钟 英语变母语</span>
<span v-if="item.open&&x==2">抓住宝宝英语启蒙黄金期</span>
<span v-if="!item.open">学完上节课得2颗星后即可解锁~</span>
</div>
</div>
<div class="star-block">
<img class="star-img" :src="star_act" v-for="s in item.star_num">
<img class="star-img" :src="star_def" v-for="s in 3-item.star_num">
</div>
<div class="icon-block">
<i
:class="{
map:true,
right:item.open,
clock:!item.open
}"
></i>
</div>
</div>
</div>
<div class="couponBox" @click="tobuy" ref="couponBox" v-if="couponInfo.coupon_list&&couponInfo.coupon_list.length&&lessonList2.length&&!userCourse.periods_list" >
<img class="bg" :src="couponBg" alt>
<div class="content">
<div class="top" v-if="couponInfo.coupon_list[0].deadline_at!='0000-00-00 00:00:00'">
<div class="title">
恭喜您获得
<span>{{couponInfo.coupon_list[0].money/100}}元</span> 抵用券
</div>
<div class="text-content last">
剩余
<span>{{h}}</span>:
<span>{{m}}</span>:
<span>{{s}}</span>
到期
</div>
</div>
<div
class="top untime"
v-if="couponInfo.coupon_list[0].deadline_at=='0000-00-00 00:00:00'"
>
<div class="title">
恭喜您获得
<span>{{couponInfo.coupon_list[0].money/100}}元</span> 抵用券
</div>
</div>
<div class="bottom">
<img class="logo" :src="couponInfo.goods_desc.img[0].url" alt>
<div class="center">
<p class="title">{{couponInfo.goods_desc.course_title}}</p>
<p class="tip">{{couponInfo.goods_desc.tips}}</p>
<div class="price">
券后价
<span
class="now"
>￥{{(couponInfo.current_price-couponInfo.coupon_list[0].money)/100}}</span>
<span class="old">￥{{couponInfo.current_price/100}}</span>
</div>
</div>
<div class="btn">立即抢</div>
</div>
</div>
</div>
<div v-if="lessonList2.length>0&&card2" class="card-block card2">
<img :src="lessonList2[0].cover+'?imageslim'">
<!-- 一元解锁，暂不使用 -->
<div class="shadowbox" ref="shadowbox" @click="goToBuyPage" v-if="!lessonList2[0].open&&oneGoodinfo.goods_desc">
<div class="shadow"></div>
<div class="content">
<p>更多课程福利</p>
<div>
{{oneGoodinfo.goods_desc.tips}}
<span>1元解锁</span>
</div>
</div>
</div>
<div :class="'card-li cid'+item.id" v-for="(item,x) in lessonList2" @click="showDia(item,x+1)">
<div :class="{textblock:true,gray:!item.open}">
<div class="title">{{item.name | substr10}}</div>
<div class="tips">
<span v-if="item.open&&x==0">比动画片更有趣哦</span>
<span v-if="item.open&&x==1">让0基础宝宝开口说英语</span>
<span v-if="item.open&&x==2">继续坚持 学无止境</span>
<span v-if="!item.open">学完上节课得2颗星后即可解锁~</span>
</div>
</div>
<div class="star-block" v-if="item.star_num!=null">
<img class="star-img" :src="star_act" v-for="s in item.star_num">
<img class="star-img" :src="star_def" v-for="s in 3-item.star_num">
</div>
<div class="icon-block">
<i :class="{
map:true,
right:item.open,
clock:!item.open}"></i>
</div>
</div>
</div>
</div>
<!-- <div v-if="!secActions.is_start_course" class="unStart">
<img :src="mok4" alt>
<p>您的课程尚未开始</p>
<div>课程开始时间：{{secActions.start_at}}</div>
</div>-->
<van-popup v-model="popupVisible">
<div v-if="thisLesson" class="popup-block">
<i class="map close" @click="popupVisible=false"></i>
<div class="header" :style="{backgroundImage:`url(${diaBGI})`}">
<div class="title">{{thisLesson.title}}</div>
<div class="tips" v-if="thisLesson.content.tips">{{thisLesson.content.tips.content}}</div>
<div class="tips" v-if="!thisLesson.content.tips">DAY {{thisLesson.day}}</div>
</div>
<div class="content" v-if="thisLesson.content.tips">
<div class="tips-title">{{thisLesson.content.tips.title1}}</div>
<div class="title-content">
<ul>
<li style="text-align: center" v-for="data in splitContent">{{data}}</li>
</ul>
</div>
<div class="tips-title">{{thisLesson.content.tips.title2}}</div>
<div class="title-content">{{thisLesson.content.tips.title2_content}}</div>
</div>
<div class="content" v-if="!thisLesson.content.tips">
<div style="color: #cccccc;padding: 21.3333vw 0;font-size: 5.3333vw;">快去开始课程吧!</div>
</div>
<div>
<i class="map goLesson" @click="goDetail()"></i>
</div>
</div>
</van-popup>
<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>
<div @click="liuyiBtn" v-if="userCourse.goods_id!=null&&userCourse.goods_id>0&&liuyuActivity" ref="liuyiBtn" class="liuyiBtn">
<img :src="imgUrl.popup_btn" alt>
</div>
<bottom-tab></bottom-tab>
</div>
</template>
<script>
import {
getCourseListApi,
getLessonDetailApi,
getLessonListApi,
getCourseInfoApi,
getAutomationApi,
getAutomationCouponApi,
payApi,
getGoodsDetailApi,
getCouponListApi
} from "../../service/api";
import star_act from "../../assets/newLesson/star_act.png";
import star_def from "../../assets/newLesson/star_def.png";
import diaBGI from "../../assets/newLesson/diaBG.png";
import couponBg from "../../assets/bg_coupon@2x.png";
import mok4 from "../../assets/newLesson/mok4.png";
import { IndexImage } from "../../util/imgUrl";
// import cookie from "../../util/cookie";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { Toast, Actionsheet } from "vant";
import localStorageFn from "../../util/localStorage";
import bottomTab from "../public/bottomTab";
import errorURL from "../../assets/error.png";
export default {
name: "mapDefault",
components: {
swiper,
swiperSlide,
bottomTab,
[Actionsheet.name]: Actionsheet
},
data() {
let that = this;
return {
liuyucoolie: false,
imgUrl: IndexImage,
actions: [],
secActions: {},
actionsheetShow: false,
star_act: star_act,
star_def: star_def,
shopType: this.$route.query.course_type,
diaBGI: diaBGI,
mok4: mok4,
goodsID: "",
themeName: "",
course_id: "",
push_time: "",
course_name: "",
periods_id: this.$route.query.periods_id,
parent_category_id: this.$route.query.parent_category_id,
unitList: [],
more: false,
errorURL: errorURL,
couponBg: couponBg,
popupVisible: false,
lessonList: [],
lessonList1: [],
lessonList2: [],
lesson: "",
classID: "",
noLesson: false,
hpLessonList: [],
thisLesson: null,
card2: true,
swiperOption: {
width: window.innerWidth * 0.25,
on: {
slideChangeTransitionStart: function() {
if (
this.activeIndex >= that.swiper.slides.length - 4 &&
that.more
) {
that.swiper.slidePrev();
}
},
resize: function() {
this.params.width = window.innerWidth * 0.25;
this.update(true);
}
},
pagination: {
el: ".swiper-pagination"
}
},
swiperOption2: {
slidesPerView: 5,
navigation: {
nextEl: ".banner-right",
prevEl: ".banner-left"
},
on: {
slideChangeTransitionStart: function() {
if (
this.activeIndex == that.swiper2.slides.length - 5 &&
that.more
) {
that.swiper2.slidePrev();
}
}
},
pagination: {
el: ".swiper-pagination"
}
},
swiperOptionLesson: {
slidesPerView: "auto",
spaceBetween: 20
},
userCourse: {
periods_list: []
},
couponInfo: {},
h: 0,
m: 0,
s: 0,
deadline: "",
oneGoodinfo: {},
liuyuActivity: true
};
},
created() {
Toast.loading({
mask: true,
message: ""
});
if (localStorage.getItem("userCourse")) {
this.userCourse = JSON.parse(localStorage.getItem("userCourse"));
this.initPage();
} else {
getCourseInfoApi().then(res => {
localStorage.setItem("userCourse", "");
this.userCourse = Object.assign({}, res);
localStorage.setItem("userCourse", JSON.stringify(this.userCourse));
this.initPage();
});
}
this.$sa.track("viewUnlocklessonpage", {});
},
filters: {
substr10(value) {
return value.substr(5, 4);
}
},
computed: {
swiper() {
if (this.shopType == 0) {
return this.$refs.mySwiper.swiper;
} else {
return "";
}
},
swiper2() {
if (this.shopType == 0) {
return this.$refs.mySwiper2.swiper;
} else {
return "";
}
},
swiperLesson() {
return this.$refs.mySwiperLesson.swiper;
},
splitContent() {
let arr = [];
if (this.thisLesson.content.tips.title1_content) {
arr = this.thisLesson.content.tips.title1_content.split("\n");
}
return arr;
}
},
methods: {
toActivity() {
this.$sa.quick('trackHeatMap',this.$refs.toActivity)
this.$router.push({
name: "liuyi",
query: {}
});
},
liuyiBtn() {
this.$sa.quick('trackHeatMap',this.$refs.liuyiBtn)
this.$router.push({
name: "liuyi",
query: {}
});
},
// 页面初始化
initPage() {
if (Date.parse(new Date()) > Date.parse(new Date("2019/6/4 00:00:00"))) {
this.liuyuActivity = false;
}
sessionStorage.setItem("frist", true);
if (
this.userCourse.automation_id &&
this.userCourse.automation_id.length > 0
) {
let item = {};
item.name = "VIP高效体验营";
item.id = this.userCourse.automation_id[0];
this.actions.push(item);
this.secActions = item;
}
if (this.userCourse.periods_list) {
this.userCourse.periods_list.forEach(el => {
el.name = el.course_title;
this.actions.push(el);
});
}
// 高亮
this.actions.forEach(el => {
el.className = "";
if (el.id == this.secActions.id) {
el.className = "activit";
}
});
console.log(this.userCourse);
// debugger
this.getLessonList();
// 优惠券商品
if (!this.userCourse.periods_list) {
this.getAutomationCoupon();
}
},
// 获取课程
getLessonList(res) {
if (
this.userCourse.can_buy_goods_id &&
this.userCourse.can_buy_goods_id.length
) {
getAutomationApi("goods", this.userCourse.can_buy_goods_id[0]).then(
res => {
this.lessonList2 = res.can_watch_list;
// setTimeout(()=>{
// let moneyDom = document.getElementsByClassName('card2');
// if(moneyDom.length>0){
// window.scrollTo(0,moneyDom[0].offsetTop-220);
// }
// },500)
// debugger
Toast.clear();
}
);
getGoodsDetailApi(this.userCourse.can_buy_goods_id).then(res => {
this.oneGoodinfo = res;
this.oneGoodinfo.goods_desc = JSON.parse(res.goods_desc);
// debugger
});
if (this.userCourse.periods_list) {
this.card2 = false;
}
}
if (this.userCourse.automation_id) {
this.userCourse.automation_id.forEach((el, index) => {
getAutomationApi("automation", el).then(res => {
Toast.clear();
// debugger
// if (index == 1) {
// // 解锁01元课的情况
// this.lessonList2 = res.can_watch_list;
// this.lessonList2.forEach(el => {
// el.open = true;
// });
// } else {
// 1元激活后所有课都可以看
// if (this.userCourse.automation_id.length == 2) {
// this.lessonList1 = res.can_watch_list;
// this.lessonList1.forEach(el => {
// el.open = true;
// });
// } else {
// if (res.can_watch_list.length == 6) {
// res.can_watch_list.forEach((el, index) => {
// if (index == 0) {
// el.open = true;
// }
// if (index < 3) {
// this.lessonList1.push(el);
// if (el.star_num >= 2 && res.can_watch_list[index + 1]) {
// // debugger
// res.can_watch_list[index + 1].open = true;
// }
// console.log(this.lessonList1);
// } else {
// this.lessonList2.push(el);
// }
// });
// if (this.lessonList1[2].star_num >= 2) {
// this.lessonList2.forEach(el => {
// el.open = true;
// });
// }
// } else {
// this.lessonList1 = res.can_watch_list;
// this.lessonList1.forEach((el, index) => {
// if (index == 0) {
// el.open = true;
// }
// if (el.star_num >= 2 && this.lessonList1[index + 1]) {
// this.lessonList1[index + 1].open = true;
// }
// });
// }
// }
// 关闭锁
// }
res.can_watch_list.forEach((el,index)=>{
if(index<3){
el.open = true;
this.lessonList1.push(el)
}else{
el.open = true;
this.lessonList2.push(el)
}
})
// debugger
});
});
}
},
tobuy() {
this.$sa.quick("trackHeatMap", this.$refs.couponBox);
this.$router.push({
name: "buyDetail",
query: {
shopId: this.couponInfo.id
// invite_code: this.bannerData.invite_code,
}
});
},
getAutomationCoupon() {
getAutomationCouponApi().then(res => {
this.couponInfo = res;
this.couponInfo.goods_desc = JSON.parse(res.goods_desc);
// debugger
// console.log(res)
if (!res.coupon_list.length &&Date.parse(new Date()) < Date.parse(new Date("2019-6-4 00:00:00"))){
if (localStorageFn.get('liuyi')==0) {
this.liuyucoolie = 1;
localStorageFn.set('liuyi',1)
this.$sa.track("view61window", {
});
}
}
if (this.couponInfo.coupon_list.length) {
setTimeout(() => {
let moneyDom = document.getElementsByClassName("couponBox");
if (moneyDom.length > 0) {
// this.scroll_to(moneyDom[0].offsetParent.offsetTop)
window.scrollTo(0, moneyDom[0].offsetTop - 120);
}
}, 500);
this.leftTimer();
}
});
},
onSelect(item) {
this.actionsheetShow = false;
if (item.id == this.userCourse.automation_id[0]) {
this.$router.replace({
name: "secMap",
query: {}
});
} else {
this.$router.replace({
name: "map",
query: {
item: item
}
});
}
},
findUnit(data) {
return this.unitList.find(i => {
return i.category_id == data;
});
},
dateParse(dateString) {
var SEPARATOR_BAR = "-";
var SEPARATOR_SLASH = "/";
var SEPARATOR_DOT = ".";
var 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(compareDateString) {
var dateTime = new Date().getTime();
var compareDateTime = compareDateString.getTime();
if (compareDateTime > dateTime) {
return 1;
} else if (compareDateTime == dateTime) {
return 0;
} else {
return -1;
}
},
// 进入课程
goDetail() {
// 神策埋点 开始课程
this.$sa.track("StartCourse", {
elementID: this.thisLesson.id.toString(),
dayModule: this.thisLesson.domTitle.slice(0, 9),
weekName: this.thisLesson.domTitle.slice(
10,
this.thisLesson.domTitle.length
),
elementName:
this.thisLesson.domTitle.slice(0, 9) +
"-" +
this.thisLesson.domTitle.slice(10, this.thisLesson.domTitle.length),
themeID: this.parent_category_id,
themeName: this.themeName,
goodsID: this.goodsID,
classID: this.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.push_time).setHours(0, 0, 0, 0)
});
if (this.thisLesson.content.tips) {
let query = {
periods_id: "999999999",
category_id: this.thisLesson.categoryId,
elementId: this.thisLesson.id,
// elementId:undefined,
course_type: this.shopType,
parent_category_id: this.parent_category_id
};
let lessonData = JSON.parse(JSON.stringify(this.thisLesson));
lessonData.push_time = this.push_time;
lessonData.themeID = this.parent_category_id;
lessonData.themeName = this.themeName;
lessonData.goodsID = this.goodsID;
lessonData.classID = this.classID;
lessonData.nowTime = Date.parse(new Date());
localStorage.setItem("lessonDetail", JSON.stringify(lessonData));
console.log(query);
// debugger
this.$router.push({ name: "newLesson", query: query });
} else {
let query = {
periods_id: "999999999",
category_id: this.thisLesson.categoryId,
parent_category_id: this.parent_category_id,
element_id: this.thisLesson.id,
course_type: this.shopType,
type: "1"
};
this.$router.push({ name: "lesson", query: query });
}
},
// 显示课程弹窗
showDia(data, i) {
console.log(data);
if (data.open) {
// debugger
getLessonDetailApi("999999999", data.id, data.ele_id).then(res => {
res.content = JSON.parse(res.content);
this.thisLesson = res;
this.thisLesson.id = data.ele_id.toString();
this.thisLesson.categoryId = data.id;
this.thisLesson.domTitle = data.name;
this.thisLesson.day = i;
this.thisLesson.star_num = data.star_num;
this.popupVisible = true;
let query = {
periods_id: "999999999",
// periods_id:undefined,
category_id: this.thisLesson.categoryId,
elementId: this.thisLesson.id,
course_type: this.shopType,
parent_category_id: this.parent_category_id
};
this.$store.dispatch("setClassQuery", query);
sessionStorage.setItem("classQuery", JSON.stringify(query));
// 神策埋点 选择课时
this.$sa.track("selectElement", {
elementID: data.ele_id.toString(),
dayModule: data.name.slice(0, 9),
weekName: data.name.slice(10, data.name.length),
elementName:
data.name.slice(0, 9) +
"-" +
data.name.slice(10, data.name.length),
// themeID: this.parent_category_id.toString(),
// themeName: this.parent_category_id.toString(),
goodsID: this.goodsID,
classID: this.classID,
courseID: this.course_id.toString()
});
});
} else {
Toast("课程还未解锁哦");
}
},
scroll_to(offsetTop) {
let top = offsetTop - 200;
for (let i = 0; i < 30; i++) {
let scrollTop =
document.documentElement.scrollTop | document.body.scrollTop;
let Dvalue = scrollTop - top;
let time = i * 10;
setTimeout(() => {
document.documentElement.scrollTop = scrollTop - (Dvalue / 30) * i;
document.body.scrollTop = scrollTop - (Dvalue / 30) * i;
}, time);
}
},
leftTimer() {
if (this.couponInfo.coupon_list.length) {
this.deadline = this.couponInfo.coupon_list[0].deadline_at;
}
// console.log(this.deadline)
let leftTime = new Date(this.deadline.replace(/\-/g, "/")) - new Date(); //计算剩余的毫秒数
// console.log(leftTime / 1000 / 60 / 60)
let hours = parseInt(leftTime / 1000 / 60 / 60, 10); //计算剩余的小时
let minutes = parseInt((leftTime / 1000 / 60) % 60, 10); //计算剩余的分钟
let seconds = parseInt((leftTime / 1000) % 60, 10); //计算剩余的秒数
hours = this.checkTime(hours);
minutes = this.checkTime(minutes);
seconds = this.checkTime(seconds);
this.h = hours > 0 ? hours : "00";
this.m = minutes > 0 ? minutes : "00";
this.s = seconds > 0 ? seconds : "00";
window.setTimeout(this.leftTimer, 1000);
},
checkTime(i) {
//将0-9的数字前面加上0，例1变为01
if (i < 10) {
i = "0" + i;
}
return i;
},
goToBuyPage() {
this.$sa.quick("trackHeatMap", this.$refs.shadowbox);
let json = { goods_id: this.userCourse.can_buy_goods_id[0] };
if (window.location.href.indexOf("gdt_vid") > -1) {
json.gdt_vid = this.$route.query.gdt_vid;
}
console.log(this.$route.query.gdt_vid);
if (window.location.href.indexOf("cct_user_id") > -1) {
json.cct_user_id = this.$route.query.cct_user_id;
}
// this.orderFlag = false;
payApi(json)
.then(res => {
// console.log(res)
if (res.out_trade_no && !res.appId) {
if (this.groupDetail.goods_type === 2 && !this.type) {
this.$router.push({
name: "success",
query: {
out_trade_no: res.out_trade_no,
invite_code: this.invite_code
}
});
} else if (this.groupDetail.goods_type === 4) {
this.$router.push({
name: "saleSuccess",
query: {
out_trade_no: res.out_trade_no,
invite_code: this.invite_code
}
});
} else {
this.$router.push({
name: "buySuccess",
query: {
out_trade_no: res.out_trade_no,
invite_code: this.invite_code
}
});
}
} else {
let that = this;
this.orderNo = res.out_trade_no;
this.jsApiParameters = res;
wx.miniProgram.getEnv(function(res) {
if (res.miniprogram) {
let payParam = encodeURIComponent(JSON.stringify(json));
wx.miniProgram.navigateTo({
url: `pages/wxPay/main?payParam=${payParam}`
});
} else if (typeof WeixinJSBridge === "undefined") {
if (document.addEventListener) {
document.addEventListener(
"WeixinJSBridgeReady",
that.jsApiCall,
false
);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", that.jsApiCall);
document.attachEvent("onWeixinJSBridgeReady", that.jsApiCall);
}
} else {
that.jsApiCall();
}
});
}
})
.catch(res => {
// alert(res)
// this.orderFlag = true;
});
// this.$nextTick(()=>{
// this.payFlag=true;
// });
},
jsApiCall() {
let that = this;
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
that.jsApiParameters,
function(res) {
// that.orderFlag = true;
if (res.err_msg === "get_brand_wcpay_request:ok") {
// 支付成功后处理
Toast("支付成功");
setTimeout(function() {
getCourseInfoApi().then(res => {
localStorage.setItem("userCourse", "");
that.userCourse = Object.assign({}, res);
localStorage.setItem(
"userCourse",
JSON.stringify(that.userCourse)
);
that.initPage();
});
}, 1000);
// alert(2)
}
if (res.err_msg === "get_brand_wcpay_request:fail") {
}
if (res.err_msg === "get_brand_wcpay_request:cancel") {
// Toast('取消购买')
}
}
);
}
}
};
</script>
<style scoped lang="less">
@import "../../util/public";
.liuyudialog{
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: 105* @toVw;
right: 10* @toVw;
z-index: 2003;
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);
}
}
// 精灵图
.map{background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/map.png') no-repeat;background-size:136*@toVw 207*@toVw}
.defultStar{height:20*@toVw;width:20*@toVw;background-position:0 0;;display: inline-block}
.right{height:20*@toVw;width:20*@toVw;background-position:0 -20*@toVw;display: inline-block}
.close{position:absolute;top:-11*@toVw;right: -32*@toVw ;height:20*@toVw;width:20*@toVw;background-position:0 -40*@toVw;display: inline-block}
.actStar{height:20*@toVw;width:20*@toVw;background-position:0 -60*@toVw;display: inline-block}
.clock{height:28*@toVw;width:28*@toVw;background-position:0 -80*@toVw;display: inline-block}
.money{height:40*@toVw;width:40*@toVw;background-position:0 -108*@toVw;display: inline-block;animation: dodge 1s infinite;}
.goLesson{height:59*@toVw;width:136*@toVw;background-position:0 -148*@toVw;display: inline-block;margin-top:15*@toVw;margin-bottom: 10*@toVw }
.van-actionsheet{
.activit{color: yellowgreen;}
}
.couponBox{padding: 0 19*@toVw;position: relative;
.bg{width: 100%;}
.content{
position: absolute;top: 0;
color: white;
width: 339*@toVw;
.top{
padding-left: 74*@toVw;
padding-top: 21*@toVw;
height: 48*@toVw;
.text-content{
// position: absolute;
// bottom: -8px;
height: 19*@toVw;
line-height: 19*@toVw;
left: 50%;
margin-top: 7*@toVw;
font-size: 17*@toVw;
&.last{
font-size: 12px;
span{
display: inline-block;
background: #F83534;
position: relative;
width:1.6em;
height: 1.6em;
line-height: 1.6em;
border-radius: 3px;
color: white;
margin: 0 5px;
font-size: 12px;
text-align: center;
}
}
}
}
.untime{padding: 32*@toVw 0 40*@toVw 74*@toVw;box-sizing: border-box;}
.bottom{
padding: 34*@toVw 9*@toVw 0 17*@toVw;
display: flex;
display: -webkit-flex;
justify-content: space-between;
.logo{width: 70*@toVw;height: 70*@toVw; }
.center{
width: 135*@toVw;
p{width: 155*@toVw;overflow: hidden;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tip{font-size: 12*@toVw;line-height: 24*@toVw;}
.price{font-size:12*@toVw;margin-top: 6*@toVw;
.now{font-size: 15*@toVw;}
.old{text-decoration:line-through;font-size: 12*@toVw;}
}
}
.btn{border-radius: 15*@toVw;width: 70*@toVw;height: 30*@toVw;background: #FF4F59;margin-top: 40*@toVw;
line-height:30*@toVw;text-align: center;font-size: 13*@toVw; }
}
}
}
.unStart{
text-align: center;
img{width:300*@toVw; }
p{line-height: 22px;font-size: 16px;color: #666666;}
div{width:250*@toVw;height: 40*@toVw;line-height:40*@toVw;background: #40A9FF;color: white;border-radius: 20*@toVw;margin-top: 72*@toVw }
}
// 主题列表
.noLesson{
margin: 20*@toVw;
text-align: center;
img{
width: 80%;
}
}
.btn-conntent{
display: none;
}
.line{
position: absolute;
right: 0;
width: 1px;
background: #eeeeee;
top: 15*@toVw;
bottom: 15*@toVw;
}
.lesson-block-hp{
display: none;
}
.course_title{font-size: 20px;padding: 10*@toVw 20*@toVw;position: fixed;top: 0;width: 100%;background: white;z-index: 1000;
border-bottom: 1px solid #eeeeee;}
.unit-block{
box-shadow:0*@toVw 1*@toVw 4*@toVw 0*@toVw rgba(204,204,204,0.5);
width: 100%;
position: fixed;
background: white;
z-index: 2;
top: 0;
left: 0;
.banner2{
display: none;
}
.unit-li{
width: 68 * @toVw;
text-align: center;
margin-top: 2.6666vw;
height:60 * @toVw;
border-radius:8 * @toVw 8 * @toVw 0*@toVw 0*@toVw;
font-size:10* @toVw;
font-family:PingFangSC-Semibold;
font-weight:600;
padding-top: 12 * @toVw;
color:rgba(102,102,102,1);
line-height:20* @toVw;
img{
width: 28*@toVw;
height: 28*@toVw;
}
&.active{
background: #60ADF0;
color: #ffffff;
}
}
}
// 课包样式
.lesson-block{
width: 100%;
margin-top: 40*@toVw;
padding-bottom: 50*@toVw;
overflow: auto;
-webkit-overflow-scrolling:touch;
.card-block{
box-shadow:0* @toVw 2* @toVw 5* @toVw 1* @toVw rgba(153,153,153,0.56);
margin: 20 * @toVw;
border-radius: 8*@toVw;
overflow: hidden;
position: relative;
.shadowbox{
position: absolute;
top: 0;
width:100% ;
height: 140*@toVw;
.shadow{background:rgba(0,0,0,0.6);position: absolute;width:100% ;border-radius: 8*@toVw 8*@toVw 0 0;
height: 140*@toVw;}
.content{position: absolute;width:100% ;z-index: 1;color: white;
height: 140*@toVw;
p{font-size: 12 * @toVw;margin-top: 51 * @toVw;margin-left:19 * @toVw; }
div{font-size: 17 * @toVw; margin: 10 * @toVw;border: 1px solid white;border-radius: 19 * @toVw;
width: 313 * @toVw;height: 38 * @toVw;
line-height:38 * @toVw;
text-indent: 9 * @toVw;
span{display: inline-block;width: 76 * @toVw;
height: 38* @toVw;background: #FF4F59;
float: right;
border-radius: 19*@toVw;
}
}
}
}
img{
width: 100%;
height: 140 *@toVw;
border-radius: 8*@toVw 8*@toVw 0 0 ;
}
.card-li{
display: flex;
display: -webkit-flex;
justify-content: space-between;
margin: auto;
padding: 10 * @toVw;
position: relative;
border-bottom: 1 * @toVw solid #EEEEEE;
.text-block{
margin-left: 0;
}
.textblock{
margin-left: 0;
}
.star-block{
img{
width: 20*@toVw;
height: 20*@toVw;
margin-left: 3*@toVw;
}
}
.icon-block{
margin: auto 0;
width: 30*@toVw;
text-align: center;
}
.clock-block{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(255,255,255,0.8);
text-align: center;
font-size:12*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
padding: 10*@toVw;
}
.title{
font-size:16*@toVw;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(0,0,0,1);
line-height:28*@toVw;
}
.tips{
font-size:14*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
min-width: 170 * @toVw;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
color:rgba(102,102,102,1);
line-height:20*@toVw;
}
}
.gray{
.title{
color:#999999;
}
.tips{
color:#999999;
}
}
}
}
.nounit{
margin-top: 40*@toVw;
}
// 弹窗样式
.popup-block{
text-align: center;
background: white;
border-radius: 8*@toVw;
width: 276 * @toVw;
.header{
width: 276 * @toVw;
height: 137 * @toVw;
padding-top: 36 * @toVw;
background-size: 100% 100%;
position: relative;
.title{
text-align: center;
font-size:24*@toVw;
font-family:Helvetica-Bold;
font-weight:bold;
padding: 0 20*@toVw;
color:rgba(255,255,255,1);
line-height:26*@toVw;
}
.tips{
width:92*@toVw;
height:36*@toVw;
background: rgba(0,0,0,0.2);
text-align: center;
border-radius: 4*@toVw;
position: absolute;
left: 50%;
margin-left: -46*@toVw;
bottom: 20*@toVw;
line-height: 36 * @toVw;
font-size:16*@toVw;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(255,255,255,1);
}
}
.content{
padding-top: 14*@toVw;
.tips-title{
height:25*@toVw;
width: fit-content;
margin: 12*@toVw auto 10*@toVw auto;
font-size:16*@toVw;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(145,237,250,1);
line-height:25*@toVw;
display: block;
border-radius: 1000*@toVw;
padding: 3*@toVw 18*@toVw;
border: 2*@toVw solid #91EDFA;
}
.title-content {
word-break: break-all;
padding: 0 18*@toVw;
font-size: 14*@toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: #666666;
line-height: 17*@toVw;
ul{
margin: 0;
padding: 0;
font-size:14*@toVw;
height:58*@toVw;
overflow: hidden;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
line-height:20*@toVw;
list-style-type:none;
&:after{
content: '';
display: block;
clear: both;
}
li{
width: 50%;
float: left;
text-align: left;
}
}
}
}
}
@keyframes dodge
{
0%{
transform:scale(0.9,0.9)
}
50%{
transform:scale(1.1,1.1)
}
100%{
transform:scale(0.9,0.9)
}
}
@keyframes dodgehp
{
0%{
transform:scale(0.5,0.5)
}
50%{
transform:scale(0.7,0.7)
}
100%{
transform:scale(0.5,0.5)
}
}
</style>