upp

Code/public/myData/hot.js

@@ -196,5 +196,123 @@ 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/src/components/ZHot0/index.module.scss

@@ -0,0 +1,161 @@
+.ZHot0 {
+  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/components/ZHot0/index.tsx

@@ -0,0 +1,121 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import styles from './index.module.scss'
+import classNames from 'classnames'
+import LazyImg from '@/components/LazyImg'
+import { baseURL, hotInfo } from '@/utils/http'
+import BtnRight from '@/components/BtnRight'
+
+type Props = {
+  closeFu: () => void
+}
+
+function ZHot0({ closeFu }: 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 hotInfo['周礼九拜'][0].data[flooInd] || []
+  }, [flooInd])
+
+  return (
+    <div
+      id='HotOpCss'
+      className={styles.ZHot0}
+      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)` }}>
+          {hotInfo['周礼九拜'][0].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 MemoZHot0 = React.memo(ZHot0)
+
+export default MemoZHot0

Code/src/components/Zhot/index.tsx

@@ -62,21 +62,21 @@ function Zhot({ name, closeFu }: Props) {
 
   useEffect(() => {
     if (acObj3.name) {
+      // 模型重定义尺寸
+      const dom = document.querySelector('.H2model')
+      if (dom) {
+        setModelSize({
+          ww: Number((dom.clientWidth * rootStyle.sizeW).toFixed(2)),
+          hh: Number((dom.clientHeight * rootStyle.sizeH).toFixed(2)),
+          wwB: dom.clientWidth,
+          hhB: dom.clientHeight
+        })
+      }
+
       setTimeout(() => {
         // 移动到顶部
         const sroolDom: HTMLDivElement = document.querySelector('.ZH1main1Son')!
         if (sroolDom) sroolDom.scrollTop = 0
-
-        // 模型重定义尺寸
-        const dom = document.querySelector('.H2model')
-        if (dom) {
-          setModelSize({
-            ww: Number((dom.clientWidth * rootStyle.sizeW).toFixed(2)),
-            hh: Number((dom.clientHeight * rootStyle.sizeH).toFixed(2)),
-            wwB: dom.clientWidth,
-            hhB: dom.clientHeight
-          })
-        }
       }, 100)
     }
   }, [acObj3.name, rootStyle.sizeH, rootStyle.sizeW])

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

@@ -41,4 +41,24 @@ export type HotSonType = {
 
 export type HotInfoType = {
   cheQi: HotRowType[]
+  周礼九拜: {
+    name: string
+    tubiao: '普通' | '文物'
+    zIndex: number
+    hoverSrc: string
+    panoLoc: {
+      size: number
+      atv: number
+      ath: number
+    }
+    locMore: {
+      top: string
+      left: string
+    }
+    data: {
+      name: string
+      txt: string
+      imgArr: string[]
+    }[]
+  }[]
 }

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

@@ -1,11 +1,11 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import Hot1 from './Hot1'
-import Hot2 from './Hot2'
-import { otherUrl, myData } from '@/utils/http'
+import { otherUrl, hotInfo } from '@/utils/http'
 import HotIcon from '@/components/HotIcon'
 import { HotSpot, Krpano, VideoScene, videoSceneModel, View } from '@dage/krpano'
 import { KrpanoMiddleware, KrpanoMiddlewareMethods } from '@/components/KrpanoMiddleware'
+import ZHot0 from '@/components/ZHot0'
+import Zhot from '@/components/Zhot'
 
 // window.draggbleHotspotEvent = (ath: number, atv: number) => {
 //   console.log(`ath: ${ath}, atv: ${atv}`)
@@ -16,16 +16,12 @@ type Propr = {
 }
 
 function PanoVideo({ lodingOk }: Propr) {
-  // 0为 第一种模式的热点 其他为第二种
-  const [ind, setInd] = useState(-1)
+  // 热点名字-打开热点
+  const [acName, setAcName] = useState('')
+
   const [activeIdx, setActiveIdx] = useState(-1)
   const middlewareIns = useRef<KrpanoMiddlewareMethods>(null)
 
-  const data = useMemo(() => {
-    if (ind !== -1) return myData.visit.hot[ind].data
-    else return []
-  }, [ind])
-
   useEffect(() => {
     const readyEvent = videoSceneModel.event.on('Event.videoScene.play', () => {
       console.log('加载完成')
@@ -40,6 +36,10 @@ function PanoVideo({ lodingOk }: Propr) {
     }
   }, [lodingOk])
 
+  const arrRes = useMemo(() => {
+    return [...hotInfo.cheQi, ...hotInfo.周礼九拜]
+  }, [])
+
   return (
     <>
       <KrpanoMiddleware ref={middlewareIns}>
@@ -68,27 +68,28 @@ function PanoVideo({ lodingOk }: Propr) {
               }
             }}
           >
+            {/* 待完善位置 */}
             <View hlookat={0} vlookat={0} fovType='MFOV' fov={120} fovMin={70} fovMax={130} />
-            {myData.visit.hot.map((item, index) => (
+            {arrRes.map((item, index) => (
               // 热点图标
               <HotSpot
                 key={index}
                 type='text'
                 name={item.name}
-                atv={item.atv}
-                ath={item.ath}
+                atv={item.panoLoc.atv}
+                ath={item.panoLoc.ath}
                 edge='top'
                 distorted={true}
-                scale={item.size}
+                scale={item.panoLoc.size}
                 bg={false}
                 onOver={() => setActiveIdx(index)}
                 onOut={() => setActiveIdx(-1)}
-                onClick={() => setInd(index)}
+                onClick={() => setAcName(item.name)}
                 // @ts-ignore
                 // onDown='draggable_hotspot()'
               >
                 <HotIcon
-                  isModel={item.isModel ? true : false}
+                  isModel={item.tubiao === '文物' ? true : false}
                   key={index}
                   index={index}
                   isHoverAc={activeIdx === index}
@@ -101,11 +102,13 @@ function PanoVideo({ lodingOk }: Propr) {
         </Krpano>
       </KrpanoMiddleware>
 
-      {ind === -1 ? null : ind === 0 ? (
-        <Hot1 data={data} closeFu={() => setInd(-1)} />
-      ) : (
-        <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.visit.hot[ind].name} />
-      )}
+      {acName ? (
+        acName === '周礼九拜' ? (
+          <ZHot0 closeFu={() => setAcName('')} />
+        ) : (
+          <Zhot name={acName} closeFu={() => setAcName('')} />
+        )
+      ) : null}
     </>
   )
 }