[update] 修改bug80154

src/views/businessSupport/questionAnswerLibrary/page/AnswerPage.vue

@@ -52,35 +52,30 @@
     </div>
     <!--  历史回答数据  -->
     <template v-if="answerArr && answerArr.length > 0">
-      <div v-for="(item, index) in answerArr" :key="index" class="answer-wrapper">
+      <div v-for="(item, index) in answerArr" :key="index" class="answer-form-wrapper">
-        <div class="left-user-info">
+        <div class="answer-form-wrapper-title">
-          <a-avatar shape="square" :size="56" :src="getAvatarView(item.avatar)" icon="user"/>
+          <a-avatar shape="square" :size="28" :src="getAvatarView(item.avatar)" icon="user"/>
-          <p class="left-user-name">{{ item.name }}</p>
+          <p class="user-name">{{ item.departName || '' }} {{ item.name }})</p>
-          <p>{{ item.departName || '' }}</p>
-        </div>
-        <div class="right-answer-wrapper">
-          <!--  是否是置顶  -->
           <p v-if="item.isTop" class="top-p">{{ $t('businessSupport.questionAnswer.top') }}</p>
-          <!--  回答描述  -->
-          <p :class="!item.isTop ? 'no-top-desc' : ''">{{ item.answerDescription }}</p>
-          <p class="right-bottom-p">
-            <span>{{ item.createTime }}</span>
-            <!--  置顶评论的操作按钮  -->
-            <template v-if="item.isTop">
-              <!--  取消置顶  -->
-              <a class="right-bottom-p-a" @click="setOrCancelTop(item.id)" v-has="'quiz:detail:topOrCancel'">{{ $t('businessSupport.questionAnswer.cancelTop') }}</a>
-              <!--  删除 : 发帖人、评论人、有置顶权限的用户可以删除 ?? -->
-              <!--<a v-if="userInfo.id === model.userId || userInfo.id === item.userId || isHasPermission('quiz:detail:topOrCancel')" v-has="'quiz:detail:deleteAnswer'" class="right-bottom-p-a" @click="deleteAnswer(item.id)">{{ $t('delete') }}</a>-->
-            </template>
-            <!--  非置顶评论  -->
-            <template v-else>
-              <!--  设置为置顶  -->
-              <a class="right-bottom-p-a" @click="setOrCancelTop(item.id)" v-has="'quiz:detail:topOrCancel'">{{ $t('businessSupport.questionAnswer.setTop') }}</a>
-              <!--  删除 : 发帖人、评论人、有置顶权限的用户可以删除,置顶的评论不允许删除，取消置顶后允许删除 -->
-              <a v-if="userInfo.id === model.userId || userInfo.id === item.userId || isHasPermission('quiz:detail:topOrCancel')" v-has="'quiz:detail:deleteAnswer'" class="right-bottom-p-a" @click="deleteAnswer(item.id)">{{ $t('delete') }}</a>
-            </template>
-          </p>
         </div>
+        <div class="answer-form-desc-div">{{ item.answerDescription }}</div>
+        <p class="operate-bottom-p">
+          <span>{{ item.createTime }}</span>
+          <!--  置顶评论的操作按钮  -->
+          <template v-if="item.isTop">
+            <!--  取消置顶  -->
+            <a class="operate-bottom-p-a" @click="setOrCancelTop(item.id)" v-has="'quiz:detail:topOrCancel'">{{ $t('businessSupport.questionAnswer.cancelTop') }}</a>
+            <!--  删除 : 发帖人、评论人、有置顶权限的用户可以删除 ?? -->
+            <!--<a v-if="userInfo.id === model.userId || userInfo.id === item.userId || isHasPermission('quiz:detail:topOrCancel')" v-has="'quiz:detail:deleteAnswer'" class="operate-bottom-p-a" @click="deleteAnswer(item.id)">{{ $t('delete') }}</a>-->
+          </template>
+          <!--  非置顶评论  -->
+          <template v-else>
+            <!--  设置为置顶  -->
+            <a class="operate-bottom-p-a" @click="setOrCancelTop(item.id)" v-has="'quiz:detail:topOrCancel'">{{ $t('businessSupport.questionAnswer.setTop') }}</a>
+            <!--  删除 : 发帖人、评论人、有置顶权限的用户可以删除,置顶的评论不允许删除，取消置顶后允许删除 -->
+            <a v-if="userInfo.id === model.userId || userInfo.id === item.userId || isHasPermission('quiz:detail:topOrCancel')" v-has="'quiz:detail:deleteAnswer'" class="operate-bottom-p-a" @click="deleteAnswer(item.id)">{{ $t('delete') }}</a>
+          </template>
+        </p>
       </div>
     </template>
 
