[update] 修改bug80154

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

@@ -85,11 +85,11 @@
     </template>
 
     <!-- 回答区域 -->
-    <div v-if="canAnswer === 1" class="answer-wrapper">
-      <div class="answer-wrapper-title">
-        <a-avatar shape="square" :size="56" :src="getAvatarView(currentUser.avatar)" icon="user"/>
-        <p class="left-user-name">{{ currentUser.realname }}</p>
-        <p>{{ $t('businessSupport.questionAnswer.answerQuestion') }}</p>
+    <div v-if="canAnswer === 1" class="answer-form-wrapper">
+      <div class="answer-form-wrapper-title">
+        <a-avatar shape="square" :size="28" :src="getAvatarView(currentUser.avatar)" icon="user"/>
+        <p class="user-name">{{ currentUser.realname }}</p>
+        <p class="answer_question">{{ $t('businessSupport.questionAnswer.answerQuestion') }}</p>
       </div>
       <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>
@@ -368,6 +368,21 @@ export default {
   .question-desc {
     font-size: 16px;
   }
+  // 右下角的时间和按钮区域
+  .right-bottom-p {
+    height: 20px;
+    text-align: right;
+    margin-bottom: 0;
+    .time-span {
+      color: #86909C;
+    }
+    .right-bottom-p-span {
+      margin-left: 8px;
+    }
+    .right-bottom-p-a {
+      margin-left: 8px;
+    }
+  }
 }
 // 历史回答数据
 .answer-wrapper {
@@ -375,35 +390,46 @@ export default {
   border: 1px solid #E5E6EB;
   margin-bottom: 20px;
   display: flex;
-  .answer-wrapper-title {
-
+  .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;
   }
-  .answer-desc-num {
+  .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;
-    margin-top: 5px;
-    margin-bottom: 0;
+    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;
   }
-  .no-top-desc {
-    margin-top: 20px;
-  }
-}
-// 右下角的时间和按钮区域
-.right-bottom-p {
-  height: 20px;
-  text-align: right;
-  margin-bottom: 0;
-  .time-span {
-    color: #86909C;
-  }
-  .right-bottom-p-span {
-    margin-left: 8px;
-  }
-  .right-bottom-p-a {
-    margin-left: 8px;
-  }
 }
 
 .file-box {
@@ -456,4 +482,27 @@ export default {
     }
   }
 }
+
+.answer-form-wrapper {
+  .answer-form-wrapper-title {
+    display: flex;
+    .user-name {
+      font-weight: 560;
+      margin: 0 10px;
+      font-size: 16px;
+    }
+    .answer_question {
+      font-size: 16px;
+      color: #86909C;
+    }
+  }
+  .answer-desc-num {
+    text-align: right;
+    margin-top: 5px;
+    margin-bottom: 0;
+  }
+  .submit-btn {
+    margin-top: 20px;
+  }
+}
 </style>