替换一波目录

Code/public/myData/myData.js

@@ -10,25 +10,31 @@ const baseUrlAtl = 'xxxxxxxxxxxxxxxxx/staticData/'
 
 // 一些动态配置的数据
 const myDataTemp = {
-  // 每次刷新页面都从首页开始/每次进页面都有加载中动画
+  // 每次进页面都有加载中动画
   isLdong: true,
 
-  // 首页(静态资源目录位置：staticData/HH/home)
+  // 首页(静态资源目录位置：staticData/home)
   home: {
     // 背景图路径+名字
     bgImg: 'home/bg.jpg',
     // 左下角动画视频路径+名字
     leftVideo: 'home/left.mp4',
-    // 主动画
-    videos: ['home/1.mp4'],
     // 最后的过场动画路径+名字
     lastVideo: 'home/end.mp4'
   },
 
-  // 车骑拜谒(静态资源目录位置：staticData/HH/visit)
+  // 首页后面的一个过度页面
+  base: {
+    // 背景图路径+名字
+    bgImg: 'base/bg.jpg',
+    // 最后的过场动画路径+名字
+    lastVideo: 'base/end.mp4'
+  },
+
+  // 车骑拜谒(静态资源目录位置：staticData/visit)
   visit: {
-    // 开场动画视频名字
-    videoSta: 'visit/base.mp4',
+    // 背景图路径+名字
+    bgImg: 'visit/bg.jpg',
     // 过度视频
     videos: ['visit/1.mp4'],
     // 最后的过场动画路径+名字
@@ -345,10 +351,10 @@ const myDataTemp = {
     ]
   },
 
-  // 主客宴请(静态资源目录位置：staticData/HH/banquet)
+  // 主客宴请(静态资源目录位置：staticData/banquet)
   banquet: {
-    // 开场动画视频名字
-    videoSta: 'banquet/base.mp4',
+    // 背景图路径+名字
+    bgImg: 'banquet/bg.jpg',
     // 过度视频
     videos: ['banquet/1.mp4'],
     // 最后的过场动画路径+名字
@@ -526,7 +532,7 @@ const myDataTemp = {
       }
     ]
   },
