@nutui/nutui-react 4.0.0-beta.6 → 4.0.0-beta.7

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

@@ -23,6 +23,13 @@
 .nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap, .nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap {
   height: auto;
 }
+.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-left-icon, .nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-left-icon {
+  height: var(--nutui-noticebar-left-icon-wrap-width, 32px);
+  min-width: var(--nutui-noticebar-left-icon-wrap-width, 32px);
+}
+.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap {
+  flex: initial;
+}
 .nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content {
   position: relative;
   white-space: normal;
@@ -44,30 +51,106 @@
 }
 .nut-noticebar .nut-noticebar-box-left-icon {
   display: flex;
+  align-items: center;
+  justify-content: center;
   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);
   background-size: 100% 100%;
 }
 .nut-noticebar .nut-noticebar-box-left-icon .nut-icon {
-  color: var(--nutui-noticebar-color, #d9500b);
+  color: var(--nutui-noticebar-icon-color, var(--nutui-color-primary));
+}
+.nut-noticebar .nut-noticebar-box-left-icon img {
+  border-radius: var(--nutui-noticebar-left-icon-border-radius, 4px);
+}
+.nut-noticebar .nut-noticebar-box-content-wrapper {
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+}
+.nut-noticebar .nut-noticebar-box-content-main {
+  display: flex;
+  align-items: center;
+}
+.nut-noticebar .nut-noticebar-box-description {
+  font-size: var(--nutui-noticebar-description-font-size, 11px);
+  color: var(--nutui-noticebar-description-color, var(--nutui-color-text));
+  line-height: var(--nutui-noticebar-description-line-height, 16px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.nut-noticebar .nut-noticebar-box-tag {
+  display: flex;
+  align-items: center;
+  width: var(--nutui-noticebar-tag-size, 12px);
+  height: var(--nutui-noticebar-tag-size, 12px);
+  margin-left: var(--nutui-noticebar-tag-gap, 4px);
+  flex-shrink: 0;
+}
+.nut-noticebar .nut-noticebar-box-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: var(--nutui-noticebar-action-max-width, 99px);
+  margin-left: var(--nutui-noticebar-action-gap, 12px);
+  font-size: var(--nutui-noticebar-action-font-size, var(--nutui-font-text-xs));
+  color: var(--nutui-color-primary);
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 .nut-noticebar .nut-noticebar-box-right-icon {
   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-close-size, 20px);
+  height: var(--nutui-noticebar-close-size, 20px);
+  margin-left: var(--nutui-noticebar-action-gap, 12px);
+  flex-shrink: 0;
+  cursor: pointer;
 }
 .nut-noticebar .nut-noticebar-box-right-icon .nut-icon {
-  width: scale-px(12px);
-  height: scale-px(12px);
-  color: var(--nutui-noticebar-color, #d9500b);
+  color: var(--nutui-noticebar-close-color, var(--nutui-color-text-help));
 }
 .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-close-countdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--nutui-noticebar-close-size, 20px);
+  height: var(--nutui-noticebar-close-size, 20px);
+  background: conic-gradient(var(--nutui-noticebar-close-ring-color, var(--nutui-color-text-help)) 0% var(--progress), var(--nutui-noticebar-close-ring-shadow-color, var(--nutui-color-border)) var(--progress) 100%);
+  border-radius: 50%;
+}
+.nut-noticebar .nut-noticebar-box-close-countdown::before {
+  content: "";
+  position: absolute;
+  inset: scale-px(1px);
+  background: var(--nutui-noticebar-background, rgb(251, 248, 220));
+  border-radius: 50%;
+}
+.nut-noticebar .nut-noticebar-box-close-icon {
+  position: relative;
+  width: var(--nutui-noticebar-close-icon-size, 10px);
+  height: var(--nutui-noticebar-close-icon-size, 10px);
+  color: var(--nutui-noticebar-close-color, var(--nutui-color-text-help));
+}
+.nut-noticebar .nut-noticebar-box-left-icon--product {
+  height: scale-px(32px);
+  min-width: scale-px(32px);
+}
+.nut-noticebar .nut-noticebar-box-left-icon--product img {
+  background: #ffffff;
+  border-radius: var(--nutui-noticebar-left-icon-border-radius, 4px);
+}
+.nut-noticebar .nut-noticebar-box-right {
+  flex-shrink: 0;
+}
 .nut-noticebar .nut-noticebar-box-wrap {
   display: flex;
   flex: 1;
@@ -136,11 +219,11 @@
   -webkit-box-direction: normal;
   flex-direction: column;
 }
+.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-description {
+  white-space: normal;
+}
 .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon {
   align-self: center;
-  display: flex;
-  justify-content: center;
-  width: var(--nutui-noticebar-right-icon-width, 16px);
   margin-left: var(--nutui-noticebar-icon-gap, 4px);
 }
 @keyframes nut-notice-bar-play {
@@ -167,7 +250,17 @@
 [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-action-gap, 12px);
+}
+[dir=rtl] .nut-noticebar .nut-noticebar-box-tag,
+.nut-rtl .nut-noticebar .nut-noticebar-box-tag {
+  margin-left: 0;
+  margin-right: var(--nutui-noticebar-tag-gap, 4px);
+}
+[dir=rtl] .nut-noticebar .nut-noticebar-box-action,
+.nut-rtl .nut-noticebar .nut-noticebar-box-action {
+  margin-left: 0;
+  margin-right: var(--nutui-noticebar-action-gap, 12px);
 }
 [dir=rtl] .nut-noticebar .nut-noticebar-box .play,
 .nut-rtl .nut-noticebar .nut-noticebar-box .play {
@@ -191,4 +284,14 @@
 .nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon {
   margin-left: 0;
   margin-right: var(--nutui-noticebar-icon-gap, 4px);
+}
+[dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-tag,
+.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-tag {
+  margin-left: 0;
+  margin-right: var(--nutui-noticebar-tag-gap, 4px);
+}
+[dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-action,
+.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-action {
+  margin-left: 0;
+  margin-right: var(--nutui-noticebar-action-gap, 12px);
 }

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

@@ -20,10 +20,17 @@
       .nut-noticebar-box-wrap {
         height: auto;
       }
+
+      .nut-noticebar-box-left-icon {
+        height: $noticebar-left-icon-wrap-width;
+        min-width: $noticebar-left-icon-wrap-width;
+      }
     }
 
     &-wrapable {
       .nut-noticebar-box-wrap {
+        flex: initial;
+
         .nut-noticebar-box-wrap-content {
           position: relative;
           white-space: normal;
@@ -51,26 +58,75 @@
 
     &-left-icon {
       display: flex;
+      align-items: center;
+      justify-content: center;
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
       margin-right: $noticebar-icon-gap;
       background-size: 100% 100%;
+
       .nut-icon {
-        color: $noticebar-color;
+        color: $noticebar-icon-color;
       }
+
+      img {
+        border-radius: $noticebar-left-icon-border-radius;
+      }
+    }
+
+    &-content-wrapper {
+      flex: 1;
+      overflow: hidden;
+      min-width: 0;
+    }
+
+    &-content-main {
+      display: flex;
+      align-items: center;
+    }
+
+    &-description {
+      font-size: $noticebar-description-font-size;
+      color: $noticebar-description-color;
+      line-height: $noticebar-description-line-height;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &-tag {
+      display: flex;
+      align-items: center;
+      width: $noticebar-tag-size;
+      height: $noticebar-tag-size;
+      margin-left: $noticebar-tag-gap;
+      flex-shrink: 0;
+    }
+
+    &-action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      max-width: $noticebar-action-max-width;
+      margin-left: $noticebar-action-gap;
+      font-size: $noticebar-action-font-size;
+      color: $color-primary;
+      flex-shrink: 0;
+      white-space: nowrap;
     }
 
     &-right-icon {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: $noticebar-right-icon-width;
-      margin-left: $noticebar-icon-gap;
+      width: $noticebar-close-size;
+      height: $noticebar-close-size;
+      margin-left: $noticebar-action-gap;
+      flex-shrink: 0;
+      cursor: pointer;
 
       .nut-icon {
-        width: scale-px(12px);
-        height: scale-px(12px);
-        color: $noticebar-color;
+        color: $noticebar-close-color;
       }
     }
 
@@ -79,6 +135,49 @@
       height: $icon-size-12;
     }
 
+    &-close-countdown {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: $noticebar-close-size;
+      height: $noticebar-close-size;
+      background: conic-gradient(
+        $noticebar-close-ring-color 0% var(--progress),
+        $noticebar-close-ring-shadow-color var(--progress) 100%
+      );
+      border-radius: 50%;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: scale-px(1px);
+        background: $noticebar-background;
+        border-radius: 50%;
+      }
+    }
+
+    &-close-icon {
+      position: relative;
+      width: $noticebar-close-icon-size;
+      height: $noticebar-close-icon-size;
+      color: $noticebar-close-color;
+    }
+
+    &-left-icon--product {
+      height: scale-px(32px);
+      min-width: scale-px(32px);
+
+      img {
+        background: $white;
+        border-radius: $noticebar-left-icon-border-radius;
+      }
+    }
+
+    &-right {
+      flex-shrink: 0;
+    }
+
     &-wrap {
       display: flex;
       flex: 1;
@@ -158,11 +257,12 @@
       flex-direction: column;
     }
 
+    .nut-noticebar-box-description {
+      white-space: normal;
+    }
+
     .nut-noticebar-box-right-icon {
       align-self: center;
-      display: flex;
-      justify-content: center;
-      width: $noticebar-right-icon-width;
       margin-left: $noticebar-icon-gap;
     }
   }
@@ -196,7 +296,17 @@
 
     &-right-icon {
       margin-left: 0;
-      margin-right: $noticebar-icon-gap;
+      margin-right: $noticebar-action-gap;
+    }
+
+    &-tag {
+      margin-left: 0;
+      margin-right: $noticebar-tag-gap;
+    }
+
+    &-action {
+      margin-left: 0;
+      margin-right: $noticebar-action-gap;
     }
 
     .play {
@@ -225,5 +335,15 @@
       margin-left: 0;
       margin-right: $noticebar-icon-gap;
     }
+
+    .nut-noticebar-box-tag {
+      margin-left: 0;
+      margin-right: $noticebar-tag-gap;
+    }
+
+    .nut-noticebar-box-action {
+      margin-left: 0;
+      margin-right: $noticebar-action-gap;
+    }
   }
 }

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

@@ -23,6 +23,13 @@
 .nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap, .nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap {
   height: auto;
 }
+.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-left-icon, .nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-left-icon {
+  height: var(--nutui-noticebar-left-icon-wrap-width, 32px);
+  min-width: var(--nutui-noticebar-left-icon-wrap-width, 32px);
+}
+.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap {
+  flex: initial;
+}
 .nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content {
   position: relative;
   white-space: normal;
@@ -44,30 +51,106 @@
 }
 .nut-noticebar .nut-noticebar-box-left-icon {
   display: flex;
+  align-items: center;
+  justify-content: center;
   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);
   background-size: 100% 100%;
 }
 .nut-noticebar .nut-noticebar-box-left-icon .nut-icon {
-  color: var(--nutui-noticebar-color, #d9500b);
+  color: var(--nutui-noticebar-icon-color, var(--nutui-color-primary, #ff6666));
+}
+.nut-noticebar .nut-noticebar-box-left-icon img {
+  border-radius: var(--nutui-noticebar-left-icon-border-radius, 4px);
+}
+.nut-noticebar .nut-noticebar-box-content-wrapper {
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+}
+.nut-noticebar .nut-noticebar-box-content-main {
+  display: flex;
+  align-items: center;
+}
+.nut-noticebar .nut-noticebar-box-description {
+  font-size: var(--nutui-noticebar-description-font-size, 11px);
+  color: var(--nutui-noticebar-description-color, var(--nutui-color-text));
+  line-height: var(--nutui-noticebar-description-line-height, 16px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.nut-noticebar .nut-noticebar-box-tag {
+  display: flex;
+  align-items: center;
+  width: var(--nutui-noticebar-tag-size, 12px);
+  height: var(--nutui-noticebar-tag-size, 12px);
+  margin-left: var(--nutui-noticebar-tag-gap, 4px);
+  flex-shrink: 0;
+}
+.nut-noticebar .nut-noticebar-box-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: var(--nutui-noticebar-action-max-width, 99px);
+  margin-left: var(--nutui-noticebar-action-gap, 12px);
+  font-size: var(--nutui-noticebar-action-font-size, var(--nutui-font-text-xs));
+  color: var(--nutui-color-primary, #ff6666);
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 .nut-noticebar .nut-noticebar-box-right-icon {
   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-close-size, 20px);
+  height: var(--nutui-noticebar-close-size, 20px);
+  margin-left: var(--nutui-noticebar-action-gap, 12px);
+  flex-shrink: 0;
+  cursor: pointer;
 }
 .nut-noticebar .nut-noticebar-box-right-icon .nut-icon {
-  width: scale-px(12px);
-  height: scale-px(12px);
-  color: var(--nutui-noticebar-color, #d9500b);
+  color: var(--nutui-noticebar-close-color, var(--nutui-color-text-help));
 }
 .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-close-countdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--nutui-noticebar-close-size, 20px);
+  height: var(--nutui-noticebar-close-size, 20px);
+  background: conic-gradient(var(--nutui-noticebar-close-ring-color, var(--nutui-color-text-help)) 0% var(--progress), var(--nutui-noticebar-close-ring-shadow-color, var(--nutui-color-border)) var(--progress) 100%);
+  border-radius: 50%;
+}
+.nut-noticebar .nut-noticebar-box-close-countdown::before {
+  content: "";
+  position: absolute;
+  inset: scale-px(1px);
+  background: var(--nutui-noticebar-background, rgb(251, 248, 220));
+  border-radius: 50%;
+}
+.nut-noticebar .nut-noticebar-box-close-icon {
+  position: relative;
+  width: var(--nutui-noticebar-close-icon-size, 10px);
+  height: var(--nutui-noticebar-close-icon-size, 10px);
+  color: var(--nutui-noticebar-close-color, var(--nutui-color-text-help));
+}
+.nut-noticebar .nut-noticebar-box-left-icon--product {
+  height: scale-px(32px);
+  min-width: scale-px(32px);
+}
+.nut-noticebar .nut-noticebar-box-left-icon--product img {
+  background: #ffffff;
+  border-radius: var(--nutui-noticebar-left-icon-border-radius, 4px);
+}
+.nut-noticebar .nut-noticebar-box-right {
+  flex-shrink: 0;
+}
 .nut-noticebar .nut-noticebar-box-wrap {
   display: flex;
   flex: 1;
@@ -136,11 +219,11 @@
   -webkit-box-direction: normal;
   flex-direction: column;
 }
+.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-description {
+  white-space: normal;
+}
 .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon {
   align-self: center;
-  display: flex;
-  justify-content: center;
-  width: var(--nutui-noticebar-right-icon-width, 16px);
   margin-left: var(--nutui-noticebar-icon-gap, 4px);
 }
 @keyframes nut-notice-bar-play {
@@ -167,7 +250,17 @@
 [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-action-gap, 12px);
+}
+[dir=rtl] .nut-noticebar .nut-noticebar-box-tag,
+.nut-rtl .nut-noticebar .nut-noticebar-box-tag {
+  margin-left: 0;
+  margin-right: var(--nutui-noticebar-tag-gap, 4px);
+}
+[dir=rtl] .nut-noticebar .nut-noticebar-box-action,
+.nut-rtl .nut-noticebar .nut-noticebar-box-action {
+  margin-left: 0;
+  margin-right: var(--nutui-noticebar-action-gap, 12px);
 }
 [dir=rtl] .nut-noticebar .nut-noticebar-box .play,
 .nut-rtl .nut-noticebar .nut-noticebar-box .play {
@@ -191,4 +284,14 @@
 .nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon {
   margin-left: 0;
   margin-right: var(--nutui-noticebar-icon-gap, 4px);
+}
+[dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-tag,
+.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-tag {
+  margin-left: 0;
+  margin-right: var(--nutui-noticebar-tag-gap, 4px);
+}
+[dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-action,
+.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-action {
+  margin-left: 0;
+  margin-right: var(--nutui-noticebar-action-gap, 12px);
 }

package/dist/cjs/packages/notify/Notification.js

@@ -141,7 +141,13 @@ var Notification = /*#__PURE__*/ function(_superClass) {
 }(_React_PureComponent = _react.PureComponent);
 (0, _define_property._)(Notification, "newInstance", void 0);
 Notification.newInstance = function(properties, callback) {
-    var ref = function ref(instance) {
+    var element = document.createElement('div');
+    var id = properties.id ? properties.id : "".concat(Date.now());
+    element.id = id;
+    properties.id = id;
+    document.body.appendChild(element);
+    var called = false;
+    function ref(instance) {
         if (called) {
             return;
         }
@@ -155,13 +161,7 @@ Notification.newInstance = function(properties, callback) {
                 }, 300);
             }
         });
-    };
-    var element = document.createElement('div');
-    var id = properties.id ? properties.id : "".concat(Date.now());
-    element.id = id;
-    properties.id = id;
-    document.body.appendChild(element);
-    var called = false;
+    }
     (0, _render.render)(/*#__PURE__*/ _react.createElement(Notification, (0, _object_spread_props._)((0, _object_spread._)({}, properties), {
         ref: ref
     })), element);

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

@@ -8,12 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-.nut-numberkeyboard {
-  width: 100%;
-  padding: var(--nutui-numberkeyboard-padding, 0 0 calc(22px * var(--nut-scale-f, 1)) 0);
-  user-select: none;
-  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-background, #f2f3f5));
-}
 .nut-numberkeyboard-close-icon {
   width: var(--nutui-icon-size-18, calc(18px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
   height: var(--nutui-icon-size-18, calc(18px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
@@ -22,6 +16,12 @@ page {
   width: calc(28px * var(--nut-scale-f, 1));
   height: calc(28px * var(--nut-scale-f, 1));
 }
+.nut-numberkeyboard {
+  width: 100%;
+  padding: var(--nutui-numberkeyboard-padding, 0 0 calc(22px * var(--nut-scale-f, 1)) 0);
+  user-select: none;
+  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-background, #f2f3f5));
+}
 .nut-numberkeyboard-header {
   position: relative;
   display: flex;

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

@@ -2,12 +2,6 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
-.nut-numberkeyboard {
-  width: 100%;
-  padding: var(--nutui-numberkeyboard-padding, 0 0 22px 0);
-  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);
@@ -16,6 +10,12 @@
   width: scale-px(28px);
   height: scale-px(28px);
 }
+.nut-numberkeyboard {
+  width: 100%;
+  padding: var(--nutui-numberkeyboard-padding, 0 0 22px 0);
+  user-select: none;
+  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-surface-1));
+}
 .nut-numberkeyboard-header {
   position: relative;
   display: flex;

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

@@ -2,12 +2,6 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
-.nut-numberkeyboard {
-  width: 100%;
-  padding: var(--nutui-numberkeyboard-padding, 0 0 22px 0);
-  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);
@@ -16,6 +10,12 @@
   width: scale-px(28px);
   height: scale-px(28px);
 }
+.nut-numberkeyboard {
+  width: 100%;
+  padding: var(--nutui-numberkeyboard-padding, 0 0 22px 0);
+  user-select: none;
+  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-surface-1));
+}
 .nut-numberkeyboard-header {
   position: relative;
   display: flex;