diff --git a/jero-web/src/App.vue b/jero-web/src/App.vue
index 80defc7d6..bf2d43e47 100644
--- a/jero-web/src/App.vue
+++ b/jero-web/src/App.vue
@@ -94,7 +94,7 @@
   #app {
     height: 100%;
   }
-
+.doc-detail{background: #fff}
   .ant-layout {
     background: transparent !important;
   }
diff --git a/jero-web/src/assets/watermark.js b/jero-web/src/assets/watermark.js
index 65874022f..c35e34285 100644
--- a/jero-web/src/assets/watermark.js
+++ b/jero-web/src/assets/watermark.js
@@ -11,8 +11,14 @@ let setWatermark = (str) => {
   cans.fillStyle = '#f4f4f4'
   cans.textAlign = 'left'
   cans.textBaseline = 'Middle'
-  cans.fillText(str, 10,120)
-  document.getElementsByClassName('ant-layout-content')[0].style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
+  cans.fillText(str, 10, 120)
+  if (document.getElementsByClassName('ant-layout-content') && document.getElementsByClassName('ant-layout-content').length > 0) {
+    document.getElementsByClassName('ant-layout-content')[0].style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
+
+  } else {
+    document.getElementsByClassName('detail-content')[0].style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
+
+  }
   return id
 }
 
diff --git a/jero-web/src/config/router.config.js b/jero-web/src/config/router.config.js
index 30d383659..cae396a53 100644
--- a/jero-web/src/config/router.config.js
+++ b/jero-web/src/config/router.config.js
@@ -320,6 +320,11 @@ export const constantRouterMap = [
         name: 'alteration',
         component: () => import(/* webpackChunkName: "user" */ '@/views/user/alteration/Alteration')
       },
+      {
+        path: '/docManage/library/detail',
+        name: 'docIndex',
+        component: () => import(/* webpackChunkName: "user" */ '@/views/documentManage/library/docDetail/index')
+      },
     ]
   },
 
diff --git a/jero-web/src/views/documentManage/library/docDetail/index.vue b/jero-web/src/views/documentManage/library/docDetail/index.vue
index b7aac6aa6..a728dd1ed 100644
--- a/jero-web/src/views/documentManage/library/docDetail/index.vue
+++ b/jero-web/src/views/documentManage/library/docDetail/index.vue
@@ -1,73 +1,86 @@
 <template>
   <div class="doc-detail">
     <div class="doc-detail-wrap">
-      <div class="doc-detail-header">
-        <div class="doc-detail-title">
-          <a-icon type="home" style="margin-right: 4px"/>
-          {{this.$route.query.serial_number}} 《{{this.$route.query.title}}》 {{$t('StandardDetails')}}
+      <div class="doc-detail-header" style="position: fixed;top: 0">
+        <div class="doc-detail-title"
+             :title="this.$route.query.serial_number + ' 《'+this.$route.query.title + ' 》'+$t('StandardDetails')">
+          <span style="line-height: 66px;display: inline-block;float: left">
+            <a-icon type="home" style="margin-right: 6px;"/>
+          </span>
+          <span>{{this.$route.query.serial_number}}</span>
+          <span>《{{this.$route.query.title}}》 </span>
+          <span> {{$t('StandardDetails')}}</span>
         </div>
         <div class="doc-detail-right">
-          <div @click="UpdateLog" class="operator-text">
+          <div @click="UpdateLog" class="operator-text-text" :title="$t('UpdateLog')">
             <a-icon type="reload"/>
             {{$t('UpdateLog')}}
           </div>
-          <div @click="DocumentSplitting" class="operator-text">
+          <div @click="DocumentSplitting" class="operator-text-text" :title="$t('DocumentSplitting')">
             <a-icon type="codepen"/>
             {{$t('DocumentSplitting')}}
           </div>
-          <div @click="UpdateLog" class="operator-text">
+          <div @click="UpdateLog" class="operator-text-text" :title="$t('DocumentTranslation')">
             <a-icon type="file-pdf"/>
             {{$t('DocumentTranslation')}}
           </div>
-          <div @click="UpdateLog" class="operator-text">
+          <div @click="UpdateLog" class="operator-text-text" :title="$t('DocumentComparison')">
             <a-icon type="wallet"/>
             {{$t('DocumentComparison')}}
           </div>
-          <div @click="UpdateLog" class="operator-text">
+          <div @click="UpdateLog" class="operator-text-text" :title="$t('KnowledgeDatabase')">
             <a-icon type="folder"/>
             {{$t('KnowledgeDatabase')}}
           </div>
         </div>
       </div>
