<template> <div> <div class="unit-block"> <!--竖屏 主题栏--> <swiper :options="swiperOption" class="banner" v-if="$route.query.course_type==0" ref="mySwiper"> <swiper-slide v-for="(data,index) in unitList" :key="index"> <div class="line"></div> <div :class="{'unit-li':true,active:data.category_id == parent_category_id}" @click="changeCateGory(data,data.category_id == parent_category_id)"> <div> <img :src="data.category_cover"> </div> {{data.category_name}} </div> </swiper-slide> <swiper-slide v-if="more"> <div class="line"></div> <div class="unit-li"> <div> <img :src="nextUnitUrl"> </div> <span style="color: #cccccc">敬请期待</span> </div> </swiper-slide> <swiper-slide v-for="a in 3-unitList.length > 0 ? 3-unitList.length : 0" :key="a*10"> <div class="unit-li"> <div> </div> </div> </swiper-slide> </swiper> <!--横屏主题栏--> <div class="btn-conntent banner-left"> <img :src="nextToURL" class=""> </div> <div class="btn-conntent banner-right"> <img :src="nextToURL" class=""> </div> <swiper :options="swiperOption2" class="banner2" v-if="$route.query.course_type==0" ref="mySwiper2"> <swiper-slide v-for="(data,index) in unitList" :key="index"> <div class="line"></div> <div :class="{'unit-li':true,active:data.category_id == parent_category_id}" @click="changeCateGory(data,data.category_id == parent_category_id)"> <img :src="data.category_cover"> <div>{{data.category_name}}</div> </div> </swiper-slide> <swiper-slide v-if="more"> <div class="line"></div> <div class="unit-li"> <div> <img :src="nextUnitUrl"> </div> <span style="color: #cccccc">敬请期待</span> </div> </swiper-slide> <swiper-slide v-for="a in 6-unitList.length > 0 ? 6-unitList.length : 0" :key="a*10"> <div class="unit-li"> <div> </div> </div> </swiper-slide> </swiper> </div> <!--竖屏 课程--> <div class="lesson-block"> <div v-if="noLesson" class="noLesson"> <img :src="errorURL" /> <div> 暂无课程 </div> </div> <div class="card-block" v-for="(data,index) in lessonList"> <img :src="data[0].cover+'?imageslim'"/> <div :class="'card-li cid'+item.id" v-for="(item,x) in data" @click="showDia(item,x+1)"> <div class="text-block"> <div class="title"> {{item.name | substr10}} </div> <div class="tips"> <span v-if="item.push_time !== '0000-00-00'"> 开课时间:{{item.push_time}}</span> <span v-if="item.push_time === '0000-00-00'">课程还未开始哦</span> </div> </div> <div class="star-block" v-if="item.push_time !== '0000-00-00'"> <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:index !== item.length-1 && item.push_time !== '0000-00-00', money:item.push_time !== '0000-00-00' && ((data[x+1] && data[x+1].push_time === '0000-00-00' || ( x === data.length-1 && lessonList[index+1] && lessonList[index+1][0].push_time === '0000-00-00'))|| ($route.query.course_type == 0 && findUnit(parent_category_id) && findUnit(parent_category_id).status === 2 || $route.query.course_type ==1 ) && x===data.length-1 && index == lessonList.length-1), clock:item.push_time === '0000-00-00' }"></i> </div> </div> </div> </div> <!--横屏 课程--> <div class="lesson-block-hp"> <swiper :options="swiperOptionLesson" class="lesson-sw" ref="mySwiperLesson"> <swiper-slide v-for="(item,x) in hpLessonList" :key="x" style="width: 50vh"> <div class="lesson-content-hp" @click="showDia(item)"> <div class="clock-hp" v-if="item.push_time === '0000-00-00'"> 等待开课 </div> <div class="lesson-day-hp">{{item.dayText}}</div> <div class="lesson-img-hp"><img :src="item.cover"></div> <div class="lesson-name-hp"> {{item.sub_title}} </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> <i class="map money" v-if="item.push_time !== '0000-00-00' && ((hpLessonList[x+1] && hpLessonList[x+1].push_time === '0000-00-00' || ($route.query.course_type == 0 && findUnit(parent_category_id) && findUnit(parent_category_id).status === 2 || $route.query.course_type ==1 ) && x===hpLessonList.length-1 ))"></i> </div> </swiper-slide> </swiper> </div> <guide-content v-if="popupVisible && thisLesson"/> <mt-popup v-model="popupVisible" style="background: transparent"> <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> </mt-popup> <bottom-tab></bottom-tab> <guide-page></guide-page> </div> </template> <script> import {getCourseListApi,getLessonDetailApi,getLessonListApi} from "../../service/api"; import star_act from '../../assets/newLesson/star_act.png' import star_def from '../../assets/newLesson/star_def.png' import guidePage from '../guide/map' import guideContent from '../guide/content' import diaBGI from '../../assets/newLesson/diaBG.png' import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' import {Indicator,Toast} from 'mint-ui' import bottomTab from '../public/bottomTab'; import errorURL from '../../assets/error.png' import nextUnitUrl from '../../assets/newLesson/nextUnit.png' import nextToURL from '../../assets/newLesson/index-to.png' export default { name: "mapDefault", components:{ swiper, swiperSlide, bottomTab, guidePage, guideContent }, data() { let that = this; return { star_act:star_act, star_def:star_def, shopType:this.$route.query.course_type, diaBGI:diaBGI, goodsID:'', themeName:'', course_id:'', push_time:'', course_name:'', nextUnitUrl:nextUnitUrl, periods_id:this.$route.query.periods_id, parent_category_id:this.$route.query.parent_category_id, unitList:[], more:false, errorURL:errorURL, popupVisible:false, lessonList:[], lesson:'', classID:'', noLesson:false, nextToURL:nextToURL, hpLessonList:[], thisLesson:null, 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, } } }, mounted(){ this.initPage(); }, filters:{ substr10(value){ return value.substr(0,10) } }, computed: { swiper() { if(this.$route.query.course_type == 0){ return this.$refs.mySwiper.swiper }else { return '' } }, swiper2() { if(this.$route.query.course_type == 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:{ 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(), elementName:this.thisLesson.title, 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:this.periods_id, category_id:this.thisLesson.categoryId, elementId:this.thisLesson.id, course_type:this.$route.query.course_type, 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; localStorage.setItem('lessonDetail',JSON.stringify(lessonData)); this.thisLesson.nowTime = Date.parse(new Date()); localStorage.setItem('lessonDetail',JSON.stringify(this.thisLesson)); this.$router.push({name:'newLesson',query:query}) }else{ let query = { periods_id:this.periods_id, category_id:this.thisLesson.categoryId, parent_category_id:this.parent_category_id, element_id:this.thisLesson.id, course_type:this.$route.query.course_type, type:'1' }; this.$router.push({name:'lesson',query:query}) } }, // 切换主题 changeCateGory(data,flag){ // 神策埋点 选择主题 this.themeName=data.category_name.toString() this.$sa.track('selectCategory',{ themeID:data.category_id.toString(), themeName:data.category_name.toString(), courseID:this.course_id.toString(), goodsID:this.goodsID, classID:this.classID }); if(!flag){ this.parent_category_id = data.category_id; this.$router.push({name:'map',query:{periods_id:this.periods_id,course_type:this.shopType,parent_category_id: this.parent_category_id}}); this.getLessonList(true) } }, // 显示课程弹窗 showDia(data,i){ if(data.push_time !== '0000-00-00'){ getLessonDetailApi(this.periods_id,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; this.push_time = data.push_time; // 神策埋点 选择课时 this.$sa.track('selectElement',{ elementID:data.ele_id.toString(), elementName:data.name.toString(), 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('课程还未开始哦') } }, // 页面初始化 initPage(){ this.getLessonList(); if (this.$route.query.course_type == 0){ this.getUnitList() } }, // 获取列表 getUnitList(){ getCourseListApi(this.periods_id).then(res=>{ this.unitList = []; res.forEach(i=>{ if(i.status === 1 || i.status === 2 ){ this.unitList.push(i) } }); if(res.find(i=>{return i.status === 0})){ this.more = true } this.$nextTick(()=>{ let index=null; let index2 = null; this.unitList.forEach((i,x)=>{ if(i.category_id ==this.parent_category_id){ this.themeName = i.category_name; if(x>=3){ index=x-3 }else{ index = 0 } if(x>=4){ index2 = x-4 }else{ index2 = 0 } } }); this.swiper.slideTo(index, 800, false); this.swiper2.slideTo(index2, 800, false) }) }) }, // 获取课程 getLessonList(data){ getLessonListApi(this.periods_id+'/v2',{category_id:this.parent_category_id}).then(res=>{ if(this.course_id !== res.periods_info.course_id){ this.course_id = res.periods_info.course_id; this.course_name = res.periods_info.title; this.goodsID=res.periods_info.goods_id; this.classID = res.periods_info.class_id; // 神策埋点 进入课程 this.$sa.track('EnterCourse',{ goodsID:res.periods_info.goods_id, classID:res.periods_info.class_id, }); } this.lessonList=[]; this.hpLessonList = []; this.noLesson = !!res.list.length<1; let list = []; let x = 0; for(let i = 0; i < res.list.length; i ++ ){ if(res.list[i].push_time !== '0000-00-00'){ x++ } if(res.list[i].name.indexOf('Day1')>-1 && list.length > 0){ this.lessonList.push(list); list = []; list.push(res.list[i]); }else{ list.push(res.list[i]); if(i==res.list.length-1){ this.lessonList.push(list); } } res.list[i].dayText = 'DAY '+list.length; this.hpLessonList.push(res.list[i]) } if(!data){ this.$nextTick(()=>{ if(x !== this.hpLessonList.length){ this.swiperLesson.slideTo(x-1) }else if(this.$route.query.category_id){ } if(this.$route.query.category_id){ let dom = document.getElementsByClassName('cid'+this.$route.query.category_id); if(dom.length>0 && dom[0].style.display !== 'none'){ this.scroll_to(dom[0].offsetTop); let data = null ; let index = 0; this.lessonList.forEach(i=>{ i.forEach((x,i)=>{ if(x.id == this.$route.query.category_id){ data = x; index = i+1 } }) }); this.showDia(data,index) } }else if(this.$route.query.back_id){ let dom = document.getElementsByClassName('cid'+this.$route.query.back_id); if(dom.length>0&& dom[0].style.display !== 'none'){ this.scroll_to(dom[0].offsetTop) } }else{ let moneyDom = document.getElementsByClassName('money'); if(moneyDom.length>0 && moneyDom[0].offsetLeft !== 0){ this.scroll_to(moneyDom[0].offsetParent.offsetTop) } } }) }else{ this.scroll_to(0); this.swiperLesson.slideTo(0) } }); }, 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); } } } } </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 } // 主题列表 .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; } .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:12* @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: 80*@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; img{ width: 100%; height: 140 *@toVw; border-radius: 8*@toVw 8*@toVw 0 0 ; } .card-li{ display: flex; justify-content: space-between; margin: auto; padding: 10 * @toVw; position: relative; border-bottom: 1 * @toVw solid #EEEEEE; .text-block{ 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; } } } } // 弹窗样式 .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; } } } } } @media screen and (orientation: landscape) { @toVw:100/667vw; .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: dodgehp 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 } // 主题列表 .noLesson{ margin: 20*@toVw; text-align: center; img{ width: 80%; } } .line{ position: absolute; right: 0; width: 1px; background: #eeeeee; top: 15*@toVw; bottom: 15*@toVw; } .lesson-block-hp{ display: block; } .unit-block{ box-shadow:0*@toVw 1*@toVw 4*@toVw 0*@toVw rgba(204,204,204,0.5); width: 100vw; position: fixed; background: white; z-index: 2; top: 0; left: 0; .banner{ display: none; } .btn-conntent{ position: absolute; display: block; height: 48*@toVw; text-align: center; line-height: 55*@toVw; width: 20*@toVw; &.banner-right{ img{transform: rotate(180deg)} top: 0; right: 5*@toVw; } &.banner-left{ top: 0; left: 5*@toVw; } } .banner2{ display: block; width: 90vw; } .unit-li{ display: flex; text-align: center; height:38 * @toVw; line-height: 38*@toVw; border-radius:8 * @toVw; font-size:12* @toVw; font-family:PingFangSC-Semibold; font-weight:600; padding-top:0; margin: 5*@toVw; width: auto; color:rgba(102,102,102,1); img{ width: 28*@toVw; height: 28*@toVw; } &.active{ background: #60ADF0; color: #ffffff; } } } // 课包样式 .lesson-block{ display: none; } .lesson-block-hp{ padding-top: 55*@toVw; background: #eeeeee; .lesson-content-hp{ .money{ position: absolute; right: 0; top: calc(88vh - 20.99550225vw); } .star-block{ img{ width: 20*@toVw; height: 20*@toVw; margin-left: 3*@toVw; } } display: inline-block; width: 100%; position: relative; margin: 0 5*@toVw; background: white; box-shadow:0*@toVw 2*@toVw 4*@toVw 0*@toVw rgba(0,0,0,0.2); height: calc(100vh - 13.29550225vw); border: 1*@toVw solid #000; border-radius: 8*@toVw; text-align: center; .clock-hp{ position: absolute; font-size: 12*@toVw; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8); border-radius: 8*@toVw; line-height: calc(100vh - 13.29550225vw); } .lesson-day-hp{ margin-top: 10*@toVw; width: 72*@toVw; border-radius: 4*@toVw; border: 1*@toVw solid #000; height: 24*@toVw; line-height: 24*@toVw; font-size:14*@toVw; font-family:PingFang-SC-Bold; font-weight:bold; color:rgba(0,0,0,1); } .lesson-img-hp{ margin: calc((100vh - 23.99550225vw) / 2 - 12vh) auto; width: 20vh; height: 20vh; border-radius: 100*@toVw; overflow: hidden; img{ height: 100%; } } .lesson-name-hp{ font-size:12*@toVw; font-family:PingFang-SC-Medium; max-height: 24*@toVw; line-height: 12*@toVw; overflow: hidden; font-weight:500; color:rgba(0,0,0,1); } } } // 弹窗样式 .popup-block{ text-align: center; background: white; border-radius: 8*@toVw; width: 493 * @toVw; height: 220*@toVw; position: relative; .header{ position: absolute; height: auto; right: 0; top: 0; bottom: 0; padding: 0; margin: 0; width: 215*@toVw; background-size: 100% 100%; .title{ margin-top: 10*@toVw; 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; top: 50*@toVw; line-height: 36 * @toVw; font-size:16*@toVw; font-family:PingFang-SC-Bold; font-weight:bold; color:rgba(255,255,255,1); } } .content{ position: absolute; left: 0; top: 0; bottom: 0; width: 278*@toVw; padding: 0; .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; } } } } .goLesson{ position: absolute; right: 40*@toVw; bottom: 10*@toVw; } } } @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>