upp

Code/public/myData/myData.js

@@ -1439,8 +1439,6 @@ const myDataTemp = {
       ]
     },
     汉代风华: {
-      // 背景图路径+名字
-      bg: 'more/bg2.jpg',
       物: {
         // 背景图路径+名字
         bg: 'more/bg2.jpg',
@@ -1451,8 +1449,8 @@ const myDataTemp = {
             hoverSrc: 'more/hot/hot1.png',
             // 热点定位百分比
             loc: {
-              top: '64%',
-              left: '77.5%'
+              top: '0%',
+              left: '0%'
             },
             data: [
               {
@@ -1483,8 +1481,328 @@ const myDataTemp = {
             hoverSrc: 'more/hot/hot1.png',
             // 热点定位百分比
             loc: {
-              top: '44%',
-              left: '77.5%'
+              top: '5%',
+              left: '5%'
+            },
+            data: [
+              {
+                name: '标题1',
+                txt: `
+                  <h3>坐1</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/2.png']
+              },
+              {
+                name: '标题2',
+                txt: `
+                  <h3>坐2</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/1.png']
+              }
+            ]
+          },
+          {
+            name: '热点3',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '10%',
+              left: '10%'
+            },
+            data: [
+              {
+                name: '标题1',
+                txt: `
+                  <h3>坐1</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/1.png']
+              },
+              {
+                name: '标题2',
+                txt: `
+                  <h3>坐2</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/2.png']
+              }
+            ]
+          },
+          {
+            name: '热点4',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '15%',
+              left: '15%'
+            },
+            data: [
+              {
+                name: '标题1',
+                txt: `
+                  <h3>坐1</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/2.png']
+              },
+              {
+                name: '标题2',
+                txt: `
+                  <h3>坐2</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/1.png']
+              }
+            ]
+          },
+          {
+            name: '热点5',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '20%',
+              left: '20%'
+            },
+            data: [
+              {
+                name: '标题1',
+                txt: `
+                  <h3>坐1</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/1.png']
+              },
+              {
+                name: '标题2',
+                txt: `
+                  <h3>坐2</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/2.png']
+              }
+            ]
+          },
+          {
+            name: '热点6',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '25%',
+              left: '25%'
+            },
+            data: [
+              {
+                name: '标题1',
+                txt: `
+                  <h3>坐1</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/2.png']
+              },
+              {
+                name: '标题2',
+                txt: `
+                  <h3>坐2</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/1.png']
+              }
+            ]
+          },
+          {
+            name: '热点7',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '30%',
+              left: '30%'
+            },
+            data: [
+              {
+                name: '标题1',
+                txt: `
+                  <h3>坐1</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/1.png']
+              },
+              {
+                name: '标题2',
+                txt: `
+                  <h3>坐2</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/2.png']
+              }
+            ]
+          },
+          {
+            name: '热点8',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '35%',
+              left: '35%'
+            },
+            data: [
+              {
+                name: '标题1',
+                txt: `
+                  <h3>坐1</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/2.png']
+              },
+              {
+                name: '标题2',
+                txt: `
+                  <h3>坐2</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/1.png']
+              }
+            ]
+          },
+          {
+            name: '热点9',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '40%',
+              left: '40%'
+            },
+            data: [
+              {
+                name: '标题1',
+                txt: `
+                  <h3>坐1</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/1.png']
+              },
+              {
+                name: '标题2',
+                txt: `
+                  <h3>坐2</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/2.png']
+              }
+            ]
+          },
+          {
+            name: '热点10',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '45%',
+              left: '45%'
+            },
+            data: [
+              {
+                name: '标题1',
+                txt: `
+                  <h3>坐1</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/2.png']
+              },
+              {
+                name: '标题2',
+                txt: `
+                  <h3>坐2</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/1.png']
+              }
+            ]
+          },
+          {
+            name: '热点11',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '50%',
+              left: '50%'
+            },
+            data: [
+              {
+                name: '标题1',
+                txt: `
+                  <h3>坐1</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/1.png']
+              },
+              {
+                name: '标题2',
+                txt: `
+                  <h3>坐2</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/2.png']
+              }
+            ]
+          },
+          {
+            name: '热点12',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '55%',
+              left: '55%'
             },
             data: [
               {
@@ -1508,6 +1826,166 @@ const myDataTemp = {
                 imgArr: ['more/hot/1.png']
               }
             ]
+          },
+          {
+            name: '热点13',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '60%',
+              left: '60%'
+            },
+            data: [
+              {
+                name: '标题1',
+                txt: `
+                  <h3>坐1</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/1.png']
+              },
+              {
+                name: '标题2',
+                txt: `
+                  <h3>坐2</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/2.png']
+              }
+            ]
+          },
+          {
+            name: '热点14',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '65%',
+              left: '65%'
+            },
+            data: [
+              {
+                name: '标题1',
+                txt: `
+                  <h3>坐1</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/2.png']
+              },
+              {
+                name: '标题2',
+                txt: `
+                  <h3>坐2</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/1.png']
+              }
+            ]
+          },
+          {
+            name: '热点15',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '70%',
+              left: '70%'
+            },
+            data: [
+              {
+                name: '标题1',
+                txt: `
+                  <h3>坐1</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/1.png']
+              },
+              {
+                name: '标题2',
+                txt: `
+                  <h3>坐2</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/2.png']
+              }
+            ]
+          },
+          {
+            name: '热点16',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '45%',
+              left: '75%'
+            },
+            data: [
+              {
+                name: '标题1',
+                txt: `
+                  <h3>坐1</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/2.png']
+              },
+              {
+                name: '标题2',
+                txt: `
+                  <h3>坐2</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/1.png']
+              }
+            ]
+          },
+          {
+            name: '热点17',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '80%',
+              left: '80%'
+            },
+            data: [
+              {
+                name: '标题1',
+                txt: `
+                  <h3>坐1</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/1.png']
+              },
+              {
+                name: '标题2',
+                txt: `
+                  <h3>坐2</h3>
+                  <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+                  <br/>
+                  666666666666666666</p>
+                  `,
+                imgArr: ['more/hot/2.png']
+              }
+            ]
           }
         ]
       },

Code/src/assets/styles/base.css

@@ -145,3 +145,14 @@ textarea {
   opacity: 1;
   pointer-events: auto;
 }
+#HotOpCss {
+  animation: HotOpCss 0.5s linear forwards;
+}
+@keyframes HotOpCss {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

Code/src/assets/styles/base.less

@@ -176,3 +176,17 @@ textarea {
     }
   }
 }
+
+// 热点页面打开透明的变化
+#HotOpCss {
+  animation: HotOpCss 0.5s linear forwards;
+}
+@keyframes HotOpCss {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import { VisitHotDataType } from '@/types'
 import classNames from 'classnames'
@@ -11,14 +11,6 @@ type Props = {
 }
 
 function Hot1({ closeFu, data }: Props) {
-  const [opShow, setOpShow] = useState(false)
-
-  useEffect(() => {
-    setTimeout(() => {
-      setOpShow(true)
-    }, 300)
-  }, [])
-
   // 底部选中
   const [flooInd, setFlooInd] = useState(0)
 
@@ -39,10 +31,10 @@ function Hot1({ closeFu, data }: Props) {
 
   return (
     <div
+      id='HotOpCss'
       className={styles.Hot1}
       style={{
-        backgroundImage: `url(${baseURL}visit/hot1bj.png)`,
-        opacity: opShow ? 1 : 0
+        backgroundImage: `url(${baseURL}visit/hot1bj.png)`
       }}
     >
       <div className='hot1Box'>

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import { VisitHotDataType } from '@/types'
 import classNames from 'classnames'
@@ -12,14 +12,6 @@ type Props = {
 }
 
 function Hot2({ closeFu, data, name }: Props) {
-  const [opShow, setOpShow] = useState(false)
-
-  useEffect(() => {
-    setTimeout(() => {
-      setOpShow(true)
-    }, 300)
-  }, [])
-
   // 底部选中
   const [flooInd, setFlooInd] = useState(0)
 
@@ -35,7 +27,7 @@ function Hot2({ closeFu, data, name }: Props) {
   }, [])
 
   return (
-    <div className={styles.Hot2} style={{ opacity: opShow ? 1 : 0 }}>
+    <div id='HotOpCss' className={styles.Hot2}>
       <div className='h2Main' style={{ backgroundImage: `url(${baseURL}visit/hot2bj.png)` }}>
         {/* 标题 */}
         <div className='h2Titele'>

Code/src/pages/B1more/S1manor/index.tsx

@@ -20,8 +20,8 @@ function S1manor({ hidden, isLoding }: Props) {
 
   // 点击热点
   const clickSon = useCallback((index: number) => {
-    // history.push(data.hot[index].path)
-    setAcInd(index)
+    history.push(data.hot[index].path)
+    // setAcInd(index)
   }, [])
 
   return (
@@ -60,7 +60,7 @@ function S1manor({ hidden, isLoding }: Props) {
             // 这个模块特有的参数
             hoverFu={val => setAcInd(val)}
             isHoverAc={adInd === index}
-            // isZhan={true}
+            isZhan={true}
           />
         ))}
       </div>

Code/src/pages/B1more/S2mien/index.module.scss

@@ -4,5 +4,94 @@
   background-size: 100% 100%;
   position: relative;
   :global {
+    .S2left {
+      width: 50%;
+      height: 100%;
+      background-size: 100% 100%;
+      padding: 50px 100px 70px 25px;
+
+      .S2leftMain {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        .S2leftRow {
+          cursor: pointer;
+          width: 140px;
+          height: 30px;
+          position: relative;
+          left: 0;
+          background-size: 140px 30px;
+          background-image: url('../../../assets/img/icon-hdfh.png');
+          background-repeat: no-repeat;
+          color: #343434;
+          transition: all 0.3s;
+          line-height: 28px;
+          padding-left: 24px;
+          margin-bottom: 10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 16px;
+
+          &:hover {
+            left: 24px;
+            background-image: url('../../../assets/img/icon-hdfh1.png');
+            color: #a55b41;
+          }
+        }
+        .S2leftRowAc {
+          left: 24px;
+          background-image: url('../../../assets/img/icon-hdfh1.png');
+          color: #a55b41;
+          .S2leftRowIcon {
+            opacity: 1;
+            pointer-events: auto;
+          }
+        }
+      }
+      .S2btn {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 50px;
+        display: flex;
+        padding-left: 40px;
+        & > div {
+          cursor: pointer;
+          transition: all 0.3s;
+          color: #fffddc;
+          opacity: 0.5;
+          border: 1px solid #fffddc;
+          width: 36px;
+          height: 36px;
+          border-radius: 50%;
+          margin-right: 20px;
+          text-align: center;
+          line-height: 32px;
+          &:hover {
+            opacity: 1;
+            color: #eacf60;
+            border-color: #eacf60;
+          }
+        }
+        .S2btnAc {
+          opacity: 1;
+          color: #eacf60;
+          border-color: #eacf60;
+        }
+      }
+    }
+
+    .S2right {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 60%;
+      height: 100%;
+      z-index: 10;
+    }
   }
 }

Code/src/pages/B1more/S2mien/index.tsx

@@ -1,21 +1,125 @@
-import React from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { baseURL, myData } from '@/utils/http'
+import classNames from 'classnames'
+import HotIcon from '@/components/HotIcon'
+import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
 
 type Props = {
   hidden: boolean
 }
+type TitType = '物' | '人'
 
-const data = myData.more['汉代风华']
+const leftFloorArr: TitType[] = ['物', '人']
+
+const dataTemp = myData.more['汉代风华']
+
+const data1 = dataTemp['物']
 
 function S2mien({ hidden }: Props) {
+  const sroolDomRef = useRef<HTMLDivElement>(null)
+
+  const [tit, setTit] = useState<TitType>('物')
+
+  const titFu = useCallback((val: TitType) => {
+    // 待完善
+    if (val === '人') {
+      return alert('正在努力开发中')
+    }
+    setTit(val)
+  }, [])
+
+  // 选中的索引
+  const [hotInd, setHotInd] = useState(-1)
+
+  // 打开热点的索引
+  const [opnInd, setOpenInd] = useState(-1)
+
+  // 从热点图标子组件点击
+  const clickSon = useCallback((index: number) => {
+    // 打开热点
+    setOpenInd(index)
+    // 移动端点击 高亮
+    setHotInd(index)
+  }, [])
+
+  useEffect(() => {
+    if (hotInd === -1) return
+    else {
+      // 左侧滚动到中间
+      if (sroolDomRef.current) {
+        // sroolDomRef.current.scrollTop = 40 * hotInd - 120
+        sroolDomRef.current.scrollTo({ top: 40 * hotInd - 120, behavior: 'smooth' })
+      }
+    }
+  }, [hotInd])
+
   return (
     <div
       hidden={hidden}
       className={styles.S2mien}
-      style={{ backgroundImage: `url(${baseURL + data.bg})` }}
+      style={{ backgroundImage: `url(${baseURL + data1.bg})`, zIndex: opnInd > -1 ? 50 : 1 }}
     >
-      <h1>S2mien</h1>
+      {/* 左侧 */}
+      <div
+        className='S2left'
+        style={{ backgroundImage: `url(${baseURL}more/s1Zhe.png)`, opacity: opnInd > -1 ? 0 : 1 }}
+      >
+        <div ref={sroolDomRef} className='S2leftMain'>
+          {data1.hot.map((item, index) => (
+            <div
+              onClick={() => clickSon(index)}
+              className={classNames('S2leftRow', hotInd === index ? 'S2leftRowAc' : '')}
+              key={index}
+            >
+              {item.name}
+            </div>
+          ))}
+        </div>
+        {/* 人和物的选择 */}
+        <div className='S2btn'>
+          {leftFloorArr.map(v => (
+            <div
+              key={v}
+              onClick={() => titFu(v)}
+              className={classNames(tit === v ? 'S2btnAc' : '')}
+            >
+              {v}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* 右侧 */}
+      <div className='S2right'>
+        {/* 热点图标 */}
+        {data1.hot.map((item, index) => (
+          <HotIcon
+            key={index}
+            index={index}
+            clickSon={val => clickSon(val)}
+            hoverSrc={item.hoverSrc}
+            style={{
+              top: item.loc.top,
+              left: item.loc.left
+            }}
+            zIndex={item.zIndex}
+            // 这个模块特有的参数
+            hoverFu={val => setHotInd(val)}
+            isHoverAc={hotInd === index}
+            // isZhan={true}
+          />
+        ))}
+      </div>
+
+      {/* 打开热点页面 */}
+      {opnInd > -1 ? (
+        <Hot2
+          data={data1.hot[opnInd].data}
+          closeFu={() => setOpenInd(-1)}
+          name={data1.hot[opnInd].name}
+        />
+      ) : null}
     </div>
   )
 }

Code/src/pages/B1more/index.tsx

@@ -67,9 +67,13 @@ function B1more() {
   return (
     <div className={styles.B1more}>
       {/* 三个主要页面 */}
-      <S1manor hidden={!!videoSrc || floorTxt !== '探索庄园'} isLoding={isLoding} />
+      {/* <S1manor hidden={!!videoSrc || floorTxt !== '探索庄园'} isLoding={isLoding} />
       <S2mien hidden={!!videoSrc || floorTxt !== '汉代风华'} />
-      <S3goods hidden={!!videoSrc || floorTxt !== '文物欣赏'} />
+      <S3goods hidden={!!videoSrc || floorTxt !== '文物欣赏'} /> */}
+
+      {/* 待完善 */}
+      {/* <S1manor hidden={false} isLoding={isLoding} /> */}
+      <S2mien hidden={false} />
 
       {/* 初始静态图 */}
       <BaseImg isShow={!isLoding} iconSrc={``} parentFu={() => setIsLoding(false)} moreSta={true} />
@@ -108,7 +112,11 @@ function B1more() {
       </div>
 
       {/* 右下角的图标 */}
-      <div className='A6rBtn' style={{ opacity: isLoding ? 0 : 1 }}>
+      <div
+        hidden={floorTxt !== '探索庄园'}
+        className='A6rBtn'
+        style={{ opacity: isLoding ? 0 : 1 }}
+      >
         <div className='A6rBtn1' title='陶庄园' onClick={() => history.push('/unend')}></div>
         <div className='A6rBtn2' title='仙居世界' onClick={() => history.push('/hots')}></div>
       </div>

Code/src/types/declaration.d.ts

@@ -141,13 +141,12 @@ type MyDataType = {
       }[]
     }
     汉代风华: {
-      // 背景图路径+名字
-      bg: 'more/bg2.jpg'
       物: {
         bg: string
         hot: {
           name: string
           hoverSrc: string
+          zIndex?: number
           loc: {
             top: string
             left: string