chuGuoYuJian/code/src/pages/A2show/index.tsx

import React, { useState } from 'react'
import styles from './index.module.scss'
import Z1titie from '@/components/Z1titie'
import { myInfo1 } from './data'
import classNames from 'classnames'
import history from '@/utils/history'
import A2info from './A2info'

function A2show() {
  const [rotate, setRotate] = useState(false)

  // 打开详情
  const [open, setOpen] = useState('')

  return (
    <div
      className={styles.A2show}
      style={{ backgroundImage: `url(${serverUrl}show/bac.jpg)` }}
    >
      <Z1titie title='玉柄铁剑' toHome={() => history.push('/')} />

      <div className='A2txt'>
        <p>春秋中晚期 | 藏于十堰市博物馆</p>
        {/* <p>湖北省郧县五峰乡肖家河村乔家院墓地出土</p> */}
      </div>

      {/* 2张图片伪3D效果 */}
      <div className={classNames('A2rotate', rotate ? 'A2rotateShow' : '')}>
        <div className='A2rotate1'>
          {!rotate && <>
            <div className='A2labelLeft js'>剑首</div>
            <div className='A2labelLeft jg'>剑格</div>
            <div className='A2labelRight jj'>剑茎</div>
            <div className='A2labelRight js'>剑身</div>
          </>}
          <img src={`${serverUrl}show/zheng.png`} alt='' />
        </div>
        <div className='A2rotate1 A2rotate2'>
          {rotate && <>
            <div className='A2labelLeft yz'>玉璏</div>
            <div className='A2labelLeft yb'>玉镖</div>
            <div className='A2labelRight jq'>剑鞘</div>
          </>}
          <img src={`${serverUrl}show/fan.png`} alt='' />
          <img src={`${serverUrl}show/fan2-min.png`} alt='' />
        </div>
      </div>

      {/* 切换 */}
      <img className='A2cut1' src={`${serverUrl}show/xian2.png`} alt='' />
      <div className='A2cut' onClick={() => setRotate(!rotate)}>
        <img className='A2cut2' src={`${serverUrl}show/xian.png`} alt='' />
        <div className={classNames('A2cut3', rotate ? 'A2cut3Ac' : '')}>
          鞘
          <img src={`${serverUrl}show/txtBac${rotate ? 'Ac' : ''}.png`} alt='' />
        </div>
        <div className={classNames('A2cut3 A2cut4', rotate ? '' : 'A2cut3Ac')}>
          剑
          <img src={`${serverUrl}show/txtBac${rotate ? '' : 'Ac'}.png`} alt='' />
        </div>
      </div>

      <div className='A2btm'>
        <img src={`${serverUrl}show/info/xian.png`} alt='' />

        {myInfo1.map(item => (
          <div key={item.id} className='A2btmRow' onClick={() => setOpen(item.title)}>
            <div>
              <img src={`${serverUrl}show/${item.id}.png`} alt='' />
              <img src={`${serverUrl}show/${item.id}ac.png`} alt='' />
            </div>

            <p>
              {item.title}
            </p>
          </div>
        ))}
      </div>

      {/* 打开详情 */}
      {open ? <A2info acKey={open as '简介'} closeFu={() => setOpen('')} /> : null}
    </div>
  )
}

const MemoA2show = React.memo(A2show)

export default MemoA2show