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

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

@@ -8,6 +8,14 @@
   user-select: none;
   background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-surface-1));
 }
+.nut-numberkeyboard-close-icon {
+  width: var(--nutui-icon-size-18, 18px);
+  height: var(--nutui-icon-size-18, 18px);
+}
+.nut-numberkeyboard-delete-icon {
+  width: scale-px(28px);
+  height: scale-px(28px);
+}
 .nut-numberkeyboard-header {
   position: relative;
   display: flex;
@@ -40,7 +48,7 @@
 }
 .nut-numberkeyboard-body {
   display: flex;
-  padding: 6px 0 0 6px;
+  padding: scale-px(6px) 0 0 scale-px(6px);
 }
 .nut-numberkeyboard-body-keys {
   display: flex;
@@ -57,7 +65,7 @@
   flex-basis: 33%;
   /* #endif */
   box-sizing: border-box;
-  padding: 0 6px 6px 0;
+  padding: 0 scale-px(6px) scale-px(6px) 0;
   background-color: var(--nutui-numberkeyboard-wrapper-background-color, var(--nutui-color-surface-1));
 }
 .nut-numberkeyboard-body-wrapper .key {
@@ -89,8 +97,8 @@
 .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key {
   position: absolute;
   top: 0;
-  right: 6px;
-  bottom: 6px;
+  right: scale-px(6px);
+  bottom: scale-px(6px);
   left: 0;
   height: auto;
 }
@@ -110,11 +118,11 @@
 }
 [dir=rtl] .nut-popup .nut-numberkeyboard-body,
 .nut-rtl .nut-popup .nut-numberkeyboard-body {
-  padding: 6px 6px 0 0;
+  padding: scale-px(6px) scale-px(6px) 0 0;
 }
 [dir=rtl] .nut-popup .nut-numberkeyboard-body-wrapper,
 .nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper {
-  padding: 0 0 6px 6px;
+  padding: 0 0 scale-px(6px) scale-px(6px);
 }
 [dir=rtl] .nut-popup .nut-numberkeyboard-body-wrapper .delete,
 .nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper .delete {
@@ -122,7 +130,7 @@
 }
 [dir=rtl] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key,
 .nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key {
-  left: 6px;
+  left: scale-px(6px);
   right: 0;
 }
 [dir=rtl] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete,

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

