Merge branch 'master' of http://192.168.0.115:3000/lanxin/Chengzhebei

src/App.tsx

@@ -7,7 +7,7 @@ import SpinLoding from './components/SpinLoding'
 import store, { RootState } from './store'
 import { useSelector } from 'react-redux'
 import NotFound from '@/components/NotFound'
-import { envFlag, isLoc } from './utils/http'
+import { envFlag } from './utils/http'
 import AsyncSpinLoding from './components/AsyncSpinLoding'
 import { Image } from 'antd'
 import MessageCom from '@/components/Message'
@@ -57,7 +57,7 @@ const planSize = {
 }
 
 export default function App() {
-  const { myData } = useSelector((state: RootState) => state.A0Layout)
+  const { myData, unityDel } = useSelector((state: RootState) => state.A0Layout)
 
   // 判断是中文还是英文
   useEffect(() => {
@@ -66,7 +66,7 @@ export default function App() {
 
   useEffect(() => {
     // 打包环境 刷新页面从 首页 开始
-    if (!isLoc && myData.isLdong) {
+    if (!envFlag && myData.isLdong) {
       if (window.location.hash !== '#/') {
         window.location.href = window.location.href.split('#')[0] + '#/'
       }
@@ -1013,7 +1013,9 @@ export default function App() {
         </React.Suspense>
       </Router>
 
-      <iframe style={{ display: 'none' }} id='modalIframe' title='modal' src=''></iframe>
+      {unityDel ? null : (
+        <iframe style={{ display: 'none' }} id='modalIframe' title='modal' src=''></iframe>
+      )}
 
       {/* 发送请求的加载组件 */}
       <AsyncSpinLoding />

src/assets/styles/base.css

@@ -158,42 +158,6 @@ textarea {
     opacity: 1;
   }
 }
-#BtnRight {
-  position: absolute;
-  width: 50px;
-  height: 50px;
-  cursor: pointer;
-  bottom: 15px;
-  right: 20px;
-}
-#BtnRight > img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: fill !important;
-  opacity: 1;
-  transition: all 0.3s;
-}
-#BtnRight .BtnRight2 {
-  opacity: 0;
-  pointer-events: none;
-}
-#BtnRight:hover .BtnRight1 {
-  opacity: 0;
-  pointer-events: none;
-}
-#BtnRight:hover .BtnRight2 {
-  opacity: 1;
-  pointer-events: auto;
-}
-@media screen and (min-width: 1200px) {
-  #BtnRight {
-    width: 35px;
-    height: 35px;
-  }
-}
 #HotOpCss {
   animation: HotOpCss 0.5s linear forwards;
 }

src/assets/styles/base.less

@@ -205,50 +205,6 @@ textarea {
   }
 }
 
