105 lines
2.4 KiB
Vue
105 lines
2.4 KiB
Vue
<template lang="pug">
|
||
ul
|
||
li(v-for='item in liveArr' @click="enterInfo(item)")
|
||
.li-top
|
||
img(class='context' :src='item.coverimage')
|
||
// 右上角
|
||
img(v-if='item.status == 10' class='state' src='/static/img/icon/live_lab_ing.png')
|
||
img(v-else-if='item.status == 3' class='state' src='/static/img/icon/live_lab_notice_big.png')
|
||
img(v-else='item.status == 1 || 2' class='playback' src='/static/img/icon/live_lab_playback_big.png')
|
||
.time(v-if='item.status == 10') 直播时间：{{item.start_time}}
|
||
.subscribe(v-if='item.status == 3') {{item.appointment_count}}人预约
|
||
.subscribe(v-else-if='item.status == 1 || 2') {{item.appointment_count}}人看过
|
||
.subscribe(v-else='item.status == 10') {{item.appointment_count}}人在看
|
||
span {{item.title}}
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
created () {
|
||
this.liveList()
|
||
},
|
||
data () {
|
||
return {
|
||
liveArr: []
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
async liveList () {
|
||
let res = await this.$http.index.liveList({
|
||
|
||
})
|
||
this.liveArr = res.list
|
||
console.log(res)
|
||
},
|
||
enterInfo(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/videolive/videolive?id=${item.id}`,
|
||
});
|
||
},
|
||
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
ul{
|
||
margin-top: 31rpx;
|
||
border-top: 1rpx solid #f5f5f5;
|
||
padding-left: 21rpx;
|
||
padding-right: 23rpx;
|
||
li{
|
||
position: relative;
|
||
margin-bottom: 0.533rem;
|
||
.li-top {
|
||
.context {
|
||
width: 702rpx;
|
||
height: 309rpx;
|
||
}
|
||
.state {
|
||
position: absolute;
|
||
top: 14rpx;
|
||
right: 14rpx;
|
||
width: 114rpx;
|
||
height: 36rpx;
|
||
}
|
||
.playback {
|
||
position: absolute;
|
||
top: 14rpx;
|
||
right: 14rpx;
|
||
width: 60rpx;
|
||
height: 36rpx;
|
||
}
|
||
.time {
|
||
position: absolute;
|
||
top: 40%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 280rpx;
|
||
height: 40rpx;
|
||
background-color: #000000;
|
||
border-radius: 20rpx;
|
||
opacity: 0.7;
|
||
align-items: center;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 22rpx;
|
||
}
|
||
.subscribe {
|
||
position: absolute;
|
||
right: 13rpx;
|
||
bottom: 12rpx;
|
||
font-size: 22rpx;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
span {
|
||
display: block;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
</style>
|