0929

src/components/lunbo.vue

@@ -1,14 +1,15 @@
 <template>
-  <div class="lunbo" :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">
-      <img
-        :src="require(`@/assets/images/collection/${active}/${item.img}`)"
-      />
-      <span>{{ item.name }}</span>
-    </li>
-  </ul>
-</div>
+  <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">
+        <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>
  
 </template>
 
@@ -35,14 +36,7 @@ export default {
           delay: 0,
           disableOnInteraction: !1,
           reverseDirection: this.isReverse,
-        },
-        on: {
-          progress: function(swiper,progress){
-              console.log(progress,swiper);
-            },  
-        },
-        pagination: {},
-        
+        }
       };
     },
   },
@@ -58,19 +52,33 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@jianjinw:10%;
 .lunbo {
   width: 100%;
   position: relative;
-  &::before{
+   &::before{
     content: '';
     position: absolute;
-    background:linear-gradient(90deg,rgba(0,0,0,1),rgba(0,0,0,0));
+    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: 80px;
+    width: @jianjinw;
+    z-index: 9999;
+  }
+  &::after{
+    content: '';
+    position: absolute;
+    background:linear-gradient(-90deg,#034c52,rgba(3,76,82,0));
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: @jianjinw*0.8;
     z-index: 9999;
   }
+  .jianchubg{
+    width: 100%;
+  }
   .swiper-wrapper {
     width: 100%;
     .swiper-slide {
@@ -101,12 +109,35 @@ export default {
       }
     }
   }
+}
 
+.rjianjin{
+  &::before{
+    content: '';
+    position: absolute;
+    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: '';
+    position: absolute;
+    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%;
+    width: @jianjinw;
+    z-index: 9999;
+  }
 }
 </style>
 
+
 <style lang="less">
 .swiper-container .swiper-wrapper{
   transition-timing-function: linear!important;
 }
-</style>
+</style>

src/views/Home.vue

@@ -113,11 +113,11 @@ export default {
   }
   .con {
     .top {
-      width: 90%;
+      width: 100%;
       margin-right: 0;
     }
     .bottom {
-      width: 90%;
+      width: 100%;
       margin-left: 0;
     }
   }