upp

Code/public/myData/hot.js

@@ -1,4 +1,124 @@
 const myHotInfo = {
+  // 单独的一个周礼九拜热点
+  周礼九拜: [
+    {
+      name: '周礼九拜',
+      tubiao: '普通',
+      zIndex: 1,
+      hoverSrc: 'visit/hot/hot1.png',
+
+      panoLoc: {
+        size: 1,
+        atv: 3.13,
+        ath: 11.54
+      },
+
+      // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
+      locMore: {
+        top: '87%',
+        left: '47%'
+      },
+      data: [
+        {
+          // 名字
+          name: '稽首',
+          // 文本内容
+          txt: `
+            <h3>双膝跪地，双手扶地，</h3>
+            <h2>头向下至地，稽留一段时间。</h2>
+            `,
+          // 图片路径+名字
+          imgArr: ['visit/hot/1.jpg', 'visit/hot/2.jpg', 'visit/hot/3.jpg', 'visit/hot/4.jpg']
+        },
+        {
+          // 名字
+          name: '顿首',
+          // 文本内容
+          txt: `
+            <h3>双膝跪地，双手扶地，</h3>
+            <h2>头向下运动，至地便起，不稽留。</h2>
+            `,
+          // 图片路径+名字
+          imgArr: ['visit/hot/5.jpg', 'visit/hot/6.jpg', 'visit/hot/7.jpg', 'visit/hot/8.jpg']
+        },
+        {
+          // 名字
+          name: '空首',
+          // 文本内容
+          txt: `
+            <h3>双膝跪地，双手聚拢至膝前地上，</h3>
+            <h2>手心向上，头向下运动至手上。</h2>
+            `,
+          // 图片路径+名字
+          imgArr: ['visit/hot/9.jpg', 'visit/hot/10.jpg', 'visit/hot/11.jpg']
+        },
+        {
+          // 名字
+          name: '振动',
+          // 文本内容
+          txt: `
+            <h3>因激动引发身体战栗或色动而进行的拜礼。</h3>
+            `,
+          // 图片路径+名字
+          imgArr: ['visit/hot/12.jpg', 'visit/hot/13.jpg']
+        },
+        {
+          // 名字
+          name: '吉拜',
+          // 文本内容
+          txt: `
+            <h3>服齐衰不杖以下丧服者的拜礼，</h3>
+            <h2>拜而后稽颡，即先空首后顿首。</h2>
+            `,
+          // 图片路径+名字
+          imgArr: ['visit/hot/14.jpg', 'visit/hot/15.jpg', 'visit/hot/16.jpg']
+        },
+        {
+          // 名字
+          name: '凶拜',
+          // 文本内容
+          txt: `
+            <h3>服三年之丧者的拜礼，</h3>
+            <h2>稽颡而后拜，即先顿首后空首。</h2>
+            `,
+          // 图片路径+名字
+          imgArr: ['visit/hot/17.jpg', 'visit/hot/18.jpg', 'visit/hot/19.jpg']
+        },
+        {
+          // 名字
+          name: '奇拜',
+          // 文本内容
+          txt: `
+            <h3>即一拜，通常作为答拜之礼。</h3>
+            <h2>头向下至地，稽留一段时间。</h2>
+            `,
+          // 图片路径+名字
+          imgArr: ['visit/hot/20.jpg', 'visit/hot/21.jpg', 'visit/hot/22.jpg', 'visit/hot/23.jpg']
+        },
+        {
+          // 名字
+          name: '褒拜',
+          // 文本内容
+          txt: `
+            <h3>即再拜，通常作为答拜之礼。</h3>
+            <h2>头向下至地，稽留一段时间。</h2>
+            `,
+          // 图片路径+名字
+          imgArr: ['visit/hot/24.jpg', 'visit/hot/25.jpg']
+        },
+        {
+          // 名字
+          name: '肃拜',
+          // 文本内容
+          txt: `
+            <h3>为下跪但只下手不低头。</h3>
+             `,
+          // 图片路径+名字
+          imgArr: ['visit/hot/26.jpg', 'visit/hot/27.jpg']
+        }
+      ]
+    }
+  ],
   // 车骑全景视频热点
   cheQi: [
     {
@@ -4574,126 +4694,6 @@ const myHotInfo = {
         ]
       }
     }
-  ],
-  // 单独的一个周礼九拜热点
-  周礼九拜: [
-    {
-      name: '周礼九拜',
-      tubiao: '普通',
-      zIndex: 1,
-      hoverSrc: 'visit/hot/hot1.png',
-
-      panoLoc: {
-        size: 1,
-        atv: 3.13,
-        ath: 11.54
-      },
-
-      // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
-      locMore: {
-        top: '87%',
-        left: '47%'
-      },
-      data: [
-        {
-          // 名字
-          name: '稽首',
-          // 文本内容
-          txt: `
-          <h3>双膝跪地，双手扶地，</h3>
-          <h2>头向下至地，稽留一段时间。</h2>
-          `,
-          // 图片路径+名字
-          imgArr: ['visit/hot/1.jpg', 'visit/hot/2.jpg', 'visit/hot/3.jpg', 'visit/hot/4.jpg']
-        },
-        {
-          // 名字
-          name: '顿首',
-          // 文本内容
-          txt: `
-          <h3>双膝跪地，双手扶地，</h3>
-          <h2>头向下运动，至地便起，不稽留。</h2>
-          `,
-          // 图片路径+名字
-          imgArr: ['visit/hot/5.jpg', 'visit/hot/6.jpg', 'visit/hot/7.jpg', 'visit/hot/8.jpg']
-        },
-        {
-          // 名字
-          name: '空首',
-          // 文本内容
-          txt: `
-          <h3>双膝跪地，双手聚拢至膝前地上，</h3>
-          <h2>手心向上，头向下运动至手上。</h2>
-          `,
-          // 图片路径+名字
-          imgArr: ['visit/hot/9.jpg', 'visit/hot/10.jpg', 'visit/hot/11.jpg']
-        },
-        {
-          // 名字
-          name: '振动',
-          // 文本内容
-          txt: `
-          <h3>因激动引发身体战栗或色动而进行的拜礼。</h3>
-          `,
-          // 图片路径+名字
-          imgArr: ['visit/hot/12.jpg', 'visit/hot/13.jpg']
-        },
-        {
-          // 名字
-          name: '吉拜',
-          // 文本内容
-          txt: `
-          <h3>服齐衰不杖以下丧服者的拜礼，</h3>
-          <h2>拜而后稽颡，即先空首后顿首。</h2>
-          `,
-          // 图片路径+名字
-          imgArr: ['visit/hot/14.jpg', 'visit/hot/15.jpg', 'visit/hot/16.jpg']
-        },
-        {
-          // 名字
-          name: '凶拜',
-          // 文本内容
-          txt: `
-          <h3>服三年之丧者的拜礼，</h3>
-          <h2>稽颡而后拜，即先顿首后空首。</h2>
-          `,
-          // 图片路径+名字
-          imgArr: ['visit/hot/17.jpg', 'visit/hot/18.jpg', 'visit/hot/19.jpg']
-        },
-        {
-          // 名字
-          name: '奇拜',
-          // 文本内容
-          txt: `
-          <h3>即一拜，通常作为答拜之礼。</h3>
-          <h2>头向下至地，稽留一段时间。</h2>
-          `,
-          // 图片路径+名字
-          imgArr: ['visit/hot/20.jpg', 'visit/hot/21.jpg', 'visit/hot/22.jpg', 'visit/hot/23.jpg']
-        },
-        {
-          // 名字
-          name: '褒拜',
-          // 文本内容
-          txt: `
-          <h3>即再拜，通常作为答拜之礼。</h3>
-          <h2>头向下至地，稽留一段时间。</h2>
-          `,
-          // 图片路径+名字
-          imgArr: ['visit/hot/24.jpg', 'visit/hot/25.jpg']
-        },
-        {
-          // 名字
-          name: '肃拜',
-          // 文本内容
-          txt: `
-          <h3>为下跪但只下手不低头。</h3>
-           `,
-          // 图片路径+名字
-          imgArr: ['visit/hot/26.jpg', 'visit/hot/27.jpg']
-        }
-      ]
-    }
   ]
 }
 

