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

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

@@ -7,11 +7,11 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 30px;
-      height: 30px;
+      width: scale-px(30px);
+      height: scale-px(30px);
       background: $white;
       border-radius: 50%;
-      box-shadow: 0 0 8px $color-text-disabled;
+      box-shadow: 0 0 scale-px(8px) $color-text-disabled;
     }
 
     .nut-audio-icon-stop {
@@ -23,11 +23,11 @@
         top: 50%;
         transform: translateX(-50%);
         content: '';
-        height: 2px;
-        width: 30px;
+        height: scale-px(2px);
+        width: scale-px(30px);
         background: $color-text-disabled;
         transform: rotate(45deg);
-        transform-origin: 8px -18px;
+        transform-origin: scale-px(8px) scale-px(-18px);
       }
     }
   }
@@ -36,35 +36,35 @@
     display: flex;
     align-items: center;
     width: 100%;
-    margin: 0px auto;
-    padding: 10px 0;
+    margin: 0 auto;
+    padding: scale-px(10px) 0;
 
     &-bar-wrapper {
       flex: 1;
-      margin: 0 10px;
+      margin: 0 scale-px(10px);
     }
 
     .time {
-      min-width: 50px;
-      font-size: 12px;
+      min-width: scale-px(50px);
+      font-size: $font-size-s;
       text-align: center;
     }
 
     .nut-range-button {
-      width: 8px;
-      height: 8px;
+      width: scale-px(8px);
+      height: scale-px(8px);
     }
   }
 
   .custom-button-group {
     .nut-button-primary {
-      margin: 0 5px;
+      margin: 0 scale-px(5px);
     }
   }
 
   .custom-button-group-disable {
     .nut-button-primary {
-      margin: 0 5px;
+      margin: 0 scale-px(5px);
       pointer-events: none;
     }
   }
@@ -75,7 +75,7 @@
 
   .nut-audio-none-container {
     .nut-voice {
-      border: 1px solid $color-title;
+      border: scale-px(1px) solid $color-title;
       align-items: center;
     }
   }
@@ -89,7 +89,7 @@
         left: auto;
         right: 50%;
         transform: rotate(-45deg);
-        transform-origin: 20px -18px;
+        transform-origin: scale-px(20px) scale-px(-18px);
       }
     }
   }

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

@@ -10,11 +10,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  height: 30px;
+  width: scale-px(30px);
+  height: scale-px(30px);
   background: #ffffff;
   border-radius: 50%;
-  box-shadow: 0 0 8px var(--nutui-color-text-disabled);
+  box-shadow: 0 0 scale-px(8px) var(--nutui-color-text-disabled);
 }
 .nut-audio-icon .nut-audio-icon-stop {
   position: relative;
@@ -25,44 +25,44 @@
   top: 50%;
   transform: translateX(-50%);
   content: "";
-  height: 2px;
-  width: 30px;
+  height: scale-px(2px);
+  width: scale-px(30px);
   background: var(--nutui-color-text-disabled);
   transform: rotate(45deg);
-  transform-origin: 8px -18px;
+  transform-origin: scale-px(8px) scale-px(-18px);
 }
 .nut-audio-progress {
   display: flex;
   align-items: center;
   width: 100%;
-  margin: 0px auto;
-  padding: 10px 0;
+  margin: 0 auto;
+  padding: scale-px(10px) 0;
 }
 .nut-audio-progress-bar-wrapper {
   flex: 1;
-  margin: 0 10px;
+  margin: 0 scale-px(10px);
 }
 .nut-audio-progress .time {
-  min-width: 50px;
-  font-size: 12px;
+  min-width: scale-px(50px);
+  font-size: var(--nutui-font-text-small);
   text-align: center;
 }
 .nut-audio-progress .nut-range-button {
-  width: 8px;
-  height: 8px;
+  width: scale-px(8px);
+  height: scale-px(8px);
 }
 .nut-audio .custom-button-group .nut-button-primary {
-  margin: 0 5px;
+  margin: 0 scale-px(5px);
 }
 .nut-audio .custom-button-group-disable .nut-button-primary {
-  margin: 0 5px;
+  margin: 0 scale-px(5px);
   pointer-events: none;
 }
 .nut-audio .disable {
   color: blue;
 }
 .nut-audio .nut-audio-none-container .nut-voice {
-  border: 1px solid var(--nutui-color-title);
+  border: scale-px(1px) solid var(--nutui-color-title);
   align-items: center;
 }
 
