Jelajahi Sumber

提交一下

1
mo 2 tahun lalu
induk
melakukan
53ef8977a0
2 mengubah file dengan 22 tambahan dan 8 penghapusan
  1. 18 4
      src/components/banner/index.module.less
  2. 4 4
      src/components/banner/index.tsx

+ 18 - 4
src/components/banner/index.module.less

@@ -5,9 +5,23 @@
   }
 }
 
-:global{
-  .swiper-button-next {
-    right: 130px;
+:global {
+  .myprev,
+  .mynext {
+    width: 40px;
+    height: 72px;
+    background: rgba(0, 0, 0, 0.26);
+    border-radius: 20px;
+    position: absolute;
+    z-index: 100;
+    position: absolute;
+    top: 50%;
+    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
+    z-index: 10;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--swiper-navigation-color, var(--swiper-theme-color));
   }
 }
-

+ 4 - 4
src/components/banner/index.tsx

@@ -52,8 +52,8 @@ export default defineComponent({
           space-between={50}
           pagination={{ clickable: true }}
           navigation={{
-            nextEl: '.swiper-button-next',
-            prevEl: '.swiper-button-prev'
+            nextEl: '.myprev',
+            prevEl: '.mynext'
           }}
           loop={true}
           onSwiper={onSwiper}
@@ -67,8 +67,8 @@ export default defineComponent({
 
 
 
-          <div class="swiper-button-prev"></div>
-          <div class="swiper-button-next"></div>
+          <div class="myprev"></div>
+          <div class="mynext"></div>
         </swiper>
       </>
     )