-  // 乐舞百戏(静态资源目录位置：staticData/HH/dance)
+  // 乐舞百戏(静态资源目录位置：staticData/dance)
   dance: {
     // 热点===>第一个为 四神云气图
     hot: [
@@ -625,7 +631,7 @@ const myDataTemp = {
     // 最后的过场动画路径+名字
     lastVideo: 'dance/end.mp4'
   },
-  // 四神云气图(静态资源目录位置：staticData/HH/yun)
+  // 四神云气图(静态资源目录位置：staticData/yun)
   yun: {
     // 背景图
     bjImg: 'yun/bg.png',
@@ -760,7 +766,7 @@ const myDataTemp = {
       }
     ]
   },
-  // 仙居(静态资源目录位置：staticData/HH/xian)
+  // 仙居(静态资源目录位置：staticData/xian)
   xian: [
     // 这里id不要自己修改！
     {
@@ -790,7 +796,7 @@ const myDataTemp = {
     //   <p>资料待完善</p>`
     // }
   ],
-  // 后厨备宴(静态资源目录位置：staticData/HH/chef)
+  // 后厨备宴(静态资源目录位置：staticData/chef)
   chef: {
     // 最后的过场动画路径+名字
     lastVideo: 'chef/end.mp4',
@@ -815,11 +821,11 @@ const myDataTemp = {
         `,
         // 热点定位百分比
         loc: {
-          top: '71%',
-          left: '9%'
+          top: '64%',
+          left: '77.5%'
         },
         // 点击热点之后放大的比例和位置
-        change: 'scale(3) translate(278px, -107px)'
+        change: 'scale(3) translate(-216px, -85px)'
       },
       {
         // 热点名字
@@ -837,11 +843,11 @@ const myDataTemp = {
         `,
         // 热点定位百分比
         loc: {
-          top: '68%',
-          left: '44%'
+          top: '67%',
+          left: '36.5%'
         },
         // 点击热点之后放大的比例和位置
-        change: 'scale(3) translate(44px, -90px)'
+        change: 'scale(3) translate(87px, -95px)'
       },
       {
         // 热点名字
@@ -859,11 +865,11 @@ const myDataTemp = {
         `,
         // 热点定位百分比
         loc: {
-          top: '65%',
-          left: '58%'
+          top: '64%',
+          left: '22.8%'
         },
         // 点击热点之后放大的比例和位置
-        change: 'scale(3) translate(-90px, -70px)'
+        change: 'scale(3) translate(215px, -108px)'
       },
       {
         // 热点名字
@@ -881,11 +887,33 @@ const myDataTemp = {
         `,
         // 热点定位百分比
         loc: {
-          top: '63%',
-          left: '78%'
+          top: '71%',
+          left: '55%'
+        },
+        // 点击热点之后放大的比例和位置
+        change: 'scale(3) translate(-75px, -126px)'
+      },
+      {
+        // 热点名字
+        name: '劈柴',
+        // 热点图片路径+名字
+        imgSrc: 'chef/hot5.png',
+        // 点击之后的播放动画路径+名字
+        videoSrc: 'chef/5.mp4',
+        // 里面展示的图片路径+名字
+        showImg: 'chef/show5.png',
+        // 里面展示的文本
+        txt: `
+        <p>劈柴劈柴劈柴劈柴劈柴劈柴，</p>
+        <p>劈柴劈柴劈柴劈柴劈柴。</p>
+        `,
+        // 热点定位百分比
+        loc: {
+          top: '64%',
+          left: '65.5%'
         },
         // 点击热点之后放大的比例和位置
-        change: 'scale(3) translate(-248px, -70px)'
+        change: 'scale(3) translate(-143px, -106px)'
       }
     ]
   }

Code/src/App.tsx

@@ -7,8 +7,9 @@ import SpinLoding from './components/SpinLoding'
 
 import NotFound from '@/components/NotFound'
 import store from './store'
-import { isLoc, myData } from './utils/http'
+// import { isLoc, myData } from './utils/http'
 const A1home = React.lazy(() => import('./pages/A1home'))
+const A1_1base = React.lazy(() => import('./pages/A1_1base'))
 const A2visit = React.lazy(() => import('./pages/A2visit'))
 const A3banquet = React.lazy(() => import('./pages/A3banquet'))
 const A4dance = React.lazy(() => import('./pages/A4dance'))
@@ -54,11 +55,11 @@ const planSize = {
 export default function App() {
   useEffect(() => {
     // 打包环境 刷新页面从 首页 开始
-    if (!isLoc && myData.isLdong) {
-      if (window.location.hash !== '#/') {
-        window.location.href = window.location.origin
-      }
-    }
+    // if (!isLoc && myData.isLdong) {
+    //   if (window.location.hash !== '#/') {
+    //     window.location.href = window.location.origin
+    //   }
+    // }
   }, [])
 
   // 根元素
@@ -124,6 +125,7 @@ export default function App() {
         <React.Suspense fallback={<SpinLoding />}>
           <Switch>
             <Route path='/' component={A1home} exact />
+            <Route path='/base' component={A1_1base} exact />
             <Route path='/visit' component={A2visit} exact />
             <Route path='/banquet' component={A3banquet} exact />
             <Route path='/dance' component={A4dance} exact />

Code/src/assets/styles/base.css

@@ -22,6 +22,7 @@ body {
   height: 100%;
   color: black;
   overflow: hidden;
+  background-color: #cbc5b7;
 }
 #root {
   overflow: hidden;

Code/src/assets/styles/base.less

@@ -26,6 +26,7 @@ body {
   height: 100%;
   color: black;
   overflow: hidden;
+  background-color: #cbc5b7;
   // background-color: rgba(0, 0, 0, 0.8);
 }
 

Code/src/components/BaseImg/index.module.scss

@@ -6,6 +6,7 @@
   opacity: 1;
   transition: opacity 0.5s;
   background-color: rgba(0, 0, 0, 0.4);
+  background-size: 100% 100%;
   :global {
     .BIcon {
       position: absolute;

Code/src/components/BaseImg/index.tsx

@@ -1,18 +1,18 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import classNames from 'classnames'
-import useDataUrl from '../ownUse/useDataUrl'
-import { myData } from '@/utils/http'
+import { baseURL, myData } from '@/utils/http'
+import { domDelOwnFu } from '@/utils/utilsSome'
 
 type Props = {
   isShow: boolean //是否显示
   iconSrc: string //icon 图标
   parentFu: () => void //点击继续的方法（调用父亲）
+  bgImg?: string
+  num?: number
 }
 
-function BaseImg({ isShow, iconSrc, parentFu }: Props) {
-  const { dataUrlSame } = useDataUrl()
-
+function BaseImg({ isShow, iconSrc, parentFu, bgImg, num = 30 }: Props) {
   const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
 
   const timeRR = useRef(-1)
@@ -24,26 +24,34 @@ function BaseImg({ isShow, iconSrc, parentFu }: Props) {
         clearInterval(timeRR.current)
         return
       }
-      setLoding(loding + 1)
-    }, 40)
-  }, [loding])
+      setLoding(loding + 2)
+    }, num)
+  }, [loding, num])
 
   const btnStartFu = useCallback(() => {
     if (loding >= 100) {
       parentFu()
+      // 0.5s之后删除自己
+      setTimeout(() => {
+        domDelOwnFu('#BaseImg')
+      }, 500)
     }
   }, [loding, parentFu])
 
   return (
-    <div className={classNames(styles.BaseImg, isShow ? styles.BaseImgHide : '')}>
+    <div
+      id='BaseImg'
+      className={classNames(styles.BaseImg, isShow ? styles.BaseImgHide : '')}
+      style={{ backgroundImage: `url(${bgImg ? bgImg : ''})` }}
+    >
       <img className='BIlogo' src={iconSrc} alt='' />
       <div className='BIbaseBtn' onClick={btnStartFu}>
         {/* anpg动图 */}
         <div className='BIcon'>
-          <img src={`${dataUrlSame}visit/arrow.png`} alt='' />
+          <img src={`${baseURL}visit/arrow.png`} alt='' />
         </div>
 
-        <img src={`${dataUrlSame}visit/btn.png`} alt='' />
+        <img src={`${baseURL}visit/btn.png`} alt='' />
 
         <div className='BIBtxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
         {loding >= 100 ? null : (

Code/src/components/BaseVideo/index.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import classNames from 'classnames'
-import { myData } from '@/utils/http'
-import useDataUrl from '../ownUse/useDataUrl'
+import { baseURL, myData } from '@/utils/http'
 import { domDelOwnFu } from '@/utils/utilsSome'
 
 type Props = {
@@ -13,8 +12,6 @@ type Props = {
 }
 
 function BaseVideo({ isShow, imgSrc, videoSrc, parentFu }: Props) {
-  const { dataUrlSame } = useDataUrl()
-
   const baseVideoRef = useRef<HTMLVideoElement>(null)
 
   useEffect(() => {
@@ -59,10 +56,10 @@ function BaseVideo({ isShow, imgSrc, videoSrc, parentFu }: Props) {
       <div className='BVbaseBtn' onClick={btnStartFu}>
         {/* anpg动图 */}
         <div className='BVBIcon'>
-          <img src={`${dataUrlSame}visit/arrow.png`} alt='' />
+          <img src={`${baseURL}visit/arrow.png`} alt='' />
         </div>
 
-        <img src={`${dataUrlSame}visit/btn.png`} alt='' />
+        <img src={`${baseURL}visit/btn.png`} alt='' />
 
         <div className='BVBtxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
         {loding >= 100 ? null : (

Code/src/components/CatVideo/index.module.scss

@@ -4,7 +4,6 @@
   position: absolute;
   z-index: 10;
   opacity: 1;
-  transition: opacity 0.5s;
   :global {
     // 跳过按钮
     .CatTiao {

Code/src/components/CatVideo/index.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import styles from './index.module.scss'
 import classNames from 'classnames'
-import useDataUrl from '../ownUse/useDataUrl'
 import { domDelOwnFu } from '@/utils/utilsSome'
+import { baseURL } from '@/utils/http'
 
 type Props = {
   isShow: boolean
@@ -12,7 +12,15 @@ type Props = {
 }
 
 function CatVideo({ isShow, src, parentFu, noBtn }: Props) {
-  const { dataUrlSame } = useDataUrl()
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  useEffect(() => {
+    if (isShow) {
+      setTimeout(() => {
+        if (videoRef.current) videoRef.current.play()
+      }, 100)
+    }
+  }, [isShow])
 
   const playEndFu = useCallback(() => {
     parentFu()
@@ -25,14 +33,14 @@ function CatVideo({ isShow, src, parentFu, noBtn }: Props) {
   return (
     <div id='CatVideo' className={classNames(styles.CatVideo, isShow ? '' : styles.CatVideoHide)}>
       <video
+        ref={videoRef}
         playsInline
         muted
         webkit-playsinline='true'
         x5-video-player-type='h5'
-        src={src}
         onEnded={playEndFu}
       >
-        <source type='video/mp4' />
+        <source type='video/mp4' src={src} />
         Your browser does not support the video tag.
       </video>
 
@@ -40,7 +48,7 @@ function CatVideo({ isShow, src, parentFu, noBtn }: Props) {
         hidden={noBtn}
         title='跳过'
         className='CatTiao hoverD'
-        style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}
+        style={{ backgroundImage: `url(${baseURL}home/tiao.png)` }}
         onClick={playEndFu}
       ></div>
     </div>

Code/src/components/EndVideo/index.tsx

@@ -3,7 +3,7 @@ import styles from './index.module.scss'
 import classNames from 'classnames'
 import { domDelOwnFu } from '@/utils/utilsSome'
 import history from '@/utils/history'
-import useDataUrl from '../ownUse/useDataUrl'
+import { baseURL } from '@/utils/http'
 
 type Props = {
   lastVideo: boolean //是否显示
@@ -15,8 +15,6 @@ type Props = {
 
 // 页面结尾的视频
 function EndVideo({ lastVideo, delDom, src, path, noBtn }: Props) {
-  const { dataUrlSame } = useDataUrl()
-
   const videoRefLast = useRef<HTMLVideoElement>(null)
 
   useEffect(() => {
@@ -44,10 +42,9 @@ function EndVideo({ lastVideo, delDom, src, path, noBtn }: Props) {
         muted
         webkit-playsinline='true'
         x5-video-player-type='h5'
-        src={src}
         onEnded={() => history.push(path)}
       >
-        <source type='video/mp4' />
+        <source type='video/mp4' src={src} />
         Your browser does not support the video tag.
       </video>
 
@@ -55,7 +52,7 @@ function EndVideo({ lastVideo, delDom, src, path, noBtn }: Props) {
         hidden={noBtn}
         title='跳过'
         className='endVdieoBtn hoverD'
-        style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}
+        style={{ backgroundImage: `url(${baseURL}home/tiao.png)` }}
         onClick={() => history.push(path)}
       ></div>
     </div>

Code/src/components/FloorBtn/index.module.scss

@@ -0,0 +1,30 @@
+.FloorBtn {
+  position: absolute;
+  right: 25px;
+  bottom: 25px;
+  z-index: 10;
+  display: flex;
+  :global {
+    div {
+      background-size: 100% 100%;
+      transition: all 0.3s;
+      width: 50px;
+      height: 50px;
+      cursor: pointer;
+    }
+
+    .FloorBtn1 {
+      margin-right: 5px;
+      background-image: url('../../assets/img/icon-walk.png');
+      &:hover {
+        background-image: url('../../assets/img/icon-walk1.png');
+      }
+    }
+    .FloorBtn2 {
+      background-image: url('../../assets/img/icon-more.png');
+      &:hover {
+        background-image: url('../../assets/img/icon-more1.png');
+      }
+    }
+  }
+}

Code/src/components/FloorBtn/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import styles from './index.module.scss'
+import history from '@/utils/history'
+
+type Props = {
+  unityId?: '1' | '2'
+}
+
+function FloorBtn({ unityId }: Props) {
+  return (
+    <div className={styles.FloorBtn}>
+      <div
+        className='FloorBtn1'
+        hidden={!unityId}
+        title='漫游模式'
+        onClick={() => history.push(`/unity/${unityId}`)}
+      ></div>
+      {/* 更多 跳新页面 */}
+      <div title='更多' className='FloorBtn2' onClick={() => history.push('/more')}></div>
+    </div>
+  )
+}
+
+const MemoFloorBtn = React.memo(FloorBtn)
+
+export default MemoFloorBtn

Code/src/components/HotIcon/index.module.scss

@@ -0,0 +1,29 @@
+.HotIcon {
+  display: inline-block;
+  height: 30px;
+  width: auto;
+  :global {
+    img {
+      cursor: pointer;
+      position: relative;
+      top: 0;
+      left: 0;
+      transition: all 0.3s;
+    }
+    .HotIconHover {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .HotIconBase {
+      position: absolute;
+      top: 0;
+      left: 0;
+      &:hover {
+        opacity: 0;
+      }
+      &:hover + .HotIconHover {
+        opacity: 1;
+      }
+    }
+  }
+}

Code/src/components/HotIcon/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { baseURL } from '@/utils/http'
+
+type Props = {
+  index: number
+  clickSon: (index: number) => void
+  hoverSrc: string
+  style?: any
+}
+
+function HotIcon({ index, clickSon, hoverSrc, style }: Props) {
+  return (
+    <div
+      id='HotIcon'
+      style={{
+        position: style ? 'absolute' : 'relative',
+        top: style ? style.top : 0,
+        left: style ? style.left : 0
+      }}
+      className={styles.HotIcon}
+      key={index}
+    >
+      <img
+        onClick={() => clickSon(index)}
+        className='HotIconBase'
+        src={`${baseURL}visit/hot/hotBase.png`}
+        alt=''
+      />
+      <img
+        onClick={() => clickSon(index)}
+        className='HotIconHover'
+        src={baseURL + hoverSrc}
+        alt=''
+      />
+    </div>
+  )
+}
+
+const MemoHotIcon = React.memo(HotIcon)
+
+export default MemoHotIcon

Code/src/components/NextPage/index.module.scss

@@ -0,0 +1,35 @@
+.NextPage {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  width: 120px;
+  height: auto;
+  z-index: 10;
+  :global {
+    .NPimg {
+      width: 100%;
+    }
+    .NPdiv {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fffddc;
+      font-size: 16px;
+      transition: all 0.3s;
+      &:hover {
+        color: #ead98f;
+      }
+      & > span {
+        padding-left: 5px;
+        font-size: 14px;
+      }
+    }
+  }
+}

Code/src/components/NextPage/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { ArrowRightOutlined } from '@ant-design/icons'
+import { baseURL } from '@/utils/http'
+
+type Props = {
+  clickSon: () => void
+  txt: string
+}
+
+function NextPage({ clickSon, txt }: Props) {
+  return (
+    <div className={styles.NextPage}>
+      <img className='NPimg' src={`${baseURL}visit/btn.png`} alt='' />
+      <div className='NPdiv' onClick={clickSon}>
+        {txt}
+        <ArrowRightOutlined />
+      </div>
+    </div>
+  )
+}
+
+const MemoNextPage = React.memo(NextPage)
+
+export default MemoNextPage

Code/src/components/VideoModel/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import styles from './index.module.scss'
 import classNames from 'classnames'
-import useDataUrl from '../ownUse/useDataUrl'
+import { baseURL } from '@/utils/http'
 
 type Props = {
   isShow: boolean
@@ -10,8 +10,6 @@ type Props = {
 }
 
 function VideoModel({ isShow, src, closeFu }: Props) {
-  const { dataUrlSame } = useDataUrl()
-
   const videoRef = useRef<HTMLVideoElement>(null)
 
   useEffect(() => {
@@ -32,17 +30,16 @@ function VideoModel({ isShow, src, closeFu }: Props) {
         muted
         webkit-playsinline='true'
         x5-video-player-type='h5'
-        src={src}
         onEnded={closeFu}
       >
-        <source type='video/mp4' />
+        <source type='video/mp4' src={src} />
         Your browser does not support the video tag.
       </video>
 
       <div
         title='返回'
         className='videoMoBtn hoverD'
-        style={{ backgroundImage: `url(${dataUrlSame}visit/back.png)` }}
+        style={{ backgroundImage: `url(${baseURL}visit/back.png)` }}
         onClick={closeFu}
       ></div>
     </div>

Code/src/components/ownUse/UseDataUrl.tsx

@@ -1,32 +1,26 @@
-import { RootState } from '@/store'
-import { baseURLTemp } from '@/utils/http'
-import { useCallback, useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
+// import { RootState } from '@/store'
+// import { baseURLTemp } from '@/utils/http'
+// import { useCallback, useEffect, useState } from 'react'
+// import { useSelector } from 'react-redux'
 
 export default function useDataUrl() {
   // 是否是横屏，默认是false
-  const isHH = useSelector((state: RootState) => state.A0Layout.isHH)
-
-  const [dataUrl, setDataUrl] = useState('')
-
-  const baseUrlChangeFu = useCallback(() => {
-    const temp = isHH ? 'HH/' : 'SS/'
-    setDataUrl(baseURLTemp + temp)
-  }, [isHH])
-
-  useEffect(() => {
-    baseUrlChangeFu()
-  }, [baseUrlChangeFu])
-
-  // 横竖屏用一样的数据路径
-  const [dataUrlSame, setDataUrlSame] = useState('')
-
-  useEffect(() => {
-    setDataUrlSame(baseURLTemp + 'HH/')
-  }, [])
-
-  return {
-    dataUrl,
-    dataUrlSame
-  }
+  // const isHH = useSelector((state: RootState) => state.A0Layout.isHH)
+  // const [dataUrl, setDataUrl] = useState('')
+  // const baseUrlChangeFu = useCallback(() => {
+  //   const temp = isHH ? 'HH/' : 'SS/'
+  //   setDataUrl(baseURLTemp + temp)
+  // }, [isHH])
+  // useEffect(() => {
+  //   baseUrlChangeFu()
+  // }, [baseUrlChangeFu])
+  // // 横竖屏用一样的数据路径
+  // const [dataUrlSame, setDataUrlSame] = useState('')
+  // useEffect(() => {
+  //   setDataUrlSame(baseURLTemp + 'HH/')
+  // }, [])
+  // return {
+  //   dataUrl,
+  //   dataUrlSame
+  // }
 }

Code/src/pages/A1_1base/index.module.scss

@@ -0,0 +1,43 @@
+.A11base {
+  position: relative;
+  :global {
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+    }
+    .A11bg {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      opacity: 1;
+      transition: opacity 0.5s;
+      background-size: 100% 100%;
+      .A11Vlogo {
+        position: absolute;
+        top: 56px;
+        width: 280px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      .A11btn {
+        position: absolute;
+        z-index: 10;
+        bottom: 30px;
+        left: 50%;
+        transform: translateX(-50%);
+        & > div {
+          display: inline-block;
+          cursor: pointer;
+          color: #fffddc;
+          display: flex;
+          flex-direction: column;
+          & > img {
+            width: 60px;
+            height: auto;
+          }
+        }
+      }
+    }
+  }
+}

Code/src/pages/A1_1base/index.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback, useState } from 'react'
+import styles from './index.module.scss'
+import { baseURL, myData } from '@/utils/http'
+import classNames from 'classnames'
+import EndVideo from '@/components/EndVideo'
+import { domDelOwnFu } from '@/utils/utilsSome'
+
+function A11base() {
+  // 最后一个过长动画
+  const [lastVideo, setLastVideo] = useState(false)
+
+  // 点击开始
+  const btnStartFu = useCallback(() => {
+    // 播放长视频
+    setLastVideo(true)
+    // 0.5s之后删除自己
+    setTimeout(() => {
+      domDelOwnFu('.A11bg')
+    }, 500)
+  }, [])
+
+  return (
+    <div className={styles.A11base}>
+      {/* 背景图页面 */}
+      <div
+        className={classNames('A11bg')}
+        style={{ backgroundImage: `url(${baseURL + myData.base.bgImg})` }}
+      >
+        <img className='A11Vlogo' src={`${baseURL}home/logo.png`} alt='' />
+
+        {/* 按钮 */}
+        <div className='A11btn'>
+          <div className='hoverD' onClick={btnStartFu}>
+            <img src={`${baseURL}base/quan.png`} alt='' />
+            点击开始
+          </div>
+        </div>
+      </div>
+
+      {/* 最后一个过长动画 */}
+
+      <EndVideo
+        lastVideo={lastVideo}
+        delDom='.A1videoBox'
+        src={baseURL + myData.base.lastVideo}
+        path='/visit'
+      />
+    </div>
+  )
+}
+
+const MemoA11base = React.memo(A11base)
+
+export default MemoA11base

Code/src/pages/A1home/index.module.scss

@@ -120,86 +120,5 @@
       opacity: 0;
       pointer-events: none;
     }
-
-    .A1videoBox {
-      width: 100%;
-      overflow: hidden;
-      position: relative;
-      z-index: 10;
-      opacity: 1;
-      transition: all 0.5s;
-      & > div {
-        width: 100%;
-        position: relative;
-      }
-    }
-    .A1videoBoxHide {
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    // 操作按钮
-    .A1btnBox {
-      width: 100%;
-      height: 100%;
-      z-index: 18;
-      position: absolute;
-      top: 0;
-      left: 0;
-      & > div {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-        transition: opacity 1s;
-        .A1videoBtnLogo {
-          position: absolute;
-          pointer-events: none;
-          top: 56px;
-          width: 280px;
-          height: auto;
-          left: 50%;
-          transform: translateX(-50%);
-        }
-
-        .A1videoBtnNext {
-          cursor: pointer;
-          position: absolute;
-          z-index: 10;
-          bottom: 20px;
-          left: 50%;
-          transform: translateX(-50%);
-          color: #fffddc;
-          font-size: 16px;
-          text-align: center;
-          width: 100px;
-          transition: all 0.3s;
-          &:hover {
-            color: #ead98f;
-          }
-          & > img {
-            width: 60px;
-            height: auto;
-          }
-        }
-      }
-      .A1videoBtnBoxShow {
-        opacity: 1;
-      }
-
-      .A1videoBtn {
-        cursor: pointer;
-        position: absolute;
-        z-index: 10;
-        bottom: 20px;
-        left: 47%;
-        width: 40px;
-        height: auto;
-        transition: transform 0.3s;
-        &:hover {
-          transform: scale(1.1);
-        }
-      }
-    }
   }
 }

Code/src/pages/A1home/index.tsx

@@ -1,21 +1,12 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import useDataUrl from '@/components/ownUse/useDataUrl'
-// import useMove from '@/components/ownUse/useMove'
-import { myData } from '@/utils/http'
+import { baseURL, myData } from '@/utils/http'
 import classNames from 'classnames'
 import { domDelOwnFu } from '@/utils/utilsSome'
 import EndVideo from '@/components/EndVideo'
 import VideoModel from '@/components/VideoModel'
 
 function A1home() {
-  const { dataUrlSame } = useDataUrl()
-
-  // const { touchstart, touchmove, touchend } = useMove()
-
-  // 动画视频的ref
-  const videoRef = useRef<HTMLVideoElement>(null)
-
   const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
 
   const timeRR = useRef(-1)
@@ -40,48 +31,14 @@ function A1home() {
 
   // 点击开始
   const btnStartFu = useCallback(() => {
-    setLoding(110)
-    // 自动播放视频
-    setTimeout(() => {
-      if (videoRef.current) {
-        videoRef.current.play()
-      }
-    }, 100)
-
+    // 播放长视频
+    setLastVideo(true)
     // 0.5s之后删除自己
     setTimeout(() => {
       domDelOwnFu('.A1base')
     }, 500)
   }, [])
 
-  const [ind, setInd] = useState(0)
-
-  // 向上滑动
-  const videoEndFu = useCallback(
-    (num: number) => {
-      // 这个页面只能向上滑
-      if (num === -1) return
-      if (ind === myData.home.videos.length - 1 && num === 1) return
-
-      setInd(ind + num)
-    },
-    [ind]
-  )
-
-  useEffect(() => {
-    if (ind !== 0) {
-      setTimeout(() => {
-        const domAll: any = document.querySelectorAll('.A1videoBoxSon video')
-        if (domAll && domAll.length) {
-          domAll.forEach((v: HTMLVideoElement, i: number) => {
-            if (ind === i) v.play()
-            else v.pause()
-          })
-        }
-      }, 100)
-    }
-  }, [ind])
-
   // 最后一个过长动画
   const [lastVideo, setLastVideo] = useState(false)
 
@@ -126,12 +83,12 @@ function A1home() {
       {/* 初始加载画面 */}
       <div
         className={classNames('A1base', loding === 110 ? 'A1baseHide' : '')}
-        style={{ backgroundImage: `url(${dataUrlSame}${myData.home.bgImg})` }}
+        style={{ backgroundImage: `url(${baseURL}${myData.home.bgImg})` }}
       >
-        <img className='A1Vlogo' src={`${dataUrlSame}home/logo.png`} alt='' />
+        <img className='A1Vlogo' src={`${baseURL}home/logo.png`} alt='' />
         {loding >= 100 ? (
           <div className='A1loding A1lodingBtn' onClick={btnStartFu}>
-            <img src={`${dataUrlSame}visit/btn.png`} alt='' />
+            <img src={`${baseURL}visit/btn.png`} alt='' />
             <div>开始</div>
           </div>
         ) : (
@@ -139,21 +96,21 @@ function A1home() {
         )}
 
         {/* 底部颜色条 */}
-        <img ref={A1BfloorRef} className='A1Bfloor' src={`${dataUrlSame}home/floor.png`} alt='' />
+        <img ref={A1BfloorRef} className='A1Bfloor' src={`${baseURL}home/floor.png`} alt='' />
 
         {/* 底部房子 */}
-        <img className='A1Broom' src={`${dataUrlSame}home/home.png`} alt='' />
+        <img className='A1Broom' src={`${baseURL}home/home.png`} alt='' />
 
         {/* 左右小人 */}
         <img
           className={classNames('A1Bll', moveImgShow ? '' : 'A1BMoveHide')}
-          src={`${dataUrlSame}home/left.png`}
+          src={`${baseURL}home/left.png`}
           alt=''
         />
 
         <img
           className={classNames('A1Brr', moveImgShow ? '' : 'A1BMoveHide')}
-          src={`${dataUrlSame}home/right.png`}
+          src={`${baseURL}home/right.png`}
           alt=''
         />
 
@@ -162,81 +119,24 @@ function A1home() {
           onClick={() => setLeftVideo(true)}
           className={classNames('A1LeftVideoBtn hoverD', loding >= 100 ? 'A1LeftVideoBtnShow' : '')}
         >
-          <img src={`${dataUrlSame}home/icon-play.png`} alt='' />
+          <img src={`${baseURL}home/icon-play.png`} alt='' />
         </div>
 
         {/* 左下角视频 */}
         <VideoModel
           isShow={leftVideo}
-          src={dataUrlSame + myData.home.leftVideo}
+          src={baseURL + myData.home.leftVideo}
           closeFu={() => setLeftVideo(false)}
         />
       </div>
 
-      {/* 5个动画视频 */}
-      <div
-        className={classNames('A1videoBox', lastVideo || loding !== 110 ? 'A1videoBoxHide' : '')}
-        style={{
-          transform: `translateY(-${(100 / myData.home.videos.length) * ind}%)`,
-          height: `${100 * myData.home.videos.length}%`
-        }}
-      >
-        {myData.home.videos.map((url, index) => (
-          <div
-            key={index}
-            style={{ height: 100 / myData.home.videos.length + '%' }}
-            className='A1videoBoxSon'
-          >
-            <video
-              ref={ind === index ? videoRef : null}
-              playsInline
-              muted
-              webkit-playsinline='true'
-              x5-video-player-type='h5'
-              src={dataUrlSame + url}
-            >
-              <source type='video/mp4' />
-              Your browser does not support the video tag.
-            </video>
-          </div>
-        ))}
-      </div>
-
-      {/* 操作按钮 */}
-      {loding !== 110 || lastVideo ? null : (
-        <div
-          className='A1btnBox'
-          // onTouchStart={e => touchstart(e.touches[0].pageY)}
-          // onTouchMove={e => touchmove(e.touches[0].pageY)}
-          // onTouchEnd={() => touchend(val => videoEndFu(val), 'mobile')}
-          // onMouseDown={e => touchstart(e.pageY)}
-          // onMouseMove={e => touchmove(e.pageY)}
-          // onMouseUp={() => touchend(val => videoEndFu(val), 'pc')}
-        >
-          <img
-            hidden={ind === myData.home.videos.length - 1}
-            className='A1videoBtn'
-            onClick={() => videoEndFu(1)}
-            src={`${dataUrlSame}home/next.png`}
-            alt=''
-          />
-          <div className={ind === myData.home.videos.length - 1 ? 'A1videoBtnBoxShow' : ''}>
-            <img className='A1videoBtnLogo' src={`${dataUrlSame}home/logo.png`} alt='' />
-            <div className='A1videoBtnNext' onClick={() => setLastVideo(true)}>
-              <img src={`${dataUrlSame}home/nextLast.png`} alt='' />
-              <p>点击开始</p>
-            </div>
-          </div>
-        </div>
-      )}
-
       {/* 最后一个过长动画 */}
 
       <EndVideo
         lastVideo={lastVideo}
         delDom='.A1videoBox'
-        src={dataUrlSame + myData.home.lastVideo}
-        path='/visit'
+        src={baseURL + myData.home.lastVideo}
+        path='/base'
       />
     </div>
   )

Code/src/pages/A2visit/PanoVideo/Hot1/index.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
-import useDataUrl from '@/components/ownUse/useDataUrl'
 import { VisitHotDataType } from '@/types'
 import classNames from 'classnames'
 import LazyImg from '@/components/LazyImg'
+import { baseURL } from '@/utils/http'
 
 type Props = {
   closeFu: () => void
@@ -19,8 +19,6 @@ function Hot1({ closeFu, data }: Props) {
     }, 300)
   }, [])
 
-  const { dataUrlSame } = useDataUrl()
-
   // 底部选中
   const [flooInd, setFlooInd] = useState(0)
 
@@ -43,7 +41,7 @@ function Hot1({ closeFu, data }: Props) {
     <div
       className={styles.Hot1}
       style={{
-        backgroundImage: `url(${dataUrlSame}visit/hot1bj.png)`,
+        backgroundImage: `url(${baseURL}visit/hot1bj.png)`,
         opacity: opShow ? 1 : 0
       }}
     >
@@ -61,7 +59,7 @@ function Hot1({ closeFu, data }: Props) {
                 pointerEvents: imgAc === 0 ? 'none' : 'auto'
               }}
               className='h1MllIcon'
-              src={`${dataUrlSame}visit/icon-zuo-red.png`}
+              src={`${baseURL}visit/icon-zuo-red.png`}
               alt=''
             />
             <img
@@ -72,7 +70,7 @@ function Hot1({ closeFu, data }: Props) {
                 pointerEvents: imgAc === acData.imgArr.length - 1 ? 'none' : 'auto'
               }}
               className='h1MllIcon h1Mllyou'
-              src={`${dataUrlSame}visit/icon-you-red.png`}
+              src={`${baseURL}visit/icon-you-red.png`}
               alt=''
             />
 
@@ -89,7 +87,7 @@ function Hot1({ closeFu, data }: Props) {
                   key={index}
                   style={{ width: 100 / acData.imgArr.length + '%' }}
                 >
-                  <LazyImg src={dataUrlSame + url} />
+                  <LazyImg src={baseURL + url} />
                 </div>
               ))}
             </div>
@@ -103,11 +101,11 @@ function Hot1({ closeFu, data }: Props) {
           </div>
 
           {/* 返回按钮 */}
-          <img className='h1Mback' onClick={closeFu} src={`${dataUrlSame}visit/back.png`} alt='' />
+          <img className='h1Mback' onClick={closeFu} src={`${baseURL}visit/back.png`} alt='' />
         </div>
 
         {/* 底部 */}
-        <div className='h1Floo' style={{ backgroundImage: `url(${dataUrlSame}visit/h1fllo.png)` }}>
+        <div className='h1Floo' style={{ backgroundImage: `url(${baseURL}visit/h1fllo.png)` }}>
           {data.map((item, index) => (
             <div
               onClick={() => flooIndFu(index)}
@@ -117,11 +115,7 @@ function Hot1({ closeFu, data }: Props) {
               {item.name}
 
               {flooInd === index ? (
-                <img
-                  className='h1FlooRowShowImg'
-                  src={`${dataUrlSame}visit/bichuyuan.png`}
-                  alt=''
-                />
+                <img className='h1FlooRowShowImg' src={`${baseURL}visit/bichuyuan.png`} alt='' />
               ) : null}
             </div>
           ))}

Code/src/pages/A2visit/PanoVideo/Hot2/index.tsx

@@ -3,7 +3,7 @@ import styles from './index.module.scss'
 import { VisitHotDataType } from '@/types'
 import classNames from 'classnames'
 import LazyImg from '@/components/LazyImg'
-import useDataUrl from '@/components/ownUse/useDataUrl'
+import { baseURL } from '@/utils/http'
 
 type Props = {
   closeFu: () => void
@@ -12,8 +12,6 @@ type Props = {
 }
 
 function Hot2({ closeFu, data, name }: Props) {
-  const { dataUrlSame } = useDataUrl()
-
   const [opShow, setOpShow] = useState(false)
 
   useEffect(() => {
@@ -38,18 +36,18 @@ function Hot2({ closeFu, data, name }: Props) {
 
   return (
     <div className={styles.Hot2} style={{ opacity: opShow ? 1 : 0 }}>
-      <div className='h2Main' style={{ backgroundImage: `url(${dataUrlSame}visit/hot2bj.png)` }}>
+      <div className='h2Main' style={{ backgroundImage: `url(${baseURL}visit/hot2bj.png)` }}>
         {/* 标题 */}
         <div className='h2Titele'>
-          <img src={`${dataUrlSame}visit/img-yun1.png`} alt='' />
-          <img className='h2TimgR' src={`${dataUrlSame}visit/img-yun2.png`} alt='' />
+          <img src={`${baseURL}visit/img-yun1.png`} alt='' />
+          <img className='h2TimgR' src={`${baseURL}visit/img-yun2.png`} alt='' />
           {name}
         </div>
 
         <div className={classNames('h2TuWen', data.length <= 1 ? 'h2TuWenDuo' : '')}>
           {/* 图片 */}
           {acData.imgArr.map((url, index) => (
-            <LazyImg src={dataUrlSame + url} key={index} />
+            <LazyImg src={baseURL + url} key={index} />
           ))}
 
           {/* 文字 */}
@@ -78,7 +76,7 @@ function Hot2({ closeFu, data, name }: Props) {
 
         {/* 返回按钮 */}
         <div className='h2Back'>
-          <img onClick={closeFu} src={`${dataUrlSame}visit/back.png`} alt='' />
+          <img onClick={closeFu} src={`${baseURL}visit/back.png`} alt='' />
         </div>
       </div>
       <div className='h2Right' onClick={closeFu}></div>

Code/src/pages/A2visit/PanoVideo/index.module.scss

@@ -1,36 +1,7 @@
 .PanoVideo {
   width: 100%;
   height: 100%;
-  :global {
-    .pvHot {
-      display: inline-block;
-      cursor: pointer;
-      position: relative;
-      height: 30px;
-      width: auto;
-      & > img {
-        position: relative;
-        top: 0;
-        left: 0;
-        transition: all 0.3s;
-      }
-      .pvHotBase {
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
+  // :global {
 
-      .pvHotHover {
-        opacity: 0;
-      }
-      &:hover {
-        .pvHotBase {
-          opacity: 0;
-        }
-        .pvHotHover {
-          opacity: 1;
-        }
-      }
-    }
-  }
+  // }
 }

Code/src/pages/A2visit/PanoVideo/index.tsx

@@ -3,7 +3,7 @@ import styles from './index.module.scss'
 import Hot1 from './Hot1'
 import Hot2 from './Hot2'
 import { myData } from '@/utils/http'
-import useDataUrl from '@/components/ownUse/useDataUrl'
+import HotIcon from '@/components/HotIcon'
 function PanoVideo() {
   // 0为 第一种模式的热点 其他为第二种
   const [ind, setInd] = useState(-1)
@@ -13,17 +13,13 @@ function PanoVideo() {
     else return []
   }, [ind])
 
-  const { dataUrlSame } = useDataUrl()
-
   return (
     <div className={styles.PanoVideo}>
       {/* 待完善 */}
       全景视频页面-----
       {myData.visit.hot.map((item, index) => (
-        <div className='pvHot' key={index} onClick={() => setInd(index)}>
-          <img className='pvHotBase' src={`${dataUrlSame}visit/hot/hotBase.png`} alt='' />
-          <img className='pvHotHover' src={dataUrlSame + item.hoverSrc} alt='' />
-        </div>
+        // 热点图标
+        <HotIcon key={index} index={index} clickSon={val => setInd(val)} hoverSrc={item.hoverSrc} />
       ))}
       {ind === -1 ? null : ind === 0 ? (
         <Hot1 data={data} closeFu={() => setInd(-1)} />

Code/src/pages/A2visit/index.module.scss

@@ -10,89 +10,13 @@
       width: 100%;
       height: 100%;
       position: relative;
-      opacity: 1;
-      transition: opacity 0.5s;
-      .pvBtn {
-        position: absolute;
-        right: 20px;
-        top: 50%;
-        transform: translateY(-50%);
-        cursor: pointer;
-        width: 120px;
-        height: auto;
-        z-index: 10;
-        & > img {
-          width: 100%;
-        }
-        & > div {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          color: #fffddc;
-          font-size: 16px;
-          & > span {
-            padding-left: 5px;
-            font-size: 14px;
-          }
-        }
-      }
-      .pvRRbtn {
-        position: absolute;
-        right: 25px;
-        bottom: 25px;
-        z-index: 10;
-        display: flex;
-
-        & > div {
-          background-size: 100% 100%;
-          transition: all 0.3s;
-          width: 50px;
-          height: 50px;
-          cursor: pointer;
-        }
-
-        .pvRRbtn1 {
-          margin-right: 5px;
-          background-image: url('../../assets/img/icon-walk.png');
-        }
-        .pvRRbtn2 {
-          background-image: url('../../assets/img/icon-more.png');
-        }
-      }
-    }
-    .pvBoxHide {
       opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.5s;
     }
-
-    // 屏幕>=1200
-    @media screen and (min-width: 1200px) {
-      .pvBox {
-        .pvBtn {
-          & > div {
-            transition: all 0.3s;
-            &:hover {
-              color: #ead98f;
-            }
-          }
-        }
-        .pvRRbtn {
-          .pvRRbtn1 {
-            &:hover {
-              background-image: url('../../assets/img/icon-walk1.png');
-            }
-          }
-          .pvRRbtn2 {
-            &:hover {
-              background-image: url('../../assets/img/icon-more1.png');
-            }
-          }
-        }
-      }
+    .pvBoxShow {
+      opacity: 1;
+      pointer-events: auto;
     }
   }
 }

Code/src/pages/A2visit/index.tsx

@@ -1,33 +1,26 @@
 import React, { useCallback, useState } from 'react'
 import styles from './index.module.scss'
 import classNames from 'classnames'
-import useDataUrl from '@/components/ownUse/useDataUrl'
-import { myData } from '@/utils/http'
+import { baseURL, myData } from '@/utils/http'
 import PanoVideo from './PanoVideo'
-import history from '@/utils/history'
-import { ArrowRightOutlined } from '@ant-design/icons'
 import EndVideo from '@/components/EndVideo'
-import BaseVideo from '@/components/BaseVideo'
 import CatVideo from '@/components/CatVideo'
+import NextPage from '@/components/NextPage'
+import FloorBtn from '@/components/FloorBtn'
+import BaseImg from '@/components/BaseImg'
 
 function A2visit() {
-  const { dataUrlSame } = useDataUrl()
-
-  // 当前视频索引
-  const [videoInd, setVideoInd] = useState(-1)
-
-  // 开始之后的过度动画
-  const [overVideo, setOverVideo] = useState(true)
+  // 过度动画
+  const [cutVideoShow, setCutVideoShow] = useState(false)
 
   // 点击继续
   const btnStart = useCallback(() => {
-    // 播放已经加载好的视频
-    setVideoInd(0)
-    setTimeout(() => {
-      // 播放过度视频
-      const dom: HTMLVideoElement = document.querySelector('#CatVideo video')!
-      if (dom) dom.play()
-    }, 100)
+    setCutVideoShow(true)
+  }, [])
+
+  // 过度动画播放完毕或者点击跳过
+  const cutEndFu = useCallback(() => {
+    setCutVideoShow(false)
   }, [])
 
   // 点击 跳下一个章节
@@ -35,46 +28,37 @@ function A2visit() {
 
   return (
     <div className={styles.A2visit}>
-      {/* 加载页面 */}
-      <BaseVideo
-        isShow={videoInd < 0}
-        imgSrc={`${dataUrlSame}visit/mulu.png`}
-        videoSrc={`${dataUrlSame}/${myData.visit.videoSta}`}
+      {/* 初始静态图 */}
+      <BaseImg
+        isShow={cutVideoShow}
+        iconSrc={`${baseURL}visit/mulu.png`}
         parentFu={() => btnStart()}
+        bgImg={`${baseURL}/${myData.visit.bgImg}`}
       />
 
       {/* 过度动画页面 */}
       <CatVideo
-        isShow={overVideo}
-        src={dataUrlSame + myData.visit.videos[videoInd < 0 ? 0 : videoInd]}
-        parentFu={() => setOverVideo(false)}
+        isShow={cutVideoShow}
+        src={baseURL + myData.visit.videos[0]}
+        parentFu={() => cutEndFu()}
         noBtn={true}
       />
 
       {/* 全景视频 */}
-      <div className={classNames('pvBox', lastVideo ? 'pvBoxHide' : '')} hidden={overVideo}>
+      <div className={classNames('pvBox', cutVideoShow ? '' : 'pvBoxShow')}>
         <PanoVideo />
         {/* 跳到下一章 */}
-        <div className='pvBtn'>
-          <img src={`${dataUrlSame}visit/btn.png`} alt='' />
-          <div onClick={() => setLastVideo(true)}>
-            行拜谒礼
-            <ArrowRightOutlined />
-          </div>
-        </div>
+        <NextPage clickSon={() => setLastVideo(true)} txt='行拜谒礼' />
 
-        <div className='pvRRbtn'>
-          <div className='pvRRbtn1' title='漫游模式' onClick={() => history.push('/unity/1')}></div>
-          {/* 更多 跳新页面 */}
-          <div title='更多' className='pvRRbtn2' onClick={() => history.push('/more')}></div>
-        </div>
+        {/* 右下角按钮 */}
+        <FloorBtn unityId='1' />
       </div>
 
       {/* 结尾动画 */}
       <EndVideo
         lastVideo={lastVideo}
         delDom='.pvBox'
-        src={dataUrlSame + myData.visit.lastVideo}
+        src={baseURL + myData.visit.lastVideo}
         path='/banquet'
       />
     </div>

Code/src/pages/A3banquet/PanoImg/index.module.scss

@@ -2,36 +2,6 @@
   width: 100%;
   height: 100%;
 
-  :global {
-    .pvHot {
-      display: inline-block;
-      cursor: pointer;
-      position: relative;
-      height: 30px;
-      width: auto;
-      & > img {
-        position: relative;
-        top: 0;
-        left: 0;
-        transition: all 0.3s;
-      }
-      .pvHotBase {
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
-
-      .pvHotHover {
-        opacity: 0;
-      }
-      &:hover {
-        .pvHotBase {
-          opacity: 0;
-        }
-        .pvHotHover {
-          opacity: 1;
-        }
-      }
-    }
-  }
+  // :global {
+  // }
 }

Code/src/pages/A3banquet/PanoImg/index.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import { myData } from '@/utils/http'
 import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
-import useDataUrl from '@/components/ownUse/useDataUrl'
+import HotIcon from '@/components/HotIcon'
 function PanoImg() {
   // 0为 第一种模式的热点 其他为第二种
   const [ind, setInd] = useState(-1)
@@ -12,17 +12,13 @@ function PanoImg() {
     else return []
   }, [ind])
 
-  const { dataUrlSame } = useDataUrl()
-
   return (
     <div className={styles.PanoImg}>
       {/* 待完善 */}
       全景图
       {myData.banquet.hot.map((item, index) => (
-        <div className='pvHot' key={index} onClick={() => setInd(index)}>
-          <img className='pvHotBase' src={`${dataUrlSame}visit/hot/hotBase.png`} alt='' />
-          <img className='pvHotHover' src={dataUrlSame + item.hoverSrc} alt='' />
-        </div>
+        // 热点图标
+        <HotIcon key={index} index={index} clickSon={val => setInd(val)} hoverSrc={item.hoverSrc} />
       ))}
       {ind === -1 ? null : (
         <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.banquet.hot[ind].name} />

Code/src/pages/A3banquet/index.module.scss

@@ -11,89 +11,13 @@
       width: 100%;
       height: 100%;
       position: relative;
-      opacity: 1;
-      transition: opacity 0.5s;
-      .pvBtn {
-        position: absolute;
-        right: 20px;
-        top: 50%;
-        transform: translateY(-50%);
-        cursor: pointer;
-        width: 120px;
-        height: auto;
-        z-index: 10;
-        & > img {
-          width: 100%;
-        }
-        & > div {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          color: #fffddc;
-          font-size: 16px;
-          & > span {
-            padding-left: 5px;
-            font-size: 14px;
-          }
-        }
-      }
-      .pvRRbtn {
-        position: absolute;
-        right: 25px;
-        bottom: 25px;
-        z-index: 10;
-        display: flex;
-
-        & > div {
-          background-size: 100% 100%;
-          transition: all 0.3s;
-          width: 50px;
-          height: 50px;
-          cursor: pointer;
-        }
-
-        .pvRRbtn1 {
-          margin-right: 5px;
-          background-image: url('../../assets/img/icon-walk.png');
-        }
-        .pvRRbtn2 {
-          background-image: url('../../assets/img/icon-more.png');
-        }
-      }
-    }
-    .pvBoxHide {
       opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.5s;
     }
-
-    // 屏幕>=1200
-    @media screen and (min-width: 1200px) {
-      .pvBox {
-        .pvBtn {
-          & > div {
-            transition: all 0.3s;
-            &:hover {
-              color: #ead98f;
-            }
-          }
-        }
-        .pvRRbtn {
-          .pvRRbtn1 {
-            &:hover {
-              background-image: url('../../assets/img/icon-walk1.png');
-            }
-          }
-          .pvRRbtn2 {
-            &:hover {
-              background-image: url('../../assets/img/icon-more1.png');
-            }
-          }
-        }
-      }
+    .pvBoxShow {
+      opacity: 1;
+      pointer-events: auto;
     }
   }
 }

Code/src/pages/A3banquet/index.tsx

@@ -1,78 +1,65 @@
 import React, { useCallback, useState } from 'react'
 import styles from './index.module.scss'
-import useDataUrl from '@/components/ownUse/useDataUrl'
 import classNames from 'classnames'
-import { myData } from '@/utils/http'
+import { baseURL, myData } from '@/utils/http'
 import PanoImg from './PanoImg'
-import { ArrowRightOutlined } from '@ant-design/icons'
-import history from '@/utils/history'
 import EndVideo from '@/components/EndVideo'
-import BaseVideo from '@/components/BaseVideo'
 import CatVideo from '@/components/CatVideo'
+import NextPage from '@/components/NextPage'
+import FloorBtn from '@/components/FloorBtn'
+import BaseImg from '@/components/BaseImg'
 
 function A3banquet() {
-  const { dataUrlSame } = useDataUrl()
+  // 过度动画
+  const [cutVideoShow, setCutVideoShow] = useState(false)
 
-  // 当前视频索引
-  const [videoInd, setVideoInd] = useState(-1)
-
-  // 开始之后的过度动画
-  const [overVideo, setOverVideo] = useState(true)
+  // 点击 跳下一个章节
+  const [lastVideo, setLastVideo] = useState(false)
 
   // 点击继续
   const btnStart = useCallback(() => {
-    setVideoInd(0)
-    setTimeout(() => {
-      // 播放过度视频
-      const dom: HTMLVideoElement = document.querySelector('#CatVideo video')!
-      if (dom) dom.play()
-    }, 100)
+    setCutVideoShow(true)
   }, [])
 
-  // 点击 跳下一个章节
-  const [lastVideo, setLastVideo] = useState(false)
+  // 过度动画播放完毕或者点击跳过
+  const cutEndFu = useCallback(() => {
+    setCutVideoShow(false)
+  }, [])
 
   return (
     <div className={styles.A3banquet}>
-      {/* 加载页面 */}
-      <BaseVideo
-        isShow={videoInd < 0}
-        imgSrc={`${dataUrlSame}banquet/mulu.png`}
-        videoSrc={`${dataUrlSame}/${myData.banquet.videoSta}`}
+      {/* 初始静态图 */}
+      <BaseImg
+        isShow={cutVideoShow}
+        iconSrc={`${baseURL}banquet/mulu.png`}
         parentFu={() => btnStart()}
+        bgImg={`${baseURL}/${myData.banquet.bgImg}`}
       />
 
       {/* 过度动画页面 */}
       <CatVideo
-        isShow={overVideo}
-        src={dataUrlSame + myData.banquet.videos[videoInd < 0 ? 0 : videoInd]}
-        parentFu={() => setOverVideo(false)}
+        isShow={cutVideoShow}
+        src={baseURL + myData.banquet.videos[0]}
+        // src='https://houseoss.4dkankan.com/project/henan/1.mp4'
+        parentFu={() => cutEndFu()}
       />
 
       {/* 全景图 */}
-      <div className={classNames('pvBox', lastVideo ? 'pvBoxHide' : '')} hidden={overVideo}>
+      <div className={classNames('pvBox', cutVideoShow ? '' : 'pvBoxShow')}>
         <PanoImg />
         {/* 跳到下一章 */}
-        <div className='pvBtn'>
-          <img src={`${dataUrlSame}visit/btn.png`} alt='' />
-          <div onClick={() => setLastVideo(true)}>
-            乐舞百戏
-            <ArrowRightOutlined />
-          </div>
-        </div>
+        <NextPage clickSon={() => setLastVideo(true)} txt='乐舞百戏' />
 
-        <div className='pvRRbtn'>
-          <div className='pvRRbtn1' title='漫游模式' onClick={() => history.push('/unity/2')}></div>
-          {/* 更多 跳新页面 */}
-          <div className='pvRRbtn2' title='更多' onClick={() => history.push('/more')}></div>
-        </div>
+        {/* 右下角按钮 */}
+        <FloorBtn unityId='2' />
       </div>
 
       {/* 结尾动画 */}
       <EndVideo
         lastVideo={lastVideo}
         delDom='.pvBox'
-        src={dataUrlSame + myData.banquet.lastVideo}
+        src={baseURL + myData.banquet.lastVideo}
+        // src='https://houseoss.4dkankan.com/project/henan/3.mp4'
         path='/dance'
       />
     </div>

Code/src/pages/A4dance/index.module.scss

@@ -20,39 +20,6 @@
       opacity: 1;
       transition: opacity 0.5s;
 
-      // 热点
-      .pvHot {
-        cursor: pointer;
-        position: absolute;
-        z-index: 30;
-        display: inline-block;
-        height: 30px;
-        width: auto;
-        & > img {
-          position: relative;
-          top: 0;
-          left: 0;
-          transition: all 0.3s;
-        }
-        .pvHotBase {
-          position: absolute;
-          top: 0;
-          left: 0;
-        }
-
-        .pvHotHover {
-          opacity: 0;
-        }
-        &:hover {
-          .pvHotBase {
-            opacity: 0;
-          }
-          .pvHotHover {
-            opacity: 1;
-          }
-        }
-      }
-
       // 底部
       .pvfloor {
         position: absolute;
@@ -132,59 +99,6 @@
           }
         }
       }
-
-      .pvBtn {
-        position: absolute;
-        right: 20px;
-        top: 50%;
-        transform: translateY(-50%);
-        cursor: pointer;
-        width: 120px;
-        height: auto;
-        z-index: 10;
-        & > img {
-          width: 100%;
-        }
-        & > div {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          color: #fffddc;
-          font-size: 16px;
-          & > span {
-            padding-left: 5px;
-            font-size: 14px;
-          }
-        }
-      }
-      .pvRRbtn {
-        position: absolute;
-        right: 25px;
-        bottom: 25px;
-        z-index: 10;
-        display: flex;
-
-        & > div {
-          background-size: 100% 100%;
-          transition: all 0.3s;
-          width: 50px;
-          height: 50px;
-          cursor: pointer;
-        }
-
-        .pvRRbtn1 {
-          margin-right: 5px;
-          background-image: url('../../assets/img/icon-walk.png');
-        }
-        .pvRRbtn2 {
-          background-image: url('../../assets/img/icon-more.png');
-        }
-      }
     }
     .pvBoxHide {
       opacity: 0;
@@ -248,23 +162,6 @@
       pointer-events: none;
     }
 
-    // 点击 热点 云气图
-    .A4hotBox {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-      opacity: 0;
-      pointer-events: none;
-      z-index: 32;
-      transition: all 0.5s;
-    }
-    .A4hotBoxShow {
-      opacity: 1;
-      pointer-events: auto;
-    }
-
     // 其他热点
     .A4othHot {
       position: absolute;
@@ -274,32 +171,5 @@
       width: 100%;
       height: 100%;
     }
-
-    // 屏幕>=1200
-    @media screen and (min-width: 1200px) {
-      .pvBox {
-        .pvBtn {
-          & > div {
-            transition: all 0.3s;
-            &:hover {
-              color: #ead98f;
-            }
-          }
-        }
-
-        .pvRRbtn {
-          .pvRRbtn1 {
-            &:hover {
-              background-image: url('../../assets/img/icon-walk1.png');
-            }
-          }
-          .pvRRbtn2 {
-            &:hover {
-              background-image: url('../../assets/img/icon-more1.png');
-            }
-          }
-        }
-      }
-    }
   }
 }

Code/src/pages/A4dance/index.tsx

@@ -1,17 +1,15 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import useDataUrl from '@/components/ownUse/useDataUrl'
-import { myData } from '@/utils/http'
+import { baseURL, myData } from '@/utils/http'
 import classNames from 'classnames'
-import { ArrowRightOutlined } from '@ant-design/icons'
-import history from '@/utils/history'
 import Hot2 from '../A2visit/PanoVideo/Hot2'
 import EndVideo from '@/components/EndVideo'
 import BaseImg from '@/components/BaseImg'
+import HotIcon from '@/components/HotIcon'
+import FloorBtn from '@/components/FloorBtn'
+import NextPage from '@/components/NextPage'
 
 function A4dance() {
-  const { dataUrlSame } = useDataUrl()
-
   const [baseSta, setBaseSta] = useState(false)
 
   // 点击继续
@@ -43,7 +41,6 @@ function A4dance() {
   }, [floorAc])
 
   // 点击 云气图
-
   const hotVideoRef = useRef<HTMLVideoElement>(null)
 
   const [hotInd, setHotInd] = useState(-1)
@@ -62,13 +59,9 @@ function A4dance() {
   }, [])
 
   return (
-    <div className={styles.A4dance} style={{ backgroundImage: `url(${dataUrlSame}dance/bj.jpg)` }}>
+    <div className={styles.A4dance} style={{ backgroundImage: `url(${baseURL}dance/bj.jpg)` }}>
       {/* 初始页面 */}
-      <BaseImg
-        isShow={baseSta}
-        iconSrc={`${dataUrlSame}dance/mulu.png`}
-        parentFu={() => btnStart()}
-      />
+      <BaseImg isShow={baseSta} iconSrc={`${baseURL}dance/mulu.png`} parentFu={() => btnStart()} />
 
       {/* 主要内容 */}
       <div
@@ -78,20 +71,18 @@ function A4dance() {
           baseSta ? 'pvBoxShow' : 'pvBoxHide'
         )}
       >
-        {/* 热点 云气图为第一个 */}
+        {/* 热点图标 云气图为第一个*/}
         {myData.dance.hot.map((item, index) => (
-          <div
-            onClick={() => hotShowFu(index)}
-            key={index}
-            className='pvHot'
+          <HotIcon
             style={{
               top: item.loc.top,
               left: item.loc.left
             }}
-          >
-            <img className='pvHotBase' src={`${dataUrlSame}visit/hot/hotBase.png`} alt='' />
-            <img className='pvHotHover' src={dataUrlSame + item.imgSrc} alt='' />
-          </div>
+            key={index}
+            index={index}
+            clickSon={val => hotShowFu(val)}
+            hoverSrc={item.imgSrc}
+          />
         ))}
 
         {/* 底部 */}
@@ -106,7 +97,7 @@ function A4dance() {
               <div className='pvflR1'></div>
               {/* 底图 */}
               <div className='pvflR2'>
-                <img src={dataUrlSame + item.imgSrc} alt='' />
+                <img src={baseURL + item.imgSrc} alt='' />
               </div>
 
               {/* 文字 */}
@@ -116,35 +107,25 @@ function A4dance() {
         </div>
 
         {/* 跳到下一章 */}
-        <div className='pvBtn'>
-          <img src={`${dataUrlSame}visit/btn.png`} alt='' />
-          <div onClick={() => setLastVideo(true)}>
-            后厨备宴
-            <ArrowRightOutlined />
-          </div>
-        </div>
+        <NextPage clickSon={() => setLastVideo(true)} txt='后厨备宴' />
 
         {/* 右下角按钮 */}
-        <div className='pvRRbtn'>
-          {/* <div className='pvRRbtn1' title='漫游模式'></div> */}
-          {/* 更多 跳新页面 */}
-          <div className='pvRRbtn2' title='更多' onClick={() => history.push('/chef')}></div>
-        </div>
+        <FloorBtn />
 
         {/* 中间的8个动画视频*/}
         <div
           className={classNames('A4floorBox', floorAc === -1 ? 'A4floorBoxHide' : '')}
-          style={{ backgroundImage: `url(${dataUrlSame}dance/dongBj.png)` }}
+          style={{ backgroundImage: `url(${baseURL}dance/dongBj.png)` }}
         >
           <div className='A4fMain'>
             {/* 边框遮盖 */}
-            <img className='A4fMainKK' src={`${dataUrlSame}dance/dongK.png`} alt='' />
+            <img className='A4fMainKK' src={`${baseURL}dance/dongK.png`} alt='' />
 
             {/* 返回按钮 */}
             <img
               className='A4fMback'
               onClick={() => setFloorAc(-1)}
-              src={`${dataUrlSame}dance/back22.png`}
+              src={`${baseURL}dance/back22.png`}
               alt=''
             />
             {myData.dance.floor.map((item, index) => (
@@ -155,9 +136,8 @@ function A4dance() {
                   muted
                   webkit-playsinline='true'
                   x5-video-player-type='h5'
-                  src={dataUrlSame + item.videoSrc}
                 >
-                  <source type='video/mp4' />
+                  <source type='video/mp4' src={baseURL + item.videoSrc} />
                   Your browser does not support the video tag.
                 </video>
               </div>
@@ -167,23 +147,13 @@ function A4dance() {
       </div>
 
       {/* 点击四神云气图的动画 */}
-      <div className={classNames('A4hotBox', hotInd === 0 ? 'A4hotBoxShow' : '')}>
-        <video
-          ref={hotVideoRef}
-          playsInline
-          muted
-          webkit-playsinline='true'
-          x5-video-player-type='h5'
-          src={dataUrlSame + myData.dance.hot[0].videoSrc}
-          onEnded={() => history.push('/yun')}
-        >
-          <source type='video/mp4' />
-          Your browser does not support the video tag.
-        </video>
-      </div>
-
+      <EndVideo
+        lastVideo={hotInd === 0}
+        delDom='.pvBox'
+        src={baseURL + myData.dance.hot[0].videoSrc}
+        path='/yun'
+      />
       {/* 点击其他热点 */}
-
       {hotInd > 0 ? (
         <div className={'A4othHot'}>
           <Hot2
@@ -197,7 +167,7 @@ function A4dance() {
       <EndVideo
         lastVideo={lastVideo}
         delDom='.pvBox'
-        src={dataUrlSame + myData.dance.lastVideo}
+        src={baseURL + myData.dance.lastVideo}
         path='/chef'
       />
     </div>

Code/src/pages/A5chef/index.module.scss

@@ -21,40 +21,6 @@
         transition: opacity 0.5s;
         position: relative;
 
-        // 每个热点
-        // 热点
-        .pvHot {
-          cursor: pointer;
-          position: absolute;
-          z-index: 9;
-          display: inline-block;
-          height: 30px;
-          width: auto;
-          & > img {
-            position: relative;
-            top: 0;
-            left: 0;
-            transition: all 0.3s;
-          }
-          .pvHotBase {
-            position: absolute;
-            top: 0;
-            left: 0;
-          }
-
-          .pvHotHover {
-            opacity: 0;
-          }
-          &:hover {
-            .pvHotBase {
-              opacity: 0;
-            }
-            .pvHotHover {
-              opacity: 1;
-            }
-          }
-        }
-
         // 后厨群像
         .A5chuBtn {
           cursor: pointer;
@@ -102,61 +68,6 @@
           opacity: 1;
           pointer-events: auto;
         }
-        // 跳到下一章 按钮
-        .pvBtn {
-          position: absolute;
-          right: 20px;
-          top: 50%;
-          transform: translateY(-50%);
-          cursor: pointer;
-          width: 120px;
-          height: auto;
-          z-index: 10;
-          & > img {
-            width: 100%;
-          }
-          & > div {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: #fffddc;
-            font-size: 16px;
-            transition: all 0.3s;
-            &:hover {
-              color: #ead98f;
-            }
-            & > span {
-              padding-left: 5px;
-              font-size: 14px;
-            }
-          }
-        }
-        .pvRRbtn {
-          position: absolute;
-          right: 25px;
-          bottom: 25px;
-          z-index: 10;
-          display: flex;
-
-          & > div {
-            background-size: 100% 100%;
-            transition: all 0.3s;
-            width: 50px;
-            height: 50px;
-            cursor: pointer;
-          }
-          .pvRRbtn2 {
-            background-image: url('../../assets/img/icon-more.png');
-            &:hover {
-              background-image: url('../../assets/img/icon-more1.png');
-            }
-          }
-        }
       }
       .A5hotBoxAc {
         opacity: 1;

Code/src/pages/A5chef/index.tsx

@@ -1,16 +1,14 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import useDataUrl from '@/components/ownUse/useDataUrl'
 import classNames from 'classnames'
-import { myData } from '@/utils/http'
-import history from '@/utils/history'
-import { ArrowRightOutlined } from '@ant-design/icons'
+import { baseURL, myData } from '@/utils/http'
 import EndVideo from '@/components/EndVideo'
 import BaseImg from '@/components/BaseImg'
+import HotIcon from '@/components/HotIcon'
+import NextPage from '@/components/NextPage'
+import FloorBtn from '@/components/FloorBtn'
 
 function A5chef() {
-  const { dataUrlSame } = useDataUrl()
-
   // 点击继续
   const [baseFlag, setBaseFlag] = useState(true)
 
@@ -59,40 +57,38 @@ function A5chef() {
       {/* 整体盒子 */}
       <div
         className='A5main'
-        style={{ backgroundImage: `url(${dataUrlSame + myData.chef.baseImg})`, transform: bgMove }}
+        style={{ backgroundImage: `url(${baseURL + myData.chef.baseImg})`, transform: bgMove }}
       >
         {/* 初始页面 */}
         <BaseImg
           isShow={!baseFlag}
-          iconSrc={`${dataUrlSame}chef/mulu.png`}
+          iconSrc={`${baseURL}chef/mulu.png`}
           parentFu={() => btnStart()}
         />
         {/* 热点按钮页面 */}
         <div className={classNames('A5hotBox', baseFlag ? '' : 'A5hotBoxAc')}>
           {/* 循环渲染热点 */}
           {myData.chef.hot.map((item, index) => (
-            <div
-              onClick={() => hotIndFu(index)}
-              key={index}
-              className='pvHot'
+            <HotIcon
               style={{
                 top: item.loc.top,
                 left: item.loc.left
               }}
-            >
-              <img className='pvHotBase' src={`${dataUrlSame}visit/hot/hotBase.png`} alt='' />
-              <img className='pvHotHover' src={dataUrlSame + item.imgSrc} alt='' />
-            </div>
+              key={index}
+              index={index}
+              clickSon={val => hotIndFu(val)}
+              hoverSrc={item.imgSrc}
+            />
           ))}
 
           {/* 后厨群像 */}
           <div
-            style={{ backgroundImage: `url(${dataUrlSame}chef/houChu.jpg)` }}
+            style={{ backgroundImage: `url(${baseURL}chef/houChu.jpg)` }}
             className={classNames('A5chu', chuShow ? 'A5chuShow' : '')}
           >
             {/* 返回按钮 */}
             <div
-              style={{ backgroundImage: `url(${dataUrlSame}chef/back23.png)` }}
+              style={{ backgroundImage: `url(${baseURL}chef/back23.png)` }}
               className='A5hotBoxBack hoverD'
               title='返回'
               onClick={() => setChuShow(false)}
@@ -101,23 +97,16 @@ function A5chef() {
           <div
             onClick={() => setChuShow(true)}
             className='A5chuBtn'
-            style={{ backgroundImage: `url(${dataUrlSame}chef/chuBtn.png)` }}
+            style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
           >
             后厨群像
           </div>
 
           {/* 跳到下一章 */}
-          <div className='pvBtn'>
-            <img src={`${dataUrlSame}visit/btn.png`} alt='' />
-            <div onClick={() => setLastVideo(true)}>
-              田间耕作
-              <ArrowRightOutlined />
-            </div>
-          </div>
-          <div className='pvRRbtn'>
-            {/* 更多 跳新页面 */}
-            <div title='更多' className='pvRRbtn2' onClick={() => history.push('/more')}></div>
-          </div>
+          <NextPage clickSon={() => setLastVideo(true)} txt='田间耕作' />
+
+          {/* 右下角按钮 */}
+          <FloorBtn />
         </div>
       </div>
 
@@ -130,22 +119,21 @@ function A5chef() {
             muted
             webkit-playsinline='true'
             x5-video-player-type='h5'
-            src={dataUrlSame + item.videoSrc}
             loop
           >
-            <source type='video/mp4' />
+            <source type='video/mp4' src={baseURL + item.videoSrc} />
             Your browser does not support the video tag.
           </video>
 
           {/* 热点右侧图文信息 */}
-          <div className='A5vTxt' style={{ backgroundImage: `url(${dataUrlSame}chef/hotBg.png)` }}>
-            <img src={dataUrlSame + item.showImg} alt='' />
+          <div className='A5vTxt' style={{ backgroundImage: `url(${baseURL}chef/hotBg.png)` }}>
+            <img src={baseURL + item.showImg} alt='' />
             <div dangerouslySetInnerHTML={{ __html: item.txt }}></div>
           </div>
 
           {/* 返回按钮 */}
           <div
-            style={{ backgroundImage: `url(${dataUrlSame}chef/back22.png)` }}
+            style={{ backgroundImage: `url(${baseURL}chef/back22.png)` }}
             className='A5vBack hoverD'
             title='返回'
             onClick={() => setHotInd(-1)}
@@ -156,7 +144,7 @@ function A5chef() {
       {/* 结尾动画 */}
       <EndVideo
         lastVideo={lastVideo}
-        src={dataUrlSame + myData.chef.lastVideo}
+        src={baseURL + myData.chef.lastVideo}
         path='/plow'
         noBtn={true}
       />

Code/src/pages/B2hots/index.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import history from '@/utils/history'
-import useDataUrl from '@/components/ownUse/useDataUrl'
-import { myData } from '@/utils/http'
+import { baseURL, myData } from '@/utils/http'
 import classNames from 'classnames'
 
 const pushObj = {
@@ -11,8 +10,6 @@ const pushObj = {
 }
 
 function B2hots() {
-  const { dataUrlSame } = useDataUrl()
-
   const [acId, setAcId] = useState(1)
 
   const info = useMemo(() => {
@@ -25,7 +22,7 @@ function B2hots() {
   }, [acId])
 
   return (
-    <div className={styles.B2hots} style={{ backgroundImage: `url(${dataUrlSame}xian/bg.jpg)` }}>
+    <div className={styles.B2hots} style={{ backgroundImage: `url(${baseURL}xian/bg.jpg)` }}>
       <div className='B2ll'>
         {myData.xian.map(item => (
           <div
@@ -33,10 +30,10 @@ function B2hots() {
             key={item.id}
             onClick={() => setAcId(item.id)}
           >
-            <img src={`${dataUrlSame}xian/${item.id}${acId === item.id ? 'ac' : ''}.png`} alt='' />
+            <img src={`${baseURL}xian/${item.id}${acId === item.id ? 'ac' : ''}.png`} alt='' />
             <div className='B2lRowTxt'>
               {item.name}
-              <img src={`${dataUrlSame}xian/right.png`} alt='' />
+              <img src={`${baseURL}xian/right.png`} alt='' />
             </div>
           </div>
         ))}
@@ -45,7 +42,7 @@ function B2hots() {
       <div className='B2rr'>
         <div className='B2rr1'>
           <h2>{info.name}</h2>
-          <div style={{ backgroundImage: `url(${dataUrlSame}yun/titLiang.png)` }}>{info.tit}</div>
+          <div style={{ backgroundImage: `url(${baseURL}yun/titLiang.png)` }}>{info.tit}</div>
         </div>
 
         <div className='B2rr2'>
@@ -56,7 +53,7 @@ function B2hots() {
           <div
             onClick={toDetailsFu}
             className='B2rr3 sizeNo hoverD'
-            style={{ backgroundImage: `url(${dataUrlSame}xian/duo.png)` }}
+            style={{ backgroundImage: `url(${baseURL}xian/duo.png)` }}
           >
             了解更多
           </div>

Code/src/pages/B3yun/index.tsx

@@ -1,14 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import useDataUrl from '@/components/ownUse/useDataUrl'
-import { myData } from '@/utils/http'
+import { baseURL, myData } from '@/utils/http'
 import history from '@/utils/history'
 import classNames from 'classnames'
 import B3txt from './B3txt'
 
 function B3yun() {
-  const { dataUrlSame } = useDataUrl()
-
   // 一级图标id
   const [ac1, setAc1] = useState(0)
 
@@ -58,27 +55,20 @@ function B3yun() {
     [hotArr]
   )
 
-  useEffect(() => {
-    console.log('---', ac2)
-  }, [ac2])
-
   return (
-    <div
-      className={styles.B3yun}
-      style={{ backgroundImage: `url(${dataUrlSame + myData.yun.bjImg})` }}
-    >
+    <div className={styles.B3yun} style={{ backgroundImage: `url(${baseURL + myData.yun.bjImg})` }}>
       {/* 左侧主体 */}
       <div className='yunll' style={{ pointerEvents: ac2 ? 'none' : 'auto' }}>
         {/* 主要 */}
         <div className='yunllCon'>
           <div
             className='yunll1'
-            style={{ backgroundImage: `url(${dataUrlSame}yun/di.jpg)`, transform: imgChange }}
+            style={{ backgroundImage: `url(${baseURL}yun/di.jpg)`, transform: imgChange }}
           >
             {/* 高亮白色盒子 */}
             {ac1 > 0 ? (
               <div
-                style={{ backgroundImage: `url(${dataUrlSame}yun/liang${ac1}.png)` }}
+                style={{ backgroundImage: `url(${baseURL}yun/liang${ac1}.png)` }}
                 className={classNames('yunll1Ac', ac2 ? 'yunll1AcHide' : '')}
               >
                 {/* 点 */}
@@ -89,7 +79,7 @@ function B3yun() {
                     key={v.id}
                     style={{ top: v.loc.top, left: v.loc.left }}
                   >
-                    <img src={`${dataUrlSame}yun/hot.png`} alt='' />
+                    <img src={`${baseURL}yun/hot.png`} alt='' />
                   </div>
                 ))}
               </div>
@@ -98,7 +88,7 @@ function B3yun() {
             {/* 二级别高亮 */}
 
             <div className={classNames('yunAc2Box', ac2 ? 'yunAc2BoxAc' : '')}>
-              {ac2 ? <img className='yunShan' src={`${dataUrlSame}yun/${ac2}.png`} alt='' /> : null}
+              {ac2 ? <img className='yunShan' src={`${baseURL}yun/${ac2}.png`} alt='' /> : null}
             </div>
 
             {/* {ac1 > 0 && ac2 ? <div className=''></div> : null} */}
@@ -121,9 +111,7 @@ function B3yun() {
       <div className='yunrr' style={{ pointerEvents: ac2 ? 'none' : 'auto' }}>
         <div className='yunrr1'>
           <h2>{myData.yun.name}</h2>
-          <div style={{ backgroundImage: `url(${dataUrlSame}yun/titLiang.png)` }}>
-            {myData.yun.tit}
-          </div>
+          <div style={{ backgroundImage: `url(${baseURL}yun/titLiang.png)` }}>{myData.yun.tit}</div>
         </div>
 
         <div className='yunrr2'>

Code/src/pages/B4xian/index.tsx

@@ -1,9 +1,7 @@
 import React, { useCallback, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import useDataUrl from '@/components/ownUse/useDataUrl'
+import { baseURL } from '@/utils/http'
 function B4xian() {
-  const { dataUrlSame } = useDataUrl()
-
   const [isFlag, setIsFlag] = useState(false)
 
   const xianRef = useRef<HTMLDivElement>(null)
@@ -37,7 +35,7 @@ function B4xian() {
       onMouseMove={e => mousemoveFu(e)}
       onWheel={e => mousemoveFu(e, true)}
     >
-      <img src={`${dataUrlSame}xian/chang.jpg`} alt='' />
+      <img src={`${baseURL}xian/chang.jpg`} alt='' />
     </div>
   )
 }

Code/src/pages/C1unity/index.tsx

@@ -70,7 +70,7 @@ function C1unity() {
 
   return (
     <div className={styles.C1unity}>
-      {url ? <iframe title='漫游' src={url}></iframe> : null}
+      {url ? <iframe frameBorder='none' title='漫游' src={url}></iframe> : null}
 
       <div onClick={() => clickHot(0)}>测试点击热点0</div>
       <div onClick={() => clickHot(1)}>测试点击热点1</div>

Code/src/types/declaration.d.ts

@@ -18,11 +18,14 @@ type MyDataType = {
   home: {
     bgImg: string
     leftVideo: string
-    videos: string[]
+    lastVideo: string
+  }
+  base: {
+    bgImg: string
     lastVideo: string
   }
   visit: {
-    videoSta: string
+    bgImg: string
     videos: string[]
     lastVideo: string
     hot: {
@@ -35,7 +38,7 @@ type MyDataType = {
     }[]
   }
   banquet: {
-    videoSta: string
+    bgImg: string
     videos: string[]
     lastVideo: string
     hot: {

Code/src/utils/http.ts

@@ -1,6 +1,6 @@
 export const isLoc = process.env.NODE_ENV === 'development'
 
-export const baseURLTemp = isLoc ? baseUrlLoc : baseUrlAtl
+export const baseURL = isLoc ? baseUrlLoc : baseUrlAtl
 
 // 所有数据
 export const myData = myDataTemp