Merge branch 'master' of http://192.168.0.115:3000/lanxin/Chengzhebei

src/App.tsx

@@ -16,7 +16,7 @@ import MessageCom from '@/components/Message'
 // new Vconsole()
 
 // import { isLoc, myData } from './utils/http'
-const A1home = React.lazy(() => import('./pages/A1home'))
+const A1home = React.lazy(() => import('./pages/A1home2'))
 const A1_1base = React.lazy(() => import('./pages/A0base'))
 const A2yblm = React.lazy(() => import('./pages/A2yblm'))
 const A3beie = React.lazy(() => import('./pages/A3beie'))
@@ -26,9 +26,6 @@ const A6ybwx = React.lazy(() => import('./pages/A6ybwx'))
 const A7Wjwj = React.lazy(() => import('./pages/A7wjwj'))
 const A6_1_zxys = React.lazy(() => import('./pages/A6ybwx/A6_1_zxys'))
 const A6_2_zxzgh = React.lazy(() => import('./pages/A6ybwx/A6_2_zxzgh'))
-const A8byzh = React.lazy(() => import('./pages/A8byzh'))
-
-
 
 declare global {
   //设置全局属性
@@ -173,10 +170,12 @@ export default function App() {
   const handleHashChange = () => {
     if (window.location.hash === '#/base') {
       callIframeFu('changePanel', 0)
+      callIframeFu('showInscription', -1)
       callIframeFu('showHotspot', -1)
     }
     if (window.location.hash === '#/yblm') {
       callIframeFu('changePanel', 1)
+      callIframeFu('showInscription', -1)
       callIframeFu('showHotspot', -1)
     }
     if (window.location.hash === '#/beie') {
@@ -187,7 +186,7 @@ export default function App() {
       callIframeFu('changePanel', 3)
       callIframeFu('showInscription', -1)
     }
-    if (window.location.hash.includes('#/wenwu')) {
+    if (window.location.hash === '#/wenwu') {
       callIframeFu('changePanel', 4)
       callIframeFu('showInscription', -1)
       callIframeFu('showHotspot', -1)
@@ -259,333 +258,333 @@ export default function App() {
 
 
   // 更新unity页面
-  // useEffect(() => {
-  //   if (envFlag) {
-  //     window.addEventListener('keyup', e => {
-  //       if (e.code === 'Enter') {
-  //         callIframeFu(
-  //           'refreshAppSettings',
-  //           JSON.stringify(
-  //             {
-  //               panels: [
-  //                 {
-  //                   name: 'DefaultVirtualCamera',
-  //                   cameraOrthographicSize: 9,
-  //                   viewportX: 0,
-  //                   offset: -10,
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: -180,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 },
-  //                 {
-  //                   name: 'Panel1Camera',
-  //                   cameraOrthographicSize: 4,
-  //                   viewportX: 0.5,
-  //                   offset: -10,
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: -180,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 },
-  //                 {
-  //                   name: 'Panel2Camera',
-  //                   cameraOrthographicSize: 9,
-  //                   viewportX: 0,
-  //                   offset: -10,
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: -180,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 },
-  //                 {
-  //                   name: 'Panel3Camera',
-  //                   cameraOrthographicSize: 9,
-  //                   viewportX: 0,
-  //                   offset: -10,
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: -180,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 },
-  //                 {
-  //                   name: 'Panel4Camera',
-  //                   cameraOrthographicSize: 9,
-  //                   viewportX: 0,
-  //                   offset: -10,
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: 0,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 },
-  //                 {
-  //                   name: 'Panel5Camera',
-  //                   cameraOrthographicSize: 9,
-  //                   viewportX: 0.5,
-  //                   offset: 0,
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: -180,
-  //                       z: 0
-  //                     }
-  //                   },
-  //                   rotationNotAllowed: true
-  //                 }
-  //               ],
-  //               hotspots: [
-  //                 {
-  //                   name: '佛龛',
-  //                   camera: {
-  //                     cameraOrthographicSize: 5,
-  //                     viewportX: 0.5,
-  //                     offset: 0,
-  //                     position: {
-  //                       y: 1.1,
-  //                       z: -50
-  //                     }
-  //                   },
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: -180,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 },
-  //                 {
-  //                   name: '佛像',
-  //                   camera: {
-  //                     cameraOrthographicSize: 5,
-  //                     viewportX: 0.5,
-  //                     offset: 0,
-  //                     position: {
-  //                       y: 0,
-  //                       z: -50
-  //                     }
-  //                   },
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: -180,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 },
-  //                 {
-  //                   name: '佛龛两侧',
-  //                   camera: {
-  //                     cameraOrthographicSize: 5,
-  //                     viewportX: 0.5,
-  //                     offset: 0,
-  //                     position: {
-  //                       y: 0,
-  //                       z: -50
-  //                     }
-  //                   },
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: -180,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 },
-  //                 {
-  //                   name: '佛龛上部',
-  //                   camera: {
-  //                     cameraOrthographicSize: 5,
-  //                     viewportX: 0.5,
-  //                     offset: 0,
-  //                     position: {
-  //                       y: 2,
-  //                       z: -50
-  //                     }
-  //                   },
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: -180,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 },
-  //                 {
-  //                   name: '佛龛下部',
-  //                   camera: {
-  //                     cameraOrthographicSize: 5,
-  //                     viewportX: 0.5,
-  //                     offset: 0,
-  //                     position: {
-  //                       y: -1,
-  //                       z: -50
-  //                     }
-  //                   },
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: -180,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 },
-  //                 {
-  //                   name: '畏兽',
-  //                   camera: {
-  //                     cameraOrthographicSize: 5,
-  //                     viewportX: 0.5,
-  //                     offset: 0,
-  //                     position: {
-  //                       y: 2,
-  //                       z: -50
-  //                     }
-  //                   },
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: -90,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 },
-  //                 {
-  //                   name: '飞天',
-  //                   camera: {
-  //                     cameraOrthographicSize: 5,
-  //                     viewportX: 0.5,
-  //                     offset: 0,
-  //                     position: {
-  //                       y: 0,
-  //                       z: -50
-  //                     }
-  //                   },
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: -90,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 },
-  //                 {
-  //                   name: '摩尼宝珠',
-  //                   camera: {
-  //                     cameraOrthographicSize: 5,
-  //                     viewportX: 0.5,
-  //                     offset: 0,
-  //                     position: {
-  //                       y: -1,
-  //                       z: -50
-  //                     }
-  //                   },
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: -90,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 }
-  //               ],
-  //               inscriptions: [
-  //                 {
-  //                   name: '碑额',
-  //                   camera: {
-  //                     cameraOrthographicSize: 2,
-  //                     viewportX: 0,
-  //                     offset: 0,
-  //                     position: {
-  //                       y: 4.4,
-  //                       z: -50
-  //                     }
-  //                   },
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: 0,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 },
-  //                 {
-  //                   name: '碑文1',
-  //                   camera: {
-  //                     cameraOrthographicSize: 2,
-  //                     viewportX: 0,
-  //                     offset: 0,
-  //                     position: {
-  //                       y: 3.6,
-  //                       z: -50
-  //                     }
-  //                   },
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: 0,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 },
-  //                 {
-  //                   name: '碑文2',
-  //                   camera: {
-  //                     cameraOrthographicSize: 9,
-  //                     viewportX: 0,
-  //                     offset: -10,
-  //                     position: {
-  //                       y: 0,
-  //                       z: -50
-  //                     }
-  //                   },
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: 0,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 },
-  //                 {
-  //                   name: '碑文3',
-  //                   camera: {
-  //                     cameraOrthographicSize: 9,
-  //                     viewportX: 0,
-  //                     offset: -10,
-  //                     position: {
-  //                       y: 0,
-  //                       z: -50
-  //                     }
-  //                   },
-  //                   model: {
-  //                     rotation: {
-  //                       x: 0,
-  //                       y: 0,
-  //                       z: 0
-  //                     }
-  //                   }
-  //                 }
-  //               ]
-  //             }), 'json'
-  //         )
-  //       }
-  //     })
-  //   }
-  // }, [])
+  useEffect(() => {
+    if (envFlag) {
+      window.addEventListener('keyup', e => {
+        if (e.code === 'Enter') {
+          callIframeFu(
+            'refreshAppSettings',
+            JSON.stringify(
+              {
+              panels: [
+                {
+                  name: 'DefaultVirtualCamera',
+                  cameraOrthographicSize: 9,
+                  viewportX: 0,
+                  offset: -10,
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: -180,
+                      z: 0
+                    }
+                  }
+                },
+                {
+                  name: 'Panel1Camera',
+                  cameraOrthographicSize: 4,
+                  viewportX: 0.5,
+                  offset: -10,
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: -180,
+                      z: 0
+                    }
+                  }
+                },
+                {
+                  name: 'Panel2Camera',
+                  cameraOrthographicSize: 9,
+                  viewportX: 0,
+                  offset: -10,
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: -180,
+                      z: 0
+                    }
+                  }
+                },
+                {
+                  name: 'Panel3Camera',
+                  cameraOrthographicSize: 9,
+                  viewportX: 0,
+                  offset: -10,
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: -180,
+                      z: 0
+                    }
+                  }
+                },
+                {
+                  name: 'Panel4Camera',
+                  cameraOrthographicSize: 9,
+                  viewportX: 0,
+                  offset: -10,
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
+                    }
+                  }
+                },
+                {
+                  name: 'Panel5Camera',
+                  cameraOrthographicSize: 9,
+                  viewportX: 0.5,
+                  offset: 0,
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: -180,
+                      z: 0
+                    }
+                  },
+                  rotationNotAllowed: true
+                }
+              ],
+              hotspots: [
+                {
+                  name: '佛龛',
+                  camera: {
+                    cameraOrthographicSize: 5,
+                    viewportX: 0.5,
+                    offset: 0,
+                    position: {
+                      y: 1.1,
+                      z: -50
+                    }
+                  },
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: -180,
+                      z: 0
+                    }
+                  }
+                },
+                {
+                  name: '佛像',
+                  camera: {
+                    cameraOrthographicSize: 5,
+                    viewportX: 0.5,
+                    offset: 0,
+                    position: {
+                      y: 0,
+                      z: -50
+                    }
+                  },
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: -180,
+                      z: 0
+                    }
+                  }
+                },
+                {
+                  name: '佛龛两侧',
+                  camera: {
+                    cameraOrthographicSize: 5,
+                    viewportX: 0.5,
+                    offset: 0,
+                    position: {
+                      y: 0,
+                      z: -50
+                    }
+                  },
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: -180,
+                      z: 0
+                    }
+                  }
+                },
+                {
+                  name: '佛龛上部',
+                  camera: {
+                    cameraOrthographicSize: 5,
+                    viewportX: 0.5,
+                    offset: 0,
+                    position: {
+                      y: 2,
+                      z: -50
+                    }
+                  },
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: -180,
+                      z: 0
+                    }
+                  }
+                },
+                {
+                  name: '佛龛下部',
+                  camera: {
+                    cameraOrthographicSize: 5,
+                    viewportX: 0.5,
+                    offset: 0,
+                    position: {
+                      y: -1,
+                      z: -50
+                    }
+                  },
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: -180,
+                      z: 0
+                    }
+                  }
+                },
+                {
+                  name: '畏兽',
+                  camera: {
+                    cameraOrthographicSize: 5,
+                    viewportX: 0.5,
+                    offset: 0,
+                    position: {
+                      y: 2,
+                      z: -50
+                    }
+                  },
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: -90,
+                      z: 0
+                    }
+                  }
+                },
+                {
+                  name: '飞天',
+                  camera: {
+                    cameraOrthographicSize: 5,
+                    viewportX: 0.5,
+                    offset: 0,
+                    position: {
+                      y: 0,
+                      z: -50
+                    }
+                  },
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: -90,
+                      z: 0
+                    }
+                  }
+                },
+                {
+                  name: '摩尼宝珠',
+                  camera: {
+                    cameraOrthographicSize: 5,
+                    viewportX: 0.5,
+                    offset: 0,
+                    position: {
+                      y: -1,
+                      z: -50
+                    }
+                  },
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: -90,
+                      z: 0
+                    }
+                  }
+                }
+              ],
+              inscriptions: [
+                {
+                  name: '碑额',
+                  camera: {
+                    cameraOrthographicSize: 2,
+                    viewportX: 0,
+                    offset: 0,
+                    position: {
+                      y: 4.4,
+                      z: -50
+                    }
+                  },
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
+                    }
+                  }
+                },
+                {
+                  name: '碑文1',
+                  camera: {
+                    cameraOrthographicSize: 2,
+                    viewportX: 0,
+                    offset: 0,
+                    position: {
+                      y: 3.6,
+                      z: -50
+                    }
+                  },
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
+                    }
+                  }
+                },
+                {
+                  name: '碑文2',
+                  camera: {
+                    cameraOrthographicSize: 9,
+                    viewportX: 0,
+                    offset: -10,
+                    position: {
+                      y: 0,
+                      z: -50
+                    }
+                  },
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
+                    }
+                  }
+                },
+                {
+                  name: '碑文3',
+                  camera: {
+                    cameraOrthographicSize: 9,
+                    viewportX: 0,
+                    offset: -10,
+                    position: {
+                      y: 0,
+                      z: -50
+                    }
+                  },
+                  model: {
+                    rotation: {
+                      x: 0,
+                      y: 0,
+                      z: 0
+                    }
+                  }
+                }
+              ]
+            }),'json'
+          )
+        }
+      })
+    }
+  }, [])
 
   return (
     <>
@@ -603,7 +602,6 @@ export default function App() {
             <Route path='/wjwj' component={A7Wjwj} exact />
             <Route path='/zxys' component={A6_1_zxys} exact />
             <Route path='/sinicize' component={A6_2_zxzgh} exact />
-            <Route path='/byzh' component={A8byzh} exact />
             <Route path='*' component={NotFound} />
           </Switch>
         </React.Suspense>

src/pages/A1home2/index.module.scss

@@ -5,6 +5,19 @@
   z-index: 1;
 
   :global {
+
+    // 背景图
+    .homeImg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 3;
+      pointer-events: none;
+      object-fit: cover !important;
+    }
+
     .loadingP {
       position: absolute;
       top: 50%;
@@ -12,7 +25,7 @@
       transform: translate(-50%, -50%);
       width: 100%;
       height: 100%;
-      // background: url(../../assets/img/bg_home.png) no-repeat center center;
+      // background-image: url('../../assets/sgImg/homeBg.jpg');
       // background-size: 100% 100%;
       display: flex;
       align-items: center;
@@ -21,15 +34,16 @@
       color: rgba(166, 118, 67, 1);
       z-index: 10;
 
-    //----------新加的初始视频
-    .A1baseVideo{
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 2;
-    }
+      //----------新加的初始视频
+      .A1baseVideo {
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 4;
+      }
 
       .progress {
         width: 200px;
@@ -82,10 +96,20 @@
         width: 100%;
         height: 100%;
       }
-      .A1videoBtn{
+
+      .A1videoBtn {
         position: absolute;
-        bottom: 10px;
-        right: 10px;
+        bottom: 15px;
+        right: 15px;
+        color: #fff;
+        font-size: 18px;
+        letter-spacing: 4px;
+        &>img{
+          position: relative;
+          top: -3px;
+          width: 30px;
+          height: 30px;
+        }
       }
     }
 

src/pages/A1home2/index.tsx

@@ -2,33 +2,43 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import classNames from 'classnames'
 import { isPc } from '@/utils/http'
+import { domDelOwnFu } from '@/utils/utilsSome'
+import store from '@/store'
 
 function A1home() {
+  // 先加载背景图片
+  const [baseImg, setBaseImg] = useState(false)
+
   // 开场视频-------------
   const [baseFlag, setBaseFlag] = useState(false)
-  const [isClickedSkip, setIsClickedSkip] = useState(false)
+
+  const moveImg = useRef<any>(null)
   useEffect(() => {
-    const params = {
-      objectFit: 'cover', // 视频的object-fit样式, 默认 cover
-      loop: true, // 是否循环, 默认false
-      autoplay: true, // 自动播放, 默认false
-      onSourceEstablished: () => {
-        setBaseFlag(true)
-      } //有足够的数据可以播放了
+    if (baseImg) {
+      const params = {
+        objectFit: 'cover', // 视频的object-fit样式, 默认 cover
+        loop: true, // 是否循环, 默认false
+        autoplay: false, // 自动播放, 默认false
+        onSourceEstablished: () => {
+          setBaseFlag(true)
+        } //有足够的数据可以播放了
+      }
+      moveImg.current = F_Video('./myData/base.ts', params)
+      const dom = document.querySelector('.A1baseVideo')!
+      dom.append(moveImg.current.domElement)
     }
-    playerRef.current = F_Video('./myData/base.ts', params)
-    const dom = document.querySelector('.A1baseVideo')!
-    dom.append(playerRef.current.domElement)
-  }, [])
+  }, [baseImg])
 
   // 开场视频-------------
-
   const [videoOk, setVideoOk] = useState(false)
   const [loadOk, setLoadOk] = useState(false)
   const [progress, setProgress] = useState(0)
 
   useEffect(() => {
-    console.log('xxxxxxxx', progress)
+    if (progress >= 100) {
+      // 播放动态视频
+      moveImg.current.play()
+    }
   }, [progress])
 
   useEffect(() => {
@@ -48,10 +58,13 @@ function A1home() {
         objectFit: 'cover', // 视频的object-fit样式, 默认 cover
         loop: false, // 是否循环, 默认false
         autoplay: false, // 自动播放, 默认false
-        onPlay: () => { }, // 触发播放事件
-        onPause: () => { }, // 触发暂停事件
+        onPlay: () => {}, // 触发播放事件
+        onPause: () => {}, // 触发暂停事件
         onEnded: () => {
-          if (!isClickedSkip) window.location.replace('#/base')
+          // 视频播放完了
+          const homeVideoFlag = store.getState().A0Layout.homeVideoFlag
+          console.log('home结尾视频播放完毕', !homeVideoFlag)
+          if (!homeVideoFlag) window.location.replace('#/base')
         }, // 触发播放结束事件
         onSourceEstablished: () => {
           setVideoOk(true)
@@ -80,13 +93,19 @@ function A1home() {
   }, [loadOk, progress, videoOk])
 
   const enter = useCallback(() => {
-    if (progress === 100) setLoadOk(true)
+    if (progress >= 100) {
+      // 删除第一个动画和封面图
+      moveImg.current.destroy()
+      domDelOwnFu('.A1baseVideo')
+      domDelOwnFu('.homeImg')
+      setLoadOk(true)
+    }
   }, [progress])
 
   useEffect(() => {
     // 1-10
     window.unityLoading = (progress: number) => {
-      console.log('当前进度', progress * 100 + '%')
+      // console.log('当前进度', progress * 100 + '%')
       if (progress * 100 >= 98) {
         setProgress(98)
         return
@@ -99,16 +118,22 @@ function A1home() {
   useEffect(() => {
     const iframe = document.getElementById('modalIframe') as HTMLIFrameElement | null
     if (iframe && iframe.contentWindow && videoOk && baseFlag) {
-      console.log('sadasdasdsadas')
-
       setProgress(100)
     }
   }, [baseFlag, loadOk, videoOk])
 
   return (
     <div className={classNames(styles.A1home, isPc ? '' : styles.A1homeMo)}>
+      {/* 背景图 */}
+      <img
+        onLoad={() => setBaseImg(true)}
+        className='homeImg'
+        src={require('@/assets/sgImg/homeBg.jpg')}
+        alt=''
+      />
+
       <div className='loadingP' style={{ display: loadOk ? 'none' : 'flex' }}>
-        <div className='A1baseVideo'></div>
+        <div className='A1baseVideo' style={{ opacity: progress >= 100 ? 1 : 0 }}></div>
 
         <div className='btn' onClick={() => enter()}>
           {progress !== 100 ? (
@@ -125,11 +150,18 @@ function A1home() {
       {baseFlag ? (
         <div className='A1videoBox'>
           <div className='A1video' style={{ opacity: 1 }}></div>
-          <div className='A1videoBtn' onClick={() => {
-            setIsClickedSkip(true)
-            if (!isClickedSkip) window.location.replace('#/base')
-          }}>
+          <div
+            className='A1videoBtn'
+            onClick={() => {
+              // 删除第二个动画
+              playerRef.current.destroy()
+              domDelOwnFu('.A1video')
+              store.dispatch({ type: 'layout/homeVideoFlag', payload: true })
+              window.location.replace('#/base')
+            }}
+          >
             跳过
+            <img src={require('@/assets/sgImg/icon_skip.png')} alt='' />
           </div>
         </div>
       ) : null}

src/pages/A6ybwx/index.module.scss

@@ -19,7 +19,7 @@
         left: 4%;
         cursor: pointer;
 
-        & > img {
+        &>img {
           height: 100%;
           object-fit: contain;
         }
@@ -28,6 +28,28 @@
       .A6video {
         width: 100%;
         height: 100%;
+        position: relative;
+
+        .A6videoDom {
+          width: 100%;
+          height: 100%;
+        }
+
+        .A1videoBtn {
+          position: absolute;
+          bottom: 15px;
+          right: 15px;
+          color: #fff;
+          font-size: 18px;
+          letter-spacing: 4px;
+
+          &>img {
+            position: relative;
+            top: -3px;
+            width: 30px;
+            height: 30px;
+          }
+        }
       }
 
       .enterBtn {
@@ -62,6 +84,7 @@
         flex-direction: column;
         align-items: center;
         gap: 20px;
+
         .tab1,
         .tab2,
         .tab3 {
@@ -74,14 +97,17 @@
           color: rgba(91, 71, 46, 1);
           font-size: 12px;
         }
+
         .tab1 {
           background: url('../../assets/img/A6_fanfeng.png') no-repeat center center;
           background-size: 100% 100%;
         }
+
         .tab2 {
           background: url('../../assets/img/A6_shixi.png') no-repeat center center;
           background-size: 100% 100%;
         }
+
         .tab3 {
           background: url('../../assets/img/A6_sangzang.png') no-repeat center center;
           background-size: 100% 100%;
@@ -103,9 +129,11 @@
           object-fit: fill !important;
         }
       }
+
       .tabBar {
         width: 340px;
         height: 45px;
+
         .tab {
           width: 46%;
           font-size: 18px;
@@ -114,4 +142,4 @@
       }
     }
   }
-}
+}

src/pages/A6ybwx/index.tsx

@@ -1,13 +1,13 @@
-import React, { useState, useEffect, useRef } from "react";
-import styles from "./index.module.scss";
-import StatueArt from "./StatueArt";
-import Genealogy from "./Genealogy";
+import React, { useState, useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import StatueArt from './StatueArt'
+import Genealogy from './Genealogy'
 import classNames from 'classnames'
-import { isPc } from "@/utils/http";
-import MenuSider from "@/components/MenuSider";
+import { isPc } from '@/utils/http'
+import MenuSider from '@/components/MenuSider'
 
 function A6ybwx() {
-  const [isEnter, setIsEnter] = useState(true)
+  const [isEnter, setIsEnter] = useState(false)
   const [videoOk, setVideoOk] = useState(false)
   const [gotoTab, setGotoTab] = useState(0)
 
@@ -27,8 +27,8 @@ function A6ybwx() {
       objectFit: 'cover', // 视频的object-fit样式, 默认 cover
       loop: false, // 是否循环, 默认false
       autoplay: false, // 自动播放, 默认false
-      onPlay: () => { }, // 触发播放事件
-      onPause: () => { }, // 触发暂停事件
+      onPlay: () => {}, // 触发播放事件
+      onPause: () => {}, // 触发暂停事件
       onEnded: () => {
         setIsEnter(true)
         playerRef.current.destroy()
@@ -38,7 +38,7 @@ function A6ybwx() {
       } //有足够的数据可以播放了
     }
     playerRef.current = F_Video('./myData/ybwx.ts', params)
-    const dom = document.querySelector('.A6video')!
+    const dom = document.querySelector('.A6videoDom')!
     dom.append(playerRef.current.domElement)
   }, [])
 
@@ -57,16 +57,32 @@ function A6ybwx() {
 
   return (
     <div className={classNames(styles.A6ybwx, isPc ? '' : styles.A6ybwxMo)}>
-      <div className="videoBox">
+      <div className='videoBox'>
         <div className='back' onClick={() => window.location.replace('#/base')}>
           <img src={require('@/assets/img/btn_back.png')} alt='' />
         </div>
 
         {/* ------------微信浏览器不让视频自动播放，用ts的方式*/}
-        <div className='A6video' style={{ opacity: 1 }}></div>
-        <iframe style={{ zIndex: isEnter ? 2 : -1 }} title="A6ybwx" src="https://app.4dage.com/projects/Chenzhebei-ShanxiMuseum/RoomScene/index.html" />
+        <div className='A6video' style={{ opacity: 1 }}>
+          <div className='A6videoDom'></div>
+          <div
+            className='A1videoBtn'
+            onClick={() => {
+              setIsEnter(true)
+              playerRef.current.destroy()
+            }}
+          >
+            跳过
+            <img src={require('@/assets/sgImg/icon_skip.png')} alt='' />
+          </div>
+        </div>
+        <iframe
+          style={{ zIndex: isEnter ? 2 : -1 }}
+          title='A6ybwx'
+          src='https://app.4dage.com/projects/Chenzhebei-ShanxiMuseum/RoomScene/index.html'
+        />
 
-        <div className="BtnTabBar" style={{ display: isEnter ? 'flex' : 'none' }}>
+        <div className='BtnTabBar' style={{ display: isEnter ? 'flex' : 'none' }}>
           <div className='tab1' onClick={() => setGotoTab(1)} />
           <div className='tab2' onClick={() => setGotoTab(2)} />
           <div className='tab3' onClick={() => setGotoTab(3)} />
@@ -84,6 +100,6 @@ function A6ybwx() {
   )
 }
 
-const MemoA6ybwx = React.memo(A6ybwx);
+const MemoA6ybwx = React.memo(A6ybwx)
 
-export default MemoA6ybwx;
+export default MemoA6ybwx

src/store/reducer/layout.ts

@@ -1,75 +1,77 @@
-import { LookDomType } from "@/types";
-import { MessageType } from "@/utils/message";
+import { LookDomType } from '@/types'
+import { MessageType } from '@/utils/message'
 
 // 初始化状态
 const initState = {
   isHH: false,
-   style: {},
+  style: {},
   // 所有图片点击预览查看大图
   lookBigImg: {
-    url: "",
-    show: false,
+    url: '',
+    show: false
   },
   // 查看视频、音频、模型
   lookDom: {
-    src: "",
-    type: "",
+    src: '',
+    type: ''
   } as LookDomType,
 
   // antd轻提示(兼容360浏览器)
   message: {
-    txt: "",
-    type: "info",
-    duration: 3,
+    txt: '',
+    type: 'info',
+    duration: 3
   } as MessageType,
   // 上传文件点击取消
   closeUpFile: {
     fu: () => {},
-    state: false,
+    state: false
   },
-};
+  // home视频点击跳过
+  homeVideoFlag: false
+}
 
 // 定义 action 类型
 type LayoutActionType =
-| { type: 'layout/isHH'; payload: boolean }
-| { type: 'layout/style'; payload: any }
-  | { type: "layout/lookBigImg"; payload: { url: string; show: boolean } }
-  | { type: "layout/lookDom"; payload: LookDomType }
-  | { type: "layout/message"; payload: MessageType }
+  | { type: 'layout/isHH'; payload: boolean }
+  | { type: 'layout/style'; payload: any }
+  | { type: 'layout/lookBigImg'; payload: { url: string; show: boolean } }
+  | { type: 'layout/lookDom'; payload: LookDomType }
+  | { type: 'layout/message'; payload: MessageType }
+  | { type: 'layout/homeVideoFlag'; payload: boolean }
   | {
-      type: "layout/closeUpFile";
+      type: 'layout/closeUpFile'
       payload: {
-        fu: () => void;
-        state: boolean;
-      };
-    };
+        fu: () => void
+        state: boolean
+      }
+    }
 
 // 频道 reducer
-export default function layoutReducer(
-  state = initState,
-  action: LayoutActionType
-) {
+export default function layoutReducer(state = initState, action: LayoutActionType) {
   switch (action.type) {
     case 'layout/isHH':
       return { ...state, isHH: action.payload }
     case 'layout/style':
       return { ...state, style: action.payload }
     // 所有图片点击预览查看大图
-    case "layout/lookBigImg":
-      return { ...state, lookBigImg: action.payload };
+    case 'layout/lookBigImg':
+      return { ...state, lookBigImg: action.payload }
     // 查看视频
-    case "layout/lookDom":
-      return { ...state, lookDom: action.payload };
+    case 'layout/lookDom':
+      return { ...state, lookDom: action.payload }
 
     // antd轻提示(兼容360浏览器)
-    case "layout/message":
-      return { ...state, message: action.payload };
+    case 'layout/message':
+      return { ...state, message: action.payload }
     // 上传文件点击取消
-    case "layout/closeUpFile":
-      return { ...state, closeUpFile: action.payload };
+    case 'layout/closeUpFile':
+      return { ...state, closeUpFile: action.payload }
+    // home视频点击跳过
+    case 'layout/homeVideoFlag':
+      return { ...state, homeVideoFlag: action.payload }
+
     default:
-      return state;
+      return state
   }
 }
-
-