真的写不动了

Code/public/myData/myData.js

@@ -1334,5 +1334,191 @@ const myDataTemp = {
     <p>河南博物院：张先生 | 刘先生 | 李小姐 | 张小姐 | 詹先生</p>
     <div>珠海市四维时代网络科技有限公司设计制作</div>
     `
+  },
+
+  // more: [
+
+  //   {
+  //     name: '汉代风华',
+  //     info: {
+
+  //     }
+  //   },
+  // ]
+  // 尾声(静态资源目录位置：staticData/more)
+  more: {
+    // 视频位置 more/
+    // 从 探索庄园=》汉代风华 播放 1.mp4
+    // 从 探索庄园=》文物欣赏 播放 2.mp4
+
+    // 从 汉代风华=》探索庄园 播放 3.mp4
+    // 从 汉代风华=》文物欣赏 播放 4.mp4
+
+    // 从 文物欣赏=》探索庄园 播放 5.mp4
+    // 从 文物欣赏=》汉代风华 播放 6.mp4
+    // 初始就加载这6个视频
+    videos: ['more/1.mp4', 'more/2.mp4', 'more/3.mp4', 'more/4.mp4', 'more/5.mp4', 'more/6.mp4'],
+
+    探索庄园: {
+      // 背景图路径+名字
+      bg: 'more/bg1.jpg',
+      // 热点
+      hot: [
+        {
+          name: '车骑拜谒',
+          // 左边图片所在路径+名字
+          leftImg: 'visit/mulu.png',
+          // pc鼠标移入显示的热点图片路径+名字
+          hoverSrc: 'more/hot/hot1.png',
+          // 跳转路径
+          path: '/visit',
+          // 热点定位百分比
+          loc: {
+            top: '64%',
+            left: '12.5%'
+          }
+        },
+        {
+          name: '主客宴请',
+          // 左边图片所在路径+名字
+          leftImg: 'banquet/mulu.png',
+          // pc鼠标移入显示的热点图片路径+名字
+          hoverSrc: 'more/hot/hot2.png',
+          // 跳转路径
+          path: '/banquet',
+          // 层级问题，如果碰到遮挡 把这个值设置大一点
+          zIndex: 2,
+          // 热点定位百分比
+          loc: {
+            top: '10%',
+            left: '25%'
+          }
+        },
+        {
+          name: '乐舞百戏',
+          // 左边图片所在路径+名字
+          leftImg: 'dance/mulu.png',
+          // pc鼠标移入显示的热点图片路径+名字
+          hoverSrc: 'more/hot/hot1.png',
+          // 跳转路径
+          path: '/dance',
+          // 热点定位百分比
+          loc: {
+            top: '10%',
+            left: '20%'
+          }
+        },
+        {
+          name: '后厨备宴',
+          // 左边图片所在路径+名字
+          leftImg: 'chef/mulu.png',
+          // pc鼠标移入显示的热点图片路径+名字
+          hoverSrc: 'more/hot/hot2.png',
+          // 跳转路径
+          path: '/chef',
+          // 热点定位百分比
+          loc: {
+            top: '30%',
+            left: '20%'
+          }
+        },
+        {
+          name: '田间耕作',
+          // 左边图片所在路径+名字
+          leftImg: 'plow/mulu.png',
+          // pc鼠标移入显示的热点图片路径+名字
+          hoverSrc: 'more/hot/hot1.png',
+          // 跳转路径
+          path: '/plow',
+          // 热点定位百分比
+          loc: {
+            top: '40%',
+            left: '20%'
+          }
+        }
+      ]
+    },
+    汉代风华: {
+      // 背景图路径+名字
+      bg: 'more/bg2.jpg',
+      物: {
+        // 背景图路径+名字
+        bg: 'more/bg2.jpg',
+        hot: [
+          {
+            name: '热点1',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '64%',
+              left: '77.5%'
+            },
+            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: '热点2',
+            // pc鼠标移入显示的热点图片路径+名字
+            hoverSrc: 'more/hot/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '44%',
+              left: '77.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']
+              }
+            ]
+          }
+        ]
+      },
+      人: {
+        // 背景图路径+名字
+        bg: 'more/bg2.jpg'
+      }
+    },
+    文物欣赏: {
+      // 背景图路径+名字
+      bg: 'more/bg3.jpg'
+    }
   }
 }

Code/src/components/BaseImg/index.module.scss

@@ -2,6 +2,8 @@
   width: 100%;
   height: 100%;
   position: absolute;
+  top: 0;
+  left: 0;
   z-index: 11;
   opacity: 1;
   transition: opacity 1s;

Code/src/components/BaseImg/index.tsx

@@ -10,24 +10,14 @@ type Props = {
   parentFu: () => void //点击继续的方法（调用父亲）
   bgImg?: string
   num?: number
+  moreSta?: boolean
 }
 
-function BaseImg({ isShow, iconSrc, parentFu, bgImg, num = 30 }: Props) {
+function BaseImg({ isShow, iconSrc, parentFu, bgImg, num = 30, moreSta }: Props) {
   const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
 
   const timeRR = useRef(-1)
 
-  useEffect(() => {
-    clearInterval(timeRR.current)
-    timeRR.current = window.setInterval(() => {
-      if (loding >= 100) {
-        clearInterval(timeRR.current)
-        return
-      }
-      setLoding(loding + 2)
-    }, num)
-  }, [loding, num])
-
   const btnStartFu = useCallback(() => {
     if (loding >= 100) {
       parentFu()
@@ -38,23 +28,42 @@ function BaseImg({ isShow, iconSrc, parentFu, bgImg, num = 30 }: Props) {
     }
   }, [loding, parentFu])
 
+  useEffect(() => {
+    clearInterval(timeRR.current)
+    timeRR.current = window.setInterval(() => {
+      if (loding >= 100) {
+        if (moreSta) btnStartFu()
+
+        clearInterval(timeRR.current)
+        return
+      }
+      setLoding(loding + 2)
+    }, num)
+  }, [btnStartFu, loding, moreSta, num])
+
   return (
     <div
       id='BaseImg'
       className={classNames(styles.BaseImg, isShow ? styles.BaseImgHide : '')}
-      style={{ backgroundImage: `url(${bgImg ? bgImg : ''})` }}
+      style={{
+        backgroundImage: `url(${bgImg ? bgImg : ''})`
+        // backgroundColor: moreSta ? 'transparent' : ''
+      }}
     >
-      <img className='BIlogo' src={iconSrc} alt='' />
+      {moreSta ? null : <img className='BIlogo' src={iconSrc} alt='' />}
+
       <div
         className='BIbaseBtn'
         onClick={btnStartFu}
         style={{ pointerEvents: loding >= 100 ? 'auto' : 'none' }}
       >
-        {/* anpg动图 */}
-        <div className='BIcon'>
-          <img src={`${baseURL}visit/arrow.png`} alt='' />
-        </div>
-        <div className='BIBtxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
+        {moreSta ? null : (
+          <div className='BIcon'>
+            <img src={`${baseURL}visit/arrow.png`} alt='' />
+          </div>
+        )}
+
+        <div className='BIBtxt'>{loding >= 100 ? (moreSta ? '加载中' : '点击继续') : '加载中'}</div>
         {loding >= 100 ? null : (
           <div className='BIBxian'>
             <div>

Code/src/components/CatVideo/index.tsx

@@ -45,7 +45,7 @@ function CatVideo({ isShow, src, parentFu, noBtn }: Props) {
       </video>
 
       {/* 右下角的跳过按钮 */}
-      <BtnRight imgName='skip' clickSon={() => playEndFu()} title='跳过' />
+      {noBtn ? null : <BtnRight imgName='skip' clickSon={() => playEndFu()} title='跳过' />}
     </div>
   )
 }

Code/src/components/EndVideo/index.tsx

@@ -49,7 +49,7 @@ function EndVideo({ lastVideo, delDom, src, path, noBtn }: Props) {
       </video>
 
       {/* 右下角的跳过按钮 */}
-      <BtnRight imgName='skip' clickSon={() => history.push(path)} title='跳过' />
+      {noBtn ? null : <BtnRight imgName='skip' clickSon={() => history.push(path)} title='跳过' />}
     </div>
   )
 }

Code/src/components/HotIcon/index.module.scss

@@ -27,3 +27,20 @@
     }
   }
 }
+
+.HotIconAc {
+  :global {
+    .HotIconHover {
+      opacity: 1;
+      // pointer-events: auto;
+    }
+  }
+}
+.HotIconZhan {
+  :global {
+    .HotIconHover {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}

Code/src/components/HotIcon/index.tsx

@@ -1,33 +1,53 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import styles from './index.module.scss'
 import { baseURL } from '@/utils/http'
+import classNames from 'classnames'
 
 type Props = {
   index: number
-  clickSon: (index: number) => void
-  hoverSrc: string
-  style?: { top: string; left: string }
+  clickSon: (index: number) => void //点击
+  hoverSrc: string //鼠标移入显示的图片
+  style?: { top: string; left: string } //是否定位（除了全景视频和全景图）
+  zIndex?: number //层级问题，如果碰到遮挡 把这个值设置大一点
+  // 更多模块的热点逻辑参数
+  isHoverAc?: boolean //鼠标移入索引
+  hoverFu?: (index: number) => void //鼠标移入事件
+  isZhan?: boolean //是否全部展开
 }
 
-function HotIcon({ index, clickSon, hoverSrc, style }: Props) {
+function HotIcon({ index, clickSon, hoverSrc, style, isHoverAc, hoverFu, isZhan, zIndex }: Props) {
+  const onMouseEnter = useCallback(() => {
+    if (hoverFu) {
+      hoverFu(index)
+    }
+  }, [hoverFu, index])
+
   return (
     <div
       id='HotIcon'
       style={{
         position: style ? 'absolute' : 'relative',
         top: style ? style.top : 0,
-        left: style ? style.left : 0
+        left: style ? style.left : 0,
+        zIndex: zIndex || 1
       }}
-      className={styles.HotIcon}
+      className={classNames(
+        styles.HotIcon,
+        isHoverAc ? styles.HotIconAc : '',
+        isZhan ? styles.HotIconZhan : ''
+      )}
       key={index}
     >
       <img
+        onMouseEnter={onMouseEnter}
         onClick={() => clickSon(index)}
         className='HotIconBase'
         src={`${baseURL}visit/hot/hotBase.png`}
         alt=''
       />
       <img
+        onMouseEnter={onMouseEnter}
+        // style={{ opacity: isHoverAc ? 1 : 0 }}
         onClick={() => clickSon(index)}
         className='HotIconHover'
         src={baseURL + hoverSrc}

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

@@ -0,0 +1,63 @@
+.S1manor {
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  position: relative;
+  :global {
+    .S1left {
+      width: 50%;
+      height: 100%;
+      background-size: 100% 100%;
+      position: relative;
+      z-index: 2;
+
+      .SlL1 {
+        max-width: 200%;
+        width: 150%;
+        height: auto;
+        position: absolute;
+        top: -30px;
+        left: 40%;
+        transform: translateX(-50%);
+      }
+      .SlL2 {
+        position: absolute;
+        top: 220px;
+        left: 40%;
+        transform: translateX(-50%);
+        cursor: pointer;
+        text-align: center;
+        & > img {
+          width: 30px;
+          height: auto;
+        }
+        .BIBtxt {
+          margin-top: 30px;
+          width: 100px;
+          height: 31px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background-size: 100% 100%;
+          background-image: url('../../../assets/img/btn.png');
+          color: #fffddc;
+          transition: all 0.3s;
+        }
+        &:hover {
+          .BIBtxt {
+            background-image: url('../../../assets/img/btnAc.png');
+            color: #b67150;
+          }
+        }
+      }
+    }
+    .S1hotBox {
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 3;
+      width: 50%;
+      height: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,73 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import styles from './index.module.scss'
+import { baseURL, myData } from '@/utils/http'
+import HotIcon from '@/components/HotIcon'
+import history from '@/utils/history'
+
+type Props = {
+  hidden: boolean
+  isLoding: boolean
+}
+
+const data = myData.more['探索庄园']
+
+function S1manor({ hidden, isLoding }: Props) {
+  const [adInd, setAcInd] = useState(0)
+
+  const hotInfo = useMemo(() => {
+    return data.hot[adInd]
+  }, [adInd])
+
+  // 点击热点
+  const clickSon = useCallback((index: number) => {
+    // history.push(data.hot[index].path)
+    setAcInd(index)
+  }, [])
+
+  return (
+    <div
+      hidden={hidden}
+      className={styles.S1manor}
+      style={{ backgroundImage: `url(${baseURL + data.bg})` }}
+    >
+      {/* 左侧图标 */}
+      <div
+        className='S1left'
+        hidden={isLoding}
+        style={{ backgroundImage: `url(${baseURL}more/s1Zhe.png)` }}
+      >
+        <img className='SlL1' src={baseURL + hotInfo.leftImg} alt='' />
+
+        <div className='SlL2' onClick={() => history.push(hotInfo.path)}>
+          <img src={`${baseURL}visit/arrow.png`} alt='' />
+          <div className='BIBtxt'>开始探索</div>
+        </div>
+      </div>
+
+      <div className='S1hotBox' hidden={isLoding}>
+        {data.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 => setAcInd(val)}
+            isHoverAc={adInd === index}
+            // isZhan={true}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const MemoS1manor = React.memo(S1manor)
+
+export default MemoS1manor

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

@@ -0,0 +1,8 @@
+.S2mien {
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  position: relative;
+  :global {
+  }
+}

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { baseURL, myData } from '@/utils/http'
+
+type Props = {
+  hidden: boolean
+}
+
+const data = myData.more['汉代风华']
+
+function S2mien({ hidden }: Props) {
+  return (
+    <div
+      hidden={hidden}
+      className={styles.S2mien}
+      style={{ backgroundImage: `url(${baseURL + data.bg})` }}
+    >
+      <h1>S2mien</h1>
+    </div>
+  )
+}
+
+const MemoS2mien = React.memo(S2mien)
+
+export default MemoS2mien

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

@@ -0,0 +1,8 @@
+.S3goods {
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  position: relative;
+  :global {
+  }
+}

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

@@ -0,0 +1,24 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { baseURL, myData } from '@/utils/http'
+
+type Props = {
+  hidden: boolean
+}
+const data = myData.more['文物欣赏']
+
+function S3goods({ hidden }: Props) {
+  return (
+    <div
+      hidden={hidden}
+      className={styles.S3goods}
+      style={{ backgroundImage: `url(${baseURL + data.bg})` }}
+    >
+      <h1>S3goods</h1>
+    </div>
+  )
+}
+
+const MemoS3goods = React.memo(S3goods)
+
+export default MemoS3goods

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

@@ -1,4 +1,94 @@
 .B1more {
+  position: relative;
   :global {
+    // 底部三个按钮
+    .A6floorBox {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translate(-50%);
+      display: flex;
+      z-index: 10;
+      transition: opacity 1s;
+
+      & > div {
+        width: 110px;
+        height: 36px;
+        background-size: 100% 100%;
+        transition: all 0.3s;
+        background-image: url('../../assets/img/icon-gengduo.png');
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fffddc;
+        margin-right: 25px;
+        cursor: pointer;
+        &:last-child {
+          margin-right: 0;
+        }
+
+        &:hover {
+          background-image: url('../../assets/img/icon-gengduo1.png');
+          color: #a55b41;
+        }
+      }
+      .A6FrowAc {
+        background-image: url('../../assets/img/icon-gengduo1.png');
+        color: #a55b41;
+      }
+    }
+
+    // 右下角的按钮
+    .A6rBtn {
+      position: absolute;
+      z-index: 10;
+      right: 10px;
+      bottom: 10px;
+      display: flex;
+      transition: opacity 1s;
+
+      & > div {
+        cursor: pointer;
+        width: 50px;
+        height: 50px;
+        background-size: 100% 100%;
+        transition: all 0.3s;
+      }
+      .A6rBtn1 {
+        background-image: url('../../assets/img/icon-mol.png');
+        &:hover {
+          background-image: url('../../assets/img/icon-mol1.png');
+        }
+      }
+      .A6rBtn2 {
+        background-image: url('../../assets/img/icon-xuanju.png');
+        margin-right: 5px;
+        &:hover {
+          background-image: url('../../assets/img/icon-xuanju1.png');
+        }
+      }
+    }
+
+    // 6个视频
+    .A6videoBox {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 20;
+      opacity: 0;
+      pointer-events: none;
+      transition: all 1s;
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: fill;
+      }
+    }
+    .A6videoBoxShow {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
 }

Code/src/pages/B1more/index.tsx

@@ -1,10 +1,117 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
+import { baseURL, myData } from '@/utils/http'
+import history from '@/utils/history'
+import classNames from 'classnames'
+import BaseImg from '@/components/BaseImg'
+import S1manor from './S1manor'
+import S2mien from './S2mien'
+import S3goods from './S3goods'
+
+const videoObj = {
+  探索庄园: {
+    汉代风华: 'more/1.mp4',
+    文物欣赏: 'more/2.mp4'
+  },
+  汉代风华: {
+    探索庄园: 'more/3.mp4',
+    文物欣赏: 'more/4.mp4'
+  },
+  文物欣赏: {
+    探索庄园: 'more/5.mp4',
+    汉代风华: 'more/6.mp4'
+  }
+}
+
+type TxtType = '探索庄园' | '汉代风华' | '文物欣赏'
+
+const floorArr: TxtType[] = ['探索庄园', '汉代风华', '文物欣赏']
+
 function B1more() {
+  const [floorTxt, setFloorTxt] = useState<TxtType>('探索庄园')
+  const floorRef = useRef<TxtType>('探索庄园')
+
+  // 需要播放的视频路径
+  const [videoSrc, setVideoSrc] = useState('')
+
+  useEffect(() => {
+    if (videoSrc) {
+      setTimeout(() => {
+        const domAll: any = document.querySelectorAll('.A6videoBox video')
+        if (domAll && domAll.length) {
+          domAll.forEach((v: HTMLVideoElement) => {
+            if (baseURL + videoSrc === v.src) v.play()
+            else {
+              v.pause()
+              v.currentTime = 0
+            }
+          })
+        }
+      }, 100)
+    }
+  }, [videoSrc])
+
+  useEffect(() => {
+    const tempObj = Reflect.get(videoObj, floorRef.current)
+
+    const temp = Reflect.get(tempObj, floorTxt)
+
+    floorRef.current = floorTxt
+
+    setVideoSrc(temp)
+  }, [floorTxt])
+
+  // 初始加载中动画
+  const [isLoding, setIsLoding] = useState(true)
+
   return (
     <div className={styles.B1more}>
-      <h1>更多</h1>
-      {/* 待完善 */}
+      {/* 三个主要页面 */}
+      <S1manor hidden={!!videoSrc || floorTxt !== '探索庄园'} isLoding={isLoding} />
+      <S2mien hidden={!!videoSrc || floorTxt !== '汉代风华'} />
+      <S3goods hidden={!!videoSrc || floorTxt !== '文物欣赏'} />
+
+      {/* 初始静态图 */}
+      <BaseImg isShow={!isLoding} iconSrc={``} parentFu={() => setIsLoding(false)} moreSta={true} />
+
+      {/* 6个视频  待完善 调试的时候不显示 */}
+      {/* {myData.more.videos.map((src, index) => (
+        <div
+          className={classNames('A6videoBox', videoSrc === src ? 'A6videoBoxShow' : '')}
+          key={index}
+        >
+          <video
+            playsInline
+            muted
+            webkit-playsinline='true'
+            x5-video-player-type='h5'
+            onEnded={() => setVideoSrc('')}
+            src={baseURL + src}
+          >
+            <source type='video/mp4' src={baseURL + src} />
+            Your browser does not support the video tag.
+          </video>
+        </div>
+      ))} */}
+
+      {/* 底部三个按钮 */}
+      <div className='A6floorBox' style={{ opacity: isLoding ? 0 : 1 }}>
+        {floorArr.map(v => (
+          <div
+            onClick={() => setFloorTxt(v)}
+            className={classNames(v === floorTxt ? 'A6FrowAc' : '')}
+            key={v}
+          >
+            {v}
+          </div>
+        ))}
+      </div>
+
+      {/* 右下角的图标 */}
+      <div 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>
     </div>
   )
 }

Code/src/types/declaration.d.ts

@@ -124,4 +124,43 @@ type MyDataType = {
     baseImg: string
     txt: string
   }
+  more: {
+    videos: string[]
+    探索庄园: {
+      bg: string
+      hot: {
+        name: string
+        leftImg: string
+        hoverSrc: string
+        path: string
+        zIndex?: number
+        loc: {
+          top: string
+          left: string
+        }
+      }[]
+    }
+    汉代风华: {
+      // 背景图路径+名字
+      bg: 'more/bg2.jpg'
+      物: {
+        bg: string
+        hot: {
+          name: string
+          hoverSrc: string
+          loc: {
+            top: string
+            left: string
+          }
+          data: VisitHotDataType
+        }[]
+      }
+      人: {
+        bg: string
+      }
+    }
+    文物欣赏: {
+      bg: string
+    }
+  }
 }