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

package/dist/es/packages/calendar/style-jmapp/style.css

@@ -37,20 +37,20 @@
   color: var(--nutui-color-title);
   font-size: var(--nutui-calendar-title-font-size, var(--nutui-font-h2));
   font-weight: var(--nutui-calendar-title-font-weight, var(--nutui-font-weight-bold));
-  line-height: 50px;
+  line-height: scale-px(50px);
 }
 .nut-calendar-sub-title {
-  padding: 7px 0;
-  line-height: 22px;
+  padding: scale-px(7px) 0;
+  line-height: scale-px(22px);
   font-size: var(--nutui-calendar-sub-title-font-size, var(--nutui-font-text));
 }
 .nut-calendar-weeks {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  height: 36px;
-  border-radius: 0px 0px 12px 12px;
-  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);
+  height: scale-px(36px);
+  border-radius: 0 0 scale-px(12px) scale-px(12px);
+  box-shadow: 0 scale-px(4px) scale-px(10px) 0 rgba(0, 0, 0, 0.06);
 }
 .nut-calendar-week-item:first-of-type, .nut-calendar-week-item:last-of-type {
   color: var(--nutui-color-primary);
@@ -69,11 +69,11 @@
   box-sizing: border-box;
 }
 .nut-calendar-pannel .calendar-loading-tip {
-  height: 50px;
-  line-height: 50px;
+  height: scale-px(50px);
+  line-height: scale-px(50px);
   text-align: center;
   position: absolute;
-  top: -50px;
+  top: scale-px(-50px);
   left: 0;
   right: 0;
   font-size: var(--nutui-font-text-small);
@@ -85,9 +85,9 @@
   text-align: center;
 }
 .nut-calendar-month-title {
-  height: 23px;
-  line-height: 23px;
-  margin: 8px 0;
+  height: scale-px(23px);
+  line-height: scale-px(23px);
+  margin: scale-px(8px) 0;
 }
 .nut-calendar-days {
   overflow: hidden;
@@ -102,27 +102,35 @@
   width: var(--nutui-calendar-day-width, 14.28%);
   height: var(--nutui-calendar-day-height, 60px);
   font-weight: var(--nutui-calendar-day-font-weight, var(--nutui-font-weight-bold));
-  margin-bottom: 4px;
+  margin-bottom: scale-px(4px);
+}
+.nut-calendar-day-day, .nut-calendar-day-info-curr {
+  color: var(--nutui-color-title);
 }
 .nut-calendar-day:nth-child(7n+0), .nut-calendar-day:nth-child(7n+1) {
   color: var(--nutui-color-primary);
 }
+.nut-calendar-day:nth-child(7n+0) .nut-calendar-day-day,
+.nut-calendar-day:nth-child(7n+0) .nut-calendar-day-info-curr, .nut-calendar-day:nth-child(7n+1) .nut-calendar-day-day,
+.nut-calendar-day:nth-child(7n+1) .nut-calendar-day-info-curr {
+  color: var(--nutui-color-primary);
+}
 .nut-calendar-day-info, .nut-calendar-day-info-curr {
   position: absolute;
-  bottom: 5px;
+  bottom: scale-px(5px);
   width: 100%;
-  font-size: 12px;
-  line-height: 14px;
+  font-size: var(--nutui-font-text-small);
+  line-height: scale-px(14px);
 }
 .nut-calendar-day-info-top {
   position: absolute;
   width: 100%;
-  top: 5px;
+  top: scale-px(5px);
 }
 .nut-calendar-day-info-bottom {
   position: absolute;
   width: 100%;
-  bottom: 5px;
+  bottom: scale-px(5px);
 }
 .nut-calendar-day-active {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary));
@@ -130,21 +138,27 @@
   border-radius: var(--nutui-calendar-day-active-border-radius, 4px);
 }
 .nut-calendar-day-active.active-start {
-  border-radius: 0px;
+  border-radius: 0;
   border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
   border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
 }
 .nut-calendar-day-active.active-end {
-  border-radius: 0px;
+  border-radius: 0;
   border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
   border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
 }
