centaline-data-driven 1.3.49 → 1.3.52

package/src/centaline/dynamicViewerFile/src/dynamicViewerFile.vue

@@ -1,87 +1,68 @@
 <template>
-  <div
-    style="height: 100%"
-    id="viewer-file"
-    ref="viewerfile"
-    @contextmenu="handleMouse"
-  >
+  <div style="height: 100%"
+       id="viewer-file"
+       ref="viewerfile"
+       @contextmenu="handleMouse">
     <el-container style="height: 100%; border: 1px solid #eee">
-      <el-aside style="background-color: rgb(238, 241, 246)"
-        ><div style="height: 100%" class="viewerMenu">
-          <el-menu
-            :default-openeds="openeds"
-            :default-active="activeitem"
-            style="height: 100%"
-          >
-            <el-submenu
-              :key="groupIndex"
-              :index="groupIndex.toString()"
-              v-for="(group, groupIndex) in MediaAlbum"
-            >
+      <el-aside style="background-color: rgb(238, 241, 246)">
+        <div style="height: 100%" class="viewerMenu">
+          <el-menu :default-openeds="openeds"
+                   :default-active="activeitem"
+                   style="height: 100%">
+            <el-submenu :key="groupIndex"
+                        :index="groupIndex.toString()"
+                        v-for="(group, groupIndex) in MediaAlbum">
               <template slot="title">
                 <i></i>
-                <div
-                  style="
+                <div style="
                     padding: 0 10px !important;
                     height: 30px !important;
                     line-height: 30px !important;
-                  "
-                >
+                  ">
                   {{ group.albumName }}
                 </div>
               </template>
               <el-menu-item-group>
-                <el-menu-item
-                  @click="handleClick(item, groupIndex, index)"
-                  :key="index"
-                  :index="groupIndex.toString() + '-' + index.toString()"
-                  v-for="(item, index) in group.medias"
-                  >{{ item.mediaLabelName || item.fileName }}</el-menu-item
-                >
+                <el-menu-item @click="handleClick(item, groupIndex, index)"
+                              :key="index"
+                              :index="groupIndex.toString() + '-' + index.toString()"
+                              v-for="(item, index) in group.medias">{{ item.mediaLabelName || item.fileName }}</el-menu-item>
               </el-menu-item-group>
             </el-submenu>
           </el-menu>
         </div>
       </el-aside>
       <el-main ref="displayArea">
-        <div
-          style="position: relative; width: 100%"
-          :style="{ height: displayAreaHeight - 78 + 'px' }"
-          v-if="resultObject"
-        >
+        <div style="position: relative; width: 100%"
+             :style="{ height: displayAreaHeight - 78 + 'px' }"
+             v-if="resultObject">
           <!--VR-->
           <template v-if="itemFile.mediaTypeID == '1'">
-            <iframe
-              :src="resultObject"
-              :height="displayAreaHeight - 80 + 'px'"
-              :width="displayAreaWidth + 'px'"
-            >
+            <iframe :src="resultObject"
+                    :height="displayAreaHeight - 80 + 'px'"
+                    :width="displayAreaWidth + 'px'">
             </iframe>
           </template>
           <!--Photo-->
           <template v-else-if="itemFile.mediaTypeID == '2'">
-            <ct-viewerImage
-              ref="viewerImage"
-              :imgUrl="resultObject"
-              :rotate="rotate"
-            ></ct-viewerImage>
+            <ct-viewerImage ref="viewerImage"
+                            :imgUrl="resultObject"
+                            :rotate="rotate"></ct-viewerImage>
           </template>
           <!--ThreeDimensional-->
-          <template v-else-if="itemFile.mediaTypeID == '3'"
-            >暂不支持ThreeDimensional
+          <template v-else-if="itemFile.mediaTypeID == '3'">
+            暂不支持ThreeDimensional
           </template>
           <!--Video-->
           <template v-else-if="itemFile.mediaTypeID == '4'">
             <div class="viewerContent">
-              <video
-                preload="none"
-                :src="resultObject"
-                controls="controls"
-                class="viewerContent"
-                controlslist="nodownload"
-                :height="500"
-                :width="800"
-              >
+              <video preload="none"
+                     :src="resultObject"
+                     controls="controls"
+                     class="viewerContent"
+                     controlslist="nodownload"
+                     :height="500"
+                     :width="800">
                 您的浏览器不支持 video 标签。
               </video>
             </div>
