Files
newsui/packages/docs/app/blocks/zh-editorial/page.tsx
T
sunzhongyi 5f65d741ed feat: responsive system, engineering infra, new components, performance
- Section: responsive prop with media query injection
- visual-weights: fontSize clamp() for responsive sizing
- variables.css: add border-radius/shadow/transition/z-index tokens
- ESLint flat config + Prettier + Changeset init
- New components: Footer, NewsSidebar, BreakingNewsBanner
- Image/Figure: loading=lazy, aspectRatio, sizes props
2026-05-21 10:04:35 +08:00

113 lines
9.2 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
'use client';
import { Layout, Section, Article, Rule, BodyText, Quote } from 'newspaperui-components';
const cn = { fontFamily: 'var(--font-family-cjk-serif)' };
const cnRed = { color: 'var(--nui-accent-cjk-red)' };
export default function ZhEditorial() {
return (
<Layout columns={24} maxWidth="1200px" padding="2rem 1.5rem">
{/* 社论报头 */}
<header style={{
borderTop: '3px solid var(--nui-text-primary)',
borderBottom: '1px solid var(--nui-rule-hairline)',
padding: '0.75rem 0',
marginBottom: '2rem',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'baseline',
}}>
<h1 style={{ ...cn, fontSize: '28px', fontWeight: 900, margin: 0, letterSpacing: '0.1em' }}> </h1>
<div style={{ ...cn, ...cnRed, fontSize: '14px', fontWeight: 600 }}>· ·</div>
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)' }}>2026 5 19 · A2 </div>
</header>
{/* 双栏对开 */}
<Section columns={24} gap="2rem">
{/* 左侧:主社论 */}
<Article span={14} style={{ borderRight: '1px solid var(--nui-rule-hairline)', paddingRight: '2rem' }}>
<div style={{ ...cn, ...cnRed, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem', letterSpacing: '0.15em' }}></div>
<h2 style={{ ...cn, fontSize: '36px', fontWeight: 900, lineHeight: 1.2, color: 'var(--nui-text-primary)', margin: '0 0 0.75rem 0' }}>
</h2>
<h3 style={{ ...cn, fontSize: '18px', fontWeight: 500, lineHeight: 1.5, color: 'var(--nui-text-secondary)', margin: '0 0 1.5rem 0' }}>
</h3>
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginBottom: '1.5rem' }}>
</div>
<BodyText weight="High" columns={2} dropCap style={cn}>
<p></p>
<p></p>
<p>齿</p>
<p>2028 线</p>
<p></p>
<p></p>
<p></p>
<p></p>
</BodyText>
</Article>
{/* 右侧:专家评论 + 读者来信 */}
<Article span={10}>
<div style={{ ...cn, ...cnRed, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem', letterSpacing: '0.15em' }}></div>
<h3 style={{ ...cn, fontSize: '24px', fontWeight: 700, lineHeight: 1.3, color: 'var(--nui-text-primary)', margin: '0 0 0.5rem 0' }}>
</h3>
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginBottom: '1rem' }}>
·
</div>
<BodyText weight="Medium" style={cn}>
<p></p>
<p>线</p>
<p></p>
</BodyText>
<Rule variant="hairline" style={{ margin: '1.5rem 0' }} />
<div style={{ ...cn, ...cnRed, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem', letterSpacing: '0.15em' }}></div>
<h3 style={{ ...cn, fontSize: '24px', fontWeight: 700, lineHeight: 1.3, color: 'var(--nui-text-primary)', margin: '0 0 0.5rem 0' }}>
</h3>
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginBottom: '1rem' }}>
·
</div>
<BodyText weight="Medium" style={cn}>
<p></p>
<p></p>
</BodyText>
<Rule variant="hairline" style={{ margin: '1.5rem 0' }} />
<div style={{ ...cn, ...cnRed, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem', letterSpacing: '0.15em' }}></div>
<Quote variant="block" weight="Medium" style={cn}>
<p>线</p>
</Quote>
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginTop: '0.5rem' }}>
·
</div>
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
<Quote variant="block" weight="Medium" style={cn}>
<p></p>
</Quote>
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginTop: '0.5rem' }}>
·
</div>
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
<Quote variant="block" weight="Medium" style={cn}>
<p></p>
</Quote>
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginTop: '0.5rem' }}>
·
</div>
</Article>
</Section>
</Layout>
);
}