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/es/packages/range/style-jrkf/style.css CHANGED Viewed

@@ -21,13 +21,13 @@
   height: var(--nutui-range-height, 2px);
   margin: 0 var(--nutui-range-margin, 15px);
   background-color: var(--nutui-range-inactive-color, var(--nutui-color-default));
-  border-radius: 2px;
+  border-radius: scale-px(2px);
   flex: 1;
   cursor: pointer;
 }
 .nut-range::before {
   position: absolute;
-  inset-block: -8px;
+  inset-block: scale-px(-8px);
   inset-inline: 0;
   content: "";
 }
@@ -44,7 +44,7 @@
   max-width: 100%;
   max-height: 100%;
   background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff6666));
-  border-radius: 2px;
+  border-radius: scale-px(2px);
 }
 .nut-range-bar-animate {
   transition: all 0.2s;
@@ -56,7 +56,7 @@
   height: var(--nutui-range-button-height, 24px);
   background: var(--nutui-range-button-background, var(--nutui-color-text-dark));
   border-radius: 50%;
-  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 scale-px(1px) scale-px(2px) 0 rgba(0, 0, 0, 0.15);
   border: var(--nutui-range-button-border, none);
   outline: none;
   align-items: center;
@@ -86,9 +86,9 @@
 .nut-range-button-number {
   position: relative;
   width: 200%;
-  height: 24px;
-  line-height: 14px;
-  padding: 5px 0;
+  height: scale-px(24px);
+  line-height: scale-px(14px);
+  padding: scale-px(5px) 0;
   left: 50%;
   display: flex;
   align-items: center;
@@ -112,21 +112,21 @@
 .nut-range-mark {
   position: absolute;
   width: 100%;
-  height: 14px;
+  height: scale-px(14px);
   overflow: visible;
   top: 50%;
 }
 .nut-range-mark-text-wrapper {
   position: absolute;
   height: 100%;
-  top: 14px;
+  top: scale-px(14px);
   display: inline-block;
-  transform: translateX(-10px);
+  transform: translateX(scale-px(-10px));
 }
 .nut-range-mark-text {
   position: absolute;
-  line-height: 16px;
-  font-size: 12px;
+  line-height: scale-px(16px);
+  font-size: var(--nutui-font-text-small);
   color: #999;
   text-align: center;
   word-break: keep-all;
@@ -134,11 +134,11 @@
 }
 .nut-range-tick {
   position: absolute;
-  top: -20px;
-  width: 11px;
-  height: 11px;
-  left: 0px;
-  border-radius: 6px;
+  top: scale-px(-20px);
+  width: scale-px(11px);
+  height: scale-px(11px);
+  left: 0;
+  border-radius: scale-px(6px);
   background: var(--nutui-range-inactive-color, var(--nutui-color-default));
 }
 .nut-range-tick-active {
@@ -148,12 +148,12 @@
 .nut-range-vertical-container {
   height: 100%;
   flex-direction: column;
-  padding: 0px 15px;
+  padding: 0 scale-px(15px);
 }
 .nut-range-vertical {
   width: var(--nutui-range-height, 2px);
-  margin: var(--nutui-range-margin, 15px) 0px;
+  margin: var(--nutui-range-margin, 15px) 0;
 }
 .nut-range-vertical-button-wrapper, .nut-range-vertical-button-wrapper-right {
   position: absolute;
@@ -165,50 +165,50 @@
   left: 50%;
 }
 .nut-range-vertical-button-wrapper-left {
-  top: 0px;
+  top: 0;
   left: 50%;
   /* #ifndef dynamic*/
   right: initial;
   /* #endif */
 }
 .nut-range-vertical-button-number {
-  left: 0px;
+  left: 0;
   top: 50%;
 }
 .nut-range-vertical-mark {
   position: absolute;
-  width: 36px;
+  width: scale-px(36px);
   height: 100%;
-  top: 0px;
+  top: 0;
   right: 50%;
   overflow: visible;
-  font-size: 12px;
-  padding: 0px;
+  font-size: var(--nutui-font-text-small);
+  padding: 0;
 }
 .nut-range-vertical-mark-hm {
-  left: -34px;
+  left: scale-px(-34px);
 }
 .nut-range-vertical-mark-text-wrapper {
-  height: 16px;
+  height: scale-px(16px);
   position: absolute;
   display: inline-block;
   user-select: none;
-  transform: translateY(-11px);
+  transform: translateY(scale-px(-11px));
 }
 .nut-range-vertical-mark-text {
   height: 100%;
-  line-height: 16px;
+  line-height: scale-px(16px);
   color: #999;
   text-align: center;
   word-break: keep-all;
 }
 .nut-range-vertical-tick {
   position: absolute;
-  top: 2px;
-  left: 31px;
-  width: 10px;
-  height: 10px;
-  border-radius: 5px;
+  top: scale-px(2px);
+  left: scale-px(31px);
+  width: scale-px(10px);
+  height: scale-px(10px);
+  border-radius: scale-px(5px);
   background: var(--nutui-range-inactive-color, var(--nutui-color-default));
 }
 .nut-range-vertical-tick-active {
@@ -232,14 +232,14 @@
 }
 [dir=rtl] .nut-range-tick,
 .rtl-nut-range-tick {
-  right: 0px;
+  right: 0;
   /* #ifndef dynamic*/
   left: initial;
   /* #endif */
 }
 [dir=rtl] .nut-range-mark-text,
 .rtl-nut-range-mark-text {
-  transform: translateX(10px);
+  transform: translateX(scale-px(10px));
 }
 [dir=rtl] .nut-range-vertical-button-wrapper, [dir=rtl] .nut-range-vertical-button-wrapper-right,
 .rtl-nut-range-vertical-button-wrapper,
@@ -264,11 +264,11 @@
 [dir=rtl] .nut-range-vertical-tick,
 .rtl-nut-range-vertical-tick {
   left: auto;
-  right: 30px;
+  right: scale-px(30px);
   margin-left: 0;
-  margin-right: 0px;
+  margin-right: 0;
 }
 [dir=rtl] .nut-range-vertical-mark-text-wrapper,
 .rtl-nut-range-vertical-mark-text-wrapper {
-  transform: translateY(-11px);
+  transform: translateY(scale-px(-11px));
 }

package/dist/es/packages/rate/rate.js CHANGED Viewed

@@ -2,10 +2,9 @@ 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 _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { StarFill } from "@nutui/icons-react-taro";
-import { useReady } from "@tarojs/taro";
 import { Text, View } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 import { usePropsValue } from "../../hooks/use-props-value";
@@ -84,7 +83,7 @@ export var Rate = function(props) {
             return 0;
         }
     };
-    var updateRects = function() {
+    var updateRects = useCallback(function() {
         var _loop = function(index) {
             var item = refs[index];
             if (item) {
@@ -94,10 +93,14 @@ export var Rate = function(props) {
             }
         };
         for(var index = 0; index < refs.length; index++)_loop(index);
-    };
-    useReady(function() {
+    }, [
+        refs
+    ]);
+    useLayoutEffect(function() {
         updateRects();
-    });
+    }, [
+        updateRects
+    ]);
     var handleTouchStart = function(e) {
         if (!touchable || readOnly || disabled) {
             return;

package/dist/es/packages/rate/style/rate.scss CHANGED Viewed

@@ -44,16 +44,16 @@
     &-large {
       margin-left: calc($rate-item-margin * 2);
       .nut-icon {
-        height: calc($rate-icon-size + 8px);
-        width: calc($rate-icon-size + 8px);
+        height: calc($rate-icon-size + scale-px(8px));
+        width: calc($rate-icon-size + scale-px(8px));
       }
     }
     &-small {
       margin-left: calc($rate-item-margin / 2);
       .nut-icon {
-        height: calc($rate-icon-size - 4px);
-        width: calc($rate-icon-size - 4px);
+        height: calc($rate-icon-size - scale-px(4px));
+        width: calc($rate-icon-size - scale-px(4px));
       }
     }
@@ -106,20 +106,22 @@
     align-items: center;
     color: $rate-font-color;
     font-family: 'JDZH-Regular';
-    line-height: 1;
     &-normal {
       padding-left: $rate-item-margin;
       font-size: $rate-font-size;
+      line-height: $line-height-s;
     }
     &-large {
-      font-size: calc($rate-font-size + 6px);
+      font-size: $rate-font-size-large;
+      line-height: $line-height-xl;
       padding-left: calc($rate-item-margin * 2);
     }
     &-small {
-      font-size: calc($rate-font-size - 2px);
+      font-size: $rate-font-size-small;
+      line-height: $line-height-xxs;
       padding-left: calc($rate-item-margin / 2);
     }
@@ -146,7 +148,7 @@
     }
     &-small {
-      margin-right: calc($rate-item-margin - 2px);
+      margin-right: calc($rate-item-margin - scale-px(2px));
     }
     &:last-child {
@@ -183,7 +185,7 @@
     }
     &-small {
-      padding-right: calc($rate-item-margin - 2px);
+      padding-right: calc($rate-item-margin - scale-px(2px));
     }
   }
 }

package/dist/es/packages/rate/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 */
@@ -30,25 +40,25 @@
   flex-shrink: 0;
 }
 .nut-rate-item-normal {
-  margin-left: var(--nutui-rate-item-margin, 4px);
+  margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-rate-item-normal .nut-icon {
-  height: var(--nutui-rate-icon-size, 12px);
-  width: var(--nutui-rate-icon-size, 12px);
+  height: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  width: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-rate-item-large {
-  margin-left: calc(var(--nutui-rate-item-margin, 4px) * 2);
+  margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
 }
 .nut-rate-item-large .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) + 8px);
-  width: calc(var(--nutui-rate-icon-size, 12px) + 8px);
+  height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
+  width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
 }
 .nut-rate-item-small {
-  margin-left: calc(var(--nutui-rate-item-margin, 4px) / 2);
+  margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
 }
 .nut-rate-item-small .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) - 4px);
