封装一波

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

@@ -0,0 +1,83 @@
+.BaseImg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 11;
+  opacity: 1;
+  transition: opacity 0.5s;
+  background-color: rgba(0, 0, 0, 0.4);
+  :global {
+    .BIcon {
+      position: absolute;
+      top: -60px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 30px;
+      z-index: 10;
+      cursor: pointer;
+    }
+
+    .BIlogo {
+      position: absolute;
+      top: 0px;
+      width: 650px;
+      max-width: 90%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .BIbaseBtn {
+      position: absolute;
+      bottom: 40px;
+      left: 50%;
+      transform: translateX(-50%);
+      cursor: pointer;
+      width: 100px;
+      height: auto;
+      z-index: 10;
+      & > img {
+        width: 100%;
+      }
+
+      .BIBtxt {
+        position: absolute;
+        top: 0;
+        left: 0;
+        color: #fffddc;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: all 0.3s;
+        &:hover {
+          color: #ead98f;
+        }
+      }
+      .BIBxian {
+        position: absolute;
+        bottom: -10px;
+        left: 0;
+        width: 100%;
+        padding: 0 10px;
+        height: 2px;
+        & > div {
+          width: 100%;
+          height: 100%;
+          background-color: rgba(231, 214, 142, 0.6);
+          & > div {
+            width: 0%;
+            height: 100%;
+
+            background-color: #fffddc;
+          }
+        }
+      }
+    }
+  }
+}
+
+.BaseImgHide {
+  opacity: 0;
+  pointer-events: none;
+}

Code/src/components/BaseImg/index.tsx

