Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 80 additions & 80 deletions src/pages/demo/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,210 +36,210 @@ const fixTabsData = [
label: '首页',
content: (
<div>
<h2 className="mb-4 text-xl font-bold">首页</h2>
<h2 className='mb-4 text-xl font-bold'>首页</h2>
<p>这是首页的内容区域。您可以在这里添加任何相关内容。</p>
</div>
),
)
},
{
id: 2,
label: '产品',
content: (
<div>
<h2 className="mb-4 text-xl font-bold">产品</h2>
<h2 className='mb-4 text-xl font-bold'>产品</h2>
<p>这是产品的内容区域。您可以在这里添加任何相关内容。</p>
</div>
),
)
},
{
id: 3,
label: '服务',
content: (
<div>
<h2 className="mb-4 text-xl font-bold">服务</h2>
<h2 className='mb-4 text-xl font-bold'>服务</h2>
<p>这是服务的内容区域。您可以在这里添加任何相关内容。</p>
</div>
),
)
},
{
id: 4,
label: '关于我们',
content: (
<div>
<h2 className="mb-4 text-xl font-bold">关于我们</h2>
<h2 className='mb-4 text-xl font-bold'>关于我们</h2>
<p>这是关于我们的内容区域。您可以在这里添加任何相关内容。</p>
</div>
),
)
},
{
id: 5,
label: '联系我们',
content: (
<div>
<h2 className="mb-4 text-xl font-bold">联系我们</h2>
<h2 className='mb-4 text-xl font-bold'>联系我们</h2>
<p>这是联系我们的内容区域。您可以在这里添加任何相关内容。</p>
</div>
),
},
)
}
]

const customCommandMap = {
npm: 'npm run shadcn add button',
yarn: 'yarn shadcn add button',
pnpm: 'pnpm dlx shadcn@latest add button',
bun: 'bun x shadcn@latest add button',
bun: 'bun x shadcn@latest add button'
}

const animatedListItems = Array.from({ length: 10 }, (_, index) => ({
id: `animated-${index + 1}`,
id: `animated-${index + 1}`
}))

const stickyCardItems = Array.from({ length: 4 }, (_, index) => ({
id: `sticky-${index + 1}`,
id: `sticky-${index + 1}`
}))

const tagCardList = [
{
name: '基础属性标签',
tags: [
{
name: '本地客户',
name: '本地客户'
},
{
name: '建筑行业',
name: '建筑行业'
},
{
name: '教育体系客户/医疗体系客户',
},
],
name: '教育体系客户/医疗体系客户'
}
]
},
{
name: '业务属性标签',
tags: [
{
name: '建设工程中重点客户',
name: '建设工程中重点客户'
},
{
name: '交易频次高',
name: '交易频次高'
},
{
name: '业务数量多',
name: '业务数量多'
},
{
name: '复合型客户',
name: '复合型客户'
},
{
name: '交易频次高',
name: '交易频次高'
},
{
name: '业务数量多',
name: '业务数量多'
},
{
name: '复合型客户',
},
],
name: '复合型客户'
}
]
},
{
name: '价值评估标签',
tags: [
{
name: '重点客户/一般客户',
name: '重点客户/一般客户'
},
{
name: '战略合作客户',
name: '战略合作客户'
},
{
name: '高影响力客户',
name: '高影响力客户'
},
{
name: '长期委托协议客户',
},
],
name: '长期委托协议客户'
}
]
},
{
name: '风险控制标签',
tags: [
{
name: '信用等级高',
name: '信用等级高'
},
{
name: '内控制度完善',
name: '内控制度完善'
},
{
name: '存在失信记录',
name: '存在失信记录'
},
{
name: '中风险客户',
},
],
name: '中风险客户'
}
]
},
{
name: '行为特征标签',
tags: [
{
name: '偏好线上客户/电话咨询',
name: '偏好线上客户/电话咨询'
},
{
name: '内控制度完善',
name: '内控制度完善'
},
{
name: '存在失信记录',
name: '存在失信记录'
},
{
name: '中风险客户',
},
],
name: '中风险客户'
}
]
},
{
name: '其他标签',
tags: [
{
name: '紧急项目多',
name: '紧急项目多'
},
{
name: '配合度高',
name: '配合度高'
},
{
name: '推动效率高',
name: '推动效率高'
},
{
name: '响应时间长',
},
],
name: '响应时间长'
}
]
},
{
name: '其他标签',
tags: [
{
name: '紧急项目多',
name: '紧急项目多'
},
{
name: '配合度高',
},
],
},
name: '配合度高'
}
]
}
]

