写不动了 艹

Code/public/myData/myData.js

@@ -389,7 +389,7 @@ const myDataTemp = {
   },
   // 乐舞百戏(静态资源目录位置：staticData/HH/dance)
   dance: {
-    // 热点
+    // 热点===>第一个为 四神云气图
     hot: [
       {
         // 热点名字
@@ -401,8 +401,45 @@ const myDataTemp = {
         // 热点定位百分比
         loc: {
           top: '10%',
-          right: '10%'
+          right: '10%',
+          bottom: 'auto',
+          left: 'auto'
         }
+      },
+      {
+        // 热点名字
+        name: '热点000',
+        // 热点图片路径+名字
+        imgSrc: 'dance/hot2.png',
+        // 热点定位百分比
+        loc: {
+          top: 'auto',
+          right: 'auto',
+          bottom: '20%',
+          left: '30%'
+        },
+        data: [
+          {
+            name: '热点001',
+            txt: `
+            <h3>坐1</h3>
+            <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+            <br/>
+            666666666666666666</p>
+            `,
+            imgArr: ['dance/hot/1.png']
+          },
+          {
+            name: '热点002',
+            txt: `
+            <h3>坐2</h3>
+            <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+            <br/>
+            666666666666666666</p>
+            `,
+            imgArr: ['dance/hot/1.png']
+          }
+        ]
       }
     ],
 
@@ -455,6 +492,8 @@ const myDataTemp = {
   },
   // 四神云气图(静态资源目录位置：staticData/HH/yun)
   yun: {
+    // 背景图
+    bjImg: 'yun/bg.png',
     name: '四神云气图',
     tit: '墓室壁画'
   }

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

@@ -182,16 +182,10 @@
         position: absolute;
         width: 50px;
         height: 50px;
+        background-size: 100% 100%;
         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;
       }
     }
 

Code/src/pages/A1home/index.tsx

@@ -15,7 +15,8 @@ function A1home() {
   // 动画视频的ref
   const videoRef = useRef<HTMLVideoElement>(null)
 
-  const [loding, setLoding] = useState(0)
+  // 待完善
+  const [loding, setLoding] = useState(100)
 
   const timeRR = useRef(-1)
 
@@ -244,13 +245,13 @@ function A1home() {
           <source type='video/mp4' />
           Your browser does not support the video tag.
         </video>
+
         <div
+          title='跳过'
           className='A1videoLastBtn'
-          style={{ backgroundImage: `url(${dataUrlSame}home/quan.png)` }}
+          style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}
           onClick={() => history.push('/visit')}
-        >
-          跳过
-        </div>
+        ></div>
       </div>
     </div>
   )

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

@@ -172,13 +172,7 @@
         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;
       }
     }
 

Code/src/pages/A2visit/index.tsx

@@ -183,12 +183,11 @@ function A2visit() {
           Your browser does not support the video tag.
         </video>
         <div
+          title='跳过'
           className='A1videoLastBtn'
-          style={{ backgroundImage: `url(${dataUrlSame}home/quan.png)` }}
+          style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}
           onClick={() => history.push('/banquet')}
-        >
-          跳过
-        </div>
+        ></div>
       </div>
     </div>
   )

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

@@ -14,13 +14,7 @@
       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 {
@@ -190,13 +184,7 @@
         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;
       }
     }
 

Code/src/pages/A3banquet/index.tsx

@@ -146,11 +146,9 @@ function A3banquet() {
 
         <div
           className='A3Tiao'
-          style={{ backgroundImage: `url(${dataUrlSame}home/quan.png)` }}
+          style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}
           onClick={() => setOverVideo(false)}
-        >
-          跳过
-        </div>
+        ></div>
       </div>
 
       {/* 全景视频 */}
@@ -188,12 +186,11 @@ function A3banquet() {
           Your browser does not support the video tag.
         </video>
         <div
+          title='跳过'
           className='A3videoLastBtn'
-          style={{ backgroundImage: `url(${dataUrlSame}home/quan.png)` }}
+          style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}
           onClick={() => history.push('/dance')}
-        >
-          跳过
-        </div>
+        ></div>
       </div>
     </div>
   )

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

@@ -258,13 +258,7 @@
         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 {
@@ -347,6 +341,16 @@
       pointer-events: auto;
     }
 
