@nutui/nutui-react 3.0.20 → 3.1.0-beta.1

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

@@ -0,0 +1,120 @@
+.nut-quickenter {
+  width: 100%;
+  /* 限制弹层最大高度，包含安全区 */
+  max-height: calc($quickenter-max-height + env(safe-area-inset-top, 0));
+  background: $quickenter-bg-color;
+  border-radius: 0 0 scale-px(12px) scale-px(12px);
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  box-shadow: $quickenter-box-shadow;
+  // backdrop-filter: $quickenter-backdrop-filter;
+
+  &.safe-area-top {
+    /* 使用 env fallback，确保旧浏览器返回 0 */
+    padding-top: calc(
+      env(safe-area-inset-top, 0) * var(--nutui-safe-area-multiple, 1)
+    );
+  }
+
+  &-control {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: scale-px(30px) scale-px(16px) 0;
+    box-sizing: border-box;
+  }
+
+  &-title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
+    color: $quickenter-title-color;
+    font-size: $quickenter-title-font-size;
+  }
+
+  &-close-btn {
+    color: $quickenter-close-icon-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg,
+    .nut-icon {
+      width: $quickenter-close-icon-size;
+      height: $quickenter-close-icon-size;
+    }
+  }
+
+  &-content {
+    flex: 1;
+    padding: scale-px(10px) scale-px(28px);
+    overflow-y: hidden; // 始终可滚动，防止内容被遮挡
+    box-sizing: border-box;
+
+    &-scrollable {
+      overflow-y: auto; // Only scroll when > 8 items
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
+  &-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  &-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    width: scale-px(56px);
+    padding: 0 0 scale-px(12px) 0; // Reduced from 16px to ensure 2 rows fit in 256px
+    box-sizing: border-box;
+    cursor: pointer;
+
+    // Calculate gap for 4 items per row: (100% - 4 * 56px) / 3
+    margin-right: calc((100% - scale-px(224px)) / 3);
+
+    &:nth-child(4n) {
+      margin-right: 0;
+    }
+
+    &-icon {
+      width: scale-px(56px);
+      height: scale-px(56px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      background: $quickenter-item-icon-bg-color;
+      color: $quickenter-item-icon-color;
+      margin-bottom: scale-px(8px);
+      flex-shrink: 0;
+
+      svg,
+      .nut-icon {
+        width: $icon-size-22;
+        height: $icon-size-22;
+      }
+    }
+
+    &-title {
+      font-size: $quickenter-item-title-font-size;
+      color: $quickenter-item-title-color;
+      text-align: center;
+      line-height: $line-height-md;
+      // Allow multi-line if text is long, preventing truncation
+      white-space: normal;
+      word-wrap: break-word;
+      width: scale-px(72px); // Allow text to be slightly wider than icon
+      margin-left: scale-px(-8px); // Center 72px title over 56px icon
+      margin-right: scale-px(-8px);
+    }
+  }
+}

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

@@ -0,0 +1,106 @@
+@charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-quickenter {
+  width: 100%;
+  /* 限制弹层最大高度，包含安全区 */
+  max-height: calc(var(--nutui-quickenter-max-height, 256px) + env(safe-area-inset-top, 0));
+  background: var(--nutui-quickenter-bg-color, #f5f5f5);
+  border-radius: 0 0 scale-px(12px) scale-px(12px);
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--nutui-quickenter-box-shadow, 0px 8px 16px rgba(141, 153, 167, 0.2), 0px -0.5px 0px rgba(0, 0, 0, 0.05) inset);
+}
+.nut-quickenter.safe-area-top {
+  /* 使用 env fallback，确保旧浏览器返回 0 */
+  padding-top: calc(env(safe-area-inset-top, 0) * var(--nutui-safe-area-multiple, 1));
+}
+.nut-quickenter-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: scale-px(30px) scale-px(16px) 0;
+  box-sizing: border-box;
+}
+.nut-quickenter-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  color: var(--nutui-quickenter-title-color, var(--nutui-color-title));
+  font-size: var(--nutui-quickenter-title-font-size, var(--nutui-font-text));
+}
+.nut-quickenter-close-btn {
+  color: var(--nutui-quickenter-close-icon-color, #808080);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.nut-quickenter-close-btn svg,
+.nut-quickenter-close-btn .nut-icon {
+  width: var(--nutui-quickenter-close-icon-size, 12px);
+  height: var(--nutui-quickenter-close-icon-size, 12px);
+}
+.nut-quickenter-content {
+  flex: 1;
+  padding: scale-px(10px) scale-px(28px);
+  overflow-y: hidden;
+  box-sizing: border-box;
+}
+.nut-quickenter-content-scrollable {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.nut-quickenter-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  width: 100%;
+}
+.nut-quickenter-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: scale-px(56px);
+  padding: 0 0 scale-px(12px) 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  margin-right: calc((100% - scale-px(224px)) / 3);
+}
+.nut-quickenter-item:nth-child(4n) {
+  margin-right: 0;
+}
+.nut-quickenter-item-icon {
+  width: scale-px(56px);
+  height: scale-px(56px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--nutui-quickenter-item-icon-bg-color, #ffffff);
+  color: var(--nutui-quickenter-item-icon-color, var(--nutui-color-title));
+  margin-bottom: scale-px(8px);
+  flex-shrink: 0;
+}
+.nut-quickenter-item-icon svg,
+.nut-quickenter-item-icon .nut-icon {
+  width: var(--nutui-icon-size-22, 22px);
+  height: var(--nutui-icon-size-22, 22px);
+}
+.nut-quickenter-item-title {
+  font-size: var(--nutui-quickenter-item-title-font-size, var(--nutui-font-text-small));
+  color: var(--nutui-quickenter-item-title-color, var(--nutui-color-title));
+  text-align: center;
+  line-height: var(--nutui-line-height-md, var(--nutui-font-size-md, 16px));
+  white-space: normal;
+  word-wrap: break-word;
+  width: scale-px(72px);
+  margin-left: scale-px(-8px);
+  margin-right: scale-px(-8px);
+}

package/dist/cjs/packages/radio/style/radio.scss

@@ -35,7 +35,7 @@
     &-checked {
       color: $color-primary;
       background-color: $white;
-      box-shadow: 0px 2px 4px 0px #ff0f2333;
+      box-shadow: 0 scale-px(2px) scale-px(4px) 0 #ff0f2333;
       border-radius: 50%;
 
       &.nut-radio-icon-disabled {
@@ -59,14 +59,14 @@
     display: inline-flex;
     /* #endif */
     align-items: center;
-    min-height: 30px;
+    min-height: scale-px(30px);
     padding: $radio-button-padding;
     font-size: $radio-button-font-size;
     background: $radio-button-background;
     border-radius: $radio-button-border-radius;
     color: $radio-label-color;
     box-sizing: border-box;
-    border: 1px solid $radio-button-background;
+    border: scale-px(1px) solid $radio-button-background;
 
     &-active {
       background: $color-primary-light-pressed;
@@ -76,14 +76,14 @@
 
     &-disabled {
       color: $color-text-disabled;
-      border: 1px solid $radio-button-background;
+      border: scale-px(1px) solid $radio-button-background;
     }
   }
 
   .nut-radio-button-active.nut-radio-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: 1px solid $color-text-disabled;
+    border: scale-px(1px) solid $color-text-disabled;
   }
 }
 

package/dist/cjs/packages/radio/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 */
@@ -11,12 +21,12 @@
   flex-direction: row-reverse;
 }
 .nut-radio.nut-radio-reverse .nut-radio-label {
-  margin-right: var(--nutui-radio-label-margin-left, 4px);
+  margin-right: var(--nutui-radio-label-margin-left, calc(4px * var(--nut-scale-f, 1)));
   margin-left: 0;
 }
 .nut-radio-label {
-  margin-left: var(--nutui-radio-label-margin-left, 4px);
-  font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-s, 12px));
+  margin-left: var(--nutui-radio-label-margin-left, calc(4px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-radio-label-disabled {
@@ -27,13 +37,13 @@
   background-color: #ffffff;
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
-  font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-icon, 16px));
+  font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-icon, calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1)))));
   border-radius: 50%;
 }
 .nut-radio-icon-checked {
   color: var(--nutui-color-primary, #ff0f23);
   background-color: #ffffff;
-  box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
+  box-shadow: 0 calc(2px * var(--nut-scale-f, 1)) calc(4px * var(--nut-scale-f, 1)) 0 rgba(255, 15, 35, 0.2);
   border-radius: 50%;
 }
 .nut-radio-icon-checked.nut-radio-icon-disabled {
@@ -53,28 +63,28 @@
   display: inline-flex;
   /* #endif */
   align-items: center;
-  min-height: 30px;
-  padding: var(--nutui-radio-button-padding, 5px 18px);
-  font-size: var(--nutui-radio-button-font-size, var(--nutui-font-size-s, 12px));
+  min-height: calc(30px * var(--nut-scale-f, 1));
+  padding: var(--nutui-radio-button-padding, calc(5px * var(--nut-scale-f, 1)) calc(18px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-radio-button-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   background: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
-  border-radius: var(--nutui-radio-button-border-radius, 15px);
+  border-radius: var(--nutui-radio-button-border-radius, calc(15px * var(--nut-scale-f, 1)));
   color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
   box-sizing: border-box;
-  border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio-button-active {
   background: var(--nutui-color-primary-light-pressed, #ffebf1);
   color: var(--nutui-color-primary, #ff0f23);
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  border: var(--nutui-radio-button-active-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));
 }
 .nut-radio-button-disabled {
   color: var(--nutui-color-text-disabled, #c2c4cc);
-  border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio .nut-radio-button-active.nut-radio-button-disabled {
   background: var(--nutui-color-text-disabled, #c2c4cc);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-text-disabled, #c2c4cc);
 }
 
 [dir=rtl] .nut-radio:last-child,
@@ -84,11 +94,11 @@
 }
 [dir=rtl] .nut-radio.nut-radio-reverse .nut-radio-label,
 .nut-rtl .nut-radio.nut-radio-reverse .nut-radio-label {
-  margin-left: var(--nutui-radio-label-margin-left, 4px);
+  margin-left: var(--nutui-radio-label-margin-left, calc(4px * var(--nut-scale-f, 1)));
   margin-right: 0;
 }
 [dir=rtl] .nut-radio-label,
 .nut-rtl .nut-radio-label {
   margin-left: 0;
-  margin-right: var(--nutui-radio-label-margin-left, 4px);
+  margin-right: var(--nutui-radio-label-margin-left, calc(4px * var(--nut-scale-f, 1)));
 }

package/dist/cjs/packages/radio/style-jmapp/radio.scss

@@ -35,7 +35,7 @@
     &-checked {
       color: $color-primary;
       background-color: $white;
-      box-shadow: 0px 2px 4px 0px #ff0f2333;
+      box-shadow: 0 scale-px(2px) scale-px(4px) 0 #ff0f2333;
       border-radius: 50%;
 
       &.nut-radio-icon-disabled {
@@ -59,14 +59,14 @@
     display: inline-flex;
     /* #endif */
     align-items: center;
-    min-height: 30px;
+    min-height: scale-px(30px);
     padding: $radio-button-padding;
     font-size: $radio-button-font-size;
     background: $radio-button-background;
     border-radius: $radio-button-border-radius;
     color: $radio-label-color;
     box-sizing: border-box;
-    border: 1px solid $radio-button-background;
+    border: scale-px(1px) solid $radio-button-background;
 
     &-active {
       background: $color-primary-light-pressed;
@@ -76,14 +76,14 @@
 
     &-disabled {
       color: $color-text-disabled;
-      border: 1px solid $radio-button-background;
+      border: scale-px(1px) solid $radio-button-background;
     }
   }
 
   .nut-radio-button-active.nut-radio-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: 1px solid $color-text-disabled;
+    border: scale-px(1px) solid $color-text-disabled;
   }
 }
 

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

@@ -33,7 +33,7 @@
 .nut-radio-icon-checked {
   color: var(--nutui-color-primary);
   background-color: #ffffff;
-  box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
+  box-shadow: 0 scale-px(2px) scale-px(4px) 0 rgba(255, 15, 35, 0.2);
   border-radius: 50%;
 }
 .nut-radio-icon-checked.nut-radio-icon-disabled {
@@ -53,14 +53,14 @@
   display: inline-flex;
   /* #endif */
   align-items: center;
-  min-height: 30px;
+  min-height: scale-px(30px);
   padding: var(--nutui-radio-button-padding, 5px 18px);
   font-size: var(--nutui-radio-button-font-size, var(--nutui-font-text));
   background: var(--nutui-radio-button-background, var(--nutui-color-surface-1));
   border-radius: var(--nutui-radio-button-border-radius, var(--nutui-radius-xs));
   color: var(--nutui-radio-label-color, var(--nutui-color-text));
   box-sizing: border-box;
-  border: 1px solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
+  border: scale-px(1px) solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
 }
 .nut-radio-button-active {
   background: var(--nutui-color-primary-light-pressed);
@@ -69,12 +69,12 @@
 }
 .nut-radio-button-disabled {
   color: var(--nutui-color-text-disabled);
-  border: 1px solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
+  border: scale-px(1px) solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
 }
 .nut-radio .nut-radio-button-active.nut-radio-button-disabled {
   background: var(--nutui-color-text-disabled);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled);
+  border: scale-px(1px) solid var(--nutui-color-text-disabled);
 }
 
 [dir=rtl] .nut-radio:last-child,

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

@@ -35,7 +35,7 @@
     &-checked {
       color: $color-primary;
       background-color: $white;
-      box-shadow: 0px 2px 4px 0px #ff0f2333;
+      box-shadow: 0 scale-px(2px) scale-px(4px) 0 #ff0f2333;
       border-radius: 50%;
 
       &.nut-radio-icon-disabled {
@@ -59,14 +59,14 @@
     display: inline-flex;
     /* #endif */
     align-items: center;
-    min-height: 30px;
+    min-height: scale-px(30px);
     padding: $radio-button-padding;
     font-size: $radio-button-font-size;
     background: $radio-button-background;
     border-radius: $radio-button-border-radius;
     color: $radio-label-color;
     box-sizing: border-box;
-    border: 1px solid $radio-button-background;
+    border: scale-px(1px) solid $radio-button-background;
 
     &-active {
       background: $color-primary-light-pressed;
@@ -76,14 +76,14 @@
 
     &-disabled {
       color: $color-text-disabled;
-      border: 1px solid $radio-button-background;
+      border: scale-px(1px) solid $radio-button-background;
     }
   }
 
   .nut-radio-button-active.nut-radio-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: 1px solid $color-text-disabled;
+    border: scale-px(1px) solid $color-text-disabled;
   }
 }
 

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

@@ -33,7 +33,7 @@
 .nut-radio-icon-checked {
   color: var(--nutui-color-primary, #ff6666);
   background-color: #ffffff;
-  box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
+  box-shadow: 0 scale-px(2px) scale-px(4px) 0 rgba(255, 15, 35, 0.2);
   border-radius: 50%;
 }
 .nut-radio-icon-checked.nut-radio-icon-disabled {
@@ -53,14 +53,14 @@
   display: inline-flex;
   /* #endif */
   align-items: center;
-  min-height: 30px;
+  min-height: scale-px(30px);
   padding: var(--nutui-radio-button-padding, 5px 18px);
   font-size: var(--nutui-radio-button-font-size, var(--nutui-font-text));
   background: var(--nutui-radio-button-background, var(--nutui-color-surface-1));
   border-radius: var(--nutui-radio-button-border-radius, var(--nutui-radius-xs));
   color: var(--nutui-radio-label-color, var(--nutui-color-text));
   box-sizing: border-box;
-  border: 1px solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
+  border: scale-px(1px) solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
 }
 .nut-radio-button-active {
   background: var(--nutui-color-primary-light-pressed, #ffcccc);
@@ -69,12 +69,12 @@
 }
 .nut-radio-button-disabled {
   color: var(--nutui-color-text-disabled);
-  border: 1px solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
+  border: scale-px(1px) solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
 }
 .nut-radio .nut-radio-button-active.nut-radio-button-disabled {
   background: var(--nutui-color-text-disabled);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled);
+  border: scale-px(1px) solid var(--nutui-color-text-disabled);
 }
 
 [dir=rtl] .nut-radio:last-child,

package/dist/cjs/packages/radiogroup/style/radiogroup.scss

@@ -23,7 +23,7 @@
       }
 
       &-button {
-        border: 1px solid $radio-button-background;
+        border: scale-px(1px) solid $radio-button-background;
       }
 
       &-button-active {
@@ -38,7 +38,7 @@
 
     .nut-radio {
       &-button {
-        border: 1px solid $white;
+        border: scale-px(1px) solid $white;
       }
 
       &-button-active {
@@ -55,7 +55,7 @@
   .nut-radio-button-active.nut-radio-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: 1px solid $color-text-disabled;
+    border: scale-px(1px) solid $color-text-disabled;
   }
 }
 

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

@@ -1,12 +1,22 @@
+: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 */
 /* #endif */
 .nut-radiogroup .nut-radio {
-  margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
+  margin: 0 var(--nutui-radiogroup-radio-margin, calc(20px * var(--nut-scale-f, 1))) var(--nutui-radiogroup-radio-margin-bottom, calc(5px * var(--nut-scale-f, 1))) 0;
 }
 .nut-radiogroup .nut-radio-label {
-  margin: var(--nutui-radiogroup-radio-label-margin, 0 5px);
+  margin: var(--nutui-radiogroup-radio-label-margin, 0 calc(5px * var(--nut-scale-f, 1)));
 }
 .nut-radiogroup .nut-radio-button {
   background-color: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
@@ -19,33 +29,33 @@
   justify-content: space-between;
 }
 .nut-radiogroup-vertical .nut-radio-button {
-  border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radiogroup-vertical .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  border: var(--nutui-radio-button-active-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));
   background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
 }
 .nut-radiogroup-horizontal {
   display: flex;
 }
 .nut-radiogroup-horizontal .nut-radio-button {
-  border: 1px solid #ffffff;
+  border: calc(1px * var(--nut-scale-f, 1)) solid #ffffff;
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  border: var(--nutui-radio-button-active-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));
   background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
 }
 .nut-radiogroup-horizontal .nut-radio:last-child {
-  margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
+  margin: 0 var(--nutui-radiogroup-radio-margin, calc(20px * var(--nut-scale-f, 1))) var(--nutui-radiogroup-radio-margin-bottom, calc(5px * var(--nut-scale-f, 1))) 0;
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
   background: var(--nutui-color-text-disabled, #c2c4cc);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-text-disabled, #c2c4cc);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,
 .nut-rtl .nut-radiogroup .nut-radio {
-  margin-left: var(--nutui-radiogroup-radio-margin, 20px);
+  margin-left: var(--nutui-radiogroup-radio-margin, calc(20px * var(--nut-scale-f, 1)));
   margin-right: 0;
 }

package/dist/cjs/packages/radiogroup/style-jmapp/radiogroup.scss

@@ -23,7 +23,7 @@
       }
 
       &-button {
-        border: 1px solid $radio-button-background;
+        border: scale-px(1px) solid $radio-button-background;
       }
 
       &-button-active {
@@ -38,7 +38,7 @@
 
     .nut-radio {
       &-button {
-        border: 1px solid $white;
+        border: scale-px(1px) solid $white;
       }
 
       &-button-active {
@@ -55,7 +55,7 @@
   .nut-radio-button-active.nut-radio-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: 1px solid $color-text-disabled;
+    border: scale-px(1px) solid $color-text-disabled;
   }
 }
 

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

@@ -19,7 +19,7 @@
   justify-content: space-between;
 }
 .nut-radiogroup-vertical .nut-radio-button {
-  border: 1px solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
+  border: scale-px(1px) solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
 }
 .nut-radiogroup-vertical .nut-radio-button-active {
   border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary-light-pressed));
@@ -29,7 +29,7 @@
   display: flex;
 }
 .nut-radiogroup-horizontal .nut-radio-button {
-  border: 1px solid #ffffff;
+  border: scale-px(1px) solid #ffffff;
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
   border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary-light-pressed));
@@ -41,7 +41,7 @@
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
   background: var(--nutui-color-text-disabled);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled);
+  border: scale-px(1px) solid var(--nutui-color-text-disabled);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,