feat: 添加图片预览功能

src/components/Map/config/index.js

@@ -18,13 +18,13 @@ export default {
       type: "vector",
       maxzoom: 12,
     },
-    area_title: {
-      tiles: [
-        `${process.env.VUE_APP_MAP_INIT_STYLE}/area_title/{z}/{x}/{y}.vector.pbf`,
-      ],
-      type: "vector",
-      maxzoom: 5,
-    },
+    // area_title: {
+    //   tiles: [
+    //     `${process.env.VUE_APP_MAP_INIT_STYLE}/area_title/{z}/{x}/{y}.vector.pbf`,
+    //   ],
+    //   type: "vector",
+    //   maxzoom: 5,
+    // },
   },
   layers: [
     {

src/pages/renewableEnergyVillage/components/picPopup.vue

 <template>
   <div class="picPopup">
     <el-dialog
-      title=""
       :visible.sync="getVisible"
       width="70%"
       :before-close="handleClose"
     >
+      <template #title></template>
       <div>
         <div class="select">
           <el-button
@@ -23,15 +23,34 @@
           ></i>
           <div class="contain">
             <div class="zero" v-if="listValue === 0">
-              <img :src="`${BASE_URL}/images/14_basic_info1.jpg`" alt="" />
-              <img :src="`${BASE_URL}/images/14_basic_info2.jpg`" alt="" />
-              <img :src="`${BASE_URL}/images/14_basic_info3.jpg`" alt="" />
+              <el-image
+                style="width: 100%; height: 100%"
+                :src="`${BASE_URL}/images/14_basic_info1.jpg`"
+                fit="contain"
+                :preview-src-list="imgLists"
+              ></el-image>
+              <el-image
+                style="width: 100%; height: 100%"
+                :src="`${BASE_URL}/images/14_basic_info2.jpg`"
+                fit="contain"
+                :preview-src-list="imgLists"
+              ></el-image>
+              <el-image
+                style="width: 100%; height: 100%"
+                :src="`${BASE_URL}/images/14_basic_info3.jpg`"
+                fit="contain"
+                :preview-src-list="imgLists"
+              >
+              </el-image>
             </div>
             <template v-else>
-              <img
+              <el-image
+                style="width: 100%; height: 100%"
                 :src="`${BASE_URL}/images/14_${list[listValue].key}.jpg`"
-                alt=""
-              />
+                fit="contain"
+                :preview-src-list="imgLists"
+              >
+              </el-image>
             </template>
           </div>
           <i
@@ -40,12 +59,6 @@
           ></i>
         </div>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button size="medium" @click="getVisible = false">取 消</el-button>
-        <el-button size="medium" type="primary" @click="getVisible = false">
-          确 定
-        </el-button>
-      </span>
     </el-dialog>
   </div>
 </template>
@@ -70,6 +83,15 @@ export default {
         { key: "eco_benefits", value: "效益分析" },
       ],
       listValue: 0,
+      // 添加所有图片收集
+      imgLists: [
+        `${process.env.VUE_APP_BASE_URL}/images/14_basic_info1.jpg`,
+        `${process.env.VUE_APP_BASE_URL}/images/14_basic_info2.jpg`,
+        `${process.env.VUE_APP_BASE_URL}/images/14_basic_info3.jpg`,
+        `${process.env.VUE_APP_BASE_URL}/images/14_technical_patterns.jpg`,
+        `${process.env.VUE_APP_BASE_URL}/images/14_goal_achievement.jpg`,
+        `${process.env.VUE_APP_BASE_URL}/images/14_eco_benefits.jpg`,
+      ],
     };
   },
   computed: {
@@ -101,13 +123,22 @@ export default {
 .picPopup {
   /deep/ .el-dialog {
     margin-top: 10vh !important;
+
+    .el-dialog__header {
+      padding: 0;
+    }
+
+    .el-dialog__body {
+      padding: 1vh 1vh 6vh;
+    }
   }
   .select {
     display: flex;
     justify-content: space-between;
     width: 64vw;
     .el-button {
-      padding: 25px 66px;
+      padding: 16px 45px;
+      font-size: 2vh !important;
     }
     .el-button.el-button--primary {
       color: #333 !important;
@@ -131,11 +162,6 @@ export default {
     .contain {
       flex: 1;
       height: 50vh;
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
 
       .zero {
         width: 100%;