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.
67 lines
2.1 KiB
67 lines
2.1 KiB
import '~/styles/layout.scss'
|
|
import { Button, Divider, Popup } from "react-vant"
|
|
|
|
interface NotifyProps {
|
|
visible: boolean,
|
|
setVisible: Function
|
|
}
|
|
|
|
const Notify = (props: NotifyProps) => {
|
|
|
|
const { visible, setVisible } = props
|
|
|
|
const data = [
|
|
{ title: '提醒', color: '#F96900', imgName: 'warn', desc: '您挂单的“生肖唐彩-狗”NFT, @Miner 出价 4,153.00 USDT' },
|
|
{ title: '注册成功', color: '#11C0CB', imgName: 'register-success', desc: '恭喜,您已成功注册,9527NFT数字交易平台.' },
|
|
]
|
|
|
|
return (
|
|
<Popup
|
|
visible={visible}
|
|
onClose={() => setVisible(false)}
|
|
position='right'
|
|
style={{
|
|
height: '100%',
|
|
width: '70%',
|
|
borderTopLeftRadius: 20,
|
|
borderBottomLeftRadius: 20,
|
|
boxShadow: '8px 8px 20px 0px rgba(0, 0, 0, 0.1)'
|
|
}}
|
|
overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.05)' }}
|
|
>
|
|
<div className="p-2">
|
|
<div className="fz-wb-550">消息提醒</div>
|
|
<Divider className="" style={{ borderColor: '#EEE' }} />
|
|
<div>
|
|
{
|
|
data.map((item, index) => (
|
|
<div className="notify-box row-items mt-2" key={index}>
|
|
<img src={require(`~/assets/${item.imgName}.png`)} className="img" alt="" />
|
|
<div className='ml-2'>
|
|
<div className='fz-14 fz-wb-550' style={{ color: item.color }}>{item.title}</div>
|
|
<div className='fz-12 sub-text mt-4px'>{item.desc}</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
<div className='mt-5 row-center'>
|
|
<Button
|
|
round
|
|
size="small"
|
|
className='fz-wb-550'
|
|
color='#EEEEEE'
|
|
>
|
|
<div className='black'>清除所有</div>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className='close'>
|
|
<i className='iconfont icon-right-double-arrow fz-22 sub-text' onClick={() => setVisible(false)}></i>
|
|
</div>
|
|
</div>
|
|
</Popup>
|
|
)
|
|
}
|
|
|
|
export default Notify
|