/* ============================================================================ ems-intl.cn · 统一设计系统 (Design System) v2.0 ★ 单一事实源 SINGLE SOURCE OF TRUTH 日期: 2026-09-08 主题: 中国邮政绿 (Postal Green) + 琥珀 (Amber) · 扩展品牌安全色: 天蓝 / 青绿 适用: 门户首页 / 业务框架图 / 业务流程梳理 / 物料中心 —— 全站统一 变更说明: 取代 v1.0(design-system.css)。修复 4 类底色不一致 / 移除禁用紫色#A855F7 / 移除禁用字体-apple-system / 统一导航态类名·圆角·卡片圆角·阴影配方。 用法: 每个页面 引 ， 内联样式只写布局特有值，颜色/间距/字号/圆角/阴影一律走 :root 变量。 ============================================================================ */ /* ---------- 1. 设计 Token（改主题只改这里） ---------- */ :root { /* —— 品牌主色（邮政绿） —— */ --brand: #009B4C; /* 主色 · 邮政绿 */ --brand-deep: #007A3B; /* 深绿 · hover / 标题 / 当前态填充 */ --brand-900: #005C2E; /* 最深绿 · 渐变终点 */ --brand-50: #EAF7F0; /* 极浅绿 · 底色 / 卡片底 */ --brand-100: #D2EEDD; /* 浅绿 · 边框 / 分隔 */ /* —— 强调色（琥珀） —— */ --amber: #E8912E; /* 主强调 */ --amber-deep: #C9771B; /* 深琥珀 · hover */ --amber-50: #FCEFD9; /* 极浅琥珀 · 提示底 */ /* —— 中性色 —— */ --ink: #1F2D2A; /* 主文字 */ --ink-soft: #5C6B66; /* 次级文字 */ --ink-400: #8A9793; /* 弱化文字（建设中/占位） */ --gray: #6B7280; /* 辅助灰 */ --line: #DCEBE6; /* 分割线 */ --line-2: #EAF1EE; /* 浅分割线 */ --bg: #F4FAF7; /* 页面背景 */ --surface: #FFFFFF; /* 卡片/表面背景 */ /* —— 语义色 —— */ --ok: #2BA84A; /* 成功 / 可发 */ --warn: #E8912E; /* 警告 / 受限 */ --bad: #D96459; /* 危险 / 禁发 */ --info: #0EA5E9; /* 信息 / 快捷 */ /* —— 模块强调色（卡片左条 / 图标底色，品牌安全，无紫无蓝紫） —— */ --m-framework: #009B4C; /* 业务框架图 · 绿 */ --m-process: #E8912E; /* 业务流程梳理 · 琥珀 */ --m-ozon: #0EA5E9; /* Ozon运单清单 · 天蓝 */ --m-materials: #0F766E; /* 物料中心 · 青绿（取代原禁用紫 #A855F7） */ /* —— 字体（禁用 -apple-system / system-ui / Inter / Roboto） —— */ --font-sans: "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif; /* —— 字阶（type scale） —— */ --fs-display: clamp(28px, 4.2vw, 44px); /* hero 主标题 */ --fs-h1: 28px; --fs-h2: 22px; --fs-h3: 18px; --fs-h4: 16px; --fs-body: 15px; --fs-sm: 13px; --fs-xs: 12px; --fs-eyebrow: 12px; --lh: 1.65; --lh-tight: 1.3; /* —— 间距（4 基准） —— */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* —— 圆角 —— */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* —— 阴影 / 层级（统一绿色调暗影，禁用纯黑 rgba(0,0,0)） —— */ --sh-1: 0 1px 3px rgba(16,40,28,.06); --sh-2: 0 4px 16px rgba(16,40,28,.08); --sh-3: 0 12px 30px rgba(16,40,28,.12); --sh-4: 0 18px 44px rgba(16,40,28,.16); /* hover 抬升 */ /* —— 布局 —— */ --maxw: 1200px; --nav-h: 56px; /* —— 动效 —— */ --ease: cubic-bezier(.22,.61,.36,1); --dur: .18s; } /* ---------- 2. 基础重置 ---------- */ *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } img,svg { max-width: 100%; display: block; } a { color: var(--brand-deep); text-decoration: none; } a:hover { text-decoration: underline; } h1,h2,h3,h4 { margin: 0 0 var(--sp-3); color: var(--ink); line-height: var(--lh-tight); font-weight: 700; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { margin: 0 0 var(--sp-3); } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); } /* ---------- 3. 顶部站点导航 (sitebar) · 白色底 + 绿 logo + 药丸导航 ---------- 【门户导航栏铁律 · source of truth = 首页 home_entry_hero.html 内联 .sitebar】 本段是子页（/framework /training /materials /ozon-filltool /404）的统一引用源， 必须逐项镜像首页，禁止任何子页再内联覆盖 sitebar。 硬指标（改版前必须逐项核对，违反任一条 = 回归）： · 扁平白底 #fff + 仅 1px 下边框 var(--line) ——【禁止 box-shadow 浮起阴影】 · 高度 56px（var(--nav-h)；首页用 --sitebar-h:56px，两处须一致） · 品牌 .brand 绿色 + margin-right:14px · 链接 .sitebar a：--ink-soft 灰字 + 13.5px + 药丸圆角（20px 或 var(--r-pill)） · hover：--brand-50 底 + --brand-deep 字；当前态 .active/.cur：--brand 绿底白字 双源同步：改导航栏须同时改 design-system-v2.css 本段 与 首页 home_entry_hero.html 内联 .sitebar。 ---------- */ .sitebar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; } .sitebar-in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); height: var(--nav-h); display: flex; align-items: center; gap: 6px; overflow-x: auto; white-space: nowrap; } .sitebar-in::-webkit-scrollbar { display: none; } .sitebar .brand { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--brand); font-size: 14px; letter-spacing: .5px; margin-right: 14px; flex: none; text-decoration: none; } .sitebar .brand:hover { color: var(--brand-deep); text-decoration: none; } .sitebar .brand svg { width: 22px; height: 22px; color: var(--brand); flex: none; } .sitebar .spacer { flex: 1; } .sitebar a { flex: none; display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 13.5px; padding: 7px 15px; border-radius: var(--r-pill); transition: background var(--dur), color var(--dur); white-space: nowrap; text-decoration: none; } .sitebar a:hover { background: var(--brand-50); color: var(--brand-deep); text-decoration: none; } /* 当前态：统一类名 .active（门户旧 .cur 向后兼容，保留别名） */ .sitebar a.active, .sitebar a.cur { background: var(--brand); color: #fff; font-weight: 600; } .sitebar a.active:hover, .sitebar a.cur:hover { background: var(--brand-deep); color: #fff; } .sitebar .soon { color: var(--ink-400); } /* 建设中态弱化 */ .sitebar .soon.active { background: var(--ink-400); } /* ---------- 4. 英雄区 (hero) ---------- 默认：浅绿/白底 + 深绿字（内敛、适合内容/工具子页）。 门户首页如需强视觉冲击，加 .hero-emphasis（深绿渐变+白字）。 颜色/字号/间距一律走 token。 ---------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--brand-50) 100%); color: var(--ink); padding: var(--sp-8) 0; border-bottom: 1px solid var(--line-2); } .hero::after { /* 右上角淡绿光晕装饰 */ content: ""; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(0,155,76,.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .hero-in { max-width: 760px; margin: 0 auto; padding: 0 var(--sp-5); position: relative; z-index: 1; text-align: center; } .eyebrow { font-size: var(--fs-eyebrow); letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--brand); } .hero h1 { font-size: var(--fs-display); margin: var(--sp-3) 0 var(--sp-2); line-height: 1.15; letter-spacing: -.5px; color: var(--brand-deep); } .hero p.lead { font-size: clamp(15px,2vw,18px); margin: 0 auto; max-width: 540px; color: var(--ink-soft); line-height: 1.7; } .hero .trust { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); padding: 7px 18px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); background: rgba(255,255,255,.6); } .hero .trust .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(0,155,76,.22); } /* 门户首页/强视觉冲击专用：深绿渐变 + 白字（覆盖默认浅色） */ .hero-emphasis { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 52%, var(--brand-900) 100%); color: #fff; border-radius: 0 0 var(--r-xl) var(--r-xl); border-bottom: none; } .hero-emphasis::after { left: -80px; top: -80px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(255,255,255,.14) 0%, transparent 70%); } .hero-emphasis .eyebrow { color: #fff; opacity: .92; } .hero-emphasis h1 { color: #fff; } .hero-emphasis p.lead { color: #fff; opacity: .94; } .hero-emphasis .trust { border-color: rgba(255,255,255,.3); background: transparent; color: #fff; } .hero-emphasis .trust .dot { background: #7CFFB0; box-shadow: 0 0 0 3px rgba(124,255,176,.35); } /* ---------- 5. 区块标题 (section header) ---------- */ .sec-head { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-8) 0 var(--sp-4); } .sec-no { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,155,76,.2); } .sec-head h2 { margin: 0; font-size: var(--fs-h2); font-weight: 800; line-height: var(--lh-tight); } .sec-head .h-sub { font-size: 13.5px; color: var(--ink-soft); font-weight: 400; margin-top: 4px; } /* ---------- 6. 卡片 ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--sh-1); transition: box-shadow var(--dur), transform var(--dur); } .card-hover:hover { box-shadow: var(--sh-2); transform: translateY(-2px); } .card-title { font-size: var(--fs-h3); font-weight: 700; margin-bottom: var(--sp-1); } .card-sub { color: var(--ink-soft); font-size: var(--fs-sm); margin-bottom: var(--sp-2); } /* 浮岛入口卡（门户首页 4 模块） */ .entry-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 26px 26px 30px; text-decoration: none; color: inherit; box-shadow: var(--sh-3); transition: box-shadow var(--dur), transform var(--dur); --ac: var(--brand); } .entry-card::before { /* 左侧模块色条 */ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ac); } .entry-card:hover { transform: translateY(-4px); box-shadow: var(--sh-4); } .entry-card .ic { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ac) 12%, #fff); color: var(--ac); margin-bottom: 4px; } .entry-card .ic svg { width: 26px; height: 26px; } .entry-card .t { font-size: 19px; font-weight: 700; margin-top: 14px; } .entry-card .sub { font-size: 12.5px; font-weight: 700; color: var(--ac); letter-spacing: .3px; } .entry-card .desc { font-size: 14px; color: var(--ink-soft); margin-top: 2px; } .entry-card .go { margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--ac); display: inline-flex; align-items: center; gap: 6px; } .entry-card .go .ar { transition: transform var(--dur); } .entry-card:hover .go .ar { transform: translateX(4px); } /* 建设中态 */ .entry-card.soon { box-shadow: var(--sh-3); } .entry-card.soon:hover { transform: none; box-shadow: var(--sh-3); } .entry-card.soon .ic { background: #EEF1F0; color: var(--ink-400); } .entry-card.soon .sub, .entry-card.soon .go { color: var(--ink-400); } .badge-soon { display: inline-block; margin-left: 10px; font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #fff; background: #94A3B8; border-radius: 10px; padding: 2px 9px; vertical-align: middle; } /* 卡片网格 */ .grid { display: grid; gap: var(--sp-4); } .grid-2 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(3,1fr); } .grid-4 { grid-template-columns: repeat(4,1fr); } @media (max-width: 900px) { .grid-3,.grid-4 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 600px) { .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } } /* ---------- 7. 按钮 ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border-radius: var(--r-pill); border: 1px solid transparent; font-size: var(--fs-body); font-weight: 600; cursor: pointer; transition: all var(--dur); font-family: var(--font-sans); line-height: 1.2; text-decoration: none; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-deep); } .btn-accent { background: var(--amber); color: #fff; } .btn-accent:hover { background: var(--amber-deep); } .btn-ghost { background: #fff; color: var(--brand-deep); border-color: var(--brand-100); } .btn-ghost:hover { border-color: var(--brand); background: var(--brand-50); } .btn-text { background: transparent; color: var(--brand-deep); padding: 6px 10px; } .btn-text:hover { background: var(--brand-50); } .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; } /* ---------- 8. 状态标签 (badge) ---------- */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; } .badge-ok { background: var(--brand-50); color: var(--brand-deep); } .badge-warn { background: var(--amber-50); color: var(--amber-deep); } .badge-bad { background: #FBE9E7; color: var(--bad); } .badge-info { background: #E8F1FC; color: var(--info); } .badge-gray { background: #EEF1F0; color: var(--gray); } /* ---------- 9. 提示框 (alert) ---------- */ .alert { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); margin-bottom: var(--sp-4); border: 1px solid transparent; align-items: flex-start; } .alert .ic { font-size: 18px; line-height: 1.4; flex: none; } .alert b { font-weight: 700; } .alert-ok { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-deep); } .alert-warn { background: var(--amber-50); border-color: #F4D9A8; color: var(--amber-deep); } .alert-bad { background: #FBE9E7; border-color: #F2C4BF; color: var(--bad); } .alert-info { background: #E8F1FC; border-color: #C9DEF7; color: var(--info); } /* ---------- 10. 表格 ---------- */ .tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .tbl th, .tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); } .tbl th { background: var(--brand-50); color: var(--brand-deep); font-weight: 700; white-space: nowrap; } .tbl tbody tr:hover { background: var(--bg); } .tbl td code { background: var(--brand-50); color: var(--brand-deep); padding: 1px 6px; border-radius: 6px; font-size: 12px; } /* ---------- 11. 表单 ---------- */ .field { margin-bottom: var(--sp-3); } .field label { display: block; font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: 6px; font-weight: 600; } .input, .select, .textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--fs-body); font-family: var(--font-sans); background: #fff; color: var(--ink); transition: border-color var(--dur), box-shadow var(--dur); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); } .textarea { resize: vertical; min-height: 88px; } /* ---------- 12. 页脚 ---------- */ .footer { margin-top: var(--sp-8); padding: var(--sp-5) 0; border-top: 1px solid var(--line); color: var(--gray); font-size: var(--fs-sm); text-align: center; background: var(--surface); } /* ---------- 12.5 排版工具层（统一阅读宽度 / 正文节奏 / 卡片标题 / 垂直节奏） ---------- */ /* 正文阅读宽度：约 40 汉字/行，避免长行疲劳；文本密集页套用 .measure */ .measure { max-width: 680px; } /* 长文容器：段落 / 列表 / 标题节奏全部走设计系统变量，禁止页内写死字号 */ .prose { font-size: var(--fs-body); line-height: var(--lh); color: var(--ink); } .prose p { margin: 0 0 var(--sp-3); } .prose ul, .prose ol { margin: 0 0 var(--sp-3); padding-left: 1.4em; } .prose li { margin: 0 0 var(--sp-1); } .prose h2, .prose h3, .prose h4 { margin: var(--sp-5) 0 var(--sp-2); line-height: var(--lh-tight); color: var(--ink); } .prose img { max-width: 100%; border-radius: var(--r-md); margin: var(--sp-3) 0; } .prose .lead { font-size: var(--fs-body); color: var(--ink-soft); } /* 垂直节奏：相邻子元素统一间距，避免页内 margin 散落 */ .stack > * + * { margin-top: var(--sp-3); } .stack-1 > * + * { margin-top: var(--sp-2); } .stack-2 > * + * { margin-top: var(--sp-4); } .stack-3 > * + * { margin-top: var(--sp-5); } /* 注：.card-title 已在第 6 节（卡片）定义（--fs-h3），此处不再重复。 */ /* ---------- 13. 工具类 ---------- */ .mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mb-1{margin-bottom:var(--sp-1)} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .tc{text-align:center} .tr{text-align:right} .muted{color:var(--ink-soft)} .nowrap{white-space:nowrap} .flex{display:flex} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .fz-sm{font-size:var(--fs-sm)} .fz-xs{font-size:var(--fs-xs)} .fw-7{font-weight:700}