优化查看图片效果

src/pages/collection/collection-detail.vue

@@ -63,12 +63,19 @@
             />
             <div class="detail">
               <div class="detail-wrapper">
-                <div class="detail-picOrModel">
-                  <div class="lookImg" v-if="detail.type === 'img'">
-                  <img :src="$cdnUrl + detail.thumb" alt=""   />
-                  <i class="el-icon-zoom-in" @click="lookImg($cdnUrl,detail.thumb)"></i>
-                  </div>
-                  <iframe v-if="detail.type === 'model'" :src="detail.modelUrl" frameborder="0"></iframe>
+                <div class="detail-picOrModel" v-if="detail.type === 'img'">
+                  <el-image
+                    style="width: 100px; height: 100px"
+                    :src="$cdnUrl + detail.thumb"
+                    :preview-src-list="bigImgUrl"
+                  >
+                  </el-image>
+                  <!-- <img :src="$cdnUrl + detail.thumb" alt="" /> -->
+                  <iframe
+                    v-if="detail.type === 'model'"
+                    :src="detail.modelUrl"
+                    frameborder="0"
+                  ></iframe>
                 </div>
                 <div class="detail-title">{{ detail.name }}</div>
                 <div class="detail-desc">
@@ -82,11 +89,6 @@
         </div>
       </div>
     </div>
-    <!-- 点击放大镜查看大图 -->
-    <div class="bigImg" v-if="bigImgIsShow">
-      <img :src="bigImg" alt="">
-      <div class="imgBtnX" @click="bigImgIsShow=false">关 闭</div>
-    </div>
   </div>
 </template>
 
@@ -100,7 +102,7 @@ export default {
   data () {
     // 这里存放数据
     return {
-      bigImgIsShow: false,
+      bigImgUrl: [],
       bigImg: '',
       collectionType: 'boutique',
       detail: {}
@@ -120,17 +122,13 @@ export default {
         path: '/collection-type',
         query: { type: this.detail.navType || '' }
       })
-    },
-    // 点击放大镜查看大图
-    lookImg (url1, url2) {
-      this.bigImgIsShow = true
-      this.bigImg = `${url1}${url2}`
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {
     // console.log(77777, this.$route.query)
     this.detail = this.$route.query
+    this.bigImgUrl[0] = this.$cdnUrl + this.detail.thumb
     this.collectionType = this.detail.navType
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
@@ -145,34 +143,41 @@ export default {
 }
 </script>
 <style lang='less' scoped>
-.bigImg{
-  z-index: 99999;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0,0,0,.7);
-  text-align: center;
-  img {
-    margin-top: 15px;
-    max-width: 80vw;
-    max-height: 80vh;
-  }
-  .imgBtnX {
-    cursor: pointer;
-    width: 100px;
-    height: 30px;
-    position: absolute;
-    left: 50%;
-    bottom: 20px;
-    background-color: #fff;
-    border-radius: 8px;
-    color: black;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+// .bigImg{
+//   z-index: 99999;
+//   position: fixed;
+//   top: 0;
+//   left: 0;
+//   width: 100vw;
+//   height: 100vh;
+//   background-color: rgba(0,0,0,.8);
+//   text-align: center;
+//   img {
+//     margin-top: 10vh;
+//     max-width: 80vw;
+//     max-height: 80vh;
+//   }
+//   // .imgBtnX {
+//   //   cursor: pointer;
+//   //   width: 100px;
+//   //   height: 30px;
+//   //   position: absolute;
+//   //   left: 50%;
+//   //   bottom: 20px;
+//   //   background-color: #fff;
+//   //   border-radius: 8px;
+//   //   color: black;
+//   //   display: flex;
+//   //   justify-content: center;
+//   //   align-items: center;
+//   // }
+// }
+/deep/.el-image{
+  width: 300px !important;
+  height: 300px !important;
+}
+/deep/.el-image>img {
+  width: auto !important;
 }
 .bg {
   width: 100%;
@@ -272,7 +277,6 @@ export default {
           .detail {
             width: 100%;
             .detail-wrapper {
-
               width: 95%;
               margin: 152px auto 80px;
               overflow: hidden;
@@ -287,7 +291,7 @@ export default {
                   width: 100%;
                   height: 700px;
                 }
-                .lookImg{
+                .lookImg {
                   position: relative;
                   i {
                     font-size: 30px;