up

hot/src/assets/base.css

@@ -12,4 +12,7 @@
 }
 .viewer-close{
   display: none !important;
+}
+img {
+  image-rendering: -webkit-optimize-contrast;
 }

hot/src/views/Home.vue

@@ -30,6 +30,10 @@
         <p v-html="data.title[myInd]"></p>
         <p v-html="data.content[myInd]"></p>
       </div>
+      <!-- 查看图片 -->
+      <viewer class="viewerCla"  ref="viewer" :images="lookPics">
+        <img :src="lookPics[0]" alt="">
+      </viewer>
       <swiper
         v-show="active !== 'title'"
         class="warpper"
@@ -38,14 +42,15 @@
       >
         <swiper-slide v-for="(item, index) in data[active]" :key="index">
           <div class="slide">
-            <viewer v-if="active === 'images'" ref="viewer" :images="lookPics">
+            
               <img
+                v-if="active === 'images'"
                 style="cursor: pointer"
                 v-lazy="imgSrc(item)"
                 alt=""
-                @click="lookImg(imgSrc(item), index)"
+                @click="lookImg(imgSrc(item))"
               />
-            </viewer>
+            
 
             <video
               v-else-if="active === 'video'"
@@ -196,8 +201,8 @@ export default {
     SwiperSlide,
   },
   methods: {
-    lookImg(url, index) {
-      let dom = this.$refs.viewer[index].$viewer;
+    lookImg(url) {
+      let dom = this.$refs.viewer.$viewer;
       this.lookPics = [url];
       dom.show();
     },
@@ -300,6 +305,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.viewerCla img{
+  display: none;
+}
 .home {
   background-color: rgba(0, 0, 0, 0.8);
 }
@@ -541,9 +549,7 @@ export default {
 .swiper-button-next {
   right: 0;
 }
-.slide img {
-  image-rendering: -webkit-optimize-contrast;
-}
+
 @media screen and (max-width: 500px) {
   .swiper-slide {
     width: 100%;