第三单元

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

@@ -5,8 +5,9 @@ function Content() {
   const [isShowScene, setIsShowScene] = useState(false)
   const [isShowPoem, setIsShowPoem] = useState(false)
   const [isShowPano, setIsShowPano] = useState(false)
-
+  const [currentLangue, setCurrentLangue] = useState('ZH')
   // 添加到全局，进入A7的时候触发
+  window.currentLangue = setCurrentLangue
   window.setIsShowPano = setIsShowPano
   // 阅读碑中故事
   window.backToyblm = () => {
@@ -48,7 +49,7 @@ function Content() {
   return (
     <div className={styles.content} id='pageIframe'>
       <div id='A7Back' onClick={() => onClickBack()}>
-        <img src='./myData/img/btn_back.png' alt='' />
+        <img src={`./myData/img/btn_back${currentLangue === 'EN' ? 'En' : ''}.png`} alt='' />
       </div>
 
       {isShowPano && !isShowScene ? (
@@ -65,16 +66,41 @@ function Content() {
           <div className='text'>跳过</div>
           <img src={require('@/assets/img/btn_skip.png')} alt='' />
         </div>
-        <div className='content'>
-          清光绪年间
-          <br /> 程哲碑发现后曾存于长治市上党区东呈村古佛堂
-          <br /> 自北朝肇始，至宋金时期
-          <br /> 这里始终佛事兴盛 <br /> 晨钟撞破晨雾，暮鼓漫过田畴
-          <br /> 缭绕香火中，信众往来不绝 <br /> 梵音与尘世烟火相融共生
-          <br /> 金石回响不绝于耳 <br /> 如今古佛堂已不闻往日佛事喧声 <br /> 只余静默殿宇矗立时光里
-          <br /> 驻足檐下 留下程哲碑的匆匆过往、古佛堂的繁华旧梦 <br />{' '}
-          留下一段未尽的怅惘与悠长想象。
-        </div>
+        {currentLangue === 'EN' ? (
+          <div className='content' style={{ overflow: 'auto', width: '83%', padding: '30px 0', height: '90%', justifyContent: 'start' }}>
+            During the Guangxu period of the Qing Dynasty
+            <br />
+            After its discovery, the Cheng Zhe Stele was once kept in the Ancient Buddhist Hall in
+            Dongcheng Village, Shangdang District, Changzhi City.
+            <br /> From the Northern Dynasties to the Song and Jin Dynasties
+            <br /> Buddhist activities have always flourished here.
+            <br />
+            The morning bell breaks through the morning mist, the evening drum sweeps across the
+            fields.
+            <br /> Amidst the swirling incense smoke, worshippers come and go in an endless stream.
+            <br /> Buddhist chants and everyday life coexist harmoniously.
+            <br /> The sound of metal and stone echoed endlessly.
+            <br />
+            Today, the ancient Buddhist hall is no longer filled with the sounds of Buddhist
+            rituals. <br />
+            Only the silent palaces remain standing in the passage of time.
+            <br /> Standing under the eaves, one can feel the fleeting past of Cheng Zhe's monument
+            and the bygone glory of the ancient Buddhist hall. <br />
+            It leaves behind an unfinished sense of melancholy and lingering imagination.
+          </div>
+        ) : (
+          <div className='content'>
+            清光绪年间
+            <br /> 程哲碑发现后曾存于长治市上党区东呈村古佛堂
+            <br /> 自北朝肇始，至宋金时期
+            <br /> 这里始终佛事兴盛 <br /> 晨钟撞破晨雾，暮鼓漫过田畴
+            <br /> 缭绕香火中，信众往来不绝 <br /> 梵音与尘世烟火相融共生
+            <br /> 金石回响不绝于耳 <br /> 如今古佛堂已不闻往日佛事喧声 <br />
+            只余静默殿宇矗立时光里
+            <br /> 驻足檐下 留下程哲碑的匆匆过往、古佛堂的繁华旧梦 <br />
+            留下一段未尽的怅惘与悠长想象。
+          </div>
+        )}
       </div>
 
       {isShowScene ? (

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

@@ -16,9 +16,11 @@ function Discover(props: { style?: React.CSSProperties }) {
 
     const panoramicRoot = document.getElementById('panoramic-root') as HTMLElement
     panoramicRoot.style.display = 'block'
+    // 切换语言
+    window.currentLangue(myLangue)
     // 打开全景图
     window.setIsShowPano(true)
-  }, [])
+  }, [myLangue])
   const [isShowRecord, setIsShowRecord] = useState(true)
 
   // 点击查看流转轨迹之后的动画

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

@@ -2,11 +2,9 @@
   width: 100%;
   height: 0px;
   position: relative;
-  overflow: hidden;
+  overflow: auto;
   top: 20%;
 
-
-
   :global {
     p {
       font-size: 16px;
@@ -14,7 +12,6 @@
       line-height: 28px;
       text-align: center;
       color: rgba(93, 96, 96, 1);
-
     }
   }
-}
+}

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

@@ -1,11 +1,47 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import styles from './index.module.scss'
 
 type Props = {
   txt: string
+  myLang: string
 }
 
-function Weijie({ txt }: Props) {
+function Weijie({ txt, myLang }: Props) {
+  // 自动跟着动画速度，内容滚动到div底部
+  useEffect(() => {
+    const weijie = document.getElementById('Weijie')
+    if (weijie) {
+      let interval: number
+      let t1 = setTimeout(() => {
+        if (myLang === 'EN') {
+          const scrollSpeed = 30 // 目标速度：30px/秒
+          const intervalMs = 100 // 每100ms滚动一次
+          const scrollStep = (scrollSpeed * intervalMs) / 1000 // 每次滚动的像素数
+
+          interval = window.setInterval(() => {
+            const maxScrollTop = weijie.scrollHeight - weijie.clientHeight
+            if (weijie.scrollTop < maxScrollTop) {
+              const nextScrollTop = Math.min(weijie.scrollTop + scrollStep, maxScrollTop)
+              weijie.scrollTop = nextScrollTop
+              if (nextScrollTop === maxScrollTop) {
+                clearInterval(interval)
+              }
+            } else {
+              clearInterval(interval)
+            }
+          }, intervalMs)
+        }
+      }, 3000)
+
+      // 清理函数：清除定时器
+      return () => {
+        clearTimeout(t1)
+        if (interval) {
+          clearInterval(interval)
+        }
+      }
+    }
+  }, [myLang, txt])
   return <div id='Weijie' className={styles.Weijie} dangerouslySetInnerHTML={{ __html: txt }}></div>
 }
 

src/pages/A7wjwj/index.tsx

@@ -58,10 +58,10 @@ function A7Wjwj() {
       {/* 属性之辨 */}
       <Shuxing ref={tab2Ref} style={{ display: currentTab === 1 ? 'flex' : 'none' }} />
       {/* 未解之思 */}
-      {currentTab === 2 ? <Weijie txt={myData.weijie} /> : null}
+      {currentTab === 2 ? <Weijie txt={myData.weijie} myLang={myLangue} /> : null}
 
       <div className={classNames('back', isPc ? '' : 'moBack')} onClick={() => gotoBack()}>
-        <img src={require('@/assets/img/btn_back.png')} alt='' />
+        <img src={require(`@/assets/img/btn_back${myLangue === 'EN' ? 'En' : ''}.png`)} alt='' />
       </div>
 
       <div className='topBar'>

src/types/function.d.ts

@@ -8,6 +8,7 @@ declare global {
     onModelControlled: () => void
     openPoem: () => void
     backToyblm: () => void
+    currentLangue: (langue: string) => void
     setIsShowPano: (isShow: boolean) => void
     unityLoading: (progress: number) => void
     loadSceneProgress: (progress: number) => void