gmlx/project/src/pages/A7animationM/index.tsx

import React, { useState } from 'react'
import styles from './index.module.scss'
import Swiper3 from './Swiper3'
import TopBarM from '@/components/TopBarM'
import Zvideo from '@/components/Zvideo'
function A7animationM() {
  const [isShowVideo, setIsShowVideo] = useState(false)
  const [currentIndex, setCurrentIndex] = useState(0)
  return (
    <div className={styles.A7animationM}>
      {!isShowVideo ? (
        <>
          <TopBarM />
          <Swiper3 setIsShowVideo={setIsShowVideo} setCurrentIndex={setCurrentIndex} />
        </>
      ) : (
        <div className={styles.videoBox}>
          <div 
            className={styles.backBtn}>
          <img
            onClick={() => setIsShowVideo(false)}
            src={require('../../assets/img/back1.png')}
            alt=''
          />
          </div>
         
          <div className={styles.title}>{myDataTemp.animationList[currentIndex].name}</div>
          <Zvideo
            src={myDataTemp.animationList[currentIndex].videoSrc}
            objFit='contain'
            style={{ height: 'auto' }}
          />
        </div>
      )}
    </div>
  )
}

const MemoA7animationM = React.memo(A7animationM)

export default MemoA7animationM