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

视频详情

Browse Source
This commit is contained in:
asd
2020-10-14 16:27:24 +08:00
parent 8703d9b303
commit f9066bcdf1
4 changed files with 128 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/components/VideoCont.vue
View File

@@ -1,87 +1,99 @@
<template>
<div class="cont">
<div class="title">视频数据</div>
<div class="info">
<div class="item">
<img src="" alt="">
<span>sdasjdkasfklasjkfjakl</span>
</div>
<div class="item">
<img src="" alt="">
<span>sdasjdkasfklasjkfjakl</span>
</div>
<div class="item">
<img src="" alt="">
<span>sdasjdkasfklasjkfjakl</span>
</div>
</div>
<div class="button">
<div class="modify">修改该视频</div>
<div class="del">删除该视频</div>
</div>
<div class="cont">
<div class="title">视频数据</div>
<div class="info">
<div class="item">
<img src="@/static/images/livewatch.png" alt="" />
<span> 上传时间： </span>
{{date}}
</div>
<div class="item">
<img src="@/static/images/watch.png" alt="" />
<span>播放量</span>
{{watch}}
</div>
<div class="item">
<img src="@/static/images/share.png" alt="" />
<span>转发量</span>
{{share}}
</div>
</div>
<div class="button">
<div class="modify">修改该视频</div>
<div class="del">删除该视频</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.cont{
width: 316px;
height: 563px;
background-color: #fff;
border-radius: 17px;
padding: 0 28px;
position: relative;
.title{
padding: 23px 0 11px 0;
font-size: 13px;
color: #111;
line-height: 1;
border-bottom: 1px solid #eee;
.cont {
width: 316px;
height: 563px;
background-color: #fff;
border-radius: 17px;
padding: 0 28px;
position: relative;
.title {
padding: 23px 0 11px 0;
font-size: 13px;
color: #111;
line-height: 1;
border-bottom: 1px solid #eee;
}
.info {
.item {
display: flex;
align-content: center;
margin-top: 23px;
> img {
width: 24px;
height: 24px;
background-color: #0f0;
}
> span {
font-size: 11px;
color: #666;
margin-left: 10px;
}
}
.info{
.item{
display: flex;
align-content: center;
margin-top: 23px;
>img{
width: 24px;
height: 24px;
background-color: #0f0;
}
>span{
font-size: 11px;
color: #666;
margin-left: 10px;
}
}
}
.button {
position: absolute;
width: 260px;
bottom: 28px;
display: flex;
justify-content: space-between;
> div {
width: 114px;
height: 23px;
border-radius: 3px;
font-size: 10px;
color: #fff;
line-height: 23px;
text-align: center;
}
.button{
position: absolute;
width: 260px;
bottom: 28px;
display: flex;
justify-content: space-between;
>div{
width: 114px;
height: 23px;
border-radius: 3px;
font-size: 10px;
color: #fff;
line-height: 23px;
text-align: center;
}
.modify{
background-color: #08AE98;
}
.del{
background-color: #D12C2E;
}
.modify {
background-color: #08ae98;
}
.del {
background-color: #d12c2e;
}
}
}
</style>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent } from "vue";
export default defineComponent({
})
props:{
date:{
type:String
},
watch:{
type:Number
},
share:{
type:Number
}
}
});
</script>

11
src/components/VideoPlay.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="video">
<video src=""></video>
<video :src="url" :controls="true"></video>
</div>
</template>
<style lang="scss" scoped>
@@ -8,7 +9,8 @@
width: 976px;
height: 563px;
border-radius: 17px;
background-color: #0f0;
background: white;
// background-color: #0f0;
overflow: hidden;
>video{
width: 100%;
@@ -20,6 +22,11 @@
import { defineComponent } from 'vue';
export default defineComponent({
props:{
url:{
type:String
}
},
setup(){
console.log(1)
}