@nutui/nutui-react-taro 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 { View } from "@tarojs/components";
 import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from "./icon";
@@ -12,12 +12,13 @@ import { useConfig } from "../configprovider/index";
 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() {
@@ -351,15 +352,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(View, {
             className: "".concat(prefixCls, "-content")

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Image, View } from "@tarojs/components";
+import { Image } from "@tarojs/components";
 var left = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNNi42MDUgOS40OWEuNzcxLjc3MSAwIDAgMSAwLS45OGwzLjYtNC4zNzJhLjc3MS43NzEgMCAwIDEgMS4xOS45ODFMOC4yIDlsMy4xOTcgMy44ODFhLjc3MS43NzEgMCAxIDEtMS4xOTEuOThsLTMuNi00LjM3eiIvPjwvc3ZnPg==';
 var right = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTEuMzk2IDkuNDlhLjc3MS43NzEgMCAwIDAgMC0uOThsLTMuNi00LjM3MmEuNzcxLjc3MSAwIDAgMC0xLjE5MS45ODFMOS44IDlsLTMuMTk2IDMuODgxYS43NzEuNzcxIDAgMCAwIDEuMTkuOThsMy42LTQuMzd6Ii8+PC9zdmc+';
 var doubleLeft = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTMuODUzIDQuMDI2YS43NzEuNzcxIDAgMCAxIC4xMiAxLjA4NUwxMC44NjQgOWwzLjExIDMuODg5YS43NzEuNzcxIDAgMSAxLTEuMjA0Ljk2M2wtMy40OTgtNC4zN2EuNzcxLjc3MSAwIDAgMSAwLS45NjRsMy40OTctNC4zNzFhLjc3MS43NzEgMCAwIDEgMS4wODQtLjEyem0tNS4yNDUgMGEuNzcxLjc3MSAwIDAgMSAuMTIgMS4wODVMNS42MTcgOWwzLjExMSAzLjg4OWEuNzcxLjc3MSAwIDAgMS0xLjIwNS45NjNsLTMuNDk3LTQuMzdhLjc3MS43NzEgMCAwIDEgMC0uOTY0bDMuNDk3LTQuMzcxYS43NzEuNzcxIDAgMCAxIDEuMDg1LS4xMnoiLz48L3N2Zz4=';
@@ -13,19 +13,13 @@ if (process.env.TARO_ENV === 'jdharmony_cpp') {
 var Icon = function(param) {
     var url = param.url;
     var style = {
-        background: "url('".concat(url, "') no-repeat center"),
-        backgroundSize: '100% 100%',
         width: 18,
         height: 18
     };
-    if (process.env.TARO_ENV === 'jdharmony_cpp') {
-        return /*#__PURE__*/ React.createElement(Image, {
-            src: url,
-            style: style
-        });
-    }
-    return /*#__PURE__*/ React.createElement(View, {
-        style: style
+    return /*#__PURE__*/ React.createElement(Image, {
+        src: url,
+        style: style,
+        mode: "aspectFit"
     });
 };
 export var ArrowLeft = function() {