BDLGScene/src/pages/A4base/index.tsx

import React from 'react'
import styles from './index.module.scss'
import { useHistory } from 'react-router-dom'
import VerticalBanner from './components/banner'
function A4base({ show, setShow }: { show: boolean; setShow: (show: boolean) => void }) {
  const history = useHistory()
  const slides = [
    {
      id: 1,
      background: require('./image/caro1/bg1.png'),
      content: (
        <>
          <img className='title1' src={require('./image/caro1/title1.png')} alt='' draggable='false' />
          <img className='item1' src={require('./image/caro1/item1.png')} alt='' draggable='false' />
          <img className='date1' src={require('./image/caro1/date1.png')} alt='' draggable='false' />
        </>
      )
    },
    {
      id: 2,
      background: require('./image/caro2/bg2.png'),
      content: (
        <>
          <img className='top2' src={require('./image/caro2/top2.png')} alt='' draggable='false' />
          <img className='title2' src={require('./image/caro2/title2.png')} alt='' draggable='false' />
          <img className='item2' src={require('./image/caro2/item2.png')} alt='' draggable='false' />
          <img className='date2' src={require('./image/caro2/date2.png')} alt='' draggable='false' />
        </>
      )
    },
    {
      id: 3,
      background: require('./image/caro3/bg3.png'),
      content: (
        <>
          <img className='top3' src={require('./image/caro3/top3.png')} alt='' draggable='false' />
          <img className='title2' src={require('./image/caro2/title2.png')} alt='' draggable='false' />
          <img className='item2' src={require('./image/caro3/item3.png')} alt='' draggable='false' />
          <img className='date2' src={require('./image/caro2/date2.png')} alt='' draggable='false' />
        </>
      )
    },
    {
      id: 4,
      background: require('./image/caro4/bg4.png'),
      content: (
        <>
          <img className='top3' src={require('./image/caro4/top4.png')} alt='' draggable='false' />
          <img className='title2' src={require('./image/caro2/title2.png')} alt='' draggable='false' />
          <img className='item2' src={require('./image/caro4/item4.png')} alt='' draggable='false' />
          <img className='date2' src={require('./image/caro2/date2.png')} alt='' draggable='false' />
        </>
      )
    },
    {
      id: 5,
      background: require('./image/caro5/bg5.png'),
      content: (
        <>
          <img className='top3' src={require('./image/caro5/top5.png')} alt='' draggable='false' />
          <img className='title2' src={require('./image/caro2/title2.png')} alt='' draggable='false' />
          <img className='item5' src={require('./image/caro5/item5.png')} alt='' draggable='false' />
          <img className='date2' src={require('./image/caro2/date2.png')} alt='' draggable='false' />
        </>
      )
    },
    {
      id: 6,
      background: require('./image/caro4/bg4.png'),
      content: (
        <>
          <img className='top3' src={require('./image/caro4/top4.png')} alt='' draggable='false' />
          <img className='title2' src={require('./image/caro2/title2.png')} alt='' draggable='false' />
          <img className='item2' src={require('./image/caro6/item6.png')} alt='' draggable='false' />
          <img className='date2' src={require('./image/caro2/date2.png')} alt='' draggable='false' />
        </>
      )
    },
    {
      id: 7,
      background: require('./image/caro7/bg7.png'),
      content: (
        <>
          <img className='top7' src={require('./image/caro7/top7.png')} alt='' draggable='false' />
          <img
            className='btn7'
            src={require('./image/caro7/btn7.png')}
            onClick={() => {
              setShow(false)
              history.push('/home?m=SG-Hu9rVKJBQHt')
              window.location.reload()
            }}
            alt=''
            draggable='false'
          />
          <img className='item7' src={require('./image/caro7/item7.png')} alt='' draggable='false' />
          <img className='date7' src={require('./image/caro7/date7.png')} alt='' draggable='false' />
        </>
      )
    }
  ]
  return (
    <div className={styles.A4base} style={{ display: show ? 'block' : 'none' }}>
      <VerticalBanner slides={slides} />
    </div>
  )
}

const MemoA4base = React.memo(A4base)

export default MemoA4base