npm - @nutui/nutui-react-taro - Versions diffs - 3.0.21-cpp → 3.1.0-beta.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1269) hide show

package/dist/cjs/packages/uploader/style/style.css CHANGED Viewed

@@ -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 */
@@ -16,10 +26,10 @@
   align-items: center;
   justify-content: center;
   background: var(--nutui-uploader-background, var(--nutui-color-background, #f2f3f5));
-  width: var(--nutui-uploader-image-width, 100px);
-  height: var(--nutui-uploader-image-height, 100px);
+  width: var(--nutui-uploader-image-width, calc(100px * var(--nut-scale-f, 1)));
+  height: var(--nutui-uploader-image-height, calc(100px * var(--nut-scale-f, 1)));
   border: var(--nutui-uploader-image-border, 0px);
-  border-radius: var(--nutui-uploader-image-border-radius, 4px);
+  border-radius: var(--nutui-uploader-image-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-uploader-icon {
   display: flex;
@@ -31,10 +41,10 @@
 .nut-uploader-icon i,
 .nut-uploader-icon .nut-icon {
   color: var(--nutui-uploader-image-color, var(--nutui-color-text-help, #888b94));
-  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6px);
+  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-uploader-icon-tip {
-  font-size: var(--nutui-uploader-image-icon-tip-font-size, 12px);
+  font-size: var(--nutui-uploader-image-icon-tip-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-uploader-input {
   position: absolute !important;
@@ -56,14 +66,14 @@
 .nut-uploader-upload-disabled .nut-uploader-icon i,
 .nut-uploader-upload-disabled .nut-uploader-icon .nut-icon {
   color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled, #c2c4cc));
-  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6px);
+  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-uploader-preview {
   position: relative;
-  margin-right: var(--nutui-uploader-preview-margin-right, 10px);
-  margin-bottom: var(--nutui-uploader-preview-margin-bottom, 10px);
-  border-radius: var(--nutui-uploader-image-border-radius, 4px);
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  margin-right: var(--nutui-uploader-preview-margin-right, calc(10px * var(--nut-scale-f, 1)));
+  margin-bottom: var(--nutui-uploader-preview-margin-bottom, calc(10px * var(--nut-scale-f, 1)));
+  border-radius: var(--nutui-uploader-image-border-radius, calc(4px * var(--nut-scale-f, 1)));
+  box-shadow: 0 calc(2px * var(--nut-scale-f, 1)) calc(10px * var(--nut-scale-f, 1)) 0 rgba(0, 0, 0, 0.1);
 }
 .nut-uploader-preview-progress {
   position: absolute;
@@ -76,39 +86,39 @@
   width: 100%;
   height: 100%;
   background: var(--nutui-uploader-preview-progress-background, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
-  border-radius: var(--nutui-uploader-image-border-radius, 4px);
+  border-radius: var(--nutui-uploader-image-border-radius, calc(4px * var(--nut-scale-f, 1)));
   z-index: 10;
 }
 .nut-uploader-preview-progress i {
-  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6px);
+  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-uploader-preview-progress-msg {
   color: var(--nutui-color-text-help, #888b94);
-  font-size: 12px;
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-uploader-preview.list {
   width: 100%;
-  margin-right: 0px;
-  margin-bottom: 0px;
-  margin-top: 10px;
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.01);
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-top: calc(10px * var(--nut-scale-f, 1));
+  box-shadow: 0 calc(2px * var(--nut-scale-f, 1)) calc(10px * var(--nut-scale-f, 1)) 0 rgba(0, 0, 0, 0.01);
 }
 .nut-uploader-preview-list {
   width: 100%;
-  height: 32px;
+  height: calc(32px * var(--nut-scale-f, 1));
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 10px;
+  padding: 0 calc(10px * var(--nut-scale-f, 1));
   background-color: var(--nutui-color-background-sunken, #f7f8fc);
 }
 .nut-uploader-preview-list .nut-uploader-preview-img-file-name {
   display: flex;
   align-items: center;
   -webkit-line-clamp: 1;
-  padding: 2px;
-  height: 24px;
+  padding: calc(2px * var(--nut-scale-f, 1));
+  height: calc(24px * var(--nut-scale-f, 1));
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -120,7 +130,7 @@
   bottom: 0;
 }
 .nut-uploader-preview-list .nut-progress .nut-progress-outer {
-  height: 2px !important;
+  height: calc(2px * var(--nut-scale-f, 1)) !important;
 }
 .nut-uploader-preview .close {
   position: absolute;
@@ -131,9 +141,9 @@
 }
 .nut-uploader-preview-img {
   position: relative;
-  width: var(--nutui-uploader-image-width, 100px);
-  height: var(--nutui-uploader-image-height, 100px);
-  border-radius: var(--nutui-uploader-image-border-radius, 4px);
+  width: var(--nutui-uploader-image-width, calc(100px * var(--nut-scale-f, 1)));
+  height: var(--nutui-uploader-image-height, calc(100px * var(--nut-scale-f, 1)));
+  border-radius: var(--nutui-uploader-image-border-radius, calc(4px * var(--nut-scale-f, 1)));
   overflow: hidden;
 }
 .nut-uploader-preview-img i {
@@ -143,16 +153,16 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  font-size: 12px;
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: #ffffff;
   text-align: center;
   box-sizing: border-box;
-  height: var(--nutui-uploader-preview-tips-height, 24px);
-  line-height: var(--nutui-uploader-preview-tips-height, 24px);
-  border-radius: var(--nutui-uploader-image-border-radius, 4px);
+  height: var(--nutui-uploader-preview-tips-height, calc(24px * var(--nut-scale-f, 1)));
+  line-height: var(--nutui-uploader-preview-tips-height, calc(24px * var(--nut-scale-f, 1)));
+  border-radius: var(--nutui-uploader-image-border-radius, calc(4px * var(--nut-scale-f, 1)));
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  padding: var(--nutui-uploader-preview-tips-padding, 0 5px);
+  padding: var(--nutui-uploader-preview-tips-padding, 0 calc(5px * var(--nut-scale-f, 1)));
   background: var(--nutui-uploader-preview-tips-background, var(--nutui-black-7));
   width: 100%;
   overflow: hidden;
@@ -167,7 +177,7 @@
   /* #ifndef dynamic*/
   position: initial;
   /* #endif */
-  border-radius: var(--nutui-uploader-image-border-radius, 4px);
+  border-radius: var(--nutui-uploader-image-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-uploader-preview-img-file {
   height: 100%;
@@ -180,7 +190,7 @@
 .nut-uploader-preview-img-file-name {
   display: flex;
   width: 90%;
-  font-size: 12px;
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-color-text, #505259);
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -206,7 +216,7 @@
 [dir=rtl] .nut-uploader-preview,
 .nut-rtl .nut-uploader-preview {
   margin-right: 0;
-  margin-left: var(--nutui-uploader-preview-margin-right, 10px);
+  margin-left: var(--nutui-uploader-preview-margin-right, calc(10px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-uploader-preview-progress,
 .nut-rtl .nut-uploader-preview-progress {
@@ -216,7 +226,7 @@
 [dir=rtl] .nut-uploader-preview.list,
 .nut-rtl .nut-uploader-preview.list {
   margin-right: 0;
-  margin-left: 0px;
+  margin-left: 0;
 }
 [dir=rtl] .nut-uploader-preview .close,
 .nut-rtl .nut-uploader-preview .close {

package/dist/cjs/packages/uploader/style/style.harmony.css CHANGED Viewed

@@ -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 */
@@ -10,8 +20,8 @@
 }
 .nut-progress-outer {
   flex: 1;
-  border-radius: var(--nutui-progress-border-radius, 12px);
-  height: var(--nutui-progress-height, 10px);
+  border-radius: var(--nutui-progress-border-radius, calc(12px * var(--nut-scale-f, 1)));
+  height: var(--nutui-progress-height, calc(10px * var(--nut-scale-f, 1)));
   background: var(--nutui-progress-background, var(--nutui-color-background, #f2f3f5));
 }
 .nut-progress-outer .nut-progress-active:before {
@@ -21,7 +31,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  border-radius: var(--nutui-progress-border-radius, 12px);
+  border-radius: var(--nutui-progress-border-radius, calc(12px * var(--nut-scale-f, 1)));
   animation: progressActive 2s ease-in-out infinite;
 }
 .nut-progress-inner {
@@ -30,7 +40,7 @@
   flex-direction: column;
   justify-content: center;
   transition: all 0.4s;
-  border-radius: var(--nutui-progress-border-radius, 12px);
+  border-radius: var(--nutui-progress-border-radius, calc(12px * var(--nut-scale-f, 1)));
   background: var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 .nut-progress-text {
@@ -40,7 +50,7 @@
   margin-left: 12px;
   color: var(--nutui-color-text-help, #888b94);
   font-family: PingFang SC;
-  font-size: var(--nutui-progress-text-font-size, 13px);
+  font-size: var(--nutui-progress-text-font-size, calc(13px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 @keyframes progressActive {
   0% {
@@ -76,10 +86,10 @@
   align-items: center;
   justify-content: center;
   background: var(--nutui-uploader-background, var(--nutui-color-background, #f2f3f5));
-  width: var(--nutui-uploader-image-width, 100px);
-  height: var(--nutui-uploader-image-height, 100px);
+  width: var(--nutui-uploader-image-width, calc(100px * var(--nut-scale-f, 1)));
+  height: var(--nutui-uploader-image-height, calc(100px * var(--nut-scale-f, 1)));
   border: var(--nutui-uploader-image-border, 0px);
-  border-radius: var(--nutui-uploader-image-border-radius, 4px);
+  border-radius: var(--nutui-uploader-image-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-uploader-icon {
   display: flex;
@@ -91,10 +101,10 @@
 .nut-uploader-icon i,
 .nut-uploader-icon .nut-icon {
   color: var(--nutui-uploader-image-color, var(--nutui-color-text-help, #888b94));
-  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6px);
+  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-uploader-icon-tip {
-  font-size: var(--nutui-uploader-image-icon-tip-font-size, 12px);
+  font-size: var(--nutui-uploader-image-icon-tip-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-uploader-input {
   position: absolute !important;
@@ -116,14 +126,14 @@
 .nut-uploader-upload-disabled .nut-uploader-icon i,
 .nut-uploader-upload-disabled .nut-uploader-icon .nut-icon {
   color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled, #c2c4cc));
-  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6px);
+  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-uploader-preview {
   position: relative;
-  margin-right: var(--nutui-uploader-preview-margin-right, 10px);
-  margin-bottom: var(--nutui-uploader-preview-margin-bottom, 10px);
-  border-radius: var(--nutui-uploader-image-border-radius, 4px);
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  margin-right: var(--nutui-uploader-preview-margin-right, calc(10px * var(--nut-scale-f, 1)));
+  margin-bottom: var(--nutui-uploader-preview-margin-bottom, calc(10px * var(--nut-scale-f, 1)));
+  border-radius: var(--nutui-uploader-image-border-radius, calc(4px * var(--nut-scale-f, 1)));
+  box-shadow: 0 calc(2px * var(--nut-scale-f, 1)) calc(10px * var(--nut-scale-f, 1)) 0 rgba(0, 0, 0, 0.1);
 }
 .nut-uploader-preview-progress {
   position: absolute;
@@ -136,39 +146,39 @@
   width: 100%;
   height: 100%;
   background: var(--nutui-uploader-preview-progress-background, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
-  border-radius: var(--nutui-uploader-image-border-radius, 4px);
+  border-radius: var(--nutui-uploader-image-border-radius, calc(4px * var(--nut-scale-f, 1)));
   z-index: 10;
 }
 .nut-uploader-preview-progress i {
-  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6px);
+  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-uploader-preview-progress-msg {
   color: var(--nutui-color-text-help, #888b94);
-  font-size: 12px;
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-uploader-preview.list {
   width: 100%;
-  margin-right: 0px;
-  margin-bottom: 0px;
-  margin-top: 10px;
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.01);
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-top: calc(10px * var(--nut-scale-f, 1));
+  box-shadow: 0 calc(2px * var(--nut-scale-f, 1)) calc(10px * var(--nut-scale-f, 1)) 0 rgba(0, 0, 0, 0.01);
 }
 .nut-uploader-preview-list {
   width: 100%;
-  height: 32px;
+  height: calc(32px * var(--nut-scale-f, 1));
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 10px;
+  padding: 0 calc(10px * var(--nut-scale-f, 1));
   background-color: var(--nutui-color-background-sunken, #f7f8fc);
 }
 .nut-uploader-preview-list .nut-uploader-preview-img-file-name {
   display: flex;
   align-items: center;
   -webkit-line-clamp: 1;
-  padding: 2px;
-  height: 24px;
+  padding: calc(2px * var(--nut-scale-f, 1));
+  height: calc(24px * var(--nut-scale-f, 1));
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -180,7 +190,7 @@
   bottom: 0;
 }
 .nut-uploader-preview-list .nut-progress .nut-progress-outer {
-  height: 2px !important;
+  height: calc(2px * var(--nut-scale-f, 1)) !important;
 }
 .nut-uploader-preview .close {
   position: absolute;
@@ -191,9 +201,9 @@
 }
 .nut-uploader-preview-img {
   position: relative;
-  width: var(--nutui-uploader-image-width, 100px);
-  height: var(--nutui-uploader-image-height, 100px);
-  border-radius: var(--nutui-uploader-image-border-radius, 4px);
+  width: var(--nutui-uploader-image-width, calc(100px * var(--nut-scale-f, 1)));
+  height: var(--nutui-uploader-image-height, calc(100px * var(--nut-scale-f, 1)));
+  border-radius: var(--nutui-uploader-image-border-radius, calc(4px * var(--nut-scale-f, 1)));
   overflow: hidden;
 }
 .nut-uploader-preview-img i {
@@ -203,16 +213,16 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  font-size: 12px;
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: #ffffff;
   text-align: center;
   box-sizing: border-box;
-  height: var(--nutui-uploader-preview-tips-height, 24px);
-  line-height: var(--nutui-uploader-preview-tips-height, 24px);
-  border-radius: var(--nutui-uploader-image-border-radius, 4px);
+  height: var(--nutui-uploader-preview-tips-height, calc(24px * var(--nut-scale-f, 1)));
+  line-height: var(--nutui-uploader-preview-tips-height, calc(24px * var(--nut-scale-f, 1)));
+  border-radius: var(--nutui-uploader-image-border-radius, calc(4px * var(--nut-scale-f, 1)));
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  padding: var(--nutui-uploader-preview-tips-padding, 0 5px);
+  padding: var(--nutui-uploader-preview-tips-padding, 0 calc(5px * var(--nut-scale-f, 1)));
   background: var(--nutui-uploader-preview-tips-background, var(--nutui-black-7));
   width: 100%;
   overflow: hidden;
@@ -227,7 +237,7 @@
   /* #ifndef dynamic*/
   position: initial;
   /* #endif */
-  border-radius: var(--nutui-uploader-image-border-radius, 4px);
+  border-radius: var(--nutui-uploader-image-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-uploader-preview-img-file {
   height: 100%;
@@ -240,7 +250,7 @@
 .nut-uploader-preview-img-file-name {
   display: flex;
   width: 90%;
-  font-size: 12px;
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-color-text, #505259);
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -266,7 +276,7 @@
 [dir=rtl] .nut-uploader-preview,
 .nut-rtl .nut-uploader-preview {
   margin-right: 0;
-  margin-left: var(--nutui-uploader-preview-margin-right, 10px);
+  margin-left: var(--nutui-uploader-preview-margin-right, calc(10px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-uploader-preview-progress,
 .nut-rtl .nut-uploader-preview-progress {
@@ -276,7 +286,7 @@
 [dir=rtl] .nut-uploader-preview.list,
 .nut-rtl .nut-uploader-preview.list {
   margin-right: 0;
-  margin-left: 0px;
+  margin-left: 0;
 }
 [dir=rtl] .nut-uploader-preview .close,
 .nut-rtl .nut-uploader-preview .close {

package/dist/cjs/packages/uploader/style/uploader.scss CHANGED Viewed

@@ -72,7 +72,7 @@
     margin-right: $uploader-preview-margin-right;
     margin-bottom: $uploader-preview-margin-bottom;
     border-radius: $uploader-image-border-radius;
-    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
+    box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 10%);
     &-progress {
       position: absolute;
@@ -94,34 +94,34 @@
       &-msg {
         color: $color-text-help;
-        font-size: 12px;
+        font-size: $font-size-s;
       }
     }
     &.list {
       width: 100%;
-      margin-right: 0px;
-      margin-bottom: 0px;
-      margin-top: 10px;
-      box-shadow: 0 2px 10px 0 rgb(0 0 0 / 1%);
+      margin-right: 0;
+      margin-bottom: 0;
+      margin-top: scale-px(10px);
+      box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 1%);
     }
     &-list {
       width: 100%;
-      height: 32px;
+      height: scale-px(32px);
       box-sizing: border-box;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 10px;
+      padding: 0 scale-px(10px);
       background-color: $color-background-sunken;
       .nut-uploader-preview-img-file-name {
         display: flex;
         align-items: center;
         -webkit-line-clamp: 1;
-        padding: 2px;
-        height: 24px;
+        padding: scale-px(2px);
+        height: scale-px(24px);
         @include text-ellipsis();
       }
@@ -132,7 +132,7 @@
         bottom: 0;
         .nut-progress-outer {
-          height: 2px !important;
+          height: scale-px(2px) !important;
         }
       }
     }
@@ -160,7 +160,7 @@
         position: absolute;
         bottom: 0;
         left: 0;
-        font-size: 12px;
+        font-size: $font-size-s;
         color: $white;
         text-align: center;
         box-sizing: border-box;
@@ -196,7 +196,7 @@
         &-name {
           display: flex;
           width: 90%;
-          font-size: 12px;
+          font-size: $font-size-s;
           color: $color-text;
           @include moreline-ellipsis();
@@ -234,7 +234,7 @@
     &.list {
       margin-right: 0;
-      margin-left: 0px;
+      margin-left: 0;
     }
     .close {

package/dist/cjs/packages/uploader/style-jmapp/style.css CHANGED Viewed

@@ -63,7 +63,7 @@
   margin-right: var(--nutui-uploader-preview-margin-right, var(--nutui-spacing-s));
   margin-bottom: var(--nutui-uploader-preview-margin-bottom, var(--nutui-spacing-s));
   border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgba(0, 0, 0, 0.1);
 }
 .nut-uploader-preview-progress {
   position: absolute;
@@ -84,31 +84,31 @@
 }
 .nut-uploader-preview-progress-msg {
   color: var(--nutui-color-text-help);
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
 }
 .nut-uploader-preview.list {
   width: 100%;
-  margin-right: 0px;
-  margin-bottom: 0px;
-  margin-top: 10px;
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.01);
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-top: scale-px(10px);
+  box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgba(0, 0, 0, 0.01);
 }
 .nut-uploader-preview-list {
   width: 100%;
-  height: 32px;
+  height: scale-px(32px);
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 10px;
+  padding: 0 scale-px(10px);
   background-color: var(--nutui-gray-2, #f8f8f8);
 }
 .nut-uploader-preview-list .nut-uploader-preview-img-file-name {
   display: flex;
   align-items: center;
   -webkit-line-clamp: 1;
-  padding: 2px;
-  height: 24px;
+  padding: scale-px(2px);
+  height: scale-px(24px);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -120,7 +120,7 @@
   bottom: 0;
 }
 .nut-uploader-preview-list .nut-progress .nut-progress-outer {
-  height: 2px !important;
+  height: scale-px(2px) !important;
 }
 .nut-uploader-preview .close {
   position: absolute;
@@ -143,7 +143,7 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
   color: #ffffff;
   text-align: center;
   box-sizing: border-box;
@@ -180,7 +180,7 @@
 .nut-uploader-preview-img-file-name {
   display: flex;
   width: 90%;
-  font-size: 12px;
+  font-size: var(--nutui-font-text-small);
   color: var(--nutui-color-text);
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -216,7 +216,7 @@
 [dir=rtl] .nut-uploader-preview.list,
 .nut-rtl .nut-uploader-preview.list {
   margin-right: 0;
-  margin-left: 0px;
+  margin-left: 0;
 }
 [dir=rtl] .nut-uploader-preview .close,
 .nut-rtl .nut-uploader-preview .close {

package/dist/cjs/packages/uploader/style-jmapp/uploader.scss CHANGED Viewed

@@ -72,7 +72,7 @@
     margin-right: $uploader-preview-margin-right;
     margin-bottom: $uploader-preview-margin-bottom;
     border-radius: $uploader-image-border-radius;
-    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
+    box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 10%);
     &-progress {
       position: absolute;
@@ -94,34 +94,34 @@
       &-msg {
         color: $color-text-help;
-        font-size: 12px;
+        font-size: $font-size-s;
       }
     }
     &.list {
       width: 100%;
-      margin-right: 0px;
-      margin-bottom: 0px;
-      margin-top: 10px;
-      box-shadow: 0 2px 10px 0 rgb(0 0 0 / 1%);
+      margin-right: 0;
+      margin-bottom: 0;
+      margin-top: scale-px(10px);
+      box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 1%);
     }
     &-list {
       width: 100%;
-      height: 32px;
+      height: scale-px(32px);
       box-sizing: border-box;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 10px;
+      padding: 0 scale-px(10px);
       background-color: $color-background-sunken;
       .nut-uploader-preview-img-file-name {
         display: flex;
         align-items: center;
         -webkit-line-clamp: 1;
-        padding: 2px;
-        height: 24px;
+        padding: scale-px(2px);
+        height: scale-px(24px);
         @include text-ellipsis();
       }
@@ -132,7 +132,7 @@
         bottom: 0;
         .nut-progress-outer {
-          height: 2px !important;
+          height: scale-px(2px) !important;
         }
       }
     }
@@ -160,7 +160,7 @@
         position: absolute;
         bottom: 0;
         left: 0;
-        font-size: 12px;
+        font-size: $font-size-s;
         color: $white;
         text-align: center;
         box-sizing: border-box;
@@ -196,7 +196,7 @@
         &-name {
           display: flex;
           width: 90%;
-          font-size: 12px;
+          font-size: $font-size-s;
           color: $color-text;
           @include moreline-ellipsis();
@@ -234,7 +234,7 @@
     &.list {
       margin-right: 0;
-      margin-left: 0px;
+      margin-left: 0;
     }
     .close {