-  width: calc(var(--nutui-rate-icon-size, 12px) - 4px);
+  height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
+  width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
 }
 .nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
   margin-left: 0;
@@ -86,19 +96,21 @@
   align-items: center;
   color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333));
   font-family: "JDZH-Regular";
-  line-height: 1;
 }
 .nut-rate-score-normal {
-  padding-left: var(--nutui-rate-item-margin, 4px);
-  font-size: var(--nutui-rate-font-size, 12px);
+  padding-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-rate-score-large {
-  font-size: calc(var(--nutui-rate-font-size, 12px) + 6px);
-  padding-left: calc(var(--nutui-rate-item-margin, 4px) * 2);
+  font-size: var(--nutui-rate-font-size-large, calc(var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))))) + 6px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: var(--nutui-line-height-xl, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
 }
 .nut-rate-score-small {
-  font-size: calc(var(--nutui-rate-font-size, 12px) - 2px);
-  padding-left: calc(var(--nutui-rate-item-margin, 4px) / 2);
+  font-size: var(--nutui-rate-font-size-small, calc(var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))))) - 2px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: var(--nutui-line-height-xxs, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
 }
 .nut-rate-score-disabled {
   color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
@@ -114,15 +126,15 @@
 }
 [dir=rtl] .nut-rate-item-normal,
 .nut-rtl .nut-rate-item-normal {
-  margin-right: var(--nutui-rate-item-margin, 4px);
+  margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-rate-item-large,
 .nut-rtl .nut-rate-item-large {
-  margin-right: calc(var(--nutui-rate-item-margin, 4px) * 2);
+  margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
 }
 [dir=rtl] .nut-rate-item-small,
 .nut-rtl .nut-rate-item-small {
-  margin-right: calc(var(--nutui-rate-item-margin, 4px) - 2px);
+  margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
 }
 [dir=rtl] .nut-rate-item:last-child,
 .nut-rtl .nut-rate-item:last-child {
@@ -149,13 +161,13 @@
 }
 [dir=rtl] .nut-rate-score-large,
 .nut-rtl .nut-rate-score-large {
-  padding-right: calc(var(--nutui-rate-item-margin, 4px) * 2);
+  padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
 }
 [dir=rtl] .nut-rate-score-normal,
 .nut-rtl .nut-rate-score-normal {
-  padding-right: var(--nutui-rate-item-margin, 4px);
+  padding-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-rate-score-small,
 .nut-rtl .nut-rate-score-small {
-  padding-right: calc(var(--nutui-rate-item-margin, 4px) - 2px);
+  padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
 }

package/dist/es/packages/rate/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 */
@@ -30,25 +40,25 @@
   flex-shrink: 0;
 }
 .nut-rate-item-normal {
-  margin-left: var(--nutui-rate-item-margin, 4px);
+  margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-rate-item-normal .nut-icon {
-  height: var(--nutui-rate-icon-size, 12px);
-  width: var(--nutui-rate-icon-size, 12px);
+  height: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  width: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-rate-item-large {
-  margin-left: calc(var(--nutui-rate-item-margin, 4px) * 2);
+  margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
 }
 .nut-rate-item-large .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) + 8px);
-  width: calc(var(--nutui-rate-icon-size, 12px) + 8px);
+  height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
+  width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
 }
 .nut-rate-item-small {
-  margin-left: calc(var(--nutui-rate-item-margin, 4px) / 2);
+  margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
 }
 .nut-rate-item-small .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) - 4px);