@@ -1,4 +1,14 @@
 .nut-numberkeyboard {
+  &-close-icon {
+    width: $icon-size-18;
+    height: $icon-size-18;
+  }
+
+  &-delete-icon {
+    width: scale-px(28px);
+    height: scale-px(28px);
+  }
+
   width: 100%;
   padding: $numberkeyboard-padding;
   user-select: none;
@@ -39,7 +49,7 @@
 
   &-body {
     display: flex;
-    padding: 6px 0 0 6px;
+    padding: scale-px(6px) 0 0 scale-px(6px);
 
     &-keys {
       display: flex;
@@ -57,7 +67,7 @@
       flex-basis: 33%;
       /* #endif */
       box-sizing: border-box;
-      padding: 0 6px 6px 0;
+      padding: 0 scale-px(6px) scale-px(6px) 0;
       background-color: $numberkeyboard-wrapper-background-color;
 
       .key {
@@ -91,8 +101,8 @@
       .key {
         position: absolute;
         top: 0;
-        right: 6px;
-        bottom: 6px;
+        right: scale-px(6px);
+        bottom: scale-px(6px);
         left: 0;
         height: auto;
       }
@@ -121,9 +131,9 @@
     }
 
     &-body {
-      padding: 6px 6px 0 0;
+      padding: scale-px(6px) scale-px(6px) 0 0;
       &-wrapper {
-        padding: 0 0 6px 6px;
+        padding: 0 0 scale-px(6px) scale-px(6px);
         .delete {
           transform: rotate(-180deg);
         }
@@ -133,7 +143,7 @@
     &-sidebar {
       .nut-numberkeyboard-body-wrapper {
         .key {
-          left: 6px;
+          left: scale-px(6px);
           right: 0;
           &.delete {
             transform: rotate(-180deg);

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

@@ -8,6 +8,14 @@
   user-select: none;
   background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-surface-1));
 }
+.nut-numberkeyboard-close-icon {
+  width: var(--nutui-icon-size-18, 18px);
+  height: var(--nutui-icon-size-18, 18px);
+}
+.nut-numberkeyboard-delete-icon {
+  width: scale-px(28px);
+  height: scale-px(28px);
+}
 .nut-numberkeyboard-header {
   position: relative;
   display: flex;
@@ -40,7 +48,7 @@
 }
 .nut-numberkeyboard-body {
   display: flex;
-  padding: 6px 0 0 6px;
+  padding: scale-px(6px) 0 0 scale-px(6px);
 }
 .nut-numberkeyboard-body-keys {
   display: flex;
@@ -57,7 +65,7 @@
   flex-basis: 33%;
   /* #endif */
   box-sizing: border-box;
-  padding: 0 6px 6px 0;
+  padding: 0 scale-px(6px) scale-px(6px) 0;
   background-color: var(--nutui-numberkeyboard-wrapper-background-color, var(--nutui-color-surface-1));
 }
 .nut-numberkeyboard-body-wrapper .key {
@@ -89,8 +97,8 @@
 .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key {
   position: absolute;
   top: 0;
-  right: 6px;
-  bottom: 6px;
+  right: scale-px(6px);
+  bottom: scale-px(6px);
   left: 0;
   height: auto;
 }
@@ -110,11 +118,11 @@
 }
 [dir=rtl] .nut-popup .nut-numberkeyboard-body,
 .nut-rtl .nut-popup .nut-numberkeyboard-body {
-  padding: 6px 6px 0 0;
+  padding: scale-px(6px) scale-px(6px) 0 0;
 }
 [dir=rtl] .nut-popup .nut-numberkeyboard-body-wrapper,
 .nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper {
-  padding: 0 0 6px 6px;
+  padding: 0 0 scale-px(6px) scale-px(6px);
 }
 [dir=rtl] .nut-popup .nut-numberkeyboard-body-wrapper .delete,
 .nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper .delete {
@@ -122,7 +130,7 @@
 }
 [dir=rtl] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key,
 .nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key {
-  left: 6px;
+  left: scale-px(6px);
   right: 0;
 }
 [dir=rtl] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete,

package/dist/es/packages/overlay/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/overlay/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/pagination/pagination.js

@@ -74,7 +74,7 @@ export var Pagination = function(props) {
         onClick: function() {
             return prevPage();
         }
-    }, addColorForHarmony(prev || locale.pagination.prev, current === 1 ? '#c2c4cc' : '#ff0f23')), mode === 'multi' && /*#__PURE__*/ React.createElement(View, {
+    }, addColorForHarmony(prev || locale.pagination.prev, current === 1 ? 'var(--nutui-color-text-disabled, #c2c4cc)' : 'var(--nutui-color-primary, #ff0f23)')), mode === 'multi' && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-contain")
     }, pages.map(function(item, index) {
         var _obj;
@@ -94,7 +94,7 @@ export var Pagination = function(props) {
         onClick: function() {
             return nextPage();
         }
-    }, addColorForHarmony(next || locale.pagination.next, current >= pageCount ? '#c2c4cc' : '#ff0f23'))), mode === 'lite' && /*#__PURE__*/ React.createElement(View, {
+    }, addColorForHarmony(next || locale.pagination.next, current >= pageCount ? 'var(--nutui-color-text-disabled, #c2c4cc)' : 'var(--nutui-color-primary, #ff0f23)'))), mode === 'lite' && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-lite")
     }, /*#__PURE__*/ React.createElement(Text, {
         className: "".concat(classPrefix, "-lite-active")

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

@@ -8,8 +8,8 @@
 .nut-pagination-prev,
 .nut-pagination-item,
 .nut-pagination-next {
-  height: 39px;
-  min-width: 39px;
+  height: scale-px(39px);
+  min-width: scale-px(39px);
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
@@ -53,9 +53,9 @@
 }
 
 .nut-pagination-simple {
-  height: 39px;
-  width: 124px;
-  line-height: 39px;
+  height: scale-px(39px);
+  width: scale-px(124px);
+  line-height: scale-px(39px);
   text-align: center;
   font-size: $pagination-font-size;
   color: $pagination-color;

package/dist/es/packages/pagination/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 */
@@ -5,25 +15,25 @@
 .nut-pagination {
   display: flex;
   flex-direction: row;
-  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-pagination-prev,
 .nut-pagination-item,
 .nut-pagination-next {
-  height: 39px;
-  min-width: 39px;
+  height: calc(39px * var(--nut-scale-f, 1));
+  min-width: calc(39px * var(--nut-scale-f, 1));
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
   background: #ffffff;
-  border-radius: var(--nutui-pagination-item-border-radius, 2px);
-  border: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-radius: var(--nutui-pagination-item-border-radius, calc(2px * var(--nut-scale-f, 1)));
+  border: var(--nutui-pagination-item-border-width, calc(1px * var(--nut-scale-f, 1))) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
   cursor: pointer;
 }
 
@@ -34,7 +44,7 @@
 
 .nut-pagination-prev,
 .nut-pagination-next {
-  padding: var(--nutui-pagination-prev-next-padding, 0 12px);
+  padding: var(--nutui-pagination-prev-next-padding, 0 calc(12px * var(--nut-scale-f, 1)));
 }
 
 .nut-pagination-contain {
@@ -57,36 +67,36 @@
 }
 
 .nut-pagination-simple {
-  height: 39px;
-  width: 124px;
-  line-height: 39px;
+  height: calc(39px * var(--nut-scale-f, 1));
+  width: calc(124px * var(--nut-scale-f, 1));
+  line-height: calc(39px * var(--nut-scale-f, 1));
   text-align: center;
-  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-pagination-simple-border {
-  border-right: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-right: var(--nutui-pagination-item-border-width, calc(1px * var(--nut-scale-f, 1))) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 
 .nut-pagination-lite {
-  height: var(--nutui-pagination-lite-height, 20px);
-  padding: 0 var(--nutui-spacing-xs, 6px);
+  height: var(--nutui-pagination-lite-height, calc(20px * var(--nut-scale-f, 1)));
+  padding: 0 var(--nutui-spacing-xs, calc(6px * var(--nut-scale-f, 1)));
   display: flex;
   flex-direction: row;
   align-items: center;
   color: #ffffff;
   background-color: var(--nutui-pagination-lite-background-color, rgba(0, 0, 0, 0.45));
-  border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, 4px));
+  border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
 }
 
 .nut-pagination-lite-active,
 .nut-pagination-lite-default {
-  font-size: var(--nutui-font-size-xs, 11px);
+  font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-pagination-lite-color, #ffffff);
 }
 
 .nut-pagination-lite-spliterator {
-  font-size: var(--nutui-font-size-xs, 11px);
+  font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-pagination-lite-color, #ffffff);
 }

package/dist/es/packages/pagination/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 */
@@ -5,25 +15,25 @@
 .nut-pagination {
   display: flex;
   flex-direction: row;
-  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-pagination-prev,
 .nut-pagination-item,
 .nut-pagination-next {
-  height: 39px;
-  min-width: 39px;
+  height: calc(39px * var(--nut-scale-f, 1));
+  min-width: calc(39px * var(--nut-scale-f, 1));
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
   background: #ffffff;
-  border-radius: var(--nutui-pagination-item-border-radius, 2px);
-  border: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-radius: var(--nutui-pagination-item-border-radius, calc(2px * var(--nut-scale-f, 1)));
+  border: var(--nutui-pagination-item-border-width, calc(1px * var(--nut-scale-f, 1))) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
   cursor: pointer;
 }
 
@@ -34,7 +44,7 @@
 
 .nut-pagination-prev,
 .nut-pagination-next {
-  padding: var(--nutui-pagination-prev-next-padding, 0 12px);
+  padding: var(--nutui-pagination-prev-next-padding, 0 calc(12px * var(--nut-scale-f, 1)));
 }
 
 .nut-pagination-contain {
@@ -57,36 +67,36 @@
 }
 
 .nut-pagination-simple {
-  height: 39px;
-  width: 124px;
-  line-height: 39px;
+  height: calc(39px * var(--nut-scale-f, 1));
+  width: calc(124px * var(--nut-scale-f, 1));
+  line-height: calc(39px * var(--nut-scale-f, 1));
   text-align: center;
-  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-pagination-simple-border {
-  border-right: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-right: var(--nutui-pagination-item-border-width, calc(1px * var(--nut-scale-f, 1))) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 
 .nut-pagination-lite {
-  height: var(--nutui-pagination-lite-height, 20px);
-  padding: 0 var(--nutui-spacing-xs, 6px);
+  height: var(--nutui-pagination-lite-height, calc(20px * var(--nut-scale-f, 1)));
+  padding: 0 var(--nutui-spacing-xs, calc(6px * var(--nut-scale-f, 1)));
   display: flex;
   flex-direction: row;
   align-items: center;
   color: #ffffff;
   background-color: var(--nutui-pagination-lite-background-color, rgba(0, 0, 0, 0.45));
-  border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, 4px));
+  border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
 }
 
 .nut-pagination-lite-active,
 .nut-pagination-lite-default {
-  font-size: var(--nutui-font-size-xs, 11px);
+  font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-pagination-lite-color, #ffffff);
 }
 
 .nut-pagination-lite-spliterator {
-  font-size: var(--nutui-font-size-xs, 11px);
+  font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-pagination-lite-color, #ffffff);
 }

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

@@ -8,8 +8,8 @@
 .nut-pagination-prev,
 .nut-pagination-item,
 .nut-pagination-next {
-  height: 39px;
-  min-width: 39px;
+  height: scale-px(39px);
+  min-width: scale-px(39px);
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
@@ -53,9 +53,9 @@
 }
 
 .nut-pagination-simple {
-  height: 39px;
-  width: 124px;
-  line-height: 39px;
+  height: scale-px(39px);
+  width: scale-px(124px);
+  line-height: scale-px(39px);
   text-align: center;
   font-size: $pagination-font-size;
   color: $pagination-color;

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

@@ -12,8 +12,8 @@
 .nut-pagination-prev,
 .nut-pagination-item,
 .nut-pagination-next {
-  height: 39px;
-  min-width: 39px;
+  height: scale-px(39px);
+  min-width: scale-px(39px);
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
@@ -57,9 +57,9 @@
 }
 
 .nut-pagination-simple {
-  height: 39px;
-  width: 124px;
-  line-height: 39px;
+  height: scale-px(39px);
+  width: scale-px(124px);
+  line-height: scale-px(39px);
   text-align: center;
   font-size: var(--nutui-pagination-font-size, var(--nutui-font-text));
   color: var(--nutui-pagination-color, var(--nutui-color-primary));

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

@@ -8,8 +8,8 @@
 .nut-pagination-prev,
 .nut-pagination-item,
 .nut-pagination-next {
-  height: 39px;
-  min-width: 39px;
+  height: scale-px(39px);
+  min-width: scale-px(39px);
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
@@ -53,9 +53,9 @@
 }
 
 .nut-pagination-simple {
-  height: 39px;
-  width: 124px;
-  line-height: 39px;
+  height: scale-px(39px);
+  width: scale-px(124px);
+  line-height: scale-px(39px);
   text-align: center;
   font-size: $pagination-font-size;
   color: $pagination-color;

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

@@ -12,8 +12,8 @@
 .nut-pagination-prev,
 .nut-pagination-item,
 .nut-pagination-next {
-  height: 39px;
-  min-width: 39px;
+  height: scale-px(39px);
+  min-width: scale-px(39px);
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
@@ -57,9 +57,9 @@
 }
 
 .nut-pagination-simple {
-  height: 39px;
-  width: 124px;
-  line-height: 39px;
+  height: scale-px(39px);
+  width: scale-px(124px);
+  line-height: scale-px(39px);
   text-align: center;
   font-size: var(--nutui-pagination-font-size, var(--nutui-font-text));
   color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff6666));

package/dist/es/packages/picker/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 */
@@ -9,18 +19,18 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: var(--nutui-popup-title-height, 50px);
-  padding: var(--nutui-popup-title-padding, 11px);
+  height: var(--nutui-popup-title-height, calc(50px * var(--nut-scale-f, 1)));
+  padding: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
   box-sizing: border-box;
-  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-picker-cancel-btn {
   color: var(--nutui-picker-title-cancel-color, var(--nutui-color-text, #505259));
-  font-size: var(--nutui-picker-title-cancel-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-picker-title-cancel-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-picker-confirm-btn {
   color: var(--nutui-picker-title-ok-color, var(--nutui-color-primary, #ff0f23));
-  font-size: var(--nutui-picker-title-ok-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-picker-title-ok-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-picker-title {
   flex: 1;
@@ -29,7 +39,7 @@
   white-space: nowrap;
   text-align: center;
   color: var(--nutui-color-title, #1a1a1a);
-  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   font-weight: var(--nutui-popup-title-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-picker-panel {