TIJIAO
This commit is contained in:
@@ -0,0 +1,468 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user