@nutui/nutui-react-taro 3.0.21-cpp → 3.1.0-beta.2

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

@@ -44,16 +44,16 @@
     &-large {
       margin-left: calc($rate-item-margin * 2);
       .nut-icon {
-        height: calc($rate-icon-size + 8px);
-        width: calc($rate-icon-size + 8px);
+        height: calc($rate-icon-size + scale-px(8px));
+        width: calc($rate-icon-size + scale-px(8px));
       }
     }
 
     &-small {
       margin-left: calc($rate-item-margin / 2);
       .nut-icon {
-        height: calc($rate-icon-size - 4px);
-        width: calc($rate-icon-size - 4px);
+        height: calc($rate-icon-size - scale-px(4px));
+        width: calc($rate-icon-size - scale-px(4px));
       }
     }
 
@@ -106,20 +106,22 @@
     align-items: center;
     color: $rate-font-color;
     font-family: 'JDZH-Regular';
-    line-height: 1;
 
     &-normal {
       padding-left: $rate-item-margin;
       font-size: $rate-font-size;
+      line-height: $line-height-s;
     }
 
     &-large {
-      font-size: calc($rate-font-size + 6px);
+      font-size: $rate-font-size-large;
+      line-height: $line-height-xl;
       padding-left: calc($rate-item-margin * 2);
     }
 
     &-small {
-      font-size: calc($rate-font-size - 2px);
+      font-size: $rate-font-size-small;
+      line-height: $line-height-xxs;
       padding-left: calc($rate-item-margin / 2);
     }
 
@@ -146,7 +148,7 @@
     }
 
     &-small {
-      margin-right: calc($rate-item-margin - 2px);
+      margin-right: calc($rate-item-margin - scale-px(2px));
     }
 
     &:last-child {
@@ -183,7 +185,7 @@
     }
 
     &-small {
-      padding-right: calc($rate-item-margin - 2px);
+      padding-right: calc($rate-item-margin - scale-px(2px));
     }
   }
 }

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

@@ -40,15 +40,15 @@
   margin-left: calc(var(--nutui-rate-item-margin, 14px) * 2);
 }
 .nut-rate-item-large .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) + 8px);
-  width: calc(var(--nutui-rate-icon-size, 12px) + 8px);
+  height: calc(var(--nutui-rate-icon-size, 12px) + scale-px(8px));
+  width: calc(var(--nutui-rate-icon-size, 12px) + scale-px(8px));
 }
 .nut-rate-item-small {
   margin-left: calc(var(--nutui-rate-item-margin, 14px) / 2);
 }
 .nut-rate-item-small .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) - 4px);
-  width: calc(var(--nutui-rate-icon-size, 12px) - 4px);
+  height: calc(var(--nutui-rate-icon-size, 12px) - scale-px(4px));
+  width: calc(var(--nutui-rate-icon-size, 12px) - scale-px(4px));
 }
 .nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
   margin-left: 0;
@@ -86,18 +86,20 @@
   align-items: center;
   color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333));
   font-family: "JDZH-Regular";
-  line-height: 1;
 }
 .nut-rate-score-normal {
   padding-left: var(--nutui-rate-item-margin, 14px);
   font-size: var(--nutui-rate-font-size, 12px);
+  line-height: var(--nutui-line-height-s, var(--nutui-font-text-small));
 }
 .nut-rate-score-large {
-  font-size: calc(var(--nutui-rate-font-size, 12px) + 6px);
+  font-size: var(--nutui-rate-font-size-large, calc(var(--nutui-rate-font-size, 12px) + 6px));
+  line-height: var(--nutui-line-height-xl, var(--nutui-font-h2));
   padding-left: calc(var(--nutui-rate-item-margin, 14px) * 2);
 }
 .nut-rate-score-small {
-  font-size: calc(var(--nutui-rate-font-size, 12px) - 2px);
+  font-size: var(--nutui-rate-font-size-small, calc(var(--nutui-rate-font-size, 12px) - 2px));
+  line-height: var(--nutui-line-height-xxs, var(--nutui-font-text-mini));
   padding-left: calc(var(--nutui-rate-item-margin, 14px) / 2);
 }
 .nut-rate-score-disabled {
@@ -122,7 +124,7 @@
 }
 [dir=rtl] .nut-rate-item-small,
 .nut-rtl .nut-rate-item-small {
-  margin-right: calc(var(--nutui-rate-item-margin, 14px) - 2px);
+  margin-right: calc(var(--nutui-rate-item-margin, 14px) - scale-px(2px));
 }
 [dir=rtl] .nut-rate-item:last-child,
 .nut-rtl .nut-rate-item:last-child {
@@ -157,5 +159,5 @@
 }
 [dir=rtl] .nut-rate-score-small,
 .nut-rtl .nut-rate-score-small {
-  padding-right: calc(var(--nutui-rate-item-margin, 14px) - 2px);
+  padding-right: calc(var(--nutui-rate-item-margin, 14px) - scale-px(2px));
 }

