选择图片调整

src/components/commonPage/DMCchooseImg.vue

 <style>
-.DMCchooseImg .resAddImg {
+  .DMCchooseImg .resAddImg {
     width: 520px;
     padding-right: 45px;
     margin-top: 15px;
-}
+  }
 
-.DMCchooseImg .resource-name {
+  .DMCchooseImg .resource-name {
     height: 34px;
     background: rgba(255, 255, 255, 1);
     outline: none;
     border: 1px solid #d6d6d6;
     padding-left: 10px;
-}
+  }
 
-.DMCchooseImg .search-imgicon {
+  .DMCchooseImg .search-imgicon {
     padding-right: 20px;
     margin-left: -40px;
-}
+  }
 
-.DMCchooseImg .searchImgIcon {
+  .DMCchooseImg .searchImgIcon {
     cursor: pointer;
-}
+  }
 
-.DMCchooseImg .addimgContent {
+  .DMCchooseImg .addimgContent {
     height: 290px;
     overflow: auto;
     margin: 30px 0 20px 25px;
     width: 560px;
-}
+  }
 
-.DMCchooseImg .addimgDiv {
+  .DMCchooseImg .addimgDiv {
     width: 160px;
     height: 155px;
     float: left;
     margin: 0 20px 15px 0;
     overflow: hidden;
-}
+  }
 
-.DMCchooseImg .addimgContent div:first-child {
+  .DMCchooseImg .addimgContent div:first-child {
     margin-left: 0;
-}
+  }
 
-.addimgContent div:nth-child(3n) {
+  .addimgContent div:nth-child(3n) {
     margin-right: 0;
-}
+  }
 
-.DMCchooseImg .test-1::-webkit-scrollbar {
+  .DMCchooseImg .test-1::-webkit-scrollbar {
     width: 0px;
     height: 0px;
     background-color: #f5f5f5;
-}
+  }
 
-.DMCchooseImg .test-1::-webkit-scrollbar-track {
+  .DMCchooseImg .test-1::-webkit-scrollbar-track {
     background-color: #f5f5f5;
-}
+  }
 
-.DMCchooseImg .test-1::-webkit-scrollbar-thumb {
+  .DMCchooseImg .test-1::-webkit-scrollbar-thumb {
     border-radius: 20px;
     background-color: #aaa;
     margin-bottom: 24px;
-}
+  }
 
-.DMCchooseImg .test-1:hover::-webkit-scrollbar {
+  .DMCchooseImg .test-1:hover::-webkit-scrollbar {
     width: 4px;
     height: 4px;
     background-color: #f5f5f5;
-}
+  }
 
-.DMCchooseImg .itemImgdiv {
+  .DMCchooseImg .itemImgdiv {
     width: 160px;
     height: 106px;
     position: relative;
-}
+  }
 
-.DMCchooseImg .itemImgdiv img {
+  .DMCchooseImg .itemImgdiv img {
     width: 100%;
     height: 100%;
     border-radius: 10px;
-}
+  }
 
-.DMCchooseImg .imgseclet {
+  .DMCchooseImg .imgseclet {
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
@@ -89,22 +89,22 @@
     text-align: center;
     line-height: 106px;
     color: #e95252;
-}
+  }
 
-.DMCchooseImg .addimg-btnlist {
+  .DMCchooseImg .addimg-btnlist {
     text-align: center;
-}
+  }
 
-.DMCchooseImg .addimg-select {
+  .DMCchooseImg .addimg-select {
     font-size: 14px;
     color: #999999;
     float: right;
     margin-bottom: 10px;
     position: relative;
     bottom: 20px;
-}
+  }
 
-.DMCchooseImg .save-Btn {
+  .DMCchooseImg .save-Btn {
     width: 90px;
     height: 30px;
     background: rgba(233, 82, 82, 1);
@@ -115,14 +115,14 @@
     border: 1px solid #e95252 !important;
     cursor: pointer;
     margin-right: 20px;
-}
+  }
 
-.DMCchooseImg .cancel-Btn,
-.save-Btn:hover {
+  .DMCchooseImg .cancel-Btn,
+  .save-Btn:hover {
     opacity: 0.8;
-}
+  }
 
-.DMCchooseImg .cancel-Btn {
+  .DMCchooseImg .cancel-Btn {
     width: 90px;
     height: 30px;
     background: rgba(255, 255, 255, 1);
@@ -131,56 +131,59 @@
     outline: none;
     cursor: pointer;
     border: 1px solid #e95252 !important;
-}
+  }
 
