diff --git a/src/api/documentToolApi.js b/src/api/documentToolApi.js
index 13a11f70..c77c07a4 100644
--- a/src/api/documentToolApi.js
+++ b/src/api/documentToolApi.js
@@ -9,6 +9,8 @@ const getDocSplitTableHeader = (params) => getAction('', params)
 // 文档拆分详情-查询条件
 const getDocSplitSearch = (params) => getAction('', params)
 
+// 文档比对
+
 export {
   // 文档拆分
   releaseSplitStandard,
diff --git a/src/assets/less/common.less b/src/assets/less/common.less
index 7e958217..779d81ca 100644
--- a/src/assets/less/common.less
+++ b/src/assets/less/common.less
@@ -105,11 +105,6 @@
   }
 }
 
-/*表格操作栏只有两个按钮时的按钮间距*/
-.action-span-cell > a {
-  margin-left: 8px;
-}
-
 .action-span-cell > a:first-child {
   margin-left: 0;
 }
diff --git a/src/components/jero/JTable.vue b/src/components/jero/JTable.vue
index f1572e36..2052b361 100644
--- a/src/components/jero/JTable.vue
+++ b/src/components/jero/JTable.vue
@@ -52,6 +52,7 @@
               <!--  不需要更多按钮  -->
               <template v-for="(operation, index) in operSpecialJudge(record)">
                 <a :key="index" @click="operationClick(operation,record)">{{ operation.text }}</a>
+                <a-divider type="vertical" v-if="index !== operSpecialJudge(record).length - 1"/>
               </template>
             </template>
           </template>
@@ -118,6 +119,7 @@
 </template>
 
 <script>
+import '@assets/less/common.less'
 import Vue from 'vue'
 import { cloneDeep } from 'lodash'
 import VueDraggableResizable from 'vue-draggable-resizable'
