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

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

@@ -16,7 +16,7 @@
   font-size: var(--nutui-navbar-font-size, var(--nutui-font-text));
   color: var(--nutui-navbar-color, var(--nutui-color-title));
   overflow: hidden;
-  padding: 0 16px;
+  padding: 0 scale-px(16px);
 }
 .nut-navbar-fixed {
   position: fixed;
@@ -48,9 +48,10 @@
   font-size: var(--nutui-navbar-title-font-size, var(--nutui-font-h1));
   font-weight: var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold));
   color: var(--nutui-navbar-title-font-color, var(--nutui-color-title));
+  white-space: nowrap;
 }
 .nut-navbar-title-center {
-  max-width: 129px;
+  max-width: scale-px(129px);
   justify-content: center;
 }
 .nut-navbar-title ::-webkit-scrollbar {
@@ -60,7 +61,7 @@
   display: flex;
   align-items: center;
   flex-direction: row;
-  max-width: 124px;
+  max-width: scale-px(124px);
   height: 100%;
   cursor: pointer;
   /* #ifndef harmony jd h5 weapp*/
@@ -69,40 +70,40 @@
 .nut-navbar-left .nut-icon,
 .nut-navbar-left .nutui-iconfont, .nut-navbar-right .nut-icon,
 .nut-navbar-right .nutui-iconfont {
-  width: 20px;
-  height: 20px;
-  font-size: 20px;
+  width: scale-px(20px);
+  height: scale-px(20px);
+  font-size: var(--nutui-font-size-2xl, 20px);
 }
 .nut-navbar-left-maxwidth, .nut-navbar-right-maxwidth {
   box-sizing: border-box;
-  width: 108px;
+  width: calc(scale-px(124px) - scale-px(16px));
 }
 .nut-navbar-left {
-  padding-right: 16px;
-  gap: 16px;
+  padding-right: scale-px(16px);
+  gap: scale-px(16px);
 }
 .nut-navbar-left-rtl {
   padding-right: 0;
-  padding-left: 16px;
+  padding-left: scale-px(16px);
 }
 .nut-navbar-left-back {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  gap: 16px;
+  gap: scale-px(16px);
 }
 .nut-navbar-left-hidden {
   padding-left: 0;
   padding-right: 0;
 }
 .nut-navbar-right {
-  padding-left: 16px;
+  padding-left: scale-px(16px);
   justify-content: flex-end;
-  gap: 16px;
+  gap: scale-px(16px);
 }
 .nut-navbar-right-rtl {
-  padding-right: 16px;
+  padding-right: scale-px(16px);
   padding-left: 0;
 }
 .nut-navbar-rtl .nut-icon-ArrowLeft {

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

@@ -12,7 +12,7 @@
   font-size: $navbar-font-size;
   color: $navbar-color;
   overflow: hidden;
-  padding: 0 16px;
+  padding: 0 scale-px(16px);
 
   &-fixed {
     position: fixed;
@@ -48,9 +48,10 @@
     font-size: $navbar-title-font-size;
     font-weight: $navbar-title-font-weight;
     color: $navbar-title-font-color;
+    white-space: nowrap;
 
     &-center {
-      max-width: 129px;
+      max-width: scale-px(129px);
       justify-content: center;
     }
   }
@@ -64,31 +65,31 @@
     display: flex;
     align-items: center;
     flex-direction: row;
-    max-width: 124px;
+    max-width: scale-px(124px);
     height: 100%;
     cursor: pointer;
     /* #ifndef harmony jd h5 weapp*/
     .nut-icon,
     .nutui-iconfont {
-      width: 20px;
-      height: 20px;
-      font-size: 20px;
+      width: scale-px(20px);
+      height: scale-px(20px);
+      font-size: $font-size-2xl;
     }
 
     /* #endif */
     &-maxwidth {
       box-sizing: border-box;
-      width: calc(124px - 16px);
+      width: calc(scale-px(124px) - scale-px(16px));
     }
   }
 
   &-left {
-    padding-right: 16px;
-    gap: 16px;
+    padding-right: scale-px(16px);
+    gap: scale-px(16px);
 
     &-rtl {
       padding-right: 0;
-      padding-left: 16px;
+      padding-left: scale-px(16px);
     }
 
     &-back {
@@ -96,7 +97,7 @@
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      gap: 16px;
+      gap: scale-px(16px);
     }
 
     &-hidden {
@@ -106,12 +107,12 @@
   }
 
   &-right {
-    padding-left: 16px;
+    padding-left: scale-px(16px);
     justify-content: flex-end;
-    gap: 16px;
+    gap: scale-px(16px);
 
     &-rtl {
-      padding-right: 16px;
+      padding-right: scale-px(16px);
       padding-left: 0;
     }
   }

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

@@ -16,7 +16,7 @@
   font-size: var(--nutui-navbar-font-size, var(--nutui-font-text));
   color: var(--nutui-navbar-color, var(--nutui-color-title));
   overflow: hidden;
-  padding: 0 16px;
+  padding: 0 scale-px(16px);
 }
 .nut-navbar-fixed {
   position: fixed;
@@ -48,9 +48,10 @@
   font-size: var(--nutui-navbar-title-font-size, var(--nutui-font-h1));
   font-weight: var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold));
   color: var(--nutui-navbar-title-font-color, var(--nutui-color-title));
