增加爆款榜单、创意广场假页面
This commit is contained in:
-442
File diff suppressed because one or more lines are too long
+442
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -28,7 +28,7 @@
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<script type="module" crossorigin src="/assets/index-BjAuFGyZ.js"></script>
|
||||
<script type="module" crossorigin src="/assets/index-D9QoFfGP.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-eLRg4pQk.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -25,6 +25,8 @@ import RemoveRw from './pages/RemoveRw';
|
||||
// import RemoveFenbu from './pages/RemoveFenbu';
|
||||
import ConsumePage from './pages/ConsumePage';
|
||||
import AuthorizationWaitingPage from './pages/AuthorizationWaitingPage';
|
||||
import PopularPage from './pages/PopularPage';
|
||||
import CreativePlazaPage from './pages/CreativePlazaPage';
|
||||
import { useAuthStore } from './store/useAuthStore';
|
||||
const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
|
||||
const { user, loading, checkAuth } = useAuthStore();
|
||||
@@ -113,6 +115,8 @@ const App = () => {
|
||||
<Route path="authoriza-waiting" element={<AuthorizationWaitingPage />} />
|
||||
<Route path="materials" element={<MaterialListPage />} />
|
||||
<Route path="consume" element={<ConsumePage />} />
|
||||
<Route path="popular" element={<PopularPage />} />
|
||||
<Route path="creativeplaza" element={<CreativePlazaPage />} />
|
||||
</Route>
|
||||
<Route path="*" element={<Navigate to="/projects" replace />} />
|
||||
</Routes>
|
||||
|
||||
@@ -0,0 +1,379 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Button, Card, Modal, message, Typography, Space } from 'antd';
|
||||
import {
|
||||
StarOutlined,
|
||||
LockOutlined,
|
||||
PhoneOutlined,
|
||||
MailOutlined,
|
||||
MessageOutlined,
|
||||
GiftOutlined,
|
||||
BellOutlined,
|
||||
WalletOutlined,
|
||||
ThunderboltOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
const CreativePlazaPage: React.FC = () => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
const creativeFeatures = [
|
||||
{
|
||||
icon: <GiftOutlined style={{ fontSize: 24, color: '#ec4899' }} />,
|
||||
title: '创意灵感',
|
||||
description: '海量创意灵感库，激发无限创作潜能',
|
||||
color: 'linear-gradient(135deg, rgba(236,72,153,0.1) 0%, rgba(236,72,153,0.05) 100%)',
|
||||
borderColor: 'rgba(236,72,153,0.2)',
|
||||
},
|
||||
{
|
||||
icon: <BellOutlined style={{ fontSize: 24, color: '#06b6d4' }} />,
|
||||
title: '素材集市',
|
||||
description: '丰富素材资源，打造独特作品风格',
|
||||
color: 'linear-gradient(135deg, rgba(6,182,212,0.1) 0%, rgba(6,182,212,0.05) 100%)',
|
||||
borderColor: 'rgba(6,182,212,0.2)',
|
||||
},
|
||||
{
|
||||
icon: <ThunderboltOutlined style={{ fontSize: 24, color: '#8b5cf6' }} />,
|
||||
title: '特效工坊',
|
||||
description: '专业特效工具，提升视频质感',
|
||||
color: 'linear-gradient(135deg, rgba(139,92,246,0.1) 0%, rgba(139,92,246,0.05) 100%)',
|
||||
borderColor: 'rgba(139,92,246,0.2)',
|
||||
},
|
||||
{
|
||||
icon: <StarOutlined style={{ fontSize: 24, color: '#f59e0b' }} />,
|
||||
title: '精品模板',
|
||||
description: '精选高品质模板，一键快速出片',
|
||||
color: 'linear-gradient(135deg, rgba(245,158,11,0.1) 0%, rgba(245,158,11,0.05) 100%)',
|
||||
borderColor: 'rgba(245,158,11,0.2)',
|
||||
},
|
||||
];
|
||||
|
||||
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, #8b5cf6 0%, #6366f1 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
boxShadow: '0 4px 16px rgba(139,92,246,0.3)',
|
||||
}}>
|
||||
<GiftOutlined 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>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, marginBottom: 32 }}>
|
||||
{creativeFeatures.map((feature, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
bordered={false}
|
||||
style={{
|
||||
borderRadius: 16,
|
||||
background: feature.color,
|
||||
border: `1px solid ${feature.borderColor}`,
|
||||
padding: 20,
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{ marginBottom: 16 }}>{feature.icon}</div>
|
||||
<Typography.Title level={4} style={{ marginBottom: 8, color: '#1e293b' }}>
|
||||
{feature.title}
|
||||
</Typography.Title>
|
||||
<Typography.Text style={{ color: '#64748b', fontSize: 13 }}>
|
||||
{feature.description}
|
||||
</Typography.Text>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginBottom: 32 }}>
|
||||
<Card
|
||||
bordered={false}
|
||||
style={{
|
||||
borderRadius: 16,
|
||||
background: 'linear-gradient(135deg, rgba(99,102,241,0.03) 0%, rgba(139,92,246,0.03) 100%)',
|
||||
border: '1px solid rgba(99,102,241,0.08)',
|
||||
padding: 20,
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
height: 180,
|
||||
borderRadius: 12,
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 16,
|
||||
}}>
|
||||
<BellOutlined style={{ fontSize: 48, color: 'rgba(255,255,255,0.8)' }} />
|
||||
</div>
|
||||
<Typography.Title level={5} style={{ marginBottom: 8, color: '#1e293b' }}>
|
||||
灵感发现
|
||||
</Typography.Title>
|
||||
<Typography.Text style={{ color: '#64748b', fontSize: 13 }}>
|
||||
发现最新创意趋势，获取创作灵感
|
||||
</Typography.Text>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
bordered={false}
|
||||
style={{
|
||||
borderRadius: 16,
|
||||
background: 'linear-gradient(135deg, rgba(245,158,11,0.03) 0%, rgba(217,119,6,0.03) 100%)',
|
||||
border: '1px solid rgba(245,158,11,0.08)',
|
||||
padding: 20,
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
height: 180,
|
||||
borderRadius: 12,
|
||||
background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 16,
|
||||
}}>
|
||||
<GiftOutlined style={{ fontSize: 48, color: 'rgba(255,255,255,0.8)' }} />
|
||||
</div>
|
||||
<Typography.Title level={5} style={{ marginBottom: 8, color: '#1e293b' }}>
|
||||
创意社区
|
||||
</Typography.Title>
|
||||
<Typography.Text style={{ color: '#64748b', fontSize: 13 }}>
|
||||
与创作者交流，分享你的作品
|
||||
</Typography.Text>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
bordered={false}
|
||||
style={{
|
||||
borderRadius: 16,
|
||||
background: 'linear-gradient(135deg, rgba(16,185,129,0.03) 0%, rgba(5,150,105,0.03) 100%)',
|
||||
border: '1px solid rgba(16,185,129,0.08)',
|
||||
padding: 20,
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
height: 180,
|
||||
borderRadius: 12,
|
||||
background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 16,
|
||||
}}>
|
||||
<WalletOutlined style={{ fontSize: 48, color: 'rgba(255,255,255,0.8)' }} />
|
||||
</div>
|
||||
<Typography.Title level={5} style={{ marginBottom: 8, color: '#1e293b' }}>
|
||||
素材商城
|
||||
</Typography.Title>
|
||||
<Typography.Text style={{ color: '#64748b', fontSize: 13 }}>
|
||||
海量优质素材，助力你的创作
|
||||
</Typography.Text>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card
|
||||
bordered={false}
|
||||
style={{
|
||||
borderRadius: 20,
|
||||
background: 'linear-gradient(135deg, rgba(139,92,246,0.04) 0%, rgba(167,139,250,0.04) 100%)',
|
||||
border: '1px solid rgba(139,92,246,0.1)',
|
||||
padding: 0,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<div style={{
|
||||
width: '50%',
|
||||
padding: '48px 32px',
|
||||
background: 'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 50%, #c4b5fd 100%)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<div style={{
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255,255,255,0.15)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 24,
|
||||
}}>
|
||||
<LockOutlined style={{ fontSize: 48, color: '#fff' }} />
|
||||
</div>
|
||||
<Typography.Title level={3} style={{ margin: 0, color: '#fff', textAlign: 'center', marginBottom: 8 }}>
|
||||
解锁创意广场
|
||||
</Typography.Title>
|
||||
<Typography.Text style={{ color: 'rgba(255,255,255,0.8)', textAlign: 'center', fontSize: 14 }}>
|
||||
升级VIP会员，畅享创意广场全部功能
|
||||
</Typography.Text>
|
||||
</div>
|
||||
<div style={{
|
||||
width: '50%',
|
||||
padding: '48px 32px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: 20,
|
||||
}}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 14,
|
||||
background: 'linear-gradient(135deg, rgba(139,92,246,0.1) 0%, rgba(167,139,250,0.1) 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto 12px',
|
||||
}}>
|
||||
<GiftOutlined style={{ fontSize: 24, color: '#8b5cf6' }} />
|
||||
</div>
|
||||
<Typography.Title level={4} style={{ margin: 0, color: '#1e293b', marginBottom: 4 }}>
|
||||
创意灵感库
|
||||
</Typography.Title>
|
||||
<Typography.Text style={{ color: '#64748b', fontSize: 13 }}>
|
||||
海量创意灵感，激发无限创作潜能
|
||||
</Typography.Text>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 14,
|
||||
background: 'linear-gradient(135deg, rgba(236,72,153,0.1) 0%, rgba(219,39,119,0.1) 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto 12px',
|
||||
}}>
|
||||
<BellOutlined style={{ fontSize: 24, color: '#ec4899' }} />
|
||||
</div>
|
||||
<Typography.Title level={4} style={{ margin: 0, color: '#1e293b', marginBottom: 4 }}>
|
||||
精品素材库
|
||||
</Typography.Title>
|
||||
<Typography.Text style={{ color: '#64748b', fontSize: 13 }}>
|
||||
精选高品质素材，打造独特作品风格
|
||||
</Typography.Text>
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={() => setModalOpen(true)}
|
||||
style={{
|
||||
borderRadius: 12,
|
||||
padding: '12px 32px',
|
||||
background: 'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)',
|
||||
border: 'none',
|
||||
boxShadow: '0 8px 24px rgba(139,92,246,0.35)',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
<LockOutlined style={{ marginRight: 8 }} />
|
||||
立即解锁
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title={<Space><MessageOutlined />联系客服开通</Space>}
|
||||
open={modalOpen}
|
||||
onCancel={() => setModalOpen(false)}
|
||||
footer={null}
|
||||
width={480}
|
||||
>
|
||||
<div style={{ padding: 16 }}>
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, rgba(139,92,246,0.04) 0%, rgba(167,139,250,0.04) 100%)',
|
||||
borderRadius: 12,
|
||||
padding: 20,
|
||||
marginBottom: 20,
|
||||
}}>
|
||||
<Typography.Title level={4} style={{ margin: 0, color: '#1e293b', marginBottom: 12 }}>
|
||||
开通VIP会员
|
||||
</Typography.Title>
|
||||
<Typography.Text style={{ color: '#64748b', fontSize: 14, lineHeight: 1.8 }}>
|
||||
开通VIP会员即可解锁创意广场全部功能，享受创意灵感库、精品素材库、特效工坊等特权服务。
|
||||
</Typography.Text>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: 16, background: '#fafbfc', borderRadius: 12 }}>
|
||||
<div style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 12,
|
||||
background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<PhoneOutlined style={{ fontSize: 20, color: '#fff' }} />
|
||||
</div>
|
||||
<div>
|
||||
<Typography.Text strong style={{ color: '#1e293b' }}>客服热线</Typography.Text>
|
||||
<div style={{ color: '#8b5cf6', fontSize: 18, fontWeight: 600 }}>400-888-8888</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: 16, background: '#fafbfc', borderRadius: 12 }}>
|
||||
<div style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 12,
|
||||
background: 'linear-gradient(135deg, #ec4899 0%, #db2777 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<MailOutlined style={{ fontSize: 20, color: '#fff' }} />
|
||||
</div>
|
||||
<div>
|
||||
<Typography.Text strong style={{ color: '#1e293b' }}>邮箱地址</Typography.Text>
|
||||
<div style={{ color: '#8b5cf6', fontSize: 14 }}>vip@videogen.ai</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
block
|
||||
size="large"
|
||||
onClick={() => {
|
||||
message.success('已复制客服热线到剪贴板');
|
||||
navigator.clipboard.writeText('400-888-8888');
|
||||
setModalOpen(false);
|
||||
}}
|
||||
style={{
|
||||
marginTop: 20,
|
||||
borderRadius: 12,
|
||||
background: 'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)',
|
||||
border: 'none',
|
||||
boxShadow: '0 4px 16px rgba(139,92,246,0.3)',
|
||||
}}
|
||||
>
|
||||
复制联系方式
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreativePlazaPage;
|
||||
@@ -0,0 +1,292 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Button, Card, Modal, message, Typography, Space } from 'antd';
|
||||
import {
|
||||
StarOutlined,
|
||||
CrownOutlined,
|
||||
LockOutlined,
|
||||
PhoneOutlined,
|
||||
MailOutlined,
|
||||
MessageOutlined,
|
||||
ThunderboltOutlined,
|
||||
GiftOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
const PopularPage: React.FC = () => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: <ThunderboltOutlined style={{ fontSize: 24, color: '#f59e0b' }} />,
|
||||
title: '热门趋势',
|
||||
description: '实时追踪行业热点，把握创作风向',
|
||||
color: 'linear-gradient(135deg, rgba(245,158,11,0.1) 0%, rgba(245,158,11,0.05) 100%)',
|
||||
borderColor: 'rgba(245,158,11,0.2)',
|
||||
},
|
||||
{
|
||||
icon: <StarOutlined style={{ fontSize: 24, color: '#ec4899' }} />,
|
||||
title: '精选模板',
|
||||
description: '精选热门视频模板，一键快速创作',
|
||||
color: 'linear-gradient(135deg, rgba(236,72,153,0.1) 0%, rgba(236,72,153,0.05) 100%)',
|
||||
borderColor: 'rgba(236,72,153,0.2)',
|
||||
},
|
||||
{
|
||||
icon: <GiftOutlined style={{ fontSize: 24, color: '#10b981' }} />,
|
||||
title: '达人榜单',
|
||||
description: '查看热门创作者，学习优秀作品',
|
||||
color: 'linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(16,185,129,0.05) 100%)',
|
||||
borderColor: 'rgba(16,185,129,0.2)',
|
||||
},
|
||||
{
|
||||
icon: <CrownOutlined style={{ fontSize: 24, color: '#6366f1' }} />,
|
||||
title: 'VIP专属',
|
||||
description: '专属内容推荐，提升创作效率',
|
||||
color: 'linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(99,102,241,0.05) 100%)',
|
||||
borderColor: 'rgba(99,102,241,0.2)',
|
||||
},
|
||||
];
|
||||
|
||||
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)',
|
||||
}}>
|
||||
<ThunderboltOutlined 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>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, marginBottom: 32 }}>
|
||||
{features.map((feature, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
bordered={false}
|
||||
style={{
|
||||
borderRadius: 16,
|
||||
background: feature.color,
|
||||
border: `1px solid ${feature.borderColor}`,
|
||||
padding: 20,
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{ marginBottom: 16 }}>{feature.icon}</div>
|
||||
<Typography.Title level={4} style={{ marginBottom: 8, color: '#1e293b' }}>
|
||||
{feature.title}
|
||||
</Typography.Title>
|
||||
<Typography.Text style={{ color: '#64748b', fontSize: 13 }}>
|
||||
{feature.description}
|
||||
</Typography.Text>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Card
|
||||
bordered={false}
|
||||
style={{
|
||||
borderRadius: 20,
|
||||
background: 'linear-gradient(135deg, rgba(99,102,241,0.04) 0%, rgba(139,92,246,0.04) 100%)',
|
||||
border: '1px solid rgba(99,102,241,0.1)',
|
||||
padding: 0,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<div style={{
|
||||
width: '50%',
|
||||
padding: '48px 32px',
|
||||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<div style={{
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255,255,255,0.15)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 24,
|
||||
}}>
|
||||
<LockOutlined style={{ fontSize: 48, color: '#fff' }} />
|
||||
</div>
|
||||
<Typography.Title level={3} style={{ margin: 0, color: '#fff', textAlign: 'center', marginBottom: 8 }}>
|
||||
解锁更多精彩
|
||||
</Typography.Title>
|
||||
<Typography.Text style={{ color: 'rgba(255,255,255,0.8)', textAlign: 'center', fontSize: 14 }}>
|
||||
升级VIP会员，畅享热门广场全部功能
|
||||
</Typography.Text>
|
||||
</div>
|
||||
<div style={{
|
||||
width: '50%',
|
||||
padding: '48px 32px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: 20,
|
||||
}}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 14,
|
||||
background: 'linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(139,92,246,0.1) 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto 12px',
|
||||
}}>
|
||||
<StarOutlined style={{ fontSize: 24, color: '#6366f1' }} />
|
||||
</div>
|
||||
<Typography.Title level={4} style={{ margin: 0, color: '#1e293b', marginBottom: 4 }}>
|
||||
VIP专属内容
|
||||
</Typography.Title>
|
||||
<Typography.Text style={{ color: '#64748b', fontSize: 13 }}>
|
||||
热门模板、独家素材、优先推荐
|
||||
</Typography.Text>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 14,
|
||||
background: 'linear-gradient(135deg, rgba(245,158,11,0.1) 0%, rgba(217,119,6,0.1) 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto 12px',
|
||||
}}>
|
||||
<ThunderboltOutlined style={{ fontSize: 24, color: '#f59e0b' }} />
|
||||
</div>
|
||||
<Typography.Title level={4} style={{ margin: 0, color: '#1e293b', marginBottom: 4 }}>
|
||||
智能推荐算法
|
||||
</Typography.Title>
|
||||
<Typography.Text style={{ color: '#64748b', fontSize: 13 }}>
|
||||
基于AI分析，精准推荐优质内容
|
||||
</Typography.Text>
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={() => setModalOpen(true)}
|
||||
style={{
|
||||
borderRadius: 12,
|
||||
padding: '12px 32px',
|
||||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
||||
border: 'none',
|
||||
boxShadow: '0 8px 24px rgba(99,102,241,0.35)',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
<LockOutlined style={{ marginRight: 8 }} />
|
||||
立即解锁
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title={<Space><MessageOutlined />联系客服开通</Space>}
|
||||
open={modalOpen}
|
||||
onCancel={() => setModalOpen(false)}
|
||||
footer={null}
|
||||
width={480}
|
||||
>
|
||||
<div style={{ padding: 16 }}>
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, rgba(99,102,241,0.04) 0%, rgba(139,92,246,0.04) 100%)',
|
||||
borderRadius: 12,
|
||||
padding: 20,
|
||||
marginBottom: 20,
|
||||
}}>
|
||||
<Typography.Title level={4} style={{ margin: 0, color: '#1e293b', marginBottom: 12 }}>
|
||||
开通VIP会员
|
||||
</Typography.Title>
|
||||
<Typography.Text style={{ color: '#64748b', fontSize: 14, lineHeight: 1.8 }}>
|
||||
开通VIP会员即可解锁热门广场全部功能，享受专属内容推荐、精选模板库、达人榜单等特权服务。
|
||||
</Typography.Text>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: 16, background: '#fafbfc', borderRadius: 12 }}>
|
||||
<div style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 12,
|
||||
background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<PhoneOutlined style={{ fontSize: 20, color: '#fff' }} />
|
||||
</div>
|
||||
<div>
|
||||
<Typography.Text strong style={{ color: '#1e293b' }}>客服热线</Typography.Text>
|
||||
<div style={{ color: '#6366f1', fontSize: 18, fontWeight: 600 }}>400-888-8888</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: 16, background: '#fafbfc', borderRadius: 12 }}>
|
||||
<div style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 12,
|
||||
background: 'linear-gradient(135deg, #ec4899 0%, #db2777 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<MailOutlined style={{ fontSize: 20, color: '#fff' }} />
|
||||
</div>
|
||||
<div>
|
||||
<Typography.Text strong style={{ color: '#1e293b' }}>邮箱地址</Typography.Text>
|
||||
<div style={{ color: '#6366f1', fontSize: 14 }}>vip@videogen.ai</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
block
|
||||
size="large"
|
||||
onClick={() => {
|
||||
message.success('已复制客服热线到剪贴板');
|
||||
navigator.clipboard.writeText('400-888-8888');
|
||||
setModalOpen(false);
|
||||
}}
|
||||
style={{
|
||||
marginTop: 20,
|
||||
borderRadius: 12,
|
||||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
||||
border: 'none',
|
||||
boxShadow: '0 4px 16px rgba(99,102,241,0.3)',
|
||||
}}
|
||||
>
|
||||
复制联系方式
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PopularPage;
|
||||
Reference in New Issue
Block a user