123 lines
2.8 KiB
Vue
123 lines
2.8 KiB
Vue
<template>
|
|
<div class="videoitem">
|
|
<img src="" alt="" class="cover">
|
|
<img src="" alt="" class="play">
|
|
<div class="title">
|
|
sadghaskghdfjkaghjkfha
|
|
<span class="lv">7.3分</span>
|
|
</div>
|
|
<div class="info">
|
|
<div class="datetime">
|
|
<span>2020-09-11</span>
|
|
<span class="time">09:30</span>
|
|
</div>``
|
|
<div class="feature">
|
|
<div>
|
|
<img src="" alt="">
|
|
<span>123</span>
|
|
</div>
|
|
<div>
|
|
<img src="" alt="">
|
|
<span>3</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="state audit fail">
|
|
审核中
|
|
</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{
|
|
margin-top: 16px;
|
|
font-display: 11px;
|
|
color: #111;
|
|
display: flex;
|
|
align-items: center;
|
|
>span{
|
|
margin-left: 11px;
|
|
font-size: 10px;
|
|
color: #f55455;
|
|
}
|
|
}
|
|
.info{
|
|
display: flex;
|
|
align-items: center;
|
|
.datetime{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 10px;
|
|
color: #666;
|
|
.time{
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
.feature{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 18px;
|
|
>div{
|
|
display: flex;
|
|
align-items: center;
|
|
>img{
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
>span{
|
|
font-size: 10px;
|
|
color: #111;
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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 { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
|
|
})
|
|
</script> |