首页改造

Code/public/myData/myData.js

@@ -17,9 +17,11 @@ const myDataTemp = {
   home: {
     // 背景图路径+名字
     bgImg: 'home/bg.jpg',
-    // 5个动画路径+名字（这里暂时写4个，后面自己加/减）
-    videos: ['home/1.mp4', 'home/2.mp4', 'home/3.mp4', 'home/4.mp4'],
-    // 最后的过长动画路径+名字
+    // 左下角动画视频路径+名字
+    leftVideo: 'home/left.mp4',
+    // 主动画
+    videos: ['home/1.mp4'],
+    // 最后的过场动画路径+名字
     lastVideo: 'home/end.mp4'
   },
 
@@ -29,7 +31,7 @@ const myDataTemp = {
     videoSta: 'visit/base.mp4',
     // 过度视频
     videos: ['visit/1.mp4'],
-    // 最后的过长动画路径+名字
+    // 最后的过场动画路径+名字
     lastVideo: 'visit/end.mp4',
     // 热点
     hot: [
@@ -349,7 +351,7 @@ const myDataTemp = {
     videoSta: 'banquet/base.mp4',
     // 过度视频
     videos: ['banquet/1.mp4'],
-    // 最后的过长动画路径+名字
+    // 最后的过场动画路径+名字
     lastVideo: 'banquet/end.mp4',
     hot: [
       {
@@ -620,7 +622,7 @@ const myDataTemp = {
       }
     ],
 
-    // 最后的过长动画路径+名字
+    // 最后的过场动画路径+名字
     lastVideo: 'dance/end.mp4'
   },
   // 四神云气图(静态资源目录位置：staticData/HH/yun)
@@ -790,7 +792,7 @@ const myDataTemp = {
   ],
   // 后厨备宴(静态资源目录位置：staticData/HH/chef)
   chef: {
-    // 最后的过长动画路径+名字
+    // 最后的过场动画路径+名字
     lastVideo: 'chef/end.mp4',
     // 初始背景图路径+名字
     baseImg: 'chef/bg.jpg',

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

@@ -0,0 +1,27 @@
+.VideoModel {
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: all 0.5s;
+  opacity: 0;
+  pointer-events: none;
+  :global {
+    .videoMoBtn {
+      position: absolute;
+      width: 30px;
+      height: 30px;
+      background-size: 100% 100%;
+      cursor: pointer;
+      bottom: 15px;
+      right: 20px;
+    }
+  }
+}
+
+.VideoModelShow {
+  opacity: 1;
+  pointer-events: auto;
+}

Code/src/components/VideoModel/index.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import classNames from 'classnames'
+import useDataUrl from '../ownUse/useDataUrl'
+
+type Props = {
+  isShow: boolean
+  src: string
+  closeFu: () => void
+}
+
+function VideoModel({ isShow, src, closeFu }: Props) {
+  const { dataUrlSame } = useDataUrl()
+
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  useEffect(() => {
+    if (isShow) {
+      setTimeout(() => {
+        if (videoRef.current) {
+          videoRef.current.play()
+        }
+      }, 100)
+    }
+  }, [isShow])
+
+  return (
+    <div className={classNames(styles.VideoModel, isShow ? styles.VideoModelShow : '')}>
+      <video
+        ref={videoRef}
+        playsInline
+        muted
+        webkit-playsinline='true'
+        x5-video-player-type='h5'
+        src={src}
+        onEnded={closeFu}
+      >
+        <source type='video/mp4' />
+        Your browser does not support the video tag.
+      </video>
+
+      <div
+        title='返回'
+        className='videoMoBtn hoverD'
+        style={{ backgroundImage: `url(${dataUrlSame}visit/back.png)` }}
+        onClick={closeFu}
+      ></div>
+    </div>
+  )
+}
+
+const MemoVideoModel = React.memo(VideoModel)
+
+export default MemoVideoModel

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

@@ -98,6 +98,23 @@
       .A1BMoveHide {
         opacity: 0;
       }
+
+      // 左下角按钮
+      .A1LeftVideoBtn {
+        position: absolute;
+        z-index: 10;
+        width: 30px;
+        height: 30px;
+        cursor: pointer;
+        bottom: 15px;
+        left: 20px;
+        opacity: 0;
+        pointer-events: none;
+      }
+      .A1LeftVideoBtnShow {
+        opacity: 1;
+        pointer-events: auto;
+      }
     }
     .A1baseHide {
       opacity: 0;

Code/src/pages/A1home/index.tsx

@@ -6,6 +6,7 @@ import { 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()
@@ -117,6 +118,9 @@ function A1home() {
     document.querySelector('html')?.appendChild(styletDom)
   }, [])
 
+  // 点击左下角按钮
+  const [leftVideo, setLeftVideo] = useState(false)
+
   return (
     <div className={styles.A1home}>
       {/* 初始加载画面 */}
@@ -152,6 +156,21 @@ function A1home() {
           src={`${dataUrlSame}home/right.png`}
           alt=''
         />
+
+        {/* 左下角播放按钮 */}
+        <div
+          onClick={() => setLeftVideo(true)}
+          className={classNames('A1LeftVideoBtn hoverD', loding >= 100 ? 'A1LeftVideoBtnShow' : '')}
+        >
+          <img src={`${dataUrlSame}home/icon-play.png`} alt='' />
+        </div>
+
+        {/* 左下角视频 */}
+        <VideoModel
+          isShow={leftVideo}
+          src={dataUrlSame + myData.home.leftVideo}
+          closeFu={() => setLeftVideo(false)}
+        />
       </div>
 
       {/* 5个动画视频 */}

Code/src/types/declaration.d.ts

@@ -17,6 +17,7 @@ type MyDataType = {
   isLdong: boolean
   home: {
     bgImg: string
+    leftVideo: string
     videos: string[]
     lastVideo: string
   }