整理一波加载顺序

Code/public/myData/myData.js

@@ -888,7 +888,7 @@ moreHotArr = moreHotArr.filter(v => !v.noShow)
 const myDataTemp = {
   // 开发调试为 false  正式上线为  true
   // 开发调试的时候 取消所有加载进度条 所有的视频动画都加上跳过按钮
-  isLdong: false,
+  isLdong: true,
 
   // 首页(静态资源目录位置：staticData/home)
   home: {
@@ -985,7 +985,7 @@ const myDataTemp = {
   // 四神云气图(静态资源目录位置：staticData/yun)
   yun: {
     // 背景图
-    bjImg: 'yun/bg.png',
+    bjImg: 'yun/bg.jpg',
     name: '四神云气图',
     tit: '墓室壁画',
     iconArr: [

Code/src/assets/styles/base.css

@@ -156,3 +156,12 @@ textarea {
     opacity: 1;
   }
 }
+#bgImgBox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: fill !important;
+  pointer-events: none;
+}

Code/src/assets/styles/base.less

@@ -190,3 +190,13 @@ textarea {
     opacity: 1;
   }
 }
+
+#bgImgBox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: fill !important;
+  pointer-events: none;
+}

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

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

Code/src/components/BaseImg/index.tsx

@@ -11,9 +11,11 @@ type Props = {
   bgImg?: string
   num?: number
   moreSta?: boolean
+  imgNumFu: () => void
+  imgNow: boolean
 }
 
-function BaseImg({ isShow, iconSrc, parentFu, bgImg, num = 30, moreSta }: Props) {
+function BaseImg({ isShow, iconSrc, parentFu, bgImg, num = 30, moreSta, imgNumFu, imgNow }: Props) {
   const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
 
   const timeRR = useRef(-1)
@@ -29,28 +31,25 @@ function BaseImg({ isShow, iconSrc, parentFu, bgImg, num = 30, moreSta }: Props)
   }, [loding, parentFu])
 
   useEffect(() => {
-    clearInterval(timeRR.current)
-    timeRR.current = window.setInterval(() => {
-      if (loding >= 100) {
-        if (moreSta) btnStartFu()
+    if (imgNow) {
+      clearInterval(timeRR.current)
+      timeRR.current = window.setInterval(() => {
+        if (loding >= 100) {
+          if (moreSta) btnStartFu()
 
-        clearInterval(timeRR.current)
-        return
-      }
-      setLoding(loding + 2)
-    }, num)
-  }, [btnStartFu, loding, moreSta, num])
+          clearInterval(timeRR.current)
+          return
+        }
+        setLoding(loding + 2)
+      }, num)
+    }
+  }, [btnStartFu, imgNow, loding, moreSta, num])
 
   return (
-    <div
-      id='BaseImg'
-      className={classNames(styles.BaseImg, isShow ? styles.BaseImgHide : '')}
-      style={{
-        backgroundImage: `url(${bgImg ? bgImg : ''})`
-        // backgroundColor: moreSta ? 'transparent' : ''
-      }}
-    >
-      {moreSta ? null : <img className='BIlogo' src={iconSrc} alt='' />}
+    <div id='BaseImg' className={classNames(styles.BaseImg, isShow ? styles.BaseImgHide : '')}>
+      {bgImg ? <img onLoad={imgNumFu} id='bgImgBox' src={bgImg} alt='' /> : null}
+
+      {moreSta ? null : <img onLoad={imgNumFu} className='BIlogo' src={iconSrc} alt='' />}
 
       <div
         className='BIbaseBtn'
@@ -59,7 +58,7 @@ function BaseImg({ isShow, iconSrc, parentFu, bgImg, num = 30, moreSta }: Props)
       >
         {moreSta ? null : (
           <div className='BIcon'>
-            <img src={`${baseURL}visit/arrow.png`} alt='' />
+            <img onLoad={imgNumFu} src={`${baseURL}visit/arrow.png`} alt='' />
           </div>
         )}
 

Code/src/components/ownUse/useLoding.tsx

@@ -0,0 +1,19 @@
+import { useCallback, useRef, useState } from 'react'
+
+export default function useLoding(maxNum: number) {
+  // 初始先加载图片 在加载其他
+  const [imgNow, setImgNow] = useState(false)
+
+  const numRef = useRef(0)
+
+  const imgNumFu = useCallback(() => {
+    numRef.current += 1
+
+    if (numRef.current === maxNum) setImgNow(true)
+  }, [maxNum])
+
+  return {
+    imgNow,
+    imgNumFu
+  }
+}

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

@@ -12,7 +12,6 @@
       position: relative;
       opacity: 1;
       transition: opacity 1s;
-      background-size: 100% 100%;
       .A11Vlogo {
         position: absolute;
         top: 56px;

Code/src/pages/A1_1base/index.tsx

@@ -3,11 +3,15 @@ import styles from './index.module.scss'
 import { baseURL, myData } from '@/utils/http'
 import classNames from 'classnames'
 import EndVideo from '@/components/EndVideo'
+import useLoding from '@/components/ownUse/useLoding'
 
 function A11base() {
   // 最后一个过长动画
   const [lastVideo, setLastVideo] = useState(false)
 
+  // 先加载背景图 序列帧等 在加载视频
+  const { imgNow, imgNumFu } = useLoding(3)
+
   // 点击开始
   const btnStartFu = useCallback(() => {
     // 播放长视频
@@ -21,12 +25,14 @@ function A11base() {
         className={classNames('A11bg')}
         style={{ backgroundImage: `url(${baseURL + myData.base.bgImg})` }}
       >
-        <img className='A11Vlogo' src={`${baseURL}home/logo.png`} alt='' />
+        <img onLoad={imgNumFu} id='bgImgBox' src={baseURL + myData.base.bgImg} alt='' />
+
+        <img onLoad={imgNumFu} className='A11Vlogo' src={`${baseURL}home/logo.png`} alt='' />
 
         {/* 按钮 */}
         <div className='A11btn'>
           <div className='hoverD' onClick={btnStartFu}>
-            <img src={`${baseURL}base/quan.png`} alt='' />
+            <img onLoad={imgNumFu} src={`${baseURL}base/quan.png`} alt='' />
             点击开始
           </div>
         </div>
@@ -34,12 +40,14 @@ function A11base() {
 
       {/* 最后一个过长动画 */}
 
-      <EndVideo
-        lastVideo={lastVideo}
-        delDom='.A11bg'
-        src={baseURL + myData.base.lastVideo}
-        path='/visit'
-      />
+      {imgNow ? (
+        <EndVideo
+          lastVideo={lastVideo}
+          delDom='.A11bg'
+          src={baseURL + myData.base.lastVideo}
+          path='/visit'
+        />
+      ) : null}
     </div>
   )
 }

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

@@ -13,7 +13,6 @@
       z-index: 20;
       opacity: 1;
       transition: opacity 1s;
-      background-size: 100% 100%;
       .A1Vlogo {
         position: absolute;
         top: 56px;

Code/src/pages/A1home/index.tsx

@@ -4,31 +4,37 @@ import { baseURL, myData } from '@/utils/http'
 import classNames from 'classnames'
 import EndVideo from '@/components/EndVideo'
 import VideoModel from '@/components/VideoModel'
+import useLoding from '@/components/ownUse/useLoding'
 
 function A1home() {
   const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
 
+  // 先加载背景图 序列帧等 在加载视频
+  const { imgNow, imgNumFu } = useLoding(6)
+
   const timeRR = useRef(-1)
 
   useEffect(() => {
-    clearInterval(timeRR.current)
-    timeRR.current = window.setInterval(() => {
-      if (loding >= 100) {
-        setTimeout(() => {
-          setMoveImgShow(false)
-        }, 2000)
-
-        setTimeout(() => {
-          const ruDom = document.querySelector('#myStyle')
-          if (ruDom) ruDom.remove()
-        }, 5000)
-
-        clearInterval(timeRR.current)
-        return
-      }
-      setLoding(loding + 1)
-    }, 30)
-  }, [loding])
+    if (imgNow) {
+      clearInterval(timeRR.current)
+      timeRR.current = window.setInterval(() => {
+        if (loding >= 100) {
+          setTimeout(() => {
+            setMoveImgShow(false)
+          }, 2000)
+
+          setTimeout(() => {
+            const ruDom = document.querySelector('#myStyle')
+            if (ruDom) ruDom.remove()
+          }, 5000)
+
+          clearInterval(timeRR.current)
+          return
+        }
+        setLoding(loding + 1)
+      }, 30)
+    }
+  }, [imgNow, loding])
 
   // 点击开始
   const btnStartFu = useCallback(() => {
@@ -78,11 +84,10 @@ function A1home() {
   return (
     <div className={styles.A1home}>
       {/* 初始加载画面 */}
-      <div
-        className={classNames('A1base', loding === 110 ? 'A1baseHide' : '')}
-        style={{ backgroundImage: `url(${baseURL}${myData.home.bgImg})` }}
-      >
-        <img className='A1Vlogo' src={`${baseURL}home/logo.png`} alt='' />
+      <div className={classNames('A1base', loding === 110 ? 'A1baseHide' : '')}>
+        <img onLoad={imgNumFu} id='bgImgBox' src={baseURL + myData.home.bgImg} alt='' />
+
+        <img onLoad={imgNumFu} className='A1Vlogo' src={`${baseURL}home/logo.png`} alt='' />
         {loding >= 100 ? (
           <div className='A1loding A1lodingBtn' onClick={btnStartFu}>
             <div>开始</div>
@@ -92,19 +97,27 @@ function A1home() {
         )}
 
         {/* 底部颜色条 */}
-        <img ref={A1BfloorRef} className='A1Bfloor' src={`${baseURL}home/floor.png`} alt='' />
+        <img
+          onLoad={imgNumFu}
+          ref={A1BfloorRef}
+          className='A1Bfloor'
+          src={`${baseURL}home/floor.png`}
+          alt=''
+        />
 
         {/* 底部房子 */}
-        <img className='A1Broom' src={`${baseURL}home/home.png`} alt='' />
+        <img onLoad={imgNumFu} className='A1Broom' src={`${baseURL}home/home.png`} alt='' />
 
         {/* 左右小人 */}
         <img
+          onLoad={imgNumFu}
           className={classNames('A1Bll', moveImgShow ? '' : 'A1BMoveHide')}
           src={`${baseURL}home/left.png`}
           alt=''
         />
 
         <img
+          onLoad={imgNumFu}
           className={classNames('A1Brr', moveImgShow ? '' : 'A1BMoveHide')}
           src={`${baseURL}home/right.png`}
           alt=''
@@ -119,21 +132,25 @@ function A1home() {
         </div>
 
         {/* 左下角视频 */}
-        <VideoModel
-          isShow={leftVideo}
-          src={baseURL + myData.home.leftVideo}
-          closeFu={() => setLeftVideo(false)}
-        />
+        {imgNow ? (
+          <VideoModel
+            isShow={leftVideo}
+            src={baseURL + myData.home.leftVideo}
+            closeFu={() => setLeftVideo(false)}
+          />
+        ) : null}
       </div>
 
       {/* 最后一个过长动画 */}
 
-      <EndVideo
-        lastVideo={lastVideo}
-        delDom='.A1base'
-        src={baseURL + myData.home.lastVideo}
-        path='/base'
-      />
+      {imgNow ? (
+        <EndVideo
+          lastVideo={lastVideo}
+          delDom='.A1base'
+          src={baseURL + myData.home.lastVideo}
+          path='/base'
+        />
+      ) : null}
     </div>
   )
 }

Code/src/pages/A2visit/index.tsx

@@ -8,6 +8,7 @@ import CatVideo from '@/components/CatVideo'
 import NextPage from '@/components/NextPage'
 import FloorBtn from '@/components/FloorBtn'
 import BaseImg from '@/components/BaseImg'
+import useLoding from '@/components/ownUse/useLoding'
 
 function A2visit() {
   // 过度动画
@@ -26,6 +27,9 @@ function A2visit() {
   // 点击 跳下一个章节
   const [lastVideo, setLastVideo] = useState(false)
 
+  // 先加载背景图 序列帧等 在加载视频
+  const { imgNow, imgNumFu } = useLoding(3)
+
   return (
     <div className={styles.A2visit}>
       {/* 初始静态图 */}
@@ -34,33 +38,41 @@ function A2visit() {
         iconSrc={`${baseURL}visit/mulu.png`}
         parentFu={() => btnStart()}
         bgImg={`${baseURL}${myData.visit.bgImg}`}
+        imgNow={imgNow}
+        imgNumFu={imgNumFu}
       />
 
       {/* 过度动画页面 */}
-      <CatVideo
-        isShow={cutVideoShow}
-        src={baseURL + myData.visit.videos[0]}
-        parentFu={() => cutEndFu()}
-        noBtn={true}
-      />
+      {imgNow ? (
+        <CatVideo
+          isShow={cutVideoShow}
+          src={baseURL + myData.visit.videos[0]}
+          parentFu={() => cutEndFu()}
+          noBtn={true}
+        />
+      ) : null}
 
       {/* 全景视频 */}
-      <div className={classNames('pvBox', cutVideoShow ? '' : 'pvBoxShow')}>
-        <PanoVideo />
-        {/* 跳到下一章 */}
-        <NextPage clickSon={() => setLastVideo(true)} txt='行拜谒礼' />
+      {imgNow ? (
+        <div className={classNames('pvBox', cutVideoShow ? '' : 'pvBoxShow')}>
+          <PanoVideo />
+          {/* 跳到下一章 */}
+          <NextPage clickSon={() => setLastVideo(true)} txt='行拜谒礼' />
 
-        {/* 右下角按钮 */}
-        <FloorBtn unityId='1' />
-      </div>
+          {/* 右下角按钮 */}
+          <FloorBtn unityId='1' />
+        </div>
+      ) : null}
 
       {/* 结尾动画 */}
-      <EndVideo
-        lastVideo={lastVideo}
-        delDom='.pvBox'
-        src={baseURL + myData.visit.lastVideo}
-        path='/banquet'
-      />
+      {imgNow ? (
+        <EndVideo
+          lastVideo={lastVideo}
+          delDom='.pvBox'
+          src={baseURL + myData.visit.lastVideo}
+          path='/banquet'
+        />
+      ) : null}
     </div>
   )
 }

Code/src/pages/A3banquet/index.tsx

@@ -8,6 +8,7 @@ import CatVideo from '@/components/CatVideo'
 import NextPage from '@/components/NextPage'
 import FloorBtn from '@/components/FloorBtn'
 import BaseImg from '@/components/BaseImg'
+import useLoding from '@/components/ownUse/useLoding'
 
 function A3banquet() {
   // 过度动画
@@ -26,6 +27,9 @@ function A3banquet() {
     setCutVideoShow(false)
   }, [])
 
+  // 先加载背景图 序列帧等 在加载视频
+  const { imgNow, imgNumFu } = useLoding(3)
+
   return (
     <div className={styles.A3banquet}>
       {/* 初始静态图 */}
@@ -34,34 +38,43 @@ function A3banquet() {
         iconSrc={`${baseURL}banquet/mulu.png`}
         parentFu={() => btnStart()}
         bgImg={`${baseURL}${myData.banquet.bgImg}`}
+        imgNow={imgNow}
+        imgNumFu={imgNumFu}
       />
 
       {/* 过度动画页面 */}
-      <CatVideo
-        isShow={cutVideoShow}
-        src={baseURL + myData.banquet.videos[0]}
-        // src='https://houseoss.4dkankan.com/project/henan/1.mp4'
-        parentFu={() => cutEndFu()}
-      />
+      {imgNow ? (
+        <CatVideo
+          isShow={cutVideoShow}
+          src={baseURL + myData.banquet.videos[0]}
+          // src='https://houseoss.4dkankan.com/project/henan/1.mp4'
+          parentFu={() => cutEndFu()}
+        />
+      ) : null}
 
       {/* 全景图 */}
-      <div className={classNames('pvBox', cutVideoShow ? '' : 'pvBoxShow')}>
-        <PanoImg />
-        {/* 跳到下一章 */}
-        <NextPage clickSon={() => setLastVideo(true)} txt='乐舞百戏' />
 
-        {/* 右下角按钮 */}
-        <FloorBtn unityId='2' />
-      </div>
+      {imgNow ? (
+        <div className={classNames('pvBox', cutVideoShow ? '' : 'pvBoxShow')}>
+          <PanoImg />
+          {/* 跳到下一章 */}
+          <NextPage clickSon={() => setLastVideo(true)} txt='乐舞百戏' />
+
+          {/* 右下角按钮 */}
+          <FloorBtn unityId='2' />
+        </div>
+      ) : null}
 
       {/* 结尾动画 */}
-      <EndVideo
-        lastVideo={lastVideo}
-        delDom='.pvBox'
-        src={baseURL + myData.banquet.lastVideo}
-        // src='https://houseoss.4dkankan.com/project/henan/3.mp4'
-        path='/dance'
-      />
+      {imgNow ? (
+        <EndVideo
+          lastVideo={lastVideo}
+          delDom='.pvBox'
+          src={baseURL + myData.banquet.lastVideo}
+          // src='https://houseoss.4dkankan.com/project/henan/3.mp4'
+          path='/dance'
+        />
+      ) : null}
     </div>
   )
 }

Code/src/pages/A4dance/index.tsx

@@ -8,6 +8,7 @@ import BaseImg from '@/components/BaseImg'
 import HotIcon from '@/components/HotIcon'
 import FloorBtn from '@/components/FloorBtn'
 import NextPage from '@/components/NextPage'
+import useLoding from '@/components/ownUse/useLoding'
 
 function A4dance() {
   const [baseSta, setBaseSta] = useState(false)
@@ -46,113 +47,127 @@ function A4dance() {
     setHotInd(index)
   }, [])
 
+  // 先加载背景图 序列帧等 在加载视频
+  const { imgNow, imgNumFu } = useLoding(2)
+
   return (
     <div className={styles.A4dance} style={{ backgroundImage: `url(${baseURL}dance/bj.jpg)` }}>
       {/* 初始页面 */}
-      <BaseImg isShow={baseSta} iconSrc={`${baseURL}dance/mulu.png`} parentFu={() => btnStart()} />
+      <BaseImg
+        isShow={baseSta}
+        iconSrc={`${baseURL}dance/mulu.png`}
+        parentFu={() => btnStart()}
+        imgNow={imgNow}
+        imgNumFu={imgNumFu}
+      />
 
       {/* 主要内容 */}
-      <div
-        className={classNames(
-          'pvBox',
-          lastVideo ? 'pvBoxHide' : '',
-          baseSta ? 'pvBoxShow' : 'pvBoxHide'
-        )}
-      >
-        {/* 热点图标 云气图为第一个*/}
-        {myData.dance.hot.map((item, index) =>
-          item.name === '汉代乐舞百戏' ? (
-            <div
-              onClick={() => hotShowFu(1)}
-              key={index}
-              className='A4leftBtn'
-              style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
-            >
-              汉代乐舞百戏
-            </div>
-          ) : (
-            <HotIcon
-              style={{
-                top: item.locPage.top,
-                left: item.locPage.left
-              }}
-              key={index}
-              index={index}
-              clickSon={val => hotShowFu(val)}
-              hoverSrc={item.hoverSrc}
-              isZhan={true}
-            />
-          )
-        )}
-
-        {/* 底部 */}
-        <div className='pvfloor'>
-          {myData.dance.floor.map((item, index) => (
-            <div
-              key={index}
-              onClick={() => setFloorAc(index)}
-              className={classNames('pvflRow', floorAc === index ? 'pvflRowAc' : '')}
-            >
-              {/* 蒙版 */}
-              <div className='pvflR1'></div>
-              {/* 底图 */}
-              <div className='pvflR2'>
-                <img src={baseURL + item.hoverSrc} alt='' />
-              </div>
-
-              {/* 文字 */}
-              <div className='pvflR3'>{item.name}</div>
-            </div>
-          ))}
-        </div>
-
-        {/* 跳到下一章 */}
-        <NextPage clickSon={() => setLastVideo(true)} txt='后厨备宴' />
-
-        {/* 右下角按钮 */}
-        <FloorBtn />
-
-        {/* 中间的8个动画视频*/}
+      {imgNow ? (
         <div
-          className={classNames('A4floorBox', floorAc === -1 ? 'A4floorBoxHide' : '')}
-          style={{ backgroundImage: `url(${baseURL}dance/dongBj.png)` }}
+          className={classNames(
+            'pvBox',
+            lastVideo ? 'pvBoxHide' : '',
+            baseSta ? 'pvBoxShow' : 'pvBoxHide'
+          )}
         >
-          <div className='A4fMain'>
-            {/* 边框遮盖 */}
-            <img className='A4fMainKK' src={`${baseURL}dance/dongK.png`} alt='' />
-
-            {/* 返回按钮 */}
-            <img
-              className='A4fMback'
-              onClick={() => setFloorAc(-1)}
-              src={`${baseURL}dance/back22.png`}
-              alt=''
-            />
+          {/* 热点图标 云气图为第一个*/}
+          {myData.dance.hot.map((item, index) =>
+            item.name === '汉代乐舞百戏' ? (
+              <div
+                onClick={() => hotShowFu(1)}
+                key={index}
+                className='A4leftBtn'
+                style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
+              >
+                汉代乐舞百戏
+              </div>
+            ) : (
+              <HotIcon
+                style={{
+                  top: item.locPage.top,
+                  left: item.locPage.left
+                }}
+                key={index}
+                index={index}
+                clickSon={val => hotShowFu(val)}
+                hoverSrc={item.hoverSrc}
+                isZhan={true}
+              />
+            )
+          )}
+
+          {/* 底部 */}
+          <div className='pvfloor'>
             {myData.dance.floor.map((item, index) => (
-              <div key={index} className='A4fRow' style={{ opacity: floorAc === index ? 1 : 0 }}>
-                <video
-                  className='A4fRvideo'
-                  playsInline
-                  muted
-                  webkit-playsinline='true'
-                  x5-video-player-type='h5'
-                >
-                  <source type='video/mp4' src={baseURL + item.videoSrc} />
-                  Your browser does not support the video tag.
-                </video>
+              <div
+                key={index}
+                onClick={() => setFloorAc(index)}
+                className={classNames('pvflRow', floorAc === index ? 'pvflRowAc' : '')}
+              >
+                {/* 蒙版 */}
+                <div className='pvflR1'></div>
+                {/* 底图 */}
+                <div className='pvflR2'>
+                  <img src={baseURL + item.hoverSrc} alt='' />
+                </div>
+
+                {/* 文字 */}
+                <div className='pvflR3'>{item.name}</div>
               </div>
             ))}
           </div>
+
+          {/* 跳到下一章 */}
+          <NextPage clickSon={() => setLastVideo(true)} txt='后厨备宴' />
+
+          {/* 右下角按钮 */}
+          <FloorBtn />
+
+          {/* 中间的8个动画视频*/}
+          <div
+            className={classNames('A4floorBox', floorAc === -1 ? 'A4floorBoxHide' : '')}
+            style={{ backgroundImage: `url(${baseURL}dance/dongBj.png)` }}
+          >
+            <div className='A4fMain'>
+              {/* 边框遮盖 */}
+              <img className='A4fMainKK' src={`${baseURL}dance/dongK.png`} alt='' />
+
+              {/* 返回按钮 */}
+              <img
+                className='A4fMback'
+                onClick={() => setFloorAc(-1)}
+                src={`${baseURL}dance/back22.png`}
+                alt=''
+              />
+              {myData.dance.floor.map((item, index) => (
+                <div key={index} className='A4fRow' style={{ opacity: floorAc === index ? 1 : 0 }}>
+                  <video
+                    className='A4fRvideo'
+                    playsInline
+                    muted
+                    webkit-playsinline='true'
+                    x5-video-player-type='h5'
+                  >
+                    <source type='video/mp4' src={baseURL + item.videoSrc} />
+                    Your browser does not support the video tag.
+                  </video>
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
-      </div>
+      ) : null}
 
       {/* 点击四神云气图的动画 */}
-      <EndVideo
-        lastVideo={hotInd === 0}
-        delDom='.pvBox'
-        src={baseURL + myData.dance.hot[0].videoSrc}
-        path='/yun'
-      />
+      {imgNow ? (
+        <EndVideo
+          lastVideo={hotInd === 0}
+          delDom='.pvBox'
+          src={baseURL + myData.dance.hot[0].videoSrc}
+          path='/yun'
+        />
+      ) : null}
+
       {/* 点击其他热点 */}
       {hotInd > 0 ? (
         <div className={'A4othHot'}>
@@ -164,12 +179,14 @@ function A4dance() {
         </div>
       ) : null}
       {/* 结尾动画 */}
-      <EndVideo
-        lastVideo={lastVideo}
-        delDom='.pvBox'
-        src={baseURL + myData.dance.lastVideo}
-        path='/chef'
-      />
+      {imgNow ? (
+        <EndVideo
+          lastVideo={lastVideo}
+          delDom='.pvBox'
+          src={baseURL + myData.dance.lastVideo}
+          path='/chef'
+        />
+      ) : null}
     </div>
   )
 }

Code/src/pages/A5chef/index.tsx

@@ -7,6 +7,7 @@ import BaseImg from '@/components/BaseImg'
 import HotIcon from '@/components/HotIcon'
 import NextPage from '@/components/NextPage'
 import FloorBtn from '@/components/FloorBtn'
+import useLoding from '@/components/ownUse/useLoding'
 
 function A5chef() {
   // 点击继续
@@ -52,6 +53,9 @@ function A5chef() {
   // 热点位移
   const [bgMove, setBgMove] = useState('')
 
+  // 先加载背景图 序列帧等 在加载视频
+  const { imgNow, imgNumFu } = useLoding(2)
+
   return (
     <div className={styles.A5chef}>
       {/* 整体盒子 */}
@@ -64,91 +68,100 @@ function A5chef() {
           isShow={!baseFlag}
           iconSrc={`${baseURL}chef/mulu.png`}
           parentFu={() => btnStart()}
+          imgNow={imgNow}
+          imgNumFu={imgNumFu}
         />
         {/* 热点按钮页面 */}
-        <div className={classNames('A5hotBox', baseFlag ? '' : 'A5hotBoxAc')}>
-          {/* 循环渲染热点 */}
-          {myData.chef.hot.map((item, index) => (
-            <HotIcon
-              style={{
-                top: item.loc.top,
-                left: item.loc.left
-              }}
-              key={index}
-              index={index}
-              clickSon={val => hotIndFu(val)}
-              hoverSrc={item.hoverSrc}
-            />
-          ))}
-
-          {/* 后厨群像 */}
-          <div
-            style={{ backgroundImage: `url(${baseURL}chef/houChu.jpg)` }}
-            className={classNames('A5chu', chuShow ? 'A5chuShow' : '')}
-          >
-            {/* 返回按钮 */}
+        {imgNow ? (
+          <div className={classNames('A5hotBox', baseFlag ? '' : 'A5hotBoxAc')}>
+            {/* 循环渲染热点 */}
+            {myData.chef.hot.map((item, index) => (
+              <HotIcon
+                style={{
+                  top: item.loc.top,
+                  left: item.loc.left
+                }}
+                key={index}
+                index={index}
+                clickSon={val => hotIndFu(val)}
+                hoverSrc={item.hoverSrc}
+              />
+            ))}
+
+            {/* 后厨群像 */}
             <div
-              style={{ backgroundImage: `url(${baseURL}chef/back23.png)` }}
-              className='A5hotBoxBack hoverD'
-              title='返回'
-              onClick={() => setChuShow(false)}
-            ></div>
-          </div>
-          <div
-            onClick={() => setChuShow(true)}
-            className='A5chuBtn'
-            style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
-          >
-            后厨群像
+              style={{ backgroundImage: `url(${baseURL}chef/houChu.jpg)` }}
+              className={classNames('A5chu', chuShow ? 'A5chuShow' : '')}
+            >
+              {/* 返回按钮 */}
+              <div
+                style={{ backgroundImage: `url(${baseURL}chef/back23.png)` }}
+                className='A5hotBoxBack hoverD'
+                title='返回'
+                onClick={() => setChuShow(false)}
+              ></div>
+            </div>
+            <div
+              onClick={() => setChuShow(true)}
+              className='A5chuBtn'
+              style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
+            >
+              后厨群像
+            </div>
+
+            {/* 跳到下一章 */}
+            <NextPage clickSon={() => setLastVideo(true)} txt='田间耕作' />
+
+            {/* 右下角按钮 */}
+            <FloorBtn />
           </div>
-
-          {/* 跳到下一章 */}
-          <NextPage clickSon={() => setLastVideo(true)} txt='田间耕作' />
-
-          {/* 右下角按钮 */}
-          <FloorBtn />
-        </div>
+        ) : null}
       </div>
 
       {/* 点击热点之后出来的视频 */}
-      {myData.chef.hot.map((item, index) => (
-        <div key={index} className={classNames('A5video', hotInd === index ? 'A5videoAc' : '')}>
-          <video
-            ref={hotInd === index ? hotAcRef : null}
-            playsInline
-            muted
-            webkit-playsinline='true'
-            x5-video-player-type='h5'
-            loop
-          >
-            <source type='video/mp4' src={baseURL + item.videoSrc} />
-            Your browser does not support the video tag.
-          </video>
-
-          {/* 热点左侧图文信息 */}
-          <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(${baseURL}chef/back22.png)` }}
-            className='A5vBack hoverD'
-            title='返回'
-            onClick={() => setHotInd(-1)}
-          ></div>
-        </div>
-      ))}
+      {imgNow
+        ? myData.chef.hot.map((item, index) => (
+            <div key={index} className={classNames('A5video', hotInd === index ? 'A5videoAc' : '')}>
+              <video
+                ref={hotInd === index ? hotAcRef : null}
+                playsInline
+                muted
+                webkit-playsinline='true'
+                x5-video-player-type='h5'
+                loop
+              >
+                <source type='video/mp4' src={baseURL + item.videoSrc} />
+                Your browser does not support the video tag.
+              </video>
+
+              {/* 热点左侧图文信息 */}
+              <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(${baseURL}chef/back22.png)` }}
+                className='A5vBack hoverD'
+                title='返回'
+                onClick={() => setHotInd(-1)}
+              ></div>
+            </div>
+          ))
+        : null}
 
       {/* 结尾动画 */}
-      <EndVideo
-        lastVideo={lastVideo}
-        src={baseURL + myData.chef.lastVideo}
-        path='/plow'
-        delDom='.A5video'
-        noBtn={true}
-      />
+      {imgNow ? (
+        <EndVideo
+          lastVideo={lastVideo}
+          src={baseURL + myData.chef.lastVideo}
+          path='/plow'
+          delDom='.A5video'
+          noBtn={true}
+        />
+      ) : null}
     </div>
   )
 }

Code/src/pages/A6plow/index.tsx

@@ -9,6 +9,7 @@ import FloorBtn from '@/components/FloorBtn'
 import HotIcon from '@/components/HotIcon'
 import Hot2 from '../A2visit/PanoVideo/Hot2'
 import { PlowHotType } from '@/types'
+import useLoding from '@/components/ownUse/useLoding'
 
 function A6plow() {
   // 初始显示和隐藏
@@ -69,6 +70,9 @@ function A6plow() {
     return info
   }, [hotInd, leftAc])
 
+  // 先加载背景图 序列帧等 在加载视频
+  const { imgNow, imgNumFu } = useLoding(3)
+
   return (
     <div className={styles.A6plow}>
       {/* 初始静态图 */}
@@ -77,85 +81,91 @@ function A6plow() {
         iconSrc={`${baseURL}plow/mulu.png`}
         parentFu={() => btnStart()}
         bgImg={`${baseURL}${myData.plow.baseImg}`}
+        imgNow={imgNow}
+        imgNumFu={imgNumFu}
       />
 
       {/* 主要内容 */}
-      <div className={classNames('A6main', cutVideoShow ? 'A6mainShow' : '')}>
-        {/* 左侧title */}
-        <div className='A6Lbtn' style={{ backgroundImage: `url(${baseURL}plow/leftBg.png)` }}>
-          {myData.plow.info.map((item, index) => (
-            <div
-              key={index}
-              className='A6LbtnRow'
-              onClick={() => leftAcFu(index)}
-              style={{
-                backgroundImage: `url(${baseURL}plow/left${leftAc === index ? 'Ac' : ''}.png)`,
-                color: leftAc === index ? '#BD7656' : '#DACB8B'
-              }}
-            >
-              {item.name}
-            </div>
-          ))}
-        </div>
-
-        {/* 底部文字 */}
-        <div
-          className='A6txt'
-          style={{ backgroundImage: `url(${baseURL}plow/txtBg.png)` }}
-          dangerouslySetInnerHTML={{ __html: floorTxt }}
-        ></div>
-
-        {/* 视频加热点 */}
-        <div className='A6videoBox'>
-          {myData.plow.info.map((item, index) => (
-            <div className={classNames(leftAc === index ? 'A6vShow' : '')} key={index}>
-              <video
-                className='A6video'
-                playsInline
-                muted
-                webkit-playsinline='true'
-                x5-video-player-type='h5'
-                loop
+      {imgNow ? (
+        <div className={classNames('A6main', cutVideoShow ? 'A6mainShow' : '')}>
+          {/* 左侧title */}
+          <div className='A6Lbtn' style={{ backgroundImage: `url(${baseURL}plow/leftBg.png)` }}>
+            {myData.plow.info.map((item, index) => (
+              <div
+                key={index}
+                className='A6LbtnRow'
+                onClick={() => leftAcFu(index)}
+                style={{
+                  backgroundImage: `url(${baseURL}plow/left${leftAc === index ? 'Ac' : ''}.png)`,
+                  color: leftAc === index ? '#BD7656' : '#DACB8B'
+                }}
               >
-                <source type='video/mp4' src={baseURL + item.videoSrc} />
-                Your browser does not support the video tag.
-              </video>
-
-              {/* 热点 */}
-              {item.hot.map((v: PlowHotType, i) => (
-                <HotIcon
-                  style={{
-                    top: v.locPage.top,
-                    left: v.locPage.left
-                  }}
-                  key={i}
-                  index={i}
-                  clickSon={val => setHotInd(val)}
-                  hoverSrc={v.hoverSrc}
-                />
-              ))}
-            </div>
-          ))}
+                {item.name}
+              </div>
+            ))}
+          </div>
+
+          {/* 底部文字 */}
+          <div
+            className='A6txt'
+            style={{ backgroundImage: `url(${baseURL}plow/txtBg.png)` }}
+            dangerouslySetInnerHTML={{ __html: floorTxt }}
+          ></div>
+
+          {/* 视频加热点 */}
+          <div className='A6videoBox'>
+            {myData.plow.info.map((item, index) => (
+              <div className={classNames(leftAc === index ? 'A6vShow' : '')} key={index}>
+                <video
+                  className='A6video'
+                  playsInline
+                  muted
+                  webkit-playsinline='true'
+                  x5-video-player-type='h5'
+                  loop
+                >
+                  <source type='video/mp4' src={baseURL + item.videoSrc} />
+                  Your browser does not support the video tag.
+                </video>
+
+                {/* 热点 */}
+                {item.hot.map((v: PlowHotType, i) => (
+                  <HotIcon
+                    style={{
+                      top: v.locPage.top,
+                      left: v.locPage.left
+                    }}
+                    key={i}
+                    index={i}
+                    clickSon={val => setHotInd(val)}
+                    hoverSrc={v.hoverSrc}
+                  />
+                ))}
+              </div>
+            ))}
+          </div>
+
+          {/* 跳到下一章 */}
+          <NextPage clickSon={() => setLastVideo(true)} txt='结束耕作' />
+          {/* 右下角按钮 */}
+          <FloorBtn />
         </div>
-
-        {/* 跳到下一章 */}
-        <NextPage clickSon={() => setLastVideo(true)} txt='结束耕作' />
-        {/* 右下角按钮 */}
-        <FloorBtn />
-      </div>
+      ) : null}
 
       {hotInd >= 0 && hotInfo.name ? (
         <Hot2 data={hotInfo.data} closeFu={() => setHotInd(-1)} name={hotInfo.name} />
       ) : null}
 
       {/* 结尾动画 */}
-      <EndVideo
-        lastVideo={lastVideo}
-        delDom='.A6main'
-        src={baseURL + myData.plow.lastVideo}
-        path='/end'
-        noBtn={true}
-      />
+      {imgNow ? (
+        <EndVideo
+          lastVideo={lastVideo}
+          delDom='.A6main'
+          src={baseURL + myData.plow.lastVideo}
+          path='/end'
+          noBtn={true}
+        />
+      ) : null}
     </div>
   )
 }

Code/src/pages/B1more/S1manor/index.module.scss

@@ -1,7 +1,6 @@
 .S1manor {
   width: 100%;
   height: 100%;
-  background-size: 100% 100%;
   position: relative;
   :global {
     .S1left {

Code/src/pages/B1more/S1manor/index.tsx

@@ -25,11 +25,7 @@ function S1manor({ hidden, isLoding }: Props) {
   }, [])
 
   return (
-    <div
-      hidden={hidden}
-      className={styles.S1manor}
-      style={{ backgroundImage: `url(${baseURL + data.bg})` }}
-    >
+    <div hidden={hidden} className={styles.S1manor}>
       {/* 左侧图标 */}
       <div
         className='S1left'

Code/src/pages/B1more/index.tsx

@@ -8,6 +8,7 @@ import S1manor from './S1manor'
 import S2mien from './S2mien'
 import S3goods from './S3goods'
 import BtnRight from '@/components/BtnRight'
+import useLoding from '@/components/ownUse/useLoding'
 
 const videoObj = {
   探索庄园: {
@@ -65,63 +66,86 @@ function B1more() {
   // 初始加载中动画
   const [isLoding, setIsLoding] = useState(true)
 
+  // 先加载背景图 序列帧等 在加载视频
+  const { imgNow, imgNumFu } = useLoding(1)
+
   return (
     <div className={styles.B1more}>
       {/* 三个主要页面 */}
-      <S1manor hidden={!!videoSrc || floorTxt !== '探索庄园'} isLoding={isLoding} />
-      <S2mien hidden={!!videoSrc || floorTxt !== '汉代风华'} />
-      <S3goods hidden={!!videoSrc || floorTxt !== '文物欣赏'} />
+
+      <img onLoad={imgNumFu} id='bgImgBox' src={baseURL + myData.more['探索庄园'].bg} alt='' />
+
+      {imgNow ? (
+        <>
+          <S1manor hidden={!!videoSrc || floorTxt !== '探索庄园'} isLoding={isLoding} />
+          <S2mien hidden={!!videoSrc || floorTxt !== '汉代风华'} />
+          <S3goods hidden={!!videoSrc || floorTxt !== '文物欣赏'} />
+        </>
+      ) : null}
 
       {/* 初始静态图 */}
-      <BaseImg isShow={!isLoding} iconSrc={``} parentFu={() => setIsLoding(false)} moreSta={true} />
+      <BaseImg
+        isShow={!isLoding}
+        iconSrc={``}
+        parentFu={() => setIsLoding(false)}
+        moreSta={true}
+        imgNow={imgNow}
+        imgNumFu={imgNumFu}
+      />
 
       {/* 6个视频 */}
-      {myData.more.videos.map((src, index) => (
-        <div
-          className={classNames('A6videoBox', videoSrc === src ? 'A6videoBoxShow' : '')}
-          key={index}
-        >
-          <video
-            playsInline
-            muted
-            webkit-playsinline='true'
-            x5-video-player-type='h5'
-            onEnded={() => setVideoSrc('')}
-            src={baseURL + src}
-          >
-            <source type='video/mp4' src={baseURL + src} />
-            Your browser does not support the video tag.
-          </video>
-
-          {/* 右下角的跳过按钮 */}
-          {myData.isLdong ? null : (
-            <BtnRight imgName='skip' clickSon={() => setVideoSrc('')} title='跳过' />
-          )}
-        </div>
-      ))}
+      {imgNow
+        ? myData.more.videos.map((src, index) => (
+            <div
+              className={classNames('A6videoBox', videoSrc === src ? 'A6videoBoxShow' : '')}
+              key={index}
+            >
+              <video
+                playsInline
+                muted
+                webkit-playsinline='true'
+                x5-video-player-type='h5'
+                onEnded={() => setVideoSrc('')}
+                src={baseURL + src}
+              >
+                <source type='video/mp4' src={baseURL + src} />
+                Your browser does not support the video tag.
+              </video>
+
+              {/* 右下角的跳过按钮 */}
+              {myData.isLdong ? null : (
+                <BtnRight imgName='skip' clickSon={() => setVideoSrc('')} title='跳过' />
+              )}
+            </div>
+          ))
+        : null}
 
       {/* 底部三个按钮 */}
-      <div className='A6floorBox' style={{ opacity: isLoding ? 0 : 1 }}>
-        {floorArr.map(v => (
-          <div
-            onClick={() => setFloorTxt(v)}
-            className={classNames(v === floorTxt ? 'A6FrowAc' : '')}
-            key={v}
-          >
-            {v}
-          </div>
-        ))}
-      </div>
+      {imgNow ? (
+        <div className='A6floorBox' style={{ opacity: isLoding ? 0 : 1 }}>
+          {floorArr.map(v => (
+            <div
+              onClick={() => setFloorTxt(v)}
+              className={classNames(v === floorTxt ? 'A6FrowAc' : '')}
+              key={v}
+            >
+              {v}
+            </div>
+          ))}
+        </div>
+      ) : null}
 
       {/* 右下角的图标 */}
-      <div
-        hidden={floorTxt !== '探索庄园'}
-        className='A6rBtn'
-        style={{ opacity: isLoding ? 0 : 1, zIndex: videoSrc ? 10 : 30 }}
-      >
-        <div className='A6rBtn1' title='陶庄园' onClick={() => history.push('/unend')}></div>
-        <div className='A6rBtn2' title='仙居世界' onClick={() => history.push('/hots')}></div>
-      </div>
+      {imgNow ? (
+        <div
+          hidden={floorTxt !== '探索庄园'}
+          className='A6rBtn'
+          style={{ opacity: isLoding ? 0 : 1, zIndex: videoSrc ? 10 : 30 }}
+        >
+          <div className='A6rBtn1' title='陶庄园' onClick={() => history.push('/unend')}></div>
+          <div className='A6rBtn2' title='仙居世界' onClick={() => history.push('/hots')}></div>
+        </div>
+      ) : null}
     </div>
   )
 }

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

@@ -1,5 +1,4 @@
 .B3yun {
-  background-size: 100% 100%;
   position: relative;
   padding: 70px 30px 40px;
   display: flex;
@@ -11,6 +10,8 @@
       width: 530px;
       height: 100%;
       display: flex;
+      position: relative;
+      z-index: 2;
       .yunllCon {
         width: 400px;
         height: 250px;
@@ -18,9 +19,9 @@
         .yunll1 {
           width: 100%;
           height: 100%;
-          background-size: 100% 100%;
           position: relative;
           transition: transform 0.3s;
+
           // transform: scale(2) translate(10px, 10px);
 
           // 高亮白色
@@ -156,6 +157,8 @@
       width: calc(100% - 480px);
       height: calc(100% - 40px);
       color: #fff;
+      position: relative;
+      z-index: 2;
 
       .yunrr1 {
         position: relative;

Code/src/pages/B3yun/index.tsx

@@ -4,6 +4,7 @@ import { baseURL, myData } from '@/utils/http'
 import history from '@/utils/history'
 import classNames from 'classnames'
 import B3txt from './B3txt'
+import useLoding from '@/components/ownUse/useLoding'
 
 function B3yun() {
   // 一级图标id
@@ -55,18 +56,22 @@ function B3yun() {
     [hotArr]
   )
 
+  // 先加载背景图 序列帧等 在加载视频
+  const { imgNow, imgNumFu } = useLoding(2)
+
   return (
-    <div className={styles.B3yun} style={{ backgroundImage: `url(${baseURL + myData.yun.bjImg})` }}>
+    <div className={styles.B3yun}>
+      <img onLoad={imgNumFu} id='bgImgBox' src={baseURL + myData.yun.bjImg} alt='' />
+
       {/* 左侧主体 */}
       <div className='yunll' style={{ pointerEvents: ac2 ? 'none' : 'auto' }}>
         {/* 主要 */}
         <div className='yunllCon'>
-          <div
-            className='yunll1'
-            style={{ backgroundImage: `url(${baseURL}yun/di.jpg)`, transform: imgChange }}
-          >
+          <div className='yunll1' style={{ transform: imgChange }}>
+            <img onLoad={imgNumFu} id='bgImgBox' src={`${baseURL}yun/di.jpg`} alt='' />
+
             {/* 高亮白色盒子 */}
-            {ac1 > 0 ? (
+            {ac1 > 0 && imgNow ? (
               <div
                 style={{ backgroundImage: `url(${baseURL}yun/liang${ac1}.png)` }}
                 className={classNames('yunll1Ac', ac2 ? 'yunll1AcHide' : '')}
@@ -86,46 +91,55 @@ function B3yun() {
             ) : null}
 
             {/* 二级别高亮 */}
-
-            <div className={classNames('yunAc2Box', ac2 ? 'yunAc2BoxAc' : '')}>
-              {ac2 ? <img className='yunShan' src={`${baseURL}yun/${ac2}.png`} alt='' /> : null}
-            </div>
+            {imgNow ? (
+              <div className={classNames('yunAc2Box', ac2 ? 'yunAc2BoxAc' : '')}>
+                {ac2 ? <img className='yunShan' src={`${baseURL}yun/${ac2}.png`} alt='' /> : null}
+              </div>
+            ) : null}
 
             {/* {ac1 > 0 && ac2 ? <div className=''></div> : null} */}
           </div>
         </div>
 
-        <div className='yunll2'>
-          {myData.yun.iconArr.map(item => (
-            <div
-              onClick={() => setAc1(item.id)}
-              className={classNames('yunll2Row', ac1 === item.id ? 'yunll2RowAc' : '')}
-              key={item.id}
-              title={item.title}
-            ></div>
-          ))}
-        </div>
+        {imgNow ? (
+          <div className='yunll2'>
+            {myData.yun.iconArr.map(item => (
+              <div
+                onClick={() => setAc1(item.id)}
+                className={classNames('yunll2Row', ac1 === item.id ? 'yunll2RowAc' : '')}
+                key={item.id}
+                title={item.title}
+              ></div>
+            ))}
+          </div>
+        ) : null}
       </div>
 
       {/* 右侧文字 */}
-      <div className='yunrr' style={{ pointerEvents: ac2 ? 'none' : 'auto' }}>
-        <div className='yunrr1'>
-          <h2>{myData.yun.name}</h2>
-          <div style={{ backgroundImage: `url(${baseURL}yun/titLiang.png)` }}>{myData.yun.tit}</div>
-        </div>
+      {imgNow ? (
+        <div className='yunrr' style={{ pointerEvents: ac2 ? 'none' : 'auto' }}>
+          <div className='yunrr1'>
+            <h2>{myData.yun.name}</h2>
+            <div style={{ backgroundImage: `url(${baseURL}yun/titLiang.png)` }}>
+              {myData.yun.tit}
+            </div>
+          </div>
 
-        <div className='yunrr2'>
-          <div>
-            <B3txt ac1={ac1} ac2={ac2} setAc2Fu={val => setAc2Fu(val)} />
+          <div className='yunrr2'>
+            <div>
+              <B3txt ac1={ac1} ac2={ac2} setAc2Fu={val => setAc2Fu(val)} />
+            </div>
           </div>
         </div>
-      </div>
+      ) : null}
 
       {/* 右下角的图标 */}
-      <div className='yunBtn'>
-        <div className='yunBtn1' title='仙居世界' onClick={() => history.push('/hots')}></div>
-        <div className='yunBtn2' title='返回' onClick={() => history.go(-1)}></div>
-      </div>
+      {imgNow ? (
+        <div className='yunBtn'>
+          <div className='yunBtn1' title='仙居世界' onClick={() => history.push('/hots')}></div>
+          <div className='yunBtn2' title='返回' onClick={() => history.go(-1)}></div>
+        </div>
+      ) : null}
     </div>
   )
 }

资源/staticData/more/modelLoding/model.html

@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="./4dage.js"></script>
-  <title>Document</title>
-  <style>
-    html {
-      overflow: hidden;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="ui"></div>
-  <script>
-    let number = getQueryVariable("m");
-    let num = getQueryVariable("n");
-    let type = getQueryVariable("r");
-    // console.log('ppppppppp',number);
-
-    // window.autoRotate = true; // 是否自动旋转
-
-    
-    // 打包配置(甲方没有https)
-    // let src = '/web/staticData'
-    let src = ''
-
-    if (window.location.href.includes('http://')) {
-      // 本地环境
-      src = 'http://127.0.0.1:8080/web/staticData'
-    } else {
-      // 正式环境
-      src = '/web/staticData'
-    }
-
-    // fdage.embed( number, {
-    fdage.embed(`${src}/${type}/${number}/${num}.4dage`, {
-      transparentBackground: true,
-      width: 800,
-      height: 600,
-      autoStart: true,
-      fullFrame: true,
-      pagePreset: false
-    });
-  </script>
-</body>
-
-</html>