up

Code/public/myData/myData.js

@@ -3,7 +3,7 @@ window.isHH = document.documentElement.clientWidth >= document.documentElement.c
 const isPcTemp = document.documentElement.clientWidth >= 1200
 
 // 本地开发静态资源目录
-const baseUrlLoc = 'http://localhost:8080/staticData/'
+const baseUrlLoc = 'http://192.168.20.55:8080/staticData/'
 
 // Build开发资源目录
 const baseUrlAtl = 'https://houseoss.4dkankan.com/project/henan/staticData/'
@@ -1074,8 +1074,7 @@ const myDataTemp = {
         showImg: 'chef/show1.png',
         // 里面展示的文本
         txt: `
-        <p>将处理好的肉，按用途切割成条状、块状或薄片，</p>
-        <p>且常依照礼制或饮食习惯进行处理。</p>
+        <p>将猪剖开，处理掉内脏、血液等部分，然后将猪肉按部位分割。</p>
         `,
         // 热点定位百分比
         loc: {
@@ -1094,8 +1093,7 @@ const myDataTemp = {
         showImg: 'chef/show2.png',
         // 里面展示的文本
         txt: `
-        <p>割肉割肉将处理好的肉，按用途切割成条状、块状或薄片，</p>
-        <p>且常依照礼制或饮食习惯进行处理。</p>
+        <p>将处理好的肉，按用途切割成条状、块状或薄片，且常依照礼制或饮食习惯进行处理。</p>
         `,
         // 热点定位百分比
         loc: {
@@ -1114,8 +1112,7 @@ const myDataTemp = {
         showImg: 'chef/show3.png',
         // 里面展示的文本
         txt: `
-        <p>淘洗淘洗将处理好的肉，按用途切割成条状、块状或薄片，</p>
-        <p>且常依照礼制或饮食习惯进行处理。</p>
+        <p>对米、蔬菜或食材进行清洗，通常在井边或水源附近进行。</p>
         `,
         // 热点定位百分比
         loc: {
@@ -1134,8 +1131,7 @@ const myDataTemp = {
         showImg: 'chef/show4.png',
         // 里面展示的文本
         txt: `
-        <p>烧灶烧灶将处理好的肉，按用途切割成条状、块状或薄片，</p>
-        <p>且常依照礼制或饮食习惯进行处理。</p>
+        <p>通常以土灶，用木柴或炭火进行烧灶，火候控制依赖经验，能够达到不同的烹调效果。</p>
         `,
         // 热点定位百分比
         loc: {
@@ -1154,8 +1150,7 @@ const myDataTemp = {
         showImg: 'chef/show5.png',
         // 里面展示的文本
         txt: `
-        <p>劈柴劈柴劈柴劈柴劈柴劈柴，</p>
-        <p>劈柴劈柴劈柴劈柴劈柴。</p>
+        <p>使用斧头将木材劈成适合燃烧的小块或木片，作为烹饪或取暖的燃料。</p>
         `,
         // 热点定位百分比
         loc: {

Code/src/assets/styles/base.css

@@ -204,4 +204,5 @@ textarea {
   z-index: 99;
   width: 100vw;
   height: 100vh;
+  z-index: 2;
 }

Code/src/assets/styles/base.less

@@ -250,4 +250,5 @@ textarea {
   z-index: 99;
   width: 100vw;
   height: 100vh;
+  z-index: 2;
 }

Code/src/components/KrpanoMiddleware.tsx

@@ -1,68 +1,76 @@
-import { FC, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
-import { useSelector } from "react-redux";
-
-export interface KrpanoMiddlewareProps {
-  children: React.ReactNode;
-}
-
-export interface KrpanoMiddlewareMethods {
-  ready: () => void;
-}
-
-export const KrpanoMiddleware = forwardRef<KrpanoMiddlewareMethods, KrpanoMiddlewareProps>(({ children }, ref) => {
-  const isHH = useSelector((state: any) => state.A0Layout.isHH)
-  const fakeEvent = useMemo(() => !isHH && /Mobi|Android|iPhone/i.test(navigator.userAgent), [isHH])
-  const startX = useRef(0);
-  const startY = useRef(0);
-
-  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
-    if (!fakeEvent) return
-    const touch = e.touches[0]
-    startX.current = touch.clientX
-    startY.current = touch.clientY
-  }
-  const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
-    if (!fakeEvent) return
-    const touch = e.touches[0]
-    const deltaX = touch.clientX - startX.current
-    const deltaY = touch.clientY - startY.current
-
-    const krpano = window.ReactKrpanoActionProxy
-    if (krpano) {
-      const currentHlookat = krpano.get("view.hlookat")
-      const currentVlookat = krpano.get("view.vlookat")
-
-      const newHlookat = currentHlookat - deltaY * 0.1
-      const newVlookat = currentVlookat + deltaX * 0.1
-
-      krpano.set("view.hlookat", newHlookat)
-      krpano.set("view.vlookat", newVlookat)
-    }
-
-    startX.current = touch.clientX
-    startY.current = touch.clientY
-  }
-
-  useImperativeHandle(ref, () => ({
-    ready: () => {
-      if (fakeEvent) {
-        window.ReactKrpanoActionProxy?.krpanoRenderer?.call("set(control.usercontrol, 'off');")
-      }
-    }
-  }))
-
-  useEffect(() => {
-    if (window.ReactKrpanoActionProxy?.krpanoRenderer) {
-      window.ReactKrpanoActionProxy?.krpanoRenderer?.call(`set(control.usercontrol, '${fakeEvent ? 'off' : 'all'}');`)
-    }
-  }, [fakeEvent])
-
-  return (
-    <div style={{width: '100%', height: '100%'}}
-      onTouchStart={handleTouchStart}
-      onTouchMove={handleTouchMove}
-    >
-      {children}
-    </div>
-  )
-})
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
+import { useSelector } from 'react-redux'
+
+export interface KrpanoMiddlewareProps {
+  children: React.ReactNode
+}
+
+export interface KrpanoMiddlewareMethods {
+  ready: () => void
+}
+
+export const KrpanoMiddleware = forwardRef<KrpanoMiddlewareMethods, KrpanoMiddlewareProps>(
+  ({ children }, ref) => {
+    const isHH = useSelector((state: any) => state.A0Layout.isHH)
+    const fakeEvent = useMemo(
+      () => !isHH && /Mobi|Android|iPhone/i.test(navigator.userAgent),
+      [isHH]
+    )
+    const startX = useRef(0)
+    const startY = useRef(0)
+
+    const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
+      if (!fakeEvent) return
+      const touch = e.touches[0]
+      startX.current = touch.clientX
+      startY.current = touch.clientY
+    }
+    const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
+      if (!fakeEvent) return
+      const touch = e.touches[0]
+      const deltaX = touch.clientX - startX.current
+      const deltaY = touch.clientY - startY.current
+
+      const krpano = window.ReactKrpanoActionProxy
+      if (krpano) {
+        const currentHlookat = krpano.get('view.hlookat')
+        const currentVlookat = krpano.get('view.vlookat')
+
+        const newHlookat = currentHlookat - deltaY * 0.1
+        const newVlookat = currentVlookat + deltaX * 0.1
+
+        krpano.set('view.hlookat', newHlookat)
+        krpano.set('view.vlookat', newVlookat)
+      }
+
+      startX.current = touch.clientX
+      startY.current = touch.clientY
+    }
+
+    useImperativeHandle(ref, () => ({
+      ready: () => {
+        if (fakeEvent) {
+          window.ReactKrpanoActionProxy?.krpanoRenderer?.call("set(control.usercontrol, 'off');")
+        }
+      }
+    }))
+
+    useEffect(() => {
+      if (window.ReactKrpanoActionProxy?.krpanoRenderer) {
+        window.ReactKrpanoActionProxy?.krpanoRenderer?.call(
+          `set(control.usercontrol, '${fakeEvent ? 'off' : 'all'}');`
+        )
+      }
+    }, [fakeEvent])
+
+    return (
+      <div
+        style={{ width: '100%', height: '100%' }}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+      >
+        {children}
+      </div>
+    )
+  }
+)

Code/src/components/NextPage/index.tsx

@@ -12,8 +12,7 @@ function NextPage({ clickSon, txt }: Props) {
     <div className={styles.NextPage}>
       <div className='NPdiv' onClick={clickSon}>
         {txt}
-        {/* @ts-ignore */}
-        <ArrowRightOutlined />
+        <ArrowRightOutlined rev={undefined} />
       </div>
     </div>
   )

Code/src/pages/A2visit/index.tsx

@@ -60,7 +60,8 @@ function A2visit() {
           <NextPage clickSon={() => setLastVideo(true)} txt='行拜谒礼' />
 
           {/* 右下角按钮 */}
-          <FloorBtn unityId='1' />
+          {/* <FloorBtn unityId='1' /> */}
+          <FloorBtn />
         </div>
       ) : null}
 

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

@@ -53,6 +53,9 @@
           pointer-events: none;
           transition: opacity 1s;
           background-size: 100% 100%;
+          #BtnRight {
+            bottom: 70px;
+          }
         }
         .A5chuShow {
           opacity: 1;

Code/src/pages/A5chef/index.tsx

@@ -104,7 +104,10 @@ function A5chef() {
 
             {/* 后厨群像 */}
             <div
-              style={{ backgroundImage: `url(${baseURL}chef/houChu.jpg)` }}
+              style={{
+                backgroundImage: `url(${baseURL}chef/houChu.jpg)`,
+                zIndex: chuShow ? 30 : 1
+              }}
               className={classNames('A5chu', chuShow ? 'A5chuShow' : '')}
             >
               {/* 返回按钮 */}

Code/src/pages/A6plow/index.tsx

@@ -146,7 +146,7 @@ function A6plow() {
           </div>
 
           {/* 跳到下一章 */}
-          <NextPage clickSon={() => setLastVideo(true)} txt='结束宴饮' />
+          <NextPage clickSon={() => setLastVideo(true)} txt='结束' />
           {/* 右下角按钮 */}
           <FloorBtn />
         </div>

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

@@ -1,6 +1,11 @@
 .B1more {
   position: relative;
   :global {
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+    }
     // 底部三个按钮
     .A6floorBox {
       position: absolute;
@@ -80,15 +85,26 @@
       opacity: 0;
       pointer-events: none;
       // transition: all 1s;
-      video {
-        width: 100%;
-        height: 100%;
-        object-fit: fill;
-      }
     }
     .A6videoBoxShow {
       opacity: 1;
       pointer-events: auto;
     }
+
+    // 左下角按钮
+    .A1LeftVideoBtn {
+      position: absolute;
+      z-index: 10;
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+      bottom: 15px;
+      left: 20px;
+    }
+    #BtnRight {
+      top: 50%;
+      bottom: auto;
+      transform: translateY(-50%);
+    }
   }
 }

Code/src/pages/B1more/index.tsx

@@ -10,6 +10,7 @@ import S3goods from './S3goods'
 import BtnRight from '@/components/BtnRight'
 import useLoding from '@/components/ownUse/useLoding'
 import { domDelOwnFu } from '@/utils/utilsSome'
+import VideoModel from '@/components/VideoModel'
 
 const videoObj = {
   探索庄园: {
@@ -70,6 +71,9 @@ function B1more() {
   // 先加载背景图 序列帧等 在加载视频
   const { imgNow, imgNumFu } = useLoding(1)
 
+  // 点击左下角按钮
+  const [leftVideo, setLeftVideo] = useState(false)
+
   return (
     <div className={styles.B1more}>
       {/* 三个主要页面 */}
@@ -147,11 +151,29 @@ function B1more() {
 
       {/* 右下角的图标 */}
       {imgNow ? (
-        <div className='A6rBtn' style={{ opacity: isLoding ? 0 : 1, zIndex: videoSrc ? 10 : 30 }}>
+        <div
+          hidden={leftVideo}
+          className='A6rBtn'
+          style={{ opacity: isLoding ? 0 : 1, zIndex: videoSrc ? 10 : 30 }}
+        >
           <div className='A6rBtn1' title='陶庄园' onClick={() => history.push('/unend')}></div>
           <div className='A6rBtn2' title='仙居世界' onClick={() => history.push('/hots')}></div>
         </div>
       ) : null}
+
+      {/* 左下角播放按钮 */}
+      <div onClick={() => setLeftVideo(true)} className={classNames('A1LeftVideoBtn hoverD')}>
+        <img src={`${baseURL}home/icon-play.png`} alt='' />
+      </div>
+
+      {/* 左下角视频 */}
+      {imgNow ? (
+        <VideoModel
+          isShow={leftVideo}
+          src={baseURL + myData.home.leftVideo}
+          closeFu={() => setLeftVideo(false)}
+        />
+      ) : null}
     </div>
   )
 }

Code/src/pages/C1unity/index.tsx

@@ -6,7 +6,6 @@ import { VisitHotDataType } from '@/types'
 import Hot1 from '../A2visit/PanoVideo/Hot1'
 import Hot2 from '../A2visit/PanoVideo/Hot2'
 import history from '@/utils/history'
-import BtnRight from '@/components/BtnRight'
 
 const obj = {
   1: {
@@ -38,6 +37,8 @@ function C1unity() {
 
     // 注册
     window.unityOpenHot = (index: number) => {
+      const rootDom: HTMLDivElement = document.querySelector('#root')!
+      if (rootDom) rootDom.style.zIndex = '3'
       // 打开热点
       setInd(Number(index))
     }
@@ -65,8 +66,7 @@ function C1unity() {
   }, [ind, urlId])
 
   useEffect(() => {
-    if (url) {
-      // 待完善
+    if (url && isPc) {
       const body = document.querySelector('body')
       const iframe = document.createElement('iframe')
       iframe.frameBorder = 'none'
@@ -85,17 +85,25 @@ function C1unity() {
 
   return (
     <div className={styles.C1unity}>
-      {/* {url ? <iframe frameBorder='none' title='漫游' src={url}></iframe> : null} */}
-
-      {/* 返回按钮 */}
-      <BtnRight imgName='back' clickSon={() => history.go(-1)} title='返回' />
+      {url && !isPc ? <iframe frameBorder='none' title='漫游' src={url}></iframe> : null}
 
       {ind === -1 ? null : ind === 0 && urlId === '1' ? (
-        <Hot1 data={data} closeFu={() => setInd(-1)} />
+        <Hot1
+          data={data}
+          closeFu={() => {
+            const rootDom: HTMLDivElement = document.querySelector('#root')!
+            if (rootDom) rootDom.style.zIndex = '1'
+            setInd(-1)
+          }}
+        />
       ) : (
         <Hot2
           data={data}
-          closeFu={() => setInd(-1)}
+          closeFu={() => {
+            const rootDom: HTMLDivElement = document.querySelector('#root')!
+            if (rootDom) rootDom.style.zIndex = '1'
+            setInd(-1)
+          }}
           name={myData[urlId === '1' ? 'visit' : 'banquet'].hot[ind].name}
         />
       )}

Code/src/pages/C2unityEnd/index.tsx

@@ -1,19 +1,33 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import styles from './index.module.scss'
 import { isPc, otherUrl } from '@/utils/http'
-import history from '@/utils/history'
-import BtnRight from '@/components/BtnRight'
 
 const url = isPc
   ? 'unity/HeNanMuseum-pc/ManorScene/index.html'
   : 'unity/HeNanMuseum-mobile/ManorScene/index.html'
 
 function C2unityEnd() {
+  useEffect(() => {
+    if (isPc) {
+      const body = document.querySelector('body')
+      const iframe = document.createElement('iframe')
+      iframe.frameBorder = 'none'
+      iframe.title = '漫游'
+      iframe.id = 'myIframe'
+      iframe.src = url
+      body?.appendChild(iframe)
+    }
+
+    return () => {
+      const iframeDom = document.querySelector('#myIframe')
+
+      iframeDom?.remove()
+    }
+  }, [])
+
   return (
     <div className={styles.C2unityEnd}>
-      <iframe title='陶庄园' src={otherUrl + url} frameBorder='0'></iframe>
-      {/* 返回按钮 */}
-      <BtnRight imgName='back' clickSon={() => history.go(-1)} title='返回' />
+      {isPc ? null : <iframe title='陶庄园' src={otherUrl + url} frameBorder='0'></iframe>}
     </div>
   )
 }