2020-10-10 01:01:16 +00:00
|
|
|
<template>
|
2020-10-10 06:34:23 +00:00
|
|
|
<div class="videoitem" @click="navto()">
|
2020-10-14 00:57:57 +00:00
|
|
|
<img :src="img" alt="" class="cover">
|
2020-10-10 01:01:16 +00:00
|
|
|
<img src="@/static/images/play.png" alt="" class="play">
|
|
|
|
<div class="title">
|
2020-10-15 06:51:34 +00:00
|
|
|
<div class="one-line-hide">{{title}}</div>
|
2020-10-14 00:57:57 +00:00
|
|
|
<span class="lv">{{score}}分</span>
|
2020-10-10 01:01:16 +00:00
|
|
|
</div>
|
|
|
|
<div class="info">
|
|
|
|
<div class="datetime">
|
2020-10-14 00:57:57 +00:00
|
|
|
<span>{{date.split(" ")[0]}}</span>
|
|
|
|
<span class="time">{{date.split(" ")[1]}}</span>
|
2020-10-10 01:01:16 +00:00
|
|
|
</div>
|
|
|
|
<div class="feature">
|
|
|
|
<div>
|
|
|
|
<img src="@/static/images/shijian.png" alt="">
|
2020-10-14 00:57:57 +00:00
|
|
|
<span>{{takehour}}</span>
|
2020-10-10 01:01:16 +00:00
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<img src="@/static/images/studentnum.png" alt="">
|
2020-10-14 00:57:57 +00:00
|
|
|
<span>{{livenum}}</span>
|
2020-10-10 01:01:16 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-10-14 00:57:57 +00:00
|
|
|
<div class="state audit" v-if="status==0">
|
2020-10-10 01:01:16 +00:00
|
|
|
还未开始
|
|
|
|
</div>
|
2020-10-14 00:57:57 +00:00
|
|
|
<div class="state live" v-if="status==1">
|
2020-10-10 01:01:16 +00:00
|
|
|
进入直播
|
|
|
|
</div>
|
2020-10-15 11:33:11 +00:00
|
|
|
<div class="state over" v-if="status==2">
|
2020-10-10 01:01:16 +00:00
|
|
|
查看回放
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.videoitem{
|
|
|
|
width: 226px;
|
|
|
|
height: 198px;
|
|
|
|
background-color: #fff;
|
|
|
|
border-radius: 17px;
|
|
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
position: relative;
|
|
|
|
box-shadow: 0px 5px 6px 0px rgba(158, 158, 158, 0.11);
|
|
|
|
.cover{
|
|
|
|
width: 100%;
|
|
|
|
height: 127px;
|
|
|
|
}
|
|
|
|
.play{
|
|
|
|
position: absolute;
|
|
|
|
top: 52px;
|
|
|
|
left: 101px;
|
|
|
|
width: 23px;
|
|
|
|
height: 23px;
|
|
|
|
}
|
|
|
|
.title{
|
2020-10-15 06:51:34 +00:00
|
|
|
margin: 18px;
|
2020-10-10 01:01:16 +00:00
|
|
|
margin-top: 16px;
|
2020-10-15 06:51:34 +00:00
|
|
|
margin-bottom: 0;
|
2020-10-10 01:01:16 +00:00
|
|
|
font-display: 11px;
|
|
|
|
color: #111;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
cursor: default;
|
|
|
|
>span{
|
|
|
|
margin-left: 11px;
|
|
|
|
font-size: 10px;
|
|
|
|
color: #f55455;
|
2020-10-15 06:51:34 +00:00
|
|
|
flex-shrink: 0;
|
2020-10-10 01:01:16 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
.info{
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
margin-top: 18px;
|
|
|
|
margin-left: 18px;
|
|
|
|
|
|
|
|
.datetime{
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
font-size: 10px;
|
|
|
|
color: #666;
|
|
|
|
.time{
|
|
|
|
margin-left: 15px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.feature{
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
margin-left: 25px;
|
|
|
|
// margin-top: 18px;
|
|
|
|
>div{
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
>img{
|
|
|
|
width: 11px;
|
|
|
|
height: 11px;
|
|
|
|
}
|
|
|
|
>span{
|
|
|
|
font-size: 10px;
|
|
|
|
color: #111;
|
|
|
|
margin-left: 4px;
|
|
|
|
margin-right: 11px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.state{
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
right: 0;
|
|
|
|
width: 67px;
|
|
|
|
height: 23px;
|
|
|
|
border-radius: 0 17px 0 17px;
|
|
|
|
font-size: 10px;
|
|
|
|
line-height: 23px;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.audit{
|
|
|
|
background-color: #CFF9F1;
|
|
|
|
color: #08AE98;
|
|
|
|
}
|
|
|
|
.live{
|
|
|
|
|
|
|
|
background: linear-gradient(-90deg, #0EDCC2, #50DF98, #7EE278, #A2E562);
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
.over{
|
|
|
|
background-color: #F7F7F7;
|
|
|
|
color: #121212;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<script lang="ts">
|
2020-10-10 06:34:23 +00:00
|
|
|
import router from '@/router';
|
2020-10-10 01:01:16 +00:00
|
|
|
import { defineComponent } from 'vue';
|
|
|
|
|
|
|
|
export default defineComponent({
|
2020-10-10 06:34:23 +00:00
|
|
|
props:{
|
2020-10-10 01:01:16 +00:00
|
|
|
type: {
|
|
|
|
type: Number,
|
|
|
|
default:1
|
2020-10-14 00:57:57 +00:00
|
|
|
},
|
|
|
|
img:{
|
|
|
|
type:String
|
|
|
|
},
|
|
|
|
title:{
|
|
|
|
type:String
|
|
|
|
},
|
|
|
|
score:{
|
2020-10-15 06:51:34 +00:00
|
|
|
type:String
|
2020-10-14 00:57:57 +00:00
|
|
|
},
|
|
|
|
date:{
|
|
|
|
type:String
|
|
|
|
},
|
|
|
|
takehour:{
|
|
|
|
type:String
|
|
|
|
},
|
|
|
|
livenum:{
|
|
|
|
type:Number
|
|
|
|
},
|
|
|
|
status:{
|
|
|
|
type:Number
|
2020-10-15 06:51:34 +00:00
|
|
|
},
|
|
|
|
zid:{
|
|
|
|
type: Number
|
2020-10-10 01:01:16 +00:00
|
|
|
}
|
|
|
|
},
|
2020-10-10 06:34:23 +00:00
|
|
|
setup(props){
|
|
|
|
function navto(){
|
|
|
|
let url = '';
|
|
|
|
switch (props.type) {
|
|
|
|
case 1:
|
|
|
|
url = '/regime/livedetail';
|
|
|
|
break;
|
|
|
|
case 2:
|
|
|
|
url = '/regime/livedetail';
|
|
|
|
break;
|
|
|
|
case 3:
|
|
|
|
url = '/regeime/liveing';
|
|
|
|
}
|
2020-10-15 06:51:34 +00:00
|
|
|
console.log(props.zid);
|
|
|
|
if(props.zid != undefined){
|
|
|
|
router.push({path: url,query: { id: props.zid }})
|
|
|
|
}
|
2020-10-10 06:34:23 +00:00
|
|
|
}
|
|
|
|
return {
|
|
|
|
navto
|
|
|
|
}
|
|
|
|
}
|
2020-10-10 01:01:16 +00:00
|
|
|
})
|
|
|
|
</script>
|