Browse Source

fix: 翻转卡背面定位/人群/生态/价值 四行精确对齐(CSS Grid双列+统一行高+同字体族)

master
doublex001 3 months ago
parent
commit
bf5aa133d3
  1. 18
      src/components/Business.tsx

18
src/components/Business.tsx

@ -120,23 +120,15 @@ export default function Business({ locale }: { locale: Locale }) {
<span className="text-body font-semibold text-[var(--brand-accent-deep)]">{p.name}</span> <span className="text-body font-semibold text-[var(--brand-accent-deep)]">{p.name}</span>
<span className="text-body font-mono text-[var(--text-muted)]">{tr('产品定位卡', '產品定位卡', 'Product profile')}</span> <span className="text-body font-mono text-[var(--text-muted)]">{tr('产品定位卡', '產品定位卡', 'Product profile')}</span>
</div> </div>
<dl className="space-y-2"> <dl className="grid" style={{ gridTemplateColumns: '3.5rem 1fr', columnGap: '0.625rem', rowGap: '0.5rem' }}>
<div className="flex gap-2.5"> <dt className="text-body uppercase tracking-wider text-[var(--text-muted)] leading-snug" style={{ fontFamily: 'var(--font-body)' }}>{tr('定位', '定位', 'Role')}</dt>
<dt className="text-body font-mono uppercase tracking-wide text-[var(--text-muted)] w-12 shrink-0 pt-0.5">{tr('定位', '定位', 'Role')}</dt>
<dd className="text-body font-medium text-[var(--brand-black)] leading-snug">{p.role}</dd> <dd className="text-body font-medium text-[var(--brand-black)] leading-snug">{p.role}</dd>
</div> <dt className="text-body uppercase tracking-wider text-[var(--text-muted)] leading-snug" style={{ fontFamily: 'var(--font-body)' }}>{tr('人群', '人群', 'Users')}</dt>
<div className="flex gap-2.5">
<dt className="text-body font-mono uppercase tracking-wide text-[var(--text-muted)] w-12 shrink-0 pt-0.5">{tr('人群', '人群', 'Users')}</dt>
<dd className="text-body text-[var(--text-secondary)] leading-snug">{p.audience}</dd> <dd className="text-body text-[var(--text-secondary)] leading-snug">{p.audience}</dd>
</div> <dt className="text-body uppercase tracking-wider text-[var(--text-muted)] leading-snug" style={{ fontFamily: 'var(--font-body)' }}>{tr('生态', '生態', 'Eco')}</dt>
<div className="flex gap-2.5">
<dt className="text-body font-mono uppercase tracking-wide text-[var(--text-muted)] w-12 shrink-0 pt-0.5">{tr('生态', '生態', 'Eco')}</dt>
<dd className="text-body font-medium text-[var(--brand-accent-deep)] leading-snug">{p.ecosystem}</dd> <dd className="text-body font-medium text-[var(--brand-accent-deep)] leading-snug">{p.ecosystem}</dd>
</div> <dt className="text-body uppercase tracking-wider text-[var(--text-muted)] leading-snug" style={{ fontFamily: 'var(--font-body)' }}>{tr('价值', '價值', 'Value')}</dt>
<div className="flex gap-2.5">
<dt className="text-body font-mono uppercase tracking-wide text-[var(--text-muted)] w-12 shrink-0 pt-0.5">{tr('价值', '價值', 'Value')}</dt>
<dd className="text-body text-[var(--text-secondary)] leading-snug">{p.desc}</dd> <dd className="text-body text-[var(--text-secondary)] leading-snug">{p.desc}</dd>
</div>
</dl> </dl>
</div> </div>
</div> </div>

Loading…
Cancel
Save