-.nut-calendar-day-active .nut-calendar-day-info {
+.nut-calendar-day-active.nut-calendar-day-active .nut-calendar-day-info {
+  color: var(--nutui-color-text-dark);
+}
+.nut-calendar-day-active.nut-calendar-day-active .nut-calendar-day-day, .nut-calendar-day-active.nut-calendar-day-active .nut-calendar-day-info-curr {
   color: var(--nutui-color-text-dark);
 }
 .nut-calendar-day-disabled {
   color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled)) !important;
 }
+.nut-calendar-day-disabled.nut-calendar-day-disabled .nut-calendar-day-day, .nut-calendar-day-disabled.nut-calendar-day-disabled .nut-calendar-day-info-curr {
+  color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled));
+}
 .nut-calendar-day-disabled .nut-calendar-day-info-curr {
   display: none;
 }
@@ -152,10 +166,16 @@
   background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed));
   color: var(--nutui-calendar-choose-color, var(--nutui-color-primary));
 }
+.nut-calendar-day-choose.nut-calendar-day-choose .nut-calendar-day-day, .nut-calendar-day-choose.nut-calendar-day-choose .nut-calendar-day-info-curr {
+  color: var(--nutui-calendar-choose-color, var(--nutui-color-primary));
+}
 .nut-calendar-day-choose-disabled {
   background-color: var(--nutui-calendar-choose-disable-background-color, rgba(191, 191, 191, 0.09));
   color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled)) !important;
 }
+.nut-calendar-day-choose-disabled.nut-calendar-day-choose-disabled .nut-calendar-day-day, .nut-calendar-day-choose-disabled.nut-calendar-day-choose-disabled .nut-calendar-day-info-curr {
+  color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled));
+}
 .nut-calendar-day-choose-disabled .nut-calendar-day-info-curr {
   display: none;
 }
@@ -166,9 +186,9 @@
   background-color: #ffffff;
 }
 .nut-calendar-footer .calendar-confirm-btn {
-  height: 40px;
-  line-height: 40px;
-  margin: 6px 16px;
+  height: scale-px(40px);
+  line-height: scale-px(40px);
+  margin: scale-px(6px) scale-px(16px);
   text-align: center;
   border-radius: var(--nutui-radius-base);
   background: var(--nutui-color-primary);
@@ -177,7 +197,7 @@
 }
 
 .nut-calendar-popup .nut-popup-title-right {
-  top: 7px !important;
+  top: scale-px(7px) !important;
 }
 
 [dir=rtl] .nut-calendar-day,

package/dist/es/packages/calendar/style-jrkf/calendar.scss

@@ -44,12 +44,12 @@
     color: $color-title;
     font-size: $calendar-title-font-size;
     font-weight: $calendar-title-font-weight;
-    line-height: 50px;
+    line-height: scale-px(50px);
   }
 
   &-sub-title {
-    padding: 7px 0;
-    line-height: 22px;
+    padding: scale-px(7px) 0;
+    line-height: scale-px(22px);
     font-size: $calendar-sub-title-font-size;
   }
 
@@ -57,9 +57,9 @@
     display: flex;
     align-items: center;
     justify-content: space-around;
