Files
ameiba_cn_new/src/pages/Methods/index.tsx
T

50 lines
1.9 KiB
TypeScript

import { Link } from 'react-router-dom'
import { METHODS as FALLBACK_METHODS } from '@/data/mock'
import { useCMS, getCMSMethods } from '@/services/cms'
import GlobalCTA from '@/components/Layout/GlobalCTA'
export default function Methods() {
const { data: METHODS } = useCMS(getCMSMethods, FALLBACK_METHODS)
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>方法决定路径,能力决定落地。二者闭环,支撑企业进化。</p>
<div className="placeholder" style={{ marginTop: 12 }}>
【占位|待业务确认】方法论体系、工具、交付标准待知识母盘灌入。
</div>
</div>
</div>
<section className="section">
<div className="container">
<div className="grid-2">
{METHODS.map(m => (
<Link key={m.id} to={`/methods/${m.slug}`} className="card" style={{ display: 'block' }}>
<p className="eyebrow">{m.group === 'method' ? '方法' : '能力'}</p>
<h3>{m.title}</h3>
<p>{m.summary}</p>
{m.steps && (
<ol style={{ fontSize: 13, color: '#475569', paddingLeft: 18, marginTop: 8 }}>
{m.steps.map(s => (
<li key={s}>{s}</li>
))}
</ol>
)}
<span style={{ fontSize: 12, color: '#0f6b5b', fontWeight: 700, marginTop: 10, display: 'inline-block' }}>查看详情 </span>
</Link>
))}
</div>
</div>
</section>
<GlobalCTA />
</div>
)
}