@@ -0,0 +1,63 @@
+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'
+
+type Props = {
+  isShow: boolean //是否显示
+  iconSrc: string //icon 图标
+  parentFu: () => void //点击继续的方法（调用父亲）
+}
+
+function BaseImg({ isShow, iconSrc, parentFu }: Props) {
+  const { dataUrlSame } = useDataUrl()
+
+  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
+
+  const timeRR = useRef(-1)
+
+  useEffect(() => {
+    clearInterval(timeRR.current)
+    timeRR.current = window.setInterval(() => {
+      if (loding >= 100) {
+        clearInterval(timeRR.current)
+        return
+      }
+      setLoding(loding + 1)
+    }, 40)
+  }, [loding])
+
+  const btnStartFu = useCallback(() => {
+    if (loding >= 100) {
+      parentFu()
+    }
+  }, [loding, parentFu])
+
+  return (
+    <div className={classNames(styles.BaseImg, isShow ? styles.BaseImgHide : '')}>
+      <img className='BIlogo' src={iconSrc} alt='' />
+      <div className='BIbaseBtn' onClick={btnStartFu}>
+        {/* anpg动图 */}
+        <div className='BIcon'>
+          <img src={`${dataUrlSame}visit/arrow.png`} alt='' />
+        </div>
+
+        <img src={`${dataUrlSame}visit/btn.png`} alt='' />
+
+        <div className='BIBtxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
+        {loding >= 100 ? null : (
+          <div className='BIBxian'>
+            <div>
+              <div style={{ width: loding + '%' }}></div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+const MemoBaseImg = React.memo(BaseImg)
+
+export default MemoBaseImg

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

@@ -1,4 +1,82 @@
 .BaseVideo {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 11;
+  opacity: 1;
+  transition: opacity 0.5s;
   :global {
+    .BVBIcon {
+      position: absolute;
+      top: -60px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 30px;
+      z-index: 10;
+      cursor: pointer;
+    }
+
+    .BaseVideoIcon {
+      position: absolute;
+      top: 0;
+      width: 650px;
+      max-width: 90%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .BVbaseBtn {
+      position: absolute;
+      bottom: 40px;
+      left: 50%;
+      transform: translateX(-50%);
+      cursor: pointer;
+      width: 100px;
+      height: auto;
+      z-index: 10;
+      & > img {
+        width: 100%;
+      }
+
+      .BVBtxt {
+        position: absolute;
+        top: 0;
+        left: 0;
+        color: #fffddc;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: color 0.3s;
+        &:hover {
+          color: #ead98f;
+        }
+      }
+      .BVBxian {
+        position: absolute;
+        bottom: -10px;
+        left: 0;
+        width: 100%;
+        padding: 0 10px;
+        height: 2px;
+        & > div {
+          width: 100%;
+          height: 100%;
+          background-color: rgba(231, 214, 142, 0.6);
+          & > div {
+            width: 0%;
+            height: 100%;
+
+            background-color: #fffddc;
+          }
+        }
+      }
+    }
   }
 }
+
+.BaseVideoHide {
+  opacity: 0;
+  pointer-events: none;
+}

Code/src/components/BaseVideo/index.tsx

@@ -3,12 +3,13 @@ import styles from './index.module.scss'
 import classNames from 'classnames'
 import { myData } from '@/utils/http'
 import useDataUrl from '../ownUse/useDataUrl'
+import { domDelOwnFu } from '@/utils/utilsSome'
 
 type Props = {
-  isShow: boolean
-  imgSrc: string
-  videoSrc: string
-  parentFu: () => void
+  isShow: boolean //是否显示
+  imgSrc: string //标题图片的路径
+  videoSrc: string //视频路径
+  parentFu: () => void //点击继续的方法（调用父亲）
 }
 
 function BaseVideo({ isShow, imgSrc, videoSrc, parentFu }: Props) {
@@ -42,23 +43,30 @@ function BaseVideo({ isShow, imgSrc, videoSrc, parentFu }: Props) {
   const btnStartFu = useCallback(() => {
     if (loding >= 100) {
       parentFu()
+      // 0.5s之后删除初始视频
+      setTimeout(() => {
+        domDelOwnFu('#BaseVideo')
+      }, 500)
     }
   }, [loding, parentFu])
 
   return (
-    <div className={classNames(styles.BaseVideo, isShow ? '' : styles.A2baseHide)}>
-      <img src={imgSrc} alt='' />
-      <div className='A2baseBtn' onClick={btnStartFu}>
+    <div
+      id='BaseVideo'
+      className={classNames(styles.BaseVideo, isShow ? '' : styles.BaseVideoHide)}
+    >
+      <img className='BaseVideoIcon' src={imgSrc} alt='' />
+      <div className='BVbaseBtn' onClick={btnStartFu}>
         {/* anpg动图 */}
-        <div className='A2BIcon'>
+        <div className='BVBIcon'>
           <img src={`${dataUrlSame}visit/arrow.png`} alt='' />
         </div>
 
         <img src={`${dataUrlSame}visit/btn.png`} alt='' />
 
-        <div className='A2Btxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
+        <div className='BVBtxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
         {loding >= 100 ? null : (
-          <div className='A2Bxian'>
+          <div className='BVBxian'>
             <div>
               <div style={{ width: loding + '%' }}></div>
             </div>

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

@@ -0,0 +1,24 @@
+.CatVideo {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 10;
+  opacity: 1;
+  transition: opacity 0.5s;
+  :global {
+    // 跳过按钮
+    .CatTiao {
+      position: absolute;
+      width: 50px;
+      height: 50px;
+      cursor: pointer;
+      bottom: 20px;
+      right: 20px;
+      background-size: 100% 100%;
+    }
+  }
+}
+.CatVideoHide {
+  opacity: 0;
+  pointer-events: none;
+}

Code/src/components/CatVideo/index.tsx

@@ -0,0 +1,52 @@
+import React, { useCallback } from 'react'
+import styles from './index.module.scss'
+import classNames from 'classnames'
+import useDataUrl from '../ownUse/useDataUrl'
+import { domDelOwnFu } from '@/utils/utilsSome'
+
+type Props = {
+  isShow: boolean
+  src: string
+  parentFu: () => void
+  noBtn?: boolean //没有跳过按钮
+}
+
+function CatVideo({ isShow, src, parentFu, noBtn }: Props) {
+  const { dataUrlSame } = useDataUrl()
+
+  const playEndFu = useCallback(() => {
+    parentFu()
+    // 0.5s之后删除过度视频
+    setTimeout(() => {
+      domDelOwnFu('#CatVideo')
+    }, 500)
+  }, [parentFu])
+
+  return (
+    <div id='CatVideo' className={classNames(styles.CatVideo, isShow ? '' : styles.CatVideoHide)}>
+      <video
+        playsInline
+        muted
+        webkit-playsinline='true'
+        x5-video-player-type='h5'
+        src={src}
+        onEnded={playEndFu}
+      >
+        <source type='video/mp4' />
+        Your browser does not support the video tag.
+      </video>
+
+      <div
+        hidden={noBtn}
+        title='跳过'
+        className='CatTiao hoverD'
+        style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}
+        onClick={playEndFu}
+      ></div>
+    </div>
+  )
+}
+
+const MemoCatVideo = React.memo(CatVideo)
+
+export default MemoCatVideo

Code/src/components/EndVideo/index.tsx

@@ -6,11 +6,11 @@ import history from '@/utils/history'
 import useDataUrl from '../ownUse/useDataUrl'
 
 type Props = {
-  lastVideo: boolean
-  src: string
-  path: string
-  delDom?: string
-  noBtn?: boolean
+  lastVideo: boolean //是否显示
+  src: string //视频路径
+  path: string //点击跳过 或者视频播完 跳路由的路径
+  delDom?: string //有的话 就删除这个dom
+  noBtn?: boolean //没有跳过按钮
 }
 
 // 页面结尾的视频
@@ -27,7 +27,7 @@ function EndVideo({ lastVideo, delDom, src, path, noBtn }: Props) {
         }
       }, 100)
 
-      // 0.5s之后删除自己
+      // 0.5s之后删除上级元素
       if (delDom) {
         setTimeout(() => {
           domDelOwnFu(delDom)
@@ -54,7 +54,7 @@ function EndVideo({ lastVideo, delDom, src, path, noBtn }: Props) {
       <div
         hidden={noBtn}
         title='跳过'
-        className='endVdieoBtn'
+        className='endVdieoBtn hoverD'
         style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}
         onClick={() => history.push(path)}
       ></div>

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

@@ -51,6 +51,10 @@
           align-items: center;
           color: #fffddc;
           font-size: 16px;
+          transition: all 0.3s;
+          &:hover {
+            color: #ead98f;
+          }
         }
       }
 
@@ -152,6 +156,10 @@
           font-size: 16px;
           text-align: center;
           width: 100px;
+          transition: all 0.3s;
+          &:hover {
+            color: #ead98f;
+          }
           & > img {
             width: 60px;
             height: auto;
@@ -167,34 +175,12 @@
         position: absolute;
         z-index: 10;
         bottom: 20px;
-        left: 50%;
-        transform: translateX(-50%);
+        left: 47%;
         width: 40px;
         height: auto;
-      }
-    }
-
-    // 屏幕>=1200
-    @media screen and (min-width: 1200px) {
-      .A1base {
-        .A1lodingBtn {
-          & > div {
-            transition: all 0.3s;
-            &:hover {
-              color: #ead98f;
-            }
-          }
-        }
-      }
-
-      .A1btnBox {
-        & > div {
-          .A1videoBtnNext {
-            transition: all 0.3s;
-            &:hover {
-              color: #ead98f;
-            }
-          }
+        transition: transform 0.3s;
+        &:hover {
+          transform: scale(1.1);
         }
       }
     }

Code/src/pages/A1home/index.tsx

@@ -134,8 +134,6 @@ function A1home() {
           <div className='A1loding sizeNo'>{loding}%</div>
         )}
 
-        {/* 序列帧动画 */}
-
         {/* 底部颜色条 */}
         <img ref={A1BfloorRef} className='A1Bfloor' src={`${dataUrlSame}home/floor.png`} alt='' />
 

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

@@ -5,97 +5,6 @@
       height: 100%;
       object-fit: fill;
     }
-    .A2base {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      z-index: 11;
-      opacity: 1;
-      transition: opacity 0.5s;
-
-      .A2BIcon {
-        position: absolute;
-        top: -60px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 30px;
-        z-index: 10;
-        cursor: pointer;
-      }
-
-      & > img {
-        position: absolute;
-        top: 0;
-        width: 650px;
-        max-width: 90%;
-        left: 50%;
-        transform: translateX(-50%);
-      }
-
-      .A2baseBtn {
-        position: absolute;
-        bottom: 40px;
-        left: 50%;
-        transform: translateX(-50%);
-        cursor: pointer;
-        width: 100px;
-        height: auto;
-        z-index: 10;
-        & > img {
-          width: 100%;
-        }
-
-        .A2Btxt {
-          position: absolute;
-          top: 0;
-          left: 0;
-          color: #fffddc;
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-        .A2Bxian {
-          position: absolute;
-          bottom: -10px;
-          left: 0;
-          width: 100%;
-          padding: 0 10px;
-          height: 2px;
-          & > div {
-            width: 100%;
-            height: 100%;
-            background-color: rgba(231, 214, 142, 0.6);
-            & > div {
-              width: 0%;
-              height: 100%;
-
-              background-color: #fffddc;
-            }
-          }
-        }
-      }
-    }
-    .A2baseHide {
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    // 过度视频
-    .A2base2 {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      z-index: 10;
-      opacity: 1;
-      transition: opacity 0.5s;
-    }
-    .A2baseHide2 {
-      opacity: 0;
-      pointer-events: none;
-    }
-
     // 全景视频盒子
     .pvBox {
       width: 100%;
@@ -162,17 +71,6 @@
 
     // 屏幕>=1200
     @media screen and (min-width: 1200px) {
-      .A2base {
-        .A2baseBtn {
-          & > div {
-            transition: all 0.3s;
-            &:hover {
-              color: #ead98f;
-            }
-          }
-        }
-      }
-
       .pvBox {
         .pvBtn {
           & > div {

Code/src/pages/A2visit/index.tsx

@@ -1,78 +1,34 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+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 { domDelOwnFu } from '@/utils/utilsSome'
 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'
 
 function A2visit() {
   const { dataUrlSame } = useDataUrl()
 
-  // 初始视频
-  const A2baseVideo = useRef<HTMLVideoElement>(null)
-
-  useEffect(() => {
-    setTimeout(() => {
-      if (A2baseVideo.current) {
-        A2baseVideo.current.play()
-      }
-    }, 100)
-  }, [])
-
-  // 动画视频的ref
-  const videoRef = useRef<HTMLVideoElement>(null)
-
   // 当前视频索引
   const [videoInd, setVideoInd] = useState(-1)
 
-  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
-
-  const timeRR = useRef(-1)
-
-  useEffect(() => {
-    clearInterval(timeRR.current)
-    timeRR.current = window.setInterval(() => {
-      if (loding >= 100) {
-        clearInterval(timeRR.current)
-        return
-      }
-      setLoding(loding + 1)
-    }, 30)
-  }, [loding])
-
   // 开始之后的过度动画
   const [overVideo, setOverVideo] = useState(true)
 
-  useEffect(() => {
-    if (!overVideo) {
-      // 0.5s之后删除过度视频
-      setTimeout(() => {
-        domDelOwnFu('.A2base2')
-      }, 500)
-      // 打开全景页面
-    }
-  }, [overVideo])
-
   // 点击继续
   const btnStart = useCallback(() => {
-    if (loding >= 100) {
-      // 播放已经加载好的视频
-      setVideoInd(0)
-      setTimeout(() => {
-        if (videoRef.current) {
-          videoRef.current.play()
-        }
-      }, 100)
-      // 0.5s之后删除初始视频
-      setTimeout(() => {
-        domDelOwnFu('.A2base')
-      }, 500)
-    }
-  }, [loding])
+    // 播放已经加载好的视频
+    setVideoInd(0)
+    setTimeout(() => {
+      // 播放过度视频
+      const dom: HTMLVideoElement = document.querySelector('#CatVideo video')!
+      if (dom) dom.play()
+    }, 100)
+  }, [])
 
   // 点击 跳下一个章节
   const [lastVideo, setLastVideo] = useState(false)
@@ -80,52 +36,20 @@ function A2visit() {
   return (
     <div className={styles.A2visit}>
       {/* 加载页面 */}
-      <div className={classNames('A2base', videoInd < 0 ? '' : 'A2baseHide')}>
-        <img src={`${dataUrlSame}visit/mulu.png`} alt='' />
-        <div className='A2baseBtn' onClick={btnStart}>
-          {/* anpg动图 */}
-          <div className='A2BIcon'>
-            <img src={`${dataUrlSame}visit/arrow.png`} alt='' />
-          </div>
-
-          <img src={`${dataUrlSame}visit/btn.png`} alt='' />
-
-          <div className='A2Btxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
-          {loding >= 100 ? null : (
-            <div className='A2Bxian'>
-              <div>
-                <div style={{ width: loding + '%' }}></div>
-              </div>
-            </div>
-          )}
-        </div>
-
-        <video
-          ref={A2baseVideo}
-          src={`${dataUrlSame}/${myData.visit.videoSta}`}
-          playsInline
-          muted
-          webkit-playsinline='true'
-          x5-video-player-type='h5'
-          loop
-        />
-      </div>
+      <BaseVideo
+        isShow={videoInd < 0}
+        imgSrc={`${dataUrlSame}visit/mulu.png`}
+        videoSrc={`${dataUrlSame}/${myData.visit.videoSta}`}
+        parentFu={() => btnStart()}
+      />
 
       {/* 过度动画页面 */}
-      <div hidden={loding < 100} className={classNames('A2base2', overVideo ? '' : 'A2baseHide2')}>
-        <video
-          ref={videoRef}
-          playsInline
-          muted
-          webkit-playsinline='true'
-          x5-video-player-type='h5'
-          src={dataUrlSame + myData.visit.videos[videoInd < 0 ? 0 : videoInd]}
-          onEnded={() => setOverVideo(false)}
-        >
-          <source type='video/mp4' />
-          Your browser does not support the video tag.
-        </video>
-      </div>
+      <CatVideo
+        isShow={overVideo}
+        src={dataUrlSame + myData.visit.videos[videoInd < 0 ? 0 : videoInd]}
+        parentFu={() => setOverVideo(false)}
+        noBtn={true}
+      />
 
       {/* 全景视频 */}
       <div className={classNames('pvBox', lastVideo ? 'pvBoxHide' : '')} hidden={overVideo}>

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

@@ -6,108 +6,6 @@
       object-fit: fill;
     }
 
-    // 跳过按钮
-    .A3Tiao {
-      position: absolute;
-      width: 50px;
-      height: 50px;
-      cursor: pointer;
-      bottom: 20px;
-      right: 20px;
-      background-size: 100% 100%;
-    }
-
-    .A3base {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      z-index: 11;
-      opacity: 1;
-      transition: opacity 0.5s;
-
-      .A3BIcon {
-        position: absolute;
-        top: -60px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 30px;
-        z-index: 10;
-        cursor: pointer;
-      }
-
-      & > img {
-        position: absolute;
-        top: 0;
-        width: 650px;
-        max-width: 90%;
-        left: 50%;
-        transform: translateX(-50%);
-      }
-
-      .A3baseBtn {
-        position: absolute;
-        bottom: 40px;
-        left: 50%;
-        transform: translateX(-50%);
-        cursor: pointer;
-        width: 100px;
-        height: auto;
-        z-index: 10;
-        & > img {
-          width: 100%;
-        }
-
-        .A3Btxt {
-          position: absolute;
-          top: 0;
-          left: 0;
-          color: #fffddc;
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-        .A3Bxian {
-          position: absolute;
-          bottom: -10px;
-          left: 0;
-          width: 100%;
-          padding: 0 10px;
-          height: 2px;
-          & > div {
-            width: 100%;
-            height: 100%;
-            background-color: rgba(231, 214, 142, 0.6);
-            & > div {
-              width: 0%;
-              height: 100%;
-
-              background-color: #fffddc;
-            }
-          }
-        }
-      }
-    }
-    .A3baseHide {
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    // 过度视频
-    .A3base2 {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      z-index: 10;
-      opacity: 1;
-      transition: opacity 0.5s;
-    }
-    .A3baseHide2 {
-      opacity: 0;
-      pointer-events: none;
-    }
-
     // 全景图盒子
     .pvBox {
       width: 100%;
@@ -174,17 +72,6 @@
 
     // 屏幕>=1200
     @media screen and (min-width: 1200px) {
-      .A3base {
-        .A3baseBtn {
-          & > div {
-            transition: all 0.3s;
-            &:hover {
-              color: #ead98f;
-            }
-          }
-        }
-      }
-
       .pvBox {
         .pvBtn {
           & > div {

Code/src/pages/A3banquet/index.tsx

@@ -1,78 +1,33 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import styles from './index.module.scss'
 import useDataUrl from '@/components/ownUse/useDataUrl'
 import classNames from 'classnames'
-import { domDelOwnFu } from '@/utils/utilsSome'
 import { 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'
 
 function A3banquet() {
   const { dataUrlSame } = useDataUrl()
 
-  // 初始视频
-  const A3baseVideo = useRef<HTMLVideoElement>(null)
-
-  useEffect(() => {
-    setTimeout(() => {
-      if (A3baseVideo.current) {
-        A3baseVideo.current.play()
-      }
-    }, 100)
-  }, [])
-
-  // 动画视频的ref
-  const videoRef = useRef<HTMLVideoElement>(null)
-
   // 当前视频索引
   const [videoInd, setVideoInd] = useState(-1)
 
-  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
-
-  const timeRR = useRef(-1)
-
-  useEffect(() => {
-    clearInterval(timeRR.current)
-    timeRR.current = window.setInterval(() => {
-      if (loding >= 100) {
-        clearInterval(timeRR.current)
-        return
-      }
-      setLoding(loding + 1)
-    }, 30)
-  }, [loding])
-
   // 开始之后的过度动画
   const [overVideo, setOverVideo] = useState(true)
 
-  useEffect(() => {
-    if (!overVideo) {
-      // 0.5s之后删除过度视频
-      setTimeout(() => {
-        domDelOwnFu('.A3base2')
-      }, 500)
-      // 打开全景页面
-    }
-  }, [overVideo])
-
   // 点击继续
   const btnStart = useCallback(() => {
-    if (loding >= 100) {
-      // 播放已经加载好的视频
-      setVideoInd(0)
-      setTimeout(() => {
-        if (videoRef.current) {
-          videoRef.current.play()
-        }
-      }, 100)
-      // 0.5s之后删除初始视频
-      setTimeout(() => {
-        domDelOwnFu('.A3base')
-      }, 500)
-    }
-  }, [loding])
+    setVideoInd(0)
+    setTimeout(() => {
+      // 播放过度视频
+      const dom: HTMLVideoElement = document.querySelector('#CatVideo video')!
+      if (dom) dom.play()
+    }, 100)
+  }, [])
 
   // 点击 跳下一个章节
   const [lastVideo, setLastVideo] = useState(false)
@@ -80,60 +35,21 @@ function A3banquet() {
   return (
     <div className={styles.A3banquet}>
       {/* 加载页面 */}
-      <div className={classNames('A3base', videoInd < 0 ? '' : 'A3baseHide')}>
-        <img src={`${dataUrlSame}banquet/mulu.png`} alt='' />
-        <div className='A3baseBtn' onClick={btnStart}>
-          {/* anpg动图 */}
-          <div className='A3BIcon'>
-            <img src={`${dataUrlSame}visit/arrow.png`} alt='' />
-          </div>
-
-          <img src={`${dataUrlSame}visit/btn.png`} alt='' />
-
-          <div className='A3Btxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
-          {loding >= 100 ? null : (
-            <div className='A3Bxian'>
-              <div>
-                <div style={{ width: loding + '%' }}></div>
-              </div>
-            </div>
-          )}
-        </div>
-
-        <video
-          ref={A3baseVideo}
-          src={`${dataUrlSame}/${myData.banquet.videoSta}`}
-          playsInline
-          muted
-          webkit-playsinline='true'
-          x5-video-player-type='h5'
-          loop
-        />
-      </div>
+      <BaseVideo
+        isShow={videoInd < 0}
+        imgSrc={`${dataUrlSame}banquet/mulu.png`}
+        videoSrc={`${dataUrlSame}/${myData.banquet.videoSta}`}
+        parentFu={() => btnStart()}
+      />
 
       {/* 过度动画页面 */}
-      <div hidden={loding < 100} className={classNames('A3base2', overVideo ? '' : 'A3baseHide2')}>
-        <video
-          ref={videoRef}
-          playsInline
-          muted
-          webkit-playsinline='true'
-          x5-video-player-type='h5'
-          src={dataUrlSame + myData.banquet.videos[videoInd < 0 ? 0 : videoInd]}
-          onEnded={() => setOverVideo(false)}
-        >
-          <source type='video/mp4' />
-          Your browser does not support the video tag.
-        </video>
-
-        <div
-          className='A3Tiao'
-          style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}
-          onClick={() => setOverVideo(false)}
-        ></div>
-      </div>
+      <CatVideo
+        isShow={overVideo}
+        src={dataUrlSame + myData.banquet.videos[videoInd < 0 ? 0 : videoInd]}
+        parentFu={() => setOverVideo(false)}
+      />
 
-      {/* 全景视频 */}
+      {/* 全景图 */}
       <div className={classNames('pvBox', lastVideo ? 'pvBoxHide' : '')} hidden={overVideo}>
         <PanoImg />
         {/* 跳到下一章 */}

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

@@ -7,83 +7,6 @@
       object-fit: fill;
     }
 
-    .A4base {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      z-index: 11;
-      opacity: 1;
-      transition: opacity 0.5s;
-      background-color: rgba(0, 0, 0, 0.4);
-
-      .A4BIcon {
-        position: absolute;
-        top: -60px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 30px;
-        z-index: 10;
-        cursor: pointer;
-      }
-
-      & > img {
-        position: absolute;
-        top: 0px;
-        width: 650px;
-        max-width: 90%;
-        left: 50%;
-        transform: translateX(-50%);
-      }
-
-      .A4baseBtn {
-        position: absolute;
-        bottom: 40px;
-        left: 50%;
-        transform: translateX(-50%);
-        cursor: pointer;
-        width: 100px;
-        height: auto;
-        z-index: 10;
-        & > img {
-          width: 100%;
-        }
-
-        .A4Btxt {
-          position: absolute;
-          top: 0;
-          left: 0;
-          color: #fffddc;
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-        .A4Bxian {
-          position: absolute;
-          bottom: -10px;
-          left: 0;
-          width: 100%;
-          padding: 0 10px;
-          height: 2px;
-          & > div {
-            width: 100%;
-            height: 100%;
-            background-color: rgba(231, 214, 142, 0.6);
-            & > div {
-              width: 0%;
-              height: 100%;
-
-              background-color: #fffddc;
-            }
-          }
-        }
-      }
-    }
-    .A4baseHide {
-      opacity: 0;
-      pointer-events: none;
-    }
     .pvBoxShow {
       opacity: 1;
       pointer-events: auto;
@@ -354,17 +277,6 @@
 
     // 屏幕>=1200
     @media screen and (min-width: 1200px) {
-      .A4base {
-        .A4baseBtn {
-          & > div {
-            transition: all 0.3s;
-            &:hover {
-              color: #ead98f;
-            }
-          }
-        }
-      }
-
       .pvBox {
         .pvBtn {
           & > div {

Code/src/pages/A4dance/index.tsx

@@ -3,41 +3,21 @@ import styles from './index.module.scss'
 import useDataUrl from '@/components/ownUse/useDataUrl'
 import { myData } from '@/utils/http'
 import classNames from 'classnames'
-import { domDelOwnFu } from '@/utils/utilsSome'
 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'
 
 function A4dance() {
   const { dataUrlSame } = useDataUrl()
 
-  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
-
-  const timeRR = useRef(-1)
-
-  useEffect(() => {
-    clearInterval(timeRR.current)
-    timeRR.current = window.setInterval(() => {
-      if (loding >= 100) {
-        clearInterval(timeRR.current)
-        return
-      }
-      setLoding(loding + 1)
-    }, 40)
-  }, [loding])
+  const [baseSta, setBaseSta] = useState(false)
 
   // 点击继续
   const btnStart = useCallback(() => {
-    if (loding >= 100) {
-      setLoding(110)
-
-      // 0.5s之后删除自己
-      setTimeout(() => {
-        domDelOwnFu('.A4base')
-      }, 500)
-    }
-  }, [loding])
+    setBaseSta(true)
+  }, [])
 
   // 点击 跳下一个章节
   const [lastVideo, setLastVideo] = useState(false)
@@ -84,33 +64,18 @@ function A4dance() {
   return (
     <div className={styles.A4dance} style={{ backgroundImage: `url(${dataUrlSame}dance/bj.jpg)` }}>
       {/* 初始页面 */}
-      <div className={classNames('A4base', loding === 110 ? 'A4baseHide' : '')}>
-        <img src={`${dataUrlSame}dance/mulu.png`} alt='' />
-        <div className='A4baseBtn' onClick={btnStart}>
-          {/* anpg动图 */}
-          <div className='A4BIcon'>
-            <img src={`${dataUrlSame}visit/arrow.png`} alt='' />
-          </div>
-
-          <img src={`${dataUrlSame}visit/btn.png`} alt='' />
-
-          <div className='A4Btxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
-          {loding >= 100 ? null : (
-            <div className='A4Bxian'>
-              <div>
-                <div style={{ width: loding + '%' }}></div>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
+      <BaseImg
+        isShow={baseSta}
+        iconSrc={`${dataUrlSame}dance/mulu.png`}
+        parentFu={() => btnStart()}
+      />
 
       {/* 主要内容 */}
       <div
         className={classNames(
           'pvBox',
           lastVideo ? 'pvBoxHide' : '',
-          loding === 110 ? 'pvBoxShow' : 'pvBoxHide'
+          baseSta ? 'pvBoxShow' : 'pvBoxHide'
         )}
       >
         {/* 热点 云气图为第一个 */}

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

@@ -11,86 +11,6 @@
       height: 100%;
       transition: transform 1s;
       // transform: scale(3) translate(44px, -90px);
-      // 初始
-      .A5base {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        z-index: 11;
-        opacity: 1;
-        transition: opacity 0.5s;
-
-        .A5BIcon {
-          position: absolute;
-          top: -60px;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 30px;
-          z-index: 10;
-          cursor: pointer;
-        }
-
-        & > img {
-          position: absolute;
-          top: 0;
-          width: 650px;
-          max-width: 90%;
-          left: 50%;
-          transform: translateX(-50%);
-        }
-
-        .A5baseBtn {
-          position: absolute;
-          bottom: 40px;
-          left: 50%;
-          transform: translateX(-50%);
-          cursor: pointer;
-          width: 100px;
-          height: auto;
-          z-index: 10;
-          & > img {
-            width: 100%;
-          }
-
-          .A5Btxt {
-            position: absolute;
-            top: 0;
-            left: 0;
-            color: #fffddc;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            transition: all 0.5s;
-            &:hover {
-              color: #ead98f;
-            }
-          }
-          .A5Bxian {
-            position: absolute;
-            bottom: -10px;
-            left: 0;
-            width: 100%;
-            padding: 0 10px;
-            height: 2px;
-            & > div {
-              width: 100%;
-              height: 100%;
-              background-color: rgba(231, 214, 142, 0.6);
-              & > div {
-                width: 0%;
-                height: 100%;
-                background-color: #fffddc;
-              }
-            }
-          }
-        }
-      }
-      .A5baseHide {
-        opacity: 0;
-        pointer-events: none;
-      }
 
       // 热点按钮页面
       .A5hotBox {

Code/src/pages/A5chef/index.tsx

@@ -3,41 +3,20 @@ import styles from './index.module.scss'
 import useDataUrl from '@/components/ownUse/useDataUrl'
 import classNames from 'classnames'
 import { myData } from '@/utils/http'
-import { domDelOwnFu } from '@/utils/utilsSome'
 import history from '@/utils/history'
 import { ArrowRightOutlined } from '@ant-design/icons'
 import EndVideo from '@/components/EndVideo'
+import BaseImg from '@/components/BaseImg'
 
 function A5chef() {
   const { dataUrlSame } = useDataUrl()
 
-  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
-
-  const timeRR = useRef(-1)
-
-  useEffect(() => {
-    clearInterval(timeRR.current)
-    timeRR.current = window.setInterval(() => {
-      if (loding >= 100) {
-        clearInterval(timeRR.current)
-        return
-      }
-      setLoding(loding + 1)
-    }, 30)
-  }, [loding])
-
   // 点击继续
   const [baseFlag, setBaseFlag] = useState(true)
 
   const btnStart = useCallback(() => {
-    if (loding >= 100) {
-      setBaseFlag(false)
-      // 0.5s之后删除初始盒子
-      setTimeout(() => {
-        domDelOwnFu('.A5base')
-      }, 500)
-    }
-  }, [loding])
+    setBaseFlag(false)
+  }, [])
 
   // 点击 跳下一个章节
   const [lastVideo, setLastVideo] = useState(false)
@@ -82,28 +61,12 @@ function A5chef() {
         className='A5main'
         style={{ backgroundImage: `url(${dataUrlSame + myData.chef.baseImg})`, transform: bgMove }}
       >
-        {/* 加载页面 */}
-        <div className={classNames('A5base', baseFlag ? '' : 'A5baseHide')}>
-          <img src={`${dataUrlSame}chef/mulu.png`} alt='' />
-          <div className='A5baseBtn' onClick={btnStart}>
-            {/* anpg动图 */}
-            <div className='A5BIcon'>
-              <img src={`${dataUrlSame}visit/arrow.png`} alt='' />
-            </div>
-
-            <img src={`${dataUrlSame}visit/btn.png`} alt='' />
-
-            <div className='A5Btxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
-            {loding >= 100 ? null : (
-              <div className='A5Bxian'>
-                <div>
-                  <div style={{ width: loding + '%' }}></div>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-
+        {/* 初始页面 */}
+        <BaseImg
+          isShow={!baseFlag}
+          iconSrc={`${dataUrlSame}chef/mulu.png`}
+          parentFu={() => btnStart()}
+        />
         {/* 热点按钮页面 */}
         <div className={classNames('A5hotBox', baseFlag ? '' : 'A5hotBoxAc')}>
           {/* 循环渲染热点 */}