-    height: 36px;
-    border-radius: 0px 0px 12px 12px;
-    box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
+    height: scale-px(36px);
+    border-radius: 0 0 scale-px(12px) scale-px(12px);
+    box-shadow: 0 scale-px(4px) scale-px(10px) 0 rgba($color: #000000, $alpha: 0.06);
   }
 
   &-week-item {
@@ -85,11 +85,11 @@
     box-sizing: border-box;
 
     .calendar-loading-tip {
-      height: 50px;
-      line-height: 50px;
+      height: scale-px(50px);
+      line-height: scale-px(50px);
       text-align: center;
       position: absolute;
-      top: -50px;
+      top: scale-px(-50px);
       left: 0;
       right: 0;
       font-size: $font-size-s;
@@ -103,9 +103,9 @@
     text-align: center;
 
     &-title {
-      height: 23px;
-      line-height: 23px;
-      margin: 8px 0;
+      height: scale-px(23px);
+      line-height: scale-px(23px);
+      margin: scale-px(8px) 0;
     }
   }
 
@@ -123,32 +123,43 @@
     width: $calendar-day-width;
     height: $calendar-day-height;
     font-weight: $calendar-day-font-weight;
-    margin-bottom: 4px;
+    margin-bottom: scale-px(4px);
+
+    // 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。
+    &-day,
+    &-info-curr {
+      color: $color-title;
+    }
 
     &:nth-child(7n + 0),
     &:nth-child(7n + 1) {
       color: $color-primary;
+
+      .nut-calendar-day-day,
+      .nut-calendar-day-info-curr {
+        color: $color-primary;
+      }
     }
 
     &-info,
     &-info-curr {
       position: absolute;
-      bottom: 5px;
+      bottom: scale-px(5px);
       width: 100%;
-      font-size: 12px;
-      line-height: 14px;
+      font-size: $font-size-s;
+      line-height: scale-px(14px);
     }
 
     &-info-top {
       position: absolute;
       width: 100%;
-      top: 5px;
+      top: scale-px(5px);
     }
 
     &-info-bottom {
       position: absolute;
       width: 100%;
-      bottom: 5px;
+      bottom: scale-px(5px);
     }
 
     &-active {
@@ -157,18 +168,23 @@
       border-radius: $calendar-day-active-border-radius;
 
       &.active-start {
-        border-radius: 0px;
+        border-radius: 0;
         border-top-left-radius: $calendar-day-active-border-radius;
         border-bottom-left-radius: $calendar-day-active-border-radius;
       }
 
       &.active-end {
-        border-radius: 0px;
+        border-radius: 0;
         border-top-right-radius: $calendar-day-active-border-radius;
         border-bottom-right-radius: $calendar-day-active-border-radius;
       }
 
-      .nut-calendar-day-info {
+      &.nut-calendar-day-active .nut-calendar-day-info {
+        color: $color-primary-text;
+      }
+
+      &.nut-calendar-day-active .nut-calendar-day-day,
+      &.nut-calendar-day-active .nut-calendar-day-info-curr {
         color: $color-primary-text;
       }
     }
@@ -176,6 +192,11 @@
     &-disabled {
       color: $calendar-disable-color !important;
 
+      &.nut-calendar-day-disabled .nut-calendar-day-day,
+      &.nut-calendar-day-disabled .nut-calendar-day-info-curr {
+        color: $calendar-disable-color;
+      }
+
       .nut-calendar-day-info-curr {
         display: none;
       }
@@ -185,10 +206,20 @@
       background-color: $calendar-choose-background-color;
       color: $calendar-choose-color;
 
+      &.nut-calendar-day-choose .nut-calendar-day-day,
+      &.nut-calendar-day-choose .nut-calendar-day-info-curr {
+        color: $calendar-choose-color;
+      }
+
       &-disabled {
         background-color: $calendar-choose-disable-background-color;
         color: $calendar-disable-color !important;
 
+        &.nut-calendar-day-choose-disabled .nut-calendar-day-day,
+        &.nut-calendar-day-choose-disabled .nut-calendar-day-info-curr {
+          color: $calendar-disable-color;
+        }
+
         .nut-calendar-day-info-curr {
           display: none;
         }
@@ -204,9 +235,9 @@
     background-color: $white;
 
     .calendar-confirm-btn {
-      height: 40px;
-      line-height: 40px;
-      margin: 6px 16px;
+      height: scale-px(40px);
+      line-height: scale-px(40px);
+      margin: scale-px(6px) scale-px(16px);
       text-align: center;
       border-radius: $radius-base;
       background: $button-primary-background-color;
@@ -217,7 +248,7 @@
 }
 
 .nut-calendar-popup .nut-popup-title-right {
-  top: 7px !important;
+  top: scale-px(7px) !important;
 }
 
 [dir='rtl'] .nut-calendar,

package/dist/es/packages/calendar/style-jrkf/style.css

@@ -37,20 +37,20 @@
   color: var(--nutui-color-title);
   font-size: var(--nutui-calendar-title-font-size, var(--nutui-font-h2));
   font-weight: var(--nutui-calendar-title-font-weight, var(--nutui-font-weight-bold));
-  line-height: 50px;
+  line-height: scale-px(50px);
 }
 .nut-calendar-sub-title {
-  padding: 7px 0;
-  line-height: 22px;
+  padding: scale-px(7px) 0;
+  line-height: scale-px(22px);
   font-size: var(--nutui-calendar-sub-title-font-size, var(--nutui-font-text));
 }
 .nut-calendar-weeks {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  height: 36px;
-  border-radius: 0px 0px 12px 12px;
-  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);
+  height: scale-px(36px);
+  border-radius: 0 0 scale-px(12px) scale-px(12px);
+  box-shadow: 0 scale-px(4px) scale-px(10px) 0 rgba(0, 0, 0, 0.06);
 }
 .nut-calendar-week-item:first-of-type, .nut-calendar-week-item:last-of-type {
   color: var(--nutui-color-primary, #ff6666);
@@ -69,11 +69,11 @@
   box-sizing: border-box;
 }
 .nut-calendar-pannel .calendar-loading-tip {
-  height: 50px;
-  line-height: 50px;
+  height: scale-px(50px);
+  line-height: scale-px(50px);
   text-align: center;
   position: absolute;
-  top: -50px;
+  top: scale-px(-50px);
   left: 0;
   right: 0;
   font-size: var(--nutui-font-text-small);
@@ -85,9 +85,9 @@
   text-align: center;
 }
 .nut-calendar-month-title {
-  height: 23px;
-  line-height: 23px;
-  margin: 8px 0;
+  height: scale-px(23px);
+  line-height: scale-px(23px);
+  margin: scale-px(8px) 0;
 }
 .nut-calendar-days {
   overflow: hidden;
@@ -102,27 +102,35 @@
   width: var(--nutui-calendar-day-width, 14.28%);
   height: var(--nutui-calendar-day-height, 60px);
   font-weight: var(--nutui-calendar-day-font-weight, var(--nutui-font-weight-bold));
-  margin-bottom: 4px;
+  margin-bottom: scale-px(4px);
+}
+.nut-calendar-day-day, .nut-calendar-day-info-curr {
+  color: var(--nutui-color-title);
 }
 .nut-calendar-day:nth-child(7n+0), .nut-calendar-day:nth-child(7n+1) {
   color: var(--nutui-color-primary, #ff6666);
 }
+.nut-calendar-day:nth-child(7n+0) .nut-calendar-day-day,
+.nut-calendar-day:nth-child(7n+0) .nut-calendar-day-info-curr, .nut-calendar-day:nth-child(7n+1) .nut-calendar-day-day,
+.nut-calendar-day:nth-child(7n+1) .nut-calendar-day-info-curr {
+  color: var(--nutui-color-primary, #ff6666);
+}
 .nut-calendar-day-info, .nut-calendar-day-info-curr {
   position: absolute;
-  bottom: 5px;
+  bottom: scale-px(5px);
   width: 100%;
-  font-size: 12px;
-  line-height: 14px;
+  font-size: var(--nutui-font-text-small);
+  line-height: scale-px(14px);
 }
 .nut-calendar-day-info-top {
   position: absolute;
   width: 100%;
-  top: 5px;
+  top: scale-px(5px);
 }
 .nut-calendar-day-info-bottom {
   position: absolute;
   width: 100%;
-  bottom: 5px;
+  bottom: scale-px(5px);
 }
 .nut-calendar-day-active {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff6666));
@@ -130,21 +138,27 @@
   border-radius: var(--nutui-calendar-day-active-border-radius, 4px);
 }
 .nut-calendar-day-active.active-start {
-  border-radius: 0px;
+  border-radius: 0;
   border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
   border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
 }
 .nut-calendar-day-active.active-end {
-  border-radius: 0px;
+  border-radius: 0;
   border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
   border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
 }
-.nut-calendar-day-active .nut-calendar-day-info {
+.nut-calendar-day-active.nut-calendar-day-active .nut-calendar-day-info {
+  color: var(--nutui-color-text-dark);
+}
+.nut-calendar-day-active.nut-calendar-day-active .nut-calendar-day-day, .nut-calendar-day-active.nut-calendar-day-active .nut-calendar-day-info-curr {
   color: var(--nutui-color-text-dark);
 }
 .nut-calendar-day-disabled {
   color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled)) !important;
 }
+.nut-calendar-day-disabled.nut-calendar-day-disabled .nut-calendar-day-day, .nut-calendar-day-disabled.nut-calendar-day-disabled .nut-calendar-day-info-curr {
+  color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled));
+}
 .nut-calendar-day-disabled .nut-calendar-day-info-curr {
   display: none;
 }
