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

package/dist/cjs/packages/nutui.react.build.js

@@ -28,7 +28,7 @@ _export(exports, {
         return _index74.default;
     },
     get AvatarCropper () {
-        return _index97.default;
+        return _index98.default;
     },
     get AvatarGroup () {
         return _index75.default;
@@ -40,7 +40,7 @@ _export(exports, {
         return _index56.default;
     },
     get Barrage () {
-        return _index98.default;
+        return _index99.default;
     },
     get Button () {
         return _index.default;
@@ -55,7 +55,7 @@ _export(exports, {
         return _index29.default;
     },
     get Card () {
-        return _index99.default;
+        return _index100.default;
     },
     get Cascader () {
         return _index31.default;
@@ -207,6 +207,9 @@ _export(exports, {
     get PullToRefresh () {
         return _index66.default;
     },
+    get QuickEnter () {
+        return _index97.default;
+    },
     get Radio () {
         return _index45.default;
     },
@@ -295,10 +298,10 @@ _export(exports, {
         return _index53.default;
     },
     get TimeDetail () {
-        return _index100.default;
+        return _index101.default;
     },
     get TimeSelect () {
-        return _index101.default;
+        return _index102.default;
     },
     get Toast () {
         return _index70.default;
@@ -307,7 +310,7 @@ _export(exports, {
         return _index94.default;
     },
     get TrendArrow () {
-        return _index102.default;
+        return _index103.default;
     },
     get Uploader () {
         return _index54.default;
@@ -319,7 +322,7 @@ _export(exports, {
         return _index96.default;
     },
     get WaterMark () {
-        return _index103.default;
+        return _index104.default;
     }
 });
 var _export_star = require("@swc/helpers/_/_export_star");
@@ -421,13 +424,14 @@ var _index93 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("
 var _index94 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./tour/index"), exports));
 var _index95 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./video/index"), exports));
 var _index96 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./virtuallist/index"), exports));
-var _index97 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./avatarcropper/index"), exports));
-var _index98 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./barrage/index"), exports));
-var _index99 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./card/index"), exports));
-var _index100 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./timedetail/index"), exports));
-var _index101 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./timeselect/index"), exports));
-var _index102 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./trendarrow/index"), exports));
-var _index103 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./watermark/index"), exports));
+var _index97 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./quickenter/index"), exports));
+var _index98 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./avatarcropper/index"), exports));
+var _index99 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./barrage/index"), exports));
+var _index100 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./card/index"), exports));
+var _index101 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./timedetail/index"), exports));
+var _index102 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./timeselect/index"), exports));
+var _index103 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./trendarrow/index"), exports));
+var _index104 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./watermark/index"), exports));
 _export_star._(require("../types"), exports);
 _export_star._(require("../utils/index"), exports);
 _export_star._(require("../hooks/index"), exports);

package/dist/cjs/packages/nutui.react.d.ts

@@ -192,6 +192,8 @@ import Video from "./video/index";
 export * from "./video/index";
 import VirtualList from "./virtuallist/index";
 export * from "./virtuallist/index";
+import QuickEnter from "./quickenter/index";
+export * from "./quickenter/index";
 import AvatarCropper from "./avatarcropper/index";
 export * from "./avatarcropper/index";
 import Barrage from "./barrage/index";
@@ -303,6 +305,7 @@ import "./tag/tag.scss";
 import "./tour/tour.scss";
 import "./video/video.scss";
 import "./virtuallist/virtuallist.scss";
+import "./quickenter/quickenter.scss";
 import "./avatarcropper/avatarcropper.scss";
 import "./barrage/barrage.scss";
 import "./card/card.scss";
@@ -313,4 +316,4 @@ import "./watermark/watermark.scss";
 export * from "../types";
 export * from "../utils/index";
 export * from "../hooks/index";
-export { Button, Cell, CellGroup, ConfigProvider, Image, Overlay, Divider, Grid, GridItem, Layout, Col, Row, SafeArea, Space, Sticky, BackTop, Elevator, FixedNav, HoverButton, HoverButtonItem, NavBar, SideBar, SideBarItem, Tabbar, TabbarItem, TabPane, Tabs, Address, Calendar, CalendarItem, CalendarCard, Cascader, Checkbox, CheckboxGroup, DatePicker, DatePickerView, Form, FormItem, Input, InputNumber, Menu, MenuItem, NumberKeyboard, Picker, PickerView, Radio, RadioGroup, Range, Rate, SearchBar, ShortPassword, Signature, Switch, TextArea, Uploader, ActionSheet, Badge, Dialog, Drag, Empty, InfiniteLoading, Loading, NoticeBar, Notify, Popover, Popup, PullToRefresh, ResultPage, Skeleton, Swipe, Toast, Animate, AnimatingNumbers, Audio, Avatar, AvatarGroup, CircleProgress, Collapse, CollapseItem, CountDown, Ellipsis, ImagePreview, Indicator, Lottie, Pagination, Price, Progress, Segmented, Step, Steps, Swiper, SwiperItem, Table, Tag, Tour, Video, VirtualList, AvatarCropper, Barrage, Card, TimeDetail, TimeSelect, TrendArrow, WaterMark };
+export { Button, Cell, CellGroup, ConfigProvider, Image, Overlay, Divider, Grid, GridItem, Layout, Col, Row, SafeArea, Space, Sticky, BackTop, Elevator, FixedNav, HoverButton, HoverButtonItem, NavBar, SideBar, SideBarItem, Tabbar, TabbarItem, TabPane, Tabs, Address, Calendar, CalendarItem, CalendarCard, Cascader, Checkbox, CheckboxGroup, DatePicker, DatePickerView, Form, FormItem, Input, InputNumber, Menu, MenuItem, NumberKeyboard, Picker, PickerView, Radio, RadioGroup, Range, Rate, SearchBar, ShortPassword, Signature, Switch, TextArea, Uploader, ActionSheet, Badge, Dialog, Drag, Empty, InfiniteLoading, Loading, NoticeBar, Notify, Popover, Popup, PullToRefresh, ResultPage, Skeleton, Swipe, Toast, Animate, AnimatingNumbers, Audio, Avatar, AvatarGroup, CircleProgress, Collapse, CollapseItem, CountDown, Ellipsis, ImagePreview, Indicator, Lottie, Pagination, Price, Progress, Segmented, Step, Steps, Swiper, SwiperItem, Table, Tag, Tour, Video, VirtualList, QuickEnter, AvatarCropper, Barrage, Card, TimeDetail, TimeSelect, TrendArrow, WaterMark };

package/dist/cjs/packages/nutui.react.js

@@ -28,7 +28,7 @@ _export(exports, {
         return _index74.default;
     },
     get AvatarCropper () {
-        return _index97.default;
+        return _index98.default;
     },
     get AvatarGroup () {
         return _index75.default;
@@ -40,7 +40,7 @@ _export(exports, {
         return _index56.default;
     },
     get Barrage () {
-        return _index98.default;
+        return _index99.default;
     },
     get Button () {
         return _index.default;
@@ -55,7 +55,7 @@ _export(exports, {
         return _index29.default;
     },
     get Card () {
-        return _index99.default;
+        return _index100.default;
     },
     get Cascader () {
         return _index31.default;
@@ -207,6 +207,9 @@ _export(exports, {
     get PullToRefresh () {
         return _index66.default;
     },
+    get QuickEnter () {
+        return _index97.default;
+    },
     get Radio () {
         return _index45.default;
     },
@@ -295,10 +298,10 @@ _export(exports, {
         return _index53.default;
     },
     get TimeDetail () {
-        return _index100.default;
+        return _index101.default;
     },
     get TimeSelect () {
-        return _index101.default;
+        return _index102.default;
     },
     get Toast () {
         return _index70.default;
@@ -307,7 +310,7 @@ _export(exports, {
         return _index94.default;
     },
     get TrendArrow () {
-        return _index102.default;
+        return _index103.default;
     },
     get Uploader () {
         return _index54.default;
@@ -319,7 +322,7 @@ _export(exports, {
         return _index96.default;
     },
     get WaterMark () {
-        return _index103.default;
+        return _index104.default;
     }
 });
 var _export_star = require("@swc/helpers/_/_export_star");
@@ -421,13 +424,14 @@ var _index93 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("
 var _index94 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./tour/index"), exports));
 var _index95 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./video/index"), exports));
 var _index96 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./virtuallist/index"), exports));
-var _index97 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./avatarcropper/index"), exports));
-var _index98 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./barrage/index"), exports));
-var _index99 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./card/index"), exports));
-var _index100 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./timedetail/index"), exports));
-var _index101 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./timeselect/index"), exports));
-var _index102 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./trendarrow/index"), exports));
-var _index103 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./watermark/index"), exports));
+var _index97 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./quickenter/index"), exports));
+var _index98 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./avatarcropper/index"), exports));
+var _index99 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./barrage/index"), exports));
+var _index100 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./card/index"), exports));
+var _index101 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./timedetail/index"), exports));
+var _index102 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./timeselect/index"), exports));
+var _index103 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./trendarrow/index"), exports));
+var _index104 = /*#__PURE__*/ _interop_require_default._(_export_star._(require("./watermark/index"), exports));
 require("./button/button.scss");
 require("./cell/cell.scss");
 require("./cellgroup/cellgroup.scss");
@@ -525,6 +529,7 @@ require("./tag/tag.scss");
 require("./tour/tour.scss");
 require("./video/video.scss");
 require("./virtuallist/virtuallist.scss");
+require("./quickenter/quickenter.scss");
 require("./avatarcropper/avatarcropper.scss");
 require("./barrage/barrage.scss");
 require("./card/card.scss");

package/dist/cjs/packages/nutui.react.scss.d.ts

@@ -95,6 +95,7 @@ import "./tag/tag.scss";
 import "./tour/tour.scss";
 import "./video/video.scss";
 import "./virtuallist/virtuallist.scss";
+import "./quickenter/quickenter.scss";
 import "./avatarcropper/avatarcropper.scss";
 import "./barrage/barrage.scss";
 import "./card/card.scss";

package/dist/cjs/packages/nutui.react.scss.js

@@ -105,6 +105,7 @@ require("./tag/tag.scss");
 require("./tour/tour.scss");
 require("./video/video.scss");
 require("./virtuallist/virtuallist.scss");
+require("./quickenter/quickenter.scss");
 require("./avatarcropper/avatarcropper.scss");
 require("./barrage/barrage.scss");
 require("./card/card.scss");

package/dist/cjs/packages/overlay/overlay.js

@@ -23,11 +23,11 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _reacttransitiongroup = require("react-transition-group");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
 var _uselockscoll = require("../../hooks/taro/use-lock-scoll");
+var _ConfigurableCSSTransition = /*#__PURE__*/ _interop_require_default._(require("../../utils/taro/ConfigurableCSSTransition"));
 var defaultOverlayProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     zIndex: 1000,
     duration: 300,
@@ -79,11 +79,11 @@ var Overlay = function Overlay(props) {
             onClick: handleClick
         }), children);
     };
-    return /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
+    return /*#__PURE__*/ _react.default.createElement(_ConfigurableCSSTransition.default, {
         nodeRef: nodeRef,
         classNames: "".concat(classPrefix, "-slide"),
         unmountOnExit: true,
-        timeout: duration,
+        timeout: Number(duration),
         in: innerVisible,
         onEntered: afterShow,
         onExited: afterClose

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

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

@@ -8,8 +8,8 @@
 .nut-pagination-prev,
 .nut-pagination-item,
 .nut-pagination-next {
-  height: 39px;
-  min-width: 39px;
+  height: scale-px(39px);
+  min-width: scale-px(39px);
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
@@ -53,9 +53,9 @@
 }
 
 .nut-pagination-simple {
-  height: 39px;
-  width: 124px;
-  line-height: 39px;
+  height: scale-px(39px);
+  width: scale-px(124px);
+  line-height: scale-px(39px);
   text-align: center;
   font-size: $pagination-font-size;
   color: $pagination-color;

package/dist/cjs/packages/pagination/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,25 +15,25 @@
 .nut-pagination {
   display: flex;
   flex-direction: row;
-  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-pagination-prev,
 .nut-pagination-item,
 .nut-pagination-next {
-  height: 39px;
-  min-width: 39px;
+  height: calc(39px * var(--nut-scale-f, 1));
+  min-width: calc(39px * var(--nut-scale-f, 1));
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
   background: #ffffff;
-  border-radius: var(--nutui-pagination-item-border-radius, 2px);
-  border: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-radius: var(--nutui-pagination-item-border-radius, calc(2px * var(--nut-scale-f, 1)));
+  border: var(--nutui-pagination-item-border-width, calc(1px * var(--nut-scale-f, 1))) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
   cursor: pointer;
 }
 
@@ -34,7 +44,7 @@
 
 .nut-pagination-prev,
 .nut-pagination-next {
-  padding: var(--nutui-pagination-prev-next-padding, 0 12px);
+  padding: var(--nutui-pagination-prev-next-padding, 0 calc(12px * var(--nut-scale-f, 1)));
 }
 
 .nut-pagination-contain {
@@ -57,36 +67,36 @@
 }
 
 .nut-pagination-simple {
-  height: 39px;
-  width: 124px;
-  line-height: 39px;
+  height: calc(39px * var(--nut-scale-f, 1));
+  width: calc(124px * var(--nut-scale-f, 1));
+  line-height: calc(39px * var(--nut-scale-f, 1));
   text-align: center;
-  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-pagination-simple-border {
-  border-right: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-right: var(--nutui-pagination-item-border-width, calc(1px * var(--nut-scale-f, 1))) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 
 .nut-pagination-lite {
-  height: var(--nutui-pagination-lite-height, 20px);
-  padding: 0 var(--nutui-spacing-xs, 6px);
+  height: var(--nutui-pagination-lite-height, calc(20px * var(--nut-scale-f, 1)));
+  padding: 0 var(--nutui-spacing-xs, calc(6px * var(--nut-scale-f, 1)));
   display: flex;
   flex-direction: row;
   align-items: center;
   color: #ffffff;
   background-color: var(--nutui-pagination-lite-background-color, rgba(0, 0, 0, 0.45));
-  border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, 4px));
+  border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
 }
 
 .nut-pagination-lite-active,
 .nut-pagination-lite-default {
-  font-size: var(--nutui-font-size-xs, 11px);
+  font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-pagination-lite-color, #ffffff);
 }
 
 .nut-pagination-lite-spliterator {
-  font-size: var(--nutui-font-size-xs, 11px);
+  font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-pagination-lite-color, #ffffff);
 }

package/dist/cjs/packages/pagination/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,25 +15,25 @@
 .nut-pagination {
   display: flex;
   flex-direction: row;
-  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-pagination-prev,
 .nut-pagination-item,
 .nut-pagination-next {
-  height: 39px;
-  min-width: 39px;
+  height: calc(39px * var(--nut-scale-f, 1));
+  min-width: calc(39px * var(--nut-scale-f, 1));
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
   background: #ffffff;
-  border-radius: var(--nutui-pagination-item-border-radius, 2px);
-  border: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-radius: var(--nutui-pagination-item-border-radius, calc(2px * var(--nut-scale-f, 1)));
+  border: var(--nutui-pagination-item-border-width, calc(1px * var(--nut-scale-f, 1))) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
   cursor: pointer;
 }
 
@@ -34,7 +44,7 @@
 
 .nut-pagination-prev,
 .nut-pagination-next {
-  padding: var(--nutui-pagination-prev-next-padding, 0 12px);
+  padding: var(--nutui-pagination-prev-next-padding, 0 calc(12px * var(--nut-scale-f, 1)));
 }
 
 .nut-pagination-contain {
@@ -57,36 +67,36 @@
 }
 
 .nut-pagination-simple {
-  height: 39px;
-  width: 124px;
-  line-height: 39px;
+  height: calc(39px * var(--nut-scale-f, 1));
+  width: calc(124px * var(--nut-scale-f, 1));
+  line-height: calc(39px * var(--nut-scale-f, 1));
   text-align: center;
-  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-pagination-simple-border {
-  border-right: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-right: var(--nutui-pagination-item-border-width, calc(1px * var(--nut-scale-f, 1))) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 
 .nut-pagination-lite {
-  height: var(--nutui-pagination-lite-height, 20px);
-  padding: 0 var(--nutui-spacing-xs, 6px);
+  height: var(--nutui-pagination-lite-height, calc(20px * var(--nut-scale-f, 1)));
+  padding: 0 var(--nutui-spacing-xs, calc(6px * var(--nut-scale-f, 1)));
   display: flex;
   flex-direction: row;
   align-items: center;
   color: #ffffff;
   background-color: var(--nutui-pagination-lite-background-color, rgba(0, 0, 0, 0.45));
-  border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, 4px));
+  border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
 }
 
 .nut-pagination-lite-active,
 .nut-pagination-lite-default {
-  font-size: var(--nutui-font-size-xs, 11px);
+  font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-pagination-lite-color, #ffffff);
 }
 
 .nut-pagination-lite-spliterator {
-  font-size: var(--nutui-font-size-xs, 11px);
+  font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-pagination-lite-color, #ffffff);
 }

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

@@ -8,8 +8,8 @@
 .nut-pagination-prev,
 .nut-pagination-item,
 .nut-pagination-next {
-  height: 39px;
-  min-width: 39px;
+  height: scale-px(39px);
+  min-width: scale-px(39px);
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
@@ -53,9 +53,9 @@
 }
 
 .nut-pagination-simple {
-  height: 39px;
-  width: 124px;
-  line-height: 39px;
+  height: scale-px(39px);
+  width: scale-px(124px);
+  line-height: scale-px(39px);
   text-align: center;
   font-size: $pagination-font-size;
   color: $pagination-color;

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

@@ -12,8 +12,8 @@
 .nut-pagination-prev,
 .nut-pagination-item,
 .nut-pagination-next {
-  height: 39px;
-  min-width: 39px;
+  height: scale-px(39px);
+  min-width: scale-px(39px);
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
@@ -57,9 +57,9 @@
 }
 
 .nut-pagination-simple {
-  height: 39px;
-  width: 124px;
-  line-height: 39px;
+  height: scale-px(39px);
+  width: scale-px(124px);
+  line-height: scale-px(39px);
   text-align: center;
   font-size: var(--nutui-pagination-font-size, var(--nutui-font-text));
   color: var(--nutui-pagination-color, var(--nutui-color-primary));

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

@@ -8,8 +8,8 @@
 .nut-pagination-prev,
 .nut-pagination-item,
 .nut-pagination-next {
-  height: 39px;
-  min-width: 39px;
+  height: scale-px(39px);
+  min-width: scale-px(39px);
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
@@ -53,9 +53,9 @@
 }
 
 .nut-pagination-simple {
-  height: 39px;
-  width: 124px;
-  line-height: 39px;
+  height: scale-px(39px);
+  width: scale-px(124px);
+  line-height: scale-px(39px);
   text-align: center;
   font-size: $pagination-font-size;
   color: $pagination-color;

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

@@ -12,8 +12,8 @@
 .nut-pagination-prev,
 .nut-pagination-item,
 .nut-pagination-next {
-  height: 39px;
-  min-width: 39px;
+  height: scale-px(39px);
+  min-width: scale-px(39px);
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
@@ -57,9 +57,9 @@
 }
 
 .nut-pagination-simple {
-  height: 39px;
-  width: 124px;
-  line-height: 39px;
+  height: scale-px(39px);
+  width: scale-px(124px);
+  line-height: scale-px(39px);
   text-align: center;
   font-size: var(--nutui-pagination-font-size, var(--nutui-font-text));
   color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff6666));

package/dist/cjs/packages/picker/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,18 +19,18 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: var(--nutui-popup-title-height, 50px);
-  padding: var(--nutui-popup-title-padding, 16px);
+  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;
@@ -29,7 +39,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 {