114 lines
3.9 KiB
JavaScript
114 lines
3.9 KiB
JavaScript
import { useParams, useNavigate } from 'react-router-dom';
|
|
import { Button } from 'antd';
|
|
import { LeftOutlined, AppstoreOutlined, FireOutlined, EyeOutlined } from '@ant-design/icons';
|
|
import Header from '../components/Header';
|
|
import Footer from '../components/Footer';
|
|
import Works from '../components/Works';
|
|
import './CategoryDetail.css';
|
|
|
|
const CategoryDetail = () => {
|
|
const { name } = useParams();
|
|
const navigate = useNavigate();
|
|
|
|
const categoryData = {
|
|
文化墙: {
|
|
count: '6572',
|
|
gradient: 'linear-gradient(135deg, #d9755d 0%, #f2bb7c 100%)',
|
|
description: '适合企业形象、品牌理念和空间场景布置的长图与信息展示素材。',
|
|
},
|
|
周年庆: {
|
|
count: '15868',
|
|
gradient: 'linear-gradient(135deg, #e17baa 0%, #f7c46c 100%)',
|
|
description: '围绕纪念日、店庆、品牌里程碑等主题的高频视觉物料。',
|
|
},
|
|
直播: {
|
|
count: '35429',
|
|
gradient: 'linear-gradient(135deg, #4a8ee8 0%, #57d3e2 100%)',
|
|
description: '直播预告、封面、流程页和互动氛围图的整套素材集合。',
|
|
},
|
|
包装: {
|
|
count: '9533',
|
|
gradient: 'linear-gradient(135deg, #2f8f73 0%, #86d6b2 100%)',
|
|
description: '包装延展、产品展示和品牌包装视觉的常用内容。',
|
|
},
|
|
科技: {
|
|
count: '44921',
|
|
gradient: 'linear-gradient(135deg, #4356a8 0%, #7eb0da 100%)',
|
|
description: '偏未来感、信息感和产品感表达的科技类视觉素材。',
|
|
},
|
|
活动: {
|
|
count: '408131',
|
|
gradient: 'linear-gradient(135deg, #8ec4d8 0%, #2f87a8 100%)',
|
|
description: '最适合首页承接的热门分类之一，覆盖促销、开业和节点营销素材。',
|
|
},
|
|
医美: {
|
|
count: '223068',
|
|
gradient: 'linear-gradient(135deg, #f0a6b4 0%, #f7d6df 100%)',
|
|
description: '轻医美、抗衰、项目卖点和机构宣传类视觉内容。',
|
|
},
|
|
邀请函: {
|
|
count: '15361',
|
|
gradient: 'linear-gradient(135deg, #a87ab8 0%, #ead9f3 100%)',
|
|
description: '会议、婚礼、活动和品牌邀约相关的正式视觉模板。',
|
|
},
|
|
};
|
|
|
|
const category = categoryData[name] || {
|
|
count: '0',
|
|
gradient: 'linear-gradient(135deg, #d9755d 0%, #f2bb7c 100%)',
|
|
description: '当前分类正在持续补充中，可以先浏览已上线的作品内容。',
|
|
};
|
|
|
|
return (
|
|
<div className="category-detail-page">
|
|
<Header />
|
|
|
|
<div className="category-detail-hero" style={{ background: category.gradient }}>
|
|
<div className="category-detail-overlay">
|
|
<Button icon={<LeftOutlined />} className="back-btn" onClick={() => navigate('/')}>
|
|
返回首页
|
|
</Button>
|
|
|
|
<div className="category-detail-content">
|
|
<span className="category-detail-kicker">分类精选</span>
|
|
<h1 className="category-detail-title">{name}</h1>
|
|
<p className="category-detail-desc">{category.description}</p>
|
|
|
|
<div className="category-detail-stats">
|
|
<div className="category-stat">
|
|
<AppstoreOutlined />
|
|
<div>
|
|
<strong>{category.count}</strong>
|
|
<span>作品总量</span>
|
|
</div>
|
|
</div>
|
|
<div className="category-stat">
|
|
<FireOutlined />
|
|
<div>
|
|
<strong>高频</strong>
|
|
<span>适合首页承接</span>
|
|
</div>
|
|
</div>
|
|
<div className="category-stat">
|
|
<EyeOutlined />
|
|
<div>
|
|
<strong>详情页</strong>
|
|
<span>支持预览与下载</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="category-detail-works">
|
|
<Works categoryFilter={name} title={`${name} 分类作品`} />
|
|
</div>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CategoryDetail;
|