JMCTHome/src/pages/A1home/components/Background/index.tsx

import React, { useEffect } from 'react'
import styles from './index.module.scss'
import isMobile from '@/utils/isMobile'

const Background = ({ activeIndex }: { activeIndex: number }) => {
  return (
    <div className={styles.bg}>
      <img
        key="bg3 "
        className={`bgImg1 ${activeIndex === 2 ? 'enter' : 'leave'}`}
        src={require(`../../image/caro3/${isMobile() ? 'bg3_M' : 'bg3'}.png`)}
        alt=''
        draggable='false'
      />
      <img
        key="bg2"
        className={`bgImg2 ${activeIndex === 1 ? 'enter' : 'leave'}`}
        src={require(`../../image/caro2/${isMobile() ? 'bg2_M' : 'bg2'}.png`)}
        alt=''
        draggable='false'
      />
      <img
        key="bg1"
        className={`bgImg3 ${activeIndex === 0 ? 'enter' : 'leave'}`}
        src={require(`../../image/caro1/${isMobile() ? 'bg1_M' : 'bg1'}.png`)}
        alt=''
        draggable='false'
      />
    </div>
  )
}
export default Background