ems-intl.cn 国际业务框架 业务流程梳理 Ozon 运单填充 物料中心

欧盟 27 国关税明细卡 · UI 设计规范

Design System：统一设计令牌（Design Tokens）+ 组件库 · 适用于 eu_postal_fees_2026.html 与 eu_postal_fees_2026_client.html

1 · 设计令牌（Design Tokens）

1.1 色彩

品牌绿系（渐变 / 强调 / 描边 / 浅底）

品牌 900--c-brand-900
#006B34
品牌 700--c-brand-700
#007A3B
品牌 600--c-brand-600
#009B4C
品牌 500--c-brand-500
#17b866
品牌 100--c-brand-100
#e3f0ea
品牌 050--c-brand-050
#f4faf7

语义状态色（来源标签 / 高亮）

OK · 已核验--c-ok-bg / fg
#e3f6ea / #007A3B
WARN · 待确认--c-warn-bg / fg
#fff3df / #E08A00
NA · 不适用--c-na-bg / fg
#fdeaea / #E74C3C
提示块底--c-note-bg
#fff8ec

中性色阶

墨色 ink--c-ink
#1f2d27
次要 muted--c-muted
#6b7b72
极淡 faint--c-faint
#8a978f
描边 line--c-line
#e3f0ea
卡片 card--c-card
#ffffff

梯队色（贸易量集中度分段）

梯队 1--c-t1
#006B34
梯队 2--c-t2
#009B4C
梯队 3--c-t3
#46B58C
梯队 4--c-t4
#E08A00

1.2 字体层级

--fs-h1欧盟 27 国 · 关税全明细
--fs-h22 · 各国邮政清关服务费
--fs-h3KPI 概览
--fs-body正文说明文字，行高 1.6，适合长段落阅读。
--fs-sm辅助说明 / 来源标注 / 页脚
--fs-tag✅ 来源标签
--fs-num€7.50

1.3 间距 / 圆角 / 阴影尺度

间距（4px 基准）

sp-1
4
sp-2
8
sp-3
12
sp-4
16
sp-5
20
sp-6
28

圆角

r-sm
6
r-md
10
r-lg
14
r-pill
20

阴影

sh-1
卡片
sh-2
表格
sh-brand
Header

2 · 组件库（接近成品渲染）

2.1 KPI 仪表盘（4 格 · 左侧品牌色条）

€3.00
过渡期统一关税 / 类
Council Reg (EU) 2026/382
27
覆盖成员国
全量实测 / 含来源链接
€1.28–€40
邮政清关费区间
按目的国邮政实测
€2–4
EU 统一处理费 / 件
2026-11-01 起生效

2.2 贸易量集中度分段条

德 34%
法/荷/爱/意/西/比 33%
波/瑞典等 22%
其余 11%
梯队1 · 超大型（>€2万亿） 梯队2 · 大型（€0.8–2万亿） 梯队3 · 中型（€0.3–0.8万亿） 梯队4 · 小型（<€0.3万亿）

2.3 来源标签（三态 · 可点击）

✅ dhl.de ✅ bpost.be ⚠️ postnord.dk ⚠️ 二手 · 旧处理费 ❌ 不适用

语义：✅ 官网实测价（绿色）／⚠️ 二手或待确认（琥珀，附可得链接）／❌ 不适用（红色）。可点击链接统一 a.tag{text-decoration:none}。

2.4 提示 / 图例 / 公式块

⚠️ 注意：⚠️ 标 ⚠️ 的邮政费随承运商、重量、申报方式浮动，正式报关以目的国邮政 / 承运商最新公告与收件人实际账单为准。
✅ 官网实测⚠️ 二手 / 待确认❌ 不适用
清关总费 = 关税（€3/类，过渡期）+ 目的国 VAT（标准税率）+ 邮政清关服务费（各国实测）+ EU 统一处理费（€2–4/件，2026-11-01 起）

2.5 主明细表（梯队分隔行 + 国家行）

#国家国际贸易量进出口总额VAT过渡期关税≤€150 · 2026–2028邮政 / 承运商代清关服务费国家处理费政府另收来源
梯队 1 · 超大型贸易国3 国 · 约占 34%
1 🇩🇪德国DE
€3.43万亿
 19% €3.00/类
DHL/Deutsche PostAuslagepauschale€7.50含税，与货值无关
 €2–4 ✅ dhl.de
2 🇫🇷法国FR
€1.51万亿
 20% €3.00/类
La Poste/Colissimo清关费€8
DHL€18–25
FedEx/UPS€20+
 — ✅ laposte.fr
梯队 4 · 小型贸易国5 国 · 约占 11%
27 🇲🇹马耳他MT
€505亿
 18% €3.00/类 €3 / €6 / €15 三档 — ✅ maltapost.com
26 🇱🇹立陶宛LT
€670亿
 21% €3.00/类 待官宣 — ⚠️ post.lt

表头规范：底对齐（vertical-align:bottom）+ 主标题（.th-main）与副标题（.th-sub，10px/透明度0.85）双层结构，控制换行在 2 行以内；#、VAT 数字列居中；长列（过渡期关税、邮政清关服务费）设置 min-width 避免挤压；来源列保持可点击标签。
行结构：排名圆（top=品牌900 / 普通=品牌600）→ 国旗+国名+ISO → 贸易量（数字+条形）→ VAT → 过渡期关税（€3/类）→ 邮政清关服务费（.svc 组件：.svc-name 承运商 / .svc-cnd 条件 / .fee 金额 / .svc-note 说明，按行堆叠，价格品牌700 高亮）→ 国家处理费 → 来源（三态可点击标签）。梯队分隔行用品牌050 底 + 品牌700 字 + 品牌600 下边框。

2.6 算例表

申报价值关税德国 VAT 19%邮政费到手总费
€50€3.00€9.50€7.50€20.00
€150€3.00€28.50€7.50€39.00

3 · 令牌 → 页面映射（落地对照）

Header

  • 背景：linear-gradient(135deg, brand-900 → brand-600 → brand-500)
  • 阴影：--sh-brand
  • H1 字号：--fs-h1

KPI 卡

  • 容器：--c-card + --c-line + --r-lg + --sh-1
  • 左色条：--c-brand-600
  • 数值：--c-brand-700 + --fs-num

主表

  • 表头：--c-brand-600 底 + sticky --z-sticky + 底对齐 vertical-align:bottom
  • 表头文字：主标题 .th-main + 副标题 .th-sub，控制换行 ≤2 行
  • # / VAT 数字列居中 th.num, td.num{text-align:center}
  • 行 hover：--c-brand-050；费用高亮：--c-brand-700；高关注行：.hi 浅橙
  • 邮政清关服务费列：结构化组件 .svc（.svc-name / .svc-cnd / .fee / .svc-note），按收费项分行堆叠，价格统一高亮

标签 / 提示

  • OK/WARN/NA 三态用语义色令牌
  • note 块：--c-note-bg/line/fg
  • formula：--c-brand-100 + 虚线 --c-brand-600