From 29e785243eb43cf0b94f39f8e2fef7aa845cd121 Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Fri, 7 Nov 2025 14:38:18 +0800
Subject: [PATCH] =?UTF-8?q?=E9=98=85=E7=89=87=E9=A1=B5=E9=9D=A2=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E7=AB=A0=E7=A8=8B=E5=92=8C=E9=98=85=E7=89=87=E6=89=8B?=
 =?UTF-8?q?=E5=86=8C=E7=9A=84=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/icons/svg/constitution.svg                |   1 +
 src/icons/svg/documentation.svg               |   2 +-
 src/icons/svg/individuation.svg               |   1 +
 .../reading/dicoms/components/DicomViewer.vue |  33 +-
 .../dicoms/customize/CustomizeDicomViewer.vue | 546 ++++++------------
 .../reading/dicoms3D/components/ReadPage.vue  |  23 +-
 .../visit-review/components/FileViewer.vue    |  68 ++-
 7 files changed, 288 insertions(+), 386 deletions(-)
 create mode 100644 src/icons/svg/constitution.svg
 create mode 100644 src/icons/svg/individuation.svg

diff --git a/src/icons/svg/constitution.svg b/src/icons/svg/constitution.svg
new file mode 100644
index 00000000..08748291
--- /dev/null
+++ b/src/icons/svg/constitution.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1762494352859" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22987" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M896 832a128 128 0 0 1-128 128H256a128 128 0 0 1-128-128V192a128 128 0 0 1 128-128h512a128 128 0 0 1 128 128v640zM192 768v64a64 64 0 0 0 56.512 63.552L256 896h512a64 64 0 0 0 63.552-56.512L832 832v-64H192z m448-640H512v206.912l64-38.4 64 38.464V128z m-448 576h640V192a64 64 0 0 0-56.512-63.552L768 128h-64v263.488a32 32 0 0 1-48.448 27.456L576 371.2l-79.552 47.744A32 32 0 0 1 448 391.424V128H256a64 64 0 0 0-63.552 56.512L192 192v512z" fill="#e6e6e6" p-id="22988"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/documentation.svg b/src/icons/svg/documentation.svg
index 70431228..b566e357 100644
--- a/src/icons/svg/documentation.svg
+++ b/src/icons/svg/documentation.svg
@@ -1 +1 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M71.984 44.815H115.9L71.984 9.642v35.173zM16.094.05h63.875l47.906 38.37v76.74c0 3.392-1.682 6.645-4.677 9.044-2.995 2.399-7.056 3.746-11.292 3.746H16.094c-4.236 0-8.297-1.347-11.292-3.746-2.995-2.399-4.677-5.652-4.677-9.044V12.84C.125 5.742 7.23.05 16.094.05zm71.86 102.32V89.58h-71.86v12.79h71.86zm23.952-25.58V64H16.094v12.79h95.812z"/></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1762485370628" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9729" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M150.503786 1024A54.174749 54.174749 0 0 1 96.443451 969.939665V54.289162A54.174749 54.174749 0 0 1 150.503786 0.228827H873.31049a54.174749 54.174749 0 0 1 54.060335 54.060335v915.650503a54.174749 54.174749 0 0 1-54.060335 54.060335zM131.625574 54.289162v915.650503a18.878212 18.878212 0 0 0 18.878212 18.878212H873.31049a18.821006 18.821006 0 0 0 18.878212-18.878212V54.289162a18.878212 18.878212 0 0 0-18.878212-18.878212h-120.706145a117.960223 117.960223 0 0 1-5.72067 22.882681h81.119106a17.505251 17.505251 0 0 1 17.562458 17.562458v860.274414a17.619665 17.619665 0 0 1-17.562458 17.676871H195.925909a17.619665 17.619665 0 0 1-17.562458-17.676871V75.512849a17.562458 17.562458 0 0 1 17.562458-17.562458h81.119106a114.070168 114.070168 0 0 1-5.72067-22.882682H150.6182a18.878212 18.878212 0 0 0-18.992626 19.049833z m81.92 863.821229h596.780335V93.075307h-85.810056l-0.68648 0.686481a122.307933 122.307933 0 0 1-9.038659 8.981452 119.447598 119.447598 0 0 1-10.41162 8.180559c-2.002235 1.315754-4.118883 2.745922-6.349945 4.118883a130.831732 130.831732 0 0 1-15.731843 8.180558l-3.031956 1.144134-1.258547 0.514861a116.358436 116.358436 0 0 1-19.450279 5.72067l-2.231062 0.34324a126.770056 126.770056 0 0 1-22.882681 2.231062H390.771943a124.653408 124.653408 0 0 1-22.882682-2.231062c-0.858101 0-1.544581 0-2.345475-0.34324a123.623687 123.623687 0 0 1-19.450279-5.72067l-1.716201-0.572067-2.574302-1.029721a123.337654 123.337654 0 0 1-15.78905-8.180559 101.71352 101.71352 0 0 1-6.349944-4.233296 116.587263 116.587263 0 0 1-10.354414-8.066145 145.018994 145.018994 0 0 1-9.210279-8.981453 5.72067 5.72067 0 0 0-0.68648-0.800893h-85.810056zM320.407697 63.785475l0.8581 0.800894a86.43933 86.43933 0 0 0 13.615196 13.844022l1.201341 0.915307a90.672626 90.672626 0 0 0 13.786815 8.695419l1.029721 0.514861 2.574302 1.372961a94.677095 94.677095 0 0 0 13.615195 4.748156l2.059442 0.629274a25.34257 25.34257 0 0 0 2.459888 0.68648 87.12581 87.12581 0 0 0 18.992626 2.173855h242.670838a86.725363 86.725363 0 0 0 18.935419-2.173855l2.402681-0.68648 2.173855-0.686481a89.242458 89.242458 0 0 0 13.615195-4.633743l2.402682-1.315754 1.201341-0.572067a90.558212 90.558212 0 0 0 13.786815-8.695419l1.201341-1.029721a81.519553 81.519553 0 0 0 13.500782-13.672402l0.972514-0.8581a77.858324 77.858324 0 0 0 13.615196-28.603352H306.849708a76.142123 76.142123 0 0 0 13.557989 28.603352z m156.345922 763.13743a17.676872 17.676872 0 0 1-17.676872-17.676871 17.619665 17.619665 0 0 1 17.676872-17.562459h252.052737a17.619665 17.619665 0 0 1 17.676872 17.562459 17.676872 17.676872 0 0 1-17.676872 17.676871z m-181.860112-1.372961a17.619665 17.619665 0 0 1-17.562458-17.676871 17.619665 17.619665 0 0 1 17.562458-17.676872h109.493631a17.676872 17.676872 0 0 1 17.676872 17.676872 17.676872 17.676872 0 0 1-17.676872 17.676871z m319.041788-93.532961a17.562458 17.562458 0 0 1-17.562458-17.562458 17.562458 17.562458 0 0 1 17.562458-17.676871h113.097653a17.619665 17.619665 0 0 1 17.562458 17.676871 17.562458 17.562458 0 0 1-17.562458 17.562458z m-319.041788 0a17.619665 17.619665 0 0 1-17.562458-17.562458 17.619665 17.619665 0 0 1 17.562458-17.676871h249.192402a17.619665 17.619665 0 0 1 17.562458 17.676871 17.619665 17.619665 0 0 1-17.562458 17.562458z m273.676871-101.370279h-0.51486a19.393073 19.393073 0 0 1-4.061676-0.572067h-0.400447l-0.51486-0.34324a16.303911 16.303911 0 0 1-5.320224-2.860336l-1.02972-0.915307v-0.34324a16.246704 16.246704 0 0 1-2.745922-3.375196 16.761564 16.761564 0 0 1-1.144134-2.231061v-0.34324a8.867039 8.867039 0 0 1-0.800894-1.658995L451.582669 276.766034 409.764568 418.753073a17.562458 17.562458 0 0 1-17.162011 12.642681H287.113395a17.676872 17.676872 0 0 1-17.676871-17.676871 17.619665 17.619665 0 0 1 17.676871-17.562458h92.217207l54.975642-186.779889a8.638212 8.638212 0 0 1 0.686481-1.372961 27.859665 27.859665 0 0 1 1.830614-3.375195 17.162011 17.162011 0 0 1 2.059442-2.517095 21.16648 21.16648 0 0 1 2.574301-2.173855 16.017877 16.017877 0 0 1 3.203576-1.658994 6.063911 6.063911 0 0 1 1.658994-0.858101 3.718436 3.718436 0 0 1 1.258548 0l0.34324 2.860335v-2.860335a16.418324 16.418324 0 0 1 6.807598 0 5.72067 5.72067 0 0 1 1.544581 0 9.953966 9.953966 0 0 1 1.601787 0.800894 34.896089 34.896089 0 0 1 3.089162 1.658994 18.420559 18.420559 0 0 1 2.688715 2.345475 13.157542 13.157542 0 0 1 2.059442 2.402682 18.248939 18.248939 0 0 1 1.601788 3.203575 3.604022 3.604022 0 0 1 0.800893 1.487375l100.569386 341.466815 41.8181-141.987039a17.562458 17.562458 0 0 1 17.162012-12.585475h109.665251a17.619665 17.619665 0 0 1 17.562458 17.562458 17.676872 17.676872 0 0 1-17.562458 17.676872H640.879652l-55.032849 186.608268a8.008939 8.008939 0 0 1-0.800894 1.658994 0.915307 0.915307 0 0 1 0 0.400447v0.343241a16.475531 16.475531 0 0 1-0.8581 1.716201 14.301676 14.301676 0 0 1-2.860336 3.432402 4.976983 4.976983 0 0 1-1.02972 1.029721 16.189497 16.189497 0 0 1-5.263017 2.860335h-0.858101a21.395307 21.395307 0 0 1-4.233296 0.572067z" fill="#e6e6e6" p-id="9730"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/individuation.svg b/src/icons/svg/individuation.svg
new file mode 100644
index 00000000..0f0bac32
--- /dev/null
+++ b/src/icons/svg/individuation.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1762485648235" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10985" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M543.378286 515.949714V104.521143a31.451429 31.451429 0 0 0-62.976 0v411.501714a125.44 125.44 0 0 0 0.292571 242.834286 31.670857 31.670857 0 0 0-0.292571 3.949714v156.745143a31.451429 31.451429 0 0 0 62.902857 0v-156.745143a31.597714 31.597714 0 0 0-0.219429-3.876571 125.513143 125.513143 0 0 0 0.292572-242.980572z m12.946285 165.814857a62.683429 62.683429 0 1 1-88.649142-88.722285 62.683429 62.683429 0 0 1 88.649142 88.722285zM229.522286 202.459429a31.597714 31.597714 0 0 0 0.292571-3.949715V104.594286a31.305143 31.305143 0 1 0-62.610286 0v93.988571c0 1.389714 0 2.706286 0.146286 4.022857a125.44 125.44 0 0 0 0 242.907429 31.670857 31.670857 0 0 0-0.146286 3.876571v470.235429a31.305143 31.305143 0 1 0 62.610286 0V449.316571a31.597714 31.597714 0 0 0-0.292571-3.803428 125.44 125.44 0 0 0 0-243.053714z m13.312 165.888a62.683429 62.683429 0 1 1-88.649143-88.722286 62.683429 62.683429 0 0 1 88.649143 88.722286zM950.857143 324.022857c0-58.587429-40.228571-107.739429-94.500572-121.563428a31.670857 31.670857 0 0 0 0.146286-3.949715V104.594286a31.305143 31.305143 0 0 0-62.610286 0v93.988571c0 1.389714 0.146286 2.706286 0.292572 4.022857a125.44 125.44 0 0 0 0 242.907429 31.670857 31.670857 0 0 0-0.292572 3.949714v470.162286a31.305143 31.305143 0 1 0 62.610286 0V449.389714c0-1.316571 0-2.56-0.146286-3.876571A125.513143 125.513143 0 0 0 950.857143 324.022857z m-81.042286 44.324572a62.683429 62.683429 0 1 1-88.649143-88.722286 62.683429 62.683429 0 0 1 88.649143 88.722286z" p-id="10986" fill="#e6e6e6"></path></svg>
\ No newline at end of file
diff --git a/src/views/trials/trials-panel/reading/dicoms/components/DicomViewer.vue b/src/views/trials/trials-panel/reading/dicoms/components/DicomViewer.vue
index 45712caf..2331140f 100644
--- a/src/views/trials/trials-panel/reading/dicoms/components/DicomViewer.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/components/DicomViewer.vue
@@ -396,15 +396,36 @@
           </div>
         </el-tooltip>
         <div style="margin-left:auto;">
