From 0a4eda4be699705c30d63a6984ef4166c718b07c Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Mon, 2 Feb 2026 10:57:10 +0800 Subject: [PATCH 01/11] =?UTF-8?q?fix:=20=E6=81=A2=E5=A4=8D=E5=8E=9F?= =?UTF-8?q?=E6=9C=89=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 +- .../avatarcropper/avatarcropper.taro.tsx | 8 ++-- src/packages/button/button.taro.tsx | 37 +++++++++---------- src/packages/lottie/lottiemp.taro.tsx | 25 +++++++------ src/packages/overlay/overlay.taro.tsx | 31 ++++++++-------- src/packages/overlay/overlay.tsx | 6 --- src/packages/rate/rate.taro.tsx | 11 +++--- 7 files changed, 58 insertions(+), 64 deletions(-) diff --git a/package.json b/package.json index 4f4d561967..9c54d1de8e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nutui/nutui-react-taro", - "version": "3.0.19-cpp.25", + "version": "3.0.18", "style": "dist/style.css", "main": "dist/nutui.react.umd.js", "module": "dist/es/packages/nutui.react.build.js", @@ -109,7 +109,7 @@ "dependencies": { "@babel/runtime": "^7.23.9", "@nutui/icons-react": "^3.0.2-beta.5", - "@nutui/icons-react-taro": "3.0.2-cpp.3.beta.5", + "@nutui/icons-react-taro": "^3.0.2-beta.3", "@nutui/jdesign-icons-react-taro": "1.0.6-beta.2", "@nutui/touch-emulator": "^1.0.0", "@nutui/lottie-miniprogram": "^1.0.2", 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/button/button.taro.tsx b/src/packages/button/button.taro.tsx index 44a0183041..7ddc656031 100644 --- a/src/packages/button/button.taro.tsx +++ b/src/packages/button/button.taro.tsx @@ -2,18 +2,19 @@ import React, { CSSProperties, useCallback, useMemo } from 'react' import type { MouseEvent } from 'react' import classNames from 'classnames' import { - // ButtonProps as MiniProgramButtonProps, + ButtonProps as MiniProgramButtonProps, View, - // Button as TaroButton, + Button as TaroButton, } from '@tarojs/components' import { Loading } from '@nutui/icons-react-taro' +import { getEnv } from '@tarojs/taro' import { BasicComponent, ComponentDefaults } from '@/utils/typings' import { harmony } from '@/utils/taro/platform' -// type OmitMiniProgramButtonProps = Omit< -// MiniProgramButtonProps, -// 'size' | 'type' | 'onClick' | 'style' -// > +type OmitMiniProgramButtonProps = Omit< + MiniProgramButtonProps, + 'size' | 'type' | 'onClick' | 'style' +> export type ButtonType = | 'default' @@ -26,11 +27,9 @@ export type ButtonSize = 'xlarge' | 'large' | 'normal' | 'small' | 'mini' export type ButtonShape = 'square' | 'round' export type ButtonFill = 'solid' | 'outline' | 'dashed' | 'none' -// export interface ButtonProps -// extends BasicComponent, -// OmitMiniProgramButtonProps { - -export interface ButtonProps extends BasicComponent { +export interface ButtonProps + extends BasicComponent, + OmitMiniProgramButtonProps { color: string shape: ButtonShape type: ButtonType @@ -77,7 +76,7 @@ export const Button = React.forwardRef>( children, className, style, - // formType, + formType, nativeType, onClick, ...rest @@ -146,18 +145,17 @@ export const Button = React.forwardRef>( className ) - // if (getEnv() === 'WEB') { - // ;(rest as any).type = formType - // } + if (getEnv() === 'WEB') { + ;(rest as any).type = formType + } return ( // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore // eslint-disable-next-line react/button-has-type - // handleClick(e as any)} @@ -177,8 +175,7 @@ export const Button = React.forwardRef>( )} {rightIcon} - - // + ) } ) 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/overlay/overlay.taro.tsx b/src/packages/overlay/overlay.taro.tsx index 5bfe2f2f9f..328835b230 100644 --- a/src/packages/overlay/overlay.taro.tsx +++ b/src/packages/overlay/overlay.taro.tsx @@ -1,4 +1,5 @@ import React, { FunctionComponent, useEffect, useState } from 'react' +import { CSSTransition } from 'react-transition-group' import classNames from 'classnames' import { ITouchEvent, View } from '@tarojs/components' import { ComponentDefaults } from '@/utils/typings' @@ -59,7 +60,7 @@ export const Overlay: FunctionComponent< ) - return <>{renderOverlay()} - - // return ( - // - // {renderOverlay()} - // - // ) + return ( + + {renderOverlay()} + + ) } Overlay.displayName = 'NutOverlay' 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/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) { From 721f05e173d8a408b366be563a8f86f0bfbb6ea1 Mon Sep 17 00:00:00 2001 From: xiyehutao <113820392+xiyehutao@users.noreply.github.com> Date: Wed, 29 Apr 2026 11:47:15 +0800 Subject: [PATCH 02/11] =?UTF-8?q?fix:=20calendar=E6=96=87=E6=9C=ACcolor?= =?UTF-8?q?=E7=BB=A7=E6=89=BF=E9=97=AE=E9=A2=98&calendarCard=E9=A1=B6?= =?UTF-8?q?=E9=83=A8=E7=AE=AD=E5=A4=B4icon=E6=9B=BF=E6=8D=A2=E4=B8=BAImage?= =?UTF-8?q?=E6=A0=87=E7=AD=BE=20(#3444)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/calendar/calendar.scss | 31 +++++++++++++++++++++ src/packages/calendarcard/calendarcard.scss | 13 +++++++++ src/packages/calendarcard/icon.taro.tsx | 9 ++---- 3 files changed, 46 insertions(+), 7 deletions(-) diff --git a/src/packages/calendar/calendar.scss b/src/packages/calendar/calendar.scss index 7a394555d6..9ac08b7527 100644 --- a/src/packages/calendar/calendar.scss +++ b/src/packages/calendar/calendar.scss @@ -127,9 +127,20 @@ font-weight: $calendar-day-font-weight; margin-bottom: 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, @@ -173,11 +184,21 @@ .nut-calendar-day-info { color: $color-primary-text; } + + .nut-calendar-day-day, + .nut-calendar-day-info-curr { + color: $color-primary-text; + } } &-disabled { color: $calendar-disable-color !important; + .nut-calendar-day-day, + .nut-calendar-day-info-curr { + color: $calendar-disable-color; + } + .nut-calendar-day-info-curr { display: none; } @@ -187,10 +208,20 @@ background-color: $calendar-choose-background-color; color: $calendar-choose-color; + .nut-calendar-day-day, + .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-day, + .nut-calendar-day-info-curr { + color: $calendar-disable-color; + } + .nut-calendar-day-info-curr { display: none; } diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss index 56042a0b92..b824150001 100644 --- a/src/packages/calendarcard/calendarcard.scss +++ b/src/packages/calendarcard/calendarcard.scss @@ -49,6 +49,13 @@ margin-bottom: 4px; text-align: center; + // 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。 + &-top, + &-inner, + &-bottom { + color: $color-title; + } + &.header { cursor: auto; } @@ -66,6 +73,12 @@ &.weekend { color: $calendar-choose-color; + + .nut-calendarcard-day-top, + .nut-calendarcard-day-inner, + .nut-calendarcard-day-bottom { + color: $calendar-choose-color; + } } &.active { diff --git a/src/packages/calendarcard/icon.taro.tsx b/src/packages/calendarcard/icon.taro.tsx index 1223f86495..9ac1e4e3e3 100644 --- a/src/packages/calendarcard/icon.taro.tsx +++ b/src/packages/calendarcard/icon.taro.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react' -import { Image, View } from '@tarojs/components' +import { Image } from '@tarojs/components' let left = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNNi42MDUgOS40OWEuNzcxLjc3MSAwIDAgMSAwLS45OGwzLjYtNC4zNzJhLjc3MS43NzEgMCAwIDEgMS4xOS45ODFMOC4yIDlsMy4xOTcgMy44ODFhLjc3MS43NzEgMCAxIDEtMS4xOTEuOThsLTMuNi00LjM3eiIvPjwvc3ZnPg==' @@ -30,15 +30,10 @@ if (process.env.TARO_ENV === 'jdharmony_cpp') { 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 - } - return + return } export const ArrowLeft: FC = () => From 7ad419619af08767b66cf0bb5bced6a1c80b62af Mon Sep 17 00:00:00 2001 From: xiyehutao <1254524557@qq.com> Date: Wed, 29 Apr 2026 17:04:45 +0800 Subject: [PATCH 03/11] =?UTF-8?q?feat:=20=E8=A7=A3=E5=86=B3calendar?= =?UTF-8?q?=E4=B8=ADweekend=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=85=88=E7=BA=A7?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/calendar/calendar.scss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/packages/calendar/calendar.scss b/src/packages/calendar/calendar.scss index 9ac08b7527..3ca26a783f 100644 --- a/src/packages/calendar/calendar.scss +++ b/src/packages/calendar/calendar.scss @@ -181,12 +181,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-day, - .nut-calendar-day-info-curr { + &.nut-calendar-day-active .nut-calendar-day-day, + &.nut-calendar-day-active .nut-calendar-day-info-curr { color: $color-primary-text; } } @@ -194,8 +194,8 @@ &-disabled { color: $calendar-disable-color !important; - .nut-calendar-day-day, - .nut-calendar-day-info-curr { + &.nut-calendar-day-disabled .nut-calendar-day-day, + &.nut-calendar-day-disabled .nut-calendar-day-info-curr { color: $calendar-disable-color; } @@ -208,8 +208,8 @@ background-color: $calendar-choose-background-color; color: $calendar-choose-color; - .nut-calendar-day-day, - .nut-calendar-day-info-curr { + &.nut-calendar-day-choose .nut-calendar-day-day, + &.nut-calendar-day-choose .nut-calendar-day-info-curr { color: $calendar-choose-color; } @@ -217,8 +217,8 @@ background-color: $calendar-choose-disable-background-color; color: $calendar-disable-color !important; - .nut-calendar-day-day, - .nut-calendar-day-info-curr { + &.nut-calendar-day-choose-disabled .nut-calendar-day-day, + &.nut-calendar-day-choose-disabled .nut-calendar-day-info-curr { color: $calendar-disable-color; } From dc4f1e2819cc4838b585b9c78cb74ee3817f3371 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 29 Apr 2026 21:43:54 +0800 Subject: [PATCH 04/11] =?UTF-8?q?feat:=20=E5=A4=9A=E5=B0=BA=E5=AF=B8?= =?UTF-8?q?=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/index/index.config.ts | 2 + src/packages/actionsheet/actionsheet.scss | 8 +- src/packages/address/address.scss | 84 +- src/packages/animate/animate.scss | 52 +- src/packages/audio/audio.scss | 34 +- src/packages/avatar/avatar.scss | 2 +- src/packages/avatarcropper/avatarcropper.scss | 4 +- src/packages/avatargroup/avatargroup.scss | 8 +- src/packages/badge/badge.scss | 2 +- src/packages/barrage/barrage.scss | 4 +- src/packages/button/button.scss | 2 +- src/packages/calendar/calendar.scss | 49 +- src/packages/calendarcard/calendarcard.scss | 22 +- src/packages/card/card.scss | 30 +- src/packages/cell/cell.scss | 6 +- src/packages/cellgroup/cellgroup.scss | 8 +- src/packages/checkbox/checkbox.scss | 50 +- src/packages/checkboxgroup/checkboxgroup.scss | 12 +- src/packages/collapseitem/collapseitem.scss | 16 +- src/packages/countdown/countdown.scss | 6 +- src/packages/dialog/dialog.scss | 4 +- src/packages/divider/divider.scss | 4 +- src/packages/elevator/elevator.scss | 6 +- src/packages/ellipsis/ellipsis.scss | 2 +- src/packages/empty/empty.scss | 8 +- src/packages/fixednav/fixednav.scss | 77 +- src/packages/formitem/formitem.scss | 20 +- src/packages/grid/grid.scss | 2 +- src/packages/griditem/griditem.scss | 4 +- .../hoverbuttonitem/hoverbuttonitem.scss | 30 +- src/packages/imagepreview/imagepreview.scss | 20 +- src/packages/indicator/indicator.scss | 26 +- .../infiniteloading/infiniteloading.scss | 8 +- src/packages/input/input.scss | 8 +- src/packages/inputnumber/inputnumber.scss | 12 +- src/packages/menuitem/menuitem.scss | 4 +- src/packages/navbar/navbar.scss | 28 +- src/packages/noticebar/noticebar.scss | 4 +- src/packages/notify/notify.scss | 16 +- .../numberkeyboard/numberkeyboard.scss | 14 +- src/packages/pagination/pagination.scss | 10 +- src/packages/popover/popover.scss | 60 +- src/packages/popup/popup.scss | 6 +- src/packages/progress/progress.scss | 2 +- src/packages/pulltorefresh/pulltorefresh.scss | 4 +- src/packages/radio/radio.scss | 11 +- src/packages/radiogroup/radiogroup.scss | 6 +- src/packages/range/range.scss | 81 +- src/packages/rate/rate.scss | 16 +- src/packages/resultpage/resultpage.scss | 4 +- src/packages/searchbar/searchbar.scss | 38 +- src/packages/segmented/segmented.scss | 12 +- src/packages/shortpassword/shortpassword.scss | 48 +- src/packages/skeleton/skeleton.scss | 6 +- src/packages/step/step.scss | 8 +- src/packages/steps/steps.scss | 44 +- src/packages/swipe/swipe.scss | 6 +- src/packages/swiper/swiper.scss | 8 +- src/packages/switch/switch.scss | 16 +- src/packages/tabbar/tabbar.scss | 20 +- src/packages/tabbaritem/tabbaritem.scss | 14 +- src/packages/table/table.scss | 26 +- src/packages/tabs/tabs.scss | 38 +- src/packages/tag/tag.scss | 6 +- src/packages/textarea/textarea.scss | 12 +- src/packages/timedetail/timedetail.scss | 10 +- src/packages/timeselect/timeselect.scss | 4 +- src/packages/toast/toast.scss | 20 +- src/packages/tour/tour.scss | 8 +- src/packages/uploader/uploader.scss | 28 +- src/packages/virtuallist/virtuallist.scss | 18 +- src/sites/mobile/main.tsx | 2 + src/styles/variables.scss | 1052 +++++++++++------ src/utils/index.taro.ts | 1 + src/utils/index.ts | 1 + src/utils/scale-f.taro.ts | 20 + src/utils/scale-f.ts | 110 ++ 77 files changed, 1475 insertions(+), 999 deletions(-) create mode 100644 src/utils/scale-f.taro.ts create mode 100644 src/utils/scale-f.ts 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..1f9b2d11ef 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) scale-px(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: scale-px(15px); color: $color-primary-text; } } @@ -49,12 +49,12 @@ .nut-address { &-title { - font-size: 14px; + font-size: scale-px(14px); 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: scale-px(12px); + 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: scale-px(12px); 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: scale-px(10px); + 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..efd4939a90 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); } } } @@ -39,35 +39,35 @@ display: flex; align-items: center; width: 100%; - margin: 0px auto; - padding: 10px 0; + margin: scale-px(0px) auto; + 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: scale-px(12px); 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/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/calendar/calendar.scss b/src/packages/calendar/calendar.scss index 7a394555d6..ab41cff0ed 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: scale-px(0px) scale-px(0px) scale-px(12px) scale-px(12px); + box-shadow: scale-px(0px) scale-px(4px) scale-px(10px) scale-px(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,7 +126,7 @@ width: $calendar-day-width; height: $calendar-day-height; font-weight: $calendar-day-font-weight; - margin-bottom: 4px; + margin-bottom: scale-px(4px); &:nth-child(7n + 0), &:nth-child(7n + 1) { @@ -135,22 +136,22 @@ &-info, &-info-curr { position: absolute; - bottom: 5px; + bottom: scale-px(5px); width: 100%; - font-size: 12px; - line-height: 14px; + font-size: scale-px(12px); + 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 { @@ -159,13 +160,13 @@ border-radius: $calendar-day-active-border-radius; &.active-start { - border-radius: 0px; + border-radius: scale-px(0px); border-top-left-radius: $calendar-day-active-border-radius; border-bottom-left-radius: $calendar-day-active-border-radius; } &.active-end { - border-radius: 0px; + border-radius: scale-px(0px); border-top-right-radius: $calendar-day-active-border-radius; border-bottom-right-radius: $calendar-day-active-border-radius; } @@ -206,9 +207,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 +220,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..6f94b3f943 100644 --- a/src/packages/calendarcard/calendarcard.scss +++ b/src/packages/calendarcard/calendarcard.scss @@ -1,6 +1,6 @@ .nut-calendarcard { background: $color-background-overlay; - border-radius: 12px; + border-radius: scale-px(12px); overflow: hidden; font-size: $calendar-base-font-size; color: $color-title; @@ -17,15 +17,15 @@ 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); } } } @@ -44,9 +44,9 @@ 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; &.header { @@ -59,9 +59,9 @@ align-items: center; justify-content: center; width: 100%; - height: 12px; - font-size: 12px; - line-height: 12px; + height: scale-px(12px); + font-size: scale-px(12px); + line-height: scale-px(12px); } &.weekend { @@ -132,12 +132,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/card/card.scss b/src/packages/card/card.scss index ba888dd854..faa2081ec8 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: scale-px(14px); 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: scale-px(12px); + 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..491d8cd40e 100644 --- a/src/packages/checkbox/checkbox.scss +++ b/src/packages/checkbox/checkbox.scss @@ -11,10 +11,11 @@ } &-icon-wrap { - font-size: 0px; - line-height: 0px; + font-size: scale-px(0px); + line-height: scale-px(0px); border-radius: 50%; - box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2); + box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px) + rgba(255, 15, 35, 0.2); } &-icon-checked { @@ -43,7 +44,8 @@ &-icon-indeterminate { color: $color-primary; background-color: $white; - box-shadow: 0px 2px 4px 0px #ff0f2333; + box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px) + #ff0f2333; border-radius: 50%; &.nut-checkbox-icon-disabled { @@ -76,14 +78,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 +96,7 @@ &-disabled { color: $color-text-disabled; - border: 1px solid $checkbox-button-background; + border: scale-px(1px) solid $checkbox-button-background; } &-icon { @@ -103,35 +105,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-px(10px) solid transparent; + border-left: scale-px(10px) solid transparent; + border-bottom: scale-px(10px) solid $color-primary; + border-right: scale-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; 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: scale-px(12px); + 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 +141,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 +178,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..faf0cb2d64 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: scale-px(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 5e49bf26b8..4b72ef101e 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%; @@ -130,7 +130,7 @@ .nut-button { min-width: $dialog-footer-button-min-width; border-radius: $dialog-footer-button-border; - padding: var(--nutui-button-large-padding, 0 12px); + padding: var(--nutui-button-large-padding, 0 scale-px(12px)); } &-cancel.nut-dialog-footer-cancel { diff --git a/src/packages/divider/divider.scss b/src/packages/divider/divider.scss index bb5c5bb6cc..a9a6aac260 100644 --- a/src/packages/divider/divider.scss +++ b/src/packages/divider/divider.scss @@ -51,9 +51,9 @@ /* #ifndef dynamic*/ display: inline-flex; /* #endif */ - width: 0px; + width: scale-px(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..de82c6d945 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(5scale-px(0px)); &.active { .nut-fixednav-btn { @@ -29,17 +29,18 @@ box-sizing: border-box; position: absolute; z-index: $fixednav-index; - width: 70px; + width: scale-px(7scale-px(0px)); height: 100%; background: $fixednav-button-background; - box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px) + rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; .text { - width: 24px; - line-height: 13px; + width: scale-px(2scale-px(4px)); + line-height: scale-px(1scale-px(3px)); font-size: $font-size-s; color: #fff; flex-shrink: 0; @@ -59,7 +60,8 @@ 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) scale-px(0px) + rgba(0, 0, 0, 0.2); &-item { position: relative; @@ -69,19 +71,19 @@ flex-direction: column; justify-content: center; align-items: center; - min-width: 50px; + min-width: scale-px(5scale-px(0px)); flex-shrink: 0; color: $fixednav-color; .nut-fixednav-list-text { - font-size: 10px; + font-size: scale-px(1scale-px(0px)); } } &-image { - width: 20px; - height: 20px; - margin-bottom: 2px; + width: scale-px(2scale-px(0px)); + height: scale-px(2scale-px(0px)); + margin-bottom: scale-px(2px); } } @@ -89,19 +91,21 @@ right: 0; .nut-fixednav-btn { right: 0; - border-radius: 45px 0px 0px 45px; + border-radius: scale-px(4scale-px(5px)) scale-px(0px) scale-px(0px) + scale-px(4scale-px(5px)); .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(2scale-px(5px)) scale-px(0px) scale-px(0px) + scale-px(2scale-px(5px)); padding: { - left: 20px; - right: 80px; + left: scale-px(2scale-px(0px)); + right: scale-px(8scale-px(0px)); } } } @@ -111,9 +115,9 @@ .nut-fixednav-btn { flex-direction: row-reverse; left: 0; - border-radius: 0 45px 45px 0; + border-radius: 0 scale-px(4scale-px(5px)) scale-px(4scale-px(5px)) 0; .nut-icon { - margin-left: 5px; + margin-left: scale-px(5px); transform: rotate(180deg); } } @@ -121,10 +125,11 @@ .nut-fixednav-list { transform: translateX(-100%); left: 0; - border-radius: 0px 25px 25px 0px; + border-radius: scale-px(0px) scale-px(2scale-px(5px)) + scale-px(2scale-px(5px)) scale-px(0px); padding: { - left: 80px; - right: 20px; + left: scale-px(8scale-px(0px)); + right: scale-px(2scale-px(0px)); } } } @@ -150,10 +155,11 @@ &-btn { right: auto; left: 0; - border-radius: 0px 45px 45px 0px; + border-radius: scale-px(0px) scale-px(4scale-px(5px)) + scale-px(4scale-px(5px)) scale-px(0px); .nut-icon { - margin-right: 0px; - margin-left: 5px; + margin-right: scale-px(0px); + margin-left: scale-px(5px); transform: rotate(180deg); } } @@ -162,12 +168,14 @@ 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: scale-px(0px) scale-px(2scale-px(5px)) + scale-px(2scale-px(5px)) scale-px(0px); + box-shadow: scale-px(-scale-px(2px)) scale-px(2px) scale-px(8px) + scale-px(0px) rgba(0, 0, 0, 0.2); padding: { - right: 20px; - left: 80px; + right: scale-px(2scale-px(0px)); + left: scale-px(8scale-px(0px)); } &-item { @@ -185,12 +193,12 @@ .nut-fixednav-btn { left: auto; right: 0; - border-radius: 45px 0 0 45px; + border-radius: scale-px(4scale-px(5px)) 0 0 scale-px(4scale-px(5px)); .nut-icon { transform: rotate(0deg); - margin-right: 5px; - margin-left: 0px; + margin-right: scale-px(5px); + margin-left: scale-px(0px); } } @@ -198,11 +206,12 @@ transform: translateX(100%); right: auto; left: auto; - border-radius: 25px 0px 0px 25px; + border-radius: scale-px(2scale-px(5px)) scale-px(0px) scale-px(0px) + scale-px(2scale-px(5px)); padding: { - right: 80px; - left: 20px; + right: scale-px(8scale-px(0px)); + left: scale-px(2scale-px(0px)); } } } 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..d82329a36b 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: scale-px(14px); } } } &-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-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: scale-px(10px); + 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..cd30feea2d 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, @@ -21,7 +21,7 @@ opacity: 0.4; &-0 { - margin-left: 0px; + margin-left: scale-px(0px); } &-active { @@ -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); } } @@ -149,11 +149,11 @@ .nut-indicator { &-dot { - margin: 0px; + margin: scale-px(0px); margin-top: $indicator-dot-margin; &-0 { - margin-top: 0px; + margin-top: scale-px(0px); } &-active { @@ -178,7 +178,7 @@ &-dot { &-0 { margin-right: $indicator-dot-margin; - margin-left: 0px; + margin-left: scale-px(0px); } } } 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..12a03b4353 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: scale-px(14px); } &-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..73e01d4419 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; + --nut-icon-width: scale-px(10px); + --nut-icon-height: scale-px(10px); } } @@ -66,12 +66,12 @@ } &-icon-minus { - --nut-icon-width: 16px; - --nut-icon-height: 16px; + --nut-icon-width: scale-px(16px); + --nut-icon-height: scale-px(16px); } &-icon-plus { - --nut-icon-width: 16px; - --nut-icon-height: 16px; + --nut-icon-width: scale-px(16px); + --nut-icon-height: scale-px(16px); } } 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..697081fbf0 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; @@ -50,7 +50,7 @@ color: $navbar-title-font-color; &-center { - max-width: 129px; + max-width: scale-px(129px); justify-content: center; } } @@ -64,31 +64,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-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 +96,7 @@ flex-direction: row; align-items: center; justify-content: center; - gap: 16px; + gap: scale-px(16px); } &-hidden { @@ -106,12 +106,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/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..d78fae486d 100644 --- a/src/packages/popover/popover.scss +++ b/src/packages/popover/popover.scss @@ -6,8 +6,8 @@ &-arrow { position: absolute; - width: 8px; - height: 4px; + width: scale-px(8px); + height: scale-px(4px); .nut-icon-ArrowRadius { position: absolute; @@ -15,15 +15,15 @@ } &-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 +32,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 +49,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 +73,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,12 +87,12 @@ 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; &:last-child { - margin-bottom: 0px; + margin-bottom: scale-px(0px); border-bottom: none; } @@ -116,7 +116,7 @@ } &-name { - width: calc(100% - 34px); + width: calc(100% - scale-px(34px)); word-break: keep-all; flex: 1; } @@ -147,8 +147,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 +156,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 +172,7 @@ &-bottom-right { right: 0; .nut-popover-arrow-bottom-right { - right: 16px; + right: scale-px(16px); transform: translateX(0%); } } @@ -180,7 +180,7 @@ &-bottom-left { left: 0; .nut-popover-arrow-bottom-left { - left: 16px; + left: scale-px(16px); transform: translateX(0%); } } @@ -230,7 +230,7 @@ .nut-popover-item { &-name { margin-left: 0; - margin-right: 4px; + margin-right: scale-px(4px); } &-action-icon { @@ -250,7 +250,7 @@ .nut-popover-arrow-top-right { right: auto; - left: 16px; + left: scale-px(16px); } } @@ -260,7 +260,7 @@ .nut-popover-arrow-top-left { left: auto; - right: 16px; + right: scale-px(16px); } } @@ -278,7 +278,7 @@ .nut-popover-arrow-bottom-right { right: auto; - left: 16px; + left: scale-px(16px); } } @@ -288,7 +288,7 @@ .nut-popover-arrow-bottom-left { left: auto; - right: 16px; + right: scale-px(16px); } } } @@ -331,5 +331,5 @@ // Taro .nut-popover-content-copy { position: absolute; - top: -99999px; + top: scale-px(-99999px); } diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss index 14d1a492e8..b330620228 100644 --- a/src/packages/popup/popup.scss +++ b/src/packages/popup/popup.scss @@ -82,7 +82,7 @@ top: 50%; left: 50%; min-height: 10%; - max-width: 295px; + max-width: scale-px(295px); transform: translate(-50%, -50%); &.nut-popup-round { @@ -107,7 +107,7 @@ &-right { top: 0; right: 0; - width: 100px; + width: scale-px(100px); height: 100%; &.nut-popup-round { @@ -118,7 +118,7 @@ &-left { top: 0; left: 0; - width: 100px; + width: scale-px(100px); height: 100%; &.nut-popup-round { 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..20ac535dd0 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: scale-px(12px); &-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..074e6812b2 100644 --- a/src/packages/radio/radio.scss +++ b/src/packages/radio/radio.scss @@ -37,7 +37,8 @@ &-checked { color: $color-primary; background-color: $white; - box-shadow: 0px 2px 4px 0px #ff0f2333; + box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px) + #ff0f2333; border-radius: 50%; &.nut-radio-icon-disabled { @@ -61,14 +62,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 +79,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..06acbf9ecb 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,8 @@ 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: scale-px(0px) scale-px(1px) scale-px(2px) scale-px(0px) + rgba(0, 0, 0, 0.15); border: $range-button-border; outline: none; align-items: center; @@ -98,9 +99,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 +131,7 @@ &-mark { position: absolute; width: 100%; - height: 14px; + height: scale-px(14px); overflow: visible; top: 50%; } @@ -138,15 +139,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: scale-px(12px); color: #999; text-align: center; word-break: keep-all; @@ -155,11 +156,11 @@ &-tick { position: absolute; - top: -20px; - width: 11px; - height: 11px; - left: 0px; - border-radius: 6px; + top: scale-px(-20px); + width: scale-px(11px); + height: scale-px(11px); + left: scale-px(0px); + border-radius: scale-px(6px); background: $range-inactive-color; &-active { @@ -171,12 +172,12 @@ .nut-range-vertical-container { height: 100%; flex-direction: column; - padding: 0px 15px; + padding: scale-px(0px) scale-px(15px); } .nut-range-vertical { width: $range-height; - margin: $range-margin 0px; + margin: $range-margin scale-px(0px); &-button { &-wrapper, @@ -192,7 +193,7 @@ } &-wrapper-left { - top: 0px; + top: scale-px(0px); left: 50%; /* #ifndef dynamic*/ right: initial; @@ -201,7 +202,7 @@ } &-number { - left: 0px; + left: scale-px(0px); top: 50%; // transform: translate3d(100%, 0, 0); } @@ -209,31 +210,31 @@ &-mark { position: absolute; - width: 36px; + width: scale-px(36px); height: 100%; - top: 0px; + top: scale-px(0px); right: 50%; overflow: visible; - font-size: 12px; - padding: 0px; + font-size: scale-px(12px); + padding: scale-px(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 +242,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 { @@ -275,14 +276,14 @@ } &-tick { - right: 0px; + right: scale-px(0px); /* #ifndef dynamic*/ left: initial; /* #endif */ } &-mark-text { - transform: translateX(10px); + transform: translateX(scale-px(10px)); } &-vertical { @@ -316,13 +317,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..1350254770 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)); } } @@ -114,12 +114,12 @@ } &-large { - font-size: calc($rate-font-size + 6px); + font-size: calc($rate-font-size + scale-px(6px)); padding-left: calc($rate-item-margin * 2); } &-small { - font-size: calc($rate-font-size - 2px); + font-size: calc($rate-font-size - scale-px(2px)); padding-left: calc($rate-item-margin / 2); } @@ -146,7 +146,7 @@ } &-small { - margin-right: calc($rate-item-margin - 2px); + margin-right: calc($rate-item-margin - scale-px(2px)); } &:last-child { @@ -183,7 +183,7 @@ } &-small { - padding-right: calc($rate-item-margin - 2px); + padding-right: calc($rate-item-margin - scale-px(2px)); } } } 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/searchbar.scss b/src/packages/searchbar/searchbar.scss index cb7fe1286b..3c25023da0 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: scale-px(15px); 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: scale-px(12px); + 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-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..7cd0cc192d 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; @@ -32,12 +32,12 @@ } .nut-segmented-icon { - height: 10px; - width: 10px; + 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: scale-px(10px); } } diff --git a/src/packages/shortpassword/shortpassword.scss b/src/packages/shortpassword/shortpassword.scss index c2cbeb997d..75820fd35f 100644 --- a/src/packages/shortpassword/shortpassword.scss +++ b/src/packages/shortpassword/shortpassword.scss @@ -2,8 +2,8 @@ .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; } @@ -18,15 +18,15 @@ &-description { display: flex; justify-content: center; - margin-top: 12px; - margin-bottom: 24px; + margin-top: scale-px(12px); + margin-bottom: scale-px(24px); line-height: 1; 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,10 +79,10 @@ } &-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; @@ -98,7 +98,7 @@ align-items: center; .nut-icon { - margin-right: 3px; + margin-right: scale-px(3px); } } } @@ -106,13 +106,13 @@ &-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; + border: scale-px(1px) solid $color-primary; + border-radius: scale-px(15px); + padding: scale-px(8px) scale-px(38px); line-height: 1; font-size: $font-size-base; color: $color-primary; @@ -124,8 +124,8 @@ $color-primary 0%, $color-primary-stop-2 100% ); - border-radius: 15px; - padding: 8px 38px; + border-radius: scale-px(15px); + padding: scale-px(8px) scale-px(38px); line-height: 1; 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..096ad44eea 100644 --- a/src/packages/skeleton/skeleton.scss +++ b/src/packages/skeleton/skeleton.scss @@ -1,6 +1,6 @@ .nut-skeleton { - line-height: 0px; - font-size: 0px; + line-height: scale-px(0px); + font-size: scale-px(0px); &-content { position: relative; @@ -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..f46ec86438 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -86,8 +86,8 @@ } &-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; @@ -95,8 +95,8 @@ } &-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..1bc6fb7e29 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-px(10px); + width: scale-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 */ @@ -130,7 +130,7 @@ &-head { justify-content: center; - margin-bottom: 6px; + margin-bottom: scale-px(6px); &-dot-wrap, &-icon-wrap, @@ -145,15 +145,15 @@ width: $steps-double-head-icon-size; .nut-icon { - height: 12px; - width: 12px; + height: scale-px(12px); + width: scale-px(12px); } } &-main { align-items: center; margin-left: 0; - margin-top: 2px; + margin-top: scale-px(2px); } } @@ -202,8 +202,8 @@ } &-line { - height: calc(100% - 4px); - width: 1px; + height: calc(100% - scale-px(4px)); + width: scale-px(1px); bottom: 0; &-inner { @@ -214,15 +214,15 @@ &-head { align-items: center; justify-content: center; - height: 18px; + height: scale-px(18px); &-icon { width: $steps-vertical-head-icon-size; height: $steps-vertical-head-icon-size; .nut-icon { - height: 12px; - width: 12px; + height: scale-px(12px); + width: scale-px(12px); } } } @@ -231,7 +231,7 @@ flex: 1; min-width: 0; height: auto; - margin-left: 8px; + margin-left: scale-px(8px); } &-title { @@ -268,23 +268,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 +296,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 +308,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/swipe/swipe.scss b/src/packages/swipe/swipe.scss index 7e4c86211c..58ca3143b9 100644 --- a/src/packages/swipe/swipe.scss +++ b/src/packages/swipe/swipe.scss @@ -27,12 +27,12 @@ &-left { left: 0; - transform: translate(-100%, 0px); + transform: translate(-100%, scale-px(0px)); } &-right { //left: 100%; - right: 0px; - transform: translate(100%, 0px); + right: scale-px(0px); + transform: translate(100%, scale-px(0px)); } } 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..610fa5f874 100644 --- a/src/packages/tabbar/tabbar.scss +++ b/src/packages/tabbar/tabbar.scss @@ -1,7 +1,7 @@ @import '../tabbaritem/tabbaritem.scss'; .nut-tabbar { - border: 0px; + border: scale-px(0px); box-shadow: $tabbar-box-shadow; border-bottom: $tabbar-border-bottom; border-top: $tabbar-border-top; @@ -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: scale-px(14px); } .nut-badge-sup { &::after { @@ -44,8 +44,8 @@ &-fixed { position: fixed; - bottom: 0px; - left: 0px; + bottom: scale-px(0px); + left: scale-px(0px); } } @@ -58,6 +58,6 @@ &-fixed { left: auto; - right: 0px; + right: scale-px(0px); } } diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss index 74a2c6028d..7db36733da 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: scale-px(24px); /* #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..4bcb8ffeb9 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, @@ -143,9 +143,9 @@ &-sticky-left, &-sticky-right { position: absolute; - top: 0px; - width: 8px; - bottom: -1px; + top: scale-px(0px); + 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..209c4cfff1 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-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..c9589e8e64 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,7 +72,7 @@ justify-content: center; font-size: $tag-font-size; color: $tag-color; - margin-left: 4px; + margin-left: scale-px(4px); } &-plain { @@ -85,6 +85,6 @@ .nut-rtl .nut-tag { .nut-icon { margin-left: 0; - margin-right: 4px; + margin-right: scale-px(4px); } } 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..42367ca1f0 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; @@ -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..a4b845c512 100644 --- a/src/packages/tour/tour.scss +++ b/src/packages/tour/tour.scss @@ -3,7 +3,7 @@ .nut-tour { &-mask { position: fixed; - box-shadow: 0px 0px 0px 150vh $color-mask; + box-shadow: scale-px(0px) scale-px(0px) scale-px(0px) 150vh $color-mask; border-radius: $tour-mask-border-radius; z-index: 999; @@ -29,8 +29,8 @@ text-align: end; &-close { - --nut-icon-width: 10px; - --nut-icon-height: 10px; + --nut-icon-width: scale-px(10px); + --nut-icon-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..09c77e0ee7 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,34 +95,34 @@ &-msg { color: $color-text-help; - font-size: 12px; + font-size: scale-px(12px); } } &.list { width: 100%; - margin-right: 0px; - margin-bottom: 0px; - margin-top: 10px; - box-shadow: 0 2px 10px 0 rgb(0 0 0 / 1%); + margin-right: scale-px(0px); + margin-bottom: scale-px(0px); + 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: scale-px(12px); color: $white; text-align: center; box-sizing: border-box; @@ -197,7 +197,7 @@ &-name { display: flex; width: 90%; - font-size: 12px; + font-size: scale-px(12px); color: $color-text; @include moreline-ellipsis(); @@ -235,7 +235,7 @@ &.list { margin-right: 0; - margin-left: 0px; + margin-left: scale-px(0px); } .close { diff --git a/src/packages/virtuallist/virtuallist.scss b/src/packages/virtuallist/virtuallist.scss index 71605201dd..b0f21ae8ba 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-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/mobile/main.tsx b/src/sites/mobile/main.tsx index 148d98c441..4375a84772 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() const root = ReactDOM.createRoot(rootElement) root.render() } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 81c738928e..0dbe99876f 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,4 +1,11 @@ // ---------------------------------------------------- +// 缩放系数 +:root { + --scale-f: 1; +} +@function scale-px($size) { + @return calc(#{$size} * var(--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 +154,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-px(9px)) !default; +$font-size-xxs: var(--nutui-font-size-xxs, scale-px(10px)) !default; +$font-size-xs: var(--nutui-font-size-xs, scale-px(11px)) !default; +$font-size-s: var(--nutui-font-size-s, scale-px(12px)) !default; +$font-size-base: var(--nutui-font-size-base, scale-px(14px)) !default; +$font-size-l: var(--nutui-font-size-l, scale-px(15px)) !default; +$font-size-icon: var(--nutui-font-size-icon, scale-px(16px)) !default; +$font-size-xl: var(--nutui-font-size-xl, scale-px(18px)) !default; +$font-size-xxl: var(--nutui-font-size-xxl, scale-px(24px)) !default; +$font-size-xxxl: var(--nutui-font-size-10, scale-px(26px)) !default; +$font-size-xxxxl: var(--nutui-font-size-11, scale-px(28px)) !default; // 字重 ok $font-weight-light: var(--nutui-font-weight-light, 300) !default; @@ -169,33 +176,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 +234,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, + scale-px(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 +263,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, + scale-px(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, + scale-px(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, + scale-px(0px) scale-px(16px) +) !default; $button-large-font-size: var( --nutui-button-large-font-size, $font-size-l @@ -274,15 +311,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, + scale-px(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, + scale-px(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 +422,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 +446,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 +464,13 @@ $cell-background-color: var( ) !default; $cell-box-shadow: var( --nutui-cell-box-shadow, - 0px 1px 7px 0px rgba(237, 238, 241, 1) + scale-px(0px) scale-px(1px) scale-px(7px) scale-px(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 +482,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 +498,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 +520,40 @@ $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-px(20px)) !default; +$icon-width: var(--nutui-icon-width, scale-px(20px)) !default; +$icon-line-height: var(--nutui-icon-line-height, scale-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-border: var(--nutui-uploader-image-border, 0px) !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, + scale-px(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 +573,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 + scale-px(12px) ) !default; $uploader-preview-progress-background: var( --nutui-uploader-preview-progress-background, @@ -518,15 +585,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,15 +601,15 @@ $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, - 0px + scale-px(0px) ) !default; $uploader-preview-close-top: var( --nutui-uploader-preview-close-top, - 0px + scale-px(0px) ) !default; // picker（✅） @@ -564,7 +631,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 +643,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, @@ -588,7 +655,7 @@ $picker-mask-background: var( $input-border-bottom: var(--nutui-input-border-bottom, $color-border) !default; $input-border-bottom-width: var( --nutui-input-border-bottom-width, - 0px + scale-px(0px) ) !default; // $input-disabled-color: var( // --nutui-input-disabled-color, @@ -602,10 +669,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 +680,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 +707,19 @@ $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, + scale-px(0px) +) !default; +$inputnumber-button-width: var( + --nutui-inputnumber-button-width, + scale-px(20px) ) !default; -$inputnumber-input-margin: var(--nutui-inputnumber-input-margin, 0px) !default; -$inputnumber-button-width: var(--nutui-inputnumber-button-width, 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 +729,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 +758,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 +787,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 +799,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 +807,7 @@ $numberkeyboard-header-close-color: var( ) !default; $numberkeyboard-header-close-font-size: var( --nutui-numberkeyboard-header-close-font-size, - 14px + scale-px(14px) ) !default; $numberkeyboard-header-close-background-color: var( --nutui-numberkeyboard-header-close-background-color, @@ -741,7 +823,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 +831,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 +866,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 @@ -830,49 +915,76 @@ $price-line-color: var( ) !default; $price-symbol-padding-right: var( --nutui-price-symbol-padding-right, - 0px + scale-px(0px) ) !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, + scale-px(12px) +) !default; $price-integer-xlarge-size: var( --nutui-price-integer-xlarge-size, - 24px + scale-px(24px) ) !default; $price-decimal-xlarge-size: var( --nutui-price-decimal-xlarge-size, - 12px + scale-px(12px) ) !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, + scale-px(12px) +) !default; +$price-integer-large-size: var( + --nutui-price-integer-large-size, + scale-px(18px) +) !default; +$price-decimal-large-size: var( + --nutui-price-decimal-large-size, + scale-px(12px) +) !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, + scale-px(12px) +) !default; $price-integer-normal-size: var( --nutui-price-integer-normal-size, - 16px + scale-px(16px) ) !default; $price-decimal-normal-size: var( --nutui-price-decimal-normal-size, - 12px + scale-px(12px) ) !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, + scale-px(12px) +) !default; +$price-integer-small-size: var( + --nutui-price-integer-small-size, + scale-px(12px) +) !default; +$price-decimal-small-size: var( + --nutui-price-decimal-small-size, + scale-px(12px) +) !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 +1007,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 +1022,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) + scale-px(0px) scale-px(2px) scale-px(6px) scale-px(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) + scale-px(0px) scale-px(2px) scale-px(1px) scale-px(0px) rgba(0, 0, 0, 0.06), + scale-px(0px) scale-px(2px) scale-px(6px) scale-px(0px) rgba(0, 0, 0, 0.1), + scale-px(0px) scale-px(0px) scale-px(0px) scale-px(1px) rgba(0, 0, 0, 0.02) ) !default; /* #endif */ $switch-label-text-color: var( @@ -936,10 +1048,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-px(16px) +) !default; +$toast-text-font-size: var( + --nutui-toast-text-font-size, + scale-px(14px) +) !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 +1069,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) scale-px(0px) ) !default; $tour-content-inner-font-size: var( --nutui-tour-content-inner-font-size, - 14px + scale-px(14px) ) !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 + scale-px(12px) ) !default; $tour-content-bottom-btn-border-radius: var( --nutui-tour-content-bottom-btn-border-radius, - 4px + scale-px(4px) ) !default; // calendar（✅） @@ -1017,29 +1147,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 +1213,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, 16px) !default; +$popup-icon-size: var(--nutui-popup-icon-size, scale-px(20px)) !default; +$popup-title-padding: var(--nutui-popup-title-padding, scale-px(16px)) !default; $popup-title-font-size: var( --nutui-popup-title-font-size, $font-size-xl @@ -1095,17 +1231,23 @@ $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, + scale-px(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) + scale-px(0px) scale-px(4px) scale-px(12px) scale-px(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 +1255,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-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, scale-px(12px)) !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 +1287,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 +1317,13 @@ $infiniteloading-color: var( ) !default; $infiniteloading-icon-size: var( --nutui-infiniteloading-icon-size, - 24px + scale-px(24px) ) !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 +1333,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 +1352,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 +1363,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 + scale-px(12px) ) !default; $steps-base-head-size: var( --nutui-steps-base-icon-size, @@ -1219,24 +1373,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-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-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 +1411,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 +1504,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(13px) ) !default; $steps-vertical-title-font-size: var( --nutui-steps-vertical-title-font-size, @@ -1368,11 +1528,11 @@ $steps-vertical-title-font-size: var( ) !default; $steps-vertical-title-margin-bottom: var( --nutui-steps-vertical-title-margin-bottom, - 4px + scale-px(4px) ) !default; $steps-vertical-line-height: var( --nutui-steps-vertical-line-height, - 18px + scale-px(18px) ) !default; $steps-vertical-description-font-size: var( --nutui-steps-vertical-description-font-size, @@ -1380,15 +1540,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 +1556,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 +1576,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 +1592,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) scale-px(0px) scale-px(2px) ) !default; $dialog-footer-badge-bg-ok: var( --nutui-dialog-footer-badge-bg-ok, @@ -1474,18 +1640,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 + scale-px(24px) ) !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 +1683,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 +1703,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 +1728,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 +1751,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 +1775,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 +1806,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(100px) +) !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 +1867,12 @@ $timeselect-time-background: var( ) !default; //tag（✅） -$tag-padding: var(--nutui-tag-padding, 0px 2px) !default; +$tag-padding: var(--nutui-tag-padding, scale-px(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 +1894,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 +1917,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, scale-px(10px)) !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 +1967,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 +1980,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 +1992,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-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 +2035,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 +2067,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 +2101,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 +2123,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 +2143,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 +2164,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 +2181,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 +2221,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 +2234,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 +2251,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 +2259,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 +2280,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 +2301,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 +2330,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,17 +2361,26 @@ $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-title-margin-top: var(--nutui-empty-title-margin-top, 0px) !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, + scale-px(0px) +) !default; $empty-background-color: var( --nutui-empty-background-color, $color-background-overlay ) !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,32 +2393,50 @@ $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-margin: var(--nutui-cascader-item-margin, 0px) !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, + scale-px(0px) +) !default; $cascader-item-border-bottom: var( --nutui-cascader-item-border-bottom, - 0px solid $color-border + scale-px(0px) solid $color-border ) !default; $cascader-item-color: var(--nutui-cascader-item-color, $color-title) !default; $cascader-item-font-size: var( @@ -2182,10 +2465,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 +2479,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 +2507,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,10 +2523,10 @@ $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; +$grid-border-width: var(--nutui-grid-border-width, scale-px(0px)) !default; $grid-border-color: var(--nutui-grid-border-color, $color-border) !default; $grid-item-border-radius: var( --nutui-grid-item-border-radius, @@ -2248,13 +2534,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 +2552,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 +2560,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 +2597,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 +2620,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 +2634,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 +2655,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 +2678,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 +2696,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 +2725,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-px(16px) +) !default; $addresslist-mask-bg: var( --nutui-addresslist-mask-bg, rgba(0, 0, 0, 0.4) @@ -2448,7 +2749,7 @@ $addresslist-addr-font-color: var( ) !default; $addresslist-addr-font-size: var( --nutui-addresslist-addr-font-size, - 12px + scale-px(12px) ) !default; $addresslist-set-bg: var(--nutui-addresslist-set-bg, #f5a623) !default; $addresslist-del-bg: var(--nutui-addresslist-del-bg, #e1251b) !default; @@ -2492,14 +2793,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, + scale-px(14px) +) !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, scale-px(18px)) !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 +2830,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, + scale-px(14px) +) !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 +2866,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,9 +2897,9 @@ $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; 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..35a15c9678 --- /dev/null +++ b/src/utils/scale-f.taro.ts @@ -0,0 +1,20 @@ +export let scale = 1 + +export async function getScaleF() { + return 1 +} + +export function setScaleF() { + scale = 1 + return scale +} + +export async function refreshScaleF() { + scale = 1 + return scale +} + +export function initScaleF() { + scale = 1 + return () => {} +} diff --git a/src/utils/scale-f.ts b/src/utils/scale-f.ts new file mode 100644 index 0000000000..9c2dcbcec3 --- /dev/null +++ b/src/utils/scale-f.ts @@ -0,0 +1,110 @@ +import { canUseDom } from './can-use-dom' + +type NativeScaleResponse = { + status?: string + data?: { + scale?: number | string + } +} + +type NativeCaller = ( + plugin: string, + method: string, + params: string, + extra: string +) => Promise + +declare global { + interface Window { + jmfe?: { + callNative?: NativeCaller + } + } +} + +export let scale = 1 + +// 站外兜底规则：按屏宽计算缩放系数。 +function getScaleByViewport() { + if (!canUseDom) return 1 + const deviceWidth = window.innerWidth + + if (!deviceWidth) return 1 + + if (deviceWidth >= 600) { + return 1.2 + } + + if (deviceWidth >= 375 && deviceWidth < 600) { + const ratio = deviceWidth / 375 + return ratio >= 1.17 ? 1.17 : ratio + } + + return 1 +} + +// 站内场景：优先走原生能力获取缩放系数。 +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 (error) { + // ignore native failures and fallback to viewport rule + } + + return null +} + +// 统一对外获取缩放系数：站内优先，失败时走站外规则。 +export async function getScaleF() { + const nativeScale = await getScaleByNative() + if (nativeScale) return nativeScale + return getScaleByViewport() +} + +// 同步设置当前缩放值，并写入 CSS 变量 --scale-f。 +export function setScaleF(nextScale: number) { + const validScale = Number.isFinite(nextScale) && nextScale > 0 ? nextScale : 1 + scale = validScale + if (canUseDom) { + document.documentElement.style.setProperty('--scale-f', `${validScale}`) + } + return scale +} + +// 刷新缩放值，仅在值变化时更新，避免重复写样式。 +export async function refreshScaleF() { + const nextScale = await getScaleF() + if (!scale || nextScale !== scale) { + setScaleF(nextScale) + } + return scale +} + +// 初始化缩放监听：首次执行一次，并在窗口 resize 时自动刷新。 +export function initScaleF() { + if (!canUseDom) return () => {} + + const handler = () => { + refreshScaleF() + } + + handler() + window.addEventListener('resize', handler) + + return () => { + window.removeEventListener('resize', handler) + } +} From 36d232896b872ee5920d14af3ae71aee14822aee Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Wed, 6 May 2026 22:06:29 +0800 Subject: [PATCH 05/11] =?UTF-8?q?feat(popup):=20=E9=80=8F=E4=BC=A0overlay?= =?UTF-8?q?=20=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/popup/__tests__/popup.spec.tsx | 13 +++++++++++++ src/packages/popup/demos/h5/demo1.tsx | 1 + src/packages/popup/demos/taro/demo1.tsx | 1 + src/packages/popup/popup.taro.tsx | 3 +++ src/packages/popup/popup.tsx | 3 +++ src/types/spec/popup/base.ts | 1 + 6 files changed, 22 insertions(+) diff --git a/src/packages/popup/__tests__/popup.spec.tsx b/src/packages/popup/__tests__/popup.spec.tsx index d414415387..7ec10c1b8e 100644 --- a/src/packages/popup/__tests__/popup.spec.tsx +++ b/src/packages/popup/__tests__/popup.spec.tsx @@ -206,3 +206,16 @@ 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') +}) 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: {}, } // 默认1000，参看variables @@ -95,6 +96,7 @@ export const Popup: FunctionComponent< onTouchMove, onTouchEnd, closeAriaLabel, + overlayProps, } = { ...defaultProps, ...props } const { locale } = useConfig() @@ -435,6 +437,7 @@ export const Popup: FunctionComponent< lockScroll={lockScroll} duration={duration} onClick={handleOverlayClick} + {...overlayProps} /> ) : null} {renderPop()} diff --git a/src/packages/popup/popup.tsx b/src/packages/popup/popup.tsx index 740f43ba5d..84c874ac19 100644 --- a/src/packages/popup/popup.tsx +++ b/src/packages/popup/popup.tsx @@ -40,6 +40,7 @@ const defaultProps: WebPopupProps = { onTouchStart: () => {}, onTouchMove: () => {}, onTouchEnd: () => {}, + overlayProps: {}, } // 默认1000，参看variables @@ -89,6 +90,7 @@ export const Popup: FunctionComponent< onTouchMove, onTouchEnd, closeAriaLabel, + overlayProps, } = { ...defaultProps, ...props } const nodeRef = React.useRef(null) const topNodeRef = React.useRef(null) @@ -343,6 +345,7 @@ export const Popup: FunctionComponent< lockScroll={lockScroll} duration={duration} onClick={handleOverlayClick} + {...overlayProps} /> )} {renderPop()} diff --git a/src/types/spec/popup/base.ts b/src/types/spec/popup/base.ts index 713e8b9d00..85c702beb4 100644 --- a/src/types/spec/popup/base.ts +++ b/src/types/spec/popup/base.ts @@ -32,4 +32,5 @@ export interface BasePopup extends BaseProps, BaseOverlay { onTouchStart: (height: number, e: any) => void onTouchEnd: (height: number, e: any) => void closeAriaLabel?: string + overlayProps?: any } From c4edd653d7b87d0e75bd2990a5205ff4ea845f6b Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Wed, 6 May 2026 22:17:54 +0800 Subject: [PATCH 06/11] =?UTF-8?q?feat(popup):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E5=B1=9E=E6=80=A7,=E7=94=A8=E4=BA=8E=E8=A1=A8=E8=BE=BE?= =?UTF-8?q?=E6=98=AF=E5=90=A6=E5=B1=95=E7=A4=BA=E5=8A=A8=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/popup/__tests__/popup.spec.tsx | 6 ++++++ src/packages/popup/popup.taro.tsx | 13 +++++++++---- src/packages/popup/popup.tsx | 9 ++++++--- src/types/spec/popup/base.ts | 1 + 4 files changed, 22 insertions(+), 7 deletions(-) diff --git a/src/packages/popup/__tests__/popup.spec.tsx b/src/packages/popup/__tests__/popup.spec.tsx index 7ec10c1b8e..d612b36aab 100644 --- a/src/packages/popup/__tests__/popup.spec.tsx +++ b/src/packages/popup/__tests__/popup.spec.tsx @@ -219,3 +219,9 @@ test('overlayProps propagation test', () => { 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/popup.taro.tsx b/src/packages/popup/popup.taro.tsx index 351b416fd3..1d2d4607cb 100644 --- a/src/packages/popup/popup.taro.tsx +++ b/src/packages/popup/popup.taro.tsx @@ -47,6 +47,7 @@ const defaultProps: TaroPopupProps = { onTouchMove: () => {}, onTouchEnd: () => {}, overlayProps: {}, + animated: true, } // 默认1000，参看variables @@ -97,8 +98,12 @@ export const Popup: FunctionComponent< 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) @@ -189,14 +194,14 @@ export const Popup: FunctionComponent< if (destroyOnClose) { setTimeout(() => { setShowChildren(false) - }, Number(duration)) + }, transitionDuration) } onClose?.() } }, [ innerVisible, destroyOnClose, - duration, + transitionDuration, onClose, setInnerVisible, setShowChildren, @@ -397,7 +402,7 @@ export const Popup: FunctionComponent< classNames={transitionName} mountOnEnter unmountOnExit={destroyOnClose} - timeout={Number(duration)} + timeout={Number(transitionDuration)} in={innerVisible} onEntered={afterShow} onExited={afterClose} @@ -435,7 +440,7 @@ export const Popup: FunctionComponent< visible={innerVisible} closeOnOverlayClick={closeOnOverlayClick} lockScroll={lockScroll} - duration={duration} + duration={transitionDuration} onClick={handleOverlayClick} {...overlayProps} /> diff --git a/src/packages/popup/popup.tsx b/src/packages/popup/popup.tsx index 84c874ac19..fc41a3ed59 100644 --- a/src/packages/popup/popup.tsx +++ b/src/packages/popup/popup.tsx @@ -41,6 +41,7 @@ const defaultProps: WebPopupProps = { onTouchMove: () => {}, onTouchEnd: () => {}, overlayProps: {}, + animated: true, } // 默认1000，参看variables @@ -91,6 +92,7 @@ export const Popup: FunctionComponent< onTouchEnd, closeAriaLabel, overlayProps, + animated, } = { ...defaultProps, ...props } const nodeRef = React.useRef(null) const topNodeRef = React.useRef(null) @@ -108,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) @@ -162,7 +165,7 @@ export const Popup: FunctionComponent< if (destroyOnClose) { setTimeout(() => { setShowChildren(false) - }, Number(duration)) + }, transitionDuration) } onClose && onClose() } @@ -308,7 +311,7 @@ export const Popup: FunctionComponent< classNames={transitionName} mountOnEnter unmountOnExit={destroyOnClose} - timeout={duration} + timeout={transitionDuration} in={innerVisible} onEntered={afterShow} onExited={afterClose} @@ -343,7 +346,7 @@ export const Popup: FunctionComponent< visible={innerVisible} closeOnOverlayClick={closeOnOverlayClick} lockScroll={lockScroll} - duration={duration} + duration={transitionDuration} onClick={handleOverlayClick} {...overlayProps} /> diff --git a/src/types/spec/popup/base.ts b/src/types/spec/popup/base.ts index 85c702beb4..03a297c7e3 100644 --- a/src/types/spec/popup/base.ts +++ b/src/types/spec/popup/base.ts @@ -33,4 +33,5 @@ export interface BasePopup extends BaseProps, BaseOverlay { onTouchEnd: (height: number, e: any) => void closeAriaLabel?: string overlayProps?: any + animated?: boolean } From 11be1b33d156beaccccbda7ad64df3c1840dfbcb Mon Sep 17 00:00:00 2001 From: xiaoyatong <84436086+xiaoyatong@users.noreply.github.com> Date: Thu, 7 May 2026 09:39:39 +0800 Subject: [PATCH 07/11] =?UTF-8?q?feat:=20=E5=A4=84=E7=90=86=E6=97=A5?= =?UTF-8?q?=E5=8E=86=E5=9C=A8=E5=A4=9A=E7=AB=AF=E8=A1=A8=E7=8E=B0=E5=BC=82?= =?UTF-8?q?=E5=B8=B8=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BB=B7=E6=A0=BC=E5=85=BC?= =?UTF-8?q?=E5=AE=B9=E6=9B=B4=E5=A4=9A=E6=A0=BC=E5=BC=8F=E3=80=82=20(#3452?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(Price): 组件传入异常信息直接原样返回 * Update package.json * fix(Price): 解决digits为null时0.00展示异常问题 * feat(Price): 支持price 包含非法字符原样返回 * fix: 修复clendar中color属性继承问题&顶部svg使用Image标签 * fix: 修复clendar中weekend样式选择器覆盖问题 * fix: 将calendar中icon的样式内置到scss * chore: 升级版本号 * feat: calendarCard组件Icon内联样式pxTransform适配 * fix: 抽离icon为 svg * fix: 兼容taro多端处理 --------- Co-authored-by: songchenglin3 <353833373@qq.com> Co-authored-by: xiyehutao <1254524557@qq.com> Co-authored-by: xiyehutao <113820392+xiyehutao@users.noreply.github.com> --- ...06\347\231\275\347\232\256\344\271\246.md" | 2 + src/packages/calendarcard/calendarcard.scss | 6 +++ src/packages/calendarcard/icon.taro.tsx | 45 ++++++++----------- .../calendarcard/icons/doubleLeft.svg | 4 ++ .../calendarcard/icons/doubleRight.svg | 4 ++ .../calendarcard/icons/singleLeft.svg | 4 ++ .../calendarcard/icons/singleRight.svg | 4 ++ src/packages/price/price.taro.tsx | 18 +++++--- src/packages/searchbar/doc.en-US.md | 2 - src/packages/searchbar/doc.md | 2 - src/types/spec/price/base.ts | 1 + src/types/spec/searchbar/h5.ts | 7 ++- src/utils/should-render-price-raw.ts | 11 +++-- 13 files changed, 71 insertions(+), 39 deletions(-) create mode 100644 src/packages/calendarcard/icons/doubleLeft.svg create mode 100644 src/packages/calendarcard/icons/doubleRight.svg create mode 100644 src/packages/calendarcard/icons/singleLeft.svg create mode 100644 src/packages/calendarcard/icons/singleRight.svg diff --git "a/NutUI-React_\347\273\204\344\273\266\346\240\207\345\207\206\347\231\275\347\232\256\344\271\246.md" "b/NutUI-React_\347\273\204\344\273\266\346\240\207\345\207\206\347\231\275\347\232\256\344\271\246.md" index 7a53a59c4a..0bdb4aedce 100644 --- "a/NutUI-React_\347\273\204\344\273\266\346\240\207\345\207\206\347\231\275\347\232\256\344\271\246.md" +++ "b/NutUI-React_\347\273\204\344\273\266\346\240\207\345\207\206\347\231\275\347\232\256\344\271\246.md" @@ -114,6 +114,7 @@ NutUI 的演进伴随着移动端技术的演进，从移动端到跨端，从 V 定义组件 Props 前，**必须（MUST）**继承全局抽象类型 `BasicComponent`（或 `MiniProgramBasicProps` 等多端公共类型），确保组件基础能力的统一。 2. **强类型声明与规范**： + - **禁止 `any`**：Props 参数需使用显式联合类型，严禁使用 `any` 逃避类型检查。 - **事件命名**：对外事件统一以 `onXXX`（小驼峰）命名。 - **精简通信**：事件通信仅传递必要数据，避免携带冗余的组件实例或私有变量。 @@ -149,6 +150,7 @@ export const Button = React.forwardRef>( ### 5.4 组件防御与容灾红线 1. **防阻断式崩溃**： + - 针对入参异常、异步失败、逻辑边界等风险点，必须内置 `try-catch` 或提供兜底 UI。 - 组件内部错误不得外溢导致整个前端应用白屏死机。 diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss index b824150001..d9f24c8830 100644 --- a/src/packages/calendarcard/calendarcard.scss +++ b/src/packages/calendarcard/calendarcard.scss @@ -30,6 +30,12 @@ } } + &-icon { + width: 18px; + height: 18px; + display: block; + } + &-days { display: flex; flex-direction: row; diff --git a/src/packages/calendarcard/icon.taro.tsx b/src/packages/calendarcard/icon.taro.tsx index 9ac1e4e3e3..f76c19c5cc 100644 --- a/src/packages/calendarcard/icon.taro.tsx +++ b/src/packages/calendarcard/icon.taro.tsx @@ -1,39 +1,32 @@ import React, { FC } from 'react' import { Image } 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=' - 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 = { - width: 18, - height: 18, + 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/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/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/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/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) } From 402c19cd8847ab6460ecfcc60868ef76e5521be6 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Thu, 7 May 2026 20:12:14 +0800 Subject: [PATCH 08/11] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=80=81?= =?UTF-8?q?=E5=B9=B4=E7=89=88\=E5=A4=A7=E5=AD=97=E7=89=88=E5=A4=84?= =?UTF-8?q?=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/address/address.scss | 10 +- src/packages/audio/audio.scss | 2 +- src/packages/calendar/calendar.scss | 2 +- src/packages/calendarcard/calendarcard.scss | 2 +- src/packages/card/card.scss | 4 +- src/packages/checkbox/checkbox.scss | 4 +- src/packages/fixednav/fixednav.scss | 58 +++--- .../hoverbuttonitem/hoverbuttonitem.scss | 6 +- src/packages/input/input.scss | 2 +- src/packages/navbar/navbar.scss | 2 +- src/packages/pulltorefresh/pulltorefresh.scss | 2 +- src/packages/range/range.scss | 4 +- src/packages/rate/rate.scss | 4 +- src/packages/searchbar/searchbar.scss | 6 +- src/packages/segmented/segmented.scss | 2 +- src/packages/skeleton/skeleton.scss | 2 +- src/packages/tabbar/tabbar.scss | 2 +- src/packages/tabbaritem/tabbaritem.scss | 2 +- src/packages/tabs/tabs.scss | 2 +- src/packages/uploader/uploader.scss | 6 +- src/packages/virtuallist/virtuallist.scss | 2 +- src/sites/assets/styles/highlight.scss | 2 +- src/styles/variables.scss | 113 ++++++------ src/utils/index.taro.ts | 1 - src/utils/scale-f.taro.ts | 20 --- src/utils/scale-f.ts | 167 ++++++++++++++++-- 26 files changed, 272 insertions(+), 157 deletions(-) delete mode 100644 src/utils/scale-f.taro.ts diff --git a/src/packages/address/address.scss b/src/packages/address/address.scss index 1f9b2d11ef..521b988cca 100644 --- a/src/packages/address/address.scss +++ b/src/packages/address/address.scss @@ -41,7 +41,7 @@ text-align: center; background: $button-primary-background-color; border-radius: scale-px(21px); - font-size: scale-px(15px); + font-size: $font-size-l; color: $color-primary-text; } } @@ -49,7 +49,7 @@ .nut-address { &-title { - font-size: scale-px(14px); + font-size: $font-size-base; font-weight: 500; padding: scale-px(16px) scale-px(16px) scale-px(12px) scale-px(16px); } @@ -64,7 +64,7 @@ align-items: center; width: scale-px(63px); height: scale-px(28px); - font-size: scale-px(12px); + font-size: $font-size-s; border-radius: scale-px(4px); margin-bottom: scale-px(7px); /* #ifdef harmony dynamic*/ @@ -97,7 +97,7 @@ align-items: center; border-bottom: scale-px(1px) solid $color-border; &-item { - font-size: scale-px(12px); + font-size: $font-size-s; display: inline-block; height: scale-px(28px); line-height: scale-px(28px); @@ -147,7 +147,7 @@ align-items: center; width: scale-px(16px); height: scale-px(16px); - font-size: scale-px(10px); + font-size: $font-size-xxs; border-radius: scale-px(16px); margin-bottom: scale-px(2px); color: $color-text-help; diff --git a/src/packages/audio/audio.scss b/src/packages/audio/audio.scss index efd4939a90..a9c643ade6 100644 --- a/src/packages/audio/audio.scss +++ b/src/packages/audio/audio.scss @@ -49,7 +49,7 @@ .time { min-width: scale-px(50px); - font-size: scale-px(12px); + font-size: $font-size-s; text-align: center; } diff --git a/src/packages/calendar/calendar.scss b/src/packages/calendar/calendar.scss index ab41cff0ed..0f8e728459 100644 --- a/src/packages/calendar/calendar.scss +++ b/src/packages/calendar/calendar.scss @@ -138,7 +138,7 @@ position: absolute; bottom: scale-px(5px); width: 100%; - font-size: scale-px(12px); + font-size: $font-size-s; line-height: scale-px(14px); } diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss index 6f94b3f943..a2cfafc5af 100644 --- a/src/packages/calendarcard/calendarcard.scss +++ b/src/packages/calendarcard/calendarcard.scss @@ -60,7 +60,7 @@ justify-content: center; width: 100%; height: scale-px(12px); - font-size: scale-px(12px); + font-size: $font-size-s; line-height: scale-px(12px); } diff --git a/src/packages/card/card.scss b/src/packages/card/card.scss index faa2081ec8..eb6cb1000f 100644 --- a/src/packages/card/card.scss +++ b/src/packages/card/card.scss @@ -28,7 +28,7 @@ &-title { @include moreline-ellipsis(); line-height: 1.5; - font-size: scale-px(14px); + font-size: $font-size-base; color: $color-title; } @@ -71,7 +71,7 @@ &-name { line-height: 1.5; color: $color-text; - font-size: scale-px(12px); + font-size: $font-size-s; padding-top: scale-px(4px); } } diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss index 491d8cd40e..441eea8bc3 100644 --- a/src/packages/checkbox/checkbox.scss +++ b/src/packages/checkbox/checkbox.scss @@ -11,7 +11,7 @@ } &-icon-wrap { - font-size: scale-px(0px); + font-size: 0px; line-height: scale-px(0px); border-radius: 50%; box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px) @@ -126,7 +126,7 @@ .nut-icon { position: absolute; - font-size: scale-px(12px); + font-size: $font-size-s; width: scale-px(12px); height: scale-px(12px); diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss index de82c6d945..b24e615092 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: scale-px(5scale-px(0px)); + height: scale-px(50px); &.active { .nut-fixednav-btn { @@ -29,7 +29,7 @@ box-sizing: border-box; position: absolute; z-index: $fixednav-index; - width: scale-px(7scale-px(0px)); + width: scale-px(70px); height: 100%; background: $fixednav-button-background; box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px) @@ -39,8 +39,8 @@ justify-content: center; .text { - width: scale-px(2scale-px(4px)); - line-height: scale-px(1scale-px(3px)); + width: scale-px(24px); + line-height: scale-px(13px); font-size: $font-size-s; color: #fff; flex-shrink: 0; @@ -71,18 +71,18 @@ flex-direction: column; justify-content: center; align-items: center; - min-width: scale-px(5scale-px(0px)); + min-width: scale-px(50px); flex-shrink: 0; color: $fixednav-color; .nut-fixednav-list-text { - font-size: scale-px(1scale-px(0px)); + font-size: $font-size-xxs; } } &-image { - width: scale-px(2scale-px(0px)); - height: scale-px(2scale-px(0px)); + width: scale-px(20px); + height: scale-px(20px); margin-bottom: scale-px(2px); } } @@ -91,8 +91,7 @@ right: 0; .nut-fixednav-btn { right: 0; - border-radius: scale-px(4scale-px(5px)) scale-px(0px) scale-px(0px) - scale-px(4scale-px(5px)); + border-radius: scale-px(45px) 0 0 scale-px(45px); .nut-icon { margin-right: scale-px(5px); transform: rotate(0deg); @@ -101,11 +100,10 @@ .nut-fixednav-list { right: 0; transform: translateX(100%); - border-radius: scale-px(2scale-px(5px)) scale-px(0px) scale-px(0px) - scale-px(2scale-px(5px)); + border-radius: scale-px(25px) 0 0 scale-px(25px); padding: { - left: scale-px(2scale-px(0px)); - right: scale-px(8scale-px(0px)); + left: scale-px(20px); + right: scale-px(80px); } } } @@ -115,7 +113,7 @@ .nut-fixednav-btn { flex-direction: row-reverse; left: 0; - border-radius: 0 scale-px(4scale-px(5px)) scale-px(4scale-px(5px)) 0; + border-radius: 0 scale-px(45px) scale-px(45px) 0; .nut-icon { margin-left: scale-px(5px); transform: rotate(180deg); @@ -125,11 +123,10 @@ .nut-fixednav-list { transform: translateX(-100%); left: 0; - border-radius: scale-px(0px) scale-px(2scale-px(5px)) - scale-px(2scale-px(5px)) scale-px(0px); + border-radius: 0 scale-px(25px) scale-px(25px) 0; padding: { - left: scale-px(8scale-px(0px)); - right: scale-px(2scale-px(0px)); + left: scale-px(80px); + right: scale-px(20px); } } } @@ -155,8 +152,7 @@ &-btn { right: auto; left: 0; - border-radius: scale-px(0px) scale-px(4scale-px(5px)) - scale-px(4scale-px(5px)) scale-px(0px); + border-radius: scale-px(0px) scale-px(45px) scale-px(45px) scale-px(0px); .nut-icon { margin-right: scale-px(0px); margin-left: scale-px(5px); @@ -168,14 +164,13 @@ right: auto; left: 0; transform: translateX(-100%); - border-radius: scale-px(0px) scale-px(2scale-px(5px)) - scale-px(2scale-px(5px)) scale-px(0px); - box-shadow: scale-px(-scale-px(2px)) scale-px(2px) scale-px(8px) - scale-px(0px) rgba(0, 0, 0, 0.2); + border-radius: scale-px(0px) scale-px(25px) scale-px(25px) scale-px(0px); + box-shadow: scale-px(-2px) scale-px(2px) scale-px(8px) scale-px(0px) + rgba(0, 0, 0, 0.2); padding: { - right: scale-px(2scale-px(0px)); - left: scale-px(8scale-px(0px)); + right: scale-px(20px); + left: scale-px(80px); } &-item { @@ -193,7 +188,7 @@ .nut-fixednav-btn { left: auto; right: 0; - border-radius: scale-px(4scale-px(5px)) 0 0 scale-px(4scale-px(5px)); + border-radius: scale-px(45px) 0 0 scale-px(45px); .nut-icon { transform: rotate(0deg); @@ -206,12 +201,11 @@ transform: translateX(100%); right: auto; left: auto; - border-radius: scale-px(2scale-px(5px)) scale-px(0px) scale-px(0px) - scale-px(2scale-px(5px)); + border-radius: scale-px(25px) scale-px(0px) scale-px(0px) scale-px(25px); padding: { - right: scale-px(8scale-px(0px)); - left: scale-px(2scale-px(0px)); + right: scale-px(80px); + left: scale-px(20px); } } } diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.scss b/src/packages/hoverbuttonitem/hoverbuttonitem.scss index d82329a36b..16c7dc9327 100644 --- a/src/packages/hoverbuttonitem/hoverbuttonitem.scss +++ b/src/packages/hoverbuttonitem/hoverbuttonitem.scss @@ -28,7 +28,7 @@ display: block; width: scale-px(14px); height: scale-px(14px); - font-size: scale-px(14px); + font-size: $font-size-base; } } } @@ -44,7 +44,7 @@ display: block; width: scale-px(20px); height: scale-px(20px); - font-size: scale-px(20px); + font-size: scale-font-px(20px); } } @@ -59,7 +59,7 @@ } &-text { - font-size: scale-px(10px); + font-size: $font-size-xxs; margin-top: scale-px(5px); line-height: scale-px(9px); } diff --git a/src/packages/input/input.scss b/src/packages/input/input.scss index 12a03b4353..b24aac76c1 100644 --- a/src/packages/input/input.scss +++ b/src/packages/input/input.scss @@ -18,7 +18,7 @@ color: $color-text-disabled; width: scale-px(14px); height: scale-px(14px); - font-size: scale-px(14px); + font-size: $font-size-base; } &-container { height: scale-px(38px); diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss index 697081fbf0..5e5b0c90be 100644 --- a/src/packages/navbar/navbar.scss +++ b/src/packages/navbar/navbar.scss @@ -72,7 +72,7 @@ .nutui-iconfont { width: scale-px(20px); height: scale-px(20px); - font-size: scale-px(20px); + font-size: scale-font-px(20px); } /* #endif */ diff --git a/src/packages/pulltorefresh/pulltorefresh.scss b/src/packages/pulltorefresh/pulltorefresh.scss index 20ac535dd0..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: scale-px(12px); + font-size: $font-size-s; &-content { position: absolute; diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss index 06acbf9ecb..3b1c8c58a9 100644 --- a/src/packages/range/range.scss +++ b/src/packages/range/range.scss @@ -147,7 +147,7 @@ &-mark-text { position: absolute; line-height: scale-px(16px); - font-size: scale-px(12px); + font-size: $font-size-s; color: #999; text-align: center; word-break: keep-all; @@ -215,7 +215,7 @@ top: scale-px(0px); right: 50%; overflow: visible; - font-size: scale-px(12px); + font-size: $font-size-s; padding: scale-px(0px); } diff --git a/src/packages/rate/rate.scss b/src/packages/rate/rate.scss index 1350254770..09d9e606f8 100644 --- a/src/packages/rate/rate.scss +++ b/src/packages/rate/rate.scss @@ -114,12 +114,12 @@ } &-large { - font-size: calc($rate-font-size + scale-px(6px)); + font-size: calc($rate-font-size + scale-font-px(6px)); padding-left: calc($rate-item-margin * 2); } &-small { - font-size: calc($rate-font-size - scale-px(2px)); + font-size: calc($rate-font-size - scale-font-px(2px)); padding-left: calc($rate-item-margin / 2); } diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss index 3c25023da0..41edc2e56f 100644 --- a/src/packages/searchbar/searchbar.scss +++ b/src/packages/searchbar/searchbar.scss @@ -40,7 +40,7 @@ } &-rightin { - font-size: scale-px(15px); + font-size: $font-size-l; font-weight: 500; color: $color-primary; @@ -97,7 +97,7 @@ background-color: #fff; top: scale-px(9px); left: scale-px(6px); - font-size: scale-px(12px); + font-size: $font-size-s; line-height: scale-px(12px); .nut-searchbar-value { @@ -113,7 +113,7 @@ .nut-icon { width: scale-px(6px); height: scale-px(6px); - font-size: scale-px(6px); + font-size: scale-font-px(6px); color: #c2c4cc; margin-left: scale-px(4px); } diff --git a/src/packages/segmented/segmented.scss b/src/packages/segmented/segmented.scss index 7cd0cc192d..4791272752 100644 --- a/src/packages/segmented/segmented.scss +++ b/src/packages/segmented/segmented.scss @@ -38,6 +38,6 @@ .nut-icon { height: scale-px(10px); width: scale-px(10px); - font-size: scale-px(10px); + font-size: $font-size-xxs; } } diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss index 096ad44eea..df0eada700 100644 --- a/src/packages/skeleton/skeleton.scss +++ b/src/packages/skeleton/skeleton.scss @@ -1,6 +1,6 @@ .nut-skeleton { line-height: scale-px(0px); - font-size: scale-px(0px); + font-size: 0px; &-content { position: relative; diff --git a/src/packages/tabbar/tabbar.scss b/src/packages/tabbar/tabbar.scss index 610fa5f874..3babd41045 100644 --- a/src/packages/tabbar/tabbar.scss +++ b/src/packages/tabbar/tabbar.scss @@ -31,7 +31,7 @@ } .nut-tabbar-item-text { margin: 0 scale-px(4px) 0 scale-px(6px); - font-size: scale-px(14px); + font-size: $font-size-base; } .nut-badge-sup { &::after { diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss index 7db36733da..fc20e64d0e 100644 --- a/src/packages/tabbaritem/tabbaritem.scss +++ b/src/packages/tabbaritem/tabbaritem.scss @@ -12,7 +12,7 @@ .nut-icon { width: scale-px(24px); height: scale-px(24px); - font-size: scale-px(24px); + font-size: $font-size-xxl; /* #ifdef harmony dynamic*/ color: $tabbar-inactive-color; /* #endif*/ diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss index 209c4cfff1..6fe817bc63 100644 --- a/src/packages/tabs/tabs.scss +++ b/src/packages/tabs/tabs.scss @@ -93,7 +93,7 @@ .nut-icon { position: absolute; - font-size: scale-px(20px); + font-size: scale-font-px(20px); width: 100%; height: 100%; } diff --git a/src/packages/uploader/uploader.scss b/src/packages/uploader/uploader.scss index 09c77e0ee7..f1a39b1c7d 100644 --- a/src/packages/uploader/uploader.scss +++ b/src/packages/uploader/uploader.scss @@ -95,7 +95,7 @@ &-msg { color: $color-text-help; - font-size: scale-px(12px); + font-size: $font-size-s; } } @@ -161,7 +161,7 @@ position: absolute; bottom: 0; left: 0; - font-size: scale-px(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: scale-px(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 b0f21ae8ba..818dfc7c55 100644 --- a/src/packages/virtuallist/virtuallist.scss +++ b/src/packages/virtuallist/virtuallist.scss @@ -27,7 +27,7 @@ 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-px(13px); + font-size: scale-font-px(13px); line-height: scale-px(18px); font-family: PingFangSC; font-weight: 500; 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/styles/variables.scss b/src/styles/variables.scss index 0dbe99876f..b4fb98f526 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -2,10 +2,18 @@ // 缩放系数 :root { --scale-f: 1; + --scale-font: var(--scale-f, 1); + --scale-icon: var(--scale-f, 1); } @function scale-px($size) { @return calc(#{$size} * var(--scale-f, 1)); } +@function scale-font-px($size) { + @return calc(#{$size} * var(--scale-font, var(--scale-f, 1))); +} +@function scale-icon-px($size) { + @return calc(#{$size} * var(--scale-icon, var(--scale-f, 1))); +} // 主色调 // done $color-primary: var(--nutui-color-primary, #ff0f23) !default; $color-primary-stop-1: var(--nutui-color-primary-stop-1, #ff475d) !default; @@ -154,17 +162,17 @@ $font-family: sans-serif !default; // Font -$font-size-xxxs: var(--nutui-font-size-xxxs, scale-px(9px)) !default; -$font-size-xxs: var(--nutui-font-size-xxs, scale-px(10px)) !default; -$font-size-xs: var(--nutui-font-size-xs, scale-px(11px)) !default; -$font-size-s: var(--nutui-font-size-s, scale-px(12px)) !default; -$font-size-base: var(--nutui-font-size-base, scale-px(14px)) !default; -$font-size-l: var(--nutui-font-size-l, scale-px(15px)) !default; -$font-size-icon: var(--nutui-font-size-icon, scale-px(16px)) !default; -$font-size-xl: var(--nutui-font-size-xl, scale-px(18px)) !default; -$font-size-xxl: var(--nutui-font-size-xxl, scale-px(24px)) !default; -$font-size-xxxl: var(--nutui-font-size-10, scale-px(26px)) !default; -$font-size-xxxxl: var(--nutui-font-size-11, scale-px(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; @@ -534,9 +542,9 @@ $divider-vertical-margin: var( // icon（✅） -$icon-height: var(--nutui-icon-height, scale-px(20px)) !default; -$icon-width: var(--nutui-icon-width, scale-px(20px)) !default; -$icon-line-height: var(--nutui-icon-line-height, scale-px(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( @@ -577,7 +585,7 @@ $uploader-image-icon-margin-bottom: var( ) !default; $uploader-image-icon-tip-font-size: var( --nutui-uploader-image-icon-tip-font-size, - scale-px(12px) + $font-size-s ) !default; $uploader-preview-progress-background: var( --nutui-uploader-preview-progress-background, @@ -807,7 +815,7 @@ $numberkeyboard-header-close-color: var( ) !default; $numberkeyboard-header-close-font-size: var( --nutui-numberkeyboard-header-close-font-size, - scale-px(14px) + $font-size-base ) !default; $numberkeyboard-header-close-background-color: var( --nutui-numberkeyboard-header-close-background-color, @@ -921,57 +929,57 @@ $price-symbol-padding-right: var( //xlarge price（✅） $price-symbol-xlarge-size: var( --nutui-price-symbol-xlarge-size, - scale-px(12px) + $font-size-s ) !default; $price-integer-xlarge-size: var( --nutui-price-integer-xlarge-size, - scale-px(24px) + $font-size-xxl ) !default; $price-decimal-xlarge-size: var( --nutui-price-decimal-xlarge-size, - scale-px(12px) + $font-size-s ) !default; //large price（✅） $price-symbol-large-size: var( --nutui-price-symbol-large-size, - scale-px(12px) + $font-size-s ) !default; $price-integer-large-size: var( --nutui-price-integer-large-size, - scale-px(18px) + $font-size-xl ) !default; $price-decimal-large-size: var( --nutui-price-decimal-large-size, - scale-px(12px) + $font-size-s ) !default; //normal price（✅） $price-symbol-normal-size: var( --nutui-price-symbol-normal-size, - scale-px(12px) + $font-size-s ) !default; $price-integer-normal-size: var( --nutui-price-integer-normal-size, - scale-px(16px) + scale-font-px(16px) ) !default; $price-decimal-normal-size: var( --nutui-price-decimal-normal-size, - scale-px(12px) + $font-size-s ) !default; // small price（✅） $price-symbol-small-size: var( --nutui-price-symbol-small-size, - scale-px(12px) + $font-size-s ) !default; $price-integer-small-size: var( --nutui-price-integer-small-size, - scale-px(12px) + $font-size-s ) !default; $price-decimal-small-size: var( --nutui-price-decimal-small-size, - scale-px(12px) + $font-size-s ) !default; //avatar（✅） @@ -1050,11 +1058,11 @@ $switch-inactive-disabled-label-text-color: var( $toast-inner-text-align: var(--nutui-toast-inner-text-align, center) !default; $toast-title-font-size: var( --nutui-toast-title-font-size, - scale-px(16px) + scale-font-px(16px) ) !default; $toast-text-font-size: var( --nutui-toast-text-font-size, - scale-px(14px) + $font-size-base ) !default; $toast-font-color: var(--nutui-toast-font-color, $white) !default; $toast-inner-padding: var( @@ -1087,7 +1095,7 @@ $tour-content-inner-margin: var( ) !default; $tour-content-inner-font-size: var( --nutui-tour-content-inner-font-size, - scale-px(14px) + $font-size-base ) !default; $tour-content-bottom-margin-top: var( --nutui-tour-content-bottom-margin-top, @@ -1103,7 +1111,7 @@ $tour-content-bottom-btn-padding: var( ) !default; $tour-content-bottom-btn-font-size: var( --nutui-tour-content-bottom-btn-font-size, - scale-px(12px) + $font-size-s ) !default; $tour-content-bottom-btn-border-radius: var( --nutui-tour-content-bottom-btn-border-radius, @@ -1174,7 +1182,7 @@ $hoverbutton-position-right: var( ) !default; $hoverbutton-item-size: var( --nutui-hoverbutton-item-size, - scale-px(40px) + scale-font-px(40px) ) !default; $hoverbutton-item-border-color: var( --nutui-hoverbutton-item-border-color, @@ -1261,9 +1269,9 @@ $rate-icon-inactive-color: var( --nutui-rate-icon-inactive-color, $color-primary-icon-disabled ) !default; -$rate-icon-size: var(--nutui-rate-icon-size, scale-px(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, scale-px(12px)) !default; +$rate-font-size: var(--nutui-rate-font-size, $font-size-s) !default; // tabbar（✅） $tabbar-height: var(--nutui-tabbar-height, scale-px(46px)) !default; @@ -1317,7 +1325,7 @@ $infiniteloading-color: var( ) !default; $infiniteloading-icon-size: var( --nutui-infiniteloading-icon-size, - scale-px(24px) + $font-size-xxl ) !default; //range（✅） @@ -1363,7 +1371,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, - scale-px(12px) + $font-size-s ) !default; $steps-base-head-size: var( --nutui-steps-base-icon-size, @@ -1375,7 +1383,7 @@ $steps-base-head-color: var( ) !default; $steps-base-head-dot-size: var( --nutui-steps-base-head-dot-size, - scale-px(6px) + scale-font-px(6px) ) !default; $steps-base-head-dot-background-color: var( --nutui-steps-base-head-dot-background-color, @@ -1383,15 +1391,15 @@ $steps-base-head-dot-background-color: var( ) !default; $steps-base-head-icon-size: var( --nutui-steps-base-head-icon-size, - scale-px(16px) + scale-font-px(16px) ) !default; $steps-double-head-icon-size: var( --nutui-steps-base-head-icon-size-right, - scale-px(20px) + scale-font-px(20px) ) !default; $steps-vertical-head-icon-size: var( --nutui-steps-vertical-item-icon-size, - scale-px(20px) + scale-font-px(20px) ) !default; $steps-base-line-height: var( --nutui-steps-base-line-height, @@ -1643,11 +1651,11 @@ $dialog-vertical-footer-ok-margin-top: var( scale-px(16px) ) !default; $dialog-close-color: var(--nutui-dialog-close-color, #ffffff) !default; -$dialog-close-width: var(--nutui-dialog-close-width, scale-px(16px)) !default; +$dialog-close-width: var(--nutui-dialog-close-width, $font-size-icon) !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, - scale-px(24px) + $font-size-xxl ) !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; @@ -1926,7 +1934,7 @@ $badge-padding: var( 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, scale-px(10px)) !default; +$badge-icon-size: var(--nutui-badge-icon-size, $font-size-xxs) !default; $badge-content-transform: var( --nutui-badge-content-transform, translate(50%, -50%) @@ -1998,7 +2006,7 @@ $progress-text-padding: var( ) !default; $progress-text-font-size: var( --nutui-progress-text-font-size, - scale-px(13px) + scale-font-px(13px) ) !default; $progress-text-position-top: var( --nutui-progress-text-position-top, @@ -2307,7 +2315,10 @@ $searchbar-content-round-border-radius: var( --nutui-searchbar-content-round-border-radius, scale-px(19px) ) !default; -$searchbar-icon-size: var(--nutui-searchbar-icon-size, scale-px(20px)) !default; +$searchbar-icon-size: var( + --nutui-searchbar-icon-size, + scale-font-px(20px) +) !default; $searchbar-input-height: var( --nutui-searchbar-input-height, scale-px(38px) @@ -2737,7 +2748,7 @@ $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, - scale-px(16px) + scale-font-px(16px) ) !default; $addresslist-mask-bg: var( --nutui-addresslist-mask-bg, @@ -2749,7 +2760,7 @@ $addresslist-addr-font-color: var( ) !default; $addresslist-addr-font-size: var( --nutui-addresslist-addr-font-size, - scale-px(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; @@ -2795,7 +2806,7 @@ $watermark-z-index: var( // TrendArrow $trendarrow-font-size: var( --nutui-trendarrow-font-size, - scale-px(14px) + $font-size-base ) !default; $trendarrow-icon-margin: var( --nutui-trendarrow-icon-margin, @@ -2805,7 +2816,7 @@ $trendarrow-icon-margin: var( // animatingnumbers（✅） $countup-width: var(--nutui-countup-width, auto) !default; $countup-height: var(--nutui-countup-height, scale-px(32px)) !default; -$countup-base-size: var(--nutui-countup-base-size, scale-px(18px)) !default; +$countup-base-size: var(--nutui-countup-base-size, $font-size-xl) !default; $countup-border-radius: var( --nutui-countup-border-radius, scale-px(4px) @@ -2845,7 +2856,7 @@ $col-default-margin-bottom: var( // TrendArrow $trendarrow-font-size: var( --nutui-trendarrow-font-size, - scale-px(14px) + $font-size-base ) !default; $trendarrow-icon-margin: var( --nutui-trendarrow-icon-margin, diff --git a/src/utils/index.taro.ts b/src/utils/index.taro.ts index 6c90276045..dba3cac020 100644 --- a/src/utils/index.taro.ts +++ b/src/utils/index.taro.ts @@ -26,7 +26,6 @@ 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/scale-f.taro.ts b/src/utils/scale-f.taro.ts deleted file mode 100644 index 35a15c9678..0000000000 --- a/src/utils/scale-f.taro.ts +++ /dev/null @@ -1,20 +0,0 @@ -export let scale = 1 - -export async function getScaleF() { - return 1 -} - -export function setScaleF() { - scale = 1 - return scale -} - -export async function refreshScaleF() { - scale = 1 - return scale -} - -export function initScaleF() { - scale = 1 - return () => {} -} diff --git a/src/utils/scale-f.ts b/src/utils/scale-f.ts index 9c2dcbcec3..7bbf721481 100644 --- a/src/utils/scale-f.ts +++ b/src/utils/scale-f.ts @@ -1,5 +1,10 @@ +/** + * 响应式缩放系数（--scale-f）：结合京东站内原生桥与站外视口规则， + * 写入根节点 CSS 变量，供布局/字号/icon 等按比例换算（见 calcByProfile）。 + */ import { canUseDom } from './can-use-dom' +/** 原生 DongScreenAdapterPlugin.getScale 的典型返回结构 */ type NativeScaleResponse = { status?: string data?: { @@ -7,6 +12,7 @@ type NativeScaleResponse = { } } +/** jmfe 通用 callNative 签名 */ type NativeCaller = ( plugin: string, method: string, @@ -14,6 +20,7 @@ type NativeCaller = ( extra: string ) => Promise +/** 站内容器的 jmfe 桥接方法（可选） */ declare global { interface Window { jmfe?: { @@ -22,17 +29,102 @@ declare global { } } -export let scale = 1 +/** 当前基准缩放（来自原生或视口计算） */ +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 的 --scale-f / --scale-font / --scale-icon */ +function applyScaleCssVars(nextScale: number) { + if (!canUseDom) return + const rootStyle = document.documentElement.style + rootStyle.setProperty('--scale-f', formatScaleValue(nextScale)) + rootStyle.setProperty( + '--scale-font', + formatScaleValue(getCssSceneScale('font', nextScale)) + ) + rootStyle.setProperty( + '--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 >= 600) { - return 1.2 + if (deviceWidth >= PAD_BREAKPOINT) { + return PAD_SCALE } if (deviceWidth >= 375 && deviceWidth < 600) { @@ -43,7 +135,7 @@ function getScaleByViewport() { return 1 } -// 站内场景：优先走原生能力获取缩放系数。 +/** 通过 jmfe.callNative 拉取 DongScreenAdapterPlugin；失败返回 null */ async function getScaleByNative() { if (!canUseDom || !window.jmfe?.callNative) return null @@ -60,32 +152,33 @@ async function getScaleByNative() { return parsed } } - } catch (error) { - // ignore native failures and fallback to viewport rule + } catch { + /* 原生异常时由 getScaleF 回退到视口规则 */ } return null } -// 统一对外获取缩放系数：站内优先，失败时走站外规则。 -export async function getScaleF() { +/** 统一获取缩放：站内原生优先，失败则用视口规则 */ +async function getScaleF() { const nativeScale = await getScaleByNative() if (nativeScale) return nativeScale return getScaleByViewport() } -// 同步设置当前缩放值，并写入 CSS 变量 --scale-f。 -export function setScaleF(nextScale: number) { +/** 校验后更新内存中的 scale，并写入 --scale-f */ +function setScaleF(nextScale: number) { const validScale = Number.isFinite(nextScale) && nextScale > 0 ? nextScale : 1 scale = validScale - if (canUseDom) { - document.documentElement.style.setProperty('--scale-f', `${validScale}`) - } + applyScaleCssVars(validScale) return scale } -// 刷新缩放值，仅在值变化时更新，避免重复写样式。 -export async function refreshScaleF() { +/** 重新拉取缩放；可选同时切换 profile，避免与当前值相同时重复写 DOM */ +async function refreshScaleF(nextProfile?: ScaleProfile) { + if (nextProfile) { + setScaleProfile(nextProfile) + } const nextScale = await getScaleF() if (!scale || nextScale !== scale) { setScaleF(nextScale) @@ -93,9 +186,10 @@ export async function refreshScaleF() { return scale } -// 初始化缩放监听：首次执行一次，并在窗口 resize 时自动刷新。 -export function initScaleF() { +/** 首次计算缩放并订阅 resize；返回卸载函数（SSR 下为空函数） */ +export function initScaleF(nextProfile?: ScaleProfile) { if (!canUseDom) return () => {} + setScaleProfile(nextProfile) const handler = () => { refreshScaleF() @@ -108,3 +202,40 @@ export function initScaleF() { 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) +} From 1a35d9b813786676d21d0220a22ef1383c734246 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Fri, 8 May 2026 10:10:50 +0800 Subject: [PATCH 09/11] =?UTF-8?q?fix:=200px=20=E4=B8=8D=E8=BD=AC=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/address/address.scss | 2 +- src/packages/audio/audio.scss | 2 +- src/packages/calendar/calendar.scss | 8 +- src/packages/checkbox/checkbox.scss | 8 +- src/packages/collapseitem/collapseitem.scss | 2 +- src/packages/divider/divider.scss | 2 +- src/packages/fixednav/fixednav.scss | 18 ++--- src/packages/indicator/indicator.scss | 8 +- src/packages/popover/popover.scss | 2 +- src/packages/radio/radio.scss | 3 +- src/packages/range/range.scss | 19 +++-- src/packages/skeleton/skeleton.scss | 2 +- src/packages/swipe/swipe.scss | 6 +- src/packages/tabbar/tabbar.scss | 8 +- src/packages/table/table.scss | 2 +- src/packages/tour/tour.scss | 2 +- src/packages/uploader/uploader.scss | 6 +- src/styles/variables.scss | 82 ++++++++------------- 18 files changed, 79 insertions(+), 103 deletions(-) diff --git a/src/packages/address/address.scss b/src/packages/address/address.scss index 521b988cca..5c341c91fc 100644 --- a/src/packages/address/address.scss +++ b/src/packages/address/address.scss @@ -30,7 +30,7 @@ &-footer { width: 100%; height: scale-px(54px); - padding: scale-px(6px) scale-px(0px) 0; + padding: scale-px(6px) 0px 0; border-top: scale-px(1px) solid $color-border; &-btn { diff --git a/src/packages/audio/audio.scss b/src/packages/audio/audio.scss index a9c643ade6..d70948064e 100644 --- a/src/packages/audio/audio.scss +++ b/src/packages/audio/audio.scss @@ -39,7 +39,7 @@ display: flex; align-items: center; width: 100%; - margin: scale-px(0px) auto; + margin: 0px auto; padding: scale-px(10px) 0; &-bar-wrapper { diff --git a/src/packages/calendar/calendar.scss b/src/packages/calendar/calendar.scss index 0f8e728459..91ce01221c 100644 --- a/src/packages/calendar/calendar.scss +++ b/src/packages/calendar/calendar.scss @@ -60,8 +60,8 @@ align-items: center; justify-content: space-around; height: scale-px(36px); - border-radius: scale-px(0px) scale-px(0px) scale-px(12px) scale-px(12px); - box-shadow: scale-px(0px) scale-px(4px) scale-px(10px) scale-px(0px) + 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); } @@ -160,13 +160,13 @@ border-radius: $calendar-day-active-border-radius; &.active-start { - border-radius: scale-px(0px); + border-radius: 0px; border-top-left-radius: $calendar-day-active-border-radius; border-bottom-left-radius: $calendar-day-active-border-radius; } &.active-end { - border-radius: scale-px(0px); + border-radius: 0px; border-top-right-radius: $calendar-day-active-border-radius; border-bottom-right-radius: $calendar-day-active-border-radius; } diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss index 441eea8bc3..f2772cfdee 100644 --- a/src/packages/checkbox/checkbox.scss +++ b/src/packages/checkbox/checkbox.scss @@ -12,10 +12,9 @@ &-icon-wrap { font-size: 0px; - line-height: scale-px(0px); + line-height: 0px; border-radius: 50%; - box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(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 { @@ -44,8 +43,7 @@ &-icon-indeterminate { color: $color-primary; background-color: $white; - box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px) - #ff0f2333; + box-shadow: 0px scale-px(2px) scale-px(4px) 0px #ff0f2333; border-radius: 50%; &.nut-checkbox-icon-disabled { diff --git a/src/packages/collapseitem/collapseitem.scss b/src/packages/collapseitem/collapseitem.scss index faf0cb2d64..298f1549ee 100644 --- a/src/packages/collapseitem/collapseitem.scss +++ b/src/packages/collapseitem/collapseitem.scss @@ -57,7 +57,7 @@ flex: 1; display: flex; justify-content: flex-end; - padding: scale-px(0px) scale-px(20px); + padding: 0px scale-px(20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/packages/divider/divider.scss b/src/packages/divider/divider.scss index a9a6aac260..6cff69ca04 100644 --- a/src/packages/divider/divider.scss +++ b/src/packages/divider/divider.scss @@ -51,7 +51,7 @@ /* #ifndef dynamic*/ display: inline-flex; /* #endif */ - width: scale-px(0px); + width: 0px; height: $divider-vertical-height; border-left: scale-px(1px) solid $divider-border-color; margin: $divider-vertical-margin; diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss index b24e615092..9fe8c396d3 100644 --- a/src/packages/fixednav/fixednav.scss +++ b/src/packages/fixednav/fixednav.scss @@ -32,8 +32,7 @@ width: scale-px(70px); height: 100%; background: $fixednav-button-background; - box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(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; @@ -60,8 +59,7 @@ background: $fixednav-background-color; display: flex; justify-content: space-between; - box-shadow: scale-px(2px) scale-px(2px) scale-px(8px) scale-px(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; @@ -152,9 +150,9 @@ &-btn { right: auto; left: 0; - border-radius: scale-px(0px) scale-px(45px) scale-px(45px) scale-px(0px); + border-radius: 0px scale-px(45px) scale-px(45px) 0px; .nut-icon { - margin-right: scale-px(0px); + margin-right: 0px; margin-left: scale-px(5px); transform: rotate(180deg); } @@ -164,8 +162,8 @@ right: auto; left: 0; transform: translateX(-100%); - border-radius: scale-px(0px) scale-px(25px) scale-px(25px) scale-px(0px); - box-shadow: scale-px(-2px) scale-px(2px) scale-px(8px) scale-px(0px) + 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: { @@ -193,7 +191,7 @@ .nut-icon { transform: rotate(0deg); margin-right: scale-px(5px); - margin-left: scale-px(0px); + margin-left: 0px; } } @@ -201,7 +199,7 @@ transform: translateX(100%); right: auto; left: auto; - border-radius: scale-px(25px) scale-px(0px) scale-px(0px) scale-px(25px); + border-radius: scale-px(25px) 0px 0px scale-px(25px); padding: { right: scale-px(80px); diff --git a/src/packages/indicator/indicator.scss b/src/packages/indicator/indicator.scss index cd30feea2d..66e75485ee 100644 --- a/src/packages/indicator/indicator.scss +++ b/src/packages/indicator/indicator.scss @@ -21,7 +21,7 @@ opacity: 0.4; &-0 { - margin-left: scale-px(0px); + margin-left: 0px; } &-active { @@ -149,11 +149,11 @@ .nut-indicator { &-dot { - margin: scale-px(0px); + margin: 0px; margin-top: $indicator-dot-margin; &-0 { - margin-top: scale-px(0px); + margin-top: 0px; } &-active { @@ -178,7 +178,7 @@ &-dot { &-0 { margin-right: $indicator-dot-margin; - margin-left: scale-px(0px); + margin-left: 0px; } } } diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss index d78fae486d..ac25a51623 100644 --- a/src/packages/popover/popover.scss +++ b/src/packages/popover/popover.scss @@ -92,7 +92,7 @@ word-wrap: break-word; &:last-child { - margin-bottom: scale-px(0px); + margin-bottom: 0px; border-bottom: none; } diff --git a/src/packages/radio/radio.scss b/src/packages/radio/radio.scss index 074e6812b2..fd0c80b838 100644 --- a/src/packages/radio/radio.scss +++ b/src/packages/radio/radio.scss @@ -37,8 +37,7 @@ &-checked { color: $color-primary; background-color: $white; - box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px) - #ff0f2333; + box-shadow: 0px scale-px(2px) scale-px(4px) 0px #ff0f2333; border-radius: 50%; &.nut-radio-icon-disabled { diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss index 3b1c8c58a9..e07ecbfbc7 100644 --- a/src/packages/range/range.scss +++ b/src/packages/range/range.scss @@ -59,8 +59,7 @@ height: $range-button-height; background: $range-button-background; border-radius: 50%; - box-shadow: scale-px(0px) scale-px(1px) scale-px(2px) scale-px(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; @@ -159,7 +158,7 @@ top: scale-px(-20px); width: scale-px(11px); height: scale-px(11px); - left: scale-px(0px); + left: 0px; border-radius: scale-px(6px); background: $range-inactive-color; @@ -172,12 +171,12 @@ .nut-range-vertical-container { height: 100%; flex-direction: column; - padding: scale-px(0px) scale-px(15px); + padding: 0px scale-px(15px); } .nut-range-vertical { width: $range-height; - margin: $range-margin scale-px(0px); + margin: $range-margin 0px; &-button { &-wrapper, @@ -193,7 +192,7 @@ } &-wrapper-left { - top: scale-px(0px); + top: 0px; left: 50%; /* #ifndef dynamic*/ right: initial; @@ -202,7 +201,7 @@ } &-number { - left: scale-px(0px); + left: 0px; top: 50%; // transform: translate3d(100%, 0, 0); } @@ -212,11 +211,11 @@ position: absolute; width: scale-px(36px); height: 100%; - top: scale-px(0px); + top: 0px; right: 50%; overflow: visible; font-size: $font-size-s; - padding: scale-px(0px); + padding: 0px; } &-mark-hm { @@ -276,7 +275,7 @@ } &-tick { - right: scale-px(0px); + right: 0px; /* #ifndef dynamic*/ left: initial; /* #endif */ diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss index df0eada700..2f0293501a 100644 --- a/src/packages/skeleton/skeleton.scss +++ b/src/packages/skeleton/skeleton.scss @@ -1,5 +1,5 @@ .nut-skeleton { - line-height: scale-px(0px); + line-height: 0px; font-size: 0px; &-content { diff --git a/src/packages/swipe/swipe.scss b/src/packages/swipe/swipe.scss index 58ca3143b9..7e4c86211c 100644 --- a/src/packages/swipe/swipe.scss +++ b/src/packages/swipe/swipe.scss @@ -27,12 +27,12 @@ &-left { left: 0; - transform: translate(-100%, scale-px(0px)); + transform: translate(-100%, 0px); } &-right { //left: 100%; - right: scale-px(0px); - transform: translate(100%, scale-px(0px)); + right: 0px; + transform: translate(100%, 0px); } } diff --git a/src/packages/tabbar/tabbar.scss b/src/packages/tabbar/tabbar.scss index 3babd41045..ace561058c 100644 --- a/src/packages/tabbar/tabbar.scss +++ b/src/packages/tabbar/tabbar.scss @@ -1,7 +1,7 @@ @import '../tabbaritem/tabbaritem.scss'; .nut-tabbar { - border: scale-px(0px); + border: 0px; box-shadow: $tabbar-box-shadow; border-bottom: $tabbar-border-bottom; border-top: $tabbar-border-top; @@ -44,8 +44,8 @@ &-fixed { position: fixed; - bottom: scale-px(0px); - left: scale-px(0px); + bottom: 0px; + left: 0px; } } @@ -58,6 +58,6 @@ &-fixed { left: auto; - right: scale-px(0px); + right: 0px; } } diff --git a/src/packages/table/table.scss b/src/packages/table/table.scss index 4bcb8ffeb9..4d2cd82e81 100644 --- a/src/packages/table/table.scss +++ b/src/packages/table/table.scss @@ -143,7 +143,7 @@ &-sticky-left, &-sticky-right { position: absolute; - top: scale-px(0px); + top: 0px; width: scale-px(8px); bottom: scale-px(-1px); overflow-x: hidden; diff --git a/src/packages/tour/tour.scss b/src/packages/tour/tour.scss index a4b845c512..0fece09c71 100644 --- a/src/packages/tour/tour.scss +++ b/src/packages/tour/tour.scss @@ -3,7 +3,7 @@ .nut-tour { &-mask { position: fixed; - box-shadow: scale-px(0px) scale-px(0px) scale-px(0px) 150vh $color-mask; + box-shadow: 0px 0px 0px 150vh $color-mask; border-radius: $tour-mask-border-radius; z-index: 999; diff --git a/src/packages/uploader/uploader.scss b/src/packages/uploader/uploader.scss index f1a39b1c7d..372e69fb98 100644 --- a/src/packages/uploader/uploader.scss +++ b/src/packages/uploader/uploader.scss @@ -101,8 +101,8 @@ &.list { width: 100%; - margin-right: scale-px(0px); - margin-bottom: scale-px(0px); + margin-right: 0px; + margin-bottom: 0px; margin-top: scale-px(10px); box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 1%); } @@ -235,7 +235,7 @@ &.list { margin-right: 0; - margin-left: scale-px(0px); + margin-left: 0px; } .close { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index b4fb98f526..31b0c40b35 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -248,7 +248,7 @@ $button-border-width: var( ) !default; $button-normal-padding: var( --nutui-button-normal-padding, - scale-px(0px) scale-px(12px) + 0px scale-px(12px) ) !default; $button-default-height: var( --nutui-button-default-height, @@ -273,7 +273,7 @@ $button-default-disabled-color: var( ) !default; $button-default-padding: var( --nutui-button-default-padding, - scale-px(0px) scale-px(12px) + 0px scale-px(12px) ) !default; $button-default-font-size: var( --nutui-button-default-font-size, @@ -286,7 +286,7 @@ $button-xlarge-height: var( ) !default; $button-xlarge-padding: var( --nutui-button-xlarge-padding, - scale-px(0px) scale-px(24px) + 0px scale-px(24px) ) !default; $button-xlarge-font-size: var( --nutui-button-xlarge-font-size, @@ -304,7 +304,7 @@ $button-xlarge-border-radius: var( $button-large-height: var(--nutui-button-large-height, scale-px(40px)) !default; $button-large-padding: var( --nutui-button-large-padding, - scale-px(0px) scale-px(16px) + 0px scale-px(16px) ) !default; $button-large-font-size: var( --nutui-button-large-font-size, @@ -321,7 +321,7 @@ $button-small-font-size: var( ) !default; $button-small-padding: var( --nutui-button-small-padding, - scale-px(0px) scale-px(8px) + 0px scale-px(8px) ) !default; $button-small-height: var(--nutui-button-small-height, scale-px(28px)) !default; $button-small-border-radius: var( @@ -331,7 +331,7 @@ $button-small-border-radius: var( $button-mini-padding: var( --nutui-button-mini-padding, - scale-px(0px) scale-px(8px) + 0px scale-px(8px) ) !default; $button-mini-height: var(--nutui-button-mini-height, scale-px(24px)) !default; $button-mini-font-size: var( @@ -472,7 +472,7 @@ $cell-background-color: var( ) !default; $cell-box-shadow: var( --nutui-cell-box-shadow, - scale-px(0px) scale-px(1px) scale-px(7px) scale-px(0px) rgba(237, 238, 241, 1) + 0px scale-px(1px) scale-px(7px) 0px rgba(237, 238, 241, 1) ) !default; // cell-group（✅） @@ -555,10 +555,7 @@ $uploader-image-height: var( --nutui-uploader-image-height, scale-px(100px) ) !default; -$uploader-image-border: var( - --nutui-uploader-image-border, - scale-px(0px) -) !default; +$uploader-image-border: var(--nutui-uploader-image-border, 0px) !default; $uploader-image-border-radius: var( --nutui-uploader-image-border-radius, scale-px(4px) @@ -613,11 +610,11 @@ $uploader-preview-tips-padding: var( ) !default; $uploader-preview-close-right: var( --nutui-uploader-preview-close-right, - scale-px(0px) + 0px ) !default; $uploader-preview-close-top: var( --nutui-uploader-preview-close-top, - scale-px(0px) + 0px ) !default; // picker（✅） @@ -663,7 +660,7 @@ $picker-mask-background: var( $input-border-bottom: var(--nutui-input-border-bottom, $color-border) !default; $input-border-bottom-width: var( --nutui-input-border-bottom-width, - scale-px(0px) + 0px ) !default; // $input-disabled-color: var( // --nutui-input-disabled-color, @@ -717,10 +714,7 @@ $inputnumber-input-border-radius: var( --nutui-inputnumber-input-border-radius, scale-px(4px) ) !default; -$inputnumber-input-margin: var( - --nutui-inputnumber-input-margin, - scale-px(0px) -) !default; +$inputnumber-input-margin: var(--nutui-inputnumber-input-margin, 0px) !default; $inputnumber-button-width: var( --nutui-inputnumber-button-width, scale-px(20px) @@ -923,7 +917,7 @@ $price-line-color: var( ) !default; $price-symbol-padding-right: var( --nutui-price-symbol-padding-right, - scale-px(0px) + 0px ) !default; //xlarge price（✅） @@ -1030,15 +1024,15 @@ $switch-inside-border-radius: var( /* #ifdef harmony */ $switch-inside-box-shadow: var( --nutui-switch-inside-box-shadow, - scale-px(0px) scale-px(2px) scale-px(6px) scale-px(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, - scale-px(0px) scale-px(2px) scale-px(1px) scale-px(0px) rgba(0, 0, 0, 0.06), - scale-px(0px) scale-px(2px) scale-px(6px) scale-px(0px) rgba(0, 0, 0, 0.1), - scale-px(0px) scale-px(0px) scale-px(0px) scale-px(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( @@ -1091,7 +1085,7 @@ $tour-content-padding: var( ) !default; $tour-content-inner-margin: var( --nutui-tour-content-inner-margin, - scale-px(10px) scale-px(0px) + scale-px(10px) 0px ) !default; $tour-content-inner-font-size: var( --nutui-tour-content-inner-font-size, @@ -1182,7 +1176,7 @@ $hoverbutton-position-right: var( ) !default; $hoverbutton-item-size: var( --nutui-hoverbutton-item-size, - scale-font-px(40px) + scale-px(40px) ) !default; $hoverbutton-item-border-color: var( --nutui-hoverbutton-item-border-color, @@ -1245,17 +1239,14 @@ $popup-animation-duration: var(--nutui-popup-animation-duration, 0.3s) !default; // Notify（✅） $notify-height: var(--nutui-notify-height, scale-px(40px)) !default; -$notify-padding: var( - --nutui-notify-padding, - scale-px(0px) scale-px(12px) -) !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, - scale-px(0px) scale-px(4px) scale-px(12px) scale-px(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; @@ -1383,7 +1374,7 @@ $steps-base-head-color: var( ) !default; $steps-base-head-dot-size: var( --nutui-steps-base-head-dot-size, - scale-font-px(6px) + scale-px(6px) ) !default; $steps-base-head-dot-background-color: var( --nutui-steps-base-head-dot-background-color, @@ -1395,11 +1386,11 @@ $steps-base-head-icon-size: var( ) !default; $steps-double-head-icon-size: var( --nutui-steps-base-head-icon-size-right, - scale-font-px(20px) + scale-px(20px) ) !default; $steps-vertical-head-icon-size: var( --nutui-steps-vertical-item-icon-size, - scale-font-px(20px) + scale-px(20px) ) !default; $steps-base-line-height: var( --nutui-steps-base-line-height, @@ -1620,7 +1611,7 @@ $dialog-footer-badge-top: var( ) !default; $dialog-footer-badge-border-radius: var( --nutui-dialog-footer-badge-border-radius, - scale-px(2px) scale-px(2px) scale-px(0px) scale-px(2px) + scale-px(2px) scale-px(2px) 0px scale-px(2px) ) !default; $dialog-footer-badge-bg-ok: var( --nutui-dialog-footer-badge-bg-ok, @@ -1651,7 +1642,7 @@ $dialog-vertical-footer-ok-margin-top: var( scale-px(16px) ) !default; $dialog-close-color: var(--nutui-dialog-close-color, #ffffff) !default; -$dialog-close-width: var(--nutui-dialog-close-width, $font-size-icon) !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, @@ -1875,7 +1866,7 @@ $timeselect-time-background: var( ) !default; //tag（✅） -$tag-padding: var(--nutui-tag-padding, scale-px(0px) scale-px(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, scale-px(2px)) !default; $tag-height: var(--nutui-tag-height, scale-px(14px)) !default; @@ -2315,10 +2306,7 @@ $searchbar-content-round-border-radius: var( --nutui-searchbar-content-round-border-radius, scale-px(19px) ) !default; -$searchbar-icon-size: var( - --nutui-searchbar-icon-size, - scale-font-px(20px) -) !default; +$searchbar-icon-size: var(--nutui-searchbar-icon-size, scale-px(20px)) !default; $searchbar-input-height: var( --nutui-searchbar-input-height, scale-px(38px) @@ -2381,10 +2369,7 @@ $empty-image-small-size: var( --nutui-empty-image-small-size, scale-px(120px) ) !default; -$empty-title-margin-top: var( - --nutui-empty-title-margin-top, - scale-px(0px) -) !default; +$empty-title-margin-top: var(--nutui-empty-title-margin-top, 0px) !default; $empty-background-color: var( --nutui-empty-background-color, $color-background-overlay @@ -2441,13 +2426,10 @@ $cascader-item-padding: var( --nutui-cascader-item-padding, scale-px(10px) scale-px(20px) ) !default; -$cascader-item-margin: var( - --nutui-cascader-item-margin, - scale-px(0px) -) !default; +$cascader-item-margin: var(--nutui-cascader-item-margin, 0px) !default; $cascader-item-border-bottom: var( --nutui-cascader-item-border-bottom, - scale-px(0px) solid $color-border + 0px solid $color-border ) !default; $cascader-item-color: var(--nutui-cascader-item-color, $color-title) !default; $cascader-item-font-size: var( @@ -2537,7 +2519,7 @@ $skeleton-line-border-radius: var( $card-border-radius: var(--nutui-card-border-radius, scale-px(4px)) !default; // grid（✅） -$grid-border-width: var(--nutui-grid-border-width, scale-px(0px)) !default; +$grid-border-width: var(--nutui-grid-border-width, 0px) !default; $grid-border-color: var(--nutui-grid-border-color, $color-border) !default; $grid-item-border-radius: var( --nutui-grid-item-border-radius, From 1f36f708989f5ed5ea515cdafc207c6e96f39c3a Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Sat, 9 May 2026 10:46:58 +0800 Subject: [PATCH 10/11] =?UTF-8?q?style:=20=E6=A0=B7=E5=BC=8F=E5=A4=9A?= =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/checkbox/checkbox.scss | 10 +- src/packages/navbar/navbar.scss | 1 + src/packages/popover/popover.scss | 2 + src/packages/popover/popover.tsx | 2 +- src/packages/segmented/segmented.scss | 2 + src/packages/step/step.scss | 1 - src/packages/steps/steps.scss | 26 ++- src/packages/tag/tag.scss | 5 + src/packages/tag/tag.taro.tsx | 2 +- src/packages/tag/tag.tsx | 3 +- src/packages/timeselect/timeselect.scss | 2 +- src/sites/mobile/main.tsx | 2 +- src/styles/theme-dark.scss | 72 +++++-- src/styles/theme-default.scss | 72 +++++-- src/styles/variables.scss | 32 ++-- src/utils/index.taro.ts | 1 + src/utils/scale-f.taro.ts | 237 ++++++++++++++++++++++++ src/utils/scale-f.ts | 12 +- 18 files changed, 408 insertions(+), 76 deletions(-) create mode 100644 src/utils/scale-f.taro.ts diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss index f2772cfdee..940f910880 100644 --- a/src/packages/checkbox/checkbox.scss +++ b/src/packages/checkbox/checkbox.scss @@ -103,10 +103,10 @@ bottom: 0; width: 0; height: 0; - border-top: scale-px(10px) solid transparent; - border-left: scale-px(10px) solid transparent; - border-bottom: scale-px(10px) solid $color-primary; - border-right: scale-px(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; @@ -117,7 +117,7 @@ height: scale-px(12px); position: absolute; color: $white; - right: 0; + right: 0px; bottom: 0; transform: translate(scale-px(-1px), scale-px(-2px)); } diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss index 5e5b0c90be..701c006fa5 100644 --- a/src/packages/navbar/navbar.scss +++ b/src/packages/navbar/navbar.scss @@ -48,6 +48,7 @@ font-size: $navbar-title-font-size; font-weight: $navbar-title-font-weight; color: $navbar-title-font-color; + white-space: nowrap; &-center { max-width: scale-px(129px); diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss index ac25a51623..fb17684946 100644 --- a/src/packages/popover/popover.scss +++ b/src/packages/popover/popover.scss @@ -12,6 +12,8 @@ .nut-icon-ArrowRadius { position: absolute; color: $popover-content-background-color; + width: scale-px(8px); + height: scale-px(4px); } &-top { 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/segmented/segmented.scss b/src/packages/segmented/segmented.scss index 4791272752..4a27e5d9fd 100644 --- a/src/packages/segmented/segmented.scss +++ b/src/packages/segmented/segmented.scss @@ -32,6 +32,8 @@ } .nut-segmented-icon { + display: flex; + align-items: center; height: scale-px(10px); width: scale-px(10px); margin-right: $segmented-icon-margin-right; diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss index f46ec86438..0877ed6e9c 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -90,7 +90,6 @@ line-height: scale-px(14px); font-size: $steps-base-title-font-size; color: $steps-base-title-color; - overflow: hidden; white-space: nowrap; } diff --git a/src/packages/steps/steps.scss b/src/packages/steps/steps.scss index 1bc6fb7e29..e00e62aa5a 100644 --- a/src/packages/steps/steps.scss +++ b/src/packages/steps/steps.scss @@ -13,8 +13,8 @@ &-icon { .nut-icon { - height: scale-px(10px); - width: scale-px(10px); + height: scale-icon-px(10px); + width: scale-icon-px(10px); } .nut-image { @@ -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: scale-px(6px); + margin-bottom: scale-px(5px); &-dot-wrap, &-icon-wrap, @@ -145,15 +146,22 @@ width: $steps-double-head-icon-size; .nut-icon { - height: scale-px(12px); - width: scale-px(12px); + height: scale-icon-px(12px); + width: scale-icon-px(12px); } } &-main { align-items: center; margin-left: 0; - margin-top: scale-px(2px); + } + + &-title { + height: auto; + line-height: scale-px(20px); + white-space: normal; + overflow-wrap: break-word; + text-align: center; } } @@ -214,15 +222,15 @@ &-head { align-items: center; justify-content: center; - height: scale-px(18px); + height: scale-px(20px); &-icon { width: $steps-vertical-head-icon-size; height: $steps-vertical-head-icon-size; .nut-icon { - height: scale-px(12px); - width: scale-px(12px); + height: scale-icon-px(12px); + width: scale-icon-px(12px); } } } diff --git a/src/packages/tag/tag.scss b/src/packages/tag/tag.scss index c9589e8e64..7d1494c819 100644 --- a/src/packages/tag/tag.scss +++ b/src/packages/tag/tag.scss @@ -79,6 +79,11 @@ 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, 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/timeselect/timeselect.scss b/src/packages/timeselect/timeselect.scss index 42367ca1f0..fa8552ff76 100644 --- a/src/packages/timeselect/timeselect.scss +++ b/src/packages/timeselect/timeselect.scss @@ -13,7 +13,7 @@ } &-content-left { - width: $timeselect-date-width; + // width: $timeselect-date-width; min-width: $timeselect-date-width; height: 100%; /* #ifndef dynamic*/ diff --git a/src/sites/mobile/main.tsx b/src/sites/mobile/main.tsx index 4375a84772..f83d6b6859 100644 --- a/src/sites/mobile/main.tsx +++ b/src/sites/mobile/main.tsx @@ -29,7 +29,7 @@ if (!isMobile && pathname.includes('demo') && !pathname.includes('jmapp')) { } if (rootElement != null) { - initScaleF() + 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 31b0c40b35..60308ce3b1 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,18 +1,28 @@ // ---------------------------------------------------- // 缩放系数 :root { - --scale-f: 1; - --scale-font: var(--scale-f, 1); - --scale-icon: var(--scale-f, 1); + --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(--scale-f, 1)); + @return calc(#{$size} * var(--nut-scale-f, 1)); } @function scale-font-px($size) { - @return calc(#{$size} * var(--scale-font, var(--scale-f, 1))); + @return calc(#{$size} * var(--nut-scale-font, var(--nut-scale-f, 1))); } @function scale-icon-px($size) { - @return calc(#{$size} * var(--scale-icon, var(--scale-f, 1))); + @return calc(#{$size} * var(--nut-scale-icon, var(--nut-scale-f, 1))); } // 主色调 // done $color-primary: var(--nutui-color-primary, #ff0f23) !default; @@ -1374,7 +1384,7 @@ $steps-base-head-color: var( ) !default; $steps-base-head-dot-size: var( --nutui-steps-base-head-dot-size, - scale-px(6px) + scale-icon-px(6px) ) !default; $steps-base-head-dot-background-color: var( --nutui-steps-base-head-dot-background-color, @@ -1519,7 +1529,7 @@ $steps-horizontal-item-special-3-padding-right: var( ) !default; $steps-vertical-item-padding-bottom: var( --nutui-steps-vertical-item-padding-bottom, - scale-px(13px) + scale-px(12px) ) !default; $steps-vertical-title-font-size: var( --nutui-steps-vertical-title-font-size, @@ -1527,11 +1537,11 @@ $steps-vertical-title-font-size: var( ) !default; $steps-vertical-title-margin-bottom: var( --nutui-steps-vertical-title-margin-bottom, - scale-px(4px) + scale-px(3px) ) !default; $steps-vertical-line-height: var( --nutui-steps-vertical-line-height, - scale-px(18px) + scale-px(20px) ) !default; $steps-vertical-description-font-size: var( --nutui-steps-vertical-description-font-size, @@ -1850,7 +1860,7 @@ $timeselect-date-active-color: var( ) !default; $timeselect-time-width: var( --nutui-timeselect-time-width, - scale-px(100px) + scale-px(110px) ) !default; $timeselect-time-height: var( --nutui-timeselect-time-height, 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/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 index 7bbf721481..38ded9c371 100644 --- a/src/utils/scale-f.ts +++ b/src/utils/scale-f.ts @@ -1,5 +1,5 @@ /** - * 响应式缩放系数（--scale-f）：结合京东站内原生桥与站外视口规则， + * 响应式缩放系数（--nut-scale-f）：结合京东站内原生桥与站外视口规则， * 写入根节点 CSS 变量，供布局/字号/icon 等按比例换算（见 calcByProfile）。 */ import { canUseDom } from './can-use-dom' @@ -61,17 +61,17 @@ function getCssSceneScale(scene: ScaleScene, baseScale: number) { return baseScale * getSceneRatio(scene, profile) } -/** 将缩放值同步到 :root 的 --scale-f / --scale-font / --scale-icon */ +/** 将缩放值同步到 :root 的 --nut-scale-f / --nut-scale-font / --nut-scale-icon */ function applyScaleCssVars(nextScale: number) { if (!canUseDom) return const rootStyle = document.documentElement.style - rootStyle.setProperty('--scale-f', formatScaleValue(nextScale)) + rootStyle.setProperty('--nut-scale-f', formatScaleValue(nextScale)) rootStyle.setProperty( - '--scale-font', + '--nut-scale-font', formatScaleValue(getCssSceneScale('font', nextScale)) ) rootStyle.setProperty( - '--scale-icon', + '--nut-scale-icon', formatScaleValue(getCssSceneScale('icon', nextScale)) ) } @@ -166,7 +166,7 @@ async function getScaleF() { return getScaleByViewport() } -/** 校验后更新内存中的 scale，并写入 --scale-f */ +/** 校验后更新内存中的 scale，并写入 --nut-scale-f */ function setScaleF(nextScale: number) { const validScale = Number.isFinite(nextScale) && nextScale > 0 ? nextScale : 1 scale = validScale From 5565d44a1b820911078280439e3d14254dbce1fa Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Sat, 9 May 2026 19:46:53 +0800 Subject: [PATCH 11/11] =?UTF-8?q?style:=20=E6=A0=B7=E5=BC=8F=E5=A4=9A?= =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/calendarcard/calendarcard.scss | 1 + src/packages/inputnumber/inputnumber.scss | 12 ++++++------ src/packages/price/price.scss | 16 +++++++++------- src/packages/rate/rate.scss | 4 +++- src/packages/segmented/segmented.scss | 2 +- src/packages/shortpassword/shortpassword.scss | 12 ++++++------ src/packages/tour/tour.scss | 4 ++-- 7 files changed, 28 insertions(+), 23 deletions(-) diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss index e069b11d53..6bba3e5099 100644 --- a/src/packages/calendarcard/calendarcard.scss +++ b/src/packages/calendarcard/calendarcard.scss @@ -3,6 +3,7 @@ border-radius: scale-px(12px); overflow: hidden; font-size: $calendar-base-font-size; + line-height: $calendar-base-font-size; color: $color-title; &-header { diff --git a/src/packages/inputnumber/inputnumber.scss b/src/packages/inputnumber/inputnumber.scss index 73e01d4419..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: scale-px(10px); - --nut-icon-height: scale-px(10px); + width: scale-px(10px); + height: scale-px(10px); } } @@ -66,12 +66,12 @@ } &-icon-minus { - --nut-icon-width: scale-px(16px); - --nut-icon-height: scale-px(16px); + width: scale-px(16px); + height: scale-px(16px); } &-icon-plus { - --nut-icon-width: scale-px(16px); - --nut-icon-height: scale-px(16px); + width: scale-px(16px); + height: scale-px(16px); } } 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/rate/rate.scss b/src/packages/rate/rate.scss index 09d9e606f8..3646328b18 100644 --- a/src/packages/rate/rate.scss +++ b/src/packages/rate/rate.scss @@ -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 + 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 - scale-font-px(2px)); + line-height: calc($rate-font-size - scale-font-px(2px)); padding-left: calc($rate-item-margin / 2); } diff --git a/src/packages/segmented/segmented.scss b/src/packages/segmented/segmented.scss index 4a27e5d9fd..ebe65addc1 100644 --- a/src/packages/segmented/segmented.scss +++ b/src/packages/segmented/segmented.scss @@ -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; } diff --git a/src/packages/shortpassword/shortpassword.scss b/src/packages/shortpassword/shortpassword.scss index 75820fd35f..8003ff02d0 100644 --- a/src/packages/shortpassword/shortpassword.scss +++ b/src/packages/shortpassword/shortpassword.scss @@ -10,7 +10,7 @@ &-title { display: flex; justify-content: center; - line-height: 1; + line-height: $font-size-l; font-size: $font-size-l; color: $color-title; } @@ -20,7 +20,7 @@ justify-content: center; margin-top: scale-px(12px); margin-bottom: scale-px(24px); - line-height: 1; + line-height: $font-size-s; font-size: $font-size-s; color: $color-text; } @@ -85,13 +85,13 @@ 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; @@ -113,7 +113,7 @@ border: scale-px(1px) solid $color-primary; border-radius: scale-px(15px); padding: scale-px(8px) scale-px(38px); - line-height: 1; + line-height: $font-size-base; font-size: $font-size-base; color: $color-primary; } @@ -126,7 +126,7 @@ ); border-radius: scale-px(15px); padding: scale-px(8px) scale-px(38px); - line-height: 1; + line-height: $font-size-base; font-size: $font-size-base; color: $color-primary-text; } diff --git a/src/packages/tour/tour.scss b/src/packages/tour/tour.scss index 0fece09c71..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: scale-px(10px); - --nut-icon-height: scale-px(10px); + width: scale-px(10px); + height: scale-px(10px); } }