theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'master' of http://git.luyuan.tk/luyuan/beelink into xbx

Browse Source
This commit is contained in:
luyuan
2020-10-10 11:36:52 +08:00
parent 32361d6629 b63fa6d363
commit c790a34cbe
11 changed files with 880 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
src/components/LiveItem.vue Normal file
View File

@@ -0,0 +1,146 @@
<template>
<div class="videoitem">
<img src="" alt="" class="cover">
<img src="@/static/images/play.png" 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="@/static/images/shijian.png" alt="">
<span>123</span>
</div>
<div>
<img src="@/static/images/studentnum.png" alt="">
<span>3</span>
</div>
</div>
</div>
<div class="state audit" v-if="type==1">
还未开始
</div>
<div class="state live" v-if="type==2">
进入直播
</div>
<div class="state over" v-if="type==3">
查看回放
</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;
margin-left: 18px;
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: #CFF9F1;
color: #08AE98;
}
.live{
background: linear-gradient(-90deg, #0EDCC2, #50DF98, #7EE278, #A2E562);
color: #fff;
}
.over{
background-color: #F7F7F7;
color: #121212;
}
}
</style>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props:{
type: {
type: Number,
default:1
}
},
})
</script>

32
src/components/VideoItem.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="videoitem">
<img src="" alt="" class="cover">
<img src="" alt="" class="play">
<img src="@/static/images/play.png" alt="" class="play">
<div class="title">
sadghaskghdfjkaghjkfha
<span class="lv">7.3分</span>
@@ -10,21 +10,27 @@
<div class="datetime">
<span>2020-09-11</span>
<span class="time">09:30</span>
</div>``
</div>
<div class="feature">
<div>
<img src="" alt="">
<img src="@/static/images/watch.png" alt="">
<span>123</span>
</div>
<div>
<img src="" alt="">
<img src="@/static/images/share.png" alt="">
<span>3</span>
</div>
</div>
</div>
<div class="state audit fail">
<div class="state audit" v-if="type==1">
审核中
</div>
<div class="state audit fail" v-if="type==2">
未通过
</div>
<div class="state audit" v-if="type==3">
已发布
</div>
</div>
</template>
<style lang="scss" scoped>
@@ -53,9 +59,11 @@
.title{
margin-top: 16px;
font-display: 11px;
margin-left: 18px;
color: #111;
display: flex;
align-items: center;
cursor: default;
>span{
margin-left: 11px;
font-size: 10px;
@@ -65,6 +73,9 @@
.info{
display: flex;
align-items: center;
margin-top: 18px;
margin-left: 18px;
.datetime{
display: flex;
align-items: center;
@@ -77,7 +88,8 @@
.feature{
display: flex;
align-items: center;
margin-top: 18px;
margin-left: 25px;
// margin-top: 18px;
>div{
display: flex;
align-items: center;
@@ -89,6 +101,7 @@
font-size: 10px;
color: #111;
margin-left: 4px;
margin-right: 11px;
}
}
}
@@ -118,6 +131,11 @@
import { defineComponent } from 'vue';
export default defineComponent({
props:{
type: {
type: Number,
default:1
}
},
})
</script>