|
|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
<template> |
|
|
|
|
|
|
|
|
|
<div class="live-page"> |
|
|
|
|
<div class="live-page m-dn"> |
|
|
|
|
|
|
|
|
|
<div class="w1200"> |
|
|
|
|
<div class="live-focus"> |
|
|
|
|
@ -18,7 +18,6 @@
|
|
|
|
|
<div class="left-content"> |
|
|
|
|
<div class="lk-view"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<router-link :to="'/video/play/'+obj.edu_id" class="lk-a" v-if="obj.edu_id"> |
|
|
|
|
<div class="stflex st4"> |
|
|
|
|
<span class="til">已结束 看回放</span> |
|
|
|
|
@ -90,16 +89,16 @@
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="boxbg"> |
|
|
|
|
<div class="boxbg m-dn"> |
|
|
|
|
<!-- <div class="mask"> |
|
|
|
|
<img :src="obj.cover" class="sm-img"> |
|
|
|
|
</div> --> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div style=" border-color: #fff; position: relative; z-index: 2; "> |
|
|
|
|
<!-- pc分页 --> |
|
|
|
|
<div style=" border-color: #fff; position: relative; z-index: 2; " class="m-dn"> |
|
|
|
|
<div class="lv-title w1200">直播课程</div> |
|
|
|
|
<div class="live-wrap w1200"> |
|
|
|
|
|
|
|
|
|
<ul class="live-list"> |
|
|
|
|
<li class="live-item" v-for="(item,i) in liveList" :key="i"> |
|
|
|
|
|
|
|
|
|
@ -121,13 +120,144 @@
|
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="myel-pg"> |
|
|
|
|
<el-pagination class="pagination" v-model:currentPage="query.page" background layout="prev, pager, next" |
|
|
|
|
@current-change="handleCurrentChange" :page-size="query.perpage" :total="total" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-skeleton :loading="loading" animated class="dn m-db"> |
|
|
|
|
<template #template> |
|
|
|
|
<div class="w1200 video-page"> |
|
|
|
|
<div class="video-wrap"> |
|
|
|
|
<ul class="video-list-m"> |
|
|
|
|
<li class="item flex-3" v-for="item in 1" :key="item" style="width: 100% !important;"> |
|
|
|
|
<div class="imgps"> |
|
|
|
|
<el-skeleton-item variant="image" class="img" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="rtbox"> |
|
|
|
|
<el-skeleton :rows="1" variant="text" style="width: 90%; " animated /> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template #default> |
|
|
|
|
|
|
|
|
|
<div class="top-title" v-if="liveFocusListWap.length > 0"> |
|
|
|
|
<span class="line"></span> |
|
|
|
|
<p>近期直播</p> |
|
|
|
|
<span class="line"></span> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="live-box"> |
|
|
|
|
|
|
|
|
|
<li v-for="(item, i) in liveFocusListWap" :key="i" class="item"> |
|
|
|
|
|
|
|
|
|
<div class="cover-mask"> |
|
|
|
|
<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="m_description"> |
|
|
|
|
<div class="flex-1"> |
|
|
|
|
<p>主讲人：</p> |
|
|
|
|
<p class="m_speaker">{{item.speaker}}</p> |
|
|
|
|
<p>{{item.applynumber}}</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex-1 mt10"> |
|
|
|
|
<p>直播时间：</p> |
|
|
|
|
<p>{{item.playdate}}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="rtbox flex-2 flex-1"> |
|
|
|
|
<a class="btn-hot f16" :href="'live/'+item.liveid"> |
|
|
|
|
<span v-if="item.playstate==1">直播中</span> |
|
|
|
|
<span v-else>立即报名</span> |
|
|
|
|
</a> |
|
|
|
|
<div v-html="item.downtime"></div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</li> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-skeleton> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="top-title"> |
|
|
|
|
<span class="line"></span> |
|
|
|
|
<p>全部直播</p> |
|
|
|
|
<span class="line"></span> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- 移动端视频列表 --> |
|
|
|
|
<el-skeleton :loading="loading" animated class="dn m-db"> |
|
|
|
|
|
|
|
|
|
<template #template> |
|
|
|
|
<div class="w1200 video-page"> |
|
|
|
|
<div class="video-wrap"> |
|
|
|
|
<ul class="video-list-m"> |
|
|
|
|
<li class="item flex-3" v-for="item in 6" :key="item"> |
|
|
|
|
<div class="imgps"> |
|
|
|
|
<el-skeleton-item variant="image" class="img" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="rtbox"> |
|
|
|
|
<el-skeleton :rows="1" variant="text" style="width: 90%; " animated /> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template #default> |
|
|
|
|
<div class="dn m-db"> |
|
|
|
|
|
|
|
|
|
<van-list v-model:loading="loading_m" :finished="max_total" :offset="0" finished-text="没有更多了" |
|
|
|
|
error-text="请求失败，点击重新加载" @load="loadVlist"> |
|
|
|
|
<div class="video-list-m"> |
|
|
|
|
<li class="item" v-for="(item, i) in liveList" :key="i"> |
|
|
|
|
<router-link :to="'/live/'+item.liveid" class="flex-3"> |
|
|
|
|
<div class="imgps"> |
|
|
|
|
<el-image class="img" :src="item.cover" :alt="item.cover"></el-image> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="rtbox"> |
|
|
|
|
<h2 class="hide-txt f16">{{item.title}}</h2> |
|
|
|
|
|
|
|
|
|
<div v-if="item.it618_saleprice" class="saleprice"> |
|
|
|
|
<span class="colff3"> |
|
|
|
|
<i class="f14">￥</i>{{item.it618_saleprice}} |
|
|
|
|
</span> |
|
|
|
|
<del>￥{{item.it618_price}}</del> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="info flex-3"> |
|
|
|
|
<div class="status f12 " :class="'status_'+item.playstate"> |
|
|
|
|
{{ item.playtitle }} |
|
|
|
|
<span v-if="item.playdate" class="playdate">{{ item.playdate }}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</router-link> |
|
|
|
|
</li> |
|
|
|
|
</div> |
|
|
|
|
</van-list> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-skeleton> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
@ -135,12 +265,19 @@
|
|
|
|
|
import { reactive, toRefs } from "vue"; |
|
|
|
|
import { getLiveList, getLiveFocus } from "@/api/live"; |
|
|
|
|
import store from '@/store'; |
|
|
|
|
import { Button, List, Cell } from 'vant'; |
|
|
|
|
export default { |
|
|
|
|
name: "live", |
|
|
|
|
components: { |
|
|
|
|
[Button.name]: Button, |
|
|
|
|
[List.name]: List, |
|
|
|
|
[Cell.name]: Cell, |
|
|
|
|
}, |
|
|
|
|
setup() { |
|
|
|
|
const state = reactive({ |
|
|
|
|
liveList: [], |
|
|
|
|
liveFocusList: [], |
|
|
|
|
liveFocusListWap: [], |
|
|
|
|
activeIndex: 0, |
|
|
|
|
obj: {}, |
|
|
|
|
total: 0, |
|
|
|
|
@ -148,7 +285,13 @@
|
|
|
|
|
page: 1, |
|
|
|
|
perpage: 8 |
|
|
|
|
}, |
|
|
|
|
lvie_cur: 0 |
|
|
|
|
lvie_cur: 0, |
|
|
|
|
loading: true, |
|
|
|
|
loading_m: false, |
|
|
|
|
live_total: 0, |
|
|
|
|
max_total: false, |
|
|
|
|
start_perpage: 16, |
|
|
|
|
onresize: '', |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const fetchLiveFocus = async () => { |
|
|
|
|
@ -158,6 +301,7 @@
|
|
|
|
|
const res = await getLiveFocus(params) |
|
|
|
|
if (res.code === 200) { |
|
|
|
|
state.liveFocusList = res.data; |
|
|
|
|
state.liveFocusListWap = res.data.filter(t => t.playstate > 0); |
|
|
|
|
state.liveFocusList.forEach((item) => { |
|
|
|
|
if (item.playstate > '0') { |
|
|
|
|
state.obj = state.liveFocusList[1] |
|
|
|
|
@ -191,35 +335,531 @@
|
|
|
|
|
// },500); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const fetchLiveList = async () => { |
|
|
|
|
const fetchLiveList = async (query) => { |
|
|
|
|
const params = { |
|
|
|
|
...state.query |
|
|
|
|
...query |
|
|
|
|
} |
|
|
|
|
const res = await getLiveList(params) |
|
|
|
|
if (res.code === 200) { |
|
|
|
|
state.liveList = res.data.data |
|
|
|
|
state.total = res.data.total |
|
|
|
|
|
|
|
|
|
state.loading = false; |
|
|
|
|
state.live_total = res.data.total; |
|
|
|
|
|
|
|
|
|
// 没有更多了 |
|
|
|
|
if (state.start_perpage > res.data.total) { |
|
|
|
|
state.max_total = true; |
|
|
|
|
} else { |
|
|
|
|
state.max_total = false; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const fetchAllData = () => { |
|
|
|
|
return Promise.all([ |
|
|
|
|
fetchLiveFocus(), |
|
|
|
|
fetchLiveList(), |
|
|
|
|
fetchLiveList(state.query), |
|
|
|
|
]) |
|
|
|
|
} |
|
|
|
|
fetchAllData(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
fetchAllData() |
|
|
|
|
// 滚动加载 |
|
|
|
|
const loadVlist = () => { |
|
|
|
|
setTimeout(() => { |
|
|
|
|
state.start_perpage += 8 |
|
|
|
|
const params = { |
|
|
|
|
...state.query, |
|
|
|
|
perpage: state.start_perpage |
|
|
|
|
}; |
|
|
|
|
// if (state.onresize < 1200) { |
|
|
|
|
state.liveList.push(fetchLiveList(params)); |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
state.loading_m = false; |
|
|
|
|
|
|
|
|
|
}, 800); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
...toRefs(state), |
|
|
|
|
changeLiveFocus, |
|
|
|
|
handleCurrentChange |
|
|
|
|
handleCurrentChange, |
|
|
|
|
loadVlist, |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
|
/*响应式-移动端*/ |
|
|
|
|
@import '~@/assets/css/m.css'; |
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 1200px) { |
|
|
|
|
|
|
|
|
|
html, |
|
|
|
|
body { |
|
|
|
|
background-color: #f3f8ff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.live-box { |
|
|
|
|
padding: 0 20px; |
|
|
|
|
margin: 10px 0 10px; |
|
|
|
|
|
|
|
|
|
.item { |
|
|
|
|
background: #fff; |
|
|
|
|
height: 176px; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
position: relative; |
|
|
|
|
display: flex; |
|
|
|
|
margin-top: 16px; |
|
|
|
|
|
|
|
|
|
.cover { |
|
|
|
|
position: relative; |
|
|
|
|
width: 288px; |
|
|
|
|
height: 100%; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
z-index: 1; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.info { |
|
|
|
|
display: block !important; |
|
|
|
|
width: 100% !important; |
|
|
|
|
margin-left: 28px !important; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
.lfbox { |
|
|
|
|
width: 96% !important; |
|
|
|
|
height: auto !important; |
|
|
|
|
|
|
|
|
|
h2 { |
|
|
|
|
font-size: 14px !important; |
|
|
|
|
padding: 20px 0 8px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.m_description { |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #808696; |
|
|
|
|
|
|
|
|
|
.m_speaker { |
|
|
|
|
width: 130px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.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; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* end screen */ |
|
|
|
|
|
|
|
|
|
.top-title { |
|
|
|
|
position: relative; |
|
|
|
|
text-align: center; |
|
|
|
|
padding: 20px 0 0px 0; |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #515A6E; |
|
|
|
|
|
|
|
|
|
.line { |
|
|
|
|
display: inline-block; |
|
|
|
|
vertical-align: middle; |
|
|
|
|
width: 30px; |
|
|
|
|
height: 1px; |
|
|
|
|
top: 50%; |
|
|
|
|
line-height: 30px; |
|
|
|
|
background-color: #515A6E; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
display: inline-block; |
|
|
|
|
padding: 0 18px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tool-box-m { |
|
|
|
|
margin: 0 20px; |
|
|
|
|
margin-top: 20px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
padding: 0 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.wrapper-video-m { |
|
|
|
|
padding: 0 20px; |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
color: #333; |
|
|
|
|
text-align: left; |
|
|
|
|
font-size: 15px; |
|
|
|
|
margin: 20px 0 10px; |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ul { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: flex-start; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
|
|
li.category-item { |
|
|
|
|
white-space: nowrap; |
|
|
|
|
padding: 6px 18px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
color: #617288; |
|
|
|
|
border-radius: 50px; |
|
|
|
|
margin-right: 10px; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
background-color: #f8f8fa; |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
color: #fff !important; |
|
|
|
|
background-color: #0082fc !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
color: #0082fc; |
|
|
|
|
background-color: #D9ECFF; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
li.category-item:first-child { |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-drawer { |
|
|
|
|
.el-drawer__header { |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.vtool-foot-box { |
|
|
|
|
position: absolute; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 10%; |
|
|
|
|
bottom: 0; |
|
|
|
|
|
|
|
|
|
.vtool-foot-m { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 0; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 48px; |
|
|
|
|
line-height: 48px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
.chongzhi { |
|
|
|
|
width: 35%; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border-top: 1px solid #ddd; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.queding { |
|
|
|
|
background-color: #0082fc; |
|
|
|
|
color: #fff; |
|
|
|
|
width: 65%; |
|
|
|
|
border-top: 1px solid #0082fc; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 移动端视频列表 */ |
|
|
|
|
.video-list-m { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
align-items: center; |
|
|
|
|
height: auto; |
|
|
|
|
padding: 0 20px; |
|
|
|
|
margin-top: 20px; |
|
|
|
|
|
|
|
|
|
.item { |
|
|
|
|
transition: all .3s; |
|
|
|
|
width: 49% !important; |
|
|
|
|
height: 110px !important; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
margin-bottom: 18px; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
box-shadow: 0px 1px 12px 0px #DCE5FF; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.rtbox, |
|
|
|
|
.rtbox-m { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-around; |
|
|
|
|
flex-direction: column; |
|
|
|
|
width: auto !important; |
|
|
|
|
min-width: 55%; |
|
|
|
|
padding: 18px 0; |
|
|
|
|
flex: 1; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.saleprice { |
|
|
|
|
font-size: 14px; |
|
|
|
|
padding: 0 !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.item:hover .img { |
|
|
|
|
margin-top: 0px !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.imgps { |
|
|
|
|
width: auto !important; |
|
|
|
|
min-width: 170px; |
|
|
|
|
margin-right: 10px; |
|
|
|
|
height: 110px !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.img { |
|
|
|
|
position: static !important; |
|
|
|
|
top: 0 !important; |
|
|
|
|
width: 160px !important; |
|
|
|
|
height: 110px !important; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
transition: all .3s; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
h2 { |
|
|
|
|
font-size: 14px !important; |
|
|
|
|
height: 26px !important; |
|
|
|
|
width: 92% !important; |
|
|
|
|
margin: 0 6px 0 0 !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tag { |
|
|
|
|
width: 50px !important; |
|
|
|
|
height: 20px !important; |
|
|
|
|
line-height: 20px !important; |
|
|
|
|
font-size: 12px; |
|
|
|
|
text-align: center; |
|
|
|
|
background: rgba(40, 195, 70, 0.08); |
|
|
|
|
border-radius: 12px; |
|
|
|
|
color: #28C346; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.info { |
|
|
|
|
width: 92% !important; |
|
|
|
|
padding: 10px 4px 0 4px !important; |
|
|
|
|
font-size: 14px; |
|
|
|
|
margin-top: auto; |
|
|
|
|
|
|
|
|
|
h5 { |
|
|
|
|
color: #617288; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.v_lod_txt { |
|
|
|
|
text-align: center; |
|
|
|
|
color: #7E8FA3; |
|
|
|
|
margin-top: 14px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
letter-spacing: 2px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 800px) { |
|
|
|
|
|
|
|
|
|
/* 视频看列表 */ |
|
|
|
|
.video-list-m { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-around !important; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.flex-3 { |
|
|
|
|
justify-content: space-around; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.item { |
|
|
|
|
transition: all .3s; |
|
|
|
|
width: 100% !important; |
|
|
|
|
height: 100px !important; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
margin-bottom: 16px; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
box-shadow: 0px 1px 12px 0px #DCE5FF; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.rtbox, |
|
|
|
|
.rtbox-m { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-around; |
|
|
|
|
flex-direction: column; |
|
|
|
|
padding: 14px 0; |
|
|
|
|
flex: 1; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.saleprice { |
|
|
|
|
font-size: 14px; |
|
|
|
|
padding: 0 !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.item:hover .img { |
|
|
|
|
margin-top: 0px !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.imgps { |
|
|
|
|
width: auto !important; |
|
|
|
|
min-width: 160px; |
|
|
|
|
margin-right: 2px; |
|
|
|
|
height: 110px !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.img { |
|
|
|
|
position: static !important; |
|
|
|
|
top: 0 !important; |
|
|
|
|
width: 150px !important; |
|
|
|
|
height: 100px !important; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
transition: all .3s; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
h2 { |
|
|
|
|
font-size: 14px !important; |
|
|
|
|
height: 26px !important; |
|
|
|
|
width: 94% !important; |
|
|
|
|
margin: 0 6px 0 0 !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tag { |
|
|
|
|
width: 50px !important; |
|
|
|
|
height: 20px !important; |
|
|
|
|
line-height: 20px !important; |
|
|
|
|
font-size: 12px; |
|
|
|
|
text-align: center; |
|
|
|
|
background: rgba(40, 195, 70, 0.08); |
|
|
|
|
border-radius: 12px; |
|
|
|
|
color: #28C346; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.info { |
|
|
|
|
width: 96% !important; |
|
|
|
|
padding: 0px 4px 10px 4px !important; |
|
|
|
|
font-size: 14px; |
|
|
|
|
margin-top: auto; |
|
|
|
|
|
|
|
|
|
h5 { |
|
|
|
|
color: #617288; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.flex-3 { |
|
|
|
|
justify-content: space-between; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.status { |
|
|
|
|
&.status_0 { |
|
|
|
|
color: #B3C1D3; |
|
|
|
|
|
|
|
|
|
.playdate { |
|
|
|
|
color: #0082FC; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* end-phone */ |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
|
@media screen and (max-width: 660px) { |
|
|
|
|
|
|
|
|
|
/* 直播 */ |
|
|
|
|
.live-box { |
|
|
|
|
margin-top: 2px; |
|
|
|
|
|
|
|
|
|
.item { |
|
|
|
|
background: #fff; |
|
|
|
|
height: auto !important; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
position: relative; |
|
|
|
|
margin-top: 16px; |
|
|
|
|
display: block; |
|
|
|
|
|
|
|
|
|
.cover { |
|
|
|
|
position: relative; |
|
|
|
|
margin-top: 0 !important; |
|
|
|
|
width: 100% !important; |
|
|
|
|
height: 220px !important; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
z-index: 1; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.cover-mask::after { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.info { |
|
|
|
|
width: auto !important; |
|
|
|
|
margin: 0 18px !important; |
|
|
|
|
|
|
|
|
|
.lfbox { |
|
|
|
|
h2 { |
|
|
|
|
padding: 12px 0 8px !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.rtbox { |
|
|
|
|
height: auto !important; |
|
|
|
|
|
|
|
|
|
.btn-hot { |
|
|
|
|
margin: 14px 0 16px; |
|
|
|
|
width: 100% !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.boxbg { |
|
|
|
|
position: relative; |
|
|
|
|
@ -549,9 +1189,6 @@
|
|
|
|
|
color: #0082FC; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.info { |
|
|
|
|
|
