lanxin недель назад: 3
Родитель
Сommit
9d745beefc

+ 7 - 7
public/Pano/asset-manifest.json

@@ -1,20 +1,20 @@
 {
   "files": {
     "main.css": "./static/css/main.9bdd1fe1.css",
-    "main.js": "./static/js/main.a43a684a.js",
-    "static/css/201.3df726bc.chunk.css": "./static/css/201.3df726bc.chunk.css",
-    "static/js/201.fc81fb22.chunk.js": "./static/js/201.fc81fb22.chunk.js",
+    "main.js": "./static/js/main.18ee0aea.js",
+    "static/css/201.23982bd1.chunk.css": "./static/css/201.23982bd1.chunk.css",
+    "static/js/201.1ffd01ec.chunk.js": "./static/js/201.1ffd01ec.chunk.js",
     "static/js/511.7606796f.chunk.js": "./static/js/511.7606796f.chunk.js",
     "static/media/hotpot_bg.png": "./static/media/hotpot_bg.7228e66c2aae58eba50a.png",
     "index.html": "./index.html",
     "main.9bdd1fe1.css.map": "./static/css/main.9bdd1fe1.css.map",
-    "main.a43a684a.js.map": "./static/js/main.a43a684a.js.map",
-    "201.3df726bc.chunk.css.map": "./static/css/201.3df726bc.chunk.css.map",
-    "201.fc81fb22.chunk.js.map": "./static/js/201.fc81fb22.chunk.js.map",
+    "main.18ee0aea.js.map": "./static/js/main.18ee0aea.js.map",
+    "201.23982bd1.chunk.css.map": "./static/css/201.23982bd1.chunk.css.map",
+    "201.1ffd01ec.chunk.js.map": "./static/js/201.1ffd01ec.chunk.js.map",
     "511.7606796f.chunk.js.map": "./static/js/511.7606796f.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.9bdd1fe1.css",
-    "static/js/main.a43a684a.js"
+    "static/js/main.18ee0aea.js"
   ]
 }

Разница между файлами не показана из-за своего большого размера
+ 1 - 1
public/Pano/index.html


Разница между файлами не показана из-за своего большого размера
+ 2 - 0
public/Pano/static/css/201.23982bd1.chunk.css


Разница между файлами не показана из-за своего большого размера
+ 1 - 0
public/Pano/static/css/201.23982bd1.chunk.css.map


Разница между файлами не показана из-за своего большого размера
+ 0 - 2
public/Pano/static/css/201.3df726bc.chunk.css


Разница между файлами не показана из-за своего большого размера
+ 0 - 1
public/Pano/static/css/201.3df726bc.chunk.css.map


Разница между файлами не показана из-за своего большого размера
+ 2 - 0
public/Pano/static/js/201.1ffd01ec.chunk.js


Разница между файлами не показана из-за своего большого размера
+ 1 - 0
public/Pano/static/js/201.1ffd01ec.chunk.js.map


Разница между файлами не показана из-за своего большого размера
+ 0 - 2
public/Pano/static/js/201.fc81fb22.chunk.js


Разница между файлами не показана из-за своего большого размера
+ 0 - 1
public/Pano/static/js/201.fc81fb22.chunk.js.map


Разница между файлами не показана из-за своего большого размера
+ 3 - 3
public/Pano/static/js/main.a43a684a.js


public/Pano/static/js/main.a43a684a.js.LICENSE.txt → public/Pano/static/js/main.18ee0aea.js.LICENSE.txt


Разница между файлами не показана из-за своего большого размера
+ 1 - 1
public/Pano/static/js/main.a43a684a.js.map


Разница между файлами не показана из-за своего большого размера
+ 42 - 41
public/myData/myDataEN.js


+ 114 - 0
src/pages/A7wjwj/conponents/Content/index.module.scss

@@ -111,3 +111,117 @@
     }
   }
 }
