You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.8 KiB
56 lines
1.8 KiB
import { useState } from 'react';
|
|
import '~/styles/layout.scss'
|
|
import { useRouter } from '~/hooks/useRouter';
|
|
import Notify from './Notify';
|
|
import Router from './router';
|
|
import { tabbarData } from './routes';
|
|
|
|
const LayoutRouter = () => {
|
|
|
|
const { location, push } = useRouter()
|
|
const [visible, setVisible] = useState(false)
|
|
|
|
return (
|
|
<div className='layout'>
|
|
<div className={`header plr-3 ${location.pathname === '/personal' && 'header-bg-color'}`}>
|
|
<div className='fz-wb-550'>9527</div>
|
|
<div className='row' onClick={() => setVisible(true)}>
|
|
<div className='notify-circle'></div>
|
|
<i className='iconfont icon-messages fz-24 fz-wb-1000' />
|
|
</div>
|
|
</div>
|
|
<div className='pages'>
|
|
<Router />
|
|
{
|
|
tabbarData.includes(location.pathname) && <div className='tabbar-block'></div>
|
|
}
|
|
</div>
|
|
{
|
|
tabbarData.includes(location.pathname) && (
|
|
<div className='tabbar'>
|
|
{
|
|
tabbarData.map((item, index) => (
|
|
<div key={index} onClick={() => push(item)}>
|
|
<img
|
|
src={require(`~/assets/tabbar/tabbar-${index + 1}${item === location.pathname ? '-o' : ''}.png`)}
|
|
alt=""
|
|
className='img'
|
|
/>
|
|
{
|
|
item === location.pathname &&
|
|
<div className='row-center'>
|
|
<div className='circle'></div>
|
|
</div>
|
|
}
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
<Notify visible={visible} setVisible={setVisible} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default LayoutRouter
|