<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" @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">快去听课吧~</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">快去听课吧~</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>
<bottom-tab></bottom-tab>
</div>
</template>
<script>
import {
getCourseListApi,
getLessonDetailApi,
getLessonListApi,
getCourseInfoApi,
getAutomationApi,
getAutomationCouponApi,
payApi,
getGoodsDetailApi
} 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 "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { Toast, Actionsheet } from "vant";
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 {
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:{}
};
},
created() {
Toast.loading({
mask: true,
message: ''
});
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: {
// 页面初始化
initPage() {
sessionStorage.setItem("frist", true);
if (localStorage.getItem("userCourse")) {
this.userCourse = JSON.parse(localStorage.getItem("userCourse"));
} else {
getCourseInfoApi().then(res => {
localStorage.setItem("userCourse", "");
this.userCourse = Object.assign({}, res);
localStorage.setItem("userCourse", JSON.stringify(this.userCourse));
});
}
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
})
Toast.clear()
// debugger
} 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
}
})
}
}
}
// 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)
// console.log(res)
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";
// 精灵图
.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>