Browse Source

fix: stats数字带统一字号+放大图标(clamp38-60px / w-8图标 / 后缀0.52em)

master
doublex001 3 months ago
parent
commit
80428be962
  1. 4
      src/components/Home.tsx
  2. 13
      src/styles/global.css

4
src/components/Home.tsx

@ -205,10 +205,10 @@ export default function Home({ locale }: { locale: Locale }) {
<div className="stat-band scroll-reveal mt-6">
{stats.map((sItem, idx) => (
<div className="stat-cell" key={sItem.label} style={cssVars({ '--track-color': 'var(--accent)' })}>
<Icon name={statsIcons[idx]} className="w-6 h-6 mx-auto mb-2" style={{ color: 'var(--brand-accent)' }} />
<Icon name={statsIcons[idx]} className="w-8 h-8 mx-auto mb-3" style={{ color: 'var(--brand-accent)' }} />
<div className="stat-num">
<span className="stat-value">{sItem.value}</span>
<span className="stat-suffix">{sItem.suffix}</span>
{sItem.suffix && <span className="stat-suffix">{sItem.suffix}</span>}
</div>
<div className="stat-label">{sItem.label}</div>
<div className="stat-sub">{sItem.sub}</div>

13
src/styles/global.css

@ -1009,16 +1009,13 @@ footer a {
.stat-num {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(44px, 7vw, 76px);
font-size: clamp(38px, 5.8vw, 60px);
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
background: linear-gradient(135deg, var(--brand-black) 0%, var(--track-color, var(--track-career)) 120%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.01em;
color: var(--brand-black);
}
.stat-suffix { font-size: 0.5em; font-weight: 600; -webkit-text-fill-color: var(--track-color, var(--track-career)); }
.stat-suffix { font-size: 0.52em; font-weight: 600; color: var(--track-color, var(--brand-accent-deep)); }
.stat-value--text { /* 兼容保留:统一字号后无需差异化,空实现避免引用报错 */ }
.stat-label {
margin-top: 10px;
font-size: var(--fs-micro);

Loading…
Cancel
Save