|
@@ -1,14 +1,37 @@
|
|
-import React, { useCallback } from 'react'
|
|
|
|
|
|
+import React, { useCallback, useState } from 'react'
|
|
import styles from './index.module.scss'
|
|
import styles from './index.module.scss'
|
|
import A21vrOff from './components/A21vrOff'
|
|
import A21vrOff from './components/A21vrOff'
|
|
import A22hotListWrap from './components/A22hotListWrap'
|
|
import A22hotListWrap from './components/A22hotListWrap'
|
|
import A23pinTop from './components/A23pinTop'
|
|
import A23pinTop from './components/A23pinTop'
|
|
import A24drawerList from './components/A24drawerList'
|
|
import A24drawerList from './components/A24drawerList'
|
|
|
|
+import { useSelector } from 'react-redux'
|
|
|
|
+import { RootState } from '@/store'
|
|
|
|
+import classNames from 'classnames'
|
|
|
|
+import A3hotList from '../A3hotList'
|
|
|
|
+
|
|
|
|
+const imgArrTemp = ['like.png', 'likeAc.png']
|
|
|
|
+const imgArr = imgArrTemp.map(item => require(`@/assets/img/${item}`))
|
|
|
|
+
|
|
function A2main() {
|
|
function A2main() {
|
|
|
|
+ // 漫游的状态
|
|
|
|
+ const { state3d } = useSelector((state: RootState) => state.three)
|
|
|
|
+
|
|
|
|
+ // 点赞
|
|
|
|
+ const [like, setLike] = useState(false)
|
|
|
|
+ const [likeNum, setLikeNum] = useState(1)
|
|
|
|
+
|
|
|
|
+ // 点击点赞
|
|
|
|
+ const likeFu = useCallback(() => {
|
|
|
|
+ if (like) return
|
|
|
|
+ setLike(true)
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ setLikeNum(likeNum + 1)
|
|
|
|
+ setLike(false)
|
|
|
|
+ }, 2000)
|
|
|
|
+ }, [like, likeNum])
|
|
|
|
+
|
|
// 点击热点列表
|
|
// 点击热点列表
|
|
- const clickHotIconFu = useCallback(() => {
|
|
|
|
- alert('点击热点列表')
|
|
|
|
- }, [])
|
|
|
|
|
|
+ const [hotListShow, setHotListShow] = useState(false)
|
|
|
|
|
|
return (
|
|
return (
|
|
<div className={styles.A2main} id='gui' style={{ display: 'none' }}>
|
|
<div className={styles.A2main} id='gui' style={{ display: 'none' }}>
|
|
@@ -20,7 +43,12 @@ function A2main() {
|
|
<A23pinTop />
|
|
<A23pinTop />
|
|
|
|
|
|
{/* 主要修改的图标部分 */}
|
|
{/* 主要修改的图标部分 */}
|
|
- <div className='pinBottom-container'>
|
|
|
|
|
|
+ <div
|
|
|
|
+ className={classNames(
|
|
|
|
+ 'pinBottom-container',
|
|
|
|
+ state3d === 'panorama' ? '' : 'pinBottom-containerNo'
|
|
|
|
+ )}
|
|
|
|
+ >
|
|
<div className='pinBottom center'>
|
|
<div className='pinBottom center'>
|
|
<div id='view-controllers'></div>
|
|
<div id='view-controllers'></div>
|
|
</div>
|
|
</div>
|
|
@@ -47,21 +75,18 @@ function A2main() {
|
|
<div id='play' className='ui-icon' rel='tooltip' data-original-title='播放'>
|
|
<div id='play' className='ui-icon' rel='tooltip' data-original-title='播放'>
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
<a>
|
|
<a>
|
|
- <img src='images/play.png' width='24' height='24' alt='' />
|
|
|
|
|
|
+ <img src='images/play.png' alt='' />
|
|
</a>
|
|
</a>
|
|
|
|
+ {/* 鼠标移入 */}
|
|
|
|
+ <div className='hoveImg'>自动导览</div>
|
|
</div>
|
|
</div>
|
|
<div id='pause' className='ui-icon' style={{ display: 'none' }}>
|
|
<div id='pause' className='ui-icon' style={{ display: 'none' }}>
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
<a>
|
|
<a>
|
|
- <img
|
|
|
|
- rel='tooltip'
|
|
|
|
- title='暂停'
|
|
|
|
- src='images/pause.png'
|
|
|
|
- width='24'
|
|
|
|
- height='24'
|
|
|
|
- alt=''
|
|
|
|
- />
|
|
|
|
|
|
+ <img rel='tooltip' src='images/pause.png' alt='' />
|
|
</a>
|
|
</a>
|
|
|
|
+ {/* 鼠标移入 */}
|
|
|
|
+ <div className='hoveImg'>暂停导览</div>
|
|
</div>
|
|
</div>
|
|
<div id='next' className='next desktop-only ui-icon wide' style={{ display: 'none' }}>
|
|
<div id='next' className='next desktop-only ui-icon wide' style={{ display: 'none' }}>
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
@@ -77,15 +102,16 @@ function A2main() {
|
|
|
|
|
|
<div id='gui-modes-map' className='ui-icon double active'>
|
|
<div id='gui-modes-map' className='ui-icon double active'>
|
|
<div data-original-title='导览' id='pullTab' rel='tooltip' title=''>
|
|
<div data-original-title='导览' id='pullTab' rel='tooltip' title=''>
|
|
- <img className='icon icon-inside' src='images/auto.png' title='导览' alt='' />
|
|
|
|
|
|
+ <img className='icon icon-inside' src='images/auto.png' alt='' />
|
|
|
|
+ {/* 鼠标移入 */}
|
|
|
|
+ <div className='hoveImg'>导览列表</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- {/* 原始热点列表 */}
|
|
|
|
|
|
+ {/* 原始热点列表---隐藏 */}
|
|
<div
|
|
<div
|
|
data-original-title='热点列表'
|
|
data-original-title='热点列表'
|
|
id='hotList'
|
|
id='hotList'
|
|
rel='tooltip'
|
|
rel='tooltip'
|
|
- title=''
|
|
|
|
style={{ display: 'none' }}
|
|
style={{ display: 'none' }}
|
|
>
|
|
>
|
|
<img
|
|
<img
|
|
@@ -96,36 +122,32 @@ function A2main() {
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- {/* 新的热点列表 */}
|
|
|
|
- <div className='A2hotIcon' rel='tooltip' onClick={clickHotIconFu}>
|
|
|
|
- <img src='images/hotlist.png' title='热点列表' alt='' />
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div
|
|
|
|
- data-original-title='全景漫游'
|
|
|
|
- id='gui-modes-inside'
|
|
|
|
- rel='tooltip'
|
|
|
|
- title=''
|
|
|
|
- className=''
|
|
|
|
- >
|
|
|
|
- <img className='icon icon-inside' src='images/inside.png' title='全景漫游' alt='' />
|
|
|
|
|
|
+ <div data-original-title='全景漫游' id='gui-modes-inside' rel='tooltip'>
|
|
|
|
+ <img
|
|
|
|
+ className='icon icon-inside'
|
|
|
|
+ src={`images/inside${state3d === 'panorama' ? '_active' : ''}.png`}
|
|
|
|
+ alt=''
|
|
|
|
+ />
|
|
|
|
+ {/* 鼠标移入 */}
|
|
|
|
+ <div className='hoveImg'>全景漫游</div>
|
|
</div>
|
|
</div>
|
|
- <div
|
|
|
|
- data-original-title='迷你模型'
|
|
|
|
- id='gui-modes-dollhouse'
|
|
|
|
- rel='tooltip'
|
|
|
|
- title=''
|
|
|
|
- className=''
|
|
|
|
- >
|
|
|
|
|
|
+ <div data-original-title='迷你模型' id='gui-modes-dollhouse' rel='tooltip'>
|
|
<img
|
|
<img
|
|
className='icon icon-inside'
|
|
className='icon icon-inside'
|
|
- src='images/dollhouse.png'
|
|
|
|
- title='迷你模型'
|
|
|
|
|
|
+ src={`images/dollhouse${state3d === 'dollhouse' ? '_active' : ''}.png`}
|
|
alt=''
|
|
alt=''
|
|
/>
|
|
/>
|
|
|
|
+ {/* 鼠标移入 */}
|
|
|
|
+ <div className='hoveImg'>三维视觉</div>
|
|
</div>
|
|
</div>
|
|
- <div data-original-title='俯视图' id='gui-modes-floorplan' rel='tooltip' title=''>
|
|
|
|
- <img className='icon icon-inside' src='images/floor.png' title='俯视图' alt='' />
|
|
|
|
|
|
+ <div data-original-title='俯视图' id='gui-modes-floorplan' rel='tooltip'>
|
|
|
|
+ <img
|
|
|
|
+ className='icon icon-inside'
|
|
|
|
+ src={`images/floor${state3d === 'floorplan' ? '_active' : ''}.png`}
|
|
|
|
+ alt=''
|
|
|
|
+ />
|
|
|
|
+ {/* 鼠标移入 */}
|
|
|
|
+ <div className='hoveImg'>平面视觉</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
data-original-title='VR'
|
|
data-original-title='VR'
|
|
@@ -145,6 +167,21 @@ function A2main() {
|
|
>
|
|
>
|
|
<img className='icon icon-inside' src='images/face.jpg' alt='' />
|
|
<img className='icon icon-inside' src='images/face.jpg' alt='' />
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
|
|
+ {/* 新的热点列表 */}
|
|
|
|
+ <div
|
|
|
|
+ className='A2hotIcon'
|
|
|
|
+ rel='tooltip'
|
|
|
|
+ onClick={() => {
|
|
|
|
+ // 停止自动导览
|
|
|
|
+ window.player.director.stopTour()
|
|
|
|
+ setHotListShow(true)
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <img src='images/hotlist.png' alt='' />
|
|
|
|
+ {/* 鼠标移入 */}
|
|
|
|
+ <div className='hoveImg'>热点列表</div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -160,9 +197,21 @@ function A2main() {
|
|
<div id='volume' className='ui-icon wide'>
|
|
<div id='volume' className='ui-icon wide'>
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
<a>
|
|
<a>
|
|
- <img src='images/Volume btn_on.png' width='24' height='24' alt='' />
|
|
|
|
|
|
+ <img src='images/Volume btn_on.png' alt='' />
|
|
</a>
|
|
</a>
|
|
|
|
+ {/* 鼠标移入 */}
|
|
|
|
+ <div className='hoveImg'>音乐开关</div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ {/* 点赞 */}
|
|
|
|
+ <div className='likeBox' onClick={likeFu}>
|
|
|
|
+ <img src={like ? imgArr[1] : imgArr[0]} alt='' />
|
|
|
|
+ {/* 鼠标移入 */}
|
|
|
|
+ <div className='hoveImg'>点赞</div>
|
|
|
|
+ <div className='likeNum'>{likeNum}</div>
|
|
|
|
+ <div className={classNames('likeMove', like ? 'likeMoveAc' : '')}>+1</div>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
<div id='vr' className='ui-icon wide hidden' style={{ display: 'none' }}>
|
|
<div id='vr' className='ui-icon wide hidden' style={{ display: 'none' }}>
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
<a>
|
|
<a>
|
|
@@ -175,31 +224,29 @@ function A2main() {
|
|
<i rel='tooltip' title='{[{ SOCIAL_SHARING }]}' className='icon icon-share'></i>
|
|
<i rel='tooltip' title='{[{ SOCIAL_SHARING }]}' className='icon icon-share'></i>
|
|
</a>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
- <div
|
|
|
|
- id='gui-fullscreen'
|
|
|
|
- className='ui-icon wide'
|
|
|
|
- data-placement='top'
|
|
|
|
- rel='tooltip'
|
|
|
|
- title='{[{ VIEW_FULLSCREEN }]}'
|
|
|
|
- >
|
|
|
|
|
|
+ <div id='gui-fullscreen' className='ui-icon wide' data-placement='top' rel='tooltip'>
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
<a>
|
|
<a>
|
|
- <i className='icon icon-fullscreen'></i>
|
|
|
|
|
|
+ <img src='images/full.png' alt='' />
|
|
</a>
|
|
</a>
|
|
|
|
+ {/* 鼠标移入 */}
|
|
|
|
+ <div className='hoveImg'>全屏</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
id='gui-fullscreen-exit'
|
|
id='gui-fullscreen-exit'
|
|
className='ui-icon wide'
|
|
className='ui-icon wide'
|
|
data-placement='top'
|
|
data-placement='top'
|
|
rel='tooltip'
|
|
rel='tooltip'
|
|
- title='{[{ EXIT_FULLSCREEN }]}'
|
|
|
|
style={{ display: 'none' }}
|
|
style={{ display: 'none' }}
|
|
>
|
|
>
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
<a>
|
|
<a>
|
|
- <i className='icon icon-fullscreen-exit'></i>
|
|
|
|
|
|
+ <img src='images/fullx.png' alt='' />
|
|
</a>
|
|
</a>
|
|
|
|
+ {/* 鼠标移入 */}
|
|
|
|
+ <div className='hoveImg'>关闭全屏</div>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
<div className='pull-right terms terms2'>
|
|
<div className='pull-right terms terms2'>
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
<a>{'{[{ TERMS }]}'}</a>
|
|
<a>{'{[{ TERMS }]}'}</a>
|
|
@@ -210,6 +257,9 @@ function A2main() {
|
|
|
|
|
|
{/* 底部导览列表 */}
|
|
{/* 底部导览列表 */}
|
|
<A24drawerList />
|
|
<A24drawerList />
|
|
|
|
+
|
|
|
|
+ {/* 热点列表 */}
|
|
|
|
+ <A3hotList show={hotListShow} closeFu={() => setHotListShow(false)} />
|
|
</div>
|
|
</div>
|
|
)
|
|
)
|
|
}
|
|
}
|