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

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

@@ -15,7 +15,7 @@
     box-sizing: border-box;
     font-weight: $coutdown-font-weight;
     font-size: $countdown-font-size;
-    line-height: calc($countdown-font-size + 2px);
+    line-height: calc($countdown-font-size + scale-px(2px));
     font-family: 'JDZH-Regular';
   }
   &-number,
@@ -41,7 +41,7 @@
     background-color: $countdown-number-background-color;
     color: $countdown-number-color;
     &::after {
-      border: 1px solid $countdown-number-border-color;
+      border: scale-px(1px) solid $countdown-number-border-color;
     }
   }
 
@@ -49,7 +49,7 @@
     background-color: $countdown-number-primary-background-color;
     color: $countdown-number-primary-color;
     &::after {
-      border: 1px solid $countdown-number-primary-border-color;
+      border: scale-px(1px) solid $countdown-number-primary-border-color;
     }
   }
   &-number-text {

package/dist/cjs/packages/countdown/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 */
@@ -7,25 +17,25 @@
   flex-direction: row;
   align-items: center;
   color: var(--nutui-countdown-color, var(--nutui-color-primary, #ff0f23));
-  font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11px));
+  font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-countdown-number-primary, .nut-countdown-number, .nut-countdown-number-text, .nut-countdown-unit {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: var(--nutui-countdown-height, 16px);
+  height: var(--nutui-countdown-height, calc(16px * var(--nut-scale-f, 1)));
   box-sizing: border-box;
   font-weight: var(--nutui-countdown-font-weight, var(--nutui-font-weight, 400));
-  font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11px));
-  line-height: calc(var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11px)) + 2px);
+  font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: calc(var(--nutui-countdown-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))))) + 2px * var(--nut-scale-f, 1));
   font-family: "JDZH-Regular";
 }
 .nut-countdown-number, .nut-countdown-number-primary {
   position: relative;
-  min-width: var(--nutui-countdown-width, 16px);
+  min-width: var(--nutui-countdown-width, calc(16px * var(--nut-scale-f, 1)));
   padding: var(--nutui-countdown-number-padding, 0 0);
-  border-radius: var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2px));
-  margin: var(--nutui-countdown-number-margin, 0 1px);
+  border-radius: var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
+  margin: var(--nutui-countdown-number-margin, 0 calc(1px * var(--nut-scale-f, 1)));
   text-align: center;
 }
 .nut-countdown-number::after, .nut-countdown-number-primary::after {
@@ -36,21 +46,21 @@
   left: -50%;
   right: -50%;
   transform: scale(0.5);
-  border-radius: calc(var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2px)) * 2);
+  border-radius: calc(var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1)))) * 2);
 }
 .nut-countdown-number {
   background-color: var(--nutui-countdown-number-background-color, var(--nutui-color-background-overlay, #ffffff));
   color: var(--nutui-countdown-number-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-countdown-number::after {
-  border: 1px solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-specialdisabled, #ffadbe));
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-disabled-special, #ff91a5));
 }
 .nut-countdown-number-primary {
   background-color: var(--nutui-countdown-number-primary-background-color, var(--nutui-color-primary, #ff0f23));
   color: var(--nutui-countdown-number-primary-color, #ffffff);
 }
 .nut-countdown-number-primary::after {
-  border: 1px solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-countdown-number-text {
   border: 0;

package/dist/cjs/packages/countdown/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 */
@@ -7,25 +17,25 @@
   flex-direction: row;
   align-items: center;
   color: var(--nutui-countdown-color, var(--nutui-color-primary, #ff0f23));
-  font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11px));
+  font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-countdown-number-primary, .nut-countdown-number, .nut-countdown-number-text, .nut-countdown-unit {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: var(--nutui-countdown-height, 16px);
+  height: var(--nutui-countdown-height, calc(16px * var(--nut-scale-f, 1)));
   box-sizing: border-box;
   font-weight: var(--nutui-countdown-font-weight, var(--nutui-font-weight, 400));
-  font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11px));
-  line-height: calc(var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11px)) + 2px);
+  font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: calc(var(--nutui-countdown-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))))) + 2px * var(--nut-scale-f, 1));
   font-family: "JDZH-Regular";
 }
 .nut-countdown-number, .nut-countdown-number-primary {
   position: relative;
-  min-width: var(--nutui-countdown-width, 16px);
+  min-width: var(--nutui-countdown-width, calc(16px * var(--nut-scale-f, 1)));
   padding: var(--nutui-countdown-number-padding, 0 0);
-  border-radius: var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2px));
-  margin: var(--nutui-countdown-number-margin, 0 1px);
+  border-radius: var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
+  margin: var(--nutui-countdown-number-margin, 0 calc(1px * var(--nut-scale-f, 1)));
   text-align: center;
 }
 .nut-countdown-number::after, .nut-countdown-number-primary::after {
@@ -36,21 +46,21 @@
   left: -50%;
   right: -50%;
   transform: scale(0.5);
-  border-radius: calc(var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2px)) * 2);
+  border-radius: calc(var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1)))) * 2);
 }
 .nut-countdown-number {
   background-color: var(--nutui-countdown-number-background-color, var(--nutui-color-background-overlay, #ffffff));
   color: var(--nutui-countdown-number-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-countdown-number::after {
-  border: 1px solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-specialdisabled, #ffadbe));
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-disabled-special, #ff91a5));
 }
 .nut-countdown-number-primary {
   background-color: var(--nutui-countdown-number-primary-background-color, var(--nutui-color-primary, #ff0f23));
   color: var(--nutui-countdown-number-primary-color, #ffffff);
 }
 .nut-countdown-number-primary::after {
-  border: 1px solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-countdown-number-text {
   border: 0;

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

@@ -15,7 +15,7 @@
     box-sizing: border-box;
     font-weight: $coutdown-font-weight;
     font-size: $countdown-font-size;
-    line-height: calc($countdown-font-size + 2px);
+    line-height: calc($countdown-font-size + scale-px(2px));
     font-family: 'JDZH-Regular';
   }
   &-number,
@@ -41,7 +41,7 @@
     background-color: $countdown-number-background-color;
     color: $countdown-number-color;
     &::after {
-      border: 1px solid $countdown-number-border-color;
+      border: scale-px(1px) solid $countdown-number-border-color;
     }
   }
 
@@ -49,7 +49,7 @@
     background-color: $countdown-number-primary-background-color;
     color: $countdown-number-primary-color;
     &::after {
-      border: 1px solid $countdown-number-primary-border-color;
+      border: scale-px(1px) solid $countdown-number-primary-border-color;
     }
   }
   &-number-text {

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

@@ -17,7 +17,7 @@
   box-sizing: border-box;
   font-weight: var(--nutui-countdown-font-weight, 400);
   font-size: var(--nutui-countdown-font-size, 14px);
-  line-height: calc(var(--nutui-countdown-font-size, 14px) + 2px);
+  line-height: calc(var(--nutui-countdown-font-size, 14px) + scale-px(2px));
   font-family: "JDZH-Regular";
 }
 .nut-countdown-number, .nut-countdown-number-primary {
@@ -43,14 +43,14 @@
   color: var(--nutui-countdown-number-color, var(--nutui-color-primary));
 }
 .nut-countdown-number::after {
-  border: 1px solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-light-pressed));
+  border: scale-px(1px) solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-light-pressed));
 }
 .nut-countdown-number-primary {
   background-color: var(--nutui-countdown-number-primary-background-color, var(--nutui-color-primary));
   color: var(--nutui-countdown-number-primary-color, #ffffff);
 }
 .nut-countdown-number-primary::after {
-  border: 1px solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary));
+  border: scale-px(1px) solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary));
 }
 .nut-countdown-number-text {
   border: 0;

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

@@ -15,7 +15,7 @@
     box-sizing: border-box;
     font-weight: $coutdown-font-weight;
     font-size: $countdown-font-size;
-    line-height: calc($countdown-font-size + 2px);
+    line-height: calc($countdown-font-size + scale-px(2px));
     font-family: 'JDZH-Regular';
   }
   &-number,
