第一单元英文版

src/App.tsx

@@ -70,7 +70,7 @@ export default function App() {
     API_getVideoFu()
   }, [API_getVideoFu])
 
-  const { myData, unityDel } = useSelector((state: RootState) => state.A0Layout)
+  const { myData, unityDel, myLangue } = useSelector((state: RootState) => state.A0Layout)
 
   // 判断是中文还是英文
   useEffect(() => {
@@ -1054,13 +1054,13 @@ export default function App() {
         <Image
           preview={{
             closeIcon: (
-              <img src={require('@/assets/img/closeWithTxt.png')} draggable='false' alt='' />
+              <img src={require(`@/assets/img/${myLangue === 'EN' ? 'closeWithTxt_E' : 'closeWithTxt'}.png`)} draggable='false' alt='' />
             ),
             imageRender: originalNode => (
               < div className='previewImage'  >
                 <TouchContainer className='Ori' zoom={lookBigImg.zoom}>{originalNode}</TouchContainer>
                 <div className='ImgFromTxt'>{lookBigImg.fromTxt}</div>
-                {lookBigImg.url.includes('tapian') || lookBigImg.url.includes('xiantu') ? <QuanwenBtns name={lookBigImg.url.includes('tapian') ? 'tapian' : 'xiantu'} /> : null}
+                {lookBigImg.url.includes('tapian') || lookBigImg.url.includes('xiantu') ? <QuanwenBtns isEn={myLangue === 'EN'} name={lookBigImg.url.includes('tapian') ? 'tapian' : 'xiantu'} /> : null}
               </div >
             ),
             visible: lookBigImg.show,

src/assets/styles/base.css

@@ -7,7 +7,7 @@
   font-family: 'SimHei', 'SimSun', 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
 }
 video {
-  object-fit: cover;
+  object-fit: fill;
   width: 100%;
   height: 100%;
 }

src/assets/styles/base.less

@@ -9,7 +9,7 @@
 }
 
 video {
-  object-fit: cover;
+  object-fit: fill;
   width: 100%;
   height: 100%;
 }

src/components/MenuSider/index.module.scss

@@ -155,6 +155,8 @@
   :global {
     .sider .siderContent {
       .tab {
+        padding: 0 20px;
+        font-size: 15px;
         .bottomLine {
           bottom: 0px;
         }
@@ -162,7 +164,7 @@
 
       .tabAc {
         .bottomLine {
-          bottom: 20px;
+          bottom: 10px;
         }
       }
 

src/components/MenuSider/index.tsx

@@ -91,13 +91,13 @@ function MenuSider({ activeTab }: { activeTab: number }) {
               <div className='paint' onClick={() => byzhClick(activeTab)}>
                 <img src={require('@/assets/img/icon_paint.png')} alt='' />
                 <div className='txt'>
-                  {myLangue === 'EN' ? 'Stele Shadow Intelligence Mapping' : '碑影智绘'}
+                  {myLangue === 'EN' ? 'Smart Stone Carving' : '碑影智绘'}
                 </div>
               </div>
               <div className='knowledge'>
                 <img src={require('@/assets/img/icon_knowledge.png')} alt='' />
                 <div className='txt' onClick={() => toEchPageFu()}>
-                  {myLangue === 'EN' ? 'mapping knowledge domain' : '展览图谱'}
+                  {myLangue === 'EN' ? 'Exhibition Atlas' : '展览图谱'}
                 </div>
               </div>
               {/* <div className='poster'>

src/components/QuanwenBtns/index.module.scss

@@ -52,3 +52,27 @@
     }
   }
 }
+
+// 英文按钮
+.tapianBtnsEn {
+  width: 240px !important;
+  height: 500px !important;
+  left: 0;
+  :global {
+    .btn {
+      padding: 0 30px 0px 6px;
+      background: url(../../assets/sgImg/Component_E.png) no-repeat center center;
+      background-size: 100% 100%;
+      line-height: 30px;
+      letter-spacing: 0px;
+      width: 240px;
+      height: 100px;
+      font-size: 23px;
+    }
+    .btnAc {
+      padding: 0 30px 10px 6px;
+      background: url(../../assets/sgImg/ComponentAc_E.png) no-repeat center center;
+      background-size: 100% 100%;
+    }
+  }
+}

src/components/QuanwenBtns/index.tsx

@@ -7,27 +7,28 @@ import { isMobiileFu } from '@/utils/history'
 
 type props = {
   name: string
+  isEn?: boolean
 }
 // name: tapian or xiantu
-function QuanwenBtns({ name }: props) {
+function QuanwenBtns({ name, isEn = false }: props) {
   const [currentActive, setCurrentActive] = useState(1)
   return (
-    <div className={styles.tapianBtns}>
+    <div className={`${styles.tapianBtns} ${isEn ? styles.tapianBtnsEn : ''}`}>
       <div className={`btn songFont ${currentActive === 1 ? 'btnAc' : ''}`} onClick={() => {
         setCurrentActive(1)
         store.dispatch({
           type: 'layout/lookBigImg',
           payload: { url: require(`@/assets/img/A5_${name === 'tapian' ? 'tapian1.jpg' : 'xiantu1.png'}`), show: true, fromTxt: '', zoom: isMobiileFu() ? 2 : 1 }
         })
-      }}>碑阳</div>
+      }}>{isEn ? 'Obverse of the Stele' : '碑阳'}</div>
       <div className={`btn songFont ${currentActive === 2 ? 'btnAc' : ''}`} onClick={() => {
         setCurrentActive(2)
         store.dispatch({
           type: 'layout/lookBigImg',
           payload: { url: require(`@/assets/img/A5_${name === 'tapian' ? 'tapian2.jpg' : 'xiantu2.png'}`), show: true, fromTxt: '', zoom: isMobiileFu() ? 1.5 : 1 }
         })
-      }}>碑阴</div>
-    </div>
+      }}>{isEn ? 'The reverse side of the stele' : '碑阴'}</div>
+    </div >
   )
 }
 

src/components/Skip/index.module.scss

@@ -50,3 +50,22 @@
   opacity: 1;
   pointer-events: auto;
 }
+
+.SkipEn {
+  :global {
+    .skipTxt {
+      height: 28px;
+      line-height: 20px;
+      color: #ffe9b6;
+      font-size: 18px;
+      letter-spacing: 0px;
+    }
+
+    .skipIcon {
+      position: relative;
+      top: -2px;
+      width: 20px;
+      height: 20px;
+    }
+  }
+}

src/components/Skip/index.tsx

@@ -30,7 +30,7 @@ function Skip({ imgSrc, clickFu, num = 1 }: Props) {
 
   return (
     <div
-      className={classNames(styles.Skip, show ? styles.SkipShow : '', imgSrc ? styles.Skip2 : '')}
+      className={classNames(styles.Skip, show ? styles.SkipShow : '', imgSrc ? styles.Skip2 : '', myLangue === 'EN' ? styles.SkipEn : '')}
       onClick={clickFu}
     >
       <div className='skipTxt songFont'> {myLangue === 'ZH' ? '跳过' : 'skip'}</div>

src/components/Zback/index.module.scss

@@ -10,7 +10,7 @@
   :global {
     .backImg {
       height: 100%;
-      object-fit: fill !important;
+      object-fit: contain !important;
     }
   }
-}
+}

src/components/Zlight/index.tsx

@@ -9,7 +9,7 @@ const arcPercentage = 0.263 // 26.3% 完整圆
 const totalArcAngle = arcPercentage * 2 * Math.PI // 1.653 弧度
 const arcStartAngle = -Math.PI / 2 - totalArcAngle / 2 // 起始角度（从左侧水平开始）
 
-function Zlight() {
+function Zlight({ isEn = false }: { isEn?: boolean }) {
   const [flag, setFlag] = useState(false)
   const [num, setNum] = useState(30)
   const [numPage, setNumPage] = useState(0)
@@ -197,7 +197,7 @@ function Zlight() {
         </div>
         <div className='Zlimg3 songFont'>
           <img id='opacityChange' src={require('@/assets/sgImg/lightBs.png')} alt='' />
-          <div id='opacityChangeTxt' className="Zlimg3Txt">调整光源</div>
+          <div id='opacityChangeTxt' className="Zlimg3Txt">{isEn ? 'light source' : '调整光源'}</div>
         </div>
       </div>
     </div>

src/pages/A0base/index.module.scss

@@ -265,10 +265,12 @@
   :global {
     .A0baseContainner {
       .content {
+        top: -10px;
         .title {
           display: flex;
           align-items: center;
-          height: 73px;
+          height: 32px;
+          font-size: 16px;
           width: auto;
           max-width: 90%;
           line-height: 27px;
@@ -279,32 +281,47 @@
           height: calc(100% - 60px);
           overflow: auto;
           letter-spacing: 0px;
+          line-height: 16px;
           text-align: left;
+          font-size: 12px;
 
           &::-webkit-scrollbar {
             width: 0px;
           }
         }
-
-        .btn::before {
-          left: 110px;
+        .btn {
+          width: 160px;
+          font-size: 16px;
+          padding-right: 26px;
         }
       }
 
       .baseContent {
+        width: 175px;
         .base {
+          width: 185px;
           font-size: 14px;
           word-wrap: break-word;
           line-height: 16px;
           display: flex;
-          padding: 0 10px 0 18px;
+          padding: 0 10px 4px 28px;
           align-items: center;
           justify-content: center;
         }
 
-        // .baseAc{
-        //   padding-bottom: 8px;
-        // }
+        .baseAc {
+          padding: 0 10px 4px 28px;
+        }
+      }
+    }
+
+    .guideVideo {
+      & > .guideVideoTitle {
+        width: 86px;
+        text-align: center;
+        line-height: 12px;
+        position: relative;
+        top: -4px;
       }
     }
 

src/pages/A0base/index.tsx

@@ -72,7 +72,7 @@ function A0base() {
               id='opacityChange'
               onClick={e => goto(e, item.path)}
             >
-              {myLangue === 'ZH' ? '进入单元' : 'view details'}
+              {myLangue === 'ZH' ? '进入单元' : 'View Detail'}
             </div>
           </div>
         ))}
@@ -140,7 +140,7 @@ function A0base() {
       {/* 先导片 */}
       <div className='guideVideo' id='opacityCss' onClick={() => setXianDao(true)}>
         <img src={require('@/assets/img/guideVideo.png')} alt='' />
-        <div className='guideVideoTitle'>{myLangue === 'EN' ? 'PromotionalVideo' : '先导片'}</div>
+        <div className='guideVideoTitle'>{myLangue === 'EN' ? 'Promotional Video' : '先导片'}</div>
       </div>
 
       {/* 先导片播放 */}

src/pages/A1home2/index.module.scss

@@ -14,7 +14,7 @@
       height: 100%;
       z-index: 3;
       pointer-events: none;
-      object-fit: cover !important;
+      object-fit: fill !important;
     }
 
     .loadingP {
@@ -120,13 +120,25 @@
       .btn {
         width: 70px;
         height: 70px;
+        position: fixed;
+        transform: translate(0);
+        right: 30px;
+        bottom: 40px;
 
         .txt {
-          width: 42px;
-          height: 21px;
-          font-size: 16px;
+          width: 68px;
+          height: 17px;
+          font-size: 14px;
         }
       }
+      .progress {
+        position: fixed;
+        right: 0px;
+        bottom: 16px;
+        transform: translate(0);
+        width: 110px;
+        color: rgb(255, 233, 182);
+      }
     }
   }
 }

src/pages/A1home2/index.tsx

@@ -27,7 +27,7 @@ function A1home() {
   // 视频准备
   const videoCanvasFu = useCallback((val: 'ZH' | 'EN') => {
     const params = {
-      objectFit: 'cover', // 视频的object-fit样式, 默认 cover
+      objectFit: 'fill', // 视频的object-fit样式, 默认 cover
       loop: true, // 是否循环, 默认false
       autoplay: false, // 自动播放, 默认false
       onSourceEstablished: () => {
@@ -132,7 +132,7 @@ function A1home() {
           {progress !== 100 ? (
             <img src={require('@/assets/img/home_loading.png')} alt='' draggable='false' />
           ) : (
-            <div className='txt songFontc'>{myLangue === 'ZH' ? '点击进入' : 'enter'}</div>
+            <div className='txt songFontc'>{myLangue === 'ZH' ? '点击进入' : 'ENTER'}</div>
           )}
         </div>
         <div className='progress' style={{ opacity: progress === 100 ? 0 : 1 }}>

src/pages/A2yblm/components/Detail/index.module.scss

@@ -25,7 +25,7 @@
         width: 4px;
         height: 84%;
 
-        &>img {
+        & > img {
           transition: all 0.5s;
           position: absolute;
           top: 0;
@@ -72,7 +72,7 @@
               z-index: -1;
               transition: all 0.5s;
 
-              &>img {
+              & > img {
                 width: 100%;
                 height: 100%;
                 object-fit: contain;
@@ -108,8 +108,7 @@
           }
 
           .txtActive {
-           
-             color: rgba(255, 233, 182, 1);
+            color: rgba(255, 233, 182, 1);
           }
         }
       }
@@ -120,9 +119,43 @@
 // ---------英文版
 .detailEn {
   :global {
-    .topL .item {
-      height: auto !important;
-      font-size: 16px !important;
+    .selectContainner {
+      width: 190px;
+      .detail_line {
+        left: 67%;
+      }
+      .detail_top,
+      .detail_bottom {
+        .topL {
+          width: 100px;
+          height: auto;
+          gap: 10px;
+          .item {
+            width: 115px;
+            height: fit-content;
+            min-height: 15px;
+            font-size: 12px;
+            line-height: 15px;
+            .selectedBg {
+              height: 27px;
+              top: 50%;
+              transform: translateY(-50%);
+              left: 31%;
+            }
+          }
+        }
+
+        .topR {
+          width: 60px;
+
+          .txt {
+            width: 60px;
+            font-size: 11px;
+            writing-mode: initial;
+            text-align: center;
+          }
+        }
+      }
     }
   }
-}
+}

src/pages/A2yblm/components/Intro/index.module.scss

@@ -69,6 +69,7 @@
 
 // --------英文版-----
 .IntroEn {
+  padding-top: 50px;
   :global {
     .titleLogo {
       width: auto;
@@ -77,12 +78,32 @@
     .info {
       .label {
         width: 84px;
-        text-align: center;
+        text-align: left;
+        &::after {
+          width: 31%;
+          left: 0;
+          transform: translate(9%, 115%);
+        }
       }
 
       .content {
         width: calc(100% - 84px);
         text-align: start;
+        font-size: 11px;
+      }
+    }
+    .info:nth-child(4) {
+      .label {
+        &::after {
+          width: 62%;
+        }
+      }
+    }
+    .info:nth-child(6) {
+      .label {
+        &::after {
+          width: 79%;
+        }
       }
     }
   }

src/pages/A2yblm/components/ModalTxt/data.ts

@@ -1,6 +1,17 @@
 export const modalTxtTab = [
-  { key: 1,nameEn:'Stele Creators and Commemorated Subjects', name: '造碑人与碑主', sonTxt: '壹' },
-  { key: 2,nameEn:'Cheng Zhe’s Life and Family Lineage', name: '程哲生平与家族世系', sonTxt: '贰' },
-  { key: 3,nameEn:'eulogium', name: '颂文', sonTxt: '叄' }
+  {
+    key: 1,
+    nameEn: 'The Stele Commissioners and Honorees',
+    name: '造碑人与碑主',
+    sonTxt: '壹',
+    sonTxtEn: 'Pt.1'
+  },
+  {
+    key: 2,
+    nameEn: `Cheng Zhe's Life and Lineage`,
+    name: '程哲生平与家族世系',
+    sonTxt: '贰',
+    sonTxtEn: 'Pt.2'
+  },
+  { key: 3, nameEn: 'Eulogies', name: '颂文', sonTxt: '叄', sonTxtEn: 'Pt.3' }
 ]
-

src/pages/A2yblm/components/ModalTxt/index.module.scss

@@ -436,44 +436,302 @@
 // -----------英文版
 .modalTxtEn {
   :global {
-    // .modalTxtContainner {
-    //   .topBar {
-    //     .beie .txt {
-    //       width: auto;
-    //       font-size: 16px;
-    //     }
-
-    //     .tab0 {
-    //       width: 100px;
-    //     }
-
-    //     .tab0,
-    //     .tab1,
-    //     .tab2 {
-    //       .txt {
-    //         font-size: 12px !important;
-    //       }
-    //     }
-
-    //     .txtAc {
-    //       width: 300px !important;
-    //       max-width: 9999px;
-    //       position: absolute;
-    //       bottom: -5px;
-    //       left: 50%;
-    //       transform: translateX(-50%);
-    //     }
-    //   }
-
-    //   .content {
-    //     position: relative;
-    //     top: 20px;
-
-    //     .text {
-    //       text-align: start;
-    //       letter-spacing: 0;
-    //     }
-    //   }
-    // }
+    .modalTxtContainner {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      padding-right: 10px;
+      position: relative;
+
+      .topBar {
+        .beie {
+          .txt {
+            width: 170px;
+            transform: translate(-36%, -56%);
+            font-size: 13px;
+          }
+        }
+
+        .tab0,
+        .tab1,
+        .tab2 {
+          width: fit-content;
+          min-width: 70px;
+          width: 85px;
+          height: 105px;
+
+          .tabNub {
+            font-size: 15px;
+            transform: translate(-50%, -90%) !important;
+          }
+
+          .txt {
+            line-height: 10px;
+            font-size: 10px;
+          }
+        }
+      }
+
+      .intro {
+        background-image: url(../../../../assets/img/A2_back.png);
+        background-position: center;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        width: 100%;
+        padding-left: 40px;
+        padding-right: 40px;
+        padding-top: 40px;
+        padding-bottom: 20px;
+        height: fit-content;
+        text-align: justify;
+        font-size: 15px;
+        line-height: 24px;
+        font-weight: 400;
+        color: rgba(69, 68, 55, 1);
+        // transition: opacity 0.1s ease-out;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        // height: 330px;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 15px;
+          left: 15px;
+          width: 14px;
+          height: 14px;
+          background-image: url(../../../../assets/img/A2_backDian.png);
+          background-size: 100% 100%;
+        }
+
+        .intro_title {
+          height: fit-content;
+          line-height: 22px;
+        }
+
+        .intro_txt {
+          max-height: 200px;
+          line-height: 21px;
+          text-align: left;
+        }
+
+        .intro_btn {
+          width: 220px;
+          background-image: url(../../../../assets/img/A2_ywyw_E.png);
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: 100% auto;
+        }
+      }
+
+      .translateModal {
+        background-image: url(../../../../assets/img/A2_back.png);
+        background-position: center;
+        background-size: 100% 100%;
+        width: 100%;
+        height: 82%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 15px;
+          right: 15px;
+          width: 14px;
+          height: 14px;
+          background-image: url(../../../../assets/img/A2_backDian.png);
+          background-size: 100% 100%;
+        }
+
+        .txtWithTrans {
+          font-size: 16px !important;
+          line-height: 32px !important;
+          height: 90%;
+          width: 100%;
+          text-align: justify;
+          // font-weight: 500;
+          color: black; // 原始颜色
+          overflow: auto;
+          padding: 20px 30px;
+
+          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;
+          }
+
+          & > a {
+            color: black;
+            position: relative;
+
+            &::after {
+              content: '';
+              position: absolute;
+              left: 0;
+              bottom: -4px;
+              width: 100%;
+              height: 2px;
+              background-color: rgba(208, 131, 63, 1);
+              transform: scaleX(0.95);
+              transform-origin: right center;
+            }
+          }
+
+          .translate {
+            color: rgba(148, 148, 148, 1);
+          }
+        }
+      }
+
+      .detailTxt {
+        width: 100%;
+
+        height: 62%;
+        display: flex;
+        justify-content: space-between;
+
+        .left,
+        .right {
+          width: 49%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          padding: 20px;
+
+          .title {
+            font-size: 16px;
+            line-height: 0px;
+            font-weight: bold;
+            color: rgba(94, 52, 34, 1);
+          }
+
+          .txt {
+            font-size: 16px !important;
+            line-height: 22px !important;
+            letter-spacing: 2px;
+
+            text-align: justify;
+            font-weight: 500;
+            color: rgba(94, 52, 34, 1); // 原始颜色
+            overflow: auto;
+            padding-bottom: 10px;
+            -webkit-overflow-scrolling: touch;
+            /* 启用原生平滑滚动 */
+            overflow-scrolling: touch;
+            overscroll-behavior-y: none;
+
+            .t1 {
+              width: 100%;
+              height: 17px;
+            }
+
+            .t2 {
+              width: 100%;
+              height: 370px;
+            }
+
+            &::-webkit-scrollbar {
+              width: 0px;
+            }
+
+            &::-webkit-scrollbar-track {
+              background-color: transparent;
+            }
+
+            &::-webkit-scrollbar-thumb {
+              background-color: rgba(94, 52, 34, 0.226);
+              border-radius: 4px;
+            }
+
+            &:has(> a:hover) {
+              color: rgba(0, 0, 0, 0.25);
+            }
+
+            &:has(> a:hover) > a:not(:hover) {
+              color: rgba(0, 0, 0, 0.25);
+            }
+
+            & > a {
+              color: rgba(94, 52, 34, 1);
+              position: relative;
+
+              &::after {
+                content: '';
+                position: absolute;
+                left: 0;
+                bottom: -2px;
+                width: 100%;
+                height: 2px;
+                background-color: rgba(166, 118, 67, 1);
+                transform: scaleX(0.95);
+                transform-origin: right center;
+              }
+            }
+          }
+        }
+
+        .left {
+          background: url(../../../../assets/img/detailTxt_l.png) no-repeat center center;
+          background-size: 100% 100%;
+        }
+
+        .right {
+          background: url(../../../../assets/img/detailTxt_r.png) no-repeat center center;
+          background-size: 100% 100%;
+        }
+      }
+
+      .content {
+        padding-top: 40px;
+        width: 70%;
+        height: 50%;
+        padding-right: 20px;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        gap: 10px;
+        color: rgba(94, 52, 34, 1);
+
+        .title {
+          font-size: 20px;
+          line-height: 20px;
+          font-weight: bold;
+          margin-bottom: 10px;
+        }
+
+        .text {
+          width: 278px;
+          line-height: 17px;
+          font-size: 12px;
+          text-align: left;
+        }
+
+        .shufaBtn {
+          white-space: nowrap;
+          font-size: 14px;
+          padding-left: 40px;
+          letter-spacing: 0px;
+        }
+      }
+    }
   }
 }

src/pages/A2yblm/components/ModalTxt/index.tsx

@@ -258,7 +258,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt, setIsShowS
               {(
                 <>
                   <div className='intro_title songFont'>
-                    {modalTxtTab[selectedTab - 1].name}
+                    {myLangue === 'EN' ? modalTxtTab[selectedTab - 1].nameEn : modalTxtTab[selectedTab - 1].name}
                   </div>
                   <div className='intro_txt'>
                     {myData.readDetail[selectedTab - 1].intro}
@@ -305,7 +305,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt, setIsShowS
               dangerouslySetInnerHTML={{ __html: myLangue === 'EN' ? gaiShuEn : gaiShu }}
             ></div>
             <div className='shufaBtn songFont' onClick={() => setIsShowShufa(true)}>
-              书法赏析
+              {myLangue === 'EN' ? 'Calligraphy Appreciation' : '书法赏析'}
             </div>
           </div>
         )}
@@ -314,7 +314,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt, setIsShowS
           <div className='beie' hidden={selectedTab !== 0}>
             <img src={require('@/assets/img/beie.png')} alt='' />
             <div className='txt songFont' onClick={handleBeie}>
-              {myLangue === 'EN' ? 'forehead' : '碑额'}
+              {myLangue === 'EN' ? 'Stele Inscription' : '碑额'}
             </div>
           </div>
 
@@ -330,7 +330,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt, setIsShowS
                 alt=''
               />
               <div className={`tabNub songFont ${selectedTab === item.key ? 'tabNubAc' : ''}`}>
-                {item.sonTxt}
+                {myLangue === 'EN' ? item.sonTxtEn : item.sonTxt}
               </div>
               <div
                 className={classNames('txt songFont', selectedTab === item.key ? 'txtAc' : '')}

src/pages/A2yblm/components/Shufa/index.module.scss

@@ -137,6 +137,10 @@
           }
         }
 
+        .rightTitleLine2 {
+          display: none;
+        }
+
         .rightTxt1 {
           font-size: 11px;
           margin-top: 17px;
@@ -158,6 +162,7 @@
           color: rgba(255, 233, 182, 1);
           font-size: 17px;
           margin-top: 10px;
+          cursor: pointer;
         }
       }
     }
@@ -439,3 +444,259 @@
     }
   }
 }
+
+// 英文版
+.shufaEn {
+  :global {
+    .shufa1 {
+      .sLeft {
+        .leftTxt1 {
+          width: 85%;
+          text-align: left;
+          font-size: 9px;
+          line-height: 10px;
+          height: 82px;
+          overflow: auto;
+          padding-bottom: 10px;
+          &::-webkit-scrollbar {
+            width: 0px;
+            height: 0px;
+          }
+          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%
+          );
+        }
+      }
+
+      .sRight {
+        .rightTitle1 {
+          font-size: 11px;
+          line-height: 15px;
+        }
+
+        .rightTitleLine1 {
+          transform: translateY(-3px);
+          width: 88%;
+          height: 12px;
+          background: url(../../../../assets/img/A2_shufa_title_bg.png) no-repeat;
+          background-size: 100% 100%;
+        }
+
+        .rightIntro {
+          margin-top: 4px;
+          width: 91%;
+          height: 33%;
+          background: none;
+
+          .rightItem {
+            height: fit-content;
+            white-space: normal;
+            transform: translateY(0);
+
+            .rLabel {
+              display: none;
+            }
+
+            .rtext {
+              width: fit-content;
+              max-width: 100%;
+              padding-left: 0;
+              margin-bottom: 6px;
+              height: 100%;
+              font-size: 11px;
+              line-height: 13px;
+              & > span {
+                font-weight: 600;
+                color: rgba(175, 135, 100, 1);
+              }
+            }
+          }
+        }
+
+        .rightTitleLine2 {
+          display: block;
+          width: 90%;
+          height: 3px;
+          background: url(../../../../assets/img/A2_shufa_title_bg_E.png) no-repeat;
+          background-size: 100% 100%;
+        }
+
+        .rightTxt1 {
+          font-size: 9px;
+          margin-top: 6px;
+          width: 91%;
+          text-align: left;
+          line-height: 10px;
+        }
+
+        .shufa1Btn {
+          background: url(../../../../assets/img/A2_shufa_btn_E.png) no-repeat;
+          background-size: 100% 100%;
+          width: 230px;
+          font-size: 14px;
+        }
+      }
+    }
+
+    // 移动端
+
+    @media screen and (max-width: 768px) {
+      .shufa1 {
+        .sLeft {
+          .leftTxt1 {
+            font-size: 11px;
+            width: 78%;
+          }
+        }
+        .sRight {
+          .rightTxt1 {
+            font-size: 11px;
+            line-height: 14px;
+            height: 95px;
+            overflow: auto;
+            padding-bottom: 10px;
+            &::-webkit-scrollbar {
+              width: 0px;
+              height: 0px;
+            }
+            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%
+            );
+          }
+        }
+      }
+    }
+
+    .shufa2 {
+      .lianContainer,
+      .beiContainner {
+        .zicontent {
+          gap: 6px;
+
+          .txtitem {
+            width: 100%;
+            height: fit-content;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            gap: 3px;
+            color: rgba(69, 68, 55, 1);
+
+            .txt {
+              width: calc(100% - 24px);
+              font-size: 11px;
+              line-height: 14px;
+              height: fit-content;
+            }
+          }
+
+          .txtitemAc {
+            color: rgba(175, 135, 100, 1);
+          }
+        }
+
+        .zi1,
+        .zi2 {
+          width: 167px;
+          height: 167px;
+          overflow: hidden;
+          // background-image: url(../../../../assets/img/A2_shufa_mzg.png);
+          // background-position: center;
+          // background-size: 100% 100%;
+          transition: opacity 0.3s ease-in-out;
+
+          & > img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+        }
+
+        .zi1 {
+          position: relative;
+
+          .lian1 {
+            max-width: none;
+            max-height: none;
+            width: auto;
+            height: 167px;
+            object-fit: fill;
+            animation: lian_wang 5s steps(71) forwards;
+          }
+
+          .lian2 {
+            max-width: none;
+            max-height: none;
+            width: auto;
+            height: 167px;
+            object-fit: fill;
+            animation: lian_zou 3s steps(31) forwards;
+          }
+
+          .normal {
+            width: 167px;
+            height: 167px;
+          }
+
+          .itemAC {
+            position: absolute;
+            top: 0;
+            left: 0;
+            animation: fadeOut 3s linear;
+          }
+        }
+
+        .zi2 {
+          .bei1 {
+            max-width: none;
+            max-height: none;
+            width: auto;
+            height: 167px;
+            object-fit: fill;
+            animation: bei_shang 5s steps(71) forwards;
+          }
+
+          .bei2 {
+            max-width: none;
+            max-height: none;
+            width: auto;
+            height: 167px;
+            object-fit: fill;
+            animation: bei_xia 3s steps(35) forwards;
+          }
+
+          .normal {
+            width: 167px;
+            height: 167px;
+          }
+        }
+      }
+
+      .beiContainner {
+        .zicontent {
+          .txtitem {
+            justify-content: flex-start;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/A2yblm/components/Shufa/index.tsx

@@ -76,7 +76,7 @@ function Shufa({ setIsShowShufa, style }: { setIsShowShufa: (isShowShufa: boolea
   }
 
   return (
-    <div className={`${styles.shufa} ${isHideShufa ? ' shufaHide' : ''}`} style={{ zIndex: showName === 'shufa1' ? 3 : 4, ...style }}>
+    <div className={`${styles.shufa} ${myLangue === 'EN' ? styles.shufaEn : ''} ${isHideShufa ? ' shufaHide' : ''}`} style={{ zIndex: showName === 'shufa1' ? 3 : 4, ...style }}>
       <Zback clickFu={backClick} />
       <div className='wenwu' style={{ zIndex: 1 }} onClick={() => window.location.replace(`#/quanwen?m=shufa`)}>
         <img
@@ -108,13 +108,14 @@ function Shufa({ setIsShowShufa, style }: { setIsShowShufa: (isShowShufa: boolea
             {myData?.shufa?.rItems?.map((item, index) => (
               <div className='rightItem' key={index}>
                 <div className='rLabel'>{item?.label}</div>
-                <div className='rtext'>{item?.txt}</div>
+                <div className='rtext' dangerouslySetInnerHTML={{ __html: item?.txt }} />
               </div>
             ))}
           </div>
+          {myLangue !== 'EN' ? null : <div className='rightTitleLine2' />}
           <div className='rightTxt1'>{myData?.shufa?.rTxt}</div>
           <div className='shufa1Btn songFont' onClick={() => setName('shufa2')}>
-            字形赏析
+            {myLangue === 'EN' ? 'Appreciation of Typefaces' : '字形赏析'}
           </div>
         </div>
         <Line index={1} />

src/pages/A2yblm/index.module.scss

@@ -329,25 +329,60 @@
     }
 
     .A2_tabBar {
+      width: 140px;
       top: 48%;
-
+      left: 0;
+      transform: translate(-6px, -50%);
       .tab {
         word-break: break-all;
-        padding: 0 6px;
-        width: 70px;
-        height: 70px;
+        font-size: 13px;
+        padding: 0 20px 3px 8px;
+        width: 140px;
+        height: 60px;
+        background: url(../../assets/sgImg/Component_E.png) no-repeat center center;
+        background-size: 100% 100%;
+      }
+      .tab_active {
+        background: url(../../assets/sgImg/ComponentAc_E.png) no-repeat center center;
+        background-size: 100% 100%;
+      }
+    }
+
+    .mzm {
+      .content {
+        font-size: 16px;
+        line-height: 18px;
+        text-align: left;
       }
     }
 
+    .sider1 {
+      width: 43%;
+      transform: translate(-7%, -50%);
+    }
+
     .tagInfo {
+      top: 23%;
+      left: 14%;
+      width: 218px;
+      z-index: 2;
       .top {
+        height: fit-content;
+        min-height: 30px;
+        padding: 0 10px;
         .title {
+          font-size: 16px;
           width: auto;
           max-width: 100%;
+          line-height: 22px;
         }
       }
 
+      .content {
+        margin-top: 10px;
+      }
       .content > div {
+        font-size: 14px;
         letter-spacing: 0;
         text-align: start;
       }

src/pages/A2yblm/index.tsx

@@ -131,35 +131,44 @@ function A2yblm() {
           onClick={() => setCurrentTab('tab1')}
         >
           {myLangue === 'EN' ? (
-            ''
+            <>
+              Overview of
+              <br />
+            </>
           ) : (
             <>
               碑石
               <br />
             </>
           )}
-          {myLangue === 'EN' ? 'Introduction' : '概览'}
+          {myLangue === 'EN' ? 'the Stele' : '概览'}
         </div>
         <div
           className={`tab songFont ${currentTab === 'tab2' ? 'tab_active' : ''}`}
           onClick={() => setCurrentTab('tab2')}
         >
           {myLangue === 'EN' ? (
-            ''
+            <>
+              Iconographic
+              <br />
+            </>
           ) : (
             <>
               图像
               <br />
             </>
           )}
-          {myLangue === 'EN' ? 'Appreciation' : '品析'}
+          {myLangue === 'EN' ? 'Analysis' : '品析'}
         </div>
         <div
           className={`tab songFont ${currentTab === 'tab3' ? 'tab_active' : ''}`}
           onClick={() => setCurrentTab('tab3')}
         >
           {myLangue === 'EN' ? (
-            ''
+            <>
+              Inscription
+              <br />
+            </>
           ) : (
             <>
               文辞
@@ -197,7 +206,7 @@ function A2yblm() {
             </div>
             <div className='close' onClick={() => setIsOpenMzm(false)}>
               <img
-                src={require('@/assets/img/closeWithTxt.png')}
+                src={require(`@/assets/img/${myLangue === 'EN' ? 'closeWithTxt_E' : 'closeWithTxt'}.png`)}
                 alt=''
                 onClick={() => setIsOpenMzm(false)}
               />
@@ -284,7 +293,7 @@ function A2yblm() {
       </div>
 
       {/* 调整光线 */}
-      {currentTab === 'tab2' || isShowMzmTitle ? <Zlight /> : null}
+      {currentTab === 'tab2' || isShowMzmTitle ? <Zlight isEn={myLangue === 'EN'} /> : null}
     </div>
   )
 }

src/pages/A4quanwen/index.tsx

@@ -40,7 +40,7 @@ function A4quanwen() {
 
       <div className={`highlight`} onClick={() => handleHighlight()}>
         <img
-          src={require(`@/assets/img/${isHighlight ? 'highlight_ac.png' : 'highlight.png'}`)}
+          src={require(`@/assets/img/${isHighlight ? myLangue === 'EN' ? 'highlight_ac_E.png' : 'highlight_ac.png' : myLangue === 'EN' ? 'highlight_E.png' : 'highlight.png'}`)}
           alt=''
         />
       </div>

src/pages/A5wenwu/index.module.scss

@@ -164,12 +164,21 @@
 // ---------英文版
 .A5wenwuEn {
   :global {
+    .gesture {
+      width: 140px;
+      .txt {
+        font-size: 14px;
+      }
+    }
     .A5_tabBar .tab .txt {
       width: auto;
+      letter-spacing: 0;
     }
 
     .A5_tabBarR .tab .txt {
       width: auto;
+      letter-spacing: 0;
+      white-space: nowrap;
     }
   }
 }

src/pages/A5wenwu/index.tsx

@@ -5,7 +5,6 @@ import classNames from 'classnames'
 import { useSelector } from 'react-redux'
 import store, { RootState } from '@/store'
 import Zback from '@/components/Zback'
-import QuanwenBtns from '@/components/QuanwenBtns'
 
 function A5wenwu() {
   const { myLangue } = useSelector((state: RootState) => state.A0Layout)
@@ -96,7 +95,7 @@ function A5wenwu() {
           <div className={classNames('gesture', gestureState1)}>
             <img src={require('@/assets/img/A5_gesture.png')} alt='' />
             <div className='txt'>
-              {myLangue === 'EN' ? 'Rotate by swiping with a single finger' : '单指滑动进行旋转'}
+              {myLangue === 'EN' ? 'Rotate with a single-finger swipe' : '单指滑动进行旋转'}
             </div>
           </div>
         )}
@@ -108,21 +107,21 @@ function A5wenwu() {
               src={require(`@/assets/img/A5_size${currentTab === 'tab1' ? 'Ac' : ''}.png`)}
               alt=''
             />
-            <div className='txt'>{myLangue === 'EN' ? 'size' : '尺寸'}</div>
+            <div className='txt'>{myLangue === 'EN' ? 'Dimensions' : '尺寸'}</div>
           </div>
           <div className={`tab`} onClick={handleTapian}>
             <img
               src={require(`@/assets/img/A5_tapian${currentTab === 'tab2' ? 'Ac' : ''}.png`)}
               alt=''
             />
-            <div className='txt'>{myLangue === 'EN' ? 'rubbings' : '拓片'}</div>
+            <div className='txt'>{myLangue === 'EN' ? 'Rubbing' : '拓片'}</div>
           </div>
           <div className={`tab`} onClick={handleLine}>
             <img
               src={require(`@/assets/img/A5_line${currentTab === 'tab3' ? 'Ac' : ''}.png`)}
               alt=''
             />
-            <div className='txt'>{myLangue === 'EN' ? 'graph' : '线图'}</div>
+            <div className='txt'>{myLangue === 'EN' ? 'Outline' : '线图'}</div>
           </div>
           {/* 碑文 */}
           <div className={`tab`} onClick={handleBeiwen}>
@@ -130,7 +129,7 @@ function A5wenwu() {
               src={require(`@/assets/img/A5_beiwen${currentTab === 'tab3' ? 'Ac' : ''}.png`)}
               alt=''
             />
-            <div className='txt'>{myLangue === 'EN' ? 'graph' : '碑文'}</div>
+            <div className='txt'>{myLangue === 'EN' ? 'Inscription' : '碑文'}</div>
           </div>
         </div>
 
@@ -138,15 +137,15 @@ function A5wenwu() {
         <div className='A5_tabBarR'>
           <div className={`tab`} onClick={() => handleZoomIn(0.1)}>
             <img src={require(`@/assets/img/A5_zoomin.png`)} alt='' />
-            <div className='txt'>{myLangue === 'EN' ? 'zoomIn' : '放大'}</div>
+            <div className='txt'>{myLangue === 'EN' ? 'Zoom In' : '放大'}</div>
           </div>
           <div className={`tab`} onClick={() => handleZoomOut(0.1)}>
             <img src={require(`@/assets/img/A5_zoomout.png`)} alt='' />
-            <div className='txt'>{myLangue === 'EN' ? 'zoomOut' : '缩小'}</div>
+            <div className='txt'>{myLangue === 'EN' ? 'Zoom Out' : '缩小'}</div>
           </div>
           <div className={`tab`} onClick={handleReset}>
             <img src={require(`@/assets/img/A5_reset.png`)} alt='' />
-            <div className='txt'>{myLangue === 'EN' ? 'reset' : '重置'}</div>
+            <div className='txt'>{myLangue === 'EN' ? 'Reset' : '重置'}</div>
           </div>
         </div>