package/dist/es/packages/resultpage/resultpage.js

@@ -39,8 +39,7 @@ export var ResultPage = function(props) {
         className: cls,
         style: style
     }, /*#__PURE__*/ React.createElement(View, {
-        className: "".concat(classPrefix, "-icon"),
-        ariaHidden: true
+        className: "".concat(classPrefix, "-icon")
     }, icon || defaultStatus[status]), typeof title === 'string' && title ? /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-title")
     }, title) : title, typeof description === 'string' && description ? /*#__PURE__*/ React.createElement(Text, {

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

@@ -45,7 +45,7 @@
     }
   }
   &-action {
-    margin-left: 6px;
-    margin-right: 6px;
+    margin-left: scale-px(6px);
+    margin-right: scale-px(6px);
   }
 }

package/dist/es/packages/resultpage/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 */
@@ -16,24 +26,24 @@
   /* #ifndef dynamic*/
   display: inline-flex;
   /* #endif */
-  margin-bottom: var(--nutui-resultpage-icon-margin-bottom, 12px);
+  margin-bottom: var(--nutui-resultpage-icon-margin-bottom, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-resultpage-icon .nut-icon {
-  height: var(--nutui-resultpage-icon-size, 36px);
-  width: var(--nutui-resultpage-icon-size, 36px);
+  height: var(--nutui-resultpage-icon-size, calc(36px * var(--nut-scale-f, 1)));
+  width: var(--nutui-resultpage-icon-size, calc(36px * var(--nut-scale-f, 1)));
 }
 .nut-resultpage-title {
-  width: var(--nutui-resultpage-width, 240px);
-  margin-bottom: var(--nutui-resultpage-title-margin-bottom, 12px);
-  font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, 18px));
+  width: var(--nutui-resultpage-width, calc(240px * var(--nut-scale-f, 1)));
+  margin-bottom: var(--nutui-resultpage-title-margin-bottom, calc(12px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-resultpage-title-color, var(--nutui-color-title, #1a1a1a));
   font-weight: var(--nutui-font-weight-bold, 600);
   text-align: center;
 }
 .nut-resultpage-description {
-  width: var(--nutui-resultpage-width, 240px);
-  line-height: var(--nutui-resultpage-description-line-height, 20px);
-  font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, 14px));
+  width: var(--nutui-resultpage-width, calc(240px * var(--nut-scale-f, 1)));
+  line-height: var(--nutui-resultpage-description-line-height, calc(20px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-resultpage-description-color, var(--nutui-color-text, #505259));
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -44,12 +54,12 @@
 .nut-resultpage-actions {
   display: flex;
   flex-direction: row;
-  margin-top: var(--nutui-resultpage-actions-margin-top, 16px);
+  margin-top: var(--nutui-resultpage-actions-margin-top, calc(16px * var(--nut-scale-f, 1)));
 }
 .nut-resultpage-actions .nut-button-children {
   white-space: nowrap;
 }
 .nut-resultpage-action {
-  margin-left: 6px;
-  margin-right: 6px;
+  margin-left: calc(6px * var(--nut-scale-f, 1));
+  margin-right: calc(6px * var(--nut-scale-f, 1));
 }

package/dist/es/packages/resultpage/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 */
@@ -19,8 +29,8 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  height: var(--nutui-button-default-height, 32px);
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  height: var(--nutui-button-default-height, calc(32px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   font-weight: var(--nutui-font-weight, 400);
   text-align: center;
   cursor: pointer;
@@ -31,13 +41,13 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
   background: var(--nutui-button-default-background-color, transparent);
-  border-width: var(--nutui-button-border-width, 0.5px);
+  border-width: var(--nutui-button-border-width, calc(0.5px * var(--nut-scale-f, 1)));
 }
 .nut-button-text {
-  margin-left: var(--nutui-button-text-icon-margin, 4px);
+  margin-left: var(--nutui-button-text-icon-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-button-text-right {
-  margin-right: var(--nutui-button-text-icon-margin, 4px);
+  margin-right: var(--nutui-button-text-icon-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-button-children {
   display: flex;
@@ -60,6 +70,9 @@
   /* #ifdef dynamic*/
   pointer-events: none;
   /* #endif */
+  /* #ifndef dynamic*/
+  pointer-events: auto;
+  /* #endif */
 }
 .nut-button::after {
   border: none;
@@ -79,9 +92,9 @@
   /* #endif */
 }
 .nut-button-wrap .nut-icon {
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
-  width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
-  height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-loading::before, .nut-button-disabled::before {
   display: none;
@@ -91,14 +104,14 @@
   color: #ffffff;
 }
 .nut-button.nut-button-icononly {
-  width: var(--nutui-button-default-height, 32px);
+  width: var(--nutui-button-default-height, calc(32px * var(--nut-scale-f, 1)));
   padding: 0;
 }
 .nut-button-round {
-  border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, 6px));
+  border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, calc(6px * var(--nut-scale-f, 1))));
 }
 .nut-button-default {
-  padding: var(--nutui-button-default-padding, 0px 12px);
+  padding: var(--nutui-button-default-padding, 0px calc(12px * var(--nut-scale-f, 1)));
   border-style: solid;
   border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
@@ -116,75 +129,75 @@
   border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-button-normal {
-  padding: var(--nutui-button-normal-padding, 0px 12px);
+  padding: var(--nutui-button-normal-padding, 0px calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-button-xlarge {
-  height: var(--nutui-button-xlarge-height, 48px);
-  padding: var(--nutui-button-xlarge-padding, 0px 24px);
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
-  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
+  height: var(--nutui-button-xlarge-height, calc(48px * var(--nut-scale-f, 1)));
+  padding: var(--nutui-button-xlarge-padding, 0px calc(24px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
 }
 .nut-button-xlarge .nut-button-text {
-  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-button-xlarge .nut-button-text-right {
-  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-button-xlarge .nut-icon {
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
-  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
-  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-xlarge-children {
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-large {
-  height: var(--nutui-button-large-height, 40px);
-  padding: var(--nutui-button-large-padding, 0px 16px);
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15px));
-  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
+  height: var(--nutui-button-large-height, calc(40px * var(--nut-scale-f, 1)));
+  padding: var(--nutui-button-large-padding, 0px calc(16px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
 }
 .nut-button-large .nut-button-text {
-  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-button-large .nut-button-text-right {
-  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-button-large .nut-icon {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15px));
-  width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15px));
-  height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-large-children {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-small {
-  height: var(--nutui-button-small-height, 28px);
-  padding: var(--nutui-button-small-padding, 0px 8px);
-  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
-  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
+  height: var(--nutui-button-small-height, calc(28px * var(--nut-scale-f, 1)));
+  padding: var(--nutui-button-small-padding, 0px calc(8px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, calc(6px * var(--nut-scale-f, 1))));
 }
 .nut-button-small .nut-icon {
-  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
-  width: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
-  height: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  width: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  height: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-small-children {
-  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-mini {
-  height: var(--nutui-button-mini-height, 24px);
-  padding: var(--nutui-button-mini-padding, 0px 8px);
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
-  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
+  height: var(--nutui-button-mini-height, calc(24px * var(--nut-scale-f, 1)));
+  padding: var(--nutui-button-mini-padding, 0px calc(8px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
 }
 .nut-button-mini .nut-icon {
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
-  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
-  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-mini-children {
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-primary {
   color: var(--nutui-button-primary-color, #ffffff);
@@ -369,11 +382,11 @@
 [dir=rtl] .nut-button-text,
 .nut-rtl .nut-button-text {
   margin-left: 0;
-  margin-right: var(--nutui-button-text-icon-margin, 4px);
+  margin-right: var(--nutui-button-text-icon-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-button-text.right,
 .nut-rtl .nut-button-text.right {
-  margin-left: var(--nutui-button-text-icon-margin, 4px);
+  margin-left: var(--nutui-button-text-icon-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-button::before,
 .nut-rtl .nut-button::before {
@@ -396,24 +409,24 @@
   /* #ifndef dynamic*/
   display: inline-flex;
   /* #endif */
-  margin-bottom: var(--nutui-resultpage-icon-margin-bottom, 12px);
+  margin-bottom: var(--nutui-resultpage-icon-margin-bottom, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-resultpage-icon .nut-icon {
-  height: var(--nutui-resultpage-icon-size, 36px);
-  width: var(--nutui-resultpage-icon-size, 36px);
+  height: var(--nutui-resultpage-icon-size, calc(36px * var(--nut-scale-f, 1)));
+  width: var(--nutui-resultpage-icon-size, calc(36px * var(--nut-scale-f, 1)));
 }
 .nut-resultpage-title {
-  width: var(--nutui-resultpage-width, 240px);
-  margin-bottom: var(--nutui-resultpage-title-margin-bottom, 12px);
-  font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, 18px));
+  width: var(--nutui-resultpage-width, calc(240px * var(--nut-scale-f, 1)));
+  margin-bottom: var(--nutui-resultpage-title-margin-bottom, calc(12px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-resultpage-title-color, var(--nutui-color-title, #1a1a1a));
   font-weight: var(--nutui-font-weight-bold, 600);
   text-align: center;
 }
 .nut-resultpage-description {
-  width: var(--nutui-resultpage-width, 240px);
-  line-height: var(--nutui-resultpage-description-line-height, 20px);
-  font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, 14px));
+  width: var(--nutui-resultpage-width, calc(240px * var(--nut-scale-f, 1)));
+  line-height: var(--nutui-resultpage-description-line-height, calc(20px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-resultpage-description-color, var(--nutui-color-text, #505259));
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -424,12 +437,12 @@
 .nut-resultpage-actions {
   display: flex;
   flex-direction: row;
-  margin-top: var(--nutui-resultpage-actions-margin-top, 16px);
+  margin-top: var(--nutui-resultpage-actions-margin-top, calc(16px * var(--nut-scale-f, 1)));
 }
 .nut-resultpage-actions .nut-button-children {
   white-space: nowrap;
 }
 .nut-resultpage-action {
-  margin-left: 6px;
-  margin-right: 6px;
+  margin-left: calc(6px * var(--nut-scale-f, 1));
+  margin-right: calc(6px * var(--nut-scale-f, 1));
 }

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

@@ -45,7 +45,7 @@
     }
   }
   &-action {
-    margin-left: 6px;
-    margin-right: 6px;
+    margin-left: scale-px(6px);
+    margin-right: scale-px(6px);
   }
 }

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

@@ -50,6 +50,6 @@
   white-space: nowrap;
 }
 .nut-resultpage-action {
-  margin-left: 6px;
-  margin-right: 6px;
+  margin-left: scale-px(6px);
+  margin-right: scale-px(6px);
 }

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

@@ -45,7 +45,7 @@
     }
   }
   &-action {
-    margin-left: 6px;
-    margin-right: 6px;
+    margin-left: scale-px(6px);
+    margin-right: scale-px(6px);
   }
 }

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

@@ -50,6 +50,6 @@
   white-space: nowrap;
 }
 .nut-resultpage-action {
-  margin-left: 6px;
-  margin-right: 6px;
+  margin-left: scale-px(6px);
+  margin-right: scale-px(6px);
 }

package/dist/es/packages/row/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/row/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/safearea/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/safearea/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/searchbar/searchbar.js

@@ -22,9 +22,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     left: '',
     right: '',
     rightIn: '',
-    leftIn: /*#__PURE__*/ React.createElement(Search, {
-        ariaHidden: true
-    }),
+    leftIn: /*#__PURE__*/ React.createElement(Search, null),
     tag: false
 });
 export var SearchBar = function(props) {
@@ -179,15 +177,12 @@ export var SearchBar = function(props) {
                 onClick: function(e) {
                     return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, e);
                 }
-            }, item, /*#__PURE__*/ React.createElement(Close, {
-                ariaLabel: locale.close
-            }));
+            }, item, /*#__PURE__*/ React.createElement(Close, null));
         }));
     }, [
         value,
         onItemClick,
-        innerTag,
-        locale.close
+        innerTag
     ]);
     var renderLeftIn = useCallback(function() {
         if (!leftIn) return null;
@@ -200,16 +195,11 @@ export var SearchBar = function(props) {
     var renderLeft = useCallback(function() {
         if (!backable && !left) return null;
         return /*#__PURE__*/ React.createElement(View, {
-            className: "".concat(classPrefix, "-left"),
-            ariaRole: backable ? 'button' : undefined,
-            ariaLabel: backable ? locale.back : undefined
-        }, backable ? /*#__PURE__*/ React.createElement(ArrowLeft, {
-            ariaHidden: true
-        }) : left);
+            className: "".concat(classPrefix, "-left")
+        }, backable ? /*#__PURE__*/ React.createElement(ArrowLeft, null) : left);
     }, [
         backable,
-        left,
-        locale
+        left
     ]);
     var renderRightIn = useCallback(function() {
         if (!rightIn) return null;
@@ -235,18 +225,13 @@ export var SearchBar = function(props) {
             style: {
                 visibility: "".concat(!innerTag && value && clearable ? 'visible' : 'hidden')
             },
-            onClick: clearaVal,
-            ariaRole: "button",
-            ariaLabel: locale.clear
-        }, /*#__PURE__*/ React.createElement(MaskClose, {
-            ariaHidden: true
-        }));
+            onClick: clearaVal
+        }, /*#__PURE__*/ React.createElement(MaskClose, null));
     }, [
         value,
         clearable,
         clearaVal,
-        innerTag,
-        locale
+        innerTag
     ]);
     var onConfirm = function() {
         onSearch && onSearch(value);