|
|
@@ -1,46 +1,114 @@
|
|
|
-import React, { useState, useEffect } from "react";
|
|
|
-import styles from "./index.module.scss";
|
|
|
+import React, { useState, useEffect } from 'react'
|
|
|
+import styles from './index.module.scss'
|
|
|
import { useSelector } from 'react-redux'
|
|
|
import { RootState } from '@/store'
|
|
|
-import { Toast } from "antd-mobile";
|
|
|
+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 [currentTab, setCurrentTab] = useState('tab0')
|
|
|
+ const [isShowTabBar, setIsShowTabBar] = useState(true)
|
|
|
+ const [isShowHidContent, setIsShowHidContent] = useState(false)
|
|
|
const { myData } = useSelector((state: RootState) => state.A0Layout)
|
|
|
|
|
|
useEffect(() => {
|
|
|
Toast.show({
|
|
|
content: '开发中',
|
|
|
- duration: 1000,
|
|
|
+ duration: 1000
|
|
|
})
|
|
|
}, [currentTab])
|
|
|
|
|
|
+ useEffect(() => {
|
|
|
+ if (isShowHidContent) {
|
|
|
+ setIsShowTabBar(false)
|
|
|
+ } else {
|
|
|
+ setIsShowTabBar(true)
|
|
|
+ }
|
|
|
+ }, [isShowHidContent])
|
|
|
+
|
|
|
+ const handleTabClick = (tab: string) => {
|
|
|
+ if (tab === currentTab) {
|
|
|
+ setCurrentTab('tab0')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ setCurrentTab(tab)
|
|
|
+ }
|
|
|
+
|
|
|
return (
|
|
|
<div className={styles.sang}>
|
|
|
<div className='back' onClick={() => setGotoTab(0)}>
|
|
|
<img src={require('@/assets/img/btn_back.png')} alt='' />
|
|
|
</div>
|
|
|
- <div className={`main ${isShowHidContent ? 'mainAc' : ''}`} onClick={() => setIsShowHidContent(false)}>
|
|
|
- <div className="lHidding">
|
|
|
- <div className="open" onClick={(e) => { e.stopPropagation(); setIsShowHidContent(true) }}><img src={require('@/assets/img/A6_sangzang_hidRight.png')} alt="" /></div>
|
|
|
- <div className="imgBox"><div className="pic" /><div className="zoomIn"><img src={require('@/assets/img/A5_zoomin.png')} alt="" /></div></div>
|
|
|
- <div className="txt">图片来源《文物》1963年第6期P50</div>
|
|
|
- <div className="title">柳子辉墓志铭</div>
|
|
|
- <div className="time">北齐天保七年（556年）</div>
|
|
|
+ <div
|
|
|
+ className={`main ${isShowHidContent ? 'mainAc' : currentTab === 'tab0' ? '' : 'mainShow_' + currentTab
|
|
|
+ }`}
|
|
|
+ >
|
|
|
+ <div className='lHidding'>
|
|
|
+ <div className='lHidding_left'>
|
|
|
+ <div className='detail_info1'>
|
|
|
+ <div className='imgBox'>
|
|
|
+ <div className='pic' />
|
|
|
+ </div>
|
|
|
+ <div className='txt'>
|
|
|
+ 图片来源
|
|
|
+ <br />
|
|
|
+ 《文物》1963年第6期P50
|
|
|
+ </div>
|
|
|
+ <div className='title'>柳子辉墓志铭</div>
|
|
|
+ <div className='time'>北齐天保七年（556年）</div>
|
|
|
+ </div>
|
|
|
+ <div className='detail_info2'>
|
|
|
+ <div className='title_info2'>柳子辉墓志铭</div>
|
|
|
+ <div className='txt_info2'>北齐天保七年（556年）</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='pic' />
|
|
|
+ <div className='zoomIn'>
|
|
|
+ <img src={require('@/assets/img/A5_zoomin.png')} alt='' />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className='txt'>
|
|
|
+ 图片来源
|
|
|
+ <br />
|
|
|
+ 《文物》1963年第6期P50
|
|
|
+ </div>
|
|
|
+ <div className='title'>柳子辉墓志铭</div>
|
|
|
+ <div className='time'>北齐天保七年（556年）</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className='left'>
|
|
|
+ <div className='pic' />
|
|
|
+ <div className='operate'>
|
|
|
+ <div className='beiwen1'>程氏颂文</div>
|
|
|
+ <div className='beiwen1'>程哲生卒</div>
|
|
|
+ <div className='beiwen1'>先祖功绩</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div className="left"><div className="pic" /></div>
|
|
|
- <div className="right">
|
|
|
+ <div className='right'>
|
|
|
<div className={`content`}>
|
|
|
<div className='title myFont'>程哲碑丧葬因素</div>
|
|
|
- <div className='text'>程哲碑，其以佛像为主题的造像风格与传统造像碑无二，但传统造像碑通常以发愿文为核心，内容多为祈福禳灾、超度亡灵或祈求功德，不强调墓主生平与家族世系。<br />程哲碑则强调墓主生平与家族世系，其文字更多是丧葬语境下的内容，其行文与墓志铭密切相关。</div>
|
|
|
+ <div className='text'>
|
|
|
+ 程哲碑，其以佛像为主题的造像风格与传统造像碑无二，但传统造像碑通常以发愿文为核心，内容多为祈福禳灾、超度亡灵或祈求功德，不强调墓主生平与家族世系。
|
|
|
+ <br />
|
|
|
+ 程哲碑则强调墓主生平与家族世系，其文字更多是丧葬语境下的内容，其行文与墓志铭密切相关。
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div className='A6_tabBar' style={{ display: isShowTabBar ? 'flex' : 'none' }}>
|
|
|
+ <div className={`A6_tabBar ${!isShowTabBar ? 'A6_tabBar_hide' : ''}`}>
|
|
|
<div
|
|
|
className={`tab ${currentTab === 'tab1' ? 'tab_active' : ''}`}
|
|
|
- onClick={() => setCurrentTab('tab1')}
|
|
|
+ onClick={() => handleTabClick('tab1')}
|
|
|
>
|
|
|
墓志
|
|
|
<br />
|
|
|
@@ -48,7 +116,7 @@ function Sang({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
|
|
|
</div>
|
|
|
<div
|
|
|
className={`tab ${currentTab === 'tab2' ? 'tab_active' : ''}`}
|
|
|
- onClick={() => setCurrentTab('tab2')}
|
|
|
+ onClick={() => handleTabClick('tab2')}
|
|
|
>
|
|
|
攀附
|
|
|
<br />
|
|
|
@@ -56,7 +124,7 @@ function Sang({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
|
|
|
</div>
|
|
|
<div
|
|
|
className={`tab ${currentTab === 'tab3' ? 'tab_active' : ''}`}
|
|
|
- onClick={() => setCurrentTab('tab3')}
|
|
|
+ onClick={() => handleTabClick('tab3')}
|
|
|
>
|
|
|
立碑
|
|
|
<br />
|
|
|
@@ -64,7 +132,7 @@ function Sang({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
|
|
|
</div>
|
|
|
<div
|
|
|
className={`tab ${currentTab === 'tab4' ? 'tab_active' : ''}`}
|
|
|
- onClick={() => setCurrentTab('tab4')}
|
|
|
+ onClick={() => handleTabClick('tab4')}
|
|
|
>
|
|
|
刻写
|
|
|
<br />
|
|
|
@@ -75,6 +143,6 @@ function Sang({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
|
|
|
)
|
|
|
}
|
|
|
|
|
|
-const MemoSang = React.memo(Sang);
|
|
|
+const MemoSang = React.memo(Sang)
|
|
|
|
|
|
-export default MemoSang;
|
|
|
+export default MemoSang
|