const orbitingItems = [
{
content: <Monitor className="h-6 w-6 text-purple-500" />,
content: <Monitor className='h-6 w-6 text-purple-500' />,
radius: 80,
duration: 20,
reverse: true,
reverse: true
},
{
content: <Smartphone className="h-6 w-6 text-green-500" />,
content: <Smartphone className='h-6 w-6 text-green-500' />,
radius: 140,
duration: 30,
delay: 15,
reverse: true,
reverse: true
},
{
content: <Rocket className="h-6 w-6 text-red-500" />,
content: <Rocket className='h-6 w-6 text-red-500' />,
radius: 200,
duration: 40,
reverse: false,
},
reverse: false
}
]

const statisticItems = [
Expand All @@ -250,33 +250,33 @@ const statisticItems = [
icon: 'book',
showTooltip: true,
tooltipContent: '参与项目:缴纳保证金即为参与',
tooltipPlacement: 'top',
tooltipPlacement: 'top'
},
{
title: '同比增长',
value: 20,
unit: '%',
icon: 'rate',
showTooltip: false,
},
showTooltip: false
}
]

const ProDemo = () => {
return (
<FixTabPanel>
<PageContainer>
<OneTimePasscode length={6} variant="compact" onComplete={() => {}} />
<OneTimePasscode length={6} variant='compact' onComplete={() => {}} />
<MusicPlayer />
<TransferHistory />
<FixCarousel />
<ScriptView codeLanguage="shell" commandMap={customCommandMap} />
<ScriptView codeLanguage='shell' commandMap={customCommandMap} />
<TrapezoidTabs
tabs={[
{ name: 'tab1', code: 'tab1' },
{ name: 'tab2', code: 'tab2' },
{ name: 'tab3', code: 'tab3' },
{ name: 'tab3', code: 'tab3' }
]}
defaultActiveTab="tab1"
defaultActiveTab='tab1'
/>

<OrbitingCircles items={orbitingItems} />
Expand All @@ -289,9 +289,9 @@ const ProDemo = () => {
<section style={{ height: 240, overflow: 'hidden', margin: 20 }}>
<AnimatedList>
{animatedListItems.map((item) => (
<div key={item.id} className="flex flex-col items-center justify-center gap-4">
<div className="flex items-center justify-center gap-4">
<div className="h-16 w-100 rounded-full bg-gradient-to-br from-purple-500 to-blue-500" />
<div key={item.id} className='flex flex-col items-center justify-center gap-4'>
<div className='flex items-center justify-center gap-4'>
<div className='h-16 w-100 rounded-full bg-gradient-to-br from-purple-500 to-blue-500' />
</div>
</div>
))}
Expand All @@ -303,22 +303,22 @@ const ProDemo = () => {
<TagCard tagCardList={tagCardList} showMax={6} />
<WaveBackground
height={300}
backgroundColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
backgroundColor='linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
waves={[
{
fill: 'rgba(255, 255, 255, 0.1)',
options: { height: 20, amplitude: 20, speed: 0.15, points: 3 },
options: { height: 20, amplitude: 20, speed: 0.15, points: 3 }
},
{
fill: 'rgba(255, 255, 255, 0.3)',
options: { height: 15, amplitude: 30, speed: 0.2, points: 4 },
options: { height: 15, amplitude: 30, speed: 0.2, points: 4 }
},
{
fill: 'rgba(255, 255, 255, 0.5)',
options: { height: 10, amplitude: 40, speed: 0.25, points: 5 },
},
options: { height: 10, amplitude: 40, speed: 0.25, points: 5 }
}
]}
className="my-4 rounded-xl"
className='my-4 rounded-xl'
/>
<StickyCard cards={stickyCardItems} />
<section style={{ marginBottom: '15px' }}>
Expand Down
Loading
Loading