fix: 全站字号对齐字体系统——组件 8.5~14px 硬编码清零(票券 16/12、指派块 16 且加宽 320 防溢出、章卡标题 t3、相框标签 12);规格页注记<11px 清零;场景指派块 860→820 防出界;design-lab 基线重生成 28/28
This commit is contained in:
1 parent
4f4a8df74a
commit
cf611dd9be
14 files changed
+44
-44
No files matched your search
@@ -23,22 +23,22 @@ export function EntryGuide({
|
||||
>
|
||||
{p.icon}
|
||||
</span>
|
||||
<b className="text-[13px]">{p.name}</b>
|
||||
<b className="text-t3">{p.name}</b>
|
||||
</div>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-1.5">
|
||||
{p.path.map((id, i) => (
|
||||
<span key={id} className="flex items-center gap-1.5">
|
||||
{i > 0 && <span className="text-[10px] text-mute">→</span>}
|
||||
{i > 0 && <span className="text-small text-mute">→</span>}
|
||||
{linkChapter ? (
|
||||
<a
|
||||
href={`/ch${id}.html`}
|
||||
className={`rounded-full border-[1.5px] border-ink px-2.5 py-0.5 text-[10.5px] no-underline ${id === p.entry ? 'bg-clash2a font-extrabold' : 'bg-white'}`}
|
||||
className={`rounded-full border-[1.5px] border-ink px-2.5 py-0.5 text-small no-underline ${id === p.entry ? 'bg-clash2a font-extrabold' : 'bg-white'}`}
|
||||
>
|
||||
{id === p.entry && ['①', '②', '③'][profiles.indexOf(p)]} {chapters[id].title}
|
||||
</a>
|
||||
) : (
|
||||
<span
|
||||
className={`rounded-full border-[1.5px] border-ink px-2.5 py-0.5 text-[10.5px] ${id === p.entry ? 'bg-clash2a font-extrabold' : 'bg-white'}`}
|
||||
className={`rounded-full border-[1.5px] border-ink px-2.5 py-0.5 text-small ${id === p.entry ? 'bg-clash2a font-extrabold' : 'bg-white'}`}
|
||||
>
|
||||
{id === p.entry && ['①', '②', '③'][profiles.indexOf(p)]} {chapters[id].title}
|
||||
</span>
|
||||
@@ -46,7 +46,7 @@ export function EntryGuide({
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="m-0 mt-2 text-[10px] leading-relaxed text-mute">{p.note}</p>
|
||||
<p className="m-0 mt-2 t-small-mute leading-relaxed">{p.note}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -110,22 +110,22 @@ export function MemphisCard({
|
||||
chapter.gifUrl ? (
|
||||
<img src={chapter.gifUrl} alt={chapter.target.expectation} className="h-full w-full object-cover" />
|
||||
) : (
|
||||
<span className="px-3 text-center text-[11px] font-bold leading-snug text-paper">
|
||||
<span className="px-3 text-center text-small font-bold leading-snug text-paper">
|
||||
▶ {chapter.target.expectation}
|
||||
</span>
|
||||
)
|
||||
) : flip ? (
|
||||
<span className="px-3 text-center text-[11px] leading-snug text-ink/80 mix-blend-multiply">
|
||||
<span className="px-3 text-center text-small leading-snug text-ink/80 mix-blend-multiply">
|
||||
{chapter.target.goal}
|
||||
</span>
|
||||
) : zoneText ? (
|
||||
/* 静置态(用法示例):过程文字骑在相框里,价值区短语带荧光标记 */
|
||||
<span className="px-3 text-center text-[11.5px] font-semibold leading-snug text-ink">{zoneText}</span>
|
||||
<span className="px-3 text-center text-small font-semibold leading-snug text-ink">{zoneText}</span>
|
||||
) : (
|
||||
/* 静置态:章节 emoji 是相框的视觉主体(对齐设计稿解剖卡) */
|
||||
<span style={{ fontSize: compact ? '28px' : '40px' }}>{chapter.emoji}</span>
|
||||
)}
|
||||
<span className="absolute left-1.5 top-1 text-[9px] font-bold tracking-wide text-paper">
|
||||
<span className="absolute left-1.5 top-1 text-small font-bold tracking-wide text-paper">
|
||||
预期结果{showGif ? ' · GIF' : ''}
|
||||
</span>
|
||||
<Ring size={16} className="absolute bottom-1.5 right-1.5" />
|
||||
@@ -133,7 +133,7 @@ export function MemphisCard({
|
||||
{/* 卡头:▲ 目标 + 标题 + ● 积木点列 */}
|
||||
<div className="mt-2 flex items-center gap-2">
|
||||
<Tri size={14} />
|
||||
<b className="flex-1 text-[14px] text-[#2b1d10] [text-shadow:0_1px_1px_rgba(255,255,255,0.9)]">
|
||||
<b className="flex-1 text-t3 text-[#2b1d10] [text-shadow:0_1px_1px_rgba(255,255,255,0.9)]">
|
||||
{chapter.title}
|
||||
</b>
|
||||
{!compact && <BrickDots bricks={chapter.target.bricks} />}
|
||||
|
||||
@@ -12,13 +12,13 @@ export function Ticket({ chapter, done }: { chapter: Chapter; done: boolean }) {
|
||||
{/* 头部媒体块:章节色纯填充,无独立边框(由票体裁切) */}
|
||||
<div className="flex w-14 shrink-0 items-center justify-center text-[22px]" style={{ background: chapter.color }}>{chapter.emoji}</div>
|
||||
<div className="flex-1 py-2 pl-2.5 pr-2">
|
||||
<b className="text-[12.5px]">{chapter.title}</b>
|
||||
<div className="mt-0.5 font-mono text-[8.5px] text-mute">
|
||||
<b className="text-content font-bold">{chapter.title}</b>
|
||||
<div className="mt-0.5 font-mono t-small-mute">
|
||||
No. {String(chapter.id).padStart(3, '0')} · {done ? '已完成(打孔)' : '未开始(无孔)'}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`flex w-[42px] items-center justify-center font-mono text-[9.5px] text-mute ${done ? 'border-l-[1.5px] border-dashed border-ink' : 'border-l-[1.5px] border-solid border-ink'}`}
|
||||
className={`flex w-[42px] items-center justify-center font-mono text-small text-mute ${done ? 'border-l-[1.5px] border-dashed border-ink' : 'border-l-[1.5px] border-solid border-ink'}`}
|
||||
>
|
||||
№{String(chapter.id).padStart(2, '0')}
|
||||
</div>
|
||||
@@ -49,15 +49,15 @@ export function AssignBlock({
|
||||
miss: { how: string; looks: string }
|
||||
}) {
|
||||
return (
|
||||
<div data-comp="assign" className="w-[260px] rounded-xl border-2 border-ink bg-paper p-3 shadow-hard">
|
||||
<div data-comp="assign" className="w-[320px] rounded-xl border-2 border-ink bg-paper p-4 shadow-hard">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg width="16" height="16" viewBox="0 0 18 18" aria-hidden>
|
||||
<path d="M9 1 v16 M1 9 h16" stroke="var(--color-clash2b)" strokeWidth="3.5" strokeLinecap="round" />
|
||||
<path d="M9 1 v16 M1 9 h16" stroke="var(--color-ink)" strokeWidth="1.2" />
|
||||
</svg>
|
||||
<b className="text-[13px]">{title}</b>
|
||||
<b className="text-t3">{title}</b>
|
||||
</div>
|
||||
<div className="mt-1.5 space-y-0.5 text-[11px] leading-relaxed text-body">
|
||||
<div className="mt-2 space-y-1 text-content leading-relaxed text-body">
|
||||
<div>
|
||||
<b>位置</b>:{pos}
|
||||
</div>
|
||||
@@ -74,8 +74,8 @@ export function AssignBlock({
|
||||
<path d="M 12 32 L 8 27 L 16 22 L 8 17 L 16 12 L 12 7 L 14 2" fill="none" stroke="var(--color-clash1a)" strokeWidth="3" strokeLinejoin="round" strokeLinecap="round" />
|
||||
</svg>
|
||||
<div>
|
||||
<b className="text-[11.5px]">脱靶 · {miss.how}</b>
|
||||
<p className="m-0 mt-0.5 text-[10.5px] leading-relaxed text-body">{miss.looks}</p>
|
||||
<b className="t-small-strong">脱靶 · {miss.how}</b>
|
||||
<p className="m-0 mt-0.5 text-small leading-relaxed text-body">{miss.looks}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -74,8 +74,8 @@ export function MissMark({ how, looks }: { how: string; looks: string }) {
|
||||
<div className="flex items-start gap-3">
|
||||
<Tremble size={22} className="mt-0.5 shrink-0" />
|
||||
<div>
|
||||
<b className="text-[13px]">脱靶 · {how}</b>
|
||||
<p className="m-0 mt-0.5 text-[12px] leading-relaxed text-body">{looks}</p>
|
||||
<b className="text-content font-bold">脱靶 · {how}</b>
|
||||
<p className="m-0 mt-0.5 text-small leading-relaxed text-body">{looks}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in new issue
Block a user