Code/public/myData/myData.js

@@ -2027,7 +2027,13 @@ const myDataTemp = {
     // 左下角动画视频路径+名字
     leftVideo: 'home/left.mp4',
     // 最后的过场动画路径+名字
-    lastVideo: 'home/end.mp4'
+    lastVideo: 'home/end.mp4',
+    text: `
+    <p>中原地区是汉代政治、经济、文化的核心区域，汉代文化遗存丰富，承载和反映着汉代文化的基本风貌，兼具汉代核心文化、主流文化特质。</p>
+    <p>河南淮阳于庄汉墓出土的“汉代陶庄园”是目前出土西汉时期形制较大、内容较丰富的建筑模型，主体为三进四合院建筑，是汉代庄园自给自足社会生活的真实写照。汉代庄园经济分工明确，内容丰富而广泛，涉及社会伦理、休闲娱乐、农业生产、文化思想、民间信仰等等，是汉代社会发展的缩影，历史文化内涵极为丰富。</p>
+    <p>河南博物院依托“汉代陶庄园”三维数字模型，以及院藏汉代文物数字信息，对汉代庄园进行虚拟空间的构建，动态还原和再现汉代庄园生活和人文风貌。</p>
+    <p>现在，让我们开启您的汉家之旅吧！</p>
+    `
   },
 
   // 首页后面的一个过度页面

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

