|
|
@@ -1,12 +1,19 @@
|
|
|
-import React, { useState, useRef } from 'react'
|
|
|
+import React, { useState, useRef, useEffect } from 'react'
|
|
|
import styles from './index.module.scss'
|
|
|
import { useSelector } from 'react-redux'
|
|
|
import { RootState } from '@/store'
|
|
|
function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
|
|
|
const [currentItem, setCurrentItem] = useState(1)
|
|
|
+
|
|
|
const originRef = useRef<HTMLDivElement>(null)
|
|
|
const itemRef = useRef<HTMLDivElement>(null)
|
|
|
const { myData } = useSelector((state: RootState) => state.A0Layout)
|
|
|
+ const [isOriStates, setIsOriStates] = useState(myData.policy[0].part2.map((item) => item.img ? true : false))
|
|
|
+
|
|
|
+ // 切换tab的时候重置为原碑
|
|
|
+ useEffect(() => {
|
|
|
+ setIsOriStates(myData.policy[currentItem - 1].part2.map(() => true))
|
|
|
+ }, [currentItem, myData.policy])
|
|
|
|
|
|
const handleItemClick = (item: number) => {
|
|
|
if (currentItem === item) return
|
|
|
@@ -30,60 +37,113 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ const partChangeCss = (item: number) => {
|
|
|
+ return {
|
|
|
+ width: currentItem === item + 1 ? '340px' : '0',
|
|
|
+ padding: currentItem === item + 1 ? undefined : '0',
|
|
|
+ opacity: currentItem === item + 1 ? '1' : '0'
|
|
|
+ } as React.CSSProperties
|
|
|
+ }
|
|
|
+
|
|
|
+ const part2Src = (part2Item: any, part2Index: number) => {
|
|
|
+ return isOriStates[part2Index] ? part2Item?.img?.[0] || '' : part2Item?.img_ac?.[0] || ''
|
|
|
+ }
|
|
|
+
|
|
|
return (
|
|
|
<div className={styles.Policy}>
|
|
|
<div className='back' onClick={() => setShowTab(0)}>
|
|
|
<img src={require('@/assets/img/btn_back.png')} alt='' />
|
|
|
</div>
|
|
|
<div className='containner' ref={originRef} onWheel={handleWheel}>
|
|
|
- {myData.policy.map((item, index) => (
|
|
|
- <div className='tabItem' ref={itemRef} key={item.title}>
|
|
|
- <div className={`history1`} onClick={() => handleItemClick(index + 1)}>
|
|
|
- <div className='txt'> {item.title}</div>
|
|
|
- <div className='bottom'><img src={item.bottomPic} alt="" /></div>
|
|
|
- </div>
|
|
|
- <div className={`historyDetail ${currentItem !== index + 1 ? 'historyDetail_hide' : ''}`}>
|
|
|
- {currentItem === index + 1 && <>
|
|
|
- <div className='part1'>{item.part1}</div>
|
|
|
- <div className='part2'>
|
|
|
- <div className='part2txt'>{item.part2.txt} </div>
|
|
|
- <div className='from'>
|
|
|
- <div className='fromtxt'>{item.part2.from} </div>
|
|
|
- <div className='author'>{item.part2.author}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className='part3'>
|
|
|
- <div className='imgBox'>
|
|
|
- <img src={item.part3.img} alt='' />
|
|
|
- <div className='from'>{item.part3.from}</div>
|
|
|
- <div className='name'>{item.part3.name}</div>
|
|
|
- <div className='time'>{item.part3.time}</div>
|
|
|
- </div>
|
|
|
- <div className='desc'>{item.part3.desc}</div>
|
|
|
+ <div className='containner2'>
|
|
|
+ {myData.policy.map((item, index) => (
|
|
|
+ <div className='tabItem' ref={itemRef} key={item.title}>
|
|
|
+ <div className={`history1`} onClick={() => handleItemClick(index + 1)}>
|
|
|
+ <div className='txt'> {item.title}</div>
|
|
|
+ <div className='bottom'>
|
|
|
+ <img src={item.bottomPic} alt='' />
|
|
|
</div>
|
|
|
- <div className='part4'>
|
|
|
- <div className='imgBox'>
|
|
|
- <img src={item.part4.img} alt='' />
|
|
|
- <div className='from'>{item.part4.from}</div>
|
|
|
- <div className='name'>{item.part4.name}</div>
|
|
|
- <div className='time'>{item.part4.time}</div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div className={`historyDetail ${currentItem !== 0 ? '' : 'historyDetail_hide'}`}>
|
|
|
+ <>
|
|
|
+ <div
|
|
|
+ className='part1'
|
|
|
+ style={partChangeCss(index)}
|
|
|
+ >
|
|
|
+ <div className='part1txt'>{item.part1.txt} </div>
|
|
|
+ <div className='from'>
|
|
|
+ <div className='fromtxt'>{item.part1.from} </div>
|
|
|
+ <div className='author'>{item.part1.author}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div className='desc'>{item.part4.desc}</div>
|
|
|
- </div>
|
|
|
- </>}
|
|
|
+ {item.part2.map((part2Item, part2Index) => (
|
|
|
+ <div
|
|
|
+ className='part2'
|
|
|
+ style={partChangeCss(index)}
|
|
|
+ key={part2Item.name}
|
|
|
+ >
|
|
|
+ <div className='imgBox'>
|
|
|
+ <img
|
|
|
+ src={part2Src(part2Item, part2Index)}
|
|
|
+ alt=''
|
|
|
+ />
|
|
|
+ <div className='from'>
|
|
|
+ {isOriStates[part2Index] ? part2Item.from : part2Item.from_ac}
|
|
|
+ </div>
|
|
|
+ <div className='name'>
|
|
|
+ {isOriStates[part2Index] ? part2Item.name : part2Item.name_ac}
|
|
|
+ </div>
|
|
|
+ <div className='time'>
|
|
|
+ {part2Item.time}
|
|
|
+ </div>
|
|
|
+ <div className='changeBar'>
|
|
|
+ <div
|
|
|
+ className={`yuan ${isOriStates[part2Index] ? 'cActive' : ''}`}
|
|
|
+ style={{ display: part2Item?.img ? 'flex' : 'none' }}
|
|
|
+ onClick={() =>
|
|
|
+ setIsOriStates(prev =>
|
|
|
+ prev.map((item, index) => (index === part2Index ? !item : item))
|
|
|
+ )
|
|
|
+ }
|
|
|
+ >
|
|
|
+ 原碑
|
|
|
+ <img src={require('@/assets/img/A6_policy_btn.png')} alt='' />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ className={`ta ${!isOriStates[part2Index] ? 'cActive' : ''}`}
|
|
|
+ style={{ display: part2Item?.img_ac ? 'flex' : 'none' }}
|
|
|
+ onClick={() =>
|
|
|
+ setIsOriStates(prev =>
|
|
|
+ prev.map((item, index) => (index === part2Index ? !item : item))
|
|
|
+ )
|
|
|
+ }
|
|
|
+ >
|
|
|
+ 拓片
|
|
|
+ <img src={require('@/assets/img/A6_policy_btn.png')} alt='' />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className='desc'>{part2Item.desc}</div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- ))}
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div className="timeLine">
|
|
|
- <div className="lineContainner" />
|
|
|
+ <div className='timeLine'>
|
|
|
+ <div className='lineContainner' />
|
|
|
{myData.policy.map((item, index) => (
|
|
|
- <div className="dot" key={item.title}>
|
|
|
- <div className="txt">{item.title}</div>
|
|
|
- <img src={require(`@/assets/img/A7base3_icon${currentItem - 1 === index ? '' : '_n'}.png`)} alt='' />
|
|
|
+ <div className='dot' key={item.title}>
|
|
|
+ <div className='txt'>{item.title}</div>
|
|
|
+ <img
|
|
|
+ src={require(`@/assets/img/A7base3_icon${currentItem - 1 === index ? '' : '_n'}.png`)}
|
|
|
+ alt=''
|
|
|
+ />
|
|
|
</div>
|
|
|
))}
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
lanxin
