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 @@
hm.src = "https://hm.baidu.com/hm.js?3d48322170d471164729cba5dfa4195f";
var s = document.getElementsByTagName("script")[0];
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>
\ No newline at end of file
})();</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
src/components/map/index.vue
View file @ ccd8e4be
......@@ -31,10 +31,8 @@
<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}}
<img :src="data.category_cover">
<div>{{data.category_name}}</div>
</div>
</swiper-slide>
<swiper-slide v-if="more">
......@@ -90,7 +88,7 @@
</div>
<div class="lesson-block-hp">
<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="clock-hp" v-if="item.push_time === '0000-00-00'">
尚未开课
......@@ -195,10 +193,10 @@
}
},
swiperOption2: {
slidesPerView:7,
slidesPerView:5,
on: {
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();
}
},
......@@ -208,7 +206,8 @@
}
},
swiperOptionLesson:{
slidesPerView:4,
slidesPerView:'auto',
spaceBetween : 20,
}
}
},
......@@ -350,8 +349,8 @@
}else{
index = x
}
if(x>6){
index2 = x-6
if(x>4){
index2 = x-4
}else{
index2 = x
}
......@@ -359,7 +358,6 @@
});
this.swiper.slideTo(index, 800, false);
this.swiper2.slideTo(index2, 800, false)
})
})
},
......@@ -375,7 +373,6 @@
let list = [];
let x = 0;
for(let i = 0; i < res.list.length; i ++ ){
if(res.list[i].push_time !== '0000-00-00'){
x++
}
......@@ -392,14 +389,16 @@
res.list[i].dayText = 'DAY '+list.length;
this.hpLessonList.push(res.list[i])
}
this.$nextTick(()=>{
this.swiperLesson.slideTo(x-1)
});
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){
if(dom.length>0 && dom[0].style.display !== 'none'){
this.scroll_to(dom[0].offsetTop);
let data = null ;
let index = 0;
......@@ -415,18 +414,19 @@
}
}else if(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)
}
}else{
let moneyDom = document.getElementsByClassName('money');
if(moneyDom.length>0){
if(moneyDom.length>0 && moneyDom[0].offsetLeft !== 0){
this.scroll_to(moneyDom[0].offsetParent.offsetTop)
}
}
})
}else{
this.scroll_to(0)
this.scroll_to(0);
this.swiperLesson.slideTo(0)
}
});
},
......@@ -709,17 +709,17 @@
display: block;
}
.unit-li{
width: 68 * @toVw;
display: flex;
text-align: center;
margin-top: 5*@toVw;
height:60 * @toVw;
border-radius:8 * @toVw 8 * @toVw 0*@toVw 0*@toVw;
height:38 * @toVw;
line-height: 38*@toVw;
border-radius:8 * @toVw;
font-size:12* @toVw;
font-family:PingFangSC-Semibold;
font-weight:600;
padding-top: 12 * @toVw;
padding-top:0;
margin: 5*@toVw 0;
color:rgba(102,102,102,1);
line-height:20* @toVw;
img{
width: 28*@toVw;
height: 28*@toVw;
......@@ -735,15 +735,16 @@
display: none;
}
.lesson-block-hp{
padding-top: 85*@toVw;
padding-top: 55*@toVw;
background: #eeeeee;
.lesson-content-hp{
display: inline-block;
width: 100%;
position: relative;
margin: 0 5*@toVw;
max-width: 150*@toVw;
background: white;
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-radius: 8*@toVw;
text-align: center;
......@@ -794,7 +795,7 @@
background: white;
border-radius: 8*@toVw;
width: 493 * @toVw;
height: 241*@toVw;
height: 220*@toVw;
position: relative;
.header{
position: absolute;
......
src/components/newLesson/audio.vue
View file @ ccd8e4be
......@@ -731,7 +731,7 @@
}
.change-block-HP{
position: absolute;
bottom: 0;
top: ~"calc(100vh - 12.5vw)";
display: block;
width: 78*@toVw;
img{
......
src/components/newLesson/index.vue
View file @ ccd8e4be
......@@ -8,7 +8,7 @@
<i :class="{lessonHeader:true, defaultFun:nowShow !== 3,fun:nowShow===3}" @click="changeTitle(3)"></i>
</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, defaultPlay:nowShow !== 2,playHP:nowShow===2}" @click="changeTitle(2)"></i>
<i :class="{headerHP:true, defaultFun:nowShow !== 3,funHP:nowShow===3}" @click="changeTitle(3)"></i>
......@@ -17,7 +17,7 @@
<!--老课包返回按钮-->
<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"/>
<video-block v-if="nowLesson.type === 'video'" :contentData="nowLesson" :nowShow="nowShow"/>
<audio-block v-if="nowLesson.type === 'audio'" :contentData="nowLesson"/>
......@@ -149,7 +149,7 @@
box-shadow:0*@toVw 2*@toVw 3*@toVw 0*@toVw rgba(0,0,0,0.1);
}
.newLesson{
background: #eeeeee;
background: #f8f8f8;
}
.backImg{
position: fixed;
......@@ -161,6 +161,13 @@
@media screen and (orientation: landscape) {
@toVw:100/667vw;
.backImg{
position: fixed;
bottom: 40*@toVw;
right: 20*@toVw;
z-index: 99999999;
width: 60*@toVw;
}
.lessonHeader{
display: none;
}
......@@ -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>
src/components/newLesson/look.vue
View file @ ccd8e4be
......@@ -73,7 +73,7 @@
overflow: auto;
border-radius:8*@toVw;
padding: 20*@toVw;
.content{
.content,.old-content{
width: 300*@toVw;
position: relative;
top: 0;
......
src/components/newLesson/video.vue
View file @ ccd8e4be
......@@ -289,7 +289,7 @@
}
.change-block-HP{
position: absolute;
bottom: 0;
top: ~"calc(100vh - 12.5vw)";
display: block;
width: 78*@toVw;
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