写死人了

Code/src/App.tsx

@@ -6,15 +6,23 @@ import history from './utils/history'
 import SpinLoding from './components/SpinLoding'
 
 import NotFound from '@/components/NotFound'
-import store, { RootState } from './store'
-import { useSelector } from 'react-redux'
+import store from './store'
 import { isLoc } from './utils/http'
 const A1home = React.lazy(() => import('./pages/A1home'))
 const A2visit = React.lazy(() => import('./pages/A2visit'))
 const A3banquet = React.lazy(() => import('./pages/A3banquet'))
+const A4dance = React.lazy(() => import('./pages/A4dance'))
 const B1more = React.lazy(() => import('./pages/B1more'))
 const Text = React.lazy(() => import('./pages/Text'))
 
+declare global {
+  //设置全局属性
+  interface Window {
+    //window对象属性
+    isHH: boolean //加入对象
+  }
+}
+
 export default function App() {
   useEffect(() => {
     // 打包环境 刷新页面从 首页 开始
@@ -29,15 +37,14 @@ export default function App() {
   const rootRef = useRef<any>(null)
 
   // 是否是横屏，默认是false
-  const isHH = useSelector((state: RootState) => state.A0Layout.isHH)
-
-  useEffect(() => {}, [isHH])
+  // const isHH = useSelector((state: RootState) => state.A0Layout.isHH)
 
   const timeRef = useRef(-1)
 
   const pageFullChangeFu = useCallback(() => {
     let width = document.documentElement.clientWidth
     let height = document.documentElement.clientHeight
+
     let isHHTemp = false
 
     if (width >= height) {
@@ -53,6 +60,13 @@ export default function App() {
       // width = width >= 800 ? 800 : width
       isHHTemp = false
     }
+
+    // 横竖屏变化的时候 刷新页面
+
+    if (window.isHH !== isHHTemp) {
+      window.location.reload()
+    }
+
     store.dispatch({ type: 'layout/isHH', payload: isHHTemp })
     clearTimeout(timeRef.current)
     timeRef.current = window.setTimeout(() => {
@@ -79,6 +93,7 @@ export default function App() {
             <Route path='/' component={A1home} exact />
             <Route path='/visit' component={A2visit} exact />
             <Route path='/banquet' component={A3banquet} exact />
+            <Route path='/dance' component={A4dance} exact />
             <Route path='/more' component={B1more} exact />
             <Route path='/text' component={Text} exact />
             <Route path='*' component={NotFound} />

Code/src/assets/styles/base.css

@@ -55,6 +55,13 @@ textarea {
   transition: opacity 0.5s;
   text-align: center;
 }
+.noFindPage .ant-result {
+  padding: 20px !important;
+  transform: scale(0.8);
+}
+.noFindPage .ant-result .ant-result-subtitle {
+  font-size: 20px;
+}
 [hidden] {
   display: none !important;
 }
@@ -83,3 +90,6 @@ textarea {
 .ant-image-preview-operations {
   background-color: rgba(0, 0, 0, 0.8) !important;
 }
+.sizeNo {
+  font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
+}

Code/src/assets/styles/base.less

@@ -66,6 +66,13 @@ textarea {
   opacity: 0;
   transition: opacity 0.5s;
   text-align: center;
+  .ant-result {
+    padding: 20px !important;
+    transform: scale(0.8);
+    .ant-result-subtitle {
+      font-size: 20px;
+    }
+  }
 }
 
 [hidden] {
@@ -102,3 +109,9 @@ textarea {
 .ant-image-preview-operations {
   background-color: rgba(0, 0, 0, 0.8) !important;
 }
+
+// 默认字体
+.sizeNo {
+  font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti',
+    'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
+}

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

@@ -5,6 +5,7 @@
       height: 100%;
       object-fit: fill;
     }
+
     .A1base {
       width: 100%;
       height: 100%;
@@ -13,7 +14,7 @@
       opacity: 1;
       transition: opacity 0.5s;
       background-size: 100% 100%;
-      & > img {
+      .A1Vlogo {
         position: absolute;
         top: 56px;
         width: 280px;
@@ -29,13 +30,14 @@
         transform: translateX(-50%);
         color: #733c00;
       }
+
       .A1lodingBtn {
         cursor: pointer;
         width: 100px;
         height: auto;
-        bottom: 40px;
+        bottom: 4%;
         & > img {
-          width: 100px;
+          width: 100%;
           height: auto;
         }
         & > div {
@@ -51,24 +53,46 @@
           font-size: 16px;
         }
       }
-      // 序列帧动画
-      .A1move {
-        width: 100%;
-        height: auto;
+
+      // 序列帧
+      .A1Bfloor {
         position: absolute;
-        // pointer-events: none;
+        pointer-events: none;
         bottom: 0;
-        left: 50%;
+        width: 100%;
+        height: 64px;
+      }
+
+      .A1Broom {
+        z-index: 10;
+        position: absolute;
+        bottom: 60px;
+        left: 49%;
         transform: translateX(-50%);
-        overflow: hidden;
-        & > img {
-          position: relative;
-          left: 0;
-          width: auto;
-          max-width: 30000000px;
-          max-height: 10000px;
-          object-fit: fill;
-        }
+        pointer-events: none;
+        width: 24%;
+      }
+
+      .A1Bll {
+        position: absolute;
+        bottom: 60px;
+        left: -50%;
+        width: 50%;
+        opacity: 1;
+        transition: opacity 2s;
+      }
+
+      .A1Brr {
+        position: absolute;
+        bottom: 60px;
+        right: -50%;
+        width: 50%;
+        opacity: 1;
+        transition: opacity 2s;
+      }
+
+      .A1BMoveHide {
+        opacity: 0;
       }
     }
     .A1baseHide {
@@ -173,6 +197,73 @@
 
     // 竖屏
     @media all and (orientation: portrait) {
+      // video {
+      //   object-fit: none;
+      // }
+
+      .A1base {
+        background-size: cover;
+        .A1Vlogo {
+          top: 20%;
+        }
+        // .A1lodingBtn {
+        //   bottom: 60px;
+        // }
+      }
+    }
+
+    // 屏幕>=1200
+    @media screen and (min-width: 1200px) {
+      .A1base {
+        .A1Vlogo {
+          top: 14%;
+          width: 400px;
+        }
+        .A1loding {
+          font-size: 24px;
+          bottom: 40px;
+        }
+        .A1lodingBtn {
+          bottom: 40px;
+          width: 140px;
+
+          & > div {
+            font-size: 24px;
+            transition: all 0.3s;
+            &:hover {
+              color: #ead98f;
+            }
+          }
+        }
+        .A1Bfloor {
+          height: 124px;
+        }
+        .A1Broom,
+        .A1Bll,
+        .A1Brr {
+          bottom: 120px;
+        }
+      }
+
+      .A1btnBox {
+        & > div {
+          .A1videoBtnLogo {
+            top: 14%;
+            width: 400px;
+          }
+          .A1videoBtnNext {
+            font-size: 24px;
+            bottom: 40px;
+            transition: all 0.3s;
+            & > img {
+              width: 80px;
+            }
+            &:hover {
+              color: #ead98f;
+            }
+          }
+        }
+      }
     }
   }
 }

Code/src/pages/A1home/index.tsx

@@ -8,61 +8,6 @@ import history from '@/utils/history'
 import { domDelOwnFu } from '@/utils/utilsSome'
 
 function A1home() {
-  // 有关序列帧动画
-  const [pageSize, setPageSize] = useState({
-    width: 0,
-    height: 0
-  })
-
-  const timerr = useRef(-1)
-
-  const pageSizeChange = useCallback(() => {
-    const width = document.documentElement.clientWidth
-    const height = document.documentElement.clientHeight
-
-    setPageSize({
-      width: width,
-      height: height
-    })
-
-    // 看看是否已经插入的 script
-    const ruDom = document.querySelector('#myStyle')
-    if (ruDom) ruDom.remove()
-    clearTimeout(timerr.current)
-
-    timerr.current = window.setTimeout(() => {
-      const zhen = 144
-
-      // console.log(imgWidth, imgWidth / num);
-      const styleStr = `.A1move img {
-               animation: tab2MoveImg 1s steps(${zhen}) infinite;
-             }
-             @keyframes tab2MoveImg {
-               100% {
-                 left: -${width * zhen}px;
-               }
-             }`
-      const styletDom = document.createElement('style')
-      styletDom.type = 'text/css'
-      styletDom.id = 'myStyle'
-      styletDom.innerHTML = styleStr
-      document.querySelector('html')?.appendChild(styletDom)
-    }, 100)
-  }, [])
-
-  useEffect(() => {
-    // pageSizeChange()
-
-    setTimeout(() => {
-      pageSizeChange()
-    }, 1000)
-
-    window.addEventListener('resize', pageSizeChange, false)
-    return () => {
-      window.removeEventListener('resize', pageSizeChange)
-    }
-  }, [pageSizeChange])
-
   const { dataUrlSame } = useDataUrl()
 
   const { touchstart, touchmove, touchend } = useMove()
@@ -78,6 +23,13 @@ function A1home() {
     clearInterval(timeRR.current)
     timeRR.current = window.setInterval(() => {
       if (loding >= 100) {
+        setMoveImgShow(false)
+
+        setTimeout(() => {
+          const ruDom = document.querySelector('#myStyle')
+          if (ruDom) ruDom.remove()
+        }, 3000)
+
         clearInterval(timeRR.current)
         return
       }
@@ -87,8 +39,6 @@ function A1home() {
 
   // 点击开始
   const btnStartFu = useCallback(() => {
-    window.removeEventListener('resize', pageSizeChange)
-
     setLoding(110)
     // 自动播放视频
     setTimeout(() => {
@@ -101,7 +51,7 @@ function A1home() {
     setTimeout(() => {
       domDelOwnFu('.A1base')
     }, 500)
-  }, [pageSizeChange])
+  }, [])
 
   const [ind, setInd] = useState(0)
 
@@ -151,6 +101,39 @@ function A1home() {
     }, 500)
   }, [])
 
+  // 有关序列帧
+  const A1BfloorRef = useRef<HTMLImageElement>(null)
+
+  const [moveImgShow, setMoveImgShow] = useState(true)
+
+  useEffect(() => {
+    // 看看是否已经插入的 script
+    const ruDom = document.querySelector('#myStyle')
+    if (ruDom) ruDom.remove()
+    const styleStr = `.A1Bll {
+      animation: A1BllMove1 8s infinite linear;
+    }
+    @keyframes A1BllMove1 {
+      100% {
+        left: 0;
+      }
+    }
+
+     .A1Brr {
+      animation: A1BllMove2 8s infinite linear;
+    }
+    @keyframes A1BllMove2 {
+      100% {
+        right: 0;
+      }
+    `
+    const styletDom = document.createElement('style')
+    styletDom.type = 'text/css'
+    styletDom.id = 'myStyle'
+    styletDom.innerHTML = styleStr
+    document.querySelector('html')?.appendChild(styletDom)
+  }, [])
+
   return (
     <div className={styles.A1home}>
       {/* 初始加载画面 */}
@@ -158,27 +141,36 @@ function A1home() {
         className={classNames('A1base', loding === 110 ? 'A1baseHide' : '')}
         style={{ backgroundImage: `url(${dataUrlSame}${myData.home.bgImg})` }}
       >
-        <img src={`${dataUrlSame}home/logo.png`} alt='' />
+        <img className='A1Vlogo' src={`${dataUrlSame}home/logo.png`} alt='' />
         {loding >= 100 ? (
           <div className='A1loding A1lodingBtn' onClick={btnStartFu}>
             <img src={`${dataUrlSame}visit/btn.png`} alt='' />
             <div>开始</div>
           </div>
         ) : (
-          <div className='A1loding'>{loding}%</div>
+          <div className='A1loding sizeNo'>{loding}%</div>
         )}
 
         {/* 序列帧动画 */}
-        {/* 1688x335 */}
-        {pageSize.width ? (
-          <div className='A1move'>
-            <img
-              src={`${dataUrlSame}home/move.png`}
-              style={{ height: (pageSize.width / 1688) * 335 }}
-              alt=''
-            />
-          </div>
-        ) : null}
+
+        {/* 底部颜色条 */}
+        <img ref={A1BfloorRef} className='A1Bfloor' src={`${dataUrlSame}home/floor.png`} alt='' />
+
+        {/* 底部房子 */}
+        <img className='A1Broom' src={`${dataUrlSame}home/home.png`} alt='' />
+
+        {/* 左右小人 */}
+        <img
+          className={classNames('A1Bll', moveImgShow ? '' : 'A1BMoveHide')}
+          src={`${dataUrlSame}home/left.png`}
+          alt=''
+        />
+
+        <img
+          className={classNames('A1Brr', moveImgShow ? '' : 'A1BMoveHide')}
+          src={`${dataUrlSame}home/right.png`}
+          alt=''
+        />
       </div>
 
       {/* 5个动画视频 */}

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

@@ -7,7 +7,8 @@
   z-index: 20;
   background-size: 100% 100%;
   transition: all 0.3s;
-  padding: 8% 12% 5% 12%;
+  padding: 6% 12% 4% 12%;
+  background-color: rgba(0, 0, 0, 0.6);
   :global {
     .hot1Box {
       width: 100%;
@@ -17,7 +18,7 @@
       .hot1Main {
         display: flex;
         justify-content: space-between;
-        height: 84%;
+        height: calc(100% - 55px);
         & > div {
           width: 48%;
         }
@@ -125,16 +126,14 @@
         left: 50%;
         transform: translateX(-50%);
         width: 80%;
-        height: 10%;
+        height: 34px;
         background-size: 100% 100%;
-        border: 1px dashed #ccc;
         border-radius: 4px;
         display: flex;
-        max-height: 50px;
         .h1FlooRow {
           cursor: pointer;
           flex: 1;
-          font-size: 18px;
+          font-size: 16px;
           height: 100%;
           display: flex;
           justify-content: center;
@@ -143,6 +142,7 @@
           opacity: 0.8;
         }
         .h1FlooRowShow {
+          font-weight: 700;
           opacity: 1;
           color: #eacf60;
           position: relative;
@@ -159,5 +159,47 @@
         }
       }
     }
+
+    // 竖屏
+    @media all and (orientation: portrait) {
+      // video {
+      //   object-fit: none;
+      // }
+    }
+
+    // 屏幕>=1200
+    @media screen and (min-width: 1200px) {
+      .hot1Box {
+        .hot1Main {
+          height: calc(100% - 100px);
+          .h1Mrr {
+            .h1MrrTxt {
+              & > h1 {
+                font-size: 50px;
+              }
+
+              h3 {
+                font-size: 24px;
+              }
+              h2 {
+                font-size: 26px;
+              }
+              p {
+                font-size: 22px;
+              }
+            }
+          }
+        }
+        .h1Floo {
+          height: 46px;
+          .h1FlooRow {
+            font-size: 20px;
+          }
+        }
+        .h1Mback {
+          width: 50px;
+        }
+      }
+    }
   }
 }

Code/src/pages/A2visit/PanoVideo/Hot1/index.tsx

@@ -111,7 +111,7 @@ function Hot1({ closeFu, data }: Props) {
           {data.map((item, index) => (
             <div
               onClick={() => flooIndFu(index)}
-              className={classNames('h1FlooRow', flooInd === index ? 'h1FlooRowShow' : '')}
+              className={classNames('h1FlooRow sizeNo', flooInd === index ? 'h1FlooRowShow' : '')}
               key={index}
             >
               {item.name}

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

@@ -1,12 +1,199 @@
-.Hot1 {
+.Hot2 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 20;
-  background-color: red;
-  opacity: 0.5;
+  transition: all 0.3s;
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.6);
   :global {
+    .h2Main {
+      width: 50%;
+      height: 100%;
+      background-size: 100% 100%;
+      padding: 3% 3% 1% 3%;
+      // 标题
+      .h2Titele {
+        padding: 0 50px;
+        position: relative;
+        display: inline-block;
+        color: #eacf60;
+        font-size: 30px;
+        & > img {
+          position: absolute;
+          top: 60%;
+          left: 0;
+          transform: translateY(-50%);
+          width: 40px;
+          height: auto;
+        }
+        .h2TimgR {
+          left: auto;
+          right: 0;
+        }
+      }
+      // 图文
+      .h2TuWen {
+        margin: 10px 0;
+        width: 100%;
+        height: calc(100% - 150px);
+        overflow-y: auto;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        .adm-image {
+          width: 90%;
+          margin: 0 auto;
+          height: auto;
+          min-height: 80px;
+          margin-bottom: 10px;
+          .adm-image-tip {
+            min-height: 80px;
+          }
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover !important;
+          }
+        }
+        .h2txt {
+          font-size: 14px;
+          line-height: 24px;
+          color: #fffddc;
+          p {
+            font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
+              'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
+          }
+          h3 {
+            color: #eacf60;
+            font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
+              'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
+            margin-bottom: 8px;
+          }
+        }
+      }
+      .h2TuWenDuo {
+        height: calc(100% - 115px);
+        margin-bottom: 15px;
+      }
+
+      // 底部
+      .h2FlooBox {
+        width: 100%;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        margin-bottom: 10px;
+        .h2Floo {
+          min-width: 200px;
+          text-align: center;
+          max-width: 80%;
+          height: 100%;
+          overflow-x: auto;
+          white-space: nowrap;
+          display: inline-block;
+          border-radius: 4px;
+          background: linear-gradient(
+            to right,
+            rgba(0, 0, 0, 0.2),
+            rgba(0, 0, 0, 0.5),
+            rgba(0, 0, 0, 0.2)
+          );
+          &::-webkit-scrollbar {
+            display: none;
+          }
+          .h2FlooRow {
+            padding: 0 10px;
+            display: inline-block;
+            cursor: pointer;
+            font-size: 16px;
+            color: #fffddc;
+            opacity: 0.8;
+            line-height: 38px;
+          }
+          .h2FlooRowShow {
+            font-weight: 700;
+            opacity: 1;
+            color: #eacf60;
+          }
+        }
+      }
+
+      // 返回按钮
+      .h2Back {
+        cursor: pointer;
+        text-align: center;
+        & > img {
+          width: 36px;
+          height: auto;
+        }
+      }
+    }
+    .h2Right {
+      width: 50%;
+      height: 100%;
+    }
+
+    // 竖屏
+    @media all and (orientation: portrait) {
+      // video {
+      //   object-fit: none;
+      // }
+    }
+
+    // 屏幕>=1200
+    @media screen and (min-width: 1200px) {
+      .h2Main {
+        // 标题
+        .h2Titele {
+          padding: 0 60px;
+          font-size: 40px;
+          & > img {
+            width: 50px;
+          }
+        }
+
+        .h2TuWen {
+          height: calc(100% - 240px);
+          .adm-image {
+            width: 50%;
+            margin-bottom: 20px;
+          }
+          .h2txt {
+            font-size: 20px;
+            line-height: 32px;
+
+            h3 {
+              margin-bottom: 12px;
+            }
+          }
+        }
+
+        // 底部
+        .h2FlooBox {
+          margin-top: 30px;
+          height: 50px;
+          margin-bottom: 30px;
+          .h2Floo {
+            min-width: 300px;
+
+            .h2FlooRow {
+              padding: 0 15px;
+              font-size: 20px;
+              line-height: 48px;
+            }
+          }
+        }
+
+        // 返回按钮
+        .h2Back {
+          & > img {
+            width: 50px;
+          }
+        }
+      }
+    }
   }
 }

Code/src/pages/A2visit/PanoVideo/Hot2/index.tsx

@@ -1,13 +1,91 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
-function Hot1() {
+import { VisitHotDataType } from '@/types'
+import classNames from 'classnames'
+import LazyImg from '@/components/LazyImg'
+import useDataUrl from '@/components/ownUse/useDataUrl'
+
+type Props = {
+  closeFu: () => void
+  data: VisitHotDataType
+  name: string
+}
+
+function Hot2({ closeFu, data, name }: Props) {
+  const { dataUrlSame } = useDataUrl()
+
+  const [opShow, setOpShow] = useState(false)
+
+  useEffect(() => {
+    setTimeout(() => {
+      setOpShow(true)
+    }, 300)
+  }, [])
+
+  // 底部选中
+  const [flooInd, setFlooInd] = useState(0)
+
+  const acData = useMemo(() => {
+    return data[flooInd] || []
+  }, [data, flooInd])
+
+  // 点击切换底部
+  const flooIndFu = useCallback((ind: number) => {
+    const dom = document.querySelector('.h2TuWen')
+    if (dom) dom.scrollTop = 0
+    setFlooInd(ind)
+  }, [])
+
   return (
-    <div className={styles.Hot1}>
-      <h1>Hot1</h1>
+    <div className={styles.Hot2} style={{ opacity: opShow ? 1 : 0 }}>
+      <div className='h2Main' style={{ backgroundImage: `url(${dataUrlSame}visit/hot2bj.png)` }}>
+        {/* 标题 */}
+        <div className='h2Titele'>
+          <img src={`${dataUrlSame}visit/img-yun1.png`} alt='' />
+          <img className='h2TimgR' src={`${dataUrlSame}visit/img-yun2.png`} alt='' />
+          {name}
+        </div>
+
+        <div className={classNames('h2TuWen', data.length <= 1 ? 'h2TuWenDuo' : '')}>
+          {/* 图片 */}
+          {acData.imgArr.map((url, index) => (
+            <LazyImg src={dataUrlSame + url} key={index} />
+          ))}
+
+          {/* 文字 */}
+          <div className='h2txt' dangerouslySetInnerHTML={{ __html: acData.txt }}></div>
+        </div>
+
+        {/* 底部 */}
+        {data.length <= 1 ? null : (
+          <div className='h2FlooBox'>
+            <div className='h2Floo'>
+              {data.map((item, index) => (
+                <div
+                  onClick={() => flooIndFu(index)}
+                  className={classNames(
+                    'h2FlooRow sizeNo',
+                    flooInd === index ? 'h2FlooRowShow' : ''
+                  )}
+                  key={index}
+                >
+                  {item.name}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* 返回按钮 */}
+        <div className='h2Back'>
+          <img onClick={closeFu} src={`${dataUrlSame}visit/back.png`} alt='' />
+        </div>
+      </div>
+      <div className='h2Right' onClick={closeFu}></div>
     </div>
   )
 }
 
-const MemoHot1 = React.memo(Hot1)
+const MemoHot2 = React.memo(Hot2)
 
-export default MemoHot1
+export default MemoHot2

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

@@ -1,6 +1,7 @@
 .PanoVideo {
   width: 100%;
   height: 100%;
+  background-color: #e3d3af;
 
   font-size: 20px;
   // :global {

Code/src/pages/A2visit/PanoVideo/index.tsx

@@ -21,7 +21,11 @@ function PanoVideo() {
           {item.name}
         </div>
       ))}
-      {ind === -1 ? null : ind === 0 ? <Hot1 data={data} closeFu={() => setInd(-1)} /> : <Hot2 />}
+      {ind === -1 ? null : ind === 0 ? (
+        <Hot1 data={data} closeFu={() => setInd(-1)} />
+      ) : (
+        <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.visit.hot[ind].name} />
+      )}
     </div>
   )
 }

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

@@ -12,6 +12,17 @@
       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: 100px;
@@ -19,6 +30,7 @@
         left: 50%;
         transform: translateX(-50%);
       }
+
       .A2baseBtn {
         position: absolute;
         bottom: 40px;
@@ -31,6 +43,7 @@
         & > img {
           width: 100%;
         }
+
         .A2Btxt {
           position: absolute;
           top: 0;
@@ -124,13 +137,22 @@
         bottom: 25px;
         z-index: 10;
         display: flex;
-        justify-content: space-between;
-        width: 105px;
-        & > img {
+
+        & > div {
+          background-size: 100% 100%;
+          transition: all 0.3s;
           width: 50px;
-          height: auto;
+          height: 50px;
           cursor: pointer;
         }
+
+        .pvRRbtn1 {
+          margin-right: 5px;
+          background-image: url('../../assets/img/icon-walk.png');
+        }
+        .pvRRbtn2 {
+          background-image: url('../../assets/img/icon-more.png');
+        }
       }
     }
     .pvBoxHide {
@@ -158,5 +180,76 @@
         padding-bottom: 4px;
       }
     }
+
+    // 竖屏
+    @media all and (orientation: portrait) {
+      // video {
+      //   object-fit: none;
+      // }
+    }
+
+    // 屏幕>=1200
+    @media screen and (min-width: 1200px) {
+      .A2base {
+        & > img {
+          top: 200px;
+          width: 600px;
+        }
+        .A2baseBtn {
+          bottom: 100px;
+          width: 160px;
+
+          & > div {
+            font-size: 22px;
+            transition: all 0.3s;
+            &:hover {
+              color: #ead98f;
+            }
+          }
+
+          .A2BIcon {
+            width: 50px;
+            top: -100px;
+          }
+        }
+      }
+
+      .pvBox {
+        .pvBtn {
+          width: 160px;
+          right: 40px;
+          & > div {
+            transition: all 0.3s;
+            font-size: 20px;
+            &:hover {
+              color: #ead98f;
+            }
+          }
+        }
+        .pvRRbtn {
+          right: 40px;
+          bottom: 40px;
+          z-index: 10;
+
+          & > div {
+            background-size: 100% 100%;
+            width: 70px;
+            height: 70px;
+            cursor: pointer;
+          }
+
+          .pvRRbtn1 {
+            &:hover {
+              background-image: url('../../assets/img/icon-walk1.png');
+            }
+          }
+          .pvRRbtn2 {
+            &:hover {
+              background-image: url('../../assets/img/icon-more1.png');
+            }
+          }
+        }
+      }
+    }
   }
 }

Code/src/pages/A2visit/index.tsx

@@ -103,11 +103,15 @@ function A2visit() {
       {/* 加载页面 */}
       <div className={classNames('A2base', videoInd < 0 ? '' : 'A2baseHide')}>
         <img src={`${dataUrlSame}visit/mulu.png`} alt='' />
-        <div className='A2baseBtn'>
-          <img src={`${dataUrlSame}visit/btn.png`} alt='' />
-          <div className='A2Btxt' onClick={btnStart}>
-            {loding >= 100 ? '点击继续' : '加载中'}
+        <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>
@@ -158,13 +162,9 @@ function A2visit() {
 
         <div className='pvRRbtn'>
           {/* 漫游 待完善 */}
-          <img src={`${dataUrlSame}visit/icon-walk.png`} alt='' />
+          <div className='pvRRbtn1'></div>
           {/* 更多 跳新页面 */}
-          <img
-            onClick={() => history.push('/more')}
-            src={`${dataUrlSame}visit/icon-more.png`}
-            alt=''
-          />
+          <div className='pvRRbtn2' onClick={() => history.push('/more')}></div>
         </div>
       </div>
 

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

@@ -0,0 +1,9 @@
+.PanoImg {
+  width: 100%;
+  height: 100%;
+  background-color: #e3d3af;
+
+  font-size: 20px;
+  // :global {
+  // }
+}

Code/src/pages/A3banquet/PanoImg/index.tsx

@@ -0,0 +1,32 @@
+import React, { useMemo, useState } from 'react'
+import styles from './index.module.scss'
+import { myData } from '@/utils/http'
+import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
+function PanoImg() {
+  // 0为 第一种模式的热点 其他为第二种
+  const [ind, setInd] = useState(-1)
+
+  const data = useMemo(() => {
+    if (ind !== -1) return myData.banquet.hot[ind].data
+    else return []
+  }, [ind])
+
+  return (
+    <div className={styles.PanoImg}>
+      {/* 待完善 */}
+      全景图
+      {myData.banquet.hot.map((item, index) => (
+        <div key={index} onClick={() => setInd(index)}>
+          {item.name}
+        </div>
+      ))}
+      {ind === -1 ? null : (
+        <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.banquet.hot[ind].name} />
+      )}
+    </div>
+  )
+}
+
+const MemoPanoImg = React.memo(PanoImg)
+
+export default MemoPanoImg

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

@@ -1,4 +1,274 @@
 .A3banquet {
   :global {
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+    }
+
+    // 跳过按钮
+    .A3Tiao {
+      position: absolute;
+      width: 50px;
+      height: 50px;
+      cursor: pointer;
+      bottom: 20px;
+      right: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #733c00;
+      background-size: 100% 100%;
+      font-size: 20px;
+      padding-bottom: 4px;
+    }
+
+    .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: 0px;
+        width: 600px;
+        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%;
+      height: 100%;
+      position: relative;
+      opacity: 1;
+      transition: opacity 0.5s;
+      .pvBtn {
+        position: absolute;
+        right: 20px;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+        width: 120px;
+        height: auto;
+        z-index: 10;
+        & > img {
+          width: 100%;
+        }
+        & > div {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: #fffddc;
+          font-size: 16px;
+          & > span {
+            padding-left: 5px;
+            font-size: 14px;
+          }
+        }
+      }
+      .pvRRbtn {
+        position: absolute;
+        right: 25px;
+        bottom: 25px;
+        z-index: 10;
+        display: flex;
+
+        & > div {
+          background-size: 100% 100%;
+          transition: all 0.3s;
+          width: 50px;
+          height: 50px;
+          cursor: pointer;
+        }
+
+        .pvRRbtn1 {
+          margin-right: 5px;
+          background-image: url('../../assets/img/icon-walk.png');
+        }
+        .pvRRbtn2 {
+          background-image: url('../../assets/img/icon-more.png');
+        }
+      }
+    }
+    .pvBoxHide {
+      opacity: 0;
+    }
+
+    // 最后一个长视频
+    .A3last {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      .A3videoLastBtn {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        cursor: pointer;
+        bottom: 20px;
+        right: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #733c00;
+        background-size: 100% 100%;
+        font-size: 20px;
+        padding-bottom: 4px;
+      }
+    }
+
+    // 竖屏
+    @media all and (orientation: portrait) {
+      // video {
+      //   object-fit: none;
+      // }
+    }
+
+    // 屏幕>=1200
+    @media screen and (min-width: 1200px) {
+      .A3base {
+        & > img {
+          top: 100px;
+          width: 1000px;
+        }
+        .A3baseBtn {
+          bottom: 100px;
+          width: 160px;
+
+          & > div {
+            font-size: 22px;
+            transition: all 0.3s;
+            &:hover {
+              color: #ead98f;
+            }
+          }
+
+          .A3BIcon {
+            width: 50px;
+            top: -100px;
+          }
+        }
+      }
+
+      .pvBox {
+        .pvBtn {
+          width: 160px;
+          right: 40px;
+          & > div {
+            transition: all 0.3s;
+            font-size: 20px;
+            &:hover {
+              color: #ead98f;
+            }
+          }
+        }
+        .pvRRbtn {
+          right: 40px;
+          bottom: 40px;
+          z-index: 10;
+
+          & > div {
+            background-size: 100% 100%;
+            width: 70px;
+            height: 70px;
+            cursor: pointer;
+          }
+
+          .pvRRbtn1 {
+            &:hover {
+              background-image: url('../../assets/img/icon-walk1.png');
+            }
+          }
+          .pvRRbtn2 {
+            &:hover {
+              background-image: url('../../assets/img/icon-more1.png');
+            }
+          }
+        }
+      }
+    }
   }
 }

Code/src/pages/A3banquet/index.tsx

@@ -1,9 +1,200 @@
-import React from 'react'
+import React, { useCallback, useEffect, useRef, 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'
+
 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(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])
+
+  // 点击 跳下一个章节
+
+  const [lastVideo, setLastVideo] = useState(false)
+
+  const videoRefLast = useRef<HTMLVideoElement>(null)
+
+  const lastVideoFu = useCallback(() => {
+    setLastVideo(true)
+
+    setTimeout(() => {
+      if (videoRefLast.current) {
+        videoRefLast.current.play()
+      }
+    }, 100)
+
+    // 0.5s之后删除自己
+    setTimeout(() => {
+      domDelOwnFu('.pvBox')
+    }, 500)
+  }, [])
+
   return (
     <div className={styles.A3banquet}>
-      <h1>A3banquet</h1>
+      {/* 加载页面 */}
+      <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>
+
+      {/* 过度动画页面 */}
+      <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/quan.png)` }}
+          onClick={() => setOverVideo(false)}
+        >
+          跳过
+        </div>
+      </div>
+
+      {/* 全景视频 */}
+      <div className={classNames('pvBox', lastVideo ? 'pvBoxHide' : '')} hidden={overVideo}>
+        <PanoImg />
+        {/* 跳到下一章 */}
+        <div className='pvBtn'>
+          <img src={`${dataUrlSame}visit/btn.png`} alt='' />
+          <div onClick={lastVideoFu}>
+            乐舞百戏
+            <ArrowRightOutlined />
+          </div>
+        </div>
+
+        <div className='pvRRbtn'>
+          {/* 漫游 待完善 */}
+          <div className='pvRRbtn1'></div>
+          {/* 更多 跳新页面 */}
+          <div className='pvRRbtn2' onClick={() => history.push('/more')}></div>
+        </div>
+      </div>
+
+      {/* 最后一个过长动画 */}
+      <div className='A3last'>
+        <video
+          ref={videoRefLast}
+          playsInline
+          muted
+          webkit-playsinline='true'
+          x5-video-player-type='h5'
+          src={dataUrlSame + myData.visit.lastVideo}
+          onEnded={() => history.push('/dance')}
+        >
+          <source type='video/mp4' />
+          Your browser does not support the video tag.
+        </video>
+        <div
+          className='A3videoLastBtn'
+          style={{ backgroundImage: `url(${dataUrlSame}home/quan.png)` }}
+          onClick={() => history.push('/dance')}
+        >
+          跳过
+        </div>
+      </div>
     </div>
   )
 }

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

@@ -0,0 +1,4 @@
+.A4dance {
+  :global {
+  }
+}

Code/src/pages/A4dance/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './index.module.scss'
+function A4dance() {
+  return (
+    <div className={styles.A4dance}>
+      <h1>A4dance</h1>
+    </div>
+  )
+}
+
+const MemoA4dance = React.memo(A4dance)
+
+export default MemoA4dance

Code/src/types/declaration.d.ts

@@ -11,11 +11,11 @@ declare module 'braft-utils'
 declare const baseUrlLoc: string
 declare const baseUrlAtl: string
 declare const myDataTemp: MyDataType
+declare const isPcTemp: boolean
 
 type MyDataType = {
   home: {
     bgImg: string
-    moveImg: string
     videos: string[]
     lastVideo: string
   }
@@ -31,4 +31,16 @@ type MyDataType = {
       data: VisitHotDataType
     }[]
   }
+  banquet: {
+    videoSta: string
+    videos: string[]
+    lastVideo: string
+    hot: {
+      name: string
+      size: number
+      atv: number
+      ath: number
+      data: VisitHotDataType
+    }[]
+  }
 }

Code/src/utils/http.ts

@@ -2,4 +2,8 @@ export const isLoc = process.env.NODE_ENV === 'development'
 
 export const baseURLTemp = isLoc ? baseUrlLoc : baseUrlAtl
 
+// 所有数据
 export const myData = myDataTemp
+
+// 是不是pc端
+export const isPc = isPcTemp