51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import React from 'react'
|
|
import Icon from '@ant-design/icons'
|
|
import '@/assets/css/components/home/slogan.scss'
|
|
import FitCenter from '@/components/common/FitCenter.tsx'
|
|
|
|
interface SloganProps {
|
|
onClickScrollDown: (event: React.MouseEvent) => void
|
|
}
|
|
|
|
const Slogan: React.FC<SloganProps> = (props) => {
|
|
const [slogan, setSlogan] = useState('')
|
|
const [sloganType, setSloganType] = useState(true)
|
|
|
|
const typeText = '因为热爱 所以折腾'
|
|
if (sloganType) {
|
|
setTimeout(() => {
|
|
if (slogan.length < typeText.length) {
|
|
setSlogan(typeText.substring(0, slogan.length + 1))
|
|
} else {
|
|
setSloganType(false)
|
|
}
|
|
}, 250)
|
|
} else {
|
|
setTimeout(() => {
|
|
if (slogan.length > 0) {
|
|
setSlogan(typeText.substring(0, slogan.length - 1))
|
|
} else {
|
|
setSloganType(true)
|
|
}
|
|
}, 100)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<FitCenter>
|
|
<div className={'center-box'}>
|
|
<div className={'big-logo'}>FatWeb</div>
|
|
<span id={'slogan'} className={'slogan'}>
|
|
/* {slogan || <> </>} <span className={'cursor'}>|</span> */
|
|
</span>
|
|
</div>
|
|
<div className={'scroll-down'} onClick={props.onClickScrollDown}>
|
|
<Icon component={IconFatwebDown} style={{ fontSize: '1.8em', color: '#666' }} />
|
|
</div>
|
|
</FitCenter>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Slogan
|