预览图片 只能关闭一个

src/views/checkList.vue

@@ -119,7 +119,7 @@
                 :src="url"
                 fit="full"
                 :preview-src-list="srcList"
-                @click.stop="handleClickStop"
+                @click.stop="clickMaskClosePreview"
               />
             </div>
             <div class="twoImg">
@@ -129,6 +129,7 @@
                 :src="url"
                 fit="full"
                 :preview-src-list="srcList"
+                @click.stop="clickMaskClosePreview"
               />
             </div>
             <div class="uploadButton">
@@ -274,31 +275,14 @@ export default {
       ]
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      var domImageView = document.querySelector('.el-image-viewer__mask') // 获取遮罩层dom
-      if (!domImageView) {
-        return
-      }
-      domImageView.addEventListener('click', () => {
-        // 点击遮罩层时调用关闭按钮的 click 事件
-        document.querySelector('.el-image-viewer__close').click()
-      })
-    })
-  },
   methods: {
-    handleClickStop() {
-      this.$nextTick(() => {
-        document.addEventListener('click', function(e) {
-          console.log('e', e.target.className)
-          if (e.target.className === 'el-image-viewer__mask') {
-            const close = document.querySelector('.el-icon-circle-close')
-            console.log('close', close)
-            console.log('close', close.click())
-            close.click()
-          }
-        })
-      })
+    // 点击mask关闭图片预览
+    clickMaskClosePreview(e) {
+      // 使用addEventListener,会出现点击点击两次才触发的情况
+      if (e.target.getAttribute('class') === 'el-image-viewer__mask') {
+        this.$refs.preview.showViewer = false
+        // this.imgPreviewShow = false
+      }
     },
     handleClickTwoStop() {
       this.$nextTick(() => {
@@ -334,9 +318,6 @@ export default {
   .el-dialog__wrapper {
     background-color: rgba(0, 0, 0, 0.5);
   }
-  .image-wrapper {
-    text-align: center;
-  }
 
   ::v-deep .el-form-item__content{
     margin-left: 45px !important;
@@ -360,7 +341,7 @@ export default {
   //检查表主题
   .checkList {
     .smallInput {
-      width: 90%;
+      width: 70%;
       //width: 176px;
     }
 
@@ -460,17 +441,19 @@ export default {
           margin-bottom: 20px;
 
           .appearanceForm {
+            width: 100%;
             //width: 318.4px;
             height: 99.2px;
             display: flex;
             align-items: center;
+            justify-content: center;
 
             .sample {
-              margin-left: 16px;
+              margin-left: 1%;
             }
 
             .badness {
-              margin-left: 20px;
+              //margin-left: 20px;
             }
           }
         }
@@ -691,7 +674,7 @@ export default {
 
         .peviewImg {
           display: flex;
-          width: 667px;
+          //width: 667px;
           .OneImg{
             margin-top: -1.6px;
             .OneElImg{
@@ -756,7 +739,7 @@ export default {
       }
       .uploadLabel {
         margin-top: 7px;
-        width: 42px;
+        width: 3%;
         height: 18px;
         font-size: 14px;
         font-family: Microsoft YaHei, Microsoft YaHei-400;
@@ -769,8 +752,7 @@ export default {
 
     .submitButton {
       margin-top: 50px;
-      margin-left: 27.5%;
-      margin-left: 230.4px;
+      margin-left: 30%;
       padding-bottom: 50px;
       .buttoon{
         width: 130px;

src/views/inspectionSheet.vue

@@ -8,7 +8,7 @@
         </span>
       </div>
       <div class="right">
-        <el-form class="rightForm" :model="oneFrom" label-width="42px">
+        <el-form class="rightForm" :model="oneFrom" label-width="auto">
           <el-form-item label="检印:">
             <el-input v-model="oneFrom.checkPrint" class="rightInput" />
           </el-form-item>
@@ -651,7 +651,7 @@ export default {
         }
 
         .two {
-          width: 25%;
+          //width: 25%;
           border-right: 1px solid;
           border-left: 1px solid;
 
@@ -661,6 +661,7 @@ export default {
             justify-content: center;
             align-items: center;
             .twoTableInput{
+              width: 90%;
               border: 1px solid #d9d9d9;
               border-radius: 4px;
             }
@@ -681,7 +682,7 @@ export default {
         }
 
         .four {
-          width: 25%;
+          //width: 25%;
           border-left: 1px solid;
 
           .twoContent {
@@ -690,6 +691,7 @@ export default {
             justify-content: center;
             align-items: center;
             .twoTableInput{
+              width: 90%;
               border: 1px solid #d9d9d9;
               border-radius: 4px;
             }
@@ -1630,8 +1632,8 @@ export default {
       margin-left: 10.8rem;
       margin-top: 2.5rem;
       .oneCadImgContent{
-        width: 600px;
-        height: 400px
+        width: 80%;
+        max-height: 80%
       }
     }
 
@@ -1639,8 +1641,8 @@ export default {
       margin-left: 10.8rem;
       margin-top: 2.5rem;
       .oneCadImgContent{
-        width: 600px;
-        height: 400px
+        width: 80%;
+        max-height: 80%
       }
     }
   }