@@ -94,17 +89,6 @@
       <a-textarea v-model="answerDesc" :autoSize="{minRows: 4}" :maxLength="2000"></a-textarea>
       <p class="answer-desc-num">{{ answerDesc.length }}/2000{{ $t('businessSupport.questionAnswer.word') }}</p>
       <a-button class="submit-btn" type="primary" @click="submit" v-has="'quiz:detail:answerSubmit'">{{ $t('submit') }}</a-button>
-      <!--<div class="left-user-info">-->
-      <!--  <a-avatar shape="square" :size="56" :src="getAvatarView(currentUser.avatar)" icon="user"/>-->
-      <!--  <p class="left-user-name">{{ currentUser.realname }}</p>-->
-      <!--  <p>{{ currentUser.orgCodeTxt }}</p>-->
-      <!--</div>-->
-      <!--<div class="right-answer-form-wrapper">-->
-      <!--  <p>{{ $t('businessSupport.questionAnswer.answerQuestion') }}</p>-->
-      <!--  <a-textarea v-model="answerDesc" :autoSize="{minRows: 4}" :maxLength="2000"></a-textarea>-->
-      <!--  <p class="answer-desc-num">{{ answerDesc.length }}/2000{{ $t('businessSupport.questionAnswer.word') }}</p>-->
-      <!--  <a-button class="submit-btn" type="primary" @click="submit" v-has="'quiz:detail:answerSubmit'">{{ $t('submit') }}</a-button>-->
-      <!--</div>-->
     </div>
     <!--  图片预览容器 -->
     <div id="images">
@@ -392,54 +376,8 @@ export default {
     }
   }
 }
-// 历史回答数据
-.answer-wrapper {
-  border-radius: 8px;
-  border: 1px solid #E5E6EB;
-  margin-bottom: 20px;
-  display: flex;
-  .left-user-info {
-    width: 300px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background: rgb(247, 248, 250);
-    padding: 20px 0 5px 0;
-  }
-  .left-user-name {
-    margin-top: 18px;
-    margin-bottom: 8px;
-  }
-  .right-answer-wrapper {
-    width: 100%;
-    padding: 20px 10px 30px 10px;
-    box-sizing: border-box;
-    position: relative;
-  }
-  // 右下角的时间和按钮区域
-  .right-bottom-p {
-    height: 20px;
-    text-align: right;
-    position: absolute;
-    bottom: 0;
-    right: 20px;
-    //margin-bottom: 0;
-    .time-span {
-      color: #86909C;
-    }
-    .right-bottom-p-span {
-      margin-left: 8px;
-    }
-    .right-bottom-p-a {
-      margin-left: 8px;
-    }
-  }
-  .top-p {
-    color: @primary-color;
-  }
-}
 
+// 标准信息-附件的文件列表
 .file-box {
   flex: 1;
   width: 0;
@@ -503,6 +441,16 @@ export default {
       font-size: 16px;
       color: #86909C;
     }
+    .top-p {
+      color: @primary-color;
+      margin-bottom: 0;
+    }
+  }
+  .answer-form-desc-div {
+    border-radius: 8px;
+    border: 1px solid #E5E6EB;
+    padding: 20px;
+    margin-top: 5px;
   }
   .answer-desc-num {
     text-align: right;
@@ -512,5 +460,20 @@ export default {
   .submit-btn {
     margin-top: 20px;
   }
+  // 右下角的时间和按钮区域
+  .operate-bottom-p {
+    height: 20px;
+    text-align: right;
+    margin: 5px 0 10px 0;
+    .time-span {
+      color: #86909C;
+    }
+    .operate-bottom-p-span {
+      margin-left: 8px;
+    }
+    .operate-bottom-p-a {
+      margin-left: 8px;
+    }
+  }
 }
 </style>