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

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

@@ -1,4 +1,14 @@
 .nut-numberkeyboard {
+  &-close-icon {
+    width: $icon-size-18;
+    height: $icon-size-18;
+  }
+
+  &-delete-icon {
+    width: scale-px(28px);
+    height: scale-px(28px);
+  }
+
   width: 100%;
   padding: $numberkeyboard-padding;
   user-select: none;
@@ -39,7 +49,7 @@
 
   &-body {
     display: flex;
-    padding: 6px 0 0 6px;
+    padding: scale-px(6px) 0 0 scale-px(6px);
 
     &-keys {
       display: flex;
@@ -57,7 +67,7 @@
       flex-basis: 33%;
       /* #endif */
       box-sizing: border-box;
-      padding: 0 6px 6px 0;
+      padding: 0 scale-px(6px) scale-px(6px) 0;
       background-color: $numberkeyboard-wrapper-background-color;
 
       .key {
@@ -91,8 +101,8 @@
       .key {
         position: absolute;
         top: 0;
-        right: 6px;
-        bottom: 6px;
+        right: scale-px(6px);
+        bottom: scale-px(6px);
         left: 0;
         height: auto;
       }
@@ -121,9 +131,9 @@
     }
 
     &-body {
-      padding: 6px 6px 0 0;
+      padding: scale-px(6px) scale-px(6px) 0 0;
       &-wrapper {
-        padding: 0 0 6px 6px;
+        padding: 0 0 scale-px(6px) scale-px(6px);
         .delete {
           transform: rotate(-180deg);
         }
@@ -133,7 +143,7 @@
     &-sidebar {
       .nut-numberkeyboard-body-wrapper {
         .key {
-          left: 6px;
+          left: scale-px(6px);
           right: 0;
           &.delete {
             transform: rotate(-180deg);

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

@@ -8,6 +8,14 @@
   user-select: none;
   background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-surface-1));
 }
+.nut-numberkeyboard-close-icon {
+  width: var(--nutui-icon-size-18, 18px);
+  height: var(--nutui-icon-size-18, 18px);
+}
+.nut-numberkeyboard-delete-icon {
+  width: scale-px(28px);
+  height: scale-px(28px);
+}
 .nut-numberkeyboard-header {
   position: relative;
   display: flex;
@@ -40,7 +48,7 @@
 }
 .nut-numberkeyboard-body {
   display: flex;
-  padding: 6px 0 0 6px;
+  padding: scale-px(6px) 0 0 scale-px(6px);
 }
 .nut-numberkeyboard-body-keys {
   display: flex;
@@ -57,7 +65,7 @@
   flex-basis: 33%;
   /* #endif */
   box-sizing: border-box;
-  padding: 0 6px 6px 0;
+  padding: 0 scale-px(6px) scale-px(6px) 0;
   background-color: var(--nutui-numberkeyboard-wrapper-background-color, var(--nutui-color-surface-1));
 }
 .nut-numberkeyboard-body-wrapper .key {
@@ -89,8 +97,8 @@
 .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key {
   position: absolute;
   top: 0;
-  right: 6px;
-  bottom: 6px;
+  right: scale-px(6px);
+  bottom: scale-px(6px);
   left: 0;
   height: auto;
 }
@@ -110,11 +118,11 @@
 }
 [dir=rtl] .nut-popup .nut-numberkeyboard-body,
 .nut-rtl .nut-popup .nut-numberkeyboard-body {
-  padding: 6px 6px 0 0;
+  padding: scale-px(6px) scale-px(6px) 0 0;
 }
 [dir=rtl] .nut-popup .nut-numberkeyboard-body-wrapper,
 .nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper {
-  padding: 0 0 6px 6px;
+  padding: 0 0 scale-px(6px) scale-px(6px);
 }
 [dir=rtl] .nut-popup .nut-numberkeyboard-body-wrapper .delete,
 .nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper .delete {
@@ -122,7 +130,7 @@
 }
 [dir=rtl] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key,
 .nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key {
-  left: 6px;
+  left: scale-px(6px);
   right: 0;
 }
 [dir=rtl] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete,

package/dist/es/packages/nutui.react.build.d.ts

@@ -192,6 +192,8 @@ import Video from "./video";
 export * from "./video";
 import VirtualList from "./virtuallist";
 export * from "./virtuallist";
+import QuickEnter from "./quickenter";
+export * from "./quickenter";
 import AvatarCropper from "./avatarcropper";
 export * from "./avatarcropper";
 import Barrage from "./barrage";
@@ -209,4 +211,4 @@ export * from "./watermark";
 export * from "../types";
 export * from "../utils";
 export * from "../hooks";
-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/es/packages/nutui.react.build.js

@@ -192,6 +192,8 @@ import Video from "./video";
 export * from "./video";
 import VirtualList from "./virtuallist";
 export * from "./virtuallist";
+import QuickEnter from "./quickenter";
+export * from "./quickenter";
 import AvatarCropper from "./avatarcropper";
 export * from "./avatarcropper";
 import Barrage from "./barrage";
@@ -209,4 +211,4 @@ export * from "./watermark";
 export * from "../types";
 export * from "../utils";
 export * from "../hooks";
-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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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 {

package/dist/es/packages/pickerview/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 */
@@ -6,7 +16,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 {
@@ -21,14 +31,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;
@@ -36,20 +46,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;
@@ -64,10 +74,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;

package/dist/es/packages/popover/popover.js

@@ -263,10 +263,7 @@ export var Popover = function(props) {
     }, showArrow && /*#__PURE__*/ React.createElement("div", {
         className: popoverArrow(),
         style: popoverArrowStyle()
-    }, /*#__PURE__*/ React.createElement(ArrowRadius, {
-        width: 8,
-        height: 4
-    })), Array.isArray(children) ? children[1] : null, list.map(function(item, index) {
+    }, /*#__PURE__*/ React.createElement(ArrowRadius, null)), Array.isArray(children) ? children[1] : null, list.map(function(item, index) {
         var _item_action;
         return /*#__PURE__*/ React.createElement("div", {
             className: classNames({