<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>