|
@@ -35,7 +35,7 @@ function A2visit2() {
|
|
|
const videoRef = useRef<HTMLVideoElement>(null)
|
|
|
|
|
|
// 进入院落 全景图显示
|
|
|
- const [panoShow, setPanoShow] = useState(false)
|
|
|
+ const [panoShow, setPanoShow] = useState(window.location.href.includes('?v=v2') ? true : false)
|
|
|
|
|
|
// 点击进入室内
|
|
|
const [toShi, setToShi] = useState(false)
|
|
@@ -47,80 +47,82 @@ function A2visit2() {
|
|
|
|
|
|
return (
|
|
|
<div className={styles.A2visit2}>
|
|
|
- <div
|
|
|
- className='A22imgBox'
|
|
|
- style={{ opacity: panoShow ? '0' : '1', pointerEvents: panoShow ? 'none' : 'auto' }}
|
|
|
- >
|
|
|
- {/* 底部按钮 */}
|
|
|
+ {window.location.href.includes('?v=v2') ? null : (
|
|
|
<div
|
|
|
- className='A22btn'
|
|
|
- style={{
|
|
|
- opacity: loding < 100 ? '0' : '1',
|
|
|
- pointerEvents: loding < 100 ? 'none' : 'auto'
|
|
|
- }}
|
|
|
+ className='A22imgBox'
|
|
|
+ style={{ opacity: panoShow ? '0' : '1', pointerEvents: panoShow ? 'none' : 'auto' }}
|
|
|
>
|
|
|
- {myData.visit2.btnArr.map((item, index) => (
|
|
|
- <div
|
|
|
- onClick={() => {
|
|
|
- setBtnAc(item)
|
|
|
- setVideoPlay(true)
|
|
|
+ {/* 底部按钮 */}
|
|
|
+ <div
|
|
|
+ className='A22btn'
|
|
|
+ style={{
|
|
|
+ opacity: loding < 100 ? '0' : '1',
|
|
|
+ pointerEvents: loding < 100 ? 'none' : 'auto'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {myData.visit2.btnArr.map((item, index) => (
|
|
|
+ <div
|
|
|
+ onClick={() => {
|
|
|
+ setBtnAc(item)
|
|
|
+ setVideoPlay(true)
|
|
|
+ setTimeout(() => {
|
|
|
+ if (videoRef.current) videoRef.current.play()
|
|
|
+ }, 100)
|
|
|
+ }}
|
|
|
+ key={index}
|
|
|
+ className='A22btnRow'
|
|
|
+ style={{
|
|
|
+ backgroundImage: `url(${baseURL}plow/left${btnAc === item ? 'Ac' : ''}.png)`,
|
|
|
+ color: btnAc === item ? '#BD7656' : '#DACB8B'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {item}
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {loding >= 100 ? (
|
|
|
+ // 进入院落
|
|
|
+ <NextPage
|
|
|
+ clickSon={() => {
|
|
|
+ setPanoShow(true)
|
|
|
setTimeout(() => {
|
|
|
- if (videoRef.current) videoRef.current.play()
|
|
|
- }, 100)
|
|
|
- }}
|
|
|
- key={index}
|
|
|
- className='A22btnRow'
|
|
|
- style={{
|
|
|
- backgroundImage: `url(${baseURL}plow/left${btnAc === item ? 'Ac' : ''}.png)`,
|
|
|
- color: btnAc === item ? '#BD7656' : '#DACB8B'
|
|
|
+ domDelOwnFu('.A22imgBox')
|
|
|
+ }, 500)
|
|
|
}}
|
|
|
- >
|
|
|
- {item}
|
|
|
- </div>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
+ txt='进入院落'
|
|
|
+ />
|
|
|
+ ) : null}
|
|
|
|
|
|
- {loding >= 100 ? (
|
|
|
- // 进入院落
|
|
|
- <NextPage
|
|
|
- clickSon={() => {
|
|
|
- setPanoShow(true)
|
|
|
- setTimeout(() => {
|
|
|
- domDelOwnFu('.A22imgBox')
|
|
|
- }, 500)
|
|
|
- }}
|
|
|
- txt='进入院落'
|
|
|
- />
|
|
|
- ) : null}
|
|
|
+ {/* 3个视频 */}
|
|
|
+ <div className='A22videoBox' style={{ zIndex: videoPlay ? '2' : '0' }}>
|
|
|
+ {myData.visit2.btnArr.map((item, index) => (
|
|
|
+ <div key={index} className='A22video' style={{ opacity: btnAc === item ? 1 : 0 }}>
|
|
|
+ <video
|
|
|
+ ref={btnAc === item ? videoRef : null}
|
|
|
+ playsInline
|
|
|
+ muted
|
|
|
+ webkit-playsinline='true'
|
|
|
+ x5-video-player-type='h5'
|
|
|
+ onEnded={() => setVideoPlay(false)}
|
|
|
+ >
|
|
|
+ <source type='video/mp4' src={`${baseURL}visit2/${item}.mp4`} />
|
|
|
+ Your browser does not support the video tag.
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
|
|
|
- {/* 3个视频 */}
|
|
|
- <div className='A22videoBox' style={{ zIndex: videoPlay ? '2' : '0' }}>
|
|
|
- {myData.visit2.btnArr.map((item, index) => (
|
|
|
- <div key={index} className='A22video' style={{ opacity: btnAc === item ? 1 : 0 }}>
|
|
|
- <video
|
|
|
- ref={btnAc === item ? videoRef : null}
|
|
|
- playsInline
|
|
|
- muted
|
|
|
- webkit-playsinline='true'
|
|
|
- x5-video-player-type='h5'
|
|
|
- onEnded={() => setVideoPlay(false)}
|
|
|
- >
|
|
|
- <source type='video/mp4' src={`${baseURL}visit2/${item}.mp4`} />
|
|
|
- Your browser does not support the video tag.
|
|
|
- </video>
|
|
|
+ {/* 加载进度条 */}
|
|
|
+ {loding >= 100 ? null : (
|
|
|
+ <div className='A22xian'>
|
|
|
+ <div>
|
|
|
+ <div style={{ width: loding + '%' }}></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- ))}
|
|
|
+ )}
|
|
|
</div>
|
|
|
-
|
|
|
- {/* 加载进度条 */}
|
|
|
- {loding >= 100 ? null : (
|
|
|
- <div className='A22xian'>
|
|
|
- <div>
|
|
|
- <div style={{ width: loding + '%' }}></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
+ )}
|
|
|
|
|
|
{/* 右下角按钮 */}
|
|
|
<FloorBtn
|
|
@@ -133,11 +135,13 @@ function A2visit2() {
|
|
|
}
|
|
|
/>
|
|
|
|
|
|
- <CatVideo
|
|
|
- isShow={panoShow}
|
|
|
- src={baseURL + myData.visit2.进入院落}
|
|
|
- parentFu={() => domDelOwnFu('#CatVideo')}
|
|
|
- />
|
|
|
+ {window.location.href.includes('?v=v2') ? null : (
|
|
|
+ <CatVideo
|
|
|
+ isShow={panoShow}
|
|
|
+ src={baseURL + myData.visit2.进入院落}
|
|
|
+ parentFu={() => domDelOwnFu('#CatVideo')}
|
|
|
+ />
|
|
|
+ )}
|
|
|
|
|
|
{/* 全景图页面 */}
|
|
|
{window.location.href.includes('r=ren') ? null : (
|