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

public/index.html

@@ -8,6 +8,7 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
     <script src="./myData/myData.js"></script>
+    <script src="./myData/myDataEN.js"></script>
     <script src="./myData/hot.js"></script>
 
     <script src="./myData/jsmpeg.min.js"></script>

public/myData/myData.js

@@ -707,22 +707,22 @@ const myDataTemp = {
     ],
     search: [
       {
-        title: '程哲碑最早著录：',
+        title: '程哲碑最早著录',
         txt: '今在长治县袁家漏村，谨案此碑于近年始经人访得摩崖刻，高四尺，许字三十二行（此处《通志》有偏差，实三十一行），行四十五字，楷法劲整，惟结体甚小，摩崖刻艰于运刀，锋芒少锻而完好，仅缺数字，殊可贵也……',
         from: '——（清）王轩、杨笃：《山西通志》'
       },
       {
-        title: '碑文最早著录：',
+        title: '碑文最早著录',
         txt: '清光绪二十年（1894）杨笃编修成书的《长治县志》第四卷中首次著录了程哲碑的全文，标明袁家漏村即今东呈村。',
         from: ''
       },
       {
-        title: '最早公布完整拓片：',
+        title: '最早公布完整拓片',
         txt: '1920年11月，佛教学者常盘大定太原考察时，出版的《中国文化史迹》中首次公布了程哲碑龛像面及两侧面的拓片，使学界第一次获悉了程哲碑的完整拓片。',
         from: ''
       },
       {
-        title: '已知公布最早照片：',
+        title: '已知公布最早照片',
         txt: '1940年12月，水野清一、日比野丈夫等考察傅公祠时拍摄了程哲碑已知最早的照片，对程哲碑的图像进行了记录，在注释中对清末以来的著录情况进行了介绍，刊布了碑侧的照片。',
         from: ''
       }

public/myData/myDataEN.js

@@ -1,23 +1,5 @@
-window.isHH = document.documentElement.clientWidth >= document.documentElement.clientHeight
-
-const isPcTemp = document.documentElement.clientWidth >= 1200
-
-// 本地开发静态资源目录
-const baseUrlLoc = 'http://192.168.0.68:8080/staticData/'
-
-// 发送请求基地址
-const apiUrlTemp = 'https://sit-handaizy.4dage.com/api/'
-
-const myBaseUrl = 'https://houseoss.4dkankan.com/project/henan/'
-
-// Build开发资源目录
-const baseUrlAtl = myBaseUrl + 'staticData/'
-
-// 全景视频/全景图/unity场景资源地址
-const otherUrlTemp = myBaseUrl
-
-// 一些动态配置的数据
-const myDataTemp = {
+// 一些动态配置的数据---英文版
+const myDataTemp2 = {
   isLdong: true,
   // /base页的三个模块信息
   baseInfo: [
@@ -707,22 +689,22 @@ const myDataTemp = {
     ],
     search: [
       {
-        title: '程哲碑最早著录：',
+        title: '程哲碑最早著录',
         txt: '今在长治县袁家漏村，谨案此碑于近年始经人访得摩崖刻，高四尺，许字三十二行（此处《通志》有偏差，实三十一行），行四十五字，楷法劲整，惟结体甚小，摩崖刻艰于运刀，锋芒少锻而完好，仅缺数字，殊可贵也……',
         from: '——（清）王轩、杨笃：《山西通志》'
       },
       {
-        title: '碑文最早著录：',
+        title: '碑文最早著录',
         txt: '清光绪二十年（1894）杨笃编修成书的《长治县志》第四卷中首次著录了程哲碑的全文，标明袁家漏村即今东呈村。',
         from: ''
       },
       {
-        title: '最早公布完整拓片：',
+        title: '最早公布完整拓片',
         txt: '1920年11月，佛教学者常盘大定太原考察时，出版的《中国文化史迹》中首次公布了程哲碑龛像面及两侧面的拓片，使学界第一次获悉了程哲碑的完整拓片。',
         from: ''
       },
       {
-        title: '已知公布最早照片：',
+        title: '已知公布最早照片',
         txt: '1940年12月，水野清一、日比野丈夫等考察傅公祠时拍摄了程哲碑已知最早的照片，对程哲碑的图像进行了记录，在注释中对清末以来的著录情况进行了介绍，刊布了碑侧的照片。',
         from: ''
       }

src/App.tsx

@@ -7,10 +7,11 @@ import SpinLoding from './components/SpinLoding'
 import store, { RootState } from './store'
 import { useSelector } from 'react-redux'
 import NotFound from '@/components/NotFound'
-import { baseURL, envFlag, isLoc, myData } from './utils/http'
+import { baseURL, envFlag, isLoc } from './utils/http'
 import AsyncSpinLoding from './components/AsyncSpinLoding'
 import { Image } from 'antd'
 import MessageCom from '@/components/Message'
+import { setStoreLangueFu } from './utils/storage'
 
 // import Vconsole from 'vconsole'
 // new Vconsole()
@@ -52,6 +53,13 @@ const planSize = {
 }
 
 export default function App() {
+  const {myData} = useSelector((state: RootState) => state.A0Layout)
+
+  // 判断是中文还是英文
+  useEffect(() => {
+    setStoreLangueFu()
+  }, [])
+
   useEffect(() => {
     // 打包环境 刷新页面从 首页 开始
     if (!isLoc && myData.isLdong) {
@@ -59,7 +67,7 @@ export default function App() {
         window.location.href = window.location.href.split('#')[0] + '#/'
       }
     }
-  }, [])
+  }, [myData.isLdong])
 
   const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)
 
@@ -199,54 +207,52 @@ export default function App() {
     }
   }, [])
 
-
-
   useEffect(() => {
     // 添加状态跟踪自动旋转
-    let timer: NodeJS.Timeout;
+    let timer: NodeJS.Timeout
 
     window.onModelControlled = () => {
-      callIframeFu('setModelAutoRotation', 0);
+      callIframeFu('setModelAutoRotation', 0)
       resetTimer()
     }
 
     const resetTimer = () => {
       // 清除现有计时器
-      if (timer) clearTimeout(timer);
+      if (timer) clearTimeout(timer)
 
       // 重置计时器并检查旋转状态
       timer = setTimeout(() => {
         if (window.currentChangePanelIndex === 0 || window.currentChangePanelIndex === 4) {
-          console.log(window.currentChangePanelIndex);
-          callIframeFu('setModelAutoRotation', -0.5);
-          isAutoRotating.current = true;
+          console.log(window.currentChangePanelIndex)
+          callIframeFu('setModelAutoRotation', -0.5)
+          isAutoRotating.current = true
         }
-      }, 3000);
+      }, 3000)
 
       // 如果正在旋转则取消
       if (isAutoRotating.current) {
-        callIframeFu('setModelAutoRotation', 0);
-        isAutoRotating.current = false;
+        callIframeFu('setModelAutoRotation', 0)
+        isAutoRotating.current = false
       }
-    };
+    }
 
     // 初始化计时器
-    resetTimer();
+    resetTimer()
 
     // 操作事件监听
     const handleUserAction = () => {
-      resetTimer();
-    };
+      resetTimer()
+    }
 
