68 lines
2.6 KiB
JavaScript
68 lines
2.6 KiB
JavaScript
import { useRef } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Card, Button } from 'antd';
|
|
import { RightOutlined } from '@ant-design/icons';
|
|
import './Categories.css';
|
|
|
|
const Categories = () => {
|
|
const scrollRef = useRef(null);
|
|
const navigate = useNavigate();
|
|
|
|
const categories = [
|
|
{ name: '活动', count: '408131', gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
|
|
{ name: '中式', count: '105545', gradient: 'linear-gradient(135deg, #c94b4b 0%, #4b134f 100%)' },
|
|
{ name: '直播', count: '35429', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
|
|
{ name: '旅游', count: '97826', gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
|
|
{ name: '周年庆', count: '15868', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
|
|
{ name: '长图', count: '130856', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
|
|
{ name: '价值点', count: '214448', gradient: 'linear-gradient(135deg, #0c3483 0%, #a2b6df 100%)' },
|
|
{ name: '酒吧', count: '36397', gradient: 'linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%)' },
|
|
];
|
|
|
|
const scroll = (direction) => {
|
|
if (scrollRef.current) {
|
|
const scrollAmount = direction === 'left' ? -300 : 300;
|
|
scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
|
|
}
|
|
};
|
|
|
|
const handleCategoryClick = (categoryName) => {
|
|
navigate(`/category/${categoryName}`);
|
|
};
|
|
|
|
return (
|
|
<section className="categories">
|
|
<div className="categories-container">
|
|
<div className="categories-scroll" ref={scrollRef}>
|
|
{categories.map((cat, index) => (
|
|
<div
|
|
key={cat.name}
|
|
className="category-card"
|
|
style={{ '--delay': `${index * 0.1}s` }}
|
|
onClick={() => handleCategoryClick(cat.name)}
|
|
>
|
|
<div className="category-image" style={{ background: cat.gradient }}>
|
|
<div className="category-overlay">
|
|
<span className="category-icon">{cat.name.charAt(0)}</span>
|
|
</div>
|
|
</div>
|
|
<div className="category-info">
|
|
<span className="category-name">{cat.name}</span>
|
|
<span className="category-count">{cat.count} 张</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<Button
|
|
className="scroll-btn scroll-btn-right"
|
|
shape="circle"
|
|
icon={<RightOutlined />}
|
|
onClick={() => scroll('right')}
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Categories;
|