upp

Code/public/myData/hot.js

@@ -9,14 +9,14 @@ const myHotInfo = {
       // 全景视频和全景图的定位(不是全景图或者全景视频的---删掉)
       panoLoc: {
         size: 1, // 热点大小（默认填1）
-        atv: 1, // 垂直方向（先随便填，尽量保证不相同）
-        ath: 1 // 水平方向（先随便填，尽量保证不相同）
+        atv: -0.8313414528273116, // 垂直方向（先随便填，尽量保证不相同）
+        ath: 32.266866127540425 // 水平方向（先随便填，尽量保证不相同）
       },
       // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
-      // locMore: {
-      //   top: '0%',
-      //   left: '0%'
-      // },
+      locMore: {
+        top: '0%',
+        left: '0%'
+      },
       // 详细热点信息
       data: {
         //一级介绍，一段用 <p></p> 包起来
@@ -110,10 +110,14 @@ const myHotInfo = {
       // 全景视频和全景图的定位(不是全景图或者全景视频的---删掉)
       panoLoc: {
         size: 1, // 热点大小（默认填1）
-        atv: 5, // 垂直方向（先随便填，尽量保证不相同）
-        ath: 5 // 水平方向（先随便填，尽量保证不相同）
+        atv: -22.443736479441327, // 垂直方向（先随便填，尽量保证不相同）
+        ath: 29.470394625584504 // 水平方向（先随便填，尽量保证不相同）
+      },
+      // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
+      locMore: {
+        top: '5%',
+        left: '5%'
       },
-
       // 详细热点信息
       data: {
         //一级介绍，一段用 <p></p> 包起来
@@ -271,8 +275,13 @@ const myHotInfo = {
       // 全景视频和全景图的定位(不是全景图或者全景视频的---删掉)
       panoLoc: {
         size: 1, // 热点大小（默认填1）
-        atv: 10, // 垂直方向（先随便填，尽量保证不相同）
-        ath: 10 // 水平方向（先随便填，尽量保证不相同）
+        atv: -7.681818768878515, // 垂直方向（先随便填，尽量保证不相同）
+        ath: 68.6789934252156 // 水平方向（先随便填，尽量保证不相同）
+      },
+      // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
+      locMore: {
+        top: '10%',
+        left: '10%'
       },
 
       // 详细热点信息
@@ -334,7 +343,9 @@ const myHotInfo = {
           }
         ]
       }
-    },
+    }
+  ],
+  cheQiCove: [
     {
       name: '羊酒贺礼', // 热点名字
       tubiao: '普通', //普通 | 文物（热点图标不同）
@@ -344,8 +355,18 @@ const myHotInfo = {
       // 全景视频和全景图的定位(不是全景图或者全景视频的---删掉)
       panoLoc: {
         size: 1, // 热点大小（默认填1）
-        atv: 20, // 垂直方向（先随便填，尽量保证不相同）
-        ath: 20 // 水平方向（先随便填，尽量保证不相同）
+        atv: 1, // 垂直方向（先随便填，尽量保证不相同）
+        ath: 1 // 水平方向（先随便填，尽量保证不相同）
+      },
+
+      locPage: {
+        top: ' 62%',
+        left: '37%'
+      },
+      // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
+      locMore: {
+        top: '10%',
+        left: '10%'
       },
 
       // 详细热点信息
@@ -371,10 +392,14 @@ const myHotInfo = {
       // 全景视频和全景图的定位(不是全景图或者全景视频的---删掉)
       panoLoc: {
         size: 1, // 热点大小（默认填1）
-        atv: 25, // 垂直方向（先随便填，尽量保证不相同）
-        ath: 25 // 水平方向（先随便填，尽量保证不相同）
+        atv: -1.2974999625544075, // 垂直方向（先随便填，尽量保证不相同）
+        ath: -17.855356893097166 // 水平方向（先随便填，尽量保证不相同）
+      },
+      // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
+      locMore: {
+        top: '0%',
+        left: '0%'
       },
-
       // 详细热点信息
       data: {
         //一级介绍，一段用 <p></p> 包起来
@@ -385,7 +410,6 @@ const myHotInfo = {
         <P>养老礼仪：分为乡饮酒礼和养老礼，严格意义上的两汉养老礼仪在东汉正式形成和实施，并成为国家常典。</P>
         <P>三老五更宴老者：汉代乡、县所设立的“三老"，必须由五十岁以上的人担任，中央级别的 “三老”七十岁致仕后的老人才能担任，皇帝每年仲秋都在辟雍举行“三老”、“五更”大典，设宴招待各地老人代表。</P>
         <P>致仕制度：分为俸禄养育和赐物养育。俸禄养育在西汉中前期并未形成定制，王莽新政时期正式形成对官员退休后的俸禄制。赐物养育早在西汉中期，就正式形成赐安车驷马黄金的赐物模式，但均未被东汉继承。</P>
-
         `,
         // 二级信息（没有的话--删掉）
         son: [],
@@ -400,7 +424,6 @@ const myHotInfo = {
             <P>高7.2厘米、长8.8厘米、宽4.8厘米</P>
             <P>现藏河南博物院</P>
             <P>杖首为木手杖上端的装饰，杖首呈鸟状，圆目长嘴，翼收并于肩，宽尾后翘立于一圆銎之上。鸟的胸前有一对雏鸟，三鸟长嘴相接，似母鸟哺雏。</P>
-
             `
           }
         ]
@@ -415,10 +438,15 @@ const myHotInfo = {
       // 全景视频和全景图的定位(不是全景图或者全景视频的---删掉)
       panoLoc: {
         size: 1, // 热点大小（默认填1）
-        atv: 0, // 垂直方向（先随便填，尽量保证不相同）
-        ath: 0 // 水平方向（先随便填，尽量保证不相同）
+        atv: 1.0989889654889426, // 垂直方向（先随便填，尽量保证不相同）
+        ath: -26.77318032262508 // 水平方向（先随便填，尽量保证不相同）
       },
 
+      // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
+      locMore: {
+        top: '0%',
+        left: '0%'
+      },
       // 详细热点信息
       data: {
         //一级介绍，一段用 <p></p> 包起来
@@ -465,10 +493,15 @@ const myHotInfo = {
       // 全景视频和全景图的定位(不是全景图或者全景视频的---删掉)
       panoLoc: {
         size: 1, // 热点大小（默认填1）
-        atv: 30, // 垂直方向（先随便填，尽量保证不相同）
-        ath: 30 // 水平方向（先随便填，尽量保证不相同）
+        atv: -1.9785287066762725, // 垂直方向（先随便填，尽量保证不相同）
+        ath: -73.75902242635823 // 水平方向（先随便填，尽量保证不相同）
       },
 
+      // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
+      locMore: {
+        top: '0%',
+        left: '0%'
+      },
       // 详细热点信息
       data: {
         //一级介绍，一段用 <p></p> 包起来
@@ -519,10 +552,15 @@ const myHotInfo = {
       // 全景视频和全景图的定位(不是全景图或者全景视频的---删掉)
       panoLoc: {
         size: 1, // 热点大小（默认填1）
-        atv: 35, // 垂直方向（先随便填，尽量保证不相同）
-        ath: 35 // 水平方向（先随便填，尽量保证不相同）
+        atv: -2.9072297780840866, // 垂直方向（先随便填，尽量保证不相同）
+        ath: 67.00974751495619 // 水平方向（先随便填，尽量保证不相同）
       },
 
+      // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
+      locMore: {
+        top: '0%',
+        left: '0%'
+      },
       // 详细热点信息
       data: {
         //一级介绍，一段用 <p></p> 包起来
@@ -560,10 +598,15 @@ const myHotInfo = {
       // 全景视频和全景图的定位(不是全景图或者全景视频的---删掉)
       panoLoc: {
         size: 1, // 热点大小（默认填1）
-        atv: 40, // 垂直方向（先随便填，尽量保证不相同）
-        ath: 40 // 水平方向（先随便填，尽量保证不相同）
+        atv: -26.433547501800163, // 垂直方向（先随便填，尽量保证不相同）
+        ath: 31.59166318279955 // 水平方向（先随便填，尽量保证不相同）
       },
 
+      // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
+      locMore: {
+        top: '0%',
+        left: '0%'
+      },
       // 详细热点信息
       data: {
         //一级介绍，一段用 <p></p> 包起来
@@ -668,10 +711,15 @@ const myHotInfo = {
       // 全景视频和全景图的定位(不是全景图或者全景视频的---删掉)
       panoLoc: {
         size: 1, // 热点大小（默认填1）
-        atv: 45, // 垂直方向（先随便填，尽量保证不相同）
-        ath: 45 // 水平方向（先随便填，尽量保证不相同）
+        atv: -1.5022151786770521, // 垂直方向（先随便填，尽量保证不相同）
+        ath: 26.693402788858407 // 水平方向（先随便填，尽量保证不相同）
       },
 
+      // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
+      locMore: {
+        top: '0%',
+        left: '0%'
+      },
       // 详细热点信息
       data: {
         //一级介绍，一段用 <p></p> 包起来
@@ -706,10 +754,15 @@ const myHotInfo = {
       // 全景视频和全景图的定位(不是全景图或者全景视频的---删掉)
       panoLoc: {
         size: 1, // 热点大小（默认填1）
-        atv: 50, // 垂直方向（先随便填，尽量保证不相同）
-        ath: 50 // 水平方向（先随便填，尽量保证不相同）
+        atv: -24.52065773898652, // 垂直方向（先随便填，尽量保证不相同）
+        ath: -57.928319444042245 // 水平方向（先随便填，尽量保证不相同）
       },
 
+      // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
+      locMore: {
+        top: '0%',
+        left: '0%'
+      },
       // 详细热点信息
       data: {
         //一级介绍，一段用 <p></p> 包起来
@@ -824,10 +877,15 @@ const myHotInfo = {
       // 全景视频和全景图的定位(不是全景图或者全景视频的---删掉)
       panoLoc: {
         size: 1, // 热点大小（默认填1）
-        atv: 55, // 垂直方向（先随便填，尽量保证不相同）
-        ath: 55 // 水平方向（先随便填，尽量保证不相同）
+        atv: -3.5904750638868, // 垂直方向（先随便填，尽量保证不相同）
+        ath: -34.61738669043734 // 水平方向（先随便填，尽量保证不相同）
       },
 
+      // 热点定位百分比(更多模块的定位--不需要在更多模块中展示的---删掉)
+      locMore: {
+        top: '0%',
+        left: '0%'
+      },
       // 详细热点信息
       data: {
         //一级介绍，一段用 <p></p> 包起来
@@ -841,6 +899,7 @@ const myHotInfo = {
       }
     }
   ],
+
   周礼九拜: [
     {
       name: '周礼九拜',

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

@@ -44,13 +44,13 @@
       width: 34.6%;
       max-height: 200px;
       background-size: 100% 100%;
-      padding: 1%;
+      padding: 10px;
       background-color: rgba(242, 242, 215, 0.3);
       backdrop-filter: blur(4px);
       & > div {
         text-align: justify;
         width: 100%;
-        height: 100%;
+        max-height: 180px;
         color: #fffddc;
         font-size: 14px;
         letter-spacing: 3px;

Code/src/components/LazyImg/index.tsx

@@ -1,14 +1,21 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import styles from './index.module.scss'
 import { Image } from 'antd-mobile'
 
 type Props = {
   src: string
+  clickFu?: () => void
 }
 
-function LazyImg({ src }: Props) {
+function LazyImg({ src, clickFu }: Props) {
+  const imgClick = useCallback(() => {
+    if (clickFu) clickFu()
+  }, [clickFu])
+
   return (
     <Image
+      style={{ cursor: clickFu ? 'pointer' : 'default' }}
+      onClick={imgClick}
       className={styles.LazyImg}
       lazy
       src={src}

Code/src/components/Zhot/index.tsx

@@ -7,6 +7,8 @@ import classNames from 'classnames'
 import LazyImg from '../LazyImg'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
+import { ImageViewer } from 'antd-mobile'
+import { Image } from 'antd'
 
 type Props = {
   name: string
@@ -81,8 +83,32 @@ function Zhot({ name, closeFu }: Props) {
     }
   }, [acObj3.name, rootStyle.sizeH, rootStyle.sizeW])
 
+  // 查看图片
+  const [imgLook, setImgLook] = useState('')
+
   return (
     <div className={styles.Zhot} id='HotOpCss'>
+      {/* 移动端查看图片 */}
+      {isPc ? null : (
+        <ImageViewer
+          getContainer={document.querySelector('body')}
+          image={imgLook}
+          visible={!!imgLook}
+          onClose={() => setImgLook('')}
+        />
+      )}
+
+      {/* pc端查看图片 */}
+      {isPc && imgLook ? (
+        <Image
+          preview={{
+            visible: !!imgLook,
+            src: imgLook,
+            onVisibleChange: () => setImgLook('')
+          }}
+        />
+      ) : null}
+
       {/* 左边主体 */}
       <div className='ZHll'>
         {/* 标题 */}
@@ -99,7 +125,11 @@ function Zhot({ name, closeFu }: Props) {
               {info.data.imgArr1 && info.data.imgArr1.length ? (
                 <div className='ZHimgBox'>
                   {info.data.imgArr1.map(url => (
-                    <LazyImg src={baseURL + url} key={url} />
+                    <LazyImg
+                      clickFu={() => setImgLook(baseURL + url)}
+                      src={baseURL + url}
+                      key={url}
+                    />
                   ))}
                 </div>
               ) : null}
@@ -130,7 +160,11 @@ function Zhot({ name, closeFu }: Props) {
                     {acObj2.imgArr2 && acObj2.imgArr2.length ? (
                       <div className='ZHimgBox'>
                         {acObj2.imgArr2.map(url => (
-                          <LazyImg src={baseURL + url} key={url} />
+                          <LazyImg
+                            clickFu={() => setImgLook(baseURL + url)}
+                            src={baseURL + url}
+                            key={url}
+                          />
                         ))}
                       </div>
                     ) : null}
@@ -146,7 +180,11 @@ function Zhot({ name, closeFu }: Props) {
                 {acObj3.type === '图片' ? (
                   <div className='ZHimgBox'>
                     {acObj3.urlArr.map(url => (
-                      <LazyImg src={baseURL + url} key={url} />
+                      <LazyImg
+                        clickFu={() => setImgLook(baseURL + url)}
+                        src={baseURL + url}
+                        key={url}
+                      />
                     ))}
                   </div>
                 ) : null}

Code/src/components/Zhot/type.d.ts

@@ -42,6 +42,7 @@ export type HotSonType = {
 export type HotInfoType = {
   cheQi: HotRowType[]
   cheQi2: HotRowType[]
+  cheQiCove: HotRowType[]
   周礼九拜: {
     name: string
     tubiao: '普通' | '文物'

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

@@ -7,9 +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
@@ -37,7 +37,7 @@ function PanoVideo({ lodingOk }: Propr) {
   }, [lodingOk])
 
   const arrRes = useMemo(() => {
-    return [...hotInfo.cheQi, ...hotInfo.周礼九拜]
+    return [...hotInfo.cheQi]
   }, [])
 
   return (
@@ -68,7 +68,6 @@ function PanoVideo({ lodingOk }: Propr) {
               }
             }}
           >
-            {/* 待完善位置 */}
             <View hlookat={0} vlookat={0} fovType='MFOV' fov={120} fovMin={70} fovMax={130} />
             {arrRes.map((item, index) => (
               // 热点图标
@@ -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/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
@@ -42,7 +42,6 @@ function A22Pano({ setAcName }: Props) {
             ]}
           >
             <View hlookat={0} vlookat={0} fovType='MFOV' fov={120} fovMin={70} fovMax={130} />
-            {/* 待完善位置 */}
             {hotInfo.cheQi2.map((item, index) => (
               // 热点图标
               <HotSpot
@@ -59,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

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import { baseURL, myData } from '@/utils/http'
+import { baseURL, hotInfo, myData } from '@/utils/http'
 import NextPage from '@/components/NextPage'
 import FloorBtn from '@/components/FloorBtn'
 import { domDelOwnFu } from '@/utils/utilsSome'
@@ -13,6 +13,7 @@ import history from '@/utils/history'
 import { renClickPageFu } from '../B1more/data'
 import ZHot0 from '@/components/ZHot0'
 import Zhot from '@/components/Zhot'
+import HotIcon from '@/components/HotIcon'
 
 function A2visit2() {
   const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
@@ -97,6 +98,19 @@ function A2visit2() {
             ))}
           </div>
 
+          {/* 羊酒贺礼热点 */}
+          {hotInfo.cheQiCove.map((item, index) => (
+            <HotIcon
+              style={{ top: item.locPage.top, left: item.locPage.left }}
+              isModel={item.tubiao === '文物' ? true : false}
+              key={index}
+              index={index}
+              hoverSrc={item.hoverSrc}
+              clickSon={() => setAcName(item.name)}
+              isXiao={0.6}
+            />
+          ))}
+
           {loding >= 100 ? (
             // 进入院落
             <NextPage

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

@@ -1,11 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import { baseURL, myData } from '@/utils/http'
+import { baseURL, hotInfo, myData } from '@/utils/http'
 import classNames from 'classnames'
 import HotIcon from '@/components/HotIcon'
 import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
 import history from '@/utils/history'
 import ZHot0 from '@/components/ZHot0'
+import Zhot from '@/components/Zhot'
+import { HotRowType } from '@/components/Zhot/type'
 
 type Props = {
   hidden: boolean
@@ -18,58 +20,37 @@ const data1 = dataTemp['物']
 function S2mien({ hidden }: Props) {
   const sroolDomRef = useRef<HTMLDivElement>(null)
 
-  // 选中的索引
-  const [hotInd, setHotInd] = useState(-1)
+  // 打开热点
+  const [acName, setAcName] = useState('')
 
-  // 打开热点的索引
-  const [opnInd, setOpenInd] = useState(-1)
-
-  // 从热点图标子组件点击
-  const clickSon = useCallback((index: number) => {
-    const name = data1.hot[index].name
-    // 打开热点  / 跳云起图页面
-    if (name === '四神云气图') history.push('/yun')
-    else 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' })
-      }
+  // 所有热点信息
+  const hotArr = useMemo(() => {
+    const arr: HotRowType[] = []
+    for (const k in hotInfo) {
+      hotInfo[k as 'cheQi'].forEach(v => {
+        arr.push(v)
+      })
     }
-  }, [hotInd])
-
-  const hotName = useMemo(() => {
-    let name = ''
-    if (opnInd > -1 && data1.hot[opnInd]) name = data1.hot[opnInd].name
-
-    return name
-  }, [opnInd])
+    return arr
+  }, [])
 
   return (
     <div
       hidden={hidden}
       className={styles.S2mien}
-      style={{ backgroundImage: `url(${baseURL + data1.bg})`, zIndex: opnInd > -1 ? 50 : 1 }}
+      style={{ backgroundImage: `url(${baseURL + data1.bg})`, zIndex: acName ? 50 : 1 }}
     >
       {/* 左侧 */}
       <div
         className='S2left'
-        style={{ backgroundImage: `url(${baseURL}more/s1Zhe.png)`, opacity: opnInd > -1 ? 0 : 1 }}
+        style={{ backgroundImage: `url(${baseURL}more/s1Zhe.png)`, opacity: acName ? 0 : 1 }}
       >
         {/* 物----------- */}
         <div ref={sroolDomRef} className='S2leftMain'>
-          {data1.hot.map((item, index) => (
+          {hotArr.map((item, index) => (
             <div
-              onClick={() => clickSon(index)}
-              className={classNames('S2leftRow', hotInd === index ? 'S2leftRowAc' : '')}
+              onClick={() => setAcName(item.name)}
+              className={classNames('S2leftRow', acName === item.name ? 'S2leftRowAc' : '')}
               // onMouseUp={() => setHotInd(index)}
               key={index}
             >
@@ -82,21 +63,21 @@ function S2mien({ hidden }: Props) {
       {/* 物-----------右侧 */}
       <div className='S2right'>
         {/* 热点图标 */}
-        {data1.hot.map((item, index) => (
+        {hotArr.map((item, index) => (
           <HotIcon
-            isModel={item.isModel ? true : false}
+            isModel={item.tubiao === '文物' ? true : false}
             key={index}
             index={index}
-            clickSon={val => clickSon(val)}
+            clickSon={() => setAcName(item.name)}
             hoverSrc={item.hoverSrc}
             style={{
-              top: item.loc.top,
-              left: item.loc.left
+              top: item.locMore.top,
+              left: item.locMore.left
             }}
             zIndex={item.zIndex}
             // 这个模块特有的参数
-            hoverFu={val => setHotInd(val)}
-            isHoverAc={hotInd === index}
+            // hoverFu={val => setHotInd(val)}
+            // isHoverAc={hotInd === index}
             // isZhan={true}
             isXiao={0.6}
             // isXiao={isPc ? 0.6 : 0}
@@ -105,11 +86,11 @@ function S2mien({ hidden }: Props) {
       </div>
 
       {/* 打开热点页面 */}
-      {opnInd > -1 ? (
-        hotName === '周礼九拜' ? (
-          <ZHot0 closeFu={() => setOpenInd(-1)} />
+      {acName ? (
+        acName === '周礼九拜' ? (
+          <ZHot0 closeFu={() => setAcName('')} />
         ) : (
-          <Hot2 data={data1.hot[opnInd].data} closeFu={() => setOpenInd(-1)} name={hotName} />
+          <Zhot name={acName} closeFu={() => setAcName('')} />
         )
       ) : null}
     </div>