@nutui/nutui-react-taro 3.0.21-cpp → 4.0.0-beta.1

package/dist/es/packages/dialog/style-jmapp/dialog.scss

@@ -58,7 +58,7 @@
     }
 
     &-bottom {
-      bottom: -64px;
+      bottom: scale-px(-64px);
       width: $dialog-bottom-close-icon-size;
       height: $dialog-bottom-close-icon-size;
       left: 50%;
@@ -128,7 +128,7 @@
     .nut-button {
       min-width: $dialog-footer-button-min-width;
       border-radius: $dialog-footer-button-border;
-      padding: var(--nutui-button-large-padding, 0);
+      padding: var(--nutui-button-large-padding, 0 scale-px(12px));
     }
 
     &-cancel.nut-dialog-footer-cancel {

package/dist/es/packages/dialog/style-jmapp/style.css

@@ -55,7 +55,7 @@
   left: var(--nutui-dialog-close-left, 16px);
 }
 .nut-dialog-close-bottom {
-  bottom: -64px;
+  bottom: scale-px(-64px);
   width: var(--nutui-dialog-bottom-close-icon-size, 24px);
   height: var(--nutui-dialog-bottom-close-icon-size, 24px);
   left: 50%;
@@ -120,7 +120,7 @@
 .nut-dialog-footer .nut-button {
   min-width: var(--nutui-dialog-footer-button-min-width, 117px);
   border-radius: var(--nutui-dialog-footer-button-border, 6px);
-  padding: var(--nutui-button-large-padding, 0);
+  padding: var(--nutui-button-large-padding, 0 scale-px(12px));
 }
 .nut-dialog-footer-cancel.nut-dialog-footer-cancel {
   margin-right: var(--nutui-dialog-footer-cancel-margin-right, 12px);

package/dist/es/packages/dialog/style-jrkf/dialog.scss

@@ -58,7 +58,7 @@
     }
 
     &-bottom {
-      bottom: -64px;
+      bottom: scale-px(-64px);
       width: $dialog-bottom-close-icon-size;
       height: $dialog-bottom-close-icon-size;
       left: 50%;
@@ -128,7 +128,7 @@
     .nut-button {
       min-width: $dialog-footer-button-min-width;
       border-radius: $dialog-footer-button-border;
-      padding: var(--nutui-button-large-padding, 0);
+      padding: var(--nutui-button-large-padding, 0 scale-px(12px));
     }
 
     &-cancel.nut-dialog-footer-cancel {

package/dist/es/packages/dialog/style-jrkf/style.css

@@ -55,7 +55,7 @@
   left: var(--nutui-dialog-close-left, 16px);
 }
 .nut-dialog-close-bottom {
-  bottom: -64px;
+  bottom: scale-px(-64px);
   width: var(--nutui-dialog-bottom-close-icon-size, 24px);
   height: var(--nutui-dialog-bottom-close-icon-size, 24px);
   left: 50%;
@@ -120,7 +120,7 @@
 .nut-dialog-footer .nut-button {
   min-width: var(--nutui-dialog-footer-button-min-width, 117px);
   border-radius: var(--nutui-dialog-footer-button-border, 6px);
-  padding: var(--nutui-button-large-padding, 0);
+  padding: var(--nutui-button-large-padding, 0 scale-px(12px));
 }
 .nut-dialog-footer-cancel.nut-dialog-footer-cancel {
   margin-right: var(--nutui-dialog-footer-cancel-margin-right, 12px);

package/dist/es/packages/divider/style/divider.scss

@@ -51,9 +51,9 @@
     /* #ifndef dynamic*/
     display: inline-flex;
     /* #endif */
-    width: 0px;
+    width: 0;
     height: $divider-vertical-height;
-    border-left: 1px solid $divider-border-color;
+    border-left: scale-px(1px) solid $divider-border-color;
     margin: $divider-vertical-margin;
     vertical-align: middle;
   }

package/dist/es/packages/divider/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 */
@@ -6,9 +16,9 @@
   display: flex;
   align-items: center;
   flex-direction: row;
-  font-size: var(--nutui-divider-text-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-divider-text-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-divider-text-color, var(--nutui-color-text, #505259));
-  margin: var(--nutui-divider-margin, 16px 0);
+  margin: var(--nutui-divider-margin, calc(16px * var(--nut-scale-f, 1)) 0);
   width: 100%;
   border: 0 solid var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
@@ -16,15 +26,15 @@
   display: flex;
   border-style: solid;
   border-color: var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  border-width: var(--nutui-divider-line-height, 1px) 0 0;
-  height: var(--nutui-divider-line-height, 1px);
+  border-width: var(--nutui-divider-line-height, calc(1px * var(--nut-scale-f, 1))) 0 0;
+  height: var(--nutui-divider-line-height, calc(1px * var(--nut-scale-f, 1)));
   flex: 1;
 }
 .nut-divider-center-before, .nut-divider-left-before, .nut-divider-right-before {
-  margin-right: var(--nutui-divider-spacing, 8px);
+  margin-right: var(--nutui-divider-spacing, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-divider-center-after, .nut-divider-left-after, .nut-divider-right-after {
-  margin-left: var(--nutui-divider-spacing, 8px);
+  margin-left: var(--nutui-divider-spacing, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-divider-left-before {
   width: var(--nutui-divider-side-width, 10%);
@@ -41,17 +51,17 @@
   /* #ifndef dynamic*/
   display: inline-flex;
   /* #endif */
-  width: 0px;
-  height: var(--nutui-divider-vertical-height, 12px);
-  border-left: 1px solid var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  margin: var(--nutui-divider-vertical-margin, 0 8px);
+  width: 0;
+  height: var(--nutui-divider-vertical-height, calc(12px * var(--nut-scale-f, 1)));
+  border-left: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  margin: var(--nutui-divider-vertical-margin, 0 calc(8px * var(--nut-scale-f, 1)));
   vertical-align: middle;
 }
 .nut-divider-rtl-before {
   margin-right: 0;
-  margin-left: var(--nutui-divider-spacing, 8px);
+  margin-left: var(--nutui-divider-spacing, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-divider-rtl-after {
   margin-left: 0;
-  margin-right: var(--nutui-divider-spacing, 8px);
+  margin-right: var(--nutui-divider-spacing, calc(8px * var(--nut-scale-f, 1)));
 }

package/dist/es/packages/divider/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 */
@@ -6,9 +16,9 @@
   display: flex;
   align-items: center;
   flex-direction: row;
-  font-size: var(--nutui-divider-text-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-divider-text-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-divider-text-color, var(--nutui-color-text, #505259));
-  margin: var(--nutui-divider-margin, 16px 0);
+  margin: var(--nutui-divider-margin, calc(16px * var(--nut-scale-f, 1)) 0);
   width: 100%;
   border: 0 solid var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
@@ -16,15 +26,15 @@
   display: flex;
   border-style: solid;
   border-color: var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  border-width: var(--nutui-divider-line-height, 1px) 0 0;
-  height: var(--nutui-divider-line-height, 1px);
+  border-width: var(--nutui-divider-line-height, calc(1px * var(--nut-scale-f, 1))) 0 0;
+  height: var(--nutui-divider-line-height, calc(1px * var(--nut-scale-f, 1)));
   flex: 1;
 }
 .nut-divider-center-before, .nut-divider-left-before, .nut-divider-right-before {
-  margin-right: var(--nutui-divider-spacing, 8px);
+  margin-right: var(--nutui-divider-spacing, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-divider-center-after, .nut-divider-left-after, .nut-divider-right-after {
-  margin-left: var(--nutui-divider-spacing, 8px);
+  margin-left: var(--nutui-divider-spacing, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-divider-left-before {
   width: var(--nutui-divider-side-width, 10%);
@@ -41,17 +51,17 @@
   /* #ifndef dynamic*/
   display: inline-flex;
   /* #endif */
-  width: 0px;
-  height: var(--nutui-divider-vertical-height, 12px);
-  border-left: 1px solid var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  margin: var(--nutui-divider-vertical-margin, 0 8px);
+  width: 0;
+  height: var(--nutui-divider-vertical-height, calc(12px * var(--nut-scale-f, 1)));
+  border-left: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  margin: var(--nutui-divider-vertical-margin, 0 calc(8px * var(--nut-scale-f, 1)));
   vertical-align: middle;
 }
 .nut-divider-rtl-before {
   margin-right: 0;
-  margin-left: var(--nutui-divider-spacing, 8px);
+  margin-left: var(--nutui-divider-spacing, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-divider-rtl-after {
   margin-left: 0;
-  margin-right: var(--nutui-divider-spacing, 8px);
+  margin-right: var(--nutui-divider-spacing, calc(8px * var(--nut-scale-f, 1)));
 }

package/dist/es/packages/divider/style-jmapp/divider.scss

@@ -51,9 +51,9 @@
     /* #ifndef dynamic*/
     display: inline-flex;
     /* #endif */
-    width: 0px;
+    width: 0;
     height: $divider-vertical-height;
-    border-left: 1px solid $divider-border-color;
+    border-left: scale-px(1px) solid $divider-border-color;
     margin: $divider-vertical-margin;
     vertical-align: middle;
   }

package/dist/es/packages/divider/style-jmapp/style.css

@@ -41,9 +41,9 @@
   /* #ifndef dynamic*/
   display: inline-flex;
   /* #endif */
-  width: 0px;
+  width: 0;
   height: var(--nutui-divider-vertical-height, 12px);
-  border-left: 1px solid var(--nutui-divider-border-color, var(--nutui-color-border));
+  border-left: scale-px(1px) solid var(--nutui-divider-border-color, var(--nutui-color-border));
   margin: var(--nutui-divider-vertical-margin, 0 8px);
   vertical-align: middle;
 }

package/dist/es/packages/divider/style-jrkf/divider.scss

@@ -51,9 +51,9 @@
     /* #ifndef dynamic*/
     display: inline-flex;
     /* #endif */
-    width: 0px;
+    width: 0;
     height: $divider-vertical-height;
-    border-left: 1px solid $divider-border-color;
+    border-left: scale-px(1px) solid $divider-border-color;
     margin: $divider-vertical-margin;
     vertical-align: middle;
   }

package/dist/es/packages/divider/style-jrkf/style.css

@@ -41,9 +41,9 @@
   /* #ifndef dynamic*/
   display: inline-flex;
   /* #endif */
-  width: 0px;
+  width: 0;
   height: var(--nutui-divider-vertical-height, 12px);
-  border-left: 1px solid var(--nutui-divider-border-color, var(--nutui-color-border));
+  border-left: scale-px(1px) solid var(--nutui-divider-border-color, var(--nutui-color-border));
   margin: var(--nutui-divider-vertical-margin, 0 8px);
   vertical-align: middle;
 }

package/dist/es/packages/drag/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 */

package/dist/es/packages/drag/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 */

package/dist/es/packages/elevator/style/elevator.scss

@@ -106,10 +106,10 @@
         /* #endif */
         align-items: center;
         justify-content: center;
-        height: 16px;
-        width: 16px;
+        height: scale-px(16px);
+        width: scale-px(16px);
         border-radius: 50%;
-        margin: 1px 0;
+        margin: scale-px(1px) 0;
         color: $elevator-bars-color;
         font-size: $elevator-bars-font-size;
         cursor: pointer;
@@ -117,10 +117,14 @@
           font-weight: $font-weight-bold;
           color: $elevator-bars-active-color;
           /* #ifndef weapp jd*/
-          background: linear-gradient(to right, #ff475d, #ff0f23);
+          background: linear-gradient(
+            to right,
+            $color-primary-stop-1,
+            $color-primary
+          );
           /* #endif */
           /* #ifdef weapp jd*/
-          background: #ff0f23;
+          background: $color-primary;
           /* #endif */
         }
       }

package/dist/es/packages/elevator/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 */
@@ -34,16 +44,16 @@
 .nut-elevator-list-item-code {
   display: flex;
   align-items: center;
-  height: var(--nutui-elevator-list-item-code-height, 34px);
-  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14px));
+  height: var(--nutui-elevator-list-item-code-height, calc(34px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-elevator-list-item-code-color, var(--nutui-color-text-help, #888b94));
   font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-elevator-list-item-name {
   display: flex;
   align-items: center;
-  height: var(--nutui-elevator-list-item-name-height, 34px);
-  font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-size-base, 14px));
+  height: var(--nutui-elevator-list-item-name-height, calc(34px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-elevator-list-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-elevator-list-item-name-highcolor {
@@ -58,35 +68,35 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--nutui-elevator-list-item-padding, 0 36px 0 20px);
-  height: var(--nutui-elevator-list-item-code-height, 34px);
+  padding: var(--nutui-elevator-list-item-padding, 0 calc(36px * var(--nut-scale-f, 1)) 0 calc(20px * var(--nut-scale-f, 1)));
+  height: var(--nutui-elevator-list-item-code-height, calc(34px * var(--nut-scale-f, 1)));
   box-sizing: border-box;
-  box-shadow: var(--nutui-elevator-list-fixed-box-shadow, 0 0 10px #eee);
+  box-shadow: var(--nutui-elevator-list-fixed-box-shadow, 0 0 calc(10px * var(--nut-scale-f, 1)) #eee);
   background-color: var(--nutui-elevator-list-fixed-bg-color, #ffffff);
 }
 .nut-elevator-list-fixed-title {
-  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-elevator-list-fixed-color, var(--nutui-color-primary, #ff0f23));
   font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-elevator-code-current {
   position: absolute;
-  right: var(--nutui-elevator-list-item-code-current-right, 60px);
+  right: var(--nutui-elevator-list-item-code-current-right, calc(60px * var(--nut-scale-f, 1)));
   top: var(--nutui-elevator-list-item-code-current-top, 50%);
   transform: var(--nutui-elevator-bars-transform, translateY(-50%));
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--nutui-elevator-list-item-code-current-width, 45px);
-  height: var(--nutui-elevator-list-item-code-current-height, 45px);
+  width: var(--nutui-elevator-list-item-code-current-width, calc(45px * var(--nut-scale-f, 1)));
+  height: var(--nutui-elevator-list-item-code-current-height, calc(45px * var(--nut-scale-f, 1)));
   border-radius: var(--nutui-elevator-list-item-code-current-border-radius, 50%);
   background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-text-disabled, #c2c4cc));
-  box-shadow: 0 3px 3px 1px rgb(240, 240, 240);
+  box-shadow: 0 calc(3px * var(--nut-scale-f, 1)) calc(3px * var(--nut-scale-f, 1)) calc(1px * var(--nut-scale-f, 1)) rgb(240, 240, 240);
   color: var(--nutui-elevator-list-item-code-current-color, #ffffff);
 }
 .nut-elevator-bars {
   position: absolute;
-  right: var(--nutui-elevator-bars-right, 16px);
+  right: var(--nutui-elevator-bars-right, calc(16px * var(--nut-scale-f, 1)));
   top: var(--nutui-elevator-bars-top, 50%);
   transform: var(--nutui-elevator-bars-transform, translateY(-50%));
   z-index: var(--nutui-elevator-bars-z-index, 1);
@@ -104,36 +114,36 @@
   /* #endif */
   align-items: center;
   justify-content: center;
-  height: 16px;
-  width: 16px;
+  height: calc(16px * var(--nut-scale-f, 1));
+  width: calc(16px * var(--nut-scale-f, 1));
   border-radius: 50%;
-  margin: 1px 0;
+  margin: calc(1px * var(--nut-scale-f, 1)) 0;
   color: var(--nutui-elevator-bars-color, var(--nutui-color-text-help, #888b94));
-  font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-size-xxs, 10px));
+  font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   cursor: pointer;
 }
 .nut-elevator-bars-inner-item-active {
   font-weight: var(--nutui-font-weight-bold, 600);
   color: var(--nutui-elevator-bars-active-color, #ffffff);
   /* #ifndef weapp jd*/
-  background: linear-gradient(to right, #ff475d, #ff0f23);
+  background: linear-gradient(to right, var(--nutui-color-primary-stop-1, #ff475d), var(--nutui-color-primary, #ff0f23));
   /* #endif */
   /* #ifdef weapp jd*/
-  background: #ff0f23;
+  background: var(--nutui-color-primary, #ff0f23);
   /* #endif */
 }
 .nut-elevator-horizontal .nut-elevator-list-item-code {
-  width: var(--nutui-elevator-list-item-code-width, 34px);
+  width: var(--nutui-elevator-list-item-code-width, calc(34px * var(--nut-scale-f, 1)));
   justify-content: center;
 }
 .nut-elevator-vertical .nut-elevator-list-item {
   flex-direction: column;
 }
 .nut-elevator-vertical .nut-elevator-list-item-code {
-  border-bottom: var(--nutui-elevator-list-item-code-border-bottom, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-bottom: var(--nutui-elevator-list-item-code-border-bottom, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-elevator-vertical .nut-elevator-list-item-name, .nut-elevator-vertical .nut-elevator-list-item-code {
-  padding: var(--nutui-elevator-list-item-padding, 0 36px 0 20px);
+  padding: var(--nutui-elevator-list-item-padding, 0 calc(36px * var(--nut-scale-f, 1)) 0 calc(20px * var(--nut-scale-f, 1)));
 }
 
 [dir=rtl] .nut-elevator-list-fixed,
@@ -144,10 +154,10 @@
 [dir=rtl] .nut-elevator-code-current,
 .nut-rtl .nut-elevator-code-current {
   right: auto;
-  left: var(--nutui-elevator-list-item-code-current-right, 60px);
+  left: var(--nutui-elevator-list-item-code-current-right, calc(60px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-elevator-bars,
 .nut-rtl .nut-elevator-bars {
   right: auto;
-  left: var(--nutui-elevator-bars-right, 16px);
+  left: var(--nutui-elevator-bars-right, calc(16px * var(--nut-scale-f, 1)));
 }

package/dist/es/packages/elevator/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 */
@@ -34,16 +44,16 @@
 .nut-elevator-list-item-code {
   display: flex;
   align-items: center;
-  height: var(--nutui-elevator-list-item-code-height, 34px);
-  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14px));
+  height: var(--nutui-elevator-list-item-code-height, calc(34px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-elevator-list-item-code-color, var(--nutui-color-text-help, #888b94));
   font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-elevator-list-item-name {
   display: flex;
   align-items: center;
-  height: var(--nutui-elevator-list-item-name-height, 34px);
-  font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-size-base, 14px));
+  height: var(--nutui-elevator-list-item-name-height, calc(34px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-elevator-list-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-elevator-list-item-name-highcolor {
@@ -58,35 +68,35 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--nutui-elevator-list-item-padding, 0 36px 0 20px);
-  height: var(--nutui-elevator-list-item-code-height, 34px);
+  padding: var(--nutui-elevator-list-item-padding, 0 calc(36px * var(--nut-scale-f, 1)) 0 calc(20px * var(--nut-scale-f, 1)));
+  height: var(--nutui-elevator-list-item-code-height, calc(34px * var(--nut-scale-f, 1)));
   box-sizing: border-box;
-  box-shadow: var(--nutui-elevator-list-fixed-box-shadow, 0 0 10px #eee);
+  box-shadow: var(--nutui-elevator-list-fixed-box-shadow, 0 0 calc(10px * var(--nut-scale-f, 1)) #eee);
   background-color: var(--nutui-elevator-list-fixed-bg-color, #ffffff);
 }
 .nut-elevator-list-fixed-title {
-  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-elevator-list-fixed-color, var(--nutui-color-primary, #ff0f23));
   font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-elevator-code-current {
   position: absolute;
-  right: var(--nutui-elevator-list-item-code-current-right, 60px);
+  right: var(--nutui-elevator-list-item-code-current-right, calc(60px * var(--nut-scale-f, 1)));
   top: var(--nutui-elevator-list-item-code-current-top, 50%);
   transform: var(--nutui-elevator-bars-transform, translateY(-50%));
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--nutui-elevator-list-item-code-current-width, 45px);
-  height: var(--nutui-elevator-list-item-code-current-height, 45px);
+  width: var(--nutui-elevator-list-item-code-current-width, calc(45px * var(--nut-scale-f, 1)));
+  height: var(--nutui-elevator-list-item-code-current-height, calc(45px * var(--nut-scale-f, 1)));
   border-radius: var(--nutui-elevator-list-item-code-current-border-radius, 50%);
   background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-text-disabled, #c2c4cc));
-  box-shadow: 0 3px 3px 1px rgb(240, 240, 240);
+  box-shadow: 0 calc(3px * var(--nut-scale-f, 1)) calc(3px * var(--nut-scale-f, 1)) calc(1px * var(--nut-scale-f, 1)) rgb(240, 240, 240);
   color: var(--nutui-elevator-list-item-code-current-color, #ffffff);
 }
 .nut-elevator-bars {
   position: absolute;
-  right: var(--nutui-elevator-bars-right, 16px);
+  right: var(--nutui-elevator-bars-right, calc(16px * var(--nut-scale-f, 1)));
   top: var(--nutui-elevator-bars-top, 50%);
   transform: var(--nutui-elevator-bars-transform, translateY(-50%));
   z-index: var(--nutui-elevator-bars-z-index, 1);
@@ -104,36 +114,36 @@
   /* #endif */
   align-items: center;
   justify-content: center;
-  height: 16px;
-  width: 16px;
+  height: calc(16px * var(--nut-scale-f, 1));
+  width: calc(16px * var(--nut-scale-f, 1));
   border-radius: 50%;
-  margin: 1px 0;
+  margin: calc(1px * var(--nut-scale-f, 1)) 0;
   color: var(--nutui-elevator-bars-color, var(--nutui-color-text-help, #888b94));
-  font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-size-xxs, 10px));
+  font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   cursor: pointer;
 }
 .nut-elevator-bars-inner-item-active {
   font-weight: var(--nutui-font-weight-bold, 600);
   color: var(--nutui-elevator-bars-active-color, #ffffff);
   /* #ifndef weapp jd*/
-  background: linear-gradient(to right, #ff475d, #ff0f23);
+  background: linear-gradient(to right, var(--nutui-color-primary-stop-1, #ff475d), var(--nutui-color-primary, #ff0f23));
   /* #endif */
   /* #ifdef weapp jd*/
-  background: #ff0f23;
+  background: var(--nutui-color-primary, #ff0f23);
   /* #endif */
 }
 .nut-elevator-horizontal .nut-elevator-list-item-code {
-  width: var(--nutui-elevator-list-item-code-width, 34px);
+  width: var(--nutui-elevator-list-item-code-width, calc(34px * var(--nut-scale-f, 1)));
   justify-content: center;
 }
 .nut-elevator-vertical .nut-elevator-list-item {
   flex-direction: column;
 }
 .nut-elevator-vertical .nut-elevator-list-item-code {
-  border-bottom: var(--nutui-elevator-list-item-code-border-bottom, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-bottom: var(--nutui-elevator-list-item-code-border-bottom, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-elevator-vertical .nut-elevator-list-item-name, .nut-elevator-vertical .nut-elevator-list-item-code {
-  padding: var(--nutui-elevator-list-item-padding, 0 36px 0 20px);
+  padding: var(--nutui-elevator-list-item-padding, 0 calc(36px * var(--nut-scale-f, 1)) 0 calc(20px * var(--nut-scale-f, 1)));
 }
 
 [dir=rtl] .nut-elevator-list-fixed,
@@ -144,10 +154,10 @@
 [dir=rtl] .nut-elevator-code-current,
 .nut-rtl .nut-elevator-code-current {
   right: auto;
-  left: var(--nutui-elevator-list-item-code-current-right, 60px);
+  left: var(--nutui-elevator-list-item-code-current-right, calc(60px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-elevator-bars,
 .nut-rtl .nut-elevator-bars {
   right: auto;
-  left: var(--nutui-elevator-bars-right, 16px);
+  left: var(--nutui-elevator-bars-right, calc(16px * var(--nut-scale-f, 1)));
 }

package/dist/es/packages/elevator/style-jmapp/elevator.scss

@@ -106,10 +106,10 @@
         /* #endif */
         align-items: center;
         justify-content: center;
-        height: 16px;
-        width: 16px;
+        height: scale-px(16px);
+        width: scale-px(16px);
         border-radius: 50%;
-        margin: 1px 0;
+        margin: scale-px(1px) 0;
         color: $elevator-bars-color;
         font-size: $elevator-bars-font-size;
         cursor: pointer;
@@ -117,10 +117,14 @@
           font-weight: $font-weight-bold;
           color: $elevator-bars-active-color;
           /* #ifndef weapp jd*/
-          background: linear-gradient(to right, #ff475d, #ff0f23);
+          background: linear-gradient(
+            to right,
+            $color-primary-stop-1,
+            $color-primary
+          );
           /* #endif */
           /* #ifdef weapp jd*/
-          background: #ff0f23;
+          background: $color-primary;
           /* #endif */
         }
       }