|
@@ -1,4 +1,4 @@
|
|
-import React, { useCallback, useState } from 'react'
|
|
|
|
|
|
+import React, { useCallback, useRef, useState } from 'react'
|
|
import styles from './index.module.scss'
|
|
import styles from './index.module.scss'
|
|
import BaseImg from '@/components/BaseImg'
|
|
import BaseImg from '@/components/BaseImg'
|
|
import { baseURL, myData } from '@/utils/http'
|
|
import { baseURL, myData } from '@/utils/http'
|
|
@@ -7,6 +7,10 @@ import CatVideo from '@/components/CatVideo'
|
|
import A6PanoVideo from './A6PanoVideo'
|
|
import A6PanoVideo from './A6PanoVideo'
|
|
import classNames from 'classnames'
|
|
import classNames from 'classnames'
|
|
import { domDelOwnFu } from '@/utils/utilsSome'
|
|
import { domDelOwnFu } from '@/utils/utilsSome'
|
|
|
|
+import FloorBtn from '@/components/FloorBtn'
|
|
|
|
+import NextPage from '@/components/NextPage'
|
|
|
|
+import EndVideo from '@/components/EndVideo'
|
|
|
|
+import history from '@/utils/history'
|
|
|
|
|
|
function A6xian() {
|
|
function A6xian() {
|
|
// 过度动画
|
|
// 过度动画
|
|
@@ -29,12 +33,40 @@ function A6xian() {
|
|
const { imgNow, imgNumFu } = useLoding(3)
|
|
const { imgNow, imgNumFu } = useLoding(3)
|
|
|
|
|
|
// 点击升仙
|
|
// 点击升仙
|
|
- const [xianShow, setXianShow] = useState(false)
|
|
|
|
|
|
+ const [xianShow, setXianShow] = useState(window.location.href.includes('t=xian') ? true : false)
|
|
|
|
+
|
|
|
|
+ // 滚动
|
|
|
|
+ const [isFlag, setIsFlag] = useState(false)
|
|
|
|
+
|
|
|
|
+ const xianRef = useRef<HTMLDivElement>(null)
|
|
|
|
+
|
|
|
|
+ const mousemoveFu = useCallback(
|
|
|
|
+ (ev: any, flag?: boolean) => {
|
|
|
|
+ if (xianRef.current) {
|
|
|
|
+ if (flag && !isFlag) {
|
|
|
|
+ const nowMove = xianRef.current.scrollLeft
|
|
|
|
+ // 滚轮
|
|
|
|
+ let num = 50
|
|
|
|
+ if (ev.deltaY < 0) num = -num
|
|
|
|
+ xianRef.current.scrollLeft = nowMove + num
|
|
|
|
+ } else if (isFlag) {
|
|
|
|
+ const nowMove = xianRef.current.scrollLeft
|
|
|
|
+
|
|
|
|
+ // 鼠标按住移动
|
|
|
|
+ xianRef.current.scrollLeft = nowMove - ev.movementX
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ [isFlag]
|
|
|
|
+ )
|
|
|
|
+
|
|
|
|
+ const videoRef = useRef<HTMLVideoElement>(null)
|
|
|
|
|
|
return (
|
|
return (
|
|
<div className={styles.A6xian}>
|
|
<div className={styles.A6xian}>
|
|
{/* 初始静态图 */}
|
|
{/* 初始静态图 */}
|
|
<BaseImg
|
|
<BaseImg
|
|
|
|
+ hidden={window.location.href.includes('t=xian')}
|
|
isShow={cutVideoShow}
|
|
isShow={cutVideoShow}
|
|
iconSrc={`${baseURL}xianJu/mulu.png`}
|
|
iconSrc={`${baseURL}xianJu/mulu.png`}
|
|
parentFu={() => btnStart()}
|
|
parentFu={() => btnStart()}
|
|
@@ -62,6 +94,9 @@ function A6xian() {
|
|
onClick={() => {
|
|
onClick={() => {
|
|
domDelOwnFu('.pvBox')
|
|
domDelOwnFu('.pvBox')
|
|
setXianShow(true)
|
|
setXianShow(true)
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ if (videoRef.current) videoRef.current.play()
|
|
|
|
+ }, 100)
|
|
}}
|
|
}}
|
|
>
|
|
>
|
|
升仙之途
|
|
升仙之途
|
|
@@ -69,12 +104,54 @@ function A6xian() {
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
) : null}
|
|
|
|
|
|
- <div
|
|
|
|
- className='A6XimgBox'
|
|
|
|
- style={{ opacity: xianShow ? '1' : '0', pointerEvents: xianShow ? 'auto' : 'none' }}
|
|
|
|
- >
|
|
|
|
- 4564654
|
|
|
|
- </div>
|
|
|
|
|
|
+ {/* 点击升仙之途 出来的长 滚动 页面 */}
|
|
|
|
+ {imgNow || window.location.href.includes('t=xian') ? (
|
|
|
|
+ <div
|
|
|
|
+ className='A6XimgBox'
|
|
|
|
+ style={{ opacity: xianShow ? '1' : '0', pointerEvents: xianShow ? 'auto' : 'none' }}
|
|
|
|
+ >
|
|
|
|
+ <div
|
|
|
|
+ className='A6XimgBoxSon'
|
|
|
|
+ style={{ cursor: isFlag ? 'move' : 'default' }}
|
|
|
|
+ ref={xianRef}
|
|
|
|
+ onMouseDown={() => setIsFlag(true)}
|
|
|
|
+ onMouseUp={() => setIsFlag(false)}
|
|
|
|
+ onMouseLeave={() => setIsFlag(false)}
|
|
|
|
+ onMouseMove={e => mousemoveFu(e)}
|
|
|
|
+ onWheel={e => mousemoveFu(e, true)}
|
|
|
|
+ >
|
|
|
|
+ <video
|
|
|
|
+ ref={videoRef}
|
|
|
|
+ playsInline
|
|
|
|
+ muted
|
|
|
|
+ webkit-playsinline='true'
|
|
|
|
+ x5-video-player-type='h5'
|
|
|
|
+ loop={true}
|
|
|
|
+ >
|
|
|
|
+ <source type='video/mp4' src={`${baseURL}xianJu/chang.mp4`} />
|
|
|
|
+ Your browser does not support the video tag.
|
|
|
|
+ </video>
|
|
|
|
+ </div>
|
|
|
|
+ {/* 跳到下一章 */}
|
|
|
|
+ <NextPage clickSon={() => setLastVideo(true)} txt='结束冥想' />
|
|
|
|
+ {/* 右下角按钮 */}
|
|
|
|
+ <FloorBtn />
|
|
|
|
+
|
|
|
|
+ {/* 底部按钮 */}
|
|
|
|
+ <div className='A6XimgBoxBtn'>
|
|
|
|
+ <div onClick={() => history.push('/yun?t=xian')}>四神云气图</div>
|
|
|
|
+ <div onClick={() => history.push('/xian?t=xian')}>卜千秋墓中的升仙图</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ ) : null}
|
|
|
|
+
|
|
|
|
+ {/* 最后的视频 */}
|
|
|
|
+ <EndVideo
|
|
|
|
+ lastVideo={lastVideo}
|
|
|
|
+ src={baseURL + 'xianJu/end.mp4'}
|
|
|
|
+ path='/end'
|
|
|
|
+ delDom='.A22Pano'
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
)
|
|
)
|
|
}
|
|
}
|