|
|
@@ -3,6 +3,7 @@ import styles from './index.module.scss'
|
|
|
import MenuSider from '@/components/MenuSider'
|
|
|
import { callIframeFu } from '@/utils/history'
|
|
|
import PanoHot from './PanoHot'
|
|
|
+import { baseOssUrl } from '@/utils/http'
|
|
|
function A1home() {
|
|
|
const [isOpenPano, setIsOpenPano] = useState(false)
|
|
|
const [isShowDetail, setIsShowDetail] = useState(false)
|
|
|
@@ -10,7 +11,7 @@ function A1home() {
|
|
|
// 是否进入二级页面
|
|
|
const [isHotPano, setIsHotPano] = useState(false)
|
|
|
const [activeIndex, setActiveIndex] = useState(-1)
|
|
|
-
|
|
|
+
|
|
|
const scrollRef = useRef<HTMLDivElement>(null)
|
|
|
const sceneList = myDataTemp.sceneList
|
|
|
const totalScenes = sceneList.length
|
|
|
@@ -19,7 +20,7 @@ function A1home() {
|
|
|
window.setIsHotPano = (isHotPano: boolean) => {
|
|
|
setIsHotPano(isHotPano)
|
|
|
}
|
|
|
- window.setActiveHotId = (id: string) => {
|
|
|
+ window.setActiveHotId = (id: string) => {
|
|
|
console.log('setActiveHotId222', id)
|
|
|
const index = myDataTemp.panoHotList.findIndex((item: any) => item.id === id)
|
|
|
if (index !== -1) {
|
|
|
@@ -55,7 +56,7 @@ function A1home() {
|
|
|
const scrollToIndex = (index: number) => {
|
|
|
const el = scrollRef.current
|
|
|
if (!el) return
|
|
|
- const firstItem = (el.firstElementChild?.firstElementChild) as HTMLElement
|
|
|
+ const firstItem = el.firstElementChild?.firstElementChild as HTMLElement
|
|
|
const itemWidth = firstItem?.offsetWidth ?? 200
|
|
|
const scrollLeft = index * itemWidth - el.clientWidth / 2 + itemWidth / 2
|
|
|
el.scrollTo({ left: Math.max(0, scrollLeft), behavior: 'smooth' })
|
|
|
@@ -73,8 +74,14 @@ function A1home() {
|
|
|
{/* 视频跳过后是全景 */}
|
|
|
{isOpenPano ? (
|
|
|
<>
|
|
|
- <iframe id='panoIframe' src='https://houseoss.4dkankan.com/project/gmlx/Pano/index.html' title='pono'></iframe>
|
|
|
- {activeIndex !== -1 && <PanoHot activeIndex={activeIndex} setActiveIndex={setActiveIndex}/>}
|
|
|
+ <iframe
|
|
|
+ id='panoIframe'
|
|
|
+ src='https://houseoss.4dkankan.com/project/gmlx/Pano/index.html'
|
|
|
+ title='pono'
|
|
|
+ ></iframe>
|
|
|
+ {activeIndex !== -1 && (
|
|
|
+ <PanoHot activeIndex={activeIndex} setActiveIndex={setActiveIndex} />
|
|
|
+ )}
|
|
|
{/* 详情按钮-只在二级页面显示 */}
|
|
|
{isHotPano && (
|
|
|
<div className={styles.skipBtn} onClick={() => setIsShowDetail(!isShowDetail)}>
|
|
|
@@ -100,7 +107,7 @@ function A1home() {
|
|
|
className={`${styles.detailItem} ${currentSceneIndex === index ? styles.active : ''}`}
|
|
|
onClick={() => handleItemClick(item, index)}
|
|
|
>
|
|
|
- <img src={item.thumbUrl} alt='' />
|
|
|
+ <img src={baseOssUrl + item.thumbUrl} alt='' />
|
|
|
<div className={styles.detailItemName}>{item.name}</div>
|
|
|
</div>
|
|
|
))}
|
|
|
@@ -117,7 +124,13 @@ function A1home() {
|
|
|
) : (
|
|
|
<>
|
|
|
{/* 背景视频 */}
|
|
|
- <video src={'myData/media/bgVideo.mp4'} autoPlay loop muted className={styles.bgVideo} />
|
|
|
+ <video
|
|
|
+ src={`${baseOssUrl}myData/media/bgVideo.mp4`}
|
|
|
+ autoPlay
|
|
|
+ loop
|
|
|
+ muted
|
|
|
+ className={styles.bgVideo}
|
|
|
+ />
|
|
|
|
|
|
{/* 跳过按钮 */}
|
|
|
<div className={styles.skipBtn} onClick={() => setIsOpenPano(true)}>
|