-  width: calc(var(--nutui-rate-icon-size, 12px) - 4px);
+  height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
+  width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
 }
 .nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
   margin-left: 0;
@@ -86,19 +96,21 @@
   align-items: center;
   color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333));
   font-family: "JDZH-Regular";
-  line-height: 1;
 }
 .nut-rate-score-normal {
-  padding-left: var(--nutui-rate-item-margin, 4px);
-  font-size: var(--nutui-rate-font-size, 12px);
+  padding-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-rate-score-large {
-  font-size: calc(var(--nutui-rate-font-size, 12px) + 6px);
-  padding-left: calc(var(--nutui-rate-item-margin, 4px) * 2);
+  font-size: var(--nutui-rate-font-size-large, calc(var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))))) + 6px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: var(--nutui-line-height-xl, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
 }
 .nut-rate-score-small {
-  font-size: calc(var(--nutui-rate-font-size, 12px) - 2px);
-  padding-left: calc(var(--nutui-rate-item-margin, 4px) / 2);
+  font-size: var(--nutui-rate-font-size-small, calc(var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))))) - 2px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: var(--nutui-line-height-xxs, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
 }
 .nut-rate-score-disabled {
   color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
@@ -114,15 +126,15 @@
 }
 [dir=rtl] .nut-rate-item-normal,
 .nut-rtl .nut-rate-item-normal {
-  margin-right: var(--nutui-rate-item-margin, 4px);
+  margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-rate-item-large,
 .nut-rtl .nut-rate-item-large {
-  margin-right: calc(var(--nutui-rate-item-margin, 4px) * 2);
+  margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
 }
 [dir=rtl] .nut-rate-item-small,
 .nut-rtl .nut-rate-item-small {
-  margin-right: calc(var(--nutui-rate-item-margin, 4px) - 2px);
+  margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
 }
 [dir=rtl] .nut-rate-item:last-child,
 .nut-rtl .nut-rate-item:last-child {
@@ -149,13 +161,13 @@
 }
 [dir=rtl] .nut-rate-score-large,
 .nut-rtl .nut-rate-score-large {
-  padding-right: calc(var(--nutui-rate-item-margin, 4px) * 2);
+  padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
 }
 [dir=rtl] .nut-rate-score-normal,
 .nut-rtl .nut-rate-score-normal {
-  padding-right: var(--nutui-rate-item-margin, 4px);
+  padding-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-rate-score-small,
 .nut-rtl .nut-rate-score-small {
-  padding-right: calc(var(--nutui-rate-item-margin, 4px) - 2px);
+  padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
 }

package/dist/es/packages/rate/style-jmapp/rate.scss CHANGED Viewed

@@ -44,16 +44,16 @@
     &-large {
       margin-left: calc($rate-item-margin * 2);
       .nut-icon {
-        height: calc($rate-icon-size + 8px);
-        width: calc($rate-icon-size + 8px);
+        height: calc($rate-icon-size + scale-px(8px));
+        width: calc($rate-icon-size + scale-px(8px));
       }
     }
     &-small {
       margin-left: calc($rate-item-margin / 2);
       .nut-icon {
-        height: calc($rate-icon-size - 4px);
-        width: calc($rate-icon-size - 4px);
+        height: calc($rate-icon-size - scale-px(4px));
+        width: calc($rate-icon-size - scale-px(4px));
       }
     }
@@ -106,20 +106,22 @@
     align-items: center;
     color: $rate-font-color;
     font-family: 'JDZH-Regular';
-    line-height: 1;
     &-normal {
       padding-left: $rate-item-margin;
       font-size: $rate-font-size;
+      line-height: $line-height-s;
     }
     &-large {
-      font-size: calc($rate-font-size + 6px);
+      font-size: $rate-font-size-large;
+      line-height: $line-height-xl;
       padding-left: calc($rate-item-margin * 2);
     }
     &-small {
-      font-size: calc($rate-font-size - 2px);
+      font-size: $rate-font-size-small;
+      line-height: $line-height-xxs;
       padding-left: calc($rate-item-margin / 2);
     }
@@ -146,7 +148,7 @@
     }
     &-small {
-      margin-right: calc($rate-item-margin - 2px);
+      margin-right: calc($rate-item-margin - scale-px(2px));
     }
     &:last-child {
@@ -183,7 +185,7 @@
     }
     &-small {
-      padding-right: calc($rate-item-margin - 2px);
+      padding-right: calc($rate-item-margin - scale-px(2px));
     }
   }
 }