+  white-space: nowrap;
 }
 .nut-navbar-title-center {
-  max-width: 129px;
+  max-width: scale-px(129px);
   justify-content: center;
 }
 .nut-navbar-title ::-webkit-scrollbar {
@@ -60,7 +61,7 @@
   display: flex;
   align-items: center;
   flex-direction: row;
-  max-width: 124px;
+  max-width: scale-px(124px);
   height: 100%;
   cursor: pointer;
   /* #ifndef harmony jd h5 weapp*/
@@ -69,40 +70,40 @@
 .nut-navbar-left .nut-icon,
 .nut-navbar-left .nutui-iconfont, .nut-navbar-right .nut-icon,
 .nut-navbar-right .nutui-iconfont {
-  width: 20px;
-  height: 20px;
-  font-size: 20px;
+  width: scale-px(20px);
+  height: scale-px(20px);
+  font-size: var(--nutui-font-size-2xl, 20px);
 }
 .nut-navbar-left-maxwidth, .nut-navbar-right-maxwidth {
   box-sizing: border-box;
-  width: 108px;
+  width: calc(scale-px(124px) - scale-px(16px));
 }
 .nut-navbar-left {
-  padding-right: 16px;
-  gap: 16px;
+  padding-right: scale-px(16px);
+  gap: scale-px(16px);
 }
 .nut-navbar-left-rtl {
   padding-right: 0;
-  padding-left: 16px;
+  padding-left: scale-px(16px);
 }
 .nut-navbar-left-back {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  gap: 16px;
+  gap: scale-px(16px);
 }
 .nut-navbar-left-hidden {
   padding-left: 0;
   padding-right: 0;
 }
 .nut-navbar-right {
-  padding-left: 16px;
+  padding-left: scale-px(16px);
   justify-content: flex-end;
-  gap: 16px;
+  gap: scale-px(16px);
 }
 .nut-navbar-right-rtl {
-  padding-right: 16px;
+  padding-right: scale-px(16px);
   padding-left: 0;
 }
 .nut-navbar-rtl .nut-icon-ArrowLeft {

package/dist/es/packages/noticebar/noticebar.js

@@ -23,9 +23,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     content: '',
     closeable: false,
     wrap: false,
-    leftIcon: /*#__PURE__*/ React.createElement(Notice, {
-        size: 16
-    }),
+    leftIcon: /*#__PURE__*/ React.createElement(Notice, null),
     rightIcon: null,
     right: null,
     delay: 1,
@@ -448,7 +446,7 @@ export var NoticeBar = function(props) {
             className: "nut-noticebar-box-right-icon",
             onClick: handleClickIcon
         }, rightIcon || /*#__PURE__*/ React.createElement(Close, {
-            size: 12
+            className: "nut-noticebar-box-right-icon-default"
         })) : null);
     }, [
         rightIcon,

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

@@ -68,12 +68,17 @@
       margin-left: $noticebar-icon-gap;
 
       .nut-icon {
-        width: 12px;
-        height: 12px;
+        width: scale-px(12px);
+        height: scale-px(12px);
         color: $noticebar-color;
       }
     }
 
