1342 lines
39 KiB
HTML
1342 lines
39 KiB
HTML
<script type="text/x-template" id="ms-comment">
|
||
<div class="comment-container">
|
||
<!--评论开始-->
|
||
<div class="article-comment">
|
||
<a style="width: 50px;height: 50px;margin-right: 10px;">
|
||
<img src="/upload/1/people/icon/1872457333638361088.png" alt="icon">
|
||
</a>
|
||
<!--输入框-start-->
|
||
<el-form ref="form" :model="form" :rules="rules" style="width:100%;margin-top: 5px;">
|
||
<el-form-item prop="commentContent" style="margin-top: -5px">
|
||
<el-input type="textarea" placeholder="快来评论吧~" v-model="form.commentContent">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button style="margin-left: 40px" type="primary" plain @click="send()" :disabled="!form.commentContent">提交评论</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!--输入框-end-->
|
||
</div>
|
||
<!--评论结束-->
|
||
<!--评论回复列表-start-->
|
||
<div class="messages" v-if="total>0">
|
||
<div class="w-commentlist-header">
|
||
<div class="w-commentlist-total">{{total}}条评论</div>
|
||
</div>
|
||
<!--评论列表-start-->
|
||
<div class="messages-item">
|
||
<div class="w-comment-list">
|
||
<!-- 评论模型 -->
|
||
<div v-show="flag" v-for="(item,index) in commentDataList" :key="item.id + item.parentName"
|
||
style="margin-bottom: 20px;">
|
||
<!-- 父级评论start -->
|
||
<div class="w-comment-item" style="display:flex">
|
||
<!--头像默认用一个图标替代-start-->
|
||
<a class="w-comment-userpic" style="margin-right: 10px;">
|
||
<img class="w-user-pic" v-if="item.puIcon"
|
||
:src="item.puIcon" />
|
||
<img class="w-user-pic" v-else
|
||
src="/upload/1/people/icon/1872457333638361088.png" />
|
||
</a>
|
||
<!--头像默认用一个图标替代-end-->
|
||
<!--评论内容-start-->
|
||
<div class="w-comment-item-box">
|
||
<!-- 评论用户名start -->
|
||
<div class="w-comment-item-box-head">
|
||
<a class="w-comment-item-username">
|
||
{{item.peopleName?item.peopleName:'游客'}}
|
||
</a>
|
||
</div>
|
||
<!-- 评论用户名end -->
|
||
<!--具体评论内容-start-->
|
||
<div class="w-comment-item-box-content">
|
||
<p> {{item.commentContent}} </p>
|
||
<!--图片-->
|
||
<!-- <div v-if="item.commentPicture">-->
|
||
<!-- <template v-for="picture in JSON.parse(item.commentPicture)">-->
|
||
<!-- <el-image-->
|
||
<!-- style="width: 100px; height: 100px;margin: 0 10px 10px 0px"-->
|
||
<!-- :src="`{ms:global.contextPath/}`+picture.path"-->
|
||
<!-- :preview-src-list="item.pictureList"-->
|
||
<!-- >-->
|
||
<!-- </el-image>-->
|
||
<!-- </template>-->
|
||
<!-- </div>-->
|
||
<!-- <!–视频–>-->
|
||
<!-- <div v-if="item.commentFileJson">-->
|
||
<!-- <template v-for="file in JSON.parse(item.commentFileJson)">-->
|
||
<!-- <video class="video-demo">-->
|
||
<!-- <source :src="file.path" type="video/mp4"/>-->
|
||
<!-- </video>-->
|
||
<!-- </template>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
<!--具体评论内容-start-->
|
||
<!-- 评论底部交互start -->
|
||
<div class="w-comment-item-box-bottom">
|
||
<span class="w-comment-time">{{item.commentTime}} IP 属地:{{item.commentIp}} </span>
|
||
<div class="w-comment-interaction">
|
||
<button class="w-comment-reply-btn">
|
||
<i class="iconfont icon-pinglun label"></i>
|
||
<label :for="'reply-input'+index" class="value" @click="switchShowComment(item)">
|
||
回复
|
||
</label>
|
||
</button>
|
||
<button class="w-comment-like-btn" @click="like(item)" :class="{checked:item.likeLabel=='取消'}">
|
||
<i class="iconfont icon-zan label"></i>
|
||
<span v-if="!item.likeTotal">赞</span>
|
||
<span class="value" v-else>
|
||
{{item.likeTotal}}
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- 评论底部交互end -->
|
||
<!-- 回复框start -->
|
||
<div class="w-comment-reply" v-show="item.showChildComment">
|
||
<el-input style="width: 98%;margin-right: 10px" type="text" :placeholder="'请输入回复内容'" v-model="form.replyContent"
|
||
:id="'reply-input'+index">
|
||
</el-input>
|
||
<el-button @click="reply(item)" :disabled="!form.replyContent" type="primary">发送</el-button>
|
||
</div>
|
||
<!-- 回复框end -->
|
||
</div>
|
||
</div>
|
||
<!-- 父级评论end -->
|
||
<!-- 子评论列表start -->
|
||
<div
|
||
v-for="child,index in (showChildComment?item.childCommentDataLists:item.childCommentDataLists.slice(0,2))"
|
||
:key="child.id+child.parentName">
|
||
<div class="w-comment-item w-child-reply" style="display:flex">
|
||
<!--头像默认用一个图标替代-start-->
|
||
<a class="w-comment-userpic" style="margin-right: 10px;">
|
||
<img class="w-user-pic" v-if="child.puIcon"
|
||
:src="child.puIcon" />
|
||
<img class="w-user-pic" v-else
|
||
src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_xl.jpg?source=32738c0c" />
|
||
</a>
|
||
<!--头像默认用一个图标替代-end-->
|
||
<!--评论内容-start-->
|
||
<div class="w-comment-item-box">
|
||
<!-- 评论用户名start -->
|
||
<div class="w-comment-item-box-head">
|
||
<a class="w-comment-item-username">
|
||
{{child.peopleName?child.peopleName:'游客'}}
|
||
</a>
|
||
<i class="el-icon-caret-right"
|
||
style="font-size: 12px;color:rgb(153, 153, 153);margin: 0px 4px;"></i>
|
||
<a class="w-comment-item-replyname">{{child.parentName?child.parentName:'游客'}}</a>
|
||
</div>
|
||
<!-- 评论用户名end -->
|
||
<!--具体评论内容-start-->
|
||
<div class="w-comment-item-box-content">
|
||
<p> {{child.commentContent}} </p>
|
||
</div>
|
||
<!--具体评论内容-start-->
|
||
<!-- 评论底部交互start -->
|
||
<div class="w-comment-item-box-bottom">
|
||
<span class="w-comment-time">{{child.commentTime}} IP 属地:{{item.commentIp}} </span>
|
||
<div class="w-comment-interaction">
|
||
<button class="w-comment-reply-btn">
|
||
<i class="iconfont icon-pinglun label"></i>
|
||
<label class="value" :for="'child-reply'+index" @click="switchShowComment(child)">
|
||
回复
|
||
</label>
|
||
</button>
|
||
<button class="w-comment-like-btn" @click="like(child)"
|
||
:class="{checked:child.likeLabel=='取消'}">
|
||
<i class="iconfont icon-zan label"></i>
|
||
<span v-if="!child.likeTotal">赞</span>
|
||
<span class="value" v-else>
|
||
{{child.likeTotal}}
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- 评论底部交互end -->
|
||
<!-- 回复框start -->
|
||
<div class="w-comment-reply" v-show="child.showChildComment">
|
||
<el-input style="width: 98%;margin-right: 10px" type="text" :placeholder="'请输入回复内容'" v-model="form.replyContent"
|
||
:id="'child-reply'+index">
|
||
</el-input>
|
||
<el-button @click="reply(child)" :disabled="!form.replyContent" type="primary">发送</el-button>
|
||
</div>
|
||
<!-- 回复框end -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 子评论列表end -->
|
||
<!-- 当子列表大于2时出现start -->
|
||
<button class="w-show-other-childcomment"
|
||
v-if="item.childCommentDataLists.length > 2 && item.childCommentDataLists.length <= 5 && !showChildComment"
|
||
@click="showOtherchildComment(item)">
|
||
展开其他 {{item.childCommentDataLists.length - 2}} 条回复<i class="el-icon-arrow-right"></i>
|
||
</button>
|
||
<button class="w-show-other-childcomment" v-else-if="item.childCommentDataLists.length > 5"
|
||
@click="showAllChildComment(item)">
|
||
查看全部 {{item.childCommentDataLists.length}} 条回复<i class="el-icon-arrow-right"></i>
|
||
</button>
|
||
<!-- 当子列表大于2时出现end -->
|
||
</div>
|
||
<!-- -->
|
||
<el-dialog title="评论回复" :visible.sync="dialogTableVisible" v-if="currentComment" class="w-dialog-container"
|
||
:lock-scroll="false">
|
||
<div class="w-dialog-reply">
|
||
<div class="current-comment">
|
||
<div class="w-comment-item" style="display:flex">
|
||
<!--头像默认用一个图标替代-start-->
|
||
<a class="w-comment-userpic" style="margin-right: 10px;">
|
||
<img class="w-user-pic" v-if="currentComment.puIcon"
|
||
:src="currentComment.puIcon" />
|
||
<img class="w-user-pic" v-else
|
||
src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_xl.jpg?source=32738c0c" />
|
||
</a>
|
||
<!--头像默认用一个图标替代-end-->
|
||
<!--评论内容-start-->
|
||
<div class="w-comment-item-box">
|
||
<!-- 评论用户名start -->
|
||
<div class="w-comment-item-box-head">
|
||
<a class="w-comment-item-username">
|
||
{{currentComment.peopleName?currentComment.peopleName:'游客'}}
|
||
</a>
|
||
</div>
|
||
<!-- 评论用户名end -->
|
||
<!--具体评论内容-start-->
|
||
<div class="w-comment-item-box-content">
|
||
<p> {{currentComment.commentContent}} </p>
|
||
</div>
|
||
<!--具体评论内容-start-->
|
||
<!-- 评论底部交互start -->
|
||
<div class="w-comment-item-box-bottom">
|
||
<span class="w-comment-time">{{currentComment.commentTime}} IP 属地:{{item.commentIp}} </span>
|
||
<div class="w-comment-interaction">
|
||
<button class="w-comment-reply-btn">
|
||
<i class="iconfont icon-pinglun label"></i>
|
||
<label class="value" :for="'dialog-reply'+currentComment.puNickname"
|
||
@click="switchShowComment(currentComment)">
|
||
回复
|
||
</label>
|
||
</button>
|
||
<button class="w-comment-like-btn" @click="like(currentComment)"
|
||
:class="{checked:currentComment.likeLabel=='取消'}">
|
||
<i class="iconfont icon-zan label"></i>
|
||
<span v-if="!currentComment.likeTotal">赞</span>
|
||
<span class="value" v-else>
|
||
{{currentComment.likeTotal}}
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- 评论底部交互end -->
|
||
<div class="w-comment-reply" v-show="currentComment.showChildComment">
|
||
<el-input style="width: 98%" type="text" :placeholder="'请输入回复内容'" v-model="form.replyContent"
|
||
:id="'dialog-reply'+currentComment.puNickname">
|
||
</el-input>
|
||
<el-button @click="reply(currentComment)" :disabled="!form.replyContent" type="primary">发送
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-reply-list">
|
||
<div class="w-commentlist-header">
|
||
<div class="w-commentlist-total">{{currentComment.childCommentDataLists.length}}条回复</div>
|
||
</div>
|
||
<div class="w-reply-list-container">
|
||
<div class="w-reply-item" v-for="childReply,index in currentComment.childCommentDataLists"
|
||
:key="childReply.id">
|
||
<div class="w-comment-item w-child-reply" style="display:flex">
|
||
<!--头像默认用一个图标替代-start-->
|
||
<a class="w-comment-userpic" style="margin-right: 10px;">
|
||
<img class="w-user-pic" v-if="childReply.puIcon"
|
||
:src="childReply.puIcon" />
|
||
<img class="w-user-pic" v-else="childReply.puIcon"
|
||
src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_xl.jpg?source=32738c0c" />
|
||
</a>
|
||
<!--头像默认用一个图标替代-end-->
|
||
<!--评论内容-start-->
|
||
<div class="w-comment-item-box">
|
||
<!-- 评论用户名start -->
|
||
<div class="w-comment-item-box-head">
|
||
<a class="w-comment-item-username">
|
||
{{childReply.peopleName?childReply.peopleName:'游客'}}
|
||
</a>
|
||
<i class="el-icon-caret-right"
|
||
style="font-size: 12px;color:rgb(153, 153, 153);margin: 0px 4px;"></i>
|
||
<a class="w-comment-item-replyname">{{childReply.parentName?childReply.parentName:'游客'}}</a>
|
||
</div>
|
||
<!-- 评论用户名end -->
|
||
<!--具体评论内容-start-->
|
||
<div class="w-comment-item-box-content">
|
||
<p> {{childReply.commentContent}} </p>
|
||
</div>
|
||
<!--具体评论内容-start-->
|
||
<!-- 评论底部交互start -->
|
||
<div class="w-comment-item-box-bottom">
|
||
<span class="w-comment-time">{{childReply.commentTime}} IP 属地:{{item.commentIp}} </span>
|
||
<div class="w-comment-interaction">
|
||
<button class="w-comment-reply-btn" @click="switchShowComment(childReply)">
|
||
<i class="iconfont icon-pinglun label"></i>
|
||
<label class="value" :for="'dialog-reply'+index">
|
||
回复
|
||
</label>
|
||
</button>
|
||
<button class="w-comment-like-btn" @click="like(childReply)"
|
||
:class="{checked:reply.likeLabel=='取消'}">
|
||
<i class="iconfont icon-zan label"></i>
|
||
<span v-if="!reply.likeTotal">赞</span>
|
||
<span class="value" v-else>
|
||
{{childReply.likeTotal}}
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- 评论底部交互end -->
|
||
<!-- 回复框start -->
|
||
<div class="w-comment-reply" v-show="childReply.showChildComment">
|
||
<el-input style="width: 98%" type="text" :placeholder="'请输入回复内容'" v-model="form.replyContent"
|
||
:id="'dialog-reply'+index">
|
||
</el-input>
|
||
<el-button @click="reply(childReply)" :disabled="!form.replyContent" type="primary">发送
|
||
</el-button>
|
||
</div>
|
||
<!-- 回复框end -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
<!--评论列表-end-->
|
||
<!-- 当子列表大于2时出现start -->
|
||
<button class="w-show-other-comment"
|
||
:style="loadMoreStyle"
|
||
@click="showNextComment()"
|
||
:disabled="isMoreDisabled"
|
||
>
|
||
{{moreText}}<i class="el-icon-arrow-right"></i>
|
||
</button>
|
||
<!-- 当子列表大于2时出现end -->
|
||
</div>
|
||
<div v-else class="emptyText">
|
||
<span>{{emptyText}}</span>
|
||
</div>
|
||
<!--评论回复列表-end-->
|
||
</div>
|
||
</script>
|
||
<script>
|
||
Vue.component('ms-comment',{
|
||
template: "#ms-comment",
|
||
name: "ms-comment",
|
||
props:{
|
||
// 业务编号
|
||
dataId:{
|
||
type: String
|
||
},
|
||
// 当前页
|
||
pageNo:{
|
||
type: String
|
||
},
|
||
// 业务名称(文章标题)
|
||
dataTitle:{
|
||
type: String
|
||
},
|
||
// 业务类型
|
||
dataType: {
|
||
type: String
|
||
},
|
||
},
|
||
data: function(){
|
||
return{
|
||
// 加载更多控制
|
||
loadMoreStyle:'',
|
||
// 控制加在更多按钮的禁用
|
||
isMoreDisabled: false,
|
||
// 加载更多文本
|
||
moreText: '加载更多',
|
||
// 已弃用web接口，默认移除验证码校验
|
||
verifCode: ms.base + "/code?t=" + (new Date).getTime(),//ms.base + "/code?t=" + new Date().getTime()
|
||
windowScrollStyle: '',
|
||
flag: true,
|
||
commentDataList: [], //评论表列表
|
||
pageSize: 10, //页面数量
|
||
currentPage: 1, //初始页,
|
||
emptyText: '',
|
||
//总记录数量
|
||
total: 0,
|
||
form: {
|
||
//评论内容
|
||
commentContent: '',
|
||
//文章商品id
|
||
dataId: this.dataId,
|
||
//业务链接
|
||
collectionDataUrl: window.location.href,
|
||
//业务类型
|
||
dataType: this.dataType,
|
||
// 业务名称
|
||
dataTitle: this.dataTitle,
|
||
//回复内容
|
||
replyContent: '',
|
||
// 评论图片
|
||
commentPicture: [],
|
||
// 附件JSON
|
||
commentFileJson: [],
|
||
// 评论打分
|
||
commentPoints: 0
|
||
},
|
||
rules: {
|
||
commentContent: [{
|
||
// "required": true,
|
||
// "message": "请输入评论"
|
||
}]
|
||
},
|
||
isVisitor: 'false', //是否开启游客
|
||
// likeLabel: '点赞', //评论点赞label
|
||
dialogTableVisible: false,
|
||
showChildComment: false, //是否展开其他的子评论
|
||
dialogTableVisible: false,
|
||
// 展示当前评论的所有子评论
|
||
currentComment: null,
|
||
// 评价颜色
|
||
commentPointsColor: ['#99A9BF', '#F7BA2A', '#FF9900'],
|
||
}
|
||
},
|
||
computed: {
|
||
//表格最大高度 用来自适应
|
||
tableHeight: function () {
|
||
return document.documentElement.clientHeight - 171;
|
||
}
|
||
},
|
||
methods: {
|
||
// 加载更多
|
||
showNextComment: function () {
|
||
this.pageNo = this.pageNo+1
|
||
// 默认返回了所有数据，此方法弃用
|
||
// this.list()
|
||
},
|
||
//初始化评论数据
|
||
initCommentItem: function(data) {
|
||
//回复框的显示与隐藏
|
||
data.showChildComment = false
|
||
//初始化评论点赞总数
|
||
data.likeTotal = 0
|
||
//初始化评论点赞的状态
|
||
data.likeLabel = "点赞"
|
||
//初始化子评论列表
|
||
data.childCommentDataLists = []
|
||
// 查询当前评论的点赞数
|
||
ms.http.post( ms.base + "/attention/collectionLog/count.do", {
|
||
dataId: data.id,
|
||
dataType: '评论点赞'
|
||
}).then(function (res) {
|
||
// 将点赞数添加到data中
|
||
if (res.result) {
|
||
data.likeTotal = res.data;
|
||
}
|
||
|
||
})
|
||
},
|
||
//展开其他的子评论列表
|
||
showOtherchildComment: function(item) {
|
||
this.showChildComment = true
|
||
this.childCommentList = item.childCommentDataLists
|
||
},
|
||
//展示所有的子评论列表
|
||
showAllChildComment: function(item) {
|
||
this.dialogTableVisible = true
|
||
this.currentComment = item
|
||
},
|
||
//转换时间
|
||
dateHandler: function(millisecond) {
|
||
var timdedetail = millisecond; //假如是10位毫秒需要乘1000
|
||
//获取年份
|
||
var year = new Date(timdedetail).getFullYear();
|
||
//获取月份，获取的月份比实际小1，所以在使用的时候需要+1
|
||
var month = new Date(timdedetail).getMonth() + 1;
|
||
//获取日
|
||
var date = new Date(timdedetail).getDate();
|
||
//获取时
|
||
var hours = new Date(timdedetail).getHours();
|
||
//获取分
|
||
var minutes = new Date(timdedetail).getMinutes();
|
||
//获取秒
|
||
var seconds = new Date(timdedetail).getSeconds();
|
||
//组合格式为年-月-日 时：分：秒（2021-7-5 21:21:21）
|
||
var time = year + "-" + month + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
|
||
return time
|
||
},
|
||
// 回复评论
|
||
reply: function (item) {
|
||
var that = this;
|
||
ms.http.post( ms.base + '/people/comment/save.do', {
|
||
commentId: item.id,
|
||
dataId: that.form.dataId,
|
||
commentContent: that.form.replyContent,
|
||
dataType: that.dataType, //业务类型
|
||
dataTitle: that.dataTitle,
|
||
}).then(function (res) {
|
||
if (res.result) {
|
||
that.form.replyContent = ""
|
||
item.showChildComment = false
|
||
that.$notify({
|
||
title: '成功',
|
||
type: 'success',
|
||
message: '回复成功!',
|
||
duration: 1000,
|
||
onClose: function () {
|
||
that.$refs.form.resetFields()
|
||
location.reload();
|
||
}
|
||
});
|
||
} else {
|
||
that.clearForm();
|
||
that.$message.error(res.msg);
|
||
}
|
||
}).catch(function (err) {
|
||
that.clearForm();
|
||
that.$notify({
|
||
title: '提示',
|
||
dangerouslyUseHTMLString: true,
|
||
message: '需要安装评论插件才能使用，请先进入后台MStore安装评论插件使用。<span style="color: #409EFF; text-decoration: underline;">'
|
||
+'<a href="http://store.mingsoft.net/#/detail?id=268&type=plugin" target="_blank">点击查看评论插件</a></span>',
|
||
type: 'warning'
|
||
});
|
||
console.log(err);
|
||
})
|
||
|
||
},
|
||
// 评论点赞
|
||
like: function (item) {
|
||
var that = this
|
||
ms.http.post( ms.base + "/people/attention/collection/save.do", {
|
||
dataId: item.id,
|
||
dataType: '评论点赞',
|
||
collectionDataTitle: item.commentContent,
|
||
}).then(function (res) {
|
||
if (res.data){
|
||
that.$message({
|
||
message: '点赞成功',
|
||
type: 'success'
|
||
});
|
||
item.likeLabel = '取消'
|
||
} else {
|
||
that.$message('取消点赞');
|
||
item.likeLabel = '点赞'
|
||
}
|
||
that.likeTotals(item)
|
||
});
|
||
},
|
||
// 评论点赞数
|
||
likeTotals: function (item) {
|
||
var that = this;
|
||
//用户-关注接口
|
||
ms.http.post( ms.base + "/attention/collection/queryCollectionCount.do", {
|
||
dataIds: item.id,
|
||
dataType: "评论点赞"
|
||
}).then((res) => {
|
||
item.likeTotal = 0;
|
||
if (res.data && res.data.rows.length > 0) {
|
||
item.likeTotal = res.data.rows[0].dataCount;
|
||
}
|
||
})
|
||
},
|
||
// 判断是否开启游客
|
||
// 已弃用，开发者可以自由扩展游客功能
|
||
enableVisitor: function () {
|
||
var that = this;
|
||
ms.http.get( ms.base + '/mdiy/config/get.do', {
|
||
configName: '评论配置',
|
||
key: 'enableVisitor'
|
||
}).then(function (res) {
|
||
if (res.result) {
|
||
that.isVisitor = res.data
|
||
}
|
||
})
|
||
},
|
||
hide: function (arr) {
|
||
var that = this
|
||
arr.forEach(function (x) {
|
||
let e = that.$el.querySelector("#key_" + x)
|
||
if (e) {
|
||
e.style.display = 'none'
|
||
}
|
||
})
|
||
},
|
||
//vue方法异步请求评论保存接口
|
||
send: function () {
|
||
var that = this;
|
||
that.form.dataType = that.dataType;
|
||
ms.http.post( ms.base + '/people/comment/save.do', that.form).then(function (res) {
|
||
if (res.result) {
|
||
that.$notify({
|
||
title: '成功',
|
||
type: 'success',
|
||
message: '评论成功!',
|
||
duration: 1000,
|
||
onClose: function () {
|
||
that.$refs.form.resetFields()
|
||
location.reload();
|
||
}
|
||
});
|
||
} else {
|
||
that.clearForm();
|
||
that.$message.error(res.msg);
|
||
}
|
||
}).catch(function (err) {
|
||
that.clearForm();
|
||
that.$notify({
|
||
title: '提示',
|
||
dangerouslyUseHTMLString: true,
|
||
message: '需要安装会员插件才能使用，请先进入后台MStore安装会员插件使用。<span style="color: #409EFF; text-decoration: underline;">' +
|
||
'<a href="http://store.mingsoft.net/#/detail?id=269&type=plugin" target="_blank">点击查看会员插件</a></span>',
|
||
type: 'warning'
|
||
});
|
||
})
|
||
|
||
},
|
||
//查询所有评论
|
||
list: function () {
|
||
var that = this;
|
||
ms.http.post( ms.base + '/comment/list.do', {
|
||
dataId: that.dataId,
|
||
dataType: that.dataType,
|
||
//当前页数
|
||
pageNo: that.pageNo,
|
||
//每页文章条数
|
||
pageSize: 9999,
|
||
}).then(function (res) {
|
||
if (res.result) {
|
||
// 所有评论
|
||
var allComment = res.data.rows;
|
||
if (allComment.length <= 0) {
|
||
that.emptyText = '还没有评论，发表第一个评论吧'
|
||
} else {
|
||
// 控制 加载更多按钮是否显示
|
||
if (allComment.length < 10){
|
||
// 按钮添加禁用
|
||
that.loadMoreStyle = "background:none #1214191a;cursor: not-allowed;"
|
||
// 按钮禁用
|
||
that.isMoreDisabled = true
|
||
// 更改提示信息
|
||
that.moreText = '已加载全部'
|
||
}
|
||
ms.http.get( ms.base + '/comment/count.do', {
|
||
dataId: that.dataId,
|
||
dataType: that.dataType
|
||
}).then(function (res) {
|
||
that.total = res.data;
|
||
});
|
||
var commentDataIds = [];
|
||
// 取出dataId
|
||
allComment.forEach(function (data) {
|
||
commentDataIds.push(data.id);
|
||
})
|
||
var allCommentCount = [];
|
||
// 先请求一遍点赞数据
|
||
ms.http.post( ms.base + "/attention/collection/queryCollectionCount.do", {
|
||
dataIds: commentDataIds.toString(),
|
||
dataType: '评论点赞'
|
||
}).then(function (res) {
|
||
allCommentCount = res.data;
|
||
allComment.forEach(function (comment) {
|
||
comment.likeTotal = 0;
|
||
comment.likeLabel = '点赞';
|
||
allCommentCount.rows.forEach(function (item) {
|
||
if (comment.id == item.dataId) {
|
||
comment.likeTotal = item.dataCount;
|
||
comment.likeLabel = item.isLike ? '取消' : '点赞';
|
||
}
|
||
})
|
||
})
|
||
// 评论数据处理
|
||
that.commentDataFormat(allComment);
|
||
}).catch(function (err) {
|
||
console.log(err);
|
||
// 异常处理，抛异常且处理评论数据格式
|
||
that.commentDataFormat(allComment);
|
||
})
|
||
}
|
||
} else{
|
||
that.$notify({
|
||
title: '失败',
|
||
message: res.msg,
|
||
type: 'warning'
|
||
});
|
||
}
|
||
}).catch(function (err){
|
||
that.emptyText = '需要安装评论插件才能使用，请先进入后台MStore安装评论插件使用。'
|
||
that.$notify({
|
||
title: '提示',
|
||
dangerouslyUseHTMLString: true,
|
||
message: '需要安装评论插件才能使用，请先进入后台MStore安装评论插件使用。<span style="color: #409EFF; text-decoration: underline;">' +
|
||
'<a href="http://store.mingsoft.net/#/detail?id=268&type=plugin" target="_blank">点击查看评论插件</a></span>',
|
||
type: 'warning'
|
||
});
|
||
})
|
||
},
|
||
//
|
||
commentDataFormat: function (allComment) {
|
||
var that = this;
|
||
// 第一级评论
|
||
var topComment = allComment.filter(c => !c.topId || c.topId==0)
|
||
|
||
// 遍历所有评论，设置层级关系
|
||
topComment.forEach(function (data) {
|
||
// 如果有peopleInfo 取出头像
|
||
if (data.peopleInfo && data.peopleInfo!='{}'){
|
||
var peopleInfo = JSON.parse(data.peopleInfo)
|
||
data.puIcon = peopleInfo.puIcon;
|
||
}
|
||
// 处理ip
|
||
if (data.commentIp){
|
||
data.commentIp = JSON.parse(data.commentIp).addr;
|
||
}
|
||
//回复框的显示与隐藏
|
||
data.showChildComment = false
|
||
//初始化子评论列表
|
||
data.childCommentDataLists = [];
|
||
// 当前遍历到评论的所有子评论
|
||
var childComments = allComment.filter(item => item.topId && item.topId==data.id)
|
||
|
||
childComments.forEach(function (childData) {
|
||
// 子评论头像
|
||
if (childData.peopleInfo && childData.peopleInfo!='{}'){
|
||
var peopleInfo = JSON.parse(childData.peopleInfo)
|
||
childData.puIcon = peopleInfo.puIcon;
|
||
}
|
||
// 处理ip
|
||
if (childData.commentIp){
|
||
childData.commentIp = JSON.parse(childData.commentIp).addr;
|
||
}
|
||
//回复框的显示与隐藏
|
||
childData.showChildComment = false
|
||
// 如果父评论为顶级评论则直接赋值
|
||
if (childData.commentId == data.id){
|
||
childData.parentName = data.peopleName;
|
||
} else {
|
||
// 找到当前遍历子评论的父评论
|
||
var parentComment = childComments.find(function (item) {
|
||
return item.id == childData.commentId;
|
||
})
|
||
if (parentComment){
|
||
childData.parentName = parentComment.peopleName;
|
||
}
|
||
}
|
||
// 将处理完的数据push到顶级评论的子集中
|
||
data.childCommentDataLists.push(childData);
|
||
});
|
||
// 存放顶级评论
|
||
that.commentDataList.push(data)
|
||
});
|
||
},
|
||
// 清理评论表单数据
|
||
clearForm: function () {
|
||
var that = this;
|
||
that.$refs.form.resetFields();
|
||
},
|
||
show: function (arr) {
|
||
var that = this
|
||
arr.forEach(function (x) {
|
||
let e = that.$el.querySelector("#key_" + x)
|
||
if (e) {
|
||
e.style.display = 'flex'
|
||
}
|
||
})
|
||
},
|
||
//切换回复框
|
||
switchShowComment: function(comment) {
|
||
if (comment.showChildComment) comment.showChildComment = !comment.showChildComment
|
||
else {
|
||
this.commentDataList.forEach((item) => {
|
||
item.showChildComment = false;
|
||
item.childCommentDataLists.forEach((child) => {
|
||
child.showChildComment = false;
|
||
})
|
||
})
|
||
comment.showChildComment = true
|
||
}
|
||
},
|
||
switchShow: function (arr) {
|
||
var that = this
|
||
arr.forEach(function (x) {
|
||
let e = that.$el.querySelector("#key_" + x)
|
||
if (e) {
|
||
e.style.display = e.style.display == 'none' ? 'flex' : 'none'
|
||
}
|
||
})
|
||
},
|
||
windowScroll: function() {
|
||
// 滚动条距离页面顶部的距离
|
||
// 以下写法原生兼容
|
||
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||
if (scrollTop > 200) {
|
||
this.windowScrollStyle = "rgba(255, 255, 255, 1)"
|
||
} else {
|
||
this.windowScrollStyle = "rgba(255, 255, 255, 0.4)"
|
||
}
|
||
},
|
||
// 验证码 看不清换一张
|
||
code: function () {
|
||
this.verifCode = ms.base + "/code?t=" + (new Date).getTime();//
|
||
},
|
||
// 移除图片交互效果
|
||
commentPictureHandRemove: function (file, files) {
|
||
var index = -1;
|
||
index = this.form.commentPicture.findIndex(function (text) {
|
||
return text == file;
|
||
});
|
||
|
||
if (index != -1) {
|
||
this.form.commentPicture.splice(index, 1);
|
||
}
|
||
},
|
||
//上传超过限制
|
||
commentPictureHandExceed: function (files, fileList) {
|
||
this.$notify({
|
||
title: '失败',
|
||
message: '当前最多上传5张图片',
|
||
type: 'warning'
|
||
});
|
||
},
|
||
// 上传图片成功后
|
||
successImg: function (response, file, fileList) {
|
||
var that = this;
|
||
if(response.result){
|
||
that.form.commentPicture.push({
|
||
url: response.data,
|
||
name: file.name,
|
||
uid: file.uid,
|
||
});
|
||
}else {
|
||
this.$notify({
|
||
title: '失败',
|
||
message: response.msg,
|
||
type: 'warning'
|
||
});
|
||
}
|
||
},
|
||
// 附件上传
|
||
// 点击已上传文件
|
||
fileHandlePreview: function (file){
|
||
console.log(file);
|
||
},
|
||
// 移除附件前
|
||
beforeRemove: function (file, fileList){
|
||
return this.$confirm(`确定移除 ${ file.name }？`);
|
||
},
|
||
// 移除附件
|
||
handleRemove: function (file,fileList){
|
||
var fileJsonList = this.form.commentFileJson;
|
||
this.form.commentFileJson = fileJsonList.filter(function (fileJson){
|
||
return fileJson.uid != file.uid;
|
||
})
|
||
},
|
||
// 超出限制
|
||
fileHandleExceed: function (files, fileList){
|
||
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
||
},
|
||
// 上传附件成功后
|
||
successFile: function (response, file, fileList) {
|
||
var that = this;
|
||
if(response.result){
|
||
that.form.commentFileJson.push({
|
||
url: response.data,
|
||
name: file.name,
|
||
uid: file.uid,
|
||
});
|
||
}else {
|
||
this.$notify({
|
||
title: '失败',
|
||
message: response.msg,
|
||
type: 'warning'
|
||
});
|
||
}
|
||
},
|
||
// 视频播放
|
||
playVideo: function (){
|
||
var myVideo = document.getElementsByClassName("video-demo");
|
||
if (myVideo.paused)
|
||
myVideo.play();
|
||
else
|
||
myVideo.pause();
|
||
}
|
||
},
|
||
created: function () {
|
||
this.list();
|
||
this.enableVisitor();
|
||
},
|
||
mounted: function () {
|
||
window.addEventListener('scroll', this.windowScroll)
|
||
},
|
||
beforeDestroy: function () {
|
||
window.removeEventListener('scroll', this.windowScroll)
|
||
}
|
||
})
|
||
</script>
|
||
<style scoped>
|
||
.thumbsUpchecked {
|
||
color: #06f;
|
||
|
||
}
|
||
|
||
.w-show-other-comment{
|
||
width: 50%;
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
line-height: 32px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
background: none rgba(133, 144, 166, 0.1);
|
||
border: 1px solid transparent;
|
||
border-radius: 3px;
|
||
margin: 10px 0px 10px 150px;
|
||
padding: 0px 6px 0px 12px;
|
||
height: 32px;
|
||
color: rgb(133, 144, 166);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.emptyText {
|
||
display: flex;
|
||
width: 50%;
|
||
min-height: 100px;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border: 1px solid #c1c1c1;
|
||
border-radius: 2px;
|
||
font-size: 20px;
|
||
color: rgb(133, 144, 166);
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.messages {
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
width: 50%;
|
||
border: 1px solid rgb(235, 235, 235);
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.messages a:hover {
|
||
cursor: pointer;
|
||
color: #444444;
|
||
}
|
||
|
||
.messages .w-comment-list {
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.messages .w-comment-list .w-show-other-childcomment {
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
line-height: 32px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
background: none rgba(133, 144, 166, 0.1);
|
||
border: 1px solid transparent;
|
||
border-radius: 3px;
|
||
margin: 10px 0px 10px 54px;
|
||
padding: 0px 6px 0px 12px;
|
||
height: 32px;
|
||
color: rgb(133, 144, 166);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.messages .w-commentlist-header {
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
flex: 0 0 auto;
|
||
padding-left: 20px;
|
||
padding-right: 20px;
|
||
height: 50px;
|
||
-webkit-box-align: center;
|
||
align-items: center;
|
||
-webkit-box-pack: justify;
|
||
justify-content: space-between;
|
||
display: flex;
|
||
}
|
||
|
||
.messages .w-commentlist-header::before {
|
||
display: block;
|
||
content: " ";
|
||
position: absolute;
|
||
inset: -50%;
|
||
pointer-events: none;
|
||
transform: scale(0.5, 0.5);
|
||
border-bottom: 1px solid rgb(235, 235, 235);
|
||
}
|
||
|
||
.messages .w-commentlist-header .w-commentlist-total {
|
||
box-sizing: border-box;
|
||
margin: 0px;
|
||
min-width: 0px;
|
||
font-size: 15px;
|
||
color: rgb(68, 68, 68);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.messages .w-comment-item {
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
padding: 10px 20px 14px;
|
||
}
|
||
|
||
.w-comment-item .w-comment-userpic {
|
||
box-sizing: border-box;
|
||
margin: 0px;
|
||
min-width: 0px;
|
||
color: rgb(23, 81, 153);
|
||
flex: 0 0 auto;
|
||
height: 24px;
|
||
width: 24px;
|
||
}
|
||
|
||
.w-comment-item .w-comment-userpic .w-user-pic {
|
||
box-sizing: border-box;
|
||
max-width: 100%;
|
||
background-color: rgb(255, 255, 255);
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 2px;
|
||
filter: brightness(0.95);
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.messages .w-comment-item-box-head {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.messages .w-comment-item-box-head .w-comment-item-username,
|
||
.messages .w-comment-item-box-head .w-comment-item-replyname {
|
||
box-sizing: border-box;
|
||
margin: 0px;
|
||
min-width: 0px;
|
||
font-size: 15px;
|
||
font-weight: bold;
|
||
text-decoration: none;
|
||
color: #444444;
|
||
}
|
||
|
||
.messages .w-comment-item-box {
|
||
width: 100%;
|
||
}
|
||
|
||
.messages .w-comment-item-box .w-comment-reply {
|
||
box-sizing: border-box;
|
||
margin: 8px 0px 0px;
|
||
min-width: 0px;
|
||
flex: 1 1 auto;
|
||
display: flex;
|
||
}
|
||
|
||
.messages .w-comment-item-box-content {
|
||
color: rgb(68, 68, 68);
|
||
overflow-wrap: break-word;
|
||
font-size: 15px;
|
||
line-height: 21px;
|
||
margin-top: 5px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.messages .w-comment-item-box-bottom {
|
||
box-sizing: border-box;
|
||
margin: 4px 0px 0px;
|
||
min-width: 0px;
|
||
-webkit-box-align: center;
|
||
align-items: center;
|
||
-webkit-box-pack: justify;
|
||
justify-content: space-between;
|
||
display: flex;
|
||
}
|
||
|
||
.messages .w-comment-item-box-bottom .w-comment-time {
|
||
box-sizing: border-box;
|
||
margin: 0px;
|
||
min-width: 0px;
|
||
-webkit-box-align: center;
|
||
align-items: center;
|
||
flex: 0 0 auto;
|
||
font-size: 14px;
|
||
color: rgb(153, 153, 153);
|
||
display: flex;
|
||
}
|
||
|
||
.w-comment-interaction button {
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.w-comment-interaction .w-comment-reply-btn {
|
||
display: inline-block;
|
||
padding: 0px;
|
||
font-size: 14px;
|
||
line-height: inherit;
|
||
color: rgb(133, 144, 166);
|
||
text-align: center;
|
||
cursor: pointer;
|
||
background: none transparent;
|
||
border: none;
|
||
border-radius: 0px;
|
||
height: auto;
|
||
}
|
||
|
||
.w-comment-interaction .w-comment-reply-btn label {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.w-comment-interaction .w-comment-like-btn {
|
||
display: inline-block;
|
||
padding: 0px;
|
||
font-size: 14px;
|
||
line-height: inherit;
|
||
color: rgb(133, 144, 166);
|
||
text-align: center;
|
||
cursor: pointer;
|
||
background: none transparent;
|
||
border: none rgb(133, 144, 166);
|
||
border-radius: 0px;
|
||
height: auto;
|
||
}
|
||
|
||
.w-comment-interaction .checked {
|
||
color: rgb(0, 97, 242);
|
||
}
|
||
|
||
.messages .w-child-reply {
|
||
padding: 10px 20px 14px 54px;
|
||
}
|
||
|
||
/* 弹出全部回复 */
|
||
.w-dialog-container {
|
||
overflow: hidden auto;
|
||
z-index: 2001;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
position: fixed;
|
||
}
|
||
|
||
.el-dialog__title {
|
||
box-sizing: border-box;
|
||
margin: 0px;
|
||
min-width: 0px;
|
||
color: rgb(68, 68, 68);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.el-dialog__body {
|
||
overflow-y: scroll;
|
||
padding: 0;
|
||
|
||
}
|
||
|
||
|
||
.current-comment {
|
||
border-top: 1px solid rgb(235, 235, 235);
|
||
border-bottom: 20px solid rgba(133, 144, 166, 0.1);
|
||
padding: 20px;
|
||
}
|
||
|
||
.current-comment .w-comment-item {
|
||
padding: 0;
|
||
}
|
||
|
||
.el-dialog {
|
||
margin-top: 0 !important;
|
||
height: calc(100vh - 48px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
z-index: 1;
|
||
box-sizing: border-box;
|
||
max-height: calc(100vh - 48px);
|
||
box-sizing: border-box;
|
||
margin: 0 auto;
|
||
width: 700px;
|
||
}
|
||
|
||
.w-reply-list-container .w-reply-item {
|
||
padding: 20px;
|
||
}
|
||
|
||
.w-reply-list-container .w-reply-item .w-child-reply {
|
||
padding: 0;
|
||
}
|
||
|
||
.w-reply-bottom-input {
|
||
box-sizing: border-box;
|
||
margin: 0px;
|
||
min-width: 0px;
|
||
display: flex;
|
||
flex: 0 0 auto;
|
||
padding: 10px 20px;
|
||
box-shadow: rgb(18 18 18 / 12%) 0px -1px 3px;
|
||
}
|
||
|
||
.w-reply-bottom-input .w-avatar {
|
||
box-sizing: border-box;
|
||
margin: 0px 10px 0px 0px;
|
||
min-width: 0px;
|
||
max-width: 100%;
|
||
background-color: rgb(255, 255, 255);
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 3px;
|
||
}
|
||
.comment-container {
|
||
width: 100%;
|
||
}
|
||
|
||
.comment-container .article-comment {
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
border-top-left-radius: 0px;
|
||
padding-bottom: 12px;
|
||
flex-wrap: nowrap;
|
||
border-bottom-left-radius: 0px;
|
||
width: 50%;
|
||
border-bottom-right-radius: 0px;
|
||
margin-bottom: 0px;
|
||
border-top-right-radius: 0px;
|
||
padding-top: 12px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.article-comment>span {
|
||
padding-bottom: 0px;
|
||
color: #333333;
|
||
flex-direction: row;
|
||
word-wrap: break-word;
|
||
display: inline-block;
|
||
padding-right: 0px;
|
||
width: 100%;
|
||
font-size: 32PX;
|
||
margin-bottom: 6px;
|
||
padding-top: 0px;
|
||
padding-left: 0px;
|
||
margin-top: 0px;
|
||
}
|
||
|
||
.article-comment .ms-input {
|
||
border-color: #DCDFE6;
|
||
background-color: #FFFFFF;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
display: flex;
|
||
padding-right: 4px;
|
||
box-sizing: border-box;
|
||
justify-content: space-between;
|
||
border-top-left-radius: 2px;
|
||
padding-bottom: 0px;
|
||
flex-wrap: nowrap;
|
||
border-bottom-left-radius: 2px;
|
||
border-width: 1px;
|
||
width: 100%;
|
||
border-bottom-right-radius: 2px;
|
||
border-top-right-radius: 2px;
|
||
margin-bottom: 0px;
|
||
padding-top: 0px;
|
||
border-style: solid;
|
||
padding-left: 4px;
|
||
margin-top: 0px;
|
||
height: 100px;
|
||
}
|
||
|
||
.article-comment .ms-input span {
|
||
color: #DCDFE6;
|
||
flex-direction: row;
|
||
word-wrap: break-word;
|
||
display: inline-block;
|
||
padding-right: 0px;
|
||
border-top-left-radius: 0px;
|
||
padding-bottom: 0px;
|
||
border-bottom-left-radius: 0px;
|
||
border-bottom-right-radius: 0px;
|
||
border-top-right-radius: 0px;
|
||
font-size: 14PX;
|
||
padding-top: 0px;
|
||
padding-left: 0px;
|
||
}
|
||
|
||
.article-comment>.post-comment {
|
||
cursor: pointer;
|
||
background-color: #0099ff;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
display: inline-block;
|
||
padding-right: 20px;
|
||
box-sizing: border-box;
|
||
border-top-left-radius: 8px;
|
||
padding-bottom: 0px;
|
||
border-bottom-left-radius: 8px;
|
||
border-bottom-right-radius: 8px;
|
||
line-height: 42px;
|
||
font-size: 16px;
|
||
margin-bottom: 0px;
|
||
border-top-right-radius: 8px;
|
||
padding-top: 0px;
|
||
padding-left: 20px;
|
||
margin-top: 10px;
|
||
height: 42px;
|
||
}
|
||
|
||
.article-comment>.hot-comment {
|
||
padding-bottom: 0px;
|
||
flex-wrap: nowrap;
|
||
flex-direction: column;
|
||
display: flex;
|
||
padding-right: 0px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding-top: 0px;
|
||
padding-left: 0px;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.article-comment>.hot-comment span {
|
||
flex-direction: row;
|
||
word-wrap: break-word;
|
||
display: inline-block;
|
||
width: 100%;
|
||
font-size: 16PX;
|
||
line-height: 36px;
|
||
margin-top: 0px;
|
||
height: 36px;
|
||
}
|
||
|
||
.article-comment>.hot-comment div {
|
||
padding-bottom: 0px;
|
||
flex-wrap: nowrap;
|
||
flex-direction: row;
|
||
display: flex;
|
||
padding-right: 0px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding-top: 0px;
|
||
padding-left: 0px;
|
||
margin-top: 12px;
|
||
height: 100px;
|
||
}
|
||
|
||
.article-comment>.hot-comment div img {
|
||
width: 100%;
|
||
margin-top: 0px;
|
||
height: 100%;
|
||
}
|
||
|
||
.el-upload--picture-card i {
|
||
line-height: unset !important;
|
||
}
|
||
|
||
</style>
|