视频详情
This commit is contained in:
parent
0432653cd3
commit
6b1eb02e9b
GPG Key ID:
A7972FD973317FF3
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="reviewitem">
|
||||
<div class="top">
|
||||
<img src="" alt="">
|
||||
<div class="name">qweqw</div>
|
||||
<div class="lv">
|
||||
<div class="img">
|
||||
<img src="" alt="">
|
||||
<img src="" alt="">
|
||||
<img src="" alt="">
|
||||
<img src="" alt="">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<div class="num">8.0</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cont">
|
||||
dafjkldashfjksdhjkhfgjkdshjkfgsdhjkghjkshgjsjkhg
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="date">2020-10-10</div>
|
||||
<div class="reply">回复</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.reviewitem{
|
||||
width: 100%;
|
||||
margin-bottom: 50px;
|
||||
.top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>img{
|
||||
width: 57px;
|
||||
height: 57px;
|
||||
border-radius: 50%;
|
||||
background-color: #0f0;
|
||||
|
||||
}
|
||||
.name{
|
||||
font-size: 13px;
|
||||
color: #111;
|
||||
margin-left: 10px;
|
||||
|
||||
}
|
||||
.lv{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.img{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>img{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #0f0;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
.num{
|
||||
font-size: 11px;
|
||||
color: #D12C2E;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cont{
|
||||
margin-left: 67px;
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
|
||||
}
|
||||
.bottom{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-left: 67px;
|
||||
margin-top: 25px;
|
||||
.date{
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
|
||||
}
|
||||
.reply{
|
||||
font-size: 10px;
|
||||
color: #08AE98;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup(){
|
||||
console.log(1)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -6,6 +6,15 @@
|
||||
<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>
|
||||
@ -19,6 +28,54 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script lang="ts">
|
||||
|
||||
@ -8,6 +8,8 @@
|
||||
width: 976px;
|
||||
height: 563px;
|
||||
border-radius: 17px;
|
||||
background-color: #0f0;
|
||||
overflow: hidden;
|
||||
>video{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -2,20 +2,90 @@
|
||||
<div class="review">
|
||||
<div class="top">
|
||||
<div class="title">
|
||||
<span></span>
|
||||
该视频评价
|
||||
<span>8.0分</span>
|
||||
</div>
|
||||
<div class="score"></div>
|
||||
<div class="score">8.0分</div>
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
<ReviewItem></ReviewItem>
|
||||
<ReviewItem></ReviewItem>
|
||||
<ReviewItem></ReviewItem>
|
||||
<ReviewItem></ReviewItem>
|
||||
</div>
|
||||
|
||||
<div class="reply">
|
||||
<a-textarea v-model:value="value" placeholder="Basic usage" :rows="4" />
|
||||
<div class="send">发表留言</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.review{
|
||||
width: 1320px;
|
||||
background-color: #fff;
|
||||
padding: 0 28px 56px 28px;
|
||||
border-radius: 17px;
|
||||
.top{
|
||||
padding: 28px 0 18px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ededed;
|
||||
margin-bottom: 20px;
|
||||
.title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #111;
|
||||
>span{
|
||||
width: 56px;
|
||||
height: 17px;
|
||||
background-color: #F9D5D6;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
margin-left: 6px;
|
||||
color: #D12B2D;
|
||||
}
|
||||
}
|
||||
.score{
|
||||
font-size: 12px;
|
||||
color: #D12B2D;
|
||||
|
||||
}
|
||||
}
|
||||
.reply{
|
||||
padding-top: 28px;
|
||||
border-top: 1px solid #ededed;
|
||||
&::v-deep .ant-input{
|
||||
font-size: 11px;
|
||||
}
|
||||
.send{
|
||||
width: 62px;
|
||||
height: 22px;
|
||||
margin-top: 30px;
|
||||
background-color: #07AD97;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
color: #fff;
|
||||
font-size: 9px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import ReviewItem from "./ReviewItem.vue"
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
ReviewItem
|
||||
},
|
||||
serup(){
|
||||
console.log(1)
|
||||
}
|
||||
|
||||
@ -20,6 +20,10 @@ const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: "video",
|
||||
component: () => import("../views/regime/Video.vue")
|
||||
},
|
||||
{
|
||||
path: "videoinfo",
|
||||
component: () => import("../views/regime/VideoInfo.vue")
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -1,14 +1,38 @@
|
||||
<template>
|
||||
<div class="videoinfo">
|
||||
<div class="info">
|
||||
<VideoPlay></VideoPlay>
|
||||
<VideoCont></VideoCont>
|
||||
</div>
|
||||
<VideoReview class="review"></VideoReview>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.videoinfo{
|
||||
width: 1320px;
|
||||
height: 563px;
|
||||
.info{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.review{
|
||||
margin-top: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
import VideoPlay from "@/components/VideoPlay.vue"
|
||||
import VideoCont from "@/components/VideoCont.vue"
|
||||
import VideoReview from "@/components/VideoReview.vue"
|
||||
export default defineComponent({
|
||||
components:{
|
||||
VideoPlay,
|
||||
VideoCont,
|
||||
VideoReview
|
||||
},
|
||||
setup(){
|
||||
|
||||
console.log(1)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user