update 文档对比-对比结果样式重构

src/views/documentTool/documentComparison/ComparisonResults.vue

@@ -41,100 +41,85 @@
     <div class="result-content">
       <div class="result-content-header">
         <a-checkbox @change="onChange" :indeterminate="indeterminate" :checked="checkAll"></a-checkbox>
-        <div class="detail-content-header-content">
+        <div class="result-content-header-content">
-          <div class="detail-content-header-content-left"
+          <div class="result-content-header-content-item result-content-header-content-item-standard"
                :title="resultData.serialNumberLeft + resultData.fileNameLeft"
-               :class="{'detail-content-header-content-left-active': isDisplay}">
+               :class="{'result-content-header-content-item-no-operation': isDisplay}">
             {{ $t('docTool.comparison.selectedStandard') }}：{{ resultData.serialNumberLeft }}
+            <!--点击文件名可以预览-->
             <span style="cursor: pointer"
                   @click="fileClick(resultData.fileNameLeft,resultData.fileIdLeft)">{{ resultData.fileNameLeft }}</span>
           </div>
-          <div class="detail-content-header-content-content"
+          <div class="result-content-header-content-item result-content-header-content-item-standard"
                :title="resultData.serialNumberRight + resultData.fileNameRight"
-               :class="{'detail-content-header-content-left-active':isDisplay}">
+               :class="{'result-content-header-content-item-no-operation':isDisplay}">
             {{ $t('docTool.comparison.selectedStandard') }}：{{ resultData.serialNumberRight }}
             <span style="cursor: pointer"
                   @click="fileClick(resultData.fileNameRight,resultData.fileIdRight)">{{ resultData.fileNameRight }}</span>
           </div>
-          <div class="detail-content-header-content-rightOne"
+          <div class="result-content-header-content-item result-content-header-content-item-comment"
-               :class="{'detail-content-header-content-rightOne-active':isDisplay}"
                :title="$t('docTool.comparison.comparisonDifferenceComment')">
             {{ $t('docTool.comparison.comparisonDifferenceComment') }}
           </div>
-          <div class="detail-content-header-content-right" v-if="!isDisplay">
+          <div class="result-content-header-content-item result-content-header-content-item-operation" v-if="!isDisplay">
             {{ $t('operation') }}
           </div>
         </div>
       </div>
+      <!--条款对比内容-->
       <div class="scroll-content">
         <a-checkbox-group @change="checkboxChange" v-model="checkboxList">
-          <div class="detail-content-content" v-for="(item,index) in resultData.resList" :key="index">
+          <div class="clause-item" v-for="(item,index) in resultData.resList" :key="index">
-            <a-checkbox :value="item.id" class="detail-checkbox"></a-checkbox>
+            <a-checkbox :value="item.id" class="clause-item-checkbox"></a-checkbox>
-            <div class="detail-content-content-text"
+            <div class="clause-item-content" :class="{'clause-item-content-selected':checkboxList.join(',').includes(item.id)}">
-                 :class="{'detail-content-content-text-color':checkboxList.join(',').includes(item.id)}">
+              <!--内容，isDisplay===true时不显示操作列，内容部分宽度设为100%-->
-              <div class="detail-content-content-text-left"
+              <!--第一个标准的内容-->
-                   :class="{'detail-content-content-text-dis':isDisplay}">
+              <div class="clause-item-content-standard" :class="{'clause-item-content-standard-no-operation': isDisplay}">
-                <div class="detail-content-left">
+                <div class="clause-item-content-standard-title">
-                  <div class="detail-content-left-top">
+                  <span>{{ item.itemsNumLeft }}</span>
-                    <span>{{ item.itemsNumLeft }}</span>
+                  <span style="margin-left: 10px">{{ item.itemsNameLeft }}</span>
-                    <span style="margin-left: 10px">{{ item.itemsNameLeft }}</span>
-                  </div>
-                  <div class="detail-content-left-button" v-html="item.itemsTextLeft"></div>
                 </div>
