93 lines
2.2 KiB
Vue
93 lines
2.2 KiB
Vue
<template>
|
|
<div class="review">
|
|
<div class="top">
|
|
<div class="title">
|
|
该视频评价
|
|
<span>8.0分</span>
|
|
</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)
|
|
}
|
|
})
|
|
</script> |