|
|
@@ -1,28 +1,39 @@
|
|
|
-import React, { useState, useEffect } from 'react'
|
|
|
+import React, { useState, useEffect, useRef } from 'react'
|
|
|
import styles from './index.module.scss'
|
|
|
import { useSelector } from 'react-redux'
|
|
|
import { RootState } from '@/store'
|
|
|
-import { Toast } from 'antd-mobile'
|
|
|
+
|
|
|
+
|
|
|
function Sang({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
|
|
|
const [currentTab, setCurrentTab] = useState('tab0')
|
|
|
const [isShowTabBar, setIsShowTabBar] = useState(true)
|
|
|
const [isShowHidContent, setIsShowHidContent] = useState(false)
|
|
|
+ const [isShowHidContentRight, setIsShowHidContentRight] = useState(false)
|
|
|
+ const [isShowMzwHot, setIsShowMzwHot] = useState(false)
|
|
|
+ const [selectedGeshi, setSelectedGeshi] = useState(0)
|
|
|
const { myData } = useSelector((state: RootState) => state.A0Layout)
|
|
|
|
|
|
- useEffect(() => {
|
|
|
- Toast.show({
|
|
|
- content: '开发中',
|
|
|
- duration: 1000
|
|
|
- })
|
|
|
- }, [currentTab])
|
|
|
+ const picRef = useRef<HTMLDivElement>(null)
|
|
|
|
|
|
useEffect(() => {
|
|
|
- if (isShowHidContent) {
|
|
|
+ if (isShowHidContent || isShowMzwHot) {
|
|
|
setIsShowTabBar(false)
|
|
|
} else {
|
|
|
setIsShowTabBar(true)
|
|
|
}
|
|
|
- }, [isShowHidContent])
|
|
|
+ }, [isShowHidContent, isShowMzwHot])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (selectedGeshi !== 0) {
|
|
|
+ setIsShowTabBar(false)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ setIsShowTabBar(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ }, [selectedGeshi])
|
|
|
+
|
|
|
+
|
|
|
|
|
|
const handleTabClick = (tab: string) => {
|
|
|
if (tab === currentTab) {
|
|
|
@@ -32,6 +43,8 @@ function Sang({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
|
|
|
setCurrentTab(tab)
|
|
|
}
|
|
|
|
|
|
+ console.log(currentTab)
|
|
|
+
|
|
|
return (
|
|
|
<div className={styles.sang}>
|
|
|
<div className='back' onClick={() => setGotoTab(0)}>
|
|
|
@@ -41,67 +54,59 @@ function Sang({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
|
|
|
className={`main ${isShowHidContent ? 'mainAc' : currentTab === 'tab0' ? '' : 'mainShow_' + currentTab
|
|
|
}`}
|
|
|
>
|
|
|
- <div className='lHidding'>
|
|
|
+ <div className={`lHidding ${isShowHidContentRight ? 'showRight' : ''}`}>
|
|
|
<div className='lHidding_left'>
|
|
|
<div className='detail_info1'>
|
|
|
<div className='imgBox'>
|
|
|
- <div className='pic' />
|
|
|
+ <div className='pic' ref={picRef} />
|
|
|
</div>
|
|
|
- <div className='txt'>
|
|
|
- 图片来源
|
|
|
- <br />
|
|
|
- 《文物》1963年第6期P50
|
|
|
+ <div className='txt' dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[0].from }} >
|
|
|
</div>
|
|
|
- <div className='title'>柳子辉墓志铭</div>
|
|
|
- <div className='time'>北齐天保七年(556年)</div>
|
|
|
+ <div className='title'>{myData.sangzangLeftInfo2[0].name}</div>
|
|
|
+ <div className='time'>{myData.sangzangLeftInfo2[0].txt}</div>
|
|
|
</div>
|
|
|
- <div className='detail_info2'>
|
|
|
- <div className='title_info2'>柳子辉墓志铭</div>
|
|
|
- <div className='txt_info2'>北齐天保七年(556年)</div>
|
|
|
+ <div className='detail_info2' onClick={() => setIsShowHidContentRight(!isShowHidContentRight)}>
|
|
|
+ <div className='title_info2'>{myData.sangzangStatic.leftInfoName}</div>
|
|
|
+ <div className='txt_info2'>{myData.sangzangStatic.txt}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className='lHidding_right'>
|
|
|
- <div
|
|
|
- className='open'
|
|
|
- onClick={e => {
|
|
|
- e.stopPropagation()
|
|
|
- setIsShowHidContent(!isShowHidContent)
|
|
|
- }}
|
|
|
- >
|
|
|
- {' '}
|
|
|
- <div className='openPic' />{' '}
|
|
|
- </div>
|
|
|
- <div className='imgBox'>
|
|
|
+ <div className='imgBox' onClick={() => setIsShowMzwHot(true)}>
|
|
|
<div className='pic' />
|
|
|
<div className='zoomIn'>
|
|
|
- <img src={require('@/assets/img/A5_zoomin.png')} alt='' />
|
|
|
+ <img src={require('@/assets/img/A6_sangzang_zoomin.png')} alt='' />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div className='txt'>
|
|
|
- 图片来源
|
|
|
- <br />
|
|
|
- 《文物》1963年第6期P50
|
|
|
+ <div className='txt' dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[1].from }} >
|
|
|
</div>
|
|
|
- <div className='title'>柳子辉墓志铭</div>
|
|
|
- <div className='time'>北齐天保七年(556年)</div>
|
|
|
+ <div className='title'>{myData.sangzangLeftInfo2[1].name}</div>
|
|
|
+ <div className='time'>{myData.sangzangLeftInfo2[1].txt}</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ className='open'
|
|
|
+ onClick={e => {
|
|
|
+ e.stopPropagation()
|
|
|
+ setIsShowHidContent(!isShowHidContent)
|
|
|
+ setIsShowHidContentRight(false)
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div className='openPic' />{' '}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className='left'>
|
|
|
- <div className='pic' />
|
|
|
+ <div className='pic' style={{
|
|
|
+ background: `url(${require(`@/assets/img/A6_sangzang_left_${currentTab}.png`)}) no-repeat center/contain`
|
|
|
+ }} />
|
|
|
<div className='operate'>
|
|
|
- <div className='beiwen1'>程氏颂文</div>
|
|
|
- <div className='beiwen1'>程哲生卒</div>
|
|
|
- <div className='beiwen1'>先祖功绩</div>
|
|
|
+ <div className='beiwen1' onClick={() => setSelectedGeshi(1)}>程氏颂文</div>
|
|
|
+ <div className='beiwen2' onClick={() => setSelectedGeshi(2)}>程哲生卒</div>
|
|
|
+ <div className='beiwen3' onClick={() => setSelectedGeshi(3)}>先祖功绩</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className='right'>
|
|
|
<div className={`content`}>
|
|
|
- <div className='title myFont'>程哲碑丧葬因素</div>
|
|
|
- <div className='text'>
|
|
|
- 程哲碑,其以佛像为主题的造像风格与传统造像碑无二,但传统造像碑通常以发愿文为核心,内容多为祈福禳灾、超度亡灵或祈求功德,不强调墓主生平与家族世系。
|
|
|
- <br />
|
|
|
- 程哲碑则强调墓主生平与家族世系,其文字更多是丧葬语境下的内容,其行文与墓志铭密切相关。
|
|
|
- </div>
|
|
|
+ <div className='title myFont'>{myData.sangzangStatic.rightInfoName}</div>
|
|
|
+ <div className='text' dangerouslySetInnerHTML={{ __html: myData.sangzangData[Number(currentTab.split('tab')[1])].txt }} />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -139,6 +144,56 @@ function Sang({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
|
|
|
过程
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ {/* 墓志铭格式-detail */}
|
|
|
+ <div className={`geshi ${selectedGeshi === 0 ? 'geshiHide' : ''}`}>
|
|
|
+ <div className='back' onClick={() => setSelectedGeshi(0)}>
|
|
|
+ <img src={require('@/assets/img/btn_back.png')} alt='' />
|
|
|
+ </div>
|
|
|
+ <div className="geshi_left">
|
|
|
+ <div className="pic" style={{
|
|
|
+ background: `url(${require(`@/assets/img/A6_sangzang_geshi${selectedGeshi === 0 ? '1' : selectedGeshi}.png`)}) no-repeat center/contain`
|
|
|
+ }} />
|
|
|
+ </div>
|
|
|
+ <div className="geshi_right">
|
|
|
+ <div className="top">
|
|
|
+ {myData.mzgeshi.map((item, index) => (
|
|
|
+ <div key={item.key} className={`tab${index}`} onClick={(e) => {
|
|
|
+ e.stopPropagation()
|
|
|
+ setSelectedGeshi(item.key)
|
|
|
+ }}>
|
|
|
+ <img
|
|
|
+ src={require(`@/assets/img/btn_ModalTxt_bg${selectedGeshi === item.key ? '_ac' : ''
|
|
|
+ }.png`)}
|
|
|
+ alt=''
|
|
|
+ />
|
|
|
+ <div className={`tabNub ${selectedGeshi === item.key ? 'tabNubAc' : ''}`}>
|
|
|
+ {item.sonTxt}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ className={`txt ${selectedGeshi !== item.key ? 'txtAc' : ''}`}
|
|
|
+
|
|
|
+ >
|
|
|
+ {item.name}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div className="content" dangerouslySetInnerHTML={{ __html: selectedGeshi !== 0 ? myData.mzgeshi[selectedGeshi - 1].txt : '' }}></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className={`mzwHot ${isShowMzwHot ? 'mzwHot_show' : ''}`} >
|
|
|
+ <div className="mzwHotL"><div className="mPic" style={{
|
|
|
+ background: `url(${require(`@/assets/img/A6_sangzang_${(currentTab !== 'tab1' && currentTab !== 'tab2') ? 'tab1' : currentTab}.png`)}) no-repeat center/contain`
|
|
|
+ }}></div></div>
|
|
|
+ <div className="mzwHotR">
|
|
|
+ <div className="mtitle">{myData.mzw[(currentTab !== 'tab1' && currentTab !== 'tab2') ? 0 : Number(currentTab.split('tab')[1]) - 1].title}</div>
|
|
|
+ <div className="mtext" dangerouslySetInnerHTML={{ __html: myData.mzw[(currentTab !== 'tab1' && currentTab !== 'tab2') ? 0 : Number(currentTab.split('tab')[1]) - 1].txt }}></div>
|
|
|
+ </div>
|
|
|
+ <div className="mzwclose" onClick={() => setIsShowMzwHot(false)}><img src={require('@/assets/img/closeWithTxt.png')} alt="" /></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
)
|
|
|
}
|