@@ -71,5 +71,5 @@
   left: auto;
   right: 50%;
   transform: rotate(-45deg);
-  transform-origin: 20px -18px;
+  transform-origin: scale-px(20px) scale-px(-18px);
 }

package/dist/cjs/packages/avatar/avatar.js

@@ -13,7 +13,6 @@ var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcar
 var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 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 _components = require("@tarojs/components");
@@ -38,23 +37,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 });
 var classPrefix = "nut-avatar";
 var Avatar = function Avatar(props) {
-    var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, size = _ref.size, shape = _ref.shape, background = _ref.background, color = _ref.color, src = _ref.src, alt = _ref.alt, icon = _ref.icon, mode = _ref.mode, fit = _ref.fit, avatarIndex = _ref.avatarIndex, className = _ref.className, style = _ref.style, onClick = _ref.onClick, onError = _ref.onError, rest = (0, _object_without_properties._)(_ref, [
-        "children",
-        "size",
-        "shape",
-        "background",
-        "color",
-        "src",
-        "alt",
-        "icon",
-        "mode",
-        "fit",
-        "avatarIndex",
-        "className",
-        "style",
-        "onClick",
-        "onError"
-    ]);
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, size = _$_object_spread.size, shape = _$_object_spread.shape, background = _$_object_spread.background, color = _$_object_spread.color, src = _$_object_spread.src, icon = _$_object_spread.icon, mode = _$_object_spread.mode, fit = _$_object_spread.fit, avatarIndex = _$_object_spread.avatarIndex, className = _$_object_spread.className, style = _$_object_spread.style, onClick = _$_object_spread.onClick, onError = _$_object_spread.onError;
     var _useState // 是否显示的最大头像个数
      = (0, _sliced_to_array._)((0, _react.useState)(false), 2), showMax = _useState[0], setShowMax = _useState[1];
     var avatarRef = (0, _react.useRef)(null);
@@ -91,8 +74,7 @@ var Avatar = function Avatar(props) {
         }
     }, [
         avatarIndex,
-        groupCount,
-        groupMax
+        groupCount
     ]);
     var errorEvent = function errorEvent() {
         onError && onError();
@@ -100,26 +82,19 @@ var Avatar = function Avatar(props) {
     var clickAvatar = function clickAvatar(e) {
         onClick && onClick(e);
     };
-    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (showMax || !groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
+    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (showMax || !groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: cls,
         style: !showMax ? styles : maxStyles,
         onClick: clickAvatar,
-        ref: avatarRef,
-        // @ts-ignore
-        ariaRole: onClick ? 'button' : undefined
-    }, rest), (!groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, src && /*#__PURE__*/ _react.default.createElement(_components.Image, {
+        ref: avatarRef
+    }, (!groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, src && /*#__PURE__*/ _react.default.createElement(_components.Image, {
         className: "nut-avatar-img nut-avatar-".concat(groupSize || size || 'normal', "-img"),
         src: src,
-        nativeProps: {
-            alt: alt
-        },
         style: {
             objectFit: fit
         },
         mode: mode,
-        onError: errorEvent,
-        // @ts-ignore
-        ariaHidden: true
+        onError: errorEvent
     }), /*#__PURE__*/ _react.default.isValidElement(icon) ? /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "nut-avatar-text"
     }, /*#__PURE__*/ _react.default.cloneElement(icon, (0, _object_spread_props._)((0, _object_spread._)({}, icon.props), {
@@ -133,7 +108,6 @@ var Avatar = function Avatar(props) {
     }, children), !src && !icon && !children && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "nut-avatar-text"
     }, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.User, {
-        ariaHidden: true,
         style: {
             color: color
         },

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

@@ -9,7 +9,7 @@
   height: $avatar-normal-height;
 
   &-round {
-    border-radius: 999px;
+    border-radius: scale-px(999px);
     overflow: hidden;
   }
 

package/dist/cjs/packages/avatar/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 */
@@ -8,15 +18,15 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
+  width: var(--nutui-avatar-normal-width, calc(40px * var(--nut-scale-f, 1)));
+  height: var(--nutui-avatar-normal-height, calc(40px * var(--nut-scale-f, 1)));
 }
 .nut-avatar-round {
-  border-radius: 999px;
+  border-radius: calc(999px * var(--nut-scale-f, 1));
   overflow: hidden;
 }
 .nut-avatar-square {
-  border-radius: var(--nutui-avatar-square, 5px);
+  border-radius: var(--nutui-avatar-square, calc(5px * var(--nut-scale-f, 1)));
 }
 .nut-avatar-first-child {
   margin-left: 0;
@@ -39,26 +49,26 @@
   align-items: center;
 }
 .nut-avatar-large {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
+  width: var(--nutui-avatar-large-width, calc(60px * var(--nut-scale-f, 1)));
+  height: var(--nutui-avatar-large-height, calc(60px * var(--nut-scale-f, 1)));
 }
 .nut-avatar-large-img {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
+  width: var(--nutui-avatar-large-width, calc(60px * var(--nut-scale-f, 1)));
+  height: var(--nutui-avatar-large-height, calc(60px * var(--nut-scale-f, 1)));
 }
 .nut-avatar-large-icon {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
+  width: var(--nutui-avatar-large-width, calc(60px * var(--nut-scale-f, 1)));
+  height: var(--nutui-avatar-large-height, calc(60px * var(--nut-scale-f, 1)));
 }
 .nut-avatar-large-text {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
+  width: var(--nutui-avatar-large-width, calc(60px * var(--nut-scale-f, 1)));
+  height: var(--nutui-avatar-large-height, calc(60px * var(--nut-scale-f, 1)));
 }
 .nut-avatar-small {
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
+  width: var(--nutui-avatar-small-width, calc(32px * var(--nut-scale-f, 1)));
+  height: var(--nutui-avatar-small-height, calc(32px * var(--nut-scale-f, 1)));
 }
 .nut-avatar-small-text {
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
+  width: var(--nutui-avatar-small-width, calc(32px * var(--nut-scale-f, 1)));
+  height: var(--nutui-avatar-small-height, calc(32px * var(--nut-scale-f, 1)));
 }

package/dist/cjs/packages/avatar/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 */
@@ -84,15 +94,15 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
+  width: var(--nutui-avatar-normal-width, calc(40px * var(--nut-scale-f, 1)));
+  height: var(--nutui-avatar-normal-height, calc(40px * var(--nut-scale-f, 1)));
 }
 .nut-avatar-round {
-  border-radius: 999px;
+  border-radius: calc(999px * var(--nut-scale-f, 1));
   overflow: hidden;
 }
 .nut-avatar-square {
-  border-radius: var(--nutui-avatar-square, 5px);
+  border-radius: var(--nutui-avatar-square, calc(5px * var(--nut-scale-f, 1)));
 }
 .nut-avatar-first-child {
   margin-left: 0;
@@ -115,26 +125,26 @@
   align-items: center;
 }
 .nut-avatar-large {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
+  width: var(--nutui-avatar-large-width, calc(60px * var(--nut-scale-f, 1)));
+  height: var(--nutui-avatar-large-height, calc(60px * var(--nut-scale-f, 1)));
 }
 .nut-avatar-large-img {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
+  width: var(--nutui-avatar-large-width, calc(60px * var(--nut-scale-f, 1)));
+  height: var(--nutui-avatar-large-height, calc(60px * var(--nut-scale-f, 1)));
 }
 .nut-avatar-large-icon {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
+  width: var(--nutui-avatar-large-width, calc(60px * var(--nut-scale-f, 1)));
+  height: var(--nutui-avatar-large-height, calc(60px * var(--nut-scale-f, 1)));
 }
 .nut-avatar-large-text {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
+  width: var(--nutui-avatar-large-width, calc(60px * var(--nut-scale-f, 1)));
+  height: var(--nutui-avatar-large-height, calc(60px * var(--nut-scale-f, 1)));
 }
 .nut-avatar-small {
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
+  width: var(--nutui-avatar-small-width, calc(32px * var(--nut-scale-f, 1)));
+  height: var(--nutui-avatar-small-height, calc(32px * var(--nut-scale-f, 1)));
 }
 .nut-avatar-small-text {
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
+  width: var(--nutui-avatar-small-width, calc(32px * var(--nut-scale-f, 1)));
+  height: var(--nutui-avatar-small-height, calc(32px * var(--nut-scale-f, 1)));
 }

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

@@ -9,7 +9,7 @@
   height: $avatar-normal-height;
 
   &-round {
-    border-radius: 999px;
+    border-radius: scale-px(999px);
     overflow: hidden;
   }
 

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

@@ -12,7 +12,7 @@
   height: var(--nutui-avatar-normal-height, 40px);
 }
 .nut-avatar-round {
-  border-radius: 999px;
+  border-radius: scale-px(999px);
   overflow: hidden;
 }
 .nut-avatar-square {

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

@@ -9,7 +9,7 @@
   height: $avatar-normal-height;
 
   &-round {
-    border-radius: 999px;
+    border-radius: scale-px(999px);
     overflow: hidden;
   }
 

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

@@ -12,7 +12,7 @@
   height: var(--nutui-avatar-normal-height, 40px);
 }
 .nut-avatar-round {
-  border-radius: 999px;
+  border-radius: scale-px(999px);
   overflow: hidden;
 }
 .nut-avatar-square {

package/dist/cjs/packages/avatarcropper/avatarcropper.js

@@ -129,7 +129,7 @@ var AvatarCropper = function AvatarCropper(props) {
         cropperCanvas: null,
         cropperCanvasContext: null
     }), 2), canvasAll = _useState5[0], setCanvasAll = _useState5[1];
-    (0, _taro.useReady)(function() {
+    (0, _react.useLayoutEffect)(function() {
         if (showAlipayCanvas2D) {
             var canvasId = canvasAll.canvasId;
             (0, _taro.createSelectorQuery)().select("#".concat(canvasId)).node(function(param) {
@@ -141,7 +141,11 @@ var AvatarCropper = function AvatarCropper(props) {
                 }));
             }).exec();
         }
-    });
+    }, [
+        showAlipayCanvas2D,
+        state.displayHeight,
+        state.displayWidth
+    ]);
     (0, _react.useEffect)(function() {
         setCanvasAll((0, _object_spread_props._)((0, _object_spread._)({}, canvasAll), {
             cropperCanvasContext: _taro.default.createCanvasContext(canvasAll.canvasId)

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

@@ -72,7 +72,7 @@
 
       &-item {
         color: #fff;
-        padding: 15px;
+        padding: scale-px(15px);
         cursor: pointer;
         display: flex;
         align-items: center;
@@ -98,7 +98,7 @@
         top: 50%;
         transform: translate(-50%, -50%);
         background-color: transparent;
-        box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.6);
+        box-shadow: 0 0 scale-px(1000px) scale-px(1000px) rgba(0, 0, 0, 0.6);
       }
     }
   }

package/dist/cjs/packages/avatarcropper/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 */
@@ -69,7 +79,7 @@
 }
 .nut-avatar-cropper-popup-toolbar-item {
   color: #fff;
-  padding: 15px;
+  padding: calc(15px * var(--nut-scale-f, 1));
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -92,7 +102,7 @@
   top: 50%;
   transform: translate(-50%, -50%);
   background-color: transparent;
-  box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 calc(1000px * var(--nut-scale-f, 1)) calc(1000px * var(--nut-scale-f, 1)) rgba(0, 0, 0, 0.6);
 }
 .nut-avatar-cropper.round .nut-avatar-cropper-edit-text {
   border-radius: 50%;

package/dist/cjs/packages/avatarcropper/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 */
@@ -69,7 +79,7 @@
 }
 .nut-avatar-cropper-popup-toolbar-item {
   color: #fff;
-  padding: 15px;
+  padding: calc(15px * var(--nut-scale-f, 1));
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -92,7 +102,7 @@
   top: 50%;
   transform: translate(-50%, -50%);
   background-color: transparent;
-  box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 calc(1000px * var(--nut-scale-f, 1)) calc(1000px * var(--nut-scale-f, 1)) rgba(0, 0, 0, 0.6);
 }
 .nut-avatar-cropper.round .nut-avatar-cropper-edit-text {
   border-radius: 50%;

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

@@ -72,7 +72,7 @@
 
       &-item {
         color: #fff;
-        padding: 15px;
+        padding: scale-px(15px);
         cursor: pointer;
         display: flex;
         align-items: center;
@@ -98,7 +98,7 @@
         top: 50%;
         transform: translate(-50%, -50%);
         background-color: transparent;
-        box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.6);
+        box-shadow: 0 0 scale-px(1000px) scale-px(1000px) rgba(0, 0, 0, 0.6);
       }
     }
   }

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

