From 4d192182f9304ab9a04be58d84b604a91d38f556 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 12 May 2026 14:07:31 +0800 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=E6=9E=84=E5=BB=BA=E6=97=B6?= =?UTF-8?q?=E5=B0=86=E7=BB=84=E4=BB=B6=20SCSS=20=E8=BD=AC=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../nutui-proportional-scaling/SKILL.md | 8 +- scripts/build-taro.mjs | 9 +- scripts/build.mjs | 6 +- scripts/generate-css-for-rtl-comparison.js | 3 + scripts/px-to-scale-px-in-component-scss.cjs | 137 ++++++++++++++++++ scripts/replace-css-var.js | 23 ++- src/packages/actionsheet/actionsheet.scss | 8 +- src/packages/address/address.scss | 74 +++++----- src/packages/animate/animate.scss | 52 +++---- src/packages/audio/audio.scss | 30 ++-- 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 | 43 +++--- src/packages/calendarcard/calendarcard.scss | 20 +-- src/packages/card/card.scss | 26 ++-- src/packages/cell/cell.scss | 6 +- src/packages/cellgroup/cellgroup.scss | 8 +- src/packages/checkbox/checkbox.scss | 34 ++--- src/packages/checkboxgroup/checkboxgroup.scss | 12 +- src/packages/collapseitem/collapseitem.scss | 16 +- src/packages/countdown/countdown.scss | 6 +- src/packages/dialog/dialog.scss | 2 +- src/packages/divider/divider.scss | 2 +- src/packages/elevator/elevator.scss | 6 +- src/packages/ellipsis/ellipsis.scss | 2 +- src/packages/empty/empty.scss | 8 +- src/packages/fixednav/fixednav.scss | 63 ++++---- src/packages/formitem/formitem.scss | 20 +-- src/packages/grid/grid.scss | 2 +- src/packages/griditem/griditem.scss | 4 +- .../hoverbuttonitem/hoverbuttonitem.scss | 24 +-- src/packages/imagepreview/imagepreview.scss | 20 +-- src/packages/indicator/indicator.scss | 18 +-- .../infiniteloading/infiniteloading.scss | 8 +- src/packages/input/input.scss | 6 +- src/packages/inputnumber/inputnumber.scss | 12 +- src/packages/menuitem/menuitem.scss | 4 +- src/packages/navbar/navbar.scss | 26 ++-- 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 | 62 ++++---- src/packages/popup/popup.scss | 6 +- src/packages/progress/progress.scss | 2 +- src/packages/pulltorefresh/pulltorefresh.scss | 2 +- src/packages/quickenter/quickenter.scss | 26 ++-- src/packages/radio/radio.scss | 10 +- src/packages/radiogroup/radiogroup.scss | 6 +- src/packages/range/range.scss | 62 ++++---- src/packages/rate/rate.scss | 12 +- src/packages/resultpage/resultpage.scss | 4 +- src/packages/searchbar/searchbar.scss | 24 +-- src/packages/segmented/segmented.scss | 10 +- src/packages/shortpassword/shortpassword.scss | 48 +++--- src/packages/skeleton/skeleton.scss | 2 +- src/packages/space/space.scss | 2 +- src/packages/step/step.scss | 8 +- src/packages/steps/steps.scss | 32 ++-- src/packages/swiper/swiper.scss | 8 +- src/packages/switch/switch.scss | 16 +- src/packages/tabbar/tabbar.scss | 10 +- src/packages/tabbaritem/tabbaritem.scss | 12 +- src/packages/table/table.scss | 24 +-- src/packages/tabs/tabs.scss | 36 ++--- 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 | 6 +- src/packages/uploader/uploader.scss | 16 +- src/packages/virtuallist/virtuallist.scss | 16 +- 77 files changed, 742 insertions(+), 586 deletions(-) create mode 100644 scripts/px-to-scale-px-in-component-scss.cjs diff --git a/.cursor/skills/nutui-proportional-scaling/SKILL.md b/.cursor/skills/nutui-proportional-scaling/SKILL.md index 057b43070d..5dc70d374e 100644 --- a/.cursor/skills/nutui-proportional-scaling/SKILL.md +++ b/.cursor/skills/nutui-proportional-scaling/SKILL.md @@ -4,7 +4,8 @@ description: >- NutUI React proportional scaling on branch feat_resize: runtime --nut-scale-f / --nut-scale-font / --nut-scale-icon from scale-f.ts (H5) and scale-f.taro.ts (Taro), Sass helpers scale-px / scale-font-px / scale-icon-px and theme font - tokens in variables.scss & theme-*.scss; profiles standard / large / elderly; + tokens in variables.scss & theme-*.scss; npm run build / build:taro run + scripts/px-to-scale-px-in-component-scss.cjs on component SCSS in memory; profiles standard / large / elderly; commit-backed rules e.g. never scale 0px. Use when implementing 多尺寸适配, 等比适配, 大字版, 老年版, scale-px, viewport or native bridge scaling, or editing component SCSS for resize. @@ -48,6 +49,11 @@ description: >- **主题字号档**（`theme-default.scss` / `theme-dark.scss`）：`--nutui-font-size-*` 使用 `calc(Npx * var(--nut-scale-font, var(--nut-scale-f, 1)))`，与 **大字/老年** 档位对齐。 +### 2.1 `npm run build` / `npm run build:taro` 时的 px → `scale-px` + +- 与 `package.json` 中顺序一致：先跑 **`scripts/replace-css-var.js`**，再 **`scripts/build.mjs`** 或 **`scripts/build-taro.mjs`**；上述脚本在读取 **`src/packages/**/\*.scss`（不含 demo）** 后，会经 **`scripts/px-to-scale-px-in-component-scss.cjs`** 在**内存**里把声明值中的裸 **`Npx`** 转为 **`scale-px(Npx)`**（规则见 §3），**不写回\*\*仓库文件。 +- 源码里可继续手写 **`scale-px` / `scale-font-px` / `scale-icon-px`**；构建不会重复嵌套 `scale-px`。 + --- ## 3. 提交里固化的规范（务必遵守） diff --git a/scripts/build-taro.mjs b/scripts/build-taro.mjs index c5e78f4674..421a8708a7 100644 --- a/scripts/build-taro.mjs +++ b/scripts/build-taro.mjs @@ -7,6 +7,7 @@ import scss from 'postcss-scss' import { copy } from 'fs-extra' import { deleteAsync } from 'del' import { fileURLToPath } from 'url' +import { createRequire } from 'node:module' import { execSync } from 'child_process' import { access, mkdir, readFile, writeFile } from 'fs/promises' import { basename, dirname, extname, join, relative, resolve } from 'path' @@ -18,6 +19,8 @@ import { generate } from './build-theme-typings.mjs' const __filename = fileURLToPath(import.meta.url) const __dirname = dirname(__filename) +const require = createRequire(import.meta.url) +const pxToScalePxInComponentScss = require('./px-to-scale-px-in-component-scss.cjs') const dist = 'release/taro/dist' const filePath = resolve(__dirname, '../package.json') const packageJson = JSON.parse(readFileSync(filePath, 'utf8')) @@ -352,9 +355,10 @@ async function buildCSS(themeName = '') { join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`), ) for (const file of componentScssFiles) { - const scssContent = await readFile(join(__dirname, '../', file), { + let scssContent = await readFile(join(__dirname, '../', file), { encoding: 'utf8', }) + scssContent = pxToScalePxInComponentScss(scssContent) // countup 是特例 const base = basename(file) const loadPath = join( @@ -444,9 +448,10 @@ async function buildHarmonyCSS(themeName = '') { ), ) for (const file of componentScssFiles) { - const scssContent = await readFile(join(__dirname, '../', file), { + let scssContent = await readFile(join(__dirname, '../', file), { encoding: 'utf8', }) + scssContent = pxToScalePxInComponentScss(scssContent) // countup 是特例 const base = basename(file) const loadPath = join( diff --git a/scripts/build.mjs b/scripts/build.mjs index 947f1d11bd..2f366a0ee8 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -7,6 +7,7 @@ import scss from 'postcss-scss' import { copy } from 'fs-extra' import { deleteAsync } from 'del' import { fileURLToPath } from 'url' +import { createRequire } from 'node:module' import { execSync } from 'child_process' import { access, mkdir, readFile, writeFile } from 'fs/promises' import { basename, dirname, extname, join, relative, resolve } from 'path' @@ -18,6 +19,8 @@ import { generate } from './build-theme-typings.mjs' const __filename = fileURLToPath(import.meta.url) const __dirname = dirname(__filename) +const require = createRequire(import.meta.url) +const pxToScalePxInComponentScss = require('./px-to-scale-px-in-component-scss.cjs') const dist = 'release/h5/dist' const filePath = resolve(__dirname, '../package.json') const packageJson = JSON.parse(readFileSync(filePath, 'utf8')) @@ -301,9 +304,10 @@ async function buildCSS(themeName = '') { join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`), ) for (const file of componentScssFiles) { - const scssContent = await readFile(join(__dirname, '../', file), { + let scssContent = await readFile(join(__dirname, '../', file), { encoding: 'utf8', }) + scssContent = pxToScalePxInComponentScss(scssContent) // countup 是特例 const base = basename(file) const loadPath = join( diff --git a/scripts/generate-css-for-rtl-comparison.js b/scripts/generate-css-for-rtl-comparison.js index 1475746e4f..f985f6a039 100644 --- a/scripts/generate-css-for-rtl-comparison.js +++ b/scripts/generate-css-for-rtl-comparison.js @@ -21,6 +21,8 @@ const variables = fs.readFileSync( path.join(__dirname, '../src/styles/variables.scss') ) +const pxToScalePxInComponentScss = require('./px-to-scale-px-in-component-scss.cjs') + function postcssRemoveRtl() { return { postcssPlugin: 'postcss-remove-rtl', @@ -50,6 +52,7 @@ components.forEach((component) => { ) ) .toString() + content = pxToScalePxInComponentScss(content) let to = path.join( __dirname, `../src/packages/${componentName}/${componentName}.rtl.css` diff --git a/scripts/px-to-scale-px-in-component-scss.cjs b/scripts/px-to-scale-px-in-component-scss.cjs new file mode 100644 index 0000000000..f2c754a870 --- /dev/null +++ b/scripts/px-to-scale-px-in-component-scss.cjs @@ -0,0 +1,137 @@ +/** + * 仅在发布构建链路中（内存里）把组件 SCSS 声明值里的裸 Npx 转为 scale-px(Npx)， + * 与 .cursor/skills/nutui-proportional-scaling/SKILL.md 约定一致；不修改磁盘上的源文件。 + * + * 规则摘要： + * - 仅处理 Declaration，不处理 @media 等 at-rule 参数（避免断点被 scale）。 + * - 跳过 font-size、font、以及自定义属性 --*。 + * - 整段保留 scale-font-px(...) / scale-icon-px(...)；已写的 scale-px(...) 不嵌套。 + * - 数值 0 的 px → 字面量 0（不写 scale-px(0px)）。 + * - 已是 calc(Npx * var(--nut-scale-f,...)) 的不再包 scale-px。 + * - 含 Sass 变量 $ 且含除法 / 的 calc(...) 整段先占位再替换 px（避免 calc($var / 2) 被 postcss-scss 拆坏）。 + */ +const postcss = require('postcss') +const postcssScss = require('postcss-scss') + +const PROP_SKIP = new Set(['font-size', 'font']) + +function matchingCloseParen(str, openParenIdx) { + let depth = 1 + for (let i = openParenIdx + 1; i < str.length; i++) { + const c = str[i] + if (c === '(') depth++ + else if (c === ')') { + depth-- + if (depth === 0) return i + } + } + return -1 +} + +/** 最左侧的「体内不含 calc(」的 calc 块（同一层里先处理最左） */ +function findInnermostCalcRange(str) { + let best = null + let scan = 0 + const lower = str.toLowerCase() + while (true) { + const idx = lower.indexOf('calc(', scan) + if (idx === -1) break + const openParen = idx + 4 + const close = matchingCloseParen(str, openParen) + if (close < 0) { + scan = idx + 5 + continue + } + const body = str.slice(openParen + 1, close) + if (!body.toLowerCase().includes('calc(')) { + if (!best || idx < best.start) { + best = { start: idx, end: close + 1, body } + } + } + scan = idx + 5 + } + return best +} + +/** 体内同时有 $ 与 / 时整段保护（典型：calc(#{$var} / 2)） */ +function shouldProtectCalcBody(body) { + return /\$/.test(body) && /\//.test(body) +} + +function protectCalcsForPxPass(value) { + const saved = [] + let v = value + while (true) { + const m = findInnermostCalcRange(v) + if (!m) break + if (!shouldProtectCalcBody(m.body)) break + saved.push(v.slice(m.start, m.end)) + v = `${v.slice(0, m.start)}__NUT_CALC_${saved.length - 1}__${v.slice(m.end)}` + } + return { value: v, saved } +} + +function restoreCalcs(value, saved) { + let out = value + for (let i = saved.length - 1; i >= 0; i--) { + out = out.split(`__NUT_CALC_${i}__`).join(saved[i]) + } + return out +} + +function wrapBarePxInSegment(seg) { + return seg.replace( + /(-?\d*\.?\d+)px\b(?!\s*\*\s*var\(\s*--nut-scale-f)/g, + (full, numStr) => { + const n = parseFloat(numStr) + if (!Number.isFinite(n) || n === 0) return '0' + return `scale-px(${numStr}px)` + }, + ) +} + +/** 在非 scale-px(...) 段内包裸 px */ +function transformScalePxChunks(chunk) { + return chunk.split(/(\bscale-px\s*\([^)]*\))/g).map((part, i) => { + if (i % 2 === 1) return part + return wrapBarePxInSegment(part) + }).join('') +} + +function transformDeclValue(value) { + if (value == null || !/[\d.]+\s*px/i.test(value)) return value + const { value: v1, saved } = protectCalcsForPxPass(value) + let out = v1 + .split(/(\bscale-(?:font|icon)-px\s*\([^)]*\))/g) + .map((outer, oi) => { + if (oi % 2 === 1) return outer + return transformScalePxChunks(outer) + }) + .join('') + return restoreCalcs(out, saved) +} + +function pxToScalePxInComponentScssPlugin() { + return { + postcssPlugin: 'nutui-px-to-scale-px-in-component-scss', + Once(root) { + root.walkDecls((decl) => { + const prop = decl.prop.toLowerCase() + if (PROP_SKIP.has(prop)) return + if (decl.prop.startsWith('--')) return + decl.value = transformDeclValue(decl.value) + }) + }, + } +} + +function pxToScalePxInComponentScss(source) { + const result = postcss([pxToScalePxInComponentScssPlugin()]).process(source, { + from: undefined, + syntax: postcssScss, + }) + return result.css +} + +module.exports = pxToScalePxInComponentScss +module.exports.pxToScalePxInComponentScss = pxToScalePxInComponentScss diff --git a/scripts/replace-css-var.js b/scripts/replace-css-var.js index 5c7b278c42..cdbe546360 100644 --- a/scripts/replace-css-var.js +++ b/scripts/replace-css-var.js @@ -24,6 +24,8 @@ const theme = fs.readFileSync( path.join(__dirname, '../src/styles/theme-default.scss'), ).toString().replace('@import "./jd-font";', '').replace(`@import './jd-font';`, '') +const pxToScalePxInComponentScss = require('./px-to-scale-px-in-component-scss.cjs') + const exclude = ['icon'] components.forEach((component) => { const componentName = component.name.toLowerCase() @@ -37,6 +39,7 @@ components.forEach((component) => { ), ) .toString() + content = pxToScalePxInComponentScss(content) let to = path.join( __dirname, `../src/packages/${componentName}/${componentName}.harmony.css`, @@ -56,14 +59,18 @@ components.forEach((component) => { content = content.replace(m, '') const splitScssName = m.match(/\'\.\/([a-z]+)\.scss/) if (splitScssName && splitScssName.length == 2) { - componentSplitScss.push(fs - .readFileSync( - path.join( - __dirname, - `../src/packages/${componentName}/${splitScssName[1]}.scss`, - ), - ) - .toString()) + componentSplitScss.push( + pxToScalePxInComponentScss( + fs + .readFileSync( + path.join( + __dirname, + `../src/packages/${componentName}/${splitScssName[1]}.scss`, + ), + ) + .toString(), + ), + ) } } diff --git a/src/packages/actionsheet/actionsheet.scss b/src/packages/actionsheet/actionsheet.scss index 1bb3769513..c850df3b0d 100644 --- a/src/packages/actionsheet/actionsheet.scss +++ b/src/packages/actionsheet/actionsheet.scss @@ -9,7 +9,7 @@ } .nut-popup-title { - border-bottom: scale-px(1px) solid $actionsheet-border-color; + border-bottom: 1px solid $actionsheet-border-color; } &-list { @@ -23,7 +23,7 @@ &-cancel, &-item { display: block; - padding: scale-px(10px); + padding: 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: scale-px(5px); - border-top: scale-px(1px) solid $actionsheet-border-color; + margin-top: 5px; + border-top: 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 5c341c91fc..e707c7252c 100644 --- a/src/packages/address/address.scss +++ b/src/packages/address/address.scss @@ -4,15 +4,15 @@ .nut-address { &-exist { display: block; - padding: scale-px(15px) scale-px(20px) 0; - height: scale-px(279px); + padding: 15px 20px 0; + height: 279px; overflow-y: auto; box-sizing: border-box; &-item { display: flex; align-items: center; - margin-bottom: scale-px(20px); + margin-bottom: 20px; font-size: $font-size-s; line-height: $font-size-base; color: $color-title; @@ -22,25 +22,25 @@ } &-info { - margin-left: scale-px(9px); + margin-left: 9px; } } } &-footer { width: 100%; - height: scale-px(54px); - padding: scale-px(6px) 0px 0; - border-top: scale-px(1px) solid $color-border; + height: 54px; + padding: 6px 0px 0; + border-top: 1px solid $color-border; &-btn { width: 90%; - height: scale-px(42px); - line-height: scale-px(42px); + height: 42px; + line-height: 42px; margin: auto; text-align: center; background: $button-primary-background-color; - border-radius: scale-px(21px); + border-radius: 21px; font-size: $font-size-l; color: $color-primary-text; } @@ -51,10 +51,10 @@ &-title { font-size: $font-size-base; font-weight: 500; - padding: scale-px(16px) scale-px(16px) scale-px(12px) scale-px(16px); + padding: 16px 16px 12px 16px; } &-hotlist { - padding: 0 scale-px(16px); + padding: 0 16px; display: flex; flex-wrap: wrap; align-items: flex-start; @@ -62,16 +62,16 @@ display: flex; justify-content: center; align-items: center; - width: scale-px(63px); - height: scale-px(28px); + width: 63px; + height: 28px; font-size: $font-size-s; - border-radius: scale-px(4px); - margin-bottom: scale-px(7px); + border-radius: 4px; + margin-bottom: 7px; /* #ifdef harmony dynamic*/ - margin-right: scale-px(6px); + margin-right: 6px; /* #endif */ /* #ifndef harmony dynamic*/ - margin-right: scale-px(7px); + margin-right: 7px; /* #endif */ background-color: $color-background-sunken; color: $color-title; @@ -83,36 +83,36 @@ &.hotlist-more { .nut-address-hotlist-item { width: auto; - padding: 0 scale-px(16px); - margin-right: scale-px(7px); + padding: 0 16px; + margin-right: 7px; } } } &-selected { width: 100%; - height: scale-px(60px); - padding: 0 scale-px(16px); + height: 60px; + padding: 0 16px; display: flex; align-items: center; - border-bottom: scale-px(1px) solid $color-border; + border-bottom: 1px solid $color-border; &-item { font-size: $font-size-s; display: inline-block; - height: scale-px(28px); - line-height: scale-px(28px); - padding: 0 scale-px(12px); - border-radius: scale-px(4px); + height: 28px; + line-height: 28px; + padding: 0 12px; + border-radius: 4px; background-color: $color-background-sunken; &.active { - border: scale-px(1px) solid $color-primary; + border: 1px solid $color-primary; background-color: $color-primary-light-pressed; color: $color-primary; } } &-border { - margin: 0 scale-px(2px); + margin: 0 2px; color: $color-text-disabled; } } @@ -122,15 +122,15 @@ .nut-elevator-list { &-item { position: relative; - padding-left: scale-px(20px); + padding-left: 20px; } &-item-code { display: inline; position: absolute; left: 0; top: 0; - height: scale-px(30px); - line-height: scale-px(30px); + height: 30px; + line-height: 30px; border-bottom: 0; color: $color-text-help; font-weight: 500; @@ -145,11 +145,11 @@ display: flex; justify-content: center; align-items: center; - width: scale-px(16px); - height: scale-px(16px); + width: 16px; + height: 16px; font-size: $font-size-xxs; - border-radius: scale-px(16px); - margin-bottom: scale-px(2px); + border-radius: 16px; + margin-bottom: 2px; color: $color-text-help; &-active { background-color: $color-primary; @@ -167,7 +167,7 @@ &-item { &-info { margin-left: 0; - margin-right: scale-px(9px); + margin-right: 9px; } } } diff --git a/src/packages/animate/animate.scss b/src/packages/animate/animate.scss index 1de0a969aa..67b478bb3e 100644 --- a/src/packages/animate/animate.scss +++ b/src/packages/animate/animate.scss @@ -76,31 +76,31 @@ transform: translateX(0); } 10% { - transform: translateX(scale-px(-9px)); + transform: translateX(-9px); } 20% { - transform: translateX(scale-px(8px)); + transform: translateX(8px); } 30% { - transform: translateX(scale-px(-7px)); + transform: translateX(-7px); } 40% { - transform: translateX(scale-px(6px)); + transform: translateX(6px); } 50% { - transform: translateX(scale-px(-5px)); + transform: translateX(-5px); } 60% { - transform: translateX(scale-px(4px)); + transform: translateX(4px); } 70% { - transform: translateX(scale-px(-3px)); + transform: translateX(-3px); } 80% { - transform: translateX(scale-px(2px)); + transform: translateX(2px); } 90% { - transform: translateX(scale-px(-1px)); + transform: translateX(-1px); } } .nut-animate-shake { @@ -142,16 +142,16 @@ position: relative; &::after, &::before { - width: scale-px(60px); - height: scale-px(60px); + width: 60px; + height: 60px; content: ''; box-sizing: border-box; - border: scale-px(4px) solid rgba(255, 255, 255, 0.6); + border: 4px solid rgba(255, 255, 255, 0.6); position: absolute; - border-radius: scale-px(30px); + border-radius: 30px; right: 50%; - margin-top: scale-px(-30px); - margin-right: scale-px(-30px); + margin-top: -30px; + margin-right: -30px; z-index: 1; transform: scale(0); animation: twinkle 2s ease-out infinite; @@ -180,8 +180,8 @@ position: relative; overflow: hidden; &::after { - width: scale-px(100px); - height: scale-px(60px); + width: 100px; + height: 60px; position: absolute; left: 0; top: 0; @@ -194,17 +194,17 @@ ); animation: flicker 1.5s linear infinite; transform: skewX(-20deg); - filter: blur(scale-px(3px)); + filter: blur(3px); } } @keyframes flicker { 0% { - transform: translateX(scale-px(-100px)) skewX(-20deg); + transform: translateX(-100px) skewX(-20deg); } 40%, 100% { - transform: translateX(scale-px(150px)) skewX(-20deg); + transform: translateX(150px) skewX(-20deg); } } @@ -214,13 +214,13 @@ transform: rotate(0) translateY(0); } 25% { - transform: rotate(10deg) translateY(scale-px(20px)); + transform: rotate(10deg) translateY(20px); } 50% { - transform: rotate(0) translateY(scale-px(-10px)); + transform: rotate(0) translateY(-10px); } 75% { - transform: rotate(-10deg) translateY(scale-px(20px)); + transform: rotate(-10deg) translateY(20px); } 100% { transform: rotate(0) translateY(0); @@ -237,13 +237,13 @@ top: 0; } 25% { - top: scale-px(1px); + top: 1px; } 50% { - top: scale-px(4px); + top: 4px; } 75% { - top: scale-px(1px); + top: 1px; } 100% { top: 0; diff --git a/src/packages/audio/audio.scss b/src/packages/audio/audio.scss index d70948064e..05b8c297a9 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: scale-px(30px); - height: scale-px(30px); + width: 30px; + height: 30px; background: $white; border-radius: 50%; - box-shadow: 0 0 scale-px(8px) $color-text-disabled; + box-shadow: 0 0 8px $color-text-disabled; } .nut-audio-icon-stop { @@ -26,11 +26,11 @@ top: 50%; transform: translateX(-50%); content: ''; - height: scale-px(2px); - width: scale-px(30px); + height: 2px; + width: 30px; background: $color-text-disabled; transform: rotate(45deg); - transform-origin: scale-px(8px) scale-px(-18px); + transform-origin: 8px -18px; } } } @@ -40,34 +40,34 @@ align-items: center; width: 100%; margin: 0px auto; - padding: scale-px(10px) 0; + padding: 10px 0; &-bar-wrapper { flex: 1; - margin: 0 scale-px(10px); + margin: 0 10px; } .time { - min-width: scale-px(50px); + min-width: 50px; font-size: $font-size-s; text-align: center; } .nut-range-button { - width: scale-px(8px); - height: scale-px(8px); + width: 8px; + height: 8px; } } .custom-button-group { .nut-button-primary { - margin: 0 scale-px(5px); + margin: 0 5px; } } .custom-button-group-disable { .nut-button-primary { - margin: 0 scale-px(5px); + margin: 0 5px; pointer-events: none; } } @@ -78,7 +78,7 @@ .nut-audio-none-container { .nut-voice { - border: scale-px(1px) solid $color-title; + border: 1px solid $color-title; align-items: center; } } @@ -92,7 +92,7 @@ left: auto; right: 50%; transform: rotate(-45deg); - transform-origin: scale-px(20px) scale-px(-18px); + transform-origin: 20px -18px; } } } diff --git a/src/packages/avatar/avatar.scss b/src/packages/avatar/avatar.scss index 6aa681ed47..f3480990ce 100644 --- a/src/packages/avatar/avatar.scss +++ b/src/packages/avatar/avatar.scss @@ -12,7 +12,7 @@ height: $avatar-normal-height; &-round { - border-radius: scale-px(999px); + border-radius: 999px; overflow: hidden; } diff --git a/src/packages/avatarcropper/avatarcropper.scss b/src/packages/avatarcropper/avatarcropper.scss index 9ed3283c0c..b79102847b 100644 --- a/src/packages/avatarcropper/avatarcropper.scss +++ b/src/packages/avatarcropper/avatarcropper.scss @@ -72,7 +72,7 @@ &-item { color: #fff; - padding: scale-px(15px); + padding: 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 scale-px(1000px) scale-px(1000px) rgba(0, 0, 0, 0.6); + box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.6); } } } diff --git a/src/packages/avatargroup/avatargroup.scss b/src/packages/avatargroup/avatargroup.scss index c7dede3c8e..27462e4d11 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: scale-px(1px) solid #fff; - margin-left: scale-px(-8px); + border: 1px solid #fff; + margin-left: -8px; &:not(:first-of-type) { - margin-left: scale-px(-8px); + margin-left: -8px; } } } @@ -18,7 +18,7 @@ .nut-avatar { &:not(:first-of-type) { margin-left: 0; - margin-right: scale-px(-8px); + margin-right: -8px; } } } diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss index ed27f80324..750ccb6010 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: scale-px(12px); + line-height: 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 f7a2592c99..66c351fa4e 100644 --- a/src/packages/barrage/barrage.scss +++ b/src/packages/barrage/barrage.scss @@ -13,8 +13,8 @@ display: block; position: absolute; right: 0; - padding: scale-px(4px) scale-px(16px); - border-radius: scale-px(16px); + padding: 4px 16px; + border-radius: 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 e4d1ea3181..5f950e9dad 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: scale-px(80px); + width: 80px; /* #endif */ /* #ifndef harmony dynamic*/ width: auto; diff --git a/src/packages/calendar/calendar.scss b/src/packages/calendar/calendar.scss index 8bd0d37768..e17a53a767 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: scale-px(50px); + line-height: 50px; } &-sub-title { - padding: scale-px(7px) 0; - line-height: scale-px(22px); + padding: 7px 0; + line-height: 22px; font-size: $calendar-sub-title-font-size; } @@ -59,10 +59,9 @@ display: flex; align-items: center; justify-content: space-around; - height: scale-px(36px); - border-radius: 0px 0px scale-px(12px) scale-px(12px); - box-shadow: 0px scale-px(4px) scale-px(10px) 0px - rgba($color: #000000, $alpha: 0.06); + height: 36px; + border-radius: 0px 0px 12px 12px; + box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06); } &-week-item { @@ -88,11 +87,11 @@ box-sizing: border-box; .calendar-loading-tip { - height: scale-px(50px); - line-height: scale-px(50px); + height: 50px; + line-height: 50px; text-align: center; position: absolute; - top: scale-px(-50px); + top: -50px; left: 0; right: 0; font-size: $font-size-s; @@ -106,9 +105,9 @@ text-align: center; &-title { - height: scale-px(23px); - line-height: scale-px(23px); - margin: scale-px(8px) 0; + height: 23px; + line-height: 23px; + margin: 8px 0; } } @@ -126,7 +125,7 @@ width: $calendar-day-width; height: $calendar-day-height; font-weight: $calendar-day-font-weight; - margin-bottom: scale-px(4px); + margin-bottom: 4px; // 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。 &-day, @@ -147,22 +146,22 @@ &-info, &-info-curr { position: absolute; - bottom: scale-px(5px); + bottom: 5px; width: 100%; font-size: $font-size-s; - line-height: scale-px(14px); + line-height: 14px; } &-info-top { position: absolute; width: 100%; - top: scale-px(5px); + top: 5px; } &-info-bottom { position: absolute; width: 100%; - bottom: scale-px(5px); + bottom: 5px; } &-active { @@ -238,9 +237,9 @@ background-color: $white; .calendar-confirm-btn { - height: scale-px(40px); - line-height: scale-px(40px); - margin: scale-px(6px) scale-px(16px); + height: 40px; + line-height: 40px; + margin: 6px 16px; text-align: center; border-radius: $radius-base; background: $button-primary-background-color; @@ -251,7 +250,7 @@ } .nut-calendar-popup .nut-popup-title-right { - top: scale-px(7px) !important; + top: 7px !important; } [dir='rtl'] .nut-calendar, diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss index 6bba3e5099..9e548f9753 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: scale-px(12px); + border-radius: 12px; overflow: hidden; font-size: $calendar-base-font-size; line-height: $calendar-base-font-size; @@ -18,15 +18,15 @@ display: flex; flex-direction: row; cursor: pointer; - margin: scale-px(16px); + margin: 16px; line-height: 1; .left { - margin-left: scale-px(8px); + margin-left: 8px; } .right { - margin-right: scale-px(8px); + margin-right: 8px; } } } @@ -51,9 +51,9 @@ flex-direction: column; position: relative; width: $calendar-day-width; - height: scale-px(48px); + height: 48px; cursor: pointer; - margin-bottom: scale-px(4px); + margin-bottom: 4px; text-align: center; // 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。 @@ -73,9 +73,9 @@ align-items: center; justify-content: center; width: 100%; - height: scale-px(12px); + height: 12px; font-size: $font-size-s; - line-height: scale-px(12px); + line-height: 12px; } &.weekend { @@ -152,12 +152,12 @@ &-right { .left { margin-left: 0; - margin-right: scale-px(8px); + margin-right: 8px; } .right { margin-right: 0; - margin-left: scale-px(8px); + margin-left: 8px; } .nut-icon-ArrowLeft, diff --git a/src/packages/card/card.scss b/src/packages/card/card.scss index eb6cb1000f..a820623afe 100644 --- a/src/packages/card/card.scss +++ b/src/packages/card/card.scss @@ -9,8 +9,8 @@ border-radius: $card-border-radius; &-left { - width: scale-px(120px); - height: scale-px(120px); + width: 120px; + height: 120px; flex-shrink: 0; > img { @@ -23,7 +23,7 @@ &-right { flex: 1; - padding: 0 scale-px(10px) scale-px(8px); + padding: 0 10px 8px; &-title { @include moreline-ellipsis(); @@ -35,13 +35,13 @@ &-price { display: flex; align-items: center; - height: scale-px(18px); - line-height: scale-px(18px); - margin-top: scale-px(9px); + height: 18px; + line-height: 18px; + margin-top: 9px; &-origin { &.nut-price { - margin-left: scale-px(2px); + margin-left: 2px; .nut-price-symbol, .nut-price-integer, .nut-price-decimal { @@ -54,11 +54,11 @@ &-other { display: flex; align-items: center; - padding: scale-px(5px) 0 scale-px(2px); + padding: 5px 0 2px; .nut-tag { - padding: 0 scale-px(2px); - margin-right: scale-px(5px); + padding: 0 2px; + margin-right: 5px; font-size: $font-size-xs; } } @@ -72,7 +72,7 @@ line-height: 1.5; color: $color-text; font-size: $font-size-s; - padding-top: scale-px(4px); + padding-top: 4px; } } } @@ -85,7 +85,7 @@ &-origin { &.nut-price { margin-left: 0; - margin-right: scale-px(2px); + margin-right: 2px; } } } @@ -93,7 +93,7 @@ &-other { .nut-tag { margin-right: 0; - margin-left: scale-px(5px); + margin-left: 5px; } } } diff --git a/src/packages/cell/cell.scss b/src/packages/cell/cell.scss index c5fb3b8fbb..31847bb99d 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: scale-px(10px); + margin-bottom: 10px; box-sizing: border-box; &-group-item { @@ -73,12 +73,12 @@ &-divider { display: flex; - min-height: scale-px(1px); + min-height: 1px; padding-left: $cell-divider-left; padding-right: $cell-divider-right; &-inner { display: flex; - height: scale-px(1px); + height: 1px; width: 100%; border-top: $cell-divider-border-bottom; } diff --git a/src/packages/cellgroup/cellgroup.scss b/src/packages/cellgroup/cellgroup.scss index d0fee11d8b..ab968f0108 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: scale-px(30px); - margin-bottom: scale-px(10px); + margin-top: 30px; + margin-bottom: 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: scale-px(10px); - margin-bottom: scale-px(10px); + margin-top: 10px; + margin-bottom: 10px; } &-wrap { diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss index 940f910880..d284ce3c22 100644 --- a/src/packages/checkbox/checkbox.scss +++ b/src/packages/checkbox/checkbox.scss @@ -14,7 +14,7 @@ font-size: 0px; line-height: 0px; border-radius: 50%; - box-shadow: 0px scale-px(2px) scale-px(4px) 0px rgba(255, 15, 35, 0.2); + box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2); } &-icon-checked { @@ -43,7 +43,7 @@ &-icon-indeterminate { color: $color-primary; background-color: $white; - box-shadow: 0px scale-px(2px) scale-px(4px) 0px #ff0f2333; + box-shadow: 0px 2px 4px 0px #ff0f2333; border-radius: 50%; &.nut-checkbox-icon-disabled { @@ -76,14 +76,14 @@ display: inline-flex; /* #endif */ align-items: center; - min-height: scale-px(32px); + min-height: 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: scale-px(1px) solid $checkbox-button-background; + border: 1px solid $checkbox-button-background; overflow: hidden; &-active { @@ -94,7 +94,7 @@ &-disabled { color: $color-text-disabled; - border: scale-px(1px) solid $checkbox-button-background; + border: 1px solid $checkbox-button-background; } &-icon { @@ -113,25 +113,25 @@ } .nut-checkbox-button-icon-checked { - width: scale-px(12px); - height: scale-px(12px); + width: 12px; + height: 12px; position: absolute; color: $white; right: 0px; bottom: 0; - transform: translate(scale-px(-1px), scale-px(-2px)); + transform: translate(-1px, -2px); } .nut-icon { position: absolute; font-size: $font-size-s; - width: scale-px(12px); - height: scale-px(12px); + width: 12px; + height: 12px; &:before { top: auto; - bottom: scale-px(-22px); - margin-left: scale-px(6px); + bottom: -22px; + margin-left: 6px; } } } @@ -139,7 +139,7 @@ .nut-checkbox-button-active.nut-checkbox-button-disabled { background: $color-text-disabled; color: $white; - border: scale-px(1px) solid $color-text-disabled; + border: 1px solid $color-text-disabled; } &-list-item { @@ -176,19 +176,19 @@ &-icon { right: auto; left: 0; - border-right: scale-px(10px) solid transparent; - border-left: scale-px(10px) solid $color-primary; + border-right: 10px solid transparent; + border-left: 10px solid $color-primary; &-checked { left: auto; right: 50%; - transform: translate(scale-px(3px), scale-px(-3px)); + transform: translate(3px, -3px); } .nut-icon { &:before { margin-left: 0; - margin-right: scale-px(6px); + margin-right: 6px; } } } diff --git a/src/packages/checkboxgroup/checkboxgroup.scss b/src/packages/checkboxgroup/checkboxgroup.scss index c6863eecb7..3e2a6bd4e8 100644 --- a/src/packages/checkboxgroup/checkboxgroup.scss +++ b/src/packages/checkboxgroup/checkboxgroup.scss @@ -10,7 +10,7 @@ flex-direction: column; .nut-checkbox { - margin-bottom: scale-px(5px); + margin-bottom: 5px; &.nut-checkbox-reverse { width: 100%; @@ -37,7 +37,7 @@ display: inline-flex; /* #endif */ flex: 1; - margin-right: scale-px(20px); + margin-right: 20px; &-button-active { border: $radio-button-active-border; @@ -55,7 +55,7 @@ box-sizing: border-box; .nut-checkbox { - margin-bottom: scale-px(5px); + margin-bottom: 5px; &.nut-checkbox-reverse { width: auto; @@ -75,14 +75,14 @@ .nut-rtl .nut-checkboxgroup { .nut-checkbox { &-label { - margin-right: scale-px(5px); + margin-right: 5px; } } &-vertical { .nut-checkbox { &-label { - margin-right: scale-px(5px); + margin-right: 5px; } } } @@ -90,7 +90,7 @@ &-horizontal { .nut-checkbox { margin-right: 0; - margin-left: scale-px(20px); + margin-left: 20px; } } } diff --git a/src/packages/collapseitem/collapseitem.scss b/src/packages/collapseitem/collapseitem.scss index 298f1549ee..067cfa9b49 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: scale-px(16px); - left: scale-px(16px); + right: 16px; + left: 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: scale-px(16px); - left: scale-px(16px); + right: 16px; + left: 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 scale-px(20px); + padding: 0px 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -66,7 +66,7 @@ &-icon-box { display: flex; - width: scale-px(24px); + width: 24px; position: relative; color: $color-text; } @@ -76,7 +76,7 @@ align-items: center; position: absolute; top: 50%; - left: scale-px(5px); + left: 5px; transform: translateY(-50%); transform-origin: center; transition: transform 0.3s; @@ -126,6 +126,6 @@ .nut-rtl .nut-collapse-item { &-icon { left: auto; - right: scale-px(5px); + right: 5px; } } diff --git a/src/packages/countdown/countdown.scss b/src/packages/countdown/countdown.scss index e16cb0237f..84323db283 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 + scale-px(2px)); + line-height: calc($countdown-font-size + 2px); font-family: 'JDZH-Regular'; } &-number, @@ -41,7 +41,7 @@ background-color: $countdown-number-background-color; color: $countdown-number-color; &::after { - border: scale-px(1px) solid $countdown-number-border-color; + border: 1px solid $countdown-number-border-color; } } @@ -49,7 +49,7 @@ background-color: $countdown-number-primary-background-color; color: $countdown-number-primary-color; &::after { - border: scale-px(1px) solid $countdown-number-primary-border-color; + border: 1px solid $countdown-number-primary-border-color; } } &-number-text { diff --git a/src/packages/dialog/dialog.scss b/src/packages/dialog/dialog.scss index 2c0b6b49b1..93f0d99f4b 100644 --- a/src/packages/dialog/dialog.scss +++ b/src/packages/dialog/dialog.scss @@ -60,7 +60,7 @@ } &-bottom { - bottom: scale-px(-64px); + bottom: -64px; width: $dialog-bottom-close-icon-size; height: $dialog-bottom-close-icon-size; left: 50%; diff --git a/src/packages/divider/divider.scss b/src/packages/divider/divider.scss index 6cff69ca04..bb5c5bb6cc 100644 --- a/src/packages/divider/divider.scss +++ b/src/packages/divider/divider.scss @@ -53,7 +53,7 @@ /* #endif */ width: 0px; height: $divider-vertical-height; - border-left: scale-px(1px) solid $divider-border-color; + border-left: 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 dfe3550d29..ba1732bfed 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: scale-px(16px); - width: scale-px(16px); + height: 16px; + width: 16px; border-radius: 50%; - margin: scale-px(1px) 0; + margin: 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 5520be55c2..f7b313ad8c 100644 --- a/src/packages/ellipsis/ellipsis.scss +++ b/src/packages/ellipsis/ellipsis.scss @@ -14,7 +14,7 @@ .nut-ellipsis-copy { position: absolute; - top: scale-px(-999999px); + top: -999999px; } .nut-ellipsis-width { diff --git a/src/packages/empty/empty.scss b/src/packages/empty/empty.scss index f6508e30c4..7ec5e472fa 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: scale-px(24px); + margin-top: 24px; } &-actions-small { display: flex; flex-direction: row; - margin-top: scale-px(16px); + margin-top: 16px; } &-action { - margin-right: scale-px(6px); - margin-left: scale-px(6px); + margin-right: 6px; + margin-left: 6px; } } diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss index 9fe8c396d3..0e3a5dc40e 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(50px); + height: 50px; &.active { .nut-fixednav-btn { @@ -29,17 +29,17 @@ box-sizing: border-box; position: absolute; z-index: $fixednav-index; - width: scale-px(70px); + width: 70px; height: 100%; background: $fixednav-button-background; - box-shadow: 0px scale-px(2px) scale-px(4px) 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; .text { - width: scale-px(24px); - line-height: scale-px(13px); + width: 24px; + line-height: 13px; font-size: $font-size-s; color: #fff; flex-shrink: 0; @@ -59,7 +59,7 @@ background: $fixednav-background-color; display: flex; justify-content: space-between; - box-shadow: scale-px(2px) scale-px(2px) scale-px(8px) 0px rgba(0, 0, 0, 0.2); + box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); &-item { position: relative; @@ -69,7 +69,7 @@ flex-direction: column; justify-content: center; align-items: center; - min-width: scale-px(50px); + min-width: 50px; flex-shrink: 0; color: $fixednav-color; @@ -79,9 +79,9 @@ } &-image { - width: scale-px(20px); - height: scale-px(20px); - margin-bottom: scale-px(2px); + width: 20px; + height: 20px; + margin-bottom: 2px; } } @@ -89,19 +89,19 @@ right: 0; .nut-fixednav-btn { right: 0; - border-radius: scale-px(45px) 0 0 scale-px(45px); + border-radius: 45px 0 0 45px; .nut-icon { - margin-right: scale-px(5px); + margin-right: 5px; transform: rotate(0deg); } } .nut-fixednav-list { right: 0; transform: translateX(100%); - border-radius: scale-px(25px) 0 0 scale-px(25px); + border-radius: 25px 0 0 25px; padding: { - left: scale-px(20px); - right: scale-px(80px); + left: 20px; + right: 80px; } } } @@ -111,9 +111,9 @@ .nut-fixednav-btn { flex-direction: row-reverse; left: 0; - border-radius: 0 scale-px(45px) scale-px(45px) 0; + border-radius: 0 45px 45px 0; .nut-icon { - margin-left: scale-px(5px); + margin-left: 5px; transform: rotate(180deg); } } @@ -121,10 +121,10 @@ .nut-fixednav-list { transform: translateX(-100%); left: 0; - border-radius: 0 scale-px(25px) scale-px(25px) 0; + border-radius: 0 25px 25px 0; padding: { - left: scale-px(80px); - right: scale-px(20px); + left: 80px; + right: 20px; } } } @@ -150,10 +150,10 @@ &-btn { right: auto; left: 0; - border-radius: 0px scale-px(45px) scale-px(45px) 0px; + border-radius: 0px 45px 45px 0px; .nut-icon { margin-right: 0px; - margin-left: scale-px(5px); + margin-left: 5px; transform: rotate(180deg); } } @@ -162,13 +162,12 @@ right: auto; left: 0; transform: translateX(-100%); - 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); + border-radius: 0px 25px 25px 0px; + box-shadow: -2px 2px 8px 0px rgba(0, 0, 0, 0.2); padding: { - right: scale-px(20px); - left: scale-px(80px); + right: 20px; + left: 80px; } &-item { @@ -186,11 +185,11 @@ .nut-fixednav-btn { left: auto; right: 0; - border-radius: scale-px(45px) 0 0 scale-px(45px); + border-radius: 45px 0 0 45px; .nut-icon { transform: rotate(0deg); - margin-right: scale-px(5px); + margin-right: 5px; margin-left: 0px; } } @@ -199,11 +198,11 @@ transform: translateX(100%); right: auto; left: auto; - border-radius: scale-px(25px) 0px 0px scale-px(25px); + border-radius: 25px 0px 0px 25px; padding: { - right: scale-px(80px); - left: scale-px(20px); + right: 80px; + left: 20px; } } } diff --git a/src/packages/formitem/formitem.scss b/src/packages/formitem/formitem.scss index e6005259c0..285e36b715 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: scale-px(-10px); + left: -10px; } &-right-required { color: $form-item-required-color; margin-left: $form-item-required-margin-right; position: absolute; - right: scale-px(-10px); + right: -10px; } } @@ -68,7 +68,7 @@ } .nut-range-container { - min-height: scale-px(24px); + min-height: 24px; } .nut-textarea { @@ -132,13 +132,13 @@ .nut-form-item-label-right { justify-content: flex-end; - padding-right: scale-px(24px); + padding-right: 24px; white-space: nowrap; } .nut-form-item-label-left { position: relative; - padding-left: scale-px(12px); + padding-left: 12px; white-space: nowrap; } @@ -150,8 +150,8 @@ .nut-form-item-label-top { display: block; - padding-bottom: scale-px(4px); - padding-right: scale-px(24px); + padding-bottom: 4px; + padding-right: 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: scale-px(24px); + padding-left: 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: scale-px(12px); + padding-right: 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: scale-px(24px); + padding-left: 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 372766e3a3..92d9a1b268 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: scale-px(1px); + border-right-width: 1px; } } diff --git a/src/packages/griditem/griditem.scss b/src/packages/griditem/griditem.scss index a3ae4da838..ee1df14ec0 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: scale-px(1px); + border-left-width: 1px; } &-surround { border-left-width: 0; - border-right-width: scale-px(1px); + border-right-width: 1px; } &-horizontal { diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.scss b/src/packages/hoverbuttonitem/hoverbuttonitem.scss index 16c7dc9327..17c9fb1129 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: scale-px(1px) solid $hoverbutton-item-border-color; + border: 1px solid $hoverbutton-item-border-color; background-color: $hoverbutton-item-background; &:active, @@ -26,24 +26,24 @@ .nut-icon { display: block; - width: scale-px(14px); - height: scale-px(14px); + width: 14px; + height: 14px; font-size: $font-size-base; } } } &-icon { - width: scale-px(20px); - height: scale-px(20px); - margin: scale-px(9px); + width: 20px; + height: 20px; + margin: 9px; color: $hoverbutton-item-icon-color; fill: $hoverbutton-item-icon-color; .nut-icon { display: block; - width: scale-px(20px); - height: scale-px(20px); + width: 20px; + height: 20px; font-size: scale-font-px(20px); } } @@ -54,13 +54,13 @@ } &-text-icon { - width: scale-px(14px); - height: scale-px(5px); + width: 14px; + height: 5px; } &-text { font-size: $font-size-xxs; - margin-top: scale-px(5px); - line-height: scale-px(9px); + margin-top: 5px; + line-height: 9px; } } diff --git a/src/packages/imagepreview/imagepreview.scss b/src/packages/imagepreview/imagepreview.scss index 51108ec84b..1587f2886a 100644 --- a/src/packages/imagepreview/imagepreview.scss +++ b/src/packages/imagepreview/imagepreview.scss @@ -16,7 +16,7 @@ &-index { position: fixed; z-index: 2002; - top: scale-px(50px); + top: 50px; text-align: center; left: 0; right: 0; @@ -25,7 +25,7 @@ .arrow { position: absolute; - left: scale-px(15px); + left: 15px; transform: rotateZ(180deg); } } @@ -44,17 +44,17 @@ } &.top-right { - top: scale-px(50px); - right: scale-px(20px); + top: 50px; + right: 20px; } &.top-left { - top: scale-px(50px); - left: scale-px(20px); + top: 50px; + left: 20px; } &.bottom { - bottom: scale-px(50px); + bottom: 50px; left: 0; right: 0; text-align: center; @@ -103,19 +103,19 @@ &-index { .arrow { left: auto; - right: scale-px(15px); + right: 15px; transform: rotateZ(-180deg); } } &-close { &.top-right { right: auto; - left: scale-px(20px); + left: 20px; } &.top-left { left: auto; - right: scale-px(20px); + right: 20px; } } } diff --git a/src/packages/indicator/indicator.scss b/src/packages/indicator/indicator.scss index 66e75485ee..6c442de3f5 100644 --- a/src/packages/indicator/indicator.scss +++ b/src/packages/indicator/indicator.scss @@ -6,7 +6,7 @@ align-items: center; &-fixed-width { - width: scale-px(21px); + width: 21px; } &-dot, @@ -36,11 +36,11 @@ &-fixed-width { // 两个页码的时候 .nut-indicator-dot { - width: scale-px(12px); + width: 12px; border-radius: $indicator-border-radius; &-active { - width: scale-px(6px); + width: 6px; } } } @@ -49,17 +49,17 @@ // 竖向固定高度 &.nut-indicator-fixed-width { justify-content: flex-start; - height: scale-px(21px); + height: 21px; width: auto; // 竖向两个页码 .nut-indicator-dot { - width: scale-px(3px); - height: scale-px(12px); + width: 3px; + height: 12px; border-radius: $indicator-border-radius; &-active { - height: scale-px(6px); + height: 6px; } } @@ -67,7 +67,7 @@ &.nut-indicator-white { .nut-indicator-dot { &-active { - height: scale-px(6px); + height: 6px; } } } @@ -136,7 +136,7 @@ .nut-indicator-track.nut-indicator-white { &:after { - border: scale-px(1px) solid rgba(0, 0, 0, 0.06); + border: 1px solid rgba(0, 0, 0, 0.06); background: rgba(255, 255, 255, 0.4); } } diff --git a/src/packages/infiniteloading/infiniteloading.scss b/src/packages/infiniteloading/infiniteloading.scss index c0d9cb579a..024ffcf563 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: scale-px(4px); + margin-bottom: 4px; } } } @@ -32,7 +32,7 @@ align-items: center; justify-content: center; width: 100%; - padding-top: scale-px(6px); + padding-top: 6px; color: $infiniteloading-color; text-align: center; @@ -43,7 +43,7 @@ font-size: $font-size-xxs; &-icons { - margin-right: scale-px(8px); + margin-right: 8px; } } } @@ -62,7 +62,7 @@ &-tips { &-icons { margin-right: 0; - margin-left: scale-px(8px); + margin-left: 8px; } } } diff --git a/src/packages/input/input.scss b/src/packages/input/input.scss index b24aac76c1..50cbd987f1 100644 --- a/src/packages/input/input.scss +++ b/src/packages/input/input.scss @@ -16,12 +16,12 @@ .nut-icon { color: $color-text-disabled; - width: scale-px(14px); - height: scale-px(14px); + width: 14px; + height: 14px; font-size: $font-size-base; } &-container { - height: scale-px(38px); + height: 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 d156523df5..bda34176b4 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 { - width: scale-px(10px); - height: scale-px(10px); + width: 10px; + height: 10px; } } @@ -66,12 +66,12 @@ } &-icon-minus { - width: scale-px(16px); - height: scale-px(16px); + width: 16px; + height: 16px; } &-icon-plus { - width: scale-px(16px); - height: scale-px(16px); + width: 16px; + height: 16px; } } diff --git a/src/packages/menuitem/menuitem.scss b/src/packages/menuitem/menuitem.scss index 485cb89ad8..ae6ca399f7 100644 --- a/src/packages/menuitem/menuitem.scss +++ b/src/packages/menuitem/menuitem.scss @@ -79,7 +79,7 @@ .nut-menu-container-down-enter { opacity: 0; - transform: translate(0, scale-px(-30px)); + transform: translate(0, -30px); } .nut-menu-container-down-enter-done { @@ -100,7 +100,7 @@ .nut-menu-container-up-enter { opacity: 0; - transform: translate(0, scale-px(30px)); + transform: translate(0, 30px); } .nut-menu-container-up-enter-done { diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss index 701c006fa5..66ee85787f 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 scale-px(16px); + padding: 0 16px; &-fixed { position: fixed; @@ -51,7 +51,7 @@ white-space: nowrap; &-center { - max-width: scale-px(129px); + max-width: 129px; justify-content: center; } } @@ -65,31 +65,31 @@ display: flex; align-items: center; flex-direction: row; - max-width: scale-px(124px); + max-width: 124px; height: 100%; cursor: pointer; /* #ifndef harmony jd h5 weapp*/ .nut-icon, .nutui-iconfont { - width: scale-px(20px); - height: scale-px(20px); + width: 20px; + height: 20px; font-size: scale-font-px(20px); } /* #endif */ &-maxwidth { box-sizing: border-box; - width: calc(scale-px(124px) - scale-px(16px)); + width: calc(124px - 16px); } } &-left { - padding-right: scale-px(16px); - gap: scale-px(16px); + padding-right: 16px; + gap: 16px; &-rtl { padding-right: 0; - padding-left: scale-px(16px); + padding-left: 16px; } &-back { @@ -97,7 +97,7 @@ flex-direction: row; align-items: center; justify-content: center; - gap: scale-px(16px); + gap: 16px; } &-hidden { @@ -107,12 +107,12 @@ } &-right { - padding-left: scale-px(16px); + padding-left: 16px; justify-content: flex-end; - gap: scale-px(16px); + gap: 16px; &-rtl { - padding-right: scale-px(16px); + padding-right: 16px; padding-left: 0; } } diff --git a/src/packages/noticebar/noticebar.scss b/src/packages/noticebar/noticebar.scss index f7e7e78387..4c98dc203b 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: scale-px(12px); - height: scale-px(12px); + width: 12px; + height: 12px; color: $noticebar-color; } } diff --git a/src/packages/notify/notify.scss b/src/packages/notify/notify.scss index 1b6c2d7c33..9c7bf6e5a4 100644 --- a/src/packages/notify/notify.scss +++ b/src/packages/notify/notify.scss @@ -43,8 +43,8 @@ .nut-notify { position: fixed; - left: scale-px(8px); - right: scale-px(8px); + left: 8px; + right: 8px; z-index: $notify-z-index; display: flex; align-items: center; @@ -84,18 +84,18 @@ } &-left-icon { - margin-right: scale-px(6px); + margin-right: 6px; .nut-icon { - height: scale-px(16px); - width: scale-px(16px); + height: 16px; + width: 16px; } } &-right-icon { - margin-left: scale-px(6px); + margin-left: 6px; .nut-icon { - height: scale-px(12px); - width: scale-px(12px); + height: 12px; + width: 12px; } } } diff --git a/src/packages/numberkeyboard/numberkeyboard.scss b/src/packages/numberkeyboard/numberkeyboard.scss index b0ad39a6a2..244659510e 100644 --- a/src/packages/numberkeyboard/numberkeyboard.scss +++ b/src/packages/numberkeyboard/numberkeyboard.scss @@ -46,7 +46,7 @@ &-body { display: flex; - padding: scale-px(6px) 0 0 scale-px(6px); + padding: 6px 0 0 6px; &-keys { display: flex; @@ -64,7 +64,7 @@ flex-basis: 33%; /* #endif */ box-sizing: border-box; - padding: 0 scale-px(6px) scale-px(6px) 0; + padding: 0 6px 6px 0; background-color: $numberkeyboard-wrapper-background-color; .key { @@ -98,8 +98,8 @@ .key { position: absolute; top: 0; - right: scale-px(6px); - bottom: scale-px(6px); + right: 6px; + bottom: 6px; left: 0; height: auto; } @@ -128,9 +128,9 @@ } &-body { - padding: scale-px(6px) scale-px(6px) 0 0; + padding: 6px 6px 0 0; &-wrapper { - padding: 0 0 scale-px(6px) scale-px(6px); + padding: 0 0 6px 6px; .delete { transform: rotate(-180deg); } @@ -140,7 +140,7 @@ &-sidebar { .nut-numberkeyboard-body-wrapper { .key { - left: scale-px(6px); + left: 6px; right: 0; &.delete { transform: rotate(-180deg); diff --git a/src/packages/pagination/pagination.scss b/src/packages/pagination/pagination.scss index 92d154dee5..28505fbfd4 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: scale-px(39px); - min-width: scale-px(39px); + height: 39px; + min-width: 39px; flex-shrink: 0; box-sizing: border-box; display: flex; @@ -53,9 +53,9 @@ } .nut-pagination-simple { - height: scale-px(39px); - width: scale-px(124px); - line-height: scale-px(39px); + height: 39px; + width: 124px; + line-height: 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 fb17684946..20081f9612 100644 --- a/src/packages/popover/popover.scss +++ b/src/packages/popover/popover.scss @@ -6,26 +6,26 @@ &-arrow { position: absolute; - width: scale-px(8px); - height: scale-px(4px); + width: 8px; + height: 4px; .nut-icon-ArrowRadius { position: absolute; color: $popover-content-background-color; - width: scale-px(8px); - height: scale-px(4px); + width: 8px; + height: 4px; } &-top { - bottom: scale-px(-4px); + bottom: -4px; } &-bottom { - top: scale-px(-4px); + top: -4px; } &-left { - right: scale-px(-6px); + right: -6px; transform-origin: center top; &.nut-popover-arrow-left { @@ -34,15 +34,15 @@ } &.nut-popover-arrow-left-top { - top: scale-px(16px); - right: scale-px(-8px); + top: 16px; + right: -8px; transform: rotate(90deg) translateY(0%); } &.nut-popover-arrow-left-bottom { top: auto; - bottom: scale-px(16px); - right: scale-px(-8px); + bottom: 16px; + right: -8px; transform: rotate(90deg) translateY(0%); } } @@ -51,19 +51,19 @@ transform-origin: center top; &.nut-popover-arrow-right { top: 50%; - left: scale-px(-6px); + left: -6px; transform: rotate(-90deg) translateY(-50%); } &.nut-popover-arrow-right-top { - top: scale-px(16px); - left: scale-px(-8px); + top: 16px; + left: -8px; transform: rotate(-90deg) translateY(0%); } &.nut-popover-arrow-right-bottom { - bottom: scale-px(16px); - left: scale-px(-8px); + bottom: 16px; + left: -8px; transform: rotate(-90deg) translateY(0%); } } @@ -75,7 +75,7 @@ border-radius: $popover-border-radius; font-size: $popover-font-size; color: $popover-text-color; - line-height: scale-px(28px); + line-height: 28px; /* #ifndef dynamic*/ max-height: initial; overflow-y: initial; @@ -89,7 +89,7 @@ display: flex; align-items: center; justify-content: center; - border-bottom: scale-px(1px) solid $popover-divider-color; + border-bottom: 1px solid $popover-divider-color; max-width: $popover-item-width; word-wrap: break-word; @@ -118,7 +118,7 @@ } &-name { - width: calc(100% - scale-px(34px)); + width: calc(100% - 34px); word-break: keep-all; flex: 1; } @@ -149,8 +149,8 @@ &-top-right { right: 0; .nut-popover-arrow-top-right { - right: scale-px(16px); - bottom: scale-px(-3.5px); + right: 16px; + bottom: -3.5px; transform: rotate(180deg) translateX(0%); } } @@ -158,8 +158,8 @@ &-top-left { left: 0; .nut-popover-arrow-top-left { - left: scale-px(16px); - bottom: scale-px(-3.5px); + left: 16px; + bottom: -3.5px; transform: rotate(180deg) translateX(0%); } } @@ -174,7 +174,7 @@ &-bottom-right { right: 0; .nut-popover-arrow-bottom-right { - right: scale-px(16px); + right: 16px; transform: translateX(0%); } } @@ -182,7 +182,7 @@ &-bottom-left { left: 0; .nut-popover-arrow-bottom-left { - left: scale-px(16px); + left: 16px; transform: translateX(0%); } } @@ -232,7 +232,7 @@ .nut-popover-item { &-name { margin-left: 0; - margin-right: scale-px(4px); + margin-right: 4px; } &-action-icon { @@ -252,7 +252,7 @@ .nut-popover-arrow-top-right { right: auto; - left: scale-px(16px); + left: 16px; } } @@ -262,7 +262,7 @@ .nut-popover-arrow-top-left { left: auto; - right: scale-px(16px); + right: 16px; } } @@ -280,7 +280,7 @@ .nut-popover-arrow-bottom-right { right: auto; - left: scale-px(16px); + left: 16px; } } @@ -290,7 +290,7 @@ .nut-popover-arrow-bottom-left { left: auto; - right: scale-px(16px); + right: 16px; } } } @@ -333,5 +333,5 @@ // Taro .nut-popover-content-copy { position: absolute; - top: scale-px(-99999px); + top: -99999px; } diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss index 4fce559e70..cfa9ddd001 100644 --- a/src/packages/popup/popup.scss +++ b/src/packages/popup/popup.scss @@ -85,7 +85,7 @@ right: auto; bottom: auto; min-height: 10%; - max-width: scale-px(295px); + max-width: 295px; transform: translate(-50%, -50%); &.nut-popup-round { @@ -114,7 +114,7 @@ right: 0; left: auto; bottom: auto; - width: scale-px(100px); + width: 100px; height: 100%; &.nut-popup-round { @@ -127,7 +127,7 @@ left: 0; right: auto; bottom: auto; - width: scale-px(100px); + width: 100px; height: 100%; &.nut-popup-round { diff --git a/src/packages/progress/progress.scss b/src/packages/progress/progress.scss index 5b95515a79..9b7a7685e3 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: scale-px(12px); + margin-left: 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 5d79d9e4b3..9710b3429b 100644 --- a/src/packages/pulltorefresh/pulltorefresh.scss +++ b/src/packages/pulltorefresh/pulltorefresh.scss @@ -18,7 +18,7 @@ &-icons { width: $pulltorefresh-icon-width; height: $pulltorefresh-icon-height; - margin-bottom: scale-px(4px); + margin-bottom: 4px; } } } diff --git a/src/packages/quickenter/quickenter.scss b/src/packages/quickenter/quickenter.scss index 3caf986118..aacdbcdd7c 100644 --- a/src/packages/quickenter/quickenter.scss +++ b/src/packages/quickenter/quickenter.scss @@ -3,9 +3,9 @@ .nut-quickenter { width: 100%; /* 限制弹层最大高度，包含安全区 */ - max-height: calc(#{$quickenter-max-height} + env(safe-area-inset-top, 0)); + max-height: calc($quickenter-max-height + env(safe-area-inset-top, 0px)); background: $quickenter-bg-color; - border-radius: 0 0 scale-px(12px) scale-px(12px); + border-radius: 0 0 12px 12px; overflow: hidden; box-sizing: border-box; display: flex; @@ -24,7 +24,7 @@ display: flex; align-items: center; justify-content: space-between; - padding: scale-px(30px) scale-px(16px) 0; + padding: 30px 16px 0; box-sizing: border-box; } @@ -53,7 +53,7 @@ &-content { flex: 1; - padding: scale-px(10px) scale-px(28px); + padding: 10px 28px; overflow-y: hidden; // 始终可滚动，防止内容被遮挡 box-sizing: border-box; @@ -75,28 +75,28 @@ flex-direction: column; align-items: center; justify-content: flex-start; - width: scale-px(56px); - padding: 0 0 scale-px(12px) 0; // Reduced from 16px to ensure 2 rows fit in 256px + width: 56px; + padding: 0 0 12px 0; // Reduced from 16px to ensure 2 rows fit in 256px box-sizing: border-box; cursor: pointer; // Calculate gap for 4 items per row: (100% - 4 * 56px) / 3 - margin-right: calc((100% - scale-px(224px)) / 3); + margin-right: calc((100% - 224px) / 3); &:nth-child(4n) { margin-right: 0; } &-icon { - width: scale-px(56px); - height: scale-px(56px); + width: 56px; + height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: $quickenter-item-icon-bg-color; color: $quickenter-item-icon-color; - margin-bottom: scale-px(8px); + margin-bottom: 8px; flex-shrink: 0; svg, @@ -114,9 +114,9 @@ // Allow multi-line if text is long, preventing truncation white-space: normal; word-wrap: break-word; - width: scale-px(72px); // Allow text to be slightly wider than icon - margin-left: scale-px(-8px); // Center 72px title over 56px icon - margin-right: scale-px(-8px); + width: 72px; // Allow text to be slightly wider than icon + margin-left: -8px; // Center 72px title over 56px icon + margin-right: -8px; } } } diff --git a/src/packages/radio/radio.scss b/src/packages/radio/radio.scss index fd0c80b838..ff879e9cc4 100644 --- a/src/packages/radio/radio.scss +++ b/src/packages/radio/radio.scss @@ -37,7 +37,7 @@ &-checked { color: $color-primary; background-color: $white; - box-shadow: 0px scale-px(2px) scale-px(4px) 0px #ff0f2333; + box-shadow: 0px 2px 4px 0px #ff0f2333; border-radius: 50%; &.nut-radio-icon-disabled { @@ -61,14 +61,14 @@ display: inline-flex; /* #endif */ align-items: center; - min-height: scale-px(30px); + min-height: 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: scale-px(1px) solid $radio-button-background; + border: 1px solid $radio-button-background; &-active { background: $color-primary-light-pressed; @@ -78,14 +78,14 @@ &-disabled { color: $color-text-disabled; - border: scale-px(1px) solid $radio-button-background; + border: 1px solid $radio-button-background; } } .nut-radio-button-active.nut-radio-button-disabled { background: $color-text-disabled; color: $white; - border: scale-px(1px) solid $color-text-disabled; + border: 1px solid $color-text-disabled; } } diff --git a/src/packages/radiogroup/radiogroup.scss b/src/packages/radiogroup/radiogroup.scss index 7b89fbd7e3..661a6e775e 100644 --- a/src/packages/radiogroup/radiogroup.scss +++ b/src/packages/radiogroup/radiogroup.scss @@ -23,7 +23,7 @@ } &-button { - border: scale-px(1px) solid $radio-button-background; + border: 1px solid $radio-button-background; } &-button-active { @@ -38,7 +38,7 @@ .nut-radio { &-button { - border: scale-px(1px) solid $white; + border: 1px solid $white; } &-button-active { @@ -55,7 +55,7 @@ .nut-radio-button-active.nut-radio-button-disabled { background: $color-text-disabled; color: $white; - border: scale-px(1px) solid $color-text-disabled; + border: 1px solid $color-text-disabled; } } diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss index e07ecbfbc7..adc282be67 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: scale-px(2px); + border-radius: 2px; flex: 1; cursor: pointer; &::before { position: absolute; - inset-block: scale-px(-8px); + inset-block: -8px; inset-inline: 0; content: ''; } @@ -45,7 +45,7 @@ max-width: 100%; max-height: 100%; background: $range-active-color; - border-radius: scale-px(2px); + border-radius: 2px; &-animate { transition: all 0.2s; @@ -59,7 +59,7 @@ height: $range-button-height; background: $range-button-background; border-radius: 50%; - box-shadow: 0px scale-px(1px) scale-px(2px) 0px rgba(0, 0, 0, 0.15); + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); border: $range-button-border; outline: none; align-items: center; @@ -98,9 +98,9 @@ &-number { position: relative; width: 200%; - height: scale-px(24px); - line-height: scale-px(14px); - padding: scale-px(5px) 0; + height: 24px; + line-height: 14px; + padding: 5px 0; left: 50%; display: flex; align-items: center; @@ -130,7 +130,7 @@ &-mark { position: absolute; width: 100%; - height: scale-px(14px); + height: 14px; overflow: visible; top: 50%; } @@ -138,14 +138,14 @@ &-mark-text-wrapper { position: absolute; height: 100%; - top: scale-px(14px); + top: 14px; display: inline-block; - transform: translateX(scale-px(-10px)); + transform: translateX(-10px); } &-mark-text { position: absolute; - line-height: scale-px(16px); + line-height: 16px; font-size: $font-size-s; color: #999; text-align: center; @@ -155,11 +155,11 @@ &-tick { position: absolute; - top: scale-px(-20px); - width: scale-px(11px); - height: scale-px(11px); + top: -20px; + width: 11px; + height: 11px; left: 0px; - border-radius: scale-px(6px); + border-radius: 6px; background: $range-inactive-color; &-active { @@ -171,7 +171,7 @@ .nut-range-vertical-container { height: 100%; flex-direction: column; - padding: 0px scale-px(15px); + padding: 0px 15px; } .nut-range-vertical { @@ -209,7 +209,7 @@ &-mark { position: absolute; - width: scale-px(36px); + width: 36px; height: 100%; top: 0px; right: 50%; @@ -219,21 +219,21 @@ } &-mark-hm { - left: scale-px(-34px); + left: -34px; } &-mark-text-wrapper { - // width: scale-px(20px); - height: scale-px(16px); + // width: 20px; + height: 16px; position: absolute; display: inline-block; user-select: none; - transform: translateY(scale-px(-11px)); + transform: translateY(-11px); } &-mark-text { height: 100%; - line-height: scale-px(16px); + line-height: 16px; color: #999; text-align: center; word-break: keep-all; @@ -241,11 +241,11 @@ &-tick { position: absolute; - top: scale-px(2px); - left: scale-px(31px); - width: scale-px(10px); - height: scale-px(10px); - border-radius: scale-px(5px); + top: 2px; + left: 31px; + width: 10px; + height: 10px; + border-radius: 5px; background: $range-inactive-color; &-active { @@ -282,7 +282,7 @@ } &-mark-text { - transform: translateX(scale-px(10px)); + transform: translateX(10px); } &-vertical { @@ -316,13 +316,13 @@ &-tick { left: auto; - right: scale-px(30px); + right: 30px; margin-left: 0; - margin-right: scale-px(-0px); + margin-right: -0px; } &-mark-text-wrapper { - transform: translateY(scale-px(-11px)); + transform: translateY(-11px); } } } diff --git a/src/packages/rate/rate.scss b/src/packages/rate/rate.scss index 3646328b18..756646adc9 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 + scale-px(8px)); - width: calc($rate-icon-size + scale-px(8px)); + height: calc($rate-icon-size + 8px); + width: calc($rate-icon-size + 8px); } } &-small { margin-left: calc($rate-item-margin / 2); .nut-icon { - height: calc($rate-icon-size - scale-px(4px)); - width: calc($rate-icon-size - scale-px(4px)); + height: calc($rate-icon-size - 4px); + width: calc($rate-icon-size - 4px); } } @@ -148,7 +148,7 @@ } &-small { - margin-right: calc($rate-item-margin - scale-px(2px)); + margin-right: calc($rate-item-margin - 2px); } &:last-child { @@ -185,7 +185,7 @@ } &-small { - padding-right: calc($rate-item-margin - scale-px(2px)); + padding-right: calc($rate-item-margin - 2px); } } } diff --git a/src/packages/resultpage/resultpage.scss b/src/packages/resultpage/resultpage.scss index 5961b50466..6842c0b134 100644 --- a/src/packages/resultpage/resultpage.scss +++ b/src/packages/resultpage/resultpage.scss @@ -46,7 +46,7 @@ } } &-action { - margin-left: scale-px(6px); - margin-right: scale-px(6px); + margin-left: 6px; + margin-right: 6px; } } diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss index 629bcffacb..1fdc25bbd6 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: scale-px(1px) solid $color-primary; + border: 1px solid $color-primary; } &-icon { @@ -95,19 +95,19 @@ flex-direction: row; z-index: 2; background-color: #fff; - top: scale-px(9px); - left: scale-px(6px); + top: 9px; + left: 6px; font-size: $font-size-s; - line-height: scale-px(12px); + line-height: 12px; .nut-searchbar-value { display: flex; flex-direction: row; align-items: center; - padding: scale-px(4px) scale-px(8px); + padding: 4px 8px; background-color: #f7f8fc; - border-radius: scale-px(4px); - margin-right: scale-px(2px); + border-radius: 4px; + margin-right: 2px; } .nut-icon { @@ -115,7 +115,7 @@ height: scale-icon-px(6px); font-size: scale-font-px(6px); color: #c2c4cc; - margin-left: scale-px(4px); + margin-left: 4px; } } @@ -130,8 +130,8 @@ align-items: center; &.nut-icon { - width: scale-px(20px); - height: scale-px(20px); + width: 20px; + height: 20px; } } @@ -193,10 +193,10 @@ } &-focus { - padding: scale-px(5px) $searchbar-gap; + padding: 5px $searchbar-gap; .nut-searchbar-content { - border: scale-px(0.5px) solid #ff5c67; + border: 0.5px solid #ff5c67; } } } diff --git a/src/packages/segmented/segmented.scss b/src/packages/segmented/segmented.scss index ebe65addc1..de3f361cca 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: scale-px(24px); + min-width: 24px; padding: $segmented-padding; align-items: center; border-radius: $segmented-border-radius; @@ -34,12 +34,12 @@ .nut-segmented-icon { display: flex; align-items: center; - height: scale-px(10px); - width: scale-px(10px); + height: 10px; + width: 10px; margin-right: $segmented-icon-margin-right; .nut-icon { - height: scale-px(10px); - width: scale-px(10px); + height: 10px; + width: 10px; font-size: $font-size-xxs; } } diff --git a/src/packages/shortpassword/shortpassword.scss b/src/packages/shortpassword/shortpassword.scss index 8003ff02d0..1af54b6f35 100644 --- a/src/packages/shortpassword/shortpassword.scss +++ b/src/packages/shortpassword/shortpassword.scss @@ -2,8 +2,8 @@ .nut-shortpassword { &-popup { - padding: scale-px(32px) scale-px(24px) scale-px(28px) scale-px(24px); - border-radius: scale-px(12px); + padding: 32px 24px 28px 24px; + border-radius: 12px; text-align: center; } @@ -18,15 +18,15 @@ &-description { display: flex; justify-content: center; - margin-top: scale-px(12px); - margin-bottom: scale-px(24px); + margin-top: 12px; + margin-bottom: 24px; line-height: $font-size-s; font-size: $font-size-s; color: $color-text; } &-input { - padding: 0 0 scale-px(10px); + padding: 0 0 10px; text-align: center; position: relative; overflow: hidden; @@ -34,8 +34,8 @@ &-real { position: absolute; right: 0; - width: scale-px(247px); - height: scale-px(41px); + width: 247px; + height: 41px; outline: 0 none; border: 0; text-decoration: none; @@ -43,20 +43,20 @@ } &-site { - width: scale-px(247px); - height: scale-px(41px); - border-radius: scale-px(4px); + width: 247px; + height: 41px; + border-radius: 4px; } &-fake { top: 5%; width: 100%; - height: scale-px(41px); + height: 41px; margin: 0 auto; box-sizing: border-box; background: $shortpassword-background-color; - border-radius: scale-px(4px); - border: scale-px(1px) solid $shortpassword-border-color; + border-radius: 4px; + border: 1px solid $shortpassword-border-color; display: flex; position: absolute; left: 0; @@ -68,8 +68,8 @@ align-items: center; &-icon { - height: scale-px(6px); - width: scale-px(6px); + height: 6px; + width: 6px; border-radius: 50%; background: #000; display: inline-block; @@ -79,10 +79,10 @@ } &-message { - margin-top: scale-px(9px); + margin-top: 9px; display: flex; justify-content: space-between; - width: scale-px(247px); + width: 247px; &-error { line-height: $font-size-xs; @@ -98,7 +98,7 @@ align-items: center; .nut-icon { - margin-right: scale-px(3px); + margin-right: 3px; } } } @@ -106,13 +106,13 @@ &-footer { display: flex; justify-content: space-between; - margin-top: scale-px(20px); + margin-top: 20px; &-cancel { background: $white; - border: scale-px(1px) solid $color-primary; - border-radius: scale-px(15px); - padding: scale-px(8px) scale-px(38px); + border: 1px solid $color-primary; + border-radius: 15px; + padding: 8px 38px; line-height: $font-size-base; font-size: $font-size-base; color: $color-primary; @@ -124,8 +124,8 @@ $color-primary 0%, $color-primary-stop-2 100% ); - border-radius: scale-px(15px); - padding: scale-px(8px) scale-px(38px); + border-radius: 15px; + padding: 8px 38px; line-height: $font-size-base; font-size: $font-size-base; color: $color-primary-text; diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss index 2f0293501a..d0d5c6956d 100644 --- a/src/packages/skeleton/skeleton.scss +++ b/src/packages/skeleton/skeleton.scss @@ -25,7 +25,7 @@ &-small { height: $skeleton-line-small-height; - margin-top: scale-px(8px); + margin-top: 8px; } &-small-0 { margin-top: 0; diff --git a/src/packages/space/space.scss b/src/packages/space/space.scss index 9fba1b8b6b..9203872639 100644 --- a/src/packages/space/space.scss +++ b/src/packages/space/space.scss @@ -30,7 +30,7 @@ &-wrap { flex-wrap: wrap; - margin-bottom: calc(#{$space-gap} * -1); + margin-bottom: calc($space-gap * -1); &-item { padding-bottom: $space-gap; diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss index 0877ed6e9c..f8b782772f 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -86,16 +86,16 @@ } &-title { - height: scale-px(14px); - line-height: scale-px(14px); + height: 14px; + line-height: 14px; font-size: $steps-base-title-font-size; color: $steps-base-title-color; white-space: nowrap; } &-description { - height: scale-px(16px); - line-height: scale-px(16px); + height: 16px; + line-height: 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 e00e62aa5a..4dea2eb1e2 100644 --- a/src/packages/steps/steps.scss +++ b/src/packages/steps/steps.scss @@ -74,7 +74,7 @@ &-title, &-description { - padding-left: scale-px(4px); + padding-left: 4px; } &-special { @@ -85,7 +85,7 @@ } .nut-step-title { - padding-right: scale-px(8px); + padding-right: 8px; /* #ifndef dynamic*/ width: fit-content; /* #endif */ @@ -131,7 +131,7 @@ &-head { justify-content: center; - margin-bottom: scale-px(5px); + margin-bottom: 5px; &-dot-wrap, &-icon-wrap, @@ -158,7 +158,7 @@ &-title { height: auto; - line-height: scale-px(20px); + line-height: 20px; white-space: normal; overflow-wrap: break-word; text-align: center; @@ -210,8 +210,8 @@ } &-line { - height: calc(100% - scale-px(4px)); - width: scale-px(1px); + height: calc(100% - 4px); + width: 1px; bottom: 0; &-inner { @@ -222,7 +222,7 @@ &-head { align-items: center; justify-content: center; - height: scale-px(20px); + height: 20px; &-icon { width: $steps-vertical-head-icon-size; @@ -239,7 +239,7 @@ flex: 1; min-width: 0; height: auto; - margin-left: scale-px(8px); + margin-left: 8px; } &-title { @@ -276,23 +276,23 @@ } &-head-dot-wrap { - height: calc($steps-base-head-dot-size + scale-px(8px)); + height: calc($steps-base-head-dot-size + 8px); } &-head-icon-wrap { - height: calc($steps-vertical-head-icon-size + scale-px(8px)); + height: calc($steps-vertical-head-icon-size + 8px); } &-head-text-wrap { - height: calc($steps-base-head-text-size + scale-px(8px)); + height: calc($steps-base-head-text-size + 8px); } } &-icon { .nut-step { &-head { - width: calc($steps-vertical-head-icon-size + scale-px(1px)); - min-width: calc($steps-vertical-head-icon-size + scale-px(1px)); + width: calc($steps-vertical-head-icon-size + 1px); + min-width: calc($steps-vertical-head-icon-size + 1px); } &-line { @@ -304,7 +304,7 @@ &-dot { .nut-step { &-head { - width: calc($steps-base-head-dot-size + scale-px(1px)); + width: calc($steps-base-head-dot-size + 1px); } &-line { @@ -316,8 +316,8 @@ &-text { .nut-step { &-head { - width: calc($steps-base-head-text-size + scale-px(1px)); - min-width: calc($steps-base-head-text-size + scale-px(1px)); + width: calc($steps-base-head-text-size + 1px); + min-width: calc($steps-base-head-text-size + 1px); } &-line { diff --git a/src/packages/swiper/swiper.scss b/src/packages/swiper/swiper.scss index 8c9318d3eb..67223cacbf 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: scale-px(4px); + height: 4px; width: 100%; top: 89.33%; z-index: 10; } &-indicator-vertical { - width: scale-px(8px); + width: 8px; height: 100%; top: 0; - left: scale-px(12px); + left: 12px; flex-direction: column; justify-content: center; z-index: 1; @@ -68,6 +68,6 @@ &-indicator-vertical { left: auto; - right: scale-px(12px); + right: 12px; } } diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss index be66d0cfad..0aeb1201d3 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: scale-px(2px); + height: 2px; background: $switch-inactive-line-background-color; - border-radius: scale-px(2px); + border-radius: 2px; } } @@ -78,20 +78,16 @@ color: $switch-label-text-color; } &-open { - margin: 0 calc($switch-height - $switch-border-width + scale-px(3px)) 0 - scale-px(7px); + margin: 0 ($switch-height - $switch-border-width + 3px) 0 7px; &-rtl { - margin: 0 scale-px(7px) 0 - calc($switch-height - $switch-border-width + scale-px(3px)); + margin: 0 7px 0 ($switch-height - $switch-border-width + 3px); } } &-close { - margin: 0 scale-px(7px) 0 - calc($switch-height - $switch-border-width + scale-px(3px)); + margin: 0 7px 0 ($switch-height - $switch-border-width + 3px); &-rtl { - margin: 0 calc($switch-height - $switch-border-width + scale-px(3px)) 0 - scale-px(7px); + margin: 0 ($switch-height - $switch-border-width + 3px) 0 7px; } } diff --git a/src/packages/tabbar/tabbar.scss b/src/packages/tabbar/tabbar.scss index ace561058c..193c5d204d 100644 --- a/src/packages/tabbar/tabbar.scss +++ b/src/packages/tabbar/tabbar.scss @@ -13,11 +13,11 @@ display: flex; &-3 { - padding: 0 scale-px(16px); + padding: 0 16px; } &-2 { - padding: 0 scale-px(32px); + padding: 0 32px; } &-horizontal { @@ -26,11 +26,11 @@ flex-direction: row; justify-content: center; .nut-icon { - width: scale-px(20px); - height: scale-px(20px); + width: 20px; + height: 20px; } .nut-tabbar-item-text { - margin: 0 scale-px(4px) 0 scale-px(6px); + margin: 0 4px 0 6px; font-size: $font-size-base; } .nut-badge-sup { diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss index fc20e64d0e..40acfe77ab 100644 --- a/src/packages/tabbaritem/tabbaritem.scss +++ b/src/packages/tabbaritem/tabbaritem.scss @@ -5,13 +5,13 @@ flex-direction: column; align-items: center; flex: 1; - padding: scale-px(6px) 0 scale-px(2px); + padding: 6px 0 2px; color: $tabbar-inactive-color; height: 100%; .nut-icon { - width: scale-px(24px); - height: scale-px(24px); + width: 24px; + height: 24px; font-size: $font-size-xxl; /* #ifdef harmony dynamic*/ color: $tabbar-inactive-color; @@ -31,9 +31,9 @@ .nut-image { &-default { - width: scale-px(38px); - height: scale-px(38px); - border-radius: scale-px(38px); + width: 38px; + height: 38px; + border-radius: 38px; } } diff --git a/src/packages/table/table.scss b/src/packages/table/table.scss index 4d2cd82e81..5391b1a82a 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: scale-px(1px) solid $table-border-color; + border: 1px solid $table-border-color; &-sticky { overflow-x: auto; @@ -101,15 +101,15 @@ &-nodata { display: flex; - height: scale-px(50px); + height: 50px; align-items: center; justify-content: center; } } &-border { - border-right: scale-px(1px) solid $table-border-color; - border-bottom: scale-px(1px) solid $table-border-color; + border-right: 1px solid $table-border-color; + border-bottom: 1px solid $table-border-color; } &-alignleft, @@ -144,8 +144,8 @@ &-sticky-right { position: absolute; top: 0px; - width: scale-px(8px); - bottom: scale-px(-1px); + width: 8px; + bottom: -1px; overflow-x: hidden; overflow-y: hidden; box-shadow: none; @@ -156,12 +156,12 @@ } &-sticky-left { - left: scale-px(1px); + left: 1px; box-shadow: $table-sticky-left-shadow; } &-sticky-right { - right: scale-px(1px); + right: 1px; box-shadow: $table-sticky-right-shadow; } @@ -186,7 +186,7 @@ display: flex; align-items: center; justify-content: center; - height: scale-px(30px); + height: 30px; padding: $table-cols-padding; position: relative; z-index: 5; @@ -215,7 +215,7 @@ &-border { border-right: none; - border-left: scale-px(1px) solid $table-border-color; + border-left: 1px solid $table-border-color; } &-alignleft, @@ -232,13 +232,13 @@ &-sticky-left { left: auto; - right: scale-px(1px); + right: 1px; box-shadow: $table-sticky-right-shadow; } &-sticky-right { right: auto; - left: scale-px(1px); + left: 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 6fe817bc63..9aa1bd101a 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 scale-px(22px); + padding: 0 22px; } } &-right { justify-content: flex-end; .nut-tabs-titles-item { - padding: 0 scale-px(22px); + padding: 0 22px; } } @@ -123,8 +123,8 @@ /* #ifndef dynamic*/ overflow: unset; /* #endif */ - width: scale-px(40px); - height: scale-px(20px); + width: 40px; + height: 20px; .nut-icon { color: $tabs-titles-item-active-color; @@ -167,14 +167,14 @@ &-button { .nut-tabs-titles-item { - padding: 0 scale-px(10px); + padding: 0 10px; .nut-tabs-titles-item-text { flex: 1; - height: scale-px(28px); + height: 28px; display: flex; align-items: center; justify-content: center; - padding: 0 scale-px(8px); + padding: 0 8px; } } .nut-tabs-titles-item-active { @@ -190,7 +190,7 @@ } &-divider { - border-bottom: scale-px(1px) solid $color-border; + border-bottom: 1px solid $color-border; .nut-tabs-titles-item { position: relative; @@ -201,7 +201,7 @@ right: 0; top: 50%; height: 50%; - width: scale-px(1px); + width: 1px; background: $color-border; transform: translateY(-50%); } @@ -219,12 +219,12 @@ .nut-tabs-ellipsis { white-space: break-spaces; /* #ifdef harmony dynamic*/ - padding-left: scale-px(12px); + padding-left: 12px; /* #endif */ /* #ifndef harmony dynamic*/ - padding-left: scale-px(6px); + padding-left: 6px; /* #endif */ - width: scale-px(90px); + width: 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: scale-px(10px); + left: 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: scale-px(-12px); + right: -12px; bottom: -2%; left: auto; transform: rotate(320deg); @@ -306,7 +306,7 @@ .nut-tabs-titles-item-smile { left: 50%; right: auto; - bottom: scale-px(-3px); + bottom: -3px; transform: translate(-50%, 0) rotate(0deg); } } @@ -361,7 +361,7 @@ &-line { .nut-tabs-titles-item { padding-left: 0; - padding-right: scale-px(14px); + padding-right: 14px; } } } @@ -370,11 +370,11 @@ &-active { .nut-tabs-titles-item-line { left: auto; - right: scale-px(10px); + right: 10px; } .nut-tabs-titles-item-smile { - left: scale-px(-12px); + left: -12px; right: auto; transform: rotate(-320deg); } diff --git a/src/packages/tag/tag.scss b/src/packages/tag/tag.scss index 7d1494c819..1aed907217 100644 --- a/src/packages/tag/tag.scss +++ b/src/packages/tag/tag.scss @@ -12,7 +12,7 @@ .nut-icon { vertical-align: middle; - margin-left: scale-px(4px); + margin-left: 4px; color: $tag-color; } @@ -72,7 +72,7 @@ justify-content: center; font-size: $tag-font-size; color: $tag-color; - margin-left: scale-px(4px); + margin-left: 4px; } &-plain { @@ -90,6 +90,6 @@ .nut-rtl .nut-tag { .nut-icon { margin-left: 0; - margin-right: scale-px(4px); + margin-right: 4px; } } diff --git a/src/packages/textarea/textarea.scss b/src/packages/textarea/textarea.scss index b8a7866dbb..ed09b1816a 100644 --- a/src/packages/textarea/textarea.scss +++ b/src/packages/textarea/textarea.scss @@ -13,7 +13,7 @@ } &-error { - border: scale-px(0.5px) solid $color-danger; + border: 0.5px solid $color-danger; background-color: $color-danger-light; } @@ -34,7 +34,7 @@ display: block; box-sizing: border-box; width: 100%; - height: scale-px(40px); + height: 40px; min-width: 0; margin: 0; padding: 0; @@ -49,10 +49,10 @@ // &::after{ // content: ''; // position: absolute; - // width: scale-px(2px); - // height: scale-px(14px); + // width: 2px; + // height: 14px; // background-color: red; - // // left: scale-px(10px); + // // left: 10px; // // top: 50%; // transform: translateY(-50%); // z-index: 1; @@ -87,7 +87,7 @@ &.nut-textarea-rtl { &-limit { right: auto; - left: scale-px(15px); + left: 15px; } } } diff --git a/src/packages/timedetail/timedetail.scss b/src/packages/timedetail/timedetail.scss index fe7c71715b..71df61245b 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 scale-px(50px) scale-px(12px); + padding: 0 0 50px 12px; &-item { width: $timeselect-time-width; @@ -13,13 +13,13 @@ text-align: center; margin: $timeselect-time-margin; background: $timeselect-time-background; - border-radius: scale-px(5px); + border-radius: 5px; font-size: $font-size-base; - border: scale-px(1px) solid transparent; + border: 1px solid transparent; &.active { background-color: $color-primary-light-pressed; - border: scale-px(1px) solid $color-primary; + border: 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 scale-px(12px) scale-px(50px) 0; + padding: 0 12px 50px 0; } diff --git a/src/packages/timeselect/timeselect.scss b/src/packages/timeselect/timeselect.scss index fa8552ff76..4cb47454eb 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% - scale-px(50px)); + height: calc(100% - 50px); &-content { display: flex; @@ -24,7 +24,7 @@ } .nut-timepannel { - padding: 0 scale-px(16px); + padding: 0 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 fd60fff802..05e9364d10 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: scale-px(96px); + min-width: 96px; max-width: 60%; - // max-width: scale-px(224px); + // max-width: 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: scale-px(256px); + // max-width: 256px; } &-normal { @@ -95,7 +95,7 @@ &-text { color: #ffffff; text-align: $toast-inner-text-align; - line-height: scale-px(20px); + line-height: 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: scale-px(22px); + line-height: 22px; /* #ifdef harmony dynamic*/ line-height: normal; /* #endif */ } .nut-icon { - width: scale-px(24px); - height: scale-px(24px); + width: 24px; + height: 24px; color: #ffffff; } @@ -124,12 +124,12 @@ display: flex; align-items: center; justify-content: center; - margin: scale-px(3px) 0 scale-px(5px); + margin: 3px 0 5px; color: #ffffff; &-icon { - width: scale-px(24px); - height: scale-px(24px); + width: 24px; + height: 24px; } } diff --git a/src/packages/tour/tour.scss b/src/packages/tour/tour.scss index 1566e018c1..5b81ad72bb 100644 --- a/src/packages/tour/tour.scss +++ b/src/packages/tour/tour.scss @@ -29,8 +29,8 @@ text-align: end; &-close { - width: scale-px(10px); - height: scale-px(10px); + width: 10px; + height: 10px; } } @@ -51,7 +51,7 @@ &-btn { display: inline-block; - border: scale-px(1px) solid $color-text-disabled; + border: 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 372e69fb98..6c9a4097cf 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 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 10%); + box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%); &-progress { position: absolute; @@ -103,26 +103,26 @@ width: 100%; 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%); + margin-top: 10px; + box-shadow: 0 2px 10px 0 rgb(0 0 0 / 1%); } &-list { width: 100%; - height: scale-px(32px); + height: 32px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; - padding: 0 scale-px(10px); + padding: 0 10px; background-color: $color-background-sunken; .nut-uploader-preview-img-file-name { display: flex; align-items: center; -webkit-line-clamp: 1; - padding: scale-px(2px); - height: scale-px(24px); + padding: 2px; + height: 24px; @include text-ellipsis(); } @@ -133,7 +133,7 @@ bottom: 0; .nut-progress-outer { - height: scale-px(2px) !important; + height: 2px !important; } } } diff --git a/src/packages/virtuallist/virtuallist.scss b/src/packages/virtuallist/virtuallist.scss index 818dfc7c55..366747e30e 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: scale-px(10px); - margin-right: scale-px(20px); + padding: 10px; + margin-right: 20px; } &:after { @@ -23,12 +23,12 @@ display: block; color: $color-title; background: $color-background-overlay; - 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); + border-radius: 7px; + box-shadow: 0 1px 6px 0 rgba(237, 238, 241, 1); + margin-top: 20px; + padding: 14px 15px; font-size: scale-font-px(13px); - line-height: scale-px(18px); + line-height: 18px; font-family: PingFangSC; font-weight: 500; } @@ -74,6 +74,6 @@ li { float: right; margin-right: 0; - margin-left: scale-px(20px); + margin-left: 20px; } } From f3e2b10e787f1b8c8500f5d3bb7a718afa5f427d Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 12 May 2026 14:40:04 +0800 Subject: [PATCH 02/10] =?UTF-8?q?chore:=20=E8=BF=98=E5=8E=9F=E9=83=A8?= =?UTF-8?q?=E5=88=86=E6=94=B9=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../nutui-proportional-scaling/SKILL.md | 17 +++++++++++-- .../avatarcropper/avatarcropper.taro.tsx | 7 +++--- src/packages/button/button.taro.tsx | 5 +++- src/packages/checkbox/checkbox.scss | 2 +- src/packages/fixednav/fixednav.scss | 6 ++--- src/packages/lottie/lottiemp.taro.tsx | 24 ++++++++++--------- src/packages/overlay/overlay.tsx | 6 +++++ src/packages/popover/popover.taro.tsx | 2 +- src/packages/rate/rate.taro.tsx | 11 ++++----- src/packages/switch/switch.scss | 8 +++---- 10 files changed, 55 insertions(+), 33 deletions(-) diff --git a/.cursor/skills/nutui-proportional-scaling/SKILL.md b/.cursor/skills/nutui-proportional-scaling/SKILL.md index 5dc70d374e..a38cdedd6a 100644 --- a/.cursor/skills/nutui-proportional-scaling/SKILL.md +++ b/.cursor/skills/nutui-proportional-scaling/SKILL.md @@ -8,7 +8,9 @@ description: >- scripts/px-to-scale-px-in-component-scss.cjs on component SCSS in memory; profiles standard / large / elderly; commit-backed rules e.g. never scale 0px. Use when implementing 多尺寸适配, 等比适配, 大字版, 老年版, scale-px, viewport or native bridge scaling, or - editing component SCSS for resize. + editing component SCSS for resize; SCSS: prefer calc($token + Npx) over + #{} in calc, use outer calc() when mixing tokens that compile to + var(--nutui-*). --- # NutUI React 等比适配 @@ -51,8 +53,9 @@ description: >- ### 2.1 `npm run build` / `npm run build:taro` 时的 px → `scale-px` -- 与 `package.json` 中顺序一致：先跑 **`scripts/replace-css-var.js`**，再 **`scripts/build.mjs`** 或 **`scripts/build-taro.mjs`**；上述脚本在读取 **`src/packages/**/\*.scss`（不含 demo）** 后，会经 **`scripts/px-to-scale-px-in-component-scss.cjs`** 在**内存**里把声明值中的裸 **`Npx`** 转为 **`scale-px(Npx)`**（规则见 §3），**不写回\*\*仓库文件。 +- 与 `package.json` 中顺序一致：先跑 **`scripts/replace-css-var.js`**，再 **`scripts/build.mjs`** 或 **`scripts/build-taro.mjs`**；上述脚本在读取 **`src/packages/**/\*.scss`（不含 demo）** 后，会经 **`scripts/px-to-scale-px-in-component-scss.cjs`** 在**内存**里把声明值中的裸 **`Npx`** 转为 **`scale-px(Npx)`**（规则见 §3），**不写回\*\*仓库里的组件 SCSS。 - 源码里可继续手写 **`scale-px` / `scale-font-px` / `scale-icon-px`**；构建不会重复嵌套 `scale-px`。 +- 该脚本对 **`calc(...)` 体内同时含 `$` 与 `/`** 的整段先做占位再替换裸 `px`，避免 postcss-scss 把 **`calc($var / 2)`** 等拆坏；其它 `calc` 内的裸 `Npx` 仍会按规则转为 `scale-px`。 --- @@ -76,6 +79,14 @@ description: >- - 图标占位：**`scale-icon-px`** 或已有 `--nut-icon-*`。 - 保持与 **无障碍/大屏** 相关提交协同：同一文件改尺度时，勿回退 `dialog` 等对大字兼容的改动。 +### 3.4 `calc()`、Sass 变量与 `#{}`（与 `variables.scss` / 主题 token 一致） + +- **推荐**：在 `calc()` 里直接写 Sass 变量，如 **`calc($steps-vertical-head-icon-size + 1px)`**、**`calc($rate-item-margin / 2)`**，而不是 **`calc(#{$steps-vertical-head-icon-size} + 1px)`**。`#{}` 只在需要把值**硬插成无引号 CSS 片段**、或要避免 Sass 对单位做提前合并时再考虑；普通设计 token 用 **`$var` 作为 `calc` 的操作数**即可。 +- **与 `var(--nutui-*)` 一起运算时**：许多 token 会展开为 **`var(--nutui-…, calc(Npx * var(--nut-scale-f, 1)))`**。此时**不要**指望纯 Sass 括号在声明值里做「减法 + 固定 px」，例如 + **`margin: 0 ($switch-height - $switch-border-width + 3px) 0 7px`** + 会在编译结果里拼成 **`var(...)var(...)`** 一类**缺少运算符**的非法片段。应写成 **`margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px`**，让整条长度在**一个** CSS `calc()` 里由浏览器解析。 +- **`100%` 与长度相减**：用 **`calc(100% - Npx)`** 一层即可，避免出现 **`100% - calc(...)`** 这类单位不合法的组合（历史上有过 postcss / 手工替换导致的损坏，以当前组件 SCSS 为准）。 + --- ## 4. 业务接入清单 @@ -91,6 +102,8 @@ description: >- - [ ] 新增 **0** 尺寸未误用 `scale-px(0px)`。 - [ ] 字体/图标是否应走 **`scale-font-px` / `scale-icon-px`** 而非误用 `scale-px`。 +- [ ] 含 **`$token` 与裸 `px` 的混合运算**：若 token 会变成 **`var(--nutui-*)`**，是否已用 **`calc($a - $b + Npx)`**，而不是 **`($a - $b + Npx)`** 写在 `margin` / `width` 等非纯编译期长度位置。 +- [ ] `calc()` 内对设计 token 是否优先 **`calc($var + 1px)`**，避免无必要的 **`#{}`**。 - [ ] TS 侧改 `scale-f*` 已同步考虑 **Taro** 文件。 - [ ] 修改 `formatScaleValue` / 断点时，已通读 **视口与平板常量** 是否仍与文档、设计一致。 diff --git a/src/packages/avatarcropper/avatarcropper.taro.tsx b/src/packages/avatarcropper/avatarcropper.taro.tsx index f227f259b2..7cf57ef785 100644 --- a/src/packages/avatarcropper/avatarcropper.taro.tsx +++ b/src/packages/avatarcropper/avatarcropper.taro.tsx @@ -4,9 +4,8 @@ import React, { useMemo, useCallback, FunctionComponent, - useLayoutEffect, } from 'react' -import Taro, { createSelectorQuery } from '@tarojs/taro' +import Taro, { useReady, createSelectorQuery } from '@tarojs/taro' import classNames from 'classnames' import { Canvas, CommonEventFunction, View } from '@tarojs/components' import { getWindowInfo } from '@/utils/taro/get-system-info' @@ -138,7 +137,7 @@ export const AvatarCropper: FunctionComponent< cropperCanvasContext: null, }) - useLayoutEffect(() => { + useReady(() => { if (showAlipayCanvas2D) { const { canvasId } = canvasAll createSelectorQuery() @@ -150,7 +149,7 @@ export const AvatarCropper: FunctionComponent< }) .exec() } - }, [showAlipayCanvas2D, state.displayHeight, state.displayWidth]) + }) useEffect(() => { setCanvasAll({ diff --git a/src/packages/button/button.taro.tsx b/src/packages/button/button.taro.tsx index 8bb4286f94..13e2ed6083 100644 --- a/src/packages/button/button.taro.tsx +++ b/src/packages/button/button.taro.tsx @@ -1,7 +1,10 @@ import React, { CSSProperties, useCallback, useMemo } from 'react' import type { MouseEvent } from 'react' import classNames from 'classnames' -import { View } from '@tarojs/components' +import { + View, + // Button as TaroButton, +} from '@tarojs/components' import { Loading } from '@nutui/icons-react-taro' import { ComponentDefaults } from '@/utils/typings' import { harmony } from '@/utils/taro/platform' diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss index d284ce3c22..63db06585e 100644 --- a/src/packages/checkbox/checkbox.scss +++ b/src/packages/checkbox/checkbox.scss @@ -117,7 +117,7 @@ height: 12px; position: absolute; color: $white; - right: 0px; + right: 0; bottom: 0; transform: translate(-1px, -2px); } diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss index 0e3a5dc40e..ce1b9300d4 100644 --- a/src/packages/fixednav/fixednav.scss +++ b/src/packages/fixednav/fixednav.scss @@ -89,7 +89,7 @@ right: 0; .nut-fixednav-btn { right: 0; - border-radius: 45px 0 0 45px; + border-radius: 45px 0px 0px 45px; .nut-icon { margin-right: 5px; transform: rotate(0deg); @@ -98,7 +98,7 @@ .nut-fixednav-list { right: 0; transform: translateX(100%); - border-radius: 25px 0 0 25px; + border-radius: 25px 0px 0px 25px; padding: { left: 20px; right: 80px; @@ -121,7 +121,7 @@ .nut-fixednav-list { transform: translateX(-100%); left: 0; - border-radius: 0 25px 25px 0; + border-radius: 0px 25px 25px 0px; padding: { left: 80px; right: 20px; diff --git a/src/packages/lottie/lottiemp.taro.tsx b/src/packages/lottie/lottiemp.taro.tsx index 82790d79e8..3ea6ff1a87 100644 --- a/src/packages/lottie/lottiemp.taro.tsx +++ b/src/packages/lottie/lottiemp.taro.tsx @@ -1,5 +1,5 @@ -import React, { useImperativeHandle, useLayoutEffect, useRef } from 'react' -import { createSelectorQuery, getEnv, useUnload } from '@tarojs/taro' +import React, { useImperativeHandle, useRef } from 'react' +import { createSelectorQuery, getEnv, useReady, useUnload } from '@tarojs/taro' import lottie from '@nutui/lottie-miniprogram' import { getWindowInfo } from '@/utils/taro/get-system-info' import { useUuid } from '@/hooks/use-uuid' @@ -21,9 +21,16 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => { 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) - useLayoutEffect(() => { + useReady(() => { createSelectorQuery() .select(`#${id}`) .fields( @@ -57,14 +64,9 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => { context, }, }) - if (onComplete) { + onComplete && animation.current.addEventListener('complete', onComplete) - } - - if (animation.current) { - animation.current.setSpeed(Math.abs(speed)) - animation.current.setDirection(speed > 0 ? 1 : -1) - } + setSpeed() inited.current = true } catch (error) { console.error(error) @@ -72,7 +74,7 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => { } ) .exec() - }, [autoPlay, dpr, id, loop, onComplete, source, speed, style]) + }) useUnload(() => { onComplete && diff --git a/src/packages/overlay/overlay.tsx b/src/packages/overlay/overlay.tsx index 98667d689b..82ed8211fc 100644 --- a/src/packages/overlay/overlay.tsx +++ b/src/packages/overlay/overlay.tsx @@ -10,6 +10,7 @@ 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, @@ -37,12 +38,14 @@ 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) @@ -78,6 +81,9 @@ export const Overlay: FunctionComponent< style={styles} {...rest} onClick={handleClick} + {...(closeOnOverlayClick + ? { ariaLabel: ariaLabel || locale.mask } + : {})} > {children} diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx index 51c0f83b18..0a26fdb272 100644 --- a/src/packages/popover/popover.taro.tsx +++ b/src/packages/popover/popover.taro.tsx @@ -265,7 +265,7 @@ export const Popover: FunctionComponent< {showArrow && ( - + )} {Array.isArray(children) ? children[1] : null} diff --git a/src/packages/rate/rate.taro.tsx b/src/packages/rate/rate.taro.tsx index 000c68f296..e2f30008f5 100644 --- a/src/packages/rate/rate.taro.tsx +++ b/src/packages/rate/rate.taro.tsx @@ -1,14 +1,13 @@ 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' @@ -132,7 +131,7 @@ export const Rate: FunctionComponent> = (props) => { } } - const updateRects = useCallback(() => { + const updateRects = () => { for (let index = 0; index < refs.length; index++) { const item = refs[index] if (item) { @@ -141,11 +140,11 @@ export const Rate: FunctionComponent> = (props) => { }) } } - }, [refs]) + } - useLayoutEffect(() => { + useReady(() => { updateRects() - }, [updateRects]) + }) const handleTouchStart = (e: any) => { if (!touchable || readOnly || disabled) { diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss index 0aeb1201d3..089f6688ca 100644 --- a/src/packages/switch/switch.scss +++ b/src/packages/switch/switch.scss @@ -78,16 +78,16 @@ color: $switch-label-text-color; } &-open { - margin: 0 ($switch-height - $switch-border-width + 3px) 0 7px; + margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px; &-rtl { - margin: 0 7px 0 ($switch-height - $switch-border-width + 3px); + margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px); } } &-close { - margin: 0 7px 0 ($switch-height - $switch-border-width + 3px); + margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px); &-rtl { - margin: 0 ($switch-height - $switch-border-width + 3px) 0 7px; + margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px; } } From 0dcd2b4db1170b7e8626f119033952f3557eaf29 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 12 May 2026 17:01:01 +0800 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=E5=AD=97=E4=BD=93\=E8=A1=8C?= =?UTF-8?q?=E9=AB=98\icon=E7=BB=9F=E4=B8=80=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../avatarcropper/avatarcropper.taro.tsx | 1 - src/packages/calendarcard/calendarcard.scss | 2 +- src/packages/card/card.scss | 4 +- src/packages/checkbox/checkbox.scss | 8 +- .../hoverbuttonitem/hoverbuttonitem.scss | 2 +- src/packages/lottie/lottiemp.taro.tsx | 3 - src/packages/menu/menu.scss | 4 +- src/packages/navbar/navbar.scss | 2 +- .../numberkeyboard/numberkeyboard.scss | 4 +- src/packages/price/price.scss | 27 +++--- src/packages/quickenter/quickenter.scss | 6 +- src/packages/rate/rate.scss | 8 +- src/packages/searchbar/searchbar.scss | 10 +- src/packages/steps/steps.scss | 12 +-- src/packages/tabs/tabs.scss | 2 +- src/packages/tag/tag.scss | 4 +- src/packages/virtuallist/virtuallist.scss | 2 +- src/sites/assets/styles/highlight.scss | 2 +- src/styles/theme-dark.scss | 92 ++++++++----------- src/styles/theme-default.scss | 91 ++++++++---------- src/styles/variables.scss | 82 ++++++++++++++--- 21 files changed, 194 insertions(+), 174 deletions(-) diff --git a/src/packages/avatarcropper/avatarcropper.taro.tsx b/src/packages/avatarcropper/avatarcropper.taro.tsx index 7cf57ef785..ee184339f9 100644 --- a/src/packages/avatarcropper/avatarcropper.taro.tsx +++ b/src/packages/avatarcropper/avatarcropper.taro.tsx @@ -693,5 +693,4 @@ export const AvatarCropper: FunctionComponent< ) } - AvatarCropper.displayName = 'NutAvatarCropper' diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss index 9e548f9753..f0a9d6609d 100644 --- a/src/packages/calendarcard/calendarcard.scss +++ b/src/packages/calendarcard/calendarcard.scss @@ -3,6 +3,7 @@ border-radius: 12px; overflow: hidden; font-size: $calendar-base-font-size; + line-height: $line-height-l; line-height: $calendar-base-font-size; color: $color-title; @@ -19,7 +20,6 @@ flex-direction: row; cursor: pointer; margin: 16px; - line-height: 1; .left { margin-left: 8px; diff --git a/src/packages/card/card.scss b/src/packages/card/card.scss index a820623afe..630a101c51 100644 --- a/src/packages/card/card.scss +++ b/src/packages/card/card.scss @@ -27,7 +27,7 @@ &-title { @include moreline-ellipsis(); - line-height: 1.5; + line-height: $line-height-xl; font-size: $font-size-base; color: $color-title; } @@ -69,7 +69,7 @@ align-items: center; &-name { - line-height: 1.5; + line-height: $line-height-xl; color: $color-text; font-size: $font-size-s; padding-top: 4px; diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss index 63db06585e..93d3c5ab35 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-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; + border-top: $icon-size-10 solid transparent; + border-left: $icon-size-10 solid transparent; + border-bottom: $icon-size-10 solid $color-primary; + border-right: $icon-size-10 solid $color-primary; display: flex; align-items: flex-end; justify-content: flex-end; diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.scss b/src/packages/hoverbuttonitem/hoverbuttonitem.scss index 17c9fb1129..bb0c1dcdf9 100644 --- a/src/packages/hoverbuttonitem/hoverbuttonitem.scss +++ b/src/packages/hoverbuttonitem/hoverbuttonitem.scss @@ -44,7 +44,7 @@ display: block; width: 20px; height: 20px; - font-size: scale-font-px(20px); + font-size: $font-size-2xl; } } diff --git a/src/packages/lottie/lottiemp.taro.tsx b/src/packages/lottie/lottiemp.taro.tsx index 3ea6ff1a87..5dd321c581 100644 --- a/src/packages/lottie/lottiemp.taro.tsx +++ b/src/packages/lottie/lottiemp.taro.tsx @@ -20,14 +20,12 @@ 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(() => { @@ -75,7 +73,6 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => { ) .exec() }) - useUnload(() => { onComplete && animation.current && diff --git a/src/packages/menu/menu.scss b/src/packages/menu/menu.scss index aa24f24c6b..a4942885d3 100644 --- a/src/packages/menu/menu.scss +++ b/src/packages/menu/menu.scss @@ -42,8 +42,8 @@ } &-icon { - width: scale-icon-px(12px); - height: scale-icon-px(12px); + width: $icon-size-12; + height: $icon-size-12; flex-shrink: 0; transition: all 0.2s linear; } diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss index 66ee85787f..04bbd95fb3 100644 --- a/src/packages/navbar/navbar.scss +++ b/src/packages/navbar/navbar.scss @@ -73,7 +73,7 @@ .nutui-iconfont { width: 20px; height: 20px; - font-size: scale-font-px(20px); + font-size: $font-size-2xl; } /* #endif */ diff --git a/src/packages/numberkeyboard/numberkeyboard.scss b/src/packages/numberkeyboard/numberkeyboard.scss index 244659510e..8b75327c38 100644 --- a/src/packages/numberkeyboard/numberkeyboard.scss +++ b/src/packages/numberkeyboard/numberkeyboard.scss @@ -2,8 +2,8 @@ .nut-numberkeyboard { &-close-icon { - width: scale-icon-px(18px); - height: scale-icon-px(18px); + width: $icon-size-18; + height: $icon-size-18; } width: 100%; diff --git a/src/packages/price/price.scss b/src/packages/price/price.scss index d68d30eb56..5535cd8711 100644 --- a/src/packages/price/price.scss +++ b/src/packages/price/price.scss @@ -1,6 +1,7 @@ .nut-price { direction: ltr; font-size: $font-size-l; + line-height: $price-root-line-height; display: flex; flex-direction: row; align-items: baseline; @@ -17,7 +18,6 @@ &-symbol, &-integer, &-decimal { - font-family: 'JDZH-Bold'; color: $price-darkgray-color; } } @@ -28,7 +28,6 @@ &-symbol, &-integer, &-decimal { - font-family: 'JDZH-Bold'; color: $price-primary-color; } } @@ -38,22 +37,22 @@ padding-right: $price-symbol-padding-right; &-xlarge { font-size: $price-symbol-xlarge-size; - line-height: $price-symbol-xlarge-size; + line-height: $price-minor-line-height; } &-large { font-size: $price-symbol-large-size; - line-height: $price-symbol-large-size; + line-height: $price-minor-line-height; } &-normal { font-size: $price-symbol-normal-size; - line-height: $price-symbol-normal-size; + line-height: $price-minor-line-height; } &-small { font-size: $price-symbol-small-size; - line-height: $price-symbol-small-size; + line-height: $price-minor-line-height; } &-rtl { @@ -65,44 +64,44 @@ &-integer { &-xlarge { font-size: $price-integer-xlarge-size; - line-height: $price-integer-xlarge-size; + line-height: $price-integer-xlarge-line-height; } &-large { font-size: $price-integer-large-size; - line-height: $price-integer-large-size; + line-height: $price-integer-large-line-height; } &-normal { font-size: $price-integer-normal-size; - line-height: $price-integer-normal-size; + line-height: $price-integer-normal-line-height; } &-small { font-size: $price-integer-small-size; - line-height: $price-integer-small-size; + line-height: $price-integer-small-line-height; } } &-decimal { &-xlarge { font-size: $price-decimal-xlarge-size; - line-height: $price-decimal-xlarge-size; + line-height: $price-minor-line-height; } &-large { font-size: $price-decimal-large-size; - line-height: $price-decimal-large-size; + line-height: $price-minor-line-height; } &-normal { font-size: $price-decimal-normal-size; - line-height: $price-decimal-normal-size; + line-height: $price-minor-line-height; } &-small { font-size: $price-decimal-small-size; - line-height: $price-decimal-small-size; + line-height: $price-minor-line-height; } } diff --git a/src/packages/quickenter/quickenter.scss b/src/packages/quickenter/quickenter.scss index aacdbcdd7c..66983ef493 100644 --- a/src/packages/quickenter/quickenter.scss +++ b/src/packages/quickenter/quickenter.scss @@ -101,8 +101,8 @@ svg, .nut-icon { - width: scale-icon-px(22px); - height: scale-icon-px(22px); + width: $icon-size-22; + height: $icon-size-22; } } @@ -110,7 +110,7 @@ font-size: $quickenter-item-title-font-size; color: $quickenter-item-title-color; text-align: center; - line-height: scale-font-px(16px); + line-height: $line-height-md; // Allow multi-line if text is long, preventing truncation white-space: normal; word-wrap: break-word; diff --git a/src/packages/rate/rate.scss b/src/packages/rate/rate.scss index 756646adc9..3280f895cc 100644 --- a/src/packages/rate/rate.scss +++ b/src/packages/rate/rate.scss @@ -114,14 +114,14 @@ } &-large { - font-size: calc($rate-font-size + scale-font-px(6px)); - line-height: calc($rate-font-size + scale-font-px(6px)); + font-size: $rate-font-size-large; + line-height: $rate-font-size-large; 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)); + font-size: $rate-font-size-small; + line-height: $rate-font-size-small; padding-left: calc($rate-item-margin / 2); } diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss index 1fdc25bbd6..a3b8482372 100644 --- a/src/packages/searchbar/searchbar.scss +++ b/src/packages/searchbar/searchbar.scss @@ -74,8 +74,8 @@ &.nut-searchbar-icon { position: relative; .nut-icon { - width: scale-icon-px(12px); - height: scale-icon-px(12px); + width: $icon-size-12; + height: $icon-size-12; color: var(--nutui-black-5); margin-right: $searchbar-inner-gap; } @@ -111,9 +111,9 @@ } .nut-icon { - width: scale-icon-px(6px); - height: scale-icon-px(6px); - font-size: scale-font-px(6px); + width: $icon-size-6; + height: $icon-size-6; + font-size: $icon-size-6; color: #c2c4cc; margin-left: 4px; } diff --git a/src/packages/steps/steps.scss b/src/packages/steps/steps.scss index 4dea2eb1e2..c5ec372adc 100644 --- a/src/packages/steps/steps.scss +++ b/src/packages/steps/steps.scss @@ -13,8 +13,8 @@ &-icon { .nut-icon { - height: scale-icon-px(10px); - width: scale-icon-px(10px); + height: $icon-size-10; + width: $icon-size-10; } .nut-image { @@ -146,8 +146,8 @@ width: $steps-double-head-icon-size; .nut-icon { - height: scale-icon-px(12px); - width: scale-icon-px(12px); + height: $icon-size-12; + width: $icon-size-12; } } @@ -229,8 +229,8 @@ height: $steps-vertical-head-icon-size; .nut-icon { - height: scale-icon-px(12px); - width: scale-icon-px(12px); + height: $icon-size-12; + width: $icon-size-12; } } } diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss index 9aa1bd101a..f6bc579c90 100644 --- a/src/packages/tabs/tabs.scss +++ b/src/packages/tabs/tabs.scss @@ -93,7 +93,7 @@ .nut-icon { position: absolute; - font-size: scale-font-px(20px); + font-size: $font-size-2xl; width: 100%; height: 100%; } diff --git a/src/packages/tag/tag.scss b/src/packages/tag/tag.scss index 1aed907217..3b23ef41f8 100644 --- a/src/packages/tag/tag.scss +++ b/src/packages/tag/tag.scss @@ -81,8 +81,8 @@ } &-close-icon { - width: scale-icon-px(8px); - height: scale-icon-px(8px); + width: $icon-size-8; + height: $icon-size-8; } } diff --git a/src/packages/virtuallist/virtuallist.scss b/src/packages/virtuallist/virtuallist.scss index 366747e30e..857f7829ca 100644 --- a/src/packages/virtuallist/virtuallist.scss +++ b/src/packages/virtuallist/virtuallist.scss @@ -27,7 +27,7 @@ box-shadow: 0 1px 6px 0 rgba(237, 238, 241, 1); margin-top: 20px; padding: 14px 15px; - font-size: scale-font-px(13px); + font-size: $font-size-m; line-height: 18px; font-family: PingFangSC; font-weight: 500; diff --git a/src/sites/assets/styles/highlight.scss b/src/sites/assets/styles/highlight.scss index 11df75e2fd..e558825a1b 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: scale-font-px(13px); + font-size: 13px; font-family: $nutui-doc-code-font-family; line-height: 1.8; white-space: pre-wrap; diff --git a/src/styles/theme-dark.scss b/src/styles/theme-dark.scss index fa1191768d..f756fe4a62 100644 --- a/src/styles/theme-dark.scss +++ b/src/styles/theme-dark.scss @@ -228,59 +228,25 @@ page { --nutui-color-border-disabled: var(--nutui-color-content-gray-1); // 字体 ok - --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)) - ); + --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; // 字号语义化 // 徽标文字 @@ -291,12 +257,18 @@ page { --nutui-font-size-xs: var(--nutui-font-size-11); // 汉字：次要内容、辅助类信息 数字：羊角符号、小数点及角分 --nutui-font-size-s: var(--nutui-font-size-12); + --nutui-font-size-m: var(--nutui-font-size-13); // 标准内容、名称类关键信息 --nutui-font-size-base: var(--nutui-font-size-14); // 汉字：楼层标题、卡片标题 数字：重复型价格，如搜推商卡 --nutui-font-size-l: var(--nutui-font-size-16); + // 16px 字阶（与 l 同档数值，供 --nutui-font-size-md 语义） + --nutui-font-size-md: var(--nutui-font-size-16); + --nutui-font-size-icon: var(--nutui-font-size-16); // 汉字：页面标题、页面级最重要内容 数字：模块级主价格，如购物车、结算、底导 --nutui-font-size-xl: var(--nutui-font-size-18); + // xl(18) 与 xxl(24) 之间（20px） + --nutui-font-size-2xl: var(--nutui-font-size-20); // 数字：页面级主价格，如商详、收银台 --nutui-font-size-xxl: var(--nutui-font-size-24); // zanwu @@ -311,7 +283,19 @@ page { --nutui-font-weight-bold: 600; // 行高 - --nutui-line-height-base: 1.5; + --nutui-line-height-xxxs: var(--nutui-font-size-xxxs); + --nutui-line-height-xxs: var(--nutui-font-size-xxs); + --nutui-line-height-xs: var(--nutui-font-size-xs); + --nutui-line-height-s: var(--nutui-font-size-s); + --nutui-line-height-m: var(--nutui-font-size-m); + --nutui-line-height-base: var(--nutui-font-size-base); + --nutui-line-height-l: var(--nutui-font-size-l); + --nutui-line-height-md: var(--nutui-font-size-md); + --nutui-line-height-icon: var(--nutui-font-size-icon); + --nutui-line-height-xl: var(--nutui-font-size-xl); + --nutui-line-height-2xl: var(--nutui-font-size-2xl); + --nutui-line-height-xxl: var(--nutui-font-size-xxl); + --nutui-line-height-xxxl: var(--nutui-font-size-xxxl); // 对齐方式 --nutui-text-align: left; diff --git a/src/styles/theme-default.scss b/src/styles/theme-default.scss index 831650b859..8a6e02923c 100644 --- a/src/styles/theme-default.scss +++ b/src/styles/theme-default.scss @@ -227,59 +227,25 @@ page { --nutui-color-border-disabled: var(--nutui-color-content-gray-1); // 字体 ok - --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)) - ); + --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; // 字号语义化 // 徽标文字 @@ -290,13 +256,18 @@ page { --nutui-font-size-xs: var(--nutui-font-size-11); // 汉字：次要内容、辅助类信息 数字：羊角符号、小数点及角分 --nutui-font-size-s: var(--nutui-font-size-12); + --nutui-font-size-m: var(--nutui-font-size-13); // 标准内容、名称类关键信息 --nutui-font-size-base: var(--nutui-font-size-14); // 汉字：楼层标题、卡片标题 数字：重复型价格，如搜推商卡 --nutui-font-size-l: var(--nutui-font-size-15); + // l(15) 与 xl(18) 之间，价格整数 normal 等（16px，字阶缩放） + --nutui-font-size-md: var(--nutui-font-size-16); --nutui-font-size-icon: var(--nutui-font-size-16); // 汉字：页面标题、页面级最重要内容 数字：模块级主价格，如购物车、结算、底导 --nutui-font-size-xl: var(--nutui-font-size-18); + // xl(18) 与 xxl(24) 之间（20px） + --nutui-font-size-2xl: var(--nutui-font-size-20); // 数字：页面级主价格，如商详、收银台 --nutui-font-size-xxl: var(--nutui-font-size-24); // zanwu @@ -313,7 +284,19 @@ page { --nutui-font-weight-bold: 600; // 行高 - --nutui-line-height-base: 1.5; + --nutui-line-height-xxxs: var(--nutui-font-size-xxxs); + --nutui-line-height-xxs: var(--nutui-font-size-xxs); + --nutui-line-height-xs: var(--nutui-font-size-xs); + --nutui-line-height-s: var(--nutui-font-size-s); + --nutui-line-height-m: var(--nutui-font-size-m); + --nutui-line-height-base: var(--nutui-font-size-base); + --nutui-line-height-l: var(--nutui-font-size-l); + --nutui-line-height-md: var(--nutui-font-size-md); + --nutui-line-height-icon: var(--nutui-font-size-icon); + --nutui-line-height-xl: var(--nutui-font-size-xl); + --nutui-line-height-2xl: var(--nutui-font-size-2xl); + --nutui-line-height-xxl: var(--nutui-font-size-xxl); + --nutui-line-height-xxxl: var(--nutui-font-size-xxxl); // 对齐方式 --nutui-text-align: left; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index d58edb529a..6ed9840ebf 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -176,23 +176,39 @@ $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-m: var(--nutui-font-size-m, scale-font-px(13px)) !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-md: var(--nutui-font-size-md, scale-font-px(16px)) !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-2xl: var(--nutui-font-size-2xl, scale-font-px(20px)) !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; +// 行高（与各字号 token 一一对应，与同档字号等值） +$line-height-xxxs: var(--nutui-line-height-xxxs, $font-size-xxxs) !default; +$line-height-xxs: var(--nutui-line-height-xxs, $font-size-xxs) !default; +$line-height-xs: var(--nutui-line-height-xs, $font-size-xs) !default; +$line-height-s: var(--nutui-line-height-s, $font-size-s) !default; +$line-height-m: var(--nutui-line-height-m, $font-size-m) !default; +$line-height-base: var(--nutui-line-height-base, $font-size-base) !default; +$line-height-l: var(--nutui-line-height-l, $font-size-l) !default; +$line-height-md: var(--nutui-line-height-md, $font-size-md) !default; +$line-height-icon: var(--nutui-line-height-icon, $font-size-icon) !default; +$line-height-xl: var(--nutui-line-height-xl, $font-size-xl) !default; +$line-height-2xl: var(--nutui-line-height-2xl, $font-size-2xl) !default; +$line-height-xxl: var(--nutui-line-height-xxl, $font-size-xxl) !default; +$line-height-xxxl: var(--nutui-line-height-xxxl, $font-size-xxxl) !default; +$line-height-xxxxl: var(--nutui-line-height-xxxxl, $font-size-xxxxl) !default; + // 字重 ok $font-weight-light: var(--nutui-font-weight-light, 300) !default; $font-weight: var(--nutui-font-weight, 400) !default; $font-weight-medium: var(--nutui-font-weight-medium, 500) !default; $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, scale-px(2px)) !default; $spacing-xxs: var(--nutui-spacing-xxs, scale-px(4px)) !default; @@ -552,9 +568,17 @@ $divider-vertical-margin: var( // icon（✅） -$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; +$icon-size-6: var(--nutui-icon-size-6, scale-icon-px(6px)) !default; +$icon-size-8: var(--nutui-icon-size-8, scale-icon-px(8px)) !default; +$icon-size-10: var(--nutui-icon-size-10, scale-icon-px(10px)) !default; +$icon-size-12: var(--nutui-icon-size-12, scale-icon-px(12px)) !default; +$icon-size-18: var(--nutui-icon-size-18, scale-icon-px(18px)) !default; +$icon-size-20: var(--nutui-icon-size-20, scale-icon-px(20px)) !default; +$icon-size-22: var(--nutui-icon-size-22, scale-icon-px(22px)) !default; + +$icon-height: var(--nutui-icon-height, $icon-size-20) !default; +$icon-width: var(--nutui-icon-width, $icon-size-20) !default; +$icon-line-height: var(--nutui-icon-line-height, $icon-size-20) !default; // uploader（✅） $uploader-image-width: var( @@ -965,7 +989,7 @@ $price-symbol-normal-size: var( ) !default; $price-integer-normal-size: var( --nutui-price-integer-normal-size, - scale-font-px(16px) + $font-size-md ) !default; $price-decimal-normal-size: var( --nutui-price-decimal-normal-size, @@ -986,6 +1010,32 @@ $price-decimal-small-size: var( $font-size-s ) !default; +// price 行高 +$price-root-line-height: var( + --nutui-price-root-line-height, + $line-height-l +) !default; +$price-minor-line-height: var( + --nutui-price-minor-line-height, + $line-height-s +) !default; +$price-integer-xlarge-line-height: var( + --nutui-price-integer-xlarge-line-height, + $line-height-xxl +) !default; +$price-integer-large-line-height: var( + --nutui-price-integer-large-line-height, + $line-height-xl +) !default; +$price-integer-normal-line-height: var( + --nutui-price-integer-normal-line-height, + $line-height-md +) !default; +$price-integer-small-line-height: var( + --nutui-price-integer-small-line-height, + $line-height-s +) !default; + //avatar（✅） $avatar-square: var(--nutui-avatar-square, scale-px(5px)) !default; $avatar-large-width: var(--nutui-avatar-large-width, scale-px(60px)) !default; @@ -1062,7 +1112,7 @@ $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-font-px(16px) + $font-size-md ) !default; $toast-text-font-size: var( --nutui-toast-text-font-size, @@ -1273,6 +1323,14 @@ $rate-icon-inactive-color: var( $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, $font-size-s) !default; +$rate-font-size-large: var( + --nutui-rate-font-size-large, + calc($rate-font-size + scale-font-px(6px)) +) !default; +$rate-font-size-small: var( + --nutui-rate-font-size-small, + calc($rate-font-size - scale-font-px(2px)) +) !default; // tabbar（✅） $tabbar-height: var(--nutui-tabbar-height, scale-px(46px)) !default; @@ -1384,7 +1442,7 @@ $steps-base-head-color: var( ) !default; $steps-base-head-dot-size: var( --nutui-steps-base-head-dot-size, - scale-icon-px(6px) + $icon-size-6 ) !default; $steps-base-head-dot-background-color: var( --nutui-steps-base-head-dot-background-color, @@ -1392,7 +1450,7 @@ $steps-base-head-dot-background-color: var( ) !default; $steps-base-head-icon-size: var( --nutui-steps-base-head-icon-size, - scale-font-px(16px) + $font-size-md ) !default; $steps-double-head-icon-size: var( --nutui-steps-base-head-icon-size-right, @@ -2740,7 +2798,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-font-px(16px) + $font-size-md ) !default; $addresslist-mask-bg: var( --nutui-addresslist-mask-bg, @@ -2939,7 +2997,7 @@ $quickenter-item-icon-color: var( ) !default; $quickenter-close-icon-size: var( --nutui-quickenter-close-icon-size, - scale-icon-px(12px) + $icon-size-12 ) !default; $quickenter-close-icon-color: var( --nutui-quickenter-close-icon-color, From e606a0bf975f148b48e7cea298bc4d81dd21dc58 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 12 May 2026 17:48:54 +0800 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=E7=BB=84=E4=BB=B6=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E5=B0=BA=E5=AF=B8=E6=B2=BB=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../skills/nutui-proportional-scaling/SKILL.md | 8 ++++++++ src/packages/calendarcard/calendarcard.scss | 3 +-- src/packages/card/card.scss | 2 +- src/packages/inputnumber/inputnumber.taro.tsx | 2 -- src/packages/menuitem/menuitem.taro.tsx | 1 - src/packages/noticebar/noticebar.scss | 5 +++++ src/packages/noticebar/noticebar.taro.tsx | 6 ++++-- src/packages/noticebar/noticebar.tsx | 11 ++++++++--- src/packages/notify/notify.scss | 5 +++++ src/packages/notify/notify.taro.tsx | 5 ++++- src/packages/numberkeyboard/numberkeyboard.scss | 5 +++++ src/packages/numberkeyboard/numberkeyboard.tsx | 2 +- src/packages/rate/rate.scss | 6 +++--- src/packages/segmented/segmented.scss | 2 +- src/packages/shortpassword/shortpassword.scss | 17 +++++++++++------ .../shortpassword/shortpassword.taro.tsx | 2 +- src/packages/shortpassword/shortpassword.tsx | 2 +- src/packages/tabs/tabs.scss | 5 +++++ src/packages/tabs/tabs.taro.tsx | 5 ++++- src/packages/tabs/tabs.tsx | 5 ++++- src/styles/variables.scss | 2 ++ 21 files changed, 74 insertions(+), 27 deletions(-) diff --git a/.cursor/skills/nutui-proportional-scaling/SKILL.md b/.cursor/skills/nutui-proportional-scaling/SKILL.md index a38cdedd6a..4c2fcc482d 100644 --- a/.cursor/skills/nutui-proportional-scaling/SKILL.md +++ b/.cursor/skills/nutui-proportional-scaling/SKILL.md @@ -79,6 +79,13 @@ description: >- - 图标占位：**`scale-icon-px`** 或已有 `--nut-icon-*`。 - 保持与 **无障碍/大屏** 相关提交协同：同一文件改尺度时，勿回退 `dialog` 等对大字兼容的改动。 +### 3.5 组件 `.tsx` 图标尺寸治理（props → class → 变量） + +- 对 `@nutui/icons-react` / `@nutui/icons-react-taro`：尽量避免在组件上写死 `size={12}`、`width={16}`、`height={16}`。 +- **推荐模式**：在 `.tsx` 里只加语义化 `className`，到对应 `.scss` 里用变量控制尺寸（优先 `$icon-size-*` 阶梯，或组件专用变量）。 +- 若是内联 ``（非 NutUI 图标组件）也遵循同一规则：移除 `width/height` 字面量，改为 class，并在 SCSS 用变量（可新增如 `$xxx-icon-size`，默认 `scale-icon-px(Npx)`）。 +- 新增尺寸档优先沉淀到 `variables.scss`（如 `$icon-size-11`、`$icon-size-16`），避免同一像素值在多个组件重复散落。 + ### 3.4 `calc()`、Sass 变量与 `#{}`（与 `variables.scss` / 主题 token 一致） - **推荐**：在 `calc()` 里直接写 Sass 变量，如 **`calc($steps-vertical-head-icon-size + 1px)`**、**`calc($rate-item-margin / 2)`**，而不是 **`calc(#{$steps-vertical-head-icon-size} + 1px)`**。`#{}` 只在需要把值**硬插成无引号 CSS 片段**、或要避免 Sass 对单位做提前合并时再考虑；普通设计 token 用 **`$var` 作为 `calc` 的操作数**即可。 @@ -104,6 +111,7 @@ description: >- - [ ] 字体/图标是否应走 **`scale-font-px` / `scale-icon-px`** 而非误用 `scale-px`。 - [ ] 含 **`$token` 与裸 `px` 的混合运算**：若 token 会变成 **`var(--nutui-*)`**，是否已用 **`calc($a - $b + Npx)`**，而不是 **`($a - $b + Npx)`** 写在 `margin` / `width` 等非纯编译期长度位置。 - [ ] `calc()` 内对设计 token 是否优先 **`calc($var + 1px)`**，避免无必要的 **`#{}`**。 +- [ ] 组件 `.tsx` 是否仍有写死图标尺寸（`size/width/height`）；如有，是否已改为 **class + SCSS 变量**（内联 `svg` 同理）。 - [ ] TS 侧改 `scale-f*` 已同步考虑 **Taro** 文件。 - [ ] 修改 `formatScaleValue` / 断点时，已通读 **视口与平板常量** 是否仍与文档、设计一致。 diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss index f0a9d6609d..ccd2667370 100644 --- a/src/packages/calendarcard/calendarcard.scss +++ b/src/packages/calendarcard/calendarcard.scss @@ -3,8 +3,6 @@ border-radius: 12px; overflow: hidden; font-size: $calendar-base-font-size; - line-height: $line-height-l; - line-height: $calendar-base-font-size; color: $color-title; &-header { @@ -13,6 +11,7 @@ align-items: center; justify-content: space-between; font-weight: normal; + line-height: $line-height-l; &-left, &-right { diff --git a/src/packages/card/card.scss b/src/packages/card/card.scss index 630a101c51..a940cbb596 100644 --- a/src/packages/card/card.scss +++ b/src/packages/card/card.scss @@ -27,7 +27,7 @@ &-title { @include moreline-ellipsis(); - line-height: $line-height-xl; + line-height: $line-height-2xl; font-size: $font-size-base; color: $color-title; } diff --git a/src/packages/inputnumber/inputnumber.taro.tsx b/src/packages/inputnumber/inputnumber.taro.tsx index 1a8ada7528..eb4769fb72 100644 --- a/src/packages/inputnumber/inputnumber.taro.tsx +++ b/src/packages/inputnumber/inputnumber.taro.tsx @@ -184,7 +184,6 @@ export const InputNumber: FunctionComponent< , ref) => { ) : ( )} diff --git a/src/packages/noticebar/noticebar.scss b/src/packages/noticebar/noticebar.scss index 4c98dc203b..ca406526d2 100644 --- a/src/packages/noticebar/noticebar.scss +++ b/src/packages/noticebar/noticebar.scss @@ -74,6 +74,11 @@ } } + &-right-icon-default { + width: $icon-size-12; + height: $icon-size-12; + } + &-wrap { display: flex; flex: 1; diff --git a/src/packages/noticebar/noticebar.taro.tsx b/src/packages/noticebar/noticebar.taro.tsx index 93f479a1ae..ac9acb7d87 100644 --- a/src/packages/noticebar/noticebar.taro.tsx +++ b/src/packages/noticebar/noticebar.taro.tsx @@ -26,7 +26,7 @@ const defaultProps = { content: '', closeable: false, wrap: false, - leftIcon: , + leftIcon: , rightIcon: null, right: null, delay: 1, @@ -490,7 +490,9 @@ export const NoticeBar: FunctionComponent< className="nut-noticebar-box-right-icon" onClick={handleClickIcon} > - {rightIcon || } + {rightIcon || ( + + )} ) : null} diff --git a/src/packages/noticebar/noticebar.tsx b/src/packages/noticebar/noticebar.tsx index a371e56538..ccf99c42c5 100644 --- a/src/packages/noticebar/noticebar.tsx +++ b/src/packages/noticebar/noticebar.tsx @@ -24,7 +24,7 @@ const defaultProps = { content: '', closeable: false, wrap: false, - leftIcon: , + leftIcon: , rightIcon: null, right: null, delay: 1, @@ -475,7 +475,9 @@ export const NoticeBar: FunctionComponent< ) : null} {closeable || rightIcon ? (
- {rightIcon || } + {rightIcon || ( + + )}
) : null} @@ -534,7 +536,10 @@ export const NoticeBar: FunctionComponent< handleClickIcon(e) }} > - {rightIcon || (closeable ? : null)} + {rightIcon || + (closeable ? ( + + ) : null)} ) : null} diff --git a/src/packages/notify/notify.scss b/src/packages/notify/notify.scss index 9c7bf6e5a4..56937a7dd3 100644 --- a/src/packages/notify/notify.scss +++ b/src/packages/notify/notify.scss @@ -98,4 +98,9 @@ width: 12px; } } + + &-close-icon { + height: $icon-size-12; + width: $icon-size-12; + } } diff --git a/src/packages/notify/notify.taro.tsx b/src/packages/notify/notify.taro.tsx index 4b1e62df97..33ab4eed87 100644 --- a/src/packages/notify/notify.taro.tsx +++ b/src/packages/notify/notify.taro.tsx @@ -142,7 +142,10 @@ export const Notify: FunctionComponent> & { className={`${classPrefix}-right-icon`} onClick={handleClickIcon} > - {rightIcon || (closeable ? : null)} + {rightIcon || + (closeable ? ( + + ) : null)} ) : null} diff --git a/src/packages/numberkeyboard/numberkeyboard.scss b/src/packages/numberkeyboard/numberkeyboard.scss index 8b75327c38..089c1085ad 100644 --- a/src/packages/numberkeyboard/numberkeyboard.scss +++ b/src/packages/numberkeyboard/numberkeyboard.scss @@ -6,6 +6,11 @@ height: $icon-size-18; } + &-delete-icon { + width: 28px; + height: 28px; + } + width: 100%; padding: $numberkeyboard-padding; user-select: none; diff --git a/src/packages/numberkeyboard/numberkeyboard.tsx b/src/packages/numberkeyboard/numberkeyboard.tsx index 8cc8ac73bd..7c6969967e 100644 --- a/src/packages/numberkeyboard/numberkeyboard.tsx +++ b/src/packages/numberkeyboard/numberkeyboard.tsx @@ -71,7 +71,7 @@ export const NumberKeyboard: FunctionComponent< const DeleteIcon = () => { return ( - + {tips || ( <> - + {locale.shortpassword.tips} )} diff --git a/src/packages/shortpassword/shortpassword.tsx b/src/packages/shortpassword/shortpassword.tsx index 4e7cc02da5..0873a87ace 100644 --- a/src/packages/shortpassword/shortpassword.tsx +++ b/src/packages/shortpassword/shortpassword.tsx @@ -141,7 +141,7 @@ export const InternalShortPassword: ForwardRefRenderFunction<
{tips || ( <> - + {locale.shortpassword.tips} )} diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss index f6bc579c90..a98beb4e36 100644 --- a/src/packages/tabs/tabs.scss +++ b/src/packages/tabs/tabs.scss @@ -99,6 +99,11 @@ } } + &-smile-icon { + width: 40px; + height: 20px; + } + &-active { .nut-icon { color: $tabs-titles-item-active-color; diff --git a/src/packages/tabs/tabs.taro.tsx b/src/packages/tabs/tabs.taro.tsx index d5edb93b94..f30e38754d 100644 --- a/src/packages/tabs/tabs.taro.tsx +++ b/src/packages/tabs/tabs.taro.tsx @@ -282,7 +282,10 @@ export const Tabs: FunctionComponent> & { // @ts-ignore ariaHidden > - + )} > & { className={`${classPrefix}-titles-item-smile`} aria-hidden="true" > - +
)}
Date: Tue, 12 May 2026 20:09:50 +0800 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=E8=A7=A3=E5=86=B3build=E9=AA=8C?= =?UTF-8?q?=E8=AF=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/configprovider/types.ts | 35 ++++++++++++- src/styles/variables-daojia.scss | 20 +++++++- src/styles/variables-jmapp.scss | 77 ++++++++++++++++++++++++++-- src/styles/variables-jrkf.scss | 77 ++++++++++++++++++++++++++-- 4 files changed, 198 insertions(+), 11 deletions(-) diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts index 3abbf27a8a..8709501775 100644 --- a/src/packages/configprovider/types.ts +++ b/src/packages/configprovider/types.ts @@ -54,18 +54,34 @@ export type NutCSSVariables = | 'nutuiFontSizeXxs' | 'nutuiFontSizeXs' | 'nutuiFontSizeS' + | 'nutuiFontSizeM' | 'nutuiFontSizeBase' | 'nutuiFontSizeL' + | 'nutuiFontSizeMd' | 'nutuiFontSizeIcon' | 'nutuiFontSizeXl' + | 'nutuiFontSize2Xl' | 'nutuiFontSizeXxl' | 'nutuiFontSize10' | 'nutuiFontSize11' + | 'nutuiLineHeightXxxs' + | 'nutuiLineHeightXxs' + | 'nutuiLineHeightXs' + | 'nutuiLineHeightS' + | 'nutuiLineHeightM' + | 'nutuiLineHeightBase' + | 'nutuiLineHeightL' + | 'nutuiLineHeightMd' + | 'nutuiLineHeightIcon' + | 'nutuiLineHeightXl' + | 'nutuiLineHeight2Xl' + | 'nutuiLineHeightXxl' + | 'nutuiLineHeightXxxl' + | 'nutuiLineHeightXxxxl' | 'nutuiFontWeightLight' | 'nutuiFontWeight' | 'nutuiFontWeightMedium' | 'nutuiFontWeightBold' - | 'nutuiLineHeightBase' | 'nutuiSpacingXxxs' | 'nutuiSpacingXxs' | 'nutuiSpacingXs' @@ -166,6 +182,15 @@ export type NutCSSVariables = | 'nutuiDividerSideWidth' | 'nutuiDividerVerticalHeight' | 'nutuiDividerVerticalMargin' + | 'nutuiIconSize6' + | 'nutuiIconSize8' + | 'nutuiIconSize10' + | 'nutuiIconSize11' + | 'nutuiIconSize12' + | 'nutuiIconSize16' + | 'nutuiIconSize18' + | 'nutuiIconSize20' + | 'nutuiIconSize22' | 'nutuiIconHeight' | 'nutuiIconWidth' | 'nutuiIconLineHeight' @@ -287,6 +312,12 @@ export type NutCSSVariables = | 'nutuiPriceSymbolSmallSize' | 'nutuiPriceIntegerSmallSize' | 'nutuiPriceDecimalSmallSize' + | 'nutuiPriceRootLineHeight' + | 'nutuiPriceMinorLineHeight' + | 'nutuiPriceIntegerXlargeLineHeight' + | 'nutuiPriceIntegerLargeLineHeight' + | 'nutuiPriceIntegerNormalLineHeight' + | 'nutuiPriceIntegerSmallLineHeight' | 'nutuiAvatarSquare' | 'nutuiAvatarLargeWidth' | 'nutuiAvatarLargeHeight' @@ -378,6 +409,8 @@ export type NutCSSVariables = | 'nutuiRateIconSize' | 'nutuiRateFontColor' | 'nutuiRateFontSize' + | 'nutuiRateFontSizeLarge' + | 'nutuiRateFontSizeSmall' | 'nutuiTabbarHeight' | 'nutuiTabbarActiveColor' | 'nutuiTabbarInactiveColor' diff --git a/src/styles/variables-daojia.scss b/src/styles/variables-daojia.scss index 9a9e62e432..8417bccaca 100644 --- a/src/styles/variables-daojia.scss +++ b/src/styles/variables-daojia.scss @@ -151,10 +151,13 @@ $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-m: var(--nutui-font-size-m, 13px) !default; $font-size-base: var(--nutui-font-size-base, 14px) !default; $font-size-l: var(--nutui-font-size-l, 15px) !default; +$font-size-md: var(--nutui-font-size-md, 16px) !default; $font-size-icon: var(--nutui-font-size-icon, 16px) !default; $font-size-xl: var(--nutui-font-size-xl, 18px) !default; +$font-size-2xl: var(--nutui-font-size-2xl, 20px) !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; @@ -165,8 +168,21 @@ $font-weight: var(--nutui-font-weight, 400) !default; $font-weight-medium: var(--nutui-font-weight-medium, 500) !default; $font-weight-bold: var(--nutui-font-weight-bold, 600) !default; -// 行高 -$line-height-base: var(--nutui-line-height-base, 1.5) !default; +// 行高（与同档字号等值；不经 scale） +$line-height-xxxs: var(--nutui-line-height-xxxs, $font-size-xxxs) !default; +$line-height-xxs: var(--nutui-line-height-xxs, $font-size-xxs) !default; +$line-height-xs: var(--nutui-line-height-xs, $font-size-xs) !default; +$line-height-s: var(--nutui-line-height-s, $font-size-s) !default; +$line-height-m: var(--nutui-line-height-m, $font-size-m) !default; +$line-height-base: var(--nutui-line-height-base, $font-size-base) !default; +$line-height-l: var(--nutui-line-height-l, $font-size-l) !default; +$line-height-md: var(--nutui-line-height-md, $font-size-md) !default; +$line-height-icon: var(--nutui-line-height-icon, $font-size-icon) !default; +$line-height-xl: var(--nutui-line-height-xl, $font-size-xl) !default; +$line-height-2xl: var(--nutui-line-height-2xl, $font-size-2xl) !default; +$line-height-xxl: var(--nutui-line-height-xxl, $font-size-xxl) !default; +$line-height-xxxl: var(--nutui-line-height-xxxl, $font-size-xxxl) !default; +$line-height-xxxxl: var(--nutui-line-height-xxxxl, $font-size-xxxxl) !default; // 间距 space $spacing-xxxs: var(--nutui-spacing-xxxs, 2px) !default; diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss index cc8e386609..771ad1c2af 100644 --- a/src/styles/variables-jmapp.scss +++ b/src/styles/variables-jmapp.scss @@ -106,9 +106,6 @@ $font-weight: var(--nutui-font-weight); $font-weight-medium: var(--nutui-font-weight-medium, 500) !default; $font-weight-bold: var(--nutui-font-weight-bold); -// 行高 -$line-height-base: var(--nutui-line-height) !default; - // 圆角 corners $radius-xxs: var( --nutui-radius-xxs @@ -169,16 +166,54 @@ $font-family: SimSun, sans-serif !default; -// Font +// Font（token 与 variables.scss 对齐；回落为 px / 设计 token，不经 scale 函数） $font-size-xxxs: var(--nutui-font-size-xxxs, 9px) !default; $font-size-xxs: $font-text-mini !default; $font-size-xs: $font-text-xs !default; $font-size-s: $font-text-small !default; +$font-size-m: var(--nutui-font-size-m, $font-text-small) !default; $font-size-base: $font-text !default; $font-size-l: $font-text-large !default; +$font-size-md: var(--nutui-font-size-md, 16px) !default; +$font-size-icon: var(--nutui-font-size-icon, 16px) !default; $font-size-xl: $font-h2 !default; +$font-size-2xl: var(--nutui-font-size-2xl, 20px) !default; $font-size-xxl: var(--nutui-font-size-8) !default; $font-size-xxxl: var(--nutui-font-size-10) !default; +$font-size-xxxxl: var(--nutui-font-size-11, 28px) !default; + +// 行高（与同档字号等值；不经 scale） +$line-height-xxxs: var(--nutui-line-height-xxxs, $font-size-xxxs) !default; +$line-height-xxs: var(--nutui-line-height-xxs, $font-size-xxs) !default; +$line-height-xs: var(--nutui-line-height-xs, $font-size-xs) !default; +$line-height-s: var(--nutui-line-height-s, $font-size-s) !default; +$line-height-m: var(--nutui-line-height-m, $font-size-m) !default; +$line-height-base: var( + --nutui-line-height-base, + var(--nutui-line-height, $font-size-base) +) !default; +$line-height-l: var(--nutui-line-height-l, $font-size-l) !default; +$line-height-md: var(--nutui-line-height-md, $font-size-md) !default; +$line-height-icon: var(--nutui-line-height-icon, $font-size-icon) !default; +$line-height-xl: var(--nutui-line-height-xl, $font-size-xl) !default; +$line-height-2xl: var(--nutui-line-height-2xl, $font-size-2xl) !default; +$line-height-xxl: var(--nutui-line-height-xxl, $font-size-xxl) !default; +$line-height-xxxl: var(--nutui-line-height-xxxl, $font-size-xxxl) !default; +$line-height-xxxxl: var(--nutui-line-height-xxxxl, $font-size-xxxxl) !default; + +// icon 尺寸（与 variables.scss 对齐；回落为 px，不经 scale-icon-px） +$icon-size-6: var(--nutui-icon-size-6, 6px) !default; +$icon-size-8: var(--nutui-icon-size-8, 8px) !default; +$icon-size-10: var(--nutui-icon-size-10, 10px) !default; +$icon-size-11: var(--nutui-icon-size-11, 11px) !default; +$icon-size-12: var(--nutui-icon-size-12, 12px) !default; +$icon-size-16: var(--nutui-icon-size-16, 16px) !default; +$icon-size-18: var(--nutui-icon-size-18, 18px) !default; +$icon-size-20: var(--nutui-icon-size-20, 20px) !default; +$icon-size-22: var(--nutui-icon-size-22, 22px) !default; +$icon-height: var(--nutui-icon-height, $icon-size-20) !default; +$icon-width: var(--nutui-icon-width, $icon-size-20) !default; +$icon-line-height: var(--nutui-icon-line-height, $icon-size-20) !default; // 间距 space $spacing-xxxs: var(--nutui-spacing-xxxs) !default; // 多用于文本与图标之间的间距 @@ -913,6 +948,32 @@ $price-symbol-small-size: var(--nutui-price-symbol-small-size, 10px) !default; $price-integer-small-size: var(--nutui-price-integer-small-size, 12px) !default; $price-decimal-small-size: var(--nutui-price-decimal-small-size, 10px) !default; +// price 行高（与 variables.scss 对齐） +$price-root-line-height: var( + --nutui-price-root-line-height, + $line-height-l +) !default; +$price-minor-line-height: var( + --nutui-price-minor-line-height, + $line-height-s +) !default; +$price-integer-xlarge-line-height: var( + --nutui-price-integer-xlarge-line-height, + $line-height-xxl +) !default; +$price-integer-large-line-height: var( + --nutui-price-integer-large-line-height, + $line-height-xl +) !default; +$price-integer-normal-line-height: var( + --nutui-price-integer-normal-line-height, + $line-height-md +) !default; +$price-integer-small-line-height: var( + --nutui-price-integer-small-line-height, + $line-height-s +) !default; + //avatar（✅） $avatar-square: var(--nutui-avatar-square, $radius-base) !default; $avatar-large-width: var(--nutui-avatar-large-width, 48px) !default; @@ -1221,6 +1282,14 @@ $rate-icon-inactive-color: var( $rate-icon-size: var(--nutui-rate-icon-size, 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-large: var( + --nutui-rate-font-size-large, + calc(#{$rate-font-size} + 6px) +) !default; +$rate-font-size-small: var( + --nutui-rate-font-size-small, + calc(#{$rate-font-size} - 2px) +) !default; // tabbar（✅） $tabbar-height: var(--nutui-tabbar-height, 50px) !default; diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss index 8c51b238a3..5b001961d3 100644 --- a/src/styles/variables-jrkf.scss +++ b/src/styles/variables-jrkf.scss @@ -129,9 +129,6 @@ $font-weight: var(--nutui-font-weight) !default; $font-weight-medium: var(--nutui-font-weight-medium, 500) !default; $font-weight-bold: var(--nutui-font-weight-bold) !default; -// 行高 -$line-height-base: var(--nutui-line-height) !default; - // 间距 space $spacing-xxxs: var(--nutui-spacing-xxxs, 2px) !default; $spacing-xxs: var(--nutui-spacing-xxs) !default; // 多用于文本与图标之间的间距 @@ -205,16 +202,54 @@ $font-family: SimSun, sans-serif !default; -// Font +// Font（token 与 variables.scss 对齐；回落为 px / 设计 token，不经 scale 函数） $font-size-xxxs: var(--nutui-font-size-xxxs, 9px) !default; $font-size-xxs: $font-text-mini !default; $font-size-xs: $font-text-xs !default; $font-size-s: $font-text-small !default; +$font-size-m: var(--nutui-font-size-m, $font-text-small) !default; $font-size-base: $font-text !default; $font-size-l: $font-text-large !default; +$font-size-md: var(--nutui-font-size-md, 16px) !default; +$font-size-icon: var(--nutui-font-size-icon, 16px) !default; $font-size-xl: $font-h2 !default; +$font-size-2xl: var(--nutui-font-size-2xl, 20px) !default; $font-size-xxl: var(--nutui-font-size-8) !default; $font-size-xxxl: var(--nutui-font-size-10) !default; +$font-size-xxxxl: var(--nutui-font-size-11, 28px) !default; + +// 行高（与同档字号等值；不经 scale） +$line-height-xxxs: var(--nutui-line-height-xxxs, $font-size-xxxs) !default; +$line-height-xxs: var(--nutui-line-height-xxs, $font-size-xxs) !default; +$line-height-xs: var(--nutui-line-height-xs, $font-size-xs) !default; +$line-height-s: var(--nutui-line-height-s, $font-size-s) !default; +$line-height-m: var(--nutui-line-height-m, $font-size-m) !default; +$line-height-base: var( + --nutui-line-height-base, + var(--nutui-line-height, $font-size-base) +) !default; +$line-height-l: var(--nutui-line-height-l, $font-size-l) !default; +$line-height-md: var(--nutui-line-height-md, $font-size-md) !default; +$line-height-icon: var(--nutui-line-height-icon, $font-size-icon) !default; +$line-height-xl: var(--nutui-line-height-xl, $font-size-xl) !default; +$line-height-2xl: var(--nutui-line-height-2xl, $font-size-2xl) !default; +$line-height-xxl: var(--nutui-line-height-xxl, $font-size-xxl) !default; +$line-height-xxxl: var(--nutui-line-height-xxxl, $font-size-xxxl) !default; +$line-height-xxxxl: var(--nutui-line-height-xxxxl, $font-size-xxxxl) !default; + +// icon 尺寸（与 variables.scss 对齐；回落为 px，不经 scale-icon-px） +$icon-size-6: var(--nutui-icon-size-6, 6px) !default; +$icon-size-8: var(--nutui-icon-size-8, 8px) !default; +$icon-size-10: var(--nutui-icon-size-10, 10px) !default; +$icon-size-11: var(--nutui-icon-size-11, 11px) !default; +$icon-size-12: var(--nutui-icon-size-12, 12px) !default; +$icon-size-16: var(--nutui-icon-size-16, 16px) !default; +$icon-size-18: var(--nutui-icon-size-18, 18px) !default; +$icon-size-20: var(--nutui-icon-size-20, 20px) !default; +$icon-size-22: var(--nutui-icon-size-22, 22px) !default; +$icon-height: var(--nutui-icon-height, $icon-size-20) !default; +$icon-width: var(--nutui-icon-width, $icon-size-20) !default; +$icon-line-height: var(--nutui-icon-line-height, $icon-size-20) !default; $space-mini: $spacing-xs !default; $space-large: $spacing-l !default; @@ -1002,6 +1037,32 @@ $price-symbol-small-size: var(--nutui-price-symbol-small-size, 10px) !default; $price-integer-small-size: var(--nutui-price-integer-small-size, 12px) !default; $price-decimal-small-size: var(--nutui-price-decimal-small-size, 10px) !default; +// price 行高（与 variables.scss 对齐） +$price-root-line-height: var( + --nutui-price-root-line-height, + $line-height-l +) !default; +$price-minor-line-height: var( + --nutui-price-minor-line-height, + $line-height-s +) !default; +$price-integer-xlarge-line-height: var( + --nutui-price-integer-xlarge-line-height, + $line-height-xxl +) !default; +$price-integer-large-line-height: var( + --nutui-price-integer-large-line-height, + $line-height-xl +) !default; +$price-integer-normal-line-height: var( + --nutui-price-integer-normal-line-height, + $line-height-md +) !default; +$price-integer-small-line-height: var( + --nutui-price-integer-small-line-height, + $line-height-s +) !default; + //avatar（✅） $avatar-square: var(--nutui-avatar-square, $radius-base) !default; $avatar-large-width: var(--nutui-avatar-large-width, 48px) !default; @@ -1320,6 +1381,14 @@ $notify-background-color: var(--nutui-notify-background-color, $white) !default; $rate-icon-size: var(--nutui-rate-icon-size, 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-large: var( + --nutui-rate-font-size-large, + calc(#{$rate-font-size} + 6px) +) !default; +$rate-font-size-small: var( + --nutui-rate-font-size-small, + calc(#{$rate-font-size} - 2px) +) !default; $rate-item-margin: var(--nutui-rate-item-margin, 14px) !default; $rate-icon-color: var(--nutui-rate-icon-color, $color-primary) !default; $rate-icon-inactive-color: var( From adac5376e33d0e0df289c3f95f5bf53ce3db416a Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 12 May 2026 20:26:07 +0800 Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=E6=9C=AC=E5=9C=B0=E6=A0=A1?= =?UTF-8?q?=E9=AA=8C=E8=84=9A=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../skills/nutui-build-local-verify/SKILL.md | 62 ++++++++ .../scripts/verify-scale-generation.mjs | 132 ++++++++++++++++++ package.json | 4 +- 3 files changed, 197 insertions(+), 1 deletion(-) create mode 100644 .cursor/skills/nutui-build-local-verify/SKILL.md create mode 100644 .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs diff --git a/.cursor/skills/nutui-build-local-verify/SKILL.md b/.cursor/skills/nutui-build-local-verify/SKILL.md new file mode 100644 index 0000000000..3bf8c38ffa --- /dev/null +++ b/.cursor/skills/nutui-build-local-verify/SKILL.md @@ -0,0 +1,62 @@ +--- +name: nutui-build-local-verify +description: NutUI 比例缩放本地验证——默认就地覆盖：每个组件 SCSS 写回 src/packages 下同一路径（如 actionsheet/actionsheet.scss→同文件）；--mirror 才写到 scale-verify/ 对照。不写 build。 +disable-model-invocation: true +--- + +# NutUI Build Local Verify + +## 在做什么 + +**只做一步**：用 `scripts/px-to-scale-px-in-component-scss.cjs` 把组件 SCSS 里裸 `px` 转成 `scale-px` 等，并把结果写回磁盘。 + +- **默认（就地覆盖）**：对每个匹配的 `.scss`，**读、写都是同一路径**——相对 `src/packages` 的路径不变。例如 `src/packages/actionsheet/actionsheet.scss` 转换后仍写回该文件，不会改到别的目录或改名。 +- **`--mirror`**：不写源码；结果写到 **`scale-verify/<与 src/packages 相同的相对路径>`**（例如 `scale-verify/actionsheet/actionsheet.scss`），便于 diff。 + +之后是否再跑 `pnpm run build`、是否用别的工具核对，由你自行决定；本 skill **不要求** build。 + +## 覆盖原 SCSS（推荐） + +在 **nutui-react 仓库根目录** 执行。**务必先 commit / stash**，用完 `git restore src/packages` 或 `git checkout -- src/packages` 恢复。 + +```bash +pnpm run verify-scale +``` + +等价： + +```bash +node .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs +``` + +（`--in-place` / `-i` 与默认等价。） + +## 报告 + +路径：**`scale-verify/report.json`**。覆盖模式下看 `overwriteSource === true`、`changedFileCount`、`changedFiles`。 + +## 其它命令 + +```bash +# 删除仓库根下 scale-verify/ 整目录（含 report；不还原已覆盖的 src/packages） +node .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs --clean +``` + +**可选**（只镜像、不覆盖源码）： + +```bash +pnpm run verify-scale:mirror +``` + +`--mirror` 与 `--in-place` 不能同时使用。 + +## 核对清单 + +- [ ] 覆盖前已 git 可回滚 +- [ ] `changedFiles` 抽样无 `scale-px(0px)`、无重复嵌套 `scale-px` +- [ ] `font-size` / `font` 未被误改（转换器会跳过） + +## 给用户的一句话结论 + +- 脚本跑完 + `changedFileCount` + 列 2～3 个 `changedFiles` +- **覆盖的是真实源码**时，验证完用 **git 恢复** diff --git a/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs b/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs new file mode 100644 index 0000000000..92dc337a82 --- /dev/null +++ b/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs @@ -0,0 +1,132 @@ +#!/usr/bin/env node +/** + * 默认：每个文件读自且写回 src/packages 下同一路径（如 …/actionsheet/actionsheet.scss）。 + * 不包含 build；自行 git diff / 恢复即可。 + */ +import fs from 'node:fs/promises' +import path from 'path' +import { createRequire } from 'node:module' + +const require = createRequire(import.meta.url) +const transform = require(path.resolve(process.cwd(), 'scripts/px-to-scale-px-in-component-scss.cjs')) + +const repoRoot = process.cwd() +const packagesRoot = path.resolve(repoRoot, 'src/packages') +const outRoot = path.resolve(repoRoot, 'scale-verify') +const reportPath = path.resolve(outRoot, 'report.json') + +const argv = new Set(process.argv.slice(2)) +const shouldClean = argv.has('--clean') +const mirrorMode = argv.has('--mirror') +/** 默认覆盖 src/packages 原 .scss；传 --mirror 则只写 scale-verify/ */ +const inPlace = !mirrorMode + +if (mirrorMode && (argv.has('--in-place') || argv.has('-i'))) { + console.error('[scale-verify] 不能同时使用 --mirror 与 --in-place / -i') + process.exit(1) +} + +function isScssFile(name) { + return name.endsWith('.scss') +} + +function shouldSkip(relPath) { + const p = relPath.replaceAll('\\', '/') + if (p.includes('/demos/')) return true + if (p.includes('/__test__/')) return true + if (p.includes('/__tests__/')) return true + if (p.includes('/__snapshots__/')) return true + if (p.startsWith('.scale-verify/')) return true + return false +} + +async function walkScssFiles(dir, base = dir, list = []) { + const entries = await fs.readdir(dir, { withFileTypes: true }) + for (const entry of entries) { + const abs = path.resolve(dir, entry.name) + const rel = path.relative(base, abs) + if (entry.isDirectory()) { + await walkScssFiles(abs, base, list) + continue + } + if (!entry.isFile() || !isScssFile(entry.name)) continue + if (shouldSkip(rel)) continue + list.push(abs) + } + return list +} + +async function ensureReportDir() { + await fs.mkdir(outRoot, { recursive: true }) +} + +async function prepareOutputLayout() { + if (shouldClean) { + await fs.rm(outRoot, { recursive: true, force: true }) + console.log('[scale-verify] cleaned:', path.relative(repoRoot, outRoot)) + return + } + + await fs.rm(outRoot, { recursive: true, force: true }) + await fs.mkdir(outRoot, { recursive: true }) +} + +async function main() { + await prepareOutputLayout() + if (shouldClean) { + return + } + + const files = await walkScssFiles(packagesRoot) + files.sort() + + const changed = [] + for (const absFile of files) { + const rel = path.relative(packagesRoot, absFile) + const source = await fs.readFile(absFile, 'utf8') + const transformed = transform(source) + if (source === transformed) continue + + const targetFile = inPlace ? absFile : path.resolve(outRoot, rel) + if (!inPlace) { + await fs.mkdir(path.dirname(targetFile), { recursive: true }) + } + await fs.writeFile(targetFile, transformed, 'utf8') + changed.push(rel.replaceAll('\\', '/')) + } + + await ensureReportDir() + const scssWriteRoot = inPlace + ? path.relative(repoRoot, packagesRoot).replaceAll('\\', '/') + : path.relative(repoRoot, outRoot).replaceAll('\\', '/') + + const report = { + generatedAt: new Date().toISOString(), + mode: inPlace ? 'in-place' : 'mirror', + overwriteSource: inPlace, + /** 本次写入的 SCSS 根路径：原地为 src/packages，镜像为仓库根下 scale-verify */ + scssWriteRoot, + /** 镜像模式下的实验目录；原地模式为 null */ + outDir: inPlace ? null : path.relative(repoRoot, outRoot).replaceAll('\\', '/'), + reportPath: path.relative(repoRoot, reportPath).replaceAll('\\', '/'), + totalScssFiles: files.length, + changedFileCount: changed.length, + changedFiles: changed, + } + await fs.writeFile(reportPath, `${JSON.stringify(report, null, 2)}\n`, 'utf8') + + console.log('[scale-verify] mode:', report.mode) + if (!inPlace) { + console.log('[scale-verify] outDir:', report.outDir) + } else { + console.log('[scale-verify] wrote into:', path.relative(repoRoot, packagesRoot)) + } + console.log('[scale-verify] totalScssFiles:', report.totalScssFiles) + console.log('[scale-verify] changedFileCount:', report.changedFileCount) + console.log('[scale-verify] report:', path.relative(repoRoot, reportPath)) +} + +main().catch((err) => { + console.error('[scale-verify] failed:', err) + process.exitCode = 1 +}) diff --git a/package.json b/package.json index def1792648..823e6fc138 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,9 @@ "e2e:run:taro": "start-server-and-test dev:taro:h5 http://localhost:10086 cypress:run:taro", "e2e:open:taro": "start-server-and-test dev:taro:h5 http://localhost:10086 cypress:open:taro", "update:taro:entry": "node ./scripts/harmony/update-taro-entry", - "upgradeTaro": "pnpm --dir ./packages/nutui-taro-demo upgradeTaro" + "upgradeTaro": "pnpm --dir ./packages/nutui-taro-demo upgradeTaro", + "verify-scale": "node .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs", + "verify-scale:mirror": "node .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs --mirror" }, "lint-staged": { "*.{scss,md}": "prettier --write", From 4b8fbcbab68c0640a02102de45553401f4f7b2aa Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 12 May 2026 20:27:38 +0800 Subject: [PATCH 07/10] =?UTF-8?q?chore:=20=E9=AA=8C=E8=AF=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/actionsheet/actionsheet.scss | 8 +- src/packages/address/address.scss | 74 +++++++++---------- src/packages/animate/animate.scss | 52 ++++++------- src/packages/audio/audio.scss | 32 ++++---- 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/barrage/demo.scss | 4 +- src/packages/button/button.scss | 2 +- src/packages/calendar/calendar.scss | 47 ++++++------ src/packages/calendar/demo.scss | 20 ++--- src/packages/calendarcard/calendarcard.scss | 24 +++--- src/packages/card/card.scss | 26 +++---- src/packages/cell/cell.scss | 6 +- src/packages/cellgroup/cellgroup.scss | 8 +- src/packages/checkbox/checkbox.scss | 36 ++++----- src/packages/checkboxgroup/checkboxgroup.scss | 12 +-- src/packages/circleprogress/demo.scss | 4 +- src/packages/collapseitem/collapseitem.scss | 16 ++-- src/packages/countdown/countdown.scss | 6 +- src/packages/dialog/dialog.scss | 2 +- 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 | 66 ++++++++--------- src/packages/formitem/formitem.scss | 20 ++--- src/packages/grid/grid.scss | 2 +- src/packages/griditem/griditem.scss | 4 +- .../hoverbuttonitem/hoverbuttonitem.scss | 24 +++--- src/packages/imagepreview/imagepreview.scss | 20 ++--- src/packages/indicator/indicator.scss | 26 +++---- .../infiniteloading/infiniteloading.scss | 8 +- src/packages/input/input.scss | 6 +- src/packages/inputnumber/inputnumber.scss | 12 +-- src/packages/menuitem/menuitem.scss | 4 +- src/packages/navbar/navbar.scss | 26 +++---- src/packages/noticebar/demo.scss | 4 +- src/packages/noticebar/noticebar.scss | 4 +- src/packages/notify/notify.scss | 16 ++-- .../numberkeyboard/numberkeyboard.scss | 18 ++--- src/packages/overlay/demo.scss | 6 +- src/packages/pagination/pagination.scss | 10 +-- src/packages/popover/demo.scss | 8 +- src/packages/popover/popover.scss | 64 ++++++++-------- src/packages/popup/popup.scss | 6 +- src/packages/progress/progress.scss | 2 +- src/packages/pulltorefresh/pulltorefresh.scss | 2 +- src/packages/quickenter/quickenter.scss | 26 +++---- src/packages/radio/radio.scss | 10 +-- src/packages/radiogroup/radiogroup.scss | 6 +- src/packages/range/range.scss | 74 +++++++++---------- src/packages/rate/rate.scss | 12 +-- src/packages/resultpage/resultpage.scss | 4 +- src/packages/searchbar/searchbar.scss | 24 +++--- src/packages/segmented/segmented.scss | 10 +-- src/packages/shortpassword/shortpassword.scss | 48 ++++++------ src/packages/skeleton/skeleton.scss | 4 +- src/packages/step/step.scss | 8 +- src/packages/steps/steps.scss | 32 ++++---- src/packages/swipe/swipe.scss | 6 +- src/packages/swiper/swiper.scss | 8 +- src/packages/switch/switch.scss | 16 ++-- src/packages/tabbar/tabbar.scss | 18 ++--- src/packages/tabbaritem/tabbaritem.scss | 12 +-- src/packages/table/table.scss | 26 +++---- src/packages/tabs/tabs.scss | 40 +++++----- src/packages/tag/tag.scss | 6 +- src/packages/textarea/textarea.scss | 6 +- src/packages/timedetail/timedetail.scss | 10 +-- src/packages/timeselect/timeselect.scss | 4 +- src/packages/toast/toast.scss | 16 ++-- src/packages/tour/demo.scss | 20 ++--- src/packages/tour/tour.scss | 8 +- src/packages/trendarrow/demo.scss | 2 +- src/packages/uploader/uploader.scss | 22 +++--- src/packages/virtuallist/virtuallist.scss | 16 ++-- 79 files changed, 638 insertions(+), 633 deletions(-) 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 e707c7252c..b50db33779 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,25 +22,25 @@ } &-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) 0 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; + border-radius: scale-px(21px); font-size: $font-size-l; color: $color-primary-text; } @@ -51,10 +51,10 @@ &-title { font-size: $font-size-base; font-weight: 500; - padding: 16px 16px 12px 16px; + padding: scale-px(16px) scale-px(16px) scale-px(12px) scale-px(16px); } &-hotlist { - padding: 0 16px; + padding: 0 scale-px(16px); display: flex; flex-wrap: wrap; align-items: flex-start; @@ -62,16 +62,16 @@ display: flex; justify-content: center; align-items: center; - width: 63px; - height: 28px; + width: scale-px(63px); + height: scale-px(28px); font-size: $font-size-s; - border-radius: 4px; - margin-bottom: 7px; + 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: $font-size-s; display: inline-block; - height: 28px; - line-height: 28px; - padding: 0 12px; - border-radius: 4px; + height: scale-px(28px); + line-height: scale-px(28px); + padding: 0 scale-px(12px); + border-radius: scale-px(4px); background-color: $color-background-sunken; &.active { - border: 1px solid $color-primary; + border: scale-px(1px) solid $color-primary; background-color: $color-primary-light-pressed; color: $color-primary; } } &-border { - margin: 0 2px; + margin: 0 scale-px(2px); color: $color-text-disabled; } } @@ -122,15 +122,15 @@ .nut-elevator-list { &-item { position: relative; - padding-left: 20px; + padding-left: scale-px(20px); } &-item-code { display: inline; position: absolute; left: 0; top: 0; - height: 30px; - line-height: 30px; + height: scale-px(30px); + line-height: scale-px(30px); border-bottom: 0; color: $color-text-help; font-weight: 500; @@ -145,11 +145,11 @@ display: flex; justify-content: center; align-items: center; - width: 16px; - height: 16px; + width: scale-px(16px); + height: scale-px(16px); font-size: $font-size-xxs; - border-radius: 16px; - margin-bottom: 2px; + 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 05b8c297a9..122804031e 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: 0 auto; + padding: scale-px(10px) 0; &-bar-wrapper { flex: 1; - margin: 0 10px; + margin: 0 scale-px(10px); } .time { - min-width: 50px; + min-width: scale-px(50px); font-size: $font-size-s; text-align: center; } .nut-range-button { - width: 8px; - height: 8px; + width: scale-px(8px); + height: scale-px(8px); } } .custom-button-group { .nut-button-primary { - margin: 0 5px; + margin: 0 scale-px(5px); } } .custom-button-group-disable { .nut-button-primary { - margin: 0 5px; + margin: 0 scale-px(5px); pointer-events: none; } } @@ -78,7 +78,7 @@ .nut-audio-none-container { .nut-voice { - border: 1px solid $color-title; + border: scale-px(1px) solid $color-title; align-items: center; } } @@ -92,7 +92,7 @@ left: auto; right: 50%; transform: rotate(-45deg); - transform-origin: 20px -18px; + transform-origin: scale-px(20px) scale-px(-18px); } } } diff --git a/src/packages/avatar/avatar.scss b/src/packages/avatar/avatar.scss index f3480990ce..6aa681ed47 100644 --- a/src/packages/avatar/avatar.scss +++ b/src/packages/avatar/avatar.scss @@ -12,7 +12,7 @@ height: $avatar-normal-height; &-round { - border-radius: 999px; + border-radius: scale-px(999px); overflow: hidden; } diff --git a/src/packages/avatarcropper/avatarcropper.scss b/src/packages/avatarcropper/avatarcropper.scss index b79102847b..9ed3283c0c 100644 --- a/src/packages/avatarcropper/avatarcropper.scss +++ b/src/packages/avatarcropper/avatarcropper.scss @@ -72,7 +72,7 @@ &-item { color: #fff; - padding: 15px; + padding: scale-px(15px); cursor: pointer; display: flex; align-items: center; @@ -98,7 +98,7 @@ top: 50%; transform: translate(-50%, -50%); background-color: transparent; - box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 scale-px(1000px) scale-px(1000px) rgba(0, 0, 0, 0.6); } } } diff --git a/src/packages/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/barrage/demo.scss b/src/packages/barrage/demo.scss index 3f96259e05..e04442d596 100644 --- a/src/packages/barrage/demo.scss +++ b/src/packages/barrage/demo.scss @@ -3,6 +3,6 @@ } .barrage-demo-wrap, .barrage-demo { - padding: 20px 0; - height: 150px; + padding: scale-px(20px) 0; + height: scale-px(150px); } 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 e17a53a767..d8c07c6fa5 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: 0 0 scale-px(12px) scale-px(12px); + box-shadow: 0 scale-px(4px) scale-px(10px) 0 + rgba($color: #000000, $alpha: 0.06); } &-week-item { @@ -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); // 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。 &-day, @@ -146,22 +147,22 @@ &-info, &-info-curr { position: absolute; - bottom: 5px; + bottom: scale-px(5px); width: 100%; font-size: $font-size-s; - line-height: 14px; + line-height: scale-px(14px); } &-info-top { position: absolute; width: 100%; - top: 5px; + top: scale-px(5px); } &-info-bottom { position: absolute; width: 100%; - bottom: 5px; + bottom: scale-px(5px); } &-active { @@ -170,13 +171,13 @@ border-radius: $calendar-day-active-border-radius; &.active-start { - border-radius: 0px; + border-radius: 0; border-top-left-radius: $calendar-day-active-border-radius; border-bottom-left-radius: $calendar-day-active-border-radius; } &.active-end { - border-radius: 0px; + border-radius: 0; border-top-right-radius: $calendar-day-active-border-radius; border-bottom-right-radius: $calendar-day-active-border-radius; } @@ -237,9 +238,9 @@ background-color: $white; .calendar-confirm-btn { - height: 40px; - line-height: 40px; - margin: 6px 16px; + height: scale-px(40px); + line-height: scale-px(40px); + margin: scale-px(6px) scale-px(16px); text-align: center; border-radius: $radius-base; background: $button-primary-background-color; @@ -250,7 +251,7 @@ } .nut-calendar-popup .nut-popup-title-right { - top: 7px !important; + top: scale-px(7px) !important; } [dir='rtl'] .nut-calendar, diff --git a/src/packages/calendar/demo.scss b/src/packages/calendar/demo.scss index c39e1f3a24..7749b65b92 100644 --- a/src/packages/calendar/demo.scss +++ b/src/packages/calendar/demo.scss @@ -1,10 +1,10 @@ .nut-calendar { .nut-calendar-btns { - height: 40px; + height: scale-px(40px); display: flex; align-items: center; justify-content: space-evenly; - padding: 0 20px; + padding: 0 scale-px(20px); } .nut-calendar-date { @@ -18,27 +18,27 @@ .wrapper { display: flex; - padding: 0 40px; + padding: 0 scale-px(40px); } .d_div { - margin: 0px 5px; + margin: 0 scale-px(5px); .d_btn { background: #fa3f19; color: #fff; font-size: 12px; - padding: 2px 8px; - border-radius: 4px; + padding: scale-px(2px) scale-px(8px); + border-radius: scale-px(4px); display: inline-block; - height: 20px; + height: scale-px(20px); } } .info { display: block; font-size: 12px; - line-height: 16px; + line-height: scale-px(16px); color: #999; } } @@ -49,10 +49,10 @@ } .desc { - padding: 10px; + padding: scale-px(10px); } .desc1 { - padding: 10px; + padding: scale-px(10px); } } diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss index ccd2667370..dfee5da62a 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; @@ -18,21 +18,21 @@ display: flex; flex-direction: row; cursor: pointer; - margin: 16px; + margin: scale-px(16px); .left { - margin-left: 8px; + margin-left: scale-px(8px); } .right { - margin-right: 8px; + margin-right: scale-px(8px); } } } &-icon { - width: 18px; - height: 18px; + width: scale-px(18px); + height: scale-px(18px); display: block; } @@ -50,9 +50,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; // 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。 @@ -72,9 +72,9 @@ align-items: center; justify-content: center; width: 100%; - height: 12px; + height: scale-px(12px); font-size: $font-size-s; - line-height: 12px; + line-height: scale-px(12px); } &.weekend { @@ -151,12 +151,12 @@ &-right { .left { margin-left: 0; - margin-right: 8px; + margin-right: scale-px(8px); } .right { margin-right: 0; - margin-left: 8px; + margin-left: scale-px(8px); } .nut-icon-ArrowLeft, diff --git a/src/packages/card/card.scss b/src/packages/card/card.scss index a940cbb596..803205197f 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,7 +23,7 @@ &-right { flex: 1; - padding: 0 10px 8px; + padding: 0 scale-px(10px) scale-px(8px); &-title { @include moreline-ellipsis(); @@ -35,13 +35,13 @@ &-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; } } @@ -72,7 +72,7 @@ line-height: $line-height-xl; color: $color-text; font-size: $font-size-s; - padding-top: 4px; + 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 93d3c5ab35..73a729518d 100644 --- a/src/packages/checkbox/checkbox.scss +++ b/src/packages/checkbox/checkbox.scss @@ -12,9 +12,9 @@ &-icon-wrap { font-size: 0px; - line-height: 0px; + line-height: 0; border-radius: 50%; - box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2); + box-shadow: 0 scale-px(2px) scale-px(4px) 0 rgba(255, 15, 35, 0.2); } &-icon-checked { @@ -43,7 +43,7 @@ &-icon-indeterminate { color: $color-primary; background-color: $white; - box-shadow: 0px 2px 4px 0px #ff0f2333; + box-shadow: 0 scale-px(2px) scale-px(4px) 0 #ff0f2333; border-radius: 50%; &.nut-checkbox-icon-disabled { @@ -76,14 +76,14 @@ display: inline-flex; /* #endif */ align-items: center; - min-height: 32px; + min-height: scale-px(32px); padding: $checkbox-button-padding; font-size: $checkbox-button-font-size; background: $checkbox-button-background; border-radius: $checkbox-button-border-radius; color: $checkbox-label-color; box-sizing: border-box; - border: 1px solid $checkbox-button-background; + border: scale-px(1px) solid $checkbox-button-background; overflow: hidden; &-active { @@ -94,7 +94,7 @@ &-disabled { color: $color-text-disabled; - border: 1px solid $checkbox-button-background; + border: scale-px(1px) solid $checkbox-button-background; } &-icon { @@ -113,25 +113,25 @@ } .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: $font-size-s; - width: 12px; - height: 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 +139,7 @@ .nut-checkbox-button-active.nut-checkbox-button-disabled { background: $color-text-disabled; color: $white; - border: 1px solid $color-text-disabled; + border: scale-px(1px) solid $color-text-disabled; } &-list-item { @@ -176,19 +176,19 @@ &-icon { right: auto; left: 0; - border-right: 10px solid transparent; - border-left: 10px solid $color-primary; + border-right: scale-px(10px) solid transparent; + border-left: scale-px(10px) solid $color-primary; &-checked { left: auto; right: 50%; - transform: translate(3px, -3px); + transform: translate(scale-px(3px), scale-px(-3px)); } .nut-icon { &:before { margin-left: 0; - margin-right: 6px; + margin-right: scale-px(6px); } } } diff --git a/src/packages/checkboxgroup/checkboxgroup.scss b/src/packages/checkboxgroup/checkboxgroup.scss index 3e2a6bd4e8..c6863eecb7 100644 --- a/src/packages/checkboxgroup/checkboxgroup.scss +++ b/src/packages/checkboxgroup/checkboxgroup.scss @@ -10,7 +10,7 @@ flex-direction: column; .nut-checkbox { - margin-bottom: 5px; + margin-bottom: scale-px(5px); &.nut-checkbox-reverse { width: 100%; @@ -37,7 +37,7 @@ display: inline-flex; /* #endif */ flex: 1; - margin-right: 20px; + margin-right: scale-px(20px); &-button-active { border: $radio-button-active-border; @@ -55,7 +55,7 @@ box-sizing: border-box; .nut-checkbox { - margin-bottom: 5px; + margin-bottom: scale-px(5px); &.nut-checkbox-reverse { width: auto; @@ -75,14 +75,14 @@ .nut-rtl .nut-checkboxgroup { .nut-checkbox { &-label { - margin-right: 5px; + margin-right: scale-px(5px); } } &-vertical { .nut-checkbox { &-label { - margin-right: 5px; + margin-right: scale-px(5px); } } } @@ -90,7 +90,7 @@ &-horizontal { .nut-checkbox { margin-right: 0; - margin-left: 20px; + margin-left: scale-px(20px); } } } diff --git a/src/packages/circleprogress/demo.scss b/src/packages/circleprogress/demo.scss index 9c3a976f9e..04c609fa56 100644 --- a/src/packages/circleprogress/demo.scss +++ b/src/packages/circleprogress/demo.scss @@ -2,10 +2,10 @@ min-height: 100vh; .demo-btn { - margin-top: -16px; + margin-top: scale-px(-16px); .nut-button { - margin-right: 10px; + margin-right: scale-px(10px); } } } diff --git a/src/packages/collapseitem/collapseitem.scss b/src/packages/collapseitem/collapseitem.scss index 067cfa9b49..84f720f48c 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: 0 scale-px(20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -66,7 +66,7 @@ &-icon-box { display: flex; - width: 24px; + width: scale-px(24px); position: relative; color: $color-text; } @@ -76,7 +76,7 @@ align-items: center; position: absolute; top: 50%; - left: 5px; + left: scale-px(5px); transform: translateY(-50%); transform-origin: center; transition: transform 0.3s; @@ -126,6 +126,6 @@ .nut-rtl .nut-collapse-item { &-icon { left: auto; - right: 5px; + right: scale-px(5px); } } diff --git a/src/packages/countdown/countdown.scss b/src/packages/countdown/countdown.scss index 84323db283..e16cb0237f 100644 --- a/src/packages/countdown/countdown.scss +++ b/src/packages/countdown/countdown.scss @@ -15,7 +15,7 @@ box-sizing: border-box; font-weight: $coutdown-font-weight; font-size: $countdown-font-size; - line-height: calc($countdown-font-size + 2px); + line-height: calc($countdown-font-size + scale-px(2px)); font-family: 'JDZH-Regular'; } &-number, @@ -41,7 +41,7 @@ background-color: $countdown-number-background-color; color: $countdown-number-color; &::after { - border: 1px solid $countdown-number-border-color; + border: scale-px(1px) solid $countdown-number-border-color; } } @@ -49,7 +49,7 @@ background-color: $countdown-number-primary-background-color; color: $countdown-number-primary-color; &::after { - border: 1px solid $countdown-number-primary-border-color; + border: scale-px(1px) solid $countdown-number-primary-border-color; } } &-number-text { diff --git a/src/packages/dialog/dialog.scss b/src/packages/dialog/dialog.scss index 93f0d99f4b..2c0b6b49b1 100644 --- a/src/packages/dialog/dialog.scss +++ b/src/packages/dialog/dialog.scss @@ -60,7 +60,7 @@ } &-bottom { - bottom: -64px; + bottom: scale-px(-64px); width: $dialog-bottom-close-icon-size; height: $dialog-bottom-close-icon-size; left: 50%; diff --git a/src/packages/divider/divider.scss b/src/packages/divider/divider.scss index bb5c5bb6cc..10ba12e110 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: 0; 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 ce1b9300d4..fc6bdf3d99 100644 --- a/src/packages/fixednav/fixednav.scss +++ b/src/packages/fixednav/fixednav.scss @@ -5,7 +5,7 @@ position: fixed; z-index: $fixednav-index; display: inline-block; - height: 50px; + height: scale-px(50px); &.active { .nut-fixednav-btn { @@ -29,17 +29,17 @@ box-sizing: border-box; position: absolute; z-index: $fixednav-index; - width: 70px; + width: scale-px(70px); height: 100%; background: $fixednav-button-background; - box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0 scale-px(2px) scale-px(4px) 0 rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; .text { - width: 24px; - line-height: 13px; + width: scale-px(24px); + line-height: scale-px(13px); font-size: $font-size-s; color: #fff; flex-shrink: 0; @@ -59,7 +59,7 @@ background: $fixednav-background-color; display: flex; justify-content: space-between; - box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); + box-shadow: scale-px(2px) scale-px(2px) scale-px(8px) 0 rgba(0, 0, 0, 0.2); &-item { position: relative; @@ -69,7 +69,7 @@ flex-direction: column; justify-content: center; align-items: center; - min-width: 50px; + min-width: scale-px(50px); flex-shrink: 0; color: $fixednav-color; @@ -79,9 +79,9 @@ } &-image { - width: 20px; - height: 20px; - margin-bottom: 2px; + width: scale-px(20px); + height: scale-px(20px); + margin-bottom: scale-px(2px); } } @@ -89,19 +89,19 @@ right: 0; .nut-fixednav-btn { right: 0; - border-radius: 45px 0px 0px 45px; + border-radius: scale-px(45px) 0 0 scale-px(45px); .nut-icon { - margin-right: 5px; + margin-right: scale-px(5px); transform: rotate(0deg); } } .nut-fixednav-list { right: 0; transform: translateX(100%); - border-radius: 25px 0px 0px 25px; + border-radius: scale-px(25px) 0 0 scale-px(25px); padding: { - left: 20px; - right: 80px; + left: scale-px(20px); + right: scale-px(80px); } } } @@ -111,9 +111,9 @@ .nut-fixednav-btn { flex-direction: row-reverse; left: 0; - border-radius: 0 45px 45px 0; + border-radius: 0 scale-px(45px) scale-px(45px) 0; .nut-icon { - margin-left: 5px; + margin-left: scale-px(5px); transform: rotate(180deg); } } @@ -121,10 +121,10 @@ .nut-fixednav-list { transform: translateX(-100%); left: 0; - border-radius: 0px 25px 25px 0px; + border-radius: 0 scale-px(25px) scale-px(25px) 0; padding: { - left: 80px; - right: 20px; + left: scale-px(80px); + right: scale-px(20px); } } } @@ -150,10 +150,10 @@ &-btn { right: auto; left: 0; - border-radius: 0px 45px 45px 0px; + border-radius: 0 scale-px(45px) scale-px(45px) 0; .nut-icon { - margin-right: 0px; - margin-left: 5px; + margin-right: 0; + margin-left: scale-px(5px); transform: rotate(180deg); } } @@ -162,12 +162,12 @@ 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: 0 scale-px(25px) scale-px(25px) 0; + box-shadow: scale-px(-2px) scale-px(2px) scale-px(8px) 0 rgba(0, 0, 0, 0.2); padding: { - right: 20px; - left: 80px; + right: scale-px(20px); + left: scale-px(80px); } &-item { @@ -185,12 +185,12 @@ .nut-fixednav-btn { left: auto; right: 0; - border-radius: 45px 0 0 45px; + border-radius: scale-px(45px) 0 0 scale-px(45px); .nut-icon { transform: rotate(0deg); - margin-right: 5px; - margin-left: 0px; + margin-right: scale-px(5px); + margin-left: 0; } } @@ -198,11 +198,11 @@ transform: translateX(100%); right: auto; left: auto; - border-radius: 25px 0px 0px 25px; + border-radius: scale-px(25px) 0 0 scale-px(25px); padding: { - right: 80px; - left: 20px; + right: scale-px(80px); + left: scale-px(20px); } } } diff --git a/src/packages/formitem/formitem.scss b/src/packages/formitem/formitem.scss index 285e36b715..e6005259c0 100644 --- a/src/packages/formitem/formitem.scss +++ b/src/packages/formitem/formitem.scss @@ -23,14 +23,14 @@ color: $form-item-required-color; margin-right: $form-item-required-margin-right; position: absolute; - left: -10px; + left: scale-px(-10px); } &-right-required { color: $form-item-required-color; margin-left: $form-item-required-margin-right; position: absolute; - right: -10px; + right: scale-px(-10px); } } @@ -68,7 +68,7 @@ } .nut-range-container { - min-height: 24px; + min-height: scale-px(24px); } .nut-textarea { @@ -132,13 +132,13 @@ .nut-form-item-label-right { justify-content: flex-end; - padding-right: 24px; + padding-right: scale-px(24px); white-space: nowrap; } .nut-form-item-label-left { position: relative; - padding-left: 12px; + padding-left: scale-px(12px); white-space: nowrap; } @@ -150,8 +150,8 @@ .nut-form-item-label-top { display: block; - padding-bottom: 4px; - padding-right: 24px; + padding-bottom: scale-px(4px); + padding-right: scale-px(24px); } .nut-form-item-body-top { @@ -163,14 +163,14 @@ .nut-rtl .form-layout-right .nut-form-item-label { text-align: left; padding-right: 0; - padding-left: 24px; + padding-left: scale-px(24px); } [dir='rtl'] .form-layout-left .nut-form-item-label, .nut-rtl .form-layout-left .nut-form-item-label { text-align: right; padding-left: 0; - padding-right: 12px; + padding-right: scale-px(12px); // .required { // left: auto; @@ -181,7 +181,7 @@ [dir='rtl'] .form-layout-top .nut-form-item-label, .nut-rtl .form-layout-top .nut-form-item-label { padding-right: 0; - padding-left: 24px; + padding-left: scale-px(24px); } [dir='rtl'] .form-layout-top .nut-form-item-body, diff --git a/src/packages/grid/grid.scss b/src/packages/grid/grid.scss index 92d9a1b268..372766e3a3 100644 --- a/src/packages/grid/grid.scss +++ b/src/packages/grid/grid.scss @@ -17,6 +17,6 @@ .nut-rtl .nut-grid { &-border { border-left-width: 0; - border-right-width: 1px; + border-right-width: scale-px(1px); } } diff --git a/src/packages/griditem/griditem.scss b/src/packages/griditem/griditem.scss index ee1df14ec0..a3ae4da838 100644 --- a/src/packages/griditem/griditem.scss +++ b/src/packages/griditem/griditem.scss @@ -98,12 +98,12 @@ &-content { &-border { border-right-width: 0; - border-left-width: 1px; + border-left-width: scale-px(1px); } &-surround { border-left-width: 0; - border-right-width: 1px; + border-right-width: scale-px(1px); } &-horizontal { diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.scss b/src/packages/hoverbuttonitem/hoverbuttonitem.scss index bb0c1dcdf9..c094e69aee 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,24 +26,24 @@ .nut-icon { display: block; - width: 14px; - height: 14px; + width: scale-px(14px); + height: scale-px(14px); font-size: $font-size-base; } } } &-icon { - width: 20px; - height: 20px; - margin: 9px; + width: scale-px(20px); + height: scale-px(20px); + margin: scale-px(9px); color: $hoverbutton-item-icon-color; fill: $hoverbutton-item-icon-color; .nut-icon { display: block; - width: 20px; - height: 20px; + width: scale-px(20px); + height: scale-px(20px); font-size: $font-size-2xl; } } @@ -54,13 +54,13 @@ } &-text-icon { - width: 14px; - height: 5px; + width: scale-px(14px); + height: scale-px(5px); } &-text { font-size: $font-size-xxs; - margin-top: 5px; - line-height: 9px; + 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..dbd0a32d5b 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: 0; } &-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: 0; margin-top: $indicator-dot-margin; &-0 { - margin-top: 0px; + margin-top: 0; } &-active { @@ -178,7 +178,7 @@ &-dot { &-0 { margin-right: $indicator-dot-margin; - margin-left: 0px; + margin-left: 0; } } } 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 50cbd987f1..b24aac76c1 100644 --- a/src/packages/input/input.scss +++ b/src/packages/input/input.scss @@ -16,12 +16,12 @@ .nut-icon { color: $color-text-disabled; - width: 14px; - height: 14px; + width: scale-px(14px); + height: scale-px(14px); font-size: $font-size-base; } &-container { - height: 38px; + height: scale-px(38px); padding: $input-padding; background-color: $input-background-color; border-radius: $input-border-radius; diff --git a/src/packages/inputnumber/inputnumber.scss b/src/packages/inputnumber/inputnumber.scss index bda34176b4..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 { - width: 10px; - height: 10px; + width: scale-px(10px); + height: scale-px(10px); } } @@ -66,12 +66,12 @@ } &-icon-minus { - width: 16px; - height: 16px; + width: scale-px(16px); + height: scale-px(16px); } &-icon-plus { - width: 16px; - height: 16px; + width: scale-px(16px); + height: scale-px(16px); } } diff --git a/src/packages/menuitem/menuitem.scss b/src/packages/menuitem/menuitem.scss index ae6ca399f7..485cb89ad8 100644 --- a/src/packages/menuitem/menuitem.scss +++ b/src/packages/menuitem/menuitem.scss @@ -79,7 +79,7 @@ .nut-menu-container-down-enter { opacity: 0; - transform: translate(0, -30px); + transform: translate(0, scale-px(-30px)); } .nut-menu-container-down-enter-done { @@ -100,7 +100,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 04bbd95fb3..9b1aec0d04 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; @@ -51,7 +51,7 @@ white-space: nowrap; &-center { - max-width: 129px; + max-width: scale-px(129px); justify-content: center; } } @@ -65,31 +65,31 @@ display: flex; align-items: center; flex-direction: row; - max-width: 124px; + max-width: scale-px(124px); height: 100%; cursor: pointer; /* #ifndef harmony jd h5 weapp*/ .nut-icon, .nutui-iconfont { - width: 20px; - height: 20px; + width: scale-px(20px); + height: scale-px(20px); font-size: $font-size-2xl; } /* #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 { @@ -97,7 +97,7 @@ flex-direction: row; align-items: center; justify-content: center; - gap: 16px; + gap: scale-px(16px); } &-hidden { @@ -107,12 +107,12 @@ } &-right { - padding-left: 16px; + padding-left: scale-px(16px); justify-content: flex-end; - gap: 16px; + gap: scale-px(16px); &-rtl { - padding-right: 16px; + padding-right: scale-px(16px); padding-left: 0; } } diff --git a/src/packages/noticebar/demo.scss b/src/packages/noticebar/demo.scss index c8780a9b93..c89f71a88b 100644 --- a/src/packages/noticebar/demo.scss +++ b/src/packages/noticebar/demo.scss @@ -1,9 +1,9 @@ .demo { - padding-bottom: 30px !important; + padding-bottom: scale-px(30px) !important; } .interstroll-list { - padding: '0 10px'; + padding: '0 scale-px(10px)'; background: 'rgba(251, 248, 220, 1)'; color: '#d9500b'; } diff --git a/src/packages/noticebar/noticebar.scss b/src/packages/noticebar/noticebar.scss index ca406526d2..cecf080dab 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 56937a7dd3..f0c9652283 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 089c1085ad..ab86345f29 100644 --- a/src/packages/numberkeyboard/numberkeyboard.scss +++ b/src/packages/numberkeyboard/numberkeyboard.scss @@ -7,8 +7,8 @@ } &-delete-icon { - width: 28px; - height: 28px; + width: scale-px(28px); + height: scale-px(28px); } width: 100%; @@ -51,7 +51,7 @@ &-body { display: flex; - padding: 6px 0 0 6px; + padding: scale-px(6px) 0 0 scale-px(6px); &-keys { display: flex; @@ -69,7 +69,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 { @@ -103,8 +103,8 @@ .key { position: absolute; top: 0; - right: 6px; - bottom: 6px; + right: scale-px(6px); + bottom: scale-px(6px); left: 0; height: auto; } @@ -133,9 +133,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); } @@ -145,7 +145,7 @@ &-sidebar { .nut-numberkeyboard-body-wrapper { .key { - left: 6px; + left: scale-px(6px); right: 0; &.delete { transform: rotate(-180deg); diff --git a/src/packages/overlay/demo.scss b/src/packages/overlay/demo.scss index 60450e060e..47e919e0da 100644 --- a/src/packages/overlay/demo.scss +++ b/src/packages/overlay/demo.scss @@ -7,10 +7,10 @@ .content { display: flex; - width: 150px; - height: 150px; + width: scale-px(150px); + height: scale-px(150px); background: #fff; - border-radius: 8px; + border-radius: scale-px(8px); align-items: center; justify-content: center; color: red; 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/demo.scss b/src/packages/popover/demo.scss index fab7013aa4..7915a21452 100644 --- a/src/packages/popover/demo.scss +++ b/src/packages/popover/demo.scss @@ -1,13 +1,13 @@ .brickBox { - margin: 80px 0; + margin: scale-px(80px) 0; display: flex; justify-content: center; .brick { - width: 60px; - height: 60px; + width: scale-px(60px); + height: scale-px(60px); background: linear-gradient(135deg, #ff0f23 0%, #fa6419 100%); - border-radius: 10px; + border-radius: scale-px(10px); } } diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss index 20081f9612..ddaee1df0f 100644 --- a/src/packages/popover/popover.scss +++ b/src/packages/popover/popover.scss @@ -6,26 +6,26 @@ &-arrow { position: absolute; - width: 8px; - height: 4px; + width: scale-px(8px); + height: scale-px(4px); .nut-icon-ArrowRadius { position: absolute; color: $popover-content-background-color; - width: 8px; - height: 4px; + width: scale-px(8px); + height: scale-px(4px); } &-top { - bottom: -4px; + bottom: scale-px(-4px); } &-bottom { - top: -4px; + top: scale-px(-4px); } &-left { - right: -6px; + right: scale-px(-6px); transform-origin: center top; &.nut-popover-arrow-left { @@ -34,15 +34,15 @@ } &.nut-popover-arrow-left-top { - top: 16px; - right: -8px; + top: scale-px(16px); + right: scale-px(-8px); transform: rotate(90deg) translateY(0%); } &.nut-popover-arrow-left-bottom { top: auto; - bottom: 16px; - right: -8px; + bottom: scale-px(16px); + right: scale-px(-8px); transform: rotate(90deg) translateY(0%); } } @@ -51,19 +51,19 @@ transform-origin: center top; &.nut-popover-arrow-right { top: 50%; - left: -6px; + left: scale-px(-6px); transform: rotate(-90deg) translateY(-50%); } &.nut-popover-arrow-right-top { - top: 16px; - left: -8px; + top: scale-px(16px); + left: scale-px(-8px); transform: rotate(-90deg) translateY(0%); } &.nut-popover-arrow-right-bottom { - bottom: 16px; - left: -8px; + bottom: scale-px(16px); + left: scale-px(-8px); transform: rotate(-90deg) translateY(0%); } } @@ -75,7 +75,7 @@ border-radius: $popover-border-radius; font-size: $popover-font-size; color: $popover-text-color; - line-height: 28px; + line-height: scale-px(28px); /* #ifndef dynamic*/ max-height: initial; overflow-y: initial; @@ -89,12 +89,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: 0; border-bottom: none; } @@ -118,7 +118,7 @@ } &-name { - width: calc(100% - 34px); + width: calc(100% - scale-px(34px)); word-break: keep-all; flex: 1; } @@ -149,8 +149,8 @@ &-top-right { right: 0; .nut-popover-arrow-top-right { - right: 16px; - bottom: -3.5px; + right: scale-px(16px); + bottom: scale-px(-3.5px); transform: rotate(180deg) translateX(0%); } } @@ -158,8 +158,8 @@ &-top-left { left: 0; .nut-popover-arrow-top-left { - left: 16px; - bottom: -3.5px; + left: scale-px(16px); + bottom: scale-px(-3.5px); transform: rotate(180deg) translateX(0%); } } @@ -174,7 +174,7 @@ &-bottom-right { right: 0; .nut-popover-arrow-bottom-right { - right: 16px; + right: scale-px(16px); transform: translateX(0%); } } @@ -182,7 +182,7 @@ &-bottom-left { left: 0; .nut-popover-arrow-bottom-left { - left: 16px; + left: scale-px(16px); transform: translateX(0%); } } @@ -232,7 +232,7 @@ .nut-popover-item { &-name { margin-left: 0; - margin-right: 4px; + margin-right: scale-px(4px); } &-action-icon { @@ -252,7 +252,7 @@ .nut-popover-arrow-top-right { right: auto; - left: 16px; + left: scale-px(16px); } } @@ -262,7 +262,7 @@ .nut-popover-arrow-top-left { left: auto; - right: 16px; + right: scale-px(16px); } } @@ -280,7 +280,7 @@ .nut-popover-arrow-bottom-right { right: auto; - left: 16px; + left: scale-px(16px); } } @@ -290,7 +290,7 @@ .nut-popover-arrow-bottom-left { left: auto; - right: 16px; + right: scale-px(16px); } } } @@ -333,5 +333,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 cfa9ddd001..4fce559e70 100644 --- a/src/packages/popup/popup.scss +++ b/src/packages/popup/popup.scss @@ -85,7 +85,7 @@ right: auto; bottom: auto; min-height: 10%; - max-width: 295px; + max-width: scale-px(295px); transform: translate(-50%, -50%); &.nut-popup-round { @@ -114,7 +114,7 @@ right: 0; left: auto; bottom: auto; - width: 100px; + width: scale-px(100px); height: 100%; &.nut-popup-round { @@ -127,7 +127,7 @@ left: 0; right: auto; bottom: auto; - 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 9710b3429b..5d79d9e4b3 100644 --- a/src/packages/pulltorefresh/pulltorefresh.scss +++ b/src/packages/pulltorefresh/pulltorefresh.scss @@ -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/quickenter/quickenter.scss b/src/packages/quickenter/quickenter.scss index 66983ef493..eea305afa1 100644 --- a/src/packages/quickenter/quickenter.scss +++ b/src/packages/quickenter/quickenter.scss @@ -3,9 +3,9 @@ .nut-quickenter { width: 100%; /* 限制弹层最大高度，包含安全区 */ - max-height: calc($quickenter-max-height + env(safe-area-inset-top, 0px)); + max-height: calc($quickenter-max-height + env(safe-area-inset-top, 0)); background: $quickenter-bg-color; - border-radius: 0 0 12px 12px; + border-radius: 0 0 scale-px(12px) scale-px(12px); overflow: hidden; box-sizing: border-box; display: flex; @@ -24,7 +24,7 @@ display: flex; align-items: center; justify-content: space-between; - padding: 30px 16px 0; + padding: scale-px(30px) scale-px(16px) 0; box-sizing: border-box; } @@ -53,7 +53,7 @@ &-content { flex: 1; - padding: 10px 28px; + padding: scale-px(10px) scale-px(28px); overflow-y: hidden; // 始终可滚动，防止内容被遮挡 box-sizing: border-box; @@ -75,28 +75,28 @@ flex-direction: column; align-items: center; justify-content: flex-start; - width: 56px; - padding: 0 0 12px 0; // Reduced from 16px to ensure 2 rows fit in 256px + width: scale-px(56px); + padding: 0 0 scale-px(12px) 0; // Reduced from 16px to ensure 2 rows fit in 256px box-sizing: border-box; cursor: pointer; // Calculate gap for 4 items per row: (100% - 4 * 56px) / 3 - margin-right: calc((100% - 224px) / 3); + margin-right: calc((100% - scale-px(224px)) / 3); &:nth-child(4n) { margin-right: 0; } &-icon { - width: 56px; - height: 56px; + width: scale-px(56px); + height: scale-px(56px); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: $quickenter-item-icon-bg-color; color: $quickenter-item-icon-color; - margin-bottom: 8px; + margin-bottom: scale-px(8px); flex-shrink: 0; svg, @@ -114,9 +114,9 @@ // Allow multi-line if text is long, preventing truncation white-space: normal; word-wrap: break-word; - width: 72px; // Allow text to be slightly wider than icon - margin-left: -8px; // Center 72px title over 56px icon - margin-right: -8px; + width: scale-px(72px); // Allow text to be slightly wider than icon + margin-left: scale-px(-8px); // Center 72px title over 56px icon + margin-right: scale-px(-8px); } } } diff --git a/src/packages/radio/radio.scss b/src/packages/radio/radio.scss index ff879e9cc4..6caaf86c93 100644 --- a/src/packages/radio/radio.scss +++ b/src/packages/radio/radio.scss @@ -37,7 +37,7 @@ &-checked { color: $color-primary; background-color: $white; - box-shadow: 0px 2px 4px 0px #ff0f2333; + box-shadow: 0 scale-px(2px) scale-px(4px) 0 #ff0f2333; border-radius: 50%; &.nut-radio-icon-disabled { @@ -61,14 +61,14 @@ display: inline-flex; /* #endif */ align-items: center; - min-height: 30px; + min-height: scale-px(30px); padding: $radio-button-padding; font-size: $radio-button-font-size; background: $radio-button-background; border-radius: $radio-button-border-radius; color: $radio-label-color; box-sizing: border-box; - border: 1px solid $radio-button-background; + border: scale-px(1px) solid $radio-button-background; &-active { background: $color-primary-light-pressed; @@ -78,14 +78,14 @@ &-disabled { color: $color-text-disabled; - border: 1px solid $radio-button-background; + border: scale-px(1px) solid $radio-button-background; } } .nut-radio-button-active.nut-radio-button-disabled { background: $color-text-disabled; color: $white; - border: 1px solid $color-text-disabled; + border: scale-px(1px) solid $color-text-disabled; } } diff --git a/src/packages/radiogroup/radiogroup.scss b/src/packages/radiogroup/radiogroup.scss index 661a6e775e..7b89fbd7e3 100644 --- a/src/packages/radiogroup/radiogroup.scss +++ b/src/packages/radiogroup/radiogroup.scss @@ -23,7 +23,7 @@ } &-button { - border: 1px solid $radio-button-background; + border: scale-px(1px) solid $radio-button-background; } &-button-active { @@ -38,7 +38,7 @@ .nut-radio { &-button { - border: 1px solid $white; + border: scale-px(1px) solid $white; } &-button-active { @@ -55,7 +55,7 @@ .nut-radio-button-active.nut-radio-button-disabled { background: $color-text-disabled; color: $white; - border: 1px solid $color-text-disabled; + border: scale-px(1px) solid $color-text-disabled; } } diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss index adc282be67..b2d0bc01de 100644 --- a/src/packages/range/range.scss +++ b/src/packages/range/range.scss @@ -19,13 +19,13 @@ height: $range-height; margin: 0 $range-margin; background-color: $range-inactive-color; - border-radius: 2px; + border-radius: scale-px(2px); flex: 1; cursor: pointer; &::before { position: absolute; - inset-block: -8px; + inset-block: scale-px(-8px); inset-inline: 0; content: ''; } @@ -45,7 +45,7 @@ max-width: 100%; max-height: 100%; background: $range-active-color; - border-radius: 2px; + border-radius: scale-px(2px); &-animate { transition: all 0.2s; @@ -59,7 +59,7 @@ height: $range-button-height; background: $range-button-background; border-radius: 50%; - box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); + box-shadow: 0 scale-px(1px) scale-px(2px) 0 rgba(0, 0, 0, 0.15); border: $range-button-border; outline: none; align-items: center; @@ -98,9 +98,9 @@ &-number { position: relative; width: 200%; - height: 24px; - line-height: 14px; - padding: 5px 0; + height: scale-px(24px); + line-height: scale-px(14px); + padding: scale-px(5px) 0; left: 50%; display: flex; align-items: center; @@ -130,7 +130,7 @@ &-mark { position: absolute; width: 100%; - height: 14px; + height: scale-px(14px); overflow: visible; top: 50%; } @@ -138,14 +138,14 @@ &-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; + line-height: scale-px(16px); font-size: $font-size-s; color: #999; text-align: center; @@ -155,11 +155,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: 0; + border-radius: scale-px(6px); background: $range-inactive-color; &-active { @@ -171,12 +171,12 @@ .nut-range-vertical-container { height: 100%; flex-direction: column; - padding: 0px 15px; + padding: 0 scale-px(15px); } .nut-range-vertical { width: $range-height; - margin: $range-margin 0px; + margin: $range-margin 0; &-button { &-wrapper, @@ -192,7 +192,7 @@ } &-wrapper-left { - top: 0px; + top: 0; left: 50%; /* #ifndef dynamic*/ right: initial; @@ -201,7 +201,7 @@ } &-number { - left: 0px; + left: 0; top: 50%; // transform: translate3d(100%, 0, 0); } @@ -209,31 +209,31 @@ &-mark { position: absolute; - width: 36px; + width: scale-px(36px); height: 100%; - top: 0px; + top: 0; right: 50%; overflow: visible; font-size: $font-size-s; - padding: 0px; + padding: 0; } &-mark-hm { - left: -34px; + left: scale-px(-34px); } &-mark-text-wrapper { // width: 20px; - height: 16px; + height: scale-px(16px); position: absolute; display: inline-block; user-select: none; - transform: translateY(-11px); + transform: translateY(scale-px(-11px)); } &-mark-text { height: 100%; - line-height: 16px; + line-height: scale-px(16px); color: #999; text-align: center; word-break: keep-all; @@ -241,11 +241,11 @@ &-tick { position: absolute; - top: 2px; - left: 31px; - width: 10px; - height: 10px; - border-radius: 5px; + top: scale-px(2px); + left: scale-px(31px); + width: scale-px(10px); + height: scale-px(10px); + border-radius: scale-px(5px); background: $range-inactive-color; &-active { @@ -275,14 +275,14 @@ } &-tick { - right: 0px; + right: 0; /* #ifndef dynamic*/ left: initial; /* #endif */ } &-mark-text { - transform: translateX(10px); + transform: translateX(scale-px(10px)); } &-vertical { @@ -316,13 +316,13 @@ &-tick { left: auto; - right: 30px; + right: scale-px(30px); margin-left: 0; - margin-right: -0px; + margin-right: 0; } &-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 319f5d60da..ddb90c6b06 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)); } } @@ -148,7 +148,7 @@ } &-small { - margin-right: calc($rate-item-margin - 2px); + margin-right: calc($rate-item-margin - scale-px(2px)); } &:last-child { @@ -185,7 +185,7 @@ } &-small { - padding-right: calc($rate-item-margin - 2px); + padding-right: calc($rate-item-margin - scale-px(2px)); } } } diff --git a/src/packages/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 a3b8482372..6558423d00 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 { @@ -95,19 +95,19 @@ flex-direction: row; z-index: 2; background-color: #fff; - top: 9px; - left: 6px; + top: scale-px(9px); + left: scale-px(6px); font-size: $font-size-s; - line-height: 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 { @@ -115,7 +115,7 @@ height: $icon-size-6; font-size: $icon-size-6; 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 373976ce8d..2b11c03fa9 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; @@ -34,12 +34,12 @@ .nut-segmented-icon { display: flex; align-items: center; - height: 10px; - width: 10px; + height: scale-px(10px); + width: scale-px(10px); margin-right: $segmented-icon-margin-right; .nut-icon { - height: 10px; - width: 10px; + height: scale-px(10px); + width: scale-px(10px); font-size: $font-size-xxs; } } diff --git a/src/packages/shortpassword/shortpassword.scss b/src/packages/shortpassword/shortpassword.scss index 04a13eb785..2b3a3035f7 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: $line-height-s; font-size: $font-size-s; color: $color-text; } &-input { - padding: 0 0 10px; + padding: 0 0 scale-px(10px); text-align: center; position: relative; overflow: hidden; @@ -34,8 +34,8 @@ &-real { position: absolute; right: 0; - width: 247px; - height: 41px; + width: scale-px(247px); + height: scale-px(41px); outline: 0 none; border: 0; text-decoration: none; @@ -43,20 +43,20 @@ } &-site { - width: 247px; - height: 41px; - border-radius: 4px; + width: scale-px(247px); + height: scale-px(41px); + border-radius: scale-px(4px); } &-fake { top: 5%; width: 100%; - height: 41px; + height: scale-px(41px); margin: 0 auto; box-sizing: border-box; background: $shortpassword-background-color; - border-radius: 4px; - border: 1px solid $shortpassword-border-color; + border-radius: scale-px(4px); + border: scale-px(1px) solid $shortpassword-border-color; display: flex; position: absolute; left: 0; @@ -68,8 +68,8 @@ align-items: center; &-icon { - height: 6px; - width: 6px; + height: scale-px(6px); + width: scale-px(6px); border-radius: 50%; background: #000; display: inline-block; @@ -79,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: $line-height-xs; @@ -98,7 +98,7 @@ align-items: center; .nut-icon { - margin-right: 3px; + margin-right: scale-px(3px); } } @@ -111,13 +111,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: $line-height-base; font-size: $font-size-base; color: $color-primary; @@ -129,8 +129,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: $line-height-base; font-size: $font-size-base; color: $color-primary-text; diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss index d0d5c6956d..baf036f05a 100644 --- a/src/packages/skeleton/skeleton.scss +++ b/src/packages/skeleton/skeleton.scss @@ -1,5 +1,5 @@ .nut-skeleton { - line-height: 0px; + line-height: 0; font-size: 0px; &-content { @@ -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 f8b782772f..0877ed6e9c 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -86,16 +86,16 @@ } &-title { - height: 14px; - line-height: 14px; + height: scale-px(14px); + line-height: scale-px(14px); font-size: $steps-base-title-font-size; color: $steps-base-title-color; white-space: nowrap; } &-description { - height: 16px; - line-height: 16px; + height: scale-px(16px); + line-height: scale-px(16px); margin-top: $steps-base-description-margin-top; font-size: $steps-base-description-font-size; color: $steps-base-description-color; diff --git a/src/packages/steps/steps.scss b/src/packages/steps/steps.scss index c5ec372adc..cd3ca99aea 100644 --- a/src/packages/steps/steps.scss +++ b/src/packages/steps/steps.scss @@ -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 */ @@ -131,7 +131,7 @@ &-head { justify-content: center; - margin-bottom: 5px; + margin-bottom: scale-px(5px); &-dot-wrap, &-icon-wrap, @@ -158,7 +158,7 @@ &-title { height: auto; - line-height: 20px; + line-height: scale-px(20px); white-space: normal; overflow-wrap: break-word; text-align: center; @@ -210,8 +210,8 @@ } &-line { - height: calc(100% - 4px); - width: 1px; + height: calc(100% - scale-px(4px)); + width: scale-px(1px); bottom: 0; &-inner { @@ -222,7 +222,7 @@ &-head { align-items: center; justify-content: center; - height: 20px; + height: scale-px(20px); &-icon { width: $steps-vertical-head-icon-size; @@ -239,7 +239,7 @@ flex: 1; min-width: 0; height: auto; - margin-left: 8px; + margin-left: scale-px(8px); } &-title { @@ -276,23 +276,23 @@ } &-head-dot-wrap { - height: calc($steps-base-head-dot-size + 8px); + height: calc($steps-base-head-dot-size + scale-px(8px)); } &-head-icon-wrap { - height: calc($steps-vertical-head-icon-size + 8px); + height: calc($steps-vertical-head-icon-size + scale-px(8px)); } &-head-text-wrap { - height: calc($steps-base-head-text-size + 8px); + height: calc($steps-base-head-text-size + scale-px(8px)); } } &-icon { .nut-step { &-head { - width: calc($steps-vertical-head-icon-size + 1px); - min-width: calc($steps-vertical-head-icon-size + 1px); + width: calc($steps-vertical-head-icon-size + scale-px(1px)); + min-width: calc($steps-vertical-head-icon-size + scale-px(1px)); } &-line { @@ -304,7 +304,7 @@ &-dot { .nut-step { &-head { - width: calc($steps-base-head-dot-size + 1px); + width: calc($steps-base-head-dot-size + scale-px(1px)); } &-line { @@ -316,8 +316,8 @@ &-text { .nut-step { &-head { - width: calc($steps-base-head-text-size + 1px); - min-width: calc($steps-base-head-text-size + 1px); + width: calc($steps-base-head-text-size + scale-px(1px)); + min-width: calc($steps-base-head-text-size + scale-px(1px)); } &-line { diff --git a/src/packages/swipe/swipe.scss b/src/packages/swipe/swipe.scss index 4621183833..8d4135bbf1 100644 --- a/src/packages/swipe/swipe.scss +++ b/src/packages/swipe/swipe.scss @@ -27,14 +27,14 @@ &-left { left: 0; - transform: translate(-100%, 0px); + transform: translate(-100%, 0); } &-right { display: flex; //left: 100%; height: 100%; - right: 0px; - transform: translate(100%, 0px); + right: 0; + transform: translate(100%, 0); } } 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 193c5d204d..f2e41740fc 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: 0; 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,11 +26,11 @@ 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; + margin: 0 scale-px(4px) 0 scale-px(6px); font-size: $font-size-base; } .nut-badge-sup { @@ -44,8 +44,8 @@ &-fixed { position: fixed; - bottom: 0px; - left: 0px; + bottom: 0; + left: 0; } } @@ -58,6 +58,6 @@ &-fixed { left: auto; - right: 0px; + right: 0; } } diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss index 40acfe77ab..fc20e64d0e 100644 --- a/src/packages/tabbaritem/tabbaritem.scss +++ b/src/packages/tabbaritem/tabbaritem.scss @@ -5,13 +5,13 @@ 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; + width: scale-px(24px); + height: scale-px(24px); font-size: $font-size-xxl; /* #ifdef harmony dynamic*/ color: $tabbar-inactive-color; @@ -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..dde07f51bc 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: 0; + 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 a98beb4e36..56f86215a3 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); } } @@ -100,8 +100,8 @@ } &-smile-icon { - width: 40px; - height: 20px; + width: scale-px(40px); + height: scale-px(20px); } &-active { @@ -128,8 +128,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; @@ -172,14 +172,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 { @@ -195,7 +195,7 @@ } &-divider { - border-bottom: 1px solid $color-border; + border-bottom: scale-px(1px) solid $color-border; .nut-tabs-titles-item { position: relative; @@ -206,7 +206,7 @@ right: 0; top: 50%; height: 50%; - width: 1px; + width: scale-px(1px); background: $color-border; transform: translateY(-50%); } @@ -224,12 +224,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; } @@ -265,14 +265,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); @@ -311,7 +311,7 @@ .nut-tabs-titles-item-smile { left: 50%; right: auto; - bottom: -3px; + bottom: scale-px(-3px); transform: translate(-50%, 0) rotate(0deg); } } @@ -366,7 +366,7 @@ &-line { .nut-tabs-titles-item { padding-left: 0; - padding-right: 14px; + padding-right: scale-px(14px); } } } @@ -375,11 +375,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 3b23ef41f8..ff59a9050d 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 { @@ -90,6 +90,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..07aede91d7 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; @@ -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 4cb47454eb..fa8552ff76 100644 --- a/src/packages/timeselect/timeselect.scss +++ b/src/packages/timeselect/timeselect.scss @@ -5,7 +5,7 @@ background-color: $color-background-overlay; display: flex; flex-direction: column; - height: calc(100% - 50px); + height: calc(100% - scale-px(50px)); &-content { display: flex; @@ -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..59a812894d 100644 --- a/src/packages/toast/toast.scss +++ b/src/packages/toast/toast.scss @@ -44,7 +44,7 @@ flex-direction: column; justify-content: center; align-items: center; - min-width: 96px; + min-width: scale-px(96px); max-width: 60%; // max-width: 224px; box-sizing: border-box; @@ -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/demo.scss b/src/packages/tour/demo.scss index 7542d51005..d008a534ca 100644 --- a/src/packages/tour/demo.scss +++ b/src/packages/tour/demo.scss @@ -11,11 +11,11 @@ .index-header { display: flex; align-items: center; - height: 117px; + height: scale-px(117px); > img { - width: 67px; - height: 67px; - margin-right: 18px; + width: scale-px(67px); + height: scale-px(67px); + margin-right: scale-px(18px); flex-shrink: 0; } .info { @@ -23,12 +23,12 @@ flex-direction: column; h1 { margin: 0; - height: 48px; + height: scale-px(48px); font-size: 34px; color: rgba(51, 51, 51, 1); } p { - height: 18px; + height: scale-px(18px); font-size: 12px; color: rgba(154, 155, 157, 1); } @@ -41,13 +41,13 @@ } .tour-demo-img { img { - width: 20px; - height: 20px; - margin-right: 10px; + width: scale-px(20px); + height: scale-px(20px); + margin-right: scale-px(10px); } } .tour-demo-custom-content { - padding: 8px; + padding: scale-px(8px); display: flex; width: max-content; align-items: center; diff --git a/src/packages/tour/tour.scss b/src/packages/tour/tour.scss index 5b81ad72bb..5addd662c5 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: 0 0 0 150vh $color-mask; border-radius: $tour-mask-border-radius; z-index: 999; @@ -29,8 +29,8 @@ text-align: end; &-close { - width: 10px; - height: 10px; + width: scale-px(10px); + height: scale-px(10px); } } @@ -51,7 +51,7 @@ &-btn { display: inline-block; - border: 1px solid $color-text-disabled; + border: scale-px(1px) solid $color-text-disabled; margin-left: $tour-content-bottom-btn-margin-left; padding: $tour-content-bottom-btn-padding; font-size: $tour-content-bottom-btn-font-size; diff --git a/src/packages/trendarrow/demo.scss b/src/packages/trendarrow/demo.scss index ef519fee2f..aa95e6439e 100644 --- a/src/packages/trendarrow/demo.scss +++ b/src/packages/trendarrow/demo.scss @@ -1,5 +1,5 @@ .demo { .nut-trendarrow { - margin-right: 10px; + margin-right: scale-px(10px); } } diff --git a/src/packages/uploader/uploader.scss b/src/packages/uploader/uploader.scss index 6c9a4097cf..0772778c45 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; @@ -101,28 +101,28 @@ &.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: 0; + margin-bottom: 0; + 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; } } } @@ -235,7 +235,7 @@ &.list { margin-right: 0; - margin-left: 0px; + margin-left: 0; } .close { diff --git a/src/packages/virtuallist/virtuallist.scss b/src/packages/virtuallist/virtuallist.scss index 857f7829ca..f7d34e0eff 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; + 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: $font-size-m; - line-height: 18px; + 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); } } From 3a8441cd1efa87e1240a890a7a333aaf9b2f0824 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 12 May 2026 20:40:58 +0800 Subject: [PATCH 08/10] =?UTF-8?q?chore:=20=E9=AA=8C=E8=AF=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/barrage/demo.scss | 4 ++-- src/packages/calendar/demo.scss | 20 ++++++++++---------- src/packages/circleprogress/demo.scss | 4 ++-- src/packages/noticebar/demo.scss | 4 ++-- src/packages/overlay/demo.scss | 6 +++--- src/packages/popover/demo.scss | 8 ++++---- src/packages/tour/demo.scss | 20 ++++++++++---------- src/packages/trendarrow/demo.scss | 2 +- 8 files changed, 34 insertions(+), 34 deletions(-) diff --git a/src/packages/barrage/demo.scss b/src/packages/barrage/demo.scss index e04442d596..3f96259e05 100644 --- a/src/packages/barrage/demo.scss +++ b/src/packages/barrage/demo.scss @@ -3,6 +3,6 @@ } .barrage-demo-wrap, .barrage-demo { - padding: scale-px(20px) 0; - height: scale-px(150px); + padding: 20px 0; + height: 150px; } diff --git a/src/packages/calendar/demo.scss b/src/packages/calendar/demo.scss index 7749b65b92..4101628312 100644 --- a/src/packages/calendar/demo.scss +++ b/src/packages/calendar/demo.scss @@ -1,10 +1,10 @@ .nut-calendar { .nut-calendar-btns { - height: scale-px(40px); + height: 40px; display: flex; align-items: center; justify-content: space-evenly; - padding: 0 scale-px(20px); + padding: 0 20px; } .nut-calendar-date { @@ -18,27 +18,27 @@ .wrapper { display: flex; - padding: 0 scale-px(40px); + padding: 0 40px; } .d_div { - margin: 0 scale-px(5px); + margin: 0 5px; .d_btn { background: #fa3f19; color: #fff; font-size: 12px; - padding: scale-px(2px) scale-px(8px); - border-radius: scale-px(4px); + padding: 2px 8px; + border-radius: 4px; display: inline-block; - height: scale-px(20px); + height: 20px; } } .info { display: block; font-size: 12px; - line-height: scale-px(16px); + line-height: 16px; color: #999; } } @@ -49,10 +49,10 @@ } .desc { - padding: scale-px(10px); + padding: 10px; } .desc1 { - padding: scale-px(10px); + padding: 10px; } } diff --git a/src/packages/circleprogress/demo.scss b/src/packages/circleprogress/demo.scss index 04c609fa56..9c3a976f9e 100644 --- a/src/packages/circleprogress/demo.scss +++ b/src/packages/circleprogress/demo.scss @@ -2,10 +2,10 @@ min-height: 100vh; .demo-btn { - margin-top: scale-px(-16px); + margin-top: -16px; .nut-button { - margin-right: scale-px(10px); + margin-right: 10px; } } } diff --git a/src/packages/noticebar/demo.scss b/src/packages/noticebar/demo.scss index c89f71a88b..c8780a9b93 100644 --- a/src/packages/noticebar/demo.scss +++ b/src/packages/noticebar/demo.scss @@ -1,9 +1,9 @@ .demo { - padding-bottom: scale-px(30px) !important; + padding-bottom: 30px !important; } .interstroll-list { - padding: '0 scale-px(10px)'; + padding: '0 10px'; background: 'rgba(251, 248, 220, 1)'; color: '#d9500b'; } diff --git a/src/packages/overlay/demo.scss b/src/packages/overlay/demo.scss index 47e919e0da..60450e060e 100644 --- a/src/packages/overlay/demo.scss +++ b/src/packages/overlay/demo.scss @@ -7,10 +7,10 @@ .content { display: flex; - width: scale-px(150px); - height: scale-px(150px); + width: 150px; + height: 150px; background: #fff; - border-radius: scale-px(8px); + border-radius: 8px; align-items: center; justify-content: center; color: red; diff --git a/src/packages/popover/demo.scss b/src/packages/popover/demo.scss index 7915a21452..fab7013aa4 100644 --- a/src/packages/popover/demo.scss +++ b/src/packages/popover/demo.scss @@ -1,13 +1,13 @@ .brickBox { - margin: scale-px(80px) 0; + margin: 80px 0; display: flex; justify-content: center; .brick { - width: scale-px(60px); - height: scale-px(60px); + width: 60px; + height: 60px; background: linear-gradient(135deg, #ff0f23 0%, #fa6419 100%); - border-radius: scale-px(10px); + border-radius: 10px; } } diff --git a/src/packages/tour/demo.scss b/src/packages/tour/demo.scss index d008a534ca..7542d51005 100644 --- a/src/packages/tour/demo.scss +++ b/src/packages/tour/demo.scss @@ -11,11 +11,11 @@ .index-header { display: flex; align-items: center; - height: scale-px(117px); + height: 117px; > img { - width: scale-px(67px); - height: scale-px(67px); - margin-right: scale-px(18px); + width: 67px; + height: 67px; + margin-right: 18px; flex-shrink: 0; } .info { @@ -23,12 +23,12 @@ flex-direction: column; h1 { margin: 0; - height: scale-px(48px); + height: 48px; font-size: 34px; color: rgba(51, 51, 51, 1); } p { - height: scale-px(18px); + height: 18px; font-size: 12px; color: rgba(154, 155, 157, 1); } @@ -41,13 +41,13 @@ } .tour-demo-img { img { - width: scale-px(20px); - height: scale-px(20px); - margin-right: scale-px(10px); + width: 20px; + height: 20px; + margin-right: 10px; } } .tour-demo-custom-content { - padding: scale-px(8px); + padding: 8px; display: flex; width: max-content; align-items: center; diff --git a/src/packages/trendarrow/demo.scss b/src/packages/trendarrow/demo.scss index aa95e6439e..ef519fee2f 100644 --- a/src/packages/trendarrow/demo.scss +++ b/src/packages/trendarrow/demo.scss @@ -1,5 +1,5 @@ .demo { .nut-trendarrow { - margin-right: scale-px(10px); + margin-right: 10px; } } From 02c5b050afd7d7cf8718bb851e9a2aaa8b938388 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 12 May 2026 20:45:53 +0800 Subject: [PATCH 09/10] =?UTF-8?q?feat:=20=E6=9C=AC=E5=9C=B0=E8=84=9A?= =?UTF-8?q?=E6=9C=AC=E9=AA=8C=E8=AF=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .cursor/skills/nutui-build-local-verify/SKILL.md | 12 +++++++++++- .../scripts/verify-scale-generation.mjs | 8 ++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/.cursor/skills/nutui-build-local-verify/SKILL.md b/.cursor/skills/nutui-build-local-verify/SKILL.md index 3bf8c38ffa..d498ff7afc 100644 --- a/.cursor/skills/nutui-build-local-verify/SKILL.md +++ b/.cursor/skills/nutui-build-local-verify/SKILL.md @@ -1,6 +1,6 @@ --- name: nutui-build-local-verify -description: NutUI 比例缩放本地验证——默认就地覆盖：每个组件 SCSS 写回 src/packages 下同一路径（如 actionsheet/actionsheet.scss→同文件）；--mirror 才写到 scale-verify/ 对照。不写 build。 +description: NutUI 比例缩放本地验证——写回 src/packages 下同路径组件 SCSS（跳过 src/packages/**/demo.scss 与 demos）；--mirror 写 scale-verify/；不写 build。 disable-model-invocation: true --- @@ -10,6 +10,8 @@ disable-model-invocation: true **只做一步**：用 `scripts/px-to-scale-px-in-component-scss.cjs` 把组件 SCSS 里裸 `px` 转成 `scale-px` 等，并把结果写回磁盘。 +**不扫描、不写入**：**`src/packages/<组件名>/demo.scss`**（各组件目录根下的单文件）、`**/demos/**`、路径中含 **`/demo/`**、测试与快照目录下的 `.scss`（与官方 `build.mjs` 里对 `**/demo.scss` 的 ignore 一致）。 + - **默认（就地覆盖）**：对每个匹配的 `.scss`，**读、写都是同一路径**——相对 `src/packages` 的路径不变。例如 `src/packages/actionsheet/actionsheet.scss` 转换后仍写回该文件，不会改到别的目录或改名。 - **`--mirror`**：不写源码；结果写到 **`scale-verify/<与 src/packages 相同的相对路径>`**（例如 `scale-verify/actionsheet/actionsheet.scss`），便于 diff。 @@ -19,6 +21,14 @@ disable-model-invocation: true 在 **nutui-react 仓库根目录** 执行。**务必先 commit / stash**，用完 `git restore src/packages` 或 `git checkout -- src/packages` 恢复。 +若只需还原 **`src/packages/<组件>/demo.scss`**（当前脚本已跳过；若曾被旧版本误改）： + +```bash +find src/packages -name 'demo.scss' -exec git restore -- {} \; +``` + +**然后**在仓库根执行验证： + ```bash pnpm run verify-scale ``` diff --git a/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs b/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs index 92dc337a82..e3922ada2e 100644 --- a/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs +++ b/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs @@ -1,7 +1,8 @@ #!/usr/bin/env node /** - * 默认：每个文件读自且写回 src/packages 下同一路径（如 …/actionsheet/actionsheet.scss）。 - * 不包含 build；自行 git diff / 恢复即可。 + * 本地验证：默认就地写回 src/packages 下同一路径的组件 .scss（如 …/actionsheet/actionsheet.scss）。 + * 跳过 src/packages/**/demo.scss、demos、测试与快照（与 build.mjs ignore 一致）。 + * --mirror 只写 scale-verify/；不包含 build；自行 git diff / 恢复即可。 */ import fs from 'node:fs/promises' import path from 'path' @@ -32,6 +33,9 @@ function isScssFile(name) { function shouldSkip(relPath) { const p = relPath.replaceAll('\\', '/') + // 与 build.mjs 的 ignore 一致：**/demo.scss 不参与 px→scale 写回 + if (path.posix.basename(p) === 'demo.scss') return true + if (p.includes('/demo/')) return true if (p.includes('/demos/')) return true if (p.includes('/__test__/')) return true if (p.includes('/__tests__/')) return true From 2d7eac193174d4085fe3f41bedd954f03eab5dfc Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Thu, 14 May 2026 14:27:35 +0800 Subject: [PATCH 10/10] =?UTF-8?q?style:=20=E5=9F=BA=E7=A1=80=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E5=8F=98=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/theme-dark.scss | 152 +++++++++++++++++++++------------- src/styles/theme-default.scss | 152 +++++++++++++++++++++------------- src/styles/variables.scss | 4 +- src/utils/scale-f.ts | 10 +-- 4 files changed, 192 insertions(+), 126 deletions(-) diff --git a/src/styles/theme-dark.scss b/src/styles/theme-dark.scss index f756fe4a62..934a2e263a 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)) + ); // 字号语义化 // 徽标文字 @@ -301,22 +335,22 @@ page { --nutui-text-align: left; // space - --nutui-spacing-1: 1px; - --nutui-spacing-2: 2px; - --nutui-spacing-3: 3px; - --nutui-spacing-4: 4px; - --nutui-spacing-5: 5px; - --nutui-spacing-6: 6px; - --nutui-spacing-7: 7px; - --nutui-spacing-8: 8px; - --nutui-spacing-9: 9px; - --nutui-spacing-10: 10px; - --nutui-spacing-11: 11px; - --nutui-spacing-12: 12px; - --nutui-spacing-13: 13px; - --nutui-spacing-14: 14px; - --nutui-spacing-15: 15px; - --nutui-spacing-16: 16px; + --nutui-spacing-1: calc(1px * var(--nut-scale-f, 1)); + --nutui-spacing-2: calc(2px * var(--nut-scale-f, 1)); + --nutui-spacing-3: calc(3px * var(--nut-scale-f, 1)); + --nutui-spacing-4: calc(4px * var(--nut-scale-f, 1)); + --nutui-spacing-5: calc(5px * var(--nut-scale-f, 1)); + --nutui-spacing-6: calc(6px * var(--nut-scale-f, 1)); + --nutui-spacing-7: calc(7px * var(--nut-scale-f, 1)); + --nutui-spacing-8: calc(8px * var(--nut-scale-f, 1)); + --nutui-spacing-9: calc(9px * var(--nut-scale-f, 1)); + --nutui-spacing-10: calc(10px * var(--nut-scale-f, 1)); + --nutui-spacing-11: calc(11px * var(--nut-scale-f, 1)); + --nutui-spacing-12: calc(12px * var(--nut-scale-f, 1)); + --nutui-spacing-13: calc(13px * var(--nut-scale-f, 1)); + --nutui-spacing-14: calc(14px * var(--nut-scale-f, 1)); + --nutui-spacing-15: calc(15px * var(--nut-scale-f, 1)); + --nutui-spacing-16: calc(16px * var(--nut-scale-f, 1)); // space 语义化 // 狭小空间内的紧密关联内容 @@ -338,30 +372,30 @@ page { // radius ok --nutui-radius-0: 0px; - --nutui-radius-1: 1px; - --nutui-radius-2: 2px; - --nutui-radius-3: 3px; - --nutui-radius-4: 4px; - --nutui-radius-5: 5px; - --nutui-radius-6: 6px; - --nutui-radius-7: 7px; - --nutui-radius-8: 8px; - --nutui-radius-9: 9px; - --nutui-radius-10: 10px; - --nutui-radius-11: 11px; - --nutui-radius-12: 12px; - --nutui-radius-13: 13px; - --nutui-radius-14: 14px; - --nutui-radius-15: 15px; - --nutui-radius-16: 16px; - --nutui-radius-17: 17px; - --nutui-radius-18: 18px; - --nutui-radius-19: 19px; - --nutui-radius-20: 20px; - --nutui-radius-21: 21px; - --nutui-radius-22: 22px; - --nutui-radius-23: 23px; - --nutui-radius-24: 24px; + --nutui-radius-1: calc(1px * var(--nut-scale-f, 1)); + --nutui-radius-2: calc(2px * var(--nut-scale-f, 1)); + --nutui-radius-3: calc(3px * var(--nut-scale-f, 1)); + --nutui-radius-4: calc(4px * var(--nut-scale-f, 1)); + --nutui-radius-5: calc(5px * var(--nut-scale-f, 1)); + --nutui-radius-6: calc(6px * var(--nut-scale-f, 1)); + --nutui-radius-7: calc(7px * var(--nut-scale-f, 1)); + --nutui-radius-8: calc(8px * var(--nut-scale-f, 1)); + --nutui-radius-9: calc(9px * var(--nut-scale-f, 1)); + --nutui-radius-10: calc(10px * var(--nut-scale-f, 1)); + --nutui-radius-11: calc(11px * var(--nut-scale-f, 1)); + --nutui-radius-12: calc(12px * var(--nut-scale-f, 1)); + --nutui-radius-13: calc(13px * var(--nut-scale-f, 1)); + --nutui-radius-14: calc(14px * var(--nut-scale-f, 1)); + --nutui-radius-15: calc(15px * var(--nut-scale-f, 1)); + --nutui-radius-16: calc(16px * var(--nut-scale-f, 1)); + --nutui-radius-17: calc(17px * var(--nut-scale-f, 1)); + --nutui-radius-18: calc(18px * var(--nut-scale-f, 1)); + --nutui-radius-19: calc(19px * var(--nut-scale-f, 1)); + --nutui-radius-20: calc(20px * var(--nut-scale-f, 1)); + --nutui-radius-21: calc(21px * var(--nut-scale-f, 1)); + --nutui-radius-22: calc(22px * var(--nut-scale-f, 1)); + --nutui-radius-23: calc(23px * var(--nut-scale-f, 1)); + --nutui-radius-24: calc(24px * var(--nut-scale-f, 1)); // radius 语义化 // 内容描述型的详情页面通栏结构 diff --git a/src/styles/theme-default.scss b/src/styles/theme-default.scss index 8a6e02923c..118f158f1f 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)) + ); // 字号语义化 // 徽标文字 @@ -302,22 +336,22 @@ page { --nutui-text-align: left; // space - --nutui-spacing-1: 1px; - --nutui-spacing-2: 2px; - --nutui-spacing-3: 3px; - --nutui-spacing-4: 4px; - --nutui-spacing-5: 5px; - --nutui-spacing-6: 6px; - --nutui-spacing-7: 7px; - --nutui-spacing-8: 8px; - --nutui-spacing-9: 9px; - --nutui-spacing-10: 10px; - --nutui-spacing-11: 11px; - --nutui-spacing-12: 12px; - --nutui-spacing-13: 13px; - --nutui-spacing-14: 14px; - --nutui-spacing-15: 15px; - --nutui-spacing-16: 16px; + --nutui-spacing-1: calc(1px * var(--nut-scale-f, 1)); + --nutui-spacing-2: calc(2px * var(--nut-scale-f, 1)); + --nutui-spacing-3: calc(3px * var(--nut-scale-f, 1)); + --nutui-spacing-4: calc(4px * var(--nut-scale-f, 1)); + --nutui-spacing-5: calc(5px * var(--nut-scale-f, 1)); + --nutui-spacing-6: calc(6px * var(--nut-scale-f, 1)); + --nutui-spacing-7: calc(7px * var(--nut-scale-f, 1)); + --nutui-spacing-8: calc(8px * var(--nut-scale-f, 1)); + --nutui-spacing-9: calc(9px * var(--nut-scale-f, 1)); + --nutui-spacing-10: calc(10px * var(--nut-scale-f, 1)); + --nutui-spacing-11: calc(11px * var(--nut-scale-f, 1)); + --nutui-spacing-12: calc(12px * var(--nut-scale-f, 1)); + --nutui-spacing-13: calc(13px * var(--nut-scale-f, 1)); + --nutui-spacing-14: calc(14px * var(--nut-scale-f, 1)); + --nutui-spacing-15: calc(15px * var(--nut-scale-f, 1)); + --nutui-spacing-16: calc(16px * var(--nut-scale-f, 1)); // space 语义化 // 狭小空间内的紧密关联内容 @@ -339,30 +373,30 @@ page { // radius ok --nutui-radius-0: 0px; - --nutui-radius-1: 1px; - --nutui-radius-2: 2px; - --nutui-radius-3: 3px; - --nutui-radius-4: 4px; - --nutui-radius-5: 5px; - --nutui-radius-6: 6px; - --nutui-radius-7: 7px; - --nutui-radius-8: 8px; - --nutui-radius-9: 9px; - --nutui-radius-10: 10px; - --nutui-radius-11: 11px; - --nutui-radius-12: 12px; - --nutui-radius-13: 13px; - --nutui-radius-14: 14px; - --nutui-radius-15: 15px; - --nutui-radius-16: 16px; - --nutui-radius-17: 17px; - --nutui-radius-18: 18px; - --nutui-radius-19: 19px; - --nutui-radius-20: 20px; - --nutui-radius-21: 21px; - --nutui-radius-22: 22px; - --nutui-radius-23: 23px; - --nutui-radius-24: 24px; + --nutui-radius-1: calc(1px * var(--nut-scale-f, 1)); + --nutui-radius-2: calc(2px * var(--nut-scale-f, 1)); + --nutui-radius-3: calc(3px * var(--nut-scale-f, 1)); + --nutui-radius-4: calc(4px * var(--nut-scale-f, 1)); + --nutui-radius-5: calc(5px * var(--nut-scale-f, 1)); + --nutui-radius-6: calc(6px * var(--nut-scale-f, 1)); + --nutui-radius-7: calc(7px * var(--nut-scale-f, 1)); + --nutui-radius-8: calc(8px * var(--nut-scale-f, 1)); + --nutui-radius-9: calc(9px * var(--nut-scale-f, 1)); + --nutui-radius-10: calc(10px * var(--nut-scale-f, 1)); + --nutui-radius-11: calc(11px * var(--nut-scale-f, 1)); + --nutui-radius-12: calc(12px * var(--nut-scale-f, 1)); + --nutui-radius-13: calc(13px * var(--nut-scale-f, 1)); + --nutui-radius-14: calc(14px * var(--nut-scale-f, 1)); + --nutui-radius-15: calc(15px * var(--nut-scale-f, 1)); + --nutui-radius-16: calc(16px * var(--nut-scale-f, 1)); + --nutui-radius-17: calc(17px * var(--nut-scale-f, 1)); + --nutui-radius-18: calc(18px * var(--nut-scale-f, 1)); + --nutui-radius-19: calc(19px * var(--nut-scale-f, 1)); + --nutui-radius-20: calc(20px * var(--nut-scale-f, 1)); + --nutui-radius-21: calc(21px * var(--nut-scale-f, 1)); + --nutui-radius-22: calc(22px * var(--nut-scale-f, 1)); + --nutui-radius-23: calc(23px * var(--nut-scale-f, 1)); + --nutui-radius-24: calc(24px * var(--nut-scale-f, 1)); // radius 语义化 // 内容描述型的详情页面通栏结构 diff --git a/src/styles/variables.scss b/src/styles/variables.scss index e111fa0d27..05c8c4ada1 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,9 +1,11 @@ // ---------------------------------------------------- // 缩放系数 -:root { +:root, +page { --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)) diff --git a/src/utils/scale-f.ts b/src/utils/scale-f.ts index 104e3f1634..c05cfc4ee6 100644 --- a/src/utils/scale-f.ts +++ b/src/utils/scale-f.ts @@ -39,10 +39,6 @@ export type ScaleProfile = 'standard' | 'large' | 'elderly' 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 场景的相对倍率 */ @@ -88,7 +84,7 @@ function formatScaleValue(nextScale: number) { /** 根据屏宽粗略区分 phone / pad */ function getCurrentDevice(): ScaleDevice { if (!canUseDom) return 'phone' - return window.innerWidth >= PAD_BREAKPOINT ? 'pad' : 'phone' + return window.innerWidth >= 600 ? 'pad' : 'phone' } /** 在 profile 与 scene 维度上叠加额外倍率（与全局 scale 相乘） */ @@ -124,8 +120,8 @@ function getScaleByViewport() { if (!deviceWidth) return 1 - if (deviceWidth >= PAD_BREAKPOINT) { - return PAD_SCALE + if (deviceWidth >= 600) { + return 1.2 } if (deviceWidth >= 375 && deviceWidth < 600) {