update

src/components/lunbo.vue

@@ -1,16 +1,29 @@
 <template>
-  <div class="lunbo" :class="{rjianjin:isReverse}" :key="id" :ref="id" v-swiper:mySwiper="swiperOptions">
+  <div
+    class="lunbo"
+    :class="{ rjianjin: isReverse }"
+    :key="id"
+    :ref="id"
+    v-swiper:mySwiper="swiperOptions"
+  >
     <ul class="swiper-wrapper swiper2">
-      <li class="swiper-slide" v-for="(item, i) in data" @click="showIframe(item.link,item.name)" :key="i">
+      <li
+        class="swiper-slide"
+        v-for="(item, i) in data"
+        :data-link="item.link"
+        :key="i"
+      >
         <img
           :src="require(`@/assets/images/collection/${active}/${item.img}`)"
         />
         <span>{{ item.name }}</span>
       </li>
     </ul>
-    <div :style="{ backgroundImage: `url(${require('@/assets/images/bg.jpg')})` }" class="jianchubg"></div>
+    <div
+      :style="{ backgroundImage: `url(${require('@/assets/images/bg.jpg')})` }"
+      class="jianchubg"
+    ></div>
   </div>
- 
 </template>
 
 <script>
@@ -26,6 +39,7 @@ export default {
 
   computed: {
     swiperOptions() {
+      let that = this;
       return {
         preventLinksPropagation: !1,
         slidesPerView: "auto",
@@ -36,47 +50,56 @@ export default {
           delay: 0,
           disableOnInteraction: !1,
           reverseDirection: this.isReverse,
-        }
+        },
+        on: {
+          click: function() {
+            const clickedRealIndex = parseInt(
+              this.clickedSlide.dataset.swiperSlideIndex || this.clickedIndex
+            );
+            let { link, name } = that.data[clickedRealIndex];
+            that.$emit("openIframe", { url: link, isShow: true, name: name });
+          },
+        },
       };
     },
   },
   beforeDestroy() {
     this.$refs[this.id].swiper.destroy();
-  },
-  methods:{
-    showIframe(url,name){
-      this.$emit('openIframe',{"url":url,"isShow":true,"name":name});
-    },
   }
 };
 </script>
 
 <style lang="less" scoped>
-@jianjinw:10%;
+@jianjinw: 10%;
 .lunbo {
   width: 100%;
   position: relative;
-   &::before{
-    content: '';
+  &::before {
+    content: "";
     position: absolute;
-    background:linear-gradient(90deg,#034c52 0, rgba(3,76,82,1) 50%, rgba(3,76,82,0) 100%);
+    background: linear-gradient(
+      90deg,
+      #034c52 0,
+      rgba(3, 76, 82, 1) 50%,
+      rgba(3, 76, 82, 0) 100%
+    );
     left: 0;
     top: 0;
     height: 100%;
     width: @jianjinw;
     z-index: 9999;
   }
-  &::after{
-    content: '';
+  &::after {
+    content: "";
     position: absolute;
-    background:linear-gradient(-90deg,#034c52,rgba(3,76,82,0));
+    background: linear-gradient(-90deg, #034c52, rgba(3, 76, 82, 0));
     right: 0;
     top: 0;
     height: 100%;
     width: @jianjinw*0.8;
     z-index: 9999;
   }
-  .jianchubg{
+  .jianchubg {
     width: 100%;
   }
   .swiper-wrapper {
@@ -87,7 +110,7 @@ export default {
       position: relative;
       cursor: pointer;
       transition: 0.3s ease all;
-      margin:0 2vw 0;
+      margin: 0 2vw 0;
       > img {
         width: 100%;
         height: 100%;
@@ -111,21 +134,26 @@ export default {
   }
 }
 
-.rjianjin{
-  &::before{
-    content: '';
+.rjianjin {
+  &::before {
+    content: "";
     position: absolute;
-    background:linear-gradient(90deg,#034c52,rgba(3,76,82,0));
+    background: linear-gradient(90deg, #034c52, rgba(3, 76, 82, 0));
     left: 0;
     top: 0;
     height: 100%;
     width: @jianjinw*0.8;
     z-index: 9999;
   }
-  &::after{
-    content: '';
+  &::after {
+    content: "";
     position: absolute;
-    background:linear-gradient(-90deg,#034c52 0, rgba(3,76,82,0.7) 76%, rgba(3,76,82,0) 100%);
+    background: linear-gradient(
+      -90deg,
+      #034c52 0,
+      rgba(3, 76, 82, 0.7) 76%,
+      rgba(3, 76, 82, 0) 100%
+    );
     right: 0;
     top: 0;
     height: 100%;
@@ -135,9 +163,8 @@ export default {
 }
 </style>
 
-
 <style lang="less">
-.swiper-container .swiper-wrapper{
-  transition-timing-function: linear!important;
+.swiper-container .swiper-wrapper {
+  transition-timing-function: linear !important;
 }
 </style>