-          <div style="padding:5px">
+          <div style="padding:5px;display: flex;">
             <!-- 手册 -->
-            <el-button v-if="isExistsManual" type="text" @click="previewManuals">{{
-              $t('trials:reading:button:handbooks') }}</el-button>
+            <el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:handbooks')" placement="bottom"
+              v-if="isExistsManual">
+              <div class="tool-wrapper">
+                <div class="icon" @click.prevent="previewManuals">
+                  <svg-icon icon-class="constitution" class="svg-icon" />
+                </div>
+                <div class="text">{{ $t('trials:reading:button:handbooks') }}</div>
+              </div>
+            </el-tooltip>
             <!-- 临床数据 -->
-            <el-button v-if="isExistsClinicalData" type="text" @click="previewCD">{{
-              $t('trials:reading:button:clinicalData') }}</el-button>
+            <el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:clinicalData')"
+              placement="bottom" v-if="isExistsClinicalData">
+              <div class="tool-wrapper">
+                <div class="icon" @click.prevent="previewCD">
+                  <svg-icon icon-class="documentation" class="svg-icon" />
+                </div>
+                <div class="text">{{ $t('trials:reading:button:clinicalData') }}</div>
+              </div>
+            </el-tooltip>
             <!-- 个性化配置 -->
-            <el-button type="text" @click="previewConfig">{{ $t('trials:reading:button:customCfg') }}</el-button>
+            <el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:customCfg')" placement="bottom">
+              <div class="tool-wrapper">
+                <div class="icon" @click.prevent="previewConfig">
+                  <svg-icon icon-class="individuation" class="svg-icon" />
+                </div>
+                <div class="text">{{ $t('trials:reading:button:customCfg') }}</div>
+              </div>
+            </el-tooltip>
 
           </div>
 