@@ -25,6 +25,7 @@
       width: 30px;
       z-index: 10;
       cursor: pointer;
+      display: none;
     }
 
     .BIlogo {
@@ -38,16 +39,30 @@
     }
 
     .BItxt {
+      text-indent: 2em;
       position: absolute;
       top: 32%;
-      left: 12%;
+      left: 50%;
+      transform: translateX(-50%);
       z-index: 10;
-      width: 34.6%;
+      width: 70%;
       max-height: 200px;
       background-size: 100% 100%;
       padding: 10px;
       background-color: rgba(242, 242, 215, 0.3);
       backdrop-filter: blur(4px);
+      & > img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        object-fit: fill !important;
+        pointer-events: none;
+      }
+      .BItxtImg {
+        top: auto;
+        bottom: 0;
+      }
       & > div {
         text-align: justify;
         width: 100%;

Code/src/components/BaseImg/index.tsx

@@ -94,7 +94,9 @@ function BaseImg({
 
       {/* 文字介绍 */}
       {bird ? (
-        <div className='BItxt' style={{ backgroundImage: `url(${baseURL + 'Zhot/bac.png'})` }}>
+        <div className='BItxt'>
+          <img src={baseURL + 'Zhot/bianjiao1.png'} alt='' />
+          <img className='BItxtImg' src={baseURL + 'Zhot/bianjiao2.png'} alt='' />
           <div className='sizeNo'>{Reflect.get(txtRes, bird)}</div>
         </div>
       ) : null}

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

@@ -42,6 +42,8 @@
       z-index: 20;
       opacity: 1;
       transition: opacity 1s;
+
+      // logo
       .A1Vlogo {
         position: absolute;
         top: 56px;
@@ -49,6 +51,42 @@
         left: 51%;
         transform: translateX(-50%);
       }
+
+      // 文字介绍
+      .A1txt {
+        opacity: 0;
+        position: absolute;
+        z-index: 99;
+        top: -35px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 80%;
+        transition: all 1s;
+        .A1txt1 {
+          margin: 0 auto 8px;
+          width: 140px;
+          height: 12px;
+          background-size: 100% 100%;
+          text-align: center;
+          color: #735048;
+          line-height: 10px;
+          font-size: 18px;
+        }
+        .A1txt2 {
+          text-align: justify;
+          font-size: 14px;
+          background-size: 100% 100%;
+          padding: 8px 10px 1px;
+          p {
+            margin-bottom: 6px;
+          }
+        }
+      }
+      .A1txtShow {
+        opacity: 1;
+        top: 35px;
+      }
+
       .A1loding {
         font-size: 18px;
         position: absolute;

Code/src/pages/A1home/index.tsx

@@ -113,13 +113,36 @@ function A1home() {
           <div className={classNames('A1base', loding === 110 ? 'A1baseHide' : '')}>
             <img onLoad={imgNumFu} id='bgImgBox' src={baseURL + myData.home.bgImg} alt='' />
 
-            <img onLoad={imgNumFu} className='A1Vlogo' src={`${baseURL}home/logo.png`} alt='' />
+            {/* logo */}
+            <img
+              style={{ opacity: loding >= 100 ? '0' : '1' }}
+              onLoad={imgNumFu}
+              className='A1Vlogo'
+              src={`${baseURL}home/logo.png`}
+              alt=''
+            />
+            {/* 文字介绍 */}
+            <div className={classNames('A1txt', loding >= 100 ? 'A1txtShow' : '')}>
+              <div
+                className='A1txt1'
+                style={{ backgroundImage: `url(${baseURL + 'home/txtTit.png'})` }}
+              >
+                汉代陶庄园
+              </div>
+              <div
+                className='A1txt2'
+                style={{ backgroundImage: `url(${baseURL + 'home/txtBg.png'})` }}
+              >
+                <div dangerouslySetInnerHTML={{ __html: myData.home.text }}></div>
+              </div>
+            </div>
+
             {loding >= 100 ? (
               <div className='A1loding A1lodingBtn' onClick={btnStartFu}>
                 <div>点击继续</div>
               </div>
             ) : (
-              <div className='A1loding'>{loding}%</div>
+              <div className='A1loding sizeNo'>{loding}%</div>
             )}
 
             {/* 底部颜色条 */}

Code/src/pages/A2visit2/index.tsx

@@ -39,10 +39,12 @@ function A2visit2() {
   const videoRef = useRef<HTMLVideoElement>(null)
 
   useEffect(() => {
-    setTimeout(() => {
-      if (videoRef.current) videoRef.current.play()
-    }, 100)
-  }, [])
+    if (loding >= 100) {
+      setTimeout(() => {
+        if (videoRef.current) videoRef.current.play()
+      }, 100)
+    }
+  }, [loding])
 
   //  进入院落 全景图显示
   const [panoShow, setPanoShow] = useState(window.location.href.includes('?v=v2') ? true : false)

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

@@ -17,6 +17,14 @@
         &::-webkit-scrollbar {
           display: none;
         }
+
+        .S2leftBox1Tit {
+          font-weight: 700;
+          font-size: 18px;
+          color: red;
+          margin-bottom: 8px;
+        }
+
         .S2leftRow {
           cursor: pointer;
           width: 140px;

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

@@ -7,6 +7,22 @@ import ZHot0 from '@/components/ZHot0'
 import Zhot from '@/components/Zhot'
 import { HotRowType } from '@/components/Zhot/type'
 
+const levObj = {
+  周礼九拜: '车骑拜谒',
+  cheQi: '车骑拜谒',
+  cheQiCove: '车骑拜谒',
+  cheQi2: '车骑拜谒',
+  yanYing1: '宴饮',
+  yanYing2: '宴饮',
+  yanYing3: '宴饮',
+  yueWu: '乐舞百戏',
+  houCu: '后厨备宴',
+  plowZhuang: '田间耕作',
+  plowCai: '田间耕作',
+  xianJu: '仙居世界',
+  xianJu2: '仙居世界'
+}
+
 type Props = {
   hidden: boolean
 }
@@ -23,13 +39,24 @@ function S2mien({ hidden }: Props) {
 
   // 所有热点信息
   const hotArr = useMemo(() => {
-    const arr: HotRowType[] = []
+    let leftObj: { [kty: string]: HotRowType[] } = {}
+    const leftArr: { name1: string; son: HotRowType[] }[] = []
+    const rightArr: HotRowType[] = []
     for (const k in hotInfo) {
+      let name: string = Reflect.get(levObj, k)
+
       hotInfo[k as 'cheQi'].forEach(v => {
-        arr.push(v)
+        rightArr.push(v)
+        if (leftObj[name]) leftObj[name].push(v)
+        else leftObj[name] = [v]
       })
     }
-    return arr
+
+    for (const k in leftObj) {
+      leftArr.push({ name1: k, son: leftObj[k] })
+    }
+
+    return { left: leftArr, right: rightArr }
   }, [])
 
   return (
@@ -45,14 +72,22 @@ function S2mien({ hidden }: Props) {
       >
         {/* 物----------- */}
         <div ref={sroolDomRef} className='S2leftMain'>
-          {hotArr.map((item, index) => (
-            <div
-              onClick={() => setAcName(item.name)}
-              className={classNames('S2leftRow sizeNo', acName === item.name ? 'S2leftRowAc' : '')}
-              // onMouseUp={() => setHotInd(index)}
-              key={index}
-            >
-              {item.name}
+          {hotArr.left.map((item1, index1) => (
+            <div className='S2leftBox' key={index1}>
+              <div className='S2leftBox1Tit'>{item1.name1}</div>
+              {item1.son.map((item, index) => (
+                <div
+                  onClick={() => setAcName(item.name)}
+                  className={classNames(
+                    'S2leftRow sizeNo',
+                    acName === item.name ? 'S2leftRowAc' : ''
+                  )}
+                  // onMouseUp={() => setHotInd(index)}
+                  key={index}
+                >
+                  {item.name}
+                </div>
+              ))}
             </div>
           ))}
         </div>
@@ -61,7 +96,7 @@ function S2mien({ hidden }: Props) {
       {/* 物-----------右侧 */}
       <div className='S2right'>
         {/* 热点图标 */}
-        {hotArr
+        {hotArr.right
           .filter(v => v.locMore)
           .map((item, index) => (
             <HotIcon

Code/src/types/declaration.d.ts

@@ -21,6 +21,7 @@ type MyDataType = {
     bgImg: string
     leftVideo: string
     lastVideo: string
+    text: string
   }
   base: {
     bgImg: string