+
+.contentEn {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: #699dd9;
+
+  :global {
+    #panoramic {
+      width: 100%;
+      height: 100%;
+      border: none;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .poem {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: url('../../../../assets/img/A7Poem_bg.png') no-repeat center center;
+      background-size: 100% 100%;
+      backdrop-filter: blur(10px);
+
+      .back {
+        width: 120px;
+        height: 60px;
+        position: absolute;
+        z-index: 3;
+        top: 3%;
+        left: 4%;
+        cursor: pointer;
+
+        & > img {
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+
+      .skip {
+        width: 135px;
+        height: 60px;
+        position: absolute;
+        z-index: 3;
+        bottom: 3%;
+        right: 4%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        cursor: pointer;
+
+        .text {
+          width: 80px;
+          font-size: 30px;
+          font-weight: 300;
+          color: rgba(255, 255, 255, 1);
+        }
+
+        & > img {
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+
+      .content {
+        width: 60%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 10px;
+
+        color: rgba(255, 255, 255, 1);
+        font-size: 23px;
+        line-height: 60px;
+        font-weight: lighter;
+        text-align: center;
+      }
+    }
+
+    @media screen and (max-width: 1000px) {
+      .poem {
+        .skip {
+          width: 90px;
+          height: 30px;
+
+          .text {
+            width: 36px;
+            font-size: 13px;
+            letter-spacing: 2px;
+            line-height: 28px;
+            font-weight: 700;
+          }
+        }
+
+        .content {
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 28px;
+          text-shadow: 1px 1px 1px rgba(255, 233, 182, 0.5);
+        }
+      }
+    }
+  }
+}

+ 3 - 2
src/pages/A7wjwj/conponents/Content/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import styles from './index.module.scss'
 import store from '@/store'
+import classNames from 'classnames'
 function Content() {
   const [isShowScene, setIsShowScene] = useState(false)
   const [isShowPoem, setIsShowPoem] = useState(false)
@@ -57,7 +58,7 @@ function Content() {
   }
 
   return (
-    <div className={styles.content} id='pageIframe'>
+    <div className={classNames(styles.content, currentLangue === 'EN' ? styles.contentEn : '')} id='pageIframe'>
       <div id='A7Back' onClick={() => onClickBack()} style={{ display: isShowBack ? 'block' : 'none' }}>
         <img src={`./myData/img/btn_back${currentLangue === 'EN' ? 'En' : ''}.png`} alt='' />
       </div>
@@ -73,7 +74,7 @@ function Content() {
 
       <div className='poem' id='A7Poem' style={{ display: isShowPoem ? 'flex' : 'none' }}>
         <div className='skip' onClick={() => onClickSkip()}>
-          <div className='text'>跳过</div>
+          <div className='text'>{currentLangue === 'ZH' ? '跳过' : 'Skip'}</div>
           <img src={require('@/assets/img/btn_skip.png')} alt='' />
         </div>
         {currentLangue === 'EN' ? (

+ 282 - 1
src/pages/A7wjwj/conponents/Discover/index.module.scss

@@ -115,7 +115,7 @@
       }
 
       .record5 {
-        width: 102px;
+        width: 104px;
         height: 25px;
         transform: translate(-123px, -73px);
         background: url('../../../../assets/img/A7_discover_record5.png') no-repeat center center;
@@ -399,6 +399,135 @@
   }
 }
 
+.DiscoverEn {
+  :global {
+    .left,
+    .left2 {
+      .record {
+        width: fit-content;
+        height: fit-content;
+        max-width: 250px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        padding: 10px;
+        color: rgba(255, 255, 255, 1);
+        transition: opacity 0.5s;
+
+        .text {
+          font-size: 9px;
+          max-height: 77px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+            width: 0;
+            height: 0;
+          }
+        }
+
+        .btn {
+          text-align: right;
+          font-size: 9px;
+          line-height: 14px;
+          color: rgba(255, 223, 174, 1);
+          cursor: pointer;
+        }
+      }
+
+      .record1 {
+        width: 200px;
+        height: 75px;
+        transform: translate(-149px, -104px);
+        background: url('../../../../assets/img/A7_discover_record1.png') no-repeat center center;
+        background-size: 100% 100%;
+      }
+
+      .record2 {
+        width: 130px;
+        height: 60px;
+        transform: translate(0%, 94px);
+        background: url('../../../../assets/img/A7_discover_record2.png') no-repeat center center;
+        background-size: 100% 100%;
+
+        .btnContainer {
+          width: 100%;
+          height: 12px;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+
+          .icon {
+            width: 15px;
+            height: 12px;
+            line-height: 10px;
+
+            & > img {
+              height: 100%;
+              object-fit: contain;
+            }
+          }
+        }
+      }
+
+      .record3 {
+        width: 182px;
+        height: 44px;
+        transform: translate(11px, -26px);
+        background: url('../../../../assets/img/A7_discover_record3.png') no-repeat center center;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        padding: 7px 10px;
+      }
+
+      .record4 {
+        width: 140px;
+        height: 42px;
+        padding: 0 10px;
+        padding-top: 14px;
+
+        transform: translate(-120px, 84px);
+        background: url('../../../../assets/img/A7_discover_record4.png') no-repeat center center;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+
+        .text {
+          height: 100%;
+          line-height: 10px;
+        }
+      }
+
+      .record5 {
+        width: 115px;
+        height: 25px;
+        transform: translate(-136px, -73px);
+        background: url('../../../../assets/img/A7_discover_record5.png') no-repeat center center;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+
+        .text {
+          height: 15px;
+        }
+      }
+    }
+
+    .right {
+      .item {
+        .text {
+          text-align: justify;
+        }
+      }
+    }
+  }
+}
+
 // ------------移动端
 .DiscoverMo {
   :global {
@@ -550,3 +679,155 @@
     }
   }
 }
+
+.DiscoverMoEn {
+  :global {
+    .right {
+      .item {
+        .title {
+          .icon {
+            position: relative;
+            top: -1px;
+            width: 18px;
+            height: 18px;
+          }
+
+          .txt {
+            font-size: 16px;
+          }
+        }
+
+        .text {
+          margin-top: 8px;
+          font-size: 16px;
+          line-height: 22px;
+        }
+
+        .from {
+          font-size: 14px;
+        }
+      }
+    }
+
+    .left {
+      .record1 {
+        width: 230px;
+        height: 127px;
+        transform: translate(-166px, -139px);
+
+        .text {
+          font-size: 14px;
+        }
+
+        .btn {
+          font-size: 14px;
+        }
+      }
+
+      .record2 {
+        padding-top: 15px;
+        width: 190px;
+        height: 80px;
+
+        .text {
+          font-size: 14px;
+        }
+
+        .btn {
+          font-size: 14px;
+        }
+
+        .btnContainer {
+          .icon {
+            width: 20px;
+            height: 20px;
+            position: relative;
+            left: -2px;
+            top: -1px;
+          }
+        }
+      }
+    }
+
+    .left2 {
+      .record5 {
+        padding-top: 2px;
+        width: 163px;
+        height: 36px;
+        transform: translate(-176px, -83px);
+
+        .text {
+          font-size: 14px;
+        }
+
+        .btn {
+          font-size: 14px;
+        }
+      }
+
+      .record3 {
+        width: 205px;
+        height: 87px;
+        transform: translate(-3px, -69px);
+        padding-top: 2px;
+
+        .text {
+          font-size: 14px;
+          padding: 6px 0px;
+        }
+
+        .btn {
+          font-size: 14px;
+        }
+      }
+
+      .record4 {
+        width: 192px;
+        height: 55px;
+        transform: translate(-145px, 84px);
+        padding-top: 16px;
+
+        .text {
+          font-size: 14px;
+          line-height: 17px;
+        }
+
+        .btn {
+          font-size: 14px;
+        }
+      }
+      .point4 {
+        transform: translate(-34px, 47px);
+      }
+
+      .back {
+        width: 90px;
+        height: 40px;
+
+        .txt {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .right {
+      .scroll {
+        .item {
+          .text {
+            width: 90%;
+            .text_txt {
+              width: 90%;
+            }
+          }
+        }
+      }
+    }
+
+    .direct {
+      left: 1%;
+      bottom: 1%;
+      width: 80px;
+      height: 80px;
+    }
+  }
+}

+ 1 - 1
src/pages/A7wjwj/conponents/Discover/index.tsx

@@ -65,7 +65,7 @@ function Discover(props: { style?: React.CSSProperties }) {
 
   // }, [])
   return (
-    <div className={classNames(styles.Discover, isPc ? '' : styles.DiscoverMo)} style={props.style}>
+    <div className={classNames(styles.Discover, myLangue === 'EN' ? styles.DiscoverEn : '', (!isPc && myLangue === 'ZH') ? styles.DiscoverMo : '', (!isPc && myLangue === 'EN') ? styles.DiscoverMoEn : '')} style={props.style}>
       <div className='left' style={{ opacity: isShowRecord ? 1 : 0 }}>
         <div className={classNames('leftImg', move ? 'leftImgMove' : '')}></div>
 

+ 248 - 0
src/pages/A7wjwj/conponents/Shuxing/index.module.scss

@@ -222,3 +222,251 @@
     }
   }
 }
+
+.ShuxingEn {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  :global {
+    .mainContent {
+      width: 100%;
+      height: 100%;
+      padding: 80px 30px 0 30px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+
+      .mainTitle {
+        text-indent: 2em;
+        width: 100%;
+        height: fit-content;
+        font-size: 14px;
+        // font-weight: 500;
+        color: #7e807d;
+        font-size: 13px;
+        line-height: 18px;
+        height: 90px;
+        max-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%
+        );
+      }
+
+      .imgBox {
+        width: 100%;
+        height: fit-content;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 10px;
+
+        .item {
+          width: 24%;
+          height: 245px;
+          background-size: contain;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          font-size: 12px;
+          gap: 6px;
+
+          .pic {
+            width: 100%;
+            height: 165px;
+            object-fit: contain;
+            background: url('../../../../assets/img/A7_shuxing_bg.png') no-repeat center center;
+            background-size: 100% 100%;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+
+            & > img {
+              width: 100%;
+              height: 80%;
+              object-fit: contain;
+            }
+          }
+
+          .name {
+            font-size: 13px;
+            font-weight: 600;
+            color: rgba(91, 71, 46, 1);
+            white-space: nowrap;
+          }
+
+          .time {
+            font-size: 11px;
+            text-align: center;
+            font-weight: 400;
+            color: #a59a8a;
+            overflow: auto;
+            &::-webkit-scrollbar {
+              width: 0;
+              height: 0;
+            }
+          }
+        }
+      }
+    }
+
+    .detailContent {
+      width: 100%;
+      height: 100%;
+      padding-top: 80px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      gap: 20px;
+
+      .detailContainner {
+        width: 80%;
+        height: calc(100% - 110px);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+
+        .left {
+          width: 63%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          color: rgba(93, 96, 96, 1);
+          font-size: 10px;
+
+          & > div {
+            display: flex;
+            align-items: flex-start;
+            position: relative;
+            font-size: 16px;
+            text-align: justify;
+            margin: 3px 0;
+          }
+
+          .detailTitle {
+            margin-bottom: 10px;
+            width: fit-content;
+            font-size: 18px;
+            letter-spacing: 1px;
+            font-weight: 700;
+            color: rgb(124, 75, 54);
+
+            &::after {
+              background: none;
+            }
+          }
+
+          .label {
+            position: relative;
+            height: fit-content;
+            font-size: 13px;
+            font-weight: bold;
+            white-space: nowrap;
+            width: 80px;
+
+            &::after {
+              content: '';
+              width: 24px;
+              height: 7px;
+              position: absolute;
+              z-index: -1;
+              bottom: 0%;
+              left: 50%;
+              transform: translate(-160%, 10%);
+              background-color: #af8764;
+            }
+          }
+
+          p {
+            font-size: 11px;
+            line-height: 16px;
+            max-height: 95px;
+            overflow: visible;
+            width: 0;
+            flex: 1;
+            &::-webkit-scrollbar {
+              width: 0;
+              height: 0;
+            }
+          }
+        }
+
+        .right {
+          width: 48%;
+          height: 100%;
+          align-self: flex-start;
+          position: relative;
+
+          & > img {
+            width: 80%;
+            height: 100%;
+            object-fit: contain;
+            position: relative;
+            z-index: 2;
+          }
+
+          .diwen {
+            position: absolute;
+            left: 50px;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            opacity: 0.7;
+            z-index: 1;
+          }
+        }
+      }
+
+      .bottom {
+        width: 100%;
+        height: 90px;
+        background-image: url('../../../../assets/sgImg/img_rec.png');
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 30px;
+
+        .item {
+          width: 80px;
+          height: 80px;
+          background-image: url('../../../../assets/sgImg/img_txt.png');
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+
+          &.itemAc {
+            background-image: url('../../../../assets/sgImg/img_txtac.png');
+          }
+
+          & > img {
+            width: 80%;
+            height: 80%;
+            object-fit: contain;
+          }
+        }
+      }
+    }
+  }
+}

+ 5 - 4
src/pages/A7wjwj/conponents/Shuxing/index.tsx

@@ -3,6 +3,7 @@ import styles from './index.module.scss'
 import { forwardRef, useImperativeHandle } from 'react'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
+import classNames from 'classnames'
 
 type Props = {
   style: React.CSSProperties
@@ -31,7 +32,7 @@ function Shuxing({ style }: Props, ref: any) {
   }))
 
   return (
-    <div className={styles.Shuxing} style={style}>
+    <div className={classNames(styles.Shuxing, myLangue === 'EN' ? styles.ShuxingEn : '')} style={style}>
       {!isShowDetail && (
         <div className='mainContent'>
           <div className='mainTitle'>
@@ -65,13 +66,13 @@ function Shuxing({ style }: Props, ref: any) {
             <div className='left'>
               <div className='detailTitle songFont'>{myData.shuxing[currentIndex].name}</div>
               <div className='detailTime'>
-                <div className='label'>年代:</div>&emsp;<p>{myData.shuxing[currentIndex].time}</p>
+                <div className='label'>{myLangue === 'ZH' ? '年代:' : 'Date'}</div>&emsp;<p>{myData.shuxing[currentIndex].time}</p>
               </div>
               <div className='detailSize'>
-                <div className='label'>尺寸:</div>&emsp;<p>{myData.shuxing[currentIndex].size}</p>
+                <div className='label'>{myLangue === 'ZH' ? '尺寸:' : 'Dimensions'}</div>&emsp;<p>{myData.shuxing[currentIndex].size}</p>
               </div>
               <div className='detailDesc'>
-                <div className='label'>描述:</div>&emsp;
+                <div className='label'>{myLangue === 'ZH' ? '描述:' : 'Description'}</div>&emsp;
                 <p>{myData.shuxing[currentIndex].desc}</p>
               </div>
             </div>

+ 22 - 0
src/pages/A7wjwj/conponents/Weijie/index.module.scss

@@ -19,3 +19,25 @@
     }
   }
 }
+
+.WeijieEn {
+  width: 100%;
+  height: 0px;
+  position: relative;
+  overflow: auto;
+  top: 20%;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  :global {
+    p {
+      font-size: 13px;
+      line-height: 28px;
+      text-align: center;
+      color: rgba(93, 96, 96, 1);
+    }
+  }
+}

+ 4 - 2
src/pages/A7wjwj/conponents/Weijie/index.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect } from 'react'
 import styles from './index.module.scss'
-
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+import classNames from 'classnames'
 type Props = {
   txt: string
   myLang: string
@@ -42,7 +44,7 @@ function Weijie({ txt, myLang }: Props) {
       }
     }
   }, [myLang, txt])
-  return <div id='Weijie' className={styles.Weijie} dangerouslySetInnerHTML={{ __html: txt }}></div>
+  return <div id='Weijie' className={classNames(styles.Weijie, myLang === 'EN' ? styles.WeijieEn : '')} dangerouslySetInnerHTML={{ __html: txt }}></div>
 }
 
 const MemoWeijie = React.memo(Weijie)

+ 90 - 0
src/pages/A7wjwj/index.module.scss

@@ -74,6 +74,83 @@
   }
 }
 
