9527-nft-market/src/router/layout/Notify.tsx

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