layout.md
基础 · FOUNDATION

版式 Layout

主内容区最宽 1080、左右内距 48；节标题共用一个骨架；卡片共用一套语法。板块之间的「联系感」来自这三件事。

来源同步自 edu v23.5.1源styles/v4/SPACING.md机读foundations/layout.md

容器

区域尺寸
主内容区max-width: 1080px + 左右内距 48px
窄文档流max-width: 820px
侧栏266px（edu 历史值，牵连布局公式，暂不改）
面包屑顶栏钉顶，高 48，底部 .07 细线
收起钮恒位：左 14、上 12，28×28 幽灵图标键；展开/收起两态同坐标

节标题

长页一律用同一个骨架：mono 编号 + 标题 + 右侧注记，底部一条 .09 细线。不另起炉灶。

SectionHead 骨架
02

课程总览

6 系列 · 67 节
export function SectionHead() {
  return (
    <div style={{ width: '100%', display: 'flex', alignItems: 'baseline', gap: 12, paddingBottom: 12, borderBottom: '1px solid rgba(0,0,0,.09)' }}>
      <span style={{ fontFamily: 'var(--zzm-mono)', fontSize: 12, letterSpacing: '1px', color: '#A2A29C' }}>02</span>
      <h2 style={{ margin: 0, fontSize: 24, lineHeight: '32px', fontWeight: 700 }}>课程总览</h2>
      <span style={{ marginLeft: 'auto', fontFamily: 'var(--zzm-mono)', fontSize: 11, color: '#A2A29C' }}>6 系列 · 67 节</span>
    </div>
  )
}

卡片语法

所有内容卡共用：白卡 + 1px 细线 + 圆角 16 + 内距 16–24 + .zzm-card 浮起光影。可点的卡用 .zzm-cardlink（见卡片与卡链）。

标准内容卡
学习进度
本周完成 6 节
白卡 · 1px 细线 · 圆角 16 · 内距 16–24 · 浮起光影。
export function CardGrammar() {
  return (
    <div className="zzm-card" style={{ width: 320, padding: 24, display: 'grid', gap: 8 }}>
      <div style={{ fontFamily: 'var(--zzm-mono)', fontSize: 10, letterSpacing: '1.5px', color: '#A2A29C' }}>学习进度</div>
      <div style={{ fontSize: 16, lineHeight: '24px', fontWeight: 650 }}>本周完成 6 节</div>
      <div style={{ fontSize: 12.5, lineHeight: '20px', color: '#72726E' }}>白卡 · 1px 细线 · 圆角 16 · 内距 16–24 · 浮起光影。</div>
    </div>
  )
}

节奏

落地页、长页的节与节之间统一 60px 顶距；节内区块间 24 / 32。分隔靠 1px 细线与留白分层，不靠色块。

铁律

✓ 要内容区最宽 1080，节与节共用这一个宽度
✗ 不要每个板块自己定宽度
✓ 要节标题用 SectionHead 骨架
✗ 不要用色带或粗线分隔板块