Skip to content

H
h5-base
Commit ccd8e4be authored by wangwei's avatar wangwei
Browse files
Options

横屏处理

parent 1042e11f
Hide whitespace changes
Inline Side-by-side
Showing with 104 additions and 36 deletions
dev/index.html
View file @ ccd8e4be
...@@ -4,4 +4,4 @@ ...@@ -4,4 +4,4 @@
hm.src = "https://hm.baidu.com/hm.js?3d48322170d471164729cba5dfa4195f"; hm.src = "https://hm.baidu.com/hm.js?3d48322170d471164729cba5dfa4195f";
var s = document.getElementsByTagName("script")[0]; var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s); s.parentNode.insertBefore(hm, s);
})();</script><style></style><link href=/static/css/app.9f631d4069047acf4ee994f5d9f958c3.css rel=stylesheet></head><body><div id=app></div><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js></script><script type=text/javascript src=/static/js/manifest.5930fa7797b47762dd05.js></script><script type=text/javascript src=/static/js/vendor.f2f18cf9e4f348a6b3fa.js></script><script type=text/javascript src=/static/js/app.e97debad53d6c02e5060.js></script></body></html> })();</script><style></style><link href=/static/css/app.9f631d4069047acf4ee994f5d9f958c3.css rel=stylesheet></head><body><div id=app></div><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js></script><script type=text/javascript src=/static/js/manifest.c723cf0e7212466856e7.js></script><script type=text/javascript src=/static/js/vendor.f2f18cf9e4f348a6b3fa.js></script><script type=text/javascript src=/static/js/app.e97debad53d6c02e5060.js></script></body></html>
\ No newline at end of file \ No newline at end of file
src/components/map/index.vue
View file @ ccd8e4be
...@@ -31,10 +31,8 @@ ...@@ -31,10 +31,8 @@
<swiper-slide v-for="(data,index) in unitList" :key="index"> <swiper-slide v-for="(data,index) in unitList" :key="index">
<div class="line"></div> <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 :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">
<img :src="data.category_cover"> <div>{{data.category_name}}</div>
</div>
{{data.category_name}}
</div> </div>
</swiper-slide> </swiper-slide>
<swiper-slide v-if="more"> <swiper-slide v-if="more">
...@@ -90,7 +88,7 @@ ...@@ -90,7 +88,7 @@
</div> </div>
<div class="lesson-block-hp"> <div class="lesson-block-hp">
<swiper :options="swiperOptionLesson" class="lesson-sw" ref="mySwiperLesson"> <swiper :options="swiperOptionLesson" class="lesson-sw" ref="mySwiperLesson">
<swiper-slide v-for="(item,x) in hpLessonList" :key="x"> <swiper-slide v-for="(item,x) in hpLessonList" :key="x" style="width: 50vh">
<div class="lesson-content-hp" @click="showDia(item)"> <div class="lesson-content-hp" @click="showDia(item)">
<div class="clock-hp" v-if="item.push_time === '0000-00-00'"> <div class="clock-hp" v-if="item.push_time === '0000-00-00'">
尚未开课 尚未开课
...@@ -195,10 +193,10 @@ ...@@ -195,10 +193,10 @@
} }
}, },
swiperOption2: { swiperOption2: {
slidesPerView:7, slidesPerView:5,
on: { on: {
slideChangeTransitionStart: function(){ slideChangeTransitionStart: function(){
if(this.activeIndex == that.swiper2.slides.length - 7 && that.more){ if(this.activeIndex == that.swiper2.slides.length - 5 && that.more){
that.swiper2.slidePrev(); that.swiper2.slidePrev();
} }
}, },
...@@ -208,7 +206,8 @@ ...@@ -208,7 +206,8 @@
} }
}, },
swiperOptionLesson:{ swiperOptionLesson:{
slidesPerView:4, slidesPerView:'auto',
spaceBetween : 20,
} }
} }
}, },
...@@ -350,8 +349,8 @@ ...@@ -350,8 +349,8 @@
}else{ }else{
index = x index = x
} }
if(x>6){ if(x>4){
index2 = x-6 index2 = x-4
}else{ }else{
index2 = x index2 = x
} }
...@@ -359,7 +358,6 @@ ...@@ -359,7 +358,6 @@
}); });
this.swiper.slideTo(index, 800, false); this.swiper.slideTo(index, 800, false);
this.swiper2.slideTo(index2, 800, false) this.swiper2.slideTo(index2, 800, false)
}) })
}) })
}, },
...@@ -375,7 +373,6 @@ ...@@ -375,7 +373,6 @@
let list = []; let list = [];
let x = 0; let x = 0;
for(let i = 0; i < res.list.length; i ++ ){ for(let i = 0; i < res.list.length; i ++ ){
if(res.list[i].push_time !== '0000-00-00'){ if(res.list[i].push_time !== '0000-00-00'){
x++ x++
} }
...@@ -392,14 +389,16 @@ ...@@ -392,14 +389,16 @@
res.list[i].dayText = 'DAY '+list.length; res.list[i].dayText = 'DAY '+list.length;
this.hpLessonList.push(res.list[i]) this.hpLessonList.push(res.list[i])
} }
this.$nextTick(()=>{
this.swiperLesson.slideTo(x-1)
});
if(!data){ if(!data){
this.$nextTick(()=>{ 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){ if(this.$route.query.category_id){
let dom = document.getElementsByClassName('cid'+this.$route.query.category_id); let dom = document.getElementsByClassName('cid'+this.$route.query.category_id);
if(dom.length>0){ if(dom.length>0 && dom[0].style.display !== 'none'){
this.scroll_to(dom[0].offsetTop); this.scroll_to(dom[0].offsetTop);
let data = null ; let data = null ;
let index = 0; let index = 0;
...@@ -415,18 +414,19 @@ ...@@ -415,18 +414,19 @@
} }
}else if(this.$route.query.back_id){ }else if(this.$route.query.back_id){
let dom = document.getElementsByClassName('cid'+this.$route.query.back_id); let dom = document.getElementsByClassName('cid'+this.$route.query.back_id);
if(dom.length>0){ if(dom.length>0&& dom[0].style.display !== 'none'){
this.scroll_to(dom[0].offsetTop) this.scroll_to(dom[0].offsetTop)
} }
}else{ }else{
let moneyDom = document.getElementsByClassName('money'); let moneyDom = document.getElementsByClassName('money');
if(moneyDom.length>0){ if(moneyDom.length>0 && moneyDom[0].offsetLeft !== 0){
this.scroll_to(moneyDom[0].offsetParent.offsetTop) this.scroll_to(moneyDom[0].offsetParent.offsetTop)
} }
} }
}) })
}else{ }else{
this.scroll_to(0) this.scroll_to(0);
this.swiperLesson.slideTo(0)
} }
}); });
}, },
...@@ -709,17 +709,17 @@ ...@@ -709,17 +709,17 @@
display: block; display: block;
} }
.unit-li{ .unit-li{
width: 68 * @toVw; display: flex;
text-align: center; text-align: center;
margin-top: 5*@toVw; height:38 * @toVw;
height:60 * @toVw; line-height: 38*@toVw;
border-radius:8 * @toVw 8 * @toVw 0*@toVw 0*@toVw; border-radius:8 * @toVw;
font-size:12* @toVw; font-size:12* @toVw;
font-family:PingFangSC-Semibold; font-family:PingFangSC-Semibold;
font-weight:600; font-weight:600;
padding-top: 12 * @toVw; padding-top:0;
margin: 5*@toVw 0;
color:rgba(102,102,102,1); color:rgba(102,102,102,1);
line-height:20* @toVw;
img{ img{
width: 28*@toVw; width: 28*@toVw;
height: 28*@toVw; height: 28*@toVw;
...@@ -735,15 +735,16 @@ ...@@ -735,15 +735,16 @@
display: none; display: none;
} }
.lesson-block-hp{ .lesson-block-hp{
padding-top: 85*@toVw; padding-top: 55*@toVw;
background: #eeeeee; background: #eeeeee;
.lesson-content-hp{ .lesson-content-hp{
display: inline-block;
width: 100%;
position: relative; position: relative;
margin: 0 5*@toVw; margin: 0 5*@toVw;
max-width: 150*@toVw;
background: white; background: white;
box-shadow:0*@toVw 2*@toVw 4*@toVw 0*@toVw rgba(0,0,0,0.2); box-shadow:0*@toVw 2*@toVw 4*@toVw 0*@toVw rgba(0,0,0,0.2);
height: calc(100vh - 20.99550225vw); height: calc(100vh - 15.99550225vw);
border: 1*@toVw solid #000; border: 1*@toVw solid #000;
border-radius: 8*@toVw; border-radius: 8*@toVw;
text-align: center; text-align: center;
...@@ -794,7 +795,7 @@ ...@@ -794,7 +795,7 @@
background: white; background: white;
border-radius: 8*@toVw; border-radius: 8*@toVw;
width: 493 * @toVw; width: 493 * @toVw;
height: 241*@toVw; height: 220*@toVw;
position: relative; position: relative;
.header{ .header{
position: absolute; position: absolute;
......
src/components/newLesson/audio.vue
View file @ ccd8e4be
...@@ -731,7 +731,7 @@ ...@@ -731,7 +731,7 @@
} }
.change-block-HP{ .change-block-HP{
position: absolute; position: absolute;
bottom: 0; top: ~"calc(100vh - 12.5vw)";
display: block; display: block;
width: 78*@toVw; width: 78*@toVw;
img{ img{
......
src/components/newLesson/index.vue
View file @ ccd8e4be
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<i :class="{lessonHeader:true, defaultFun:nowShow !== 3,fun:nowShow===3}" @click="changeTitle(3)"></i> <i :class="{lessonHeader:true, defaultFun:nowShow !== 3,fun:nowShow===3}" @click="changeTitle(3)"></i>
</div> </div>
<!--横屏导航--> <!--横屏导航-->
<div class="header-h"> <div class="header-h" v-if="!nowLesson.old">
<i :class="{headerHP:true, defaultLook:nowShow !== 1,lookHP:nowShow===1}" @click="changeTitle(1)"></i> <i :class="{headerHP:true, defaultLook:nowShow !== 1,lookHP:nowShow===1}" @click="changeTitle(1)"></i>
<i :class="{headerHP:true, defaultPlay:nowShow !== 2,playHP:nowShow===2}" @click="changeTitle(2)"></i> <i :class="{headerHP:true, defaultPlay:nowShow !== 2,playHP:nowShow===2}" @click="changeTitle(2)"></i>
<i :class="{headerHP:true, defaultFun:nowShow !== 3,funHP:nowShow===3}" @click="changeTitle(3)"></i> <i :class="{headerHP:true, defaultFun:nowShow !== 3,funHP:nowShow===3}" @click="changeTitle(3)"></i>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<!--老课包返回按钮--> <!--老课包返回按钮-->
<img :src="backUrl" v-if="nowLesson.old" @click="backList" class="backImg"> <img :src="backUrl" v-if="nowLesson.old" @click="backList" class="backImg">
<!--内容--> <!--内容-->
<div :class="{'index-content-block':true,radius:nowShow !== 1}"> <div :class="{'index-content-block':true,radius:nowShow !== 1 || nowLesson.old}">
<look-block v-if="nowLesson.type === 'text'" :contentData="nowLesson"/> <look-block v-if="nowLesson.type === 'text'" :contentData="nowLesson"/>
<video-block v-if="nowLesson.type === 'video'" :contentData="nowLesson" :nowShow="nowShow"/> <video-block v-if="nowLesson.type === 'video'" :contentData="nowLesson" :nowShow="nowShow"/>
<audio-block v-if="nowLesson.type === 'audio'" :contentData="nowLesson"/> <audio-block v-if="nowLesson.type === 'audio'" :contentData="nowLesson"/>
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
box-shadow:0*@toVw 2*@toVw 3*@toVw 0*@toVw rgba(0,0,0,0.1); box-shadow:0*@toVw 2*@toVw 3*@toVw 0*@toVw rgba(0,0,0,0.1);
} }
.newLesson{ .newLesson{
background: #eeeeee; background: #f8f8f8;
} }
.backImg{ .backImg{
position: fixed; position: fixed;
...@@ -161,6 +161,13 @@ ...@@ -161,6 +161,13 @@
@media screen and (orientation: landscape) { @media screen and (orientation: landscape) {
@toVw:100/667vw; @toVw:100/667vw;
.backImg{
position: fixed;
bottom: 40*@toVw;
right: 20*@toVw;
z-index: 99999999;
width: 60*@toVw;
}
.lessonHeader{ .lessonHeader{
display: none; display: none;
} }
...@@ -213,6 +220,66 @@ ...@@ -213,6 +220,66 @@
} }
} }
} }
@media screen and (min-aspect-ratio: ~"20/8"){
@toVw:100/900vw;
.backImg{
position: fixed;
bottom: 40*@toVw;
right: 20*@toVw;
z-index: 99999999;
width: 60*@toVw;
}
.lessonHeader{
display: none;
}
.header{
display: none;
}
.actBanKuai{
background-color: white;
border: 1*@toVw solid transparent;
border-left-color: black;
border-top-color: black;
border-bottom-color: black;
border-radius: 8*@toVw 0 0 8*@toVw;
}
.headerHP{
background:url('/static/images/index-h.png') no-repeat;
background-size:62*@toVw 434*@toVw;
display: inline-block;
&.lookHP{height:62*@toVw;width:62*@toVw;background-position:0 0;.actBanKuai}
&.defaultPlay{height:62*@toVw;width:62*@toVw;background-position:0 -62*@toVw;}
&.playHP{height:62*@toVw;width:62*@toVw;background-position:0 -124*@toVw;.actBanKuai}
&.defaultLook{height:62*@toVw;width:62*@toVw;background-position:0 -186*@toVw;}
&.home{height:62*@toVw;width:62*@toVw;background-position:0 -248*@toVw;}
&.defaultFun{height:62*@toVw;width:62*@toVw;background-position:0 -310*@toVw;}
&.funHP{height:62*@toVw;width:62*@toVw;background-position:0 -372*@toVw;.actBanKuai}
}
.header-h{
display: block;
width: 62*@toVw;
position: absolute;
left: 17.5*@toVw;
top: 20*@toVw;
z-index: 2;
.headerHP{
display: block;
}
}
.index-content-block{
position: absolute;
top: 20*@toVw;
left: 80*@toVw;
right: 20*@toVw;
bottom: 20*@toVw;
background: white;
border: 1*@toVw solid #000;
border-radius: 0 8*@toVw 8*@toVw 8*@toVw;
&.radius{
border-radius: 8*@toVw;
}
}
}
</style> </style>
src/components/newLesson/look.vue
View file @ ccd8e4be
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
overflow: auto; overflow: auto;
border-radius:8*@toVw; border-radius:8*@toVw;
padding: 20*@toVw; padding: 20*@toVw;
.content{ .content,.old-content{
width: 300*@toVw; width: 300*@toVw;
position: relative; position: relative;
top: 0; top: 0;
......
src/components/newLesson/video.vue
View file @ ccd8e4be
...@@ -289,7 +289,7 @@ ...@@ -289,7 +289,7 @@
} }
.change-block-HP{ .change-block-HP{
position: absolute; position: absolute;
bottom: 0; top: ~"calc(100vh - 12.5vw)";
display: block; display: block;
width: 78*@toVw; width: 78*@toVw;
img{ img{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment