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

package/dist/es/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/es/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/es/packages/avatar/avatar.js

@@ -1,7 +1,6 @@
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
-import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { Image, View } from "@tarojs/components";
@@ -26,23 +25,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 var classPrefix = "nut-avatar";
 export var Avatar = function(props) {
-    var _ref = _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 = _object_without_properties(_ref, [
-        "children",
-        "size",
-        "shape",
-        "background",
-        "color",
-        "src",
-        "alt",
-        "icon",
-        "mode",
-        "fit",
-        "avatarIndex",
-        "className",
-        "style",
-        "onClick",
-        "onError"
-    ]);
+    var _$_object_spread = _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 // 是否显示的最大头像个数
      = _sliced_to_array(useState(false), 2), showMax = _useState[0], setShowMax = _useState[1];
     var avatarRef = useRef(null);
@@ -79,8 +62,7 @@ export var Avatar = function(props) {
         }
     }, [
         avatarIndex,
-        groupCount,
-        groupMax
+        groupCount
     ]);
     var errorEvent = function() {
         onError && onError();
@@ -88,26 +70,19 @@ export var Avatar = function(props) {
     var clickAvatar = function(e) {
         onClick && onClick(e);
     };
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, (showMax || !groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ React.createElement(View, _object_spread({
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, (showMax || !groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ React.createElement(View, {
         className: cls,
         style: !showMax ? styles : maxStyles,
         onClick: clickAvatar,
-        ref: avatarRef,
-        // @ts-ignore
-        ariaRole: onClick ? 'button' : undefined
-    }, rest), (!groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ React.createElement(React.Fragment, null, src && /*#__PURE__*/ React.createElement(Image, {
+        ref: avatarRef
+    }, (!groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ React.createElement(React.Fragment, null, src && /*#__PURE__*/ React.createElement(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.isValidElement(icon) ? /*#__PURE__*/ React.createElement(View, {
         className: "nut-avatar-text"
     }, /*#__PURE__*/ React.cloneElement(icon, _object_spread_props(_object_spread({}, icon.props), {
@@ -121,7 +96,6 @@ export var Avatar = function(props) {
     }, children), !src && !icon && !children && /*#__PURE__*/ React.createElement(View, {
         className: "nut-avatar-text"
     }, /*#__PURE__*/ React.createElement(User, {
-        ariaHidden: true,
         style: {
             color: color
         },

package/dist/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/packages/avatarcropper/avatarcropper.js

@@ -4,8 +4,8 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
-import React, { useState, useEffect, useMemo, useCallback } from "react";
-import Taro, { useReady, createSelectorQuery } from "@tarojs/taro";
+import React, { useState, useEffect, useMemo, useCallback, useLayoutEffect } from "react";
+import Taro, { createSelectorQuery } from "@tarojs/taro";
 import classNames from "classnames";
 import { Canvas, View } from "@tarojs/components";
 import { getWindowInfo } from "../../utils/taro/get-system-info";
@@ -117,7 +117,7 @@ export var AvatarCropper = function(props) {
         cropperCanvas: null,
         cropperCanvasContext: null
     }), 2), canvasAll = _useState5[0], setCanvasAll = _useState5[1];
-    useReady(function() {
+    useLayoutEffect(function() {
         if (showAlipayCanvas2D) {
             var canvasId = canvasAll.canvasId;
             createSelectorQuery().select("#".concat(canvasId)).node(function(param) {
@@ -129,7 +129,11 @@ export var AvatarCropper = function(props) {
                 }));
             }).exec();
         }
-    });
+    }, [
+        showAlipayCanvas2D,
+        state.displayHeight,
+        state.displayWidth
+    ]);
     useEffect(function() {
         setCanvasAll(_object_spread_props(_object_spread({}, canvasAll), {
             cropperCanvasContext: Taro.createCanvasContext(canvasAll.canvasId)

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