首页 发现 帮助
注册 登录
lanxin
/
Chengzhebei
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

改不动了

shaogen1995 1 月之前
父节点
8b91dd1813
当前提交
1761193c12
共有 13 个文件被更改，包括 281 次插入 和 290 次删除
分列视图 显示文件统计
  1. 1 5
      public/index.html
  2. 二进制
      public/myData/home.mp4
  3. 10 2
      public/myData/myData.js
  4. 1 1
      src/App.tsx
  5. 0 124
      src/AppTemp.tsx
  6. 6 6
      src/assets/styles/base.less
  7. 77 70
      src/pages/A2yblm/components/ModalTxt/index.tsx
  8. 40 11
      src/pages/A2yblm/index.tsx
  9. 15 3
      src/pages/A7wjwj/conponents/Content/index.module.scss
  10. 38 6
      src/pages/A7wjwj/conponents/Discover/index.module.scss
  11. 75 53
      src/pages/A7wjwj/conponents/Discover/index.tsx
  12. 17 9
      src/pages/A7wjwj/index.module.scss
  13. 1 0
      src/pages/A7wjwj/index.tsx

+ 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')

二进制
public/myData/home.mp4
查看文件


+ 10 - 2
public/myData/myData.js
查看文件 

@@ -760,8 +760,16 @@ const myDataTemp = {
 
     }
 
   ],
 
   // 未解之思
 
-  weijie:
 
-    '&emsp;&emsp;驻足程哲碑前，千年北朝遗风扑面而来。自碑文释读至图像考辨，从世系梳理到艺术探析，循先贤著录与学界成果，仅窥其半部过往。历史如浩渺沧海，此碑乃独特浪花，蕴藏无尽深意，或待新证解锁谜底，或随岁月沉淀成谜。这份未知让碑刻历久鲜活，留下跨越时空的学术与人文探寻空间，也彰显了中华民族文化的深厚底蕴与持久生命力。',
 
+  weijie: `<p>驻足程哲碑前，</p>
 
+<p>千年北朝遗风扑面而来。</p>
 
+<p>自碑文释读至图像考辨，</p>
 
+<p>从世系梳理到艺术探析，</p>
 
+<p>循先贤著录与学界成果，</p>
 
+<p>仅窥其半部过往。</p>
 
+<p>历史如浩渺沧海，此碑乃独特浪花，蕴藏无尽深意，</p>
 
+<p>或待新证解锁谜底，或随岁月沉淀成谜。</p>
 
+<p>这份未知让碑刻历久鲜活，留下跨越时空的学术与人文探寻空间，</p>
 
+<p>也彰显了中华民族文化的深厚底蕴与持久生命力。</p>`,
 
   // 造像中国化
 
   sinicizeDataStatic: {
 
     desc: '北朝佛教造像艺术受朝代更迭和不同民族文化的影响，呈现出多样化的艺术表现形式，形成了从古印度风格到中原风格的过渡，完成了佛教造像中国化的进程，并奠定了中国佛教造像艺术的基础。这一进程不仅体现在服饰形制、面相风貌的演变上，更深层地反映在造像所承载的宗教情感与社会伦理的融合之中。',

+ 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 /> */}
 
-    </>
 
-  )
 
-}

+ 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;
 
       }

+ 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) => (

+ 17 - 9
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,27 +65,30 @@
 
 
     // 未解之思
 
     .weijie {
 
-      overflow-y: auto;
 
       width: 100%;
 
       height: 98%;
 
       position: relative;
 
-      padding: 100px 50px 0 50px;
 
       color: rgba(93, 96, 96, 1);
 
-      font-size: 18px;
 
+      font-size: 16px;
 
       letter-spacing: 4px;
 
-      line-height: 30px;
 
-      text-align: justify;
 
+      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;
 
       }

+ 1 - 0
src/pages/A7wjwj/index.tsx
查看文件 

@@ -21,6 +21,7 @@ function A7Wjwj() {
 
     if (flag) tab2Ref.current?.sonSetStaFu()
 
     else window.location.replace('#/base')
 
   }
 
+
 
   return (
 
     <div className={classNames(styles.A7Wjwj, isPc ? '' : styles.A7WjwjMo)}>
 
       {/* 发现之谜 */}