fix(swiper): fix style (#2418)

* fix: style

* fix: bar width

* chore: style

Author: Wesley-0808

style/web/components/swiper/_index.less

@@ -178,6 +178,14 @@
     .swiper-navigation-item(bars, outside, horizontal);
   }
 
+  .@{prefix}-swiper__navigation-dots {
+    .swiper-navigation-item(dots, outside, horizontal);
+  }
+
+  .@{prefix}-swiper__navigation-dots-bar {
+    .swiper-navigation-item(dots-bar, outside, horizontal);
+  }
+
   &.@{prefix}-swiper--vertical {
     .@{prefix}-swiper__navigation {
       bottom: auto;
@@ -220,6 +228,12 @@
   .@{prefix}-swiper__navigation-bars {
     .swiper-navigation-item(bars, inside, horizontal,large);
   }
+  .@{prefix}-swiper__navigation-dots-bar {
+    .swiper-navigation-item(dots-bar, inside, horizontal,large);
+  }
+  .@{prefix}-swiper__navigation-dots {
+    .swiper-navigation-item(dots, inside, horizontal,large);
+  }
   .@{prefix}-swiper__navigation--fraction {
     .swiper-navigation-fraction(large);
   }
@@ -230,18 +244,36 @@
     .@{prefix}-swiper__navigation-bars {
       .swiper-navigation-item(bars, outside, horizontal,large);
     }
+    .@{prefix}-swiper__navigation-dots-bar {
+      .swiper-navigation-item(dots-bar, outside, horizontal,large);
+    }
+    .@{prefix}-swiper__navigation-dots {
+      .swiper-navigation-item(dots, outside, horizontal,large);
+    }
   }
   &.@{prefix}-swiper--vertical {
     .@{prefix}-swiper__navigation-bars {
       .swiper-navigation-item(bars, inside, vertical,large);
     }
+    .@{prefix}-swiper__navigation-dots-bar {
+      .swiper-navigation-item(dots-bar, inside, vertical,large);
+    }
+    .@{prefix}-swiper__navigation-dots {
+      .swiper-navigation-item(dots, inside, vertical,large);
+    }
     &.@{prefix}-swiper--outside {
       .@{prefix}-swiper__navigation {
         right: -@swiper-navigation-item-margin-large * 6;
       }
       .@{prefix}-swiper__navigation-bars {
         .swiper-navigation-item(bars, outside, vertical,large);
       }
+      .@{prefix}-swiper__navigation-dots-bar {
+        .swiper-navigation-item(dots-bar, outside, vertical,large);
+      }
+      .@{prefix}-swiper__navigation-dots {
+        .swiper-navigation-item(dots, outside, vertical,large);
+      }
     }
   }
 }
@@ -262,6 +294,12 @@
   .@{prefix}-swiper__navigation-bars {
     .swiper-navigation-item(bars, inside, horizontal,small);
   }
+  .@{prefix}-swiper__navigation-dots-bar {
+    .swiper-navigation-item(dots-bar, inside, horizontal,small);
+  }
+  .@{prefix}-swiper__navigation-dots {
+    .swiper-navigation-item(dots, inside, horizontal,small);
+  }
   .@{prefix}-swiper__navigation--fraction {
     .swiper-navigation-fraction(small);
   }
@@ -272,18 +310,36 @@
     .@{prefix}-swiper__navigation-bars {
       .swiper-navigation-item(bars, outside, horizontal,small);
     }
+    .@{prefix}-swiper__navigation-dots-bar {
+      .swiper-navigation-item(dots-bar, outside, horizontal,small);
+    }
+    .@{prefix}-swiper__navigation-dots {
+      .swiper-navigation-item(dots, outside, horizontal,small);
+    }
   }
   &.@{prefix}-swiper--vertical {
     .@{prefix}-swiper__navigation-bars {
       .swiper-navigation-item(bars, inside, vertical,small);
     }
+    .@{prefix}-swiper__navigation-dots-bar {
+      .swiper-navigation-item(dots-bar, inside, vertical,small);
+    }
+    .@{prefix}-swiper__navigation-dots {
+      .swiper-navigation-item(dots, inside, vertical,small);
+    }
     &.@{prefix}-swiper--outside {
       .@{prefix}-swiper__navigation {
         right: -@swiper-navigation-item-margin-small * 6;
       }
       .@{prefix}-swiper__navigation-bars {
         .swiper-navigation-item(bars, outside, vertical,small);
       }
+      .@{prefix}-swiper__navigation-dots-bar {
+        .swiper-navigation-item(dots-bar, outside, vertical,small);
+      }
+      .@{prefix}-swiper__navigation-dots {
+        .swiper-navigation-item(dots, outside, vertical,small);
+      }
     }
   }
 }

style/web/components/swiper/_mixin.less

@@ -192,8 +192,8 @@
     }
     & when(@type = dots) {
       .@{prefix}-swiper__navigation-item {
-        @itemWidth: 'swiper-navigation-item-dot-size';
-        @itemHeight: 'swiper-navigation-item-dot-size';
+        @itemWidth: 'swiper-navigation-item-dot-size--@{size}';
+        @itemHeight: 'swiper-navigation-item-dot-size--@{size}';
         @itemWidthActive: 'swiper-navigation-item-width-bars-@{size}-active';
         @itemMargin: 'swiper-navigation-item-margin-@{size}';
 
@@ -255,7 +255,7 @@
   }
 
   & when(@position = outside) {
-    & when(@type = bars) {
+    & when(@type = bars), (@type = dots-bar), (@type = dots) {
       .@{prefix}-swiper__navigation-item {
         span {
           background-color: @swiper-navigation-item-bg-outside;

style/web/components/swiper/_var.less

@@ -45,12 +45,12 @@
 @swiper-navigation-item-width-bars-large: 21px;
 @swiper-navigation-item-height-bars-large: 4px;
 
-@swiper-navigation-item-width-bars-small: 9px;
+@swiper-navigation-item-width-bars-small: 10px;
 @swiper-navigation-item-height-bars-small: 2px;
 
 @swiper-navigation-item-width-bars-medium-active: 24px; // 24px
 @swiper-navigation-item-width-bars-large-active: 36px; // 36px
-@swiper-navigation-item-width-bars-small-active: 15px;
+@swiper-navigation-item-width-bars-small-active: 16px;
 
 @swiper-arrow-size-base: 8px;
 @swiper-arrow-width-small: @swiper-arrow-size-base * 2;
@@ -74,6 +74,9 @@
 
 // 点
 @swiper-navigation-item-dot-size: @size-2;
+@swiper-navigation-item-dot-size--small: @size-1;
+@swiper-navigation-item-dot-size--medium: @size-2;
+@swiper-navigation-item-dot-size--large: @size-3;
 
 // 位置
 @swiper-z-index-default: 1;