@@ -152,10 +166,16 @@
   background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light, #ffe5e5));
   color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff6666));
 }
+.nut-calendar-day-choose.nut-calendar-day-choose .nut-calendar-day-day, .nut-calendar-day-choose.nut-calendar-day-choose .nut-calendar-day-info-curr {
+  color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff6666));
+}
 .nut-calendar-day-choose-disabled {
   background-color: var(--nutui-calendar-choose-disable-background-color, rgba(191, 191, 191, 0.09));
   color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled)) !important;
 }
+.nut-calendar-day-choose-disabled.nut-calendar-day-choose-disabled .nut-calendar-day-day, .nut-calendar-day-choose-disabled.nut-calendar-day-choose-disabled .nut-calendar-day-info-curr {
+  color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled));
+}
 .nut-calendar-day-choose-disabled .nut-calendar-day-info-curr {
   display: none;
 }
@@ -166,9 +186,9 @@
   background-color: #ffffff;
 }
 .nut-calendar-footer .calendar-confirm-btn {
-  height: 40px;
-  line-height: 40px;
-  margin: 6px 16px;
+  height: scale-px(40px);
+  line-height: scale-px(40px);
+  margin: scale-px(6px) scale-px(16px);
   text-align: center;
   border-radius: var(--nutui-radius-base);
   background: var(--nutui-color-primary, #ff6666);
@@ -177,7 +197,7 @@
 }
 
 .nut-calendar-popup .nut-popup-title-right {
-  top: 7px !important;
+  top: scale-px(7px) !important;
 }
 
 [dir=rtl] .nut-calendar-day,

package/dist/es/packages/calendarcard/calendarcard.js

@@ -2,7 +2,7 @@ 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 { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
-import React, { useCallback, useEffect, useState, useRef } from "react";
+import React, { useCallback, useEffect, useState, useRef, useMemo } from "react";
 import classNames from "classnames";
 import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from "./icon";
 import { ComponentDefaults } from "../../utils/typings";
@@ -11,12 +11,13 @@ import { useConfig } from "../configprovider";
 import { usePropsValue } from "../../hooks/use-props-value";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     type: 'single',
-    firstDayOfWeek: 0
+    firstDayOfWeek: 0,
+    weekdays: []
 });
 var prefixCls = 'nut-calendarcard';
 export var CalendarCard = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var locale = useConfig().locale;