@@ -89,113 +70,82 @@
           <!--Audio-->
           <template v-else-if="itemFile.mediaTypeID == '5'">
             <div class="viewerContent">
-              <audio
-                preload="none"
-                :src="resultObject"
-                controls="controls"
-                class="viewerContent"
-                controlslist="nodownload"
-                style="width: 50%"
-              >
+              <audio preload="none"
+                     :src="resultObject"
+                     controls="controls"
+                     class="viewerContent"
+                     controlslist="nodownload"
+                     style="width: 50%">
                 您的浏览器不支持 audio 标签。
               </audio>
             </div>
           </template>
           <!--File-->
           <template v-else-if="itemFile.mediaTypeID == '6'">
-            <template
-              v-if="
-                'doc,docx,xlsx'.search(itemFile.fileExtension.toLowerCase()) >
-                -1
-              "
-            >
-              <div
-                class="viewerContent"
-                style="max-height: 200px; text-align: center"
-              >
+            <template v-if="'doc,docx,xlsx' .search(itemFile.fileExtension.toLowerCase())>-1">
+              <div class="viewerContent"
+                   style="max-height: 200px; text-align: center">
                 <a :href="resultObject">
                   <img :src="itemFile.thumbnailUrl" /><br />{{
                     itemFile.mediaLabelName || itemFile.fileName
-                  }}</a
-                >
+                  }}
+                </a>
               </div>
             </template>
-            <template
-              v-else-if="
-                'pdf'.search(itemFile.fileExtension.toLowerCase()) > -1
-              "
-            >
-              <ct-viewerPDF
-                :pdfUrl="resultObject"
-                :displayAreaHeight="displayAreaHeight"
-                :displayAreaWidth="displayAreaWidth"
-              >
+            <template v-else-if="'pdf' .search(itemFile.fileExtension.toLowerCase())>-1 ">
+              <ct-viewerPDF :pdfUrl="resultObject"
+                            :displayAreaHeight="displayAreaHeight"
+                            :displayAreaWidth="displayAreaWidth">
               </ct-viewerPDF>
             </template>
           </template>
-          <template v-else> 不支持此类型：{{ itemFile.mediaTypeID }} </template>
+          <template v-else>
+            不支持此类型：{{ itemFile.mediaTypeID }}
+          </template>
 
           <template v-if="resultObject != ''">
-            <div
-              class="magnify-footer"
-              :style="{
+            <div class="magnify-footer"
+                 :style="{
                 width: displayAreaWidth + 'px',
                 bottom: displayAreabtm + 10 + 'px',
-              }"
-            >
-              <div
-                class="magnify-toolbar"
-                :style="{ 'margin-left': displayArealeft + 'px' }"
-              >
-                <a
-                  href="javascript:void(0)"
-                  class="magnify-btn el-icon-back"
-                  title="上一个"
-                  @click="jump(-1)"
-                ></a
-                ><a
-                  href="javascript:void(0)"
-                  class="magnify-btn el-icon-right"
-                  title="下一个"
-                  @click="jump(1)"
-                ></a>
+              }">
+              <div class="magnify-toolbar"
+                   :style="{ 'margin-left': displayArealeft + 'px' }">
+                <a href="javascript:void(0)"
+                   class="magnify-btn el-icon-back"
+                   title="上一个"
+                   @click="jump(-1)"></a><a href="javascript:void(0)"
+                                            class="magnify-btn el-icon-right"
+                                            title="下一个"
+                                            @click="jump(1)"></a>
                 <template v-if="itemFile.mediaTypeID == '2'">
