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

package/dist/es/packages/pulltorefresh/style/style.css

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
@@ -5,7 +15,7 @@
 .nut-pulltorefresh-head {
   overflow: hidden;
   position: relative;
-  font-size: 12px;
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-pulltorefresh-head-content {
   position: absolute;
@@ -19,9 +29,9 @@
   align-items: center;
 }
 .nut-pulltorefresh-head-content-icons {
-  width: var(--nutui-pulltorefresh-icon-width, 36px);
-  height: var(--nutui-pulltorefresh-icon-height, 26px);
-  margin-bottom: 4px;
+  width: var(--nutui-pulltorefresh-icon-width, calc(36px * var(--nut-scale-f, 1)));
+  height: var(--nutui-pulltorefresh-icon-height, calc(26px * var(--nut-scale-f, 1)));
+  margin-bottom: calc(4px * var(--nut-scale-f, 1));
 }
 .nut-pulltorefresh-primary {
   background: var(--nutui-pulltorefresh-color-primary, var(--nutui-color-primary, #ff0f23));

package/dist/es/packages/pulltorefresh/style/style.harmony.css

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
@@ -5,7 +15,7 @@
 .nut-pulltorefresh-head {
   overflow: hidden;
   position: relative;
-  font-size: 12px;
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-pulltorefresh-head-content {
   position: absolute;
@@ -19,9 +29,9 @@
   align-items: center;
 }
 .nut-pulltorefresh-head-content-icons {
-  width: var(--nutui-pulltorefresh-icon-width, 36px);
-  height: var(--nutui-pulltorefresh-icon-height, 26px);
-  margin-bottom: 4px;
+  width: var(--nutui-pulltorefresh-icon-width, calc(36px * var(--nut-scale-f, 1)));
+  height: var(--nutui-pulltorefresh-icon-height, calc(26px * var(--nut-scale-f, 1)));
+  margin-bottom: calc(4px * var(--nut-scale-f, 1));
 }
 .nut-pulltorefresh-primary {
   background: var(--nutui-pulltorefresh-color-primary, var(--nutui-color-primary, #ff0f23));

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

@@ -2,7 +2,7 @@
   &-head {
     overflow: hidden;
     position: relative;
-    font-size: 12px;
+    font-size: $font-size-s;
 
     &-content {
       position: absolute;
@@ -18,7 +18,7 @@
       &-icons {
         width: $pulltorefresh-icon-width;
         height: $pulltorefresh-icon-height;
-        margin-bottom: 4px;
+        margin-bottom: scale-px(4px);
       }
     }
   }

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

@@ -5,7 +5,7 @@
 .nut-pulltorefresh-head {
   overflow: hidden;
   position: relative;
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
 }
 .nut-pulltorefresh-head-content {
   position: absolute;
@@ -21,7 +21,7 @@
 .nut-pulltorefresh-head-content-icons {
   width: var(--nutui-pulltorefresh-icon-width, 36px);
   height: var(--nutui-pulltorefresh-icon-height, 26px);
-  margin-bottom: 4px;
+  margin-bottom: scale-px(4px);
 }
 .nut-pulltorefresh-primary {
   background: var(--nutui-pulltorefresh-color-primary, var(--nutui-color-primary));

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

@@ -2,7 +2,7 @@
   &-head {
     overflow: hidden;
     position: relative;
-    font-size: 12px;
+    font-size: $font-size-s;
 
     &-content {
       position: absolute;
@@ -18,7 +18,7 @@
       &-icons {
         width: $pulltorefresh-icon-width;
         height: $pulltorefresh-icon-height;
-        margin-bottom: 4px;
+        margin-bottom: scale-px(4px);
       }
     }
   }

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

@@ -5,7 +5,7 @@
 .nut-pulltorefresh-head {
   overflow: hidden;
   position: relative;
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
 }
 .nut-pulltorefresh-head-content {
   position: absolute;
@@ -21,7 +21,7 @@
 .nut-pulltorefresh-head-content-icons {
   width: var(--nutui-pulltorefresh-icon-width, 36px);
   height: var(--nutui-pulltorefresh-icon-height, 26px);
-  margin-bottom: 4px;
+  margin-bottom: scale-px(4px);
 }
 .nut-pulltorefresh-primary {
   background: var(--nutui-pulltorefresh-color-primary, var(--nutui-color-primary, #ff6666));

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

@@ -1,9 +1,9 @@
 .nut-quickenter {
   width: 100%;
   /* 限制弹层最大高度，包含安全区 */
-  max-height: calc(#{$quickenter-max-height} + env(safe-area-inset-top, 0));
+  max-height: calc($quickenter-max-height + env(safe-area-inset-top, 0));
   background: $quickenter-bg-color;
-  border-radius: 0 0 12px 12px;
+  border-radius: 0 0 scale-px(12px) scale-px(12px);
   overflow: hidden;
   box-sizing: border-box;
   display: flex;
@@ -22,7 +22,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 30px 16px 0;
+    padding: scale-px(30px) scale-px(16px) 0;
     box-sizing: border-box;
   }
 
@@ -51,7 +51,7 @@
 
   &-content {
     flex: 1;
-    padding: 10px 28px;
+    padding: scale-px(10px) scale-px(28px);
     overflow-y: hidden; // 始终可滚动，防止内容被遮挡
     box-sizing: border-box;
 
@@ -73,34 +73,34 @@
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-    width: 56px;
-    padding: 0 0 12px 0; // Reduced from 16px to ensure 2 rows fit in 256px
+    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% - 224px) / 3);
+    margin-right: calc((100% - scale-px(224px)) / 3);
 
     &:nth-child(4n) {
       margin-right: 0;
     }
 
     &-icon {
-      width: 56px;
-      height: 56px;
+      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: 8px;
+      margin-bottom: scale-px(8px);
       flex-shrink: 0;
 
       svg,
       .nut-icon {
-        width: 22px;
-        height: 22px;
+        width: $icon-size-22;
+        height: $icon-size-22;
       }
     }
 
@@ -108,13 +108,13 @@
       font-size: $quickenter-item-title-font-size;
       color: $quickenter-item-title-color;
       text-align: center;
-      line-height: 1.4;
+      line-height: $line-height-md;
       // Allow multi-line if text is long, preventing truncation
       white-space: normal;
       word-wrap: break-word;
-      width: 72px; // Allow text to be slightly wider than icon
-      margin-left: -8px; // Center 72px title over 56px icon
-      margin-right: -8px;
+      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/es/packages/quickenter/style/style.css

@@ -1,4 +1,14 @@
 @charset "UTF-8";
+: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 */
@@ -6,14 +16,14 @@
 .nut-quickenter {
   width: 100%;
   /* 限制弹层最大高度，包含安全区 */
-  max-height: calc(var(--nutui-quickenter-max-height, 256px) + env(safe-area-inset-top, 0));
+  max-height: calc(var(--nutui-quickenter-max-height, calc(256px * var(--nut-scale-f, 1))) + env(safe-area-inset-top, 0));
   background: var(--nutui-quickenter-bg-color, #f5f5f5);
-  border-radius: 0 0 12px 12px;
+  border-radius: 0 0 calc(12px * var(--nut-scale-f, 1)) calc(12px * var(--nut-scale-f, 1));
   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);
+  box-shadow: var(--nutui-quickenter-box-shadow, 0px calc(8px * var(--nut-scale-f, 1)) calc(16px * var(--nut-scale-f, 1)) rgba(141, 153, 167, 0.2), 0px calc(-0.5px * var(--nut-scale-f, 1)) 0px calc(0.05 * var(--nut-scale-f, 1)) inset);
 }
 .nut-quickenter.safe-area-top {
   /* 使用 env fallback，确保旧浏览器返回 0 */
@@ -23,7 +33,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 30px 16px 0;
+  padding: calc(30px * var(--nut-scale-f, 1)) calc(16px * var(--nut-scale-f, 1)) 0;
   box-sizing: border-box;
 }
 .nut-quickenter-title {
@@ -33,7 +43,7 @@
   white-space: nowrap;
   text-align: left;
   color: var(--nutui-quickenter-title-color, var(--nutui-color-title, #1a1a1a));
-  font-size: var(--nutui-quickenter-title-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-quickenter-title-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-quickenter-close-btn {
   color: var(--nutui-quickenter-close-icon-color, #808080);
@@ -43,12 +53,12 @@
 }
 .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);
+  width: var(--nutui-quickenter-close-icon-size, var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1)))));
+  height: var(--nutui-quickenter-close-icon-size, var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1)))));
 }
 .nut-quickenter-content {
   flex: 1;
-  padding: 10px 28px;
+  padding: calc(10px * var(--nut-scale-f, 1)) calc(28px * var(--nut-scale-f, 1));
   overflow-y: hidden;
   box-sizing: border-box;
 }
@@ -67,40 +77,40 @@
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  width: 56px;
-  padding: 0 0 12px 0;
+  width: calc(56px * var(--nut-scale-f, 1));
+  padding: 0 0 calc(12px * var(--nut-scale-f, 1)) 0;
   box-sizing: border-box;
   cursor: pointer;
-  margin-right: calc((100% - 224px) / 3);
+  margin-right: calc((100% - 224px * var(--nut-scale-f, 1)) / 3);
 }
 .nut-quickenter-item:nth-child(4n) {
   margin-right: 0;
 }
 .nut-quickenter-item-icon {
-  width: 56px;
-  height: 56px;
+  width: calc(56px * var(--nut-scale-f, 1));
+  height: calc(56px * var(--nut-scale-f, 1));
   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, #1a1a1a));
-  margin-bottom: 8px;
+  margin-bottom: calc(8px * var(--nut-scale-f, 1));
   flex-shrink: 0;
 }
 .nut-quickenter-item-icon svg,
 .nut-quickenter-item-icon .nut-icon {
-  width: 22px;
-  height: 22px;
+  width: var(--nutui-icon-size-22, calc(22px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+  height: var(--nutui-icon-size-22, calc(22px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
 }
 .nut-quickenter-item-title {
-  font-size: var(--nutui-quickenter-item-title-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-quickenter-item-title-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-quickenter-item-title-color, var(--nutui-color-title, #1a1a1a));
   text-align: center;
-  line-height: 1.4;
+  line-height: var(--nutui-line-height-md, var(--nutui-font-size-md, calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   white-space: normal;
   word-wrap: break-word;
-  width: 72px;
-  margin-left: -8px;
-  margin-right: -8px;
+  width: calc(72px * var(--nut-scale-f, 1));
+  margin-left: calc(-8px * var(--nut-scale-f, 1));
+  margin-right: calc(-8px * var(--nut-scale-f, 1));
 }

package/dist/es/packages/quickenter/style/style.harmony.css

@@ -1,4 +1,14 @@
 @charset "UTF-8";
+: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 */
@@ -63,7 +73,7 @@
   max-height: 100%;
   background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
-  font-size: var(--nutui-font-size-base, 14px);
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-popup-title {
   display: flex;
@@ -71,7 +81,7 @@
   align-items: center;
   justify-content: center;
   border-bottom: var(--nutui-popup-title-border-bottom, 0);
-  padding: var(--nutui-popup-title-padding, 11px);
+  padding: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
   position: relative;
 }
 .nut-popup-title-wrapper {
@@ -83,28 +93,31 @@
 .nut-popup-title-title {
   color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
-  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text, #505259);
-  font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-popup-description-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);
 }
 .nut-popup-title-description-gap {
-  margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base, 8px));
+  margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base, calc(8px * var(--nut-scale-f, 1))));
 }
 .nut-popup-title-left {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 11px);
-  left: var(--nutui-popup-title-padding, 11px);
+  top: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
+  left: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 .nut-popup-title-right {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 11px);
-  right: var(--nutui-popup-title-padding, 11px);
+  top: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
+  right: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
+  display: flex;
+  align-items: center;
+  justify-content: center;
   z-index: 1;
-  width: var(--nutui-popup-icon-size, 20px);
-  height: var(--nutui-popup-icon-size, 20px);
+  width: var(--nutui-popup-icon-size, calc(20px * var(--nut-scale-f, 1)));
+  height: var(--nutui-popup-icon-size, calc(20px * var(--nut-scale-f, 1)));
   color: var(--nutui-color-title, #1a1a1a);
   cursor: pointer;
 }
@@ -112,16 +125,16 @@
   opacity: 0.7;
 }
 .nut-popup-title-right-top-left {
-  top: var(--nutui-popup-title-padding, 11px);
-  left: var(--nutui-popup-title-padding, 11px);
+  top: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
+  left: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 .nut-popup-title-right-bottom-left {
-  bottom: var(--nutui-popup-title-padding, 11px);
-  left: var(--nutui-popup-title-padding, 11px);
+  bottom: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
+  left: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 .nut-popup-title-right-bottom-right {
-  right: var(--nutui-popup-title-padding, 11px);
-  bottom: var(--nutui-popup-title-padding, 11px);
+  right: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
+  bottom: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 .nut-popup-center {
   top: 50%;
@@ -133,7 +146,7 @@
   transform: translate(-50%, -50%);
 }
 .nut-popup-center.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
+  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
 .nut-popup-bottom {
   bottom: 0;
@@ -143,7 +156,7 @@
   width: 100%;
 }
 .nut-popup-bottom.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
+  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) 0 0;
 }
 .nut-popup-bottom-top {
   position: absolute;
@@ -157,7 +170,7 @@
   height: 100%;
 }
 .nut-popup-right.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
+  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
 .nut-popup-left {
   top: 0;
@@ -168,7 +181,7 @@
   height: 100%;
 }
 .nut-popup-left.nut-popup-round {
-  border-radius: 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0;
+  border-radius: 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) 0;
 }
 .nut-popup-top {
   top: 0;
@@ -178,7 +191,7 @@
   width: 100%;
 }
 .nut-popup-top.nut-popup-round {
-  border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
+  border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
 .nut-popup-slide {
   /* 从顶部滑出 */
@@ -360,27 +373,27 @@
 [dir=rtl] .nut-popup-title-left,
 .nut-rtl .nut-popup-title-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 11px);
+  right: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-popup-title-right,
 .nut-rtl .nut-popup-title-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-popup-title-right-top-left,
 .nut-rtl .nut-popup-title-right-top-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 11px);
+  right: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-popup-title-right-bottom-left,
 .nut-rtl .nut-popup-title-right-bottom-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 11px);
+  right: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-popup-title-right-bottom-right,
 .nut-rtl .nut-popup-title-right-bottom-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
 .nut-rtl .nut-popup-title .nut-icon-ArrowLeft {
@@ -406,14 +419,14 @@
 .nut-quickenter {
   width: 100%;
   /* 限制弹层最大高度，包含安全区 */
-  max-height: calc(var(--nutui-quickenter-max-height, 256px) + env(safe-area-inset-top, 0));
+  max-height: calc(var(--nutui-quickenter-max-height, calc(256px * var(--nut-scale-f, 1))) + env(safe-area-inset-top, 0));
   background: var(--nutui-quickenter-bg-color, #f5f5f5);
-  border-radius: 0 0 12px 12px;
+  border-radius: 0 0 calc(12px * var(--nut-scale-f, 1)) calc(12px * var(--nut-scale-f, 1));
   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);
+  box-shadow: var(--nutui-quickenter-box-shadow, 0px calc(8px * var(--nut-scale-f, 1)) calc(16px * var(--nut-scale-f, 1)) rgba(141, 153, 167, 0.2), 0px calc(-0.5px * var(--nut-scale-f, 1)) 0px calc(0.05 * var(--nut-scale-f, 1)) inset);
 }
 .nut-quickenter.safe-area-top {
   /* 使用 env fallback，确保旧浏览器返回 0 */
@@ -423,7 +436,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 30px 16px 0;
+  padding: calc(30px * var(--nut-scale-f, 1)) calc(16px * var(--nut-scale-f, 1)) 0;
   box-sizing: border-box;
 }
 .nut-quickenter-title {
@@ -433,7 +446,7 @@
   white-space: nowrap;
   text-align: left;
   color: var(--nutui-quickenter-title-color, var(--nutui-color-title, #1a1a1a));
-  font-size: var(--nutui-quickenter-title-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-quickenter-title-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-quickenter-close-btn {
   color: var(--nutui-quickenter-close-icon-color, #808080);
@@ -443,12 +456,12 @@
 }
 .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);
+  width: var(--nutui-quickenter-close-icon-size, var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1)))));
+  height: var(--nutui-quickenter-close-icon-size, var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1)))));
 }
 .nut-quickenter-content {
   flex: 1;
-  padding: 10px 28px;
+  padding: calc(10px * var(--nut-scale-f, 1)) calc(28px * var(--nut-scale-f, 1));
   overflow-y: hidden;
   box-sizing: border-box;
 }
@@ -467,40 +480,40 @@
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  width: 56px;
-  padding: 0 0 12px 0;
+  width: calc(56px * var(--nut-scale-f, 1));
+  padding: 0 0 calc(12px * var(--nut-scale-f, 1)) 0;
   box-sizing: border-box;
   cursor: pointer;
-  margin-right: calc((100% - 224px) / 3);
+  margin-right: calc((100% - 224px * var(--nut-scale-f, 1)) / 3);
 }
 .nut-quickenter-item:nth-child(4n) {
   margin-right: 0;
 }
 .nut-quickenter-item-icon {
-  width: 56px;
-  height: 56px;
+  width: calc(56px * var(--nut-scale-f, 1));
+  height: calc(56px * var(--nut-scale-f, 1));
   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, #1a1a1a));
-  margin-bottom: 8px;
+  margin-bottom: calc(8px * var(--nut-scale-f, 1));
   flex-shrink: 0;
 }
 .nut-quickenter-item-icon svg,
 .nut-quickenter-item-icon .nut-icon {
-  width: 22px;
-  height: 22px;
+  width: var(--nutui-icon-size-22, calc(22px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+  height: var(--nutui-icon-size-22, calc(22px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
 }
 .nut-quickenter-item-title {
-  font-size: var(--nutui-quickenter-item-title-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-quickenter-item-title-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-quickenter-item-title-color, var(--nutui-color-title, #1a1a1a));
   text-align: center;
-  line-height: 1.4;
+  line-height: var(--nutui-line-height-md, var(--nutui-font-size-md, calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   white-space: normal;
   word-wrap: break-word;
-  width: 72px;
-  margin-left: -8px;
-  margin-right: -8px;
+  width: calc(72px * var(--nut-scale-f, 1));
+  margin-left: calc(-8px * var(--nut-scale-f, 1));
+  margin-right: calc(-8px * var(--nut-scale-f, 1));
 }