|
|
|
@ -8,18 +8,22 @@
|
|
|
|
|
<router-link to="/live" target="_blank">查看更多<i class="iconfont icon-xiangyou"></i></router-link> |
|
|
|
|
</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"> |
|
|
|
|
<li class="item"> |
|
|
|
|
|
|
|
|
|
<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 class="info"> |
|
|
|
|
|
|
|
|
|
<div class="lfbox"> |
|
|
|
|
<h2 class="hide-txt">{{item.title}}</h2> |
|
|
|
|
<div class="f16 hide-txt">{{item.description}}</div> |
|
|
|
|
<div class="flex-1 speaker"> |
|
|
|
|
<div class="f16 hide-txt m_description">{{item.description}}</div> |
|
|
|
|
<div class="flex-1 speaker m-dn"> |
|
|
|
|
<img class="speaker-uid" :src="item.speaker_uid" alt=""> |
|
|
|
|
<div> |
|
|
|
|
<p>主讲人</p> |
|
|
|
@ -598,6 +602,7 @@
|
|
|
|
|
/* 直播课程 */ |
|
|
|
|
.live-box { |
|
|
|
|
margin-top: 2px; |
|
|
|
|
height: 220px; |
|
|
|
|
|
|
|
|
|
.item { |
|
|
|
|
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 */ |
|
|
|
@ -1191,6 +1253,68 @@
|
|
|
|
|
/* end-phone */ |
|
|
|
|
</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"> |
|
|
|
|
@media screen and (max-width: 530px) { |
|
|
|
|
|
|
|
|
|