feat: 造像艺术中国化-英文版开发

public/myData/myData.js

@@ -1173,7 +1173,7 @@ const myDataTemp = {
   // 造像艺术
   zaoxiangDataDetail: [
     {
-      customN: ' (字庆云)',
+      typeN: '西域雕塑风格',
       type: '西域雕塑风格',
       name: '高浮雕',
       lineSrc: './myData/img/gaofudiao_line.png',
@@ -1189,7 +1189,7 @@ const myDataTemp = {
       foxiangUrl: `myData/img/A6_zxys_gfd.png`
     },
     {
-      customN: ' (字庆云)',
+      typeN: '中国传统绘画',
       type: '中国传统绘画',
       name: '阴线刻',
       lineSrc: './myData/img/yinxianke_line.png',
@@ -1210,7 +1210,7 @@ const myDataTemp = {
       foxiangUrl: `myData/img/A6_zxys_yxk.png`
     },
     {
-      customN: ' (字庆云)',
+      typeN: '汉地服饰',
       type: '汉地服饰',
       name: '供养人',
       lineSrc: './myData/img/gongyangren_line.png',
@@ -1225,7 +1225,7 @@ const myDataTemp = {
       foxiangUrl: `myData/img/A6_zxys_gyr.png`
     },
     {
-      customN: ' (字庆云)',
+      typeN: '中西融合',
       type: '中西融合',
       name: '护法狮子丶飞天',
       lineSrc: './myData/img/shizi_line.png',

src/pages/A1home2/index.tsx

@@ -89,15 +89,15 @@ function A1home() {
   const enter = useCallback(() => {
     if (progress >= 100) {
       // 删除第一个动画和封面图 (暂时中英文版本都只用一个)
-      // moveImg.current.destroy()
-      moveImg2.current.destroy()
+      if (myLangue === 'EN') moveImg.current.destroy()
+      else moveImg2.current.destroy()
       domDelOwnFu('.A1baseVideo')
       // domDelOwnFu('.homeImg')
       setLoadOk(true)
       // 播放过场视频
       if (videoRefLast.current) videoRefLast.current.play()
     }
-  }, [progress])
+  }, [progress, myLangue])
 
   useEffect(() => {
     // 1-10
@@ -175,8 +175,8 @@ function A1home() {
             webkit-playsinline='true'
             x5-video-player-type='h5'
             onEnded={() => window.location.replace('#/base')}
-            src={
-              videos[1] ? baseUrl + videos[1] : `./myData/home${myLangue === 'EN' ? 'En' : ''}.mp4`
+            src={myLangue === 'ZH' ?
+              videos[1] ? baseUrl + videos[1] : `./myData/home.mp4` : `./myData/homeEn.mp4`
             }
           />
 

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

@@ -90,7 +90,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt, setIsShowS
           tooltip.style.inset = inset + '!important'
         }
       }, 100)
-    }, [index, inset])
+    }, [index, inset, showTooltip])
 
     return (
       <Tooltip
@@ -122,8 +122,8 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt, setIsShowS
         getPopupContainer={() => document.body.querySelector('#root') as HTMLElement}
         open={showTooltip === index}
         trigger='contextMenu'
-        placement='topLeft'
-        align={{ offset: [-25, -10] }}
+        placement='topRight'
+        align={{ offset: [0, -10] }}
       // arrow={false}
       >
         <a

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

@@ -5,7 +5,7 @@
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  z-index: 1;
+  z-index: 3;
   background-image: url('../../../assets/img/A6_zaoxiang_bg.png');
   background-repeat: no-repeat;
   background-position: center center;
@@ -116,6 +116,72 @@
   }
 }
 
+.ZaoxiangEn {
+  :global {
+    .title {
+      position: absolute;
+      top: 12%;
+      left: 50%;
+      transform: translateX(-100%);
+      height: 136px;
+      width: 379px;
+
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    .zaoxiang_text {
+      position: absolute;
+      top: 38%;
+      left: 50%;
+      transform: translateX(-115%);
+      height: 230px;
+      width: 330px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      color: rgba(255, 233, 182, 1);
+
+      .t1 {
+        font-size: 18px;
+      }
+
+      .line1 {
+        opacity: 0;
+      }
+
+      .t2 {
+        width: 90%;
+        font-size: 15px;
+        letter-spacing: 0;
+        text-align: justify;
+        font-weight: 300;
+        word-spacing: -1px;
+        hyphens: auto;
+        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%
+        );
+      }
+    }
+  }
+}
+
 .detailPage {
   width: 100%;
   height: 100%;
@@ -366,4 +432,224 @@
   }
 }
 
+.detailPageEn {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  &:global(.D0) {
+    :global {
+      .detailpageContent {
+        .txtcontent {
+          transform: translate(-94%, -50%);
+          width: 370px;
+        }
+      }
+    }
+  }
+
+  :global {
+    .detailpageTop {
+      width: 100%;
+      height: 12%;
+    }
+
+    .detailpageContent {
+      height: 88%;
+      width: 100%;
+      background: url('../../../assets/img/A6_zaoxiang_detail_bg.png') no-repeat center top;
+      background-size: 100% 94%;
+
+      .title,
+      .txtcontent,
+      .preview,
+      .foxiang {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .detailTitle {
+        transform: translate(11%, -2%);
+        width: 50%;
+        height: auto;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        position: relative;
+
+        .name {
+          width: fit-content;
+          max-width: 260px;
+          height: auto;
+          font-size: 14px;
+          padding: 6px 30px;
+          background: url('../../../assets/img/A6_zaoxiang_name_bg_E.png') no-repeat center center;
+          background-size: 100% 100%;
+          color: #ffe8b5;
+          font-weight: lighter;
+          text-align: left;
+          font-weight: 700;
+          line-height: 20px;
+          text-shadow: 2px 2px 7px #bf4403;
+        }
+
+        .dtxt {
+          position: absolute;
+          top: 16px;
+          left: 20px;
+          padding-top: 14px;
+          width: fit-content;
+          height: 45px;
+
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          font-size: 12px;
+          color: rgba(124, 75, 54, 1);
+          margin-left: 6px;
+
+          .icon1,
+          .icon2 {
+            width: 20px;
+            height: 20px;
+
+            & > img {
+              height: 100%;
+              object-fit: contain;
+            }
+          }
+
+          .dtext {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            font-size: 14px;
+            line-height: 28px;
+            letter-spacing: 1px;
+            writing-mode: horizontal-tb;
+          }
+        }
+      }
+
+      .txtcontent {
+        width: 370px;
+        height: 120px;
+        max-height: none;
+        top: 39%;
+        transform: translate(-94%, -50%);
+        font-size: 12px;
+        color: rgba(93, 96, 96, 1);
+        text-align: justify;
+        line-height: 20px;
+        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%
+        );
+      }
+
+      .preview {
+        transform: translate(-94%, 20%);
+        width: 400px;
+        height: 150px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        .previewItem {
+          width: 190px;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          justify-content: flex-start;
+          position: relative;
+
+          .pic {
+            width: 120px;
+            height: 120px;
+            border-radius: 50%;
+            background-color: #ccc;
+            margin: 0 auto;
+            & > img {
+              border-radius: 50%;
+              width: 120px;
+              height: 120px;
+              object-fit: cover;
+            }
+          }
+
+          .txt {
+            margin-left: 0;
+            width: fit-content;
+            line-height: 12px;
+            color: rgba(175, 135, 100, 1);
+            text-align: center;
+            writing-mode: horizontal-tb;
+            height: auto;
+            font-size: 10px;
+          }
+
+          .icon3 {
+            width: 30px;
+            height: 30px;
+            background-color: rgba(175, 135, 100, 0.6);
+            border-radius: 50%;
+            position: absolute;
+            bottom: 19%;
+            right: 15%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            & > img {
+              height: 20px;
+              width: 20px;
+              object-fit: contain;
+            }
+          }
+        }
+      }
+
+      .foxiang0,
+      .foxiang1,
+      .foxiang2,
+      .foxiang3 {
+        position: relative;
+        transform: translate(122%, -23%);
+        width: 400px;
+        height: 150%;
+
+        & > img {
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .foxiang2 {
+        height: 100%;
+        transform: translate(133%, -18%);
+      }
+
+      .foxiang3 {
+        transform: translate(122%, -33%);
+      }
+    }
+  }
+}
 //--------移动端

src/pages/A6ybwx/A6_2_zxzgh/components/Bq/index.module.scss

@@ -12,7 +12,9 @@
       .left,
       .right {
         opacity: 1;
-        transition: all 1s ease-in-out, opacity 0.3s ease-in-out;
+        transition:
+          all 1s ease-in-out,
+          opacity 0.3s ease-in-out;
       }
     }
   }
@@ -527,3 +529,576 @@
     }
   }
 }