package/dist/es/packages/rate/style-jmapp/style.css CHANGED Viewed

@@ -40,15 +40,15 @@
   margin-left: calc(var(--nutui-rate-item-margin, 14px) * 2);
 }
 .nut-rate-item-large .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) + 8px);
-  width: calc(var(--nutui-rate-icon-size, 12px) + 8px);
+  height: calc(var(--nutui-rate-icon-size, 12px) + scale-px(8px));
+  width: calc(var(--nutui-rate-icon-size, 12px) + scale-px(8px));
 }
 .nut-rate-item-small {
   margin-left: calc(var(--nutui-rate-item-margin, 14px) / 2);
 }
 .nut-rate-item-small .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) - 4px);
-  width: calc(var(--nutui-rate-icon-size, 12px) - 4px);
+  height: calc(var(--nutui-rate-icon-size, 12px) - scale-px(4px));
+  width: calc(var(--nutui-rate-icon-size, 12px) - scale-px(4px));
 }
 .nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
   margin-left: 0;
@@ -86,18 +86,20 @@
   align-items: center;
   color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333));
   font-family: "JDZH-Regular";
-  line-height: 1;
 }
 .nut-rate-score-normal {
   padding-left: var(--nutui-rate-item-margin, 14px);
   font-size: var(--nutui-rate-font-size, 12px);
+  line-height: var(--nutui-line-height-s, var(--nutui-font-text-small));
 }
 .nut-rate-score-large {
-  font-size: calc(var(--nutui-rate-font-size, 12px) + 6px);
+  font-size: var(--nutui-rate-font-size-large, calc(var(--nutui-rate-font-size, 12px) + 6px));
+  line-height: var(--nutui-line-height-xl, var(--nutui-font-h2));
   padding-left: calc(var(--nutui-rate-item-margin, 14px) * 2);
 }
 .nut-rate-score-small {
-  font-size: calc(var(--nutui-rate-font-size, 12px) - 2px);
+  font-size: var(--nutui-rate-font-size-small, calc(var(--nutui-rate-font-size, 12px) - 2px));
+  line-height: var(--nutui-line-height-xxs, var(--nutui-font-text-mini));
   padding-left: calc(var(--nutui-rate-item-margin, 14px) / 2);
 }
 .nut-rate-score-disabled {
@@ -122,7 +124,7 @@
 }
 [dir=rtl] .nut-rate-item-small,
 .nut-rtl .nut-rate-item-small {
-  margin-right: calc(var(--nutui-rate-item-margin, 14px) - 2px);
+  margin-right: calc(var(--nutui-rate-item-margin, 14px) - scale-px(2px));
 }
 [dir=rtl] .nut-rate-item:last-child,
 .nut-rtl .nut-rate-item:last-child {
@@ -157,5 +159,5 @@
 }
 [dir=rtl] .nut-rate-score-small,
 .nut-rtl .nut-rate-score-small {
-  padding-right: calc(var(--nutui-rate-item-margin, 14px) - 2px);
+  padding-right: calc(var(--nutui-rate-item-margin, 14px) - scale-px(2px));
 }