62 lines
2.6 KiB
TypeScript
62 lines
2.6 KiB
TypeScript
import { Link } from 'react-router-dom'
|
|
import { SERVICES as FALLBACK_SERVICES } from '@/data/mock'
|
|
import { useCMS, useCMSTexts, getCMSServices } from '@/services/cms'
|
|
import GlobalCTA from '@/components/Layout/GlobalCTA'
|
|
|
|
export default function Services() {
|
|
const { data: SERVICES } = useCMS(getCMSServices, FALLBACK_SERVICES)
|
|
const { data: texts } = useCMSTexts()
|
|
return (
|
|
<div>
|
|
<div className="page-header">
|
|
<div className="container">
|
|
<div className="breadcrumb">
|
|
<Link to="/" style={{ color: 'rgba(255,255,255,0.8)' }}>
|
|
首页
|
|
</Link>{' '}
|
|
/ 产品服务
|
|
</div>
|
|
<h1>产品服务</h1>
|
|
<p>{texts['services.header_description'] || '围绕下一步行动展示标准产品与定制陪跑服务。'}</p>
|
|
</div>
|
|
</div>
|
|
<section className="section">
|
|
<div className="container">
|
|
<div className="grid-3">
|
|
{SERVICES.map(s => (
|
|
<div key={s.id} className="card" style={{ display: 'flex', flexDirection: 'column' }}>
|
|
<div style={{ fontSize: 11, letterSpacing: '0.08em', color: s.serviceType === 'standard' ? '#163E70' : '#0f6b5b', fontWeight: 800 }}>
|
|
{s.serviceType === 'standard' ? '标准产品' : '深度定制'}
|
|
</div>
|
|
<h3 style={{ marginTop: 6 }}>{s.title}</h3>
|
|
<p>{s.summary}</p>
|
|
{s.highlights && (
|
|
<ul style={{ fontSize: 13, color: '#475569', paddingLeft: 18, marginTop: 8 }}>
|
|
{s.highlights.map(h => (
|
|
<li key={h}>{h}</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
<div style={{ marginTop: 'auto', paddingTop: 16 }}>
|
|
{s.serviceType === 'standard' && s.price ? (
|
|
<div style={{ fontWeight: 900, color: 'var(--primary)', fontSize: 18 }}>
|
|
¥{(s.price / 1000).toFixed(2)}k <span style={{ fontSize: 12, fontWeight: 400 }}>{s.priceUnit}</span>
|
|
</div>
|
|
) : (
|
|
<div style={{ fontSize: 13, color: '#0f6b5b', fontWeight: 700 }}>咨询/获取方案（无价格）</div>
|
|
)}
|
|
{s.priceNote && <div style={{ fontSize: 11, color: '#94a3b8' }}>{s.priceNote}</div>}
|
|
<Link to={`/services/${s.slug}`} className="btn btn-primary" style={{ width: '100%', marginTop: 10 }}>
|
|
{s.ctaText} →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<GlobalCTA />
|
|
</div>
|
|
)
|
|
}
|