Skip to content

C
cust_web
Commit 4de8239a authored by 罗林杰's avatar 罗林杰
Browse files
Options

修改bug

parent c5e70616
Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 117 deletions
src/views/operationsManagement/article/index.vue
View file @ 4de8239a
...@@ -139,130 +139,128 @@ ...@@ -139,130 +139,128 @@
<!-- 详情弹窗 --> <!-- 详情弹窗 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="deviceFormRef" :model="form" label-position="right" label-width="auto"> <div class="item">
<div class="item"> <div>
<div> <img v-if="form.avatarImg" class="avatarSize" :src="form.avatarImg" alt="" mode="aspectFill">
<img v-if="form.avatarImg" class="avatarSize" :src="form.avatarImg" alt="" mode="aspectFill"> <img v-else class="avatarSize" src="../../../assets/image/avatar.jpg" alt="">
<img v-else class="avatarSize" src="../../../assets/image/avatar.jpg" alt="">
</div>
<div class="center">
<template>
<div>
<span style="font-weight: bold;color: black;font-size: 18px">{{ form.memCode }}</span>
</div>
</template>
</div>
</div> </div>
<el-row :gutter="20"> <div class="center">
<el-col :span="24"> <template>
<div style="font-size: 15px;padding-left: 20px;padding-bottom: 20px;" class="content">{{ form.content }}</div> <div>
</el-col> <span style="font-weight: bold;color: black;font-size: 18px">{{ form.memCode }}</span>
<div>
<!-- 当没有图片时 -->
<div v-if="!form.url || form.url.length === 0" style="text-align: center; color: #999;" />
<!-- 当图片数量为1时 -->
<div v-else-if="form.url.length === 1" style="margin-left: 150px">
<img :src="form.url[0]" alt="" class="avatar1">
</div>
<!-- 当图片数量为4或6时，上下两排展示 -->
<div v-else-if=" form.url.length === 2" style="padding-left: 40px">
<el-row v-for="(row, rowIndex) in Math.ceil(form.url.length / 2)" :key="rowIndex" :gutter="1">
<el-col v-for="(imagePath, index) in form.url.slice(rowIndex * 2, rowIndex * 2 + 2)" :key="index" :span="12">
<div style="margin-left: -15px">
<img :src="imagePath" alt="" class="avatar3">
</div>
</el-col>
</el-row>
</div>
<!-- 当图片数量为4或6时，上下两排展示 -->
<div v-else-if="form.url.length === 4 " style="padding-left: 40px">
<el-row v-for="(row, rowIndex) in Math.ceil(form.url.length / 2)" :key="rowIndex" :gutter="1">
<el-col v-for="(imagePath, index) in form.url.slice(rowIndex * 2, rowIndex * 2 + 2)" :key="index" :span="12">
<div style="margin-left: -10px">
<img :src="imagePath" alt="" class="avatar5">
</div>
</el-col>
</el-row>
</div> </div>
<!-- 当图片数量为5, 7, 8或9时，按九宫格显示 --> </template>
<el-row v-else :gutter="2" style="padding-left: 50px"> </div>
<el-col v-for="(imagePath, index) in form.url" :key="index" :span="8"> </div>
<div style="margin-left: -20px"> <el-row :gutter="20">
<img :src="imagePath" alt="" class="avatar2"> <el-col :span="24">
<div style="font-size: 15px;padding-left: 20px;padding-bottom: 20px;" class="content">{{ form.content }}</div>
</el-col>
<div style="width: 500px">
<!-- 当没有图片时 -->
<div v-if="!form.url || form.url.length === 0" style="text-align: center; color: #999;" />
<!-- 当图片数量为1时 -->
<div v-else-if="form.url.length === 1" style="margin-left: 30px">
<img :src="form.url[0]" alt="" class="avatar1">
</div>
<!-- 当图片数量为4或6时，上下两排展示 -->
<div v-else-if=" form.url.length === 2" style="padding-left: 40px">
<el-row v-for="(row, rowIndex) in Math.ceil(form.url.length / 2)" :key="rowIndex" :gutter="1">
<el-col v-for="(imagePath, index) in form.url.slice(rowIndex * 2, rowIndex * 2 + 2)" :key="index" :span="12">
<div style="margin-left: -10px">
<img :src="imagePath" alt="" class="avatar3">
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div style="font-size: 12px;color: #8c8c93;padding-left: 30px;padding-top: 10px"> <!-- 当图片数量为4或6时，上下两排展示 -->
<span>{{ form.createDate }}</span> <div v-else-if="form.url.length === 4 " style="padding-left: 40px">
<el-row v-for="(row, rowIndex) in Math.ceil(form.url.length / 2)" :key="rowIndex" :gutter="1">
<el-col v-for="(imagePath, index) in form.url.slice(rowIndex * 2, rowIndex * 2 + 2)" :key="index" :span="12">
<div style="margin-left: -10px">
<img :src="imagePath" alt="" class="avatar5">
</div>
</el-col>
</el-row>
</div> </div>
<div class="commentTitle"> <!-- 当图片数量为5, 7, 8或9时，按九宫格显示 -->
<div> <el-row v-else :gutter="2" style="padding-left: 60px">
<span>评论区</span> <el-col v-for="(imagePath, index) in form.url" :key="index" :span="8">
</div> <div style="margin-left: -20px">
<div> <img :src="imagePath" alt="" class="avatar2">
<span>评论 {{ form.commentCount }}</span> </div>
<span class="c-title-segment">|</span> </el-col>
<span>点赞 {{ form.likeCount }}</span> </el-row>
</div> </div>
<div style="font-size: 12px;color: #8c8c93;padding-left: 30px;padding-top: 10px">
<span>{{ form.createDate }}</span>
</div>
<div class="commentTitle">
<div>
<span>评论区</span>
</div> </div>
</el-row> <div>
<div class="commentsSection"> <span>评论 {{ form.commentCount }}</span>
<el-alert v-if="!isEdit && queryParams.examStatus === '2'" :closable="false">驳回原因：{{ form.remarks }}</el-alert> <span class="c-title-segment">|</span>
<ul v-if="form.articleCommentVOList" class="commentTree"> <span>点赞 {{ form.likeCount }}</span>
<li v-for="(comment, index) in form.articleCommentVOList" :key="index" class="commentItem"> </div>
<div v-if="index !== null" style="border-top: 1px solid #dadada; margin: 5px 0 7px;" /> </div>
<div style="display: flex; justify-content: space-between; align-items: center;" class="commentHeader"> </el-row>
<div style="display: flex; align-items: center;padding-bottom: 10px"> <div class="commentsSection">
<img v-if="comment.avatarUrl" style="margin-top: -40px" :src="comment.avatarUrl" alt="" class="avatarSize"> <el-alert v-if="!isEdit && queryParams.examStatus === '2'" :closable="false">驳回原因：{{ form.remarks }}</el-alert>
<img v-else class="avatarSize" style="margin-top: -40px" src="../../../assets/image/avatar.jpg" alt=""> <ul v-if="form.articleCommentVOList" class="commentTree">
<div style="padding-left: 10px"> <li v-for="(comment, index) in form.articleCommentVOList" :key="index" class="commentItem">
<span style="font-size: 15px;font-weight: bold">{{ comment.memCode }}:</span> <div v-if="index !== null" style="border-top: 1px solid #dadada; margin: 5px 0 7px;" />
<div style="flex: 1;margin-top: 10px "> <div style="display: flex; justify-content: space-between; align-items: center;" class="commentHeader">
<template> <div style="display: flex; align-items: center;padding-bottom: 10px">
<span>{{ comment.content }}</span> <img v-if="comment.avatarUrl" style="margin-top: -40px" :src="comment.avatarUrl" alt="" class="avatarSize">
</template> <img v-else class="avatarSize" style="margin-top: -40px" src="../../../assets/image/avatar.jpg" alt="">
</div> <div style="padding-left: 10px">
<div style="font-size: 10px;color: #8c8c93;margin-top: 8px"> <span style="font-size: 15px;font-weight: bold">{{ comment.memCode }}:</span>
<span>{{ comment.createDate }}</span> <div style="flex: 1;margin-top: 10px ">
</div> <template>
<span>{{ comment.content }}</span>
</template>
</div>
<div style="font-size: 10px;color: #8c8c93;margin-top: 8px">
<span>{{ comment.createDate }}</span>
</div> </div>
</div> </div>
<div style="display: flex;justify-content: flex-end">
<span v-if="comment.examStatus=='0'" style="color: red">*</span>
<el-button v-if="isEdit" type="text" @click="deleteComment(comment)">删除</el-button>
</div>
</div> </div>
<ul v-if="comment.childrenCommentList && comment.childrenCommentList.length > 0" class="replies"> <div style="display: flex;justify-content: flex-end">
<li v-for="(reply, replyIndex) in comment.childrenCommentList" :key="replyIndex" class="replyItem"> <span v-if="comment.examStatus=='0'" style="color: red">*</span>
<div v-if="replyIndex !== null" style="border-top: 1px solid #dadada; margin: 5px 0 7px;" /> <el-button v-if="isEdit" type="text" @click="deleteComment(comment)">删除</el-button>
<div style="display: flex; justify-content: space-between; align-items: center;" class="commentHeader"> </div>
<div style="display: flex; align-items: center;"> </div>
<img v-if="reply.avatarUrl" style="margin-top: -40px" :src="reply.avatarUrl" alt="" class="avatarSize"> <ul v-if="comment.childrenCommentList && comment.childrenCommentList.length > 0" class="replies">
<img v-else class="avatarSize" style="margin-top: -40px" src="../../../assets/image/avatar.jpg" alt=""> <li v-for="(reply, replyIndex) in comment.childrenCommentList" :key="replyIndex" class="replyItem">
<div style="padding-left: 10px"> <div v-if="replyIndex !== null" style="border-top: 1px solid #dadada; margin: 5px 0 7px;" />
<span style="font-size: 15px;font-weight: bold">{{ reply.memCode }}:</span> <div style="display: flex; justify-content: space-between; align-items: center;" class="commentHeader">
<div style="flex: 1;margin-top: 10px "> <div style="display: flex; align-items: center;">
<template> <img v-if="reply.avatarUrl" style="margin-top: -40px" :src="reply.avatarUrl" alt="" class="avatarSize">
<span>{{ reply.content }}</span> <img v-else class="avatarSize" style="margin-top: -40px" src="../../../assets/image/avatar.jpg" alt="">
</template> <div style="padding-left: 10px">
</div> <span style="font-size: 15px;font-weight: bold">{{ reply.memCode }}:</span>
<div style="font-size: 10px;color: #8c8c93;margin-top: 8px"> <div style="flex: 1;margin-top: 10px ">
<span>{{ reply.createDate }}</span> <template>
</div> <span>{{ reply.content }}</span>
</template>
</div>
<div style="font-size: 10px;color: #8c8c93;margin-top: 8px">
<span>{{ reply.createDate }}</span>
</div> </div>
</div>
<div style="display: flex;justify-content: flex-end">
<span v-if="comment.examStatus=='0'" style="color: red">*</span>
<el-button v-if="isEdit" type="text" @click="deleteReply(reply)">删除</el-button>
</div> </div>
</div> </div>
</li> <div style="display: flex;justify-content: flex-end">
</ul> <span v-if="reply.examStatus=='0'" style="color: red">*</span>
</li> <el-button v-if="isEdit" type="text" @click="deleteReply(reply)">删除</el-button>
</ul> </div>
</div> </div>
</el-form> </li>
</ul>
</li>
</ul>
</div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button v-if="!isEdit" class="cancelBtn" @click="cancel">取 消</el-button> <el-button v-if="!isEdit" class="cancelBtn" @click="cancel">取 消</el-button>
<el-button v-if="isEdit && form.examStatus =='0'" class="cancelBtn" @click="rejection">驳 回</el-button> <el-button v-if="isEdit && form.examStatus =='0'" class="cancelBtn" @click="rejection">驳 回</el-button>
...@@ -724,13 +722,13 @@ export default { ...@@ -724,13 +722,13 @@ export default {
display: block; display: block;
} }
.avatar2 { .avatar2 {
width: 170px; width: 145px;
height: 130px; height: 120px;
display: block; display: block;
} }
.avatar3 { .avatar3 {
width: 263px; width: 230px;
height: 200px; height: 180px;
display: block; display: block;
} }
.avatar4 { .avatar4 {
...@@ -739,9 +737,9 @@ export default { ...@@ -739,9 +737,9 @@ export default {
display: block; display: block;
} }
.avatar5 { .avatar5 {
width: 255px; width: 230px;
height: 200px; height: 210px;
padding-top: 4px; padding-top: 2px;
display: block; display: block;
} }
.commentTitle{ .commentTitle{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment