102 lines
2.6 KiB
TypeScript
102 lines
2.6 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import './flash.scss'
|
|
import {CmsAd} from "@/api/cms/cmsAd/model";
|
|
import {getCmsAd} from "@/api/cms/cmsAd";
|
|
import { Swiper } from '@nutui/nutui-react-taro'
|
|
|
|
interface Firework {
|
|
id: number
|
|
x: number
|
|
y: number
|
|
color: string
|
|
}
|
|
|
|
const MyPage = () => {
|
|
const [item, setItem] = useState<CmsAd>()
|
|
const reload = () => {
|
|
getCmsAd(366).then(data => {
|
|
setItem(data)
|
|
})
|
|
}
|
|
const [fireworks, setFireworks] = useState<Firework[]>([])
|
|
|
|
// 生成随机颜色
|
|
const getRandomColor = () => {
|
|
const colors = [
|
|
'#ff0000', '#00ff00', '#0000ff', '#ffff00',
|
|
'#ff00ff', '#00ffff', '#ff9900', '#ff0099'
|
|
]
|
|
return colors[Math.floor(Math.random() * colors.length)]
|
|
}
|
|
|
|
// 创建新烟花
|
|
const createFirework = () => {
|
|
const firework: Firework = {
|
|
id: Date.now(),
|
|
x: Math.random() * 100, // 随机横向位置 (0-100%)
|
|
y: Math.random() * 40, // 修改为随机纵向位置 (0-40%)
|
|
color: getRandomColor()
|
|
}
|
|
setFireworks(prev => [...prev, firework])
|
|
|
|
// 1.5秒后移除烟花
|
|
setTimeout(() => {
|
|
setFireworks(prev => prev.filter(f => f.id !== firework.id))
|
|
}, 1500)
|
|
}
|
|
|
|
useEffect(() => {
|
|
reload();
|
|
// 初始创建更多烟花
|
|
for (let i = 0; i < 6; i++) { // 修改初始烟花数量为6个
|
|
createFirework()
|
|
}
|
|
|
|
// 缩短创建间隔，增加密度
|
|
const interval = setInterval(() => {
|
|
createFirework()
|
|
}, 500) // 修改为500ms创建一次
|
|
|
|
return () => clearInterval(interval)
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<Swiper defaultValue={0} height={279} indicator style={{ height: '280px' }}>
|
|
{item?.imageList?.map((item) => (
|
|
<Swiper.Item key={item}>
|
|
<img width="100%" height="100%" src={item.url} alt="" style={{ height: '280px' }} />
|
|
</Swiper.Item>
|
|
))}
|
|
</Swiper>
|
|
<div className="fireworks-container">
|
|
{fireworks.map(firework => (
|
|
<div
|
|
key={firework.id}
|
|
className="firework"
|
|
style={{
|
|
'--x': `${firework.x}%`,
|
|
'--y': `${firework.y}%`,
|
|
'--color': firework.color
|
|
} as React.CSSProperties}
|
|
>
|
|
{/* 生成30个粒子 */}
|
|
{Array.from({ length: 30 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="particle"
|
|
style={{
|
|
'--angle': `${(i * 12)}deg`,
|
|
'--delay': `${Math.random() * 0.2}s`
|
|
} as React.CSSProperties}
|
|
/>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default MyPage
|