up一小波

Code/public/myData/myData.js

@@ -337,11 +337,11 @@ const myDataTemp = {
   // 主客宴请(静态资源目录位置：staticData/（HH或者SS）/banquet)
   banquet: {
     // 开场动画视频名字
-    videoSta: 'visit/base.mp4',
+    videoSta: 'banquet/base.mp4',
     // 过度视频
-    videos: ['visit/1.mp4'],
+    videos: ['banquet/1.mp4'],
     // 最后的过长动画路径+名字
-    lastVideo: 'visit/end.mp4',
+    lastVideo: 'banquet/end.mp4',
     hot: [
       {
         // 热点名字
@@ -361,7 +361,7 @@ const myDataTemp = {
             <br/>
             666666666666666666</p>
             `,
-            imgArr: ['visit/hot/8.png']
+            imgArr: ['banquet/hot/8.png']
           },
           {
             name: '跪',
@@ -371,7 +371,7 @@ const myDataTemp = {
             <br/>
             汉代的车大致分为轺车、轓车、轩车、斧车、安车、辎车、軿车、輂车、温凉车、人力车、鹿车、牛车、羊车、驼车等。</p>
             `,
-            imgArr: ['visit/hot/8.png']
+            imgArr: ['banquet/hot/8.png']
           },
           {
             name: '踞',
@@ -381,10 +381,76 @@ const myDataTemp = {
             <br/>
             汉代的车大致分为轺车、轓车、轩车、斧车、安车、辎车、軿车、輂车、温凉车、人力车、鹿车、牛车、羊车、驼车等。</p>
             `,
-            imgArr: ['visit/hot/8.png']
+            imgArr: ['banquet/hot/8.png']
           }
         ]
       }
     ]
+  },
+  // 乐舞百戏(静态资源目录位置：staticData/（HH或者SS）/dance)
+  dance: {
+    // 热点
+    hot: [
+      {
+        name: '四神云气图',
+        // 横屏位置
+        hhLoc: {
+          top: '10%',
+          right: '10%'
+        },
+        // 竖屏位置
+        ssLoc: {
+          top: '0%',
+          right: '10%'
+        }
+      }
+    ],
+
+    // 底部动作
+    floor: [
+      {
+        name: '击鼓',
+        imgSrc: 'dance/1.png',
+        videoSrc: 'dance/1.mp4'
+      },
+      {
+        name: '伴奏',
+        imgSrc: 'dance/2.png',
+        videoSrc: 'dance/2.mp4'
+      },
+      {
+        name: '盘鼓舞',
+        imgSrc: 'dance/3.png',
+        videoSrc: 'dance/3.mp4'
+      },
+      {
+        name: '吐火',
+        imgSrc: 'dance/4.png',
+        videoSrc: 'dance/4.mp4'
+      },
+      {
+        name: '顶棍',
+        imgSrc: 'dance/5.png',
+        videoSrc: 'dance/5.mp4'
+      },
+      {
+        name: '掷丸',
+        imgSrc: 'dance/6.png',
+        videoSrc: 'dance/6.mp4'
+      },
+      {
+        name: '杂技',
+        imgSrc: 'dance/7.png',
+        videoSrc: 'dance/7.mp4'
+      },
+      {
+        name: '相扑',
+        imgSrc: 'dance/8.png',
+        videoSrc: 'dance/8.mp4'
+      }
+    ],
+
+    // 最后的过长动画路径+名字
+    lastVideo: 'dance/end.mp4'
   }
 }

Code/src/App.tsx

@@ -12,6 +12,7 @@ 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 A5chef = React.lazy(() => import('./pages/A5chef'))
 const B1more = React.lazy(() => import('./pages/B1more'))
 const Text = React.lazy(() => import('./pages/Text'))
 
@@ -50,6 +51,8 @@ export default function App() {
     if (width >= height) {
       //横屏
       isHHTemp = true
+      rootRef.current.style.left = '0'
+      rootRef.current.style.transform = 'rotate(0deg)'
       // 最大宽度1200px
       // if (width >= 1200) {
       //   width = 1200
@@ -59,13 +62,20 @@ export default function App() {
       // 竖屏
       // width = width >= 800 ? 800 : width
       isHHTemp = false
+      const temp = width
+      width = height
+      height = temp
+      rootRef.current.style.left = '100%'
+      rootRef.current.style.transform = 'rotate(90deg)'
+      rootRef.current.style.transformOrigin = 'left top'
     }
 
     // 横竖屏变化的时候 刷新页面
 
-    if (window.isHH !== isHHTemp) {
-      window.location.reload()
-    }
+    // 待完善
+    // if (window.isHH !== isHHTemp) {
+    //   window.location.reload()
+    // }
 
     store.dispatch({ type: 'layout/isHH', payload: isHHTemp })
     clearTimeout(timeRef.current)
@@ -94,6 +104,7 @@ export default function App() {
             <Route path='/visit' component={A2visit} exact />
             <Route path='/banquet' component={A3banquet} exact />
             <Route path='/dance' component={A4dance} exact />
+            <Route path='/chef' component={A5chef} exact />
             <Route path='/more' component={B1more} exact />
             <Route path='/text' component={Text} exact />
             <Route path='*' component={NotFound} />

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

@@ -25,8 +25,9 @@
 
       & > img {
         position: absolute;
-        top: 100px;
-        width: 280px;
+        top: 0;
+        width: 650px;
+        max-width: 90%;
         left: 50%;
         transform: translateX(-50%);
       }
@@ -192,8 +193,7 @@
     @media screen and (min-width: 1200px) {
       .A2base {
         & > img {
-          top: 200px;
-          width: 600px;
+          width: 1200px;
         }
         .A2baseBtn {
           bottom: 100px;

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

@@ -43,8 +43,8 @@
 
       & > img {
         position: absolute;
-        top: 0px;
-        width: 600px;
+        top: 0;
+        width: 650px;
         max-width: 90%;
         left: 50%;
         transform: translateX(-50%);
@@ -211,8 +211,7 @@
     @media screen and (min-width: 1200px) {
       .A3base {
         & > img {
-          top: 100px;
-          width: 1000px;
+          width: 1200px;
         }
         .A3baseBtn {
           bottom: 100px;

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

@@ -1,4 +1,363 @@
 .A4dance {
+  background-size: 100% 100%;
   :global {
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+    }
+
+    .A4base {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: 11;
+      opacity: 1;
+      transition: opacity 0.5s;
+      background-color: rgba(0, 0, 0, 0.4);
+
+      .A4BIcon {
+        position: absolute;
+        top: -60px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 30px;
+        z-index: 10;
+        cursor: pointer;
+      }
+
+      & > img {
+        position: absolute;
+        top: 0px;
+        width: 650px;
+        max-width: 90%;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      .A4baseBtn {
+        position: absolute;
+        bottom: 40px;
+        left: 50%;
+        transform: translateX(-50%);
+        cursor: pointer;
+        width: 100px;
+        height: auto;
+        z-index: 10;
+        & > img {
+          width: 100%;
+        }
+
+        .A4Btxt {
+          position: absolute;
+          top: 0;
+          left: 0;
+          color: #fffddc;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .A4Bxian {
+          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;
+            }
+          }
+        }
+      }
+    }
+    .A4baseHide {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .pvBoxShow {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    // 主要内容
+    .pvBox {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      opacity: 1;
+      transition: opacity 0.5s;
+
+      // 热点
+      .pvHot {
+        cursor: pointer;
+        position: absolute;
+        z-index: 30;
+        width: 15%;
+      }
+
+      // 底部
+      .pvfloor {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        .pvflRow {
+          width: 60px;
+          height: 70px;
+          position: relative;
+          cursor: pointer;
+          .pvflR1 {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            z-index: 3;
+            top: 0;
+            left: 0;
+            background-size: 100% 100%;
+            transition: all 0.3s;
+            background-image: url('../../assets/img/Vector1.png');
+          }
+          .pvflR2 {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+            top: 0;
+            left: 0;
+            text-align: center;
+
+            & > img {
+              width: 50px;
+              height: auto;
+            }
+          }
+          .pvflR3 {
+            opacity: 0.3;
+            position: absolute;
+            bottom: 3px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 56px;
+            z-index: 4;
+            color: #fffddc;
+            font-size: 14px;
+            transition: all 0.3s;
+            text-align: center;
+          }
+          &:hover {
+            .pvflR1 {
+              z-index: 1;
+              background-image: url('../../assets/img/Vector2.png');
+            }
+            .pvflR3 {
+              opacity: 1;
+              background-image: url('../../assets/img/danceAc.png');
+              background-size: 100% auto;
+              background-repeat: no-repeat;
+              background-position: center;
+            }
+          }
+        }
+        .pvflRowAc {
+          .pvflR1 {
+            z-index: 1;
+            background-image: url('../../assets/img/Vector2.png');
+          }
+          .pvflR3 {
+            opacity: 1;
+            background-image: url('../../assets/img/danceAc.png');
+            background-size: 100% auto;
+            background-repeat: no-repeat;
+            background-position: center;
+          }
+        }
+      }
+
+      .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: 65px;
+        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;
+    }
+
+    // 最后一个长视频
+    .A4last {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      opacity: 0;
+      pointer-events: none;
+      z-index: 30;
+      transition: all 0.5;
+      .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;
+      }
+    }
+    .A4lastShow {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    // 竖屏
+    @media all and (orientation: portrait) {
+      // video {
+      //   object-fit: none;
+      // }
+    }
+
+    // 屏幕>=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');
+            }
+          }
+          .pvRRbtn2 {
+            &:hover {
+              background-image: url('../../assets/img/icon-more1.png');
+            }
+          }
+        }
+      }
+    }
   }
 }

Code/src/pages/A4dance/index.tsx

@@ -1,9 +1,178 @@
-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 { myData } from '@/utils/http'
+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)
+
+  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 btnStart = useCallback(() => {
+    if (loding >= 100) {
+      setLoding(110)
+
+      // 0.5s之后删除自己
+      setTimeout(() => {
+        domDelOwnFu('.A4base')
+      }, 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)
+  }, [])
+
+  // 底部选中
+  const [floorAc, setFloorAc] = useState(-1)
+
   return (
-    <div className={styles.A4dance}>
-      <h1>A4dance</h1>
+    <div className={styles.A4dance} style={{ backgroundImage: `url(${dataUrlSame}dance/bj.jpg)` }}>
+      {/* 初始页面 */}
+      <div className={classNames('A4base', loding === 110 ? 'A4baseHide' : '')}>
+        <img src={`${dataUrlSame}dance/mulu.png`} alt='' />
+        <div className='A4baseBtn' onClick={btnStart}>
+          {/* anpg动图 */}
+          <div className='A4BIcon'>
+            <img src={`${dataUrlSame}visit/arrow.png`} alt='' />
+          </div>
+
+          <img src={`${dataUrlSame}visit/btn.png`} alt='' />
+
+          <div className='A4Btxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
+          {loding >= 100 ? null : (
+            <div className='A4Bxian'>
+              <div>
+                <div style={{ width: loding + '%' }}></div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 主要内容 */}
+      <div
+        className={classNames(
+          'pvBox',
+          lastVideo ? 'pvBoxHide' : '',
+          loding === 110 ? 'pvBoxShow' : 'pvBoxHide'
+        )}
+      >
+        {/* 热点  待完善*/}
+        {myData.dance.hot.map((item, index) => (
+          <div
+            key={index}
+            className='pvHot'
+            style={{
+              top: isHH ? item.hhLoc.top : item.ssLoc.top,
+              right: isHH ? item.hhLoc.right : item.ssLoc.right
+            }}
+          >
+            <img src={`${dataUrlSame}dance/hotIcon.png`} alt='' />
+          </div>
+        ))}
+
+        {/* 底部 */}
+        <div className='pvfloor'>
+          {myData.dance.floor.map((item, index) => (
+            <div
+              key={index}
+              onClick={() => setFloorAc(index)}
+              className={classNames('pvflRow', floorAc === index ? 'pvflRowAc' : '')}
+            >
+              {/* 蒙版 */}
+              <div className='pvflR1'></div>
+              {/* 底图 */}
+              <div className='pvflR2'>
+                <img src={dataUrlSame + item.imgSrc} alt='' />
+              </div>
+
+              {/* 文字 */}
+              <div className='pvflR3'>{item.name}</div>
+            </div>
+          ))}
+        </div>
+
+        {/* 跳到下一章 */}
+        <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('/chef')}></div>
+        </div>
+      </div>
+
+      {/* 最后一个过长动画 */}
+      <div className={classNames('A4last', lastVideo ? 'A4lastShow' : '')}>
+        <video
+          ref={videoRefLast}
+          playsInline
+          muted
+          webkit-playsinline='true'
+          x5-video-player-type='h5'
+          src={dataUrlSame + myData.dance.lastVideo}
+          onEnded={() => history.push('/chef')}
+        >
+          <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('/chef')}
+        >
+          跳过
+        </div>
+      </div>
     </div>
   )
 }

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

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

Code/src/pages/A5chef/index.tsx

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

Code/src/types/declaration.d.ts

@@ -43,4 +43,24 @@ type MyDataType = {
       data: VisitHotDataType
     }[]
   }
+
+  dance: {
+    hot: {
+      name: string
+      hhLoc: {
+        top: string
+        right: string
+      }
+      ssLoc: {
+        top: string
+        right: string
+      }
+    }[]
+    floor: {
+      name: string
+      imgSrc: string
+      videoSrc: string
+    }[]
+    lastVideo: string
+  }
 }