upp

src/assets/styles/base.css

@@ -395,10 +395,16 @@ textarea {
 #root #modalIframe {
   width: 100%;
   height: 100%;
-  border: none;
   position: fixed;
+  border: none;
   top: 0;
   left: 0;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  background-color: transparent;
+  /* 确保背景透明 */
 }
 .myFont {
   font-family: 'SimSun' !important;

src/assets/styles/base.less

@@ -518,9 +518,15 @@ textarea {
   height: 100%;
   position: fixed;
   border: none;
-  position: fixed;
   top: 0;
   left: 0;
+
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  background-color: transparent;
+  /* 确保背景透明 */
 }
 
 .myFont {

src/components/Zback/index.module.scss

@@ -0,0 +1,16 @@
+.Zback {
+  width: 80px;
+  height: 40px;
+  position: absolute;
+  z-index: 3;
+  top: 3%;
+  left: 4%;
+  cursor: pointer;
+
+  :global {
+    .backImg {
+      height: 100%;
+      object-fit: fill !important;
+    }
+  }
+}

src/components/Zback/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+
+type Props = {
+  clickFu: () => void
+}
+
+function Zback({ clickFu }: Props) {
+  const { myLangue } = useSelector((state: RootState) => state.A0Layout)
+
+  return (
+    <div className={styles.Zback} onClick={clickFu}>
+      <img
+        className='backImg'
+        src={require(`@/assets/img/btn_back${myLangue === 'EN' ? 'En' : ''}.png`)}
+        alt=''
+      />
+    </div>
+  )
+}
+
+const MemoZback = React.memo(Zback)
+
+export default MemoZback

src/pages/A0base/index.module.scss

@@ -127,10 +127,11 @@
 
         .inter {
           width: 100%;
-          height: 12px;
+          margin: 4px 0;
+          height: 24px;
           line-height: 12px;
           text-align: center;
-          font-size: 9px;
+          font-size: 16px;
           font-weight: 500;
         }
       }
@@ -139,12 +140,6 @@
       .inter_content_active {
         height: calc(100% - 50px);
         opacity: 1;
-
-        .inter {
-          margin: 4px 0;
-          height: 24px;
-          font-size: 16px;
-        }
       }
 
       .icon {
@@ -205,20 +200,35 @@
   }
 }
 
-// ------------移动端---------------
-
+// ------------英文版---------------
 .A0baseEn {
   :global {
     .A0baseContainner {
       .content {
+        display: block;
+
         .title {
+          display: flex;
+          align-items: center;
+          height: 73px;
           width: auto;
           max-width: 90%;
         }
-        .text{
-          height: 300px;
-          max-height: 9999px;
+
+        .text {
+          position: relative;
+          height: calc(100% - 60px);
           overflow: auto;
+          letter-spacing: 0px;
+          text-align: left;
+
+          &::-webkit-scrollbar {
+            width: 0px;
+          }
+        }
+
+        .btn::before {
+          left: 110px;
         }
       }
 
@@ -231,14 +241,25 @@
           padding: 0 10px 0 35px;
           align-items: center;
           justify-content: center;
-          text-align: left;
         }
+
         // .baseAc{
         //   padding-bottom: 8px;
         // }
       }
     }
 
+    .interact {
+      height: 220px;
+
+      .inter_content {
+        padding-bottom: 10px;
 
+        .inter {
+          line-height: 14px;
+          height: auto;
+        }
+      }
+    }
   }
 }

src/pages/A0base/index.tsx

@@ -55,7 +55,8 @@ function A0base() {
       <div className='interact'>
         <div className={`inter_content ${isOpenInteract ? 'inter_content_active' : ''}`}>
           <div className='inter' onClick={() => window.location.replace('#/byzh')}>
-            碑影智绘
+            {myLangue==='EN'?'Stele Shadow Intelligence Mapping':'碑影智绘'}
+            
           </div>
           <div
             className='inter'
@@ -65,7 +66,8 @@ function A0base() {
               })
             }}
           >
-            展览图谱
+            {myLangue==='EN'?'Exhibition Catalogue':'展览图谱'}
+            
           </div>
           <div
             className='inter'
@@ -75,12 +77,13 @@ function A0base() {
               })
             }}
           >
-            AI问答
+            {myLangue==='EN'?'AI Question Answering':'AI问答'}
+            
           </div>
         </div>
 
         <div className='icon' onClick={() => setIsOpenInteract(!isOpenInteract)}>