-    var _$_object_spread = _object_spread({}, defaultProps, props), style = _$_object_spread.style, className = _$_object_spread.className, type = _$_object_spread.type, title = _$_object_spread.title, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, firstDayOfWeek = _$_object_spread.firstDayOfWeek, startDate = _$_object_spread.startDate, endDate = _$_object_spread.endDate, disableDay = _$_object_spread.disableDay, renderDay = _$_object_spread.renderDay, renderDayTop = _$_object_spread.renderDayTop, renderDayBottom = _$_object_spread.renderDayBottom, onDayClick = _$_object_spread.onDayClick, onPageChange = _$_object_spread.onPageChange, onChange = _$_object_spread.onChange;
+    var _$_object_spread = _object_spread({}, defaultProps, props), style = _$_object_spread.style, className = _$_object_spread.className, type = _$_object_spread.type, title = _$_object_spread.title, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, firstDayOfWeek = _$_object_spread.firstDayOfWeek, startDate = _$_object_spread.startDate, endDate = _$_object_spread.endDate, disableDay = _$_object_spread.disableDay, renderDay = _$_object_spread.renderDay, renderDayTop = _$_object_spread.renderDayTop, renderDayBottom = _$_object_spread.renderDayBottom, weekdays = _$_object_spread.weekdays, onDayClick = _$_object_spread.onDayClick, onPageChange = _$_object_spread.onPageChange, onChange = _$_object_spread.onChange;
     var onPageChangeRef = useRef(onPageChange);
     // 当前月份信息
     var _useState = _sliced_to_array(useState(function() {
@@ -367,15 +368,20 @@ export var CalendarCard = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             }
         }, /*#__PURE__*/ React.createElement(DoubleRight, null))));
     };