-.DMCchooseImg .el-pagination__total {
+  .DMCchooseImg .el-pagination__total {
     display: none !important;
-}
+  }
 
-.DMC_addContent {
+  .DMC_addContent {
     width: 160;
     height: 106px;
     border-radius: 10px;
     background-color: rgba(236, 236, 236, 1);
     color: #fff;
     position: relative;
-}
+  }
 
-.DMC_addContent .el-upload {
+  .DMC_addContent .el-upload {
     width: 100%;
     height: 105px;
-}
+  }
 
-.DMC_addContent i {
+  .DMC_addContent i {
     font-size: 50px;
     color: #d1d1d1;
     position: relative;
     left: 0;
     top: 20px;
-}
+  }
 
-.DMCActiveclass {
+  .DMCActiveclass {
     width: 98px;
     margin: 0 25px;
-}
+  }
 
-.DmcactiveMyClass {
+  .DmcactiveMyClass {
     width: 32px !important;
-}
+  }
+
 </style>
 <template>
   <div class="DMCchooseImg">
     <div class="DMCActiveclass" v-if="this.IsShowVideo" :class="{ 'DmcactiveMyClass': this.isVideoActive }">
       <el-tabs v-model="activeName" @tab-click="handleClick">
         <el-tab-pane v-if="isSHowImgCheck" :label="$t('system.label_img')" name="first"></el-tab-pane>
-        <el-tab-pane v-if="isSHowVideoCheck" :label="$t('hotel.shipin')" name="second"></el-tab-pane>
+        <el-tab-pane v-if="isSHowVideoCheck" label="视频" name="second"></el-tab-pane>
       </el-tabs>
     </div>
     <div v-if="activeName == 'first'">
       <span style="margin-left:24px;">
-        <input type="text" class="resource-name resAddImg" v-model="queryMsg.Name" @keyup.enter="queryMsg.currentPage=1,queryMsg.pageIndex=1,getList()"
+        <input type="text" class="resource-name resAddImg" v-model="queryMsg.Name"
+          @keyup.enter="queryMsg.currentPage=1,queryMsg.pageIndex=1,getList()"
           :placeholder="$t('objFill.qsrguanjianci')" />
-        <span class="search-imgicon"><i class="iconfont icon-img_cz searchImgIcon" @click="queryMsg.currentPage=1,queryMsg.pageIndex=1,getList()"></i></span>
+        <span class="search-imgicon"><i class="iconfont icon-img_cz searchImgIcon"
+            @click="queryMsg.currentPage=1,queryMsg.pageIndex=1,getList()"></i></span>
       </span>
       <div class="addimgContent test-1" v-loading="loading">
         <div class="addimgDiv" v-for="(item, index) in imglistArry" :key="item.subCode"
@@ -242,7 +245,7 @@
 </template>
 
 <script>
-export default {
+  export default {
     props: ["imgType", "isCheckmore", 'queryItem', 'IsShowAdd', 'IsShowVideo', 'checkType'],
     data() {
       return {
@@ -293,7 +296,7 @@ export default {
               })
               this.queryMsg.total = res.data.data.count;
               this.loading = false
-          }else{
+            } else {
               this.loading = false
             }
           },
@@ -316,7 +319,7 @@ export default {
         this.selectVideoArr = [];
         this.queVideoMsg.Name = '';
       },
-    sendMsg() { },
+      sendMsg() {},
       handleCurrentChange(val) {
         this.queryMsg.pageIndex = val;
         this.getList();
@@ -457,14 +460,14 @@ export default {
       },
       //点击确定选择
       chkedVideoList() {
-      if(this.isCheckmore>1&&this.selectVideoArr.length>this.isCheckmore){
+        if (this.isCheckmore > 1 && this.selectVideoArr.length > this.isCheckmore) {
           return this.Error(`${this.$t('objFill.zuiduoxuan')}${this.isCheckmore}${this.$t('objFill.zhangtu')}`);
         }
         this.$emit("headCallBack", this.selectVideoArr);
         this.$emit("closeImg");
       }
     },
-  created() { },
+    created() {},
     mounted() {
       if (this.checkType == 2) {
         this.isSHowVideoCheck = true
@@ -513,6 +516,6 @@ export default {
       }
     }
 
-};
+  };
 
 </script>