|
|
@@ -12,7 +12,6 @@ type InfoCardProps = {
|
|
|
inset?: string
|
|
|
}
|
|
|
function Sinicize() {
|
|
|
-
|
|
|
const { myData } = useSelector((state: RootState) => state.A0Layout)
|
|
|
|
|
|
const [currentTab, setCurrentTab] = useState(0)
|
|
|
@@ -39,9 +38,17 @@ function Sinicize() {
|
|
|
}) => {
|
|
|
return (
|
|
|
<div className={styles.label} style={{ inset: inset }}>
|
|
|
- {direct === 'left' ? <div className='arrowL' style={{ width: width + 'px' }} ><div className="dot"></div></div> : null}
|
|
|
+ {direct === 'left' ? (
|
|
|
+ <div className='arrowL' style={{ width: width + 'px' }}>
|
|
|
+ <div className='dot'></div>
|
|
|
+ </div>
|
|
|
+ ) : null}
|
|
|
<div className='btn'>{name}</div>
|
|
|
- {direct === 'right' ? <div className='arrowR' style={{ width: width + 'px' }} ><div className="dot"></div></div> : null}
|
|
|
+ {direct === 'right' ? (
|
|
|
+ <div className='arrowR' style={{ width: width + 'px' }}>
|
|
|
+ <div className='dot'></div>
|
|
|
+ </div>
|
|
|
+ ) : null}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
@@ -55,6 +62,7 @@ function Sinicize() {
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
+ setIsShowLine(true)
|
|
|
setCurrentImgIndex(0)
|
|
|
if (selectedTime === index) {
|
|
|
setSelectedTime(-1)
|
|
|
@@ -97,12 +105,15 @@ function Sinicize() {
|
|
|
const InfoCard = ({ time, location, text, from, inset }: InfoCardProps) => {
|
|
|
return (
|
|
|
<div className={styles.InfoCard} style={{ inset: inset }}>
|
|
|
- <div className="dotLeft"><img src={require('@/assets/img/A6_arrow.png')} alt="" /></div>
|
|
|
- <div className="main">
|
|
|
- <div className="time">{time}</div>
|
|
|
- <div className="location">{location}</div>
|
|
|
- <div className="text">{text}</div>
|
|
|
- <div className="from">{from}</div>
|
|
|
+ <div className="cardClose" onClick={() => setIsShowLine(true)}>×</div>
|
|
|
+ <div className='dotLeft'>
|
|
|
+ <img src={require('@/assets/img/A6_arrow.png')} alt='' />
|
|
|
+ </div>
|
|
|
+ <div className='main'>
|
|
|
+ <div className='time'>{time}</div>
|
|
|
+ <div className='location'>{location}</div>
|
|
|
+ <div className='text'>{text}</div>
|
|
|
+ <div className='from'>{from}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
|
|
@@ -129,18 +140,20 @@ function Sinicize() {
|
|
|
<div className='line1'>
|
|
|
<img src={require('@/assets/img/A6_sinicize_line2.png')} draggable='false' alt='' />
|
|
|
</div>
|
|
|
- <div className='t2'>
|
|
|
- {myData.sinicizeDataStatic.desc}
|
|
|
- </div>
|
|
|
+ <div className='t2'>{myData.sinicizeDataStatic.desc}</div>
|
|
|
</div>
|
|
|
- {currentTab === 0 && <div className={`zhufo ${currentTab === 0 ? 'active' : ''}`}>
|
|
|
- <img src={require('@/assets/img/A6_sinicize_zhufo.png')} draggable='false' alt='' />{' '}
|
|
|
- <div className='name'>主尊佛像</div>
|
|
|
- </div>}
|
|
|
- {currentTab === 1 && <div className={`pusha ${currentTab === 1 ? 'active' : ''}`}>
|
|
|
- <img src={require('@/assets/img/A6_sinicize_pusha.png')} draggable='false' alt='' />
|
|
|
- <div className='name'>胁侍菩萨</div>
|
|
|
- </div>}
|
|
|
+ {currentTab === 0 && (
|
|
|
+ <div className={`zhufo ${currentTab === 0 ? 'active' : ''}`}>
|
|
|
+ <img src={require('@/assets/img/A6_sinicize_zhufo.png')} draggable='false' alt='' />{' '}
|
|
|
+ <div className='name'>主尊佛像</div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ {currentTab === 1 && (
|
|
|
+ <div className={`pusha ${currentTab === 1 ? 'active' : ''}`}>
|
|
|
+ <img src={require('@/assets/img/A6_sinicize_pusha.png')} draggable='false' alt='' />
|
|
|
+ <div className='name'>胁侍菩萨</div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
{currentTab === 0 && (
|
|
|
<>
|
|
|
<Label width={70} inset={'53px auto auto 360px'} name={'肉髻'} direct={'right'} />
|
|
|
@@ -160,12 +173,7 @@ function Sinicize() {
|
|
|
{currentTab === 1 && (
|
|
|
<>
|
|
|
<Label width={70} inset={'83px auto auto 360px'} name={'头光'} direct={'right'} />
|
|
|
- <Label
|
|
|
- width={93}
|
|
|
- inset={'181px auto auto 318px'}
|
|
|
- name={'披帛'}
|
|
|
- direct={'right'}
|
|
|
- />
|
|
|
+ <Label width={93} inset={'181px auto auto 318px'} name={'披帛'} direct={'right'} />
|
|
|
<Label width={68} inset={'272px auto auto 345px'} name={'天衣'} direct={'right'} />
|
|
|
<Label width={40} inset={'93px auto auto 506px'} name={'头冠'} direct={'left'} />
|
|
|
<Label width={36} inset={'129px auto auto 512px'} name={'宝缯'} direct={'left'} />
|
|
|
@@ -202,41 +210,66 @@ function Sinicize() {
|
|
|
<div className='txt'>{sItem.time}</div>
|
|
|
</div>
|
|
|
<div className={`${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
|
|
|
- <div className="left">
|
|
|
- <div className="lTop">{sItem.desc}</div>
|
|
|
- <div className="lContent">
|
|
|
- <div className="lImgBox">
|
|
|
- <img src={isShowLine ? sItem.imgItems[0].srcLine : sItem.imgItems[0].src} alt="" />
|
|
|
- {!isShowLine && <InfoCard
|
|
|
- time={sItem.imgItems[0].title}
|
|
|
- location={sItem.imgItems[0].title}
|
|
|
- text={sItem.imgItems[0].txt}
|
|
|
- from={sItem.imgItems[0].title}
|
|
|
- />}
|
|
|
- <div className="point">
|
|
|
- <div className="pointText">123</div>
|
|
|
- </div>
|
|
|
+ <div className='left'>
|
|
|
+ <div className='lTop'>{sItem.desc}</div>
|
|
|
+ <div className='lContent'>
|
|
|
+ <div className='lImgBox'>
|
|
|
+ {/* <img
|
|
|
+ src={isShowLine ? sItem.imgItems[0].srcLine : sItem.imgItems[0].src}
|
|
|
+ alt=''
|
|
|
+ /> */}
|
|
|
+ <div style={{
|
|
|
+ backgroundImage: `url(${isShowLine ? sItem.imgItems[0].srcLine : sItem.imgItems[0].src})`
|
|
|
+ }} className={`pic ${isShowLine ? 'picLine' : ''}`} />
|
|
|
+ {!isShowLine ? (
|
|
|
+ <InfoCard
|
|
|
+ time={sItem.imgItems[0].time}
|
|
|
+ location={sItem.imgItems[0].title}
|
|
|
+ text={sItem.imgItems[0].txt}
|
|
|
+ from={sItem.imgItems[0].title}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <div className='point' onClick={() => setIsShowLine(false)}>
|
|
|
+ <div className="pointTime">{sItem.imgItems[0].time}</div>
|
|
|
+ <div className='pointTitle'>{sItem.imgItems[0].title}</div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
</div>
|
|
|
- <div className="lInfo">
|
|
|
+ <div className='lInfo'>
|
|
|
{sItem.items.map((i, index) => (
|
|
|
- <div className="item" key={index}>
|
|
|
- <div className="lTitle">{i.title}</div>
|
|
|
- <div className="lText">{i.txt}</div>
|
|
|
+ <div className='item' key={index}>
|
|
|
+ <div className='lTitle'>{i.title}</div>
|
|
|
+ <div className='lText'>{i.txt}</div>
|
|
|
</div>
|
|
|
))}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div className="right">
|
|
|
- <div className="RItems">
|
|
|
- {
|
|
|
- sItem.imgItems.map((i, index) => (
|
|
|
- <div className="item" key={index}>
|
|
|
- <div className="pic"><img src={i.src} alt="" /></div>
|
|
|
- </div>
|
|
|
- ))
|
|
|
- }
|
|
|
-
|
|
|
+ <div className='right'>
|
|
|
+ <div className='RItems'>
|
|
|
+ {sItem.imgItems.filter((i, index) => index !== 0).map((i, index) => (
|
|
|
+ <div className='item' key={index}>
|
|
|
+ {/* <div className='pic'>
|
|
|
+ <img src={i.src} alt='' />
|
|
|
+ </div> */}
|
|
|
+ <div style={{
|
|
|
+ backgroundImage: `url(${isShowLine ? i.srcLine : i.src})`
|
|
|
+ }} className={`pic ${isShowLine ? 'picLine' : ''}`} />
|
|
|
+ {!isShowLine ? (
|
|
|
+ <InfoCard
|
|
|
+ time={i.time}
|
|
|
+ location={i.title}
|
|
|
+ text={i.txt}
|
|
|
+ from={i.title}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <div className='point' onClick={() => setIsShowLine(false)}>
|
|
|
+ <div className="pointTime">{i.time}</div>
|
|
|
+ <div className='pointTitle'>{i.title}</div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -247,11 +280,14 @@ function Sinicize() {
|
|
|
</div>
|
|
|
</div>
|
|
|
{isShowTip && (
|
|
|
- <div className={styles.tip} onClick={() => {
|
|
|
- setTimeout(() => {
|
|
|
- setIsShowTip(false)
|
|
|
- }, 1500);
|
|
|
- }}>
|
|
|
+ <div
|
|
|
+ className={styles.tip}
|
|
|
+ onClick={() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ setIsShowTip(false)
|
|
|
+ }, 1500)
|
|
|
+ }}
|
|
|
+ >
|
|
|
<div className='gesture'>
|
|
|
<img src={require('@/assets/img/A6_sinicize_gesture.png')} draggable='false' alt='' />{' '}
|
|
|
<div className='txt'>向右滑动查看造像中国化的演变</div>{' '}
|
lanxin
