Главная Обзор Помощь
Регистрация Вход
lanxin
/
Chengzhebei
1
0
Ответвить 0
Файлы Обсуждения 0 Запросы на слияние 0 Вики
Просмотр исходного кода

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

lanxin 1 месяц назад
Родитель
4017a62dff 1761193c12
Сommit
17d5edf60b
26 измененных файлов с 401 добавлено и 342 удалено
Разделённый вид Показать статистику Diff
  1. 1 5
      public/index.html
  2. BIN
      public/myData/baseEn.ts
  3. BIN
      public/myData/home.mp4
  4. BIN
      public/myData/homeEn.mp4
  5. 11 3
      public/myData/myData.js
  6. 1 1
      public/myData/myDataEN.js
  7. BIN
      public/myData/ybwx.mp4
  8. 1 1
      src/App.tsx
  9. 0 124
      src/AppTemp.tsx
  10. BIN
      src/assets/sgImg/homeBgEn.jpg
  11. 6 6
      src/assets/styles/base.less
  12. 36 3
      src/components/MenuSider/index.module.scss
  13. 10 9
      src/components/MenuSider/index.tsx
  14. 5 0
      src/pages/A0base/data.ts
  15. 4 1
      src/pages/A0base/index.tsx
  16. 4 4
      src/pages/A1home2/index.module.scss
  17. 52 25
      src/pages/A1home2/index.tsx
  18. 77 70
      src/pages/A2yblm/components/ModalTxt/index.tsx
  19. 40 11
      src/pages/A2yblm/index.tsx
  20. 15 3
      src/pages/A7wjwj/conponents/Content/index.module.scss
  21. 38 6
      src/pages/A7wjwj/conponents/Discover/index.module.scss
  22. 75 53
      src/pages/A7wjwj/conponents/Discover/index.tsx
  23. 18 11
      src/pages/A7wjwj/index.module.scss
  24. 5 5
      src/pages/A7wjwj/index.tsx
  25. 1 1
      src/types/declaration.d.ts
  26. 1 0
      src/utils/history.ts

+ 1 - 5
public/index.html
Просмотреть файл 

@@ -2,15 +2,13 @@
 
 <html lang="zh">
 
   <head>
 
     <meta charset="utf-8" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
     <meta name="theme-color" content="#000000" />
 
     <meta name="description" content="Web site created using create-react-app" />
 
     <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>
 
     <script src="./myData/f-video.js"></script>
 
 
@@ -43,8 +41,6 @@
 
     }
 
   </script>
 
 
-  <script src="./krpano.js"></script>
 
-
 
   <!-- <script>
 
     window.onload = function () {
 
       var script = document.createElement('script')

BIN
public/myData/baseEn.ts
Просмотреть файл


BIN
public/myData/home.mp4
Просмотреть файл


BIN
public/myData/homeEn.mp4
Просмотреть файл


Разница между файлами не показана из-за своего большого размера
+ 11 - 3
public/myData/myData.js


+ 1 - 1
public/myData/myDataEN.js
Просмотреть файл 

@@ -710,7 +710,7 @@ const myDataTemp2 = {
 
       }
 
     ]
 
   },
 
-  // 属性之辩
 