-                  <a
-                    href="javascript:void(0)"
-                    class="magnify-btn el-icon-refresh-left"
-                    title="左旋转"
-                    @click="rotateImg('L')"
-                  ></a
-                  ><a
-                    href="javascript:void(0)"
-                    class="magnify-btn el-icon-refresh-right"
-                    title="右旋转"
-                    @click="rotateImg('R')"
-                  ></a
-                  ><a
-                    href="javascript:void(0)"
-                    class="magnify-btn el-icon-zoom-in"
-                    title="放大"
-                    @click="zoom(0.2)"
-                  ></a
-                  ><a
-                    href="javascript:void(0)"
-                    class="magnify-btn el-icon-refresh"
-                    title="实际尺寸"
-                    @click="actualSize()"
-                  ></a
-                  ><a
-                    href="javascript:void(0)"
-                    class="magnify-btn el-icon-zoom-out"
-                    title="缩小"
-                    @click="zoom(-0.2)"
-                  >
-                  </a> </template
-                ><a
-                  href="javascript:void(0)"
-                  class="magnify-btn el-icon-download"
-                  title="下载"
-                ></a>
+                  <a href="javascript:void(0)"
+                     class="magnify-btn el-icon-refresh-left"
+                     title="左旋转"
+                     @click="rotateImg('L')"></a>
+                  <a href="javascript:void(0)"
+                     class="magnify-btn el-icon-refresh-right"
+                     title="右旋转"
+                     @click="rotateImg('R')"></a>
+                  <a href="javascript:void(0)"
+                     class="magnify-btn el-icon-zoom-in"
+                     title="放大"
+                     @click="zoom(0.2)"></a>
+                  <a href="javascript:void(0)"
+                     class="magnify-btn el-icon-refresh"
+                     title="实际尺寸"
+                     @click="actualSize()"></a>
+                  <a href="javascript:void(0)"
+                     class="magnify-btn el-icon-zoom-out"
+                     title="缩小"
+                     @click="zoom(-0.2)">
+                  </a>
+                </template>
+                <a v-if="itemFile.rightDownload"
+                   :href="resultObject.replace(/\/preview$/,'')" target="_blank"
+                   class="magnify-btn el-icon-download"
+                   title="下载"
+                   :download="(itemFile.mediaLabelName || itemFile.fileName)"></a>
               </div>
             </div>
           </template>
@@ -204,276 +154,283 @@
     </el-container>
   </div>
 </template>
- 
+
 
 <script>
