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..d498ff7afc
--- /dev/null
+++ b/.cursor/skills/nutui-build-local-verify/SKILL.md
@@ -0,0 +1,72 @@
+---
+name: nutui-build-local-verify
+description: NutUI 比例缩放本地验证——写回 src/packages 下同路径组件 SCSS（跳过 src/packages/**/demo.scss 与 demos）；--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` 等，并把结果写回磁盘。
+
+**不扫描、不写入**：**`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。
+
+之后是否再跑 `pnpm run build`、是否用别的工具核对，由你自行决定；本 skill **不要求** build。
+
+## 覆盖原 SCSS（推荐）
+
+在 **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
+```
+
+等价：
+
+```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..e3922ada2e
--- /dev/null
+++ b/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs
@@ -0,0 +1,136 @@
+#!/usr/bin/env node
+/**
+ * 本地验证：默认就地写回 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'
+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('\\', '/')
+  // 与 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
+  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/.cursor/skills/nutui-proportional-scaling/SKILL.md b/.cursor/skills/nutui-proportional-scaling/SKILL.md
index 057b43070d..4c2fcc482d 100644
--- a/.cursor/skills/nutui-proportional-scaling/SKILL.md
+++ b/.cursor/skills/nutui-proportional-scaling/SKILL.md
@@ -4,10 +4,13 @@ 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.
+  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 等比适配
@@ -48,6 +51,12 @@ 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），**不写回\*\*仓库里的组件 SCSS。
+- 源码里可继续手写 **`scale-px` / `scale-font-px` / `scale-icon-px`**；构建不会重复嵌套 `scale-px`。
+- 该脚本对 **`calc(...)` 体内同时含 `$` 与 `/`** 的整段先做占位再替换裸 `px`，避免 postcss-scss 把 **`calc($var / 2)`** 等拆坏；其它 `calc` 内的裸 `Npx` 仍会按规则转为 `scale-px`。
+
 ---
 
 ## 3. 提交里固化的规范（务必遵守）
@@ -70,6 +79,21 @@ 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-*` 阶梯，或组件专用变量）。
+- 若是内联 `<svg>`（非 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` 的操作数**即可。
+- **与 `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. 业务接入清单
@@ -85,6 +109,9 @@ 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)`**，避免无必要的 **`#{}`**。
+- [ ] 组件 `.tsx` 是否仍有写死图标尺寸（`size/width/height`）；如有，是否已改为 **class + SCSS 变量**（内联 `svg` 同理）。
 - [ ] TS 侧改 `scale-f*` 已同步考虑 **Taro** 文件。
 - [ ] 修改 `formatScaleValue` / 断点时，已通读 **视口与平板常量** 是否仍与文档、设计一致。
 
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",
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/avatarcropper/avatarcropper.taro.tsx b/src/packages/avatarcropper/avatarcropper.taro.tsx
index f227f259b2..ee184339f9 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({
@@ -694,5 +693,4 @@ export const AvatarCropper: FunctionComponent<
     </>
   )
 }
-
 AvatarCropper.displayName = 'NutAvatarCropper'
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/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/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..ccd2667370 100644
--- a/src/packages/calendarcard/calendarcard.scss
+++ b/src/packages/calendarcard/calendarcard.scss
@@ -1,9 +1,8 @@
 .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;
   color: $color-title;
 
   &-header {
@@ -12,21 +11,21 @@
     align-items: center;
     justify-content: space-between;
     font-weight: normal;
+    line-height: $line-height-l;
 
     &-left,
     &-right {
       display: flex;
       flex-direction: row;
       cursor: pointer;
-      margin: scale-px(16px);
-      line-height: 1;
+      margin: 16px;
 
       .left {
-        margin-left: scale-px(8px);
+        margin-left: 8px;
       }
 
       .right {
-        margin-right: scale-px(8px);
+        margin-right: 8px;
       }
     }
   }
@@ -51,9 +50,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 +72,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 +151,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..a940cbb596 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,11 +23,11 @@
 
   &-right {
     flex: 1;
-    padding: 0 scale-px(10px) scale-px(8px);
+    padding: 0 10px 8px;
 
     &-title {
       @include moreline-ellipsis();
-      line-height: 1.5;
+      line-height: $line-height-2xl;
       font-size: $font-size-base;
       color: $color-title;
     }
@@ -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;
       }
     }
@@ -69,10 +69,10 @@
       align-items: center;
 
       &-name {
-        line-height: 1.5;
+        line-height: $line-height-xl;
         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..93d3c5ab35 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 {
@@ -103,35 +103,35 @@
       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;
     }
 
     .nut-checkbox-button-icon-checked {
-      width: scale-px(12px);
-      height: scale-px(12px);
+      width: 12px;
+      height: 12px;
       position: absolute;
       color: $white;
-      right: 0px;
+      right: 0;
       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/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/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..ce1b9300d4 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 0px 0px 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 0px 0px 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: 0px 25px 25px 0px;
       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..bb0c1dcdf9 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,25 +26,25 @@
 
       .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);
-      font-size: scale-font-px(20px);
+      width: 20px;
+      height: 20px;
+      font-size: $font-size-2xl;
     }
   }
 
@@ -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/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<
     <View className={classes} style={style}>
       <View className={`${classPrefix}-minus`} onClick={handleReduce}>
         <Minus
-          size={10}
           className={classNames(
             `${classPrefix}-icon ${classPrefix}-icon-minus`,
             {
@@ -211,7 +210,6 @@ export const InputNumber: FunctionComponent<
 
       <View className={`${classPrefix}-add`} onClick={handlePlus}>
         <Plus
-          size={10}
           className={classNames(
             `${classPrefix}-icon ${classPrefix}-icon-plus`,
             {
diff --git a/src/packages/lottie/lottiemp.taro.tsx b/src/packages/lottie/lottiemp.taro.tsx
index 82790d79e8..5dd321c581 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'
@@ -20,10 +20,15 @@ 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)
-  useLayoutEffect(() => {
+  useReady(() => {
     createSelectorQuery()
       .select(`#${id}`)
       .fields(
@@ -57,14 +62,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,8 +72,7 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
         }
       )
       .exec()
-  }, [autoPlay, dpr, id, loop, onComplete, source, speed, style])
-
+  })
   useUnload(() => {
     onComplete &&
       animation.current &&
diff --git a/src/packages/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/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/menuitem/menuitem.taro.tsx b/src/packages/menuitem/menuitem.taro.tsx
index fb50e8ab8a..c4659bad1e 100644
--- a/src/packages/menuitem/menuitem.taro.tsx
+++ b/src/packages/menuitem/menuitem.taro.tsx
@@ -233,7 +233,6 @@ export const MenuItem = forwardRef((props: Partial<WebMenuItemProps>, ref) => {
                       ) : (
                         <Check
                           color={activeColor}
-                          size={16}
                           className={`nut-menu-container-item-icon ${getIconCName(item.value, value)}`}
                         />
                       )}
diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss
index 701c006fa5..04bbd95fb3 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);
-      font-size: scale-font-px(20px);
+      width: 20px;
+      height: 20px;
+      font-size: $font-size-2xl;
     }
 
     /* #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..ca406526d2 100644
--- a/src/packages/noticebar/noticebar.scss
+++ b/src/packages/noticebar/noticebar.scss
@@ -68,12 +68,17 @@
       margin-left: $noticebar-icon-gap;
 
       .nut-icon {
-        width: scale-px(12px);
-        height: scale-px(12px);
+        width: 12px;
+        height: 12px;
         color: $noticebar-color;
       }
     }
 
+    &-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: <Notice size={16} />,
+  leftIcon: <Notice />,
   rightIcon: null,
   right: null,
   delay: 1,
@@ -490,7 +490,9 @@ export const NoticeBar: FunctionComponent<
             className="nut-noticebar-box-right-icon"
             onClick={handleClickIcon}
           >
-            {rightIcon || <Close size={12} />}
+            {rightIcon || (
+              <Close className="nut-noticebar-box-right-icon-default" />
+            )}
           </View>
         ) : 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: <Notice width={16} height={16} />,
+  leftIcon: <Notice />,
   rightIcon: null,
   right: null,
   delay: 1,
@@ -475,7 +475,9 @@ export const NoticeBar: FunctionComponent<
           ) : null}
           {closeable || rightIcon ? (
             <div className="nut-noticebar-box-right-icon" onClick={onClickIcon}>
-              {rightIcon || <Close width={12} height={12} />}
+              {rightIcon || (
+                <Close className="nut-noticebar-box-right-icon-default" />
+              )}
             </div>
           ) : null}
         </div>
@@ -534,7 +536,10 @@ export const NoticeBar: FunctionComponent<
               handleClickIcon(e)
             }}
           >
-            {rightIcon || (closeable ? <Close width={12} height={12} /> : null)}
+            {rightIcon ||
+              (closeable ? (
+                <Close className="nut-noticebar-box-right-icon-default" />
+              ) : null)}
           </div>
         </div>
       ) : null}
diff --git a/src/packages/notify/notify.scss b/src/packages/notify/notify.scss
index 1b6c2d7c33..56937a7dd3 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,23 @@
   }
 
   &-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;
     }
   }
+
+  &-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<Partial<TaroNotifyProps>> & {
             className={`${classPrefix}-right-icon`}
             onClick={handleClickIcon}
           >
-            {rightIcon || (closeable ? <Close size={12} /> : null)}
+            {rightIcon ||
+              (closeable ? (
+                <Close className={`${classPrefix}-close-icon`} />
+              ) : null)}
           </View>
         ) : null}
       </View>
diff --git a/src/packages/numberkeyboard/numberkeyboard.scss b/src/packages/numberkeyboard/numberkeyboard.scss
index b0ad39a6a2..089c1085ad 100644
--- a/src/packages/numberkeyboard/numberkeyboard.scss
+++ b/src/packages/numberkeyboard/numberkeyboard.scss
@@ -2,8 +2,13 @@
 
 .nut-numberkeyboard {
   &-close-icon {
-    width: scale-icon-px(18px);
-    height: scale-icon-px(18px);
+    width: $icon-size-18;
+    height: $icon-size-18;
+  }
+
+  &-delete-icon {
+    width: 28px;
+    height: 28px;
   }
 
   width: 100%;
@@ -46,7 +51,7 @@
 
   &-body {
     display: flex;
-    padding: scale-px(6px) 0 0 scale-px(6px);
+    padding: 6px 0 0 6px;
 
     &-keys {
       display: flex;
@@ -64,7 +69,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 +103,8 @@
       .key {
         position: absolute;
         top: 0;
-        right: scale-px(6px);
-        bottom: scale-px(6px);
+        right: 6px;
+        bottom: 6px;
         left: 0;
         height: auto;
       }
@@ -128,9 +133,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 +145,7 @@
     &-sidebar {
       .nut-numberkeyboard-body-wrapper {
         .key {
-          left: scale-px(6px);
+          left: 6px;
           right: 0;
           &.delete {
             transform: rotate(-180deg);
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 (
-      <svg viewBox="0 0 1024 1024" width="28" height="28">
+      <svg viewBox="0 0 1024 1024" className={`${classPrefix}-delete-icon`}>
         <path
           d="M875.594 186.122H390.803a51.162 51.162 0 0 0-36.18 14.986L79.91 475.821a51.166 51.166 0 0 0 0 72.358l274.714 274.712a51.164 51.164 0 0 0 36.179 14.986h484.791c46.033 0 83.484-37.45 83.484-83.483V269.606c.001-46.033-37.45-83.484-83.483-83.484zm32.32 568.274c0 17.85-14.473 32.318-32.32 32.318H390.803L116.089 512l274.714-274.714h484.791c17.849 0 32.32 14.47 32.32 32.32v484.789z"
           fill="currentColor"
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}
       </div>
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/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<
           <View className="nut-popover-content-group" ref={popoverContentRef}>
             {showArrow && (
               <View className={popoverArrow()} style={popoverArrowStyle()}>
-                <ArrowRadius width={8} height={4} />
+                <ArrowRadius />
               </View>
             )}
             {Array.isArray(children) ? children[1] : null}
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/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/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..66983ef493 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,34 +75,34 @@
     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,
       .nut-icon {
-        width: scale-icon-px(22px);
-        height: scale-icon-px(22px);
+        width: $icon-size-22;
+        height: $icon-size-22;
       }
     }
 
@@ -110,13 +110,13 @@
       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;
-      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..319f5d60da 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);
       }
     }
 
@@ -110,18 +110,18 @@
     &-normal {
       padding-left: $rate-item-margin;
       font-size: $rate-font-size;
-      line-height: $rate-font-size;
+      line-height: $line-height-s;
     }
 
     &-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: $line-height-xl;
       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: $line-height-xxs;
       padding-left: calc($rate-item-margin / 2);
     }
 
@@ -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/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<Partial<TaroRateProps>> = (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<Partial<TaroRateProps>> = (props) => {
         })
       }
     }
-  }, [refs])
+  }
 
-  useLayoutEffect(() => {
+  useReady(() => {
     updateRects()
-  }, [updateRects])
+  })
 
   const handleTouchStart = (e: any) => {
     if (!touchable || readOnly || disabled) {
diff --git a/src/packages/resultpage/resultpage.scss b/src/packages/resultpage/resultpage.scss
index 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..a3b8482372 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 {
@@ -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;
       }
@@ -95,27 +95,27 @@
     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 {
-      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: 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..373976ce8d 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;
@@ -23,7 +23,7 @@
   border-radius: $segmented-item-radius;
   color: $segmented-item-color;
   font-size: $segmented-item-fontsize;
-  line-height: $segmented-item-fontsize;
+  line-height: $line-height-s;
   box-sizing: border-box;
 }
 
@@ -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..04a13eb785 100644
--- a/src/packages/shortpassword/shortpassword.scss
+++ b/src/packages/shortpassword/shortpassword.scss
@@ -2,15 +2,15 @@
 
 .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;
   }
 
   &-title {
     display: flex;
     justify-content: center;
-    line-height: $font-size-l;
+    line-height: $line-height-l;
     font-size: $font-size-l;
     color: $color-title;
   }
@@ -18,15 +18,15 @@
   &-description {
     display: flex;
     justify-content: center;
-    margin-top: scale-px(12px);
-    margin-bottom: scale-px(24px);
-    line-height: $font-size-s;
+    margin-top: 12px;
+    margin-bottom: 24px;
+    line-height: $line-height-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,41 +79,46 @@
   }
 
   &-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;
+      line-height: $line-height-xs;
       font-size: $font-size-xs;
       color: $shortpassword-error;
     }
 
     &-forget {
-      line-height: $font-size-s;
+      line-height: $line-height-s;
       font-size: $font-size-s;
       color: $shortpassword-forget;
       display: flex;
       align-items: center;
 
       .nut-icon {
-        margin-right: scale-px(3px);
+        margin-right: 3px;
       }
     }
+
+    &-tips-icon {
+      width: $icon-size-11;
+      height: $icon-size-11;
+    }
   }
 
   &-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);
-      line-height: $font-size-base;
+      border: 1px solid $color-primary;
+      border-radius: 15px;
+      padding: 8px 38px;
+      line-height: $line-height-base;
       font-size: $font-size-base;
       color: $color-primary;
     }
@@ -124,9 +129,9 @@
         $color-primary 0%,
         $color-primary-stop-2 100%
       );
-      border-radius: scale-px(15px);
-      padding: scale-px(8px) scale-px(38px);
-      line-height: $font-size-base;
+      border-radius: 15px;
+      padding: 8px 38px;
+      line-height: $line-height-base;
       font-size: $font-size-base;
       color: $color-primary-text;
     }
diff --git a/src/packages/shortpassword/shortpassword.taro.tsx b/src/packages/shortpassword/shortpassword.taro.tsx
index a22528970b..f86b013206 100644
--- a/src/packages/shortpassword/shortpassword.taro.tsx
+++ b/src/packages/shortpassword/shortpassword.taro.tsx
@@ -142,7 +142,7 @@ export const InternalShortPassword: ForwardRefRenderFunction<
           <View className={`${classPrefix}-message-forget`} onClick={onTips}>
             {tips || (
               <>
-                <Tips size={11} />
+                <Tips className={`${classPrefix}-message-tips-icon`} />
                 {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<
           <div className={`${classPrefix}-message-forget`} onClick={onTips}>
             {tips || (
               <>
-                <Tips width={11} height={11} />
+                <Tips className={`${classPrefix}-message-tips-icon`} />
                 {locale.shortpassword.tips}
               </>
             )}
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..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 {
@@ -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,
@@ -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;
           }
         }
 
@@ -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,15 +222,15 @@
       &-head {
         align-items: center;
         justify-content: center;
-        height: scale-px(20px);
+        height: 20px;
 
         &-icon {
           width: $steps-vertical-head-icon-size;
           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;
           }
         }
       }
@@ -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..089f6688ca 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 calc($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 calc($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 calc($switch-height - $switch-border-width + 3px);
       &-rtl {
-        margin: 0 calc($switch-height - $switch-border-width + scale-px(3px)) 0
-          scale-px(7px);
+        margin: 0 calc($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..a98beb4e36 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;
     }
   }
 
@@ -93,12 +93,17 @@
 
       .nut-icon {
         position: absolute;
-        font-size: scale-font-px(20px);
+        font-size: $font-size-2xl;
         width: 100%;
         height: 100%;
       }
     }
 
+    &-smile-icon {
+      width: 40px;
+      height: 20px;
+    }
+
     &-active {
       .nut-icon {
         color: $tabs-titles-item-active-color;
@@ -123,8 +128,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 +172,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 +195,7 @@
   }
 
   &-divider {
-    border-bottom: scale-px(1px) solid $color-border;
+    border-bottom: 1px solid $color-border;
 
     .nut-tabs-titles-item {
       position: relative;
@@ -201,7 +206,7 @@
         right: 0;
         top: 50%;
         height: 50%;
-        width: scale-px(1px);
+        width: 1px;
         background: $color-border;
         transform: translateY(-50%);
       }
@@ -219,12 +224,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 +265,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 +311,7 @@
       .nut-tabs-titles-item-smile {
         left: 50%;
         right: auto;
-        bottom: scale-px(-3px);
+        bottom: -3px;
         transform: translate(-50%, 0) rotate(0deg);
       }
     }
@@ -361,7 +366,7 @@
     &-line {
       .nut-tabs-titles-item {
         padding-left: 0;
-        padding-right: scale-px(14px);
+        padding-right: 14px;
       }
     }
   }
@@ -370,11 +375,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/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<Partial<TaroTabsProps>> & {
                         // @ts-ignore
                         ariaHidden
                       >
-                        <JoySmile color={activeColor} />
+                        <JoySmile
+                          color={activeColor}
+                          className={`${classPrefix}-titles-item-smile-icon`}
+                        />
                       </View>
                     )}
                     <View
diff --git a/src/packages/tabs/tabs.tsx b/src/packages/tabs/tabs.tsx
index 7569e44c38..7d86a4fdf4 100644
--- a/src/packages/tabs/tabs.tsx
+++ b/src/packages/tabs/tabs.tsx
@@ -189,7 +189,10 @@ export const Tabs: FunctionComponent<Partial<WebTabsProps>> & {
                       className={`${classPrefix}-titles-item-smile`}
                       aria-hidden="true"
                     >
-                      <JoySmile color={activeColor} width={40} height={20} />
+                      <JoySmile
+                        color={activeColor}
+                        className={`${classPrefix}-titles-item-smile-icon`}
+                      />
                     </div>
                   )}
                   <div
diff --git a/src/packages/tag/tag.scss b/src/packages/tag/tag.scss
index 7d1494c819..3b23ef41f8 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 {
@@ -81,8 +81,8 @@
   }
 
   &-close-icon {
-    width: scale-icon-px(8px);
-    height: scale-icon-px(8px);
+    width: $icon-size-8;
+    height: $icon-size-8;
   }
 }
 
@@ -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..857f7829ca 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);
-    font-size: scale-font-px(13px);
-    line-height: scale-px(18px);
+    border-radius: 7px;
+    box-shadow: 0 1px 6px 0 rgba(237, 238, 241, 1);
+    margin-top: 20px;
+    padding: 14px 15px;
+    font-size: $font-size-m;
+    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;
   }
 }
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..934a2e263a 100644
--- a/src/styles/theme-dark.scss
+++ b/src/styles/theme-dark.scss
@@ -291,12 +291,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,28 +317,40 @@ 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;
 
   // 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 语义化
   // 狭小空间内的紧密关联内容
@@ -354,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 831650b859..118f158f1f 100644
--- a/src/styles/theme-default.scss
+++ b/src/styles/theme-default.scss
@@ -290,13 +290,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,28 +318,40 @@ 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;
 
   // 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 语义化
   // 狭小空间内的紧密关联内容
@@ -356,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-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(
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index d58edb529a..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))
@@ -176,23 +178,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 +570,19 @@ $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-11: var(--nutui-icon-size-11, scale-icon-px(11px)) !default;
+$icon-size-12: var(--nutui-icon-size-12, scale-icon-px(12px)) !default;
+$icon-size-16: var(--nutui-icon-size-16, scale-icon-px(16px)) !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 +993,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 +1014,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 +1116,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 +1327,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 +1446,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 +1454,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 +2802,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 +3001,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,
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) {