@@ -69,7 +69,7 @@
 }
 .nut-avatar-cropper-popup-toolbar-item {
   color: #fff;
-  padding: 15px;
+  padding: scale-px(15px);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -92,7 +92,7 @@
   top: 50%;
   transform: translate(-50%, -50%);
   background-color: transparent;
-  box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 scale-px(1000px) scale-px(1000px) rgba(0, 0, 0, 0.6);
 }
 .nut-avatar-cropper.round .nut-avatar-cropper-edit-text {
   border-radius: 50%;

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

@@ -72,7 +72,7 @@
 
       &-item {
         color: #fff;
-        padding: 15px;
+        padding: scale-px(15px);
         cursor: pointer;
         display: flex;
         align-items: center;
@@ -98,7 +98,7 @@
         top: 50%;
         transform: translate(-50%, -50%);
         background-color: transparent;
-        box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.6);
+        box-shadow: 0 0 scale-px(1000px) scale-px(1000px) rgba(0, 0, 0, 0.6);
       }
     }
   }

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

@@ -69,7 +69,7 @@
 }
 .nut-avatar-cropper-popup-toolbar-item {
   color: #fff;
-  padding: 15px;
+  padding: scale-px(15px);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -92,7 +92,7 @@
   top: 50%;
   transform: translate(-50%, -50%);
   background-color: transparent;
-  box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 scale-px(1000px) scale-px(1000px) rgba(0, 0, 0, 0.6);
 }
 .nut-avatar-cropper.round .nut-avatar-cropper-edit-text {
   border-radius: 50%;

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

@@ -4,11 +4,11 @@
   flex: 0 0 auto; // 防止被压缩
   &-avatar,
   .nut-avatar {
-    border: 1px solid #fff;
-    margin-left: -8px;
+    border: scale-px(1px) solid #fff;
+    margin-left: scale-px(-8px);
 
     &:not(:first-of-type) {
-      margin-left: -8px;
+      margin-left: scale-px(-8px);
     }
   }
 }
@@ -18,7 +18,7 @@
   .nut-avatar {
     &:not(:first-of-type) {
       margin-left: 0;
-      margin-right: -8px;
+      margin-right: scale-px(-8px);
     }
   }
 }