@nutui/nutui-react-taro 3.0.20 → 3.1.0-beta.1

package/dist/cjs/packages/imagepreview/style-jrkf/style.css

@@ -14,7 +14,7 @@
 .nut-imagepreview-index {
   position: fixed;
   z-index: 2002;
-  top: 50px;
+  top: scale-px(50px);
   text-align: center;
   left: 0;
   right: 0;
@@ -23,7 +23,7 @@
 }
 .nut-imagepreview-index .arrow {
   position: absolute;
-  left: 15px;
+  left: scale-px(15px);
   transform: rotateZ(180deg);
 }
 .nut-imagepreview-close {
@@ -39,15 +39,15 @@
   color: #ffffff;
 }
 .nut-imagepreview-close.top-right {
-  top: 50px;
-  right: 20px;
+  top: scale-px(50px);
+  right: scale-px(20px);
 }
 .nut-imagepreview-close.top-left {
-  top: 50px;
-  left: 20px;
+  top: scale-px(50px);
+  left: scale-px(20px);
 }
 .nut-imagepreview-close.bottom {
-  bottom: 50px;
+  bottom: scale-px(50px);
   left: 0;
   right: 0;
   text-align: center;
@@ -87,16 +87,16 @@
 [dir=rtl] .nut-imagepreview-index .arrow,
 .nut-rtl .nut-imagepreview-index .arrow {
   left: auto;
-  right: 15px;
+  right: scale-px(15px);
   transform: rotateZ(-180deg);
 }
 [dir=rtl] .nut-imagepreview-close.top-right,
 .nut-rtl .nut-imagepreview-close.top-right {
   right: auto;
-  left: 20px;
+  left: scale-px(20px);
 }
 [dir=rtl] .nut-imagepreview-close.top-left,
 .nut-rtl .nut-imagepreview-close.top-left {
   left: auto;
-  right: 20px;
+  right: scale-px(20px);
 }

package/dist/cjs/packages/indicator/style/indicator.scss

@@ -6,7 +6,7 @@
   align-items: center;
 
   &-fixed-width {
-    width: 21px;
+    width: scale-px(21px);
   }
 
   &-dot,
@@ -21,7 +21,7 @@
     opacity: 0.4;
 
     &-0 {
-      margin-left: 0px;
+      margin-left: 0;
     }
 
     &-active {
@@ -36,11 +36,11 @@
   &-fixed-width {
     // 两个页码的时候
     .nut-indicator-dot {
-      width: 12px;
+      width: scale-px(12px);
       border-radius: $indicator-border-radius;
 
       &-active {
-        width: 6px;
+        width: scale-px(6px);
       }
     }
   }
@@ -49,17 +49,17 @@
     // 竖向固定高度
     &.nut-indicator-fixed-width {
       justify-content: flex-start;
-      height: 21px;
+      height: scale-px(21px);
       width: auto;
 
       // 竖向两个页码
       .nut-indicator-dot {
-        width: 3px;
-        height: 12px;
+        width: scale-px(3px);
+        height: scale-px(12px);
         border-radius: $indicator-border-radius;
 
         &-active {
-          height: 6px;
+          height: scale-px(6px);
         }
       }
 
@@ -67,7 +67,7 @@
         &.nut-indicator-white {
           .nut-indicator-dot {
             &-active {
-              height: 6px;
+              height: scale-px(6px);
             }
           }
         }
@@ -136,7 +136,7 @@
 
 .nut-indicator-track.nut-indicator-white {
   &:after {
-    border: 1px solid rgba(0, 0, 0, 0.06);
+    border: scale-px(1px) solid rgba(0, 0, 0, 0.06);
     background: rgba(255, 255, 255, 0.4);
   }
 }
@@ -149,11 +149,11 @@
 
   .nut-indicator {
     &-dot {
-      margin: 0px;
+      margin: 0;
       margin-top: $indicator-dot-margin;
 
       &-0 {
-        margin-top: 0px;
+        margin-top: 0;
       }
 
       &-active {
@@ -178,7 +178,7 @@
   &-dot {
     &-0 {
       margin-right: $indicator-dot-margin;
-      margin-left: 0px;
+      margin-left: 0;
     }
   }
 }

package/dist/cjs/packages/indicator/style/style.css

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
@@ -10,54 +20,54 @@
   align-items: center;
 }
 .nut-indicator-fixed-width {
-  width: 21px;
+  width: calc(21px * var(--nut-scale-f, 1));
 }
 .nut-indicator-dot, .nut-indicator-line {
   display: inline-block;
   vertical-align: middle;
-  width: var(--nutui-indicator-dot-size, 3px);
-  height: var(--nutui-indicator-dot-size, 3px);
+  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
   border-radius: 50%;
   background-color: var(--nutui-color-border-disabled, #c2c4cc);
-  margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
+  margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
   opacity: 0.4;
 }
 .nut-indicator-dot-0, .nut-indicator-line-0 {
-  margin-left: 0px;
+  margin-left: 0;
 }
 .nut-indicator-dot-active, .nut-indicator-line-active {
-  width: var(--nutui-indicator-dot-active-size, 6px);
-  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  width: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
   background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
   opacity: 1;
 }
 .nut-indicator-fixed-width .nut-indicator-dot {
-  width: 12px;
-  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  width: calc(12px * var(--nut-scale-f, 1));
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
 }
 .nut-indicator-fixed-width .nut-indicator-dot-active {
-  width: 6px;
+  width: calc(6px * var(--nut-scale-f, 1));
 }
 .nut-indicator-vertical.nut-indicator-fixed-width {
   justify-content: flex-start;
-  height: 21px;
+  height: calc(21px * var(--nut-scale-f, 1));
   width: auto;
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot {
-  width: 3px;
-  height: 12px;
-  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  width: calc(3px * var(--nut-scale-f, 1));
+  height: calc(12px * var(--nut-scale-f, 1));
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active {
-  height: 6px;
+  height: calc(6px * var(--nut-scale-f, 1));
 }
 .nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active {
-  height: 6px;
+  height: calc(6px * var(--nut-scale-f, 1));
 }
 .nut-indicator-line {
-  width: var(--nutui-indicator-dot-active-size, 6px);
+  width: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
   margin: 0;
-  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
   background-color: transparent;
 }
 .nut-indicator-line-active {
@@ -75,7 +85,7 @@
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
   background-color: var(--nutui-color-border-disabled, #c2c4cc);
   opacity: 0.4;
 }
@@ -100,7 +110,7 @@
 }
 
 .nut-indicator-track.nut-indicator-white:after {
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  border: calc(1px * var(--nut-scale-f, 1)) solid rgba(0, 0, 0, 0.06);
   background: rgba(255, 255, 255, 0.4);
 }
 
@@ -111,23 +121,23 @@
   justify-content: center;
 }
 .nut-indicator-vertical .nut-indicator-dot {
-  margin: 0px;
-  margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
+  margin: 0;
+  margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
 }
 .nut-indicator-vertical .nut-indicator-dot-0 {
-  margin-top: 0px;
+  margin-top: 0;
 }
 .nut-indicator-vertical .nut-indicator-dot-active {
-  width: var(--nutui-indicator-dot-size, 3px);
-  height: var(--nutui-indicator-dot-active-size, 6px);
+  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-indicator-vertical.nut-indicator-track .nut-indicator-line {
-  width: var(--nutui-indicator-dot-size, 3px);
-  height: var(--nutui-indicator-dot-active-size, 6px);
+  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
 }
 
 [dir=rtl] .nut-indicator-dot-0,
 .nut-rtl .nut-indicator-dot-0 {
-  margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
-  margin-left: 0px;
+  margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
+  margin-left: 0;
 }

package/dist/cjs/packages/indicator/style/style.harmony.css

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
@@ -10,54 +20,54 @@
   align-items: center;
 }
 .nut-indicator-fixed-width {
-  width: 21px;
+  width: calc(21px * var(--nut-scale-f, 1));
 }
 .nut-indicator-dot, .nut-indicator-line {
   display: inline-block;
   vertical-align: middle;
-  width: var(--nutui-indicator-dot-size, 3px);
-  height: var(--nutui-indicator-dot-size, 3px);
+  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
   border-radius: 50%;
   background-color: var(--nutui-color-border-disabled, #c2c4cc);
-  margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
+  margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
   opacity: 0.4;
 }
 .nut-indicator-dot-0, .nut-indicator-line-0 {
-  margin-left: 0px;
+  margin-left: 0;
 }
 .nut-indicator-dot-active, .nut-indicator-line-active {
-  width: var(--nutui-indicator-dot-active-size, 6px);
-  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  width: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
   background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
   opacity: 1;
 }
 .nut-indicator-fixed-width .nut-indicator-dot {
-  width: 12px;
-  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  width: calc(12px * var(--nut-scale-f, 1));
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
 }
 .nut-indicator-fixed-width .nut-indicator-dot-active {
-  width: 6px;
+  width: calc(6px * var(--nut-scale-f, 1));
 }
 .nut-indicator-vertical.nut-indicator-fixed-width {
   justify-content: flex-start;
-  height: 21px;
+  height: calc(21px * var(--nut-scale-f, 1));
   width: auto;
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot {
-  width: 3px;
-  height: 12px;
-  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  width: calc(3px * var(--nut-scale-f, 1));
+  height: calc(12px * var(--nut-scale-f, 1));
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active {
-  height: 6px;
+  height: calc(6px * var(--nut-scale-f, 1));
 }
 .nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active {
-  height: 6px;
+  height: calc(6px * var(--nut-scale-f, 1));
 }
 .nut-indicator-line {
-  width: var(--nutui-indicator-dot-active-size, 6px);
+  width: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
   margin: 0;
-  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
   background-color: transparent;
 }
 .nut-indicator-line-active {
@@ -75,7 +85,7 @@
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
   background-color: var(--nutui-color-border-disabled, #c2c4cc);
   opacity: 0.4;
 }
@@ -100,7 +110,7 @@
 }
 
 .nut-indicator-track.nut-indicator-white:after {
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  border: calc(1px * var(--nut-scale-f, 1)) solid rgba(0, 0, 0, 0.06);
   background: rgba(255, 255, 255, 0.4);
 }
 
@@ -111,23 +121,23 @@
   justify-content: center;
 }
 .nut-indicator-vertical .nut-indicator-dot {
-  margin: 0px;
-  margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
+  margin: 0;
+  margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
 }
 .nut-indicator-vertical .nut-indicator-dot-0 {
-  margin-top: 0px;
+  margin-top: 0;
 }
 .nut-indicator-vertical .nut-indicator-dot-active {
-  width: var(--nutui-indicator-dot-size, 3px);
-  height: var(--nutui-indicator-dot-active-size, 6px);
+  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-indicator-vertical.nut-indicator-track .nut-indicator-line {
-  width: var(--nutui-indicator-dot-size, 3px);
-  height: var(--nutui-indicator-dot-active-size, 6px);
+  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
 }
 
 [dir=rtl] .nut-indicator-dot-0,
 .nut-rtl .nut-indicator-dot-0 {
-  margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
-  margin-left: 0px;
+  margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
+  margin-left: 0;
 }

package/dist/cjs/packages/indicator/style-jmapp/indicator.scss

@@ -6,7 +6,7 @@
   align-items: center;
 
   &-fixed-width {
-    width: 21px;
+    width: scale-px(21px);
   }
 
   &-dot,
@@ -21,7 +21,7 @@
     opacity: 0.4;
 
     &-0 {
-      margin-left: 0px;
+      margin-left: 0;
     }
 
     &-active {
@@ -36,11 +36,11 @@
   &-fixed-width {
     // 两个页码的时候
     .nut-indicator-dot {
-      width: 12px;
+      width: scale-px(12px);
       border-radius: $indicator-border-radius;
 
       &-active {
-        width: 6px;
+        width: scale-px(6px);
       }
     }
   }
@@ -49,17 +49,17 @@
     // 竖向固定高度
     &.nut-indicator-fixed-width {
       justify-content: flex-start;
-      height: 21px;
+      height: scale-px(21px);
       width: auto;
 
       // 竖向两个页码
       .nut-indicator-dot {
-        width: 3px;
-        height: 12px;
+        width: scale-px(3px);
+        height: scale-px(12px);
         border-radius: $indicator-border-radius;
 
         &-active {
-          height: 6px;
+          height: scale-px(6px);
         }
       }
 
@@ -67,7 +67,7 @@
         &.nut-indicator-white {
           .nut-indicator-dot {
             &-active {
-              height: 6px;
+              height: scale-px(6px);
             }
           }
         }
@@ -136,7 +136,7 @@
 
 .nut-indicator-track.nut-indicator-white {
   &:after {
-    border: 1px solid rgba(0, 0, 0, 0.06);
+    border: scale-px(1px) solid rgba(0, 0, 0, 0.06);
     background: rgba(255, 255, 255, 0.4);
   }
 }
@@ -149,11 +149,11 @@
 
   .nut-indicator {
     &-dot {
-      margin: 0px;
+      margin: 0;
       margin-top: $indicator-dot-margin;
 
       &-0 {
-        margin-top: 0px;
+        margin-top: 0;
       }
 
       &-active {
@@ -178,7 +178,7 @@
   &-dot {
     &-0 {
       margin-right: $indicator-dot-margin;
-      margin-left: 0px;
+      margin-left: 0;
     }
   }
 }

package/dist/cjs/packages/indicator/style-jmapp/style.css

@@ -10,7 +10,7 @@
   align-items: center;
 }
 .nut-indicator-fixed-width {
-  width: 21px;
+  width: scale-px(21px);
 }
 .nut-indicator-dot, .nut-indicator-line {
   display: inline-block;
@@ -23,7 +23,7 @@
   opacity: 0.4;
 }
 .nut-indicator-dot-0, .nut-indicator-line-0 {
-  margin-left: 0px;
+  margin-left: 0;
 }
 .nut-indicator-dot-active, .nut-indicator-line-active {
   width: var(--nutui-indicator-dot-active-size, 20px);
@@ -32,27 +32,27 @@
   opacity: 1;
 }
 .nut-indicator-fixed-width .nut-indicator-dot {
-  width: 12px;
+  width: scale-px(12px);
   border-radius: var(--nutui-indicator-border-radius, 2px);
 }
 .nut-indicator-fixed-width .nut-indicator-dot-active {
-  width: 6px;
+  width: scale-px(6px);
 }
 .nut-indicator-vertical.nut-indicator-fixed-width {
   justify-content: flex-start;
-  height: 21px;
+  height: scale-px(21px);
   width: auto;
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot {
-  width: 3px;
-  height: 12px;
+  width: scale-px(3px);
+  height: scale-px(12px);
   border-radius: var(--nutui-indicator-border-radius, 2px);
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active {
-  height: 6px;
+  height: scale-px(6px);
 }
 .nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active {
-  height: 6px;
+  height: scale-px(6px);
 }
 .nut-indicator-line {
   width: var(--nutui-indicator-dot-active-size, 20px);
@@ -100,7 +100,7 @@
 }
 
 .nut-indicator-track.nut-indicator-white:after {
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  border: scale-px(1px) solid rgba(0, 0, 0, 0.06);
   background: rgba(255, 255, 255, 0.4);
 }
 
@@ -111,11 +111,11 @@
   justify-content: center;
 }
 .nut-indicator-vertical .nut-indicator-dot {
-  margin: 0px;
+  margin: 0;
   margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xs));
 }
 .nut-indicator-vertical .nut-indicator-dot-0 {
-  margin-top: 0px;
+  margin-top: 0;
 }
 .nut-indicator-vertical .nut-indicator-dot-active {
   width: var(--nutui-indicator-dot-size, 6px);
@@ -129,5 +129,5 @@
 [dir=rtl] .nut-indicator-dot-0,
 .nut-rtl .nut-indicator-dot-0 {
   margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xs));
-  margin-left: 0px;
+  margin-left: 0;
 }

package/dist/cjs/packages/indicator/style-jrkf/indicator.scss

@@ -6,7 +6,7 @@
   align-items: center;
 
   &-fixed-width {
-    width: 21px;
+    width: scale-px(21px);
   }
 
   &-dot,
@@ -21,7 +21,7 @@
     opacity: 0.4;
 
     &-0 {
-      margin-left: 0px;
+      margin-left: 0;
     }
 
     &-active {
@@ -36,11 +36,11 @@
   &-fixed-width {
     // 两个页码的时候
     .nut-indicator-dot {
-      width: 12px;
+      width: scale-px(12px);
       border-radius: $indicator-border-radius;
 
       &-active {
-        width: 6px;
+        width: scale-px(6px);
       }
     }
   }
@@ -49,17 +49,17 @@
     // 竖向固定高度
     &.nut-indicator-fixed-width {
       justify-content: flex-start;
-      height: 21px;
+      height: scale-px(21px);
       width: auto;
 
       // 竖向两个页码
       .nut-indicator-dot {
-        width: 3px;
-        height: 12px;
+        width: scale-px(3px);
+        height: scale-px(12px);
         border-radius: $indicator-border-radius;
 
         &-active {
-          height: 6px;
+          height: scale-px(6px);
         }
       }
 
@@ -67,7 +67,7 @@
         &.nut-indicator-white {
           .nut-indicator-dot {
             &-active {
-              height: 6px;
+              height: scale-px(6px);
             }
           }
         }
@@ -136,7 +136,7 @@
 
 .nut-indicator-track.nut-indicator-white {
   &:after {
-    border: 1px solid rgba(0, 0, 0, 0.06);
+    border: scale-px(1px) solid rgba(0, 0, 0, 0.06);
     background: rgba(255, 255, 255, 0.4);
   }
 }
@@ -149,11 +149,11 @@
 
   .nut-indicator {
     &-dot {
-      margin: 0px;
+      margin: 0;
       margin-top: $indicator-dot-margin;
 
       &-0 {
-        margin-top: 0px;
+        margin-top: 0;
       }
 
       &-active {
@@ -178,7 +178,7 @@
   &-dot {
     &-0 {
       margin-right: $indicator-dot-margin;
-      margin-left: 0px;
+      margin-left: 0;
     }
   }
 }