-                <div class="detail-content-right">
+                <div class="clause-item-content-text" v-html="item.itemsTextLeft"></div>
-                  <div class="detail-content-left-top">
-                    <span>{{ item.itemsNumRight }}</span>
-                    <span style="margin-left: 10px">{{ item.itemsNameRight }}</span>
-                  </div>
-                  <div class="detail-content-left-button" v-html="item.itemsTextRight"></div>
-                </div>
-                <div class="detail-content-right-one">
-                  <div class="detail-content-left-button">
-                    {{ item.comment }}
-                  </div>
-                </div>
-                <!--                  <div class="detail-content-bottom"-->
-                <!--                       :class="{'detail-content-bottom-color':checkboxList.join(',').includes(item.id)}">-->
-                <!--                    <div class="detail-content-bottom-left"-->
-                <!--                         :class="{'detail-content-bottom-left-text':language == 'en-us' ? true:false}"-->
-                <!--                         :title="$t('docTool.comparison.comparisonDifferenceComment')">-->
-                <!--                      <a-icon type="message"/>-->
-                <!--                      {{$t('docTool.comparison.comparisonDifferenceComment')}}:-->
-                <!--                    </div>-->
-                <!--                    <div class="detail-content-bottom-right"-->
-                <!--                         :class="{'detail-content-bottom-right-text':language == 'en-us' ? true:false}">-->
-                <!--                      {{item.comment}}-->
-                <!--                    </div>-->
-                <!--                  </div>-->
               </div>
-              <div class="detail-content-content-text-right" v-if="!isDisplay">
+              <!--第二个标准的内容-->
-                  <span class="text-button-one">
+              <div class="clause-item-content-standard" :class="{'clause-item-content-standard-no-operation': isDisplay}">
-                    <!--编辑-->
+                <div class="clause-item-content-standard-title">
-                   <a class="text-button" @click="comparaEdit(item)" v-has="'docComparison:result:edit'">{{ $t('edit') }}</a>
+                  <span>{{ item.itemsNumRight }}</span>
-                    <!--删除-->
+                  <span style="margin-left: 10px">{{ item.itemsNameRight }}</span>
-                   <a class="text-button" @click="comparaDelete(item)" v-has="'docComparison:result:delete'">{{ $t('delete') }}</a>
+                </div>
-                  </span>
+                <div class="clause-item-content-text" v-html="item.itemsTextRight"></div>
+              </div>
+              <!--对比差异评论-->
+              <div class="clause-item-content-comment">
+                <div class="clause-item-content-text">
+                  {{ item.comment }}
+                </div>
+              </div>
+              <!--操作-->
+              <div class="clause-item-content-operation" v-if="!isDisplay">
+                <!--编辑-->
+                <a class="text-button" @click="comparaEdit(item)" v-has="'docComparison:result:edit'">{{ $t('edit') }}</a>
+                <!--删除-->
+                <a class="text-button" @click="comparaDelete(item)" v-has="'docComparison:result:delete'">{{ $t('delete') }}</a>
               </div>
             </div>
           </div>
         </a-checkbox-group>
       </div>
-      <div class="detail-content-content">
+      <!--全文评论部分-->
-        <a-checkbox @change="fullCheckboxChange" v-model="fullCheckbox" class="detail-checkbox">
+      <div class="clause-item full-text-review">
-        </a-checkbox>
+        <a-checkbox @change="fullCheckboxChange" v-model="fullCheckbox" class="clause-item-checkbox"></a-checkbox>
-        <div class="detail-content-content-text" :class="{'detail-content-content-text-color':fullCheckbox}">
+        <div class="full-text-review-content" :class="{'clause-item-content-selected':fullCheckbox}">
-          <div class="detail-content-content-text-left"
+          <div class="full-text-review-text" :class="{'full-text-review-text-no-operation':isDisplay}">
-               :class="{'detail-content-content-text-dis':isDisplay}">
+            <a-tooltip>
-            <div class="detail-content-content-text-left-text" :title="resultData.comments">
+              <template #title>{{ $t('docTool.comparison.fullTextComments') }}：{{ resultData.comments }}</template>
-              <span>{{ $t('docTool.comparison.fullTextComments') }}:</span> {{ resultData.comments }}
+              <span>{{ $t('docTool.comparison.fullTextComments') }}：{{ resultData.comments }}</span>
-            </div>
+            </a-tooltip>
           </div>