+
+.BqEN {
+  width: auto;
+  height: 100%;
+  background: url('../../../../../assets/img/A6_sinicize_bg2_4.jpg') repeat-x center bottom;
+  background-size: 100% 100%;
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+  display: inline-block;
+  vertical-align: top;
+  &:global(.detailShow) {
+    :global {
+      .left,
+      .right {
+        opacity: 1;
+        transition:
+          all 1s ease-in-out,
+          opacity 0.3s ease-in-out;
+      }
+    }
+  }
+  &:global(.detailHide) {
+    :global {
+      .left,
+      .right {
+        width: 0;
+        opacity: 0;
+        transition: all 0.6s ease-in-out;
+        padding: 0;
+      }
+    }
+  }
+
+  :global {
+    .point {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 225px;
+      height: 60px;
+      & > img {
+        position: absolute;
+        z-index: -1;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: auto;
+        height: 100%;
+        object-fit: contain;
+      }
+      .pPoint {
+        padding: 6px 0;
+        padding-left: 55px;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .pointTime,
+        .pointTitle {
+          padding-left: 10px;
+          width: fit-content;
+          height: 50%;
+          font-size: 20px;
+          font-weight: 500;
+          color: rgba(124, 75, 54, 1);
+          text-align: center;
+        }
+      }
+    }
+    .left {
+      width: 190px;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+      white-space: normal;
+      .lTop {
+        text-align: justify;
+        padding: 20px;
+        padding-right: 0;
+        padding-bottom: 0;
+        width: 93%;
+        height: 220px;
+        font-size: 11px;
+        line-height: 17px;
+        font-weight: 400;
+        color: rgba(93, 96, 96, 1);
+        word-spacing: -1px;
+        hyphens: auto;
+        // 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%
+        );
+        & > span {
+          font-size: 20px;
+          font-weight: bold;
+          color: rgba(169, 135, 99, 1);
+        }
+      }
+      .lContent {
+        width: 100%;
+        height: calc(100% - 100px);
+        display: flex;
+        gap: 5px;
+        position: relative;
+        .lImgBox {
+          width: 550px;
+          height: 100%;
+          .pic {
+            width: 100%;
+            height: 100%;
+            transition: all 0.6s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: top right;
+            background-size: contain;
+          }
+          .imgFromTxt {
+            position: absolute;
+            bottom: 5px;
+            left: 0;
+            width: 100%;
+            height: 15px;
+            font-size: 11px;
+            color: rgba(151, 151, 151, 1);
+            text-align: center;
+          }
+          & > img {
+            height: 100%;
+            object-fit: contain;
+          }
+        }
+        .lInfo {
+          padding-left: 20px;
+          padding-top: 30px;
+          width: 90%;
+          height: 48%;
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          gap: 20px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+            width: 0px;
+            height: 0px;
+          }
+          .item {
+            width: 100%;
+            height: fit-content;
+            font-size: 13px;
+            font-weight: 500;
+            color: rgba(124, 75, 54, 1);
+
+            .lTitle {
+              width: 100%;
+              height: fit-content;
+              font-size: 19px;
+              line-height: 24px;
+              letter-spacing: 2px;
+              font-weight: bold;
+              color: rgba(124, 75, 54, 1);
+              position: relative;
+              z-index: 1;
+              &::after {
+                content: '';
+                width: 46px;
+                height: 7px;
+                position: absolute;
+                z-index: -1;
+                top: 50%;
+                left: 50%;
+                transform: translate(-480%, 65%);
+                background-color: rgb(197, 185, 144);
+              }
+            }
+            .lText {
+              font-size: 15px;
+              line-height: 22px;
+              font-weight: 400;
+              color: rgb(93, 96, 96);
+              height: fit-content;
+              text-align: justify;
+              margin-top: 5px;
+              max-height: 90px;
+              overflow: auto;
+              &::-webkit-scrollbar {
+                width: 0px;
+                height: 0px;
+              }
+              & > span {
+                color: rgb(169, 135, 99);
+              }
+            }
+          }
+        }
+      }
+    }
+    .right {
+      width: fit-content;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+
+      .RItems {
+        width: fit-content;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        .item {
+          width: 450px;
+          height: 100%;
+          position: relative;
+          .pic {
+            width: 100%;
+            height: 100%;
+            transition: all 0.6s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: right;
+            background-size: contain;
+          }
+          .imgFromTxt {
+            position: absolute;
+            bottom: 5px;
+            left: 0;
+            width: 100%;
+            height: 15px;
+            font-size: 11px;
+            color: rgba(151, 151, 151, 1);
+            text-align: center;
+          }
+          .bq1 {
+            transform: translate(-113%, 3%);
+            .main {
+              width: 225px;
+              text-align: right;
+              white-space: normal;
+            }
+            .dotRight {
+              width: 100px;
+              top: 7%;
+              .card_arrowR {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+          .point8 {
+            transform: translate(-131%, 55%);
+            .pPoint {
+              width: 268px;
+              position: relative;
+              top: -10px;
+              left: -50px;
+              text-align: right;
+              white-space: normal;
+            }
+          }
+          .Fbq2 {
+            transform: translateX(117px);
+          }
+          .bq2 {
+            transform: translate(-77%, 40%);
+            .main {
+              width: 242px;
+              text-align: right;
+              white-space: normal;
+            }
+            .dotRight {
+              width: 100px;
+              top: 7%;
+              .card_arrowR {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+          .point9 {
+            transform: translate(-81%, 114%);
+            .pPoint {
+              width: 320px;
+              position: relative;
+              left: -110px;
+              top: -10px;
+              text-align: right;
+              white-space: normal;
+            }
+          }
+          .Fbq3 {
+            transform: translateX(79px);
+          }
+          .bq3 {
+            transform: translate(-66%, -82%);
+            .main {
+              width: 174px;
+              text-align: right;
+              white-space: normal;
+              .location::after {
+                content: '';
+                width: 6px;
+                height: 1px;
+                position: absolute;
+                z-index: -1;
+                top: 14%;
+                border-bottom: 1px dashed rgba(93, 96, 96, 1);
+              }
+            }
+            .dotRight {
+              width: 110px;
+              height: 152px;
+              border-left: 1px dashed rgb(93, 96, 96);
+              padding-top: 128px;
+              top: 15%;
+              left: 1px;
+              .name {
+                padding-right: 17px;
+              }
+              .card_arrowR {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+          .point10 {
+            transform: translate(-76%, -309%);
+            .pPoint {
+              width: 257px;
+              position: relative;
+              left: -38px;
+              top: -10px;
+              text-align: right;
+              white-space: normal;
+            }
+          }
+          .Fbq4 {
+            transform: translateX(-43px);
+          }
+          .bq4 {
+            transform: translate(-15%, 19%);
+            .main {
+              width: 174px;
+              white-space: normal;
+            }
+            .dotLeft {
+              width: 145px;
+              top: 2%;
+              .name {
+                text-align: left;
+              }
+              .name {
+                padding-left: 36px;
+              }
+              .card_arrowL {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+          .point11 {
+            transform: translate(15%, 105%);
+            .pPoint {
+              width: 329px;
+              white-space: normal;
+              position: relative;
+              top: -10px;
+            }
+          }
+          .Fbq5 {
+            transform: translateX(-58px);
+          }
+          .bq5 {
+            transform: translate(-18%, -49%);
+            .main {
+              width: 94px;
+              white-space: normal;
+            }
+            .dotLeft {
+              width: 157px;
+              top: 2%;
+              .name {
+                text-align: left;
+                padding-left: 48px;
+              }
+              .card_arrowL {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+          .point12 {
+            transform: translate(-5%, -147%);
+            .pPoint {
+              width: 270px;
+              position: relative;
+              top: -10px;
+              white-space: normal;
+              padding-left: 54px;
+            }
+          }
+        }
+        .item:nth-child(1) {
+          width: 330px;
+        }
+        .item:nth-child(2) {
+          width: 560px;
+          .pic {
+            height: calc(100% - 10px);
+          }
+        }
+        .item:nth-child(3) {
+          .pic {
+            height: calc(100% - 10px);
+          }
+        }
+        .item:nth-child(4) {
+          width: 450px;
+          padding-right: 120px;
+        }
+        .item:nth-child(5) {
+          width: 520px;
+          padding-right: 170px;
+          .pic {
+            height: calc(100% - 10px);
+          }
+        }
+      }
+
+      .itme2Txt {
+        position: absolute;
+        top: 0;
+        right: 74.8%;
+        pointer-events: none;
+        white-space: normal;
+        text-align: justify;
+        padding-top: 30px;
+        padding-left: 14px;
+        width: 250px;
+        height: auto;
+        hyphens: auto;
+        font-size: 11px;
+        line-height: 17px;
+        font-weight: 400;
+        color: rgba(93, 96, 96, 1);
+        & > span {
+          font-weight: bold;
+          font-size: 16px;
+          color: rgba(169, 135, 99, 1);
+        }
+      }
+
+      .lInfo1,
+      .lInfo2 {
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        right: 1%;
+        white-space: normal;
+        padding-left: 20px;
+        padding-top: 30px;
+        width: 250px;
+        height: 60%;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        gap: 20px;
+        overflow: auto;
+        &::-webkit-scrollbar {
+          width: 0px;
+          height: 0px;
+        }
+        .item {
+          width: 100%;
+          height: fit-content;
+          font-size: 13px;
+          font-weight: 500;
+          color: rgba(124, 75, 54, 1);
+
+          .lTitle {
+            width: 100%;
+            height: fit-content;
+            font-size: 17px;
+            line-height: 22px;
+            letter-spacing: 0px;
+            font-weight: bold;
+            color: rgba(124, 75, 54, 1);
+            position: relative;
+            z-index: 1;
+            &::after {
+              content: '';
+              width: 32px;
+              height: 7px;
+              position: absolute;
+              z-index: -1;
+              top: 50%;
+              left: 50%;
+              transform: translate(-327%, 65%);
+              background-color: rgb(197, 185, 144);
+            }
+          }
+          .lText {
+            font-size: 11px;
+            line-height: 17px;
+            font-weight: 400;
+            color: rgb(93, 96, 96);
+            text-align: justify;
+            height: 85%;
+            margin-top: 5px;
+            hyphens: auto;
+            overflow: auto;
+            &::-webkit-scrollbar {
+              width: 0px;
+              height: 0px;
+            }
+            & > span {
+              color: rgb(169, 135, 99);
+            }
+          }
+        }
+      }
+      .lInfo1 {
+        top: 20%;
+        right: 75%;
+        .item {
+          .lTitle::after {
+            width: 55%;
+            transform: translate(-89%, 65%);
+          }
+        }
+      }
+      .lInfo2 {
+        right: 21%;
+        width: 193px;
+        .item {
+          .lTitle::after {
+            width: 94%;
+            transform: translate(-52%, 65%);
+          }
+          .lText {
+            width: 94%;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/A6ybwx/A6_2_zxzgh/components/Bq/index.tsx

@@ -3,12 +3,15 @@ import styles from './index.module.scss'
 import InfoCard from '../InfoCard'
 import InfoPoint from '../InfoPoint'
 import { yearType } from '../Bwzzq'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 function Bq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType) {
+  const { myLangue } = useSelector((state: RootState) => state.A0Layout)
   return (
     <div
       id='sinicizeDetail'
-      className={`${styles.Bq} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}
+      className={`${styles.Bq} ${myLangue === 'EN' ? styles.BqEN : ''} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}
     >
       {/* {selectedTime === index && ( */}
       <>
@@ -36,25 +39,38 @@ function Bq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType)
                   }}
                   className={`pic ${isShowLine[index2]?.isShow ? 'picLine' : ''}`}
                 />
-                <div className={`imgFromTxt F${i.classNameCard}`}>{!isShowLine[index2]?.isShow ? i.picfrom : ''}</div>
+                <div className={`imgFromTxt F${i.classNameCard}`}>
+                  {!isShowLine[index2]?.isShow ? i.picfrom : ''}
+                </div>
 
                 <InfoCard {...i} style={{ opacity: !isShowLine[index2]?.isShow ? '1' : '0' }} />
 
                 <InfoPoint
-                  style={{ opacity: !isShowLine[index2]?.isShow ? '0' : '0.3', animation: !isShowLine[index2]?.isShow ? '' : 'fadeInOut 2s linear  infinite' }}
-
+                  style={{
+                    opacity: !isShowLine[index2]?.isShow ? '0' : '0.3',
+                    animation: !isShowLine[index2]?.isShow ? '' : 'fadeInOut 2s linear  infinite'
+                  }}
                   time={i.time}
                   title={i.title}
                   classNamePoint={i?.classNamePoint}
                   direction={i?.direction}
                 />
-
               </div>
             ))}
           </div>
 
           <div className='itme2Txt'>
-            <span>北齐</span>造像更多受到印度笈多风格影响，造像风格趋于写实与人性化、理想化并重。
+            {myLangue === 'ZH' ? (
+              <>
+                <span>北齐</span>
+                造像更多受到印度笈多风格影响，造像风格趋于写实与人性化、理想化并重。
+              </>
+            ) : (
+              <>
+                <span>Northern Qi</span> sculpture shows a stronger influence from the Indian Gupta
+                style. Figures tend toward a balance of realism, humanization, and idealization.
+              </>
+            )}
           </div>
 
           {/* 佛像 */}

src/pages/A6ybwx/A6_2_zxzgh/components/Bwwq/index.module.scss

@@ -12,7 +12,9 @@
       .left,
       .right {
         opacity: 1;
-        transition: all 1s ease-in-out, opacity 0.3s ease-in-out;
+        transition:
+          all 1s ease-in-out,
+          opacity 0.3s ease-in-out;
       }
     }
   }
@@ -355,3 +357,369 @@
     }
   }
 }
+
+.BwwqEN {
+  width: auto;
+  height: 100%;
+  background: url('../../../../../assets/img/A6_sinicize_bg2_4.jpg') repeat-x center bottom;
+  background-size: 100% 100%;
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+  display: inline-block;
+  vertical-align: top;
+  &:global(.detailShow) {
+    :global {
+      .left,
+      .right {
+        opacity: 1;
+        transition:
+          all 1s ease-in-out,
+          opacity 0.3s ease-in-out;
+      }
+    }
+  }
+  &:global(.detailHide) {
+    :global {
+      .left,
+      .right {
+        width: 0;
+        opacity: 0;
+        transition: all 0.6s ease-in-out;
+      }
+    }
+  }
+
+  :global {
+    .point {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 225px;
+      height: 60px;
+      & > img {
+        position: absolute;
+        z-index: -1;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: auto;
+        height: 100%;
+        object-fit: contain;
+      }
+      .pPoint {
+        padding: 6px 0;
+        padding-left: 55px;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .pointTime,
+        .pointTitle {
+          padding-left: 10px;
+          width: fit-content;
+          height: 50%;
+          font-size: 20px;
+          font-weight: 500;
+          color: rgba(124, 75, 54, 1);
+          text-align: center;
+        }
+      }
+    }
+    .left {
+      width: 242px;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+      white-space: normal;
+      .lTop {
+        text-align: justify;
+        padding: 20px;
+        padding-right: 0;
+        padding-bottom: 0;
+        width: 100%;
+        height: 110px;
+        font-size: 11px;
+        line-height: 17px;
+        font-weight: 400;
+        hyphens: auto;
+        color: rgba(93, 96, 96, 1);
+      }
+      .itemHotBtn {
+        margin-top: 44px;
+        margin-left: 15px;
+        width: 80%;
+        height: 56px;
+        color: rgba(124, 75, 54, 1);
+        font-size: 15px;
+        cursor: pointer;
+        position: relative;
+        z-index: 2;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        & > img {
+          position: absolute;
+          z-index: -1;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 180px;
+          height: 100%;
+          object-fit: fill;
+        }
+        .hotFocu {
+          width: 35px;
+          height: 35px;
+          transform: translate(143%, -116%);
+        }
+      }
+      .lContent {
+        width: 100%;
+        height: calc(100% - 100px);
+        display: flex;
+        gap: 5px;
+        position: relative;
+        .lImgBox {
+          width: 550px;
+          height: 100%;
+          .pic {
+            width: 100%;
+            height: 100%;
+            transition: all 0.6s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: top right;
+            background-size: contain;
+          }
+          & > img {
+            height: 100%;
+            object-fit: contain;
+          }
+        }
+        .lInfo {
+          padding-left: 20px;
+          padding-top: 30px;
+          width: 90%;
+          height: 48%;
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          gap: 20px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+            width: 0px;
+            height: 0px;
+          }
+          .item {
+            width: 100%;
+            height: fit-content;
+            font-size: 13px;
+            font-weight: 500;
+            color: rgba(124, 75, 54, 1);
+
+            .lTitle {
+              width: 100%;
+              height: fit-content;
+              font-size: 19px;
+              line-height: 24px;
+              letter-spacing: 2px;
+              font-weight: bold;
+              color: rgba(124, 75, 54, 1);
+              position: relative;
+              z-index: 1;
+              &::after {
+                content: '';
+                width: 32px;
+                height: 7px;
+                position: absolute;
+                z-index: -1;
+                top: 50%;
+                left: 50%;
+                transform: translate(-480%, 65%);
+                background-color: rgb(197, 185, 144);
+              }
+            }
+            .lText {
+              font-size: 15px;
+              line-height: 22px;
+              font-weight: 400;
+              color: rgb(93, 96, 96);
+              height: fit-content;
+              text-align: justify;
+              margin-top: 5px;
+              max-height: 90px;
+              overflow: auto;
+              &::-webkit-scrollbar {
+                width: 0px;
+                height: 0px;
+              }
+              & > span {
+                color: rgb(169, 135, 99);
+              }
+            }
+          }
+        }
+      }
+    }
+    .right {
+      width: fit-content;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      .RItems {
+        width: fit-content;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        .item {
+          width: 344px;
+          height: 100%;
+          position: relative;
+          .pic {
+            width: 100%;
+            height: calc(100% - 15px);
+            transition: all 0.6s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: contain;
+          }
+          .imgFromTxt {
+            position: absolute;
+            bottom: 5px;
+            left: 0;
+            width: 100%;
+            height: 15px;
+            font-size: 11px;
+            color: rgba(151, 151, 151, 1);
+            text-align: center;
+          }
+          .wq1 {
+            transform: translate(-90%, 24%);
+            width: 360px;
+            .main {
+              width: 170px;
+              text-align: right;
+              white-space: normal;
+              .Cardtext {
+                text-align: justify;
+                hyphens: auto;
+              }
+            }
+            .dotRight {
+              width: 85px;
+              top: 7%;
+              .card_arrowR {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+          .point7 {
+            transform: translate(-142%, 121%);
+            .pPoint {
+              width: 233px;
+              position: relative;
+              top: -19px;
+              left: -15px;
+              white-space: normal;
+              text-align: right;
+            }
+          }
+        }
+      }
+    }
+    .itemHot {
+      background-color: rgba(33, 30, 26, 0.8);
+      backdrop-filter: blur(5px);
+      position: fixed;
+      z-index: 3;
+      top: 0;
+      left: 0;
+      width: 100%;
+      padding: 0 20px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .containner {
+        width: 730px;
+        height: 400px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 20px;
+        .closeItemHot {
+          position: absolute;
+          top: 33px;
+          right: 44px;
+          width: 80px;
+          height: 40px;
+          cursor: pointer;
+        }
+        .itemHot_title {
+          width: 100%;
+          height: 30px;
+          font-size: 22px;
+          color: rgba(255, 233, 182, 1);
+          text-align: center;
+          line-height: 24px;
+          & > img {
+            width: 20px;
+            height: 20px;
+            object-fit: contain;
+            margin: 0 10px;
+            display: inline-block;
+            vertical-align: top;
+          }
+        }
+        .itemHot_line {
+          width: 100%;
+          height: 30px;
+          margin: 14px 0;
+          & > img {
+            width: 100%;
+            height: 20px;
+            object-fit: contain;
+          }
+        }
+        .itemHot_content {
+          width: 100%;
+          height: 69%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          text-align: justify;
+          font-size: 11px;
+          hyphens: auto;
+          line-height: 16px;
+          color: rgba(255, 255, 255, 1);
+          white-space: normal;
+          gap: 20px;
+          .itemHotL {
+            width: 45%;
+            height: 100%;
+            & > img {
+              width: 100%;
+              height: 100%;
+              object-fit: contain;
+            }
+          }
+          .itemHotR {
+            width: 55%;
+            height: 100%;
+            display: inline-block;
+            vertical-align: top;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/A6ybwx/A6_2_zxzgh/components/Bwwq/index.tsx

@@ -3,11 +3,14 @@ import styles from './index.module.scss'
 import InfoCard from '../InfoCard'
 import InfoPoint from '../InfoPoint'
 import { yearType } from '../Bwzzq';
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 function Bwwq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType) {
   const [isShowHot, setIsShowHot] = useState(false)
+  const { myLangue } = useSelector((state: RootState) => state.A0Layout)
   return (
-    <div id='sinicizeDetail' className={`${styles.Bwwq} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
+    <div id='sinicizeDetail' className={`${styles.Bwwq} ${myLangue === 'EN' ? styles.BwwqEN : ''} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
       {/* {selectedTime === index && ( */}
       <>
         <div className='left'>
@@ -15,7 +18,7 @@ function Bwwq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearTyp
           <div className="itemHotBtn songFont" onClick={() => setIsShowHot(!isShowHot)}>
             <img src={require('@/assets/img/A6_sangzang_btn2.png')} alt="" />
             <img className='hotFocu' src={require('@/assets/img/A6_sinicize_focus.png')} alt="" />
-            知识拓展
+            {myLangue === 'EN' ? 'Related information' : '知识拓展'}
           </div>
         </div>
         <div className='right'>
@@ -55,12 +58,12 @@ function Bwwq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearTyp
           </div>
         </div>
         {isShowHot && (
-          <div className='itemHot '>
+          <div className='itemHot ' onWheel={(e) => e.stopPropagation()}>
             <div className="containner">
-              <div className="closeItemHot" onClick={() => setIsShowHot(!isShowHot)}><img src={require('@/assets/img/closeWithTxt.png')} alt="" /></div>
+              <div className="closeItemHot" onClick={() => setIsShowHot(!isShowHot)}><img src={require(`@/assets/img/closeWithTxt${myLangue === 'EN' ? '_E' : ''}.png`)} alt="" /></div>
               <div className="itemHot_title songFont"><img src={require('@/assets/img/A6_sinicize_hotdot.png')} alt="" />{sItem.items[0].title}<img src={require('@/assets/img/A6_sinicize_hotdot.png')} alt="" /></div>
               <div className="itemHot_content" >
-                <div className="itemHotL"><img src={require('@/assets/img/A6_sinicize_timeLine.png')} alt="" /></div>
+                <div className="itemHotL"><img src={require(`@/assets/img/A6_sinicize_timeLine${myLangue === 'EN' ? '_E' : ''}.png`)} alt="" /></div>
                 <div className="itemHotR" dangerouslySetInnerHTML={{ __html: sItem.items[0].txt }}></div>
               </div>
             </div>

src/pages/A6ybwx/A6_2_zxzgh/components/Bwzwq/index.module.scss

@@ -396,3 +396,426 @@
     }
   }
 }
+
+.BwzwqEN {
+  width: auto;
+  height: 100%;
+  background: url('../../../../../assets/img/A6_sinicize_bg2_4.jpg') repeat-x center bottom;
+  background-size: 100% 100%;
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+  display: inline-block;
+  vertical-align: top;
+  &:global(.detailShow) {
+    :global {
+      .left,
+      .right {
+        width: fit-content;
+        opacity: 1;
+        transition: all 1s ease-in-out;
+      }
+      .left {
+        width: 396px;
+      }
+    }
+  }
+  &:global(.detailHide) {
+    :global {
+      .left,
+      .right {
+        width: 0;
+        opacity: 0;
+        transition: all 0.6s ease-in-out;
+      }
+    }
+  }
+
+  :global {
+    .point {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 225px;
+      height: 60px;
+      & > img {
+        position: absolute;
+        z-index: -1;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: auto;
+        height: 100%;
+        object-fit: contain;
+      }
+      .pPoint {
+        padding: 6px 0;
+        padding-left: 55px;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .pointTime,
+        .pointTitle {
+          padding-left: 10px;
+          width: fit-content;
+          height: 50%;
+          font-size: 20px;
+          font-weight: 500;
+          color: rgba(124, 75, 54, 1);
+          text-align: center;
+        }
+      }
+    }
+    .left {
+      width: 408px;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+      white-space: normal;
+      .lTop {
+        text-align: justify;
+        padding: 20px;
+        padding-right: 0;
+        padding-bottom: 0;
+        width: 100%;
+        height: 120px;
+        font-size: 11px;
+        line-height: 17px;
+        font-weight: 400;
+        color: rgba(93, 96, 96, 1);
+        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%
+        );
+      }
+      .lContent {
+        width: 100%;
+        height: calc(100% - 100px);
+        display: flex;
+        gap: 5px;
+        position: relative;
+        .lImgBox {
+          width: 550px;
+          height: 100%;
+          .pic {
+            width: 100%;
+            height: calc(100% - 20px);
+            transition: all 0.6s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: top right;
+            background-size: contain;
+          }
+          .imgFromTxt {
+            width: 100%;
+            height: 15px;
+            font-size: 11px;
+            color: rgba(151, 151, 151, 1);
+            text-align: center;
+          }
+          & > img {
+            height: 100%;
+            object-fit: contain;
+          }
+        }
+        .lInfo {
+          padding-left: 20px;
+          padding-top: 10px;
+          width: 100%;
+          height: 48%;
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          gap: 20px;
+          overflow: visible;
+          &::-webkit-scrollbar {
+            width: 0px;
+            height: 0px;
+          }
+          .item {
+            width: 100%;
+            height: fit-content;
+            font-size: 13px;
+            font-weight: 500;
+            color: rgba(124, 75, 54, 1);
+
+            .lTitle {
+              width: 100%;
+              height: fit-content;
+              font-size: 17px;
+              line-height: 22px;
+              letter-spacing: 0px;
+              font-weight: bold;
+              color: rgba(124, 75, 54, 1);
+              position: relative;
+              z-index: 1;
+              &::after {
+                content: '';
+                width: 33%;
+                height: 7px;
+                position: absolute;
+                z-index: -1;
+                top: 50%;
+                left: 50%;
+                transform: translate(-147%, 65%);
+                background-color: rgb(197, 185, 144);
+              }
+            }
+            .lText {
+              font-size: 11px;
+              line-height: 17px;
+              font-weight: 400;
+              color: rgb(93, 96, 96);
+              height: fit-content;
+              text-align: left;
+              margin-top: 5px;
+              & > span {
+                color: rgb(169, 135, 99);
+              }
+            }
+          }
+        }
+      }
+    }
+    .right {
+      width: fit-content;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+      .RItems {
+        width: fit-content;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .item {
+          width: 522px;
+          height: 100%;
+          position: relative;
+
+          .pic {
+            width: 100%;
+            height: 100%;
+            transition: all 0.6s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: left;
+            background-size: contain;
+          }
+          .imgFromTxt {
+            position: absolute;
+            bottom: 5px;
+            left: 0;
+            width: 100%;
+            height: 15px;
+            font-size: 11px;
+            color: rgba(151, 151, 151, 1);
+            text-align: center;
+          }
+          .Fzwq1 {
+            transform: translateX(-9px);
+          }
+          .zwq1 {
+            transform: translate(-105%, 39%);
+            width: 420px;
+            top: 44%;
+            .main {
+              width: 252px;
+              text-align: right;
+              white-space: normal;
+              .Cardtext {
+                text-align: justify;
+                hyphens: auto;
+              }
+            }
+            .dotRight {
+              width: 90px;
+              top: 4%;
+              .card_arrowR {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+          .zwq2 {
+            transform: translate(21%, 46%);
+            width: 420px;
+            .main {
+              width: 178px;
+              white-space: normal;
+            }
+            .dotLeft {
+              width: 120px;
+              top: -3%;
+              .name {
+                text-align: left;
+                padding-left: 20px;
+              }
+              .card_arrowL {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+          .Fzwq3 {
+            transform: translateX(-137px);
+          }
+          .zwq3 {
+            transform: translate(-13%, -12%);
+            width: 420px;
+            .main {
+              width: 178px;
+              white-space: normal;
+            }
+            .dotLeft {
+              width: 120px;
+              top: -3%;
+              .name {
+                text-align: left;
+                padding-left: 20px;
+              }
+              .card_arrowL {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+          .point4 {
+            transform: translate(-152%, 182%);
+            .pPoint {
+              width: 350px;
+              position: relative;
+              left: -141px;
+              top: -10px;
+              text-align: right;
+              white-space: normal;
+            }
+          }
+          .point5 {
+            transform: translate(40%, -260%);
+            .pPoint {
+              width: 158px;
+            }
+          }
+          .point6 {
+            transform: translate(-14%, 96%);
+            .pPoint {
+              width: 333px;
+              flex-wrap: wrap;
+              position: relative;
+              top: -10px;
+              .pointTitle {
+                white-space: normal;
+              }
+            }
+          }
+        }
+        .item:nth-child(1) {
+          width: 383px;
+          padding-left: 20px;
+        }
+        .item:nth-child(3) {
+          width: 595px;
+          padding-left: 15px;
+          .pic {
+            height: calc(100% - 5px);
+          }
+        }
+      }
+      .lInfo {
+        pointer-events: none;
+        position: absolute;
+        top: 14px;
+        right: 2.4%;
+        white-space: normal;
+        padding-left: 20px;
+        padding-top: 30px;
+        width: 215px;
+        height: 60%;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        gap: 20px;
+        overflow: auto;
+        &::-webkit-scrollbar {
+          width: 0px;
+          height: 0px;
+        }
+        .item {
+          width: 100%;
+          height: fit-content;
+          font-size: 13px;
+          font-weight: 500;
+          color: rgba(124, 75, 54, 1);
+
+          .lTitle {
+            width: 100%;
+            height: fit-content;
+            font-size: 17px;
+            line-height: 22px;
+            letter-spacing: 0px;
+            font-weight: bold;
+            color: rgba(124, 75, 54, 1);
+            position: relative;
+            z-index: 1;
+            &::after {
+              content: '';
+              width: 83%;
+              height: 7px;
+              position: absolute;
+              z-index: -1;
+              top: 50%;
+              left: 50%;
+              transform: translate(-59%, 65%);
+              background-color: rgb(197, 185, 144);
+            }
+          }
+          .lText {
+            width: 100%;
+            font-size: 11px;
+            line-height: 17px;
+            font-weight: 400;
+            color: rgb(93, 96, 96);
+            text-align: justify;
+            height: 80%;
+            margin-top: 5px;
+            hyphens: auto;
+            overflow: auto;
+            &::-webkit-scrollbar {
+              width: 0px;
+              height: 0px;
+            }
+            & > span {
+              color: rgb(169, 135, 99);
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/A6ybwx/A6_2_zxzgh/components/Bwzwq/index.tsx

@@ -2,16 +2,19 @@ import React from 'react'
 import styles from './index.module.scss'
 import InfoCard from '../InfoCard'
 import InfoPoint from '../InfoPoint'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 import { yearType } from '../Bwzzq';
 
 function Bwzwq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType) {
+  const { myLangue } = useSelector((state: RootState) => state.A0Layout)
   return (
-    <div id='sinicizeDetail' className={`${styles.Bwzwq} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
+    <div id='sinicizeDetail' className={`${styles.Bwzwq} ${myLangue === 'EN' ? styles.BwzwqEN : ''} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
       {/* {selectedTime === index && ( */}
       <>
         <div className='left'>
-          <div className='lTop'>{sItem.desc}</div>
+          <div className='lTop' onWheel={(e) => e.stopPropagation()}>{sItem.desc}</div>
           <div className='lContent'>
             <div className='lInfo'>
               <div className='item' key={index}>

src/pages/A6ybwx/A6_2_zxzgh/components/Bwzzq/index.module.scss

@@ -12,7 +12,9 @@
       .left,
       .right {
         opacity: 1;
-        transition: all 1s ease-in-out, opacity 0.3s ease-in-out;
+        transition:
+          all 1s ease-in-out,
+          opacity 0.3s ease-in-out;
       }
     }
   }
@@ -287,6 +289,9 @@
             transform: translate(2%, -176%);
             .pPoint {
               width: 232px;
+              white-space: normal;
+              position: relative;
+              top: -10px;
             }
           }
           .Fzzq3 {
@@ -400,3 +405,451 @@
     }
   }
 }
+
+.BwzzqEN {
+  width: auto;
+  height: 100%;
+  background: url('../../../../../assets/img/A6_sinicize_bg2_4.jpg') repeat-x center bottom;
+  background-size: 100% 100%;
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+  display: inline-block;
+  vertical-align: top;
+  &:global(.detailShow) {
+    :global {
+      .left,
+      .right {
+        opacity: 1;
+        transition:
+          all 1s ease-in-out,
+          opacity 0.3s ease-in-out;
+      }
+    }
+  }
+  &:global(.detailHide) {
+    :global {
+      .left,
+      .right {
+        width: 0;
+        opacity: 0;
+        transition: all 0.6s ease-in-out;
+        margin: 0;
+      }
+    }
+  }
+
+  :global {
+    .point {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 225px;
+      height: 60px;
+      & > img {
+        position: absolute;
+        z-index: -1;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: auto;
+        height: 100%;
+        object-fit: contain;
+      }
+      .pPoint {
+        padding: 6px 0;
+        padding-left: 55px;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .pointTime,
+        .pointTitle {
+          padding-left: 10px;
+          width: fit-content;
+          height: 50%;
+          font-size: 20px;
+          font-weight: 500;
+          color: rgba(124, 75, 54, 1);
+          text-align: center;
+        }
+      }
+    }
+    .left {
+      width: 830px;
+      height: 100%;
+      margin-right: 30px;
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+      white-space: normal;
+      .lTop {
+        text-align: justify;
+        padding: 20px;
+        padding-right: 110px;
+        padding-bottom: 0;
+        width: 100%;
+        height: 130px;
+        font-size: 11px;
+        line-height: 17px;
+        font-weight: 400;
+        color: rgba(93, 96, 96, 1);
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        word-spacing: -1px;
+        hyphens: auto;
+        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%
+        );
+      }
+      .lContent {
+        width: 100%;
+        height: calc(100% - 60px);
+        display: flex;
+        gap: 5px;
+        position: relative;
+        margin-top: 60px;
+        .lImgBox {
+          width: 550px;
+          height: 100%;
+          .pic {
+            width: 100%;
+            height: calc(100% - 20px);
+            transition: all 0.6s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: right;
+            background-size: contain;
+          }
+          .imgFromTxt {
+            width: 100%;
+            height: 15px;
+            font-size: 11px;
+            color: rgba(151, 151, 151, 1);
+            text-align: center;
+          }
+          & > img {
+            height: 100%;
+            object-fit: contain;
+          }
+
+          .zzq1 {
+            transform: translate(-77%, -13%);
+            width: 520px;
+            .main {
+              text-align: right;
+              width: 304px;
+              .Cardtext {
+                max-height: 160px;
+                margin-top: 6px;
+                line-height: 17px;
+                hyphens: auto;
+              }
+            }
+            .dotRight {
+              width: 198px;
+              top: 38%;
+              .name {
+                padding-right: 10px;
+              }
+            }
+          }
+          .point1 {
+            transform: translate(-117%, 40%);
+            .pPoint {
+              font-size: 14px;
+              width: 258px;
+              position: relative;
+              left: -44px;
+              text-align: right;
+            }
+          }
+        }
+        .lInfo {
+          padding-left: 20px;
+          padding-top: 65px;
+          width: 336px;
+          height: 48%;
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          gap: 20px;
+
+          overflow: hidden;
+          .item {
+            width: 100%;
+            height: fit-content;
+            font-size: 13px;
+            font-weight: 500;
+            color: rgba(124, 75, 54, 1);
+
+            .lTitle {
+              width: 100%;
+              height: fit-content;
+              font-size: 17px;
+              line-height: 22px;
+              letter-spacing: 0px;
+              font-weight: bold;
+              color: rgba(124, 75, 54, 1);
+              position: relative;
+              z-index: 1;
+              &::after {
+                content: '';
+                width: 47%;
+                height: 7px;
+                position: absolute;
+                z-index: -1;
+                top: 50%;
+                left: 47%;
+                transform: translate(-98%, 65%);
+                background-color: rgb(197, 185, 144);
+              }
+            }
+            .lText {
+              font-size: 11px;
+              line-height: 17px;
+              font-weight: 400;
+              color: rgb(93, 96, 96);
+              height: fit-content;
+              text-align: justify;
+              margin-top: 5px;
+              max-height: 90px;
+              overflow: auto;
+              &::-webkit-scrollbar {
+                width: 0px;
+                height: 0px;
+              }
+              word-spacing: -1px;
+              hyphens: 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%
+              );
+              & > span {
+                color: rgb(169, 135, 99);
+              }
+            }
+          }
+        }
+      }
+    }
+    .right {
+      width: fit-content;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+      .RItems {
+        width: fit-content;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        .item {
+          width: 570px;
+          height: 100%;
+          position: relative;
+          .pic {
+            width: 100%;
+            height: calc(100% - 20px);
+            transition: all 0.6s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: left;
+            background-size: contain;
+          }
+          .imgFromTxt {
+            width: 100%;
+            height: 15px;
+            font-size: 11px;
+            color: rgba(151, 151, 151, 1);
+            text-align: center;
+          }
+          .Fzzq2 {
+            transform: translateX(-59px);
+          }
+          .zzq2 {
+            transform: translate(-14%, -61%);
+            width: 450px;
+            .main {
+              width: 194px;
+              text-align: left;
+              white-space: normal;
+              .Cardtext {
+                max-height: 140px;
+                margin-top: 12px;
+                hyphens: auto;
+              }
+            }
+            .dotLeft {
+              width: 150px;
+              top: 18%;
+              .name {
+                text-align: left;
+              }
+            }
+            .extraArrow {
+              display: block;
+              position: absolute;
+              transform: translate(114px, 98px);
+              .name {
+                display: none;
+              }
+              .card_arrowR {
+                width: 38px;
+                transform: rotate(180deg);
+              }
+            }
+          }
+          .point2 {
+            transform: translate(2%, -176%);
+            .pPoint {
+              width: 232px;
+            }
+          }
+          .Fzzq3 {
+            transform: translateX(-124px);
+          }
+          .zzq3 {
+            transform: translate(-20%, 6%);
+            width: 450px;
+            .main {
+              width: 150px;
+              white-space: normal;
+            }
+            .dotLeft {
+              width: 129px;
+              top: 3%;
+              .card_arrowR,
+              .card_arrowL {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+              .name {
+                text-align: left;
+              }
+            }
+          }
+          .point3 {
+            transform: translate(-37%, 88%);
+            .pPoint {
+              width: 305px;
+              white-space: normal;
+              position: relative;
+              top: -10px;
+            }
+          }
+        }
+        .item:nth-child(1) {
+          width: 445px;
+        }
+        .item:nth-child(2) {
+          width: 600px;
+          padding-right: 30px;
+        }
+      }
+
+      .lInfo {
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        right: 8%;
+        white-space: normal;
+        padding-left: 20px;
+        padding-top: 30px;
+        width: 193px;
+        height: 60%;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        gap: 20px;
+        overflow: auto;
+        &::-webkit-scrollbar {
+          width: 0px;
+          height: 0px;
+        }
+        .item {
+          width: 100%;
+          height: fit-content;
+          font-size: 13px;
+          font-weight: 500;
+          color: rgba(124, 75, 54, 1);
+
+          .lTitle {
+            width: 100%;
+            height: fit-content;
+            font-size: 17px;
+            line-height: 22px;
+            letter-spacing: 0px;
+            font-weight: bold;
+            color: rgba(124, 75, 54, 1);
+            position: relative;
+            z-index: 1;
+            &::after {
+              content: '';
+              width: 94%;
+              height: 7px;
+              position: absolute;
+              z-index: -1;
+              top: 50%;
+              left: 50%;
+              transform: translate(-52%, 65%);
+              background-color: rgb(197, 185, 144);
+            }
+          }
+          .lText {
+            font-size: 11px;
+            line-height: 17px;
+            font-weight: 400;
+            color: rgb(93, 96, 96);
+            text-align: justify;
+            height: 83%;
+            margin-top: 5px;
+            hyphens: auto;
+            overflow: hidden;
+            &::-webkit-scrollbar {
+              width: 0px;
+              height: 0px;
+            }
+            & > span {
+              color: rgb(169, 135, 99);
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/A6ybwx/A6_2_zxzgh/components/Bwzzq/index.tsx

@@ -3,6 +3,8 @@ import styles from './index.module.scss'
 import { showLineType } from "../..";
 import InfoCard from '../InfoCard'
 import InfoPoint from '../InfoPoint'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 export type yearItemType = {
   time: string
@@ -30,17 +32,18 @@ export type yearType = {
   index: number
 }
 function Bwzzq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType) {
+  const { myLangue } = useSelector((state: RootState) => state.A0Layout)
   return (
-    <div id='sinicizeDetail' className={`${styles.Bwzzq} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
+    <div id='sinicizeDetail' className={`${styles.Bwzzq} ${myLangue === 'EN' ? styles.BwzzqEN : ''} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
       {/* {selectedTime === index && ( */}
       <>
         <div className='left'>
-          <div className='lTop'>{sItem.desc}</div>
+          <div className='lTop' onWheel={(e) => e.stopPropagation()}>{sItem.desc}</div>
           <div className='lContent'>
             <div className='lInfo'>
               <div className='item' key={index}>
                 <div className='lTitle songFont'>{sItem.items[0].title}</div>
-                <div className='lText' dangerouslySetInnerHTML={{ __html: sItem.items[0].txt }}></div>
+                <div className='lText' onWheel={(e) => e.stopPropagation()} dangerouslySetInnerHTML={{ __html: sItem.items[0].txt }}></div>
               </div>
             </div>
             <div className='lImgBox'>

src/pages/A6ybwx/A6_2_zxzgh/components/Bz/index.module.scss

@@ -12,7 +12,9 @@
       .left,
       .right {
         opacity: 1;
-        transition: all 1s ease-in-out, opacity 0.3s ease-in-out;
+        transition:
+          all 1s ease-in-out,
+          opacity 0.3s ease-in-out;
       }
     }
   }
@@ -394,3 +396,411 @@
     }
   }
 }
+
+.BzEN {
+  width: auto;
+  height: 100%;
+  background: url('../../../../../assets/img/A6_sinicize_bg2_4.jpg') repeat-x center bottom;
+  background-size: 100% 100%;
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+  display: inline-block;
+  vertical-align: top;
+  &:global(.detailShow) {
+    :global {
+      .left,
+      .right {
+        opacity: 1;
+        transition:
+          all 1s ease-in-out,
+          opacity 0.3s ease-in-out;
+      }
+    }
+  }
+  &:global(.detailHide) {
+    :global {
+      .left,
+      .right {
+        width: 0;
+        opacity: 0;
+        transition: all 0.6s ease-in-out;
+      }
+    }
+  }
+
+  :global {
+    .point {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 225px;
+      height: 60px;
+      & > img {
+        position: absolute;
+        z-index: -1;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: auto;
+        height: 100%;
+        object-fit: contain;
+      }
+      .pPoint {
+        padding: 6px 0;
+        padding-left: 55px;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .pointTime,
+        .pointTitle {
+          padding-left: 10px;
+          width: fit-content;
+          height: 50%;
+          font-size: 20px;
+          font-weight: 500;
+          color: rgba(124, 75, 54, 1);
+          text-align: center;
+        }
+      }
+    }
+    .left {
+      width: 220px;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+      white-space: normal;
+      .lTop {
+        text-align: justify;
+        padding: 20px;
+        padding-right: 0;
+        padding-bottom: 0;
+        width: 100%;
+        height: 100px;
+        font-size: 11px;
+        line-height: 17px;
+        font-weight: 400;
+        color: rgba(93, 96, 96, 1);
+      }
+      .lContent {
+        width: 100%;
+        height: calc(100% - 100px);
+        display: flex;
+        gap: 5px;
+        position: relative;
+        .lImgBox {
+          width: 550px;
+          height: 100%;
+          .pic {
+            width: 100%;
+            height: 100%;
+            transition: all 0.6s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: top right;
+            background-size: contain;
+          }
+          & > img {
+            height: 100%;
+            object-fit: contain;
+          }
+        }
+        .lInfo {
+          padding-left: 20px;
+          padding-top: 10px;
+          width: 100%;
+          height: 58%;
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          gap: 20px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+            width: 0px;
+            height: 0px;
+          }
+          .item {
+            width: 100%;
+            height: 100%;
+            font-size: 13px;
+            font-weight: 500;
+            color: rgba(124, 75, 54, 1);
+
+            .lTitle {
+              width: 100%;
+              height: fit-content;
+              font-size: 17px;
+              line-height: 22px;
+              letter-spacing: 0px;
+              font-weight: bold;
+              color: rgba(124, 75, 54, 1);
+              position: relative;
+              z-index: 1;
+              &::after {
+                content: '';
+                width: 62%;
+                height: 7px;
+                position: absolute;
+                z-index: -1;
+                top: 50%;
+                left: 50%;
+                transform: translate(-78%, 65%);
+                background-color: rgb(197, 185, 144);
+              }
+            }
+            .lText {
+              font-size: 11px;
+              line-height: 17px;
+              font-weight: 400;
+              color: rgb(93, 96, 96);
+
+              text-align: justify;
+              margin-top: 5px;
+              overflow: visible;
+              &::-webkit-scrollbar {
+                width: 0px;
+                height: 0px;
+              }
+              & > span {
+                color: rgb(169, 135, 99);
+              }
+            }
+          }
+        }
+      }
+    }
+    .right {
+      width: fit-content;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      .RItems {
+        width: fit-content;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .item {
+          width: 500px;
+          height: 100%;
+          position: relative;
+
+          .pic {
+            width: 100%;
+            height: 100%;
+            transition: all 0.6s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: left;
+            background-size: contain;
+          }
+          .imgFromTxt {
+            position: absolute;
+            bottom: 5px;
+            left: 0;
+            width: 100%;
+            height: 15px;
+            font-size: 11px;
+            color: rgba(151, 151, 151, 1);
+            text-align: center;
+          }
+          .bz1 {
+            transform: translate(-105%, 34%);
+            width: 320px;
+            height: 170px;
+            .main {
+              width: 170px;
+              text-align: right;
+              white-space: normal;
+              top: 45%;
+            }
+            .dotRight {
+              width: 100px;
+              top: 2%;
+              .name {
+                padding-right: 0;
+              }
+              .card_arrowR {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+          .point13 {
+            transform: translate(-142%, 180%);
+            .pPoint {
+              width: 265px;
+              position: relative;
+              left: -48px;
+              text-align: right;
+            }
+          }
+
+          .Fbz2 {
+            transform: translateX(-38px);
+          }
+          .bz2 {
+            transform: translate(-7%, -22%);
+            width: 350px;
+            height: 170px;
+            .main {
+              width: 170px;
+              text-align: left;
+              white-space: normal;
+            }
+            .dotLeft {
+              width: 160px;
+              top: -7%;
+              .name {
+                text-align: left;
+              }
+              .card_arrowL {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+          .point14 {
+            transform: translate(30%, -59%);
+            .pPoint {
+              width: 240px;
+              white-space: normal;
+              position: relative;
+              top: -10px;
+            }
+          }
+
+          .Fbz3 {
+            transform: translateX(79px);
+          }
+          .bz3 {
+            transform: translate(-142%, 42%);
+            width: 320px;
+            height: 170px;
+            .main {
+              width: 193px;
+              text-align: right;
+              white-space: normal;
+            }
+            .dotRight {
+              width: 85px;
+              top: 5%;
+              .card_arrowR {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+          .point15 {
+            transform: translate(-165%, 149%);
+            .pPoint {
+              width: 315px;
+              position: relative;
+              left: -99px;
+              top: -10px;
+              text-align: right;
+              white-space: normal;
+            }
+          }
+        }
+        .item:nth-child(1) {
+          width: 340px;
+        }
+        .item:nth-child(2) {
+          width: 460px;
+          padding-left: 20px;
+          .pic {
+            height: calc(100% - 5px);
+          }
+        }
+        .item:nth-child(3) {
+          width: 665px;
+          padding-left: 80px;
+          .pic {
+            height: calc(100% - 20px);
+          }
+        }
+      }
+
+      .lInfo2 {
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        right: 29.2%;
+        white-space: normal;
+        padding-left: 20px;
+        padding-top: 30px;
+        width: 206px;
+        height: 60%;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        gap: 20px;
+        overflow: auto;
+        &::-webkit-scrollbar {
+          width: 0px;
+          height: 0px;
+        }
+        .item {
+          width: 100%;
+          height: fit-content;
+          font-size: 13px;
+          font-weight: 500;
+          color: rgba(124, 75, 54, 1);
+
+          .lTitle {
+            width: 100%;
+            height: fit-content;
+            font-size: 17px;
+            line-height: 22px;
+            letter-spacing: 0px;
+            font-weight: bold;
+            color: rgba(124, 75, 54, 1);
+            position: relative;
+            z-index: 1;
+            &::after {
+              content: '';
+              width: 89%;
+              height: 7px;
+              position: absolute;
+              z-index: -1;
+              top: 50%;
+              left: 50%;
+              transform: translate(-55%, 65%);
+              background-color: rgb(197, 185, 144);
+            }
+          }
+          .lText {
+            font-size: 11px;
+            line-height: 17px;
+            font-weight: 400;
+            color: rgb(93, 96, 96);
+            text-align: justify;
+            height: 80%;
+            margin-top: 5px;
+            width: 95%;
+            overflow: auto;
+            hyphens: auto;
+            &::-webkit-scrollbar {
+              width: 0px;
+              height: 0px;
+            }
+            & > span {
+              color: rgb(169, 135, 99);
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/A6ybwx/A6_2_zxzgh/components/Bz/index.tsx

@@ -2,12 +2,16 @@ import React from 'react'
 import styles from './index.module.scss'
 import InfoCard from '../InfoCard'
 import InfoPoint from '../InfoPoint'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+
 
 import { yearType } from '../Bwzzq';
 
 function Bz({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType) {
+  const { myLangue } = useSelector((state: RootState) => state.A0Layout)
   return (
-    <div id='sinicizeDetail' className={`${styles.Bz} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
+    <div id='sinicizeDetail' className={`${styles.Bz} ${myLangue === 'EN' ? styles.BzEN : ''} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
       {/* {selectedTime === index && ( */}
       <>
         <div className='left'>

src/pages/A6ybwx/A6_2_zxzgh/components/InfoCard/index.module.scss

@@ -81,3 +81,87 @@
     }
   }
 }
+
+.InfoCardEN {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 350px;
+  height: 200px;
+  display: flex;
+  pointer-events: none;
+  transition: all 0.6s ease-in-out;
+  :global {
+    .dotLeft,
+    .dotRight,
+    .extraArrow {
+      width: 120px;
+      height: 20px;
+      position: relative;
+      top: 20%;
+      .name {
+        text-align: right;
+        height: 10px;
+        width: 100%;
+        color: rgba(255, 233, 182, 1);
+      }
+      .card_arrowR,
+      .card_arrowL {
+        margin-top: 6px;
+        width: 100%;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        .line {
+          width: 100%;
+          height: 0px;
+          border-top: 1px dashed rgba(255, 233, 182, 1);
+          border-bottom: 1px dashed rgba(255, 233, 182, 1);
+        }
+        & > img {
+          width: 12px;
+          height: 12px;
+          object-fit: contain;
+        }
+      }
+    }
+
+    .main {
+      padding: 4px;
+      width: 260px;
+      height: 100%;
+      font-size: 12px;
+      line-height: 15px;
+      .time {
+        color: rgba(124, 75, 54, 1);
+      }
+      .location {
+        color: rgba(175, 135, 100, 1);
+        font-weight: 600;
+      }
+      .Cardtext {
+        text-align: justify;
+        max-height: 110px;
+        margin-top: 6px;
+        line-height: 16px;
+        color: rgba(93, 96, 96, 1);
+        overflow: auto;
+        &::-webkit-scrollbar {
+          width: 0px;
+          height: 0px;
+        }
+      }
+      .from {
+        display: none;
+        font-size: 11px;
+        color: rgba(151, 151, 151, 1);
+      }
+    }
+
+    .extraArrow {
+      display: none;
+    }
+  }
+}

src/pages/A6ybwx/A6_2_zxzgh/components/InfoCard/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 import styles from './index.module.scss'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 type InfoCardProps = {
   time: string
@@ -23,8 +25,9 @@ function InfoCard({
   extraName = '',
   style = {}
 }: InfoCardProps) {
+  const { myLangue } = useSelector((state: RootState) => state.A0Layout)
   return (
-    <div className={`${styles.InfoCard} ${classNameCard}`} style={style}>
+    <div className={`${styles.InfoCard} ${myLangue === 'EN' ? styles.InfoCardEN : ''} ${classNameCard}`} style={style}>
       {direction === 'left' && (
         <div className='dotLeft'>
           <div className='name'>{name}</div>

src/pages/A6ybwx/A6_2_zxzgh/components/InfoPoint/index.module.scss

@@ -66,3 +66,79 @@
     }
   }
 }
+
+.pointEN {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 225px;
+  height: 60px;
+  pointer-events: none;
+  transition: all 0.6s ease-in-out;
+  @keyframes fadeInOut {
+    0% {
+      opacity: 0.3;
+      scale: 0.98;
+    }
+    50% {
+      opacity: 1;
+      scale: 1.02;
+    }
+    100% {
+      opacity: 0.3;
+      scale: 0.98;
+    }
+  }
+
+  &:global(.pointright) {
+    :global {
+      .pointBg {
+        transform: translate(-50%, -50%) rotate(180deg);
+      }
+      .pPoint {
+        padding-left: 0;
+        padding-right: 55px;
+      }
+    }
+  }
+  :global {
+    .pointBg {
+      position: absolute;
+      z-index: -1;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: auto;
+      height: 100%;
+      object-fit: contain;
+    }
+    .pPoint {
+      padding: 6px 0;
+      padding-left: 55px;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      font-size: 14px;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: left;
+      .pointTime,
+      .pointTitle {
+        padding-left: 10px;
+        width: 100%;
+        height: 50%;
+        font-weight: 500;
+        color: rgba(124, 75, 54, 1);
+      }
+      .pointTime {
+        line-height: 30px;
+      }
+      .pointTitle {
+        line-height: 20px;
+        color: rgba(175, 135, 100, 1);
+      }
+    }
+  }
+}

src/pages/A6ybwx/A6_2_zxzgh/components/InfoPoint/index.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import styles from './index.module.scss'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 type InfoPointProps = {
   time: string
@@ -9,10 +11,10 @@ type InfoPointProps = {
   style?: React.CSSProperties
 }
 function InfoPoint({ time, title, direction = 'right', classNamePoint = '', style = {} }: InfoPointProps) {
-
+  const { myLangue } = useSelector((state: RootState) => state.A0Layout)
   return (
     <div
-      className={`${styles.point} point${direction} ${classNamePoint}`}
+      className={`${styles.point} ${myLangue === 'EN' ? styles.pointEN : ''} point${direction} ${classNamePoint}`}
       style={style}
     >
       <img className="pointBg" src={require('@/assets/img/A6_pointBg.png')} alt="" />

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

@@ -5,7 +5,7 @@
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  z-index: 1;
+  z-index: 3;
   overflow: hidden;
   background-color: rgba(255, 233, 182, 1);
 
@@ -178,7 +178,7 @@
       background-repeat: no-repeat;
       background-image: url('../../../assets/img/A6_sinicize_btn1.png');
       background-size: 100% 100%;
-      background-color: rgba(255, 233, 182, 1);
+
       text-align: center;
       line-height: 17px;
       animation: fadeInOut 3s linear infinite;
@@ -352,7 +352,9 @@
             font-size: 15px;
             font-weight: 400;
             color: rgba(93, 96, 96, 1);
-            transition: opacity 1s ease-in-out, width 0.1s ease-in-out;
+            transition:
+              opacity 1s ease-in-out,
+              width 0.1s ease-in-out;
             line-height: 30px;
             text-indent: 2em;
             text-align: justify;
@@ -462,3 +464,380 @@
     }
   }
 }
+
+.Sinicize1EN {
+  width: 737px;
+  height: 100%;
+  position: relative;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-image: url('../../../assets/img/A6_sinicize_bg.jpg');
+  background-color: rgba(255, 233, 182, 1);
+  background-size: 100% 100%;
+  display: inline-block;
+  vertical-align: top;
+  white-space: normal;
+  :global {
+    .title {
+      position: absolute;
+      top: 13%;
+      left: 50%;
+      transform: translateX(-122%);
+      height: 100px;
+      width: 275px;
+
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+
+    .S2text {
+      position: absolute;
+      top: 36%;
+      left: 50%;
+      transform: translateX(-117%);
+      height: 55%;
+      width: 287px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      color: rgba(93, 96, 96, 1);
+      font-weight: lighter;
+
+      .line1 {
+        width: 100%;
+        height: 25px;
+
+        & > img {
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+
+      .t2 {
+        width: 87%;
+        height: 100%;
+        font-size: 10px;
+        line-height: 16px;
+        font-weight: 400;
+        text-align: justify;
+        word-spacing: -1px;
+        hyphens: auto;
+        // 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%
+        // );
+      }
+    }
+
+    .zhufo,
+    .pusha {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      opacity: 0.6;
+      transition: all 0.3s ease-in-out;
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+
+      &.active {
+        opacity: 1;
+      }
+    }
+
+    .zhufo {
+      height: 335px;
+      width: 280px;
+      transform: translate(-12%, -50%);
+
+      .name {
+        font-size: 16px;
+        font-weight: 500;
+        color: rgba(170, 105, 77, 1);
+        text-align: center;
+      }
+    }
+
+    .pusha {
+      height: 325px;
+      width: 120px;
+      transform: translate(45%, -50%);
+      & > img {
+        width: 100%;
+      }
+      .name {
+        font-size: 16px;
+        font-weight: 500;
+        color: rgba(170, 105, 77, 1);
+        text-align: center;
+      }
+    }
+
+    .sinicizeBtn1,
+    .sinicizeBtn2 {
+      position: absolute;
+      right: -0.5%;
+      bottom: 5%;
+      height: 60px;
+      width: 130px;
+      background: url('../../../assets/sgImg/btn_tab_normal.png') no-repeat center center;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 11px;
+      font-weight: 500;
+      text-align: center;
+      padding-left: 10px;
+      color: rgba(255, 233, 182, 1);
+      transition: all 0.3s ease-in-out;
+      &.active {
+        color: rgba(124, 75, 54, 1);
+        background: url('../../../assets/sgImg/btn_tab_active.png') no-repeat center center;
+        background-size: 100% 100%;
+      }
+    }
+
+    .sinicizeBtn1 {
+      bottom: 19%;
+    }
+  }
+}
+
+.Sinicize2EN {
+  width: fit-content;
+  height: 100%;
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  white-space: normal;
+  :global {
+    .scroll {
+      width: fit-content;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      white-space: nowrap;
+
+      .yearItem {
+        width: fit-content;
+        height: 100%;
+        display: inline-block;
+        vertical-align: top;
+        background-color: #fff;
+
+        .year {
+          width: 100px;
+          height: 100%;
+          font-size: 14px;
+          font-weight: 500;
+          color: rgba(255, 233, 182, 0.6);
+          text-align: center;
+          background-size: 100% 100%;
+          box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
+          display: inline-block;
+          vertical-align: top;
+
+          .yearContainner {
+            width: 100%;
+            height: 100%;
+
+            .txt {
+              writing-mode: horizontal-tb;
+              text-align: center;
+              letter-spacing: 2px;
+              white-space: normal;
+              width: 100%;
+              padding: 50px 5%;
+              padding-bottom: 10px;
+              height: fit-content;
+            }
+            .front {
+              width: 100%;
+              height: 50%;
+              padding: 0 10px;
+              font-size: 15px;
+              line-height: 24px;
+              font-weight: 400;
+              overflow: auto;
+              mask-image: linear-gradient(
+                to bottom,
+                rgba(0, 0, 0, 1) 0%,
+                rgba(0, 0, 0, 1) 70%,
+                /* 保留顶部70%不透明 */ rgba(255, 255, 255, 0.3) 100% /* 底部30%完全透明 */
+              );
+              -webkit-mask-image: linear-gradient(
+                to bottom,
+                rgba(0, 0, 0, 1) 0%,
+                rgba(0, 0, 0, 1) 70%,
+                rgba(255, 255, 255, 0.3) 100%
+              );
+              &::-webkit-scrollbar {
+                width: 0;
+                height: 0;
+              }
+            }
+          }
+        }
+
+        .year-zongjie {
+          background: url(../../../assets/img/sinicize_jy.jpg) no-repeat center center;
+          background-size: 100% 100%;
+          width: 100px;
+          .yearContainner {
+            .txt {
+              writing-mode: horizontal-tb;
+              text-align: center;
+              letter-spacing: 1px;
+              white-space: normal;
+              width: 100%;
+              padding: 80px 0;
+              padding-bottom: 10px;
+              height: fit-content;
+            }
+            .front {
+              height: 65%;
+              text-align: justify;
+              padding: 0 20px;
+              padding-bottom: 50px;
+            }
+          }
+        }
+        .jieyuDetail {
+          background-image: url(../../../assets/img/A6_sinicize_jieyuBg.png);
+          background-size: 100% 100%;
+          background-position: center center;
+          width: auto;
+          height: 100%;
+          display: inline-block;
+          vertical-align: top;
+          overflow: hidden;
+          transition: all 0.6s ease-in-out;
+          .jieyuDetailtxt {
+            width: 500px;
+            height: 100%;
+            padding: 80px 160px 0 40px;
+            font-size: 12px;
+            font-weight: 400;
+            color: rgba(93, 96, 96, 1);
+            transition:
+              opacity 1s ease-in-out,
+              width 0.1s ease-in-out;
+            line-height: 20px;
+            text-indent: 0em;
+            hyphens: auto;
+            text-align: justify;
+            white-space: normal;
+          }
+        }
+        .jieyuDetailHide {
+          .jieyuDetailtxt {
+            width: 0;
+            opacity: 0;
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+.labelEn {
+  transform: scale(1.5);
+  position: absolute;
+  height: 30px;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  color: rgba(124, 75, 54, 1);
+  font-weight: 500;
+  font-size: 9px;
+
+  :global {
+    .btn {
+      width: 40px;
+      height: 15px;
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-image: url('../../../assets/img/A6_sinicize_btn1.png');
+      background-size: 100% 100%;
+      text-align: center;
+      line-height: 7px;
+      font-size: 7px;
+      animation: fadeInOut 3s linear infinite;
+    }
+
+    .arrowL,
+    .arrowR {
+      width: 10px;
+      position: relative;
+      height: 0;
+      border-bottom: 1px dashed rgba(124, 75, 54, 1);
+      animation: fadeInOut 3s linear infinite;
+      .dot {
+        position: absolute;
+        width: 4px;
+        height: 4px;
+        background-color: rgba(124, 75, 54, 1);
+        border-radius: 50%;
+      }
+    }
+    .arrowL {
+      .dot {
+        left: -5px;
+        top: -1px;
+      }
+    }
+    .arrowR {
+      .dot {
+        right: -5px;
+        top: -1px;
+      }
+    }
+
+    // .arrowL {
+    //   &::after {
+    //     content: '';
+    //     position: absolute;
+    //     left: -6px;
+    //     top: 50%;
+    //     transform: translateY(-1px);
+    //     // 箭头三角形（向左）
+    //     border-right: 4px solid rgb(124, 75, 54);
+    //     border-top: 3px solid transparent;
+    //     border-bottom: 3px solid transparent;
+    //   }
+    // }
+
+    // .arrowR {
+    //   &::after {
+    //     content: '';
+    //     position: absolute;
+    //     right: -5px;
+    //     top: 50%;
+    //     transform: translateY(-1px);
+    //     border-left: 4px solid rgb(124, 75, 54);
+    //     border-top: 3px solid transparent;
+    //     border-bottom: 3px solid transparent;
+    //   }
+    // }
+  }
+}

src/pages/A6ybwx/A6_2_zxzgh/index.tsx

@@ -16,7 +16,7 @@ export type showLineType = {
 }[]
 
 function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
-  const { myData } = useSelector((state: RootState) => state.A0Layout)
+  const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)
 
   const [currentTab, setCurrentTab] = useState(0)
   const [selectedTime, setSelectedTime] = useState(-1)
@@ -38,21 +38,23 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
     width,
     inset,
     name,
-    direct
+    direct,
+    twoline = false
   }: {
     width: number
     inset: string
     name: string
     direct: string
+    twoline?: boolean
   }) => {
     return (
-      <div className={styles.label} style={{ inset: inset }}>
+      <div className={`${styles.label} ${myLangue === 'EN' ? styles.labelEn : ''}`} style={{ inset: inset }}>
         {direct === 'left' ? (
           <div className='arrowL' style={{ width: width + 'px' }}>
             <div className='dot'></div>
           </div>
         ) : null}
-        <div className='btn'>{name}</div>
+        <div className='btn' style={{ lineHeight: twoline ? '7px' : '14px' }}>{name}</div>
         {direct === 'right' ? (
           <div className='arrowR' style={{ width: width + 'px' }}>
             <div className='dot'></div>
@@ -147,52 +149,58 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
           }}
         />
         <div className='SinicizeScroll' ref={originRef}>
-          <div ref={sinicize1Ref} className={styles.Sinicize1}>
+          <div ref={sinicize1Ref} className={`${styles.Sinicize1} ${myLangue === 'EN' ? styles.Sinicize1EN : ''}`}>
 
             <div className='title'>
-              <img src={require('@/assets/img/A6_sinicize_title.png')} draggable='false' alt='' />
+              <img src={require(`@/assets/img/A6_sinicize_title${myLangue === 'EN' ? '_E' : ''}.png`)} draggable='false' alt='' />
             </div>
             <div className='S2text'>
               <div className='line1'>
                 <img src={require('@/assets/img/A6_sinicize_line2.png')} draggable='false' alt='' />
               </div>
-              <div className='t2'>{myData.sinicizeDataStatic.desc}</div>
+              <div
+                className='t2'
+                onWheel={(e) => e.stopPropagation()}
+              >
+                {myData.sinicizeDataStatic.desc}
+              </div>
             </div>
             {currentTab === 0 && (
               <div className={`zhufo ${currentTab === 0 ? 'active' : ''}`}>
                 <img src={require('@/assets/img/A6_sinicize_zhufo.png')} draggable='false' alt='' />{' '}
-                <div className='name songFont'>主尊佛像</div>
+                <div className='name songFont'>{myLangue === 'EN' ? 'the main Buddha figure' : '主尊佛像'}</div>
               </div>
             )}
             {currentTab === 1 && (
               <div className={`pusha ${currentTab === 1 ? 'active' : ''}`}>
                 <img src={require('@/assets/img/A6_sinicize_pusha.png')} draggable='false' alt='' />
-                <div className='name songFont'>胁侍菩萨</div>
+                <div className='name songFont'>{myLangue === 'EN' ? 'bodhisattvas' : '胁侍菩萨'}</div>
               </div>
             )}
             {currentTab === 0 && (
               <>
-                <Label width={70} inset={'53px auto auto 340px'} name={'肉髻'} direct={'right'} />
+                <Label width={70} inset={'53px auto auto 340px'} name={myLangue === 'EN' ? 'Meat Bun' : '肉髻'} direct={'right'} />
                 <Label
                   width={70}
                   inset={'176px auto auto 345px'}
-                  name={'僧祇支'}
+                  name={myLangue === 'EN' ? 'Sengqi Branch' : '僧祇支'}
                   direct={'right'}
+                  twoline={true}
                 />
-                <Label width={42} inset={'300px auto auto 306px'} name={'衣摆'} direct={'right'} />
-                <Label width={40} inset={'205px auto auto 547px'} name={'佛衣'} direct={'left'} />
-                <Label width={40} inset={'70px auto auto 532px'} name={'头光'} direct={'left'} />
-                <Label width={36} inset={'122px auto auto 550px'} name={'身光'} direct={'left'} />
+                <Label width={42} inset={'300px auto auto 306px'} name={myLangue === 'EN' ? 'hem' : '衣摆'} direct={'right'} />
+                <Label width={40} inset={'205px auto auto 547px'} name={myLangue === 'EN' ? 'Buddhist robe' : '佛衣'} direct={'left'} twoline={true} />
+                <Label width={40} inset={'70px auto auto 532px'} name={myLangue === 'EN' ? 'halo' : '头光'} direct={'left'} />
+                <Label width={36} inset={'122px auto auto 550px'} name={myLangue === 'EN' ? 'radiance' : '身光'} direct={'left'} />
               </>
             )}
 
             {currentTab === 1 && (
               <>
-                <Label width={51} inset={'83px auto auto 360px'} name={'头光'} direct={'right'} />
-                <Label width={51} inset={'181px auto auto 339px'} name={'披帛'} direct={'right'} />
-                <Label width={50} inset={'272px auto auto 345px'} name={'天衣'} direct={'right'} />
-                <Label width={40} inset={'93px auto auto 522px'} name={'头冠'} direct={'left'} />
-                <Label width={36} inset={'129px auto auto 530px'} name={'宝缯'} direct={'left'} />
+                <Label width={51} inset={'83px auto auto 360px'} name={myLangue === 'EN' ? 'halo' : '头光'} direct={'right'} />
+                <Label width={51} inset={'181px auto auto 339px'} name={myLangue === 'EN' ? 'Drape' : '披帛'} direct={'right'} />
+                <Label width={50} inset={'272px auto auto 345px'} name={myLangue === 'EN' ? 'Celestial Garment' : '天衣'} direct={'right'} twoline={true} />
+                <Label width={40} inset={'93px auto auto 522px'} name={myLangue === 'EN' ? 'Crown' : '头冠'} direct={'left'} />
+                <Label width={36} inset={'129px auto auto 530px'} name={myLangue === 'EN' ? 'Sacred Brocade' : '宝缯'} direct={'left'} twoline={true} />
               </>
             )}
 
@@ -200,21 +208,23 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
               className={`songFont sinicizeBtn1 ${currentTab === 0 ? 'active' : ''}`}
               onClick={() => setCurrentTab(0)}
             >
-              主尊
-              <br />
-              佛像
+              {myLangue === 'EN' ? 'the main Buddha figure' : <>
+                主尊
+                <br />
+                佛像</>}
             </div>
             <div
               className={`songFont sinicizeBtn2 ${currentTab === 1 ? 'active' : ''}`}
               onClick={() => setCurrentTab(1)}
             >
-              胁侍
-              <br />
-              菩萨
+              {myLangue === 'EN' ? 'bodhisattvas' : <>胁侍
+                <br />
+                菩萨</>}
+
             </div>
           </div>
 
-          <div className={styles.Sinicize2}>
+          <div className={`${styles.Sinicize2} ${myLangue === 'EN' ? styles.Sinicize2EN : ''}`}>
             <div className='scroll'>
               {/* 北魏早中期 */}
               <div className='yearItem' key={0}>

src/pages/A6ybwx/StatueArt/index.tsx

@@ -6,14 +6,13 @@ import Sinicize from '../A6_2_zxzgh/index'
 import Zaoxiang from '../A6_1_zxys/index'
 import { RootState } from '@/store'
 import { useSelector } from 'react-redux'
+import Zback from '@/components/Zback'
 function StatueArt({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
   const { myLangue } = useSelector((state: RootState) => state.A0Layout)
   const [gotopage, setGotopage] = useState(0)
   return (
     <div className={classNames(styles.StatueArt, isPc ? '' : styles.StatueArtMo, myLangue === 'EN' ? styles.StatueArtEn : '')}>
-      <div className='back' onClick={() => setGotoTab(0)}>
-        <img src={require('@/assets/img/btn_back.png')} alt='' />
-      </div>
+      <Zback clickFu={() => setGotoTab(0)} />
       {/* <div className='ffhyTitle'>
         <img src={require('@/assets/img/A6_ffhy_title.png')} draggable={false} alt='' />
       </div> */}

src/pages/A6ybwx/index.module.scss

@@ -84,6 +84,40 @@
   }
 }
 
+// 英文版
+.A6ybwxEn {
+  :global {
+    .BtnTabBar {
+      bottom: 20px;
+      right: -5px;
+      width: 221px;
+      height: 268px;
+      gap: 30px;
+      .tab1,
+      .tab2,
+      .tab3 {
+        width: 174px;
+        height: 35px;
+      }
+
+      .tab1 {
+        background: url('../../assets/img/A6_shixi_E.png') no-repeat center center;
+        background-size: contain;
+      }
+
+      .tab2 {
+        background: url('../../assets/img/A6_fanfeng_E.png') no-repeat center center;
+        background-size: contain;
+      }
+
+      .tab3 {
+        background: url('../../assets/img/A6_sangzang_E.png') no-repeat center center;
+        background-size: contain;
+      }
+    }
+  }
+}
+
 // --------移动端
 .A6ybwxMo {
   :global {

src/pages/A6ybwx/index.tsx

@@ -3,7 +3,7 @@ import styles from './index.module.scss'
 import StatueArt from './StatueArt'
 import Genealogy from './Genealogy'
 import SangzangHome from './Sangzang'
-
+import Zback from '@/components/Zback'
 import classNames from 'classnames'
 import { baseUrl, isPc } from '@/utils/http'
 import MenuSider from '@/components/MenuSider'
@@ -99,18 +99,12 @@ function A6ybwx() {
     }
   }, [isEnter])
 
-  const { videos } = useSelector((state: RootState) => state.A0Layout)
+  const { videos, myLangue } = useSelector((state: RootState) => state.A0Layout)
 
   return (
-    <div className={classNames(styles.A6ybwx, isPc ? '' : styles.A6ybwxMo)}>
-      <div
-        className='back'
-        onClick={() => {
-          window.location.replace('#/base?t=1')
-        }}
-      >
-        <img src={require('@/assets/img/btn_back.png')} alt='' />
-      </div>
+    <div className={classNames(styles.A6ybwx, isPc ? '' : styles.A6ybwxMo, myLangue === 'ZH' ? '' : styles.A6ybwxEn)}>
+
+      <Zback clickFu={() => window.location.replace('#/base?t=1')} />
 
       <div className='videoBox'>
         {/* ----开场视频----*/}

src/types/declaration.d.ts

@@ -84,6 +84,7 @@ type MyDataType = {
     }[]
   }[]
   zaoxiangDataDetail: {
+    typeN: string
     type: string
     name: string
     lineSrc: string