卧槽

Code/public/myData/myData.js

@@ -14,7 +14,7 @@ const myDataTemp = {
 
   // 如果横屏竖屏用同样的数据，只需要在HH(横屏中放一份就可以了)
 
-  // 首页(静态资源目录位置：staticData/（HH或者SS）/home)
+  // 首页(静态资源目录位置：staticData/HH/home)
   home: {
     // 背景图路径+名字
     bgImg: 'home/bg.jpg',
@@ -24,7 +24,7 @@ const myDataTemp = {
     lastVideo: 'home/end.mp4'
   },
 
-  // 车骑拜谒(静态资源目录位置：staticData/（HH或者SS）/visit)
+  // 车骑拜谒(静态资源目录位置：staticData/HH/visit)
   visit: {
     // 开场动画视频名字
     videoSta: 'visit/base.mp4',
@@ -334,7 +334,7 @@ const myDataTemp = {
     ]
   },
 
-  // 主客宴请(静态资源目录位置：staticData/（HH或者SS）/banquet)
+  // 主客宴请(静态资源目录位置：staticData/HH/banquet)
   banquet: {
     // 开场动画视频名字
     videoSta: 'banquet/base.mp4',
@@ -387,21 +387,21 @@ const myDataTemp = {
       }
     ]
   },
-  // 乐舞百戏(静态资源目录位置：staticData/（HH或者SS）/dance)
+  // 乐舞百戏(静态资源目录位置：staticData/HH/dance)
   dance: {
     // 热点
     hot: [
       {
+        // 热点名字
         name: '四神云气图',
-        // 横屏位置
-        hhLoc: {
+        // 热点图片路径+名字
+        imgSrc: 'dance/hot1.png',
+        // 点击之后的过度动画路径+名字
+        videoSrc: 'dance/8.mp4',
+        // 热点定位百分比
+        loc: {
           top: '10%',
           right: '10%'
-        },
-        // 竖屏位置
-        ssLoc: {
-          top: '0%',
-          right: '10%'
         }
       }
     ],
@@ -452,5 +452,10 @@ const myDataTemp = {
 
     // 最后的过长动画路径+名字
     lastVideo: 'dance/end.mp4'
+  },
+  // 四神云气图(静态资源目录位置：staticData/HH/yun)
+  yun: {
+    name: '四神云气图',
+    tit: '墓室壁画'
   }
 }

Code/src/App.tsx

@@ -14,8 +14,15 @@ const A3banquet = React.lazy(() => import('./pages/A3banquet'))
 const A4dance = React.lazy(() => import('./pages/A4dance'))
 const A5chef = React.lazy(() => import('./pages/A5chef'))
 const B1more = React.lazy(() => import('./pages/B1more'))
-const Text = React.lazy(() => import('./pages/Text'))
 
+// 云起图仙居 等热点集合页面
+const B2hots = React.lazy(() => import('./pages/B2hots'))
+// 云气图
+const B3yun = React.lazy(() => import('./pages/B3yun'))
+// 仙居
+const B4xian = React.lazy(() => import('./pages/B4xian'))
+
+const Text = React.lazy(() => import('./pages/Text'))
 declare global {
   //设置全局属性
   interface Window {
@@ -24,6 +31,20 @@ declare global {
   }
 }
 
+let tempW = document.documentElement.clientWidth
+let tempH = document.documentElement.clientHeight
+
+let tempMax = tempW >= tempH ? tempW : tempH
+let tempMin = tempW >= tempH ? tempH : tempW
+
+const pageBi = Math.round(Number((tempMax / tempMin).toFixed(2)))
+
+// 设计图按照 844 X 390 来开发
+const planSize = {
+  width: 844,
+  height: Math.round(Number((844 / pageBi).toFixed(0)))
+}
+
 export default function App() {
   useEffect(() => {
     // 打包环境 刷新页面从 首页 开始
@@ -37,11 +58,6 @@ export default function App() {
   // 根元素
   const rootRef = useRef<any>(null)
 
-  // 是否是横屏，默认是false
-  // 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
@@ -51,44 +67,45 @@ export default function App() {
     if (width >= height) {
       //横屏
       isHHTemp = true
+      const sizeW = width / planSize.width
+      let sizeH = height / planSize.height
+
+      let moveX = (planSize.width - width) / 2
+      let moveY = (planSize.height - height) / 2
+
+      if (width >= planSize.width) moveX = 0
       rootRef.current.style.left = '0'
-      rootRef.current.style.transform = 'rotate(0deg)'
-      // 最大宽度1200px
-      // if (width >= 1200) {
-      //   width = 1200
-      //   height = 675
-      // }
+      rootRef.current.style.transform = `translate(${-moveX}px,${-moveY}px) scale(${sizeW},${sizeH}) rotate(0deg)`
+      rootRef.current.style.transformOrigin = 'center'
     } else {
       // 竖屏
-      // width = width >= 800 ? 800 : width
       isHHTemp = false
       const temp = width
       width = height
       height = temp
+
+      const sizeW = width / planSize.width
+      let sizeH = height / planSize.height
+
       rootRef.current.style.left = '100%'
-      rootRef.current.style.transform = 'rotate(90deg)'
+      rootRef.current.style.transform = `rotate(90deg) scale(${sizeW},${sizeH})`
+
       rootRef.current.style.transformOrigin = 'left top'
     }
 
     // 横竖屏变化的时候 刷新页面
 
-    // 待完善
     // if (window.isHH !== isHHTemp) {
     //   window.location.reload()
     // }
 
     store.dispatch({ type: 'layout/isHH', payload: isHHTemp })
-    clearTimeout(timeRef.current)
-    timeRef.current = window.setTimeout(() => {
-      rootRef.current.style.width = width + 'px'
-      rootRef.current.style.height = height + 'px'
-    }, 100)
   }, [])
 
   useEffect(() => {
     rootRef.current = document.querySelector('#root')
-    rootRef.current.style.width = document.documentElement.clientWidth + 'px'
-    rootRef.current.style.height = document.documentElement.clientHeight + 'px'
+    rootRef.current.style.width = planSize.width + 'px'
+    rootRef.current.style.height = planSize.height + 'px'
 
     pageFullChangeFu()
     window.addEventListener('resize', pageFullChangeFu, false)
@@ -106,6 +123,9 @@ export default function App() {
             <Route path='/dance' component={A4dance} exact />
             <Route path='/chef' component={A5chef} exact />
             <Route path='/more' component={B1more} exact />
+            <Route path='/hots' component={B2hots} exact />
+            <Route path='/yun' component={B3yun} exact />
+            <Route path='/xian' component={B4xian} exact />
             <Route path='/text' component={Text} exact />
             <Route path='*' component={NotFound} />
           </Switch>

Code/src/assets/styles/base.css

@@ -21,7 +21,7 @@ body {
   font-size: var(--fontNum);
   height: 100%;
   color: black;
-  overflow: auto;
+  overflow: hidden;
 }
 #root {
   overflow: hidden;
@@ -93,3 +93,9 @@ textarea {
 .sizeNo {
   font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
 }
+.hoverD {
+  transition: all 0.3s;
+}
+.hoverD:hover {
+  transform: scale(1.1);
+}

Code/src/assets/styles/base.less

@@ -25,7 +25,7 @@ body {
   font-size: var(--fontNum);
   height: 100%;
   color: black;
-  overflow: auto;
+  overflow: hidden;
   // background-color: rgba(0, 0, 0, 0.8);
 }
 
@@ -115,3 +115,10 @@ textarea {
   font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti',
     'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
 }
+
+.hoverD {
+  transition: all 0.3s;
+  &:hover {
+    transform: scale(1.1);
+  }
+}

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

@@ -195,69 +195,23 @@
       }
     }
 
-    // 竖屏
-    @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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import useDataUrl from '@/components/ownUse/useDataUrl'
-import useMove from '@/components/ownUse/useMove'
+// import useMove from '@/components/ownUse/useMove'
 import { myData } from '@/utils/http'
 import classNames from 'classnames'
 import history from '@/utils/history'
@@ -10,7 +10,7 @@ import { domDelOwnFu } from '@/utils/utilsSome'
 function A1home() {
   const { dataUrlSame } = useDataUrl()
 
-  const { touchstart, touchmove, touchend } = useMove()
+  // const { touchstart, touchmove, touchend } = useMove()
 
   // 动画视频的ref
   const videoRef = useRef<HTMLVideoElement>(null)
@@ -206,12 +206,12 @@ function A1home() {
       {loding !== 110 || lastVideo ? null : (
         <div
           className='A1btnBox'
-          onTouchStart={e => touchstart(e.touches[0].pageY)}
-          onTouchMove={e => touchmove(e.touches[0].pageY)}
-          onTouchEnd={() => touchend(val => videoEndFu(val), 'mobile')}
-          onMouseDown={e => touchstart(e.pageY)}
-          onMouseMove={e => touchmove(e.pageY)}
-          onMouseUp={() => touchend(val => videoEndFu(val), 'pc')}
+          // onTouchStart={e => touchstart(e.touches[0].pageY)}
+          // onTouchMove={e => touchmove(e.touches[0].pageY)}
+          // onTouchEnd={() => touchend(val => videoEndFu(val), 'mobile')}
+          // onMouseDown={e => touchstart(e.pageY)}
+          // onMouseMove={e => touchmove(e.pageY)}
+          // onMouseUp={() => touchend(val => videoEndFu(val), 'pc')}
         >
           <img
             hidden={ind === myData.home.videos.length - 1}

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

@@ -113,7 +113,7 @@
         position: absolute;
         z-index: 10;
         top: 0;
-        right: 0;
+        right: -40px;
         width: 36px;
         height: auto;
         cursor: pointer;
@@ -159,47 +159,5 @@
         }
       }
     }
-
-    // 竖屏
-    @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/Hot2/index.module.scss

@@ -40,6 +40,9 @@
         width: 100%;
         height: calc(100% - 150px);
         overflow-y: auto;
+
+        border-bottom: 1px solid transparent;
+
         &::-webkit-scrollbar {
           display: none;
         }
@@ -136,62 +139,12 @@
       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;
-          }
+      .h2Main .h2FlooBox .h2Floo {
+        max-width: 100%;
+        .h2FlooRow {
+          font-size: 12px;
         }
       }
     }

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

@@ -182,62 +182,29 @@
       }
     }
 
-    // 竖屏
-    @media all and (orientation: portrait) {
-      // video {
-      //   object-fit: none;
-      // }
-    }
-
     // 屏幕>=1200
     @media screen and (min-width: 1200px) {
       .A2base {
-        & > img {
-          width: 1200px;
-        }
         .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');

Code/src/pages/A2visit/index.tsx

@@ -162,9 +162,9 @@ function A2visit() {
 
         <div className='pvRRbtn'>
           {/* 漫游 待完善 */}
-          <div className='pvRRbtn1'></div>
+          <div className='pvRRbtn1' title='漫游模式'></div>
           {/* 更多 跳新页面 */}
-          <div className='pvRRbtn2' onClick={() => history.push('/more')}></div>
+          <div title='更多' className='pvRRbtn2' onClick={() => history.push('/more')}></div>
         </div>
       </div>
 

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

@@ -200,62 +200,29 @@
       }
     }
 
-    // 竖屏
-    @media all and (orientation: portrait) {
-      // video {
-      //   object-fit: none;
-      // }
-    }
-
     // 屏幕>=1200
     @media screen and (min-width: 1200px) {
       .A3base {
-        & > img {
-          width: 1200px;
-        }
         .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');

Code/src/pages/A3banquet/index.tsx

@@ -167,9 +167,9 @@ function A3banquet() {
 
         <div className='pvRRbtn'>
           {/* 漫游 待完善 */}
-          <div className='pvRRbtn1'></div>
+          <div className='pvRRbtn1' title='漫游模式'></div>
           {/* 更多 跳新页面 */}
-          <div className='pvRRbtn2' onClick={() => history.push('/more')}></div>
+          <div className='pvRRbtn2' title='更多' onClick={() => history.push('/more')}></div>
         </div>
       </div>
 

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

@@ -112,6 +112,7 @@
         left: 50%;
         transform: translateX(-50%);
         display: flex;
+        z-index: 31;
         .pvflRow {
           width: 60px;
           height: 70px;
@@ -216,7 +217,7 @@
       .pvRRbtn {
         position: absolute;
         right: 25px;
-        bottom: 65px;
+        bottom: 25px;
         z-index: 10;
         display: flex;
 
@@ -271,81 +272,105 @@
       pointer-events: auto;
     }
 
-    // 竖屏
-    @media all and (orientation: portrait) {
-      // video {
-      //   object-fit: none;
-      // }
+    // 中间的8个动画
+    .A4floorBox {
+      position: absolute;
+      z-index: 30;
+      opacity: 1;
+      transition: opacity 0.5s;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-size: 100% 100%;
+      background-color: rgba(0, 0, 0, 0.4);
+      .A4fMain {
+        position: absolute;
+        top: 45%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 460px;
+        height: 260px;
+
+        // 边框遮盖
+        .A4fMainKK {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 10;
+          pointer-events: none;
+        }
+
+        .A4fMback {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          right: -50px;
+          width: 30px;
+          height: auto;
+          cursor: pointer;
+        }
+        .A4fRow {
+          position: absolute;
+          top: 0;
+          left: 0;
+          transition: opacity 0.5s;
+          width: 100%;
+          height: 100%;
+          padding: 8px 10px;
+        }
+      }
+    }
+    .A4floorBoxHide {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    // 点击 热点 云气图
+    .A4hotBox {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      pointer-events: none;
+      z-index: 32;
+      transition: all 0.5s;
+    }
+    .A4hotBoxShow {
+      opacity: 1;
+      pointer-events: auto;
     }
 
     // 屏幕>=1200
     @media screen and (min-width: 1200px) {
       .A4base {
-        & > img {
-          width: 1200px;
-        }
         .A4baseBtn {
-          bottom: 100px;
-          width: 160px;
-
           & > div {
-            font-size: 22px;
             transition: all 0.3s;
             &:hover {
               color: #ead98f;
             }
           }
-
-          .A4BIcon {
-            width: 50px;
-            top: -100px;
-          }
         }
       }
 
       .pvBox {
         .pvBtn {
-          width: 160px;
-          right: 40px;
           & > div {
             transition: all 0.3s;
-            font-size: 20px;
             &:hover {
               color: #ead98f;
             }
           }
         }
 
-        // 底部
-        .pvfloor {
-          .pvflRow {
-            width: 100px;
-            height: 110px;
-
-            .pvflR2 {
-              & > img {
-                width: 90px;
-              }
-            }
-            .pvflR3 {
-              width: 96px;
-              font-size: 22px;
-            }
-          }
-        }
-
         .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');

Code/src/pages/A4dance/index.tsx

@@ -6,14 +6,10 @@ import classNames from 'classnames'
 import { domDelOwnFu } from '@/utils/utilsSome'
 import { ArrowRightOutlined } from '@ant-design/icons'
 import history from '@/utils/history'
-import { useSelector } from 'react-redux'
-import { RootState } from '@/store'
 
 function A4dance() {
   const { dataUrlSame } = useDataUrl()
 
-  const isHH = useSelector((state: RootState) => state.A0Layout.isHH)
-
   // 待完善
   const [loding, setLoding] = useState(100)
 
@@ -27,7 +23,7 @@ function A4dance() {
         return
       }
       setLoding(loding + 1)
-    }, 30)
+    }, 40)
   }, [loding])
 
   // 点击继续
@@ -66,6 +62,38 @@ function A4dance() {
   // 底部选中
   const [floorAc, setFloorAc] = useState(-1)
 
+  useEffect(() => {
+    if (floorAc !== -1) {
+      setTimeout(() => {
+        const domAll: any = document.querySelectorAll('.A4fRvideo')
+        if (domAll && domAll.length) {
+          domAll.forEach((v: HTMLVideoElement, i: number) => {
+            if (floorAc === i) v.play()
+            else {
+              v.pause()
+              v.currentTime = 0
+            }
+          })
+        }
+      }, 100)
+    }
+  }, [floorAc])
+
+  // 点击 云气图
+
+  const hotVideoRef = useRef<HTMLVideoElement>(null)
+
+  const [hotShow, setHotShow] = useState(false)
+
+  const hotShowFu = useCallback(() => {
+    setHotShow(true)
+    setTimeout(() => {
+      if (hotVideoRef.current) {
+        hotVideoRef.current.play()
+      }
+    }, 100)
+  }, [])
+
   return (
     <div className={styles.A4dance} style={{ backgroundImage: `url(${dataUrlSame}dance/bj.jpg)` }}>
       {/* 初始页面 */}
@@ -98,17 +126,18 @@ function A4dance() {
           loding === 110 ? 'pvBoxShow' : 'pvBoxHide'
         )}
       >
-        {/* 热点  待完善*/}
+        {/* 热点 云气图*/}
         {myData.dance.hot.map((item, index) => (
           <div
+            onClick={hotShowFu}
             key={index}
-            className='pvHot'
+            className='pvHot hoverD'
             style={{
-              top: isHH ? item.hhLoc.top : item.ssLoc.top,
-              right: isHH ? item.hhLoc.right : item.ssLoc.right
+              top: item.loc.top,
+              right: item.loc.right
             }}
           >
-            <img src={`${dataUrlSame}dance/hotIcon.png`} alt='' />
+            <img src={dataUrlSame + item.imgSrc} alt='' />
           </div>
         ))}
 
@@ -145,10 +174,60 @@ function A4dance() {
         {/* 右下角按钮 */}
         <div className='pvRRbtn'>
           {/* 漫游 待完善 */}
-          <div className='pvRRbtn1'></div>
+          <div className='pvRRbtn1' title='漫游模式'></div>
           {/* 更多 跳新页面 */}
-          <div className='pvRRbtn2' onClick={() => history.push('/chef')}></div>
+          <div className='pvRRbtn2' title='更多' onClick={() => history.push('/chef')}></div>
         </div>
+
+        {/* 中间的8个动画视频*/}
+        <div
+          className={classNames('A4floorBox', floorAc === -1 ? 'A4floorBoxHide' : '')}
+          style={{ backgroundImage: `url(${dataUrlSame}dance/dongBj.png)` }}
+        >
+          <div className='A4fMain'>
+            {/* 边框遮盖 */}
+            <img className='A4fMainKK' src={`${dataUrlSame}dance/dongK.png`} alt='' />
+
+            {/* 返回按钮 */}
+            <img
+              className='A4fMback'
+              onClick={() => setFloorAc(-1)}
+              src={`${dataUrlSame}dance/back22.png`}
+              alt=''
+            />
+            {myData.dance.floor.map((item, index) => (
+              <div key={index} className='A4fRow' style={{ opacity: floorAc === index ? 1 : 0 }}>
+                <video
+                  className='A4fRvideo'
+                  playsInline
+                  muted
+                  webkit-playsinline='true'
+                  x5-video-player-type='h5'
+                  src={dataUrlSame + item.videoSrc}
+                >
+                  <source type='video/mp4' />
+                  Your browser does not support the video tag.
+                </video>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* 点击四神云气图的动画 */}
+      <div className={classNames('A4hotBox', hotShow ? 'A4hotBoxShow' : '')}>
+        <video
+          ref={hotVideoRef}
+          playsInline
+          muted
+          webkit-playsinline='true'
+          x5-video-player-type='h5'
+          src={dataUrlSame + myData.dance.hot[0].videoSrc}
+          onEnded={() => history.push('/yun')}
+        >
+          <source type='video/mp4' />
+          Your browser does not support the video tag.
+        </video>
       </div>
 
       {/* 最后一个过长动画 */}

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

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

Code/src/pages/B2hots/index.tsx

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

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

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

Code/src/pages/B3yun/index.tsx

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

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

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

Code/src/pages/B4xian/index.tsx

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

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

@@ -1,4 +1,8 @@
 .Text {
   :global {
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
   }
 }

Code/src/pages/Text/index.tsx

@@ -1,43 +1,15 @@
+/* eslint-disable jsx-a11y/iframe-has-title */
 import React, { useEffect } from 'react'
 import styles from './index.module.scss'
 function Text() {
-  useEffect(() => {
-    const video: any = document.getElementById('myVideo')
-    // const progressBar: any = document.getElementById('progressBar')
-
-    // video.addEventListener('progress', function () {
-    //   const total = video.duration
-
-    //   console.log('123', total)
-
-    //   if (total > 0) {
-    //     console.log('cccc', video.buffered)
-
-    //     if (video.buffered) {
-    //       const end = video.buffered.end(0)
-    //       const preloadProgress = (end / total) * 100
-
-    //       console.log('----', total, preloadProgress)
-
-    //       progressBar.value = preloadProgress
-    //     }
-
-    //     // const start = video.buffered.start(0)
-    //   }
-    // })
-
-    video.play()
-  }, [])
+  useEffect(() => {}, [])
 
   return (
     <div className={styles.Text}>
-      <video id='myVideo' width='320' height='240' muted controls>
-        <source src='https://houseoss.4dkankan.com/project/henan/3.mp4' type='video/mp4' />
-        Your browser does not support the video tag.
-      </video>
-      <div id='progressBarContainer'>
-        <progress id='progressBar' value='0' max='100'></progress>
-      </div>
+      <iframe
+        src='https://testjp-xspace.4dkankan.com/?m=SG-t-jp-D8De5n2Nn8F&serial=17249031446913'
+        frameBorder='0'
+      ></iframe>
     </div>
   )
 }

Code/src/types/declaration.d.ts

@@ -47,11 +47,9 @@ type MyDataType = {
   dance: {
     hot: {
       name: string
-      hhLoc: {
-        top: string
-        right: string
-      }
-      ssLoc: {
+      imgSrc: string
+      videoSrc: string
+      loc: {
         top: string
         right: string
       }