Browse Source

DP-27,add:学院直播部分的响应式

pull/2/head
Wangwei 2 years ago
parent
commit
8435d1c697
  1. 2
      src/assets/css/m.css
  2. 132
      src/views/index.vue

2
src/assets/css/m.css

@ -28,6 +28,8 @@
.m-db { .m-db {
display: block !important; display: block !important;
} }
.m-f12{font-size: 12px !important;}
.m-f14{font-size: 14px !important;}
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {

132
src/views/index.vue

@ -8,18 +8,22 @@
<router-link to="/live" target="_blank">查看更多<i class="iconfont icon-xiangyou"></i></router-link> <router-link to="/live" target="_blank">查看更多<i class="iconfont icon-xiangyou"></i></router-link>
</div> </div>
<el-carousel indicator-position="outside" v-if="newLiveList.length>0" class="live-box" height="220px"> <el-carousel indicator-position="outside" v-if="newLiveList.length>0" class="live-box">
<el-carousel-item v-for="(item, i) in newLiveList" :key="i"> <el-carousel-item v-for="(item, i) in newLiveList" :key="i">
<li class="item"> <li class="item">
<div class="cover-mask"> <div class="cover-mask">
<el-image class="cover" :src="item.cover"></el-image> <a :href="'live/'+item.liveid">
<el-image class="cover" :src="item.cover"></el-image>
</a>
</div> </div>
<div class="info"> <div class="info">
<div class="lfbox"> <div class="lfbox">
<h2 class="hide-txt">{{item.title}}</h2> <h2 class="hide-txt">{{item.title}}</h2>
<div class="f16 hide-txt">{{item.description}}</div> <div class="f16 hide-txt m_description">{{item.description}}</div>
<div class="flex-1 speaker"> <div class="flex-1 speaker m-dn">
<img class="speaker-uid" :src="item.speaker_uid" alt=""> <img class="speaker-uid" :src="item.speaker_uid" alt="">
<div> <div>
<p>主讲人</p> <p>主讲人</p>
@ -598,6 +602,7 @@
/* 直播课程 */ /* 直播课程 */
.live-box { .live-box {
margin-top: 2px; margin-top: 2px;
height: 220px;
.item { .item {
background: #fff; background: #fff;
@ -1082,6 +1087,63 @@
} }
} }
.info {
display: block !important;
width: auto !important;
margin-left: 28px !important;
justify-content: space-between;
align-items: center;
overflow: hidden;
.lfbox {
width: 96% !important;
height: auto !important;
h2 {
font-size: 16px !important;
padding: 28px 0 8px;
}
.m_description {
font-size: 14px;
color: #808696;
}
.speaker-uid {
border-radius: 100px;
width: 40px;
height: 40px;
}
.speaker {
margin-top: 30px;
img {
margin-right: 12px;
}
p {
line-height: 22px;
font-size: 12px;
}
p:nth-child(2) {
font-weight: 600;
}
}
}
.rtbox {
align-items: flex-start !important;
height: 100px;
margin-right: 0 !important;
.btn-008-big {
padding: 10px 30px !important;
}
}
}
} }
/* end-pad */ /* end-pad */
@ -1191,6 +1253,68 @@
/* end-phone */ /* end-phone */
</style> </style>
<style lang="scss">
@media screen and (max-width: 660px) {
/* 直播 */
.live-box {
margin-top: 2px;
height: 400px !important;
&.el-carousel--horizontal {
overflow: hidden !important;
}
.el-carousel__container {
height: 400px !important;
}
.item {
background: #fff;
height: 386px !important;
border-radius: 8px;
position: relative;
display: block !important;
margin-top: 14px;
.cover {
position: relative;
margin-top: 0 !important;
width: 100% !important;
height: 200px !important;
border-radius: 8px;
z-index: 1;
}
.cover-mask::after {
display: none;
}
.info {
margin: 0 18px !important;
.lfbox {
h2 {
padding: 14px 0 8px !important;
}
}
.rtbox {
.btn-008-big {
width: 100%;
}
}
}
}
}
}
</style>
<style lang="scss"> <style lang="scss">
@media screen and (max-width: 530px) { @media screen and (max-width: 530px) {

Loading…
Cancel
Save