shaogen1995 недель назад: 3
Родитель
Сommit
b46820a0b5

BIN
public/myData/baseEn.ts


BIN
public/myData/homeEn.mp4


BIN
public/myData/xianDao.mp4


BIN
src/assets/sgImg/homeBgEn.jpg


+ 21 - 0
src/pages/A0base/index.module.scss

@@ -205,6 +205,27 @@
         font-size: 14px;
       }
     }
+
+    // 先导视频
+    .xiandaoBox {
+      background-color: black;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 20;
+
+      video {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 90%;
+        height: 90%;
+        object-fit: contain;
+      }
+    }
   }
 }
 

+ 33 - 10
src/pages/A0base/index.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import classNames from 'classnames'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
-import { Toast } from 'antd-mobile'
 import { cutUnityFu, unityShow } from './data'
 import Zloding from '@/components/Zloding'
 import { toEchPageFu } from '@/components/MenuSider/data'
+import Zclose from '@/components/Zclose'
 
 function A0base() {
   const [loding, setLoding] = useState(false)
@@ -30,6 +30,17 @@ function A0base() {
     window.location.replace(path)
   }
 
+  const xianDaoRef = useRef<HTMLVideoElement>(null)
+  const [xianDao, setXianDao] = useState(false)
+
+  useEffect(() => {
+    if (xianDao) {
+      setTimeout(() => {
+        if (xianDaoRef.current) xianDaoRef.current.play()
+      }, 200)
+    }
+  }, [xianDao])
+
   return (
     <div className={classNames(myLangue === 'ZH' ? '' : styles.A0baseEn, styles.A0base)}>
       <Zloding isShow={loding} bacNum={1} />
@@ -104,17 +115,29 @@ function A0base() {
       </div>
 
       {/* 先导片 */}
-      <div
-        className='guideVideo'
-        onClick={() => {
-          Toast.show({
-            content: '正在开发中'
-          })
-        }}
-      >
+      <div className='guideVideo' onClick={() => setXianDao(true)}>
         <img src={require('@/assets/img/guideVideo.png')} alt='' />
         <div className='guideVideoTitle'>{myLangue === 'EN' ? 'PromotionalVideo' : '先导片'}</div>
       </div>
+
+      {/* 先导片播放 */}
+      {xianDao ? (
+        <div className='xiandaoBox'>
+          <video
+            ref={xianDaoRef}
+            playsInline
+            muted={false}
+            webkit-playsinline='true'
+            x5-video-player-type='h5'
+            // controls={true}
+          >
+            <source type='video/mp4' src={'./myData/xianDao.mp4'} />
+            Your browser does not support the video tag.
+          </video>
+
+          <Zclose clickFu={() => setXianDao(false)} />
+        </div>
+      ) : null}
     </div>
   )
 }