-      <div v-for="(item,index) in detailList" class="content-box">
-        <div v-for="val in Object.keys(item)" class="content">
-          <div class="header-text">
-            {{val}}
-          </div>
-          <div class="content-text" v-if="val == $t('essentialInformation')">
-            <div class="text-field" v-for="(ol,index1) in item[val]">
-              <span class="text-field-left">{{ol.db_field_txt}}</span>
-              <span class="text-field-right">{{ol.value ? ol.value : '--'}}</span>
-            </div>
-          </div>
-          <div class="TextInformation" v-if="val == $t('textInformation')">
-            <div class="TextInformationContent" v-for="(ol,index1) in item[val]" style="width: 100%">
+      <div style="overflow: auto;margin-top: 68px;background: #fff">
+        <div class="detail-content">
+          <div v-for="(item,index) in detailList" class="content-box" >
+            <div v-for="val in Object.keys(item)" class="content">
+              <div class="header-text">
+                {{val}}
+              </div>
+              <div class="content-text" v-if="val == $t('essentialInformation')">
+                <div class="text-field" v-for="(ol,index1) in item[val]">
+                  <span class="text-field-left" :title="ol.db_field_txt">{{ol.db_field_txt}}</span>
+                  <span class="text-field-right" :title="ol.value">{{ol.value ? ol.value : '--'}}</span>
+                </div>
+              </div>
+              <div class="TextInformation" v-if="val == $t('textInformation')">
+                <div class="TextInformationContent" v-for="(ol,index1) in item[val]" style="width: 100%">
               <span class="TextInformationContentLeft">
-                 <span>{{ol.db_field_txt}}</span>
+                 <span :title="ol.db_field_txt">{{ol.db_field_txt}}</span>
               </span>
-              <span style="margin-top: 2px">
+                  <span style="margin-top: 2px">
                  <span class="TextInformationContentcontent">
-                         <span @click="pdfPreview(ol.value)">{{ol.value ? ol.value.fileName : '--'}}</span>
+                         <span style="cursor: pointer" :title="ol.value ? ol.value.fileName:''"
+                               @click="pdfPreview(ol.value)">
+                           {{ol.value ? ol.value.fileName : '--'}}
+                         </span>
                 </span>
               <span class="TextInformationContentright" v-show="ol.value" @click="download(ol.value)">
                 <a-icon type="vertical-align-bottom"/>
                    {{$t('download')}}
               </span>
               </span>
-            </div>
-          </div>
-          <div class="TextInformation" v-else-if="val == $t('relatedInformation')">
-            <div class="TextInformationContent" v-for="(ol,index1) in item[val]" style="width: 100%">
+                </div>
+              </div>
+              <div class="TextInformation" v-else-if="val == $t('relatedInformation')">
+                <div class="TextInformationContent" v-for="(ol,index1) in item[val]" style="width: 100%">
                    <span class="TextInformationContentLeft">
-                         {{ol.db_field_txt}}
+                         <span :title="ol.db_field_txt">{{ol.db_field_txt}}</span>
                    </span>
-              <span class="TextInformationContentcontentButton">
-                         {{ol.value ? ol.value : '--'}}
-                 </span>
+                  <span class="TextInformationContentcontentButton">
+                         <span :title="ol.value">{{ol.value ? ol.value : '--'}}</span>
+              </span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
+
     </div>
     <a-modal
       title="更新log"
@@ -144,7 +157,7 @@
         ]
       }
     },
-    mounted() {
+    created() {
       this.getInfoById()
     },
     methods: {
@@ -213,17 +226,19 @@
   @import '~@assets/less/common.less';
 
   .doc-detail {
-
+    background: #fff;
+    height: 100%;
     .doc-detail-wrap {
       .doc-detail-header {
         width: 100%;
         height: 68px;
         line-height: 68px;
-        padding: 0 32px;
+        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;
@@ -233,11 +248,13 @@
           font-size: 20px;
           font-weight: 400;
           color: #040B29;
+          line-height: 68px;
         }
 
         .doc-detail-right {
-          min-width: 500px;
+          width: 800px;
           line-height: 68px;
+          display: flex;
 
           .doc-detail-btn {
             margin-left: 10px;
@@ -317,7 +334,7 @@
           }
 
           .TextInformationContentcontent {
-            width: calc(100% - 356px);
+            width: calc(100% - 388px);
             float: left;
             height: 56px;
             border-top: 1px #eff1f3 solid;
@@ -334,10 +351,10 @@
           }
 
           .TextInformationContentright {
-            width: 88px;
+            width: 120px;
             height: 56px;
+            cursor: pointer;
             float: left;
-            position: absolute;
             display: inline-block;
             border-right: 1px #eff1f3 solid;
             border-top: 1px #eff1f3 solid;
@@ -345,7 +362,9 @@
             color: #00B3BE;
             font-size: 14px;
             font-weight: 400;
-            text-align: center;
+            text-align: right;
+            padding: 0 20px 0 0;
+            box-sizing: border-box;
           }
 
           .TextInformationContentcontentButton {
@@ -376,4 +395,18 @@
     text-align: right;
     margin-top: 20px;
   }
+
+  .operator-text-text {
+    cursor: pointer;
+    margin-right: 53px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    display: inline-block;
+    width: 20%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    text-align: right;
+  }
 </style>
\ No newline at end of file
diff --git a/jero-web/src/views/documentManage/library/index.vue b/jero-web/src/views/documentManage/library/index.vue
index 0f502c258..6cb398051 100644
--- a/jero-web/src/views/documentManage/library/index.vue
+++ b/jero-web/src/views/documentManage/library/index.vue
@@ -263,10 +263,11 @@
       },
       //处理列表中的点击事件
       detailClick(item) {
-        this.$router.push({
+        let newUrl = this.$router.resolve({
           path: '/docManage/library/detail',
           query: item
         })
+        window.open(newUrl.href, "_blank");
       }
     }
   }