bug 78348

src/views/documentTool/documentComparison/modules/CommentList.vue

@@ -21,36 +21,37 @@
       </div>
       <div class="comment-box" v-if="dataList && dataList.length > 0">
         <div class="comment-box-top-box" v-for="(item,index) in dataList" :key="index">
-          <!--          <div class="title-text">{{$t('record')+(index + 1)}}</div>-->
+          <div class="comment-item">
-          <div class="box-content">
+            <div class="comment-item-img">
-            <div class="img-box">
               <img src="../../../../assets/image/daiban.png" class="img" alt="">
             </div>
-            <div class="box-text">
+            <div class="comment-item-content">
-              <span class="box-text-name">{{ item.name }}</span>
+              <div class="comment-item-title">
-              <span class="box-text-time">{{ item.createTime }}</span>
+                <a-tooltip>
-            </div>
+                  <template #title>{{ item.name }}</template>
-            <div class="box-text-text">
+                  <div class="comment-item-title-name">{{ item.name }}</div>
-              {{ item.content }}
+                </a-tooltip>
-            </div>
+                <div class="comment-item-title-time">{{ item.createTime }}</div>
-            <div class="box-icon" @click="messageClick(item)">
+                <div class="comment-item-title-icon" @click="messageClick(item)"><a-icon type="message" /></div>
-              <a-icon type="message" />
+              </div>
+              <div class="comment-item-content-text">{{ item.content }}</div>
             </div>
           </div>
           <div class="inside-box" v-if="item.resComVoList && item.resComVoList.length > 0">
-            <div class="box-content-inside" v-for="(val,indexOne) in item.resComVoList" :key="indexOne">
+            <div class="comment-item inside-comment-item" v-for="(val,indexOne) in item.resComVoList" :key="indexOne">
-              <div class="img-box">
+              <div class="comment-item-img">
                 <img src="../../../../assets/image/daiban.png" class="img" alt="">
               </div>
-              <div class="box-text">
+              <div class="comment-item-content">
-                <span class="box-text-name">{{ val.name }}</span>
+                <div class="comment-item-title">
-                <span class="box-text-time">{{ val.createTime }}</span>
+                  <a-tooltip>
-              </div>
+                    <template #title>{{ val.name }}</template>
-              <div class="box-text-text">
+                    <div class="comment-item-title-name">{{ val.name }}</div>
-                {{ val.content }}
+                  </a-tooltip>
-              </div>
+                  <div class="comment-item-title-time">{{ val.createTime }}</div>
-              <div class="box-icon" @click="messageClick(item)">
+                  <div class="comment-item-title-icon" @click="messageClick(item)"><a-icon type="message" /></div>
-                <a-icon type="message" />
+                </div>
+                <div class="comment-item-content-text">{{ val.content }}</div>
               </div>
             </div>
           </div>
@@ -156,57 +157,7 @@ export default {
   }
 }
 
-.box-text {
-  display: inline-block;
-  position: absolute;
-  margin-left: 40px;
 
-  .box-text-name {
-    font-size: 14px;
-    font-weight: bold;
-    color: #040B29;
-    margin-right: 8px;
-  }
-
-  .box-text-time {
-    font-size: 14px;
-    font-weight: 400;
-    color: #6F7385;
-  }
-}
-
-.box-text-text {
-  font-size: 14px;
-  font-weight: 400;
-  color: #040B29;
-  display: inline-block;
-  margin-top: 22px;
-  margin-left: 40px;
-  word-break: break-word;
-}
-
-.title-text {
-  font-size: 16px;
-  font-weight: 400;
-  color: #040B29;
-  margin-bottom: 18px;
-}
-
-.box-content {
-  position: relative;
-}
-
-.box-content-inside {
-  position: relative;
-  margin-bottom: 15px;
-}
-
-.box-icon {
-  position: absolute;
-  right: 0;
-  top: 0;
-  cursor: pointer;
-}
 
 .inside-box {
   background: #F6F7FA;
@@ -223,53 +174,7 @@ export default {
   margin-bottom: 24px;
 }
 
-.drawer-bootom-button {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  z-index: 100;
-  border-top: 1px solid #e8e8e8;
-  padding: 10px 16px;
-  text-align: right;
-  left: 0;
-  background: #fff;
-  border-radius: 0 0 2px 2px;
-}
 
-.box-title-text {
-  line-height: 1.4;
-  display: flex;
-  /*align-items: center;*/
-}
-
-.title-text {
-  width: 74px;
-  text-align: right;
-  display: inline-block;
-  font-weight: 500;
-  font-size: 14px;
-  margin-right: 16px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  height: 42px;
-  line-height: 48px;
-}
-
-.item-model {
-  width: calc(100% - 64px);
-  display: inline-block;
-  margin-top: 2px;
-}
-
-.required {
-  color: red;
-  margin-right: 4px;
-}
-
-.title-text-text {
-  margin-top: 9px;
-}
 
 .comment-box-text {
   text-align: center;
@@ -281,24 +186,69 @@ export default {
   margin-right: 8px;
 }
 
-.button-text {
-  width: 88px;
-  overflow: hidden;
-  padding: 0 8px;
-  float: right;
-}
-
-/deep/ .button-text span {
-  width: 64px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-top: 4px;
-}
-
 .box-input-search {
   /deep/ .ant-input-search-icon {
     display: none;
   }
 }
+
+.comment-item {
+  display: flex;
+
+  &-img {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    margin-right: 8px;
+
+    .img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-content {
+    flex: 1;
+    width: 0;
+
+    &-text {
+      font-size: 14px;
+      font-weight: 400;
+      color: #040B29;
+      word-break: break-word;
+    }
+  }
+
+  &-title {
+    width: 100%;
+    display: flex;
+
+    &-name {
+      font-size: 14px;
+      font-weight: bold;
+      color: #040B29;
+      margin-right: 8px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &-time {
+      flex-shrink: 0;
+      font-size: 14px;
+      font-weight: 400;
+      color: #6F7385;
+      margin-right: 8px;
+    }
+
+    &-icon {
+      flex-shrink: 0;
+      margin-left: auto;
+    }
+  }
+}
+
+.inside-comment-item {
+  margin-bottom: 15px;
+}
 </style>