-    document.addEventListener('click', handleUserAction);
-    document.addEventListener('touchstart', handleUserAction);
+    document.addEventListener('click', handleUserAction)
+    document.addEventListener('touchstart', handleUserAction)
 
     return () => {
-      clearTimeout(timer);
-      document.removeEventListener('click', handleUserAction);
-      document.removeEventListener('touchstart', handleUserAction);
-    };
-  }, []);
+      clearTimeout(timer)
+      document.removeEventListener('click', handleUserAction)
+      document.removeEventListener('touchstart', handleUserAction)
+    }
+  }, [])
 
   document.addEventListener('click', () => {
     if (window.currentChangePanelIndex === 0 || window.currentChangePanelIndex === 4) {
@@ -255,8 +261,6 @@ export default function App() {
     }
   })
 
-
-
   // 更新unity页面
   useEffect(() => {
     if (envFlag) {
@@ -264,8 +268,7 @@ export default function App() {
         if (e.code === 'Enter') {
           callIframeFu(
             'refreshAppSettings',
-            JSON.stringify(
-              {
+            JSON.stringify({
               panels: [
                 {
                   name: 'DefaultVirtualCamera',
@@ -579,7 +582,8 @@ export default function App() {
                   }
                 }
               ]
-            }),'json'
+            }),
+            'json'
           )
         }
       })

src/assets/styles/base.css

@@ -429,3 +429,17 @@ textarea {
     transform: translateX(0);
   }
 }
+#root .moFont {
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 2px;
+  font-weight: 400;
+  color: #504e40;
+}
+#root .moBack {
+  width: 80px;
+  height: 40px;
+}
+#root .moBack img {
+  object-fit: fill !important;
+}

src/assets/styles/base.less

@@ -67,7 +67,7 @@ body #A7Back {
   left: 4%;
   cursor: pointer;
 
