改不动了

Code/src/App.tsx

@@ -46,7 +46,7 @@ declare global {
   interface Window {
     //window对象属性
     isHH: boolean //加入对象
-    unityOpenHot: (index: number) => void
+    unityOpenHot: (name: string) => void
     unityBack: () => void
   }
 }

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

@@ -9,10 +9,13 @@
   z-index: 9999;
   display: flex;
   :global {
+    p {
+      text-align: justify;
+    }
     .ZHll {
       width: 60%;
       height: 100%;
-      padding: 3% 3% 1% 3%;
+      padding: 2% 3% 1% 3%;
       // 标题
       .h2Titele {
         padding: 0 50px;
@@ -149,7 +152,7 @@
           position: absolute;
           bottom: 0;
           left: 0;
-          width: 100%;
+          width: calc(100% + 200px);
           height: 46px;
           display: flex;
           align-items: center;

Code/src/pages/A2visit/PanoVideo/Hot1/index.module.scss

@@ -1,161 +0,0 @@
-.Hot1 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 20;
-  background-size: 100% 100%;
-  transition: all 0.3s;
-  padding: 6% 12% 4% 12%;
-  background-color: rgba(0, 0, 0, 0.6);
-  :global {
-    .hot1Box {
-      width: 100%;
-      height: 100%;
-      position: relative;
-      // 主体
-      .hot1Main {
-        display: flex;
-        justify-content: space-between;
-        height: calc(100% - 55px);
-        & > div {
-          width: 48%;
-        }
-        .h1Mll {
-          overflow: hidden;
-          border: 1px solid #eacf60;
-          position: relative;
-
-          // 左右箭头
-          .h1MllIcon {
-            width: 20px;
-            position: absolute;
-            z-index: 10;
-            top: 50%;
-            transform: translateY(-50%);
-            cursor: pointer;
-            left: 5%;
-          }
-
-          .h1Mllyou {
-            left: auto;
-            right: 5%;
-          }
-
-          .h1MllCo {
-            height: 100%;
-            display: flex;
-            transition: transform 0.3s;
-          }
-
-          .h1MllRow {
-            height: 100%;
-            display: flex;
-            align-items: center;
-            padding: 10px;
-
-            .adm-image {
-              width: 100%;
-              height: 100%;
-              border: 1px solid #eacf60;
-              img {
-                width: 100%;
-                height: 100%;
-                object-fit: cover !important;
-              }
-            }
-          }
-        }
-        .h1Mrr {
-          height: 96%;
-          overflow-y: auto;
-          position: relative;
-          padding-bottom: 15px;
-          &::-webkit-scrollbar {
-            display: none;
-          }
-
-          .h1MrrTxt {
-            position: absolute;
-            top: 50%;
-            left: 0;
-            width: 100%;
-            transform: translateY(-50%);
-            max-height: 100%;
-
-            & > h1 {
-              color: #eacf60;
-              font-size: 40px;
-              font-weight: 400;
-              margin-bottom: 1%;
-            }
-            & > div {
-              color: #fffddc;
-            }
-            h3 {
-              font-size: 18px;
-              font-weight: 400;
-            }
-            h2 {
-              font-size: 20px;
-              font-weight: 400;
-            }
-            p {
-              font-size: 16px;
-            }
-          }
-        }
-      }
-
-      // 返回按钮
-      #BtnRight {
-        z-index: 10;
-        top: 0;
-        right: -40px;
-        width: 36px;
-        height: 36px;
-      }
-
-      // 底部
-      .h1Floo {
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 80%;
-        height: 34px;
-        background-size: 100% 100%;
-        border-radius: 4px;
-        display: flex;
-        .h1FlooRow {
-          cursor: pointer;
-          flex: 1;
-          font-size: 16px;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          color: #fffddc;
-          opacity: 0.8;
-        }
-        .h1FlooRowShow {
-          font-weight: 700;
-          opacity: 1;
-          color: #eacf60;
-          position: relative;
-        }
-        .h1FlooRowShowImg {
-          max-width: 1000px;
-          height: 180%;
-          width: auto;
-          position: absolute;
-          left: 46%;
-          top: 54%;
-          transform: translate(-50%, -50%);
-          max-height: 70px;
-        }
-      }
-    }
-  }
-}

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

@@ -1,123 +0,0 @@
-import React, { useCallback, useMemo, useState } from 'react'
-import styles from './index.module.scss'
-import { VisitHotDataType } from '@/types'
-import classNames from 'classnames'
-import LazyImg from '@/components/LazyImg'
-import { baseURL } from '@/utils/http'
-import BtnRight from '@/components/BtnRight'
-
-type Props = {
-  closeFu: () => void
-  data: VisitHotDataType
-}
-
-function Hot1({ closeFu, data }: Props) {
-  // 底部选中
-  const [flooInd, setFlooInd] = useState(0)
-
-  // 点击切换底部
-  const flooIndFu = useCallback((ind: number) => {
-    setImgAc(0)
-    const dom = document.querySelector('.h1Mrr')
-    if (dom) dom.scrollTop = 0
-    setFlooInd(ind)
-  }, [])
-
-  // 图片切换
-  const [imgAc, setImgAc] = useState(0)
-
-  const acData = useMemo(() => {
-    return data[flooInd] || []
-  }, [data, flooInd])
-
-  return (
-    <div
-      id='HotOpCss'
-      className={styles.Hot1}
-      style={{
-        backgroundImage: `url(${baseURL}visit/hot1bj.png)`
-      }}
-    >
-      <div className='hot1Box'>
-        {/* 主体 */}
-        <div className='hot1Main'>
-          {/* 左边 */}
-          <div className='h1Mll'>
-            {/* 左右箭头 */}
-            <img
-              onClick={() => setImgAc(imgAc - 1)}
-              hidden={acData.imgArr.length <= 1}
-              style={{
-                opacity: imgAc === 0 ? 0.5 : 1,
-                pointerEvents: imgAc === 0 ? 'none' : 'auto'
-              }}
-              className='h1MllIcon'
-              src={`${baseURL}visit/icon-zuo-red.png`}
-              alt=''
-            />
-            <img
-              onClick={() => setImgAc(imgAc + 1)}
-              hidden={acData.imgArr.length <= 1}
-              style={{
-                opacity: imgAc === acData.imgArr.length - 1 ? 0.5 : 1,
-                pointerEvents: imgAc === acData.imgArr.length - 1 ? 'none' : 'auto'
-              }}
-              className='h1MllIcon h1Mllyou'
-              src={`${baseURL}visit/icon-you-red.png`}
-              alt=''
-            />
-
-            <div
-              className='h1MllCo'
-              style={{
-                transform: `translateX(-${(100 / acData.imgArr.length) * imgAc}%)`,
-                width: `${100 * acData.imgArr.length}%`
-              }}
-            >
-              {acData.imgArr.map((url, index) => (
-                <div
-                  className='h1MllRow'
-                  key={index}
-                  style={{ width: 100 / acData.imgArr.length + '%' }}
-                >
-                  <LazyImg src={baseURL + url} />
-                </div>
-              ))}
-            </div>
-          </div>
-          {/* 右边 */}
-          <div className='h1Mrr'>
-            <div className='h1MrrTxt'>
-              <h1>{acData.name}</h1>
-              <div dangerouslySetInnerHTML={{ __html: acData.txt }}></div>
-            </div>
-          </div>
-
-          {/* 返回按钮 */}
-          <BtnRight imgName='back' clickSon={() => closeFu()} title='返回' />
-        </div>
-
-        {/* 底部 */}
-        <div className='h1Floo' style={{ backgroundImage: `url(${baseURL}visit/h1fllo.png)` }}>
-          {data.map((item, index) => (
-            <div
-              onClick={() => flooIndFu(index)}
-              className={classNames('h1FlooRow sizeNo', flooInd === index ? 'h1FlooRowShow' : '')}
-              key={index}
-            >
-              {item.name}
-
-              {flooInd === index ? (
-                <img className='h1FlooRowShowImg' src={`${baseURL}visit/bichuyuan.png`} alt='' />
-              ) : null}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const MemoHot1 = React.memo(Hot1)
-
-export default MemoHot1

Code/src/pages/A2visit2/index.tsx

@@ -10,8 +10,8 @@ import A22Pano from './A22Pano'
 import BtnRight from '@/components/BtnRight'
 import classNames from 'classnames'
 import history from '@/utils/history'
-import Hot1 from '../A2visit/PanoVideo/Hot1'
 import { renClickPageFu } from '../B1more/data'
+import ZHot0 from '@/components/ZHot0'
 
 function A2visit2() {
   const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
@@ -268,7 +268,7 @@ function A2visit2() {
         delDom='.A22Pano'
       />
 
-      {hotShow ? <Hot1 data={myData.visit.hot[0].data} closeFu={() => setHotShow(false)} /> : null}
+      {hotShow ? <ZHot0 closeFu={() => setHotShow(false)} /> : null}
     </div>
   )
 }

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

@@ -4,8 +4,8 @@ import { baseURL, myData } from '@/utils/http'
 import classNames from 'classnames'
 import HotIcon from '@/components/HotIcon'
 import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
-import Hot1 from '@/pages/A2visit/PanoVideo/Hot1'
 import history from '@/utils/history'
+import ZHot0 from '@/components/ZHot0'
 
 type Props = {
   hidden: boolean
@@ -107,7 +107,7 @@ function S2mien({ hidden }: Props) {
       {/* 打开热点页面 */}
       {opnInd > -1 ? (
         hotName === '周礼九拜' ? (
-          <Hot1 data={data1.hot[opnInd].data} closeFu={() => setOpenInd(-1)} />
+          <ZHot0 closeFu={() => setOpenInd(-1)} />
         ) : (
           <Hot2 data={data1.hot[opnInd].data} closeFu={() => setOpenInd(-1)} name={hotName} />
         )

Code/src/pages/C1unity/index.tsx

@@ -3,9 +3,10 @@ import styles from './index.module.scss'
 import { useParams } from 'react-router-dom'
 import { isPc, myData, otherUrl } from '@/utils/http'
 import { VisitHotDataType } from '@/types'
-import Hot1 from '../A2visit/PanoVideo/Hot1'
 import Hot2 from '../A2visit/PanoVideo/Hot2'
 import history from '@/utils/history'
+import ZHot0 from '@/components/ZHot0'
+import Zhot from '@/components/Zhot'
 
 const obj = {
   1: {
@@ -31,18 +32,18 @@ function C1unity() {
 
     const temp = Reflect.get(obj, urlObj.id)
 
-    console.log(123, temp)
+    // console.log(123, temp)
 
     const res = Reflect.get(temp, isPc ? 'pc' : 'mo')
 
     setUrl(`${otherUrl + res}?T=${Date.now()}`)
 
     // 注册
-    window.unityOpenHot = (index: number) => {
+    window.unityOpenHot = name => {
       const rootDom: HTMLDivElement = document.querySelector('#root')!
       if (rootDom) rootDom.style.zIndex = '3'
       // 打开热点
-      setInd(Number(index))
+      setAcName(name)
     }
 
     window.unityBack = () => {
@@ -52,19 +53,8 @@ function C1unity() {
     }
   }, [urlObj.id])
 
-  // 打开热点的索引
-  const [ind, setInd] = useState(-1)
-
-  const data = useMemo(() => {
-    let arr: VisitHotDataType = []
-    if (ind !== -1) {
-      const data1 = myData.visit.hot
-      const data2 = myData.banquet.hot
-      arr = urlId === '1' ? data1[ind].data : data2[ind].data
-    }
-
-    return arr
-  }, [ind, urlId])
+  // 热点名字-打开热点
+  const [acName, setAcName] = useState('')
 
   useEffect(() => {
     if (url && isPc) {
@@ -90,26 +80,26 @@ function C1unity() {
         <iframe className='C1unity' frameBorder='none' title='漫游' src={url}></iframe>
       ) : null}
 
-      {ind === -1 ? null : ind === 0 && urlId === '1' ? (
-        <Hot1
-          data={data}
-          closeFu={() => {
-            const rootDom: HTMLDivElement = document.querySelector('#root')!
-            if (rootDom) rootDom.style.zIndex = '1'
-            setInd(-1)
-          }}
-        />
-      ) : (
-        <Hot2
-          data={data}
-          closeFu={() => {
-            const rootDom: HTMLDivElement = document.querySelector('#root')!
-            if (rootDom) rootDom.style.zIndex = '1'
-            setInd(-1)
-          }}
-          name={myData[urlId === '1' ? 'visit' : 'banquet'].hot[ind].name}
-        />
-      )}
+      {acName ? (
+        acName === '周礼九拜' ? (
+          <ZHot0
+            closeFu={() => {
+              const rootDom: HTMLDivElement = document.querySelector('#root')!
+              if (rootDom) rootDom.style.zIndex = '1'
+              setAcName('')
+            }}
+          />
+        ) : (
+          <Zhot
+            name={acName}
+            closeFu={() => {
+              const rootDom: HTMLDivElement = document.querySelector('#root')!
+              if (rootDom) rootDom.style.zIndex = '1'
+              setAcName('')
+            }}
+          />
+        )
+      ) : null}
     </div>
   )
 }