469 lines
14 KiB
TypeScript
469 lines
14 KiB
TypeScript
import { Link, Outlet, useLocation } from 'react-router-dom'
|
||
import {
|
||
brand,
|
||
contact,
|
||
haoke,
|
||
hero,
|
||
images,
|
||
partner,
|
||
poetry,
|
||
qingxiang,
|
||
subsidy,
|
||
system,
|
||
tech,
|
||
techDetail,
|
||
} from '../content/site'
|
||
import './MobileViews.css'
|
||
|
||
export function MobileViews() {
|
||
const location = useLocation()
|
||
const path = location.pathname
|
||
|
||
switch (path) {
|
||
case '/':
|
||
return <MobileHomeView />
|
||
case '/brand':
|
||
return <MobileBrandView />
|
||
case '/poetry':
|
||
return <MobilePoetryView />
|
||
case '/qingxiang':
|
||
return <MobileQingxiangView />
|
||
case '/haoke':
|
||
return <MobileHaokeView />
|
||
case '/system':
|
||
return <MobileSystemView />
|
||
case '/tech':
|
||
return <MobileTechView />
|
||
case '/subsidy':
|
||
return <MobileSubsidyView />
|
||
case '/partner':
|
||
return <MobilePartnerView />
|
||
case '/tech-detail':
|
||
return <MobileTechDetailView />
|
||
case '/contact':
|
||
return <MobileContactView />
|
||
default:
|
||
return <Outlet />
|
||
}
|
||
}
|
||
|
||
/* 1. Mobile Home View */
|
||
function MobileHomeView() {
|
||
return (
|
||
<div className="m-view-container">
|
||
<div className="m-hero">
|
||
<div className="m-hero-sub">{hero.subBrand} · 移动全景</div>
|
||
<h1 className="m-hero-title">{hero.brand}</h1>
|
||
<p style={{ fontSize: '1.05rem', color: 'var(--gold)', fontFamily: 'Noto Serif SC', margin: 0 }}>
|
||
{hero.title}
|
||
</p>
|
||
<img src={images.t30} alt="酒祖杜康 T30" className="m-hero-img" />
|
||
<p className="m-lead" style={{ textAlign: 'center' }}>
|
||
{hero.subtitle}
|
||
</p>
|
||
<div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'center' }}>
|
||
<Link to="/brand" className="m-btn m-btn-primary">
|
||
{hero.primaryCta.label}
|
||
</Link>
|
||
<Link to="/partner" className="m-btn m-btn-outline">
|
||
{hero.secondaryCta.label}
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/* 2. Mobile Brand View */
|
||
function MobileBrandView() {
|
||
return (
|
||
<div className="m-view-container">
|
||
<div>
|
||
<div className="m-eyebrow">{brand.eyebrow}</div>
|
||
<h2 className="m-page-title">{brand.title}</h2>
|
||
<p className="m-lead">{brand.lead}</p>
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gap: '0.85rem' }}>
|
||
{brand.cards.map((card, idx) => (
|
||
<div key={card.title} className="m-card">
|
||
<div style={{ fontSize: '0.8rem', color: 'var(--gold)', fontWeight: 600 }}>0{idx + 1}</div>
|
||
<h3>{card.title}</h3>
|
||
<p>{card.text}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="m-card">
|
||
<h3>故里文明印记</h3>
|
||
<img
|
||
src={images.brand.manor}
|
||
alt="杜康庄园"
|
||
style={{ width: '100%', borderRadius: '0.3rem', marginTop: '0.3rem' }}
|
||
/>
|
||
<div style={{ display: 'grid', gap: '0.4rem', marginTop: '0.5rem' }}>
|
||
{brand.timeline.map((item) => (
|
||
<div
|
||
key={item}
|
||
style={{
|
||
fontSize: '0.88rem',
|
||
color: 'var(--ink-soft)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '0.5rem',
|
||
}}
|
||
>
|
||
<span
|
||
style={{
|
||
width: '6px',
|
||
height: '6px',
|
||
borderRadius: '50%',
|
||
background: 'var(--brand)',
|
||
flexShrink: 0,
|
||
}}
|
||
/>
|
||
<span>{item}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="m-closing">{brand.closing}</div>
|
||
|
||
<div className="m-deep-links">
|
||
<div style={{ fontSize: '0.9rem', color: 'var(--brand)', fontWeight: 600 }}>深度阅读</div>
|
||
{brand.deepReads.map((dp) => (
|
||
<Link key={dp.path} to={dp.path} className="m-deep-card">
|
||
<strong>{dp.label} ›</strong>
|
||
<span>{dp.blurb}</span>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/* 3. Mobile Poetry View */
|
||
function MobilePoetryView() {
|
||
return (
|
||
<div className="m-view-container">
|
||
<div>
|
||
<div className="m-eyebrow">{poetry.eyebrow}</div>
|
||
<h2 className="m-page-title">{poetry.title}</h2>
|
||
<p className="m-lead">{poetry.lead}</p>
|
||
</div>
|
||
|
||
<div className="m-poem-box">
|
||
<p className="m-poem-quote">“{poetry.mainPoem.quote}”</p>
|
||
<div className="m-poem-source">—— {poetry.mainPoem.source}</div>
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gap: '0.85rem' }}>
|
||
{poetry.poems.map((p) => (
|
||
<div key={p.source} className="m-card">
|
||
<p style={{ fontFamily: 'Noto Serif SC', fontSize: '1rem', color: 'var(--ink)' }}>“{p.quote}”</p>
|
||
<div style={{ fontSize: '0.82rem', color: 'var(--gold)', textAlign: 'right' }}>—— {p.source}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="m-closing">{poetry.closing}</div>
|
||
|
||
<div className="m-deep-links">
|
||
<div style={{ fontSize: '0.9rem', color: 'var(--brand)', fontWeight: 600 }}>诗酒专题</div>
|
||
{poetry.deepReads.map((dp) => (
|
||
<Link key={dp.path} to={dp.path} className="m-deep-card">
|
||
<strong>{dp.label} ›</strong>
|
||
<span>{dp.blurb}</span>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/* 4. Mobile Qingxiang View */
|
||
function MobileQingxiangView() {
|
||
return (
|
||
<div className="m-view-container">
|
||
<div>
|
||
<div className="m-eyebrow">{qingxiang.eyebrow}</div>
|
||
<h2 className="m-page-title">{qingxiang.title}</h2>
|
||
<p className="m-lead">{qingxiang.lead}</p>
|
||
</div>
|
||
|
||
<div style={{ textAlign: 'center' }}>
|
||
<img src={images.t30} alt="酒祖杜康清香 T30" style={{ width: '9rem', margin: '0 auto' }} />
|
||
<div className="m-rings-row">
|
||
{qingxiang.styleWords.map((word) => (
|
||
<div key={word} className="m-ring-item">
|
||
{word}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gap: '0.85rem' }}>
|
||
{qingxiang.positions.map((pos) => (
|
||
<div key={pos.title} className="m-card">
|
||
<h3>{pos.title}</h3>
|
||
<p>{pos.text}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="m-card">
|
||
<h3>品鉴仪式 · 抿咂呵</h3>
|
||
<div style={{ display: 'grid', gap: '0.5rem', marginTop: '0.3rem' }}>
|
||
{qingxiang.tasting.map((t) => (
|
||
<div key={t.title} style={{ fontSize: '0.88rem' }}>
|
||
<strong style={{ color: 'var(--brand)' }}>{t.title}：</strong>
|
||
<span style={{ color: 'var(--ink-soft)' }}>{t.text}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="m-closing">{qingxiang.mission}</div>
|
||
|
||
<div className="m-deep-links">
|
||
<div style={{ fontSize: '0.9rem', color: 'var(--brand)', fontWeight: 600 }}>清香宝典专题</div>
|
||
{qingxiang.deepReads.map((dp) => (
|
||
<Link key={dp.path} to={dp.path} className="m-deep-card">
|
||
<strong>{dp.label} ›</strong>
|
||
<span>{dp.blurb}</span>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/* 5. Mobile Haoke View */
|
||
function MobileHaokeView() {
|
||
return (
|
||
<div className="m-view-container">
|
||
<div>
|
||
<div className="m-eyebrow">{haoke.eyebrow}</div>
|
||
<h2 className="m-page-title">{haoke.title}</h2>
|
||
<p className="m-lead">{haoke.lead}</p>
|
||
</div>
|
||
|
||
<div className="m-card" style={{ background: 'rgba(166, 28, 32, 0.08)', borderColor: 'var(--brand)' }}>
|
||
<h3 style={{ fontSize: '1.15rem' }}>核心商业机制</h3>
|
||
<p style={{ fontWeight: 600, color: 'var(--brand)', fontSize: '1.02rem', lineHeight: 1.5 }}>
|
||
{haoke.oneLiner}
|
||
</p>
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gap: '0.85rem' }}>
|
||
{haoke.points.map((pt) => (
|
||
<div key={pt.title} className="m-card">
|
||
<h3>{pt.title}</h3>
|
||
<p>{pt.text}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="m-closing">{haoke.closing}</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/* 6. Mobile System View */
|
||
function MobileSystemView() {
|
||
return (
|
||
<div className="m-view-container">
|
||
<div>
|
||
<div className="m-eyebrow">{system.eyebrow}</div>
|
||
<h2 className="m-page-title">{system.title}</h2>
|
||
<p className="m-lead">{system.lead}</p>
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gap: '0.85rem' }}>
|
||
{system.ends.map((end) => (
|
||
<div key={end.title} className="m-card">
|
||
<h3>{end.title}</h3>
|
||
<p style={{ fontWeight: 500, color: 'var(--ink)' }}>{end.role}</p>
|
||
<div
|
||
style={{
|
||
fontSize: '0.82rem',
|
||
color: 'var(--gold)',
|
||
paddingTop: '0.4rem',
|
||
borderTop: '1px dashed rgba(196, 163, 90, 0.3)',
|
||
}}
|
||
>
|
||
核心能力：{end.caps}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="m-card" style={{ textAlign: 'center', background: 'rgba(166, 28, 32, 0.05)' }}>
|
||
<div style={{ fontSize: '0.82rem', color: 'var(--brand)', fontWeight: 600 }}>闭环链路</div>
|
||
<p style={{ fontWeight: 500, color: 'var(--brand)' }}>{system.loop}</p>
|
||
</div>
|
||
|
||
<div className="m-closing">{system.closing}</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/* 7. Mobile Tech View */
|
||
function MobileTechView() {
|
||
return (
|
||
<div className="m-view-container">
|
||
<div>
|
||
<div className="m-eyebrow">{tech.eyebrow}</div>
|
||
<h2 className="m-page-title">{tech.title}</h2>
|
||
<p className="m-lead">{tech.lead}</p>
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gap: '0.85rem' }}>
|
||
{tech.points.map((pt) => (
|
||
<div key={pt.title} className="m-card">
|
||
<h3>{pt.title}</h3>
|
||
<p>{pt.text}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="m-closing">{tech.claim}</div>
|
||
|
||
<div style={{ textAlign: 'center', marginTop: '0.5rem' }}>
|
||
<Link to={tech.cta.to} className="m-btn m-btn-primary">
|
||
{tech.cta.label}
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/* 8. Mobile Subsidy View */
|
||
function MobileSubsidyView() {
|
||
return (
|
||
<div className="m-view-container">
|
||
<div>
|
||
<div className="m-eyebrow">{subsidy.eyebrow}</div>
|
||
<h2 className="m-page-title">{subsidy.title}</h2>
|
||
<div style={{ fontSize: '0.92rem', color: 'var(--gold)', fontWeight: 600, marginBottom: '0.5rem' }}>
|
||
{subsidy.subtitle}
|
||
</div>
|
||
<p className="m-lead">{subsidy.lead}</p>
|
||
</div>
|
||
|
||
<div className="m-card" style={{ textAlign: 'center', padding: '1.5rem 1rem' }}>
|
||
<div style={{ fontSize: '0.88rem', color: 'var(--gold)', fontWeight: 600 }}>专项补贴规模</div>
|
||
<div className="m-big-num">{subsidy.number}</div>
|
||
<p style={{ fontSize: '0.85rem' }}>{subsidy.numberNote}</p>
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gap: '0.85rem' }}>
|
||
{subsidy.points.map((pt) => (
|
||
<div key={pt.title} className="m-card">
|
||
<h3>{pt.title}</h3>
|
||
<p>{pt.text}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="m-closing">{subsidy.closing}</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/* 9. Mobile Partner View */
|
||
function MobilePartnerView() {
|
||
return (
|
||
<div className="m-view-container">
|
||
<div>
|
||
<div className="m-eyebrow">{partner.eyebrow}</div>
|
||
<h2 className="m-page-title">{partner.title}</h2>
|
||
<p className="m-lead">{partner.lead}</p>
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gap: '0.85rem' }}>
|
||
{partner.points.map((pt) => (
|
||
<div key={pt.title} className="m-card">
|
||
<h3>{pt.title}</h3>
|
||
<p>{pt.text}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'center', marginTop: '1rem' }}>
|
||
<Link to={partner.primaryCta.to} className="m-btn m-btn-primary">
|
||
{partner.primaryCta.label}
|
||
</Link>
|
||
<Link to={partner.secondaryCta.to} className="m-btn m-btn-outline">
|
||
{partner.secondaryCta.label}
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/* 10. Mobile Tech Detail View */
|
||
function MobileTechDetailView() {
|
||
return (
|
||
<div className="m-view-container">
|
||
<div>
|
||
<div className="m-eyebrow">{techDetail.eyebrow}</div>
|
||
<h2 className="m-page-title">{techDetail.title}</h2>
|
||
<p className="m-lead">{techDetail.lead}</p>
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gap: '0.85rem' }}>
|
||
{techDetail.ports.map((port) => (
|
||
<div key={port.title} className="m-card">
|
||
<h3>{port.title}</h3>
|
||
<p>{port.text}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="m-closing">{techDetail.closing}</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/* 11. Mobile Contact View */
|
||
function MobileContactView() {
|
||
return (
|
||
<div className="m-view-container">
|
||
<div>
|
||
<div className="m-eyebrow">{contact.eyebrow}</div>
|
||
<h2 className="m-page-title">{contact.title}</h2>
|
||
<p className="m-lead">{contact.lead}</p>
|
||
</div>
|
||
|
||
<div className="m-card m-qr-card">
|
||
<div className="m-qr-img">
|
||
<img src={images.qr} alt="微信二维码" />
|
||
</div>
|
||
<div>
|
||
<h3 style={{ fontSize: '1.25rem' }}>{contact.name}</h3>
|
||
<div style={{ fontSize: '0.88rem', color: 'var(--gold)', margin: '0.2rem 0 0.5rem' }}>
|
||
{contact.role}
|
||
</div>
|
||
<a
|
||
href={`tel:${contact.phone}`}
|
||
style={{
|
||
display: 'inline-block',
|
||
fontSize: '1.3rem',
|
||
fontWeight: 700,
|
||
color: 'var(--brand)',
|
||
textDecoration: 'none',
|
||
}}
|
||
>
|
||
📞 {contact.phone}
|
||
</a>
|
||
<p style={{ fontSize: '0.8rem', color: 'var(--ink-soft)', marginTop: '0.4rem' }}>
|
||
{contact.wechatHint}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|