版本卡题头与图题**同一组几何数** —— 标题、按钮、底线三线全平

上一版只对了底线,标题被顶在高盒子的上沿,与右图题差 16px(用户点破);
「3 版」计数也多余,去掉。

改法不是再补一个差值,是**逐段照抄右边的几何**:图题距纸顶 30 / 题行高 19 /
题底到 hero 框顶 16(实测),左题头同为 30+19+16 —— 于是三样对齐都不是碰巧:
  标题行  y 286 = 286
  按钮    y 286 = 286
  底边界线 322 ≈ 321(1px 边框宽)

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
This commit is contained in:
2026-07-28 15:19:02 +08:00
co-authored by Claude Opus 5
parent 1bb74a9a2d
commit 2a89e9feda
2 changed files with 4 additions and 6 deletions
+4 -5
View File
@@ -525,11 +525,10 @@
display: flex; flex-direction: column; min-height: 0; display: flex; flex-direction: column; min-height: 0;
background: #fff; border-radius: 10px; box-shadow: var(--cshadow); overflow: hidden; background: #fff; border-radius: 10px; box-shadow: var(--cshadow); overflow: hidden;
} }
/* 题头 = 图纸的 view-lbl 同款(字型/字距/颜色逐项一致),左右两卡说同一句话的两半。 /* 题头 = 图纸的 view-lbl 同款,几何**逐段照抄右边**:
padding-bottom 31px 是**对齐量**:让题头的底边界线正落在右图 hero 框的上边 图题距纸顶 30 / 题行高 19 / 题底到 hero 框顶 16(实测)。左边同为 30+19+16,
(纸顶 14 + 图题行高 + hero 的 margin-top 16,实测差 23px 补进来)—— 两卡横线一条平线。 */ 于是标题行、按钮、底边界线三样都与右图同一水平线 —— 不是碰巧,是同一组数。 */
.g-vercard-h { flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 18px 31px; border-bottom: 1px solid var(--sh-line); font-family: var(--sh-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sh-steel); } .g-vercard-h { flex: none; display: flex; align-items: center; gap: 8px; height: 19px; box-sizing: content-box; padding: 30px 18px 16px; border-bottom: 1px solid var(--sh-line); font-family: var(--sh-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sh-steel); }
.g-vercard-h .n { color: var(--sh-muted); letter-spacing: .08em; }
/* 新建按钮 = 图上「编辑」芯片(dc2-addbtn)完全同款 —— 一对动作一种长相 */ /* 新建按钮 = 图上「编辑」芯片(dc2-addbtn)完全同款 —— 一对动作一种长相 */
.g-ver-new { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 1px solid #b9cfe8; border-radius: 6px; background: #edf4fc; color: #23507e; font-size: 11px; line-height: 1; letter-spacing: normal; text-transform: none; padding: 3px 8px; cursor: pointer; transition: border-color .12s, box-shadow .12s; } .g-ver-new { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 1px solid #b9cfe8; border-radius: 6px; background: #edf4fc; color: #23507e; font-size: 11px; line-height: 1; letter-spacing: normal; text-transform: none; padding: 3px 8px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.g-ver-new:hover { border-color: #4e7daf; box-shadow: 0 0 0 2px rgba(78, 125, 175, .14); } .g-ver-new:hover { border-color: #4e7daf; box-shadow: 0 0 0 2px rgba(78, 125, 175, .14); }
@@ -634,7 +634,6 @@ function FlowLab({
{/* 题头与右侧图题成对:「流程包 · 版本」对「流程图 · 顺序」;新建与编辑同款芯片 */} {/* 题头与右侧图题成对:「流程包 · 版本」对「流程图 · 顺序」;新建与编辑同款芯片 */}
<div className="g-vercard-h"> <div className="g-vercard-h">
流程包 · 版本 流程包 · 版本
<span className="n">{versions.length} 版</span>
<button className="g-ver-new" onClick={askClone} disabled={cloneVersion.isPending}> <button className="g-ver-new" onClick={askClone} disabled={cloneVersion.isPending}>
<Ico name="plus" s={11} /> 新建 <Ico name="plus" s={11} /> 新建
</button> </button>