diff --git a/src/views/trials/trials-panel/reading/dicoms/customize/CustomizeDicomViewer.vue b/src/views/trials/trials-panel/reading/dicoms/customize/CustomizeDicomViewer.vue
index 3efe1ba2..e0368720 100644
--- a/src/views/trials/trials-panel/reading/dicoms/customize/CustomizeDicomViewer.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/customize/CustomizeDicomViewer.vue
@@ -2,17 +2,8 @@
   <div class="dicom-viewer-wrapper">
     <div class="dicom-viewer-container">
       <div class="dicom-tools">
-        <el-tooltip
-          class="item"
-          effect="dark"
-          :content="`${$t('trials:reading:button:layout')}`"
-          placement="bottom"
-        >
-          <div
-            class="tool-wrapper"
-            @click.stop="showPanel($event)"
-            @mouseleave="handleMouseout"
-          >
+        <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:layout')}`" placement="bottom">
+          <div class="tool-wrapper" @click.stop="showPanel($event)" @mouseleave="handleMouseout">
             <div class="dropdown">
               <div class="icon">
                 <svg-icon icon-class="layout" class="svg-icon" />
@@ -29,11 +20,7 @@
                     <div class="layout_box_1_1">A</div>
                     <div class="layout_box_1_1">A</div>
                   </li>
-                  <li
-                    v-if="isReadingTaskViewInOrder === 1"
-                    class="flex_row"
-                    @click.stop="changeLayout('A|B')"
-                  >
+                  <li v-if="isReadingTaskViewInOrder === 1" class="flex_row" @click.stop="changeLayout('A|B')">
                     <div class="layout_box_1_1">A</div>
                     <div class="layout_box_1_1">B</div>
                   </li>
@@ -54,24 +41,11 @@
           </div>
         </el-tooltip>
 
-        <el-tooltip
-          class="item"
-          effect="dark"
-          :content="`${$t('trials:reading:button:wwwc')}`"
-          placement="bottom"
-        >
-          <div
-            class="tool-wrapper"
-            @click.stop="showPanel($event)"
-            @mouseleave="handleMouseout"
-          >
+        <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:wwwc')}`" placement="bottom">
+          <div class="tool-wrapper" @click.stop="showPanel($event)" @mouseleave="handleMouseout">
             <div class="dropdown">
-              <div
-                class="icon"
-                data-tool="Wwwc"
-                :class="[activeTool === 'Wwwc' ? 'tool_active' : '']"
-                @click.prevent="setToolActive('Wwwc', false)"
-              >
+              <div class="icon" data-tool="Wwwc" :class="[activeTool === 'Wwwc' ? 'tool_active' : '']"
+                @click.prevent="setToolActive('Wwwc', false)">
                 <svg-icon icon-class="reverse" class="svg-icon" />
                 <i class="el-icon-arrow-down" style="color: #fff" />
               </div>
@@ -81,14 +55,11 @@
                 <ul style="width: 165px; padding: 0 10px">
                   <li v-for="item in wwwcArr" :key="item.label">
                     <a href="#" @click.prevent="setDicomCanvasWwwc(item)">
-                      <div
-                        v-if="item.wc"
-                        style="
+                      <div v-if="item.wc" style="
                           display: flex;
                           flex-direction: row;
                           justify-content: space-between;
-                        "
-                      >
+                        ">
                         <div>{{ item.label }}</div>
                         <div>{{ item.ww }}/{{ item.wc }}</div>
                       </div>
@@ -102,12 +73,8 @@
                   >
                     W/L {{ $t('trials:reading:title:preset') }}
                   </div> -->
-                    <el-divider
-                      v-if="item.val === 1"
-                      class="divider"
-                      content-position="center"
-                      >{{ ` ${$t('trials:reading:title:preset')}` }}</el-divider
-                    >
+                    <el-divider v-if="item.val === 1" class="divider" content-position="center">{{ `
+                      ${$t('trials:reading:title:preset')}` }}</el-divider>
                   </li>
                 </ul>
               </div>
@@ -129,18 +96,11 @@
           <div class="text">区域调窗</div>
 
         </div> -->
-        <el-tooltip
-          class="item"
-          effect="dark"
-          :content="`${$t('trials:reading:button:reverseColor')}`"
-          placement="bottom"
-        >
+        <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:reverseColor')}`"
+          placement="bottom">
           <div class="tool-wrapper">
-            <div
-              class="icon"
-              :class="[activeTool === 'reversecolor' ? 'tool_active' : '']"
-              @click.prevent="toggleInvert"
-            >
+            <div class="icon" :class="[activeTool === 'reversecolor' ? 'tool_active' : '']"
+              @click.prevent="toggleInvert">
               <svg-icon icon-class="reversecolor" class="svg-icon" />
             </div>
             <!-- 反色 -->
@@ -148,19 +108,10 @@
           </div>
         </el-tooltip>
 
-        <el-tooltip
-          class="item"
-          effect="dark"
-          :content="`${$t('trials:reading:button:zoom')}`"
-          placement="bottom"
-        >
+        <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:zoom')}`" placement="bottom">
           <div class="tool-wrapper">
-            <div
-              class="icon"
-              :class="[activeTool === 'Zoom' ? 'tool_active' : '']"
-              data-tool="Zoom"
-              @click.prevent="setToolActive('Zoom', false)"
-            >
+            <div class="icon" :class="[activeTool === 'Zoom' ? 'tool_active' : '']" data-tool="Zoom"
+              @click.prevent="setToolActive('Zoom', false)">
               <svg-icon icon-class="magnifier" class="svg-icon" />
             </div>
             <!-- 缩放 -->
@@ -168,19 +119,10 @@
           </div>
         </el-tooltip>
 
-        <el-tooltip
-          class="item"
-          effect="dark"
-          :content="`${$t('trials:reading:button:move')}`"
-          placement="bottom"
-        >
+        <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:move')}`" placement="bottom">
           <div class="tool-wrapper">
-            <div
-              class="icon"
-              :class="[activeTool === 'Pan' ? 'tool_active' : '']"
-              data-tool="Pan"
-              @click.prevent="setToolActive('Pan', false)"
-            >
+            <div class="icon" :class="[activeTool === 'Pan' ? 'tool_active' : '']" data-tool="Pan"
+              @click.prevent="setToolActive('Pan', false)">
               <svg-icon icon-class="move" class="svg-icon" />
             </div>
             <!-- 移动 -->
@@ -188,24 +130,11 @@
           </div>
         </el-tooltip>
 
-        <el-tooltip
-          class="item"
-          effect="dark"
-          :content="`${$t('trials:reading:button:rotate')}`"
-          placement="bottom"
-        >
-          <div
-            class="tool-wrapper"
-            @click.stop="showPanel($event)"
-            @mouseleave="handleMouseout"
-          >
+        <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:rotate')}`" placement="bottom">
+          <div class="tool-wrapper" @click.stop="showPanel($event)" @mouseleave="handleMouseout">
             <!-- @click.prevent="setToolActive('Rotate',false)" -->
             <div class="dropdown">
