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

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

@@ -5,6 +5,7 @@
 .nut-price {
   direction: ltr;
   font-size: var(--nutui-font-text-large);
+  line-height: var(--nutui-font-text-large);
   display: flex;
   flex-direction: row;
   align-items: baseline;
@@ -12,14 +13,11 @@
 .nut-price-symbol, .nut-price-integer, .nut-price-decimal {
   color: var(--nutui-price-color, var(--nutui-color-text-help));
   font-family: "JDZH-Bold";
-  line-height: 1;
 }
 .nut-price-darkgray .nut-price-symbol, .nut-price-darkgray .nut-price-integer, .nut-price-darkgray .nut-price-decimal {
-  font-family: "JDZH-Bold";
   color: var(--nutui-price-darkgray-color, var(--nutui-gray-7));
 }
 .nut-price-primary .nut-price-symbol, .nut-price-primary .nut-price-integer, .nut-price-primary .nut-price-decimal {
-  font-family: "JDZH-Bold";
   color: var(--nutui-price-color, var(--nutui-color-primary, #ff6666));
 }
 .nut-price-symbol {
@@ -27,15 +25,19 @@
 }
 .nut-price-symbol-xlarge {
   font-size: var(--nutui-price-symbol-xlarge-size, 12px);
+  line-height: var(--nutui-price-symbol-xlarge-size, 12px);
 }
 .nut-price-symbol-large {
   font-size: var(--nutui-price-symbol-large-size, 12px);
+  line-height: var(--nutui-price-symbol-large-size, 12px);
 }
 .nut-price-symbol-normal {
   font-size: var(--nutui-price-symbol-normal-size, 12px);
+  line-height: var(--nutui-price-symbol-normal-size, 12px);
 }
 .nut-price-symbol-small {
   font-size: var(--nutui-price-symbol-small-size, 10px);
+  line-height: var(--nutui-price-symbol-small-size, 10px);
 }
 .nut-price-symbol-rtl {
   padding-right: 0;
@@ -43,36 +45,35 @@
 }
 .nut-price-integer-xlarge {
   font-size: var(--nutui-price-integer-xlarge-size, 24px);
-  /* #ifdef dynamic */
   line-height: var(--nutui-price-integer-xlarge-size, 24px);
-  /* #endif */
 }
 .nut-price-integer-large {
   font-size: var(--nutui-price-integer-large-size, 18px);
-  /* #ifdef dynamic */
   line-height: var(--nutui-price-integer-large-size, 18px);
-  /* #endif */
 }
 .nut-price-integer-normal {
   font-size: var(--nutui-price-integer-normal-size, 16px);
-  /* #ifdef dynamic */
   line-height: var(--nutui-price-integer-normal-size, 16px);
-  /* #endif */
 }
 .nut-price-integer-small {
   font-size: var(--nutui-price-integer-small-size, 12px);
+  line-height: var(--nutui-price-integer-small-size, 12px);
 }
 .nut-price-decimal-xlarge {
   font-size: var(--nutui-price-decimal-xlarge-size, 12px);
+  line-height: var(--nutui-price-decimal-xlarge-size, 12px);
 }
 .nut-price-decimal-large {
   font-size: var(--nutui-price-decimal-large-size, 12px);
+  line-height: var(--nutui-price-decimal-large-size, 12px);
 }
 .nut-price-decimal-normal {
   font-size: var(--nutui-price-decimal-normal-size, 12px);
+  line-height: var(--nutui-price-decimal-normal-size, 12px);
 }
 .nut-price-decimal-small {
   font-size: var(--nutui-price-decimal-small-size, 10px);
+  line-height: var(--nutui-price-decimal-small-size, 10px);
 }
 .nut-price-line {
   text-decoration: line-through var(--nutui-price-line-color, var(--nutui-color-text-help));

package/dist/es/packages/progress/progress.js

@@ -72,7 +72,7 @@ export var Progress = function(props) {
             }, baseStyles),
             inner: _object_spread({
                 width: "".concat(displayPercent, "%"),
-                background: effectiveColor || '#FF0F23'
+                background: effectiveColor || 'var(--nutui-color-primary, #ff0f23)'
             }, baseStyles, transitionStyle)
         };
     };
@@ -196,7 +196,7 @@ export var Progress = function(props) {
     };
     var computeInnerStyle = function() {
         var style = {
-            backgroundColor: effectiveColor || '#ff0f23',
+            backgroundColor: effectiveColor || 'var(--nutui-color-primary, #ff0f23)',
             fontSize: fontSize && pxTransform(parseInt(fontSize.toString()))
         };
         if (harmony()) {

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

@@ -35,7 +35,7 @@
     display: flex;
     align-items: center;
     transition: all 0.4s;
-    margin-left: 12px;
+    margin-left: scale-px(12px);
     color: $color-text-help;
     font-family: PingFang SC;
     font-size: $progress-text-font-size;

package/dist/es/packages/progress/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 */
@@ -10,8 +20,8 @@
 }
 .nut-progress-outer {
   flex: 1;
-  border-radius: var(--nutui-progress-border-radius, 12px);
-  height: var(--nutui-progress-height, 10px);
+  border-radius: var(--nutui-progress-border-radius, calc(12px * var(--nut-scale-f, 1)));
+  height: var(--nutui-progress-height, calc(10px * var(--nut-scale-f, 1)));
   background: var(--nutui-progress-background, var(--nutui-color-background, #f2f3f5));
 }
 .nut-progress-outer .nut-progress-active:before {
@@ -21,7 +31,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  border-radius: var(--nutui-progress-border-radius, 12px);
+  border-radius: var(--nutui-progress-border-radius, calc(12px * var(--nut-scale-f, 1)));
   animation: progressActive 2s ease-in-out infinite;
 }
 .nut-progress-inner {
@@ -30,17 +40,17 @@
   flex-direction: column;
   justify-content: center;
   transition: all 0.4s;
-  border-radius: var(--nutui-progress-border-radius, 12px);
+  border-radius: var(--nutui-progress-border-radius, calc(12px * var(--nut-scale-f, 1)));
   background: var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 .nut-progress-text {
   display: flex;
   align-items: center;
   transition: all 0.4s;
-  margin-left: 12px;
+  margin-left: calc(12px * var(--nut-scale-f, 1));
   color: var(--nutui-color-text-help, #888b94);
   font-family: PingFang SC;
-  font-size: var(--nutui-progress-text-font-size, 13px);
+  font-size: var(--nutui-progress-text-font-size, calc(13px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 @keyframes progressActive {
   0% {

package/dist/es/packages/progress/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 */
@@ -10,8 +20,8 @@
 }
 .nut-progress-outer {
   flex: 1;
-  border-radius: var(--nutui-progress-border-radius, 12px);
-  height: var(--nutui-progress-height, 10px);
+  border-radius: var(--nutui-progress-border-radius, calc(12px * var(--nut-scale-f, 1)));
+  height: var(--nutui-progress-height, calc(10px * var(--nut-scale-f, 1)));
   background: var(--nutui-progress-background, var(--nutui-color-background, #f2f3f5));
 }
 .nut-progress-outer .nut-progress-active:before {
@@ -21,7 +31,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  border-radius: var(--nutui-progress-border-radius, 12px);
+  border-radius: var(--nutui-progress-border-radius, calc(12px * var(--nut-scale-f, 1)));
   animation: progressActive 2s ease-in-out infinite;
 }
 .nut-progress-inner {
@@ -30,17 +40,17 @@
   flex-direction: column;
   justify-content: center;
   transition: all 0.4s;
-  border-radius: var(--nutui-progress-border-radius, 12px);
+  border-radius: var(--nutui-progress-border-radius, calc(12px * var(--nut-scale-f, 1)));
   background: var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 .nut-progress-text {
   display: flex;
   align-items: center;
   transition: all 0.4s;
-  margin-left: 12px;
+  margin-left: calc(12px * var(--nut-scale-f, 1));
   color: var(--nutui-color-text-help, #888b94);
   font-family: PingFang SC;
-  font-size: var(--nutui-progress-text-font-size, 13px);
+  font-size: var(--nutui-progress-text-font-size, calc(13px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 @keyframes progressActive {
   0% {

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

@@ -35,7 +35,7 @@
     display: flex;
     align-items: center;
     transition: all 0.4s;
-    margin-left: 12px;
+    margin-left: scale-px(12px);
     color: $color-text-help;
     font-family: PingFang SC;
     font-size: $progress-text-font-size;

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

@@ -37,7 +37,7 @@
   display: flex;
   align-items: center;
   transition: all 0.4s;
-  margin-left: 12px;
+  margin-left: scale-px(12px);
   color: var(--nutui-color-text-help);
   font-family: PingFang SC;
   font-size: var(--nutui-progress-text-font-size, 9px);

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

@@ -35,7 +35,7 @@
     display: flex;
     align-items: center;
     transition: all 0.4s;
-    margin-left: 12px;
+    margin-left: scale-px(12px);
     color: $color-text-help;
     font-family: PingFang SC;
     font-size: $progress-text-font-size;

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

@@ -37,7 +37,7 @@
   display: flex;
   align-items: center;
   transition: all 0.4s;
-  margin-left: 12px;
+  margin-left: scale-px(12px);
   color: var(--nutui-color-text-help);
   font-family: PingFang SC;
   font-size: var(--nutui-progress-text-font-size, 9px);

package/dist/es/packages/pulltorefresh/style/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/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));
 }