diff --git a/packages/nutui-taro-demo/src/pages/index/index.config.ts b/packages/nutui-taro-demo/src/pages/index/index.config.ts index a7c25c75b7..d1120af4da 100644 --- a/packages/nutui-taro-demo/src/pages/index/index.config.ts +++ b/packages/nutui-taro-demo/src/pages/index/index.config.ts @@ -1,3 +1,5 @@ export default definePageConfig({ navigationBarTitleText: '首页', + // App设计规范适配版本 + // designAppVersion: 16 }) diff --git a/src/packages/actionsheet/actionsheet.scss b/src/packages/actionsheet/actionsheet.scss index c850df3b0d..1bb3769513 100644 --- a/src/packages/actionsheet/actionsheet.scss +++ b/src/packages/actionsheet/actionsheet.scss @@ -9,7 +9,7 @@ } .nut-popup-title { - border-bottom: 1px solid $actionsheet-border-color; + border-bottom: scale-px(1px) solid $actionsheet-border-color; } &-list { @@ -23,7 +23,7 @@ &-cancel, &-item { display: block; - padding: 10px; + padding: scale-px(10px); text-align: $actionsheet-item-text-align; line-height: $actionsheet-item-line-height; font-size: $font-size-base; @@ -54,8 +54,8 @@ } &-cancel { - margin-top: 5px; - border-top: 1px solid $actionsheet-border-color; + margin-top: scale-px(5px); + border-top: scale-px(1px) solid $actionsheet-border-color; border-radius: $actionsheet-border-radius; } diff --git a/src/packages/address/address.scss b/src/packages/address/address.scss index 18fea0ecfc..5c341c91fc 100644 --- a/src/packages/address/address.scss +++ b/src/packages/address/address.scss @@ -4,15 +4,15 @@ .nut-address { &-exist { display: block; - padding: 15px 20px 0; - height: 279px; + padding: scale-px(15px) scale-px(20px) 0; + height: scale-px(279px); overflow-y: auto; box-sizing: border-box; &-item { display: flex; align-items: center; - margin-bottom: 20px; + margin-bottom: scale-px(20px); font-size: $font-size-s; line-height: $font-size-base; color: $color-title; @@ -22,26 +22,26 @@ } &-info { - margin-left: 9px; + margin-left: scale-px(9px); } } } &-footer { width: 100%; - height: 54px; - padding: 6px 0px 0; - border-top: 1px solid $color-border; + height: scale-px(54px); + padding: scale-px(6px) 0px 0; + border-top: scale-px(1px) solid $color-border; &-btn { width: 90%; - height: 42px; - line-height: 42px; + height: scale-px(42px); + line-height: scale-px(42px); margin: auto; text-align: center; background: $button-primary-background-color; - border-radius: 21px; - font-size: 15px; + border-radius: scale-px(21px); + font-size: $font-size-l; color: $color-primary-text; } } @@ -49,12 +49,12 @@ .nut-address { &-title { - font-size: 14px; + font-size: $font-size-base; font-weight: 500; - padding: 16px 16px 12px 16px; + padding: scale-px(16px) scale-px(16px) scale-px(12px) scale-px(16px); } &-hotlist { - padding: 0 16px; + padding: 0 scale-px(16px); display: flex; flex-wrap: wrap; align-items: flex-start; @@ -62,16 +62,16 @@ display: flex; justify-content: center; align-items: center; - width: 63px; - height: 28px; - font-size: 12px; - border-radius: 4px; - margin-bottom: 7px; + width: scale-px(63px); + height: scale-px(28px); + font-size: $font-size-s; + border-radius: scale-px(4px); + margin-bottom: scale-px(7px); /* #ifdef harmony dynamic*/ - margin-right: 6px; + margin-right: scale-px(6px); /* #endif */ /* #ifndef harmony dynamic*/ - margin-right: 7px; + margin-right: scale-px(7px); /* #endif */ background-color: $color-background-sunken; color: $color-title; @@ -83,36 +83,36 @@ &.hotlist-more { .nut-address-hotlist-item { width: auto; - padding: 0 16px; - margin-right: 7px; + padding: 0 scale-px(16px); + margin-right: scale-px(7px); } } } &-selected { width: 100%; - height: 60px; - padding: 0 16px; + height: scale-px(60px); + padding: 0 scale-px(16px); display: flex; align-items: center; - border-bottom: 1px solid $color-border; + border-bottom: scale-px(1px) solid $color-border; &-item { - font-size: 12px; + font-size: $font-size-s; display: inline-block; - height: 28px; - line-height: 28px; - padding: 0 12px; - border-radius: 4px; + height: scale-px(28px); + line-height: scale-px(28px); + padding: 0 scale-px(12px); + border-radius: scale-px(4px); background-color: $color-background-sunken; &.active { - border: 1px solid $color-primary; + border: scale-px(1px) solid $color-primary; background-color: $color-primary-light-pressed; color: $color-primary; } } &-border { - margin: 0 2px; + margin: 0 scale-px(2px); color: $color-text-disabled; } } @@ -122,15 +122,15 @@ .nut-elevator-list { &-item { position: relative; - padding-left: 20px; + padding-left: scale-px(20px); } &-item-code { display: inline; position: absolute; left: 0; top: 0; - height: 30px; - line-height: 30px; + height: scale-px(30px); + line-height: scale-px(30px); border-bottom: 0; color: $color-text-help; font-weight: 500; @@ -145,11 +145,11 @@ display: flex; justify-content: center; align-items: center; - width: 16px; - height: 16px; - font-size: 10px; - border-radius: 16px; - margin-bottom: 2px; + width: scale-px(16px); + height: scale-px(16px); + font-size: $font-size-xxs; + border-radius: scale-px(16px); + margin-bottom: scale-px(2px); color: $color-text-help; &-active { background-color: $color-primary; @@ -167,7 +167,7 @@ &-item { &-info { margin-left: 0; - margin-right: 9px; + margin-right: scale-px(9px); } } } diff --git a/src/packages/animate/animate.scss b/src/packages/animate/animate.scss index 67b478bb3e..1de0a969aa 100644 --- a/src/packages/animate/animate.scss +++ b/src/packages/animate/animate.scss @@ -76,31 +76,31 @@ transform: translateX(0); } 10% { - transform: translateX(-9px); + transform: translateX(scale-px(-9px)); } 20% { - transform: translateX(8px); + transform: translateX(scale-px(8px)); } 30% { - transform: translateX(-7px); + transform: translateX(scale-px(-7px)); } 40% { - transform: translateX(6px); + transform: translateX(scale-px(6px)); } 50% { - transform: translateX(-5px); + transform: translateX(scale-px(-5px)); } 60% { - transform: translateX(4px); + transform: translateX(scale-px(4px)); } 70% { - transform: translateX(-3px); + transform: translateX(scale-px(-3px)); } 80% { - transform: translateX(2px); + transform: translateX(scale-px(2px)); } 90% { - transform: translateX(-1px); + transform: translateX(scale-px(-1px)); } } .nut-animate-shake { @@ -142,16 +142,16 @@ position: relative; &::after, &::before { - width: 60px; - height: 60px; + width: scale-px(60px); + height: scale-px(60px); content: ''; box-sizing: border-box; - border: 4px solid rgba(255, 255, 255, 0.6); + border: scale-px(4px) solid rgba(255, 255, 255, 0.6); position: absolute; - border-radius: 30px; + border-radius: scale-px(30px); right: 50%; - margin-top: -30px; - margin-right: -30px; + margin-top: scale-px(-30px); + margin-right: scale-px(-30px); z-index: 1; transform: scale(0); animation: twinkle 2s ease-out infinite; @@ -180,8 +180,8 @@ position: relative; overflow: hidden; &::after { - width: 100px; - height: 60px; + width: scale-px(100px); + height: scale-px(60px); position: absolute; left: 0; top: 0; @@ -194,17 +194,17 @@ ); animation: flicker 1.5s linear infinite; transform: skewX(-20deg); - filter: blur(3px); + filter: blur(scale-px(3px)); } } @keyframes flicker { 0% { - transform: translateX(-100px) skewX(-20deg); + transform: translateX(scale-px(-100px)) skewX(-20deg); } 40%, 100% { - transform: translateX(150px) skewX(-20deg); + transform: translateX(scale-px(150px)) skewX(-20deg); } } @@ -214,13 +214,13 @@ transform: rotate(0) translateY(0); } 25% { - transform: rotate(10deg) translateY(20px); + transform: rotate(10deg) translateY(scale-px(20px)); } 50% { - transform: rotate(0) translateY(-10px); + transform: rotate(0) translateY(scale-px(-10px)); } 75% { - transform: rotate(-10deg) translateY(20px); + transform: rotate(-10deg) translateY(scale-px(20px)); } 100% { transform: rotate(0) translateY(0); @@ -237,13 +237,13 @@ top: 0; } 25% { - top: 1px; + top: scale-px(1px); } 50% { - top: 4px; + top: scale-px(4px); } 75% { - top: 1px; + top: scale-px(1px); } 100% { top: 0; diff --git a/src/packages/audio/audio.scss b/src/packages/audio/audio.scss index e26ed4deb5..d70948064e 100644 --- a/src/packages/audio/audio.scss +++ b/src/packages/audio/audio.scss @@ -10,11 +10,11 @@ display: flex; align-items: center; justify-content: center; - width: 30px; - height: 30px; + width: scale-px(30px); + height: scale-px(30px); background: $white; border-radius: 50%; - box-shadow: 0 0 8px $color-text-disabled; + box-shadow: 0 0 scale-px(8px) $color-text-disabled; } .nut-audio-icon-stop { @@ -26,11 +26,11 @@ top: 50%; transform: translateX(-50%); content: ''; - height: 2px; - width: 30px; + height: scale-px(2px); + width: scale-px(30px); background: $color-text-disabled; transform: rotate(45deg); - transform-origin: 8px -18px; + transform-origin: scale-px(8px) scale-px(-18px); } } } @@ -40,34 +40,34 @@ align-items: center; width: 100%; margin: 0px auto; - padding: 10px 0; + padding: scale-px(10px) 0; &-bar-wrapper { flex: 1; - margin: 0 10px; + margin: 0 scale-px(10px); } .time { - min-width: 50px; - font-size: 12px; + min-width: scale-px(50px); + font-size: $font-size-s; text-align: center; } .nut-range-button { - width: 8px; - height: 8px; + width: scale-px(8px); + height: scale-px(8px); } } .custom-button-group { .nut-button-primary { - margin: 0 5px; + margin: 0 scale-px(5px); } } .custom-button-group-disable { .nut-button-primary { - margin: 0 5px; + margin: 0 scale-px(5px); pointer-events: none; } } @@ -78,7 +78,7 @@ .nut-audio-none-container { .nut-voice { - border: 1px solid $color-title; + border: scale-px(1px) solid $color-title; align-items: center; } } @@ -92,7 +92,7 @@ left: auto; right: 50%; transform: rotate(-45deg); - transform-origin: 20px -18px; + transform-origin: scale-px(20px) scale-px(-18px); } } } diff --git a/src/packages/avatar/avatar.scss b/src/packages/avatar/avatar.scss index f3480990ce..6aa681ed47 100644 --- a/src/packages/avatar/avatar.scss +++ b/src/packages/avatar/avatar.scss @@ -12,7 +12,7 @@ height: $avatar-normal-height; &-round { - border-radius: 999px; + border-radius: scale-px(999px); overflow: hidden; } diff --git a/src/packages/avatarcropper/avatarcropper.scss b/src/packages/avatarcropper/avatarcropper.scss index b79102847b..9ed3283c0c 100644 --- a/src/packages/avatarcropper/avatarcropper.scss +++ b/src/packages/avatarcropper/avatarcropper.scss @@ -72,7 +72,7 @@ &-item { color: #fff; - padding: 15px; + padding: scale-px(15px); cursor: pointer; display: flex; align-items: center; @@ -98,7 +98,7 @@ top: 50%; transform: translate(-50%, -50%); background-color: transparent; - box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 scale-px(1000px) scale-px(1000px) rgba(0, 0, 0, 0.6); } } } diff --git a/src/packages/avatarcropper/avatarcropper.taro.tsx b/src/packages/avatarcropper/avatarcropper.taro.tsx index ee184339f9..f227f259b2 100644 --- a/src/packages/avatarcropper/avatarcropper.taro.tsx +++ b/src/packages/avatarcropper/avatarcropper.taro.tsx @@ -4,8 +4,9 @@ import React, { useMemo, useCallback, FunctionComponent, + useLayoutEffect, } from 'react' -import Taro, { useReady, createSelectorQuery } from '@tarojs/taro' +import Taro, { createSelectorQuery } from '@tarojs/taro' import classNames from 'classnames' import { Canvas, CommonEventFunction, View } from '@tarojs/components' import { getWindowInfo } from '@/utils/taro/get-system-info' @@ -137,7 +138,7 @@ export const AvatarCropper: FunctionComponent< cropperCanvasContext: null, }) - useReady(() => { + useLayoutEffect(() => { if (showAlipayCanvas2D) { const { canvasId } = canvasAll createSelectorQuery() @@ -149,7 +150,7 @@ export const AvatarCropper: FunctionComponent< }) .exec() } - }) + }, [showAlipayCanvas2D, state.displayHeight, state.displayWidth]) useEffect(() => { setCanvasAll({ @@ -693,4 +694,5 @@ export const AvatarCropper: FunctionComponent< ) } + AvatarCropper.displayName = 'NutAvatarCropper' diff --git a/src/packages/avatargroup/avatargroup.scss b/src/packages/avatargroup/avatargroup.scss index 27462e4d11..c7dede3c8e 100644 --- a/src/packages/avatargroup/avatargroup.scss +++ b/src/packages/avatargroup/avatargroup.scss @@ -4,11 +4,11 @@ flex: 0 0 auto; // 防止被压缩 &-avatar, .nut-avatar { - border: 1px solid #fff; - margin-left: -8px; + border: scale-px(1px) solid #fff; + margin-left: scale-px(-8px); &:not(:first-of-type) { - margin-left: -8px; + margin-left: scale-px(-8px); } } } @@ -18,7 +18,7 @@ .nut-avatar { &:not(:first-of-type) { margin-left: 0; - margin-right: -8px; + margin-right: scale-px(-8px); } } } diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss index 750ccb6010..ed27f80324 100644 --- a/src/packages/badge/badge.scss +++ b/src/packages/badge/badge.scss @@ -55,7 +55,7 @@ box-sizing: border-box; color: $badge-color; font-size: $badge-font-size; - line-height: 12px; + line-height: scale-px(12px); white-space: nowrap; font-weight: normal; vertical-align: middle; diff --git a/src/packages/barrage/barrage.scss b/src/packages/barrage/barrage.scss index 66c351fa4e..f7a2592c99 100644 --- a/src/packages/barrage/barrage.scss +++ b/src/packages/barrage/barrage.scss @@ -13,8 +13,8 @@ display: block; position: absolute; right: 0; - padding: 4px 16px; - border-radius: 16px; + padding: scale-px(4px) scale-px(16px); + border-radius: scale-px(16px); font-size: $font-size-s; text-align: center; white-space: pre; diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss index 5f950e9dad..e4d1ea3181 100644 --- a/src/packages/button/button.scss +++ b/src/packages/button/button.scss @@ -3,7 +3,7 @@ display: flex; display: inline-block; /* #ifdef harmony dynamic*/ - width: 80px; + width: scale-px(80px); /* #endif */ /* #ifndef harmony dynamic*/ width: auto; diff --git a/src/packages/button/button.taro.tsx b/src/packages/button/button.taro.tsx index 13e2ed6083..8bb4286f94 100644 --- a/src/packages/button/button.taro.tsx +++ b/src/packages/button/button.taro.tsx @@ -1,10 +1,7 @@ import React, { CSSProperties, useCallback, useMemo } from 'react' import type { MouseEvent } from 'react' import classNames from 'classnames' -import { - View, - // Button as TaroButton, -} from '@tarojs/components' +import { View } from '@tarojs/components' import { Loading } from '@nutui/icons-react-taro' import { ComponentDefaults } from '@/utils/typings' import { harmony } from '@/utils/taro/platform' diff --git a/src/packages/calendar/calendar.scss b/src/packages/calendar/calendar.scss index 7a394555d6..8bd0d37768 100644 --- a/src/packages/calendar/calendar.scss +++ b/src/packages/calendar/calendar.scss @@ -46,12 +46,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; } @@ -59,9 +59,10 @@ 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: 0px 0px scale-px(12px) scale-px(12px); + box-shadow: 0px scale-px(4px) scale-px(10px) 0px + rgba($color: #000000, $alpha: 0.06); } &-week-item { @@ -87,11 +88,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; @@ -105,9 +106,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; } } @@ -125,32 +126,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 { @@ -170,7 +182,12 @@ 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; } } @@ -178,6 +195,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; } @@ -187,10 +209,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; } @@ -206,9 +238,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; @@ -219,7 +251,7 @@ } .nut-calendar-popup .nut-popup-title-right { - top: 7px !important; + top: scale-px(7px) !important; } [dir='rtl'] .nut-calendar, diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss index 56042a0b92..6bba3e5099 100644 --- a/src/packages/calendarcard/calendarcard.scss +++ b/src/packages/calendarcard/calendarcard.scss @@ -1,8 +1,9 @@ .nut-calendarcard { background: $color-background-overlay; - border-radius: 12px; + border-radius: scale-px(12px); overflow: hidden; font-size: $calendar-base-font-size; + line-height: $calendar-base-font-size; color: $color-title; &-header { @@ -17,19 +18,25 @@ display: flex; flex-direction: row; cursor: pointer; - margin: 16px; + margin: scale-px(16px); line-height: 1; .left { - margin-left: 8px; + margin-left: scale-px(8px); } .right { - margin-right: 8px; + margin-right: scale-px(8px); } } } + &-icon { + width: 18px; + height: 18px; + display: block; + } + &-days { display: flex; flex-direction: row; @@ -44,11 +51,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 +73,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 +152,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, diff --git a/src/packages/calendarcard/icon.taro.tsx b/src/packages/calendarcard/icon.taro.tsx index 1223f86495..f76c19c5cc 100644 --- a/src/packages/calendarcard/icon.taro.tsx +++ b/src/packages/calendarcard/icon.taro.tsx @@ -1,44 +1,32 @@ import React, { FC } from 'react' -import { Image, View } from '@tarojs/components' - -let left = - 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNNi42MDUgOS40OWEuNzcxLjc3MSAwIDAgMSAwLS45OGwzLjYtNC4zNzJhLjc3MS43NzEgMCAwIDEgMS4xOS45ODFMOC4yIDlsMy4xOTcgMy44ODFhLjc3MS43NzEgMCAxIDEtMS4xOTEuOThsLTMuNi00LjM3eiIvPjwvc3ZnPg==' - -let right = - 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTEuMzk2IDkuNDlhLjc3MS43NzEgMCAwIDAgMC0uOThsLTMuNi00LjM3MmEuNzcxLjc3MSAwIDAgMC0xLjE5MS45ODFMOS44IDlsLTMuMTk2IDMuODgxYS43NzEuNzcxIDAgMCAwIDEuMTkuOThsMy42LTQuMzd6Ii8+PC9zdmc+' - -let doubleLeft = - 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTMuODUzIDQuMDI2YS43NzEuNzcxIDAgMCAxIC4xMiAxLjA4NUwxMC44NjQgOWwzLjExIDMuODg5YS43NzEuNzcxIDAgMSAxLTEuMjA0Ljk2M2wtMy40OTgtNC4zN2EuNzcxLjc3MSAwIDAgMSAwLS45NjRsMy40OTctNC4zNzFhLjc3MS43NzEgMCAwIDEgMS4wODQtLjEyem0tNS4yNDUgMGEuNzcxLjc3MSAwIDAgMSAuMTIgMS4wODVMNS42MTcgOWwzLjExMSAzLjg4OWEuNzcxLjc3MSAwIDAgMS0xLjIwNS45NjNsLTMuNDk3LTQuMzdhLjc3MS43NzEgMCAwIDEgMC0uOTY0bDMuNDk3LTQuMzcxYS43NzEuNzcxIDAgMCAxIDEuMDg1LS4xMnoiLz48L3N2Zz4=' - -let doubleRight = - 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNNC4xNDcgMTMuOTc0YS43NzEuNzcxIDAgMCAxLS4xMi0xLjA4NUw3LjEzNiA5IDQuMDI4IDUuMTFhLjc3MS43NzEgMCAxIDEgMS4yMDQtLjk2M2wzLjQ5NyA0LjM3MWEuNzcxLjc3MSAwIDAgMSAwIC45NjRsLTMuNDk3IDQuMzcxYS43NzEuNzcxIDAgMCAxLTEuMDg0LjEyem01LjI0NSAwYS43NzEuNzcxIDAgMCAxLS4xMi0xLjA4NUwxMi4zODMgOSA5LjI3MiA1LjExYS43NzEuNzcxIDAgMSAxIDEuMjA1LS45NjNsMy40OTcgNC4zNzFhLjc3MS43NzEgMCAwIDEgMCAuOTY0bC0zLjQ5NyA0LjM3MWEuNzcxLjc3MSAwIDAgMS0xLjA4NS4xMnoiLz48L3N2Zz4=' +import { Image } from '@tarojs/components' interface IconProps { url: string } -if (process.env.TARO_ENV === 'jdharmony_cpp') { - left = - 'https://img11.360buyimg.com/imagetools/jfs/t1/187031/35/51586/196/6731c464F9b9f8f00/5506e32bf15e29dc.png' - right = - 'https://img12.360buyimg.com/imagetools/jfs/t1/181006/25/51824/185/6731c452F9e252322/7493147dd6b4a88d.png' - doubleLeft = - 'https://img13.360buyimg.com/imagetools/jfs/t1/221244/29/45876/259/6731c6bdF515df0a2/624e8eee3c8494a2.png' - doubleRight = - 'https://img11.360buyimg.com/imagetools/jfs/t1/238382/25/24000/235/6731c6bdF0153286c/4a57e60b6e889af3.png' -} +const left = + 'https://storage.360buyimg.com/imgtools/6437a2b149-bb511b40-4942-11f1-b1e1-7158b9aae0a9.svg' +const right = + 'https://storage.360buyimg.com/imgtools/8aa060341d-baf78990-4942-11f1-9368-cd56fc5fadc6.svg' +const doubleLeft = + 'https://storage.360buyimg.com/imgtools/b5e798f4ed-bbe8c760-4942-11f1-b1e1-7158b9aae0a9.svg' +const doubleRight = + 'https://storage.360buyimg.com/imgtools/d6979fa16d-bbb4bf10-4942-11f1-9368-cd56fc5fadc6.svg' const Icon: FC = ({ url }) => { - const style = { - background: `url('${url}') no-repeat center`, - backgroundSize: '100% 100%', - width: 18, - height: 18, - } - if (process.env.TARO_ENV === 'jdharmony_cpp') { - return + const iconStyle = { + color: 'var(--nutui-color-text)', } - return + return ( + + ) } export const ArrowLeft: FC = () => diff --git a/src/packages/calendarcard/icons/doubleLeft.svg b/src/packages/calendarcard/icons/doubleLeft.svg new file mode 100644 index 0000000000..10561de0c6 --- /dev/null +++ b/src/packages/calendarcard/icons/doubleLeft.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/packages/calendarcard/icons/doubleRight.svg b/src/packages/calendarcard/icons/doubleRight.svg new file mode 100644 index 0000000000..ac60c24227 --- /dev/null +++ b/src/packages/calendarcard/icons/doubleRight.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/packages/calendarcard/icons/singleLeft.svg b/src/packages/calendarcard/icons/singleLeft.svg new file mode 100644 index 0000000000..9342023bc4 --- /dev/null +++ b/src/packages/calendarcard/icons/singleLeft.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/packages/calendarcard/icons/singleRight.svg b/src/packages/calendarcard/icons/singleRight.svg new file mode 100644 index 0000000000..2f9ac7a883 --- /dev/null +++ b/src/packages/calendarcard/icons/singleRight.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/packages/card/card.scss b/src/packages/card/card.scss index ba888dd854..eb6cb1000f 100644 --- a/src/packages/card/card.scss +++ b/src/packages/card/card.scss @@ -9,8 +9,8 @@ border-radius: $card-border-radius; &-left { - width: 120px; - height: 120px; + width: scale-px(120px); + height: scale-px(120px); flex-shrink: 0; > img { @@ -23,25 +23,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; + 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 { @@ -54,11 +54,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; } } @@ -71,8 +71,8 @@ &-name { line-height: 1.5; color: $color-text; - font-size: 12px; - padding-top: 4px; + font-size: $font-size-s; + padding-top: scale-px(4px); } } } @@ -85,7 +85,7 @@ &-origin { &.nut-price { margin-left: 0; - margin-right: 2px; + margin-right: scale-px(2px); } } } @@ -93,7 +93,7 @@ &-other { .nut-tag { margin-right: 0; - margin-left: 5px; + margin-left: scale-px(5px); } } } diff --git a/src/packages/cell/cell.scss b/src/packages/cell/cell.scss index 31847bb99d..c5fb3b8fbb 100644 --- a/src/packages/cell/cell.scss +++ b/src/packages/cell/cell.scss @@ -11,7 +11,7 @@ box-shadow: $cell-box-shadow; font-size: $cell-title-font-size; color: $cell-title-color; - margin-bottom: 10px; + margin-bottom: scale-px(10px); box-sizing: border-box; &-group-item { @@ -73,12 +73,12 @@ &-divider { display: flex; - min-height: 1px; + min-height: scale-px(1px); padding-left: $cell-divider-left; padding-right: $cell-divider-right; &-inner { display: flex; - height: 1px; + height: scale-px(1px); width: 100%; border-top: $cell-divider-border-bottom; } diff --git a/src/packages/cellgroup/cellgroup.scss b/src/packages/cellgroup/cellgroup.scss index ab968f0108..d0fee11d8b 100644 --- a/src/packages/cellgroup/cellgroup.scss +++ b/src/packages/cellgroup/cellgroup.scss @@ -9,8 +9,8 @@ color: $cell-group-title-color; font-size: $cell-group-title-font-size; line-height: $cell-group-title-line-height; - margin-top: 30px; - margin-bottom: 10px; + margin-top: scale-px(30px); + margin-bottom: scale-px(10px); } &-description { @@ -21,8 +21,8 @@ color: $cell-group-description-color; font-size: $cell-group-description-font-size; line-height: $cell-group-description-line-height; - margin-top: 10px; - margin-bottom: 10px; + margin-top: scale-px(10px); + margin-bottom: scale-px(10px); } &-wrap { diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss index 58aa00a1a2..940f910880 100644 --- a/src/packages/checkbox/checkbox.scss +++ b/src/packages/checkbox/checkbox.scss @@ -14,7 +14,7 @@ font-size: 0px; line-height: 0px; border-radius: 50%; - box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2); + box-shadow: 0px scale-px(2px) scale-px(4px) 0px rgba(255, 15, 35, 0.2); } &-icon-checked { @@ -43,7 +43,7 @@ &-icon-indeterminate { color: $color-primary; background-color: $white; - box-shadow: 0px 2px 4px 0px #ff0f2333; + box-shadow: 0px scale-px(2px) scale-px(4px) 0px #ff0f2333; border-radius: 50%; &.nut-checkbox-icon-disabled { @@ -76,14 +76,14 @@ display: inline-flex; /* #endif */ align-items: center; - min-height: 32px; + min-height: scale-px(32px); padding: $checkbox-button-padding; font-size: $checkbox-button-font-size; background: $checkbox-button-background; border-radius: $checkbox-button-border-radius; color: $checkbox-label-color; box-sizing: border-box; - border: 1px solid $checkbox-button-background; + border: scale-px(1px) solid $checkbox-button-background; overflow: hidden; &-active { @@ -94,7 +94,7 @@ &-disabled { color: $color-text-disabled; - border: 1px solid $checkbox-button-background; + border: scale-px(1px) solid $checkbox-button-background; } &-icon { @@ -103,35 +103,35 @@ bottom: 0; width: 0; height: 0; - border-top: 10px solid transparent; - border-left: 10px solid transparent; - border-bottom: 10px solid $color-primary; - border-right: 10px solid $color-primary; + border-top: scale-icon-px(10px) solid transparent; + border-left: scale-icon-px(10px) solid transparent; + border-bottom: scale-icon-px(10px) solid $color-primary; + border-right: scale-icon-px(10px) solid $color-primary; display: flex; align-items: flex-end; justify-content: flex-end; } .nut-checkbox-button-icon-checked { - width: 12px; - height: 12px; + width: scale-px(12px); + height: scale-px(12px); position: absolute; color: $white; - right: 0; + right: 0px; bottom: 0; - transform: translate(-1px, -2px); + transform: translate(scale-px(-1px), scale-px(-2px)); } .nut-icon { position: absolute; - font-size: 12px; - width: 12px; - height: 12px; + font-size: $font-size-s; + width: scale-px(12px); + height: scale-px(12px); &:before { top: auto; - bottom: -22px; - margin-left: 6px; + bottom: scale-px(-22px); + margin-left: scale-px(6px); } } } @@ -139,7 +139,7 @@ .nut-checkbox-button-active.nut-checkbox-button-disabled { background: $color-text-disabled; color: $white; - border: 1px solid $color-text-disabled; + border: scale-px(1px) solid $color-text-disabled; } &-list-item { @@ -176,19 +176,19 @@ &-icon { right: auto; left: 0; - border-right: 10px solid transparent; - border-left: 10px solid $color-primary; + border-right: scale-px(10px) solid transparent; + border-left: scale-px(10px) solid $color-primary; &-checked { left: auto; right: 50%; - transform: translate(3px, -3px); + transform: translate(scale-px(3px), scale-px(-3px)); } .nut-icon { &:before { margin-left: 0; - margin-right: 6px; + margin-right: scale-px(6px); } } } diff --git a/src/packages/checkboxgroup/checkboxgroup.scss b/src/packages/checkboxgroup/checkboxgroup.scss index 3e2a6bd4e8..c6863eecb7 100644 --- a/src/packages/checkboxgroup/checkboxgroup.scss +++ b/src/packages/checkboxgroup/checkboxgroup.scss @@ -10,7 +10,7 @@ flex-direction: column; .nut-checkbox { - margin-bottom: 5px; + margin-bottom: scale-px(5px); &.nut-checkbox-reverse { width: 100%; @@ -37,7 +37,7 @@ display: inline-flex; /* #endif */ flex: 1; - margin-right: 20px; + margin-right: scale-px(20px); &-button-active { border: $radio-button-active-border; @@ -55,7 +55,7 @@ box-sizing: border-box; .nut-checkbox { - margin-bottom: 5px; + margin-bottom: scale-px(5px); &.nut-checkbox-reverse { width: auto; @@ -75,14 +75,14 @@ .nut-rtl .nut-checkboxgroup { .nut-checkbox { &-label { - margin-right: 5px; + margin-right: scale-px(5px); } } &-vertical { .nut-checkbox { &-label { - margin-right: 5px; + margin-right: scale-px(5px); } } } @@ -90,7 +90,7 @@ &-horizontal { .nut-checkbox { margin-right: 0; - margin-left: 20px; + margin-left: scale-px(20px); } } } diff --git a/src/packages/collapseitem/collapseitem.scss b/src/packages/collapseitem/collapseitem.scss index 067cfa9b49..298f1549ee 100644 --- a/src/packages/collapseitem/collapseitem.scss +++ b/src/packages/collapseitem/collapseitem.scss @@ -6,8 +6,8 @@ box-sizing: border-box; content: ' '; pointer-events: none; - right: 16px; - left: 16px; + right: scale-px(16px); + left: scale-px(16px); bottom: 0; border-bottom: $collapse-item-border-bottom; -webkit-transform: scaleY(0.5); @@ -34,8 +34,8 @@ box-sizing: border-box; content: ' '; pointer-events: none; - right: 16px; - left: 16px; + right: scale-px(16px); + left: scale-px(16px); bottom: 0; border-bottom: $collapse-item-header-border-bottom; /* #ifdef harmony dynamic*/ @@ -57,7 +57,7 @@ flex: 1; display: flex; justify-content: flex-end; - padding: 0px 20px; + padding: 0px scale-px(20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -66,7 +66,7 @@ &-icon-box { display: flex; - width: 24px; + width: scale-px(24px); position: relative; color: $color-text; } @@ -76,7 +76,7 @@ align-items: center; position: absolute; top: 50%; - left: 5px; + left: scale-px(5px); transform: translateY(-50%); transform-origin: center; transition: transform 0.3s; @@ -126,6 +126,6 @@ .nut-rtl .nut-collapse-item { &-icon { left: auto; - right: 5px; + right: scale-px(5px); } } diff --git a/src/packages/countdown/countdown.scss b/src/packages/countdown/countdown.scss index 84323db283..e16cb0237f 100644 --- a/src/packages/countdown/countdown.scss +++ b/src/packages/countdown/countdown.scss @@ -15,7 +15,7 @@ box-sizing: border-box; font-weight: $coutdown-font-weight; font-size: $countdown-font-size; - line-height: calc($countdown-font-size + 2px); + line-height: calc($countdown-font-size + scale-px(2px)); font-family: 'JDZH-Regular'; } &-number, @@ -41,7 +41,7 @@ background-color: $countdown-number-background-color; color: $countdown-number-color; &::after { - border: 1px solid $countdown-number-border-color; + border: scale-px(1px) solid $countdown-number-border-color; } } @@ -49,7 +49,7 @@ background-color: $countdown-number-primary-background-color; color: $countdown-number-primary-color; &::after { - border: 1px solid $countdown-number-primary-border-color; + border: scale-px(1px) solid $countdown-number-primary-border-color; } } &-number-text { diff --git a/src/packages/dialog/dialog.scss b/src/packages/dialog/dialog.scss index 93f0d99f4b..2c0b6b49b1 100644 --- a/src/packages/dialog/dialog.scss +++ b/src/packages/dialog/dialog.scss @@ -60,7 +60,7 @@ } &-bottom { - bottom: -64px; + bottom: scale-px(-64px); width: $dialog-bottom-close-icon-size; height: $dialog-bottom-close-icon-size; left: 50%; diff --git a/src/packages/divider/divider.scss b/src/packages/divider/divider.scss index bb5c5bb6cc..6cff69ca04 100644 --- a/src/packages/divider/divider.scss +++ b/src/packages/divider/divider.scss @@ -53,7 +53,7 @@ /* #endif */ width: 0px; height: $divider-vertical-height; - border-left: 1px solid $divider-border-color; + border-left: scale-px(1px) solid $divider-border-color; margin: $divider-vertical-margin; vertical-align: middle; } diff --git a/src/packages/elevator/elevator.scss b/src/packages/elevator/elevator.scss index ba1732bfed..dfe3550d29 100644 --- a/src/packages/elevator/elevator.scss +++ b/src/packages/elevator/elevator.scss @@ -106,10 +106,10 @@ /* #endif */ align-items: center; justify-content: center; - height: 16px; - width: 16px; + height: scale-px(16px); + width: scale-px(16px); border-radius: 50%; - margin: 1px 0; + margin: scale-px(1px) 0; color: $elevator-bars-color; font-size: $elevator-bars-font-size; cursor: pointer; diff --git a/src/packages/ellipsis/ellipsis.scss b/src/packages/ellipsis/ellipsis.scss index f7b313ad8c..5520be55c2 100644 --- a/src/packages/ellipsis/ellipsis.scss +++ b/src/packages/ellipsis/ellipsis.scss @@ -14,7 +14,7 @@ .nut-ellipsis-copy { position: absolute; - top: -999999px; + top: scale-px(-999999px); } .nut-ellipsis-width { diff --git a/src/packages/empty/empty.scss b/src/packages/empty/empty.scss index 7ec5e472fa..f6508e30c4 100644 --- a/src/packages/empty/empty.scss +++ b/src/packages/empty/empty.scss @@ -48,16 +48,16 @@ &-actions-base { display: flex; flex-direction: row; - margin-top: 24px; + margin-top: scale-px(24px); } &-actions-small { display: flex; flex-direction: row; - margin-top: 16px; + margin-top: scale-px(16px); } &-action { - margin-right: 6px; - margin-left: 6px; + margin-right: scale-px(6px); + margin-left: scale-px(6px); } } diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss index 7c85ede37e..9fe8c396d3 100644 --- a/src/packages/fixednav/fixednav.scss +++ b/src/packages/fixednav/fixednav.scss @@ -5,7 +5,7 @@ position: fixed; z-index: $fixednav-index; display: inline-block; - height: 50px; + height: scale-px(50px); &.active { .nut-fixednav-btn { @@ -29,17 +29,17 @@ box-sizing: border-box; position: absolute; z-index: $fixednav-index; - width: 70px; + width: scale-px(70px); height: 100%; background: $fixednav-button-background; - box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px scale-px(2px) scale-px(4px) 0px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; .text { - width: 24px; - line-height: 13px; + width: scale-px(24px); + line-height: scale-px(13px); font-size: $font-size-s; color: #fff; flex-shrink: 0; @@ -59,7 +59,7 @@ background: $fixednav-background-color; display: flex; justify-content: space-between; - box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); + box-shadow: scale-px(2px) scale-px(2px) scale-px(8px) 0px rgba(0, 0, 0, 0.2); &-item { position: relative; @@ -69,19 +69,19 @@ flex-direction: column; justify-content: center; align-items: center; - min-width: 50px; + min-width: scale-px(50px); flex-shrink: 0; color: $fixednav-color; .nut-fixednav-list-text { - font-size: 10px; + font-size: $font-size-xxs; } } &-image { - width: 20px; - height: 20px; - margin-bottom: 2px; + width: scale-px(20px); + height: scale-px(20px); + margin-bottom: scale-px(2px); } } @@ -89,19 +89,19 @@ right: 0; .nut-fixednav-btn { right: 0; - border-radius: 45px 0px 0px 45px; + border-radius: scale-px(45px) 0 0 scale-px(45px); .nut-icon { - margin-right: 5px; + margin-right: scale-px(5px); transform: rotate(0deg); } } .nut-fixednav-list { right: 0; transform: translateX(100%); - border-radius: 25px 0px 0px 25px; + border-radius: scale-px(25px) 0 0 scale-px(25px); padding: { - left: 20px; - right: 80px; + left: scale-px(20px); + right: scale-px(80px); } } } @@ -111,9 +111,9 @@ .nut-fixednav-btn { flex-direction: row-reverse; left: 0; - border-radius: 0 45px 45px 0; + border-radius: 0 scale-px(45px) scale-px(45px) 0; .nut-icon { - margin-left: 5px; + margin-left: scale-px(5px); transform: rotate(180deg); } } @@ -121,10 +121,10 @@ .nut-fixednav-list { transform: translateX(-100%); left: 0; - border-radius: 0px 25px 25px 0px; + border-radius: 0 scale-px(25px) scale-px(25px) 0; padding: { - left: 80px; - right: 20px; + left: scale-px(80px); + right: scale-px(20px); } } } @@ -150,10 +150,10 @@ &-btn { right: auto; left: 0; - border-radius: 0px 45px 45px 0px; + border-radius: 0px scale-px(45px) scale-px(45px) 0px; .nut-icon { margin-right: 0px; - margin-left: 5px; + margin-left: scale-px(5px); transform: rotate(180deg); } } @@ -162,12 +162,13 @@ right: auto; left: 0; transform: translateX(-100%); - border-radius: 0px 25px 25px 0px; - box-shadow: -2px 2px 8px 0px rgba(0, 0, 0, 0.2); + border-radius: 0px scale-px(25px) scale-px(25px) 0px; + box-shadow: scale-px(-2px) scale-px(2px) scale-px(8px) 0px + rgba(0, 0, 0, 0.2); padding: { - right: 20px; - left: 80px; + right: scale-px(20px); + left: scale-px(80px); } &-item { @@ -185,11 +186,11 @@ .nut-fixednav-btn { left: auto; right: 0; - border-radius: 45px 0 0 45px; + border-radius: scale-px(45px) 0 0 scale-px(45px); .nut-icon { transform: rotate(0deg); - margin-right: 5px; + margin-right: scale-px(5px); margin-left: 0px; } } @@ -198,11 +199,11 @@ transform: translateX(100%); right: auto; left: auto; - border-radius: 25px 0px 0px 25px; + border-radius: scale-px(25px) 0px 0px scale-px(25px); padding: { - right: 80px; - left: 20px; + right: scale-px(80px); + left: scale-px(20px); } } } diff --git a/src/packages/formitem/formitem.scss b/src/packages/formitem/formitem.scss index 285e36b715..e6005259c0 100644 --- a/src/packages/formitem/formitem.scss +++ b/src/packages/formitem/formitem.scss @@ -23,14 +23,14 @@ color: $form-item-required-color; margin-right: $form-item-required-margin-right; position: absolute; - left: -10px; + left: scale-px(-10px); } &-right-required { color: $form-item-required-color; margin-left: $form-item-required-margin-right; position: absolute; - right: -10px; + right: scale-px(-10px); } } @@ -68,7 +68,7 @@ } .nut-range-container { - min-height: 24px; + min-height: scale-px(24px); } .nut-textarea { @@ -132,13 +132,13 @@ .nut-form-item-label-right { justify-content: flex-end; - padding-right: 24px; + padding-right: scale-px(24px); white-space: nowrap; } .nut-form-item-label-left { position: relative; - padding-left: 12px; + padding-left: scale-px(12px); white-space: nowrap; } @@ -150,8 +150,8 @@ .nut-form-item-label-top { display: block; - padding-bottom: 4px; - padding-right: 24px; + padding-bottom: scale-px(4px); + padding-right: scale-px(24px); } .nut-form-item-body-top { @@ -163,14 +163,14 @@ .nut-rtl .form-layout-right .nut-form-item-label { text-align: left; padding-right: 0; - padding-left: 24px; + padding-left: scale-px(24px); } [dir='rtl'] .form-layout-left .nut-form-item-label, .nut-rtl .form-layout-left .nut-form-item-label { text-align: right; padding-left: 0; - padding-right: 12px; + padding-right: scale-px(12px); // .required { // left: auto; @@ -181,7 +181,7 @@ [dir='rtl'] .form-layout-top .nut-form-item-label, .nut-rtl .form-layout-top .nut-form-item-label { padding-right: 0; - padding-left: 24px; + padding-left: scale-px(24px); } [dir='rtl'] .form-layout-top .nut-form-item-body, diff --git a/src/packages/grid/grid.scss b/src/packages/grid/grid.scss index 92d9a1b268..372766e3a3 100644 --- a/src/packages/grid/grid.scss +++ b/src/packages/grid/grid.scss @@ -17,6 +17,6 @@ .nut-rtl .nut-grid { &-border { border-left-width: 0; - border-right-width: 1px; + border-right-width: scale-px(1px); } } diff --git a/src/packages/griditem/griditem.scss b/src/packages/griditem/griditem.scss index ee1df14ec0..a3ae4da838 100644 --- a/src/packages/griditem/griditem.scss +++ b/src/packages/griditem/griditem.scss @@ -98,12 +98,12 @@ &-content { &-border { border-right-width: 0; - border-left-width: 1px; + border-left-width: scale-px(1px); } &-surround { border-left-width: 0; - border-right-width: 1px; + border-right-width: scale-px(1px); } &-horizontal { diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.scss b/src/packages/hoverbuttonitem/hoverbuttonitem.scss index d33de14b34..16c7dc9327 100644 --- a/src/packages/hoverbuttonitem/hoverbuttonitem.scss +++ b/src/packages/hoverbuttonitem/hoverbuttonitem.scss @@ -3,7 +3,7 @@ width: $hoverbutton-item-size; height: $hoverbutton-item-size; border-radius: $hoverbutton-item-size; - border: 1px solid $hoverbutton-item-border-color; + border: scale-px(1px) solid $hoverbutton-item-border-color; background-color: $hoverbutton-item-background; &:active, @@ -26,25 +26,25 @@ .nut-icon { display: block; - width: 14px; - height: 14px; - font-size: 14px; + width: scale-px(14px); + height: scale-px(14px); + font-size: $font-size-base; } } } &-icon { - width: 20px; - height: 20px; - margin: 9px; + width: scale-px(20px); + height: scale-px(20px); + margin: scale-px(9px); color: $hoverbutton-item-icon-color; fill: $hoverbutton-item-icon-color; .nut-icon { display: block; - width: 20px; - height: 20px; - font-size: 20px; + width: scale-px(20px); + height: scale-px(20px); + font-size: scale-font-px(20px); } } @@ -54,13 +54,13 @@ } &-text-icon { - width: 14px; - height: 5px; + width: scale-px(14px); + height: scale-px(5px); } &-text { - font-size: 10px; - margin-top: 5px; - line-height: 9px; + font-size: $font-size-xxs; + margin-top: scale-px(5px); + line-height: scale-px(9px); } } diff --git a/src/packages/imagepreview/imagepreview.scss b/src/packages/imagepreview/imagepreview.scss index 1587f2886a..51108ec84b 100644 --- a/src/packages/imagepreview/imagepreview.scss +++ b/src/packages/imagepreview/imagepreview.scss @@ -16,7 +16,7 @@ &-index { position: fixed; z-index: 2002; - top: 50px; + top: scale-px(50px); text-align: center; left: 0; right: 0; @@ -25,7 +25,7 @@ .arrow { position: absolute; - left: 15px; + left: scale-px(15px); transform: rotateZ(180deg); } } @@ -44,17 +44,17 @@ } &.top-right { - top: 50px; - right: 20px; + top: scale-px(50px); + right: scale-px(20px); } &.top-left { - top: 50px; - left: 20px; + top: scale-px(50px); + left: scale-px(20px); } &.bottom { - bottom: 50px; + bottom: scale-px(50px); left: 0; right: 0; text-align: center; @@ -103,19 +103,19 @@ &-index { .arrow { left: auto; - right: 15px; + right: scale-px(15px); transform: rotateZ(-180deg); } } &-close { &.top-right { right: auto; - left: 20px; + left: scale-px(20px); } &.top-left { left: auto; - right: 20px; + right: scale-px(20px); } } } diff --git a/src/packages/indicator/indicator.scss b/src/packages/indicator/indicator.scss index 6c442de3f5..66e75485ee 100644 --- a/src/packages/indicator/indicator.scss +++ b/src/packages/indicator/indicator.scss @@ -6,7 +6,7 @@ align-items: center; &-fixed-width { - width: 21px; + width: scale-px(21px); } &-dot, @@ -36,11 +36,11 @@ &-fixed-width { // 两个页码的时候 .nut-indicator-dot { - width: 12px; + width: scale-px(12px); border-radius: $indicator-border-radius; &-active { - width: 6px; + width: scale-px(6px); } } } @@ -49,17 +49,17 @@ // 竖向固定高度 &.nut-indicator-fixed-width { justify-content: flex-start; - height: 21px; + height: scale-px(21px); width: auto; // 竖向两个页码 .nut-indicator-dot { - width: 3px; - height: 12px; + width: scale-px(3px); + height: scale-px(12px); border-radius: $indicator-border-radius; &-active { - height: 6px; + height: scale-px(6px); } } @@ -67,7 +67,7 @@ &.nut-indicator-white { .nut-indicator-dot { &-active { - height: 6px; + height: scale-px(6px); } } } @@ -136,7 +136,7 @@ .nut-indicator-track.nut-indicator-white { &:after { - border: 1px solid rgba(0, 0, 0, 0.06); + border: scale-px(1px) solid rgba(0, 0, 0, 0.06); background: rgba(255, 255, 255, 0.4); } } diff --git a/src/packages/infiniteloading/infiniteloading.scss b/src/packages/infiniteloading/infiniteloading.scss index 024ffcf563..c0d9cb579a 100644 --- a/src/packages/infiniteloading/infiniteloading.scss +++ b/src/packages/infiniteloading/infiniteloading.scss @@ -22,7 +22,7 @@ display: flex; justify-content: center; align-items: center; - margin-bottom: 4px; + margin-bottom: scale-px(4px); } } } @@ -32,7 +32,7 @@ align-items: center; justify-content: center; width: 100%; - padding-top: 6px; + padding-top: scale-px(6px); color: $infiniteloading-color; text-align: center; @@ -43,7 +43,7 @@ font-size: $font-size-xxs; &-icons { - margin-right: 8px; + margin-right: scale-px(8px); } } } @@ -62,7 +62,7 @@ &-tips { &-icons { margin-right: 0; - margin-left: 8px; + margin-left: scale-px(8px); } } } diff --git a/src/packages/input/input.scss b/src/packages/input/input.scss index 38fcf4928d..b24aac76c1 100644 --- a/src/packages/input/input.scss +++ b/src/packages/input/input.scss @@ -16,12 +16,12 @@ .nut-icon { color: $color-text-disabled; - width: 14px; - height: 14px; - font-size: 14px; + width: scale-px(14px); + height: scale-px(14px); + font-size: $font-size-base; } &-container { - height: 38px; + height: scale-px(38px); padding: $input-padding; background-color: $input-background-color; border-radius: $input-border-radius; diff --git a/src/packages/inputnumber/inputnumber.scss b/src/packages/inputnumber/inputnumber.scss index 7fb01dcff9..d156523df5 100644 --- a/src/packages/inputnumber/inputnumber.scss +++ b/src/packages/inputnumber/inputnumber.scss @@ -23,8 +23,8 @@ height: $inputnumber-button-height; background-color: $inputnumber-button-background-color; .nut-icon { - --nut-icon-width: 10px; - --nut-icon-height: 10px; + width: scale-px(10px); + height: scale-px(10px); } } @@ -66,12 +66,12 @@ } &-icon-minus { - --nut-icon-width: 16px; - --nut-icon-height: 16px; + width: scale-px(16px); + height: scale-px(16px); } &-icon-plus { - --nut-icon-width: 16px; - --nut-icon-height: 16px; + width: scale-px(16px); + height: scale-px(16px); } } diff --git a/src/packages/lottie/lottiemp.taro.tsx b/src/packages/lottie/lottiemp.taro.tsx index 5dd321c581..82790d79e8 100644 --- a/src/packages/lottie/lottiemp.taro.tsx +++ b/src/packages/lottie/lottiemp.taro.tsx @@ -1,5 +1,5 @@ -import React, { useImperativeHandle, useRef } from 'react' -import { createSelectorQuery, getEnv, useReady, useUnload } from '@tarojs/taro' +import React, { useImperativeHandle, useLayoutEffect, useRef } from 'react' +import { createSelectorQuery, getEnv, useUnload } from '@tarojs/taro' import lottie from '@nutui/lottie-miniprogram' import { getWindowInfo } from '@/utils/taro/get-system-info' import { useUuid } from '@/hooks/use-uuid' @@ -20,15 +20,10 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => { speed = 1, dpr = true, } = props - const setSpeed = () => { - if (animation.current) { - animation.current.setSpeed(Math.abs(speed)) - animation.current.setDirection(speed > 0 ? 1 : -1) - } - } + useImperativeHandle(ref, () => animation.current || {}) const pixelRatio = useRef(getWindowInfo().pixelRatio) - useReady(() => { + useLayoutEffect(() => { createSelectorQuery() .select(`#${id}`) .fields( @@ -62,9 +57,14 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => { context, }, }) - onComplete && + if (onComplete) { animation.current.addEventListener('complete', onComplete) - setSpeed() + } + + if (animation.current) { + animation.current.setSpeed(Math.abs(speed)) + animation.current.setDirection(speed > 0 ? 1 : -1) + } inited.current = true } catch (error) { console.error(error) @@ -72,7 +72,8 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => { } ) .exec() - }) + }, [autoPlay, dpr, id, loop, onComplete, source, speed, style]) + useUnload(() => { onComplete && animation.current && diff --git a/src/packages/menuitem/menuitem.scss b/src/packages/menuitem/menuitem.scss index 6277d7b808..8b50f37834 100644 --- a/src/packages/menuitem/menuitem.scss +++ b/src/packages/menuitem/menuitem.scss @@ -74,7 +74,7 @@ .nut-menu-container-down-enter { opacity: 0; - transform: translate(0, -30px); + transform: translate(0, scale-px(-30px)); } .nut-menu-container-down-enter-done { @@ -95,7 +95,7 @@ .nut-menu-container-up-enter { opacity: 0; - transform: translate(0, 30px); + transform: translate(0, scale-px(30px)); } .nut-menu-container-up-enter-done { diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss index c6809f2718..701c006fa5 100644 --- a/src/packages/navbar/navbar.scss +++ b/src/packages/navbar/navbar.scss @@ -12,7 +12,7 @@ font-size: $navbar-font-size; color: $navbar-color; overflow: hidden; - padding: 0 16px; + padding: 0 scale-px(16px); &-fixed { position: fixed; @@ -48,9 +48,10 @@ font-size: $navbar-title-font-size; font-weight: $navbar-title-font-weight; color: $navbar-title-font-color; + white-space: nowrap; &-center { - max-width: 129px; + max-width: scale-px(129px); justify-content: center; } } @@ -64,31 +65,31 @@ display: flex; align-items: center; flex-direction: row; - max-width: 124px; + max-width: scale-px(124px); height: 100%; cursor: pointer; /* #ifndef harmony jd h5 weapp*/ .nut-icon, .nutui-iconfont { - width: 20px; - height: 20px; - font-size: 20px; + width: scale-px(20px); + height: scale-px(20px); + font-size: scale-font-px(20px); } /* #endif */ &-maxwidth { box-sizing: border-box; - width: calc(124px - 16px); + width: calc(scale-px(124px) - scale-px(16px)); } } &-left { - padding-right: 16px; - gap: 16px; + padding-right: scale-px(16px); + gap: scale-px(16px); &-rtl { padding-right: 0; - padding-left: 16px; + padding-left: scale-px(16px); } &-back { @@ -96,7 +97,7 @@ flex-direction: row; align-items: center; justify-content: center; - gap: 16px; + gap: scale-px(16px); } &-hidden { @@ -106,12 +107,12 @@ } &-right { - padding-left: 16px; + padding-left: scale-px(16px); justify-content: flex-end; - gap: 16px; + gap: scale-px(16px); &-rtl { - padding-right: 16px; + padding-right: scale-px(16px); padding-left: 0; } } diff --git a/src/packages/noticebar/noticebar.scss b/src/packages/noticebar/noticebar.scss index 4c98dc203b..f7e7e78387 100644 --- a/src/packages/noticebar/noticebar.scss +++ b/src/packages/noticebar/noticebar.scss @@ -68,8 +68,8 @@ margin-left: $noticebar-icon-gap; .nut-icon { - width: 12px; - height: 12px; + width: scale-px(12px); + height: scale-px(12px); color: $noticebar-color; } } diff --git a/src/packages/notify/notify.scss b/src/packages/notify/notify.scss index 9c7bf6e5a4..1b6c2d7c33 100644 --- a/src/packages/notify/notify.scss +++ b/src/packages/notify/notify.scss @@ -43,8 +43,8 @@ .nut-notify { position: fixed; - left: 8px; - right: 8px; + left: scale-px(8px); + right: scale-px(8px); z-index: $notify-z-index; display: flex; align-items: center; @@ -84,18 +84,18 @@ } &-left-icon { - margin-right: 6px; + margin-right: scale-px(6px); .nut-icon { - height: 16px; - width: 16px; + height: scale-px(16px); + width: scale-px(16px); } } &-right-icon { - margin-left: 6px; + margin-left: scale-px(6px); .nut-icon { - height: 12px; - width: 12px; + height: scale-px(12px); + width: scale-px(12px); } } } diff --git a/src/packages/numberkeyboard/numberkeyboard.scss b/src/packages/numberkeyboard/numberkeyboard.scss index 82f922c5bd..c7beaccf57 100644 --- a/src/packages/numberkeyboard/numberkeyboard.scss +++ b/src/packages/numberkeyboard/numberkeyboard.scss @@ -41,7 +41,7 @@ &-body { display: flex; - padding: 6px 0 0 6px; + padding: scale-px(6px) 0 0 scale-px(6px); &-keys { display: flex; @@ -59,7 +59,7 @@ flex-basis: 33%; /* #endif */ box-sizing: border-box; - padding: 0 6px 6px 0; + padding: 0 scale-px(6px) scale-px(6px) 0; background-color: $numberkeyboard-wrapper-background-color; .key { @@ -93,8 +93,8 @@ .key { position: absolute; top: 0; - right: 6px; - bottom: 6px; + right: scale-px(6px); + bottom: scale-px(6px); left: 0; height: auto; } @@ -123,9 +123,9 @@ } &-body { - padding: 6px 6px 0 0; + padding: scale-px(6px) scale-px(6px) 0 0; &-wrapper { - padding: 0 0 6px 6px; + padding: 0 0 scale-px(6px) scale-px(6px); .delete { transform: rotate(-180deg); } @@ -135,7 +135,7 @@ &-sidebar { .nut-numberkeyboard-body-wrapper { .key { - left: 6px; + left: scale-px(6px); right: 0; &.delete { transform: rotate(-180deg); diff --git a/src/packages/overlay/overlay.tsx b/src/packages/overlay/overlay.tsx index 82ed8211fc..98667d689b 100644 --- a/src/packages/overlay/overlay.tsx +++ b/src/packages/overlay/overlay.tsx @@ -10,7 +10,6 @@ import classNames from 'classnames' import { ComponentDefaults } from '@/utils/typings' import { useLockScroll } from '@/hooks/use-lock-scroll' import { WebOverlayProps } from '@/types' -import { useConfig } from '@/packages/configprovider' export const defaultOverlayProps: WebOverlayProps = { ...ComponentDefaults, @@ -38,14 +37,12 @@ export const Overlay: FunctionComponent< afterShow, afterClose, onClick, - ariaLabel, ...rest } = { ...defaultOverlayProps, ...props } const classPrefix = 'nut-overlay' const [innerVisible, setInnerVisible] = useState(visible) const nodeRef = useRef(null) - const { locale } = useConfig() useEffect(() => { setInnerVisible(visible) @@ -81,9 +78,6 @@ export const Overlay: FunctionComponent< style={styles} {...rest} onClick={handleClick} - {...(closeOnOverlayClick - ? { ariaLabel: ariaLabel || locale.mask } - : {})} > {children} diff --git a/src/packages/pagination/pagination.scss b/src/packages/pagination/pagination.scss index 28505fbfd4..92d154dee5 100644 --- a/src/packages/pagination/pagination.scss +++ b/src/packages/pagination/pagination.scss @@ -8,8 +8,8 @@ .nut-pagination-prev, .nut-pagination-item, .nut-pagination-next { - height: 39px; - min-width: 39px; + height: scale-px(39px); + min-width: scale-px(39px); flex-shrink: 0; box-sizing: border-box; display: flex; @@ -53,9 +53,9 @@ } .nut-pagination-simple { - height: 39px; - width: 124px; - line-height: 39px; + height: scale-px(39px); + width: scale-px(124px); + line-height: scale-px(39px); text-align: center; font-size: $pagination-font-size; color: $pagination-color; diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss index f51fdeaa0e..fb17684946 100644 --- a/src/packages/popover/popover.scss +++ b/src/packages/popover/popover.scss @@ -6,24 +6,26 @@ &-arrow { position: absolute; - width: 8px; - height: 4px; + width: scale-px(8px); + height: scale-px(4px); .nut-icon-ArrowRadius { position: absolute; color: $popover-content-background-color; + width: scale-px(8px); + height: scale-px(4px); } &-top { - bottom: -4px; + bottom: scale-px(-4px); } &-bottom { - top: -4px; + top: scale-px(-4px); } &-left { - right: -6px; + right: scale-px(-6px); transform-origin: center top; &.nut-popover-arrow-left { @@ -32,15 +34,15 @@ } &.nut-popover-arrow-left-top { - top: 16px; - right: -8px; + top: scale-px(16px); + right: scale-px(-8px); transform: rotate(90deg) translateY(0%); } &.nut-popover-arrow-left-bottom { top: auto; - bottom: 16px; - right: -8px; + bottom: scale-px(16px); + right: scale-px(-8px); transform: rotate(90deg) translateY(0%); } } @@ -49,19 +51,19 @@ transform-origin: center top; &.nut-popover-arrow-right { top: 50%; - left: -6px; + left: scale-px(-6px); transform: rotate(-90deg) translateY(-50%); } &.nut-popover-arrow-right-top { - top: 16px; - left: -8px; + top: scale-px(16px); + left: scale-px(-8px); transform: rotate(-90deg) translateY(0%); } &.nut-popover-arrow-right-bottom { - bottom: 16px; - left: -8px; + bottom: scale-px(16px); + left: scale-px(-8px); transform: rotate(-90deg) translateY(0%); } } @@ -73,7 +75,7 @@ border-radius: $popover-border-radius; font-size: $popover-font-size; color: $popover-text-color; - line-height: 28px; + line-height: scale-px(28px); /* #ifndef dynamic*/ max-height: initial; overflow-y: initial; @@ -87,7 +89,7 @@ display: flex; align-items: center; justify-content: center; - border-bottom: 1px solid $popover-divider-color; + border-bottom: scale-px(1px) solid $popover-divider-color; max-width: $popover-item-width; word-wrap: break-word; @@ -116,7 +118,7 @@ } &-name { - width: calc(100% - 34px); + width: calc(100% - scale-px(34px)); word-break: keep-all; flex: 1; } @@ -147,8 +149,8 @@ &-top-right { right: 0; .nut-popover-arrow-top-right { - right: 16px; - bottom: -3.5px; + right: scale-px(16px); + bottom: scale-px(-3.5px); transform: rotate(180deg) translateX(0%); } } @@ -156,8 +158,8 @@ &-top-left { left: 0; .nut-popover-arrow-top-left { - left: 16px; - bottom: -3.5px; + left: scale-px(16px); + bottom: scale-px(-3.5px); transform: rotate(180deg) translateX(0%); } } @@ -172,7 +174,7 @@ &-bottom-right { right: 0; .nut-popover-arrow-bottom-right { - right: 16px; + right: scale-px(16px); transform: translateX(0%); } } @@ -180,7 +182,7 @@ &-bottom-left { left: 0; .nut-popover-arrow-bottom-left { - left: 16px; + left: scale-px(16px); transform: translateX(0%); } } @@ -230,7 +232,7 @@ .nut-popover-item { &-name { margin-left: 0; - margin-right: 4px; + margin-right: scale-px(4px); } &-action-icon { @@ -250,7 +252,7 @@ .nut-popover-arrow-top-right { right: auto; - left: 16px; + left: scale-px(16px); } } @@ -260,7 +262,7 @@ .nut-popover-arrow-top-left { left: auto; - right: 16px; + right: scale-px(16px); } } @@ -278,7 +280,7 @@ .nut-popover-arrow-bottom-right { right: auto; - left: 16px; + left: scale-px(16px); } } @@ -288,7 +290,7 @@ .nut-popover-arrow-bottom-left { left: auto; - right: 16px; + right: scale-px(16px); } } } @@ -331,5 +333,5 @@ // Taro .nut-popover-content-copy { position: absolute; - top: -99999px; + top: scale-px(-99999px); } diff --git a/src/packages/popover/popover.tsx b/src/packages/popover/popover.tsx index 24c17f6eb0..e95789ec6c 100644 --- a/src/packages/popover/popover.tsx +++ b/src/packages/popover/popover.tsx @@ -293,7 +293,7 @@ export const Popover: FunctionComponent< > {showArrow && (
- +
)} {Array.isArray(children) ? children[1] : null} diff --git a/src/packages/popup/__tests__/popup.spec.tsx b/src/packages/popup/__tests__/popup.spec.tsx index d414415387..d612b36aab 100644 --- a/src/packages/popup/__tests__/popup.spec.tsx +++ b/src/packages/popup/__tests__/popup.spec.tsx @@ -206,3 +206,22 @@ test('handles touch events correctly', () => { fireEvent.touchEnd(popup) expect(handleTouchEnd).toHaveBeenCalled() }) + +test('overlayProps propagation test', () => { + const { container } = render( + + ) + const overlay = container.querySelector('.nut-overlay') as HTMLElement + expect(overlay).toBeTruthy() + expect(overlay).toHaveAttribute('aria-label', 'custom-overlay-label') + expect(overlay).toHaveAttribute('id', 'my-overlay') +}) + +test('should disable animation when animated prop is false', () => { + const { container } = render() + const overlay = container.querySelector('.nut-overlay') as HTMLElement + expect(overlay).toBeTruthy() +}) diff --git a/src/packages/popup/demos/h5/demo1.tsx b/src/packages/popup/demos/h5/demo1.tsx index d04347b321..0454efe982 100644 --- a/src/packages/popup/demos/h5/demo1.tsx +++ b/src/packages/popup/demos/h5/demo1.tsx @@ -29,6 +29,7 @@ const Demo = () => { setShowPopup(false) }} closeAriaLabel="关闭弹框" + overlayProps={{ ariaLabel: '点击蒙层关闭' }} /> { setShowPopup(false) }} closeAriaLabel="关闭弹框" + overlayProps={{ ariaLabel: '点击蒙层关闭' }} /> {}, onTouchMove: () => {}, onTouchEnd: () => {}, + overlayProps: {}, + animated: true, } // 默认1000，参看variables @@ -95,8 +97,13 @@ export const Popup: FunctionComponent< onTouchMove, onTouchEnd, closeAriaLabel, + overlayProps, + animated, } = { ...defaultProps, ...props } const { locale } = useConfig() + const transitionDuration = useMemo(() => { + return animated ? Number(duration) : 0 + }, [animated, duration]) const [index, setIndex] = useState(zIndex || _zIndex) const [innerVisible, setInnerVisible] = useState(visible) @@ -187,14 +194,14 @@ export const Popup: FunctionComponent< if (destroyOnClose) { setTimeout(() => { setShowChildren(false) - }, Number(duration)) + }, transitionDuration) } onClose?.() } }, [ innerVisible, destroyOnClose, - duration, + transitionDuration, onClose, setInnerVisible, setShowChildren, @@ -395,7 +402,7 @@ export const Popup: FunctionComponent< classNames={transitionName} mountOnEnter unmountOnExit={destroyOnClose} - timeout={Number(duration)} + timeout={Number(transitionDuration)} in={innerVisible} onEntered={afterShow} onExited={afterClose} @@ -433,8 +440,9 @@ export const Popup: FunctionComponent< visible={innerVisible} closeOnOverlayClick={closeOnOverlayClick} lockScroll={lockScroll} - duration={duration} + duration={transitionDuration} onClick={handleOverlayClick} + {...overlayProps} /> ) : null} {renderPop()} diff --git a/src/packages/popup/popup.tsx b/src/packages/popup/popup.tsx index 740f43ba5d..fc41a3ed59 100644 --- a/src/packages/popup/popup.tsx +++ b/src/packages/popup/popup.tsx @@ -40,6 +40,8 @@ const defaultProps: WebPopupProps = { onTouchStart: () => {}, onTouchMove: () => {}, onTouchEnd: () => {}, + overlayProps: {}, + animated: true, } // 默认1000，参看variables @@ -89,6 +91,8 @@ export const Popup: FunctionComponent< onTouchMove, onTouchEnd, closeAriaLabel, + overlayProps, + animated, } = { ...defaultProps, ...props } const nodeRef = React.useRef(null) const topNodeRef = React.useRef(null) @@ -106,6 +110,7 @@ export const Popup: FunctionComponent< const isTouching = useRef(false) const role = 'dialog' const { locale } = useConfig() + const transitionDuration = animated ? Number(duration) : 0 useLockScroll(nodeRef, innerVisible && lockScroll) @@ -160,7 +165,7 @@ export const Popup: FunctionComponent< if (destroyOnClose) { setTimeout(() => { setShowChildren(false) - }, Number(duration)) + }, transitionDuration) } onClose && onClose() } @@ -306,7 +311,7 @@ export const Popup: FunctionComponent< classNames={transitionName} mountOnEnter unmountOnExit={destroyOnClose} - timeout={duration} + timeout={transitionDuration} in={innerVisible} onEntered={afterShow} onExited={afterClose} @@ -341,8 +346,9 @@ export const Popup: FunctionComponent< visible={innerVisible} closeOnOverlayClick={closeOnOverlayClick} lockScroll={lockScroll} - duration={duration} + duration={transitionDuration} onClick={handleOverlayClick} + {...overlayProps} /> )} {renderPop()} diff --git a/src/packages/price/price.scss b/src/packages/price/price.scss index a0cd0b824f..d68d30eb56 100644 --- a/src/packages/price/price.scss +++ b/src/packages/price/price.scss @@ -10,7 +10,6 @@ &-decimal { color: $price-color; font-family: 'JDZH-Bold'; - line-height: 1; } &-darkgray { @@ -39,18 +38,22 @@ padding-right: $price-symbol-padding-right; &-xlarge { font-size: $price-symbol-xlarge-size; + line-height: $price-symbol-xlarge-size; } &-large { font-size: $price-symbol-large-size; + line-height: $price-symbol-large-size; } &-normal { font-size: $price-symbol-normal-size; + line-height: $price-symbol-normal-size; } &-small { font-size: $price-symbol-small-size; + line-height: $price-symbol-small-size; } &-rtl { @@ -62,45 +65,44 @@ &-integer { &-xlarge { font-size: $price-integer-xlarge-size; - /* #ifdef dynamic */ line-height: $price-integer-xlarge-size; - /* #endif */ } &-large { font-size: $price-integer-large-size; - /* #ifdef dynamic */ line-height: $price-integer-large-size; - /* #endif */ } &-normal { font-size: $price-integer-normal-size; - /* #ifdef dynamic */ line-height: $price-integer-normal-size; - /* #endif */ } &-small { font-size: $price-integer-small-size; + line-height: $price-integer-small-size; } } &-decimal { &-xlarge { font-size: $price-decimal-xlarge-size; + line-height: $price-decimal-xlarge-size; } &-large { font-size: $price-decimal-large-size; + line-height: $price-decimal-large-size; } &-normal { font-size: $price-decimal-normal-size; + line-height: $price-decimal-normal-size; } &-small { font-size: $price-decimal-small-size; + line-height: $price-decimal-small-size; } } diff --git a/src/packages/price/price.taro.tsx b/src/packages/price/price.taro.tsx index 2c9b3150e0..4484d15af5 100644 --- a/src/packages/price/price.taro.tsx +++ b/src/packages/price/price.taro.tsx @@ -5,7 +5,10 @@ import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index.taro' import { TaroPriceProps, PriceColorEnum } from '@/types' import { harmony } from '@/utils/taro/platform' -import { shouldRenderPriceAsRaw } from '@/utils/should-render-price-raw' +import { + shouldRenderPriceAsRaw, + hasNonPriceChars, +} from '@/utils/should-render-price-raw' const defaultProps = { ...ComponentDefaults, @@ -17,6 +20,7 @@ const defaultProps = { position: 'before', size: 'normal', line: false, + raw: false, } as TaroPriceProps export const Price: FunctionComponent> = (props) => { const { @@ -28,6 +32,7 @@ export const Price: FunctionComponent> = (props) => { position, size, line, + raw, className, style, } = { @@ -41,9 +46,12 @@ export const Price: FunctionComponent> = (props) => { const isRenderPriceRaw = useMemo( () => - typeof originalPrice === 'string' && - shouldRenderPriceAsRaw(originalPrice), - [originalPrice] + (typeof originalPrice === 'string' && + shouldRenderPriceAsRaw(originalPrice)) || + (raw && + typeof originalPrice === 'string' && + hasNonPriceChars(originalPrice)), + [originalPrice, raw] ) const price = useMemo(() => { @@ -95,7 +103,7 @@ export const Price: FunctionComponent> = (props) => { } const formatDecimal = (decimalNum: any) => { - if (Number(decimalNum) === 0) { + if (Number(decimalNum) === 0 && !checkPoint(decimalNum)) { decimalNum = 0 } diff --git a/src/packages/progress/progress.scss b/src/packages/progress/progress.scss index 9b7a7685e3..5b95515a79 100644 --- a/src/packages/progress/progress.scss +++ b/src/packages/progress/progress.scss @@ -35,7 +35,7 @@ display: flex; align-items: center; transition: all 0.4s; - margin-left: 12px; + margin-left: scale-px(12px); color: $color-text-help; font-family: PingFang SC; font-size: $progress-text-font-size; diff --git a/src/packages/pulltorefresh/pulltorefresh.scss b/src/packages/pulltorefresh/pulltorefresh.scss index 7a16567fcb..5d79d9e4b3 100644 --- a/src/packages/pulltorefresh/pulltorefresh.scss +++ b/src/packages/pulltorefresh/pulltorefresh.scss @@ -2,7 +2,7 @@ &-head { overflow: hidden; position: relative; - font-size: 12px; + font-size: $font-size-s; &-content { position: absolute; @@ -18,7 +18,7 @@ &-icons { width: $pulltorefresh-icon-width; height: $pulltorefresh-icon-height; - margin-bottom: 4px; + margin-bottom: scale-px(4px); } } } diff --git a/src/packages/radio/radio.scss b/src/packages/radio/radio.scss index ff879e9cc4..fd0c80b838 100644 --- a/src/packages/radio/radio.scss +++ b/src/packages/radio/radio.scss @@ -37,7 +37,7 @@ &-checked { color: $color-primary; background-color: $white; - box-shadow: 0px 2px 4px 0px #ff0f2333; + box-shadow: 0px scale-px(2px) scale-px(4px) 0px #ff0f2333; border-radius: 50%; &.nut-radio-icon-disabled { @@ -61,14 +61,14 @@ display: inline-flex; /* #endif */ align-items: center; - min-height: 30px; + min-height: scale-px(30px); padding: $radio-button-padding; font-size: $radio-button-font-size; background: $radio-button-background; border-radius: $radio-button-border-radius; color: $radio-label-color; box-sizing: border-box; - border: 1px solid $radio-button-background; + border: scale-px(1px) solid $radio-button-background; &-active { background: $color-primary-light-pressed; @@ -78,14 +78,14 @@ &-disabled { color: $color-text-disabled; - border: 1px solid $radio-button-background; + border: scale-px(1px) solid $radio-button-background; } } .nut-radio-button-active.nut-radio-button-disabled { background: $color-text-disabled; color: $white; - border: 1px solid $color-text-disabled; + border: scale-px(1px) solid $color-text-disabled; } } diff --git a/src/packages/radiogroup/radiogroup.scss b/src/packages/radiogroup/radiogroup.scss index 661a6e775e..7b89fbd7e3 100644 --- a/src/packages/radiogroup/radiogroup.scss +++ b/src/packages/radiogroup/radiogroup.scss @@ -23,7 +23,7 @@ } &-button { - border: 1px solid $radio-button-background; + border: scale-px(1px) solid $radio-button-background; } &-button-active { @@ -38,7 +38,7 @@ .nut-radio { &-button { - border: 1px solid $white; + border: scale-px(1px) solid $white; } &-button-active { @@ -55,7 +55,7 @@ .nut-radio-button-active.nut-radio-button-disabled { background: $color-text-disabled; color: $white; - border: 1px solid $color-text-disabled; + border: scale-px(1px) solid $color-text-disabled; } } diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss index cd9f42dcc9..e07ecbfbc7 100644 --- a/src/packages/range/range.scss +++ b/src/packages/range/range.scss @@ -19,13 +19,13 @@ height: $range-height; margin: 0 $range-margin; background-color: $range-inactive-color; - border-radius: 2px; + border-radius: scale-px(2px); flex: 1; cursor: pointer; &::before { position: absolute; - inset-block: -8px; + inset-block: scale-px(-8px); inset-inline: 0; content: ''; } @@ -45,7 +45,7 @@ max-width: 100%; max-height: 100%; background: $range-active-color; - border-radius: 2px; + border-radius: scale-px(2px); &-animate { transition: all 0.2s; @@ -59,7 +59,7 @@ height: $range-button-height; background: $range-button-background; border-radius: 50%; - box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); + box-shadow: 0px scale-px(1px) scale-px(2px) 0px rgba(0, 0, 0, 0.15); border: $range-button-border; outline: none; align-items: center; @@ -98,9 +98,9 @@ &-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; @@ -130,7 +130,7 @@ &-mark { position: absolute; width: 100%; - height: 14px; + height: scale-px(14px); overflow: visible; top: 50%; } @@ -138,15 +138,15 @@ &-mark-text-wrapper { position: absolute; height: 100%; - top: 14px; + top: scale-px(14px); display: inline-block; - transform: translateX(-10px); + transform: translateX(scale-px(-10px)); } &-mark-text { position: absolute; - line-height: 16px; - font-size: 12px; + line-height: scale-px(16px); + font-size: $font-size-s; color: #999; text-align: center; word-break: keep-all; @@ -155,11 +155,11 @@ &-tick { position: absolute; - top: -20px; - width: 11px; - height: 11px; + top: scale-px(-20px); + width: scale-px(11px); + height: scale-px(11px); left: 0px; - border-radius: 6px; + border-radius: scale-px(6px); background: $range-inactive-color; &-active { @@ -171,7 +171,7 @@ .nut-range-vertical-container { height: 100%; flex-direction: column; - padding: 0px 15px; + padding: 0px scale-px(15px); } .nut-range-vertical { @@ -209,31 +209,31 @@ &-mark { position: absolute; - width: 36px; + width: scale-px(36px); height: 100%; top: 0px; right: 50%; overflow: visible; - font-size: 12px; + font-size: $font-size-s; padding: 0px; } &-mark-hm { - left: -34px; + left: scale-px(-34px); } &-mark-text-wrapper { - // width: 20px; - height: 16px; + // width: scale-px(20px); + height: scale-px(16px); position: absolute; display: inline-block; user-select: none; - transform: translateY(-11px); + transform: translateY(scale-px(-11px)); } &-mark-text { height: 100%; - line-height: 16px; + line-height: scale-px(16px); color: #999; text-align: center; word-break: keep-all; @@ -241,11 +241,11 @@ &-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: $range-inactive-color; &-active { @@ -282,7 +282,7 @@ } &-mark-text { - transform: translateX(10px); + transform: translateX(scale-px(10px)); } &-vertical { @@ -316,13 +316,13 @@ &-tick { left: auto; - right: 30px; + right: scale-px(30px); margin-left: 0; - margin-right: -0px; + margin-right: scale-px(-0px); } &-mark-text-wrapper { - transform: translateY(-11px); + transform: translateY(scale-px(-11px)); } } } diff --git a/src/packages/rate/rate.scss b/src/packages/rate/rate.scss index 7737e20d80..3646328b18 100644 --- a/src/packages/rate/rate.scss +++ b/src/packages/rate/rate.scss @@ -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: $rate-font-size; } &-large { - font-size: calc($rate-font-size + 6px); + font-size: calc($rate-font-size + scale-font-px(6px)); + line-height: calc($rate-font-size + scale-font-px(6px)); padding-left: calc($rate-item-margin * 2); } &-small { - font-size: calc($rate-font-size - 2px); + font-size: calc($rate-font-size - scale-font-px(2px)); + line-height: calc($rate-font-size - scale-font-px(2px)); 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)); } } } diff --git a/src/packages/rate/rate.taro.tsx b/src/packages/rate/rate.taro.tsx index e2f30008f5..000c68f296 100644 --- a/src/packages/rate/rate.taro.tsx +++ b/src/packages/rate/rate.taro.tsx @@ -1,13 +1,14 @@ import React, { FunctionComponent, ReactElement, + useCallback, useEffect, + useLayoutEffect, useRef, useState, } from 'react' import classNames from 'classnames' import { StarFill } from '@nutui/icons-react-taro' -import { useReady } from '@tarojs/taro' import { ITouchEvent, Text, View } from '@tarojs/components' import { ComponentDefaults } from '@/utils/typings' import { usePropsValue } from '@/hooks/use-props-value' @@ -131,7 +132,7 @@ export const Rate: FunctionComponent> = (props) => { } } - const updateRects = () => { + const updateRects = useCallback(() => { for (let index = 0; index < refs.length; index++) { const item = refs[index] if (item) { @@ -140,11 +141,11 @@ export const Rate: FunctionComponent> = (props) => { }) } } - } + }, [refs]) - useReady(() => { + useLayoutEffect(() => { updateRects() - }) + }, [updateRects]) const handleTouchStart = (e: any) => { if (!touchable || readOnly || disabled) { diff --git a/src/packages/resultpage/resultpage.scss b/src/packages/resultpage/resultpage.scss index 6842c0b134..5961b50466 100644 --- a/src/packages/resultpage/resultpage.scss +++ b/src/packages/resultpage/resultpage.scss @@ -46,7 +46,7 @@ } } &-action { - margin-left: 6px; - margin-right: 6px; + margin-left: scale-px(6px); + margin-right: scale-px(6px); } } diff --git a/src/packages/searchbar/doc.en-US.md b/src/packages/searchbar/doc.en-US.md index 2894295f25..5b51f30225 100644 --- a/src/packages/searchbar/doc.en-US.md +++ b/src/packages/searchbar/doc.en-US.md @@ -78,7 +78,6 @@ import { SearchBar } from '@nutui/nutui-react' ::: - ### InputProps Extension Attributes `SearchBar`'s `inputProps` property can extend the attributes of the underlying input element, supporting all attributes of the native input element. @@ -99,7 +98,6 @@ import { SearchBar } from '@nutui/nutui-react' ::: - ## SearchBar ### Props diff --git a/src/packages/searchbar/doc.md b/src/packages/searchbar/doc.md index d1ef4c9e74..761879dad0 100644 --- a/src/packages/searchbar/doc.md +++ b/src/packages/searchbar/doc.md @@ -96,8 +96,6 @@ import { SearchBar } from '@nutui/nutui-react' ::: - - ## SearchBar ### Props diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss index cb7fe1286b..41edc2e56f 100644 --- a/src/packages/searchbar/searchbar.scss +++ b/src/packages/searchbar/searchbar.scss @@ -25,7 +25,7 @@ height: $searchbar-input-height; background: $searchbar-content-background; border-radius: $searchbar-content-border-radius; - border: 1px solid $color-primary; + border: scale-px(1px) solid $color-primary; } &-icon { @@ -40,7 +40,7 @@ } &-rightin { - font-size: 15px; + font-size: $font-size-l; font-weight: 500; color: $color-primary; @@ -74,8 +74,8 @@ &.nut-searchbar-icon { position: relative; .nut-icon { - width: 12px; - height: 12px; + width: scale-px(12px); + height: scale-px(12px); color: var(--nutui-black-5); margin-right: $searchbar-inner-gap; } @@ -95,27 +95,27 @@ flex-direction: row; z-index: 2; background-color: #fff; - top: 9px; - left: 6px; - font-size: 12px; - line-height: 12px; + top: scale-px(9px); + left: scale-px(6px); + font-size: $font-size-s; + line-height: scale-px(12px); .nut-searchbar-value { display: flex; flex-direction: row; align-items: center; - padding: 4px 8px; + padding: scale-px(4px) scale-px(8px); background-color: #f7f8fc; - border-radius: 4px; - margin-right: 2px; + border-radius: scale-px(4px); + margin-right: scale-px(2px); } .nut-icon { - width: 6px; - height: 6px; - font-size: 6px; + width: scale-px(6px); + height: scale-px(6px); + font-size: scale-font-px(6px); color: #c2c4cc; - margin-left: 4px; + margin-left: scale-px(4px); } } @@ -130,8 +130,8 @@ align-items: center; &.nut-icon { - width: 20px; - height: 20px; + width: scale-px(20px); + height: scale-px(20px); } } @@ -193,10 +193,10 @@ } &-focus { - padding: 5px $searchbar-gap; + padding: scale-px(5px) $searchbar-gap; .nut-searchbar-content { - border: 0.5px solid #ff5c67; + border: scale-px(0.5px) solid #ff5c67; } } } diff --git a/src/packages/segmented/segmented.scss b/src/packages/segmented/segmented.scss index b5be3bb3a7..ebe65addc1 100644 --- a/src/packages/segmented/segmented.scss +++ b/src/packages/segmented/segmented.scss @@ -6,7 +6,7 @@ display: inline-flex; /* #endif */ height: $segmented-height; - min-width: 24px; + min-width: scale-px(24px); padding: $segmented-padding; align-items: center; border-radius: $segmented-border-radius; @@ -23,7 +23,7 @@ border-radius: $segmented-item-radius; color: $segmented-item-color; font-size: $segmented-item-fontsize; - line-height: 1; + line-height: $segmented-item-fontsize; box-sizing: border-box; } @@ -32,12 +32,14 @@ } .nut-segmented-icon { - height: 10px; - width: 10px; + display: flex; + align-items: center; + height: scale-px(10px); + width: scale-px(10px); margin-right: $segmented-icon-margin-right; .nut-icon { - height: 10px; - width: 10px; - font-size: 10px; + height: scale-px(10px); + width: scale-px(10px); + font-size: $font-size-xxs; } } diff --git a/src/packages/shortpassword/shortpassword.scss b/src/packages/shortpassword/shortpassword.scss index c2cbeb997d..8003ff02d0 100644 --- a/src/packages/shortpassword/shortpassword.scss +++ b/src/packages/shortpassword/shortpassword.scss @@ -2,15 +2,15 @@ .nut-shortpassword { &-popup { - padding: 32px 24px 28px 24px; - border-radius: 12px; + padding: scale-px(32px) scale-px(24px) scale-px(28px) scale-px(24px); + border-radius: scale-px(12px); text-align: center; } &-title { display: flex; justify-content: center; - line-height: 1; + line-height: $font-size-l; font-size: $font-size-l; color: $color-title; } @@ -18,15 +18,15 @@ &-description { display: flex; justify-content: center; - margin-top: 12px; - margin-bottom: 24px; - line-height: 1; + margin-top: scale-px(12px); + margin-bottom: scale-px(24px); + line-height: $font-size-s; font-size: $font-size-s; color: $color-text; } &-input { - padding: 0 0 10px; + padding: 0 0 scale-px(10px); text-align: center; position: relative; overflow: hidden; @@ -34,8 +34,8 @@ &-real { position: absolute; right: 0; - width: 247px; - height: 41px; + width: scale-px(247px); + height: scale-px(41px); outline: 0 none; border: 0; text-decoration: none; @@ -43,20 +43,20 @@ } &-site { - width: 247px; - height: 41px; - border-radius: 4px; + width: scale-px(247px); + height: scale-px(41px); + border-radius: scale-px(4px); } &-fake { top: 5%; width: 100%; - height: 41px; + height: scale-px(41px); margin: 0 auto; box-sizing: border-box; background: $shortpassword-background-color; - border-radius: 4px; - border: 1px solid $shortpassword-border-color; + border-radius: scale-px(4px); + border: scale-px(1px) solid $shortpassword-border-color; display: flex; position: absolute; left: 0; @@ -68,8 +68,8 @@ align-items: center; &-icon { - height: 6px; - width: 6px; + height: scale-px(6px); + width: scale-px(6px); border-radius: 50%; background: #000; display: inline-block; @@ -79,26 +79,26 @@ } &-message { - margin-top: 9px; + margin-top: scale-px(9px); display: flex; justify-content: space-between; - width: 247px; + width: scale-px(247px); &-error { - line-height: 1; + line-height: $font-size-xs; font-size: $font-size-xs; color: $shortpassword-error; } &-forget { - line-height: 1; + line-height: $font-size-s; font-size: $font-size-s; color: $shortpassword-forget; display: flex; align-items: center; .nut-icon { - margin-right: 3px; + margin-right: scale-px(3px); } } } @@ -106,14 +106,14 @@ &-footer { display: flex; justify-content: space-between; - margin-top: 20px; + margin-top: scale-px(20px); &-cancel { background: $white; - border: 1px solid $color-primary; - border-radius: 15px; - padding: 8px 38px; - line-height: 1; + border: scale-px(1px) solid $color-primary; + border-radius: scale-px(15px); + padding: scale-px(8px) scale-px(38px); + line-height: $font-size-base; font-size: $font-size-base; color: $color-primary; } @@ -124,9 +124,9 @@ $color-primary 0%, $color-primary-stop-2 100% ); - border-radius: 15px; - padding: 8px 38px; - line-height: 1; + border-radius: scale-px(15px); + padding: scale-px(8px) scale-px(38px); + line-height: $font-size-base; font-size: $font-size-base; color: $color-primary-text; } diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss index d0d5c6956d..2f0293501a 100644 --- a/src/packages/skeleton/skeleton.scss +++ b/src/packages/skeleton/skeleton.scss @@ -25,7 +25,7 @@ &-small { height: $skeleton-line-small-height; - margin-top: 8px; + margin-top: scale-px(8px); } &-small-0 { margin-top: 0; diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss index df168de948..0877ed6e9c 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -86,17 +86,16 @@ } &-title { - height: 14px; - line-height: 14px; + height: scale-px(14px); + line-height: scale-px(14px); font-size: $steps-base-title-font-size; color: $steps-base-title-color; - overflow: hidden; white-space: nowrap; } &-description { - height: 16px; - line-height: 16px; + height: scale-px(16px); + line-height: scale-px(16px); margin-top: $steps-base-description-margin-top; font-size: $steps-base-description-font-size; color: $steps-base-description-color; diff --git a/src/packages/steps/steps.scss b/src/packages/steps/steps.scss index 993c6a878c..e00e62aa5a 100644 --- a/src/packages/steps/steps.scss +++ b/src/packages/steps/steps.scss @@ -13,8 +13,8 @@ &-icon { .nut-icon { - height: 10px; - width: 10px; + height: scale-icon-px(10px); + width: scale-icon-px(10px); } .nut-image { @@ -74,7 +74,7 @@ &-title, &-description { - padding-left: 4px; + padding-left: scale-px(4px); } &-special { @@ -85,7 +85,7 @@ } .nut-step-title { - padding-right: 8px; + padding-right: scale-px(8px); /* #ifndef dynamic*/ width: fit-content; /* #endif */ @@ -108,6 +108,7 @@ flex-direction: column; align-items: center; flex: 1; + min-width: 0; &-line { top: 0; @@ -130,7 +131,7 @@ &-head { justify-content: center; - margin-bottom: 6px; + margin-bottom: scale-px(5px); &-dot-wrap, &-icon-wrap, @@ -145,15 +146,22 @@ width: $steps-double-head-icon-size; .nut-icon { - height: 12px; - width: 12px; + height: scale-icon-px(12px); + width: scale-icon-px(12px); } } &-main { align-items: center; margin-left: 0; - margin-top: 2px; + } + + &-title { + height: auto; + line-height: scale-px(20px); + white-space: normal; + overflow-wrap: break-word; + text-align: center; } } @@ -202,8 +210,8 @@ } &-line { - height: calc(100% - 4px); - width: 1px; + height: calc(100% - scale-px(4px)); + width: scale-px(1px); bottom: 0; &-inner { @@ -214,15 +222,15 @@ &-head { align-items: center; justify-content: center; - height: 18px; + height: scale-px(20px); &-icon { width: $steps-vertical-head-icon-size; height: $steps-vertical-head-icon-size; .nut-icon { - height: 12px; - width: 12px; + height: scale-icon-px(12px); + width: scale-icon-px(12px); } } } @@ -231,7 +239,7 @@ flex: 1; min-width: 0; height: auto; - margin-left: 8px; + margin-left: scale-px(8px); } &-title { @@ -268,23 +276,23 @@ } &-head-dot-wrap { - height: calc($steps-base-head-dot-size + 8px); + height: calc($steps-base-head-dot-size + scale-px(8px)); } &-head-icon-wrap { - height: calc($steps-vertical-head-icon-size + 8px); + height: calc($steps-vertical-head-icon-size + scale-px(8px)); } &-head-text-wrap { - height: calc($steps-base-head-text-size + 8px); + height: calc($steps-base-head-text-size + scale-px(8px)); } } &-icon { .nut-step { &-head { - width: calc($steps-vertical-head-icon-size + 1px); - min-width: calc($steps-vertical-head-icon-size + 1px); + width: calc($steps-vertical-head-icon-size + scale-px(1px)); + min-width: calc($steps-vertical-head-icon-size + scale-px(1px)); } &-line { @@ -296,7 +304,7 @@ &-dot { .nut-step { &-head { - width: calc($steps-base-head-dot-size + 1px); + width: calc($steps-base-head-dot-size + scale-px(1px)); } &-line { @@ -308,8 +316,8 @@ &-text { .nut-step { &-head { - width: calc($steps-base-head-text-size + 1px); - min-width: calc($steps-base-head-text-size + 1px); + width: calc($steps-base-head-text-size + scale-px(1px)); + min-width: calc($steps-base-head-text-size + scale-px(1px)); } &-line { diff --git a/src/packages/swiper/swiper.scss b/src/packages/swiper/swiper.scss index 67223cacbf..8c9318d3eb 100644 --- a/src/packages/swiper/swiper.scss +++ b/src/packages/swiper/swiper.scss @@ -19,17 +19,17 @@ flex-direction: row; justify-content: center; position: absolute; - height: 4px; + height: scale-px(4px); width: 100%; top: 89.33%; z-index: 10; } &-indicator-vertical { - width: 8px; + width: scale-px(8px); height: 100%; top: 0; - left: 12px; + left: scale-px(12px); flex-direction: column; justify-content: center; z-index: 1; @@ -68,6 +68,6 @@ &-indicator-vertical { left: auto; - right: 12px; + right: scale-px(12px); } } diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss index 089f6688ca..be66d0cfad 100644 --- a/src/packages/switch/switch.scss +++ b/src/packages/switch/switch.scss @@ -56,9 +56,9 @@ background-color: $switch-inactive-background-color; &-line { width: calc(($switch-height - $switch-border-width * 2) / 2); - height: 2px; + height: scale-px(2px); background: $switch-inactive-line-background-color; - border-radius: 2px; + border-radius: scale-px(2px); } } @@ -78,16 +78,20 @@ color: $switch-label-text-color; } &-open { - margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px; + margin: 0 calc($switch-height - $switch-border-width + scale-px(3px)) 0 + scale-px(7px); &-rtl { - margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px); + margin: 0 scale-px(7px) 0 + calc($switch-height - $switch-border-width + scale-px(3px)); } } &-close { - margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px); + margin: 0 scale-px(7px) 0 + calc($switch-height - $switch-border-width + scale-px(3px)); &-rtl { - margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px; + margin: 0 calc($switch-height - $switch-border-width + scale-px(3px)) 0 + scale-px(7px); } } diff --git a/src/packages/tabbar/tabbar.scss b/src/packages/tabbar/tabbar.scss index aed7942448..ace561058c 100644 --- a/src/packages/tabbar/tabbar.scss +++ b/src/packages/tabbar/tabbar.scss @@ -13,11 +13,11 @@ display: flex; &-3 { - padding: 0 16px; + padding: 0 scale-px(16px); } &-2 { - padding: 0 32px; + padding: 0 scale-px(32px); } &-horizontal { @@ -26,12 +26,12 @@ flex-direction: row; justify-content: center; .nut-icon { - width: 20px; - height: 20px; + width: scale-px(20px); + height: scale-px(20px); } .nut-tabbar-item-text { - margin: 0 4px 0 6px; - font-size: 14px; + margin: 0 scale-px(4px) 0 scale-px(6px); + font-size: $font-size-base; } .nut-badge-sup { &::after { diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss index 74a2c6028d..fc20e64d0e 100644 --- a/src/packages/tabbaritem/tabbaritem.scss +++ b/src/packages/tabbaritem/tabbaritem.scss @@ -5,14 +5,14 @@ flex-direction: column; align-items: center; flex: 1; - padding: 6px 0 2px; + padding: scale-px(6px) 0 scale-px(2px); color: $tabbar-inactive-color; height: 100%; .nut-icon { - width: 24px; - height: 24px; - font-size: 24px; + width: scale-px(24px); + height: scale-px(24px); + font-size: $font-size-xxl; /* #ifdef harmony dynamic*/ color: $tabbar-inactive-color; /* #endif*/ @@ -31,9 +31,9 @@ .nut-image { &-default { - width: 38px; - height: 38px; - border-radius: 38px; + width: scale-px(38px); + height: scale-px(38px); + border-radius: scale-px(38px); } } diff --git a/src/packages/table/table.scss b/src/packages/table/table.scss index 5391b1a82a..4d2cd82e81 100644 --- a/src/packages/table/table.scss +++ b/src/packages/table/table.scss @@ -12,7 +12,7 @@ overflow-y: auto; overflow-x: hidden; position: relative; - border: 1px solid $table-border-color; + border: scale-px(1px) solid $table-border-color; &-sticky { overflow-x: auto; @@ -101,15 +101,15 @@ &-nodata { display: flex; - height: 50px; + height: scale-px(50px); align-items: center; justify-content: center; } } &-border { - border-right: 1px solid $table-border-color; - border-bottom: 1px solid $table-border-color; + border-right: scale-px(1px) solid $table-border-color; + border-bottom: scale-px(1px) solid $table-border-color; } &-alignleft, @@ -144,8 +144,8 @@ &-sticky-right { position: absolute; top: 0px; - width: 8px; - bottom: -1px; + width: scale-px(8px); + bottom: scale-px(-1px); overflow-x: hidden; overflow-y: hidden; box-shadow: none; @@ -156,12 +156,12 @@ } &-sticky-left { - left: 1px; + left: scale-px(1px); box-shadow: $table-sticky-left-shadow; } &-sticky-right { - right: 1px; + right: scale-px(1px); box-shadow: $table-sticky-right-shadow; } @@ -186,7 +186,7 @@ display: flex; align-items: center; justify-content: center; - height: 30px; + height: scale-px(30px); padding: $table-cols-padding; position: relative; z-index: 5; @@ -215,7 +215,7 @@ &-border { border-right: none; - border-left: 1px solid $table-border-color; + border-left: scale-px(1px) solid $table-border-color; } &-alignleft, @@ -232,13 +232,13 @@ &-sticky-left { left: auto; - right: 1px; + right: scale-px(1px); box-shadow: $table-sticky-right-shadow; } &-sticky-right { right: auto; - left: 1px; + left: scale-px(1px); box-shadow: $table-sticky-left-shadow; } &-fixed-left-last { diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss index 82ca0a560b..6fe817bc63 100644 --- a/src/packages/tabs/tabs.scss +++ b/src/packages/tabs/tabs.scss @@ -34,14 +34,14 @@ &-left { justify-content: flex-start; .nut-tabs-titles-item { - padding: 0 22px; + padding: 0 scale-px(22px); } } &-right { justify-content: flex-end; .nut-tabs-titles-item { - padding: 0 22px; + padding: 0 scale-px(22px); } } @@ -93,7 +93,7 @@ .nut-icon { position: absolute; - font-size: 20px; + font-size: scale-font-px(20px); width: 100%; height: 100%; } @@ -123,8 +123,8 @@ /* #ifndef dynamic*/ overflow: unset; /* #endif */ - width: 40px; - height: 20px; + width: scale-px(40px); + height: scale-px(20px); .nut-icon { color: $tabs-titles-item-active-color; @@ -167,14 +167,14 @@ &-button { .nut-tabs-titles-item { - padding: 0 10px; + padding: 0 scale-px(10px); .nut-tabs-titles-item-text { flex: 1; - height: 28px; + height: scale-px(28px); display: flex; align-items: center; justify-content: center; - padding: 0 8px; + padding: 0 scale-px(8px); } } .nut-tabs-titles-item-active { @@ -190,7 +190,7 @@ } &-divider { - border-bottom: 1px solid $color-border; + border-bottom: scale-px(1px) solid $color-border; .nut-tabs-titles-item { position: relative; @@ -201,7 +201,7 @@ right: 0; top: 50%; height: 50%; - width: 1px; + width: scale-px(1px); background: $color-border; transform: translateY(-50%); } @@ -219,12 +219,12 @@ .nut-tabs-ellipsis { white-space: break-spaces; /* #ifdef harmony dynamic*/ - padding-left: 12px; + padding-left: scale-px(12px); /* #endif */ /* #ifndef harmony dynamic*/ - padding-left: 6px; + padding-left: scale-px(6px); /* #endif */ - width: 90px; + width: scale-px(90px); line-height: $font-size-base; } @@ -260,14 +260,14 @@ &-active { background-color: $tabs-titles-item-active-background-color; .nut-tabs-titles-item-line { - left: 10px; + left: scale-px(10px); width: $tabs-vertical-tab-line-width; height: $tabs-vertical-tab-line-height; background: $tabs-vertical-tab-line-color; } .nut-tabs-titles-item-smile { - right: -12px; + right: scale-px(-12px); bottom: -2%; left: auto; transform: rotate(320deg); @@ -306,7 +306,7 @@ .nut-tabs-titles-item-smile { left: 50%; right: auto; - bottom: -3px; + bottom: scale-px(-3px); transform: translate(-50%, 0) rotate(0deg); } } @@ -361,7 +361,7 @@ &-line { .nut-tabs-titles-item { padding-left: 0; - padding-right: 14px; + padding-right: scale-px(14px); } } } @@ -370,11 +370,11 @@ &-active { .nut-tabs-titles-item-line { left: auto; - right: 10px; + right: scale-px(10px); } .nut-tabs-titles-item-smile { - left: -12px; + left: scale-px(-12px); right: auto; transform: rotate(-320deg); } diff --git a/src/packages/tag/tag.scss b/src/packages/tag/tag.scss index 27c324b79d..7d1494c819 100644 --- a/src/packages/tag/tag.scss +++ b/src/packages/tag/tag.scss @@ -12,7 +12,7 @@ .nut-icon { vertical-align: middle; - margin-left: 4px; + margin-left: scale-px(4px); color: $tag-color; } @@ -72,19 +72,24 @@ justify-content: center; font-size: $tag-font-size; color: $tag-color; - margin-left: 4px; + margin-left: scale-px(4px); } &-plain { background-color: #fff; border: $tag-border-width solid $color-title; } + + &-close-icon { + width: scale-icon-px(8px); + height: scale-icon-px(8px); + } } [dir='rtl'] .nut-tag, .nut-rtl .nut-tag { .nut-icon { margin-left: 0; - margin-right: 4px; + margin-right: scale-px(4px); } } diff --git a/src/packages/tag/tag.taro.tsx b/src/packages/tag/tag.taro.tsx index 61de7454b6..308b322e57 100644 --- a/src/packages/tag/tag.taro.tsx +++ b/src/packages/tag/tag.taro.tsx @@ -105,7 +105,7 @@ export const Tag: FunctionComponent> = (props) => { ) : ( { setVisible(false) onClose && onClose(e as any) diff --git a/src/packages/tag/tag.tsx b/src/packages/tag/tag.tsx index f4798fe18d..d86292335d 100644 --- a/src/packages/tag/tag.tsx +++ b/src/packages/tag/tag.tsx @@ -104,8 +104,7 @@ export const Tag: FunctionComponent> = (props) => { ) : ( { setVisible(false) onClose && onClose(e) diff --git a/src/packages/textarea/textarea.scss b/src/packages/textarea/textarea.scss index ed09b1816a..b8a7866dbb 100644 --- a/src/packages/textarea/textarea.scss +++ b/src/packages/textarea/textarea.scss @@ -13,7 +13,7 @@ } &-error { - border: 0.5px solid $color-danger; + border: scale-px(0.5px) solid $color-danger; background-color: $color-danger-light; } @@ -34,7 +34,7 @@ display: block; box-sizing: border-box; width: 100%; - height: 40px; + height: scale-px(40px); min-width: 0; margin: 0; padding: 0; @@ -49,10 +49,10 @@ // &::after{ // content: ''; // position: absolute; - // width: 2px; - // height: 14px; + // width: scale-px(2px); + // height: scale-px(14px); // background-color: red; - // // left: 10px; + // // left: scale-px(10px); // // top: 50%; // transform: translateY(-50%); // z-index: 1; @@ -87,7 +87,7 @@ &.nut-textarea-rtl { &-limit { right: auto; - left: 15px; + left: scale-px(15px); } } } diff --git a/src/packages/timedetail/timedetail.scss b/src/packages/timedetail/timedetail.scss index 71df61245b..fe7c71715b 100644 --- a/src/packages/timedetail/timedetail.scss +++ b/src/packages/timedetail/timedetail.scss @@ -4,7 +4,7 @@ flex: 1; min-width: 0; flex-wrap: wrap; - padding: 0 0 50px 12px; + padding: 0 0 scale-px(50px) scale-px(12px); &-item { width: $timeselect-time-width; @@ -13,13 +13,13 @@ text-align: center; margin: $timeselect-time-margin; background: $timeselect-time-background; - border-radius: 5px; + border-radius: scale-px(5px); font-size: $font-size-base; - border: 1px solid transparent; + border: scale-px(1px) solid transparent; &.active { background-color: $color-primary-light-pressed; - border: 1px solid $color-primary; + border: scale-px(1px) solid $color-primary; color: $color-primary; font-weight: $font-weight-bold; } @@ -28,5 +28,5 @@ [dir='rtl'] .nut-timedetail, .nut-rtl .nut-timedetail { - padding: 0 12px 50px 0; + padding: 0 scale-px(12px) scale-px(50px) 0; } diff --git a/src/packages/timeselect/timeselect.scss b/src/packages/timeselect/timeselect.scss index c9b761f350..fa8552ff76 100644 --- a/src/packages/timeselect/timeselect.scss +++ b/src/packages/timeselect/timeselect.scss @@ -5,7 +5,7 @@ background-color: $color-background-overlay; display: flex; flex-direction: column; - height: calc(100% - 50px); + height: calc(100% - scale-px(50px)); &-content { display: flex; @@ -13,7 +13,7 @@ } &-content-left { - width: $timeselect-date-width; + // width: $timeselect-date-width; min-width: $timeselect-date-width; height: 100%; /* #ifndef dynamic*/ @@ -24,7 +24,7 @@ } .nut-timepannel { - padding: 0 16px; + padding: 0 scale-px(16px); height: $timeselect-date-height; line-height: $timeselect-date-height; text-align: start; diff --git a/src/packages/toast/toast.scss b/src/packages/toast/toast.scss index 05e9364d10..fd60fff802 100644 --- a/src/packages/toast/toast.scss +++ b/src/packages/toast/toast.scss @@ -44,9 +44,9 @@ flex-direction: column; justify-content: center; align-items: center; - min-width: 96px; + min-width: scale-px(96px); max-width: 60%; - // max-width: 224px; + // max-width: scale-px(224px); box-sizing: border-box; font-size: $toast-text-font-size; text-align: $toast-inner-text-align; @@ -58,7 +58,7 @@ &-descrption { max-width: 68.2%; - // max-width: 256px; + // max-width: scale-px(256px); } &-normal { @@ -95,7 +95,7 @@ &-text { color: #ffffff; text-align: $toast-inner-text-align; - line-height: 20px; + line-height: scale-px(20px); /* #ifdef harmony dynamic*/ line-height: normal; /* #endif */ @@ -107,15 +107,15 @@ font-size: $toast-title-font-size; font-weight: 600; text-align: $toast-inner-text-align; - line-height: 22px; + line-height: scale-px(22px); /* #ifdef harmony dynamic*/ line-height: normal; /* #endif */ } .nut-icon { - width: 24px; - height: 24px; + width: scale-px(24px); + height: scale-px(24px); color: #ffffff; } @@ -124,12 +124,12 @@ display: flex; align-items: center; justify-content: center; - margin: 3px 0 5px; + margin: scale-px(3px) 0 scale-px(5px); color: #ffffff; &-icon { - width: 24px; - height: 24px; + width: scale-px(24px); + height: scale-px(24px); } } diff --git a/src/packages/tour/tour.scss b/src/packages/tour/tour.scss index d04045f95d..1566e018c1 100644 --- a/src/packages/tour/tour.scss +++ b/src/packages/tour/tour.scss @@ -29,8 +29,8 @@ text-align: end; &-close { - --nut-icon-width: 10px; - --nut-icon-height: 10px; + width: scale-px(10px); + height: scale-px(10px); } } @@ -51,7 +51,7 @@ &-btn { display: inline-block; - border: 1px solid $color-text-disabled; + border: scale-px(1px) solid $color-text-disabled; margin-left: $tour-content-bottom-btn-margin-left; padding: $tour-content-bottom-btn-padding; font-size: $tour-content-bottom-btn-font-size; diff --git a/src/packages/uploader/uploader.scss b/src/packages/uploader/uploader.scss index 259dbc7cec..372e69fb98 100644 --- a/src/packages/uploader/uploader.scss +++ b/src/packages/uploader/uploader.scss @@ -73,7 +73,7 @@ margin-right: $uploader-preview-margin-right; margin-bottom: $uploader-preview-margin-bottom; border-radius: $uploader-image-border-radius; - box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%); + box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 10%); &-progress { position: absolute; @@ -95,7 +95,7 @@ &-msg { color: $color-text-help; - font-size: 12px; + font-size: $font-size-s; } } @@ -103,26 +103,26 @@ width: 100%; margin-right: 0px; margin-bottom: 0px; - margin-top: 10px; - box-shadow: 0 2px 10px 0 rgb(0 0 0 / 1%); + margin-top: scale-px(10px); + box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 1%); } &-list { width: 100%; - height: 32px; + height: scale-px(32px); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; - padding: 0 10px; + padding: 0 scale-px(10px); background-color: $color-background-sunken; .nut-uploader-preview-img-file-name { display: flex; align-items: center; -webkit-line-clamp: 1; - padding: 2px; - height: 24px; + padding: scale-px(2px); + height: scale-px(24px); @include text-ellipsis(); } @@ -133,7 +133,7 @@ bottom: 0; .nut-progress-outer { - height: 2px !important; + height: scale-px(2px) !important; } } } @@ -161,7 +161,7 @@ position: absolute; bottom: 0; left: 0; - font-size: 12px; + font-size: $font-size-s; color: $white; text-align: center; box-sizing: border-box; @@ -197,7 +197,7 @@ &-name { display: flex; width: 90%; - font-size: 12px; + font-size: $font-size-s; color: $color-text; @include moreline-ellipsis(); diff --git a/src/packages/virtuallist/virtuallist.scss b/src/packages/virtuallist/virtuallist.scss index 71605201dd..818dfc7c55 100644 --- a/src/packages/virtuallist/virtuallist.scss +++ b/src/packages/virtuallist/virtuallist.scss @@ -6,8 +6,8 @@ float: left; color: $color-title; background: $color-background-overlay; - padding: 10px; - margin-right: 20px; + padding: scale-px(10px); + margin-right: scale-px(20px); } &:after { @@ -23,12 +23,12 @@ display: block; color: $color-title; background: $color-background-overlay; - border-radius: 7px; - box-shadow: 0 1px 6px 0 rgba(237, 238, 241, 1); - margin-top: 20px; - padding: 14px 15px; - font-size: 13px; - line-height: 18px; + border-radius: scale-px(7px); + box-shadow: 0 scale-px(1px) scale-px(6px) 0 rgba(237, 238, 241, 1); + margin-top: scale-px(20px); + padding: scale-px(14px) scale-px(15px); + font-size: scale-font-px(13px); + line-height: scale-px(18px); font-family: PingFangSC; font-weight: 500; } @@ -74,6 +74,6 @@ li { float: right; margin-right: 0; - margin-left: 20px; + margin-left: scale-px(20px); } } diff --git a/src/sites/assets/styles/highlight.scss b/src/sites/assets/styles/highlight.scss index e558825a1b..11df75e2fd 100644 --- a/src/sites/assets/styles/highlight.scss +++ b/src/sites/assets/styles/highlight.scss @@ -5,7 +5,7 @@ code { overflow-x: auto; color: $nutui-doc-code-color; font-weight: 400; - font-size: 13px; + font-size: scale-font-px(13px); font-family: $nutui-doc-code-font-family; line-height: 1.8; white-space: pre-wrap; diff --git a/src/sites/mobile/main.tsx b/src/sites/mobile/main.tsx index 148d98c441..f83d6b6859 100644 --- a/src/sites/mobile/main.tsx +++ b/src/sites/mobile/main.tsx @@ -3,6 +3,7 @@ import * as ReactDOM from 'react-dom/client' import App from './App' import '@nutui/touch-emulator' // 适配 h5 示例桌面端预览 import { isMobile } from '@/sites/assets/util' +import { initScaleF } from '@/utils/scale-f' import('../../packages/nutui.react.scss') const projectID = import.meta.env.VITE_APP_PROJECT_ID || '' @@ -28,6 +29,7 @@ if (!isMobile && pathname.includes('demo') && !pathname.includes('jmapp')) { } if (rootElement != null) { + initScaleF('elderly') const root = ReactDOM.createRoot(rootElement) root.render() } diff --git a/src/styles/theme-dark.scss b/src/styles/theme-dark.scss index ad8ff1248f..fa1191768d 100644 --- a/src/styles/theme-dark.scss +++ b/src/styles/theme-dark.scss @@ -228,25 +228,59 @@ page { --nutui-color-border-disabled: var(--nutui-color-content-gray-1); // 字体 ok - --nutui-font-size-8: 8px; - --nutui-font-size-9: 9px; - --nutui-font-size-10: 10px; - --nutui-font-size-11: 11px; - --nutui-font-size-12: 12px; - --nutui-font-size-13: 13px; - --nutui-font-size-14: 14px; - --nutui-font-size-15: 15px; - --nutui-font-size-16: 16px; - --nutui-font-size-17: 17px; - --nutui-font-size-18: 18px; - --nutui-font-size-19: 19px; - --nutui-font-size-20: 20px; - --nutui-font-size-21: 21px; - --nutui-font-size-22: 22px; - --nutui-font-size-23: 23px; - --nutui-font-size-24: 24px; - --nutui-font-size-25: 25px; - --nutui-font-size-26: 26px; + --nutui-font-size-8: calc(8px * var(--nut-scale-font, var(--nut-scale-f, 1))); + --nutui-font-size-9: calc(9px * var(--nut-scale-font, var(--nut-scale-f, 1))); + --nutui-font-size-10: calc( + 10px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-11: calc( + 11px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-12: calc( + 12px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-13: calc( + 13px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-14: calc( + 14px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-15: calc( + 15px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-16: calc( + 16px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-17: calc( + 17px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-18: calc( + 18px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-19: calc( + 19px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-20: calc( + 20px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-21: calc( + 21px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-22: calc( + 22px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-23: calc( + 23px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-24: calc( + 24px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-25: calc( + 25px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-26: calc( + 26px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); // 字号语义化 // 徽标文字 diff --git a/src/styles/theme-default.scss b/src/styles/theme-default.scss index aa5d69a673..831650b859 100644 --- a/src/styles/theme-default.scss +++ b/src/styles/theme-default.scss @@ -227,25 +227,59 @@ page { --nutui-color-border-disabled: var(--nutui-color-content-gray-1); // 字体 ok - --nutui-font-size-8: 8px; - --nutui-font-size-9: 9px; - --nutui-font-size-10: 10px; - --nutui-font-size-11: 11px; - --nutui-font-size-12: 12px; - --nutui-font-size-13: 13px; - --nutui-font-size-14: 14px; - --nutui-font-size-15: 15px; - --nutui-font-size-16: 16px; - --nutui-font-size-17: 17px; - --nutui-font-size-18: 18px; - --nutui-font-size-19: 19px; - --nutui-font-size-20: 20px; - --nutui-font-size-21: 21px; - --nutui-font-size-22: 22px; - --nutui-font-size-23: 23px; - --nutui-font-size-24: 24px; - --nutui-font-size-25: 25px; - --nutui-font-size-26: 26px; + --nutui-font-size-8: calc(8px * var(--nut-scale-font, var(--nut-scale-f, 1))); + --nutui-font-size-9: calc(9px * var(--nut-scale-font, var(--nut-scale-f, 1))); + --nutui-font-size-10: calc( + 10px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-11: calc( + 11px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-12: calc( + 12px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-13: calc( + 13px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-14: calc( + 14px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-15: calc( + 15px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-16: calc( + 16px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-17: calc( + 17px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-18: calc( + 18px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-19: calc( + 19px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-20: calc( + 20px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-21: calc( + 21px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-22: calc( + 22px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-23: calc( + 23px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-24: calc( + 24px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-25: calc( + 25px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); + --nutui-font-size-26: calc( + 26px * var(--nut-scale-font, var(--nut-scale-f, 1)) + ); // 字号语义化 // 徽标文字 diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 3bb38d962b..d6d42b6aa9 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,4 +1,29 @@ // ---------------------------------------------------- +// 缩放系数 +:root { + --nut-scale-f: 1; + --nut-scale-font: var(--nut-scale-f, 1); + --nut-scale-icon: var(--nut-scale-f, 1); + // ---- icon size ---- + --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; +} +@function scale-px($size) { + @return calc(#{$size} * var(--nut-scale-f, 1)); +} +@function scale-font-px($size) { + @return calc(#{$size} * var(--nut-scale-font, var(--nut-scale-f, 1))); +} +@function scale-icon-px($size) { + @return calc(#{$size} * var(--nut-scale-icon, var(--nut-scale-f, 1))); +} // 主色调 // done $color-primary: var(--nutui-color-primary, #ff0f23) !default; $color-primary-stop-1: var(--nutui-color-primary-stop-1, #ff475d) !default; @@ -147,17 +172,17 @@ $font-family: sans-serif !default; // Font -$font-size-xxxs: var(--nutui-font-size-xxxs, 9px) !default; -$font-size-xxs: var(--nutui-font-size-xxs, 10px) !default; -$font-size-xs: var(--nutui-font-size-xs, 11px) !default; -$font-size-s: var(--nutui-font-size-s, 12px) !default; -$font-size-base: var(--nutui-font-size-base, 14px) !default; -$font-size-l: var(--nutui-font-size-l, 15px) !default; -$font-size-icon: var(--nutui-font-size-icon, 16px) !default; -$font-size-xl: var(--nutui-font-size-xl, 18px) !default; -$font-size-xxl: var(--nutui-font-size-xxl, 24px) !default; -$font-size-xxxl: var(--nutui-font-size-10, 26px) !default; -$font-size-xxxxl: var(--nutui-font-size-11, 28px) !default; +$font-size-xxxs: var(--nutui-font-size-xxxs, scale-font-px(9px)) !default; +$font-size-xxs: var(--nutui-font-size-xxs, scale-font-px(10px)) !default; +$font-size-xs: var(--nutui-font-size-xs, scale-font-px(11px)) !default; +$font-size-s: var(--nutui-font-size-s, scale-font-px(12px)) !default; +$font-size-base: var(--nutui-font-size-base, scale-font-px(14px)) !default; +$font-size-l: var(--nutui-font-size-l, scale-font-px(15px)) !default; +$font-size-icon: var(--nutui-font-size-icon, scale-icon-px(16px)) !default; +$font-size-xl: var(--nutui-font-size-xl, scale-font-px(18px)) !default; +$font-size-xxl: var(--nutui-font-size-xxl, scale-font-px(24px)) !default; +$font-size-xxxl: var(--nutui-font-size-10, scale-font-px(26px)) !default; +$font-size-xxxxl: var(--nutui-font-size-11, scale-font-px(28px)) !default; // 字重 ok $font-weight-light: var(--nutui-font-weight-light, 300) !default; @@ -169,33 +194,42 @@ $font-weight-bold: var(--nutui-font-weight-bold, 600) !default; $line-height-base: var(--nutui-line-height-base, 1.5) !default; // 间距 space -$spacing-xxxs: var(--nutui-spacing-xxxs, 2px) !default; -$spacing-xxs: var(--nutui-spacing-xxs, 4px) !default; -$spacing-xs: var(--nutui-spacing-xs, 6px) !default; -$spacing-s: var(--nutui-spacing-s, 7px) !default; -$spacing-base: var(--nutui-spacing-base, 8px) !default; -$spacing-l: var(--nutui-spacing-l, 9px) !default; -$spacing-xl: var(--nutui-spacing-xl, 12px) !default; -$spacing-xxl: var(--nutui-spacing-xxl, 16px) !default; -$spacing-xxxl: var(--nutui-spacing-xxxl, 18px) !default; +$spacing-xxxs: var(--nutui-spacing-xxxs, scale-px(2px)) !default; +$spacing-xxs: var(--nutui-spacing-xxs, scale-px(4px)) !default; +$spacing-xs: var(--nutui-spacing-xs, scale-px(6px)) !default; +$spacing-s: var(--nutui-spacing-s, scale-px(7px)) !default; +$spacing-base: var(--nutui-spacing-base, scale-px(8px)) !default; +$spacing-l: var(--nutui-spacing-l, scale-px(9px)) !default; +$spacing-xl: var(--nutui-spacing-xl, scale-px(12px)) !default; +$spacing-xxl: var(--nutui-spacing-xxl, scale-px(16px)) !default; +$spacing-xxxl: var(--nutui-spacing-xxxl, scale-px(18px)) !default; // 圆角 corners ok $radius-xxxs: var( --nutui-radius-xxxs, 0 ) !default; // 内容描述型的详情页面通栏结构 -$radius-xxs: var(--nutui-radius-xxs, 2px) !default; // 标签 -$radius-xs: var(--nutui-radius-xs, 4px) !default; // 单行高度20、24、28的组件 -$radius-s: var(--nutui-radius-s, 6px) !default; // 单行高度32、36的组件 -$radius-base: var(--nutui-radius-base, 8px) !default; // 单行高度40及以上的组件 -$radius-l: var(--nutui-radius-l, 8px) !default; // 入口型非通栏卡片 +$radius-xxs: var(--nutui-radius-xxs, scale-px(2px)) !default; // 标签 +$radius-xs: var( + --nutui-radius-xs, + scale-px(4px) +) !default; // 单行高度20、24、28的组件 +$radius-s: var( + --nutui-radius-s, + scale-px(6px) +) !default; // 单行高度32、36的组件 +$radius-base: var( + --nutui-radius-base, + scale-px(8px) +) !default; // 单行高度40及以上的组件 +$radius-l: var(--nutui-radius-l, scale-px(8px)) !default; // 入口型非通栏卡片 $radius-xl: var( --nutui-radius-xl, - 12px + scale-px(12px) ) !default; // 结构分割、通栏卡片、临时操作层组件等场景 -$radius-xxl: var(--nutui-radius-xxl, 14px) !default; // 暂无 -$radius-xxxl: var(--nutui-radius-xxxl, 16px) !default; // 暂无 -$radius-circle: 50px !default; // 按钮、徽标等组件的胶囊形态圆角样式 +$radius-xxl: var(--nutui-radius-xxl, scale-px(14px)) !default; // 暂无 +$radius-xxxl: var(--nutui-radius-xxxl, scale-px(16px)) !default; // 暂无 +$radius-circle: scale-px(50px) !default; // 按钮、徽标等组件的胶囊形态圆角样式 $radius-full: 50% !default; // 头像、图片等不限制尺寸规格，需要以圆形呈现 // 阴影 shadows @@ -218,9 +252,18 @@ $button-square-border-radius: var( 0 ) !default; $button-border-radius: var(--nutui-button-border-radius, $radius-s) !default; -$button-border-width: var(--nutui-button-border-width, 0.5px) !default; -$button-normal-padding: var(--nutui-button-normal-padding, 0px 12px) !default; -$button-default-height: var(--nutui-button-default-height, 32px) !default; +$button-border-width: var( + --nutui-button-border-width, + scale-px(0.5px) +) !default; +$button-normal-padding: var( + --nutui-button-normal-padding, + 0px scale-px(12px) +) !default; +$button-default-height: var( + --nutui-button-default-height, + scale-px(32px) +) !default; $button-default-color: var(--nutui-button-default-color, $color-title) !default; $button-default-background-color: var( --nutui-button-default-background-color, @@ -238,29 +281,41 @@ $button-default-disabled-color: var( --nutui-button-default-disabled-color, $color-text-help ) !default; -$button-default-padding: var(--nutui-button-default-padding, 0px 12px) !default; +$button-default-padding: var( + --nutui-button-default-padding, + 0px scale-px(12px) +) !default; $button-default-font-size: var( --nutui-button-default-font-size, $font-size-base ) !default; -$button-xlarge-height: var(--nutui-button-xlarge-height, 48px) !default; -$button-xlarge-padding: var(--nutui-button-xlarge-padding, 0px 24px) !default; +$button-xlarge-height: var( + --nutui-button-xlarge-height, + scale-px(48px) +) !default; +$button-xlarge-padding: var( + --nutui-button-xlarge-padding, + 0px scale-px(24px) +) !default; $button-xlarge-font-size: var( --nutui-button-xlarge-font-size, $font-size-xl ) !default; $button-xlarge-text-icon-margin: var( --nutui-button-xlarge-text-icon-margin, - 6px + scale-px(6px) ) !default; $button-xlarge-border-radius: var( --nutui-button-xlarge-border-radius, $radius-base ) !default; -$button-large-height: var(--nutui-button-large-height, 40px) !default; -$button-large-padding: var(--nutui-button-large-padding, 0px 16px) !default; +$button-large-height: var(--nutui-button-large-height, scale-px(40px)) !default; +$button-large-padding: var( + --nutui-button-large-padding, + 0px scale-px(16px) +) !default; $button-large-font-size: var( --nutui-button-large-font-size, $font-size-l @@ -274,15 +329,21 @@ $button-small-font-size: var( --nutui-button-small-font-size, $font-size-s ) !default; -$button-small-padding: var(--nutui-button-small-padding, 0px 8px) !default; -$button-small-height: var(--nutui-button-small-height, 28px) !default; +$button-small-padding: var( + --nutui-button-small-padding, + 0px scale-px(8px) +) !default; +$button-small-height: var(--nutui-button-small-height, scale-px(28px)) !default; $button-small-border-radius: var( --nutui-button-small-border-radius, $radius-s ) !default; -$button-mini-padding: var(--nutui-button-mini-padding, 0px 8px) !default; -$button-mini-height: var(--nutui-button-mini-height, 24px) !default; +$button-mini-padding: var( + --nutui-button-mini-padding, + 0px scale-px(8px) +) !default; +$button-mini-height: var(--nutui-button-mini-height, scale-px(24px)) !default; $button-mini-font-size: var( --nutui-button-mini-font-size, $font-size-xs @@ -379,7 +440,10 @@ $button-danger-disabled: var( $color-danger-disabled ) !default; -$button-text-icon-margin: var(--nutui-button-text-icon-margin, 4px) !default; +$button-text-icon-margin: var( + --nutui-button-text-icon-margin, + scale-px(4px) +) !default; // cell（✅） $cell-title-color: var(--nutui-cell-title-color, $color-title) !default; @@ -400,14 +464,17 @@ $cell-extra-font-size: var( $font-size-base ) !default; $cell-extra-color: var(--nutui-cell-extra-color, $color-text) !default; -$cell-border-radius: var(--nutui-cell-border-radius, 6px) !default; -$cell-padding: var(--nutui-cell-padding, 13px 16px) !default; -$cell-line-height: var(--nutui-cell-line-height, 20px) !default; -$cell-divider-right: var(--nutui-cell-divider-right, 16px) !default; -$cell-divider-left: var(--nutui-cell-divider-left, 16px) !default; +$cell-border-radius: var(--nutui-cell-border-radius, scale-px(6px)) !default; +$cell-padding: var( + --nutui-cell-padding, + scale-px(13px) scale-px(16px) +) !default; +$cell-line-height: var(--nutui-cell-line-height, scale-px(20px)) !default; +$cell-divider-right: var(--nutui-cell-divider-right, scale-px(16px)) !default; +$cell-divider-left: var(--nutui-cell-divider-left, scale-px(16px)) !default; $cell-divider-border-bottom: var( --nutui-cell-divider-border-bottom, - 1px solid $color-border + scale-px(1px) solid $color-border ) !default; $cell-background-color: var( --nutui-cell-background-color, @@ -415,13 +482,13 @@ $cell-background-color: var( ) !default; $cell-box-shadow: var( --nutui-cell-box-shadow, - 0px 1px 7px 0px rgba(237, 238, 241, 1) + 0px scale-px(1px) scale-px(7px) 0px rgba(237, 238, 241, 1) ) !default; // cell-group（✅） $cell-group-title-padding: var( --nutui-cell-group-title-padding, - 0 10px + 0 scale-px(10px) ) !default; $cell-group-title-color: var( --nutui-cell-group-title-color, @@ -433,11 +500,11 @@ $cell-group-title-font-size: var( ) !default; $cell-group-title-line-height: var( --nutui-cell-group-title-line-height, - 20px + scale-px(20px) ) !default; $cell-group-description-padding: var( --nutui-cell-group-description-padding, - 0 10px + 0 scale-px(10px) ) !default; $cell-group-description-color: var( --nutui-cell-group-description-color, @@ -449,16 +516,19 @@ $cell-group-description-font-size: var( ) !default; $cell-group-description-line-height: var( --nutui-cell-group-description-line-height, - 16px + scale-px(16px) ) !default; $cell-group-background-color: var( --nutui-cell-group-background-color, $color-background-overlay ) !default; -$cell-group-wrap-margin: var(--nutui-cell-group-wrap-margin, 10px) !default; +$cell-group-wrap-margin: var( + --nutui-cell-group-wrap-margin, + scale-px(10px) +) !default; // divider（✅） -$divider-margin: var(--nutui-divider-margin, 16px 0) !default; +$divider-margin: var(--nutui-divider-margin, scale-px(16px) 0) !default; $divider-text-font-size: var( --nutui-divider-text-font-size, $font-size-base @@ -468,25 +538,37 @@ $divider-border-color: var( $color-border ) !default; $divider-text-color: var(--nutui-divider-text-color, $color-text) !default; -$divider-line-height: var(--nutui-divider-line-height, 1px) !default; -$divider-spacing: var(--nutui-divider-spacing, 8px) !default; +$divider-line-height: var(--nutui-divider-line-height, scale-px(1px)) !default; +$divider-spacing: var(--nutui-divider-spacing, scale-px(8px)) !default; $divider-side-width: var(--nutui-divider-side-width, 10%) !default; -$divider-vertical-height: var(--nutui-divider-vertical-height, 12px) !default; -$divider-vertical-margin: var(--nutui-divider-vertical-margin, 0 8px) !default; +$divider-vertical-height: var( + --nutui-divider-vertical-height, + scale-px(12px) +) !default; +$divider-vertical-margin: var( + --nutui-divider-vertical-margin, + 0 scale-px(8px) +) !default; // icon（✅） -$icon-height: var(--nutui-icon-height, 20px) !default; -$icon-width: var(--nutui-icon-width, 20px) !default; -$icon-line-height: var(--nutui-icon-line-height, 20px) !default; +$icon-height: var(--nutui-icon-height, scale-icon-px(20px)) !default; +$icon-width: var(--nutui-icon-width, scale-icon-px(20px)) !default; +$icon-line-height: var(--nutui-icon-line-height, scale-icon-px(20px)) !default; // uploader（✅） -$uploader-image-width: var(--nutui-uploader-image-width, 100px) !default; -$uploader-image-height: var(--nutui-uploader-image-height, 100px) !default; +$uploader-image-width: var( + --nutui-uploader-image-width, + scale-px(100px) +) !default; +$uploader-image-height: var( + --nutui-uploader-image-height, + scale-px(100px) +) !default; $uploader-image-border: var(--nutui-uploader-image-border, 0px) !default; $uploader-image-border-radius: var( --nutui-uploader-image-border-radius, - 4px + scale-px(4px) ) !default; $uploader-background: var( --nutui-uploader-background, @@ -506,11 +588,11 @@ $uploader-image-disabled: var( ) !default; $uploader-image-icon-margin-bottom: var( --nutui-uploader-image-icon-margin-bottom, - 6px + scale-px(6px) ) !default; $uploader-image-icon-tip-font-size: var( --nutui-uploader-image-icon-tip-font-size, - 12px + $font-size-s ) !default; $uploader-preview-progress-background: var( --nutui-uploader-preview-progress-background, @@ -518,15 +600,15 @@ $uploader-preview-progress-background: var( ) !default; $uploader-preview-margin-right: var( --nutui-uploader-preview-margin-right, - 10px + scale-px(10px) ) !default; $uploader-preview-margin-bottom: var( --nutui-uploader-preview-margin-bottom, - 10px + scale-px(10px) ) !default; $uploader-preview-tips-height: var( --nutui-uploader-preview-tips-height, - 24px + scale-px(24px) ) !default; $uploader-preview-tips-background: var( --nutui-uploader-preview-tips-background, @@ -534,7 +616,7 @@ $uploader-preview-tips-background: var( ) !default; $uploader-preview-tips-padding: var( --nutui-uploader-preview-tips-padding, - 0 5px + 0 scale-px(5px) ) !default; $uploader-preview-close-right: var( --nutui-uploader-preview-close-right, @@ -564,7 +646,7 @@ $picker-title-ok-font-size: var( ) !default; // picker-view（✅） -$picker-item-height: var(--nutui-picker-item-height, 36px) !default; +$picker-item-height: var(--nutui-picker-item-height, scale-px(36px)) !default; $picker-list-height: calc($picker-item-height * 7) !default; $picker-item-text-color: var( --nutui-picker-item-text-color, @@ -576,7 +658,7 @@ $picker-item-text-font-size: var( ) !default; $picker-item-active-line-border: var( --nutui-picker-item-active-line-border, - 1px solid $color-border + scale-px(1px) solid $color-border ) !default; $picker-mask-background: var( --picker-mask-background, @@ -602,10 +684,10 @@ $input-background-color: var( --nutui-input-background-color, $color-background-overlay ) !default; -$input-padding: var(--nutui-input-padding, 12px) !default; +$input-padding: var(--nutui-input-padding, scale-px(12px)) !default; // textarea（✅） -$textarea-padding: var(--nutui-textarea-padding, 12px) !default; +$textarea-padding: var(--nutui-textarea-padding, scale-px(12px)) !default; $textarea-text-color: var(--nutui-textarea-text-color, $color-title) !default; $textarea-text-curror-color: var( --nutui-textarea-text-curror-color, @@ -613,12 +695,18 @@ $textarea-text-curror-color: var( ) !default; $textarea-text-line-height: var( --nutui-textarea-text-line-height, - 20px + scale-px(20px) ) !default; // inputnumber（✅） -$inputnumber-input-width: var(--nutui-inputnumber-input-width, 26px) !default; -$inputnumber-input-height: var(--nutui-inputnumber-input-height, 20px) !default; +$inputnumber-input-width: var( + --nutui-inputnumber-input-width, + scale-px(26px) +) !default; +$inputnumber-input-height: var( + --nutui-inputnumber-input-height, + scale-px(20px) +) !default; $inputnumber-input-background-color: var( --nutui-inputnumber-input-background-color, $color-background @@ -634,13 +722,16 @@ $inputnumber-input-font-size: var( $inputnumber-input-border: var(--nutui-inputnumber-input-border, 0) !default; $inputnumber-input-border-radius: var( --nutui-inputnumber-input-border-radius, - 4px + scale-px(4px) ) !default; $inputnumber-input-margin: var(--nutui-inputnumber-input-margin, 0px) !default; -$inputnumber-button-width: var(--nutui-inputnumber-button-width, 20px) !default; +$inputnumber-button-width: var( + --nutui-inputnumber-button-width, + scale-px(20px) +) !default; $inputnumber-button-height: var( --nutui-inputnumber-button-height, - 20px + scale-px(20px) ) !default; $inputnumber-button-background-color: var( --nutui-inputnumber-button-background-color, @@ -650,7 +741,10 @@ $inputnumber-icon-color: var( --nutui-inputnumber-icon-color, $color-text ) !default; -$inputnumber-icon-size: var(--nutui-inputnumber-icon-size, 8px) !default; +$inputnumber-icon-size: var( + --nutui-inputnumber-icon-size, + scale-px(8px) +) !default; $inputnumber-disabled-color: var( --nutui-inputnumber-disabled-color, $color-text-disabled @@ -676,7 +770,7 @@ $actionsheet-item-border-bottom: var( ) !default; $actionsheet-item-line-height: var( --nutui-actionsheet-item-line-height, - 24px + scale-px(24px) ) !default; $actionsheet-item-color: var( --nutui-actionsheet-item-color, @@ -705,7 +799,7 @@ $shortpassword-forget: var( //numberkeyboard（✅） $numberkeyboard-padding: var( --nutui-numberkeyboard-padding, - 0 0 22px 0 + 0 0 scale-px(22px) 0 ) !default; $numberkeyboard-background-color: var( --nutui-numberkeyboard-background-color, @@ -717,7 +811,7 @@ $numberkeyboard-wrapper-background-color: var( ) !default; $numberkeyboard-header-close-padding: var( --nutui-numberkeyboard-header-close-padding, - 0 16px + 0 scale-px(16px) ) !default; $numberkeyboard-header-close-color: var( --nutui-numberkeyboard-header-close-color, @@ -725,7 +819,7 @@ $numberkeyboard-header-close-color: var( ) !default; $numberkeyboard-header-close-font-size: var( --nutui-numberkeyboard-header-close-font-size, - 14px + $font-size-base ) !default; $numberkeyboard-header-close-background-color: var( --nutui-numberkeyboard-header-close-background-color, @@ -741,7 +835,7 @@ $numberkeyboard-key-active-background-color: var( ) !default; $numberkeyboard-key-height: var( --nutui-numberkeyboard-key-height, - 48px + scale-px(48px) ) !default; $numberkeyboard-key-line-height: var( --nutui-numberkeyboard-key-line-height, @@ -749,7 +843,7 @@ $numberkeyboard-key-line-height: var( ) !default; $numberkeyboard-key-border-radius: var( --nutui-numberkeyboard-key-border-radius, - 8px + scale-px(8px) ) !default; $numberkeyboard-key-border: var( --nutui-numberkeyboard-key-border, @@ -784,14 +878,17 @@ $coutdown-font-weight: var( --nutui-countdown-font-weight, $font-weight ) !default; -$countdown-height: var(--nutui-countdown-height, 16px) !default; -$countdown-width: var(--nutui-countdown-width, 16px) !default; +$countdown-height: var(--nutui-countdown-height, scale-px(16px)) !default; +$countdown-width: var(--nutui-countdown-width, scale-px(16px)) !default; $countdown-number-padding: var(--nutui-countdown-number-padding, 0 0) !default; $countdown-number-border-radius: var( --nutui-countdown-number-border-radius, $radius-xxs ) !default; -$countdown-number-margin: var(--nutui-countdown-number-margin, 0 1px) !default; +$countdown-number-margin: var( + --nutui-countdown-number-margin, + 0 scale-px(1px) +) !default; $countdown-number-color: var( --nutui-countdown-number-color, $color-primary @@ -834,45 +931,72 @@ $price-symbol-padding-right: var( ) !default; //xlarge price（✅） -$price-symbol-xlarge-size: var(--nutui-price-symbol-xlarge-size, 12px) !default; +$price-symbol-xlarge-size: var( + --nutui-price-symbol-xlarge-size, + $font-size-s +) !default; $price-integer-xlarge-size: var( --nutui-price-integer-xlarge-size, - 24px + $font-size-xxl ) !default; $price-decimal-xlarge-size: var( --nutui-price-decimal-xlarge-size, - 12px + $font-size-s ) !default; //large price（✅） -$price-symbol-large-size: var(--nutui-price-symbol-large-size, 12px) !default; -$price-integer-large-size: var(--nutui-price-integer-large-size, 18px) !default; -$price-decimal-large-size: var(--nutui-price-decimal-large-size, 12px) !default; +$price-symbol-large-size: var( + --nutui-price-symbol-large-size, + $font-size-s +) !default; +$price-integer-large-size: var( + --nutui-price-integer-large-size, + $font-size-xl +) !default; +$price-decimal-large-size: var( + --nutui-price-decimal-large-size, + $font-size-s +) !default; //normal price（✅） -$price-symbol-normal-size: var(--nutui-price-symbol-normal-size, 12px) !default; +$price-symbol-normal-size: var( + --nutui-price-symbol-normal-size, + $font-size-s +) !default; $price-integer-normal-size: var( --nutui-price-integer-normal-size, - 16px + scale-font-px(16px) ) !default; $price-decimal-normal-size: var( --nutui-price-decimal-normal-size, - 12px + $font-size-s ) !default; // small price（✅） -$price-symbol-small-size: var(--nutui-price-symbol-small-size, 12px) !default; -$price-integer-small-size: var(--nutui-price-integer-small-size, 12px) !default; -$price-decimal-small-size: var(--nutui-price-decimal-small-size, 12px) !default; +$price-symbol-small-size: var( + --nutui-price-symbol-small-size, + $font-size-s +) !default; +$price-integer-small-size: var( + --nutui-price-integer-small-size, + $font-size-s +) !default; +$price-decimal-small-size: var( + --nutui-price-decimal-small-size, + $font-size-s +) !default; //avatar（✅） -$avatar-square: var(--nutui-avatar-square, 5px) !default; -$avatar-large-width: var(--nutui-avatar-large-width, 60px) !default; -$avatar-large-height: var(--nutui-avatar-large-height, 60px) !default; -$avatar-small-width: var(--nutui-avatar-small-width, 32px) !default; -$avatar-small-height: var(--nutui-avatar-small-height, 32px) !default; -$avatar-normal-width: var(--nutui-avatar-normal-width, 40px) !default; -$avatar-normal-height: var(--nutui-avatar-normal-height, 40px) !default; +$avatar-square: var(--nutui-avatar-square, scale-px(5px)) !default; +$avatar-large-width: var(--nutui-avatar-large-width, scale-px(60px)) !default; +$avatar-large-height: var(--nutui-avatar-large-height, scale-px(60px)) !default; +$avatar-small-width: var(--nutui-avatar-small-width, scale-px(32px)) !default; +$avatar-small-height: var(--nutui-avatar-small-height, scale-px(32px)) !default; +$avatar-normal-width: var(--nutui-avatar-normal-width, scale-px(40px)) !default; +$avatar-normal-height: var( + --nutui-avatar-normal-height, + scale-px(40px) +) !default; //switch（✅） $switch-active-background-color: var( @@ -895,14 +1019,14 @@ $switch-inactive-line-background-color: var( --nutui-switch-inactive-line-background-color, #ffffff ) !default; -$switch-width: var(--nutui-switch-width, 46px) !default; -$switch-height: var(--nutui-switch-height, 28px) !default; -$switch-line-height: var(--nutui-switch-line-height, 28px) !default; +$switch-width: var(--nutui-switch-width, scale-px(46px)) !default; +$switch-height: var(--nutui-switch-height, scale-px(28px)) !default; +$switch-line-height: var(--nutui-switch-line-height, scale-px(28px)) !default; $switch-border-radius: var( --nutui-switch-border-radius, $radius-circle ) !default; -$switch-border-width: var(--nutui-switch-border-width, 2px) !default; +$switch-border-width: var(--nutui-switch-border-width, scale-px(2px)) !default; $switch-inside-border-radius: var( --nutui-switch-inside-border-radius, $radius-full @@ -910,15 +1034,15 @@ $switch-inside-border-radius: var( /* #ifdef harmony */ $switch-inside-box-shadow: var( --nutui-switch-inside-box-shadow, - 0px 2px 6px 0px rgba(0, 0, 0, 0.1) + 0px scale-px(2px) scale-px(6px) 0px rgba(0, 0, 0, 0.1) ) !default; /* #endif */ /* #ifndef harmony */ $switch-inside-box-shadow: var( --nutui-switch-inside-box-shadow, - 0px 2px 1px 0px rgba(0, 0, 0, 0.06), - 0px 2px 6px 0px rgba(0, 0, 0, 0.1), - 0px 0px 0px 1px rgba(0, 0, 0, 0.02) + 0px scale-px(2px) scale-px(1px) 0px rgba(0, 0, 0, 0.06), + 0px scale-px(2px) scale-px(6px) 0px rgba(0, 0, 0, 0.1), + 0px 0px 0px scale-px(1px) rgba(0, 0, 0, 0.02) ) !default; /* #endif */ $switch-label-text-color: var( @@ -936,10 +1060,19 @@ $switch-inactive-disabled-label-text-color: var( // toast（✅） $toast-inner-text-align: var(--nutui-toast-inner-text-align, center) !default; -$toast-title-font-size: var(--nutui-toast-title-font-size, 16px) !default; -$toast-text-font-size: var(--nutui-toast-text-font-size, 14px) !default; +$toast-title-font-size: var( + --nutui-toast-title-font-size, + scale-font-px(16px) +) !default; +$toast-text-font-size: var( + --nutui-toast-text-font-size, + $font-size-base +) !default; $toast-font-color: var(--nutui-toast-font-color, $white) !default; -$toast-inner-padding: var(--nutui-toast-inner-padding, 13px 16px) !default; +$toast-inner-padding: var( + --nutui-toast-inner-padding, + scale-px(13px) scale-px(16px) +) !default; $toast-inner-bg-color: var(--nutui-toast-inner-bg-color, $color-mask) !default; $toast-inner-border-radius: var( --nutui-toast-inner-border-radius, @@ -948,36 +1081,45 @@ $toast-inner-border-radius: var( $toast-inner-top: var(--nutui-toast-inner-top, 50%) !default; //tour（✅） -$tour-mask-border-radius: var(--nutui-tour-mask-border-radius, 10px) !default; -$tour-content-min-width: var(--nutui-tour-content-min-width, 200px) !default; -$tour-content-padding: var(--nutui-tour-content-padding, 10px 12px) !default; +$tour-mask-border-radius: var( + --nutui-tour-mask-border-radius, + scale-px(10px) +) !default; +$tour-content-min-width: var( + --nutui-tour-content-min-width, + scale-px(200px) +) !default; +$tour-content-padding: var( + --nutui-tour-content-padding, + scale-px(10px) scale-px(12px) +) !default; $tour-content-inner-margin: var( --nutui-tour-content-inner-margin, - 10px 0px + scale-px(10px) 0px ) !default; $tour-content-inner-font-size: var( --nutui-tour-content-inner-font-size, - 14px + $font-size-base ) !default; $tour-content-bottom-margin-top: var( --nutui-tour-content-bottom-margin-top, - 10px + scale-px(10px) ) !default; $tour-content-bottom-btn-margin-left: var( --nutui-tour-content-bottom-btn-margin-left, - 4px + scale-px(4px) ) !default; $tour-content-bottom-btn-padding: var( --nutui-tour-content-bottom-btn-padding, - 2px 4px + scale-px(2px) scale-px(4px) ) !default; $tour-content-bottom-btn-font-size: var( --nutui-tour-content-bottom-btn-font-size, - 12px + $font-size-s ) !default; $tour-content-bottom-btn-border-radius: var( --nutui-tour-content-bottom-btn-border-radius, - 4px + scale-px(4px) ) !default; // calendar（✅） @@ -1017,29 +1159,35 @@ $calendar-sub-title-font-size: var( --nutui-calendar-sub-title-font-size, $font-size-base ) !default; -$calendar-header-height: var(--nutui-calendar-header-height, 24px) !default; +$calendar-header-height: var( + --nutui-calendar-header-height, + scale-px(24px) +) !default; $calendar-day-width: var(--nutui-calendar-day-width, 14.28%) !default; -$calendar-day-height: var(--nutui-calendar-day-height, 60px) !default; +$calendar-day-height: var(--nutui-calendar-day-height, scale-px(60px)) !default; $calendar-day-font-weight: var( --nutui-calendar-day-font-weight, $font-weight-bold ) !default; $calendar-day-active-border-radius: var( --nutui-calendar-day-active-border-radius, - 4px + scale-px(4px) ) !default; //hoverbutton $hoverbutton-spacing: var(--nutui-hoverbutton-spacing, $spacing-base) !default; $hoverbutton-position-bottom: var( --nutui-hoverbutton-position-bottom, - 60px + scale-px(60px) ) !default; $hoverbutton-position-right: var( --nutui-hoverbutton-position-right, $spacing-base ) !default; -$hoverbutton-item-size: var(--nutui-hoverbutton-item-size, 40px) !default; +$hoverbutton-item-size: var( + --nutui-hoverbutton-item-size, + scale-px(40px) +) !default; $hoverbutton-item-border-color: var( --nutui-hoverbutton-item-border-color, rgba(0, 0, 0, 0.12) @@ -1077,8 +1225,8 @@ $overlay-animation-duration: var( ) !default; //popup（✅） $popup-border-radius: var(--nutui-popup-border-radius, $radius-xl) !default; -$popup-icon-size: var(--nutui-popup-icon-size, 20px) !default; -$popup-title-padding: var(--nutui-popup-title-padding, 11px) !default; +$popup-icon-size: var(--nutui-popup-icon-size, scale-px(20px)) !default; +$popup-title-padding: var(--nutui-popup-title-padding, scale-px(11px)) !default; $popup-title-font-size: var( --nutui-popup-title-font-size, $font-size-xl @@ -1095,17 +1243,20 @@ $popup-description-spacing: var( --nutui-popup-description-spacing, $spacing-base ) !default; -$popup-title-height: var(--nutui-popup-title-height, 50px) !default; +$popup-title-height: var(--nutui-popup-title-height, scale-px(50px)) !default; $popup-title-border-bottom: var(--nutui-popup-title-border-bottom, 0) !default; $popup-animation-duration: var(--nutui-popup-animation-duration, 0.3s) !default; // Notify（✅） -$notify-height: var(--nutui-notify-height, 40px) !default; -$notify-padding: var(--nutui-notify-padding, 0px 12px) !default; -$notify-border-radius: var(--nutui-notify-border-radius, 8px) !default; +$notify-height: var(--nutui-notify-height, scale-px(40px)) !default; +$notify-padding: var(--nutui-notify-padding, 0px scale-px(12px)) !default; +$notify-border-radius: var( + --nutui-notify-border-radius, + scale-px(8px) +) !default; $notify-box-shadow: var( --nutui-notify-box-shadow, - 0px 4px 12px 0px rgba(0, 0, 0, 0.06) + 0px scale-px(4px) scale-px(12px) 0px rgba(0, 0, 0, 0.06) ) !default; $notify-z-index: var(--nutui-notify-z-index, 1000) !default; $notify-text-color: var(--nutui-notify-text-color, $color-title) !default; @@ -1113,18 +1264,18 @@ $notify-font-size: var(--nutui-notify-font-size, $font-size-base) !default; $notify-background-color: var(--nutui-notify-background-color, $white) !default; // rate（✅） -$rate-item-margin: var(--nutui-rate-item-margin, 4px) !default; +$rate-item-margin: var(--nutui-rate-item-margin, scale-px(4px)) !default; $rate-icon-color: var(--nutui-rate-icon-color, $color-primary-icon) !default; $rate-icon-inactive-color: var( --nutui-rate-icon-inactive-color, $color-primary-icon-disabled ) !default; -$rate-icon-size: var(--nutui-rate-icon-size, 12px) !default; +$rate-icon-size: var(--nutui-rate-icon-size, scale-font-px(12px)) !default; $rate-font-color: var(--nutui-rate-font-color, $color-primary-icon) !default; -$rate-font-size: var(--nutui-rate-font-size, 12px) !default; +$rate-font-size: var(--nutui-rate-font-size, $font-size-s) !default; // tabbar（✅） -$tabbar-height: var(--nutui-tabbar-height, 46px) !default; +$tabbar-height: var(--nutui-tabbar-height, scale-px(46px)) !default; $tabbar-active-color: var(--nutui-tabbar-active-color, $color-primary) !default; $tabbar-inactive-color: var( --nutui-tabbar-inactive-color, @@ -1145,14 +1296,23 @@ $tabbar-text-large-font-weight: var( --nutui-tabbar-text-large-font-weight, $font-weight ) !default; -$tabbar-text-line-height: var(--nutui-tabbar-text-line-height, 20px) !default; -$tabbar-text-margin-top: var(--nutui-tabbar-text-margin-top, 4px) !default; +$tabbar-text-line-height: var( + --nutui-tabbar-text-line-height, + scale-px(20px) +) !default; +$tabbar-text-margin-top: var( + --nutui-tabbar-text-margin-top, + scale-px(4px) +) !default; //pulltorefresh -$pulltorefresh-icon-width: var(--nutui-pulltorefresh-icon-width, 36px) !default; +$pulltorefresh-icon-width: var( + --nutui-pulltorefresh-icon-width, + scale-px(36px) +) !default; $pulltorefresh-icon-height: var( --nutui-pulltorefresh-icon-height, - 26px + scale-px(26px) ) !default; $pulltorefresh-color-primary: var( --nutui-pulltorefresh-color-primary, @@ -1166,13 +1326,13 @@ $infiniteloading-color: var( ) !default; $infiniteloading-icon-size: var( --nutui-infiniteloading-icon-size, - 24px + $font-size-xxl ) !default; //range（✅） $range-color: var(--nutui-range-color, $color-title) !default; -$range-height: var(--nutui-range-height, 4px) !default; -$range-margin: var(--nutui-range-margin, 15px) !default; +$range-height: var(--nutui-range-height, scale-px(4px)) !default; +$range-margin: var(--nutui-range-margin, scale-px(15px)) !default; $range-inactive-color: var( --nutui-range-inactive-color, $color-primary-light-pressed @@ -1182,15 +1342,15 @@ $range-button-background: var( --nutui-range-button-background, $color-primary-text ) !default; -$range-button-width: var(--nutui-range-button-width, 24px) !default; -$range-button-height: var(--nutui-range-button-height, 24px) !default; +$range-button-width: var(--nutui-range-button-width, scale-px(24px)) !default; +$range-button-height: var(--nutui-range-button-height, scale-px(24px)) !default; $range-button-border: var( --nutui-range-button-border, - 1px solid $color-primary + scale-px(1px) solid $color-primary ) !default; //swiper（✅） -$swiper-indicator-bottom: var(--nutui-swiper-indicator-bottom, 12px); +$swiper-indicator-bottom: var(--nutui-swiper-indicator-bottom, scale-px(12px)); //address $address-tab-line-background: linear-gradient( @@ -1201,7 +1361,10 @@ $address-tab-line-background: linear-gradient( //steps（✅） $steps-background-color: var(--nutui-steps-background-color, $white) !default; -$steps-base-head-height: var(--nutui-steps-base-head-height, 14px) !default; +$steps-base-head-height: var( + --nutui-steps-base-head-height, + scale-px(14px) +) !default; $steps-base-head-background-color: var( --nutui-steps-base-head-background-color, $color-background @@ -1209,7 +1372,7 @@ $steps-base-head-background-color: var( $steps-base-head-border: var(--nutui-steps-base-head-border, none) !default; $steps-base-head-text-size: var( --nutui-steps-base-head-text-size, - 12px + $font-size-s ) !default; $steps-base-head-size: var( --nutui-steps-base-icon-size, @@ -1219,24 +1382,30 @@ $steps-base-head-color: var( --nutui-steps-base-head-color, $color-text ) !default; -$steps-base-head-dot-size: var(--nutui-steps-base-head-dot-size, 6px) !default; +$steps-base-head-dot-size: var( + --nutui-steps-base-head-dot-size, + scale-icon-px(6px) +) !default; $steps-base-head-dot-background-color: var( --nutui-steps-base-head-dot-background-color, $color-text-disabled ) !default; $steps-base-head-icon-size: var( --nutui-steps-base-head-icon-size, - 16px + scale-font-px(16px) ) !default; $steps-double-head-icon-size: var( --nutui-steps-base-head-icon-size-right, - 20px + scale-px(20px) ) !default; $steps-vertical-head-icon-size: var( --nutui-steps-vertical-item-icon-size, - 20px + scale-px(20px) +) !default; +$steps-base-line-height: var( + --nutui-steps-base-line-height, + scale-px(1px) ) !default; -$steps-base-line-height: var(--nutui-steps-base-line-height, 1px) !default; $steps-base-line-background: var( --nutui-steps-base-line-background, $color-border @@ -1251,7 +1420,7 @@ $steps-base-title-color: var( ) !default; $steps-base-description-margin-top: var( --nutui-steps-base-title-margin-bottom, - 2px + scale-px(2px) ) !default; $steps-base-description-font-size: var( --nutui-steps-base-description-font-size, @@ -1344,23 +1513,23 @@ $steps-enhanced-finish-head-text-color: var( ) !default; $steps-horizontal-item-padding-right: var( --nutui-steps-horizontal-item-padding-right, - 28px + scale-px(28px) ) !default; $steps-horizontal-item-line-padding: var( --nutui-steps-horizontal-item-line-padding, - 0 8px + 0 scale-px(8px) ) !default; $steps-horizontal-item-special-padding-right: var( --nutui-steps-horizontal-item-special-padding-right, - 22px + scale-px(22px) ) !default; $steps-horizontal-item-special-3-padding-right: var( --nutui-steps-horizontal-item-special-3-padding-right, - 9px + scale-px(9px) ) !default; $steps-vertical-item-padding-bottom: var( --nutui-steps-vertical-item-padding-bottom, - 13px + scale-px(12px) ) !default; $steps-vertical-title-font-size: var( --nutui-steps-vertical-title-font-size, @@ -1368,11 +1537,11 @@ $steps-vertical-title-font-size: var( ) !default; $steps-vertical-title-margin-bottom: var( --nutui-steps-vertical-title-margin-bottom, - 4px + scale-px(3px) ) !default; $steps-vertical-line-height: var( --nutui-steps-vertical-line-height, - 18px + scale-px(20px) ) !default; $steps-vertical-description-font-size: var( --nutui-steps-vertical-description-font-size, @@ -1380,15 +1549,15 @@ $steps-vertical-description-font-size: var( ) !default; $steps-vertical-description-margin: var( --nutui-steps-vertical-description-margin, - 0 0 1px + 0 0 scale-px(1px) ) !default; // dialog（✅） -$dialog-min-width: var(--nutui-dialog-min-width, 240px) !default; -$dialog-width: var(--nutui-dialog-width, 295px) !default; -$dialog-padding: var(--nutui-dialog-padding, 24px) !default; -$dialog-max-height: var(--nutui-dialog-max-height, 420px) !default; -$dialog-min-height: var(--nutui-dialog-min-height, 124px) !default; +$dialog-min-width: var(--nutui-dialog-min-width, scale-px(240px)) !default; +$dialog-width: var(--nutui-dialog-width, scale-px(295px)) !default; +$dialog-padding: var(--nutui-dialog-padding, scale-px(24px)) !default; +$dialog-max-height: var(--nutui-dialog-max-height, scale-px(420px)) !default; +$dialog-min-height: var(--nutui-dialog-min-height, scale-px(124px)) !default; $dialog-border-radius: var(--nutui-dialog-border-radius, $radius-xl) !default; $dialog-background: var( --nutui-dialog-background, @@ -1396,16 +1565,19 @@ $dialog-background: var( ) !default; $dialog-title-margin-bottom: var( --nutui-dialog-title-margin-bottom, - 8px + scale-px(8px) +) !default; +$dialog-content-margin: var( + --nutui-dialog-content-margin, + 0 0 scale-px(20px) 0 ) !default; -$dialog-content-margin: var(--nutui-dialog-content-margin, 0 0 20px 0) !default; $dialog-content-max-height: var( --nutui-dialog-content-max-height, - 268px + scale-px(268px) ) !default; $dialog-content-line-height: var( --nutui-dialog-content-line-height, - 20px + scale-px(20px) ) !default; $dialog-content-text-align: var( --nutui-dialog-content-text-align, @@ -1413,15 +1585,15 @@ $dialog-content-text-align: var( ) !default; $dialog-footer-button-border: var( --nutui-dialog-footer-button-border, - 6px + scale-px(6px) ) !default; $dialog-footer-button-min-width: var( --nutui-dialog-footer-button-min-width, - 117px + scale-px(117px) ) !default; $dialog-footer-cancel-margin-right: var( --nutui-dialog-footer-cancel-margin-right, - 12px + scale-px(12px) ) !default; $dialog-footer-cancel-bg: var( --nutui-dialog-footer-cancel-bg, @@ -1429,24 +1601,27 @@ $dialog-footer-cancel-bg: var( ); $dialog-footer-ok-max-width: var( --nutui-dialog-footer-ok-max-width, - 128px + scale-px(128px) ) !default; $dialog-footer-badge-height: var( --nutui-dialog-footer-badge-height, - 14px + scale-px(14px) ) !default; $dialog-footer-badge-fontsize: var( --nutui-dialog-footer-badge-fontsize, - 10px + scale-px(10px) ) !default; $dialog-footer-badge-padding: var( --nutui-dialog-footer-badge-padding, - 0 3px + 0 scale-px(3px) +) !default; +$dialog-footer-badge-top: var( + --nutui-dialog-footer-badge-top, + scale-px(-8px) ) !default; -$dialog-footer-badge-top: var(--nutui-dialog-footer-badge-top, -8px) !default; $dialog-footer-badge-border-radius: var( --nutui-dialog-footer-badge-border-radius, - 2px 2px 0px 2px + scale-px(2px) scale-px(2px) 0px scale-px(2px) ) !default; $dialog-footer-badge-bg-ok: var( --nutui-dialog-footer-badge-bg-ok, @@ -1474,18 +1649,18 @@ $dialog-header-font-weight: var( ) !default; $dialog-vertical-footer-ok-margin-top: var( --nutui-dialog-vertical-footer-ok-margin-top, - 16px + scale-px(16px) ) !default; $dialog-close-color: var(--nutui-dialog-close-color, #ffffff) !default; -$dialog-close-width: var(--nutui-dialog-close-width, 16px) !default; -$dialog-close-height: var(--nutui-dialog-close-height, 16px) !default; +$dialog-close-width: var(--nutui-dialog-close-width, scale-px(16px)) !default; +$dialog-close-height: var(--nutui-dialog-close-height, scale-px(16px)) !default; $dialog-bottom-close-icon-size: var( --nutui-dialog-bottom-close-icon-size, - 24px + $font-size-xxl ) !default; -$dialog-close-top: var(--nutui-dialog-close-top, 16px) !default; -$dialog-close-left: var(--nutui-dialog-close-left, 16px) !default; -$dialog-close-right: var(--nutui-dialog-close-right, 16px) !default; +$dialog-close-top: var(--nutui-dialog-close-top, scale-px(16px)) !default; +$dialog-close-left: var(--nutui-dialog-close-left, scale-px(16px)) !default; +$dialog-close-right: var(--nutui-dialog-close-right, scale-px(16px)) !default; // checkbox（✅） $checkbox-label-disable-color: var( @@ -1517,15 +1692,15 @@ $checkbox-button-color: $color-text; $checkbox-button-background: $color-background; $checkbox-button-padding: var( --nutui-checkbox-button-padding, - 5px 18px + scale-px(5px) scale-px(18px) ) !default; $checkbox-button-border-radius: var( --nutui-checkbox-button-border-radius, - 15px + scale-px(15px) ) !default; $checkbox-button-active-border: var( --nutui-checkbox-button-active-border, - 1px solid $color-primary + scale-px(1px) solid $color-primary ) !default; $checkbox-button-disabled-active-color: var( --nutui-checkbox-button-disabled-active-color, @@ -1537,12 +1712,15 @@ $checkbox-list-background-color: var( ) !default; $checkbox-list-item-border: var( --nutui-checkbox-list-item-border, - 1px solid $color-border + scale-px(1px) solid $color-border +) !default; +$checkbox-list-padding: var( + --nutui-checkbox-list-padding, + 0 0 0 scale-px(12px) ) !default; -$checkbox-list-padding: var(--nutui-checkbox-list-padding, 0 0 0 12px) !default; $checkbox-list-item-padding: var( --nutui-checkbox-list-item-padding, - 12px 12px 12px 0 + scale-px(12px) scale-px(12px) scale-px(12px) 0 ) !default; //radio（✅） @@ -1559,16 +1737,22 @@ $radio-label-font-size: var( --nutui-radio-label-font-size, $font-size-s ) !default; -$radio-label-margin-left: var(--nutui-radio-label-margin-left, 4px) !default; +$radio-label-margin-left: var( + --nutui-radio-label-margin-left, + scale-px(4px) +) !default; $radio-button-font-size: var( --nutui-radio-button-font-size, $font-size-s ) !default; $radio-button-color: $color-text; -$radio-button-padding: var(--nutui-radio-button-padding, 5px 18px) !default; +$radio-button-padding: var( + --nutui-radio-button-padding, + scale-px(5px) scale-px(18px) +) !default; $radio-button-border-radius: var( --nutui-radio-button-border-radius, - 15px + scale-px(15px) ) !default; $radio-button-background: var( --nutui-radio-button-background, @@ -1576,20 +1760,23 @@ $radio-button-background: var( ) !default; $radio-button-active-border: var( --nutui-radio-button-active-border, - 1px solid $color-primary + scale-px(1px) solid $color-primary ) !default; $radio-button-disabled-active-color: var( --nutui-radio-button-disabled-active-color, $white ) !default; -$radiogroup-radio-margin: var(--nutui-radiogroup-radio-margin, 20px) !default; +$radiogroup-radio-margin: var( + --nutui-radiogroup-radio-margin, + scale-px(20px) +) !default; $radiogroup-radio-margin-bottom: var( --nutui-radiogroup-radio-margin-bottom, - 5px + scale-px(5px) ) !default; $radiogroup-radio-label-margin: var( --nutui-radiogroup-radio-label-margin, - 0 5px + 0 scale-px(5px) ) !default; // signature（✅） @@ -1597,7 +1784,10 @@ $signature-border-color: var( --nutui-signature-border-color, $color-border ) !default; -$signature-border-width: var(--nutui-signature-border-width, 1px) !default; +$signature-border-width: var( + --nutui-signature-border-width, + scale-px(1px) +) !default; $signature-height: var(--nutui-signature-height, 10rem) !default; $signature-background-color: var( --nutui-signature-background-color, @@ -1625,42 +1815,60 @@ $fixednav-item-active-color: var( ) !default; // NoticeBar（✅） -$noticebar-height: var(--nutui-noticebar-height, 36px) !default; +$noticebar-height: var(--nutui-noticebar-height, scale-px(36px)) !default; $noticebar-background: var( --nutui-noticebar-background, rgba(251, 248, 220, 1) ) !default; $noticebar-color: var(--nutui-noticebar-color, #d9500b) !default; $noticebar-font-size: var(--nutui-noticebar-font-size, $font-size-s) !default; -$noticebar-line-height: var(--nutui-noticebar-line-height, 24px) !default; -$noticebar-box-padding: var(--nutui-noticebar-box-padding, 0 16px) !default; +$noticebar-line-height: var( + --nutui-noticebar-line-height, + scale-px(24px) +) !default; +$noticebar-box-padding: var( + --nutui-noticebar-box-padding, + 0 scale-px(16px) +) !default; $noticebar-border-radius: var(--nutui-noticebar-border-radius, 0) !default; $noticebar-wrap-padding: var( --nutui-noticebar-wrapable-padding, - 8px 16px + scale-px(8px) scale-px(16px) ) !default; -$noticebar-icon-gap: var(--nutui-noticebar-icon-gap, 4px) !default; +$noticebar-icon-gap: var(--nutui-noticebar-icon-gap, scale-px(4px)) !default; $noticebar-left-icon-width: var( --nutui-noticebar-left-icon-width, - 16px + scale-px(16px) ) !default; $noticebar-right-icon-width: var( --nutui-noticebar-right-icon-width, - 16px + scale-px(16px) ) !default; // TimeSelect（✅） -$timeselect-date-width: var(--nutui-timeselect-date-width, 140px) !default; -$timeselect-date-height: var(--nutui-timeselect-date-height, 40px) !default; +$timeselect-date-width: var( + --nutui-timeselect-date-width, + scale-px(140px) +) !default; +$timeselect-date-height: var( + --nutui-timeselect-date-height, + scale-px(40px) +) !default; $timeselect-date-active-color: var( --nutui-timeselect-date-active-color, $color-title ) !default; -$timeselect-time-width: var(--nutui-timeselect-time-width, 100px) !default; -$timeselect-time-height: var(--nutui-timeselect-time-height, 50px) !default; +$timeselect-time-width: var( + --nutui-timeselect-time-width, + scale-px(110px) +) !default; +$timeselect-time-height: var( + --nutui-timeselect-time-height, + scale-px(50px) +) !default; $timeselect-time-margin: var( --nutui-timeselect-time-margin, - 0 10px 10px 0 + 0 scale-px(10px) scale-px(10px) 0 ) !default; $timeselect-time-background: var( --nutui-timeselect-time-background, @@ -1668,12 +1876,12 @@ $timeselect-time-background: var( ) !default; //tag（✅） -$tag-padding: var(--nutui-tag-padding, 0px 2px) !default; +$tag-padding: var(--nutui-tag-padding, 0px scale-px(2px)) !default; $tag-font-size: var(--nutui-tag-font-size, $font-size-xxs) !default; -$tag-border-radius: var(--nutui-tag-border-radius, 2px) !default; -$tag-height: var(--nutui-tag-height, 14px) !default; +$tag-border-radius: var(--nutui-tag-border-radius, scale-px(2px)) !default; +$tag-height: var(--nutui-tag-height, scale-px(14px)) !default; $tag-color: var(--nutui-tag-color, #ffffff) !default; -$tag-border-width: var(--nutui-tag-border-width, 1px) !default; +$tag-border-width: var(--nutui-tag-border-width, scale-px(1px)) !default; $tag-background-color: var(--nutui-tag-background-color, $color-title) !default; $tag-primary-background-color: var( --nutui-tag-primary-background-color, @@ -1695,14 +1903,17 @@ $tag-warning-background-color: var( --nutui-tag-warning-background-color, $color-warning ) !default; -$tag-round-border-radius: var(--nutui-tag-round-border-radius, 8px) !default; +$tag-round-border-radius: var( + --nutui-tag-round-border-radius, + scale-px(8px) +) !default; $tag-mark-border-radius: var( --nutui-tag-mark-border-radius, - 0 8px 8px 0 + 0 scale-px(8px) scale-px(8px) 0 ) !default; //badge（✅） -$badge-height: var(--nutui-badge-height, 14px) !default; +$badge-height: var(--nutui-badge-height, scale-px(14px)) !default; $badge-background-color: var( --nutui-badge-background-color, $color-primary @@ -1715,26 +1926,38 @@ $badge-color: var(--nutui-badge-color, $color-primary-text) !default; $badge-font-size: var(--nutui-badge-font-size, $font-size-xxxs) !default; $badge-border: var( --nutui-badge-border, - 1px solid $color-primary-text + scale-px(1px) solid $color-primary-text ) !default; $badge-border-radius: var(--nutui-badge-border-radius, $badge-height) !default; -$badge-min-width: var(--nutui-badge-min-width, 6px) !default; -$badge-padding: var(--nutui-badge-padding, 1px 4px) !default; -$badge-icon-padding: var(--nutui-badge-icon-padding, 2px) !default; -$badge-icon-size: var(--nutui-badge-icon-size, 10px) !default; +$badge-min-width: var(--nutui-badge-min-width, scale-px(6px)) !default; +$badge-padding: var( + --nutui-badge-padding, + scale-px(1px) scale-px(4px) +) !default; +$badge-icon-padding: var(--nutui-badge-icon-padding, scale-px(2px)) !default; +$badge-icon-size: var(--nutui-badge-icon-size, $font-size-xxs) !default; $badge-content-transform: var( --nutui-badge-content-transform, translate(50%, -50%) ) !default; $badge-z-index: var(--nutui-badge-z-index, 1) !default; -$badge-dot-width: var(--nutui-badge-dot-width, 6px) !default; -$badge-dot-small-width: var(--nutui-badge-dot-small-width, 4px) !default; -$badge-dot-large-width: var(--nutui-badge-dot-large-width, 8px) !default; -$badge-dot-border: var(--nutui-badge-dot-border, 1px solid $color-primary-text); +$badge-dot-width: var(--nutui-badge-dot-width, scale-px(6px)) !default; +$badge-dot-small-width: var( + --nutui-badge-dot-small-width, + scale-px(4px) +) !default; +$badge-dot-large-width: var( + --nutui-badge-dot-large-width, + scale-px(8px) +) !default; +$badge-dot-border: var( + --nutui-badge-dot-border, + scale-px(1px) solid $color-primary-text +); $badge-outline-color: var(--nutui-badge-outline-color, $color-primary) !default; $badge-outline-border: var( --nutui-badge-outline-border, - 1px solid $color-primary + scale-px(1px) solid $color-primary ); //popover（✅） @@ -1753,11 +1976,11 @@ $popover-divider-color: var( --nutui-popover-divider-color, $color-border ) !default; -$popover-padding: var(--nutui-popover-padding, 8px) !default; -$popover-item-width: var(--nutui-popover-item-width, 160px) !default; +$popover-padding: var(--nutui-popover-padding, scale-px(8px)) !default; +$popover-item-width: var(--nutui-popover-item-width, scale-px(160px)) !default; //progress（✅） -$progress-height: var(--nutui-progress-height, 10px) !default; +$progress-height: var(--nutui-progress-height, scale-px(10px)) !default; $progress-color: var( --nutui-progress-color, $color-primary-gradient-1 @@ -1766,7 +1989,10 @@ $progress-background: var( --nutui-progress-background, $color-background ) !default; -$progress-border-radius: var(--nutui-progress-border-radius, 12px) !default; +$progress-border-radius: var( + --nutui-progress-border-radius, + scale-px(12px) +) !default; $progress-text-color: var( --nutui-progress-text-color, $color-text-help @@ -1775,19 +2001,25 @@ $progress-text-background: var( --nutui-progress-text-background, $color-primary-gradient-1 ) !default; -$progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default; -$progress-text-font-size: var(--nutui-progress-text-font-size, 13px) !default; +$progress-text-padding: var( + --nutui-progress-text-padding, + 0 scale-px(5px) +) !default; +$progress-text-font-size: var( + --nutui-progress-text-font-size, + scale-font-px(13px) +) !default; $progress-text-position-top: var( --nutui-progress-text-position-top, - -4px + scale-px(-4px) ) !default; $progress-text-position-bottom: var( --nutui-progress-text-position-bottom, - -4px + scale-px(-4px) ) !default; $progress-text-border-radius: var( --nutui-progress-text-border-radius, - 5px + scale-px(5px) ) !default; //pagination（✅） @@ -1812,18 +2044,24 @@ $pagination-disable-background-color: var( ) !default; $pagination-item-border-width: var( --nutui-pagination-item-border-width, - 1px + scale-px(1px) ) !default; $pagination-item-border-radius: var( --nutui-pagination-item-border-radius, - 2px + scale-px(2px) ) !default; $pagination-prev-next-padding: var( --nutui-pagination-prev-next-padding, - 0 12px + 0 scale-px(12px) +) !default; +$pagination-lite-width: var( + --nutui-pagination-lite-width, + scale-px(40px) +) !default; +$pagination-lite-height: var( + --nutui-pagination-lite-height, + scale-px(20px) ) !default; -$pagination-lite-width: var(--nutui-pagination-lite-width, 40px) !default; -$pagination-lite-height: var(--nutui-pagination-lite-height, 20px) !default; $pagination-lite-radius: var( --nutui-pagination-lite-radius, $radius-xs @@ -1838,19 +2076,19 @@ $pagination-lite-active-background-color: var( ) !default; // tabs（✅） -$tabs-titles-height: var(--nutui-tabs-titles-height, 44px) !default; +$tabs-titles-height: var(--nutui-tabs-titles-height, scale-px(44px)) !default; $tabs-titles-background-color: var( --nutui-tabs-titles-background-color, $color-background ) !default; -$tabs-titles-gap: var(--nutui-tabs-titles-gap, 12px) !default; +$tabs-titles-gap: var(--nutui-tabs-titles-gap, scale-px(12px)) !default; $tabs-titles-font-size: var( --nutui-tabs-titles-font-size, $font-size-base ) !default; $tabs-titles-item-min-width: var( --nutui-tabs-titles-item-min-width, - 50px + scale-px(50px) ) !default; $tabs-titles-item-color: var( --nutui-tabs-titles-item-color, @@ -1872,13 +2110,16 @@ $tabs-titles-item-active-background-color: var( --nutui-tabs-titles-item-active-background-color, $color-background-overlay ) !default; -$tabs-tab-line-width: var(--nutui-tabs-tab-line-width, 12px) !default; -$tabs-tab-line-height: var(--nutui-tabs-tab-line-height, 2px) !default; +$tabs-tab-line-width: var(--nutui-tabs-tab-line-width, scale-px(12px)) !default; +$tabs-tab-line-height: var( + --nutui-tabs-tab-line-height, + scale-px(2px) +) !default; $tabs-tab-line-color: var(--nutui-tabs-tab-line-color, $color-primary) !default; $tabs-tab-line-bottom: var(--nutui-tabs-line-bottom, 15%) !default; $tabs-tab-line-border-radius: var( --nutui-tabs-line-border-radius, - 2px + scale-px(2px) ) !default; $tabs-tab-line-opacity: var(--nutui-tabs-tab-line-opacity, 1) !default; $tabs-tab-button-border-radius: var( @@ -1891,15 +2132,15 @@ $tabs-tab-button-active-background-color: var( ) !default; $tabs-tab-button-active-border: var( --nutui-tabs-button-active-border, - 1px solid $color-primary + scale-px(1px) solid $color-primary ) !default; $tabs-vertical-titles-width: var( --nutui-tabs-vertical-titles-width, - 100px + scale-px(100px) ) !default; $tabs-vertical-titles-item-height: var( --nutui-tabs-vertical-titles-item-height, - 40px + scale-px(40px) ) !default; $tabs-vertical-tab-line-color: var( --nutui-tabs-vertical-tab-line-color, @@ -1911,17 +2152,20 @@ $tabs-vertical-tab-line-color: var( ) !default; $tabs-vertical-tab-line-width: var( --nutui-tabs-vertical-tab-line-width, - 3px + scale-px(3px) ) !default; $tabs-vertical-tab-line-height: var( --nutui-tabs-vertical-tab-line-height, - 12px + scale-px(12px) ) !default; $tabs-titles-item-smile-bottom: var( --nutui-tabs-titles-item-smile-bottom, -10% ) !default; -$tabs-tabpane-padding: var(--nutui-tabs-tabpane-padding, 24px 20px) !default; +$tabs-tabpane-padding: var( + --nutui-tabs-tabpane-padding, + scale-px(24px) scale-px(20px) +) !default; $tabs-tabpane-background-color: var( --nutui-tabs-tabpane-background-color, #fff @@ -1929,10 +2173,10 @@ $tabs-tabpane-background-color: var( // indicator（✅） $indicator-color: var(--nutui-indicator-color, $color-primary) !default; $indicator-dot-color: var(--nutui-indicator-dot-color, $color-border) !default; -$indicator-dot-size: var(--nutui-indicator-dot-size, 3px) !default; +$indicator-dot-size: var(--nutui-indicator-dot-size, scale-px(3px)) !default; $indicator-dot-active-size: var( --nutui-indicator-dot-active-size, - 6px + scale-px(6px) ) !default; $indicator-border-radius: var( --nutui-indicator-border-radius, @@ -1946,21 +2190,30 @@ $menu-scroll-fixed-z-index: var( --nutui-menu-scroll-fixed-z-index, $mask-z-index ) !default; -$menu-bar-line-height: var(--nutui-menu-bar-line-height, 48px) !default; +$menu-bar-line-height: var( + --nutui-menu-bar-line-height, + scale-px(48px) +) !default; $menu-bar-box-shadow: var( --nutui-menu-bar-box-shadow, - 0 2px 12px rgba(89, 89, 89, 0.12) + 0 scale-px(2px) scale-px(12px) rgba(89, 89, 89, 0.12) ) !default; $menu-bar-opened-z-index: var(--nutui-menu-bar-opened-z-index, 1000) !default; -$menu-title-padding: var(--nutui-menu-title-padding, 0 8px) !default; +$menu-title-padding: var(--nutui-menu-title-padding, 0 scale-px(8px)) !default; $menu-title-font-size: var( --nutui-menu-title-font-size, $font-size-base ) !default; $menu-title-color: var(--nutui-menu-title-color, $color-title) !default; $menu-container-z-index: var(--nutui-menu-container-z-index, 1000) !default; -$menu-content-padding: var(--nutui-menu-content-padding, 12px 24px) !default; -$menu-content-max-height: var(--nutui-menu-content-max-height, 214px) !default; +$menu-content-padding: var( + --nutui-menu-content-padding, + scale-px(12px) scale-px(24px) +) !default; +$menu-content-max-height: var( + --nutui-menu-content-max-height, + scale-px(214px) +) !default; $menu-content-background-color: var( --nutui-menu-content-background-color, $color-background-overlay @@ -1977,8 +2230,11 @@ $menu-item-disabled-color: var( --nutui-menu-item-disabled-color, $color-text-disabled ) !default; -$menu-item-padding: var(--nutui-menu-item-padding, 12px 0) !default; -$menu-item-icon-margin: var(--nutui-menu-item-icon-margin, 8px) !default; +$menu-item-padding: var(--nutui-menu-item-padding, scale-px(12px) 0) !default; +$menu-item-icon-margin: var( + --nutui-menu-item-icon-margin, + scale-px(8px) +) !default; // collapse（✅） $collapse-item-border-bottom: var( @@ -1987,9 +2243,12 @@ $collapse-item-border-bottom: var( ) !default; $collapse-item-header-border-bottom: var( --nutui-collapse-item-header-border-bottom, - 1px solid $color-border + scale-px(1px) solid $color-border +) !default; +$collapse-item-padding: var( + --nutui-collapse-item-padding, + scale-px(13px) scale-px(26px) ) !default; -$collapse-item-padding: var(--nutui-collapse-item-padding, 13px 26px) !default; $collapse-item-color: var(--nutui-collapse-item-color, $color-title) !default; $collapse-item-disabled-color: var( --nutui-collapse-item-disabled-color, @@ -2001,7 +2260,7 @@ $collapse-item-font-size: var( ) !default; $collapse-item-line-height: var( --nutui-collapse-item-line-height, - 24px + scale-px(24px) ) !default; $collapse-item-extra-color: var( --nutui-collapse-item-extra-color, @@ -2009,7 +2268,7 @@ $collapse-item-extra-color: var( ) !default; $collapse-wrapper-content-padding: var( --nutui-collapse-wrapper-content-padding, - 12px 26px + scale-px(12px) scale-px(26px) ) !default; $collapse-wrapper-content-color: var( --nutui-collapse-wrapper-content-color, @@ -2030,14 +2289,17 @@ $collapse-wrapper-content-background-color: var( // searchbar（✅） $searchbar-width: var(--nutui-searchbar-width, 100%) !default; -$searchbar-padding: var(--nutui-searchbar-padding, 1px 8px) !default; +$searchbar-padding: var( + --nutui-searchbar-padding, + scale-px(1px) scale-px(8px) +) !default; $searchbar-background: var( --nutui-searchbar-background, $color-background-sunken ) !default; $searchbar-color: var(--nutui-searchbar-color, $color-title) !default; -$searchbar-gap: var(--nutui-searchbar-gap, 12px) !default; -$searchbar-inner-gap: var(--nutui-searchbar-inner-gap, 8px) !default; +$searchbar-gap: var(--nutui-searchbar-gap, scale-px(12px)) !default; +$searchbar-inner-gap: var(--nutui-searchbar-inner-gap, scale-px(8px)) !default; $searchbar-font-size: var( --nutui-searchbar-font-size, $font-size-base @@ -2048,17 +2310,20 @@ $searchbar-content-background: var( ) !default; $searchbar-content-border-radius: var( --nutui-searchbar-content-border-radius, - 8px + scale-px(8px) ) !default; $searchbar-content-round-border-radius: var( --nutui-searchbar-content-round-border-radius, - 19px + scale-px(19px) +) !default; +$searchbar-icon-size: var(--nutui-searchbar-icon-size, scale-px(20px)) !default; +$searchbar-input-height: var( + --nutui-searchbar-input-height, + scale-px(38px) ) !default; -$searchbar-icon-size: var(--nutui-searchbar-icon-size, 20px) !default; -$searchbar-input-height: var(--nutui-searchbar-input-height, 38px) !default; $searchbar-input-padding: var( --nutui-searchbar-input-padding, - 0 0 0 8px + 0 0 0 scale-px(8px) ) !default; $searchbar-input-text-color: var( --nutui-searchbar-input-text-color, @@ -2074,14 +2339,14 @@ $searchbar-input-text-align: var( ) !default; // segmented -$segmented-height: var(--nutui-segmented-height, 24px) !default; +$segmented-height: var(--nutui-segmented-height, scale-px(24px)) !default; $segmented-padding: var(--nutui-segmented-padding, $spacing-xxxs) !default; $segmented-border-radius: var(--nutui-segmented-radius, $radius-xs) !default; $segmented-background: var( --nutui-segmented-background, $color-mask-part ) !default; -$segmented-item-height: var(--nutui-segmented-height, 20px) !default; +$segmented-item-height: var(--nutui-segmented-height, scale-px(20px)) !default; $segmented-item-padding: var( --nutui-segmented-item-padding, 0 $spacing-xs @@ -2105,9 +2370,15 @@ $segmented-icon-margin-right: var( ) !default; // empty（✅） -$empty-padding: var(--nutui-empty-padding, 32px 40px) !default; -$empty-image-size: var(--nutui-empty-image-size, 160px) !default; -$empty-image-small-size: var(--nutui-empty-image-small-size, 120px) !default; +$empty-padding: var( + --nutui-empty-padding, + scale-px(32px) scale-px(40px) +) !default; +$empty-image-size: var(--nutui-empty-image-size, scale-px(160px)) !default; +$empty-image-small-size: var( + --nutui-empty-image-small-size, + scale-px(120px) +) !default; $empty-title-margin-top: var(--nutui-empty-title-margin-top, 0px) !default; $empty-background-color: var( --nutui-empty-background-color, @@ -2115,7 +2386,7 @@ $empty-background-color: var( ) !default; $empty-title-margin-bottom: var( --nutui-empty-title-margin-bottom, - 12px + scale-px(12px) ) !default; $empty-title-line-height: var( --nutui-empty-title-line-height, @@ -2128,28 +2399,43 @@ $empty-description-line-height: var( // cascader（✅） $cascader-font-size: var(--nutui-cascader-font-size, $font-size-base) !default; -$cascader-pane-height: var(--nutui-cascader-pane-height, 342px) !default; -$cascader-pane-paddingTop: var(--nutui-cascader-pane-paddingTop, 10px) !default; +$cascader-pane-height: var( + --nutui-cascader-pane-height, + scale-px(342px) +) !default; +$cascader-pane-paddingTop: var( + --nutui-cascader-pane-paddingTop, + scale-px(10px) +) !default; $cascader-icon-checklist-marginLeft: var( --nutui-cascader-icon-checklist-marginLeft, - 10px + scale-px(10px) ) !default; $cascader-tabs-item-padding: var( --nutui-cascader-tabs-item-padding, - 0 10px + 0 scale-px(10px) ) !default; $cascader-bar-padding: var( --nutui-cascader-bar-padding, - 24px 20px 17px + scale-px(24px) scale-px(20px) scale-px(17px) ) !default; $cascader-bar-font-size: var( --nutui-cascader-bar-font-size, $font-size-xl ) !default; -$cascader-bar-line-height: var(--nutui-cascader-bar-line-height, 20px) !default; +$cascader-bar-line-height: var( + --nutui-cascader-bar-line-height, + scale-px(20px) +) !default; $cascader-bar-color: var(--nutui-cascader-bar-color, $color-title) !default; -$cascader-item-height: var(--nutui-cascader-item-height, 40px) !default; -$cascader-item-padding: var(--nutui-cascader-item-padding, 10px 20px) !default; +$cascader-item-height: var( + --nutui-cascader-item-height, + scale-px(40px) +) !default; +$cascader-item-padding: var( + --nutui-cascader-item-padding, + scale-px(10px) scale-px(20px) +) !default; $cascader-item-margin: var(--nutui-cascader-item-margin, 0px) !default; $cascader-item-border-bottom: var( --nutui-cascader-item-border-bottom, @@ -2182,10 +2468,13 @@ $form-item-label-font-size: var( --nutui-form-item-label-font-size, $font-size-s ) !default; -$form-item-label-width: var(--nutui-form-item-label-width, 90px) !default; +$form-item-label-width: var( + --nutui-form-item-label-width, + scale-px(90px) +) !default; $form-item-label-margin-right: var( --nutui-form-item-label-margin-right, - 10px + scale-px(10px) ) !default; $form-item-label-text-align: var( --nutui-form-item-label-text-align, @@ -2193,7 +2482,7 @@ $form-item-label-text-align: var( ) !default; $form-item-required-margin-right: var( --nutui-form-item-required-margin-right, - 4px + scale-px(4px) ) !default; $form-item-body-font-size: var( --nutui-form-item-body-font-size, @@ -2221,15 +2510,15 @@ $skeleton-background: var( $skeleton-line-width: var(--nutui-skeleton-line-width, 100%) !default; $skeleton-line-small-height: var( --nutui-skeleton-line-small-height, - 16px + scale-px(16px) ) !default; $skeleton-line-normal-height: var( --nutui-skeleton-line-normal-height, - 24px + scale-px(24px) ) !default; $skeleton-line-large-height: var( --nutui-skeleton-line-large-height, - 32px + scale-px(32px) ) !default; $skeleton-line-border-radius: var( --nutui-skeleton-line-border-radius, @@ -2237,7 +2526,7 @@ $skeleton-line-border-radius: var( ) !default; // card（✅） -$card-border-radius: var(--nutui-card-border-radius, 4px) !default; +$card-border-radius: var(--nutui-card-border-radius, scale-px(4px)) !default; // grid（✅） $grid-border-width: var(--nutui-grid-border-width, 0px) !default; @@ -2248,13 +2537,16 @@ $grid-item-border-radius: var( ) !default; $grid-item-content-padding: var( --nutui-grid-item-content-padding, - 16px 8px + scale-px(16px) scale-px(8px) ) !default; $grid-item-content-bg-color: var( --nutui-grid-item-content-bg-color, var(--nutui-gray-1) ) !default; -$grid-item-text-margin: var(--nutui-grid-item-text-margin, 8px) !default; +$grid-item-text-margin: var( + --nutui-grid-item-text-margin, + scale-px(8px) +) !default; $grid-item-text-color: var(--nutui-grid-item-text-color, $color-title) !default; $grid-item-text-font-size: var( --nutui-grid-item-text-font-size, @@ -2263,7 +2555,7 @@ $grid-item-text-font-size: var( // table（✅） $table-border-color: var(--nutui-table-border-color, $color-border) !default; -$table-cols-padding: var(--nutui-table-cols-padding, 10px) !default; +$table-cols-padding: var(--nutui-table-cols-padding, scale-px(10px)) !default; $table-tr-even-bg-color: var( --nutui-table-tr-even-bg-color, $color-background @@ -2271,17 +2563,20 @@ $table-tr-even-bg-color: var( $table-tr-odd-bg-color: var(--nutui-table-tr-odd-bg-color, $white) !default; $table-sticky-left-shadow: var( --nutui-table-sticky-left-shadow, - 4px 0 8px 0 rgba(0, 0, 0, 0.1) + scale-px(4px) 0 scale-px(8px) 0 rgba(0, 0, 0, 0.1) ) !default; $table-sticky-right-shadow: var( --nutui-table-sticky-right-shadow, - -4px 0 8px 0 rgba(0, 0, 0, 0.1) + scale-px(-4px) 0 scale-px(8px) 0 rgba(0, 0, 0, 0.1) ) !default; // navbar（✅） $navbar-width: var(--nutui-navbar-width, 100%) !default; -$navbar-height: var(--nutui-navbar-height, 44px) !default; -$navbar-margin-bottom: var(--nutui-navbar-margin-bottom, 20px) !default; +$navbar-height: var(--nutui-navbar-height, scale-px(44px)) !default; +$navbar-margin-bottom: var( + --nutui-navbar-margin-bottom, + scale-px(20px) +) !default; $navbar-background: var(--nutui-navbar-background, $white) !default; $navbar-box-shadow: var(--nutui-navbar-box-shadow, none) !default; $navbar-color: var(--nutui-navbar-color, $color-title) !default; @@ -2305,9 +2600,12 @@ $sidebar-background-color: var( $color-background ) !default; $sidebar-border-radius: var(--nutui-sidebar-border-radius, 0) !default; -$sidebar-width: var(--nutui-sidebar-width, 104px) !default; -$sidebar-max-width: var(--nutui-sidebar-max-width, 128px) !default; -$sidebar-title-height: var(--nutui-sidebar-title-height, 52px) !default; +$sidebar-width: var(--nutui-sidebar-width, scale-px(104px)) !default; +$sidebar-max-width: var(--nutui-sidebar-max-width, scale-px(128px)) !default; +$sidebar-title-height: var( + --nutui-sidebar-title-height, + scale-px(52px) +) !default; $sidebar-inactive-font-size: var( --nutui-sidebar-inactive-font-size, $font-size-base @@ -2325,7 +2623,10 @@ $sidebar-active-color: var( $color-primary ) !default; $sidebar-item-background: var(--nutui-sidebar-item-background, $white) !default; -$sidebar-item-padding: var(--nutui-sidebar-item-padding, 24px 20px) !default; +$sidebar-item-padding: var( + --nutui-sidebar-item-padding, + scale-px(24px) scale-px(20px) +) !default; // elevator（✅） $elevator-list-bg-color: var(--nutui-elevator-list-bg-color, $white) !default; @@ -2336,11 +2637,11 @@ $elevator-list-font-size: var( $elevator-list-color: var(--nutui-elevator-list-color, $color-title) !default; $elevator-list-item-padding: var( --nutui-elevator-list-item-padding, - 0 36px 0 20px + 0 scale-px(36px) 0 scale-px(20px) ) !default; $elevator-list-item-name-height: var( --nutui-elevator-list-item-name-height, - 34px + scale-px(34px) ) !default; $elevator-list-item-code-font-size: var( @@ -2357,19 +2658,19 @@ $elevator-list-item-code-font-weight: var( ) !default; $elevator-list-item-code-height: var( --nutui-elevator-list-item-code-height, - 34px + scale-px(34px) ) !default; $elevator-list-item-code-width: var( --nutui-elevator-list-item-code-width, - 34px + scale-px(34px) ) !default; $elevator-list-item-code-border-bottom: var( --nutui-elevator-list-item-code-border-bottom, - 1px solid $color-border + scale-px(1px) solid $color-border ) !default; -$elevator-list-item-code-current-box-shadow: 0 3px 3px 1px - rgba(240, 240, 240, 1) !default; +$elevator-list-item-code-current-box-shadow: 0 scale-px(3px) scale-px(3px) + scale-px(1px) rgba(240, 240, 240, 1) !default; $elevator-list-item-code-current-bg-color: var( --nutui-elevator-list-item-code-current-bg-color, $color-text-disabled @@ -2380,15 +2681,15 @@ $elevator-list-item-code-current-border-radius: var( ) !default; $elevator-list-item-code-current-width: var( --nutui-elevator-list-item-code-current-width, - 45px + scale-px(45px) ) !default; $elevator-list-item-code-current-height: var( --nutui-elevator-list-item-code-current-height, - 45px + scale-px(45px) ) !default; $elevator-list-item-code-current-right: var( --nutui-elevator-list-item-code-current-right, - 60px + scale-px(60px) ) !default; $elevator-list-item-code-current-top: var( --nutui-elevator-list-item-code-current-top, @@ -2398,7 +2699,7 @@ $elevator-list-item-code-current-color: var( --nutui-elevator-list-item-code-current-color, $white ) !default; -$elevator-bars-right: var(--nutui-elevator-bars-right, 16px) !default; +$elevator-bars-right: var(--nutui-elevator-bars-right, scale-px(16px)) !default; $elevator-bars-top: var(--nutui-elevator-bars-top, 50%) !default; $elevator-bars-transform: var( --nutui-elevator-bars-transform, @@ -2427,17 +2728,20 @@ $elevator-list-fixed-bg-color: var( ) !default; $elevator-list-fixed-box-shadow: var( --nutui-elevator-list-fixed-box-shadow, - 0 0 10px #eee + 0 0 scale-px(10px) #eee ) !default; // list（✅） -$list-item-margin: var(--nutui-list-item-margin, 0 0 10px 0) !default; +$list-item-margin: var(--nutui-list-item-margin, 0 0 scale-px(10px) 0) !default; //addresslist $addresslist-bg: var(--nutui-addresslist-bg, #fff) !default; $addresslist-border: var(--nutui-addresslist-border, #f0f0f0) !default; $addresslist-font-color: var(--nutui-addresslist-font-color, #333333) !default; -$addresslist-font-size: var(--nutui-addresslist-font-size, 16px) !default; +$addresslist-font-size: var( + --nutui-addresslist-font-size, + scale-font-px(16px) +) !default; $addresslist-mask-bg: var( --nutui-addresslist-mask-bg, rgba(0, 0, 0, 0.4) @@ -2448,7 +2752,7 @@ $addresslist-addr-font-color: var( ) !default; $addresslist-addr-font-size: var( --nutui-addresslist-addr-font-size, - 12px + $font-size-s ) !default; $addresslist-set-bg: var(--nutui-addresslist-set-bg, #f5a623) !default; $addresslist-del-bg: var(--nutui-addresslist-del-bg, #e1251b) !default; @@ -2492,14 +2796,23 @@ $watermark-z-index: var( ) !default; // TrendArrow -$trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default; -$trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default; +$trendarrow-font-size: var( + --nutui-trendarrow-font-size, + $font-size-base +) !default; +$trendarrow-icon-margin: var( + --nutui-trendarrow-icon-margin, + scale-px(4px) +) !default; // animatingnumbers（✅） $countup-width: var(--nutui-countup-width, auto) !default; -$countup-height: var(--nutui-countup-height, 32px) !default; -$countup-base-size: var(--nutui-countup-base-size, 18px) !default; -$countup-border-radius: var(--nutui-countup-border-radius, 4px) !default; +$countup-height: var(--nutui-countup-height, scale-px(32px)) !default; +$countup-base-size: var(--nutui-countup-base-size, $font-size-xl) !default; +$countup-border-radius: var( + --nutui-countup-border-radius, + scale-px(4px) +) !default; $countup-lr-margin: var(--nutui-countup-lr-margin, 0) !default; $countup-bg-color: var(--nutui-countup-bg-color, inherit) !default; $countup-color: var(--nutui-countup-color, $color-title) !default; @@ -2520,21 +2833,30 @@ $row-content-light-background-color: var( ) !default; $row-content-border-radius: var( --nutui-row-content-border-radius, - 6px + scale-px(6px) +) !default; +$row-content-height: var(--nutui-row-content-height, scale-px(50px)) !default; +$row-content-line-height: var( + --nutui-row-content-line-height, + scale-px(40px) ) !default; -$row-content-height: var(--nutui-row-content-height, 50px) !default; -$row-content-line-height: var(--nutui-row-content-line-height, 40px) !default; $col-default-margin-bottom: var( --nutui-col-default-margin-bottom, - 15px + scale-px(15px) ) !default; // TrendArrow -$trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default; -$trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default; +$trendarrow-font-size: var( + --nutui-trendarrow-font-size, + $font-size-base +) !default; +$trendarrow-icon-margin: var( + --nutui-trendarrow-icon-margin, + scale-px(4px) +) !default; // Space -$space-gap: var(--nutui-space-gap, 8px) !default; +$space-gap: var(--nutui-space-gap, scale-px(8px)) !default; // loading $loading-icon-color: var(--nutui-loading-icon-color, $color-text-help) !default; @@ -2547,15 +2869,18 @@ $loading-lottie-background: var( ) !default; // ResultPage -$resultpage-width: var(--nutui-resultpage-width, 240px) !default; -$resultpage-icon-size: var(--nutui-resultpage-icon-size, 36px) !default; +$resultpage-width: var(--nutui-resultpage-width, scale-px(240px)) !default; +$resultpage-icon-size: var( + --nutui-resultpage-icon-size, + scale-px(36px) +) !default; $resultpage-icon-margin-bottom: var( --nutui-resultpage-icon-margin-bottom, - 12px + scale-px(12px) ) !default; $resultpage-title-margin-bottom: var( --nutui-resultpage-title-margin-bottom, - 12px + scale-px(12px) ) !default; $resultpage-title-font-size: var( --nutui-resultpage-title-font-size, @@ -2575,11 +2900,11 @@ $resultpage-description-color: var( ) !default; $resultpage-description-line-height: var( --nutui-resultpage-description-line-height, - 20px + scale-px(20px) ) !default; $resultpage-actions-margin-top: var( --nutui-resultpage-actions-margin-top, - 16px + scale-px(16px) ) !default; // quickenter diff --git a/src/types/spec/popup/base.ts b/src/types/spec/popup/base.ts index 713e8b9d00..03a297c7e3 100644 --- a/src/types/spec/popup/base.ts +++ b/src/types/spec/popup/base.ts @@ -32,4 +32,6 @@ export interface BasePopup extends BaseProps, BaseOverlay { onTouchStart: (height: number, e: any) => void onTouchEnd: (height: number, e: any) => void closeAriaLabel?: string + overlayProps?: any + animated?: boolean } diff --git a/src/types/spec/price/base.ts b/src/types/spec/price/base.ts index 82d67de4b3..74a21693e4 100644 --- a/src/types/spec/price/base.ts +++ b/src/types/spec/price/base.ts @@ -19,4 +19,5 @@ export interface BasePrice extends BaseProps { position: string size: PriceSize line: boolean + raw: boolean } diff --git a/src/types/spec/searchbar/h5.ts b/src/types/spec/searchbar/h5.ts index b533361f57..09f91658c7 100644 --- a/src/types/spec/searchbar/h5.ts +++ b/src/types/spec/searchbar/h5.ts @@ -1,4 +1,9 @@ -import type { ChangeEvent, FocusEvent, MouseEvent, InputHTMLAttributes } from 'react' +import type { + ChangeEvent, + FocusEvent, + MouseEvent, + InputHTMLAttributes, +} from 'react' import { BaseSearchBar } from './base' export interface WebSearchBarProps diff --git a/src/utils/index.taro.ts b/src/utils/index.taro.ts index dba3cac020..6c90276045 100644 --- a/src/utils/index.taro.ts +++ b/src/utils/index.taro.ts @@ -26,6 +26,7 @@ export * from './taro/px-transform' export * from './raf' export * from './render' export * from './rubberband' +export * from './scale-f.taro' export * from './sleep' export * from './supports-passive' export * from './to-array' diff --git a/src/utils/index.ts b/src/utils/index.ts index 0cf6130d54..ca3ea7f91a 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -20,6 +20,7 @@ export * from './px-check' export * from './raf' export * from './render' export * from './rubberband' +export * from './scale-f' export * from './sleep' export * from './supports-passive' export * from './to-array' diff --git a/src/utils/scale-f.taro.ts b/src/utils/scale-f.taro.ts new file mode 100644 index 0000000000..db672e4b1c --- /dev/null +++ b/src/utils/scale-f.taro.ts @@ -0,0 +1,237 @@ +/** + * Taro/H5 缩放系数：优先尝试站内原生桥，失败回退到视口规则， + * 并写入 --nut-scale-f / --nut-scale-font / --nut-scale-icon 供样式层消费。 + */ +import { canUseDom } from './can-use-dom' + +/** 原生 DongScreenAdapterPlugin.getScale 的典型返回结构 */ +type NativeScaleResponse = { + status?: string + data?: { + scale?: number | string + } +} + +/** jmfe 通用 callNative 签名 */ +type NativeCaller = ( + plugin: string, + method: string, + params: string, + extra: string +) => Promise + +/** 站内容器的 jmfe 桥接方法（可选） */ +declare global { + interface Window { + jmfe?: { + callNative?: NativeCaller + } + } +} + +/** 当前基准缩放（来自原生或视口计算） */ +let scale = 1 +/** 字体档位：标准、大字、老年 */ +export type ScaleProfile = 'standard' | 'large' | 'elderly' +/** 不同场景可选用不同放大比例（layout 等默认可不额外放大） */ +export type ScaleScene = 'layout' | 'font' | 'icon' | 'lego' +export type ScaleDevice = 'phone' | 'pad' + +/** 视口大于等于该宽度时按平板处理 */ +const PAD_BREAKPOINT = 600 +/** 平板默认整体缩放倍数 */ +const PAD_SCALE = 1.2 +/** 大字模式下仅 font 场景的相对倍率 */ +const LARGE_FONT_RATIO = 1.15 +/** 老年模式下 font/icon/lego 场景的相对倍率 */ +const ELDERLY_RATIO = 1.3 + +/** 全局当前档位，与 scale 共同参与 calcByProfile */ +let profile: ScaleProfile = 'standard' + +/** 仅 large / elderly 有效，其余一律视为 standard */ +function normalizeProfile(nextProfile?: ScaleProfile) { + if (nextProfile === 'large' || nextProfile === 'elderly') return nextProfile + return 'standard' +} + +/** 计算 CSS 变量要使用的场景缩放（基准 scale × 场景倍率） */ +function getCssSceneScale(scene: ScaleScene, baseScale: number) { + return baseScale * getSceneRatio(scene, profile) +} + +/** 将缩放值同步到 :root 的 --nut-scale-f / --nut-scale-font / --nut-scale-icon */ +function applyScaleCssVars(nextScale: number) { + if (!canUseDom) return + const rootStyle = document.documentElement.style + rootStyle.setProperty('--nut-scale-f', formatScaleValue(nextScale)) + rootStyle.setProperty( + '--nut-scale-font', + formatScaleValue(getCssSceneScale('font', nextScale)) + ) + rootStyle.setProperty( + '--nut-scale-icon', + formatScaleValue(getCssSceneScale('icon', nextScale)) + ) +} + +/** >1 保留两位小数字符串；否则取整，与 CSS 消费端约定一致 */ +function formatScaleValue(nextScale: number) { + if (nextScale > 1) { + return (Math.round(nextScale * 100) / 100).toFixed(2) + } + return `${Math.round(nextScale)}` +} + +/** 根据屏宽粗略区分 phone / pad */ +function getCurrentDevice(): ScaleDevice { + if (!canUseDom) return 'phone' + return window.innerWidth >= PAD_BREAKPOINT ? 'pad' : 'phone' +} + +/** 在 profile 与 scene 维度上叠加额外倍率（与全局 scale 相乘） */ +function getSceneRatio(scene: ScaleScene, currentProfile: ScaleProfile) { + if ( + currentProfile === 'elderly' && + (scene === 'font' || scene === 'icon' || scene === 'lego') + ) { + return ELDERLY_RATIO + } + if (currentProfile === 'large' && scene === 'font') { + return LARGE_FONT_RATIO + } + return 1 +} + +/** 输出 px 等单位时的取整规则：缩放>1 或强制时保留两位小数精度 */ +function roundByScaleRule( + value: number, + baseScale: number, + forceKeepTwoDecimals = false +) { + if (forceKeepTwoDecimals || baseScale > 1) { + return Math.round(value * 100) / 100 + } + return Math.round(value) +} + +/** 无原生桥时按屏宽推算 scale（含平板与 375 基准窄屏区间） */ +function getScaleByViewport() { + if (!canUseDom) return 1 + const deviceWidth = window.innerWidth + + if (!deviceWidth) return 1 + + if (deviceWidth >= PAD_BREAKPOINT) { + return PAD_SCALE + } + + if (deviceWidth >= 375 && deviceWidth < 600) { + const ratio = deviceWidth / 375 + return ratio >= 1.17 ? 1.17 : ratio + } + + return 1 +} + +/** 通过 jmfe.callNative 拉取 DongScreenAdapterPlugin；失败返回 null */ +async function getScaleByNative() { + if (!canUseDom || !window.jmfe?.callNative) return null + + try { + const res = await window.jmfe.callNative( + 'DongScreenAdapterPlugin', + 'getScale', + JSON.stringify({}), + '' + ) + if (res?.status === '0' && res.data?.scale !== undefined) { + const parsed = Number(res.data.scale) + if (Number.isFinite(parsed) && parsed > 0) { + return parsed + } + } + } catch { + // ignore native failures and fallback to viewport rule + } + + return null +} + +/** 统一获取缩放：站内原生优先，失败则用视口规则 */ +async function getScaleF() { + const nativeScale = await getScaleByNative() + if (nativeScale) return nativeScale + return getScaleByViewport() +} + +/** 校验后更新内存中的 scale，并写入 --nut-scale-f */ +function setScaleF(nextScale: number) { + const validScale = Number.isFinite(nextScale) && nextScale > 0 ? nextScale : 1 + scale = validScale + applyScaleCssVars(validScale) + return scale +} + +/** 重新拉取缩放；可选同时切换 profile，避免与当前值相同时重复写 DOM */ +async function refreshScaleF(nextProfile?: ScaleProfile) { + if (nextProfile) { + setScaleProfile(nextProfile) + } + const nextScale = await getScaleF() + if (!scale || nextScale !== scale) { + setScaleF(nextScale) + } + return scale +} + +/** 首次计算缩放并订阅 resize；返回卸载函数（SSR 下为空函数） */ +export function initScaleF(nextProfile?: ScaleProfile) { + if (!canUseDom) return () => {} + setScaleProfile(nextProfile) + + const handler = () => { + refreshScaleF() + } + + handler() + window.addEventListener('resize', handler) + + return () => { + window.removeEventListener('resize', handler) + } +} + +/** 更新全局 profile，并在当前 scale 下重刷 CSS 变量 */ +function setScaleProfile(nextProfile?: ScaleProfile) { + profile = normalizeProfile(nextProfile) + setScaleF(scale) + return profile +} + +/** calcByProfile 的可选覆盖项：临时指定档位、场景、scale 或设备 */ +type CalcByProfileOptions = { + profile?: ScaleProfile + scene?: ScaleScene + scale?: number + device?: ScaleDevice +} + +/** 按档位与场景将设计稿基准值换算为实际数值：base × 场景倍率 × 当前 scale，再按规则取整。 */ +export function calcByProfile( + baseValue: number, + options: CalcByProfileOptions = {} +) { + const currentProfile = normalizeProfile(options.profile ?? profile) + const scene = options.scene ?? 'layout' + const currentScale = + Number.isFinite(options.scale) && Number(options.scale) > 0 + ? Number(options.scale) + : scale + const device = options.device ?? getCurrentDevice() + const ratio = getSceneRatio(scene, currentProfile) + const rawValue = baseValue * ratio * currentScale + const forceKeepTwoDecimals = + scene === 'font' && currentProfile === 'large' && device === 'pad' + return roundByScaleRule(rawValue, currentScale, forceKeepTwoDecimals) +} diff --git a/src/utils/scale-f.ts b/src/utils/scale-f.ts new file mode 100644 index 0000000000..38ded9c371 --- /dev/null +++ b/src/utils/scale-f.ts @@ -0,0 +1,241 @@ +/** + * 响应式缩放系数（--nut-scale-f）：结合京东站内原生桥与站外视口规则， + * 写入根节点 CSS 变量，供布局/字号/icon 等按比例换算（见 calcByProfile）。 + */ +import { canUseDom } from './can-use-dom' + +/** 原生 DongScreenAdapterPlugin.getScale 的典型返回结构 */ +type NativeScaleResponse = { + status?: string + data?: { + scale?: number | string + } +} + +/** jmfe 通用 callNative 签名 */ +type NativeCaller = ( + plugin: string, + method: string, + params: string, + extra: string +) => Promise + +/** 站内容器的 jmfe 桥接方法（可选） */ +declare global { + interface Window { + jmfe?: { + callNative?: NativeCaller + } + } +} + +/** 当前基准缩放（来自原生或视口计算） */ +let scale = 1 + +/** 字体档位：标准、大字、老年 */ +export type ScaleProfile = 'standard' | 'large' | 'elderly' +/** 不同场景可选用不同放大比例（layout 等默认可不额外放大） */ +export type ScaleScene = 'layout' | 'font' | 'icon' | 'lego' +export type ScaleDevice = 'phone' | 'pad' + +/** 视口大于等于该宽度时按平板处理 */ +const PAD_BREAKPOINT = 600 +/** 平板默认整体缩放倍数 */ +const PAD_SCALE = 1.2 +/** 大字模式下仅 font 场景的相对倍率 */ +const LARGE_FONT_RATIO = 1.15 +/** 老年模式下 font/icon/lego 场景的相对倍率 */ +const ELDERLY_RATIO = 1.3 + +/** 全局当前档位，与 scale 共同参与 calcByProfile */ +let profile: ScaleProfile = 'standard' + +/** 仅 large / elderly 有效，其余一律视为 standard */ +function normalizeProfile(nextProfile?: ScaleProfile) { + if (nextProfile === 'large' || nextProfile === 'elderly') return nextProfile + return 'standard' +} + +/** 计算 CSS 变量要使用的场景缩放（基准 scale × 场景倍率） */ +function getCssSceneScale(scene: ScaleScene, baseScale: number) { + return baseScale * getSceneRatio(scene, profile) +} + +/** 将缩放值同步到 :root 的 --nut-scale-f / --nut-scale-font / --nut-scale-icon */ +function applyScaleCssVars(nextScale: number) { + if (!canUseDom) return + const rootStyle = document.documentElement.style + rootStyle.setProperty('--nut-scale-f', formatScaleValue(nextScale)) + rootStyle.setProperty( + '--nut-scale-font', + formatScaleValue(getCssSceneScale('font', nextScale)) + ) + rootStyle.setProperty( + '--nut-scale-icon', + formatScaleValue(getCssSceneScale('icon', nextScale)) + ) +} + +/** >1 保留两位小数字符串；否则取整，与 CSS 消费端约定一致 */ +function formatScaleValue(nextScale: number) { + if (nextScale > 1) { + return (Math.round(nextScale * 100) / 100).toFixed(2) + } + return `${Math.round(nextScale)}` +} + +/** 根据屏宽粗略区分 phone / pad */ +function getCurrentDevice(): ScaleDevice { + if (!canUseDom) return 'phone' + return window.innerWidth >= PAD_BREAKPOINT ? 'pad' : 'phone' +} + +/** 在 profile 与 scene 维度上叠加额外倍率（与全局 scale 相乘） */ +function getSceneRatio(scene: ScaleScene, currentProfile: ScaleProfile) { + if ( + currentProfile === 'elderly' && + (scene === 'font' || scene === 'icon' || scene === 'lego') + ) { + return ELDERLY_RATIO + } + if (currentProfile === 'large' && scene === 'font') { + return LARGE_FONT_RATIO + } + return 1 +} + +/** 输出 px 等单位时的取整规则：缩放>1 或强制时保留两位小数精度 */ +function roundByScaleRule( + value: number, + baseScale: number, + forceKeepTwoDecimals = false +) { + if (forceKeepTwoDecimals || baseScale > 1) { + return Math.round(value * 100) / 100 + } + return Math.round(value) +} + +/** 无原生桥时按屏宽推算 scale（含平板与 375 基准窄屏区间） */ +function getScaleByViewport() { + if (!canUseDom) return 1 + const deviceWidth = window.innerWidth + + if (!deviceWidth) return 1 + + if (deviceWidth >= PAD_BREAKPOINT) { + return PAD_SCALE + } + + if (deviceWidth >= 375 && deviceWidth < 600) { + const ratio = deviceWidth / 375 + return ratio >= 1.17 ? 1.17 : ratio + } + + return 1 +} + +/** 通过 jmfe.callNative 拉取 DongScreenAdapterPlugin；失败返回 null */ +async function getScaleByNative() { + if (!canUseDom || !window.jmfe?.callNative) return null + + try { + const res = await window.jmfe.callNative( + 'DongScreenAdapterPlugin', + 'getScale', + JSON.stringify({}), + '' + ) + if (res?.status === '0' && res.data?.scale !== undefined) { + const parsed = Number(res.data.scale) + if (Number.isFinite(parsed) && parsed > 0) { + return parsed + } + } + } catch { + /* 原生异常时由 getScaleF 回退到视口规则 */ + } + + return null +} + +/** 统一获取缩放：站内原生优先，失败则用视口规则 */ +async function getScaleF() { + const nativeScale = await getScaleByNative() + if (nativeScale) return nativeScale + return getScaleByViewport() +} + +/** 校验后更新内存中的 scale，并写入 --nut-scale-f */ +function setScaleF(nextScale: number) { + const validScale = Number.isFinite(nextScale) && nextScale > 0 ? nextScale : 1 + scale = validScale + applyScaleCssVars(validScale) + return scale +} + +/** 重新拉取缩放；可选同时切换 profile，避免与当前值相同时重复写 DOM */ +async function refreshScaleF(nextProfile?: ScaleProfile) { + if (nextProfile) { + setScaleProfile(nextProfile) + } + const nextScale = await getScaleF() + if (!scale || nextScale !== scale) { + setScaleF(nextScale) + } + return scale +} + +/** 首次计算缩放并订阅 resize；返回卸载函数（SSR 下为空函数） */ +export function initScaleF(nextProfile?: ScaleProfile) { + if (!canUseDom) return () => {} + setScaleProfile(nextProfile) + + const handler = () => { + refreshScaleF() + } + + handler() + window.addEventListener('resize', handler) + + return () => { + window.removeEventListener('resize', handler) + } +} + +/** 更新全局 profile，并在当前 scale 下重刷 CSS 变量 */ +function setScaleProfile(nextProfile?: ScaleProfile) { + profile = normalizeProfile(nextProfile) + // profile 切换后需要重新应用当前缩放值。 + setScaleF(scale) + return profile +} + +/** calcByProfile 的可选覆盖项：临时指定档位、场景、scale 或设备 */ +type CalcByProfileOptions = { + profile?: ScaleProfile + scene?: ScaleScene + scale?: number + device?: ScaleDevice +} + +/** + * 按档位与场景将设计稿基准值换算为实际数值：base × 场景倍率 × 当前 scale，再按规则取整。 + */ +export function calcByProfile( + baseValue: number, + options: CalcByProfileOptions = {} +) { + const currentProfile = normalizeProfile(options.profile ?? profile) + const scene = options.scene ?? 'layout' + const currentScale = + Number.isFinite(options.scale) && Number(options.scale) > 0 + ? Number(options.scale) + : scale + const device = options.device ?? getCurrentDevice() + const ratio = getSceneRatio(scene, currentProfile) + const rawValue = baseValue * ratio * currentScale + const forceKeepTwoDecimals = + scene === 'font' && currentProfile === 'large' && device === 'pad' + return roundByScaleRule(rawValue, currentScale, forceKeepTwoDecimals) +} diff --git a/src/utils/should-render-price-raw.ts b/src/utils/should-render-price-raw.ts index 7a8d43ea60..35fa961a80 100644 --- a/src/utils/should-render-price-raw.ts +++ b/src/utils/should-render-price-raw.ts @@ -1,6 +1,8 @@ -const CJK = /[\u4E00-\u9FFF]/ const RE_NUM = /\d+(?:\.\d+)?/g +// 价格合法字符：数字、小数点、负号、大写货币代码（HK USD EUR 等）、常见货币符号 Unicode 区块（含全角 ￥） +const PRICE_CHARS = /^[\d.\-A-Z¥￥$€£₩₹₽₺₴₪฿\u20A0-\u20CF\uFE69\uFF04\uFFE5]*$/ + function hasNoExtractablePrice(s: string) { const t = s.trim() if (!t) return true @@ -14,7 +16,6 @@ export function shouldRenderPriceAsRaw(s: string) { return true } const t = s.trim() - if (!CJK.test(t)) return false const matches = Array.from(t.matchAll(RE_NUM)) if (matches.length < 2) return false const a = matches[0] @@ -22,5 +23,9 @@ export function shouldRenderPriceAsRaw(s: string) { const i0 = a.index! const i1 = b.index! const between = t.slice(i0 + a[0].length, i1) - return CJK.test(between) + return !PRICE_CHARS.test(between) +} + +export function hasNonPriceChars(s: string): boolean { + return !PRICE_CHARS.test(s) }