upp

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

@@ -6,6 +6,36 @@
       object-fit: fill;
     }
 
+    // 初始视频
+    .A1video {
+      width: 100%;
+      height: 100%;
+      background-size: 100% 100%;
+      position: relative;
+      .sizeNo {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        cursor: pointer;
+        width: 120px;
+        height: 36px;
+        bottom: 3%;
+        background-size: 100% 100%;
+        background-image: url('../../assets/img/btn.png');
+        color: #fffddc;
+        transition: all 0.3s;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 20px;
+        &:hover {
+          background-image: url('../../assets/img/btnAc.png');
+
+          color: #b67150;
+        }
+      }
+    }
+
     .A1base {
       width: 100%;
       height: 100%;

Code/src/pages/A1home/index.tsx

@@ -5,8 +5,15 @@ import classNames from 'classnames'
 import EndVideo from '@/components/EndVideo'
 import VideoModel from '@/components/VideoModel'
 import useLoding from '@/components/ownUse/useLoding'
+import CatVideo from '@/components/CatVideo'
 
 function A1home() {
+  // 初始视频
+  const [baseVideo, setBaseVideo] = useState(true)
+
+  const [baseVshow, setBaseVshow] = useState(false)
+
+  // 序列中加载
   const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
 
   // 先加载背景图 序列帧等 在加载视频
@@ -15,26 +22,28 @@ function A1home() {
   const timeRR = useRef(-1)
 
   useEffect(() => {
-    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)
+    if (!baseVideo) {
+      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])
+  }, [baseVideo, imgNow, loding])
 
   // 点击开始
   const btnStartFu = useCallback(() => {
@@ -83,74 +92,93 @@ function A1home() {
 
   return (
     <div className={styles.A1home}>
-      {/* 初始加载画面 */}
-      <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>
+      {baseVideo ? (
+        <div className='A1video' style={{ backgroundImage: `url(${baseURL}home/baseBac.jpg)` }}>
+          <div className='sizeNo' onClick={() => setBaseVshow(true)}>
+            开 始
           </div>
-        ) : (
-          <div className='A1loding sizeNo'>{loding}%</div>
-        )}
-
-        {/* 底部颜色条 */}
-        <img
-          onLoad={imgNumFu}
-          ref={A1BfloorRef}
-          className='A1Bfloor'
-          src={`${baseURL}home/floor.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=''
-        />
-
-        {/* 左下角播放按钮 */}
-        <div
-          onClick={() => setLeftVideo(true)}
-          className={classNames('A1LeftVideoBtn hoverD', loding >= 100 ? 'A1LeftVideoBtnShow' : '')}
-        >
-          <img src={`${baseURL}home/icon-play.png`} alt='' />
-        </div>
 
-        {/* 左下角视频 */}
-        {imgNow ? (
-          <VideoModel
-            isShow={leftVideo}
-            src={baseURL + myData.home.leftVideo}
-            closeFu={() => setLeftVideo(false)}
+          <CatVideo
+            isShow={baseVshow}
+            src={baseURL + 'home/baseVideo.mp4'}
+            parentFu={() => setBaseVideo(false)}
           />
-        ) : null}
-      </div>
-
-      {/* 最后一个过长动画 */}
-
-      {imgNow ? (
-        <EndVideo
-          lastVideo={lastVideo}
-          delDom='.A1base'
-          src={baseURL + myData.home.lastVideo}
-          path='/base'
-        />
-      ) : null}
+        </div>
+      ) : (
+        <>
+          {/* 初始加载画面 */}
+          <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>
+              </div>
+            ) : (
+              <div className='A1loding'>{loding}%</div>
+            )}
+
+            {/* 底部颜色条 */}
+            <img
+              onLoad={imgNumFu}
+              ref={A1BfloorRef}
+              className='A1Bfloor'
+              src={`${baseURL}home/floor.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=''
+            />
+
+            {/* 左下角播放按钮 */}
+            <div
+              onClick={() => setLeftVideo(true)}
+              className={classNames(
+                'A1LeftVideoBtn hoverD',
+                loding >= 100 ? 'A1LeftVideoBtnShow' : ''
+              )}
+            >
+              <img src={`${baseURL}home/icon-play.png`} alt='' />
+            </div>
+
+            {/* 左下角视频 */}
+            {imgNow ? (
+              <VideoModel
+                isShow={leftVideo}
+                src={baseURL + myData.home.leftVideo}
+                closeFu={() => setLeftVideo(false)}
+              />
+            ) : null}
+          </div>
+
+          {/* 最后一个过长动画 */}
+
+          {imgNow ? (
+            <EndVideo
+              lastVideo={lastVideo}
+              delDom='.A1base'
+              src={baseURL + myData.home.lastVideo}
+              path='/base'
+            />
+          ) : null}
+        </>
+      )}
     </div>
   )
 }