-          <img src={require('@/assets/img/interaction.png')} alt='' />
+          <img src={require(`@/assets/img/interaction${myLangue==='EN'?'En':''}.png`)} alt='' />
         </div>
       </div>
 

src/pages/A2yblm/index.module.scss

@@ -13,7 +13,7 @@
       flex-direction: column;
       position: absolute;
       z-index: 2;
-      top: 50%;
+      top: 51%;
       left: 5%;
       gap: 20px;
       transform: translateY(-50%);
@@ -25,15 +25,15 @@
         justify-content: center;
         background: url(../../assets/img/btn_tab.png) no-repeat center center;
         background-size: 100% 100%;
-        width: 65px;
-        height: 65px;
         text-align: center;
         line-height: 15px;
         letter-spacing: 1px;
-        font-size: 12px;
         font-weight: 500;
         color: #fbebbd;
         cursor: pointer;
+        width: 60px;
+        height: 60px;
+        font-size: 14px;
       }
 
       .tab_active {
@@ -43,57 +43,43 @@
       }
     }
 
-    .back {
-      width: 60px;
-      height: 30px;
-      position: absolute;
-      z-index: 3;
-      top: 3%;
-      left: 4%;
-      cursor: pointer;
-
-      & > img {
-        height: 100%;
-        object-fit: contain;
-      }
-    }
-
     // 文物鉴赏
     .wenwu {
-      width: 60px;
-      height: 60px;
       position: absolute;
       z-index: 3;
-      bottom: 3%;
-      left: 4%;
       cursor: pointer;
+      bottom: 2%;
+      left: 3.5%;
+      width: 70px;
+      height: 70px;
 
-      & > img {
+      &>img {
         height: 100%;
         object-fit: contain;
       }
     }
 
     .extra {
-      width: auto;
-      height: 25px;
+      width: fit-content;
+      bottom: 20%;
+      border-radius: 20px;
+      height: 40px;
+      gap: 5px;
       position: absolute;
       z-index: 1;
-      bottom: 18%;
       left: 4%;
       display: flex;
       align-items: center;
       justify-content: space-between;
       background-color: rgba(0, 0, 0, 0.5);
-      border-radius: 15px;
       padding: 0 8px;
       cursor: pointer;
 
       .icon {
-        width: 20px;
+        width: 28px;
         height: 100%;
 
-        & > img {
+        &>img {
           height: 100%;
           object-fit: contain;
         }
@@ -101,7 +87,7 @@
 
       .txt {
         width: fit-content;
-        font-size: 9px;
+        font-size: 14px;
         font-weight: 500;
         line-height: 25px;
         color: #fbebbd;
@@ -131,17 +117,17 @@
         height: 50px;
 
         .title {
-          font-size: 14px;
+          font-size: 18px;
           font-weight: 500;
           color: #fbebbd;
         }
 
         .close {
-          width: 50px;
-          height: 50px;
+          width: 80px;
+          height: 80px;
           cursor: pointer;
 
-          & > img {
+          &>img {
             height: 100%;
             object-fit: contain;
           }
@@ -149,14 +135,16 @@
       }
 
       .content {
+
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 3px;
+        font-weight: 400;
+        text-align: justify;
         padding-top: 40px;
-        font-size: 10px;
-        line-height: 15px;
-        font-weight: lighter;
         color: rgba(255, 255, 255, 1);
-        letter-spacing: 2px;
 
-        & > p {
+        &>p {
           padding-bottom: 15px;
         }
       }
@@ -216,6 +204,7 @@
       flex-direction: column;
       background: url('../../assets/img/A2_detail_bg.png') no-repeat center center;
       background-size: 100% 100%;
+
       .top {
         padding-right: 10px;
         width: 100%;
@@ -224,12 +213,13 @@
         align-items: center;
         justify-content: flex-end;
         position: relative;
+
         .title {
           width: fit-content;
           max-width: 120px;
           height: 100%;
           line-height: 30px;
-          font-size: 16px;
+          font-size: 20px;
           color: rgba(124, 75, 54, 1);
           letter-spacing: 1px;
           display: flex;
@@ -237,6 +227,7 @@
           gap: 2px;
         }
       }
+
       .arrow {
         width: 100px;
         position: absolute;
@@ -245,11 +236,13 @@
         transform: translate(-50%, -50%);
         display: flex;
         align-items: center;
+
         .tagInfoLine1 {
           width: 35px;
           height: 1px;
           border-top: 1px dashed rgba(124, 75, 54, 1);
         }
+
         .tagInfoLine2 {
           width: 45px;
           height: 1px;
@@ -262,11 +255,13 @@
           display: flex;
           align-items: center;
           justify-content: center;
+
           .dot {
             color: rgb(255, 233, 182);
-            font-size: 5px;
+            font-size: 10px;
           }
-          & > img {
+
+          &>img {
             width: 100%;
             height: 100%;
             object-fit: contain;
@@ -275,87 +270,29 @@
       }
 
       .content {
+        margin-top: 5px;
+        height: 240px;
         width: 100%;
         padding: 0 10px;
-        height: 110px;
         overflow-y: auto;
-        mask-image: linear-gradient(
-          to bottom,
-          rgba(0, 0, 0, 1) 0%,
-          rgba(0, 0, 0, 1) 80%,
-          /* 保留顶部70%不透明 */ rgba(0, 0, 0, 0) 100% /* 底部30%完全透明 */
-        );
-        -webkit-mask-image: linear-gradient(
-          to bottom,
-          rgba(0, 0, 0, 1) 0%,
-          rgba(0, 0, 0, 1) 80%,
-          rgba(0, 0, 0, 0) 100%
-        );
+        mask-image: linear-gradient(to bottom,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 80%,
+            /* 保留顶部70%不透明 */
+            rgba(0, 0, 0, 0) 100%
+            /* 底部30%完全透明 */
+          );
+        -webkit-mask-image: linear-gradient(to bottom,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 80%,
+            rgba(0, 0, 0, 0) 100%);
+
         &::-webkit-scrollbar {
           width: 0px;
         }
 
-        & > div {
-          color: #595547;
-          width: 100%;
-          height: 100%;
-
-          font-size: 10px;
-          line-height: 15px;
-
-          letter-spacing: 2px;
+        &>div {
           text-align: justify;
-        }
-      }
-    }
-  }
-}
-
-// ---------移动端
-.A2yblmMo {
-  :global {
-    .back {
-      width: 80px;
-      height: 40px;
-
-      img {
-        object-fit: fill !important;
-      }
-    }
-
-    .A2_tabBar {
-      top: 51%;
-
-      .tab {
-        width: 60px;
-        height: 60px;
-        font-size: 14px;
-      }
-    }
-
-    .wenwu {
-      bottom: 2%;
-      left: 3.5%;
-      width: 70px;
-      height: 70px;
-    }
-
-    .tagInfo {
-      .top {
-        .title {
-          font-size: 20px;
-
-          .dot {
-            font-size: 10px;
-          }
-        }
-      }
-
-      .content {
-        margin-top: 5px;
-        height: 240px;
-
-        & > div {
           width: 100%;
           height: 100%;
           font-size: 16px;
@@ -366,41 +303,21 @@
         }
       }
     }
+  }
+}
 
-    .extra {
-      width: fit-content;
-      bottom: 20%;
-      border-radius: 20px;
-      height: 40px;
-      gap: 5px;
-      .icon {
-        width: 28px;
-      }
-
-      .txt {
-        font-size: 14px;
-      }
-    }
-
-    .mzm {
-      .top {
-        .title {
-          font-size: 18px;
-        }
-
-        .close {
-          width: 80px;
-          height: 80px;
-        }
+// ---------移动端
+.A2yblmEn {
+  :global {
+    .info {
+      .label {
+        width: 84px;
+        text-align: center;
       }
 
       .content {
-        font-size: 16px;
-        line-height: 24px;
-        letter-spacing: 3px;
-        font-weight: 400;
-        text-align: justify;
+        width: calc(100% - 84px);
       }
     }
   }
-}
+}

src/pages/A2yblm/index.tsx

@@ -4,20 +4,18 @@ import { callIframeFu } from '@/utils/history'
 import Intro from '@/pages/A2yblm/components/Intro'
 import Detail from '@/pages/A2yblm/components/Detail'
 import ModalTxt from '@/pages/A2yblm/components/ModalTxt'
-import { isPc } from '@/utils/http'
 import MenuSider from '@/components/MenuSider'
 import classNames from 'classnames'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
+import Zback from '@/components/Zback'
 
 function A2yblm() {
-
-  const {myData} = useSelector((state: RootState) => state.A0Layout)
+  const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)
 
   const [currentTab, setCurrentTab] = useState('tab1')
 
   useEffect(() => {
-
     const urlAll = window.location.href
 
     if (urlAll.includes('?m=')) {
@@ -28,7 +26,7 @@ function A2yblm() {
 
   const [isShowTabBar, setIsShowTabBar] = useState(true)
   const [isShowMzmTitle, setIsShowMzmTitle] = useState(false)
-  const previousTab = useRef(currentTab);
+  const previousTab = useRef(currentTab)
 
   const [isOpenMzm, setIsOpenMzm] = useState(false)
   const [currentTagIndex, setCurrentTagIndex] = useState(1)
@@ -46,8 +44,6 @@ function A2yblm() {
 
   // 退出图像赏析时调用showHotspot(-1) 退出碑文解读时调用showInscription(-1)
   useEffect(() => {
-
-
     if (currentTab === 'tab2') setIsShowTag(true)
     if (currentTab !== 'tab2') {
       setCurrentTagIndex(1)
@@ -65,7 +61,7 @@ function A2yblm() {
     }
     callIframeFu('changePanel', currentTab === 'tab1' ? 1 : currentTab === 'tab2' ? 2 : 3)
 
-    previousTab.current = currentTab; // 更新前一个tab值
+    previousTab.current = currentTab // 更新前一个tab值
   }, [currentTab])
 
   const backToBase = () => {
@@ -75,12 +71,11 @@ function A2yblm() {
     window.location.replace('#/base')
   }
 
-
   // 底部文字
   const [bottomTxt, setBottomTxt] = useState('')
 
   return (
-    <div className={classNames(isPc ? '' : styles.A2yblmMo, styles.A2yblm)}>
+    <div className={classNames(myLangue === 'ZH' ? '' : styles.A2yblmEn, styles.A2yblm)}>
       {/* 左侧边 */}
       <div className='A2_tabBar' style={{ display: isShowTabBar ? 'flex' : 'none' }}>
         <div
@@ -110,9 +105,9 @@ function A2yblm() {
       </div>
 
       {/* 返回，文物鉴赏，全文鉴赏 */}
-      <div className='back' onClick={backToBase}>
-        <img src={require('@/assets/img/btn_back.png')} alt='' />
-      </div>
+
+      <Zback clickFu={() => backToBase()} />
+
       <div className='wenwu' onClick={gotoQuanwenOrWenwu}>
         <img
           src={require(`@/assets/img/A2_${currentTab === 'tab3' ? 'quanwen' : 'wenwu'}.png`)}
@@ -174,7 +169,11 @@ function A2yblm() {
         </div>
       )}
       {currentTab === 'tab3' && (
-        <ModalTxt setBottomTxt={(val) => setBottomTxt(val)} setIsShowTabBar={setIsShowTabBar} setIsShowMzmTitle={setIsShowMzmTitle} />
+        <ModalTxt
+          setBottomTxt={val => setBottomTxt(val)}
+          setIsShowTabBar={setIsShowTabBar}
+          setIsShowMzmTitle={setIsShowMzmTitle}
+        />
       )}
 
       {/* menu界面 */}
@@ -189,7 +188,7 @@ function A2yblm() {
               : myData.detail_modal.top[currentTagIndex].title}
           </div>
         </div>
-        <div className="arrow">
+        <div className='arrow'>
           <div className='tagInfoLine1'></div>
           <div className='tagInfoLine2'></div>
           <div className='icon'>
@@ -198,11 +197,14 @@ function A2yblm() {
           </div>
         </div>
         <div className='content'>
-          <div dangerouslySetInnerHTML={{
-            __html: currentTagIndex >= myData.detail_modal.top.length
-              ? myData.detail_modal.bottom[currentTagIndex - myData.detail_modal.top.length].txt
-              : myData.detail_modal.top[currentTagIndex].txt
-          }}></div>
+          <div
+            dangerouslySetInnerHTML={{
+              __html:
+                currentTagIndex >= myData.detail_modal.top.length
+                  ? myData.detail_modal.bottom[currentTagIndex - myData.detail_modal.top.length].txt
+                  : myData.detail_modal.top[currentTagIndex].txt
+            }}
+          ></div>
         </div>
       </div>
     </div>