-  & > img {
+  &>img {
     height: 100%;
     object-fit: contain;
   }
@@ -78,7 +78,7 @@ body #A7Back {
   margin: auto;
   position: relative;
 
-  & > div {
+  &>div {
     width: 100%;
     height: 100%;
   }
@@ -207,7 +207,7 @@ textarea {
   bottom: 15px;
   right: 20px;
 
-  & > img {
+  &>img {
     position: absolute;
     top: 0;
     left: 0;
@@ -325,12 +325,13 @@ textarea {
         justify-content: end;
         align-items: center;
 
-        & > img {
+        &>img {
           height: 90%;
           object-fit: contain;
         }
       }
     }
+
     .content {
       font-size: 14px !important;
       line-height: 20px !important;
@@ -350,7 +351,7 @@ textarea {
     z-index: 3;
     cursor: pointer;
 
-    & > img {
+    &>img {
       height: 100%;
       object-fit: contain;
     }
@@ -486,7 +487,7 @@ textarea {
       justify-content: end;
       align-items: center;
 
-      & > img {
+      &>img {
         height: 90%;
         object-fit: contain;
       }
@@ -501,6 +502,7 @@ textarea {
     color: #fff;
     font-weight: lighter;
     overflow: auto;
+
     &::-webkit-scrollbar {
       width: 0px;
     }
@@ -531,6 +533,7 @@ textarea {
 .opacityChange {
   animation: opacityChange 2s infinite linear;
 }
+
 @keyframes opacityChange {
   0% {
     opacity: 1;
@@ -559,4 +562,23 @@ textarea {
   100% {
     transform: translateX(0);
   }
+}
+
+// 默认字体
+#root .moFont {
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 2px;
+  font-weight: 400;
+  color: #504e40;
+}
+
+// 移动端返回按钮
+#root .moBack {
+  width: 80px;
+  height: 40px;
+
+  img {
+    object-fit: fill !important;
+  }
 }

src/components/BaseVideo/index.module.scss

@@ -1,82 +0,0 @@
-.BaseVideo {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 11;
-  opacity: 1;
-  transition: opacity 0.5s;
-  :global {
-    .BVBIcon {
-      position: absolute;
-      top: -60px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 30px;
-      z-index: 10;
-      cursor: pointer;
-    }
-
-    .BaseVideoIcon {
-      position: absolute;
-      top: 0;
-      width: 650px;
-      max-width: 90%;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    .BVbaseBtn {
-      position: absolute;
-      bottom: 40px;
-      left: 50%;
-      transform: translateX(-50%);
-      cursor: pointer;
-      width: 100px;
-      height: auto;
-      z-index: 10;
-      & > img {
-        width: 100%;
-      }
-
-      .BVBtxt {
-        position: absolute;
-        top: 0;
-        left: 0;
-        color: #fffddc;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        transition: color 0.3s;
-        &:hover {
-          color: #ead98f;
-        }
-      }
-      .BVBxian {
-        position: absolute;
-        bottom: -10px;
-        left: 0;
-        width: 100%;
-        padding: 0 10px;
-        height: 2px;
-        & > div {
-          width: 100%;
-          height: 100%;
-          background-color: rgba(231, 214, 142, 0.6);
-          & > div {
-            width: 0%;
-            height: 100%;
-
-            background-color: #fffddc;
-          }
-        }
-      }
-    }
-  }
-}
-
-.BaseVideoHide {
-  opacity: 0;
-  pointer-events: none;
-}

src/components/BaseVideo/index.tsx

@@ -1,89 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-import styles from './index.module.scss'
-import classNames from 'classnames'
-import { baseURL, myData } from '@/utils/http'
-import { domDelOwnFu } from '@/utils/utilsSome'
-
-type Props = {
-  isShow: boolean //是否显示
-  imgSrc: string //标题图片的路径
-  videoSrc: string //视频路径
-  parentFu: () => void //点击继续的方法（调用父亲）
-}
-
-function BaseVideo({ isShow, imgSrc, videoSrc, parentFu }: Props) {
-  const baseVideoRef = useRef<HTMLVideoElement>(null)
-
-  useEffect(() => {
-    setTimeout(() => {
-      if (baseVideoRef.current) {
-        baseVideoRef.current.play()
-      }
-    }, 100)
-  }, [])
-
-  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
-
-  const timeRR = useRef(-1)
-
-  useEffect(() => {
-    clearInterval(timeRR.current)
-    timeRR.current = window.setInterval(() => {
-      if (loding >= 100) {
-        clearInterval(timeRR.current)
-        return
-      }
-      setLoding(loding + 1)
-    }, 30)
-  }, [loding])
-
-  const btnStartFu = useCallback(() => {
-    if (loding >= 100) {
-      parentFu()
-      // 0.5s之后删除初始视频
-      setTimeout(() => {
-        domDelOwnFu('#BaseVideo')
-      }, 500)
-    }
-  }, [loding, parentFu])
-
-  return (
-    <div
-      id='BaseVideo'
-      className={classNames(styles.BaseVideo, isShow ? '' : styles.BaseVideoHide)}
-    >
-      <img className='BaseVideoIcon' src={imgSrc} alt='' />
-      <div className='BVbaseBtn' onClick={btnStartFu}>
-        {/* anpg动图 */}
-        <div className='BVBIcon'>
-          <img src={`${baseURL}visit/arrow.png`} alt='' />
-        </div>
-
-        <img src={`${baseURL}visit/btn.png`} alt='' />
-
-        <div className='BVBtxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
-        {loding >= 100 ? null : (
-          <div className='BVBxian'>
-            <div>
-              <div style={{ width: loding + '%' }}></div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      <video
-        ref={baseVideoRef}
-        src={videoSrc}
-        playsInline
-        muted
-        webkit-playsinline='true'
-        x5-video-player-type='h5'
-        loop
-      />
-    </div>
-  )
-}
-
-const MemoBaseVideo = React.memo(BaseVideo)
-
-export default MemoBaseVideo

src/components/CatVideo/index.module.scss

@@ -1,16 +0,0 @@
-.CatVideo {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 15;
-  opacity: 1;
-  top: 0;
-  left: 0;
-  // :global {
-
-  // }
-}
-.CatVideoHide {
-  opacity: 0;
-  pointer-events: none;
-}

src/components/CatVideo/index.tsx

@@ -1,63 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react'
-import styles from './index.module.scss'
-import classNames from 'classnames'
-import { domDelOwnFu } from '@/utils/utilsSome'
-import BtnRight from '../BtnRight'
-
-type Props = {
-  isShow: boolean
-  src: string
-  parentFu: () => void
-  noBtn?: boolean //没有跳过按钮
-  openYin?: boolean //打开声音播放
-  // 不用删除自己
-  noDel?: boolean
-}
-
-function CatVideo({ isShow, src, parentFu, noBtn, openYin, noDel }: Props) {
-  const videoRef = useRef<HTMLVideoElement>(null)
-
-  useEffect(() => {
-    if (isShow) {
-      setTimeout(() => {
-        if (videoRef.current) videoRef.current.play()
-      }, 100)
-    }
-  }, [isShow])
-
-  const playEndFu = useCallback(() => {
-    parentFu()
-
-    if (!noDel) {
-      // 0.5s之后删除过度视频
-      setTimeout(() => {
-        domDelOwnFu('#CatVideo')
-      }, 500)
-    }
-  }, [noDel, parentFu])
-
-  return (
-    <div id='CatVideo' className={classNames(styles.CatVideo, isShow ? '' : styles.CatVideoHide)}>
-      <video
-        ref={videoRef}
-        playsInline
-        muted={!openYin}
-        webkit-playsinline='true'
-        x5-video-player-type='h5'
-        onEnded={playEndFu}
-      >
-        <source type='video/mp4' src={src} />
-        Your browser does not support the video tag.
-      </video>
-
-      {/* 右下角的跳过按钮 */}
-      <BtnRight imgName='skip' clickSon={() => playEndFu()} title='跳过' />
-      {/* {noBtn && myData.isLdong ? null : (
-      )} */}
-    </div>
-  )
-}
-
-const MemoCatVideo = React.memo(CatVideo)
-
-export default MemoCatVideo

src/components/EndVideo/index.module.scss

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

src/components/EndVideo/index.tsx

@@ -1,62 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import styles from './index.module.scss'
-import classNames from 'classnames'
-import { domDelOwnFu } from '@/utils/utilsSome'
-import history from '@/utils/history'
-import BtnRight from '../BtnRight'
-// import { myData } from '@/utils/http'
-
-type Props = {
-  lastVideo: boolean //是否显示
-  src: string //视频路径
-  path: string //点击跳过 或者视频播完 跳路由的路径
-  delDom?: string //有的话 就删除这个dom
-  noBtn?: boolean //没有跳过按钮
-}
-
-// 页面结尾的视频
-function EndVideo({ lastVideo, delDom, src, path, noBtn }: Props) {
-  const videoRefLast = useRef<HTMLVideoElement>(null)
-
-  useEffect(() => {
-    if (lastVideo) {
-      setTimeout(() => {
-        if (videoRefLast.current) {
-          videoRefLast.current.play()
-        }
-      }, 100)
-
-      // 0.5s之后删除上级元素
-      if (delDom) {
-        setTimeout(() => {
-          domDelOwnFu(delDom)
-        }, 500)
-      }
-    }
-  }, [delDom, lastVideo])
-
-  return (
-    <div className={classNames(styles.EndVideo, lastVideo ? styles.EndVideoAc : '')}>
-      <video
-        ref={videoRefLast}
-        playsInline
-        muted
-        webkit-playsinline='true'
-        x5-video-player-type='h5'
-        onEnded={() => window.location.replace(path)}
-      >
-        <source type='video/mp4' src={src} />
-        Your browser does not support the video tag.
-      </video>
-
-      {/* 右下角的跳过按钮 */}
-      <BtnRight imgName='skip' clickSon={() => window.location.replace(path)} title='跳过' />
-      {/* {noBtn && myData.isLdong ? null : (
-      )} */}
-    </div>
-  )
-}
-
-const MemoEndVideo = React.memo(EndVideo)
-
-export default MemoEndVideo

src/components/HotIcon/index.module.scss

@@ -1,51 +0,0 @@
-.HotIcon {
-  display: inline-block;
-  min-width: 30px;
-  height: 30px;
-  width: auto;
-  :global {
-    img {
-      cursor: pointer;
-      position: relative;
-      top: 0;
-      left: 0;
-      height: 100%;
-      transition: all 0.3s;
-    }
-    .HotIconHover {
-      opacity: 0;
-      pointer-events: none;
-    }
-    .HotIconBase {
-      position: absolute;
-      top: 0;
-      left: 0;
-      &:hover {
-        opacity: 0;
-      }
-      &:hover + .HotIconHover {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-.HotIconAc {
-  :global {
-    .HotIconHover {
-      opacity: 1;
-      // pointer-events: auto;
-    }
-    .HotIconBase {
-      opacity: 0;
-    }
-  }
-}
-.HotIconZhan {
-  :global {
-    .HotIconHover {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-}

src/components/HotIcon/index.tsx

@@ -1,108 +0,0 @@
-import React, { useCallback } from 'react'
-import styles from './index.module.scss'
-import { baseURL } from '@/utils/http'
-import classNames from 'classnames'
-
-type Props = {
-  // 是否是模型
-  isModel: boolean
-  index: number
-  clickSon?: (index: number) => void //点击
-  hoverSrc: string //鼠标移入显示的图片
-  style?: { top: string; left: string } //是否定位（除了全景视频和全景图）
-  zIndex?: number //层级问题，如果碰到遮挡 把这个值设置大一点
-  // 更多模块的热点逻辑参数
-  isHoverAc?: boolean //鼠标移入索引
-  hoverFu?: (index: number) => void //鼠标移入事件
-  isZhan?: boolean //是否全部展开
-  // 全景视频和全景图的宽度
-  panoWidth?: string
-  isXiao?: number
-  // 是否在全景中
-  isPano?: boolean
-}
-
-function HotIcon({
-  isModel,
-  index,
-  clickSon,
-  hoverSrc,
-  style,
-  isHoverAc,
-  hoverFu,
-  isZhan,
-  zIndex,
-  panoWidth,
-  isXiao,
-  isPano
-}: Props) {
-  const onMouseEnter = useCallback(() => {
-    if (hoverFu) {
-      hoverFu(index)
-    }
-  }, [hoverFu, index])
-
-  const clickSonFu = useCallback(() => {
-    if (clickSon) clickSon(index)
-  }, [clickSon, index])
-
-  return (
-    <div
-      id='HotIcon'
-      style={{
-        position: style ? 'absolute' : 'relative',
-        top: style ? style.top : 0,
-        left: style ? style.left : 0,
-        zIndex: zIndex || 1,
-        width: panoWidth ? panoWidth : 'auto',
-        transform: isXiao ? `scale(${isXiao})` : ''
-      }}
-      className={classNames(
-        styles.HotIcon,
-        isHoverAc ? styles.HotIconAc : '',
-        isZhan ? styles.HotIconZhan : ''
-      )}
-      key={index}
-    >
-      {(!isPano || !isHoverAc) && (
-        <img
-          onMouseEnter={onMouseEnter}
-          onClick={clickSonFu}
-          className='HotIconBase'
-          src={`${baseURL}visit/hot/hotBase${isModel ? '2' : ''}.png`}
-          alt=''
-          style={
-            isPano
-              ? {
-                  position: 'relative',
-                  maxWidth: 'unset',
-                  maxHeight: 'unset'
-                }
-              : undefined
-          }
-        />
-      )}
-      {(!isPano || isHoverAc) && (
-        <img
-          onMouseEnter={onMouseEnter}
-          onClick={clickSonFu}
-          className='HotIconHover'
-          src={baseURL + hoverSrc}
-          alt=''
-          style={
-            isPano
-              ? {
-                  maxWidth: 'unset',
-                  maxHeight: 'unset'
-                }
-              : undefined
-          }
-        />
-      )}
-    </div>
-  )
-}
-
-const MemoHotIcon = React.memo(HotIcon)
-
-export default MemoHotIcon

src/i18n.ts

@@ -1,38 +0,0 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-
-// 异步加载语言包（核心）
-const loadLocale = async ({locale}:{locale:string}) => {
-  let messages;
-  if (locale === 'zh-CN') {
-    // 动态加载 public/data.js
-    const module = await import('./utils/http');
-    messages = module.myData;
-  } else if (locale === 'en-EN') {
-    const module = await import('./utils/http');
-    messages = module.myData;
-  }
-  // 注入到 i18n
-  i18n.addResourceBundle(locale, 'translation', messages);
-  // 切换语言
-  i18n.changeLanguage(locale);
-  return messages;
-};
-
-// 初始化加载默认语言
-loadLocale({ locale: 'zh-CN' });
-
-i18n
-  .use(initReactI18next)
-  .init({
-    resources: {},
-    lng: 'zh-CN', // 默认中文
-    fallbackLng: 'zh-CN',
-    interpolation: {
-      escapeValue: false
-    }
-  });
-
-export default i18n;
-
-export {};

src/pages/A0base/index.tsx

@@ -1,12 +1,14 @@
 import React, { useEffect, useState } from 'react'
 import styles from './index.module.scss'
-import { isPc, myData } from '@/utils/http'
+import { isPc } from '@/utils/http'
 import classNames from 'classnames'
 import IsDev from '@/components/IsDev'
-
-
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 function A0base() {
+  const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)
+
   const [currentBase, setCurrentBase] = useState(0)
   const [isOpenInteract, setIsOpenInteract] = useState(false)
   const [showIsDev, setShowIsDev] = useState(false)
@@ -18,9 +20,10 @@ function A0base() {
   }
 
   useEffect(() => {
-    showIsDev && setTimeout(() => {
-      setShowIsDev(false)
-    }, 2000)
+    showIsDev &&
+      setTimeout(() => {
+        setShowIsDev(false)
+      }, 2000)
   }, [showIsDev])
 
   return (
@@ -29,16 +32,27 @@ function A0base() {
         <div className={`content`}>
           <div className='title myFont'>{myData.baseInfo[currentBase].title}</div>
           <div className='text'>{myData.baseInfo[currentBase].text}</div>
-          <div className='btn' onClick={(e) => goto(e, myData.baseInfo[currentBase].path)}>查看详情</div>
+          <div className='btn' onClick={e => goto(e, myData.baseInfo[currentBase].path)}>
+            {myLangue==='ZH'?'查看详情':'view details'}
+          </div>
         </div>
         <div className='baseContent'>
-          <div className={`base ${currentBase === 0 ? 'baseAc' : ''}`} onClick={() => setCurrentBase(0)}>
+          <div
+            className={`base ${currentBase === 0 ? 'baseAc' : ''}`}
+            onClick={() => setCurrentBase(0)}
+          >
             {myData.baseInfo[0].title}
           </div>
-          <div className={`base ${currentBase === 1 ? 'baseAc' : ''}`} onClick={() => setCurrentBase(1)}>
+          <div
+            className={`base ${currentBase === 1 ? 'baseAc' : ''}`}
+            onClick={() => setCurrentBase(1)}
+          >
             {myData.baseInfo[1].title}
           </div>
-          <div className={`base ${currentBase === 2 ? 'baseAc' : ''}`} onClick={() => setCurrentBase(2)}>
+          <div
+            className={`base ${currentBase === 2 ? 'baseAc' : ''}`}
+            onClick={() => setCurrentBase(2)}
+          >
             {myData.baseInfo[2].title}
           </div>
         </div>
@@ -46,17 +60,22 @@ function A0base() {
 
       {/* 互动 */}
       <div className='interact'>
-        <div className={`inter_content ${isOpenInteract ? 'inter_content_active' : ''}`} >
-
-          <div className='inter' onClick={() => window.location.replace('#/byzh')}>碑影智绘</div>
-          <div className='inter' onClick={() => setShowIsDev(true)}>展览图谱</div>
-          <div className='inter' onClick={() => setShowIsDev(true)}>AI问答</div>
+        <div className={`inter_content ${isOpenInteract ? 'inter_content_active' : ''}`}>
+          <div className='inter' onClick={() => window.location.replace('#/byzh')}>
+            碑影智绘
+          </div>
+          <div className='inter' onClick={() => setShowIsDev(true)}>
+            展览图谱
+          </div>
+          <div className='inter' onClick={() => setShowIsDev(true)}>
+            AI问答
+          </div>
         </div>
 
         <div className='icon' onClick={() => setIsOpenInteract(!isOpenInteract)}>
           <img src={require('@/assets/img/interaction.png')} alt='' />
         </div>
-      </div >
+      </div>
 
       <div className='home' onClick={e => goto(e, '/')}>
         <img src={require('@/assets/img/home.png')} alt='' />
@@ -69,8 +88,7 @@ function A0base() {
       </div>
 
       <IsDev txt='开发中' isShow={showIsDev} />
-
-    </div >
+    </div>
   )
 }
 

src/pages/A1home/index.tsx

@@ -4,6 +4,9 @@ import classNames from 'classnames'
 import { isPc } from '@/utils/http'
 
 function A1home() {
+
+
+
   // 点击进入
   const [baseFlag, setBaseFlag] = useState(false)
   const [isClickedSkip, setIsClickedSkip] = useState(false)

src/pages/A1home2/index.tsx

@@ -3,9 +3,13 @@ import styles from './index.module.scss'
 import classNames from 'classnames'
 import { isPc } from '@/utils/http'
 import { domDelOwnFu } from '@/utils/utilsSome'
-import store from '@/store'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 function A1home() {
+
+  const {myLangue} = useSelector((state: RootState) => state.A0Layout)
+
   // 先加载背景图片
   const [baseImg, setBaseImg] = useState(false)
 
@@ -62,9 +66,9 @@ function A1home() {
         onPause: () => {}, // 触发暂停事件
         onEnded: () => {
           // 视频播放完了
-          const homeVideoFlag = store.getState().A0Layout.homeVideoFlag
-          console.log('home结尾视频播放完毕', !homeVideoFlag)
-          if (!homeVideoFlag) window.location.replace('#/base')
+
+          console.log('home结尾视频播放完毕')
+          window.location.replace('#/base')
         }, // 触发播放结束事件
         onSourceEstablished: () => {
           setVideoOk(true)
@@ -143,7 +147,7 @@ function A1home() {
           )}
         </div>
         <div className='progress' style={{ opacity: progress === 100 ? 0 : 1 }}>
-          加载{progress}%...
+          {myLangue==='ZH'?'加载':'Loding'}{progress}%...
         </div>
       </div>
       {/* ------------微信浏览器不让视频自动播放，用ts的方式*/}
@@ -156,11 +160,10 @@ function A1home() {
               // 删除第二个动画
               playerRef.current.destroy()
               domDelOwnFu('.A1video')
-              store.dispatch({ type: 'layout/homeVideoFlag', payload: true })
               window.location.replace('#/base')
             }}
           >
-            跳过
+            {myLangue==='ZH'?'跳过':'skip'}
             <img src={require('@/assets/sgImg/icon_skip.png')} alt='' />
           </div>
         </div>

src/pages/A2yblm/components/Detail/index.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 import styles from "./index.module.scss";
-import { isPc, myData } from "@/utils/http";
+import { isPc } from "@/utils/http";
 import { callIframeFu } from "@/utils/history";
 import classNames from 'classnames'
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
 
 type DetailProps = {
   currentTagIndex: number,
@@ -10,6 +12,7 @@ type DetailProps = {
   setIsShowTag: (isShow: boolean) => void
 }
 function Detail({ currentTagIndex, setCurrentTagIndex, setIsShowTag }: DetailProps) {
+  const {myData} = useSelector((state: RootState) => state.A0Layout)
 
   const handleHot = (index: number) => {
     setCurrentTagIndex(index)

src/pages/A2yblm/components/Intro/index.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 import styles from "./index.module.scss";
-import { isPc, myData } from "@/utils/http";
+import { isPc } from "@/utils/http";
 import classNames from 'classnames'
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
 
 function Intro() {
 
+   const {myData} = useSelector((state: RootState) => state.A0Layout)
+
   return (
     <div className={classNames(styles.Intro,isPc?'':styles.IntroMo)}>
       <div className="titleLogo">

src/pages/A2yblm/components/ModalTxt/index.tsx

@@ -1,11 +1,13 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useState, useEffect, useRef } from 'react'
 import styles from './index.module.scss'
-import { isPc, myData } from '@/utils/http'
+import { isPc } from '@/utils/http'
 import { Tooltip } from 'antd'
 import { callIframeFu, isMobiileFu } from '@/utils/history'
 import classNames from 'classnames'
 import { modalTxtTab } from './data'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 function ModalTxt({
   setIsShowTabBar,
@@ -16,6 +18,9 @@ function ModalTxt({
   setIsShowMzmTitle: (isShowMzmTitle: boolean) => void
   setBottomTxt: (val: string) => void
 }) {
+
+ const {myData} = useSelector((state: RootState) => state.A0Layout)
+
   const [selectedTab, setSelectedTab] = useState(0)
   const selectedTabRef = useRef(0)
   useEffect(() => {

src/pages/A2yblm/index.tsx

@@ -4,11 +4,16 @@ import { callIframeFu } from '@/utils/history'
 import Intro from '@/pages/A2yblm/components/Intro'
 import Detail from '@/pages/A2yblm/components/Detail'
 import ModalTxt from '@/pages/A2yblm/components/ModalTxt'
-import { isPc, myData } from '@/utils/http'
+import { isPc } from '@/utils/http'
 import MenuSider from '@/components/MenuSider'
 import classNames from 'classnames'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 function A2yblm() {
+
+  const {myData} = useSelector((state: RootState) => state.A0Layout)
+
   const [currentTab, setCurrentTab] = useState('tab1')
 
   useEffect(() => {

src/pages/A4quanwen/index.tsx

@@ -1,10 +1,15 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import styles from './index.module.scss'
 import { callIframeFu } from '@/utils/history'
-import { isPc, myData } from '@/utils/http'
+import { isPc } from '@/utils/http'
 import classNames from 'classnames'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 function A4quanwen() {
+
+   const {myData} = useSelector((state: RootState) => state.A0Layout)
+
   const [isHighlight, setIsHighlight] = useState(true)
   useEffect(() => {
     callIframeFu('showInscription', 10)

src/pages/A6ybwx/A6_1_zxys/index.tsx

@@ -1,14 +1,18 @@
 import React, { useState } from 'react'
 import styles from './index.module.scss'
-import store from '@/store'
-import { isPc, myData } from '@/utils/http'
+import store, { RootState } from '@/store'
+import { isPc } from '@/utils/http'
 import classNames from 'classnames'
+import { useSelector } from 'react-redux'
 
 function Zaoxiang() {
+
+ const {myData} = useSelector((state: RootState) => state.A0Layout)
+
   const [currentType, setCurrentType] = useState('')
   const [isShowDetail, setIsShowDetail] = useState(false)
 
-  const currentItem = React.useMemo(() => myData.zaoxiangDataDetail.find(item => item.type === currentType), [currentType])
+  const currentItem = React.useMemo(() => myData.zaoxiangDataDetail.find(item => item.type === currentType), [currentType, myData.zaoxiangDataDetail])
 
   const handleDotClick = (type: string) => {
     setCurrentType(type)

src/pages/A6ybwx/A6_2_zxzgh/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef } from 'react'
 import styles from './index.module.scss'
-import { myData } from '@/utils/http'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 type InfoCardProps = {
   time: string
@@ -9,6 +10,9 @@ type InfoCardProps = {
   from: string
 }
 function Sinicize() {
+
+  const { myData } = useSelector((state: RootState) => state.A0Layout)
+
   const [currentTab, setCurrentTab] = useState(0)
   const [selectedTime, setSelectedTime] = useState(0)
   const [isShowTip, setIsShowTip] = useState(false)

src/pages/A6ybwx/Genealogy/components/Graph/index.tsx

@@ -2,14 +2,19 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { NodeTurnRight, NodeRight, NodeBottom, RightLineDash, NodeActive, NodeTurnBottomRight } from '../Utils'
 import { useDrag } from '@use-gesture/react'
-import { myData } from '@/utils/http'
 import { isMobiileFu } from '@/utils/history'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 const MAIN_CONTENT_WIDTH = 1920
 const MAIN_CONTENT_HEIGHT = 945
 const MINIMAP_SCALE = 0.045
 
 function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) => void }) {
+
+
+  const {myData} = useSelector((state: RootState) => state.A0Layout)
+
   // 新增拖拽相关状态
   const [isDragging, setIsDragging] = useState(false)
   const [startX, setStartX] = useState(0)

src/pages/A7wjwj/conponents/Discover/index.module.scss

@@ -5,7 +5,9 @@
   justify-content: space-between;
   align-items: center;
   position: relative;
+
   :global {
+
     .left,
     .left2 {
       width: 45%;
@@ -13,6 +15,7 @@
       position: relative;
       background: url('../../../../assets/img/A7_map1.png') no-repeat center bottom;
       background-size: contain;
+
       .record {
         width: fit-content;
         height: fit-content;
@@ -26,9 +29,11 @@
         gap: 5px;
         padding: 10px;
         color: rgba(255, 255, 255, 1);
+
         .text {
           font-size: 9px;
         }
+
         .btn {
           text-align: right;
           font-size: 9px;
@@ -37,6 +42,7 @@
           cursor: pointer;
         }
       }
+
       .record1 {
         width: 200px;
         height: 75px;
@@ -44,29 +50,34 @@
         background: url('../../../../assets/img/A7_discover_record1.png') no-repeat center center;
         background-size: 100% 100%;
       }
+
       .record2 {
         width: 130px;
         height: 60px;
         transform: translate(0%, 166%);
         background: url('../../../../assets/img/A7_discover_record2.png') no-repeat center center;
         background-size: 100% 100%;
+
         .btnContainer {
           width: 100%;
           height: 12px;
           display: flex;
           justify-content: flex-end;
           align-items: center;
+
           .icon {
             width: 15px;
             height: 12px;
             line-height: 10px;
-            & > img {
+
+            &>img {
               height: 100%;
               object-fit: contain;
             }
           }
         }
       }
+
       .record3 {
         width: 155px;
         height: 45px;
@@ -77,6 +88,7 @@
         align-items: center;
         flex-direction: row;
       }
+
       .record4 {
         width: 140px;
         height: 25px;
@@ -86,10 +98,12 @@
         display: flex;
         align-items: center;
         flex-direction: row;
+
         .text {
           height: 8px;
         }
       }
+
       .record5 {
         width: 102px;
         height: 25px;
@@ -99,10 +113,12 @@
         display: flex;
         align-items: center;
         flex-direction: row;
+
         .text {
           height: 15px;
         }
       }
+
       .point {
         height: 15px;
         width: 15px;
@@ -110,18 +126,22 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        & > img {
+
+        &>img {
           height: 100%;
           object-fit: contain;
         }
       }
+
       .point1 {
         transform: translate(17%, -82%);
       }
+
       .point2 {
         transform: translate(69%, 482%);
       }
     }
+
     .left {
       .arrow1 {
         width: 13px;
@@ -134,19 +154,24 @@
         background-size: 100% 100%;
       }
     }
+
     .left2 {
       background: url('../../../../assets/img/A7_map2.png') no-repeat center bottom;
       background-size: contain;
       position: relative;
+
       .point3 {
         transform: translate(412%, 117%);
       }
+
       .point4 {
         transform: translate(-248%, 292%);
       }
+
       .point5 {
         transform: translate(-412%, -170%);
       }
+
       .arrow2 {
         width: 22px;
         height: 58px;
@@ -157,6 +182,7 @@
         background: url('../../../../assets/img/A7_discover_arrow2.png') no-repeat center center;
         background-size: 100% 100%;
       }
+
       .arrow3 {
         width: 77px;
         height: 28px;
@@ -167,6 +193,7 @@
         background: url('../../../../assets/img/A7_discover_arrow3.png') no-repeat center center;
         background-size: 100% 100%;
       }
+
       .back {
         width: 60px;
         height: 30px;
@@ -182,22 +209,25 @@
         justify-content: center;
         font-size: 12px;
 
-        & > img {
+        &>img {
           position: absolute;
           z-index: -1;
           height: 100%;
           object-fit: contain;
         }
+
         .txt {
           color: rgba(255, 223, 174, 1);
         }
       }
     }
+
     .right {
-      margin-top: 200px;
+      margin-top: 160px;
       padding-bottom: 10px;
       width: 55%;
       height: 100%;
+
       .scroll {
         width: 100%;
         height: 78%;
@@ -206,12 +236,16 @@
         align-items: center;
         gap: 10px;
         overflow: auto;
+        padding-bottom: 15px;
+        padding-top: 6px;
+
         &::-webkit-scrollbar {
           width: 0;
         }
       }
+
       .item {
-        width: 90%;
+        width: 95%;
         height: fit-content;
         display: flex;
         flex-direction: column;
@@ -223,16 +257,19 @@
           display: flex;
           align-items: center;
           gap: 5px;
+
           .icon {
             width: 15px;
             height: 15px;
             object-fit: contain;
             line-height: 14px;
-            & > img {
+
+            &>img {
               height: 100%;
               object-fit: contain;
             }
           }
+
           .txt {
             height: 15px;
             line-height: 15px;
@@ -241,6 +278,7 @@
             font-size: 12px;
           }
         }
+
         .text {
           width: 95%;
           height: fit-content;
@@ -248,7 +286,20 @@
           color: rgba(93, 96, 96, 1);
           font-size: 11px;
           line-height: 18px;
+          position: relative;
+
+          .textBj {
+            position: absolute;
+            top: -0%;
+            left: -0%;
+            width: 100%;
+            height: 100%;
+            max-width: 99999px;
+            max-height: 99999px;
+            object-fit: fill !important;
+          }
         }
+
         .from {
           width: 95%;
           height: fit-content;
@@ -259,6 +310,7 @@
         }
       }
     }
+
     .direct {
       width: 70px;
       height: 70px;
@@ -266,10 +318,49 @@
       left: 2%;
       bottom: 2%;
       cursor: pointer;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
     }
   }
 }
+
+// ------------移动端
+.DiscoverMo {
+  :global {
+    .right {
+      .item {
+        .title {
+          .icon {
+            position: relative;
+            top: -1px;
+            width: 18px;
+            height: 18px;
+          }
+
+          .txt {
+            font-size: 16px;
+          }
+        }
+
+        .text {
+          margin-top: 8px;
+          font-size: 16px;
+          line-height: 22px;
+
+
+        }
+
+        .from {
+          font-size: 14px;
+        }
+      }
+    }
+
+    .left {
+      .record1 {}
+    }
+  }
+}

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

@@ -1,7 +1,15 @@
 import React, { useState } from 'react'
 import styles from './index.module.scss'
-import { myData } from '@/utils/http'
+import { isPc } from '@/utils/http'
+import classNames from 'classnames'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+
 function Discover(props: { style?: React.CSSProperties }) {
+
+
+  const {myData} = useSelector((state: RootState) => state.A0Layout)
+
   // 将隐藏的页面打开，全景图->诗歌->大场景
   const lookScene = () => {
     const panoramicRoot = document.getElementById('panoramic-root') as HTMLElement
@@ -11,19 +19,19 @@ function Discover(props: { style?: React.CSSProperties }) {
   }
   const [isShowRecord, setIsShowRecord] = useState(true)
   return (
-    <div className={styles.Discover} style={props.style}>
+    <div className={classNames(styles.Discover, isPc ? '' : styles.DiscoverMo)} style={props.style}>
       {isShowRecord && (
         <div className='left'>
           <div className='record record1'>
             <div className='text'>
-              {
-                myData.discover.txt1Items.map((item, index) => (
+              {myData.discover.txt1Items.map((item, index) => (
+                <>
                   <span key={index}>
                     {item.title}
                     {index !== myData.discover.txt1Items.length - 1 && <br />}
                   </span>
-                ))
-              }
+                </>
+              ))}
             </div>
             <div className='btn' onClick={() => setIsShowRecord(false)}>
               查看流转轨迹
@@ -35,10 +43,12 @@ function Discover(props: { style?: React.CSSProperties }) {
               <div className='icon'>
                 <img src={require('@/assets/img/A7_rotate.png')} alt='' />
               </div>
-              <div className='btn' onClick={() => lookScene()}>场景漫游</div>
+              <div className='btn' onClick={() => lookScene()}>
+                场景漫游
+              </div>
             </div>
           </div>
-          <div className="arrow1"></div>
+          <div className='arrow1'></div>
           <div className='point point1'>
             <img src={require('@/assets/img/A7_point1.png')} alt='' />
           </div>
@@ -46,57 +56,57 @@ function Discover(props: { style?: React.CSSProperties }) {
             <img src={require('@/assets/img/A7_point1.png')} alt='' />
           </div>
         </div>
-      )
-      }
-      {
-        !isShowRecord && (
-          <div className='left2'>
-            {myData.discover.txt1Items.map((item, index) => (
-              <div className={`record ${'record' + (index + 3)}`} key={index}>
-                <div className='text'>{item.title}</div>
-              </div>
-            ))}
-            <div className='point point3'>
-              <img src={require('@/assets/img/A7_point2.png')} alt='' />
-            </div>
-            <div className='point point4'>
-              <img src={require('@/assets/img/A7_point2.png')} alt='' />
-            </div>
-            <div className='point point5'>
-              <img src={require('@/assets/img/A7_point2.png')} alt='' />
-            </div>
-            <div className="arrow2"></div>
-            <div className="arrow3"></div>
-            <div className='back' onClick={() => setIsShowRecord(true)}>
-              <img src={require('@/assets/img/A7_discover_back.png')} alt='' />
-              <div className="txt">返回</div>
+      )}
+      {!isShowRecord && (
+        <div className='left2'>
+          {myData.discover.txt1Items.map((item, index) => (
+            <div className={`record ${'record' + (index + 3)}`} key={index}>
+              <div className='text'>{item.title}</div>
             </div>
+          ))}
+          <div className='point point3'>
+            <img src={require('@/assets/img/A7_point2.png')} alt='' />
+          </div>
+          <div className='point point4'>
+            <img src={require('@/assets/img/A7_point2.png')} alt='' />
+          </div>
+          <div className='point point5'>
+            <img src={require('@/assets/img/A7_point2.png')} alt='' />
+          </div>
+          <div className='arrow2'></div>
+          <div className='arrow3'></div>
+          <div className='back' onClick={() => setIsShowRecord(true)}>
+            <img src={require('@/assets/img/A7_discover_back.png')} alt='' />
+            <div className='txt'>返回</div>
           </div>
-        )
-      }
+        </div>
+      )}
       <div className='right'>
         <div className='scroll'>
-          {
-            myData.discover.search.map((item, index) => (
-              <div className='item' key={index}>
-                <div className='title'>
-                  <div className='icon'>
-                    <img src={require('@/assets/img/A7base3_icon.png')} alt='' />
-                  </div>
-                  <div className='txt'>{item.title}</div>
+          {myData.discover.search.map((item, index) => (
+            <div className='item' key={index}>
+              <div className='title'>
+                <div className='icon'>
+                  <img src={require('@/assets/img/A7base3_icon.png')} alt='' />
                 </div>
-                <div className='text'>{item.txt}</div>
-                <div className='from'>{item.from}</div>
+                <div className='txt'>{item.title}</div>
               </div>
-            ))
-          }
+              <div className='text'>
+                {index === 0 ? (
+                  <img className='textBj' src={require('@/assets/sgImg/thrrTxtBg.png')} alt='' />
+                ) : null}
 
+                {item.txt}
+              </div>
+              <div className='from'>{item.from}</div>
+            </div>
+          ))}
         </div>
       </div>
       <div className='direct'>
         <img src={require('@/assets/img/A7_direct.png')} alt='' draggable={false} />
       </div>
-    </div >
+    </div>
   )
 }
 

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

@@ -1,9 +1,36 @@
-import React, { useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import styles from './index.module.scss'
-import { myData } from '@/utils/http'
-function Shuxing({ style }: { style?: React.CSSProperties }) {
+import { forwardRef, useImperativeHandle } from 'react'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+
+type Props ={
+  style:React.CSSProperties
+  ref:any
+}
+
+function Shuxing({ style }:Props,ref:any) {
+
+  const {myData} = useSelector((state: RootState) => state.A0Layout)
+
   const [currentIndex, setCurrentIndex] = useState(0)
   const [isShowDetail, setIsShowDetail] = useState(false)
+
+ // 让父组件调用，查看当前层级
+  const sonGetStaFu = useCallback(() => {
+    return isShowDetail
+  }, [isShowDetail])
+
+  const sonSetStaFu =useCallback(()=>{
+    setIsShowDetail(false)
+  },[])
+
+  // 可以让父组件调用子组件的方法
+  useImperativeHandle(ref, () => ({
+    sonGetStaFu,
+    sonSetStaFu
+  }))
+
   return (
     <div className={styles.Shuxing} style={style}>
       {!isShowDetail && (
@@ -46,6 +73,5 @@ function Shuxing({ style }: { style?: React.CSSProperties }) {
   )
 }
 
-const MemoShuxing = React.memo(Shuxing)
+export default forwardRef(Shuxing)
 
-export default MemoShuxing

src/pages/A7wjwj/index.module.scss

@@ -23,8 +23,8 @@
     .topBar {
       position: absolute;
       left: 50%;
-      top: 0;
-      transform: translate(-50%, 100%);
+      top: 6%;
+      transform: translateX(-50%);
       width: fit-content;
       height: 40px;
       display: flex;
@@ -49,8 +49,8 @@
             left: 50%;
             top: 50%;
             transform: translate(-50%, -56%);
-            width: 120%;
-            height: 100%;
+            width: 140%;
+            height: 110%;
             background: url('../../assets/img/A7_btn_ac.png') no-repeat center center;
             background-size: contain;
           }
@@ -71,3 +71,17 @@
     }
   }
 }
+
+
+// --------移动端
+.A7WjwjMo{
+  :global {
+    .topBar{
+      left: 55%;
+      .tab{
+        width: auto;
+        font-size: 20px;
+      }
+    }
+  }
+}

src/pages/A7wjwj/index.tsx

@@ -1,45 +1,58 @@
-import React, { useState } from "react";
-import styles from "./index.module.scss";
-import MenuSider from "@/components/MenuSider";
-import Discover from "./conponents/Discover";
-import Shuxing from "./conponents/Shuxing";
-import { myData } from "@/utils/http";
+import React, { useRef, useState } from 'react'
+import styles from './index.module.scss'
+import MenuSider from '@/components/MenuSider'
+import Discover from './conponents/Discover'
+import Shuxing from './conponents/Shuxing'
+import { isPc } from '@/utils/http'
+import classNames from 'classnames'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 function A7Wjwj() {
+
+  const {myData} = useSelector((state: RootState) => state.A0Layout)
+
   const [currentTab, setCurrentTab] = useState(0)
 
+  // 判断是 返回 属性之辩 上一级 还是说 返回上级页面
+  const tab2Ref = useRef<any>(null)
   const gotoBack = () => {
-    window.location.replace('#/base')
+    const flag = tab2Ref.current?.sonGetStaFu()
+    if (flag) tab2Ref.current?.sonSetStaFu()
+    else window.location.replace('#/base')
   }
   return (
-    <div className={styles.A7Wjwj}>
+    <div className={classNames(styles.A7Wjwj, isPc ? '' : styles.A7WjwjMo)}>
       {/* 发现之谜 */}
       <Discover style={{ display: currentTab === 0 ? 'flex' : 'none' }} />
       {/* 属性之辩 */}
-      <Shuxing style={{ display: currentTab === 1 ? 'flex' : 'none' }} />
+      <Shuxing ref={tab2Ref} style={{ display: currentTab === 1 ? 'flex' : 'none' }} />
       {/* 未解之思 */}
-      <div className="weijie" style={{ display: currentTab === 2 ? 'flex' : 'none' }}>
+      <div className='weijie' style={{ display: currentTab === 2 ? 'flex' : 'none' }}>
         {myData.weijie}
       </div>
 
-
-
-      <div className='back' onClick={() => gotoBack()}>
+      <div className={classNames('back', isPc ? '' : 'moBack')} onClick={() => gotoBack()}>
         <img src={require('@/assets/img/btn_back.png')} alt='' />
       </div>
 
-      <div className="topBar">
-        <div className={`tab ${currentTab === 0 ? 'active' : ''}`} onClick={() => setCurrentTab(0)}>发现之谜</div>
-        <div className={`tab ${currentTab === 1 ? 'active' : ''}`} onClick={() => setCurrentTab(1)}>属性之辩</div>
-        <div className={`tab ${currentTab === 2 ? 'active' : ''}`} onClick={() => setCurrentTab(2)}>未解之思</div>
+      <div className='topBar'>
+        <div className={`tab ${currentTab === 0 ? 'active' : ''}`} onClick={() => setCurrentTab(0)}>
+          发现之谜
+        </div>
+        <div className={`tab ${currentTab === 1 ? 'active' : ''}`} onClick={() => setCurrentTab(1)}>
+          属性之辩
+        </div>
+        <div className={`tab ${currentTab === 2 ? 'active' : ''}`} onClick={() => setCurrentTab(2)}>
+          未解之思
+        </div>
       </div>
 
       <MenuSider activeTab={2} />
-
     </div>
   )
 }
 
-const MemoA7Wjwj = React.memo(A7Wjwj);
+const MemoA7Wjwj = React.memo(A7Wjwj)
 
-export default MemoA7Wjwj;
+export default MemoA7Wjwj

src/store/reducer/layout.ts

@@ -27,8 +27,9 @@ const initState = {
     fu: () => {},
     state: false
   },
-  // home视频点击跳过
-  homeVideoFlag: false
+  // 总数据 - 中英文切换
+  myData: {} as MyDataType,
+  myLangue: 'ZH' as 'ZH' | 'EN'
 }
 
 // 定义 action 类型
@@ -38,7 +39,8 @@ type LayoutActionType =
   | { type: 'layout/lookBigImg'; payload: { url: string; show: boolean } }
   | { type: 'layout/lookDom'; payload: LookDomType }
   | { type: 'layout/message'; payload: MessageType }
-  | { type: 'layout/homeVideoFlag'; payload: boolean }
+  | { type: 'layout/myData'; payload: MyDataType }
+  | { type: 'layout/myLangue'; payload: 'ZH' | 'EN' }
   | {
       type: 'layout/closeUpFile'
       payload: {
@@ -67,9 +69,11 @@ export default function layoutReducer(state = initState, action: LayoutActionTyp
     // 上传文件点击取消
     case 'layout/closeUpFile':
       return { ...state, closeUpFile: action.payload }
-    // home视频点击跳过
-    case 'layout/homeVideoFlag':
-      return { ...state, homeVideoFlag: action.payload }
+    // 中英文切换
+    case 'layout/myData':
+      return { ...state, myData: action.payload }
+    case 'layout/myLangue':
+      return { ...state, myLangue: action.payload }
 
     default:
       return state

src/types/declaration.d.ts

@@ -12,6 +12,7 @@ declare const baseUrlLoc: string
 declare const baseUrlAtl: string
 declare const isPcTemp: boolean
 declare const myDataTemp: MyDataType
+declare const myDataTemp2: MyDataType
 declare const otherUrlTemp: string
 declare const myHotInfo: any
 declare const apiUrlTemp: string
@@ -19,7 +20,7 @@ declare const apiUrlTemp: string
 // 微信浏览器--视频转画布
 declare const F_Video: any
 
-type MyDataType = {
+ type MyDataType = {
   isLdong: boolean
   baseInfo: { title: string; text: string; path: string }[]
   introInfo: { title: string; text: string }[]

src/utils/http.ts

@@ -3,8 +3,6 @@ export const isLoc = true
 
 export const baseURL = isLoc ? baseUrlLoc : baseUrlAtl
 
-// 所有数据
-export const myData = myDataTemp 
 
 // 是不是pc端
 export const isPc = isPcTemp

src/utils/storage.ts

@@ -1,44 +1,26 @@
-// ------------------------------------token的本地存储------------------------------------
+import store from '@/store'
 
-// 点赞的本时间戳
-const TIME_KEY = 'HNBWY_WEB_TIME_NUM'
+// ----------------------中英文本地存储
+const LANGUE_KEY = 'CZB_WEB_LANGUE'
 
 /**
- * 从本地缓存中获取时间戳
+ * 从本地缓存中获取语言
  */
-const locGetTimeFu = (): string => {
-  return localStorage.getItem(TIME_KEY) || ''
+export const locGetLangue = (): 'ZH' | 'EN' => {
+  return (localStorage.getItem(LANGUE_KEY) || 'ZH') as 'ZH' | 'EN'
 }
 
 /**
- * 存入时间戳
+ * 从本地存语言
  */
-export const locSetTimeFu = (): void => {
-  // 获取当天0点时间戳
-  const timestamp = new Date().setHours(0, 0, 0, 0)
-  localStorage.setItem(TIME_KEY, timestamp + '')
+export const locSetLangue = (val: 'ZH' | 'EN') => {
+  localStorage.setItem(LANGUE_KEY, val)
 }
 
-/**
- * true:表示没有时间戳/超过22小时（可以点赞）
- * 获取本地缓存中的时间戳是不是存在/有没有超过22小时
- */
-export const locTimeFlagFu = (): boolean => {
-  let flag = false
-  const time = locGetTimeFu()
-
-  if (time) {
-    const timeNum = Number(time)
-    // 获取当天0点时间戳
-    const nowTime = new Date().setHours(0, 0, 0, 0)
-    if (nowTime !== timeNum) {
-      // 过了0点了
-      flag = true
-    }
-  } else {
-    // 还没有存入时间戳，可以点赞
-    flag = true
-  }
-
-  return flag
+// 设置仓库语言
+export const setStoreLangueFu = () => {
+  const val = locGetLangue()
+  store.dispatch({ type: 'layout/myLangue', payload: val })
+  const myData = val === 'ZH' ? myDataTemp : myDataTemp2
+  store.dispatch({ type: 'layout/myData', payload: myData })
 }