upp

Code/public/myData/myData.js

@@ -1982,7 +1982,8 @@ const xianJuArr = [
 
 // 更多模块的热点（过滤-通过 noShow ）
 let moreHotArr = [...visitHotArr, ...erYuanArr, ...banquetHotArr, ...danceHotArr, ...plowHotArr]
-// console.log('---------', moreHotArr.length)
+
+// console.log('-----总热点数量（没算后厨的8个，仙居图片的2个）----', moreHotArr.length)
 
 moreHotArr = moreHotArr.filter(v => !v.noShow)
 
@@ -3771,6 +3772,64 @@ const myDataTemp = {
     videos: ['xianJu/1.mp4'],
     // 最后的过场动画路径+名字
     lastVideo: 'xianJu/end.mp4',
-    hot: xianJuArr
+    hot: xianJuArr,
+    imgHot: [
+      {
+        //是否是文物
+        isModel: true,
+        // 是否在更多模块中显示-true表示不显示
+        noShow: true,
+        // 热点名字
+        name: '五凤铜熏炉',
+        // pc鼠标移入显示的图片路径+名字
+        hoverSrc: 'banquet/hot/hot5.png',
+        // 热点定位百分比
+        loc: {
+          top: '20%',
+          left: '20%'
+        },
+        data: [
+          {
+            // 为模型的情况
+            type: 'model',
+            name: '五凤铜熏炉',
+            txt: `
+            <p>熏炉是古时用来熏香和取暖的炉子。这件五凤铜熏炉为汉代文物，通高20厘米，底盘直径21.5厘米，1989年河南省焦作嘉禾屯窖藏出土。其主体为凤凰形象，华冠锦羽，昂首引颈，口衔圆珠，振翅挺胸，阔翅上翘，胸前与双翅上均有阴刻羽状纹饰。</p>
+            <p>凤腹中空，翅膀、腹部用穿钉连接，脊部中开，以成器盖，张合自由，可由此处向左右两边打开，用以放置香料，构思巧妙；凤体背部遍镂弧形孔，点燃香料后，熏香由此袅袅而上；尾翅处也镂有弧形、长方形小孔；胸前、双翅和尾部各饰有一只雏凤，加上主体的凤鸟形象共有五凤，故而得名。熏炉中所表现的五凤，象征着吉祥如意，天下太平。</p>
+            <p>熏炉的主体以凤凰双爪为支撑点，铆于一圆盘之上，圆盘平底、折沿、下饰三乳足。圆盘既起到了稳固熏炉主体的作用，又能盛接可能落下的香料灰烬，从美学的角度看也不会出现头重脚轻的视觉效果，整体器物集实用与观赏于一体，是汉代铜器的上乘之作。</p>
+            `,
+            imgArr: ['banquet/hot/2.4dage']
+          }
+        ]
+      },
+      {
+        //是否是文物
+        isModel: true,
+        // 是否在更多模块中显示-true表示不显示
+        noShow: true,
+        // 热点名字
+        name: '绿釉陶都树',
+        // pc鼠标移入显示的图片路径+名字
+        hoverSrc: 'xianJu/hot/tag_dushu.png',
+        // 热点定位百分比
+        loc: {
+          top: '10%',
+          left: '10%'
+        },
+        data: [
+          {
+            // 为模型的情况
+            type: 'model',
+            name: '绿釉陶都树',
+            txt: `
+            <p>陶器，西汉晚期，1969年11月于济源轵城泗涧沟西汉墓出土。</p>
+            <p>红陶胎，全树有树身，树座与树枝三部分组成。树身参天其顶有昂首挺立的天鸡，其身有三层树枝，枝端均有翘为90度的桃形叶片，每枝各有一猿 猴与乌鸦之类动物。树座塑为桃都山呈三角锥状，表面塑有裸体人，羽人，奔獐飞蝉等。全树施红绿釉。</p>
+            <p>《玄中记》记载：东南方有座桃都山，山上有颗大树，名叫桃都树，树顶有一只天鸡。每天清晨，当第一缕阳光照射到桃都树上时，天鸡就开始啼鸣，凡间的鸡在听到它的叫声后，也会随之鸣叫。于是人们纷纷起床，开始新一天的工作和生活。树底有二神，执苇索杀不祥之鬼。</p>
+            `,
+            imgArr: ['xianJu/hot/dushu.4dage']
+          }
+        ]
+      }
+    ]
   }
 }

Code/src/pages/A6plow/index.tsx

@@ -71,18 +71,19 @@ function A6plow() {
   const [btnVideo, setBtnVideo] = useState('')
 
   // 打开热点
-  const [hotInd, setHotInd] = useState(-1)
+  const [acName, setAcName] = useState('')
 
   const hotInfo = useMemo(() => {
     let info = {} as PlowHotType
 
-    const temp = staCut === '蔬菜' ? myData.plow.isSSSArr : myData.plow.info[leftAc].hot
-    if (temp && temp[hotInd]) {
-      info = temp[hotInd]
+    const temp = [...myData.plow.isSSSArr, ...myData.plow.info[leftAc].hot]
+
+    if (temp && temp.find(v => v.name === acName)) {
+      info = temp.find(v => v.name === acName)
     }
 
     return info
-  }, [hotInd, leftAc, staCut])
+  }, [acName, leftAc])
 
   return (
     <div className={styles.A6plow}>
@@ -112,7 +113,7 @@ function A6plow() {
             }}
             key={i}
             index={i}
