|
|
@@ -1,12 +1,12 @@
|
|
|
<template>
|
|
|
- <el-card :class="['reply-card', total > 0 && 'header-has-border']" shadow="never">
|
|
|
+ <el-card :class="['reply-card', total > 0 && 'header-has-border', showInput && 'card-has-padding']" shadow="never">
|
|
|
<template #header>
|
|
|
<el-button type="primary" link @click="showInput = !showInput">留言
|
|
|
<template #icon><el-icon size="16"><tjm-icon-mdi-comment-text-outline /></el-icon></template>
|
|
|
</el-button>
|
|
|
|
|
|
<div v-show="showInput" class="reply-form">
|
|
|
- <el-input v-model="messageContent" type="textarea" autosize clearable show-word-limit maxlength="140" placeholder="发布你的留言"></el-input>
|
|
|
+ <el-input v-model="messageContent" type="textarea" clearable autosize show-word-limit maxlength="140" placeholder="发布你的留言"></el-input>
|
|
|
<el-button :loading="isSaving" type="primary" :disabled="!messageContent" @click="submit">发布</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -23,7 +23,7 @@
|
|
|
<div class="reply-card__footer">
|
|
|
<template v-if="total > replyCount">
|
|
|
<el-divider></el-divider>
|
|
|
- <el-button class="text-reverse" type="primary" icon="arrow-right" link>查看全部11条留言</el-button>
|
|
|
+ <el-button class="text-reverse" type="primary" icon="arrow-right" link>查看全部{{ replyTotal }}条留言</el-button>
|
|
|
</template>
|
|
|
<template v-else><el-divider v-if="total">已加载全部留言</el-divider></template>
|
|
|
</div>
|
|
|
@@ -70,6 +70,12 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
+ computed: {
|
|
|
+ replyTotal() {
|
|
|
+ return (this.replyData && this.replyData.length && (this.total + this.replyData.map(r => r.childrenCount).reduce((p, v) => p + v))) || 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
mounted() {
|
|
|
this.reloadTree();
|
|
|
},
|
|
|
@@ -142,10 +148,9 @@ export default {
|
|
|
align-items: flex-end;
|
|
|
width: 80%;
|
|
|
margin-top: calc(var(--el-card-padding) / 2);
|
|
|
- padding-bottom: calc(var(--el-card-padding) / 2);
|
|
|
|
|
|
.el-button {
|
|
|
- margin-top: calc(var(--el-card-padding) / 2);
|
|
|
+ margin-top: 18px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -198,14 +203,20 @@ export default {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
- width: 80%;
|
|
|
+ width: calc(100% - 2 * var(--el-card-padding));
|
|
|
height: 1px;
|
|
|
background: var(--el-card-border-color);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-card__body {
|
|
|
- padding: calc(var(--el-card-padding) / 2) 10%;
|
|
|
+ padding: calc(var(--el-card-padding) / 2) var(--el-card-padding);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.card-has-padding.reply-card > :deep {
|
|
|
+ .el-card__header {
|
|
|
+ padding: var(--el-card-padding);
|
|
|
}
|
|
|
}
|
|
|
</style>
|