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

package/dist/cjs/packages/calendaritem/style/style.harmony.css

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */

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

@@ -7,8 +7,8 @@
   border-radius: $card-border-radius;
 
   &-left {
-    width: 120px;
-    height: 120px;
+    width: scale-px(120px);
+    height: scale-px(120px);
     flex-shrink: 0;
 
     > img {
@@ -21,25 +21,25 @@
 
   &-right {
     flex: 1;
-    padding: 0 10px 8px;
+    padding: 0 scale-px(10px) scale-px(8px);
 
     &-title {
       @include moreline-ellipsis();
-      line-height: 1.5;
-      font-size: 14px;
+      line-height: $line-height-2xl;
+      font-size: $font-size-base;
       color: $color-title;
     }
 
     &-price {
       display: flex;
       align-items: center;
-      height: 18px;
-      line-height: 18px;
-      margin-top: 9px;
+      height: scale-px(18px);
+      line-height: scale-px(18px);
+      margin-top: scale-px(9px);
 
       &-origin {
         &.nut-price {
-          margin-left: 2px;
+          margin-left: scale-px(2px);
           .nut-price-symbol,
           .nut-price-integer,
           .nut-price-decimal {
@@ -52,11 +52,11 @@
     &-other {
       display: flex;
       align-items: center;
-      padding: 5px 0 2px;
+      padding: scale-px(5px) 0 scale-px(2px);
 
       .nut-tag {
-        padding: 0 2px;
-        margin-right: 5px;
+        padding: 0 scale-px(2px);
+        margin-right: scale-px(5px);
         font-size: $font-size-xs;
       }
     }
@@ -67,10 +67,10 @@
       align-items: center;
 
       &-name {
-        line-height: 1.5;
+        line-height: $line-height-xl;
         color: $color-text;
-        font-size: 12px;
-        padding-top: 4px;
+        font-size: $font-size-s;
+        padding-top: scale-px(4px);
       }
     }
   }
@@ -83,7 +83,7 @@
       &-origin {
         &.nut-price {
           margin-left: 0;
-          margin-right: 2px;
+          margin-right: scale-px(2px);
         }
       }
     }
@@ -91,7 +91,7 @@
     &-other {
       .nut-tag {
         margin-right: 0;
-        margin-left: 5px;
+        margin-left: scale-px(5px);
       }
     }
   }

package/dist/cjs/packages/card/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,22 +16,22 @@
   width: 100%;
   display: flex;
   background-color: inherit;
-  border-radius: var(--nutui-card-border-radius, 4px);
+  border-radius: var(--nutui-card-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-card-left {
-  width: 120px;
-  height: 120px;
+  width: calc(120px * var(--nut-scale-f, 1));
+  height: calc(120px * var(--nut-scale-f, 1));
   flex-shrink: 0;
 }
 .nut-card-left > img {
   display: block;
   width: 100%;
   height: 100%;
-  border-radius: var(--nutui-card-border-radius, 4px);
+  border-radius: var(--nutui-card-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-card-right {
   flex: 1;
-  padding: 0 10px 8px;
+  padding: 0 calc(10px * var(--nut-scale-f, 1)) calc(8px * var(--nut-scale-f, 1));
 }
 .nut-card-right-title {
   display: -webkit-box;
@@ -29,19 +39,19 @@
   -webkit-line-clamp: 2;
   overflow: hidden;
   word-break: break-all;
-  line-height: 1.5;
-  font-size: 14px;
+  line-height: var(--nutui-line-height-2xl, var(--nutui-font-size-2xl, calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-color-title, #1a1a1a);
 }
 .nut-card-right-price {
   display: flex;
   align-items: center;
-  height: 18px;
-  line-height: 18px;
-  margin-top: 9px;
+  height: calc(18px * var(--nut-scale-f, 1));
+  line-height: calc(18px * var(--nut-scale-f, 1));
+  margin-top: calc(9px * var(--nut-scale-f, 1));
 }
 .nut-card-right-price-origin.nut-price {
-  margin-left: 2px;
+  margin-left: calc(2px * var(--nut-scale-f, 1));
 }
 .nut-card-right-price-origin.nut-price .nut-price-symbol,
 .nut-card-right-price-origin.nut-price .nut-price-integer,
@@ -51,12 +61,12 @@
 .nut-card-right-other {
   display: flex;
   align-items: center;
-  padding: 5px 0 2px;
+  padding: calc(5px * var(--nut-scale-f, 1)) 0 calc(2px * var(--nut-scale-f, 1));
 }
 .nut-card-right-other .nut-tag {
-  padding: 0 2px;
-  margin-right: 5px;
-  font-size: var(--nutui-font-size-xs, 11px);
+  padding: 0 calc(2px * var(--nut-scale-f, 1));
+  margin-right: calc(5px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-card-right-shop {
   display: flex;
@@ -64,19 +74,19 @@
   align-items: center;
 }
 .nut-card-right-shop-name {
-  line-height: 1.5;
+  line-height: var(--nutui-line-height-xl, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-color-text, #505259);
-  font-size: 12px;
-  padding-top: 4px;
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  padding-top: calc(4px * var(--nut-scale-f, 1));
 }
 
 [dir=rtl] .nut-card-right-price-origin.nut-price,
 .nut-rtl .nut-card-right-price-origin.nut-price {
   margin-left: 0;
-  margin-right: 2px;
+  margin-right: calc(2px * var(--nut-scale-f, 1));
 }
 [dir=rtl] .nut-card-right-other .nut-tag,
 .nut-rtl .nut-card-right-other .nut-tag {
   margin-right: 0;
-  margin-left: 5px;
+  margin-left: calc(5px * var(--nut-scale-f, 1));
 }

package/dist/cjs/packages/card/style/style.harmony.css

@@ -1,10 +1,21 @@
+: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 */
 /* #endif */
 .nut-price {
   direction: ltr;
-  font-size: var(--nutui-font-size-l, 15px);
+  font-size: var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   display: flex;
   flex-direction: row;
   align-items: baseline;
@@ -12,83 +23,83 @@
 .nut-price-symbol, .nut-price-integer, .nut-price-decimal {
   color: var(--nutui-price-color, var(--nutui-color-text-help));
   font-family: "JDZH-Bold";
-  line-height: 1;
 }
 .nut-price-darkgray .nut-price-symbol, .nut-price-darkgray .nut-price-integer, .nut-price-darkgray .nut-price-decimal {
-  font-family: "JDZH-Bold";
   color: var(--nutui-price-darkgray-color, var(--nutui-gray-7));
 }
 .nut-price-primary .nut-price-symbol, .nut-price-primary .nut-price-integer, .nut-price-primary .nut-price-decimal {
-  font-family: "JDZH-Bold";
   color: var(--nutui-price-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-price-symbol {
   padding-right: var(--nutui-price-symbol-padding-right, 0px);
 }
 .nut-price-symbol-xlarge {
-  font-size: var(--nutui-price-symbol-xlarge-size, 12px);
+  font-size: var(--nutui-price-symbol-xlarge-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-symbol-xlarge-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-symbol-large {
-  font-size: var(--nutui-price-symbol-large-size, 12px);
+  font-size: var(--nutui-price-symbol-large-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-symbol-large-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-symbol-normal {
-  font-size: var(--nutui-price-symbol-normal-size, 12px);
+  font-size: var(--nutui-price-symbol-normal-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-symbol-normal-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-symbol-small {
-  font-size: var(--nutui-price-symbol-small-size, 12px);
+  font-size: var(--nutui-price-symbol-small-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-symbol-small-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-symbol-rtl {
   padding-right: 0;
   padding-left: var(--nutui-price-symbol-padding-right, 0px);
 }
 .nut-price-integer-xlarge {
-  font-size: var(--nutui-price-integer-xlarge-size, 24px);
-  /* #ifdef dynamic */
-  line-height: var(--nutui-price-integer-xlarge-size, 24px);
-  /* #endif */
+  font-size: var(--nutui-price-integer-xlarge-size, var(--nutui-font-size-xxl, calc(24px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-integer-xlarge-size, var(--nutui-font-size-xxl, calc(24px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-integer-large {
-  font-size: var(--nutui-price-integer-large-size, 18px);
-  /* #ifdef dynamic */
-  line-height: var(--nutui-price-integer-large-size, 18px);
-  /* #endif */
+  font-size: var(--nutui-price-integer-large-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-integer-large-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-integer-normal {
-  font-size: var(--nutui-price-integer-normal-size, 16px);
-  /* #ifdef dynamic */
-  line-height: var(--nutui-price-integer-normal-size, 16px);
-  /* #endif */
+  font-size: var(--nutui-price-integer-normal-size, var(--nutui-font-size-md, calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-integer-normal-size, var(--nutui-font-size-md, calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-integer-small {
-  font-size: var(--nutui-price-integer-small-size, 12px);
+  font-size: var(--nutui-price-integer-small-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-integer-small-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-decimal-xlarge {
-  font-size: var(--nutui-price-decimal-xlarge-size, 12px);
+  font-size: var(--nutui-price-decimal-xlarge-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-decimal-xlarge-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-decimal-large {
-  font-size: var(--nutui-price-decimal-large-size, 12px);
+  font-size: var(--nutui-price-decimal-large-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-decimal-large-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-decimal-normal {
-  font-size: var(--nutui-price-decimal-normal-size, 12px);
+  font-size: var(--nutui-price-decimal-normal-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-decimal-normal-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-decimal-small {
-  font-size: var(--nutui-price-decimal-small-size, 12px);
+  font-size: var(--nutui-price-decimal-small-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-price-decimal-small-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-price-line {
   text-decoration: line-through var(--nutui-price-line-color, var(--nutui-color-text-help));
 }
 
 .nut-tag {
-  padding: var(--nutui-tag-padding, 0px 2px);
+  padding: var(--nutui-tag-padding, 0px calc(2px * var(--nut-scale-f, 1)));
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));
-  border-radius: var(--nutui-tag-border-radius, 2px);
-  height: var(--nutui-tag-height, 14px);
+  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  border-radius: var(--nutui-tag-border-radius, calc(2px * var(--nut-scale-f, 1)));
+  height: var(--nutui-tag-height, calc(14px * var(--nut-scale-f, 1)));
   color: var(--nutui-tag-color, #ffffff);
-  border: var(--nutui-tag-border-width, 1px) solid transparent;
+  border: var(--nutui-tag-border-width, calc(1px * var(--nut-scale-f, 1))) solid transparent;
 }
 .nut-tag .nut-icon {
   vertical-align: middle;
@@ -96,7 +107,7 @@
   color: var(--nutui-tag-color, #ffffff);
 }
 .nut-tag-text {
-  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));
+  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-tag-color, #ffffff);
 }
 .nut-tag-text-plain {
@@ -106,7 +117,7 @@
   background: var(--nutui-tag-background-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-tag-primary {
-  background: var(--nutui-tag-primary-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
+  background: #fa2c19;
 }
 .nut-tag-info {
   background: var(--nutui-tag-info-background-color, var(--nutui-color-info, #0073ff));
@@ -121,10 +132,10 @@
   background: var(--nutui-tag-warning-background-color, var(--nutui-color-warning, #ffbf00));
 }
 .nut-tag-round {
-  border-radius: var(--nutui-tag-round-border-radius, 8px);
+  border-radius: var(--nutui-tag-round-border-radius, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-tag-mark {
-  border-radius: var(--nutui-tag-mark-border-radius, 0 8px 8px 0);
+  border-radius: var(--nutui-tag-mark-border-radius, 0 calc(8px * var(--nut-scale-f, 1)) calc(8px * var(--nut-scale-f, 1)) 0);
 }
 .nut-tag-close {
   cursor: pointer;
@@ -138,13 +149,17 @@
   /* #endif */
   align-items: center;
   justify-content: center;
-  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));
+  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-tag-color, #ffffff);
   margin-left: 4px;
 }
 .nut-tag-plain {
   background-color: #fff;
-  border: var(--nutui-tag-border-width, 1px) solid var(--nutui-color-title, #1a1a1a);
+  border: var(--nutui-tag-border-width, calc(1px * var(--nut-scale-f, 1))) solid var(--nutui-color-title, #1a1a1a);
+}
+.nut-tag-close-icon {
+  width: var(--nutui-icon-size-8, calc(8px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+  height: var(--nutui-icon-size-8, calc(8px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
 }
 
 [dir=rtl] .nut-tag .nut-icon,
@@ -157,22 +172,22 @@
   width: 100%;
   display: flex;
   background-color: inherit;
-  border-radius: var(--nutui-card-border-radius, 4px);
+  border-radius: var(--nutui-card-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-card-left {
-  width: 120px;
-  height: 120px;
+  width: calc(120px * var(--nut-scale-f, 1));
+  height: calc(120px * var(--nut-scale-f, 1));
   flex-shrink: 0;
 }
 .nut-card-left > img {
   display: block;
   width: 100%;
   height: 100%;
-  border-radius: var(--nutui-card-border-radius, 4px);
+  border-radius: var(--nutui-card-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-card-right {
   flex: 1;
-  padding: 0 10px 8px;
+  padding: 0 calc(10px * var(--nut-scale-f, 1)) calc(8px * var(--nut-scale-f, 1));
 }
 .nut-card-right-title {
   display: -webkit-box;
@@ -180,19 +195,19 @@
   -webkit-line-clamp: 2;
   overflow: hidden;
   word-break: break-all;
-  line-height: 1.5;
-  font-size: 14px;
+  line-height: var(--nutui-line-height-2xl, var(--nutui-font-size-2xl, calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-color-title, #1a1a1a);
 }
 .nut-card-right-price {
   display: flex;
   align-items: center;
-  height: 18px;
-  line-height: 18px;
-  margin-top: 9px;
+  height: calc(18px * var(--nut-scale-f, 1));
+  line-height: calc(18px * var(--nut-scale-f, 1));
+  margin-top: calc(9px * var(--nut-scale-f, 1));
 }
 .nut-card-right-price-origin.nut-price {
-  margin-left: 2px;
+  margin-left: calc(2px * var(--nut-scale-f, 1));
 }
 .nut-card-right-price-origin.nut-price .nut-price-symbol,
 .nut-card-right-price-origin.nut-price .nut-price-integer,
@@ -202,12 +217,12 @@
 .nut-card-right-other {
   display: flex;
   align-items: center;
-  padding: 5px 0 2px;
+  padding: calc(5px * var(--nut-scale-f, 1)) 0 calc(2px * var(--nut-scale-f, 1));
 }
 .nut-card-right-other .nut-tag {
-  padding: 0 2px;
-  margin-right: 5px;
-  font-size: var(--nutui-font-size-xs, 11px);
+  padding: 0 calc(2px * var(--nut-scale-f, 1));
+  margin-right: calc(5px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-card-right-shop {
   display: flex;
@@ -215,19 +230,19 @@
   align-items: center;
 }
 .nut-card-right-shop-name {
-  line-height: 1.5;
+  line-height: var(--nutui-line-height-xl, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-color-text, #505259);
-  font-size: 12px;
-  padding-top: 4px;
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  padding-top: calc(4px * var(--nut-scale-f, 1));
 }
 
 [dir=rtl] .nut-card-right-price-origin.nut-price,
 .nut-rtl .nut-card-right-price-origin.nut-price {
   margin-left: 0;
-  margin-right: 2px;
+  margin-right: calc(2px * var(--nut-scale-f, 1));
 }
 [dir=rtl] .nut-card-right-other .nut-tag,
 .nut-rtl .nut-card-right-other .nut-tag {
   margin-right: 0;
-  margin-left: 5px;
+  margin-left: calc(5px * var(--nut-scale-f, 1));
 }

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

@@ -7,8 +7,8 @@
   border-radius: $card-border-radius;
 
   &-left {
-    width: 120px;
-    height: 120px;
+    width: scale-px(120px);
+    height: scale-px(120px);
     flex-shrink: 0;
 
     > img {
@@ -21,25 +21,25 @@
 
   &-right {
     flex: 1;
-    padding: 0 10px 8px;
+    padding: 0 scale-px(10px) scale-px(8px);
 
     &-title {
       @include moreline-ellipsis();
-      line-height: 1.5;
-      font-size: 14px;
+      line-height: $line-height-2xl;
+      font-size: $font-size-base;
       color: $color-title;
     }
 
     &-price {
       display: flex;
       align-items: center;
-      height: 18px;
-      line-height: 18px;
-      margin-top: 9px;
+      height: scale-px(18px);
+      line-height: scale-px(18px);
+      margin-top: scale-px(9px);
 
       &-origin {
         &.nut-price {
-          margin-left: 2px;
+          margin-left: scale-px(2px);
           .nut-price-symbol,
           .nut-price-integer,
           .nut-price-decimal {
@@ -52,11 +52,11 @@
     &-other {
       display: flex;
       align-items: center;
-      padding: 5px 0 2px;
+      padding: scale-px(5px) 0 scale-px(2px);
 
       .nut-tag {
-        padding: 0 2px;
-        margin-right: 5px;
+        padding: 0 scale-px(2px);
+        margin-right: scale-px(5px);
         font-size: $font-size-xs;
       }
     }
@@ -67,10 +67,10 @@
       align-items: center;
 
       &-name {
-        line-height: 1.5;
+        line-height: $line-height-xl;
         color: $color-text;
-        font-size: 12px;
-        padding-top: 4px;
+        font-size: $font-size-s;
+        padding-top: scale-px(4px);
       }
     }
   }
@@ -83,7 +83,7 @@
       &-origin {
         &.nut-price {
           margin-left: 0;
-          margin-right: 2px;
+          margin-right: scale-px(2px);
         }
       }
     }
@@ -91,7 +91,7 @@
     &-other {
       .nut-tag {
         margin-right: 0;
-        margin-left: 5px;
+        margin-left: scale-px(5px);
       }
     }
   }

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

@@ -9,8 +9,8 @@
   border-radius: var(--nutui-card-border-radius, 4px);
 }
 .nut-card-left {
-  width: 120px;
-  height: 120px;
+  width: scale-px(120px);
+  height: scale-px(120px);
   flex-shrink: 0;
 }
 .nut-card-left > img {
@@ -21,7 +21,7 @@
 }
 .nut-card-right {
   flex: 1;
-  padding: 0 10px 8px;
+  padding: 0 scale-px(10px) scale-px(8px);
 }
 .nut-card-right-title {
   display: -webkit-box;
@@ -29,19 +29,19 @@
   -webkit-line-clamp: 2;
   overflow: hidden;
   word-break: break-all;
-  line-height: 1.5;
-  font-size: 14px;
+  line-height: var(--nutui-line-height-2xl, var(--nutui-font-size-2xl, 20px));
+  font-size: var(--nutui-font-text);
   color: var(--nutui-color-title);
 }
 .nut-card-right-price {
   display: flex;
   align-items: center;
-  height: 18px;
-  line-height: 18px;
-  margin-top: 9px;
+  height: scale-px(18px);
+  line-height: scale-px(18px);
+  margin-top: scale-px(9px);
 }
 .nut-card-right-price-origin.nut-price {
-  margin-left: 2px;
+  margin-left: scale-px(2px);
 }
 .nut-card-right-price-origin.nut-price .nut-price-symbol,
 .nut-card-right-price-origin.nut-price .nut-price-integer,
@@ -51,11 +51,11 @@
 .nut-card-right-other {
   display: flex;
   align-items: center;
-  padding: 5px 0 2px;
+  padding: scale-px(5px) 0 scale-px(2px);
 }
 .nut-card-right-other .nut-tag {
-  padding: 0 2px;
-  margin-right: 5px;
+  padding: 0 scale-px(2px);
+  margin-right: scale-px(5px);
   font-size: var(--nutui-font-text-xs);
 }
 .nut-card-right-shop {
@@ -64,19 +64,19 @@
   align-items: center;
 }
 .nut-card-right-shop-name {
-  line-height: 1.5;
+  line-height: var(--nutui-line-height-xl, var(--nutui-font-h2));
   color: var(--nutui-color-text);
-  font-size: 12px;
-  padding-top: 4px;
+  font-size: var(--nutui-font-text-small);
+  padding-top: scale-px(4px);
 }
 
 [dir=rtl] .nut-card-right-price-origin.nut-price,
 .nut-rtl .nut-card-right-price-origin.nut-price {
   margin-left: 0;
-  margin-right: 2px;
+  margin-right: scale-px(2px);
 }
 [dir=rtl] .nut-card-right-other .nut-tag,
 .nut-rtl .nut-card-right-other .nut-tag {
   margin-right: 0;
-  margin-left: 5px;
+  margin-left: scale-px(5px);
 }