|
|
@@ -19,6 +19,13 @@ function Zhot({ name, closeFu }: Props) {
|
|
|
// 二级的选中
|
|
|
const [acObj2, setAcObj2] = useState({} as HotSonType)
|
|
|
|
|
|
+ // 切换二级院落,滚动到最左边
|
|
|
+ useEffect(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ if (sroolRef.current) sroolRef.current.scrollLeft = 0
|
|
|
+ }, 100)
|
|
|
+ }, [acObj2])
|
|
|
+
|
|
|
const info = useMemo(() => {
|
|
|
let info = {} as HotRowType
|
|
|
for (const k in hotInfo) {
|
|
|
@@ -31,6 +38,21 @@ function Zhot({ name, closeFu }: Props) {
|
|
|
return info
|
|
|
}, [name])
|
|
|
|
|
|
+ // 二级相关文物---没有二级全部显示
|
|
|
+ const involveResArr = useMemo(() => {
|
|
|
+ let arr: HotInvolveType[] = []
|
|
|
+ if (info && info.data) {
|
|
|
+ arr = info.data.involve
|
|
|
+ if (acObj2 && acObj2.name) {
|
|
|
+ if (acObj2.sonInvolve) {
|
|
|
+ arr = arr.filter(v => acObj2.sonInvolve?.includes(v.name))
|
|
|
+ } else arr = []
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return arr
|
|
|
+ }, [acObj2, info])
|
|
|
+
|
|
|
// 相关文物的滚动
|
|
|
const [isFlag, setIsFlag] = useState(false)
|
|
|
|
|
|
@@ -111,83 +133,21 @@ function Zhot({ name, closeFu }: Props) {
|
|
|
|
|
|
{/* 左边主体 */}
|
|
|
<div className='ZHll'>
|
|
|
- {/* 标题 */}
|
|
|
- <div className='h2Titele sizeNo'>
|
|
|
- <img src={`${baseURL}Zhot/img-yun1.png`} alt='' />
|
|
|
- <img className='h2TimgR' src={`${baseURL}Zhot/img-yun2.png`} alt='' />
|
|
|
- {acObj3.name ? acObj3.name.replaceAll('&', '') : name}
|
|
|
- </div>
|
|
|
-
|
|
|
- {info.data ? (
|
|
|
- <div className='ZH1main' style={{ backgroundImage: `url(${baseURL + 'Zhot/bac.png'})` }}>
|
|
|
- <div className='ZH1main1' hidden={!!acObj3.name} id='ZH1main1'>
|
|
|
- {/* 一级图片 */}
|
|
|
- {info.data.imgArr1 && info.data.imgArr1.length ? (
|
|
|
- <div className='ZHimgBox'>
|
|
|
- {info.data.imgArr1.map(url => (
|
|
|
- <LazyImg
|
|
|
- clickFu={() => setImgLook(baseURL + url)}
|
|
|
- src={baseURL + url}
|
|
|
- key={url}
|
|
|
- />
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- ) : null}
|
|
|
- {/* 一级介绍 */}
|
|
|
- <div className='ZH1txt' dangerouslySetInnerHTML={{ __html: info.data.txt }}></div>
|
|
|
-
|
|
|
- {/* ----------二级----------- */}
|
|
|
- {info.data.son && info.data.son.length ? (
|
|
|
- <div className='ZH1_2'>
|
|
|
- <div className='ZH1_2ll'>
|
|
|
- {info.data.son.map(row2 => (
|
|
|
- <div
|
|
|
- key={row2.name}
|
|
|
- className={classNames(
|
|
|
- 'ZH1_2llRow sizeNo',
|
|
|
- acObj2.name === row2.name ? 'ZH1_2llRowAc' : ''
|
|
|
- )}
|
|
|
- onClick={() => setAcObj2(row2)}
|
|
|
- >
|
|
|
- <img src={baseURL + 'Zhot/icon2.png'} alt='' />
|
|
|
- <img src={baseURL + 'Zhot/icon2Ac.png'} alt='' />
|
|
|
- {row2.name.replaceAll('&', '')}
|
|
|
- </div>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- <div className='ZH1_2rr'>
|
|
|
- {/* 二级图片 */}
|
|
|
- {acObj2.imgArr2 && acObj2.imgArr2.length ? (
|
|
|
- <div className='ZHimgBox'>
|
|
|
- {acObj2.imgArr2.map(url => (
|
|
|
- // 懒加载有问题,用普通img
|
|
|
- // <LazyImg
|
|
|
- // clickFu={() => setImgLook(baseURL + url)}
|
|
|
- // src={baseURL + url}
|
|
|
- // key={url}
|
|
|
- // />
|
|
|
- <img
|
|
|
- className='ZH2img'
|
|
|
- key={url}
|
|
|
- src={baseURL + url}
|
|
|
- alt=''
|
|
|
- onClick={() => setImgLook(baseURL + url)}
|
|
|
- />
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- ) : null}
|
|
|
- <div dangerouslySetInnerHTML={{ __html: acObj2.txt }}></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- ) : null}
|
|
|
- </div>
|
|
|
+ <div className='ZHLLcen' style={{ backgroundImage: `url(${baseURL + 'Zhot/bac.png'})` }}>
|
|
|
+ {/* 标题 */}
|
|
|
+ <div className='h2Titele sizeNo'>
|
|
|
+ <img src={`${baseURL}Zhot/img-yun1.png`} alt='' />
|
|
|
+ <img className='h2TimgR' src={`${baseURL}Zhot/img-yun2.png`} alt='' />
|
|
|
+ {acObj3.name ? acObj3.name.replaceAll('&', '') : name}
|
|
|
+ </div>
|
|
|
|
|
|
- {/* -----------三级信息------------- */}
|
|
|
- {acObj3.name ? (
|
|
|
- <div className='ZH1main1 ZH1main1Son'>
|
|
|
- {acObj3.type === '图片' ? (
|
|
|
+ {info.data ? (
|
|
|
+ <div className='ZH1main'>
|
|
|
+ <div className='ZH1main1' hidden={!!acObj3.name} id='ZH1main1'>
|
|
|
+ {/* 一级图片 */}
|
|
|
+ {info.data.imgArr1 && info.data.imgArr1.length ? (
|
|
|
<div className='ZHimgBox'>
|
|
|
- {acObj3.urlArr.map(url => (
|
|
|
+ {info.data.imgArr1.map(url => (
|
|
|
<LazyImg
|
|
|
clickFu={() => setImgLook(baseURL + url)}
|
|
|
src={baseURL + url}
|
|
|
@@ -196,92 +156,159 @@ function Zhot({ name, closeFu }: Props) {
|
|
|
))}
|
|
|
</div>
|
|
|
) : null}
|
|
|
+ {/* 一级介绍 */}
|
|
|
+ <div className='ZH1txt' dangerouslySetInnerHTML={{ __html: info.data.txt }}></div>
|
|
|
|
|
|
- {['模型', '视频'].includes(acObj3.type) ? (
|
|
|
- <div className='H2model' style={{ height: acObj3.text ? '200px' : '280px' }}>
|
|
|
- {acObj3.type === '模型' ? (
|
|
|
- <div
|
|
|
- className='H2modelSon'
|
|
|
- style={
|
|
|
- isPc && Object.keys(rootStyle).length && modelSize.ww
|
|
|
- ? {
|
|
|
- position: 'relative',
|
|
|
- width: modelSize.ww + 'px',
|
|
|
- height: modelSize.hh + 'px',
|
|
|
- transform: `translate(${-(modelSize.ww - modelSize.wwB) / 2}px, ${
|
|
|
- -(modelSize.hh - modelSize.hhB) / 2
|
|
|
- }px) scale(${1 / rootStyle.sizeW}, ${1 / rootStyle.sizeH})`
|
|
|
- }
|
|
|
- : { width: '100%', height: '100%' }
|
|
|
- }
|
|
|
- >
|
|
|
- <iframe
|
|
|
- title={name}
|
|
|
- src={`${baseURL}modelLoding/model.html?u=${acObj3.urlArr[0]}`}
|
|
|
- frameBorder='0'
|
|
|
- ></iframe>
|
|
|
- </div>
|
|
|
- ) : (
|
|
|
- <video
|
|
|
- src={baseURL + acObj3.urlArr[0]}
|
|
|
- controls
|
|
|
- playsInline
|
|
|
- muted
|
|
|
- webkit-playsinline='true'
|
|
|
- x5-video-player-type='h5'
|
|
|
- ></video>
|
|
|
- )}
|
|
|
+ {/* ----------二级----------- */}
|
|
|
+ {info.data.son && info.data.son.length ? (
|
|
|
+ <div className='ZH1_2'>
|
|
|
+ <div className='ZH1_2ll'>
|
|
|
+ {info.data.son.map(row2 => (
|
|
|
+ <div
|
|
|
+ key={row2.name}
|
|
|
+ className={classNames(
|
|
|
+ 'ZH1_2llRow sizeNo',
|
|
|
+ acObj2.name === row2.name ? 'ZH1_2llRowAc' : ''
|
|
|
+ )}
|
|
|
+ onClick={() => setAcObj2(row2)}
|
|
|
+ >
|
|
|
+ <img src={baseURL + 'Zhot/icon2.png'} alt='' />
|
|
|
+ <img src={baseURL + 'Zhot/icon2Ac.png'} alt='' />
|
|
|
+ {row2.name.replaceAll('&', '')}
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ <div className='ZH1_2rr'>
|
|
|
+ {/* 二级图片 */}
|
|
|
+ {acObj2.imgArr2 && acObj2.imgArr2.length ? (
|
|
|
+ <div className='ZHimgBox'>
|
|
|
+ {acObj2.imgArr2.map(url => (
|
|
|
+ // 懒加载有问题,用普通img
|
|
|
+ // <LazyImg
|
|
|
+ // clickFu={() => setImgLook(baseURL + url)}
|
|
|
+ // src={baseURL + url}
|
|
|
+ // key={url}
|
|
|
+ // />
|
|
|
+ <img
|
|
|
+ className='ZH2img'
|
|
|
+ key={url}
|
|
|
+ src={baseURL + url}
|
|
|
+ alt=''
|
|
|
+ onClick={() => setImgLook(baseURL + url)}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ ) : null}
|
|
|
+ <div dangerouslySetInnerHTML={{ __html: acObj2.txt }}></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
) : null}
|
|
|
-
|
|
|
- <div className='ZH1txt' dangerouslySetInnerHTML={{ __html: acObj3.text }}></div>
|
|
|
</div>
|
|
|
- ) : null}
|
|
|
|
|
|
- <div className='ZH1main2'>
|
|
|
- {/* 返回按钮 */}
|
|
|
- <div className='back1'>
|
|
|
- <BtnRight
|
|
|
- title='返回'
|
|
|
- clickSon={() => {
|
|
|
- acObj3.name ? setAcObj3({} as HotInvolveType) : closeFu()
|
|
|
- }}
|
|
|
- imgName='back'
|
|
|
- />
|
|
|
- </div>
|
|
|
+ {/* -----------三级信息------------- */}
|
|
|
+ {acObj3.name ? (
|
|
|
+ <div className='ZH1main1 ZH1main1Son'>
|
|
|
+ {acObj3.type === '图片' ? (
|
|
|
+ <div className='ZHimgBox'>
|
|
|
+ {acObj3.urlArr.map(url => (
|
|
|
+ <LazyImg
|
|
|
+ clickFu={() => setImgLook(baseURL + url)}
|
|
|
+ src={baseURL + url}
|
|
|
+ key={url}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ ) : null}
|
|
|
+
|
|
|
+ {['模型', '视频'].includes(acObj3.type) ? (
|
|
|
+ <div className='H2model' style={{ height: acObj3.text ? '200px' : '280px' }}>
|
|
|
+ {acObj3.type === '模型' ? (
|
|
|
+ <div
|
|
|
+ className='H2modelSon'
|
|
|
+ style={
|
|
|
+ isPc && Object.keys(rootStyle).length && modelSize.ww
|
|
|
+ ? {
|
|
|
+ position: 'relative',
|
|
|
+ width: modelSize.ww + 'px',
|
|
|
+ height: modelSize.hh + 'px',
|
|
|
+ transform: `translate(${-(modelSize.ww - modelSize.wwB) / 2}px, ${
|
|
|
+ -(modelSize.hh - modelSize.hhB) / 2
|
|
|
+ }px) scale(${1 / rootStyle.sizeW}, ${1 / rootStyle.sizeH})`
|
|
|
+ }
|
|
|
+ : { width: '100%', height: '100%' }
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <iframe
|
|
|
+ title={name}
|
|
|
+ src={`${baseURL}modelLoding/model.html?u=${acObj3.urlArr[0]}`}
|
|
|
+ frameBorder='0'
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <video
|
|
|
+ src={baseURL + acObj3.urlArr[0]}
|
|
|
+ controls
|
|
|
+ playsInline
|
|
|
+ muted
|
|
|
+ webkit-playsinline='true'
|
|
|
+ x5-video-player-type='h5'
|
|
|
+ ></video>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ ) : null}
|
|
|
|
|
|
- {/* 相关文物 */}
|
|
|
- {info.data.involve && info.data.involve.length ? (
|
|
|
- <div className='ZH1main2rr'>
|
|
|
- <div className='ZH1main2rr1 sizeNo'>相关文物:</div>
|
|
|
<div
|
|
|
- className='ZH1main2rr2'
|
|
|
- onMouseDown={() => setIsFlag(true)}
|
|
|
- onMouseUp={() => setIsFlag(false)}
|
|
|
- onMouseLeave={() => setIsFlag(false)}
|
|
|
- onMouseMove={e => mousemoveFu(e)}
|
|
|
- onWheel={e => mousemoveFu(e, true)}
|
|
|
- style={{ cursor: isFlag ? 'move' : 'default' }}
|
|
|
- ref={sroolRef}
|
|
|
- >
|
|
|
- {info.data.involve.map(row3 => (
|
|
|
- <div
|
|
|
- onClick={() => setAcObj3(row3)}
|
|
|
- className={classNames(
|
|
|
- 'ZH1main2rr2Row sizeNo',
|
|
|
- acObj3.name === row3.name ? 'ZH1main2rr2RowAc' : ''
|
|
|
- )}
|
|
|
- key={row3.name}
|
|
|
- >
|
|
|
- {row3.name.replaceAll('&', '')}
|
|
|
- </div>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
+ className='ZH1txt ZH1txt3'
|
|
|
+ dangerouslySetInnerHTML={{ __html: acObj3.text }}
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
) : null}
|
|
|
+
|
|
|
+ <div className='ZH1main2'>
|
|
|
+ {/* 返回按钮 */}
|
|
|
+ <div className='back1'>
|
|
|
+ <BtnRight
|
|
|
+ title='返回'
|
|
|
+ clickSon={() => {
|
|
|
+ acObj3.name ? setAcObj3({} as HotInvolveType) : closeFu()
|
|
|
+ }}
|
|
|
+ imgName='back'
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 相关文物 */}
|
|
|
+ {involveResArr && involveResArr.length ? (
|
|
|
+ <div className='ZH1main2rr'>
|
|
|
+ <div className='ZH1main2rr1 sizeNo'>相关文物:</div>
|
|
|
+ <div
|
|
|
+ className='ZH1main2rr2'
|
|
|
+ onMouseDown={() => setIsFlag(true)}
|
|
|
+ onMouseUp={() => setIsFlag(false)}
|
|
|
+ onMouseLeave={() => setIsFlag(false)}
|
|
|
+ onMouseMove={e => mousemoveFu(e)}
|
|
|
+ onWheel={e => mousemoveFu(e, true)}
|
|
|
+ style={{ cursor: isFlag ? 'move' : 'default' }}
|
|
|
+ ref={sroolRef}
|
|
|
+ >
|
|
|
+ {involveResArr.map(row3 => (
|
|
|
+ <div
|
|
|
+ onClick={() => setAcObj3(row3)}
|
|
|
+ className={classNames(
|
|
|
+ 'ZH1main2rr2Row sizeNo',
|
|
|
+ acObj3.name === row3.name ? 'ZH1main2rr2RowAc' : ''
|
|
|
+ )}
|
|
|
+ key={row3.name}
|
|
|
+ >
|
|
|
+ {row3.name.replaceAll('&', '')}
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ ) : null}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- ) : null}
|
|
|
+ ) : null}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div className='ZHrr' onClick={closeFu}></div>
|
|
|
</div>
|