-            clickSon={val => setHotInd(val)}
+            clickSon={() => setAcName(v.name)}
             hoverSrc={v.hoverSrc}
             isXiao={0.67}
           />
@@ -226,7 +227,7 @@ function A6plow() {
                 {item.hot.map((v: PlowHotType, i) =>
                   v.name === '汉代农具' ? (
                     <div
-                      onClick={() => setHotInd(i)}
+                      onClick={() => setAcName('汉代农具')}
                       key={i}
                       className='A6leftBtn'
                       style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
@@ -242,7 +243,7 @@ function A6plow() {
                       }}
                       key={i}
                       index={i}
-                      clickSon={val => setHotInd(val)}
+                      clickSon={() => setAcName(v.name)}
                       hoverSrc={v.hoverSrc}
                       isXiao={0.67}
                     />
@@ -259,8 +260,8 @@ function A6plow() {
         </div>
       ) : null}
 
-      {hotInd >= 0 && hotInfo.name ? (
-        <Hot2 data={hotInfo.data} closeFu={() => setHotInd(-1)} name={hotInfo.name} />
+      {acName && hotInfo.name ? (
+        <Hot2 data={hotInfo.data} closeFu={() => setAcName('')} name={hotInfo.name} />
       ) : null}
 
       {/* 二维码弹窗 */}

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

@@ -5,6 +5,37 @@
       height: 100%;
       object-fit: fill;
     }
+    #HotOpCss {
+      z-index: 201;
+    }
+
+    .A6erImg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      transition: all 0.3s;
+      z-index: 200;
+      & > img {
+        width: 100%;
+        height: 100%;
+        object-fit: fill !important;
+        pointer-events: none;
+      }
+      .A6erImgBtn {
+        cursor: pointer;
+        position: absolute;
+        bottom: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 10;
+        transition: all 0.3s;
+        &:hover {
+          transform: translateX(-50%) scale(1.1);
+        }
+      }
+    }
 
     .pvBox {
       position: absolute;

Code/src/pages/A6xian/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import BaseImg from '@/components/BaseImg'
 import { baseURL, myData } from '@/utils/http'
@@ -11,6 +11,8 @@ import FloorBtn from '@/components/FloorBtn'
 import NextPage from '@/components/NextPage'
 import EndVideo from '@/components/EndVideo'
 import history from '@/utils/history'
+import HotIcon from '@/components/HotIcon'
+import Hot2 from '../A2visit/PanoVideo/Hot2'
 
 function A6xian() {
   // 过度动画
@@ -70,6 +72,15 @@ function A6xian() {
     }
   }, [])
 
+  // 二级的静态图
+  const [erImg, setErImg] = useState(false)
+
+  // 打开热点
+  const [acName, setAcName] = useState('')
+  const hotInfo = useMemo(() => {
+    return myData.xianJu.imgHot.find(v => v.name === acName)!
+  }, [acName])
+
   return (
     <div className={styles.A6xian}>
       {/* 初始静态图 */}
@@ -77,13 +88,52 @@ function A6xian() {
         hidden={window.location.href.includes('t=xian')}
         isShow={cutVideoShow}
         iconSrc={`${baseURL}xianJu/mulu.png`}
-        parentFu={() => btnStart()}
+        parentFu={() => setErImg(true)}
         bgImg={`${baseURL}${myData.xianJu.bgImg}`}
         imgNow={imgNow}
         imgNumFu={imgNumFu}
         num={50}
       />
 
+      {/* 二级静态图 */}
+      <div
+        className='A6erImg'
+        style={{ opacity: erImg ? '1' : '0', pointerEvents: erImg ? 'auto' : 'none' }}
+      >
+        <img src={baseURL + 'xianJu/erImg.jpg'} alt='' />
+
+        {/* 热点 */}
+        {myData.xianJu.imgHot.map((v, i) => (
+          <HotIcon
+            isModel={v.isModel ? true : false}
+            style={{
+              top: v.loc.top,
+              left: v.loc.left
+            }}
+            key={i}
+            index={i}
+            clickSon={() => setAcName(v.name)}
+            hoverSrc={v.hoverSrc}
+            isXiao={0.67}
+          />
+        ))}
+
+        {/* 底部按钮 */}
+        <div
+          className='A6erImgBtn'
+          onClick={() => {
+            domDelOwnFu('.A6erImg')
+            btnStart()
+          }}
+        >
+          开始冥想
+        </div>
+
+        {acName ? (
+          <Hot2 data={hotInfo.data} closeFu={() => setAcName('')} name={hotInfo.name} />
+        ) : null}
+      </div>
+
       {/* 过度动画页面 */}
       {imgNow ? (
         <CatVideo

Code/src/types/declaration.d.ts

@@ -152,6 +152,16 @@ type MyDataType = {
       hoverSrc: string
       data: VisitHotDataType
     }[]
+    imgHot: {
+      isModel?: boolean
+      name: string
+      hoverSrc: string
+      loc: {
+        top: string
+        left: string
+      }
+      data: VisitHotDataType
+    }[]
   }
   end: {
     baseImg: string