-              <div
-                class="icon"
-                data-tool="Rotate"
-                :class="[activeTool === 'Rotate' ? 'tool_active' : '']"
-              >
+              <div class="icon" data-tool="Rotate" :class="[activeTool === 'Rotate' ? 'tool_active' : '']">
                 <svg-icon icon-class="rotate" class="svg-icon" />
                 <i class="el-icon-arrow-down" style="color: #fff" />
               </div>
@@ -216,16 +145,8 @@
               </div>
               <div class="dropdown-content">
                 <ul style="width: 100px; padding: 0 10px">
-                  <li
-                    v-for="rotate in rotateArr"
-                    :key="rotate.label"
-                    style="text-align: left"
-                  >
-                    <a
-                      href="#"
-                      @click.prevent="setDicomCanvasRotate(rotate.val)"
-                      >{{ rotate.label }}</a
-                    >
+                  <li v-for="rotate in rotateArr" :key="rotate.label" style="text-align: left">
+                    <a href="#" @click.prevent="setDicomCanvasRotate(rotate.val)">{{ rotate.label }}</a>
                   </li>
                 </ul>
               </div>
@@ -233,28 +154,15 @@
           </div>
         </el-tooltip>
 
-        <el-tooltip
-          class="item"
-          effect="dark"
-          :content="
-            fitType === 1
-              ? `${$t('trials:reading:button:fitWindow')}`
-              : `${$t('trials:reading:button:fitImage')}`
-          "
-          placement="bottom"
-        >
+        <el-tooltip class="item" effect="dark" :content="fitType === 1
+          ? `${$t('trials:reading:button:fitWindow')}`
+          : `${$t('trials:reading:button:fitImage')}`
+          " placement="bottom">
           <div class="tool-wrapper">
-            <div
-              class="icon"
-              @click.prevent="
-                fitToType(fitType === 1 ? 'fitToWindow' : 'fitToImage')
-              "
-            >
-              <svg-icon
-                v-if="fitType === 1"
-                icon-class="fitToWindow"
-                class="svg-icon"
-              />
+            <div class="icon" @click.prevent="
+              fitToType(fitType === 1 ? 'fitToWindow' : 'fitToImage')
+              ">
+              <svg-icon v-if="fitType === 1" icon-class="fitToWindow" class="svg-icon" />
               <svg-icon v-else icon-class="fitToImage" class="svg-icon" />
             </div>
             <div class="text">
@@ -267,18 +175,10 @@
           </div>
         </el-tooltip>
 
-        <el-tooltip
-          class="item"
-          effect="dark"
-          :content="`${$t('trials:reading:button:imageIndexSync')}`"
-          placement="bottom"
-        >
+        <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:imageIndexSync')}`"
+          placement="bottom">
           <div class="tool-wrapper">
-            <div
-              class="icon"
-              :class="[isScrollSync ? 'tool_active' : '']"
-              @click.prevent="setImageIndexSync"
-            >
+            <div class="icon" :class="[isScrollSync ? 'tool_active' : '']" @click.prevent="setImageIndexSync">
               <i v-if="isScrollSync" class="el-icon-lock svg-icon" />
               <i v-else class="el-icon-unlock svg-icon" />
             </div>
@@ -298,12 +198,8 @@
           </div>
           <div class="text">适应图像</div>
         </div> -->
-        <el-tooltip
-          class="item"
-          effect="dark"
-          :content="`${$t('trials:reading:button:screenShot')}`"
-          placement="bottom"
-        >
+        <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:screenShot')}`"
+          placement="bottom">
           <div class="tool-wrapper">
             <div class="icon" @click.prevent="saveImage">
               <svg-icon icon-class="image" class="svg-icon" />
@@ -323,14 +219,9 @@
               <div v-else>{{ tool.text }}</div>
             </div>
             <div class="tool-wrapper">
-              <div
-                class="icon"
-                :class="[activeTool === tool.toolName ? 'tool_active' : '']"
-                :style="{ cursor: tool.isDisabled ? 'not-allowed' : 'pointer' }"
-                :data-tool="tool.toolName"
-                @click.prevent="setToolActive(tool.toolName, true, $event)"
-                @mouseenter="enter($event, tool.toolName)"
-              >
+              <div class="icon" :class="[activeTool === tool.toolName ? 'tool_active' : '']"
+                :style="{ cursor: tool.isDisabled ? 'not-allowed' : 'pointer' }" :data-tool="tool.toolName"
+                @click.prevent="setToolActive(tool.toolName, true, $event)" @mouseenter="enter($event, tool.toolName)">
                 <svg-icon :icon-class="tool.icon" class="svg-icon" />
               </div>
               <div class="text">{{ tool.text }}</div>
@@ -351,19 +242,10 @@
           </div> -->
         </div>
 
-        <el-tooltip
-          class="item"
-          effect="dark"
-          :content="`${$t('trials:dicom-show:Eraser')}`"
-          placement="bottom"
-        >
+        <el-tooltip class="item" effect="dark" :content="`${$t('trials:dicom-show:Eraser')}`" placement="bottom">
           <div class="tool-wrapper">
-            <div
-              class="icon"
-              :class="[activeTool === 'Eraser' ? 'tool_active' : '']"
-              data-tool="Zoom"
-              @click.prevent="setToolActive('Eraser', false)"
-            >
+            <div class="icon" :class="[activeTool === 'Eraser' ? 'tool_active' : '']" data-tool="Zoom"
+              @click.prevent="setToolActive('Eraser', false)">
               <svg-icon icon-class="clear" class="svg-icon" />
             </div>
             <!-- 缩放 -->
@@ -372,43 +254,23 @@
         </el-tooltip>
         <div class="tool-frame">
           <!-- 第一帧 -->
-          <el-tooltip
-            class="item"
-            effect="dark"
-            :content="$t('trials:dicom-show:firstframe')"
-            placement="bottom"
-          >
+          <el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:firstframe')" placement="bottom">
             <div class="icon" @click.prevent="scrollPage(-99999)">
               <svg-icon icon-class="firstframe" class="svg-icon" />
             </div>
           </el-tooltip>
           <!-- 上一帧 -->
-          <el-tooltip
-            class="item"
-            effect="dark"
-            :content="$t('trials:dicom-show:previousframe')"
-            placement="bottom"
-          >
+          <el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:previousframe')" placement="bottom">
             <div class="icon" @click.prevent="scrollPage(-1)">
               <svg-icon icon-class="previousframe" class="svg-icon" />
             </div>
           </el-tooltip>
           <!-- 播放/暂停 -->
-          <el-tooltip
-            class="item"
-            effect="dark"
-            :content="
-              clipPlaying
-                ? $t('trials:dicom-show:stop')
-                : $t('trials:dicom-show:play')
-            "
-            placement="bottom"
-          >
-            <div
-              v-if="clipPlaying"
-              class="icon"
-              @click.prevent="toggleClipPlay(false)"
-            >
+          <el-tooltip class="item" effect="dark" :content="clipPlaying
+            ? $t('trials:dicom-show:stop')
+            : $t('trials:dicom-show:play')
+            " placement="bottom">
+            <div v-if="clipPlaying" class="icon" @click.prevent="toggleClipPlay(false)">
               <svg-icon icon-class="stop" class="svg-icon" />
             </div>
             <div v-else class="icon" @click.prevent="toggleClipPlay(true)">
@@ -416,40 +278,20 @@
             </div>
           </el-tooltip>
           <!-- 下一帧 -->