diff --git a/src/views/documentTool/documentComparison/DocumentComparison.vue b/src/views/documentTool/documentComparison/DocumentComparison.vue
index 6949e704..1448bebd 100644
--- a/src/views/documentTool/documentComparison/DocumentComparison.vue
+++ b/src/views/documentTool/documentComparison/DocumentComparison.vue
@@ -300,13 +300,12 @@ export default {
       })
     },
     edit (row) {
-      const newUrl = this.$router.resolve({
-        path: '/documentDataComparison',
+      this.$router.push({
+        path: '/documentTool/DocumentDataComparison',
         query: {
           id: row.id
         }
       })
-      window.open(newUrl.href, '_blank')
     },
     // 发起对比按钮点击
     initiatingProcessClick () {
diff --git a/src/views/documentTool/documentComparison/DocumentDataComparison.vue b/src/views/documentTool/documentComparison/DocumentDataComparison.vue
index 2d660201..28f2ecc8 100644
--- a/src/views/documentTool/documentComparison/DocumentDataComparison.vue
+++ b/src/views/documentTool/documentComparison/DocumentDataComparison.vue
@@ -78,9 +78,7 @@
       </div>
 
       <div class="remarks">
-        <a-form-model :model="formInline"
-                      class="formAdd" :rules="rules"
-                      ref="ruleForm">
+        <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
           <div class="box-title-text-remarks">
             <div class="title-text-remarks" :title="$t('docTool.comparison.comparisonOfArticles')" style="width: 84px">
               <span>{{ $t('docTool.comparison.comparisonOfArticles') }}</span>
@@ -412,85 +410,70 @@ export default {
   overflow: auto;
 }
 
-.doc-detail-right {
-  width: 600px;
-  line-height: 68px;
-  display: flex;
+.doc-detail {
+  background: #fff;
+  height: 100%;
 
-  .operator-text-text {
-    cursor: pointer;
-    margin-right: 53px;
-    font-size: 14px;
-    font-weight: 400;
-    color: #040B29;
-    display: inline-block;
-    width: 33.3%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    text-align: right;
+  .doc-detail-wrap {
+    .doc-detail-header {
+      width: 100%;
+      z-index: 1000;
+      height: 68px;
+      line-height: 68px;
+      padding: 0 0 0 32px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 2px #eff1f3 solid;
+      background: #fff;
+
+      .doc-detail-title {
+        display: inline-block;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        font-size: 20px;
+        font-weight: 400;
+        color: #040B29;
+        line-height: 68px;
+      }
+    }
   }
 }
 
 .detail-content {
   height: calc(100% - 131px);
-  display: flex;
-
-  &-left {
-    width: 50%;
-    height: 100%;
-    border-right: 2px #EFF1F3 solid;
-    padding: 24px 32px;
-    box-sizing: border-box;
-    border-bottom: 2px #EFF1F3 solid;
-  }
-
-  &-right {
-    width: 50%;
-    height: 100%;
-    padding: 24px 32px;
-    box-sizing: border-box;
-    border-bottom: 2px #EFF1F3 solid;
-  }
-
-  &-left-header {
-    margin-bottom: 24px;
-  }
-
-  &-left-header-text {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: inline-block;
-    font-size: 16px;
-    font-family: Blue Sky Noto;
-    font-weight: 400;
-    color: #040B29;
-  }
 }
 
-.detail-content-content-left {
-  width: 180px;
-  height: 520px;
-  float: left;
-  overflow: auto;
-
-  /deep/ .ant-tree-node-content-wrapper {
-    display: inline-block !important;
-    color: #040B29 !important;
-    width: 130px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-}
-
-.remarks {
-  margin-top: 20px;
+.detail-content-left {
   width: 50%;
-  display: inline-block;
-  padding: 0 32px;
+  float: left;
+  height: 100%;
+  border-right: 2px #EFF1F3 solid;
+  padding: 24px 32px;
   box-sizing: border-box;
+  border-bottom: 2px #EFF1F3 solid;
+}
+
+.detail-content-right {
+  width: 50%;
+  height: 100%;
+  float: left;
+  padding: 24px 32px;
+  box-sizing: border-box;
+  border-bottom: 2px #EFF1F3 solid;
+}
+
+.detail-content-left-header {
+  width: 100%;
+  font-size: 16px;
+  font-family: Blue Sky Noto;
+  font-weight: 400;
+  color: #040B29;
+  margin-bottom: 24px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .box-title-text-remarks {
@@ -500,6 +483,10 @@ export default {
   margin-bottom: 10px;
 }
 
+.item-model {
+  width: calc(100% - 232px);
+}
+
 .title-text-remarks {
   width: 68px;
   color: #000F16;
@@ -514,7 +501,20 @@ export default {
   text-overflow: ellipsis;
 }
 
-.item-model {
+.box-button {
+  height: 38px;
+  /*margin-top: 2px;*/
+}
+
+.remarks {
+  margin-top: 20px;
+  width: 50%;
+  display: inline-block;
+  padding: 0 32px;
+  box-sizing: border-box;
+}
+
+.itemModel {
   width: calc(100% - 232px);
 }
 
@@ -523,4 +523,134 @@ export default {
   text-align: right;
   padding: 10px 24px;
 }
+
+.detail-content-content-left {
+  width: 180px;
+  height: calc(100% - 48px);
+  float: left;
+  overflow: auto;
+}
+
+.detail-content-content-right-top {
+  height: calc(100% - 48px);
+  overflow-y: auto;
+  transition: all 1s;
+  scroll-behavior: smooth;
+}
+
+.detail-content-content-right-right-top {
+  height: calc(100% - 48px);
+  overflow-y: auto;
+  transition: all 1s;
+  scroll-behavior: smooth;
+}
+
+.detail-content-content-right {
+  width: 100%;
+  display: inline-block;
+
+}
+
+.detail-content-content-right-right {
+  width: 100%;
+  display: inline-block;
+}
+
+.detail-content-content-right-data {
+  padding: 22px 24px;
+  box-sizing: border-box;
+  border: 1px solid #EFF1F3;
+  border-radius: 4px;
+  margin-bottom: 22px;
+  cursor: pointer;
+}
+
+.detail-content-content-right-data-right {
+  padding: 22px 24px;
+  box-sizing: border-box;
+  border: 1px solid #EFF1F3;
+  border-radius: 4px;
+  margin-bottom: 22px;
+  cursor: pointer;
+}
+
+.detail-content-content-right-data:last-child {
+  margin-bottom: 0;
+}
+
+.detail-content-content-right-data-text {
+  font-size: 16px;
+  font-weight: 400;
+  color: #040B29;
+  word-break: break-word;
+}
+
+.detail-content-left-header-text {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+  font-size: 16px;
+  font-family: Blue Sky Noto;
+  font-weight: 400;
+  color: #040B29;
+}
+
+.detail-content-left-header-text-right {
+  text-align: right;
+  display: inline-block;
+  width: 200px;
+  float: right;
+}
+
+.doc-detail-right {
+  width: 600px;
+  line-height: 68px;
+  display: flex;
+
+  .doc-detail-btn {
+    margin-left: 10px;
+  }
+}
+
+.operator-text-text {
+  cursor: pointer;
+  margin-right: 53px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #040B29;
+  display: inline-block;
+  width: 33.3%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-align: right;
+}
+
+.detail-content-content-right-data-blue {
+  border: 1px #21c9cc solid;
+}
+
+.detail-content-content-right-data-blue-right {
+  border: 1px #21c9cc solid;
+}
+
+.detail-content-content-right-data-color {
+  border: 1px red solid;
+}
+
+.detail-content-content-right-data-color-right {
+  border: 1px red solid;
+}
+
+::v-deep .delClass {
+  background: #ff7168;
+  font-weight: 700;
+}
+
+::v-deep .insertClass {
+  background: rgba(85, 183, 255, .6);
+  font-weight: 700;
+}
 </style>