Files

106 lines
7.9 KiB
TypeScript
Raw Permalink 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, BodyText, Quote, Figure, PullQuote } from 'newspaperui';
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>
);
}