修改查看图片只有一张图片报错不触发滚轮事件

web/public/index.html

@@ -11,7 +11,8 @@
     <meta property="og:title" content="四维时代">
     <meta property="og:description" content="四维时代">
     <meta property="og:image:type" content="image/jpg">
-    <link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon.png" class="keep">
+    <link rel="shortcut icon " type="images/x-icon" href="./favicon.ico">
+    <!-- <link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon.png" class="keep"> -->
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/oldVer/main0.css"/>
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/main.css?v=2.25"/>
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/CAD/cad.css?v=2.25"/>

web/src/views/tab3/index.vue

@@ -191,6 +191,39 @@ export default {
         this.$nextTick(() => {
           setTimeout(() => {
             this.imgBigShow = true;
+            //因为污染自己写滚轮缩放
+            document
+              .querySelector(".el-image-viewer__wrapper")
+              .addEventListener("mousewheel", (event) => {
+                let delta = 0;
+                if (!event) event = window.event;
+                if (event.wheelDelta) {
+                  delta = event.wheelDelta / 120;
+                  if (window.opera) delta = -delta;
+                } else if (event.detail) {
+                  delta = -event.detail / 3;
+                }
+                let img = document.querySelector(".el-image-viewer__img");
+                if (delta > 0) {
+                  let width = img.width;
+                  img.width = width * 1.1;
+                } else if (delta < 0) {
+                  let width = img.width;
+                  if (width > 100) {
+                    img.width = width * 0.9;
+                  }
+                }
+              });
+            const myTemp = document.querySelector(".el-image-viewer__mask");
+            myTemp.addEventListener("click", () => {
+              this.imgBigShow = false;
+            });
+            const temp = document.querySelector(".el-image-viewer__close");
+            temp.addEventListener("click", () => {
+              this.imgBigShow = false;
+              this.srcList = [""];
+              // console.log('我点了里面的关闭')
+            });
             // 左按钮
             const tempLeft = document.querySelector(".el-image-viewer__prev");
             tempLeft.addEventListener("click", () => {
@@ -204,39 +237,6 @@ export default {
               if (this.imgBigNum === this.srcList.length + 1)
                 this.imgBigNum = 1;
             });
-            const myTemp = document.querySelector(".el-image-viewer__mask");
-            myTemp.addEventListener("click", () => {
-              this.imgBigShow = false;
-            });
-             //因为污染自己写滚轮缩放
-          document
-            .querySelector(".el-image-viewer__wrapper")
-            .addEventListener("mousewheel", (event) => {
-              let delta = 0;
-              if (!event) event = window.event;
-              if (event.wheelDelta) {
-                delta = event.wheelDelta / 120;
-                if (window.opera) delta = -delta;
-              } else if (event.detail) {
-                delta = -event.detail / 3;
-              }
-              let img = document.querySelector(".el-image-viewer__img");
-              if (delta > 0) {
-                let width = img.width;
-                img.width = width * 1.1;
-              } else if (delta < 0) {
-                let width = img.width;
-                if (width > 100) {
-                  img.width = width * 0.9;
-                }
-              }
-            });
-            const temp = document.querySelector(".el-image-viewer__close");
-            temp.addEventListener("click", () => {
-              this.imgBigShow = false;
-              this.srcList = [""];
-              // console.log('我点了里面的关闭')
-            });
           }, 100);
         });
       } else if (item.type === "video") {

web/src/views/tab4/tab4-2.vue

@@ -77,24 +77,6 @@ export default {
       this.$nextTick(() => {
         setTimeout(() => {
           this.imgBigShow = true;
-          // 左按钮
-          const tempLeft = document.querySelector(".el-image-viewer__prev");
-          tempLeft.addEventListener("click", () => {
-            this.tempNum--;
-            if (this.tempNum < 0) this.tempNum = this.myArr.length - 1;
-            this.imgBigTxt = this.myArr[this.tempNum].name;
-          });
-          // 右按钮
-          const tempRight = document.querySelector(".el-image-viewer__next");
-          tempRight.addEventListener("click", () => {
-            this.tempNum++;
-            if (this.tempNum === this.myArr.length) this.tempNum = 0;
-            this.imgBigTxt = this.myArr[this.tempNum].name;
-          });
-          const myTemp = document.querySelector(".el-image-viewer__mask");
-          myTemp.addEventListener("click", () => {
-            this.imgBigShow = false;
-          });
           //因为污染自己写滚轮缩放
           document
             .querySelector(".el-image-viewer__wrapper")
@@ -118,20 +100,29 @@ export default {
                 }
               }
             });
+          const myTemp = document.querySelector(".el-image-viewer__mask");
+          myTemp.addEventListener("click", () => {
+            this.imgBigShow = false;
+          });
           const temp = document.querySelector(".el-image-viewer__close");
           temp.addEventListener("click", () => {
             this.imgBigShow = false;
             // console.log('我点了里面的关闭')
           });
-          //鼠标滚轮事件
-          // console.log(998,$('.el-image-viewer__img'));
-          // // let tempDom = document.querySelector(".el-image-viewer__img");
-          // $('.el-image-viewer__img').on("wheel", (e) => {
-
-          //   console.log(11111111111);
-          //   e.stopPropagation()
-          //   e.preventDefault()
-          // });
+          // 左按钮
+          const tempLeft = document.querySelector(".el-image-viewer__prev");
+          tempLeft.addEventListener("click", () => {
+            this.tempNum--;
+            if (this.tempNum < 0) this.tempNum = this.myArr.length - 1;
+            this.imgBigTxt = this.myArr[this.tempNum].name;
+          });
+          // 右按钮
+          const tempRight = document.querySelector(".el-image-viewer__next");
+          tempRight.addEventListener("click", () => {
+            this.tempNum++;
+            if (this.tempNum === this.myArr.length) this.tempNum = 0;
+            this.imgBigTxt = this.myArr[this.tempNum].name;
+          });
         }, 100);
       });
     },
@@ -193,19 +184,19 @@ export default {
   /*修改提示文字的颜色*/
   /deep/input::-webkit-input-placeholder {
     /* WebKit browsers */
-    color: #B9412E;
+    color: #b9412e;
   }
   /deep/input:-moz-placeholder {
     /* Mozilla Firefox 4 to 18 */
-    color: #B9412E;
+    color: #b9412e;
   }
   /deep/input::-moz-placeholder {
     /* Mozilla Firefox 19+ */
-    color: #B9412E;
+    color: #b9412e;
   }
   /deep/input:-ms-input-placeholder {
     /* Internet Explorer 10+ */
-    color: #B9412E;
+    color: #b9412e;
   }
   // position: relative;
   width: 100%;
@@ -221,10 +212,10 @@ export default {
     font-size: 26px;
     font-weight: 700;
     .search {
-  /deep/.el-input__inner {
-    border-radius: 40px;
-    border: 1px solid #b9412e;
-  }
+      /deep/.el-input__inner {
+        border-radius: 40px;
+        border: 1px solid #b9412e;
+      }
       width: 350px;
       left: 0;
       bottom: -10px;