334 lines
10 KiB
TypeScript
334 lines
10 KiB
TypeScript
import React from 'react';
|
|
import { Button, Card, message, Typography } from 'antd';
|
|
import {
|
|
StarOutlined,
|
|
LockOutlined,
|
|
GiftOutlined,
|
|
ThunderboltOutlined,
|
|
PlayCircleOutlined,
|
|
CheckCircleOutlined,
|
|
HeartOutlined,
|
|
EyeOutlined,
|
|
ArrowRightOutlined,
|
|
CrownOutlined,
|
|
} from '@ant-design/icons';
|
|
|
|
const CreativePlazaPage: React.FC = () => {
|
|
const handleUnlock = () => {
|
|
message.info('请联系客服开通会员');
|
|
};
|
|
|
|
// 顶部特性卡片
|
|
const features = [
|
|
{
|
|
icon: <ThunderboltOutlined style={{ fontSize: 26, color: '#8b5cf6' }} />,
|
|
title: 'AI 智能生成',
|
|
description: '先进 AI 技术一键产出高质量视频内容',
|
|
},
|
|
{
|
|
icon: <PlayCircleOutlined style={{ fontSize: 26, color: '#ec4899' }} />,
|
|
title: '多格式输出',
|
|
description: '支持多种视频格式,满足不同场景需求',
|
|
},
|
|
{
|
|
icon: <CheckCircleOutlined style={{ fontSize: 26, color: '#10b981' }} />,
|
|
title: '品质保证',
|
|
description: '专业级画质,细节清晰,色彩鲜艳',
|
|
},
|
|
{
|
|
icon: <HeartOutlined style={{ fontSize: 26, color: '#f59e0b' }} />,
|
|
title: '创意无限',
|
|
description: '丰富模板与风格,激发创作灵感',
|
|
},
|
|
];
|
|
|
|
// 精选案例占位
|
|
const caseList = [
|
|
{ title: '美妆直播切片', tag: '热门', tagColor: '#ef4444' },
|
|
{ title: '3C 数码测评', tag: '推荐', tagColor: '#6366f1' },
|
|
{ title: '美食探店 vlog', tag: '推荐', tagColor: '#6366f1' },
|
|
{ title: '服饰穿搭合集', tag: '热门', tagColor: '#ef4444' },
|
|
{ title: '家居场景展示', tag: '推荐', tagColor: '#6366f1' },
|
|
{ title: '母婴亲子内容', tag: '热门', tagColor: '#ef4444' },
|
|
];
|
|
|
|
return (
|
|
<div className="content_box">
|
|
{/* 顶部 Hero 区域 */}
|
|
<div
|
|
className="animate-fadeInUp"
|
|
style={{
|
|
padding: '28px 32px',
|
|
borderRadius: 16,
|
|
background: 'linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #fce7f3 100%)',
|
|
border: '1px solid rgba(139, 92, 246, 0.12)',
|
|
marginBottom: 24,
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 12 }}>
|
|
<div
|
|
style={{
|
|
width: 52,
|
|
height: 52,
|
|
borderRadius: 14,
|
|
background: 'linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
boxShadow: '0 6px 20px rgba(139, 92, 246, 0.3)',
|
|
}}
|
|
>
|
|
<GiftOutlined style={{ fontSize: 24, color: '#fff' }} />
|
|
</div>
|
|
<div>
|
|
<div className="shiny-text-container" style={{ marginBottom: 4 }}>
|
|
<span className="shiny-text" style={{ fontSize: 26, fontWeight: 700 }}>
|
|
创意素材案例
|
|
</span>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: '#7c3aed' }}>
|
|
<CrownOutlined style={{ fontSize: 12 }} />
|
|
<span>探索 AI 创作无限可能</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Typography.Text style={{ color: '#64748b', fontSize: 14, lineHeight: 1.7 }}>
|
|
精选 AI 生成的优秀素材案例,展示 AI 创作的无限潜力与创意灵感
|
|
</Typography.Text>
|
|
</div>
|
|
|
|
{/* 特性卡片 */}
|
|
{/* <div
|
|
className="animate-fadeInUp stagger-children"
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(4, 1fr)',
|
|
gap: 16,
|
|
marginBottom: 24,
|
|
}}
|
|
>
|
|
{features.map((feature, index) => (
|
|
<Card
|
|
key={index}
|
|
bordered={false}
|
|
hoverable
|
|
className="project-card"
|
|
style={{
|
|
borderRadius: 16,
|
|
background: '#fff',
|
|
border: '1px solid #e2e8f0',
|
|
padding: '4px 0',
|
|
}}
|
|
styles={{ body: { padding: 20 } }}
|
|
>
|
|
<div style={{ textAlign: 'left' }}>
|
|
<div
|
|
style={{
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 12,
|
|
background: 'linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.08))',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: 14,
|
|
}}
|
|
>
|
|
{feature.icon}
|
|
</div>
|
|
<div style={{ fontSize: 15, fontWeight: 600, color: '#1e293b', marginBottom: 6 }}>
|
|
{feature.title}
|
|
</div>
|
|
<div style={{ fontSize: 13, color: '#64748b', lineHeight: 1.6 }}>
|
|
{feature.description}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div> */}
|
|
|
|
{/* 精选案例展示区域 */}
|
|
<div
|
|
className="animate-fadeInUp"
|
|
style={{
|
|
padding: '24px 28px',
|
|
borderRadius: 16,
|
|
background: '#fff',
|
|
// border: '1px solid #e2e8f0',
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 20,
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
<div
|
|
style={{
|
|
width: 4,
|
|
height: 18,
|
|
background: 'linear-gradient(180deg, #6366f1, #8b5cf6)',
|
|
borderRadius: 2,
|
|
marginRight: 10,
|
|
}}
|
|
/>
|
|
<StarOutlined style={{ marginRight: 8, color: '#f59e0b', fontSize: 16 }} />
|
|
<span style={{ fontSize: 17, fontWeight: 600, color: '#1f2937' }}>精选案例展示</span>
|
|
|
|
</div>
|
|
{/* <Button
|
|
type="primary"
|
|
size="middle"
|
|
onClick={handleUnlock}
|
|
style={{
|
|
borderRadius: 10,
|
|
fontWeight: 500,
|
|
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
|
border: 'none',
|
|
boxShadow: '0 4px 14px rgba(99, 102, 241, 0.28)',
|
|
}}
|
|
>
|
|
<LockOutlined style={{ marginRight: 6 }} />
|
|
解锁全部案例
|
|
<ArrowRightOutlined style={{ marginLeft: 4, fontSize: 12 }} />
|
|
</Button> */}
|
|
</div>
|
|
|
|
{/* 案例网格 */}
|
|
<div
|
|
className="stagger-children"
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
gap: 16,
|
|
marginBottom: 16,
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
zIndex: 1,
|
|
background: 'rgb(255,255,255)',
|
|
// background:
|
|
// 'linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.55) 100%)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: 'column',
|
|
borderRadius: 14,
|
|
// boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.08)',
|
|
gap: 4,
|
|
color: '#fff',
|
|
}}
|
|
>
|
|
<Button
|
|
type="primary"
|
|
size="middle"
|
|
onClick={handleUnlock}
|
|
style={{
|
|
borderRadius: 10,
|
|
fontWeight: 500,
|
|
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
|
border: 'none',
|
|
boxShadow: '0 4px 14px rgba(99, 102, 241, 0.28)',
|
|
}}
|
|
>
|
|
<LockOutlined style={{ marginRight: 6 }} />
|
|
解锁全部案例
|
|
<ArrowRightOutlined style={{ marginLeft: 4, fontSize: 12 }} />
|
|
</Button>
|
|
{/* <LockOutlined style={{ fontSize: 22, color: '#94a3b8', cursor: 'pointer' }}
|
|
onClick={handleUnlock}
|
|
/>
|
|
<span style={{ fontSize: 16, color: '#1f2937', opacity: 0.9 }}>会员可查看</span> */}
|
|
</div>
|
|
|
|
{caseList.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className="project-card animate-fadeInUp"
|
|
style={{
|
|
position: 'relative',
|
|
borderRadius: 14,
|
|
overflow: 'hidden',
|
|
cursor: 'pointer',
|
|
border: '1px solid #e2e8f0',
|
|
background: '#fff',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: 'relative',
|
|
aspectRatio: '16/9',
|
|
background:
|
|
'linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
{/* 模糊视频缩略图占位 */}
|
|
<PlayCircleOutlined style={{ fontSize: 36, color: 'rgba(255,255,255,0.6)' }} />
|
|
{/* 标签 */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: 10,
|
|
left: 10,
|
|
padding: '2px 8px',
|
|
borderRadius: 6,
|
|
background: item.tagColor,
|
|
color: '#fff',
|
|
fontSize: 11,
|
|
fontWeight: 500,
|
|
}}
|
|
>
|
|
{item.tag}
|
|
</div>
|
|
|
|
</div>
|
|
<div
|
|
style={{
|
|
padding: '10px 14px',
|
|
background: '#f8fafc',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
fontSize: 13,
|
|
color: '#334155',
|
|
fontWeight: 500,
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
}}
|
|
>
|
|
{item.title}
|
|
</span>
|
|
<EyeOutlined style={{ fontSize: 13, color: '#94a3b8' }} />
|
|
</div>
|
|
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* 锁定遮罩 */}
|
|
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CreativePlazaPage;
|