115 lines
3.4 KiB
TypeScript
115 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import { Button, Card, message, Typography } from 'antd';
|
|
import {
|
|
StarOutlined,
|
|
CrownOutlined,
|
|
LockOutlined,
|
|
ThunderboltOutlined,
|
|
GiftOutlined,
|
|
BarChartOutlined,
|
|
FireOutlined,
|
|
TrophyOutlined,
|
|
} from '@ant-design/icons';
|
|
|
|
const PopularPage: React.FC = () => {
|
|
const handleUnlock = () => {
|
|
message.info('请联系客服开通');
|
|
};
|
|
|
|
return (
|
|
<div style={{ padding: '20px 0' }}>
|
|
<div style={{ marginBottom: 32 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
|
|
<div style={{
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 14,
|
|
background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
boxShadow: '0 4px 16px rgba(245,158,11,0.3)',
|
|
}}>
|
|
<BarChartOutlined style={{ fontSize: 22, color: '#fff' }} />
|
|
</div>
|
|
<div>
|
|
<Typography.Title level={2} style={{ margin: 0, color: '#1e293b', fontWeight: 700 }}>
|
|
行业爆款大盘
|
|
<span style={{ color: '#6366f1', fontSize: 14, fontWeight: 400, marginLeft: 8 }}>
|
|
发现热门素材趋势
|
|
</span>
|
|
</Typography.Title>
|
|
</div>
|
|
</div>
|
|
<Typography.Text style={{ color: '#64748b' }}>
|
|
实时追踪各行业爆款素材，把握创作风向，打造热门内容
|
|
</Typography.Text>
|
|
</div>
|
|
|
|
<Card
|
|
bordered={false}
|
|
style={{
|
|
borderRadius: 20,
|
|
background: 'linear-gradient(135deg, rgba(245,158,11,0.04) 0%, rgba(217,119,6,0.04) 100%)',
|
|
border: '1px solid rgba(245,158,11,0.1)',
|
|
padding: 10,
|
|
marginBottom: 32,
|
|
}}
|
|
>
|
|
<Typography.Title level={4} style={{ marginBottom: 20, color: '#1e293b' }}>
|
|
<FireOutlined style={{ marginRight: 8, color: '#f59e0b' }} />
|
|
行业热度排行
|
|
</Typography.Title>
|
|
<Card
|
|
bordered={false}
|
|
style={{
|
|
borderRadius: 16,
|
|
background: '#fafafa',
|
|
padding: 40,
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
<div style={{ color: '#94a3b8', fontSize: 14 }}>
|
|
敬请期待行业热度排行
|
|
</div>
|
|
</Card>
|
|
</Card>
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
|
|
<Typography.Title level={4} style={{ margin: 0, color: '#1e293b' }}>
|
|
<TrophyOutlined style={{ marginRight: 8, color: '#6366f1' }} />
|
|
爆款素材榜单
|
|
</Typography.Title>
|
|
<Button
|
|
type="primary"
|
|
size="middle"
|
|
onClick={handleUnlock}
|
|
style={{
|
|
borderRadius: 10,
|
|
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
|
border: 'none',
|
|
}}
|
|
>
|
|
<LockOutlined style={{ marginRight: 6 }} />
|
|
立即解锁全部
|
|
</Button>
|
|
</div>
|
|
|
|
<Card
|
|
bordered={false}
|
|
style={{
|
|
borderRadius: 16,
|
|
background: '#fafafa',
|
|
padding: 40,
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
<div style={{ color: '#94a3b8', fontSize: 14 }}>
|
|
敬请期待更多爆款素材
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PopularPage; |