+  // 属性之辨
 
   shuxing: [
 
     {
 
       name: '霍扬碑',

BIN
public/myData/ybwx.mp4
Просмотреть файл


+ 1 - 1
src/App.tsx
Просмотреть файл 

@@ -96,7 +96,7 @@ export default function App() {
 
 
       if (width >= planSize.width) moveX = 0
 
       rootRef.current.style.left = '0'
 
-      rootRef.current.style.transform = `translate(${-moveX}px,${-moveY}px) scale(${sizeW},${sizeH}) rotate(0deg)`
 
+      rootRef.current.style.transform = `translate3d(${-moveX}px,${-moveY}px,0px) scale(${sizeW},${sizeH}) rotate(0deg)`
 
       rootRef.current.style.transformOrigin = 'center'
 
 
       store.dispatch({

+ 0 - 124
src/AppTemp.tsx
Просмотреть файл 

@@ -1,124 +0,0 @@
 
-import '@/assets/styles/base.css'
 
-// 关于路由
 
-import React, { useCallback, useEffect, useRef } from 'react'
 
-import { Router, Route, Switch } from 'react-router-dom'
 
-import history, { isMobiileFu } from './utils/history'
 
-import SpinLoding from './components/SpinLoding'
 
-// import { Image } from 'antd'
 
-// import { useSelector } from 'react-redux'
 
-// import store, { RootState } from './store'
 
-// import MessageCom from './components/Message'
 
-// import LookDom from './components/LookDom'
 
-import NotFound from '@/components/NotFound'
 
-const A1home = React.lazy(() => import('./pages/A1home2'))
 
-
 
-// 设计图按照 1920 X 919 来开发
 
-const planSize = {
 
-  width: isMobiileFu() ? 414 : 1920,
 
-  height: isMobiileFu() ? 736 : 919
 
-}
 
-
 
-export default function App() {
 
-  // 从仓库中获取查看图片的信息
 
-  // const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)
 
-
 
-  const rootRef = useRef<any>(null)
 
-
 
-  // 移动端存下来 最小屏幕数据 防止打开输入框的时候压缩高度
 
-  const moBaseObj = useRef({
 
-    num: 0,
 
-    scaleH: 0,
 
-    moveY: 0
 
-  })
 
-
 
-  const pageFullChangeFu = useCallback(() => {
 
-    let width = document.documentElement.clientWidth
 
-    let height = document.documentElement.clientHeight
 
-
 
-    // 屏幕改变的时候改变字体大小，这个项目暂时用不上
 
-    // // 1920 = 16px
 
-    // const bei = 1920 / 16;
 
-    // let res = Math.round(width / bei);
 
-    // if (res <= 10) res = 10;
 
-    // rootRef.current.style.setProperty("--fontNum", res + "px");
 
-
 
-    // 移动端开发 宽度限制最大500px
 
-    if (planSize.width <= 500) {
 
-      width = width >= 500 ? 500 : width
 
-      rootRef.current.style.margin = '0 auto'
 
-    }
 
-
 
-    const sizeW = width / planSize.width
 
-    let sizeH = height / planSize.height
 
-
 
-    const moveX = (planSize.width - width) / 2
 
-    let moveY = (planSize.height - height) / 2
 
-
 
-    // 移动端
 
-    if (height < moBaseObj.current.num) {
 
-      // 打开了键盘
 
-      document.querySelector('body')!.style.overflow = 'auto'
 
-      sizeH = moBaseObj.current.scaleH
 
-      moveY = moBaseObj.current.moveY
 
-    } else document.querySelector('body')!.style.overflow = 'hidden'
 
-
 
-    // console.log("-------", width, moveX);
 
-    rootRef.current.style.transform = `translate(${-moveX}px,${-moveY}px) scale(${sizeW},${sizeH})`
 
-  }, [])
 
-
 
-  useEffect(() => {
 
-    rootRef.current = document.querySelector('#root')
 
-    rootRef.current.style.width = planSize.width + 'px'
 
-    rootRef.current.style.height = planSize.height + 'px'
 
-
 
-    // 移动端
 
-    if (planSize.width <= 500) {
 
-      const height = document.documentElement.clientHeight
 
-
 
-      moBaseObj.current = {
 
-        num: height,
 
-        scaleH: height / planSize.height,
 
-        moveY: (planSize.height - height) / 2
 
-      }
 
-    }
 
-
 
-    pageFullChangeFu()
 
-
 
-    window.addEventListener('resize', pageFullChangeFu, false)
 
-  }, [pageFullChangeFu])
 
-
 
-  return (
 
-    <>
 
-      {/* 关于路由 */}
 
-      <Router history={history}>
 
-        <React.Suspense fallback={<SpinLoding />}>
 
-          <Switch>
 
-            <Route path='/' component={A1home} exact />
 
-            <Route path='*' component={NotFound} />
 
-          </Switch>
 
-        </React.Suspense>
 
-      </Router>
 
-
 
-      {/* 所有图片点击预览查看大图 */}
 
-      {/* <Image
 
-        preview={{
 
-          visible: lookBigImg.show,
 
-          src: lookBigImg.url,
 
-          onVisibleChange: value => {
 
-            // 清除仓库信息
 
-            store.dispatch({
 
-              type: 'layout/lookBigImg',
 
-              payload: { url: '', show: false }
 
-            })
 
-          }
 
-        }}
 
-      /> */}
 
-
 
-      {/* 查看视频音频 */}
 
-      {/* <LookDom /> */}
 
-
 
-      {/* antd 轻提示 ---兼容360浏览器 */}
 
-      {/* <MessageCom /> */}
 
-    </>
 
-  )
 
-}

BIN
src/assets/sgImg/homeBgEn.jpg
Просмотреть файл


+ 6 - 6
src/assets/styles/base.less
Просмотреть файл 

@@ -73,7 +73,7 @@ body #A7Back {
 
   left: 4%;
 
   cursor: pointer;
 
 
-  & > img {
 
+  &>img {
 
     height: 100%;
 
     object-fit: contain;
 
   }
 
@@ -84,7 +84,7 @@ body #A7Back {
 
   margin: auto;
 
   position: relative;
 
 
-  & > div {
 
+  &>div {
 
     width: 100%;
 
     height: 100%;
 
   }
 
@@ -213,7 +213,7 @@ textarea {
 
   bottom: 15px;
 
   right: 20px;
 
 
-  & > img {
 
+  &>img {
 
     position: absolute;
 
     top: 0;
 
     left: 0;
 
@@ -331,7 +331,7 @@ textarea {
 
         justify-content: flex-end;
 
         align-items: center;
 
 
-        & > img {
 
+        &>img {
 
           height: 90%;
 
           object-fit: contain;
 
         }
 
@@ -357,7 +357,7 @@ textarea {
 
     z-index: 3;
 
     cursor: pointer;
 
 
-    & > img {
 
+    &>img {
 
       height: 100%;
 
       object-fit: contain;
 
     }
 
@@ -493,7 +493,7 @@ textarea {
 
       justify-content: flex-end;
 
       align-items: center;
 
 
-      & > img {
 
+      &>img {
 
         height: 90%;
 
         object-fit: contain;
 
       }

+ 36 - 3
src/components/MenuSider/index.module.scss
Просмотреть файл 

@@ -154,6 +154,39 @@
 
 // 英文页面
 
 // .menuEn {}
 
 
-// .menuSiderEn {
 
-//   :global {}
 
-// }
 
+.menuSiderEn {
 
+  :global {
 
+    .sider .siderContent {
 
+      .tab {
 
+        .bottomLine {
 
+          bottom: 0px;
 
+        }
 
+      }
 
+
 
+      .tabAc {
 
+        .bottomLine {
 
+          bottom: 20px;
 
+        }
 
+      }
 
+
 
+      .icon {
 
+        width: 96%;
 
+        text-align: center;
 
+
 
+        &>div {
 
+          width: 50%;
 
+        }
 
+
 
+        .paint {
 
+          position: relative;
 
+          top: -12px;
 
+        }
 
+
 
+        .knowledge {
 
+          position: relative;
 
+          top: -22px;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}

+ 10 - 9
src/components/MenuSider/index.tsx
Просмотреть файл 

@@ -9,8 +9,7 @@ import { RootState } from '@/store'
 
  * @param activeTab 0:一碑两面 1:一碑万象 2:无尽未竟
 
  */
 
 function MenuSider({ activeTab }: { activeTab: number }) {
 
-
 
-  const {myLangue} =useSelector((state:RootState)=>state.A0Layout)
 
+  const { myLangue, myData } = useSelector((state: RootState) => state.A0Layout)
 
 
   const [isShowMenu, setIsShowMenu] = useState(false)
 
 
@@ -26,7 +25,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
 
   return (
 
     <>
 
       <div
 
-        className={classNames(myLangue==='EN' ? styles.menuEn : '', styles.menu)}
 
+        className={classNames(myLangue === 'EN' ? styles.menuEn : '', styles.menu)}
 
         onClick={() => setIsShowMenu(true)}
 
       >
 
         <img src={require('@/assets/img/btn_menu.png')} alt='' />
 
@@ -35,7 +34,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
 
         className={classNames(
 
           styles.menuSider,
 
           isShowMenu ? 'show' : '',
 
-          myLangue==='EN' ? styles.menuSiderEn : ''
 
+          myLangue === 'EN' ? styles.menuSiderEn : ''
 
         )}
 
       >
 
         <div className='sider'>
 
@@ -49,7 +48,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
 
               className={`tab ${activeTab === 0 ? 'tabAc' : ''}`}
 
               onClick={() => window.location.replace('#/yblm')}
 
             >
 
-              <div className='txt'>初识奇碑</div>
 
+              <div className='txt'>{myData.baseInfo[0].title}</div>
 
               <div className={`bottomLine`}>
 
                 <img
 
                   src={require(`@/assets/img/menu_item${activeTab === 0 ? '_ac.png' : '.png'}`)}
 
@@ -61,7 +60,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
 
               className={`tab ${activeTab === 1 ? 'tabAc' : ''}`}
 
               onClick={() => window.location.replace('#/ybwx')}
 
             >
 
-              <div className='txt'>融合之光</div>
 
+              <div className='txt'>{myData.baseInfo[1].title}</div>
 
               <div className={`bottomLine`}>
 
                 <img
 
                   src={require(`@/assets/img/menu_item${activeTab === 1 ? '_ac.png' : '.png'}`)}
 
@@ -73,7 +72,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
 
               className={`tab ${activeTab === 2 ? 'tabAc' : ''}`}
 
               onClick={() => window.location.replace('#/wjwj')}
 
             >
 
-              <div className='txt'>寻踪叩问</div>
 
+              <div className='txt'>{myData.baseInfo[2].title}</div>
 
               <div className={`bottomLine`}>
 
                 <img
 
                   src={require(`@/assets/img/menu_item${activeTab === 2 ? '_ac.png' : '.png'}`)}
 
@@ -84,7 +83,9 @@ function MenuSider({ activeTab }: { activeTab: number }) {
 
             <div className='icon'>
 
               <div className='paint' onClick={() => byzhClick(activeTab)}>
 
                 <img src={require('@/assets/img/icon_paint.png')} alt='' />
 
-                <div className='txt'>碑影智绘</div>
 
+                <div className='txt'>
 
+                  {myLangue === 'EN' ? 'Stele Shadow Intelligence Mapping' : '碑影智绘'}
 
+                </div>
 
               </div>
 
               <div className='knowledge'>
 
                 <img src={require('@/assets/img/icon_knowledge.png')} alt='' />
 
@@ -96,7 +97,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
 
                     })
 
                   }}
 
                 >
 
-                  知识图谱
 
+                  {myLangue === 'EN' ? 'Exhibition Catalogue' : '展览图谱'}
 
                 </div>
 
               </div>
 
               {/* <div className='poster'>

+ 5 - 0
src/pages/A0base/data.ts
Просмотреть файл 

@@ -2,5 +2,10 @@ export const unityDomShow = (val: boolean) => {
 
   const dom = document.querySelector('#modalIframe') as HTMLIFrameElement
 
   if (dom) {
 
     dom.style.display = val ? 'block' : 'none'
 
+    if(val){
 
+// 待完善
 
+    }else {
 
+
 
+    }
 
   }
 
 }

+ 4 - 1
src/pages/A0base/index.tsx
Просмотреть файл 

@@ -61,7 +61,10 @@ function A0base() {
 
       {/* 互动 */}
 
       <div className='interact'>
 
         <div className={`inter_content ${isOpenInteract ? 'inter_content_active' : ''}`}>
 
-          <div className='inter' onClick={() => window.location.replace('#/byzh')}>
 
+          <div className='inter' onClick={() => {
 
+            unityDomShow(false)
 
+            window.location.replace('#/byzh')
 
+          }}>
 
             {myLangue === 'EN' ? 'Stele Shadow Intelligence Mapping' : '碑影智绘'}
 
           </div>
 
           <div

+ 4 - 4
src/pages/A1home2/index.module.scss
Просмотреть файл 

@@ -6,8 +6,6 @@
 
 
   :global {
 
 
-
 
-
 
     // 背景图
 
     .homeImg {
 
       position: absolute;
 
@@ -37,8 +35,9 @@
 
       z-index: 10;
 
 
       //----------新加的初始视频
 
-      .A1baseVideo {
 
-
 
+      .A1baseVideo,
 
+      .A1baseVideo2 {
 
+        background-color: #c7bdab;
 
         position: absolute;
 
         top: 0;
 
         left: 0;
 
@@ -47,6 +46,7 @@
 
         z-index: 4;
 
       }
 
 
+
 
       .progress {
 
         width: 200px;
 
         height: 30px;

+ 52 - 25
src/pages/A1home2/index.tsx
Просмотреть файл 

@@ -17,23 +17,40 @@ function A1home() {
 
 
   // 开场视频-------------
 
   const [baseFlag, setBaseFlag] = useState(false)
 
+  const [baseFlag2, setBaseFlag2] = useState(false)
 
 
   const moveImg = useRef<any>(null)
 
+  const moveImg2 = useRef<any>(null)
 
+
 
+  // 视频准备
 
+  const videoCanvasFu = useCallback((val: 'EN' | 'ZH') => {
 
+    const params = {
 
+      objectFit: 'cover', // 视频的object-fit样式, 默认 cover
 
+      loop: true, // 是否循环, 默认false
 
+      autoplay: false, // 自动播放, 默认false
 
+      onSourceEstablished: () => {
 
+        if (val === 'EN') setBaseFlag(true)
 
+        else setBaseFlag2(true)
 
+      } //有足够的数据可以播放了
 
+    }
 
+
 
+    if (val === 'EN') {
 
+      moveImg.current = F_Video(`./myData/baseEN.ts`, params)
 
+      const dom = document.querySelector(`.A1baseVideo`)!
 
+      dom.append(moveImg.current.domElement)
 
+    } else {
 
+      moveImg2.current = F_Video(`./myData/base.ts`, params)
 
+      const dom = document.querySelector(`.A1baseVideo2`)!
 
+      dom.append(moveImg2.current.domElement)
 
+    }
 
+  }, [])
 
+
 
   useEffect(() => {
 
     if (baseImg) {
 
-      const params = {
 
-        objectFit: 'cover', // 视频的object-fit样式, 默认 cover
 
-        loop: true, // 是否循环, 默认false
 
-        autoplay: false, // 自动播放, 默认false
 
-        onSourceEstablished: () => {
 
-          setBaseFlag(true)
 
-        } //有足够的数据可以播放了
 
-      }
 
-      moveImg.current = F_Video('./myData/base.ts', params)
 
-      const dom = document.querySelector('.A1baseVideo')!
 
-      dom.append(moveImg.current.domElement)
 
+      videoCanvasFu('EN')
 
+      videoCanvasFu('ZH')
 
     }
 
-  }, [baseImg])
 
+  }, [baseImg, videoCanvasFu])
 
 
   const [loadOk, setLoadOk] = useState(false)
 
   const [progress, setProgress] = useState(0)
 
@@ -42,18 +59,19 @@ function A1home() {
 
     if (progress >= 100) {
 
       // 播放动态视频
 
       moveImg.current.play()
 
+      moveImg2.current.play()
 
     }
 
   }, [progress])
 
 
   useEffect(() => {
 
-    if (baseFlag) {
 
+    if (baseFlag && baseFlag2) {
 
       const modalIframe = document.getElementById('modalIframe') as HTMLIFrameElement | null
 
       if (modalIframe) {
 
         modalIframe.style.display = 'block'
 
         modalIframe.src = 'Chenzhebei-ShanxiMuseum/index.html'
 
       }
 
     }
 
-  }, [baseFlag])
 
+  }, [baseFlag, baseFlag2])
 
 
   // 过场视频-------------
 
   const videoRefLast = useRef<HTMLVideoElement>(null)
 
@@ -62,6 +80,7 @@ function A1home() {
 
     if (progress >= 100) {
 
       // 删除第一个动画和封面图
 
       moveImg.current.destroy()
 
+      moveImg2.current.destroy()
 
       domDelOwnFu('.A1baseVideo')
 
       // domDelOwnFu('.homeImg')
 
       setLoadOk(true)
 
@@ -84,12 +103,19 @@ function A1home() {
 
       <img
 
         onLoad={() => setBaseImg(true)}
 
         className='homeImg'
 
-        src={require('@/assets/sgImg/homeBg.jpg')}
 
+        src={require(`@/assets/sgImg/homeBg${myLangue === 'EN' ? 'En' : ''}.jpg`)}
 
         alt=''
 
       />
 
 
       <div className='loadingP' style={{ display: loadOk ? 'none' : 'flex' }}>
 
-        <div className='A1baseVideo' style={{ opacity: progress >= 100 ? 1 : 0 }}></div>
 
+        <div
 
+          className='A1baseVideo'
 
+          style={{ opacity: progress >= 100 ? 1 : 0, zIndex: myLangue === 'EN' ? 5 : 4 }}
 
+        ></div>
 
+        <div
 
+          className='A1baseVideo2'
 
+          style={{ opacity: progress >= 100 ? 1 : 0, zIndex: myLangue === 'ZH' ? 5 : 4 }}
 
+        ></div>
 
 
         <div className='btn' onClick={() => enter()}>
 
           {progress !== 100 ? (
 
@@ -109,10 +135,12 @@ function A1home() {
 
           hidden={progress < 100}
 
           onClick={() => {
 
             if (envFlag) {
 
-              locSetLangue(myLangue === 'ZH' ? 'EN' : 'ZH')
 
-              setTimeout(() => {
 
-                window.location.reload()
 
-              }, 200)
 
+              const res = myLangue === 'ZH' ? 'EN' : 'ZH'
 
+              locSetLangue(res)
 
+
 
+              // setTimeout(() => {
 
+              //   window.location.reload()
 
+              // }, 200)
 
             } else {
 
               Toast.show({
 
                 content: '正在开发中'
 
@@ -124,7 +152,7 @@ function A1home() {
 
         </div>
 
       </div>
 
       {/* 开场视频 */}
 
-      {baseFlag ? (
 
+      {baseFlag && baseFlag2 ? (
 
         <div className='A1videoBox' style={{ opacity: 1, zIndex: loadOk ? 10 : 0 }}>
 
           <video
 
             ref={videoRefLast}
 
@@ -132,10 +160,9 @@ function A1home() {
 
             webkit-playsinline='true'
 
             x5-video-player-type='h5'
 
             onEnded={() => window.location.replace('#/base')}
 
-          >
 
-            <source type='video/mp4' src='./myData/home.mp4' />
 
-            Your browser does not support the video tag.
 
-          </video>
 
+            src={`./myData/home${myLangue === 'EN' ? 'En' : ''}.mp4`}
 
+          />
 
+
 
           {loadOk ? (
 
             <Skip
 
               clickFu={() => {

+ 77 - 70
src/pages/A2yblm/components/ModalTxt/index.tsx
Просмотреть файл 

@@ -1,5 +1,5 @@
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
-import React, { useState, useEffect, useRef } from 'react'
 
+import React, { useState, useEffect, useRef, useCallback } from 'react'
 
 import styles from './index.module.scss'
 
 import { isPc } from '@/utils/http'
 
 import { Tooltip } from 'antd'
 
@@ -8,28 +8,37 @@ import classNames from 'classnames'
 
 import { modalTxtTab } from './data'
 
 import { useSelector } from 'react-redux'
 
 import { RootState } from '@/store'
 
+import { forwardRef, useImperativeHandle } from 'react'
 
 
-function ModalTxt({
 
-  setIsShowTabBar,
 
-  setIsShowMzmTitle,
 
-  setBottomTxt
 
-}: {
 
+type Props = {
 
   setIsShowTabBar: (isShowTabBar: boolean) => void
 
   setIsShowMzmTitle: (isShowMzmTitle: boolean) => void
 
   setBottomTxt: (val: string) => void
 
-}) {
 
+  ref: any
 
+}
 
 
- const {myData} = useSelector((state: RootState) => state.A0Layout)
 
+function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, ref: any) {
 
+  const { myData } = useSelector((state: RootState) => state.A0Layout)
 
 
   const [selectedTab, setSelectedTab] = useState(0)
 
   const selectedTabRef = useRef(0)
 
-  useEffect(() => {
 
-    selectedTabRef.current = selectedTab
 
-  }, [selectedTab])
 
 
-  useEffect(() => {
 
-    console.log(selectedTab, ',============')
 
-  }, [selectedTab])
 
+  useEffect(()=>{
 
+    selectedTabRef.current=selectedTab
 
+  },[selectedTab])
 
+
 
+  const sonSetStaFu = useCallback(() => {
 
+    setSelectedTab(0)
 
+  }, [])
 
+
 
+  // 可以让父组件调用子组件的方法
 
+  useImperativeHandle(ref, () => ({
 
+    sonSetStaFu
 
+  }))
 
+
 
+  // useEffect(() => {
 
+  //   console.log(selectedTab, ',============')
 
+  // }, [selectedTab])
 
 
   const [activeAId, setActiveAId] = useState<number | null>(null)
 
   const [showTooltip, setShowTooltip] = useState(-1)
 
@@ -39,7 +48,7 @@ function ModalTxt({
 
   const contentRef = useRef<any>(null)
 
   const originStartX = useRef<number>(0)
 
   const translateStartX = useRef<number>(0)
 
-  const contentStartX = useRef<number>(0)
 
+  // const contentStartX = useRef<number>(0)
 
 
   useEffect(() => {
 
     if (selectedTab !== 0) {
 
@@ -56,21 +65,21 @@ function ModalTxt({
 
   }, [selectedTab])
 
 
   useEffect(() => {
 
-    const tooltipContent = document.getElementById('tooltipContent')
 
+    // const tooltipContent = document.getElementById('tooltipContent')
 
     const OriContent = document.getElementById('OriContent')
 
-    const introContent = document.getElementById('introContent')
 
+    // const introContent = document.getElementById('introContent')
 
     const TransContent = document.getElementById('TransContent')
 
-    console.log(TransContent, 'TransContent')
 
+    // console.log(TransContent, 'TransContent')
 
     // // 新增滚动同步逻辑
 
-    let isSyncing = false
 
+    // let isSyncing = false
 
 
-    const syncScroll = (source: HTMLElement, target: HTMLElement) => {
 
-      if (!isSyncing) {
 
-        isSyncing = true
 
-        target.scrollTop = source.scrollTop
 
-        setTimeout(() => isSyncing = false, 100)
 
-      }
 
-    }
 
+    // const syncScroll = (source: HTMLElement, target: HTMLElement) => {
 
+    //   if (!isSyncing) {
 
+    //     isSyncing = true
 
+    //     target.scrollTop = source.scrollTop
 
+    //     setTimeout(() => isSyncing = false, 100)
 
+    //   }
 
+    // }
 
 
     const handleOriScroll = () => {
 
       if (OriContent && TransContent) {
 
@@ -110,7 +119,7 @@ function ModalTxt({
 
 
       if (OriContent && TransContent) {
 
         OriContent.scrollTop += deltaX * 0.06
 
-        console.log(OriContent.scrollTop, 'scrollTop')
 
+        // console.log(OriContent.scrollTop, 'scrollTop')
 
         TransContent.scrollTop = OriContent.scrollTop
 
       }
 
     }
 
@@ -128,7 +137,9 @@ function ModalTxt({
 
     // 处理触摸开始事件
 
 
     if (OriContent) {
 
-      OriContent.addEventListener('touchstart', (e) => { handleStart(e, originStartX) })
 
+      OriContent.addEventListener('touchstart', e => {
 
+        handleStart(e, originStartX)
 
+      })
 
       OriContent.addEventListener('touchmove', handlerOri)
 
       OriContent.addEventListener('scroll', handleOriScroll)
 
     }
 
@@ -145,25 +156,29 @@ function ModalTxt({
 
     //   }
 
     // }
 
     if (TransContent) {
 
-      console.log(TransContent, 'TransContent')
 
-      TransContent.addEventListener('touchstart', (e) => { handleStart(e, translateStartX) })
 
+      // console.log(TransContent, 'TransContent')
 
+      TransContent.addEventListener('touchstart', e => {
 
+        handleStart(e, translateStartX)
 
+      })
 
       TransContent.addEventListener('touchmove', handlerTrans)
 
       TransContent.addEventListener('scroll', handleTransScroll)
 
     }
 
     if (OriContent && TransContent) {
 
       return () => {
 
-        OriContent.removeEventListener('touchstart', (e) => { handleStart(e, originStartX) })
 
+        OriContent.removeEventListener('touchstart', e => {
 
+          handleStart(e, originStartX)
 
+        })
 
         OriContent.removeEventListener('touchmove', handlerOri) // 保持参数一致
 
         OriContent.removeEventListener('scroll', handleOriScroll)
 
-        TransContent.removeEventListener('touchstart', (e) => { handleStart(e, translateStartX) })
 
+        TransContent.removeEventListener('touchstart', e => {
 
+          handleStart(e, translateStartX)
 
+        })
 
         TransContent.removeEventListener('touchmove', handlerTrans) // 保持参数一致
 
         TransContent.removeEventListener('scroll', handleTransScroll)
 
       }
 
     }
 
-
 
   }, [selectedTab])
 
 
-
 
   //动态加入a标签
 
   const CommentLink = ({
 
     index,
 
@@ -176,10 +191,10 @@ function ModalTxt({
 
     define: string
 
     inset: string
 
   }) => {
 
-    const dragFlag = useRef(false); // 新增拖拽标志位
 
+    const dragFlag = useRef(false) // 新增拖拽标志位
 
 
     const handleClick = () => {
 
-      if (dragFlag.current) return; // 如果是拖拽操作则直接返回
 
+      if (dragFlag.current) return // 如果是拖拽操作则直接返回
 
       setActiveAId(index)
 
       setShowTooltip(index)
 
       const tooltip = document.querySelector('.ant-tooltip') as HTMLElement
 
@@ -208,11 +223,7 @@ function ModalTxt({
 
                 <img src={require('@/assets/img/close.png')} alt='' draggable='false' />
 
               </div>
 
             </div>
 
-            <div
 
-              className='content'
 
-              id='tooltipContent'
 
-              ref={contentRef}
 
-            >
 
+            <div className='content' id='tooltipContent' ref={contentRef}>
 
               {define}
 
             </div>
 
           </div>
 
@@ -227,14 +238,15 @@ function ModalTxt({
 
         <a
 
           key={index}
 
           className={activeAId === index ? 'active' : ''}
 
-          onTouchStart={() => dragFlag.current = false} // 触摸开始时重置标志位
 
-          onTouchMove={() => dragFlag.current = true}  // 检测到移动时标记为拖拽
 
-          onTouchEnd={(e) => {
 
-            if (!dragFlag.current) {  // 只有非拖拽操作才处理
 
-              handleClick();
 
+          onTouchStart={() => (dragFlag.current = false)} // 触摸开始时重置标志位
 
+          onTouchMove={() => (dragFlag.current = true)} // 检测到移动时标记为拖拽
 
+          onTouchEnd={e => {
 
+            if (!dragFlag.current) {
 
+              // 只有非拖拽操作才处理
 
+              handleClick()
 
             }
 
-            e.preventDefault();
 
-            e.stopPropagation();
 
+            e.preventDefault()
 
+            e.stopPropagation()
 
           }}
 
           onClick={handleClick}
 
         >
 
@@ -311,18 +323,19 @@ function ModalTxt({
 
     callIframeFu('showInscription', 0)
 
   }
 
 
-  const handleTabClick = (tabIndex: number, txt: string) => {
 
-    setBottomTxt(txt)
 
-
 
+  const handleTabClick = useCallback((tabIndex: number, txt: string) => {
 
     let index = tabIndex
 
-    if (selectedTabRef.current === index) index = 0
 
 
+    const flag = selectedTabRef.current === index
 
+
 
+    if (flag) index = 0
 
+    setBottomTxt(flag ? '' : txt)
 
     setSelectedTab(index)
 
     callIframeFu('showInscription', index === 0 ? -1 : index)
 
 
     if (index === 0) setIsShowMzmTitle(false)
 
   }
 
-
 
+,[setBottomTxt, setIsShowMzmTitle])
 
   return (
 
     <div className={classNames(styles.modalTxt, isPc ? '' : styles.modalTxtMo)} id='modalTxt'>
 
       <div className='modalTxtContainner'>
 
@@ -335,10 +348,15 @@ function ModalTxt({
 
           </div>
 
 
           {modalTxtTab.map((item, index) => (
 
-            <div key={item.key} className={`tab${index}`} onClick={() => handleTabClick(item.key, myData.readDetail[index]?.mzmtz?.title)}>
 
+            <div
 
+              key={item.key}
 
+              className={`tab${index}`}
 
+              onClick={() => handleTabClick(item.key, myData.readDetail[index]?.mzmtz?.title)}
 
+            >
 
               <img
 
-                src={require(`@/assets/img/btn_ModalTxt_bg${selectedTab === item.key ? '_ac' : ''
 
-                  }.png`)}
 
+                src={require(`@/assets/img/btn_ModalTxt_bg${
 
+                  selectedTab === item.key ? '_ac' : ''
 
+                }.png`)}
 
                 alt=''
 
               />
 
               <div className={`tabNub ${selectedTab === item.key ? 'tabNubAc' : ''}`}>
 
@@ -352,8 +370,6 @@ function ModalTxt({
 
               </div>
 
             </div>
 
           ))}
 
-
 
-
 
         </div>
 
 
         <div
 
@@ -371,11 +387,7 @@ function ModalTxt({
 
           <div className='detailTxt'>
 
             <div className='left'>
 
               <div className='title'>原文</div>
 
-              <div
 
-                className='txt'
 
-                ref={originRef}
 
-                id='OriContent'
 
-              >
 
+              <div className='txt' ref={originRef} id='OriContent'>
 
                 {CommentText({
 
                   str: myData.readDetail[selectedTab - 1].origin,
 
                   index: selectedTab - 1
 
@@ -398,9 +410,7 @@ function ModalTxt({
 
           <div className='content'>
 
             <div className='title myFont'>碑文概述</div>
 
             <div className='text'>
 
-              <p>
 
-                碑额留出高约15厘米的空白范围，仅在碑额左侧题写造碑日期。《山西通志》指出：其“碑额题‘大魏天平元年岁次甲寅十一月庚辰朔三日壬午造讫’岁月书额，唐贞观晋祠铭以前，此为仅见”。
 
-              </p>
 
+           
               <p>
 
                 程哲碑碑文，31行楷书，满行45字，字径约2厘米，带方界格，总计1404字；未刻正式碑名。通篇颂德程氏家族的历史功绩。
 
               </p>
 
@@ -411,7 +421,4 @@ function ModalTxt({
 
     </div>
 
   )
 
 }
 
-
 
-const MemoModalTxt = React.memo(ModalTxt)
 
-
 
-export default MemoModalTxt
 
+export default forwardRef(ModalTxt)

+ 40 - 11
src/pages/A2yblm/index.tsx
Просмотреть файл 

@@ -64,15 +64,22 @@ function A2yblm() {
 
     previousTab.current = currentTab // 更新前一个tab值
 
   }, [currentTab])
 
 
-  const backToBase = () => {
 
+  // 底部文字
 
+  const [bottomTxt, setBottomTxt] = useState('')
 
+
 
+  const backToBase = useCallback(() => {
 
     if (previousTab.current === 'tab3') {
 
       callIframeFu('showInscription', -1)
 
     }
 
-    window.location.replace('#/base')
 
-  }
 
+    if (bottomTxt) {
 
+      setBottomTxt('')
 
+      rightTopTabRef.current?.sonSetStaFu()
 
+    }
 
+    else window.location.replace('#/base')
 
+  }, [bottomTxt])
 
 
-  // 底部文字
 
-  const [bottomTxt, setBottomTxt] = useState('')
 
+  // 右上3个tab状态的时候点击返回按钮反选状态
 
+  const rightTopTabRef = useRef<any>(null)
 
 
   return (
 
     <div className={classNames(myLangue === 'ZH' ? '' : styles.A2yblmEn, styles.A2yblm)}>
 
@@ -82,22 +89,43 @@ function A2yblm() {
 
           className={`tab ${currentTab === 'tab1' ? 'tab_active' : ''}`}
 
           onClick={() => setCurrentTab('tab1')}
 
         >
 
-          {myLangue==='EN'?'':<>石碑<br/></>}
 
-          {myLangue==='EN'?'Introduction':'简介'}
 
+          {myLangue === 'EN' ? (
 
+            ''
 
+          ) : (
 
+            <>
 
+              石碑
 
+              <br />
 
+            </>
 
+          )}
 
+          {myLangue === 'EN' ? 'Introduction' : '简介'}
 
         </div>
 
         <div
 
           className={`tab ${currentTab === 'tab2' ? 'tab_active' : ''}`}
 
           onClick={() => setCurrentTab('tab2')}
 
         >
 
-          {myLangue==='EN'?'':<>图像<br/></>}
 
-          {myLangue==='EN'?'Appreciation':'赏析'}
 
+          {myLangue === 'EN' ? (
 
+            ''
 
+          ) : (
 
+            <>
 
+              图像
 
+              <br />
 
+            </>
 
+          )}
 
+          {myLangue === 'EN' ? 'Appreciation' : '赏析'}
 
         </div>
 
         <div
 
           className={`tab ${currentTab === 'tab3' ? 'tab_active' : ''}`}
 
           onClick={() => setCurrentTab('tab3')}
 
         >
 
-          {myLangue==='EN'?'':<>碑文<br/></>}
 
-          {myLangue==='EN'?'Interpretation':'解读'}
 
+          {myLangue === 'EN' ? (
 
+            ''
 
+          ) : (
 
+            <>
 
+              碑文
 
+              <br />
 
+            </>
 
+          )}
 
+          {myLangue === 'EN' ? 'Interpretation' : '解读'}
 
         </div>
 
       </div>
 
 
@@ -169,6 +197,7 @@ function A2yblm() {
 
       )}
 
       {currentTab === 'tab3' && (
 
         <ModalTxt
 
+          ref={rightTopTabRef}
 
           setBottomTxt={val => setBottomTxt(val)}
 
           setIsShowTabBar={setIsShowTabBar}
 
           setIsShowMzmTitle={setIsShowMzmTitle}

+ 15 - 3
src/pages/A7wjwj/conponents/Content/index.module.scss
Просмотреть файл 

@@ -3,6 +3,7 @@
 
   width: 100%;
 
   height: 100%;
 
   background-color: #699dd9;
 
+
 
   :global {
 
     #panoramic {
 
       width: 100%;
 
@@ -13,6 +14,7 @@
 
       left: 50%;
 
       transform: translate(-50%, -50%);
 
     }
 
+
 
     .poem {
 
       width: 100%;
 
       height: 100%;
 
@@ -26,6 +28,7 @@
 
       background: url('../../../../assets/img/A7Poem_bg.png') no-repeat center center;
 
       background-size: 100% 100%;
 
       backdrop-filter: blur(5px);
 
+
 
       .back {
 
         width: 120px;
 
         height: 60px;
 
@@ -34,11 +37,13 @@
 
         top: 3%;
 
         left: 4%;
 
         cursor: pointer;
 
-        & > img {
 
+
 
+        &>img {
 
           height: 100%;
 
           object-fit: contain;
 
         }
 
       }
 
+
 
       .skip {
 
         width: 135px;
 
         height: 60px;
 
@@ -51,17 +56,20 @@
 
         justify-content: center;
 
         gap: 10px;
 
         cursor: pointer;
 
+
 
         .text {
 
           width: 60px;
 
           font-size: 26px;
 
           font-weight: 600;
 
           color: rgba(255, 233, 182, 1);
 
         }
 
-        & > img {
 
+
 
+        &>img {
 
           height: 100%;
 
           object-fit: contain;
 
         }
 
       }
 
+
 
       .content {
 
         width: 60%;
 
         height: 100%;
 
@@ -93,13 +101,17 @@
 
             color: rgba(255, 233, 182, 1);
 
           }
 
         }
 
+
 
         .content {
 
           font-weight: 400;
 
           letter-spacing: 2px;
 
           font-size: 16px;
 
           line-height: 28px;
 
+          font-family: 'SimSun' !important;
 
+          text-shadow: 1px 1px 1px #f3b46d;
 
+
 
         }
 
       }
 
     }
 
   }
 
-}
 
+}

+ 38 - 6
src/pages/A7wjwj/conponents/Discover/index.module.scss
Просмотреть файл 

@@ -2,7 +2,7 @@
 
   width: 100%;
 
   height: 100%;
 
   display: flex;
 
-  justify-content: space-between;
 
+  justify-content: flex-end;
 
   align-items: center;
 
   position: relative;
 
 
@@ -12,9 +12,9 @@
 
     .left2 {
 
       width: 45%;
 
       height: 100%;
 
-      position: relative;
 
-      background: url('../../../../assets/img/A7_map1.png') no-repeat center bottom;
 
-      background-size: contain;
 
+      position: absolute;
 
+      top: 0;
 
+      left: 0;
 
 
       .record {
 
         width: fit-content;
 
@@ -29,6 +29,7 @@
 
         gap: 5px;
 
         padding: 10px;
 
         color: rgba(255, 255, 255, 1);
 
+        transition: opacity 0.5s;
 
 
         .text {
 
           font-size: 9px;
 
@@ -143,6 +144,9 @@
 
     }
 
 
     .left {
 
+      overflow: hidden;
 
+      transition: opacity 0.5s;
 
+
 
       .arrow1 {
 
         width: 13px;
 
         height: 62px;
 
@@ -153,9 +157,30 @@
 
         background: url('../../../../assets/img/A7_discover_arrow1.png') no-repeat center center;
 
         background-size: 100% 100%;
 
       }
 
+
 
+      .leftImg {
 
+        position: absolute;
 
+        top: 0;
 
+        left: 0;
 
+        width: 100%;
 
+        height: 100%;
 
+        background: url('../../../../assets/img/A7_map1.png') no-repeat center bottom;
 
+        background-size: contain;
 
+        transition: all 0.8s;
 
+
 
+      }
 
+
 
+      .leftImgMove {
 
+        opacity: 0;
 
+        transform: scale(4);
 
+      }
 
     }
 
 
     .left2 {
 
+      z-index: 2;
 
+      opacity: 0;
 
+      pointer-events: none;
 
+      transition: opacity 0.5s;
 
       background: url('../../../../assets/img/A7_map2.png') no-repeat center bottom;
 
       background-size: contain;
 
       position: relative;
 
@@ -222,6 +247,11 @@
 
       }
 
     }
 
 
+    .left2Ac {
 
+      opacity: 1;
 
+      pointer-events: auto;
 
+    }
 
+
 
     .right {
 
       margin-top: 160px;
 
       padding-bottom: 10px;
 
@@ -452,10 +482,12 @@
 
         }
 
 
       }
 
-      .back{
 
+
 
+      .back {
 
         width: 90px;
 
         height: 40px;
 
-        .txt{
 
+
 
+        .txt {
 
           font-size: 16px;
 
         }
 
       }

+ 75 - 53
src/pages/A7wjwj/conponents/Discover/index.tsx
Просмотреть файл 

@@ -1,4 +1,4 @@
 
-import React, { useState } from 'react'
 
+import React, { useEffect, useState } from 'react'
 
 import styles from './index.module.scss'
 
 import { isPc } from '@/utils/http'
 
 import classNames from 'classnames'
 
@@ -16,67 +16,89 @@ function Discover(props: { style?: React.CSSProperties }) {
 
     window.setIsShowPano(true)
 
   }
 
   const [isShowRecord, setIsShowRecord] = useState(true)
 
+
 
+  // 点击查看流转轨迹之后的动画
 
+  const [move, setMove] = useState(false)
 
+
 
+  useEffect(() => {
 
+    if (move) {
 
+      setTimeout(() => {
 
+        setIsShowRecord(false)
 
+      }, 800)
 
+    }
 
+  }, [move])
 
+
 
   return (
 
     <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) => (
 
-                <span key={index}>
 
-                  {item.title}
 
-                  {index !== myData.discover.txt1Items.length - 1 && <br />}
 
-                </span>
 
-              ))}
 
-            </div>
 
-            <div className='btn' onClick={() => setIsShowRecord(false)}>
 
-              查看流转轨迹
 
-            </div>
 
-          </div>
 
-          <div className='record record2'>
 
-            <div className='text'>清光绪年间（1879-1892） 长治市上党区东呈村</div>
 
-            <div className='btnContainer'>
 
-              <div className='icon'>
 
-                <img src={require('@/assets/img/A7_rotate.png')} alt='' />
 
-              </div>
 
-              <div className='btn' onClick={() => lookScene()}>
 
-                场景漫游
 
-              </div>
 
-            </div>
 
-          </div>
 
-          <div className='arrow1'></div>
 
-          <div className='point point1'>
 
-            <img src={require('@/assets/img/A7_point1.png')} alt='' />
 
+      <div className='left' style={{ opacity: isShowRecord ? 1 : 0 }}>
 
+        <div className={classNames('leftImg', move ? 'leftImgMove' : '')}></div>
 
+
 
+        <div className='record record1' style={{ opacity: move ? 0 : 1 }}>
 
+          <div className='text'>
 
+            {myData.discover.txt1Items.map((item, index) => (
 
+              <span key={index}>
 
+                {item.title}
 
+                {index !== myData.discover.txt1Items.length - 1 && <br />}
 
+              </span>
 
+            ))}
 
           </div>
 
-          <div className='point point2'>
 
-            <img src={require('@/assets/img/A7_point1.png')} alt='' />
 
+          <div
 
+            className='btn'
 
+            onClick={() => {
 
+              setMove(true)
 
+              // setIsShowRecord(false)
 
+            }}
 
+          >
 
+            查看流转轨迹
 
           </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 className='record record2' style={{ opacity: move ? 0 : 1 }}>
 
+          <div className='text'>清光绪年间（1879-1892） 长治市上党区东呈村</div>
 
+          <div className='btnContainer'>
 
+            <div className='icon'>
 
+              <img src={require('@/assets/img/A7_rotate.png')} alt='' />
 
+            </div>
 
+            <div className='btn' onClick={() => lookScene()}>
 
+              场景漫游
 
             </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 className='arrow1' style={{ opacity: move ? 0 : 1 }}></div>
 
+        <div className='point point1' style={{ opacity: move ? 0 : 1 }}>
 
+          <img src={require('@/assets/img/A7_point1.png')} alt='' />
 
+        </div>
 
+        <div className='point point2' style={{ opacity: move ? 0 : 1 }}>
 
+          <img src={require('@/assets/img/A7_point1.png')} alt='' />
 
+        </div>
 
+      </div>
 
+      <div className={classNames('left2', isShowRecord ? '' : 'left2Ac')}>
 
+        {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)
 
+            setMove(false)
 
+          }}
 
+        >
 
+          <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) => (

+ 18 - 11
src/pages/A7wjwj/index.module.scss
Просмотреть файл 

@@ -5,6 +5,7 @@
 
   height: 100%;
 
   background: url('../../assets/img/A7base3_bg.png') no-repeat center center;
 
   background-size: cover;
 
+
 
   :global {
 
     .back {
 
       width: 60px;
 
@@ -14,7 +15,8 @@
 
       top: 3%;
 
       left: 4%;
 
       cursor: pointer;
 
-      & > img {
 
+
 
+      &>img {
 
         height: 100%;
 
         object-fit: contain;
 
       }
 
@@ -34,6 +36,7 @@
 
       font-size: 17px;
 
       font-weight: bold;
 
       color: rgba(124, 75, 54, 1);
 
+
 
       .tab {
 
         position: relative;
 
         width: 70px;
 
@@ -41,8 +44,10 @@
 
         line-height: 40px;
 
         color: rgba(93, 96, 96, 0.8);
 
         cursor: pointer;
 
+
 
         &.active {
 
           color: rgba(124, 75, 54, 1);
 
+
 
           &::after {
 
             content: '';
 
             position: absolute;
 
@@ -60,28 +65,30 @@
 
 
     // 未解之思
 
     .weijie {
 
-      overflow-y: auto;
 
       width: 100%;
 
       height: 98%;
 
       position: relative;
 
-      text-indent: 2em;
 
-      padding: 80px 50px 0 50px;
 
       color: rgba(93, 96, 96, 1);
 
-      font-size: 18px;
 
-      letter-spacing: 2px;
 
-      line-height: 22px;
 
-      text-align: justify;
 
+      font-size: 16px;
 
+      letter-spacing: 4px;
 
+      line-height: 28px;
 
+      display: flex;
 
+      flex-direction: column;
 
+      align-items: center;
 
+      justify-content: center;
 
+      padding-top: 40px;
 
     }
 
   }
 
 }
 
 
 
 // --------移动端
 
-.A7WjwjMo{
 
+.A7WjwjMo {
 
   :global {
 
-    .topBar{
 
+    .topBar {
 
       left: 55%;
 
-      .tab{
 
+
 
+      .tab {
 
         width: auto;
 
         font-size: 20px;
 
       }

+ 5 - 5
src/pages/A7wjwj/index.tsx
Просмотреть файл 

@@ -14,22 +14,22 @@ function A7Wjwj() {
 
 
   const [currentTab, setCurrentTab] = useState(0)
 
 
-  // 判断是 返回 属性之辩 上一级 还是说 返回上级页面
 
+  // 判断是 返回 属性之辨 上一级 还是说 返回上级页面
 
   const tab2Ref = useRef<any>(null)
 
   const gotoBack = () => {
 
     const flag = tab2Ref.current?.sonGetStaFu()
 
     if (flag) tab2Ref.current?.sonSetStaFu()
 
     else window.location.replace('#/base')
 
   }
 
+
 
   return (
 
     <div className={classNames(styles.A7Wjwj, isPc ? '' : styles.A7WjwjMo)}>
 
       {/* 发现之谜 */}
 
       <Discover style={{ display: currentTab === 0 ? 'flex' : 'none' }} />
 
-      {/* 属性之辩 */}
 
+      {/* 属性之辨 */}
 
       <Shuxing ref={tab2Ref} style={{ display: currentTab === 1 ? 'flex' : 'none' }} />
 
       {/* 未解之思 */}
 
-      <div className='weijie' style={{ display: currentTab === 2 ? 'flex' : 'none' }}>
 
-        {myData.weijie}
 
+      <div className='weijie' dangerouslySetInnerHTML={{__html:myData.weijie}} style={{ display: currentTab === 2 ? 'flex' : 'none' }}>
 
       </div>
 
 
       <div className={classNames('back', isPc ? '' : 'moBack')} onClick={() => gotoBack()}>
 
@@ -41,7 +41,7 @@ function A7Wjwj() {
 
           发现之谜
 
         </div>
 
         <div className={`tab ${currentTab === 1 ? 'active' : ''}`} onClick={() => setCurrentTab(1)}>
 
-          属性之辩
 
+          属性之辨
 
         </div>
 
         <div className={`tab ${currentTab === 2 ? 'active' : ''}`} onClick={() => setCurrentTab(2)}>
 
           未解之思

+ 1 - 1
src/types/declaration.d.ts
Просмотреть файл 

@@ -41,7 +41,7 @@ type MyDataType = {
 
     txt1Items: { title: string }[]
 
     search: { title: string; txt: string; from: string }[]
 
   }
 
-  // 属性之辩
 
+  // 属性之辨
 
   shuxing: {
 
     name: string
 
     time: string

+ 1 - 0
src/utils/history.ts
Просмотреть файл 

@@ -29,6 +29,7 @@ export const backPageFu = (path: string) => {
 
   else window.location.replace(path)
 
 }
 
 
+
 
 // 调用iframe方法
 
 export const callIframeFu = (fuName: string, params: any,type?:string) => {
 
   const dom = document.getElementById('modalIframe') as HTMLIFrameElement | null;