+.A7WjwjEn {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  background-color: #efede5;
+  background-image: url('../../assets/img/A7base3_bg.jpg');
+  background-size: cover;
+
+  :global {
+    .back {
+      width: 60px;
+      height: 30px;
+      position: absolute;
+      z-index: 1;
+      top: 3%;
+      left: 4%;
+      cursor: pointer;
+
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+
+    .topBar {
+      position: absolute;
+      left: 50%;
+      top: 6%;
+      transform: translateX(-50%);
+      width: fit-content;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 40px;
+      font-size: 13px;
+      font-weight: bold;
+      color: rgba(124, 75, 54, 1);
+
+      .tab {
+        position: relative;
+        width: 125px;
+        height: 30px;
+        line-height: 13px;
+        text-align: center;
+        color: rgba(93, 96, 96, 0.8);
+        cursor: pointer;
+        transition: all 0.8s;
+
+        &::after {
+          content: '';
+          transition: opacity 0.8s;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          z-index: -1;
+          transform: translate(-50%, -56%);
+          width: 140%;
+          height: 110%;
+          background: url('../../assets/img/A7_btn_ac.png') no-repeat center center;
+          background-size: contain;
+          opacity: 0;
+        }
+
+        &.active {
+          color: rgba(124, 75, 54, 1);
+
+          &::after {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+}
+
 // --------移动端
 .A7WjwjMo {
   :global {
@@ -87,3 +164,16 @@
     }
   }
 }
+
+.A7WjwjMoEn {
+  :global {
+    .topBar {
+      left: 55%;
+
+      .tab {
+        width: 140px;
+        font-size: 17px;
+      }
+    }
+  }
+}

+ 4 - 4
src/pages/A7wjwj/index.tsx

@@ -36,7 +36,7 @@ function A7Wjwj() {
   }, [unityKey])
 
   return (
-    <div className={classNames(styles.A7Wjwj, isPc ? '' : styles.A7WjwjMo)}>
+    <div className={classNames(styles.A7Wjwj, myLangue === 'EN' ? styles.A7WjwjEn : '', (!isPc && myLangue === 'ZH') ? styles.A7WjwjMo : '', (!isPc && myLangue === 'EN') ? styles.A7WjwjMoEn : '')}>
       {unitySta ? (
         <Zloding
           isShow={unitySta}
@@ -69,19 +69,19 @@ function A7Wjwj() {
           className={`tab songFont ${currentTab === 0 ? 'active' : ''}`}
           onClick={() => setCurrentTab(0)}
         >
-          {myLangue === 'EN' ? 'Discover' : '发现之谜'}
+          {myLangue === 'EN' ? 'The Mystery of Discovery' : '发现之谜'}
         </div>
         <div
           className={`tab songFont ${currentTab === 1 ? 'active' : ''}`}
           onClick={() => setCurrentTab(1)}
         >
-          {myLangue === 'EN' ? 'Distinction' : '属性之辨'}
+          {myLangue === 'EN' ? 'Clarifying Its Characteristics' : '属性之辨'}
         </div>
         <div
           className={`tab songFont ${currentTab === 2 ? 'active' : ''}`}
           onClick={() => setCurrentTab(2)}
         >
-          {myLangue === 'EN' ? 'Unresolved' : '未解之思'}
+          {myLangue === 'EN' ? 'Unresolved Questions' : '未解之思'}
         </div>
       </div>