up

src/assets/styles/base.css

@@ -248,7 +248,7 @@ textarea {
     height: 100%;
     cursor: pointer;
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
     align-items: center;
   }
   #root .ant-tooltip .tooltip_MT .top .close > img {
@@ -370,7 +370,7 @@ textarea {
   height: 100%;
   cursor: pointer;
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
   align-items: center;
 }
 #root .ant-tooltip .tooltip_MT .top .close > img {

src/assets/styles/base.less

@@ -322,7 +322,7 @@ textarea {
         height: 100%;
         cursor: pointer;
         display: flex;
-        justify-content: end;
+        justify-content: flex-end;
         align-items: center;
 
         &>img {
@@ -484,7 +484,7 @@ textarea {
       height: 100%;
       cursor: pointer;
       display: flex;
-      justify-content: end;
+      justify-content: flex-end;
       align-items: center;
 
       &>img {

src/components/MenuSider/index.module.scss

@@ -1,14 +1,14 @@
 // 菜单
 .menu {
-  width: 50px;
-  height: 50px;
   position: fixed;
   z-index: 3;
-  top: 3%;
-  right: 3%;
   cursor: pointer;
+  top: 2%;
+  right: 2%;
+  width: 66px;
+  height: 66px;
 
-  & > img {
+  &>img {
     height: 100%;
     object-fit: contain;
   }
@@ -32,6 +32,7 @@
   &:global(.show) {
     opacity: 1;
     pointer-events: auto;
+
     :global {
       .sider {
         transition: all 0.3s ease-in-out 0.3s;
@@ -54,14 +55,14 @@
       display: flex;
       justify-content: flex-end;
 
-      & > img {
+      &>img {
         position: absolute;
-        height: 20px;
         top: 50%;
-        left: 0;
         transform: translateY(-50%);
         cursor: pointer;
         object-fit: contain;
+        height: 46px;
+        left: -6%;
       }
 
       .siderContent {
@@ -79,7 +80,7 @@
           text-align: center;
           width: 100%;
           height: 50px;
-          font-size: 17px;
+          font-size: 20px;
           font-weight: 500;
           color: rgba(124, 75, 54, 1);
           cursor: pointer;
@@ -96,7 +97,7 @@
             align-items: center;
             justify-content: center;
 
-            & > img {
+            &>img {
               width: 60%;
               height: 100%;
               object-fit: contain;
@@ -116,14 +117,14 @@
         .icon {
           position: relative;
           top: 60px;
-          width: 80%;
+          width: 65%;
           height: 60px;
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 10px;
 
-          & > div {
+          &>div {
             font-size: 10px;
             font-weight: lighter;
             color: #fff;
@@ -132,44 +133,9 @@
             align-items: center;
             justify-content: center;
 
-            & > img {
-              width: 30px;
-              object-fit: contain;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// ------------移动端页面---------
-.menuMo {
-  top: 2%;
-  right: 2%;
-  width: 66px;
-  height: 66px;
-}
-
-.menuSiderMo {
-  :global {
-    .sider {
-      img {
-        height: 46px;
-        left: -6%;
-      }
-
-      .siderContent {
-        .tab {
-          font-size: 20px;
-        }
-
-        .icon {
-          width: 65%;
-
-          & > div {
-            img {
+            &>img {
               width: 34px;
+              object-fit: contain;
             }
 
             .txt {
@@ -182,3 +148,12 @@
     }
   }
 }
+
+
+
+// 英文页面
+// .menuEn {}
+
+// .menuSiderEn {
+//   :global {}
+// }

src/components/MenuSider/index.tsx

@@ -1,13 +1,17 @@
 import React, { useState } from 'react'
 import styles from './index.module.scss'
 import classNames from 'classnames'
-import { isPc } from '@/utils/http'
 import { Toast } from 'antd-mobile'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 /**
  * @param activeTab 0:一碑两面 1:一碑万象 2:无尽未竟
  */
 function MenuSider({ activeTab }: { activeTab: number }) {
+
+  const {myLangue} =useSelector((state:RootState)=>state.A0Layout)
+
   const [isShowMenu, setIsShowMenu] = useState(false)
 
   const byzhClick = (activeTab: number) => {
@@ -22,7 +26,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
   return (
     <>
       <div
-        className={classNames(isPc ? '' : styles.menuMo, styles.menu)}
+        className={classNames(myLangue==='EN' ? styles.menuEn : '', styles.menu)}
         onClick={() => setIsShowMenu(true)}
       >
         <img src={require('@/assets/img/btn_menu.png')} alt='' />
@@ -31,7 +35,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
         className={classNames(
           styles.menuSider,
           isShowMenu ? 'show' : '',
-          isPc ? '' : styles.menuSiderMo
+          myLangue==='EN' ? styles.menuSiderEn : ''
         )}
       >
         <div className='sider'>

src/pages/A6ybwx/Genealogy/index.module.scss

@@ -10,8 +10,8 @@
   background-size: 100% 100%;
   :global {
     .back {
-      width: 60px;
-      height: 30px;
+      width: 80px;
+      height: 40px;
       position: absolute;
       z-index: 1;
       top: 3%;
@@ -19,15 +19,15 @@
       cursor: pointer;
       & > img {
         height: 100%;
-        object-fit: contain;
+        object-fit: fill !important;
       }
     }
     .icon1 {
-      width: 25px;
-      height: 25px;
+      width: 30px;
+      height: 30px;
       position: absolute;
       top: 4%;
-      left: 14%;
+      left: 16%;
       cursor: pointer;
       & > img {
         height: 100%;
@@ -107,13 +107,14 @@
       .big {
         width: 100%;
         height: 25px;
-        font-size: 22px;
+        font-size: 24px;
         color: rgba(255, 233, 182, 1);
+        margin-bottom: 8px;
       }
       .small {
         width: 100%;
         height: 25px;
-        font-size: 15px;
+        font-size: 16px;
         color: rgba(255, 255, 255, 1);
       }
       .sun {
@@ -139,14 +140,16 @@
     .content {
       width: 70%;
       height: 45%;
-      font-size: 15px;
+      font-size: 16px;
       color: rgba(209, 201, 178, 1);
       text-align: center;
+      line-height: 26px;
+      text-align: justify;
     }
     .close {
       cursor: pointer;
-      width: 55px;
-      height: 55px;
+      width: 70px;
+      height: 70px;
       & > img {
         height: 100%;
         object-fit: contain;

src/pages/A6ybwx/Genealogy/index.tsx

@@ -11,12 +11,13 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
   const [gestureState1, setGestureState1] = useState('')
 
   useEffect(() => {
-    if (!isShowIntro) setTimeout(() => {
-      setGestureState1('state1')
+    if (!isShowIntro)
       setTimeout(() => {
-        setGestureState1('')
-      }, 2000)
-    }, 500)
+        setGestureState1('state1')
+        setTimeout(() => {
+          setGestureState1('')
+        }, 2000)
+      }, 500)
   }, [isShowIntro])
 
   return (
@@ -32,36 +33,38 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
       <Graph setCurrentNodeIndex={setCurrentNodeIndex} />
       {/* <SvgGraph /> */}
 
-      {isShowGesture && <div className={`${styles.gesture} ${gestureState1}`} onClick={() => setIsShowGesture(false)}>
-        <img src={require('@/assets/img/A6_gen_gesture.png')} draggable='false' alt='' />
-        点击查看更多
-      </div>}
+      {isShowGesture && (
+        <div
+          className={`${styles.gesture} ${gestureState1}`}
+          onClick={() => setIsShowGesture(false)}
+        >
+          <img src={require('@/assets/img/A6_gen_gesture.png')} draggable='false' alt='' />
+          点击查看更多
+        </div>
+      )}
 
-      {
-        isShowIntro && (
-          <div className={styles.intro}>
-            <div className='title'>
-              <div className='big'>世系铭远</div>
-              <div className='small'>程哲碑所载家族谱系</div>
-              <div className='sun'></div>
-            </div>
-            <div className='line'>
-              <img src={require('@/assets/img/A6_gen_introline.png')} draggable='false' alt='' />
-            </div>
-            <div className='content'>
-              东魏时期，北魏末年战乱虽让门阀制度略有松动，
-              但家族血缘依旧是社会结构的核心纽带，北魏“以姓定族”“以族定贵”的门阀传统得以延续，家族的政治地位、世系传承与宗族凝聚力成为衡量社会地位的核心标准。
-              程哲碑的碑文通过追溯祖先，将上党程氏家族塑造为世代簪缨的望族。
-              在社会动荡的背景下，以先祖攀附、郡望嫁接来重新构建地方家族门阀秩序显得意义重大，
-              也是这一时期地方家族巩固、提升社会地位潮流的产物。
-            </div>
-            <div className='close' onClick={() => setIsShowIntro(false)}>
-              <img src={require('@/assets/img/closeWithTxt.png')} draggable='false' alt='' />
-            </div>
+      {isShowIntro && (
+        <div className={styles.intro}>
+          <div className='title'>
+            <div className='big'>世系铭远</div>
+            <div className='small'>程哲碑所载家族谱系</div>
+            <div className='sun'></div>
           </div>
-        )
-      }
-
+          <div className='line'>
+            <img src={require('@/assets/img/A6_gen_introline.png')} draggable='false' alt='' />
+          </div>
+          <div className='content'>
+            东魏时期，北魏末年战乱虽让门阀制度略有松动，
+            但家族血缘依旧是社会结构的核心纽带，北魏“以姓定族”“以族定贵”的门阀传统得以延续，家族的政治地位、世系传承与宗族凝聚力成为衡量社会地位的核心标准。
+            程哲碑的碑文通过追溯祖先，将上党程氏家族塑造为世代簪缨的望族。
+            在社会动荡的背景下，以先祖攀附、郡望嫁接来重新构建地方家族门阀秩序显得意义重大，
+            也是这一时期地方家族巩固、提升社会地位潮流的产物。
+          </div>
+          <div className='close' onClick={() => setIsShowIntro(false)}>
+            <img src={require('@/assets/img/closeWithTxt.png')} draggable='false' alt='' />
+          </div>
+        </div>
+      )}
 
       <div className={`${styles.nodeDetail} ${currentNodeIndex !== -1 ? 'showD' : 'hideD'}`}>
         <div className='sider'>
@@ -74,13 +77,18 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
               </div>
             </div>
           </div>
-          <div className='close' onClick={() => { setCurrentNodeIndex(-1); setIsShowGesture(false) }}>
+          <div
+            className='close'
+            onClick={() => {
+              setCurrentNodeIndex(-1)
+              setIsShowGesture(false)
+            }}
+          >
             <img src={require('@/assets/img/closeWithTxt2.png')} draggable='false' alt='' />
           </div>
         </div>
       </div>
-
-    </div >
+    </div>
   )
 }
 

src/pages/A6ybwx/index.tsx

@@ -48,7 +48,6 @@ function A6ybwx() {
       onSourceEstablished: () => {
         if (isEnter) setVideoOk(false)
         setVideoOk(true)
-       
       } //有足够的数据可以播放了
     }
     playerRef.current = F_Video('./myData/ybwx.ts', params)
@@ -69,11 +68,16 @@ function A6ybwx() {
     }
   }, [isEnter, videoOk])
 
-
   useEffect(() => {
     if (isEnter) {
       const A6ybwxIframe = document.getElementById('A6ybwxIframe') as HTMLIFrameElement
-      A6ybwxIframe.src = 'Beizhongshijie/index.html'
+      if (A6ybwxIframe) {
+        A6ybwxIframe.src = 'Beizhongshijie/index.html'
+        A6ybwxIframe.onload=()=>{
+          console.log('xxxxxxx加载');
+          
+        }
+      }
     }
   }, [isEnter])
 

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

@@ -61,7 +61,7 @@ function Content() {
         </div>
         <div className='content'>
           清光绪年间
-          <br /> 程哲碑发现后曾存于长治市上党区东呈村古佛堂
+          <br /> 程哲碑发现后曾存于长治市上党区东呈村古佛堂 
           <br /> 自北朝肇始，至宋金时期
           <br /> 这里始终佛事兴盛 <br /> 晨钟撞破晨雾，暮鼓漫过田畴
           <br /> 缭绕香火中，信众往来不绝 <br /> 梵音与尘世烟火相融共生
@@ -74,7 +74,7 @@ function Content() {
       {isShowScene ? (
         <iframe
           style={{ display: isShowScene ? 'block' : 'none' }}
-          id='wjwjScene'
+          id='wjwjScene'  
           title='wjwjScene'
           src='BigScene/index.html#/?m=SG-Oy6fyzoMQ0D'
         />