-    var _useState2 = _sliced_to_array(useState(function() {
-        var weekdays = locale.calendaritem.weekdays.map(function(day, index) {
+    var weekHeader = useMemo(function() {
+        var weekdaysList = weekdays.length > 0 ? weekdays : locale.calendaritem.weekdays;
+        var weekdaysData = weekdaysList.map(function(day, index) {
             return {
                 name: day,
                 key: index
             };
         });
-        return _to_consumable_array(weekdays.slice(firstDayOfWeek, 7)).concat(_to_consumable_array(weekdays.slice(0, firstDayOfWeek)));
-    }), 1), weekHeader = _useState2[0];
+        return _to_consumable_array(weekdaysData.slice(firstDayOfWeek, 7)).concat(_to_consumable_array(weekdaysData.slice(0, firstDayOfWeek)));
+    }, [
+        weekdays,
+        firstDayOfWeek,
+        locale.calendaritem.weekdays
+    ]);
     var renderContent = function() {
         return /*#__PURE__*/ React.createElement("div", {
             className: "".concat(prefixCls, "-content")

package/dist/es/packages/calendarcard/style/calendarcard.scss

@@ -1,6 +1,6 @@
 .nut-calendarcard {
   background: $color-background-overlay;
-  border-radius: 12px;
+  border-radius: scale-px(12px);
   overflow: hidden;
   font-size: $calendar-base-font-size;
   color: $color-title;
@@ -11,25 +11,31 @@
     align-items: center;
     justify-content: space-between;
     font-weight: normal;
+    line-height: $line-height-l;
 
     &-left,
     &-right {
       display: flex;
       flex-direction: row;
       cursor: pointer;
-      margin: 16px;
-      line-height: 1;
+      margin: scale-px(16px);
 
       .left {
-        margin-left: 8px;
+        margin-left: scale-px(8px);
       }
 
       .right {
-        margin-right: 8px;
+        margin-right: scale-px(8px);
       }
     }
   }
 
+  &-icon {
+    width: scale-px(18px);
+    height: scale-px(18px);
+    display: block;
+  }
+
   &-days {
     display: flex;
     flex-direction: row;
@@ -44,11 +50,18 @@
     flex-direction: column;
     position: relative;
     width: $calendar-day-width;
-    height: 48px;
+    height: scale-px(48px);
     cursor: pointer;
-    margin-bottom: 4px;
+    margin-bottom: scale-px(4px);
     text-align: center;
 
+    // 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。
+    &-top,
+    &-inner,
+    &-bottom {
+      color: $color-title;
+    }
+
     &.header {
       cursor: auto;
     }
@@ -59,13 +72,19 @@
       align-items: center;
       justify-content: center;
       width: 100%;
-      height: 12px;
-      font-size: 12px;
-      line-height: 12px;
+      height: scale-px(12px);
+      font-size: $font-size-s;
+      line-height: scale-px(12px);
     }
 
     &.weekend {
       color: $calendar-choose-color;
+
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $calendar-choose-color;
+      }
     }
 
     &.active {
@@ -132,12 +151,12 @@
     &-right {
       .left {
         margin-left: 0;
-        margin-right: 8px;
+        margin-right: scale-px(8px);
       }
 
       .right {
         margin-right: 0;
-        margin-left: 8px;
+        margin-left: scale-px(8px);
       }
 
       .nut-icon-ArrowLeft,