53 lines
1.8 KiB
Vue
53 lines
1.8 KiB
Vue
<template>
|
|
<div class="comment uk-flex">
|
|
<img
|
|
:src="comment.thumbnail"
|
|
class="comment-avatar uk-border-circle uk-margin-right"
|
|
style="width: 48px; height: 48px;"
|
|
loading="lazy"
|
|
alt="Avatar"
|
|
/>
|
|
|
|
<div class="comment-content">
|
|
<div class="comment-header">
|
|
<div v-if="comment.pinned" class="comment-pinned uk-text-meta">
|
|
<font-awesome-icon icon="thumbtack"></font-awesome-icon> {{ $t("comment.pinned_by") }}
|
|
{{ uploader }}
|
|
</div>
|
|
|
|
<div class="comment-author">
|
|
<router-link class="uk-text-bold uk-text-small" :to="comment.commentorUrl">
|
|
{{ comment.author }} </router-link
|
|
> <font-awesome-icon v-if="comment.verified" icon="check"></font-awesome-icon>
|
|
</div>
|
|
<div class="comment-meta uk-text-meta uk-margin-small-bottom">
|
|
{{ comment.commentedTime }}
|
|
</div>
|
|
</div>
|
|
<div class="comment-body" style="white-space: pre-wrap">
|
|
{{ comment.commentText }}
|
|
</div>
|
|
<div class="comment-footer uk-margin-small-top uk-text-meta">
|
|
<font-awesome-icon icon="thumbs-up" style="margin-right: 4px;"></font-awesome-icon>
|
|
<span>{{ numberFormat(comment.likeCount) }}</span>
|
|
|
|
<font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
comment: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
},
|
|
uploader: { type: String, default: null },
|
|
},
|
|
};
|
|
</script>
|