Files
newsui/packages/docs/app/blocks/zh-feature/page.tsx
T

106 lines
7.9 KiB
TypeScript
Raw Normal View History

'use client';
import { Layout, Section, Article, BodyText, Quote, Figure, PullQuote } from 'newspaperui-components';
const cn = { fontFamily: 'var(--font-family-cjk-serif)' };
const cnRed = { color: 'var(--nui-accent-cjk-red)' };
export default function ZhFeature() {
return (
<Layout columns={24} maxWidth="1200px" padding="2rem 1.5rem">
{/* 副刊报头 */}
<header style={{
borderTop: '2px 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: '32px', fontWeight: 900, margin: 0, letterSpacing: '0.05em' }}> </h1>
<div style={{ ...cn, ...cnRed, fontSize: '14px', fontWeight: 600 }}>· ·</div>
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)' }}>2026 5 19 · C </div>
</header>
{/* 专题主标题 */}
<Section columns={24} gap="2rem" style={{ marginBottom: '2rem' }}>
<Article span={24}>
<div style={{ ...cn, ...cnRed, fontSize: '13px', fontWeight: 700, marginBottom: '0.5rem', letterSpacing: '0.15em', textAlign: 'center' }}>访</div>
<h2 style={{ ...cn, fontSize: '52px', fontWeight: 900, lineHeight: 1.15, color: 'var(--nui-text-primary)', textAlign: 'center', margin: 0 }}>
</h2>
<h3 style={{ ...cn, fontSize: '20px', fontWeight: 500, lineHeight: 1.5, color: 'var(--nui-text-secondary)', textAlign: 'center', margin: '0.75rem 0 1rem 0', maxWidth: '900px', marginLeft: 'auto', marginRight: 'auto' }}>
访
</h3>
<div style={{ ...cn, textAlign: 'center', fontSize: '13px', color: 'var(--nui-text-muted)', marginBottom: '0.5rem' }}>
·
</div>
</Article>
</Section>
{/* 主图 + 介绍 */}
<Section columns={24} gap="2rem" style={{ marginBottom: '2rem' }}>
<Article span={12}>
<Figure
src="https://images.unsplash.com/photo-1582408921715-18e7806365c1?auto=format&fit=crop&w=1200&q=80"
alt="林文渊在工作室"
caption="林文渊在故宫博物院文华殿筹备中。"
credit="摄影 黄翔"
/>
</Article>
<Article span={12}>
<BodyText weight="High" dropCap style={cn}>
<p>殿线穿广穿</p>
<p></p>
<p></p>
<p>访殿线</p>
</BodyText>
</Article>
</Section>
{/* 访谈正文(双栏) */}
<Section columns={24} gap="2rem" style={{ marginBottom: '2rem' }}>
<Article span={24}>
<BodyText weight="High" columns={2} style={cn}>
<p style={{ ...cnRed, fontWeight: 700, marginBottom: '0.5rem' }}></p>
<p>西</p>
</BodyText>
</Article>
<Article span={24}>
<PullQuote weight="High" align="center" author="林文渊" style={{ margin: '1rem 0 2rem' }}>
亿
</PullQuote>
</Article>
<Article span={24}>
<BodyText weight="High" columns={2} style={cn}>
<p style={{ ...cnRed, fontWeight: 700, marginBottom: '0.5rem' }}></p>
<p>西西</p>
<p></p>
<p></p>
<p style={{ ...cnRed, fontWeight: 700, marginTop: '1rem', marginBottom: '0.5rem' }}></p>
<p> A B 线</p>
<p style={{ ...cnRed, fontWeight: 700, marginTop: '1rem', marginBottom: '0.5rem' }}></p>
<p></p>
</BodyText>
</Article>
</Section>
{/* 尾声引语 */}
<Section columns={24} gap="2rem" style={{ marginTop: '2rem', paddingTop: '2rem', borderTop: '1px solid var(--nui-rule-hairline)' }}>
<Article span={24}>
<Quote variant="block" weight="High" style={{ ...cn, textAlign: 'center', maxWidth: '700px', margin: '0 auto', borderLeft: 'none' }}>
访殿
</Quote>
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', textAlign: 'center', marginTop: '1rem', letterSpacing: '0.1em' }}>
· 殿
</div>
</Article>
</Section>
</Layout>
);
}