From c8ab690bdba99e2feea304c6ec0c2639b6993bea Mon Sep 17 00:00:00 2001
From: song <srf428110@163.com>
Date: Tue, 1 Mar 2022 19:15:08 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Banner/Banner.vue | 77 +++++++++++++++-----------------
 1 file changed, 35 insertions(+), 42 deletions(-)

diff --git a/src/components/Banner/Banner.vue b/src/components/Banner/Banner.vue
index 53dae1c..8377c1a 100644
--- a/src/components/Banner/Banner.vue
+++ b/src/components/Banner/Banner.vue
@@ -10,8 +10,6 @@
         </div>
       </div>
     </div>
-    <!-- Add Pagination -->
-    <div class="swiper-pagination"></div>
   </div>
 </template>
 
@@ -34,53 +32,48 @@ export default {
     let that = this;
     /* eslint-disable */
     let mySwiper = new Swiper('.swiper-container', {
-      slidesPerView: 5,
-      spaceBetween: -100,
-      centeredSlides: true,
-      loop: true,
-      pagination: {
-        el: '.swiper-pagination',
-        clickable: true,
-      },
-      autoplay: {
-          stopOnLastSlide: true,
-          delay: 1000
-      },
+      loop: true, // 循环模式选项
+      autoplay: true,//自动循环
+      slidesPerView: 3.8, //设置slider容器能够同时显示的slides数量(carousel模式)。
+      spaceBetween: -160, //在slide之间设置距离（单位px）。
+      centeredSlides: true, //设置活动块居中
     });
   },
 };
 </script>
 
 <style lang="less" scoped>
-.swiper-container {
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-    .swiper-slide {
-      text-align: center;
-      font-size: 18px;
-      background: #fff;
+.swiper-container{
+  width: 100%;
+  overflow: hidden;
+}
 
-      /* Center slide text vertically */
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-      -webkit-box-pack: center;
-      -ms-flex-pack: center;
-      -webkit-justify-content: center;
-      justify-content: center;
-      -webkit-box-align: center;
-      -ms-flex-align: center;
-      -webkit-align-items: center;
-      align-items: center;
-	  transition: 300ms;
-	  transform: scale(0.8);
-    }
-	.swiper-slide-active,.swiper-slide-duplicate-active{
-      transform: scale(1);
-	}
+.swiper-slide {
+  text-align: center;
+  height: 76%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 300ms;
+  transform: scale(0.6);
+}
+
+.swiper-slide-active,.swiper-slide-duplicate-active {
+  transform: scale(1);
+}
+
+.swiper-slide-next{
+  transform: scale(0.8);
+  z-index: 998 !important;
+}
+
+.swiper-slide-prev{
+  transform: scale(0.8);
+}
+
+.swiper-slide-active {
+  z-index: 999 !important;
+}
 
 .rotation-box {
   position: relative;