写不动了

Code/public/myData/hot.js

@@ -1208,8 +1208,8 @@ const myHotInfo = {
       // 全景视频和全景图的定位(不是全景图或者全景视频的---删掉)
       panoLoc: {
         size: 1, // 热点大小（默认填1）
-        atv: 5.779720661163498, // 垂直方向（先随便填，尽量保证不相同）
-        ath: 77.51963765208711 // 水平方向（先随便填，尽量保证不相同）
+        atv: -1.4418235318369663, // 垂直方向（先随便填，尽量保证不相同）
+        ath: 106.7917296235075 // 水平方向（先随便填，尽量保证不相同）
       },
 
       // 详细热点信息
@@ -1272,8 +1272,8 @@ const myHotInfo = {
       // 全景视频和全景图的定位(不是全景图或者全景视频的---删掉)
       panoLoc: {
         size: 1, // 热点大小（默认填1）
-        atv: 7.911770740510851, // 垂直方向（先随便填，尽量保证不相同）
-        ath: -117.5170214956907 // 水平方向（先随便填，尽量保证不相同）
+        atv: 9.327145803952854, // 垂直方向（先随便填，尽量保证不相同）
+        ath: -35.14150273752091 // 水平方向（先随便填，尽量保证不相同）
       },
 
       // 详细热点信息
@@ -1580,8 +1580,8 @@ const myHotInfo = {
       // 全景视频和全景图的定位(不是全景图或者全景视频的---删掉)
       panoLoc: {
         size: 1, // 热点大小（默认填1）
-        atv: -0.12608535316476646, // 垂直方向（先随便填，尽量保证不相同）
-        ath: 84.75459357508112 // 水平方向（先随便填，尽量保证不相同）
+        atv: -1.9726689906272592, // 垂直方向（先随便填，尽量保证不相同）
+        ath: 80.502499396931 // 水平方向（先随便填，尽量保证不相同）
       },
 
       // 详细热点信息
@@ -2057,8 +2057,8 @@ const myHotInfo = {
       // 全景视频和全景图的定位(不是全景图或者全景视频的---删掉)
       panoLoc: {
         size: 1, // 热点大小（默认填1）
-        atv: -0.5407540132173857, // 垂直方向（先随便填，尽量保证不相同）
-        ath: 162.38929877184168 // 水平方向（先随便填，尽量保证不相同）
+        atv: -9.979325286732774, // 垂直方向（先随便填，尽量保证不相同）
+        ath: 162.08217220482283 // 水平方向（先随便填，尽量保证不相同）
       },
 
       // 详细热点信息
@@ -2440,21 +2440,21 @@ const myHotInfo = {
           `
           },
           {
-            name: '醢（hǎi）',
+            name: '醢',
             //二级介绍，一段用 <p></p> 包起来
             txt: `
            <p>是将鱼肉等原料腌制成酱，鬻是带骨的肉酱，醢是无骨的肉酱。</p>
           `
           },
           {
-            name: '菹(zū)',
+            name: '菹',
             //二级介绍，一段用 <p></p> 包起来
             txt: `
            <p>腌制方法之一，是用盐和酒糟酿制食物，经发酵作用变成美味。</p>
           `
           },
           {
-            name: '䐿(ǎo)',
+            name: '䐿',
             //二级介绍，一段用 <p></p> 包起来
             txt: `
            <p>䐿是南方地区的一种特殊食法，是将肉食埋藏使其腐烂后食用。</p>
@@ -2468,12 +2468,12 @@ const myHotInfo = {
     {
       name: '釜', // 热点名字
       tubiao: '普通', //普通 | 文物（热点图标不同）
-      zIndex: 2, //定位层级（默认填1）
+      zIndex: 1, //定位层级（默认填1）
       hoverSrc: 'Zhot/hot/tag_fu.png', // pc鼠标移入显示的图片路径+名字
       // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
       locPage: {
         top: '71%',
-        left: '22%'
+        left: '13.3%'
       },
       // 详细热点信息
       imgArr1: [],
@@ -2531,8 +2531,8 @@ const myHotInfo = {
       hoverSrc: 'Zhot/hot/tag_zeng.png', // pc鼠标移入显示的图片路径+名字
       // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
       locPage: {
-        top: '67%',
-        left: '7%'
+        top: '72%',
+        left: '6.9%'
       },
       // 详细热点信息
       imgArr1: [],
@@ -2609,7 +2609,7 @@ const myHotInfo = {
     {
       name: '炙炉', // 热点名字
       tubiao: '普通', //普通 | 文物（热点图标不同）
-      zIndex: 1, //定位层级（默认填1）
+      zIndex: 3, //定位层级（默认填1）
       hoverSrc: 'Zhot/hot/tag_zhilu.png', // pc鼠标移入显示的图片路径+名字
       // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
       locPage: {
@@ -2701,8 +2701,8 @@ const myHotInfo = {
       hoverSrc: 'Zhot/hot/tag_handaicaiyao2.png', // pc鼠标移入显示的图片路径+名字
       // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
       locPage: {
-        top: '72%',
-        left: '35.7%'
+        top: '91%',
+        left: '32%'
       },
       // 详细热点信息
       data: {
@@ -2738,8 +2738,8 @@ const myHotInfo = {
       hoverSrc: 'Zhot/hot/tag_zao.png', // pc鼠标移入显示的图片路径+名字
       // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
       locPage: {
-        top: '74%',
-        left: '13.2%'
+        top: '79%',
+        left: '9.5%'
       },
       // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
       locMore: {
@@ -2841,7 +2841,6 @@ const myHotInfo = {
   //庄稼
   plowZhuang: [
     {
-      pageType: '整地',
       name: '汉代百科：代田法', // 热点名字
       tubiao: '普通', //普通 | 文物（热点图标不同）
       zIndex: 1, //定位层级（默认填1）
@@ -2862,8 +2861,9 @@ const myHotInfo = {
         son: []
       }
     },
+
+    // 顶部一直显示的热点
     {
-      pageType: '整地',
       name: '汉代农业精耕细作技术', // 热点名字
       tubiao: '普通', //普通 | 文物（热点图标不同）
       zIndex: 1, //定位层级（默认填1）
@@ -3057,7 +3057,6 @@ const myHotInfo = {
       }
     },
     {
-      pageType: '整地',
       name: '汉代牛耕技术', // 热点名字
       tubiao: '普通', //普通 | 文物（热点图标不同）
       zIndex: 1, //定位层级（默认填1）

Code/public/myData/myData.js

@@ -2176,6 +2176,7 @@ const myDataTemp = {
       {
         // 热点名字
         name: '炙',
+        zIndex: 2,
         // 热点图片路径+名字
         hoverSrc: 'chef/hot6.png',
         // 点击之后的播放动画路径+名字

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

@@ -2,7 +2,7 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  z-index: 10;
+  z-index: 15;
   opacity: 1;
   top: 0;
   left: 0;

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

@@ -0,0 +1,10 @@
+.Zmap {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 11;
+  pointer-events: none;
+  width: 80px;
+  height: auto;
+  object-fit: fill !important;
+}

Code/src/components/Zmap/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { baseURL } from '@/utils/http'
+
+type Props = {
+  src: string
+}
+
+function Zmap({ src }: Props) {
+  return <img className={styles.Zmap} src={`${baseURL}Zmap/${src}.png`} alt='' />
+}
+
+const MemoZmap = React.memo(Zmap)
+
+export default MemoZmap

Code/src/pages/A1home/index.tsx

@@ -139,7 +139,7 @@ function A1home() {
 
             {loding >= 100 ? (
               <div className='A1loding A1lodingBtn' onClick={btnStartFu}>
-                <div>点击继续</div>
+                <div>开始</div>
               </div>
             ) : (
               <div className='A1loding sizeNo'>{loding}%</div>

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

@@ -7,10 +7,9 @@ import { KrpanoMiddleware, KrpanoMiddlewareMethods } from '@/components/KrpanoMi
 import ZHot0 from '@/components/ZHot0'
 import Zhot from '@/components/Zhot'
 
-// 待完善
-window.draggbleHotspotEvent = (ath: number, atv: number) => {
-  console.log(`ath: ${ath}, atv: ${atv}`)
-}
+// window.draggbleHotspotEvent = (ath: number, atv: number) => {
+//   console.log(`ath: ${ath}, atv: ${atv}`)
+// }
 
 type Propr = {
   lodingOk: () => void
@@ -86,7 +85,7 @@ function PanoVideo({ lodingOk }: Propr) {
                 onOut={() => setActiveIdx(-1)}
                 onClick={() => setAcName(item.name)}
                 // @ts-ignore
-                onDown='draggable_hotspot()'
+                // onDown='draggable_hotspot()'
               >
                 <HotIcon
                   isModel={item.tubiao === '文物' ? true : false}

Code/src/pages/A2visit/index.tsx

@@ -10,6 +10,7 @@ import BaseImg from '@/components/BaseImg'
 import useLoding from '@/components/ownUse/useLoding'
 import { domDelOwnFu } from '@/utils/utilsSome'
 import history from '@/utils/history'
+import Zmap from '@/components/Zmap'
 
 function A2visit() {
   // 过度动画
@@ -64,6 +65,10 @@ function A2visit() {
       {imgNow ? (
         <div className={classNames('pvBox', cutVideoShow ? '' : 'pvBoxShow')}>
           <PanoVideo lodingOk={() => setLastNum(100)} />
+
+          {/* 右上角地图 */}
+          <Zmap src='visit' />
+
           {/* 跳到下一章 */}
           <NextPage clickSon={() => setLastVideo(true)} txt='行拜谒礼' />
 

Code/src/pages/A2visit2/A22Pano/index.tsx

@@ -5,9 +5,9 @@ import { HotSpot, Krpano, Scene, View } from '@dage/krpano'
 import HotIcon from '@/components/HotIcon'
 import { KrpanoMiddleware } from '@/components/KrpanoMiddleware'
 
-window.draggbleHotspotEvent = (ath: number, atv: number) => {
-  console.log(`ath: ${ath}, atv: ${atv}`)
-}
+// window.draggbleHotspotEvent = (ath: number, atv: number) => {
+//   console.log(`ath: ${ath}, atv: ${atv}`)
+// }
 
 type Props = {
   setAcName: (val: string) => void
@@ -58,7 +58,7 @@ function A22Pano({ setAcName }: Props) {
                 onOut={() => setActiveIdx(-1)}
                 onClick={() => setAcName(item.name)}
                 // @ts-ignore
-                onDown='draggable_hotspot()'
+                // onDown='draggable_hotspot()'
               >
                 <HotIcon
                   isModel={item.tubiao === '文物' ? true : false}

Code/src/pages/A2visit2/index.tsx

@@ -14,6 +14,7 @@ import { renClickPageFu } from '../B1more/data'
 import ZHot0 from '@/components/ZHot0'
 import Zhot from '@/components/Zhot'
 import HotIcon from '@/components/HotIcon'
+import Zmap from '@/components/Zmap'
 
 function A2visit2() {
   const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
@@ -114,18 +115,23 @@ function A2visit2() {
           ))}
 
           {loding >= 100 ? (
-            // 进入院落
-            <NextPage
-              clickSon={() => {
-                setPanoShow(true)
-                setTimeout(() => {
-                  domDelOwnFu('.A22imgBox')
-                }, 500)
-              }}
-              txt='进入院落'
-            />
+            <>
+              {/* // 进入院落 */}
+              <NextPage
+                clickSon={() => {
+                  setPanoShow(true)
+                  setTimeout(() => {
+                    domDelOwnFu('.A22imgBox')
+                  }, 500)
+                }}
+                txt='进入院落'
+              />
+            </>
           ) : null}
 
+          {/* 右上角地图 */}
+          <Zmap src='visit2' />
+
           {/* 3个视频 */}
           <div className='A22videoBox' style={{ zIndex: videoPlay ? '2' : '0' }}>
             {myData.visit2.btnArr.map((item, index) => (
@@ -184,6 +190,9 @@ function A2visit2() {
           {/* 进入室内 */}
           <NextPage clickSon={() => setToShi(true)} txt='进入室内' />
 
+          {/* 右上角地图 */}
+          <Zmap src='visit2' />
+
           {/* 底部按钮 */}
           <div
             onClick={() => setBaiXi(true)}
@@ -204,6 +213,9 @@ function A2visit2() {
           backgroundImage: `url(${baseURL + myData.visit2.baiXiBg})`
         }}
       >
+        {/* 右上角地图 */}
+        <Zmap src='visit2' />
+
         {/* 进入室内 */}
         <NextPage clickSon={() => setToShi(true)} txt='进入室内' />
 

Code/src/pages/A3banPano/index.tsx

@@ -12,11 +12,12 @@ import { KrpanoMiddleware } from '@/components/KrpanoMiddleware'
 import CatVideo from '@/components/CatVideo'
 import Zhot from '@/components/Zhot'
 import NextPage from '@/components/NextPage'
+import Zmap from '@/components/Zmap'
 // import { myData } from '@/utils/http'
 
-window.draggbleHotspotEvent = (ath: number, atv: number) => {
-  console.log(`ath: ${ath}, atv: ${atv}`)
-}
+// window.draggbleHotspotEvent = (ath: number, atv: number) => {
+//   console.log(`ath: ${ath}, atv: ${atv}`)
+// }
 
 function A3banPano() {
   // 路由：/banPano/id
@@ -92,7 +93,7 @@ function A3banPano() {
                 onOut={() => setActiveIdx(-1)}
                 onClick={() => setAcName(item.name)}
                 // @ts-ignore
-                onDown='draggable_hotspot()'
+                // onDown='draggable_hotspot()'
               >
                 <HotIcon
                   isPano
@@ -118,7 +119,7 @@ function A3banPano() {
                 history.push('/banquet?r=ren')
               }}
               // @ts-ignore
-              onDown='draggable_hotspot()'
+              // onDown='draggable_hotspot()'
             >
               <div className={styles.floorHotspot}>
                 <img src={FloorHotspotIcon} className={styles.floorHotspotIcon} alt='' />
@@ -187,7 +188,7 @@ function A3banPano() {
                 onOut={() => setActiveIdx(-1)}
                 onClick={() => setAcName(item.name)}
                 // @ts-ignore
-                onDown='draggable_hotspot()'
+                // onDown='draggable_hotspot()'
               >
                 <HotIcon
                   isPano
@@ -229,6 +230,9 @@ function A3banPano() {
           setVideoPlay(false)
         }}
       />
+      {/* 右上角地图 */}
+      <Zmap src='banquet' />
+
       {/* 跳到下一章 */}
       {videoPlay ? null : <NextPage clickSon={clickToYueWu} txt='乐舞百戏' />}
 

Code/src/pages/A3banquet/PanoImg/index.tsx

@@ -8,9 +8,9 @@ import { HotSpot, Krpano, Scene, View } from '@dage/krpano'
 import FloorHotspotIcon from '@/assets/img/icon-flo-min.png'
 import Zhot from '@/components/Zhot'
 
-window.draggbleHotspotEvent = (ath: number, atv: number) => {
-  console.log(`ath: ${ath}, atv: ${atv}`)
-}
+// window.draggbleHotspotEvent = (ath: number, atv: number) => {
+//   console.log(`ath: ${ath}, atv: ${atv}`)
+// }
 
 function PanoImg() {
   //热点
@@ -78,7 +78,7 @@ function PanoImg() {
                 onOut={() => setActiveIdx(-1)}
                 onClick={() => setAcName(item.name)}
                 // @ts-ignore
-                onDown='draggable_hotspot()'
+                // onDown='draggable_hotspot()'
               >
                 <HotIcon
                   isPano

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

@@ -27,7 +27,7 @@
       height: 100%;
       top: 0;
       left: 0;
-      z-index: 10;
+      z-index: 15;
       background-color: rgba(70, 4, 1, 0.4);
       backdrop-filter: blur(4px);
       opacity: 0;

Code/src/pages/A3banquet/index.tsx

@@ -11,6 +11,7 @@ import BaseImg from '@/components/BaseImg'
 import useLoding from '@/components/ownUse/useLoding'
 import BtnRight from '@/components/BtnRight'
 import history from '@/utils/history'
+import Zmap from '@/components/Zmap'
 
 function A3banquet() {
   // 过度动画
@@ -50,6 +51,9 @@ function A3banquet() {
         />
       )}
 
+      {/* 右上角地图 */}
+      <Zmap src='banquet' />
+
       {/* 过度动画页面 */}
       {imgNow && !window.location.href.includes('?r=ren') ? (
         <CatVideo
@@ -63,6 +67,7 @@ function A3banquet() {
       {imgNow || window.location.href.includes('?r=ren') ? (
         <div className={classNames('pvBox', cutVideoShow ? '' : 'pvBoxShow')}>
           <PanoImg />
+
           {/* 跳到下一章 */}
           <NextPage clickSon={() => setLastVideo(true)} txt='乐舞百戏' />
 

Code/src/pages/A4dance/index.tsx

@@ -11,6 +11,7 @@ import BtnRight from '@/components/BtnRight'
 import VideoModel from '@/components/VideoModel'
 import Zhot from '@/components/Zhot'
 import history from '@/utils/history'
+import Zmap from '@/components/Zmap'
 
 function A4dance() {
   const [baseSta, setBaseSta] = useState(window.location.href.includes('r=ren') ? true : false)
@@ -64,6 +65,8 @@ function A4dance() {
         imgNumFu={imgNumFu}
         bird='yueWu'
       />
+      {/* 右上角地图 */}
+      <Zmap src='dance' />
 
       {/* 主要内容 */}
       {imgNow ? (

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

@@ -29,16 +29,22 @@
           bottom: 10px;
           left: 50%;
           transform: translateX(-50%);
-          width: 100px;
-          height: 36px;
           display: flex;
-          justify-content: center;
-          align-items: center;
-          color: #fffddc;
-          background-size: 100% 100%;
-          transition: transform 0.3s;
-          &:hover {
-            transform: translateX(-50%) scale(1.1);
+          & > div {
+            width: 100px;
+            height: 36px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #fffddc;
+            background-size: 100% 100%;
+            transition: transform 0.3s;
+            &:hover {
+              transform: scale(1.1);
+            }
+            &:nth-of-type(1) {
+              margin-right: 8px;
+            }
           }
         }
 
@@ -53,6 +59,50 @@
           pointer-events: none;
           transition: opacity 1s;
           background-size: 100% 100%;
+
+          .A5chuHot {
+            position: absolute;
+            width: 35%;
+            height: 15%;
+            bottom: 7%;
+            right: 18.7%;
+            .A5chuHot1 {
+              display: flex;
+              justify-content: space-around;
+              padding: 0 5px;
+              & > div {
+                cursor: pointer;
+                width: 22px;
+                height: 22px;
+                border-radius: 11px;
+                color: #fffddc;
+                background-color: #83605a;
+                text-align: center;
+                line-height: 18px;
+                border: 1px solid transparent;
+              }
+              .A5chuHot1Ac {
+                border-color: #9f4132;
+                background-color: #ead98f;
+                color: #9f4132;
+              }
+            }
+            .A5chuHot2 {
+              font-size: 12px;
+              line-height: 14px;
+              height: 34px;
+              padding: 3px 8px;
+              margin-top: 10px;
+              background-size: 100% 100%;
+              color: #83605a;
+              p {
+                font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI',
+                  'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei',
+                  sans-serif !important;
+              }
+            }
+          }
+
           #BtnRight {
             bottom: 70px;
           }

Code/src/pages/A5chef/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import classNames from 'classnames'
 import { baseURL, hotInfo, myData } from '@/utils/http'
@@ -11,6 +11,9 @@ import useLoding from '@/components/ownUse/useLoding'
 import BtnRight from '@/components/BtnRight'
 import Zhot from '@/components/Zhot'
 import history from '@/utils/history'
+import Zmap from '@/components/Zmap'
+
+const houChuHotInfo = hotInfo.houCu.find(v => v.name === '汉代烹饪技艺')!.data.son
 
 function A5chef() {
   // 点击继续
@@ -53,6 +56,13 @@ function A5chef() {
   //热点
   const [acName, setAcName] = useState('')
 
+  // 后厨群像 里面的热点
+  const [houChuName, setHouChuName] = useState(houChuHotInfo[0].name)
+
+  const houChuTxt = useMemo(() => {
+    return houChuHotInfo.find(v => v.name === houChuName)!.txt
+  }, [houChuName])
+
   return (
     <div className={styles.A5chef}>
       {/* 整体盒子 */}
@@ -67,6 +77,10 @@ function A5chef() {
           imgNumFu={imgNumFu}
           bird='houCu'
         />
+
+        {/* 右上角地图 */}
+        <Zmap src='chef' />
+
         {/* 热点按钮页面 */}
         {imgNow ? (
           <div className={classNames('A5hotBox', baseFlag ? '' : 'A5hotBoxAc')}>
@@ -78,6 +92,7 @@ function A5chef() {
                   top: item.loc.top,
                   left: item.loc.left
                 }}
+                zIndex={item.zIndex || 1}
                 key={index}
                 index={index}
                 clickSon={val => setHotInd(val)}
@@ -87,18 +102,20 @@ function A5chef() {
             ))}
 
             {/* ---------最新热点-------------- */}
-            {hotInfo.houCu.map((item, index) => (
-              <HotIcon
-                isModel={item.tubiao === '文物' ? true : false}
-                key={index}
-                index={index}
-                style={{ top: item.locPage.top, left: item.locPage.left }}
-                hoverSrc={item.hoverSrc}
-                zIndex={item.zIndex}
-                clickSon={() => setAcName(item.name)}
-                isXiao={0.67}
-              />
-            ))}
+            {hotInfo.houCu
+              .filter(v => !['汉代菜肴', '汉代烹饪技艺'].includes(v.name))
+              .map((item, index) => (
+                <HotIcon
+                  isModel={item.tubiao === '文物' ? true : false}
+                  key={index}
+                  index={index}
+                  style={{ top: item.locPage.top, left: item.locPage.left }}
+                  hoverSrc={item.hoverSrc}
+                  zIndex={item.zIndex}
+                  clickSon={() => setAcName(item.name)}
+                  isXiao={0.67}
+                />
+              ))}
 
             {/* 后厨群像 */}
             <div
@@ -108,15 +125,43 @@ function A5chef() {
               }}
               className={classNames('A5chu', chuShow ? 'A5chuShow' : '')}
             >
+              {/* 里面的 汉代烹饪技艺 */}
+              <div className='A5chuHot'>
+                <div className='A5chuHot1'>
+                  {houChuHotInfo.map(v => (
+                    <div
+                      key={v.name}
+                      onClick={() => setHouChuName(v.name)}
+                      className={classNames('sizeNo', houChuName === v.name ? 'A5chuHot1Ac' : '')}
+                    >
+                      {v.name}
+                    </div>
+                  ))}
+                </div>
+                <div
+                  className='A5chuHot2'
+                  style={{ backgroundImage: `url(${baseURL + 'chef/houchuTxt.png'})` }}
+                  dangerouslySetInnerHTML={{ __html: houChuTxt }}
+                ></div>
+              </div>
+
               {/* 返回按钮 */}
               <BtnRight imgName='back' clickSon={() => setChuShow(false)} title='返回' />
             </div>
-            <div
-              onClick={() => setChuShow(true)}
-              className='A5chuBtn'
-              style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
-            >
-              后厨群像
+            <div className='A5chuBtn'>
+              <div
+                onClick={() => setAcName('汉代菜肴')}
+                style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
+              >
+                汉代菜肴
+              </div>
+
+              <div
+                style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
+                onClick={() => setChuShow(true)}
+              >
+                后厨群像
+              </div>
             </div>
 
             {/* 跳到下一章 */}

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

@@ -16,6 +16,7 @@
       height: 100%;
       z-index: 10;
       background-size: 100% 100%;
+      transition: all 1s;
     }
 
     // 切换底部按钮的动画
@@ -38,6 +39,30 @@
       pointer-events: auto;
     }
 
+    // 最新的底部按钮
+    .A6btnDi {
+      cursor: pointer;
+      position: absolute;
+      z-index: 20;
+      bottom: 12px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      & > div {
+        width: 100px;
+        height: 36px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fffddc;
+        background-size: 100% 100%;
+        transition: transform 0.3s;
+        &:hover {
+          transform: scale(1.1);
+        }
+      }
+    }
+
     // 底部三个按钮
     .A6floorBox {
       position: absolute;
@@ -97,13 +122,57 @@
         flex-direction: column;
         justify-content: center;
         padding-left: 30px;
+        padding-bottom: 30px;
+
+        .A6LbtnTop {
+          cursor: pointer;
+          position: relative;
+          left: -8px;
+          width: 66px;
+          height: 30px;
+          background-image: url('../../assets/img/plow/top.png');
+          background-size: 100% 100%;
+          margin-bottom: 12px;
+          color: #dacb8b;
+          line-height: 12px;
+          padding: 1px 0 0 6.5px;
+          transition: all 0.3s;
+          &:hover {
+            color: #bd7656;
+            background-image: url('../../assets/img/plow/topAc.png');
+          }
+          &::before {
+            content: '';
+            position: absolute;
+            top: -9px;
+            width: 6px;
+            height: 6px;
+            border-radius: 3px;
+            background-color: #dacb8b;
+            left: 50%;
+            transform: translateX(-50%);
+          }
+          &::after {
+            content: '';
+            position: absolute;
+            bottom: -9px;
+            width: 6px;
+            height: 6px;
+            border-radius: 3px;
+            background-color: #dacb8b;
+            left: 50%;
+            transform: translateX(-50%);
+          }
+        }
+
         .A6LbtnRow {
+          position: relative;
           width: 50px;
           height: 50px;
           background-size: 100% 100%;
           cursor: pointer;
           transition: all 0.3s;
-          margin-bottom: 5px;
+          margin-bottom: 12px;
           display: flex;
           justify-content: center;
           align-items: center;
@@ -113,20 +182,29 @@
             background-image: url('../../assets/img/leftAc.png') !important;
             color: #bd7656 !important;
           }
+          &::after {
+            content: '';
+            position: absolute;
+            bottom: -9px;
+            width: 6px;
+            height: 6px;
+            border-radius: 3px;
+            background-color: #dacb8b;
+            left: 50%;
+            transform: translateX(-50%);
+          }
         }
       }
 
       // 底部文字
       .A6txt {
-        display: none !important;
         position: absolute;
         z-index: 11;
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 66%;
+        top: 10px;
+        right: 12%;
+        width: 74%;
         background-size: 100% 100%;
-        padding: 10px 60px;
+        padding: 6px 30px;
         font-size: 14px;
         color: #fffddc;
       }

Code/src/pages/A6plow/index.tsx

@@ -11,6 +11,7 @@ import useLoding from '@/components/ownUse/useLoding'
 import BtnRight from '@/components/BtnRight'
 import Zhot from '@/components/Zhot'
 import history from '@/utils/history'
+import Zmap from '@/components/Zmap'
 
 function A6plow() {
   // 初始显示和隐藏
@@ -101,11 +102,17 @@ function A6plow() {
         num={50}
       />
 
+      {/* 右上角地图 */}
+      <Zmap src='plow' />
+
       {/* 蔬菜的盒子 */}
       <div
         className='A6SS'
-        hidden={staCut !== '蔬菜'}
-        style={{ backgroundImage: `url(${baseURL}plow/bg.jpg)` }}
+        style={{
+          backgroundImage: `url(${baseURL}plow/bg.jpg)`,
+          opacity: staCut === '蔬菜' ? '1' : '0',
+          pointerEvents: staCut === '蔬菜' ? 'auto' : 'none'
+        }}
       >
         {/* 热点 */}
         {hotInfo.plowCai.map((item, index) => (
@@ -125,7 +132,7 @@ function A6plow() {
       </div>
 
       {/* 底部2个按钮 */}
-      {imgNow ? (
+      {/* {imgNow ? (
         <div className='A6floorBox' hidden={!cutVideoShow}>
           {myData.plow.flooBtn.map((v, i1) => (
             <div
@@ -140,7 +147,24 @@ function A6plow() {
             </div>
           ))}
         </div>
-      ) : null}
+      ) : null} */}
+
+      {/* 代田法 和 牛耕技术 */}
+      <div className='A6btnDi' hidden={staCut === '蔬菜'}>
+        <div
+          style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
+          onClick={() => setAcName('汉代百科：代田法')}
+        >
+          代田法
+        </div>
+        &emsp;
+        <div
+          style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
+          onClick={() => setAcName('汉代牛耕技术')}
+        >
+          牛耕技术
+        </div>
+      </div>
 
       {/*  庄稼 主要内容 */}
       {imgNow ? (
@@ -151,6 +175,11 @@ function A6plow() {
             hidden={staCut !== '庄稼'}
             style={{ backgroundImage: `url(${baseURL}plow/leftBg.png)` }}
           >
+            {/* 顶部  汉代精耕 细作技术 一直在的热点*/}
+            <div className='A6LbtnTop' onClick={() => setAcName('汉代农业精耕细作技术')}>
+              汉代精耕 细作技术
+            </div>
+
             {myData.plow.info.map((item, index) => (
               <div
                 key={index}
@@ -220,7 +249,15 @@ function A6plow() {
           </div>
 
           {/* 跳到下一章 */}
-          <NextPage clickSon={() => setLastVideo(true)} txt='结束饮宴' />
+          <NextPage
+            clickSon={() => {
+              if (staCut === '蔬菜') {
+                setStaCut('庄稼')
+                leftAcFu(0)
+              } else setLastVideo(true)
+            }}
+            txt={staCut === '蔬菜' ? '庄 稼' : '结束饮宴'}
+          />
           {/* 右下角按钮 */}
           <FloorBtn plowFu={() => setCode(true)} unityEnd={() => history.push('unend/end')} />
         </div>

Code/src/pages/A6xian/A6PanoVideo/index.tsx

@@ -6,9 +6,9 @@ import { HotSpot, Krpano, VideoScene, videoSceneModel, View } from '@dage/krpano
 import HotIcon from '@/components/HotIcon'
 import Zhot from '@/components/Zhot'
 
-window.draggbleHotspotEvent = (ath: number, atv: number) => {
-  console.log(`ath: ${ath}, atv: ${atv}`)
-}
+// window.draggbleHotspotEvent = (ath: number, atv: number) => {
+//   console.log(`ath: ${ath}, atv: ${atv}`)
+// }
 
 function A6PanoVideo() {
   const [acName, setAcName] = useState('')
@@ -61,7 +61,7 @@ function A6PanoVideo() {
                 onOut={() => setActiveIdx(-1)}
                 onClick={() => setAcName(item.name)}
                 // @ts-ignore
-                onDown='draggable_hotspot()'
+                // onDown='draggable_hotspot()'
               >
                 <HotIcon
                   isModel={item.tubiao === '文物' ? true : false}

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

@@ -71,6 +71,13 @@
               width: auto;
               object-fit: fill !important;
             }
+            // 3d标识
+            .tDbiao {
+              position: relative;
+              top: 10px;
+              left: -2px;
+              width: 20px;
+            }
           }
 
           .S3zRxian {

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

@@ -4,6 +4,7 @@ import { baseURL, myData } from '@/utils/http'
 import { GoodsKeyType, GoodsType } from '@/types'
 import classNames from 'classnames'
 import HotInfo from './HotInfo'
+import tDimg from '@/assets/img/more/3D.png'
 
 const txtBg = {
   全部: 'more/txtBg/1quanbu.png',
@@ -147,7 +148,7 @@ function S3goods({ hidden }: Props) {
                     style={{ backgroundImage: `url(${row2Bac(index2)})` }}
                   >
                     {item2.name}
-                    {item2.type === 'model' ? '---' : ''}
+                    {item2.type === 'model' ? <img className='tDbiao' src={tDimg} alt='' /> : ''}
 
                     {/* 上下的线 */}
                     {index2 < item1.info.length - 1 ? (

Code/src/types/declaration.d.ts

@@ -127,6 +127,7 @@ type MyDataType = {
         top: string
         left: string
       }
+      zIndex?: number
     }[]
   }
   plow: {