@@ -41,7 +41,7 @@
     background-color: $countdown-number-background-color;
     color: $countdown-number-color;
     &::after {
-      border: 1px solid $countdown-number-border-color;
+      border: scale-px(1px) solid $countdown-number-border-color;
     }
   }
 
@@ -49,7 +49,7 @@
     background-color: $countdown-number-primary-background-color;
     color: $countdown-number-primary-color;
     &::after {
-      border: 1px solid $countdown-number-primary-border-color;
+      border: scale-px(1px) solid $countdown-number-primary-border-color;
     }
   }
   &-number-text {

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

@@ -17,7 +17,7 @@
   box-sizing: border-box;
   font-weight: var(--nutui-countdown-font-weight, 400);
   font-size: var(--nutui-countdown-font-size, 14px);
-  line-height: calc(var(--nutui-countdown-font-size, 14px) + 2px);
+  line-height: calc(var(--nutui-countdown-font-size, 14px) + scale-px(2px));
   font-family: "JDZH-Regular";
 }
 .nut-countdown-number, .nut-countdown-number-primary {
@@ -43,14 +43,14 @@
   color: var(--nutui-countdown-number-color, var(--nutui-color-primary, #ff6666));
 }
 .nut-countdown-number::after {
-  border: 1px solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-light, #ffe5e5));
+  border: scale-px(1px) solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-light, #ffe5e5));
 }
 .nut-countdown-number-primary {
   background-color: var(--nutui-countdown-number-primary-background-color, var(--nutui-color-primary, #ff6666));
   color: var(--nutui-countdown-number-primary-color, #ffffff);
 }
 .nut-countdown-number-primary::after {
-  border: 1px solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary, #ff6666));
+  border: scale-px(1px) solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary, #ff6666));
 }
 .nut-countdown-number-text {
   border: 0;

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

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
@@ -9,19 +19,19 @@
   /* #ifndef dynamic*/
   display: inline-flex;
   /* #endif */
-  height: var(--nutui-countup-height, 32px);
+  height: var(--nutui-countup-height, calc(32px * var(--nut-scale-f, 1)));
   overflow: hidden;
   direction: ltr;
 }
 .nut-countup-listitem {
-  height: var(--nutui-countup-height, 32px);
+  height: var(--nutui-countup-height, calc(32px * var(--nut-scale-f, 1)));
   overflow: hidden;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
 .nut-countup-listitem-number {
   margin: 0 var(--nutui-countup-lr-margin, 0);
-  border-radius: var(--nutui-countup-border-radius, 4px);
+  border-radius: var(--nutui-countup-border-radius, calc(4px * var(--nut-scale-f, 1)));
   color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a));
   background-color: var(--nutui-countup-bg-color, inherit);
 }
@@ -30,7 +40,7 @@
   height: 80%;
   align-items: flex-end;
   color: var(--nutui-countup-separator-color, var(--nutui-color-title, #1a1a1a));
-  font-size: var(--nutui-countup-base-size, 18px);
+  font-size: var(--nutui-countup-base-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-countup-number {
@@ -42,9 +52,9 @@
   transform: translate(0, 0);
 }
 .nut-countup-number-text {
-  height: var(--nutui-countup-height, 32px);
-  line-height: var(--nutui-countup-height, 32px);
+  height: var(--nutui-countup-height, calc(32px * var(--nut-scale-f, 1)));
+  line-height: var(--nutui-countup-height, calc(32px * var(--nut-scale-f, 1)));
   color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a));
-  font-size: var(--nutui-countup-base-size, 18px);
+  font-size: var(--nutui-countup-base-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   font-weight: var(--nutui-font-weight-bold, 600);
 }

package/dist/cjs/packages/datepicker/datepicker.js

@@ -100,11 +100,9 @@ var InternalPicker = function InternalPicker(props, ref) {
             if (!(0, _reactfastcompare.default)((_this = new Date(selectedDate)) === null || _this === void 0 ? void 0 : _this.getTime(), newDate === null || newDate === void 0 ? void 0 : newDate.getTime())) {
                 setInnerDate((0, _utils.formatValue)(newDate, startDate, endDate));
             }
-            onChange === null || onChange === void 0 ? void 0 : onChange(selectedOptions, [
-                String(newDate.getFullYear()),
-                String(newDate.getMonth() + 1),
-                String(newDate.getDate())
-            ], index);
+            onChange === null || onChange === void 0 ? void 0 : onChange(selectedOptions, selectedOptions.map(function(val) {
+                return val.value;
+            }), index);
         }
     };
     var handleConfirmDateComparison = function handleConfirmDateComparison(newDate) {

package/dist/cjs/packages/datepicker/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 */

package/dist/cjs/packages/datepicker/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 {
@@ -407,7 +420,7 @@
   position: relative;
   display: flex;
   width: 100%;
-  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  height: calc(var(--nutui-picker-item-height, calc(36px * var(--nut-scale-f, 1))) * 7);
   overflow: hidden;
 }
 .nut-pickerview-mask, .nut-pickerview-indicator {
@@ -422,14 +435,14 @@
   bottom: 0;
   background-image: var(--picker-mask-background, linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)));
   background-position: top, bottom;
-  background-size: 100% calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  background-size: 100% calc((var(--nutui-picker-item-height, calc(36px * var(--nut-scale-f, 1))) * 7 - var(--nutui-picker-item-height, calc(36px * var(--nut-scale-f, 1)))) / 2);
   background-repeat: no-repeat;
   transform: translateZ(0);
 }
 .nut-pickerview-indicator {
-  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
-  height: var(--nutui-picker-item-height, 36px);
-  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  top: calc((var(--nutui-picker-item-height, calc(36px * var(--nut-scale-f, 1))) * 7 - var(--nutui-picker-item-height, calc(36px * var(--nut-scale-f, 1)))) / 2);
+  height: var(--nutui-picker-item-height, calc(36px * var(--nut-scale-f, 1)));
+  border: var(--nutui-picker-item-active-line-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
   border-left: 0;
   border-right: 0;
   box-sizing: border-box;
@@ -437,20 +450,20 @@
 .nut-pickerview-list {
   position: relative;
   flex: 1;
-  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  height: calc(var(--nutui-picker-item-height, calc(36px * var(--nut-scale-f, 1))) * 7);
   overflow: hidden;
   touch-action: none;
 }
 .nut-pickerview-roller {
   position: absolute;
-  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  top: calc((var(--nutui-picker-item-height, calc(36px * var(--nut-scale-f, 1))) * 7 - var(--nutui-picker-item-height, calc(36px * var(--nut-scale-f, 1)))) / 2);
   width: 100%;
-  height: var(--nutui-picker-item-height, 36px);
+  height: var(--nutui-picker-item-height, calc(36px * var(--nut-scale-f, 1)));
   z-index: 1;
   transform-style: preserve-3d;
 }
 .nut-pickerview-roller-placeholder {
-  height: var(--nutui-picker-item-height, 36px);
+  height: var(--nutui-picker-item-height, calc(36px * var(--nut-scale-f, 1)));
 }
 .nut-pickerview-roller-item {
   position: absolute;
@@ -465,10 +478,10 @@
 }
 .nut-pickerview-roller-item, .nut-pickerview-roller-item-tiled {
   width: 100%;
-  height: var(--nutui-picker-item-height, 36px);
-  line-height: var(--nutui-picker-item-height, 36px);
+  height: var(--nutui-picker-item-height, calc(36px * var(--nut-scale-f, 1)));
+  line-height: var(--nutui-picker-item-height, calc(36px * var(--nut-scale-f, 1)));
   color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a));
-  font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -482,18 +495,18 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: var(--nutui-popup-title-height, 50px);
-  padding: var(--nutui-popup-title-padding, 11px);
+  height: var(--nutui-popup-title-height, calc(50px * var(--nut-scale-f, 1)));
+  padding: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
   box-sizing: border-box;
-  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-picker-cancel-btn {
   color: var(--nutui-picker-title-cancel-color, var(--nutui-color-text, #505259));
-  font-size: var(--nutui-picker-title-cancel-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-picker-title-cancel-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-picker-confirm-btn {
   color: var(--nutui-picker-title-ok-color, var(--nutui-color-primary, #ff0f23));
-  font-size: var(--nutui-picker-title-ok-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-picker-title-ok-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-picker-title {
   flex: 1;
@@ -502,7 +515,7 @@
   white-space: nowrap;
   text-align: center;
   color: var(--nutui-color-title, #1a1a1a);
-  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)))));
   font-weight: var(--nutui-popup-title-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-picker-panel {

package/dist/cjs/packages/datepicker/utils.js

@@ -208,6 +208,13 @@ var handlePickerValueChange = function handlePickerValueChange(selectedOptions,
     if (rangeType === 'year-month' && formattedDate.length < 3) {
         formattedDate.push(new Date(defaultDate).getDate());
     }
+    if ((rangeType === 'time' || rangeType === 'hour-minutes') && formattedDate.length < 6) {
+        var defaultDateObj = new Date(defaultDate);
+        formattedDate.unshift(defaultDateObj.getFullYear(), defaultDateObj.getMonth() + 1, defaultDateObj.getDate());
+        if (rangeType === 'hour-minutes') {
+            formattedDate.push(0);
+        }
+    }
     var year = Number(formattedDate[0]);
     var month = Number(formattedDate[1]) - 1;
     var day = Math.min(Number(formattedDate[2]), getLastDayOfMonth(year, month + 1));