-          <div class="detail-content-content-text-right" v-if="!isDisplay">
+          <div class="full-text-review-operation" v-if="!isDisplay">
-                  <span class="text-button-one">
+            <!--全文评论-编辑-->
-                    <!--全文评论-编辑-->
+            <a class="text-button" @click="fullTextEdit" v-has="'docComparison:result:editFullTextComments'">{{ $t('edit') }}</a>
-                   <a class="text-button" @click="fullTextEdit" v-has="'docComparison:result:editFullTextComments'">{{ $t('edit') }}</a>
+            <!--                   <a class="text-button">{{$t('delete')}}</a>-->
-                    <!--                   <a class="text-button">{{$t('delete')}}</a>-->
-                  </span>
           </div>
         </div>
       </div>
@@ -368,11 +353,59 @@ export default {
     height: 56px;
     line-height: 56px;
     margin-bottom: 20px;
+    display: flex;
+    align-items: center;
   }
 
   &-header > .ant-checkbox-wrapper {
     margin-left: 20px;
-    float: left;
+  }
+}
+
+.result-content-header-content {
+  width: calc(100% - 56px);
+  margin-left: 20px;
+  display: inline-block;
+  height: 56px;
+  font-size: 14px;
+  font-family: Blue Sky Noto, sans-serif;
+  font-weight: bold;
+  color: #040B29;
+  background: rgba(4, 11, 41, 0.0300);
+  border-radius: 4px;
+
+  &-item {
+    height: 56px;
+    display: inline-block;
+    border-right: 1px #EFF1F3 solid;
+    padding: 0 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &-item:last-child {
+    border-right: none;
+  }
+
+  &-item-standard {
+    width: calc((100% - 128px - 260px) / 2);
+
+    span {
+      cursor: pointer;
+    }
+  }
+
+  &-item-no-operation {
+    width: calc((100% - 260px) / 2);
+  }
+
+  &-item-comment {
+    width: 260px;
+  }
+
+  &-item-operation {
+    width: 128px;
   }
 }
 
@@ -381,315 +414,130 @@ export default {
   overflow: auto;
 }
 
-.detail-content-header-content {
+.clause-item {
-  width: calc(100% - 56px);
-  margin-left: 20px;
-  display: inline-block;
-  height: 56px;
-  font-size: 14px;
-  font-family: Blue Sky Noto;
-  font-weight: bold;
-  color: #040B29;
-
-  .detail-content-header-content-left {
-    width: calc(50% - 194px);
-    height: 56px;
-    display: inline-block;
-    background: rgba(4, 11, 41, 0.0300);
-    border-radius: 4px 0px 0px 4px;
-    border-right: 1px #EFF1F3 solid;
-    padding-left: 24px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .detail-content-header-content-content {
-    width: calc(50% - 194px);
-    display: inline-block;
-    height: 56px;
-    background: rgba(4, 11, 41, 0.0300);
-    border-radius: 4px 0px 0px 4px;
-    border-right: 1px #EFF1F3 solid;
-    padding-left: 24px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .detail-content-header-content-rightOne {
-    width: 260px;
-    display: inline-block;
-    height: 56px;
-    background: rgba(4, 11, 41, 0.0300);
-    border-radius: 4px 0px 0px 4px;
-    padding-left: 24px;
-    border-right: 1px #EFF1F3 solid;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .detail-content-header-content-rightOne-active {
-    border-right: none;
-  }
-
-  .detail-content-header-content-right {
-    width: 128px;
-    display: inline-block;
-    height: 56px;
-    background: rgba(4, 11, 41, 0.0300);
-    border-radius: 4px 0px 0px 4px;
-    padding-left: 24px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.detail-content-header-content-left {
-  width: calc(50% - 194px);
-  height: 56px;
-  display: inline-block;
-  background: rgba(4, 11, 41, 0.0300);
-  border-radius: 4px 0px 0px 4px;
-  border-right: 1px #EFF1F3 solid;
-  padding-left: 24px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.detail-content-header-content-content {
-  width: calc(50% - 194px);
-  display: inline-block;
-  height: 56px;
-  background: rgba(4, 11, 41, 0.0300);
-  border-radius: 4px 0px 0px 4px;
-  border-right: 1px #EFF1F3 solid;
-  padding-left: 24px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.detail-content-header-content-rightOne {
-  width: 260px;
-  display: inline-block;
-  height: 56px;
-  background: rgba(4, 11, 41, 0.0300);
-  border-radius: 4px 0px 0px 4px;
-  padding-left: 24px;
-  border-right: 1px #EFF1F3 solid;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.detail-content-header-content-rightOne-active {
-  border-right: none;
-}
-
-.detail-content-header-content-right {
-  width: 128px;
-  display: inline-block;
-  height: 56px;
-  background: rgba(4, 11, 41, 0.0300);
-  border-radius: 4px 0px 0px 4px;
-  padding-left: 24px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.detail-content-content {
   width: 100%;
   height: auto;
-  position: relative;
+  display: flex;
-  margin-bottom: 24px;
+  align-items: center;
+
+  &-checkbox {
+    margin-left: 20px;
+  }
 }
 
-.detail-checkbox {
+.clause-item-content {
-  margin-left: 28px;
-  float: left;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.detail-content-content-text {
   width: calc(100% - 56px);
-  margin-left: 56px;
+  margin-left: 20px;
   border: 1px solid #EFF1F3;
   border-radius: 4px;
   overflow: hidden;
+  display: flex;
+  align-items: stretch;
 
-  .detail-content-content-text-left {
+  &-selected {
-    width: calc(100% - 128px);
+    border: 1px solid #00B3BE;
-    float: left;
+    background: rgba(0, 179, 190, 0.0300);
-    border-right: 1px solid #EFF1F3;
-    padding: 24px;
-    box-sizing: border-box;
-    overflow: hidden;
   }
 
-  .detail-content-content-text-right {
+  &-standard {
-    width: 128px;
+    width: calc((100% - 128px - 260px) / 2);
-    float: left;
+    padding: 24px;
-    height: auto;
+    border-right: 1px #EFF1F3 solid;
-    text-align: center;
 
-    .text-button-one {
+    &-title {
-      display: inline-block;
+      font-size: 16px;
-      width: 128px;
+      font-family: Blue Sky Noto, sans-serif;
-      position: absolute;
+      font-weight: 400;
-      top: 50%;
+      color: #040B29;
-      transform: translate(-50%, -50%);
     }
+  }
+
+  &-standard-no-operation {
+    width: calc((100% - 260px) / 2);
+  }
+
+  &-text {
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    margin-top: 10px;
+
+    /deep/ table {
+      width: 100%;
+    }
+  }
+
+  &-comment {
+    width: 260px;
+    padding: 24px;
+    border-right: 1px #EFF1F3 solid;
+  }
+
+  &-operation {
+    width: 128px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     .text-button {
-      margin-right: 8px;
+      margin-left: 10px;
+    }
 
+    .text-button:first-child {
+      margin-left: 0;
     }
   }
 }
 
-.detail-content-content-text-color {
+.full-text-review {
-  border: 1px solid #00B3BE;
+  height: 109px;
-  background: rgba(0, 179, 190, 0.0300);
+  margin: 10px 0;
-}
 
-.detail-content-left {
+  &-content {
-  width: calc(50% - 130px);
+    margin-left: 20px;
-  display: inline-block;
+    height: 100%;
-  float: left;
+    display: flex;
-  padding-right: 24px;
+    align-items: stretch;
-  border-right: 1px #EFF1F3 solid;
+    border: 1px #EFF1F3 solid;
-}
+    border-radius: 4px;
+  }
 
-.detail-content-right {
+  &-text {
-  width: calc(50% - 104px);
+    width: calc(100% - 128px);
-  display: inline-block;
+    padding: 24px;
-  float: left;
+    overflow: hidden;
-  padding-left: 24px;
+    text-overflow: ellipsis;
-  padding-right: 24px;
+    display: -webkit-box;
-  border-right: 1px #EFF1F3 solid;
+    text-overflow: ellipsis;
-}
+    /*! autoprefixer: off */
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    /*! autoprefixer: on;*/
+    word-break: break-word;
 
-.detail-content-right-one {
+    span {
-  width: 234px;
+      overflow: hidden;
-  display: inline-block;
+      text-overflow: ellipsis;
-  float: left;
+      display: -webkit-box;
-  padding-left: 24px;
+      text-overflow: ellipsis;
-  /*border-right: 1px #EFF1F3 solid;*/
+      /*! autoprefixer: off */
-}
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      /*! autoprefixer: on;*/
+      word-break: break-word;
+    }
+  }
 
-.detail-content-left-top {
+  &-text-no-operation {
-  font-size: 16px;
-  font-family: Blue Sky Noto;
-  font-weight: 400;
-  color: #040B29;
-}
-
-.detail-content-left-button {
-  font-size: 14px;
-  font-weight: 400;
-  color: #040B29;
-  margin-top: 10px;
-
-  /deep/ table {
     width: 100%;
   }
-}
 
-.detail-content-bottom {
+  &-operation {
-  width: 100%;
+    width: 128px;
-  margin-top: 14px;
+    display: flex;
-  padding: 24px;
+    justify-content: center;
-  box-sizing: border-box;
+    align-items: center;
-  background: rgba(4, 11, 41, 0.0300);
+  }
-  border-radius: 4px;
-  float: left;
-}
-
-.detail-content-bottom-color {
-  background: rgba(0, 179, 190, 0.0300);
-}
-
-.detail-content-bottom-left {
-  width: 115px;
-  font-size: 14px;
-  font-weight: 400;
-  color: #040B29;
-  float: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.detail-content-bottom-right {
-  width: calc(50% - 115px);
-  float: left;
-  font-size: 14px;
-  font-weight: 400;
-  color: #040B29;
-  word-break: break-word;
-}
-
-.detail-content-content-text-left-text {
-  width: 100%;
-  font-size: 14px;
-  font-weight: 400;
-  color: #040B29;
-  overflow: hidden;
-  display: -webkit-box;
-  text-overflow: ellipsis;
-  /*! autoprefixer: off */
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  /*! autoprefixer: on;*/
-  word-break: break-word;
-}
-
-.detail-content-content-text-dis {
-  width: 100% !important;
-}
-
-.detail-content-header-content-left-active {
-  width: calc(50% - 130px) !important;
-}
-
-.detail-content-bottom-left-text {
-  width: 256px;
-}
-
-.detail-content-bottom-right-text {
-  width: calc(50% - 256px);
-}
-
-.box-title-text-remarks {
-  line-height: 1.4;
-  display: flex;
-  /*align-items: center;*/
-  margin-bottom: 10px;
-}
-
-.title-text-remarks {
-  width: 68px;
-  color: #000F16;
-  display: inline-block;
-  font-weight: 500;
-  font-size: 14px;
-  margin-right: 16px;
-  margin-top: 6px;
-  text-align: right;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.operator-text-text-text {
-  color: #00B3BE !important;
 }
 
 .header-btn {