+    &-right-icon-default {
+      width: $icon-size-12;
+      height: $icon-size-12;
+    }
+
     &-wrap {
       display: flex;
       flex: 1;

package/dist/es/packages/noticebar/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,16 +19,16 @@
   position: relative;
   display: flex;
   align-items: center;
-  height: var(--nutui-noticebar-height, 36px);
-  padding: var(--nutui-noticebar-box-padding, 0 16px);
-  font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-noticebar-height, calc(36px * var(--nut-scale-f, 1)));
+  padding: var(--nutui-noticebar-box-padding, 0 calc(16px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   background: var(--nutui-noticebar-background, rgb(251, 248, 220));
   color: var(--nutui-noticebar-color, #d9500b);
   border-radius: var(--nutui-noticebar-border-radius, 0);
 }
 .nut-noticebar .nut-noticebar-box-wrapable, .nut-noticebar .nut-noticebar-box-center {
   height: auto;
-  padding: var(--nutui-noticebar-wrapable-padding, 8px 16px);
+  padding: var(--nutui-noticebar-wrapable-padding, calc(8px * var(--nut-scale-f, 1)) calc(16px * var(--nut-scale-f, 1)));
 }
 .nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap, .nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap {
   height: auto;
@@ -44,9 +54,9 @@
 }
 .nut-noticebar .nut-noticebar-box-left-icon {
   display: flex;
-  height: var(--nutui-noticebar-left-icon-width, 16px);
-  min-width: var(--nutui-noticebar-left-icon-width, 16px);
-  margin-right: var(--nutui-noticebar-icon-gap, 4px);
+  height: var(--nutui-noticebar-left-icon-width, calc(16px * var(--nut-scale-f, 1)));
+  min-width: var(--nutui-noticebar-left-icon-width, calc(16px * var(--nut-scale-f, 1)));
+  margin-right: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
   background-size: 100% 100%;
 }
 .nut-noticebar .nut-noticebar-box-left-icon .nut-icon {
@@ -56,20 +66,24 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--nutui-noticebar-right-icon-width, 16px);
-  margin-left: var(--nutui-noticebar-icon-gap, 4px);
+  width: var(--nutui-noticebar-right-icon-width, calc(16px * var(--nut-scale-f, 1)));
+  margin-left: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-noticebar .nut-noticebar-box-right-icon .nut-icon {
-  width: 12px;
-  height: 12px;
+  width: calc(12px * var(--nut-scale-f, 1));
+  height: calc(12px * var(--nut-scale-f, 1));
   color: var(--nutui-noticebar-color, #d9500b);
 }
+.nut-noticebar .nut-noticebar-box-right-icon-default {
+  width: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+  height: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+}
 .nut-noticebar .nut-noticebar-box-wrap {
   display: flex;
   flex: 1;
   align-items: center;
-  height: var(--nutui-noticebar-line-height, 24px);
-  line-height: var(--nutui-noticebar-line-height, 24px);
+  height: var(--nutui-noticebar-line-height, calc(24px * var(--nut-scale-f, 1)));
+  line-height: var(--nutui-noticebar-line-height, calc(24px * var(--nut-scale-f, 1)));
   overflow: hidden;
   position: relative;
 }
@@ -97,17 +111,17 @@
   position: relative;
   display: flex;
   justify-content: space-between;
-  height: var(--nutui-noticebar-height, 36px);
-  font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-noticebar-height, calc(36px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   overflow: hidden;
-  padding: var(--nutui-noticebar-box-padding, 0 16px);
+  padding: var(--nutui-noticebar-box-padding, 0 calc(16px * var(--nut-scale-f, 1)));
   background: var(--nutui-noticebar-background, rgb(251, 248, 220));
   color: var(--nutui-noticebar-color, #d9500b);
 }
 .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-left-icon {
-  height: var(--nutui-noticebar-left-icon-width, 16px);
-  min-width: var(--nutui-noticebar-left-icon-width, 16px);
-  margin: var(--nutui-noticebar-icon-gap, 4px);
+  height: var(--nutui-noticebar-left-icon-width, calc(16px * var(--nut-scale-f, 1)));
+  min-width: var(--nutui-noticebar-left-icon-width, calc(16px * var(--nut-scale-f, 1)));
+  margin: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
   background-size: 100% 100%;
   display: flex;
   align-self: center;
@@ -121,7 +135,7 @@
 .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list-item {
   display: flex;
   align-items: center;
-  height: var(--nutui-noticebar-height, 36px);
+  height: var(--nutui-noticebar-height, calc(36px * var(--nut-scale-f, 1)));
   width: 100%;
 }
 .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-wrap {
@@ -136,8 +150,8 @@
   align-self: center;
   display: flex;
   justify-content: center;
-  width: var(--nutui-noticebar-right-icon-width, 16px);
-  margin-left: var(--nutui-noticebar-icon-gap, 4px);
+  width: var(--nutui-noticebar-right-icon-width, calc(16px * var(--nut-scale-f, 1)));
+  margin-left: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
 }
 @keyframes nut-notice-bar-play {
   to {
@@ -151,19 +165,19 @@
 }
 @keyframes nut-notice-bar-play-vertical {
   to {
-    transform: translateY(var(--nutui-noticebar-height, 36px));
+    transform: translateY(var(--nutui-noticebar-height, calc(36px * var(--nut-scale-f, 1))));
   }
 }
 
 [dir=rtl] .nut-noticebar .nut-noticebar-box-left-icon,
 .nut-rtl .nut-noticebar .nut-noticebar-box-left-icon {
   margin-right: 0;
-  margin-left: var(--nutui-noticebar-icon-gap, 4px);
+  margin-left: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-noticebar .nut-noticebar-box-right-icon,
 .nut-rtl .nut-noticebar .nut-noticebar-box-right-icon {
   margin-left: 0;
-  margin-right: var(--nutui-noticebar-icon-gap, 4px);
+  margin-right: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-noticebar .nut-noticebar-box .play,
 .nut-rtl .nut-noticebar .nut-noticebar-box .play {
@@ -186,5 +200,5 @@
 [dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon,
 .nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon {
   margin-left: 0;
-  margin-right: var(--nutui-noticebar-icon-gap, 4px);
+  margin-right: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
 }

package/dist/es/packages/noticebar/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 */
@@ -9,16 +19,16 @@
   position: relative;
   display: flex;
   align-items: center;
-  height: var(--nutui-noticebar-height, 36px);
-  padding: var(--nutui-noticebar-box-padding, 0 16px);
-  font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-noticebar-height, calc(36px * var(--nut-scale-f, 1)));
+  padding: var(--nutui-noticebar-box-padding, 0 calc(16px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   background: var(--nutui-noticebar-background, rgb(251, 248, 220));
   color: var(--nutui-noticebar-color, #d9500b);
   border-radius: var(--nutui-noticebar-border-radius, 0);
 }
 .nut-noticebar .nut-noticebar-box-wrapable, .nut-noticebar .nut-noticebar-box-center {
   height: auto;
-  padding: var(--nutui-noticebar-wrapable-padding, 8px 16px);
+  padding: var(--nutui-noticebar-wrapable-padding, calc(8px * var(--nut-scale-f, 1)) calc(16px * var(--nut-scale-f, 1)));
 }
 .nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap, .nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap {
   height: auto;
@@ -44,9 +54,9 @@
 }
 .nut-noticebar .nut-noticebar-box-left-icon {
   display: flex;
-  height: var(--nutui-noticebar-left-icon-width, 16px);
-  min-width: var(--nutui-noticebar-left-icon-width, 16px);
-  margin-right: var(--nutui-noticebar-icon-gap, 4px);
+  height: var(--nutui-noticebar-left-icon-width, calc(16px * var(--nut-scale-f, 1)));
+  min-width: var(--nutui-noticebar-left-icon-width, calc(16px * var(--nut-scale-f, 1)));
+  margin-right: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
   background-size: 100% 100%;
 }
 .nut-noticebar .nut-noticebar-box-left-icon .nut-icon {
@@ -56,20 +66,24 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--nutui-noticebar-right-icon-width, 16px);
-  margin-left: var(--nutui-noticebar-icon-gap, 4px);
+  width: var(--nutui-noticebar-right-icon-width, calc(16px * var(--nut-scale-f, 1)));
+  margin-left: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-noticebar .nut-noticebar-box-right-icon .nut-icon {
-  width: 12px;
-  height: 12px;
+  width: calc(12px * var(--nut-scale-f, 1));
+  height: calc(12px * var(--nut-scale-f, 1));
   color: var(--nutui-noticebar-color, #d9500b);
 }
+.nut-noticebar .nut-noticebar-box-right-icon-default {
+  width: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+  height: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+}
 .nut-noticebar .nut-noticebar-box-wrap {
   display: flex;
   flex: 1;
   align-items: center;
-  height: var(--nutui-noticebar-line-height, 24px);
-  line-height: var(--nutui-noticebar-line-height, 24px);
+  height: var(--nutui-noticebar-line-height, calc(24px * var(--nut-scale-f, 1)));
+  line-height: var(--nutui-noticebar-line-height, calc(24px * var(--nut-scale-f, 1)));
   overflow: hidden;
   position: relative;
 }
@@ -97,17 +111,17 @@
   position: relative;
   display: flex;
   justify-content: space-between;
-  height: var(--nutui-noticebar-height, 36px);
-  font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-noticebar-height, calc(36px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   overflow: hidden;
-  padding: var(--nutui-noticebar-box-padding, 0 16px);
+  padding: var(--nutui-noticebar-box-padding, 0 calc(16px * var(--nut-scale-f, 1)));
   background: var(--nutui-noticebar-background, rgb(251, 248, 220));
   color: var(--nutui-noticebar-color, #d9500b);
 }
 .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-left-icon {
-  height: var(--nutui-noticebar-left-icon-width, 16px);
-  min-width: var(--nutui-noticebar-left-icon-width, 16px);
-  margin: var(--nutui-noticebar-icon-gap, 4px);
+  height: var(--nutui-noticebar-left-icon-width, calc(16px * var(--nut-scale-f, 1)));
+  min-width: var(--nutui-noticebar-left-icon-width, calc(16px * var(--nut-scale-f, 1)));
+  margin: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
   background-size: 100% 100%;
   display: flex;
   align-self: center;
@@ -121,7 +135,7 @@
 .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list-item {
   display: flex;
   align-items: center;
-  height: var(--nutui-noticebar-height, 36px);
+  height: var(--nutui-noticebar-height, calc(36px * var(--nut-scale-f, 1)));
   width: 100%;
 }
 .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-wrap {
@@ -136,8 +150,8 @@
   align-self: center;
   display: flex;
   justify-content: center;
-  width: var(--nutui-noticebar-right-icon-width, 16px);
-  margin-left: var(--nutui-noticebar-icon-gap, 4px);
+  width: var(--nutui-noticebar-right-icon-width, calc(16px * var(--nut-scale-f, 1)));
+  margin-left: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
 }
 @keyframes nut-notice-bar-play {
   to {
@@ -151,19 +165,19 @@
 }
 @keyframes nut-notice-bar-play-vertical {
   to {
-    transform: translateY(var(--nutui-noticebar-height, 36px));
+    transform: translateY(var(--nutui-noticebar-height, calc(36px * var(--nut-scale-f, 1))));
   }
 }
 
 [dir=rtl] .nut-noticebar .nut-noticebar-box-left-icon,
 .nut-rtl .nut-noticebar .nut-noticebar-box-left-icon {
   margin-right: 0;
-  margin-left: var(--nutui-noticebar-icon-gap, 4px);
+  margin-left: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-noticebar .nut-noticebar-box-right-icon,
 .nut-rtl .nut-noticebar .nut-noticebar-box-right-icon {
   margin-left: 0;
-  margin-right: var(--nutui-noticebar-icon-gap, 4px);
+  margin-right: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-noticebar .nut-noticebar-box .play,
 .nut-rtl .nut-noticebar .nut-noticebar-box .play {
@@ -186,5 +200,5 @@
 [dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon,
 .nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon {
   margin-left: 0;
-  margin-right: var(--nutui-noticebar-icon-gap, 4px);
+  margin-right: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
 }

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

@@ -68,12 +68,17 @@
       margin-left: $noticebar-icon-gap;
 
       .nut-icon {
-        width: 12px;
-        height: 12px;
+        width: scale-px(12px);
+        height: scale-px(12px);
         color: $noticebar-color;
       }
     }
 
+    &-right-icon-default {
+      width: $icon-size-12;
+      height: $icon-size-12;
+    }
+
     &-wrap {
       display: flex;
       flex: 1;

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

@@ -60,10 +60,14 @@
   margin-left: var(--nutui-noticebar-icon-gap, 4px);
 }
 .nut-noticebar .nut-noticebar-box-right-icon .nut-icon {
-  width: 12px;
-  height: 12px;
+  width: scale-px(12px);
+  height: scale-px(12px);
   color: var(--nutui-noticebar-color, #d9500b);
 }
+.nut-noticebar .nut-noticebar-box-right-icon-default {
+  width: var(--nutui-icon-size-12, 12px);
+  height: var(--nutui-icon-size-12, 12px);
+}
 .nut-noticebar .nut-noticebar-box-wrap {
   display: flex;
   flex: 1;

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

@@ -68,12 +68,17 @@
       margin-left: $noticebar-icon-gap;
 
       .nut-icon {
-        width: 12px;
-        height: 12px;
+        width: scale-px(12px);
+        height: scale-px(12px);
         color: $noticebar-color;
       }
     }
 
+    &-right-icon-default {
+      width: $icon-size-12;
+      height: $icon-size-12;
+    }
+
     &-wrap {
       display: flex;
       flex: 1;

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

@@ -60,10 +60,14 @@
   margin-left: var(--nutui-noticebar-icon-gap, 4px);
 }
 .nut-noticebar .nut-noticebar-box-right-icon .nut-icon {
-  width: 12px;
-  height: 12px;
+  width: scale-px(12px);
+  height: scale-px(12px);
   color: var(--nutui-noticebar-color, #d9500b);
 }
+.nut-noticebar .nut-noticebar-box-right-icon-default {
+  width: var(--nutui-icon-size-12, 12px);
+  height: var(--nutui-icon-size-12, 12px);
+}
 .nut-noticebar .nut-noticebar-box-wrap {
   display: flex;
   flex: 1;

package/dist/es/packages/notify/notify.js

@@ -103,7 +103,7 @@ export var Notify = function(props) {
         className: "".concat(classPrefix, "-right-icon"),
         onClick: handleClickIcon
     }, rightIcon || (closeable ? /*#__PURE__*/ React.createElement(Close, {
-        size: 12
+        className: "".concat(classPrefix, "-close-icon")
     }) : null)) : null));
 };
 export function open(selector) {