-          <el-tooltip
-            class="item"
-            effect="dark"
-            :content="$t('trials:dicom-show:nextframe')"
-            placement="bottom"
-          >
+          <el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:nextframe')" placement="bottom">
             <div class="icon" @click.prevent="scrollPage(1)">
               <svg-icon icon-class="nextframe" class="svg-icon" />
             </div>
           </el-tooltip>
           <!-- 最后一帧 -->
-          <el-tooltip
-            class="item"
-            effect="dark"
-            :content="$t('trials:dicom-show:lastframe')"
-            placement="bottom"
-          >
+          <el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:lastframe')" placement="bottom">
             <div class="icon" @click.prevent="scrollPage(99999)">
               <svg-icon icon-class="lastframe" class="svg-icon" />
             </div>
           </el-tooltip>
 
-          <el-tooltip
-            class="item"
-            effect="dark"
-            :content="$t('trials:dicom-show:speed')"
-            placement="bottom"
-          >
-            <select
-              v-model="fps"
-              class="select-wrapper"
-              :disabled="clipPlaying"
-              @change="setDicomCanvasfps($event)"
-            >
+          <el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:speed')" placement="bottom">
+            <select v-model="fps" class="select-wrapper" :disabled="clipPlaying" @change="setDicomCanvasfps($event)">
               <option :value="5">5</option>
               <option :value="10">10</option>
               <option :value="15">15</option>
@@ -459,12 +301,7 @@
             </select>
           </el-tooltip>
         </div>
-        <el-tooltip
-          class="item"
-          effect="dark"
-          :content="$t('trials:reading:button:reset')"
-          placement="bottom"
-        >
+        <el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:reset')" placement="bottom">
           <div class="tool-wrapper">
             <div class="icon" @click.prevent="resetViewport">
               <svg-icon icon-class="refresh" class="svg-icon" />
@@ -472,16 +309,10 @@
             <div class="text">{{ $t('trials:reading:button:reset') }}</div>
           </div>
         </el-tooltip>
-        <el-tooltip
-          v-if="
-            trialCriterion.ImageUploadEnum > 0 && currentReadingTaskState < 2
-          "
-          v-hasPermi="['role:ir']"
-          class="item"
-          effect="dark"
-          :content="$t('trials:reading:button:upload')"
-          placement="bottom"
-        >
+        <el-tooltip v-if="
+          trialCriterion.ImageUploadEnum > 0 && currentReadingTaskState < 2
+        " v-hasPermi="['role:ir']" class="item" effect="dark" :content="$t('trials:reading:button:upload')"
+          placement="bottom">
           <div class="tool-wrapper">
             <div class="icon" @click.prevent="openUploadImage('upload')">
               <i class="el-icon-upload2 svg-icon" />
@@ -489,22 +320,15 @@
             <div class="text">{{ $t('trials:reading:button:upload') }}</div>
           </div>
         </el-tooltip>
-        <el-tooltip
-          v-if="trialCriterion.ImageDownloadEnum > 0"
-          v-hasPermi="[
-            'role:ir',
-            'role:mim',
-            'role:mc',
-            'role:pm',
-            'role:apm',
-            'role:ea',
-            'role:qa',
-          ]"
-          class="item"
-          effect="dark"
-          :content="$t('trials:reading:button:download')"
-          placement="bottom"
-        >
+        <el-tooltip v-if="trialCriterion.ImageDownloadEnum > 0" v-hasPermi="[
+          'role:ir',
+          'role:mim',
+          'role:mc',
+          'role:pm',
+          'role:apm',
+          'role:ea',
+          'role:qa',
+        ]" class="item" effect="dark" :content="$t('trials:reading:button:download')" placement="bottom">
           <div class="tool-wrapper">
             <div class="icon" @click.prevent="openUploadImage('download')">
               <i class="el-icon-download svg-icon" />
@@ -515,100 +339,73 @@
 
         <div style="margin-left: auto">
           <div style="padding: 5px">
-            <el-button
-              v-if="isExistsManual"
-              type="text"
-              @click="previewManuals"
-              >{{ $t('trials:reading:button:handbooks') }}</el-button
-            >
+            <el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:handbooks')" placement="bottom"
+              v-if="isExistsManual">
+              <div class="tool-wrapper">
+                <div class="icon" @click.prevent="previewManuals">
+                  <svg-icon icon-class="constitution" class="svg-icon" />
+                </div>
+                <div class="text">{{ $t('trials:reading:button:handbooks') }}</div>
+              </div>
+            </el-tooltip>
             <!-- 临床数据 -->
-            <el-button
-              v-if="isExistsClinicalData"
-              type="text"
-              @click="previewCD"
-              >{{ $t('trials:reading:button:clinicalData') }}</el-button
-            >
-            <!-- <el-button v-if="isExistsNoDicomFile" type="text" @click="previewNoneDicoms">非Dicom文件</el-button> -->
-
-            <el-button type="text" @click="previewConfig">{{
-              $t('trials:reading:button:customCfg')
-            }}</el-button>
+            <el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:clinicalData')"
+              placement="bottom" v-if="isExistsClinicalData">
+              <div class="tool-wrapper">
+                <div class="icon" @click.prevent="previewCD">
+                  <svg-icon icon-class="documentation" class="svg-icon" />
+                </div>
+                <div class="text">{{ $t('trials:reading:button:clinicalData') }}</div>
+              </div>
+            </el-tooltip>
+            <!-- 个性化配置 -->
+            <el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:customCfg')" placement="bottom">
+              <div class="tool-wrapper">
+                <div class="icon" @click.prevent="previewConfig">
+                  <svg-icon icon-class="individuation" class="svg-icon" />
+                </div>
+                <div class="text">{{ $t('trials:reading:button:customCfg') }}</div>
+              </div>
+            </el-tooltip>
           </div>
         </div>
       </div>
       <div class="dicom-viewers">
-        <div
-          ref="container"
-          class="viewer-container"
-          :class="['box', `box_${layoutRow}_${layoutCol}`]"
-        >
-          <div
-            v-for="i in maxCanvas"
-            :key="i"
-            :class="[
-              'item',
-              i - 1 === currentDicomCanvasIndex ? 'item_active' : '',
-            ]"
-            :data-index="i - 1"
-            :style="i - 1 === currentDicomCanvasIndex ? cornerstoneStyle : {}"
-            @click="activateDicomCanvas(i - 1)"
-          >
-            <dicom-canvas
-              v-if="canvasW"
-              :ref="`dicomCanvas${i - 1}`"
-              :style="{width: fullScreenIndex === i-1 ? fullScreenWidth : canvasW,height: fullScreenIndex === i-1 ? fullScreenHeight : canvasH}"
-              :canvas-index="i - 1"
-              :is-active="i - 1 === currentDicomCanvasIndex"
-              :is-scroll-sync="isScrollSync"
+        <div ref="container" class="viewer-container" :class="['box', `box_${layoutRow}_${layoutCol}`]">
+          <div v-for="i in maxCanvas" :key="i" :class="[
+            'item',
+            i - 1 === currentDicomCanvasIndex ? 'item_active' : '',
+          ]" :data-index="i - 1" :style="i - 1 === currentDicomCanvasIndex ? cornerstoneStyle : {}"
+            @click="activateDicomCanvas(i - 1)">
+            <dicom-canvas v-if="canvasW" :ref="`dicomCanvas${i - 1}`"
+              :style="{ width: fullScreenIndex === i - 1 ? fullScreenWidth : canvasW, height: fullScreenIndex === i - 1 ? fullScreenHeight : canvasH }"
+              :canvas-index="i - 1" :is-active="i - 1 === currentDicomCanvasIndex" :is-scroll-sync="isScrollSync"
               :is-reading-show-subject-info="isReadingShowSubjectInfo"
               :is-reading-task-view-in-order="isReadingTaskViewInOrder"