-// 右下角的按钮
-#BtnRight {
-  position: absolute;
-  width: 50px;
-  height: 50px;
-  cursor: pointer;
-  bottom: 15px;
-  right: 20px;
-
-  &>img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: fill !important;
-    opacity: 1;
-    transition: all 0.3s;
-  }
-
-  .BtnRight2 {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  &:hover {
-    .BtnRight1 {
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    .BtnRight2 {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  #BtnRight {
-    width: 35px;
-    height: 35px;
-  }
-}
 
 // 热点页面打开透明的变化
 #HotOpCss {

src/components/BtnRight.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import { baseURL } from '@/utils/http'
-
-type Props = {
-  imgName: string
-  clickSon: () => void
-  title: '返回' | '跳过'
-}
-
-function BtnRight({ imgName, clickSon, title }: Props) {
-  return (
-    <div title={title} id='BtnRight' onClick={clickSon}>
-      <img className='BtnRight1' src={`${baseURL}btn/${imgName}.png`} alt='' />
-      <img className='BtnRight2' src={`${baseURL}btn/${imgName}Ac.png`} alt='' />
-    </div>
-  )
-}
-
-const MemoBtnRight = React.memo(BtnRight)
-
-export default MemoBtnRight

src/components/VideoModel/index.module.scss

@@ -1,19 +0,0 @@
-.VideoModel {
-  position: absolute;
-  z-index: 10;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transition: all 1s;
-  opacity: 0;
-  pointer-events: none;
-  // :global {
-
-  // }
-}
-
-.VideoModelShow {
-  opacity: 1;
-  pointer-events: auto;
-}

src/components/VideoModel/index.tsx

@@ -1,58 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import styles from './index.module.scss'
-import classNames from 'classnames'
-import BtnRight from '../BtnRight'
-
-type Props = {
-  isShow: boolean
-  src: string
-  closeFu: () => void
-  controls?: boolean
-}
-
-function VideoModel({ isShow, src, closeFu, controls = false }: Props) {
-  const videoRef = useRef<HTMLVideoElement>(null)
-
-  useEffect(() => {
-    if (isShow) {
-      setTimeout(() => {
-        if (videoRef.current) {
-          videoRef.current.play()
-        }
-      }, 100)
-    } else {
-      setTimeout(() => {
-        if (videoRef.current) {
-          videoRef.current.pause()
-        }
-      }, 100)
-    }
-  }, [isShow])
-
-  return (
-    <div
-      id='VideoModel'
-      className={classNames(styles.VideoModel, isShow ? styles.VideoModelShow : '')}
-    >
-      <video
-        ref={videoRef}
-        playsInline
-        muted={!controls}
-        webkit-playsinline='true'
-        x5-video-player-type='h5'
-        onEnded={closeFu}
-        controls={controls}
-      >
-        <source type='video/mp4' src={src} />
-        Your browser does not support the video tag.
-      </video>
-
-      {/* 右下角的返回按钮 */}
-      <BtnRight imgName='back' clickSon={() => closeFu()} title='返回' />
-    </div>
-  )
-}
-
-const MemoVideoModel = React.memo(VideoModel)
-
-export default MemoVideoModel

src/components/Zguide/index.module.scss

@@ -1,23 +0,0 @@
-.Zguide {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 999999;
-  padding: 6% 15% 9%;
-  background-color: rgba(0, 0, 0, 0.6);
-  :global {
-    video {
-      width: 100%;
-      height: 100%;
-      border-radius: 10px;
-    }
-    #BtnRight {
-      right: auto;
-      left: 50%;
-      transform: translateX(-50%);
-      bottom: 10px;
-    }
-  }
-}

src/components/Zguide/index.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import styles from './index.module.scss'
-import { baseURL } from '@/utils/http'
-import BtnRight from '../BtnRight'
-
-type Props = {
-  src: string
-  closeFu: () => void
-}
-
-function Zguide({ src, closeFu }: Props) {
-  return (
-    <div className={styles.Zguide}>
-      <video
-        autoPlay
-        playsInline
-        muted={true}
-        webkit-playsinline='true'
-        x5-video-player-type='h5'
-        controls={true}
-      >
-        <source type='video/mp4' src={baseURL + src} />
-        Your browser does not support the video tag.
-      </video>
-
-      {/* 右下角的返回按钮 */}
-      <BtnRight imgName='back' clickSon={() => closeFu()} title='返回' />
-    </div>
-  )
-}
-
-const MemoZguide = React.memo(Zguide)
-
-export default MemoZguide

src/components/Zloding/index.tsx

@@ -5,12 +5,13 @@ import classNames from 'classnames'
 const imgObj = {
   1: require('@/assets/sgImg/bacScene1.jpg'),
   2: require('@/assets/sgImg/bacScene2.jpg'),
-  3: require('@/assets/sgImg/bacScene3.jpg')
+  3: require('@/assets/sgImg/bacScene3.jpg'),
+  4: require('@/assets/img/A7base3_bg.jpg')
 }
 
 type Props = {
   isShow: boolean
-  bacNum: 1 | 2 | 3
+  bacNum: 1 | 2 | 3 | 4
   callBackFu?: () => void
 }
 
@@ -55,6 +56,9 @@ function Zloding({ isShow, bacNum, callBackFu }: Props) {
         }
       }
     }
