179 lines
4.1 KiB
Vue
179 lines
4.1 KiB
Vue
<template>
|
|
<div class="videoitem" @click="navto(videoid)">
|
|
|
|
<img :src="img" alt="" class="cover">
|
|
<img src="@/static/images/play.png" alt="" class="play">
|
|
<div class="title">
|
|
<div class="one-line-hide">{{title}}</div>
|
|
<span class="lv" style="flex-shrink: 0;">{{score}}分</span>
|
|
</div>
|
|
<div class="info">
|
|
<div class="datetime">
|
|
<span>{{date.split(" ")[0]}}</span>
|
|
<span class="time">{{date.split(" ")[1]}}</span>
|
|
</div>
|
|
<div class="feature">
|
|
<div>
|
|
<img src="@/static/images/watch.png" alt="">
|
|
<span>{{watch}}</span>
|
|
</div>
|
|
<div>
|
|
<img src="@/static/images/share.png" alt="">
|
|
<span>{{share}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="state audit" v-if="status==0">
|
|
审核中
|
|
</div>
|
|
<div class="state audit fail" v-if="status==2">
|
|
未通过
|
|
</div>
|
|
<div class="state audit" v-if="status==1">
|
|
已发布
|
|
</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;
|
|
// background-color: #0f0;
|
|
}
|
|
.play{
|
|
position: absolute;
|
|
top: 52px;
|
|
left: 101px;
|
|
width: 23px;
|
|
height: 23px;
|
|
}
|
|
.title{
|
|
padding: 0 18px;
|
|
margin-top: 16px;
|
|
font-display: 11px;
|
|
color: #111;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: default;
|
|
>span{
|
|
margin-left: 11px;
|
|
font-size: 10px;
|
|
color: #f55455;
|
|
}
|
|
}
|
|
.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: #CEF9F0;
|
|
color: #08AE98;
|
|
}
|
|
.fail{
|
|
background-color: #f9d6f6;
|
|
color: #D12C2E;
|
|
}
|
|
}
|
|
</style>
|
|
<script lang="ts">
|
|
import router from '@/router';
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
props:{
|
|
videoid:{
|
|
type:Number
|
|
},
|
|
type: {
|
|
type: Number,
|
|
default:1
|
|
},
|
|
img:{
|
|
type:String
|
|
},
|
|
title:{
|
|
type:String
|
|
},
|
|
score:{
|
|
type:String
|
|
},
|
|
date:{
|
|
type:String
|
|
},
|
|
takehour:{
|
|
type:String
|
|
},
|
|
watch:{
|
|
type:Number
|
|
},
|
|
share:{
|
|
type:Number
|
|
},
|
|
status:{
|
|
type:Number
|
|
}
|
|
},
|
|
setup() {
|
|
function navto(e: number){
|
|
router.push("/regime/videoinfo?id="+e)
|
|
}
|
|
|
|
return {
|
|
navto,
|
|
}
|
|
}
|
|
})
|
|
</script> |