117 lines
2.4 KiB
Vue
117 lines
2.4 KiB
Vue
<template lang="pug">
|
|
.comment
|
|
.title 全部评论
|
|
ul.list(v-if="commentList.length != 0")
|
|
li(v-for="(item,index) in commentList")
|
|
img(class="tx" :src="item.image")
|
|
.right
|
|
.right_top
|
|
.name
|
|
p {{ item.nick_name }}
|
|
span {{ item.create_time }}
|
|
.zan
|
|
img(src="/static/img/icon/give_thumbs-up.png")
|
|
span {{ item.praise_count }}
|
|
.right_bottom {{ item.content }}
|
|
.nodata(v-else)
|
|
img(src="/static/img/hm_bg_img_no.png")
|
|
p 快来发表你的评论吧
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Comment',
|
|
props: {
|
|
commentList: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data () {
|
|
return {}
|
|
},
|
|
created () {
|
|
},
|
|
methods: {}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.comment {
|
|
.title {
|
|
height: 15.5px;
|
|
background-color: #ffffff;
|
|
font-family: PingFangSC-Bold;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
padding: 0 0.32rem;
|
|
box-sizing: border-box;
|
|
line-height: 16.8px;
|
|
margin-bottom: 0.373rem;
|
|
}
|
|
.list {
|
|
padding: 0 0.32rem;
|
|
box-sizing: border-box;
|
|
li {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-bottom: 0.933rem;
|
|
.tx {
|
|
width: 0.933rem;
|
|
height: 0.947rem;
|
|
margin-right: 0.267rem;
|
|
border-radius: 100%;
|
|
}
|
|
.right {
|
|
.right_top {
|
|
margin-bottom: 0.507rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.name {
|
|
font-size: 0;
|
|
p {
|
|
font-size: 0.373rem;
|
|
color: #333333;
|
|
}
|
|
span {
|
|
font-size: 0.267rem;
|
|
color: #999999;
|
|
}
|
|
}
|
|
.zan {
|
|
img {
|
|
width: 0.347rem;
|
|
height: 0.36rem;
|
|
margin-right: 0.133rem;
|
|
vertical-align: middle;
|
|
}
|
|
span {
|
|
font-size: 0.32rem;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
.right_bottom {
|
|
font-size: 0.373rem;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.nodata {
|
|
text-align: center;
|
|
margin-top: 0.84rem;
|
|
img {
|
|
width: 209px;
|
|
height: 175px;
|
|
margin-bottom: 0.68rem;
|
|
}
|
|
p {
|
|
font-size: 14px;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
</style>
|