-              :current-dicom-canvas-index="currentDicomCanvasIndex"
-              :custom-wwc-tpl="customWwcTpl"
-              @setMeasureData="setMeasureData"
-              @modifyMeasureData="modifyMeasureData"
-              @scrollSync="scrollSync"
-              @selectViewCanvas="selectViewCanvas"
-              @setCornerstoneStyle="setCornerstoneStyle(i - 1)"
-              @moveMeasureData="moveMeasureData"
-            />
+              :current-dicom-canvas-index="currentDicomCanvasIndex" :custom-wwc-tpl="customWwcTpl"
+              @setMeasureData="setMeasureData" @modifyMeasureData="modifyMeasureData" @scrollSync="scrollSync"
+              @selectViewCanvas="selectViewCanvas" @setCornerstoneStyle="setCornerstoneStyle(i - 1)"
+              @moveMeasureData="moveMeasureData" />
           </div>
         </div>
         <div ref="form-container" class="form-container">
           <!-- 激活canvas测量数据 -->
-          <MeasurementList
-            ref="measurementList"
-            :ise-c-r-f-show-in-dicom-reading="IseCRFShowInDicomReading"
-            :is-reading-show-subject-info="isReadingShowSubjectInfo"
-          />
+          <MeasurementList ref="measurementList" :ise-c-r-f-show-in-dicom-reading="IseCRFShowInDicomReading"
+            :is-reading-show-subject-info="isReadingShowSubjectInfo" />
         </div>
       </div>
     </div>
 
-    <el-dialog
-      v-if="customWwc.visible"
-      :visible.sync="customWwc.visible"
-      :close-on-click-modal="false"
-      :title="customWwc.title"
-      width="400px"
-      custom-class="base-dialog-wrapper"
-    >
+    <el-dialog v-if="customWwc.visible" :visible.sync="customWwc.visible" :close-on-click-modal="false"
+      :title="customWwc.title" width="400px" custom-class="base-dialog-wrapper">
       <CustomWwwcForm @close="customWwc.visible = false" @setWwwc="setWwwc" />
     </el-dialog>
 
-    <el-dialog
-      v-if="personalConfigDialog.visible"
-      :visible.sync="personalConfigDialog.visible"
-      :close-on-click-modal="false"
-      :title="personalConfigDialog.title"
-      width="600px"
-    >
+    <el-dialog v-if="personalConfigDialog.visible" :visible.sync="personalConfigDialog.visible"
+      :close-on-click-modal="false" :title="personalConfigDialog.title" width="600px">
       <el-tabs v-model="activeName" class="personal_config">
         <el-tab-pane :label="$t('trials:reading:tab:hotkeys')" name="1">
-          <Hotkeys
-            v-if="activeName === '1'"
-            :reading-tool="0"
-            @reset="resetHotkeyList"
-          />
+          <Hotkeys v-if="activeName === '1'" :reading-tool="0" @reset="resetHotkeyList" />
         </el-tab-pane>
         <el-tab-pane :label="$t('trials:reading:tab:wlTemplate')" name="2">
           <WL v-if="activeName === '2'" @getWwcTpl="getWwcTpl" />
@@ -618,31 +415,16 @@
         </el-tab-pane>
       </el-tabs>
     </el-dialog>
-    <el-dialog
-      v-if="manualsDialog.visible"
-      :visible.sync="manualsDialog.visible"
-      :custom-class="
-        isFullscreen
-          ? 'manuals-full-dialog-container'
-          : 'manuals-dialog-container'
-      "
-      :show-close="false"
-      :close-on-click-modal="false"
-      :fullscreen="isFullscreen"
-    >
+    <el-dialog v-if="manualsDialog.visible" :visible.sync="manualsDialog.visible" :custom-class="isFullscreen
+      ? 'manuals-full-dialog-container'
+      : 'manuals-dialog-container'
+      " :show-close="false" :close-on-click-modal="false" :fullscreen="isFullscreen">
       <span slot="title" class="dialog-footer">
         <span>{{ $t('trials:reading:button:handbooks') }}</span>
         <span style="position: absolute; right: 20px; font-size: 20px">
-          <svg-icon
-            :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
-            style="margin-right: 10px; cursor: pointer"
-            @click="isFullscreen = !isFullscreen"
-          />
-          <svg-icon
-            icon-class="close"
-            style="cursor: pointer"
-            @click="manualsDialog.visible = false"
-          />
+          <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
+            style="margin-right: 10px; cursor: pointer" @click="isFullscreen = !isFullscreen" />
+          <svg-icon icon-class="close" style="cursor: pointer" @click="manualsDialog.visible = false" />
         </span>
       </span>
       <div style="height: 100%; margin: 0">
@@ -659,23 +441,12 @@
       :criterion="trialCriterion"
       :status="uploadStatus"
     /> -->
-    <upload-dicom-and-nonedicom
-      v-if="uploadImageVisible"
-      :SubjectId="uploadSubjectId"
-      :SubjectCode="uploadSubjectCode"
-      :Criterion="uploadTrialCriterion"
-      :visible.sync="uploadImageVisible"
-      :VisitTaskId="taskId"
-      :isReadingTaskViewInOrder="isReadingTaskViewInOrder"
-    />
-    <download-dicom-and-nonedicom
-      v-if="downloadImageVisible"
-      :SubjectId="uploadSubjectId"
-      :SubjectCode="uploadSubjectCode"
-      :Criterion="uploadTrialCriterion"
-      :TaskId="taskId"
-      :visible.sync="downloadImageVisible"
-    />
+    <upload-dicom-and-nonedicom v-if="uploadImageVisible" :SubjectId="uploadSubjectId" :SubjectCode="uploadSubjectCode"
+      :Criterion="uploadTrialCriterion" :visible.sync="uploadImageVisible" :VisitTaskId="taskId"
+      :isReadingTaskViewInOrder="isReadingTaskViewInOrder" />
+    <download-dicom-and-nonedicom v-if="downloadImageVisible" :SubjectId="uploadSubjectId"
+      :SubjectCode="uploadSubjectCode" :Criterion="uploadTrialCriterion" :TaskId="taskId"
+      :visible.sync="downloadImageVisible" />
   </div>
 </template>
 <script>
