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