front-template/src/components/front/info-bottom.vue
2025-01-10 17:09:36 +08:00

58 lines
1.4 KiB
Vue

<!--详情底部-->
<template>
<el-row :gutter="20">
<el-col :span="14">
<!--评论区-->
<div class="comment" v-for="item in state.commentList">
<el-row :gutter="20">
<el-col :span="3">{{ item.userName }}</el-col>
<el-col :span="6">
<span class="time">
{{item.createTime}}
</span>
</el-col>
</el-row>
<div class="content">
{{ item.content }}
</div>
<el-divider />
</div>
</el-col>
<!--热门-->
<el-col :span="10">
<item2></item2>
</el-col>
</el-row>
</template>
<script setup lang="ts">
import Item2 from '~/components/front/item2.vue'
const state =reactive(<any>{
commentList:[
{userName:"小人",content:"的电影影视作品,影片的导演是凯莉",createTime:"2024-09-30 23:15:50"},
{userName:"小人",content:"的电影影视作品,影片的导演是凯莉",createTime:"2024-09-30 23:15:50"},
{userName:"小人",content:"的电影影视作品,影片的导演是凯莉",createTime:"2024-09-30 23:15:50"},
{userName:"小人",content:"的电影影视作品,影片的导演是凯莉",createTime:"2024-09-30 23:15:50"},
{userName:"小人",content:"的电影影视作品,影片的导演是凯莉",createTime:"2024-09-30 23:15:50"},
]
})
</script>
<style scoped>
.comment{
color: #666;
font-size: 13px;
word-wrap: break-word;
.content{
padding-top: 15px;
}
.time{
color: #aaa;
}
}
:deep(.el-image){
border-radius: 10px;
height: 420px;
margin-left: 30px;
}
</style>