@@ -1079,7 +850,7 @@ export default {
         .then((res) => {
           this.trialCriterion = res.Result
         })
-        .catch(() => {})
+        .catch(() => { })
     },
     openUploadImage(status) {
       const idx = this.visitTaskList.findIndex((i) => i.IsCurrentTask)
@@ -1746,7 +1517,7 @@ export default {
               //   ? `frame=${frame}&instanceId=${instanceId}`
               //   : `instanceId=${instanceId}`
               let filterStr = ''
-              let n = series.instanceInfoList.findIndex(k=>k.Id === instanceId)
+              let n = series.instanceInfoList.findIndex(k => k.Id === instanceId)
               if (n > -1 && series.isExistMutiFrames) {
                 if (series.instanceInfoList[n].NumberOfFrames > 0) {
                   filterStr = `frame=${frame}&instanceId=${instanceId}`
@@ -1812,7 +1583,7 @@ export default {
       if (obj) {
         const index = Math.floor(
           obj.imageIds.length *
-            ((baseSeries.imageIdIndex + 1) / baseSeries.instanceCount)
+          ((baseSeries.imageIdIndex + 1) / baseSeries.instanceCount)
         )
         obj.imageIdIndex = index > 0 ? index - 1 : 0
       }
@@ -1920,7 +1691,7 @@ export default {
       if (obj) {
         const index = Math.floor(
           obj.imageIds.length *
-            ((baseSeries.imageIdIndex + 1) / baseSeries.instanceCount)
+          ((baseSeries.imageIdIndex + 1) / baseSeries.instanceCount)
         )
         obj.imageIdIndex = index > 0 ? index - 1 : 0
       }
@@ -2263,8 +2034,8 @@ export default {
     moveMeasureData(data) {
       this.$confirm(
         this.$t('trials:trials-list:table:isDeleted') +
-          data.questionInfo.MeasureData.data.remark +
-          '?'
+        data.questionInfo.MeasureData.data.remark +
+        '?'
       ).then(() => {
         this.$refs['measurementList'].moveMeasureData(data)
       })
@@ -2354,6 +2125,7 @@ export default {
   height: 100%;
   padding: 5px 0px 5px 5px;
   box-sizing: border-box;
+
   .divider {
     display: block;
     height: 1px;
@@ -2363,6 +2135,7 @@ export default {
     // color: #fff;
     // background-color: #DCDFE6;
   }
+
   .el-divider__text {
     padding: 0 10px;
     color: #fff;
@@ -2370,19 +2143,23 @@ export default {
     font-size: 12px;
     width: 80px;
   }
+
   .dicom-viewer-container {
     display: flex;
     flex-direction: column;
     height: 100%;
   }
+
   ::-webkit-scrollbar {
     width: 5px;
     height: 5px;
   }
+
   ::-webkit-scrollbar-thumb {
     border-radius: 10px;
     background: #d0d0d0;
   }
+
   .dicom-tools {
     box-sizing: border-box;
     width: 100%;
@@ -2393,22 +2170,26 @@ export default {
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
+
     .tool-wrapper {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       margin-right: 20px;
+
       .icon {
         padding: 5px;
         border: 1px solid #404040;
         cursor: pointer;
         text-align: center;
+
         .svg-icon {
           font-size: 20px;
           color: #ddd;
         }
       }
+
       .text {
         position: relative;
         font-size: 12px;
@@ -2417,6 +2198,7 @@ export default {
         display: none;
       }
     }
+
     .tool-frame {
       display: flex;
       flex-direction: row;
@@ -2424,16 +2206,19 @@ export default {
       align-items: center;
       margin-right: 20px;
       border: 1px solid #404040;
+
       .icon {
         padding: 5px;
         border-right: 1px solid #404040;
         cursor: pointer;
         text-align: center;
+
         .svg-icon {
           font-size: 20px;
           color: #ddd;
         }
       }
+
       .select-wrapper {
         width: 60px;
         background-color: black;
@@ -2442,6 +2227,7 @@ export default {
         font-size: 13px;
         outline: none;
       }
+
       .text {
         position: relative;
         font-size: 12px;
@@ -2450,18 +2236,23 @@ export default {
         display: none;
       }
     }
+
     .tool_active {
       background-color: #607d8b;
     }
+
     .tool_disabled {
       cursor: not-allowed;
     }
+
     .icon:hover {
       background-color: #607d8b;
     }
+
     .dropdown {
       position: relative;
       display: inline-block;
+
       .text {
         text-align: center;
       }
@@ -2475,11 +2266,13 @@ export default {
       box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
       z-index: 9999;
       font-size: 12px;
+
       ul {
         list-style: none;
         margin: 0;
         padding: 0;
         text-align: center;
+
         li {
           a {
             display: block;
@@ -2487,6 +2280,7 @@ export default {
           }
         }
       }
+
       ul li:hover a {
         background-color: #727272;
       }
@@ -2500,6 +2294,7 @@ export default {
       border-top: 1px solid #ddd;
       border-left: 1px solid #ddd;
     }
+
     .layout-content ul .flex_row {
       // border: 1px solid #ddd;
       display: flex;
@@ -2509,6 +2304,7 @@ export default {
       // padding: 2px;
       margin-bottom: 2px;
     }
+
     .layout-content ul .flex_column {
       display: flex;
       justify-content: space-between;
@@ -2516,6 +2312,7 @@ export default {
       align-items: center;
       margin-bottom: 2px;
     }
+
     .layout_box_1_1 {
       flex: 1;
       // border: 1px solid #ddd;
@@ -2526,6 +2323,7 @@ export default {
       border-right: 1px solid #ddd;
       // padding: 0 5px;
     }
+
     .layout_box_1_2 {
       flex: 1;
       // border: 1px solid #ddd;
@@ -2536,9 +2334,11 @@ export default {
       border-right: 1px solid #ddd;
       // padding: 0 5px;
     }
+
     .layout-content li .layout_box_1_1 :last-child {
       color: red;
     }
+
     // .layout_li:last-child{
     //   .layout_box{
     //     border-bottom: none;
@@ -2549,6 +2349,7 @@ export default {
       background-color: #727272;
     }
   }
+
   .dicom-viewers {
     box-sizing: border-box;
     flex: 1;
@@ -2558,6 +2359,7 @@ export default {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
+
     .form-container {
       // box-sizing: border-box;
       width: 350px;
@@ -2565,6 +2367,7 @@ export default {
       border: 1px solid #727272;
       // overflow-y: auto;
     }
+
     .viewer-container {
       box-sizing: border-box;
       flex: 1;
@@ -2576,34 +2379,41 @@ export default {
       // height: 100%;
       overflow-y: auto;
     }
+
     .box {
       display: grid;
       box-sizing: border-box;
       height: 100%;
       padding: 0;
+
       .item {
         box-sizing: border-box;
         position: relative;
         border: 1px solid rgba(255, 255, 255, 0.21);
         position: relative;
+
         &_active {
           // border: 2px solid #ffeb3b;
           border: 1px dashed #428bca;
         }
       }
     }
+
     .box_1_1 {
       grid-template-columns: repeat(1, 100%); //1列，占100%
       grid-template-rows: repeat(1, 100%); //1行，占100%
     }
+
     .box_1_2 {
       grid-template-columns: repeat(2, 50%); //1列，占50%
       grid-template-rows: repeat(1, 100%); //1行，占100%
     }
+
     .box_2_1 {
       grid-template-columns: repeat(1, 100%); //1列，占100%
       grid-template-rows: repeat(2, 50%); //1行，占50%
     }
+
     .box_2_2 {
       grid-template-columns: repeat(2, 50%); //1列，占50%
       grid-template-rows: repeat(2, 50%); //1行，占50%
@@ -2622,29 +2432,35 @@ export default {
     //   grid-template-rows: repeat(3, 33.33%); //1行，占100%
     // }
   }
+
   .personal_config {
     ::v-deep .el-tabs__content {
       height: 450px;
       overflow-y: auto;
     }
   }
+
   ::v-deep .manuals-dialog-container {
     margin-top: 50px !important;
     width: 75%;
     height: 80%;
+
     .el-dialog__body {
       padding: 10px;
       height: calc(100% - 50px) !important;
     }
+
     .el-dialog__header {
       position: relative;
     }
   }
+
   ::v-deep .manuals-full-dialog-container {
     .el-dialog__body {
       padding: 10px;
       height: calc(100% - 50px) !important;
     }
+
     .el-dialog__header {
       position: relative;
     }
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
index 517db540..ba9bc8f2 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
@@ -267,20 +267,21 @@
             </template>
           </div>
 
-          <div>
+          <div style="display: flex;">
             <!-- 手册 -->
-            <el-button v-if="taskInfo && taskInfo.ExistsManual" type="text" @click="previewManuals">
-              {{ $t('trials:reading:button:handbooks') }}
-            </el-button>
+            <div class="tool-item" :title="$t('trials:reading:button:handbooks')"
+              v-if="taskInfo && taskInfo.ExistsManual" @click.prevent="previewManuals">
+              <svg-icon icon-class="constitution" class="svg-icon" />
+            </div>
             <!-- 临床数据 -->
-            <el-button v-if="taskInfo && taskInfo.IsExistsClinicalData" type="text"
-              @click="previewCD(taskInfo.VisitTaskId)">
-              {{ $t('trials:reading:button:clinicalData') }}
-            </el-button>
+            <div class="tool-item" :title="$t('trials:reading:button:clinicalData')"
+              v-if="taskInfo && taskInfo.IsExistsClinicalData" @click.prevent="previewCD">
+              <svg-icon icon-class="documentation" class="svg-icon" />
+            </div>
             <!-- 个性化配置 -->
-            <el-button type="text" @click="previewConfig">
-              {{ $t('trials:reading:button:customCfg') }}
-            </el-button>
+            <div class="tool-item" :title="$t('trials:reading:button:customCfg')" @click.prevent="previewConfig">
+              <svg-icon icon-class="individuation" class="svg-icon" />
+            </div>
           </div>
         </div>
         <div class="content-wrapper">
diff --git a/src/views/trials/trials-panel/reading/visit-review/components/FileViewer.vue b/src/views/trials/trials-panel/reading/visit-review/components/FileViewer.vue
index 6d86e72e..578fd92b 100644
--- a/src/views/trials/trials-panel/reading/visit-review/components/FileViewer.vue
+++ b/src/views/trials/trials-panel/reading/visit-review/components/FileViewer.vue
@@ -114,8 +114,16 @@
         </div>
       </div>
 
-      <div>
-        <el-button type="text" @click="previewConfig">{{ $t('trials:reading:button:customCfg') }}</el-button>
+      <div style="display: flex;">
+        <!-- 手册 -->
+        <div class="tool-item" :title="$t('trials:reading:button:handbooks')" v-if="taskInfo && taskInfo.ExistsManual"
+          @click.prevent="previewManuals">
+          <svg-icon icon-class="constitution" class="svg-icon" />
+        </div>
+        <!-- 个性化配置 -->
+        <div class="tool-item" :title="$t('trials:reading:button:customCfg')" @click.prevent="previewConfig">
+          <svg-icon icon-class="individuation" class="svg-icon" />
+        </div>
       </div>
     </div>
     <!-- viewports -->
@@ -231,6 +239,24 @@
     <download-dicom-and-nonedicom v-if="downloadImageVisible" :subject-id="uploadSubjectId"
       :subject-code="uploadSubjectCode" :criterion="uploadTrialCriterion" :task-id="taskId"
       :visible.sync="downloadImageVisible" />
+    <!-- 手册 -->
+    <el-dialog v-if="manualsDialog.visible" :visible.sync="manualsDialog.visible"
+      :custom-class="manualsDialog.isFullscreen ? 'manuals-full-dialog-container' : 'manuals-dialog-container'"
+      :show-close="false" :close-on-click-modal="false" :fullscreen="manualsDialog.isFullscreen">
+      <span slot="title" class="dialog-footer">
+        <!-- 手册 -->
+        <span>{{ $t('trials:reading:button:handbooks') }}</span>
+        <span style="position: absolute;right: 20px;font-size: 20px;">
+          <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
+            style="margin-right:10px;cursor: pointer;"
+            @click="manualsDialog.isFullscreen = !manualsDialog.isFullscreen" />
+          <svg-icon icon-class="close" style="cursor: pointer;" @click="manualsDialog.visible = false" />
+        </span>
+      </span>
+      <div style="height: 100%;margin:0;">
+        <Manuals :trial-id="trialId" />
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -254,6 +280,7 @@ import registerWebImageLoader from './../js/registerWebImageLoader'
 import { mapGetters } from 'vuex'
 import store from '@/store'
 import Others from '@/views/trials/trials-panel/reading/dicoms/components/Others'
+import Manuals from '@/views/trials/trials-panel/reading/dicoms/components/Manuals'
 const { ViewportType } = Enums
 const renderingEngineId = 'myRenderingEngine'
 import LengthscaleTool from "../tools/LengthscaleTool"
@@ -285,6 +312,7 @@ export default {
     Others,
     downloadDicomAndNonedicom,
     uploadDicomAndNonedicom,
+    Manuals
   },
   props: {
     relatedStudyInfo: {
@@ -356,7 +384,9 @@ export default {
         type: '',
         annotation: null
       },
-      loading: false
+      loading: false,
+      manualsDialog: { visible: false, isFullscreen: false },
+      trialId: null
     }
   },
   computed: {
@@ -406,6 +436,7 @@ export default {
     }
   },
   mounted() {
+    this.trialId = this.$route.query.trialId
     this.taskInfo = JSON.parse(localStorage.getItem('taskInfo'))
     this.readingTaskState = this.taskInfo.ReadingTaskState
     this.criterionType = this.taskInfo.CriterionType
@@ -446,6 +477,11 @@ export default {
     window.removeEventListener('message', this.handleIframeMessage)
   },
   methods: {
+    // 手册
+    previewManuals() {
+      this.manualsDialog.isFullscreen = false
+      this.manualsDialog.visible = true
+    },
     getTrialCriterion() {
       getCriterionReadingInfo({
         TrialId: this.$route.query.trialId,
@@ -1791,6 +1827,32 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+::v-deep .manuals-dialog-container {
+  margin-top: 50px !important;
+  width: 75%;
+  height: 80%;
+
+  .el-dialog__body {
+    padding: 10px;
+    height: calc(100% - 50px) !important;
+  }
+
+  .el-dialog__header {
+    position: relative;
+  }
+}
+
+::v-deep .manuals-full-dialog-container {
+  .el-dialog__body {
+    padding: 10px;
+    height: calc(100% - 50px) !important;
+  }
+
+  .el-dialog__header {
+    position: relative;
+  }
+}
+
 .content {
   cursor: default !important;
 }