+    // 其他热点
+    .A4othHot {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 33;
+      width: 100%;
+      height: 100%;
+    }
+
     // 屏幕>=1200
     @media screen and (min-width: 1200px) {
       .A4base {

Code/src/pages/A4dance/index.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames'
 import { domDelOwnFu } from '@/utils/utilsSome'
 import { ArrowRightOutlined } from '@ant-design/icons'
 import history from '@/utils/history'
+import Hot2 from '../A2visit/PanoVideo/Hot2'
 
 function A4dance() {
   const { dataUrlSame } = useDataUrl()
@@ -83,15 +84,19 @@ function A4dance() {
 
   const hotVideoRef = useRef<HTMLVideoElement>(null)
 
-  const [hotShow, setHotShow] = useState(false)
+  const [hotInd, setHotInd] = useState(-1)
 
-  const hotShowFu = useCallback(() => {
-    setHotShow(true)
-    setTimeout(() => {
-      if (hotVideoRef.current) {
-        hotVideoRef.current.play()
-      }
-    }, 100)
+  const hotShowFu = useCallback((index: number) => {
+    setHotInd(index)
+
+    // 第一个热点 云气图 其他是通用热点
+    if (index === 0) {
+      setTimeout(() => {
+        if (hotVideoRef.current) {
+          hotVideoRef.current.play()
+        }
+      }, 100)
+    }
   }, [])
 
   return (
@@ -129,12 +134,14 @@ function A4dance() {
         {/* 热点 云气图*/}
         {myData.dance.hot.map((item, index) => (
           <div
-            onClick={hotShowFu}
+            onClick={() => hotShowFu(index)}
             key={index}
             className='pvHot hoverD'
             style={{
               top: item.loc.top,
-              right: item.loc.right
+              right: item.loc.right,
+              bottom: item.loc.bottom,
+              left: item.loc.left
             }}
           >
             <img src={dataUrlSame + item.imgSrc} alt='' />
@@ -215,7 +222,7 @@ function A4dance() {
       </div>
 
       {/* 点击四神云气图的动画 */}
-      <div className={classNames('A4hotBox', hotShow ? 'A4hotBoxShow' : '')}>
+      <div className={classNames('A4hotBox', hotInd === 0 ? 'A4hotBoxShow' : '')}>
         <video
           ref={hotVideoRef}
           playsInline
@@ -230,6 +237,18 @@ function A4dance() {
         </video>
       </div>
 
+      {/* 点击其他热点 */}
+
+      {hotInd > 0 ? (
+        <div className={'A4othHot'}>
+          <Hot2
+            data={myData.dance.hot[hotInd].data}
+            closeFu={() => setHotInd(-1)}
+            name={myData.dance.hot[hotInd].name}
+          />
+        </div>
+      ) : null}
+
       {/* 最后一个过长动画 */}
       <div className={classNames('A4last', lastVideo ? 'A4lastShow' : '')}>
         <video
@@ -245,12 +264,11 @@ function A4dance() {
           Your browser does not support the video tag.
         </video>
         <div
+          title='跳过'
           className='A3videoLastBtn'
-          style={{ backgroundImage: `url(${dataUrlSame}home/quan.png)` }}
+          style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}
           onClick={() => history.push('/chef')}
-        >
-          跳过
-        </div>
+        ></div>
       </div>
     </div>
   )

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

@@ -1,4 +1,5 @@
 .B3yun {
+  background-size: 100% 100%;
   :global {
   }
 }

Code/src/pages/B3yun/index.tsx

@@ -1,9 +1,19 @@
 import React from 'react'
 import styles from './index.module.scss'
+import useDataUrl from '@/components/ownUse/useDataUrl'
+import { myData } from '@/utils/http'
 function B3yun() {
+  const { dataUrlSame } = useDataUrl()
   return (
-    <div className={styles.B3yun}>
-      <h1>B3yun</h1>
+    <div
+      className={styles.B3yun}
+      style={{ backgroundImage: `url(${dataUrlSame + myData.yun.bjImg})` }}
+    >
+      {/* 左侧主体 */}
+      <div className='yunll'></div>
+
+      {/* 右侧文字 */}
+      <div className='yunrr'></div>
     </div>
   )
 }

Code/src/types/declaration.d.ts

@@ -52,7 +52,10 @@ type MyDataType = {
       loc: {
         top: string
         right: string
+        bottom: string
+        left: string
       }
+      data: VisitHotDataType
     }[]
     floor: {
       name: string
@@ -61,4 +64,10 @@ type MyDataType = {
     }[]
     lastVideo: string
   }
+
+  yun: {
+    bjImg: string
+    name: string
+    tit: string
+  }
 }