+    return () => {
+      clearTimeout(timeRef.current)
+    }
   }, [callBackFu, showFlag])
 
   useEffect(() => {

src/components/Zmap/index.module.scss

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

src/components/Zmap/index.tsx

@@ -1,15 +0,0 @@
-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

src/components/ownUse/UseDataUrl.tsx

@@ -1,26 +0,0 @@
-// import { RootState } from '@/store'
-// import { baseURLTemp } from '@/utils/http'
-// import { useCallback, useEffect, useState } from 'react'
-// import { useSelector } from 'react-redux'
-
-export default function useDataUrl() {
-  // 是否是横屏，默认是false
-  // const isHH = useSelector((state: RootState) => state.A0Layout.isHH)
-  // const [dataUrl, setDataUrl] = useState('')
-  // const baseUrlChangeFu = useCallback(() => {
-  //   const temp = isHH ? 'HH/' : 'SS/'
-  //   setDataUrl(baseURLTemp + temp)
-  // }, [isHH])
-  // useEffect(() => {
-  //   baseUrlChangeFu()
-  // }, [baseUrlChangeFu])
-  // // 横竖屏用一样的数据路径
-  // const [dataUrlSame, setDataUrlSame] = useState('')
-  // useEffect(() => {
-  //   setDataUrlSame(baseURLTemp + 'HH/')
-  // }, [])
-  // return {
-  //   dataUrl,
-  //   dataUrlSame
-  // }
-}

src/pages/A0base/data.ts

@@ -1,3 +1,4 @@
+import store from '@/store'
 import { callIframeFu } from '@/utils/history'
 import { isPc } from '@/utils/http'
 
@@ -25,7 +26,7 @@ export const unityShow = (val: boolean) => {
 }
 
 // 获取当前场景key
-export const getUnityKey = (val:'sceneStaRes') => {
+export const getUnityKey = (val: 'sceneStaRes') => {
   let key = ''
 
   const dom: any = document.getElementById('modalIframe')
@@ -40,13 +41,14 @@ export const getUnityKey = (val:'sceneStaRes') => {
 }
 
 // 切换unity
+// TransitionScene
 export const cutUnityFu = (
   val: 'TombstoneView' | 'RoomScene' | 'DrawingBoard',
   backFu: () => void
 ) => {
   const dom: any = document.getElementById('modalIframe')
 
-  if (dom.src.includes('unity')) {
+  if (dom && dom.src.includes('unity')) {
     const res = getUnityKey('sceneStaRes')
 
     if (res !== val) {
@@ -59,3 +61,23 @@ export const cutUnityFu = (
     // lodingUnityFu()
   }
 }
+
+// 判断unity是否被销毁 false表示没有被销毁
+export const isUnitySta = () => {
+  let flag = true
+
+  const dom: any = document.getElementById('modalIframe')
+
+  // 没有被销毁
+  if (dom && dom.src.includes('unity')) flag = false
+
+  return flag
+}
+
+// 销毁unity
+export const delUnityFu = () => {
+  const dom: any = document.getElementById('modalIframe')
+  if (dom) {
+    store.dispatch({ type: 'layout/unityDel', payload: true })
+  }
+}

src/pages/A6ybwx/Sangzang/components/Policy/index.module.scss

@@ -122,7 +122,8 @@
           }
 
           .part1 {
-            background: url(../../../../../assets/img/A6_policy_part_bg1.png) no-repeat center center;
+            background-image: url('../../../../../assets/img/A6_policy_part_bg1.png');
+            background-size: #ddd6c2;
             background-size: 100% 100%;
             padding-bottom: 60px;
 
@@ -179,7 +180,8 @@
             align-items: center;
             justify-content: space-between;
             gap: 10px;
-            background: url(../../../../../assets/img/A6_policy_part_bg.png) no-repeat center center;
+            background-image: url('../../../../../assets/img/A6_policy_part_bg.png');
+            background-color: #ddd6c1;
             background-size: 100% 100%;
 
             .imgBox {

src/pages/A6ybwx/Sangzang/components/Sangzangys/index.module.scss

@@ -1,13 +1,13 @@
 .sang {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  top: 0%;
+  left: 0%;
   z-index: 5;
   width: 100%;
   height: 100%;
-  background: url('../../../../../assets/img/A6_sangzang_bg.png') no-repeat center center;
+  background-image: url('../../../../../assets/img/A6_sangzang_bg.png');
   background-size: 100% 100%;
+  background-color: #c6b49b;
   display: flex;
   align-items: center;
   justify-content: flex-end;

src/pages/A6ybwx/Sangzang/index.tsx

@@ -35,14 +35,12 @@ function SangzangHome({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
               {/* <div className='lastTxt'></div> */}
             </div>
 
-             <div className='hitem'>
+            <div className='hitem'>
               <div className='htxt'>程哲碑应是包含了佛教造像的墓碑。</div>
               <div className='hfrom'>——周桂香、郭志成《试论程哲碑及其历史艺术价值》</div>
               {/* <div className='lastTxt'></div> */}
             </div>
           </div>
-
-     
         </div>
       </div>
       <div className='btnContainner'>

src/pages/A7wjwj/conponents/Content/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import styles from './index.module.scss'
+import store from '@/store'
 function Content() {
   const [isShowScene, setIsShowScene] = useState(false)
   const [isShowPoem, setIsShowPoem] = useState(false)
@@ -32,6 +33,9 @@ function Content() {
       setIsShowPano(false)
       panoramicRoot.style.display = 'none'
       window.location.replace('#/wjwj')
+      // 改变unity的key，告诉wjwj页面重新判断unity是否被销毁
+      store.dispatch({ type: 'layout/unityDel', payload: false })
+      store.dispatch({ type: 'layout/unityKey', payload: Date.now() })
     }
   }
   const onClickSkip = () => {
@@ -45,9 +49,9 @@ function Content() {
         <img src='./myData/img/btn_back.png' alt='' />
       </div>
 
-      {isShowPano ? (
+      {isShowPano && !isShowScene ? (
         <iframe
-          style={{ display: isShowPano&&!isShowScene ? 'block' : 'none' }}
+          style={{ display: isShowPano && !isShowScene ? 'block' : 'none' }}
           title='panoramic'
           id='panoramic'
           src='Pano/index.html'
@@ -61,7 +65,7 @@ function Content() {
         </div>
         <div className='content'>
           清光绪年间
-          <br /> 程哲碑发现后曾存于长治市上党区东呈村古佛堂 
+          <br /> 程哲碑发现后曾存于长治市上党区东呈村古佛堂
           <br /> 自北朝肇始，至宋金时期
           <br /> 这里始终佛事兴盛 <br /> 晨钟撞破晨雾，暮鼓漫过田畴
           <br /> 缭绕香火中，信众往来不绝 <br /> 梵音与尘世烟火相融共生
@@ -74,7 +78,7 @@ function Content() {
       {isShowScene ? (
         <iframe
           style={{ display: isShowScene ? 'block' : 'none' }}
-          id='wjwjScene'  
+          id='wjwjScene'
           title='wjwjScene'
           src='BigScene/index.html#/?m=SG-Oy6fyzoMQ0D'
         />

src/pages/A7wjwj/conponents/Discover/index.tsx

@@ -4,7 +4,7 @@ import { isPc } from '@/utils/http'
 import classNames from 'classnames'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
-// import { domDelOwnFu } from '@/utils/utilsSome'
+import { delUnityFu } from '@/pages/A0base/data'
 
 function Discover(props: { style?: React.CSSProperties }) {
   const { myData } = useSelector((state: RootState) => state.A0Layout)
@@ -12,7 +12,7 @@ function Discover(props: { style?: React.CSSProperties }) {
   // 将隐藏的页面打开，全景图->诗歌->大场景
   const lookScene = useCallback(() => {
     // 销毁unity
-    // domDelOwnFu('#modalIframe')
+    delUnityFu()
 
     const panoramicRoot = document.getElementById('panoramic-root') as HTMLElement
     panoramicRoot.style.display = 'block'

src/pages/A7wjwj/index.module.scss

@@ -4,7 +4,7 @@
   width: 100%;
   height: 100%;
   background-color: #efede5;
-  background-image: url('../../assets/img/A7base3_bg.png');
+  background-image: url('../../assets/img/A7base3_bg.jpg');
   background-size: cover;
 
   :global {

src/pages/A7wjwj/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import MenuSider from '@/components/MenuSider'
 import Discover from './conponents/Discover'
@@ -8,9 +8,11 @@ import classNames from 'classnames'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
 import Weijie from './conponents/Weijie'
+import { isUnitySta, lodingUnityFu } from '../A0base/data'
+import Zloding from '@/components/Zloding'
 
 function A7Wjwj() {
-  const { myData } = useSelector((state: RootState) => state.A0Layout)
+  const { myData, unityKey } = useSelector((state: RootState) => state.A0Layout)
 
   const [currentTab, setCurrentTab] = useState(0)
 
@@ -22,8 +24,31 @@ function A7Wjwj() {
     else window.location.replace('#/base')
   }
 
+  // 监听unity是否被销毁了
+  const [unitySta, setUnitySta] = useState(false)
+
+  useEffect(() => {
+    const flag = isUnitySta()
+    if (flag) {
+      lodingUnityFu()
+    }
+    setUnitySta(flag)
+  }, [unityKey])
+
   return (
     <div className={classNames(styles.A7Wjwj, isPc ? '' : styles.A7WjwjMo)}>
+      {unitySta ? (
+        <Zloding
+          isShow={unitySta}
+          bacNum={4}
+          callBackFu={() => {
+            setTimeout(() => {
+              setUnitySta(false)
+            }, 1000)
+          }}
+        />
+      ) : null}
+
       {/* 发现之谜 */}
       <Discover style={{ display: currentTab === 0 ? 'flex' : 'none' }} />
       {/* 属性之辨 */}

src/store/reducer/layout.ts

@@ -29,7 +29,9 @@ const initState = {
   },
   // 总数据 - 中英文切换
   myData: {} as MyDataType,
-  myLangue: 'ZH' as 'ZH' | 'EN'
+  myLangue: 'ZH' as 'ZH' | 'EN',
+  unityKey: 0, //unity是否被销毁,key变化的时候就要判断
+  unityDel: false
 }
 
 // 定义 action 类型
@@ -41,6 +43,8 @@ type LayoutActionType =
   | { type: 'layout/message'; payload: MessageType }
   | { type: 'layout/myData'; payload: MyDataType }
   | { type: 'layout/myLangue'; payload: 'ZH' | 'EN' }
+  | { type: 'layout/unityKey'; payload: number }
+  | { type: 'layout/unityDel'; payload: boolean }
   | {
       type: 'layout/closeUpFile'
       payload: {
@@ -74,6 +78,11 @@ export default function layoutReducer(state = initState, action: LayoutActionTyp
       return { ...state, myData: action.payload }
     case 'layout/myLangue':
       return { ...state, myLangue: action.payload }
+    // unity是否被销毁，被销毁了为true
+    case 'layout/unityKey':
+      return { ...state, unityKey: action.payload }
+    case 'layout/unityDel':
+      return { ...state, unityDel: action.payload }
 
     default:
       return state

src/types/function.d.ts

@@ -9,15 +9,14 @@ declare global {
     openPoem: () => void
     backToyblm: () => void
     setIsShowPano: (isShow: boolean) => void
-    unityLoading: (progress: number) =>  void
-    loadSceneProgress: (progress: number) =>  void
+    unityLoading: (progress: number) => void
+    loadSceneProgress: (progress: number) => void
     showTag: () => void
     hideTag: () => void
     changePanel: (index: number) => void
     hideGesture: () => void
-    sceneNum:1|2|3
-
+    sceneNum: 1 | 2 | 3
   }
 }
 
-export {}
+export {}

src/utils/http.ts

@@ -1,7 +1,3 @@
-export const isLoc = true
-
-export const baseURL = isLoc ? baseUrlLoc : baseUrlAtl
-
 // 是不是pc端
 export const isPc = isPcTemp