地区选择优化

src/components/WebSet/WebSiteArea.vue

@@ -86,7 +86,7 @@
         </el-table-column>
         <el-table-column prop="ParentName" label="封面图" header-align="center" align="center">
            <template slot-scope="scope">
-             <img class="cover" v-if="scope.row.ImageList && scope.row.ImageList.length" :src="scope.row.ImageList[0]" />
+             <img @click="showImage(scope.row.ImageList[0])" class="cover" v-if="scope.row.ImageList && scope.row.ImageList.length" :src="scope.row.ImageList[0]" />
           </template>
         </el-table-column>
         <el-table-column label="操作" header-align="center" align="center">
@@ -191,6 +191,11 @@
         <button class="hollowFixedBtn" @click="areaVisible = false">{{$t('pub.cancelBtn')}}</button>
       </div>
     </el-dialog>
+    <viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
+      <template slot-scope="scope">
+        <img v-for="src in scope.images" :src="src" :key="src">
+      </template>
+    </viewer>
   </div>
 </template>
 <script>
@@ -203,6 +208,11 @@ import uploadImg from '../../pubComponents/uploadImg'
     },
     data() {
       return {
+        imageOptions: {
+          navbar: false,
+          title: false
+        },
+        images: [],
         showAddArea: true,
         rules: {
           AreaName: [
@@ -263,6 +273,15 @@ import uploadImg from '../../pubComponents/uploadImg'
       this.financeinfo_post_GetList()
     },
     methods: {
+      showImage(src) {
+        this.$set(this.images, 0, src);
+        setTimeout(() => {
+        this.$viewer.show();
+      }, 1000);
+      },
+      inited(viewer) {
+        this.$viewer = viewer
+      },
       getAreaShow(scope) {
         return scope.row.DestinationList ? scope.row.DestinationList.map(item => item.Name).join(',') : ''
       },

src/pubComponents/uploadImg.vue

@@ -17,7 +17,6 @@
                   </div>
                 </div>
               </div>
-            </div>
             <div class="add-img">
               <div class="reimg-add">
                 <i class="iconfont icon-img_haha bigAdd"></i>
@@ -33,6 +32,7 @@
                 </div>
               </div>
             </div>
+            </div>
           </div>
             <!-- <el-upload class="upload-demo" :http-request="UploadImage" :multiple="false"
               accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
@@ -227,7 +227,15 @@
 }
 
 .scenicSpotInfoManage .add-img {
-  margin-top: 20px;
+  /* margin-top: 20px; */
+  width: 140px;
+  height: 93px;
+  background: rgba(236, 236, 236, 1);
+  border-radius: 10px;
+  position: relative;
+  cursor: pointer;
+  float: left;
+  margin: 0 30px 30px 0;
 }
 
 .scenicSpotInfoManage .reimg-add {
@@ -255,7 +263,7 @@
   color: #d1d1d1;
   position: absolute;
   left: 45px;
-  top: 10px;
+  top: 25px;
 }
 
 .scenicSpotInfoManage .imgzhe {
@@ -296,7 +304,7 @@
 .scenicSpotInfoManage .re-upload {
   position: absolute;
   top: 30px;
-  left: 30px;
+  left: 55px;
 }
 
 .scenicSpotInfoManage .re-find {