-import dynamicElement from "../../mixins/dynamicElement";
-import dynamicViewerImage from "./dynamicViewerImage.vue";
-import dynamicViewerPDF from "./dynamicViewerPDF.vue";
-//import dynamicViewerVR from "./dynamicViewerVR.vue";
-export default {
-  name: "ct-viewerfile",
-  mixins: [dynamicElement],
-  components: {
-    "ct-viewerImage": dynamicViewerImage,
-    "ct-viewerPDF": dynamicViewerPDF,
-    // "ct-viewerVR": dynamicViewerVR,
-  },
-  props: {
-    MediaAlbum: Array,
-    groupIndex: Number,
-    index: Number,
-  },
-  data() {
-    return {
-      rotate: 0,
-      activeIndex: -1,
-      activeGroup: -1,
-      resultObject: "",
-      itemFile: {},
-      groupCountLen: 0,
-      activeitem: "",
-      openeds: [],
-      displayAreaWidth: 0,
-      displayAreabtm: 0,
-      displayArealeft: 0,
-      displayAreaHeight: 0,
-    };
-  },
-  created() {
-    var self = this;
-    this.groupCountLen = 0;
-    this.MediaAlbum.forEach((item, n) => {
-      self.openeds.push(n.toString());
-      item.medias.forEach((v) => {
-        this.groupCountLen++;
+  import dynamicElement from "../../mixins/dynamicElement";
+  import dynamicViewerImage from "./dynamicViewerImage.vue";
+  import dynamicViewerPDF from "./dynamicViewerPDF.vue";
+  //import dynamicViewerVR from "./dynamicViewerVR.vue";
+  export default {
+    name: "ct-viewerfile",
+    mixins: [dynamicElement],
+    components: {
+      "ct-viewerImage": dynamicViewerImage,
+      "ct-viewerPDF": dynamicViewerPDF,
+      // "ct-viewerVR": dynamicViewerVR,
+    },
+    props: {
+      MediaAlbum: Array,
+      groupIndex: Number,
+      index: Number,
+    },
+    data() {
+      return {
+        rotate: 0,
+        activeIndex: -1,
+        activeGroup: -1,
+        resultObject: "",
+        itemFile: {},
+        groupCountLen: 0,
+        activeitem: "",
+        openeds: [],
+        displayAreaWidth: 0,
+        displayAreabtm: 0,
+        displayArealeft: 0,
+        displayAreaHeight: 0,
+      };
+    },
+    created() {
+      var self = this;
+      this.groupCountLen = 0;
+      this.MediaAlbum.forEach((item, n) => {
+        self.openeds.push(n.toString());
+        item.medias.forEach((v) => {
+          this.groupCountLen++;
+        });
       });
-    });
-  },
+    },
 
-  mounted() {
-    var self = this;
-    self.displayAreaWidth = this.DomWidth();
-    self.displayArealeft = self.DomLeft();
-    self.displayAreabtm = self.DomTop(self.$refs.displayArea.$el);
-    self.displayAreaHeight = self.$refs.displayArea.$el.offsetHeight;
-    window.onresize = () => {
-      self.displayAreaWidth = self.DomWidth();
+    mounted() {
+      var self = this;
+      self.displayAreaWidth = this.DomWidth();
       self.displayArealeft = self.DomLeft();
       self.displayAreabtm = self.DomTop(self.$refs.displayArea.$el);
       self.displayAreaHeight = self.$refs.displayArea.$el.offsetHeight;
-    };
+      window.onresize = () => {
+        self.displayAreaWidth = self.DomWidth();
+        self.displayArealeft = self.DomLeft();
+        self.displayAreabtm = self.DomTop(self.$refs.displayArea.$el);
+        self.displayAreaHeight = self.$refs.displayArea.$el.offsetHeight;
+      };
 
-    if (
-      this.groupIndex != undefined &&
-      this.index != undefined &&
-      this.groupIndex > -1 &&
-      this.index > -1
-    ) {
-      var item = this.MediaAlbum[this.groupIndex].medias[this.index];
-      this.handleClick(item, this.groupIndex, this.index);
-    }
-  },
-  methods: {
-    handleMouse(e) {
-      e.preventDefault();
+      if (
+        this.groupIndex != undefined &&
+        this.index != undefined &&
+        this.groupIndex > -1 &&
+        this.index > -1
+      ) {
+        var item = this.MediaAlbum[this.groupIndex].medias[this.index];
+        this.handleClick(item, this.groupIndex, this.index);
+      }
     },
-    DomWidth() {
-      let arrLength = window.innerWidth - this.$refs.viewerfile.offsetWidth;
-      arrLength = arrLength > 0 ? arrLength : 0;
-      var Width =
-        window.innerWidth -
-        arrLength -
-        this.$refs.displayArea.$el.offsetLeft -
-        40;
+    methods: {
+      handleMouse(e) {
+        e.preventDefault();
+      },
+      DomWidth() {
+        let arrLength = window.innerWidth - this.$refs.viewerfile.offsetWidth;
+        arrLength = arrLength > 0 ? arrLength : 0;
+        var Width =
+          window.innerWidth -
+          arrLength -
+          this.$refs.displayArea.$el.offsetLeft -
+          40;
 
-      return Width;
-    },
-    DomLeft() {
-      let arrLength = window.innerWidth - this.$refs.viewerfile.offsetWidth;
-      arrLength = arrLength > 0 ? arrLength : 0;
-      var Width =
-        window.innerWidth -
-        arrLength -
-        this.$refs.displayArea.$el.offsetLeft -
-        40;
+        return Width;
+      },
+      DomLeft() {
+        let arrLength = window.innerWidth - this.$refs.viewerfile.offsetWidth;
+        arrLength = arrLength > 0 ? arrLength : 0;
+        var Width =
+          window.innerWidth -
+          arrLength -
+          this.$refs.displayArea.$el.offsetLeft -
+          40;
 
-      return Width / 2 - 524 + this.$refs.displayArea.$el.offsetLeft - 40;
-    },
-    DomTop() {
-      const height = window.innerHeight; //可视区窗口高度
-      const curDomHeight = this.$refs.viewerfile.offsetHeight;
-      // const curDomHeight = dom.getBoundingClientRect().height
-      const curDomY = this.$refs.viewerfile.getBoundingClientRect().y;
-      let curDomBottom = height - curDomHeight - curDomY;
-      curDomBottom = curDomBottom > 0 ? curDomBottom : 0;
-      return curDomBottom;
-    },
-    FileExtension(item) {
-      return item.savedFileName.replace(/.+\./, "").toLowerCase();
-    },
-    offsetLeft(elements) {
-      var left = elements.offsetLeft;
-      var parent = elements.offsetParent;
-      while (parent != null) {
-        left += parent.offsetLeft;
-        parent = parent.offsetParent;
-      }
+        return Width / 2 - 524 + this.$refs.displayArea.$el.offsetLeft - 40;
+      },
+      DomTop() {
+        const height = window.innerHeight; //可视区窗口高度
+        const curDomHeight = this.$refs.viewerfile.offsetHeight;
+        // const curDomHeight = dom.getBoundingClientRect().height
+        const curDomY = this.$refs.viewerfile.getBoundingClientRect().y;
+        let curDomBottom = height - curDomHeight - curDomY;
+        curDomBottom = curDomBottom > 0 ? curDomBottom : 0;
+        return curDomBottom;
+      },
+      FileExtension(item) {
+        return item.savedFileName.replace(/.+\./, "").toLowerCase();
+      },
+      offsetLeft(elements) {
+        var left = elements.offsetLeft;
+        var parent = elements.offsetParent;
+        while (parent != null) {
+          left += parent.offsetLeft;
+          parent = parent.offsetParent;
+        }
 
-      return left;
-    },
-    handleClick(item, groupIndex, index) {
-      if (index == this.activeIndex && groupIndex == this.activeGroup) return;
-      this.activeIndex = index;
-      this.activeGroup = groupIndex;
-      this.itemFile = item;
+        return left;
+      },
+      handleClick(item, groupIndex, index) {
+        if (index == this.activeIndex && groupIndex == this.activeGroup) return;
+        this.activeIndex = index;
+        this.activeGroup = groupIndex;
+        this.itemFile = item;
 
-      this.activeitem = groupIndex + "-" + index;
+        this.activeitem = groupIndex + "-" + index;
 
-      this.resultObject = this.itemFile.mediaUrl;
+        this.resultObject = this.itemFile.mediaUrl;
 
-      this.$forceUpdate();
-    },
-    jump(n) {
-      var item = {};
-      var groupIndex = this.activeGroup;
-      var index = -1;
-      if (n > 0) {
-        if (
-          this.activeGroup * 1 + this.activeIndex + 1 + n >
-          this.groupCountLen
-        ) {
-          groupIndex = 0;
-          index = 0;
-        } else {
-          if (this.MediaAlbum[this.activeGroup].medias[this.activeIndex + n]) {
-            index = this.activeIndex + n;
+        this.$forceUpdate();
+      },
+      jump(n) {
+        var item = {};
+        var groupIndex = this.activeGroup;
+        var index = -1;
+        if (n > 0) {
+          if (
+            this.activeGroup * 1 + this.activeIndex + 1 + n >
+            this.groupCountLen
+          ) {
+            groupIndex = 0;
+            index = 0;
           } else {
-            if (
-              this.MediaAlbum[this.activeGroup + n] &&
-              this.MediaAlbum[this.activeGroup + n].medias[0]
-            ) {
-              index = 0;
-              groupIndex = this.activeGroup + n;
+            if (this.MediaAlbum[this.activeGroup].medias[this.activeIndex + n]) {
+              index = this.activeIndex + n;
             } else {
-              groupIndex = 0;
-              index = 0;
+              if (
+                this.MediaAlbum[this.activeGroup + n] &&
+                this.MediaAlbum[this.activeGroup + n].medias[0]
+              ) {
+                index = 0;
+                groupIndex = this.activeGroup + n;
+              } else {
+                groupIndex = 0;
+                index = 0;
+              }
             }
           }
-        }
-      } else if (n < 0) {
-        if (this.activeGroup * 1 + this.activeIndex + n < 0) {
-          groupIndex = this.MediaAlbum.length - 1;
-          index = this.MediaAlbum[groupIndex].medias.length - 1;
-        } else {
-          if (this.MediaAlbum[this.activeGroup].medias[this.activeIndex + n]) {
-            index = this.activeIndex + n;
+        } else if (n < 0) {
+          if (this.activeGroup * 1 + this.activeIndex + n < 0) {
+            groupIndex = this.MediaAlbum.length - 1;
+            index = this.MediaAlbum[groupIndex].medias.length - 1;
           } else {
-            if (
-              this.MediaAlbum[this.activeGroup + n].medias[
-                this.MediaAlbum[this.activeGroup + n].medias.length - 1
-              ]
-            ) {
-              index = this.MediaAlbum[this.activeGroup + n].medias.length - 1;
-              groupIndex = this.activeGroup + n;
+            if (this.MediaAlbum[this.activeGroup].medias[this.activeIndex + n]) {
+              index = this.activeIndex + n;
             } else {
-              groupIndex = this.MediaAlbum.length - 1;
-              index = this.MediaAlbum[groupIndex].medias.length - 1;
+              if (
+                this.MediaAlbum[this.activeGroup + n].medias[
+                this.MediaAlbum[this.activeGroup + n].medias.length - 1
+                ]
+              ) {
+                index = this.MediaAlbum[this.activeGroup + n].medias.length - 1;
+                groupIndex = this.activeGroup + n;
+              } else {
+                groupIndex = this.MediaAlbum.length - 1;
+                index = this.MediaAlbum[groupIndex].medias.length - 1;
+              }
             }
           }
         }
-      }
-      item = this.MediaAlbum[groupIndex].medias[index];
-      this.handleClick(item, groupIndex, index);
-    },
+        item = this.MediaAlbum[groupIndex].medias[index];
+        this.handleClick(item, groupIndex, index);
+      },
 
-    //旋转图片
-    rotateImg(type) {
-      var currentDeg = this.rotate || 0;
+      //旋转图片
+      rotateImg(type) {
+        var currentDeg = this.rotate || 0;
 
-      if (type == "L") {
-        currentDeg = currentDeg - 90;
-      } else if (type == "R") {
-        currentDeg = currentDeg + 90;
-      }
-      if (Math.abs(currentDeg) >= 360) {
-        currentDeg = currentDeg % 360;
-      }
-      this.rotate = currentDeg;
-      this.$forceUpdate();
-    },
+        if (type == "L") {
+          currentDeg = currentDeg - 90;
+        } else if (type == "R") {
+          currentDeg = currentDeg + 90;
+        }
+        if (Math.abs(currentDeg) >= 360) {
+          currentDeg = currentDeg % 360;
+        }
+        this.rotate = currentDeg;
+        this.$forceUpdate();
+      },
 
-    actualSize() {
-      this.rotate = 0;
-      this.$refs.viewerImage.actualSize();
-    },
-    zoom(n) {
-      this.$refs.viewerImage.zoom(n);
+      actualSize() {
+        this.rotate = 0;
+        this.$refs.viewerImage.actualSize();
+      },
+      zoom(n) {
+        this.$refs.viewerImage.zoom(n);
+      }
     },
-  },
-};
+  };
 </script>
 
 <style>
-body,
-html {
-  height: 100%;
-}
-#viewer-file .el-container {
-  margin-bottom: 40px;
-  height: 100%;
-}
+  body,
+  html {
+    height: 100%;
+  }
+
+  #viewer-file .el-container {
+    margin-bottom: 40px;
+    height: 100%;
+  }
+
+  .viewerContent {
+    cursor: move;
+    position: absolute !important;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
 
-.viewerContent {
-  cursor: move;
-  position: absolute !important;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-}
+  .magnify-footer {
+    position: fixed;
+    height: 50px;
+    bottom: 0px;
+    /* text-align: center; */
+    color: #fff;
+    z-index: 9;
+  }
 
-.magnify-footer {
-  position: fixed;
-  height: 50px;
-  bottom: 0px;
-  /* text-align: center; */
-  color: #fff;
-  z-index: 9;
-}
+  .magnify-toolbar {
+    display: inline-block;
+    background-color: rgba(0, 0, 0, 0.5);
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+  }
 
-.magnify-toolbar {
-  display: inline-block;
-  background-color: rgba(0, 0, 0, 0.5);
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-}
-.magnify-toolbar .magnify-btn {
-  margin: 15px 20px;
-  color: #999;
-  font-size: 25px;
-  font-weight: 800;
-}
-.magnify-toolbar .magnify-btn:hover,
-.magnify-btn-close:hover {
-  color: #fff;
-}
-.viewerMenu {
-  border-right: solid 2px #e6e6e6 !important;
-}
-.viewerMenu .el-submenu__title,
-.viewerMenu .el-menu-item {
-  height: 30px !important;
-  line-height: 30px !important;
-}
-.viewerMenu .el-menu-item-group__title {
-  line-height: 1px;
-  height: 1px;
-  display: none;
-}
-.viewerMenu .el-submenu__title .el-submenu__icon-arrow {
-  display: inline-block;
-}
+    .magnify-toolbar .magnify-btn {
+      margin: 15px 20px;
+      color: #999;
+      font-size: 25px;
+      font-weight: 800;
+    }
+
+      .magnify-toolbar .magnify-btn:hover,
+      .magnify-btn-close:hover {
+        color: #fff;
+      }
+
+  .viewerMenu {
+    border-right: solid 2px #e6e6e6 !important;
+  }
+
+    .viewerMenu .el-submenu__title,
+    .viewerMenu .el-menu-item {
+      height: 30px !important;
+      line-height: 30px !important;
+    }
+
+    .viewerMenu .el-menu-item-group__title {
+      line-height: 1px;
+      height: 1px;
+      display: none;
+    }
+
+    .viewerMenu .el-submenu__title .el-submenu__icon-arrow {
+      display: inline-block;
+    }
 </style>