feat: 丧葬因素英文版

src/pages/A6ybwx/Sangzang/components/Policy/index.module.scss

@@ -102,7 +102,10 @@
             font-weight: 400;
             color: rgba(69, 68, 55, 1);
             white-space: normal;
-            transition: width 0.6s ease-in-out, padding 0.86s ease-in-out, opacity 0.3s ease-in-out;
+            transition:
+              width 0.6s ease-in-out,
+              padding 0.86s ease-in-out,
+              opacity 0.3s ease-in-out;
 
             &::-webkit-scrollbar {
               width: 0;
@@ -295,6 +298,413 @@
                 width: 0;
                 height: 0;
               }
+
+              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%
+              );
+            }
+          }
+        }
+      }
+    }
+
+    .timeLine {
+      position: absolute;
+      z-index: 4;
+      bottom: -10px;
+      left: 15%;
+      width: 600px;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      gap: 20px;
+
+      .dot {
+        align-self: flex-start;
+        width: 60px;
+        height: 35px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        margin: 0 20px;
+
+        .txt {
+          width: 100%;
+          height: 15px;
+          font-size: 12px;
+          line-height: 16px;
+          text-align: center;
+          letter-spacing: 1px;
+          color: rgba(69, 68, 55, 1);
+          font-weight: 700;
+        }
+
+        .txtAc {
+          color: #7c4b36;
+        }
+
+        & > img {
+          height: 24px;
+          object-fit: contain;
+        }
+      }
+
+      .lineContainner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+        height: 2px;
+        display: flex;
+        align-items: center;
+        background-image: url('../../../../../assets/sgImg/line.png');
+        background-size: 100% 2px;
+        background-repeat: no-repeat;
+        background-position: center center;
+
+        // background-size: 5px 2px;
+        // background-repeat: repeat-x;
+      }
+    }
+  }
+}
+
+.PolicyEn {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 3;
+  top: 0%;
+  left: 0%;
+  background-color: #804b2a;
+  // background: url(../../../../../assets/img/A6_policy_detail_bg.jpg) no-repeat center center;
+  // background-size: 100% 100%;
+  overflow: hidden;
+
+  :global {
+    #Zback {
+      left: 3%;
+    }
+
+    .containner {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 102%;
+      overflow: hidden;
+
+      .containner2 {
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+        vertical-align: top;
+        white-space: nowrap;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        overscroll-behavior: none;
+
+        // overflow-y: hidden;
+        // overflow-y: hidden;
+        &::-webkit-scrollbar {
+          width: 0;
+          height: 0;
+        }
+      }
+
+      .tabItem {
+        display: inline-block;
+        width: auto;
+        vertical-align: top;
+        height: 100%;
+
+        .history1 {
+          display: inline-block;
+          vertical-align: top;
+          width: 110px;
+          height: 100%;
+          background-color: rgba(128, 75, 42, 1);
+          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
+
+          .txt {
+            width: 100%;
+            line-height: 17px;
+            white-space: normal;
+            text-align: center;
+            height: 46%;
+            font-size: 13px;
+            writing-mode: horizontal-tb;
+            color: rgb(255, 233, 182);
+            letter-spacing: 1px;
+            padding-top: 80px;
+            margin: 0;
+          }
+
+          .bottom {
+            width: 100%;
+            height: 54%;
+
+            & > img {
+              width: 100%;
+              height: 100%;
+              object-fit: fill;
+            }
+          }
+        }
+
+        .historyDetail {
+          width: auto;
+          height: 100%;
+          transition: all 0.6s ease-in-out;
+          // display: flex;
+          display: inline-block;
+          vertical-align: top;
+
+          .part1,
+          .part2 {
+            position: relative;
+            display: inline-block;
+            vertical-align: top;
+            padding: 55px 20px 20px;
+            width: 340px;
+            height: 100%;
+            overflow: auto;
+            font-size: 11px;
+            line-height: 18px;
+            padding-right: 22px;
+            // letter-spacing: 2px;
+            font-weight: 400;
+            color: rgba(69, 68, 55, 1);
+            white-space: normal;
+            transition:
+              width 0.6s ease-in-out,
+              padding 0.86s ease-in-out,
+              opacity 0.3s ease-in-out;
+
+            &::-webkit-scrollbar {
+              width: 0;
+              height: 0;
+            }
+          }
+
+          .part1 {
+            background-image: url('../../../../../assets/img/A6_policy_part_bg1.jpg');
+            background-size: 100% 100%;
+            padding-bottom: 40px;
+
+            .part1Box {
+              width: 100%;
+              height: 100%;
+              padding-bottom: 20px;
+              overflow: auto;
+              mask-image: linear-gradient(
+                to bottom,
+                rgba(0, 0, 0, 1) 0%,
+                rgba(0, 0, 0, 1) 80%,
+                /* 保留顶部70%不透明 */ rgba(0, 0, 0, 0) 100% /* 底部30%完全透明 */
+              );
+              -webkit-mask-image: linear-gradient(
+                to bottom,
+                rgba(0, 0, 0, 1) 0%,
+                rgba(0, 0, 0, 1) 80%,
+                rgba(0, 0, 0, 0) 100%
+              );
+
+              &::-webkit-scrollbar {
+                width: 0;
+                height: 0;
+              }
+            }
+
+            .part1txt {
+              width: 100%;
+              text-align: justify;
+
+              // overflow: auto;
+
+              // &::-webkit-scrollbar {
+              //   width: 0;
+              //   height: 0;
+              // }
+            }
+
+            .from {
+              width: 100%;
+              color: rgba(124, 75, 54, 1);
+              font-size: 11px;
+              line-height: 16px;
+
+              // &::-webkit-scrollbar {
+              //   width: 0;
+              //   height: 0;
+              // }
+
+              .fromtxt {
+                width: 100%;
+                height: fit-content;
+                text-align: justify;
+                hyphens: auto;
+              }
+
+              .author {
+                text-align: right;
+                width: 100%;
+                height: fit-content;
+              }
+            }
+          }
+
+          .part2 {
+            display: inline-block;
+            vertical-align: top;
+            position: relative;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
+            background-image: url('../../../../../assets/img/A6_policy_part_bg.jpg');
+            background-color: #ddd6c1;
+            background-size: 100% 100%;
+
+            .imgBox {
+              width: 100%;
+              height: 76%;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+              text-align: center;
+
+              & > img {
+                height: 78%;
+                max-width: 50%;
+                object-fit: contain;
+                position: relative;
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%);
+              }
+
+              .from {
+                text-align: center;
+                height: 20%;
+                width: 100%;
+                font-size: 11px;
+                line-height: 16px;
+                color: #908c7b;
+                padding-top: 15px;
+              }
+
+              .part2Box {
+                position: absolute;
+                right: 1%;
+                top: 20%;
+                width: 90px;
+                height: 200px;
+              }
+
+              .nameE,
+              .timeE {
+                text-align: left;
+                font-size: 13px;
+                line-height: 15px;
+              }
+
+              .timeE {
+                margin-top: 4px;
+                font-size: 10px;
+                line-height: 12px;
+              }
+
+              .changeBar {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-222%, -154%);
+                width: 70px;
+                height: 60px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                gap: 20px;
+
+                .yuan,
+                .ta {
+                  opacity: 0.6;
+                  width: 70px;
+                  height: 40px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  position: relative;
+                  font-size: 13px;
+
+                  & > img {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    width: 100%;
+                    height: 100%;
+                    object-fit: contain;
+                  }
+                }
+
+                .cActive {
+                  opacity: 1;
+                  color: #7c4b36;
+                }
+              }
+            }
+
+            .desc {
+              letter-spacing: 0px;
+              line-height: 16px;
+              width: 100%;
+              height: 20%;
+              white-space: normal;
+              overflow: auto;
+              text-align: justify;
+              font-size: 12px;
+              color: #454437;
+
+              &::-webkit-scrollbar {
+                width: 0;
+                height: 0;
+              }
+
+              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%
+              );
             }
           }
         }

src/pages/A6ybwx/Sangzang/components/Policy/index.tsx

@@ -11,7 +11,7 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
   const originRef = useRef<HTMLDivElement>(null)
   const itemRef = useRef<HTMLDivElement>(null)
 
-  const { myData } = useSelector((state: RootState) => state.A0Layout)
+  const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)
   const [isOriStates, setIsOriStates] = useState(
     myData.policy[0].part2.map(item => (item.img ? true : false))
   )
@@ -83,7 +83,7 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
   }, [])
 
   return (
-    <div className={styles.Policy}>
+    <div className={styles.Policy + ' ' + (myLangue === 'EN' ? styles.PolicyEn : '')}>
       <Zback clickFu={() => setShowTab(0)} />
 
       <div className='containner'>
@@ -114,8 +114,24 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
                         <div className='from'>
                           {isOriStates[part2Index] ? part2Item.from : part2Item.from_ac}
                         </div>
-                        <div className='name songFont'>{part2Item.name}</div>
-                        <div className='time songFont' dangerouslySetInnerHTML={{ __html: part2Item.time }}></div>
+                        {myLangue === 'ZH' ? (
+                          <>
+                            <div className='name songFont'>{part2Item.name}</div>
+                            <div
+                              className='time songFont'
+                              dangerouslySetInnerHTML={{ __html: part2Item.time }}
+                            ></div>
+                          </>
+                        ) : (
+                          <div className='part2Box'>
+                            <div className='nameE songFont'>{part2Item.name}</div>
+                            <div
+                              className='timeE songFont'
+                              dangerouslySetInnerHTML={{ __html: part2Item.time }}
+                            ></div>
+                          </div>
+                        )}
+
                         <div className='changeBar'>
                           <div
                             className={`yuan ${isOriStates[part2Index] ? 'cActive' : ''}`}
@@ -126,7 +142,7 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
                               )
                             }
                           >
-                            原碑
+                            {myLangue === 'EN' ? 'original' : '原碑'}
                             <img src={require('@/assets/sgImg/btn_active.png')} alt='' />
                           </div>
                           <div
@@ -138,12 +154,12 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
                               )
                             }
                           >
-                            拓片
+                            {myLangue === 'EN' ? 'rubbing' : '拓片'}
                             <img src={require('@/assets/sgImg/btn_normal.png')} alt='' />
                           </div>
                         </div>
                       </div>
-                      <div className='desc'>{part2Item.desc}</div>
+                      <div className='desc' onWheel={(e) => e.stopPropagation()}>{part2Item.desc}</div>
                     </div>
                   ))}
                 </>

src/pages/A6ybwx/Sangzang/components/Sangzangys/index.tsx

@@ -13,7 +13,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
   const [isShowMzwHot, setIsShowMzwHot] = useState(false)
   const [mzwCurrentIndex, setMzwCurrentIndex] = useState(0)
   const [selectedGeshi, setSelectedGeshi] = useState(0)
-  const { myData } = useSelector((state: RootState) => state.A0Layout)
+  const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)
 
   const picRef = useRef<HTMLDivElement>(null)
   console.log(picRef.current)
@@ -61,7 +61,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
   }, [currentTab, myData.sangzangLeftInfo2, myData.sangzangLeftInfo])
 
   return (
-    <div className={styles.sang}>
+    <div className={`${styles.sang} ${myLangue === 'EN' ? styles.sangEn : ''}`}>
       <Zback
         clickFu={() => {
           // 点击返回按钮时，先关闭当前内容直到tab未选中
@@ -137,13 +137,13 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
           />
           <div className='operate'>
             <div className='beiwen1 songFont' onClick={() => setSelectedGeshi(3)}>
-              程氏颂文
+              {myLangue === 'EN' ? 'Ode to the Cheng Clan' : '程氏颂文'}
             </div>
             <div className='beiwen2 songFont' onClick={() => setSelectedGeshi(2)}>
-              程哲生卒
+              {myLangue === 'EN' ? 'Life and Death of Cheng Zhe' : '程哲生卒'}
             </div>
             <div className='beiwen3 songFont' onClick={() => setSelectedGeshi(1)}>
-              先祖功绩
+              {myLangue === 'EN' ? 'Ancestral Achievements' : '先祖功绩'}
             </div>
           </div>
         </div>
@@ -167,7 +167,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
             />
             <div className='btn songFont' onClick={() => setIsShowHidContent(true)}>
               <img src={require('@/assets/img/A6_sangzang_btn2.png')} alt='' />
-              传统造像碑文
+              {myLangue === 'EN' ? <>Traditional<br /> Image Stele Inscription</> : '传统造像碑文'}
             </div>
           </div>
         </div>
@@ -178,41 +178,40 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
           className={`tab songFont ${currentTab === 'tab1' ? 'tab_active' : ''}`}
           onClick={() => handleTabClick('tab1')}
         >
-          墓志
+          {myLangue === 'EN' ? 'Epitaph' : '墓志'}
           <br />
-          范式
+          {myLangue === 'EN' ? 'Paradigm' : '范式'}
         </div>
         <div
           className={`tab songFont ${currentTab === 'tab2' ? 'tab_active' : ''}`}
           onClick={() => handleTabClick('tab2')}
         >
-          郡望
+          {myLangue === 'EN' ? 'Assertion of Commandery' : '郡望'}
           <br />
-          标榜
+          {myLangue === 'EN' ? 'Praise' : '标榜'}
         </div>
         <div
           className={`tab songFont ${currentTab === 'tab3' ? 'tab_active' : ''}`}
           onClick={() => handleTabClick('tab3')}
         >
-          立碑
+          {myLangue === 'EN' ? 'Motivation for' : '立碑'}
           <br />
-          动机
+          {myLangue === 'EN' ? 'Stele Erection' : '动机'}
         </div>
         <div
           className={`tab songFont ${currentTab === 'tab4' ? 'tab_active' : ''}`}
           onClick={() => handleTabClick('tab4')}
         >
-          刻写
+          {myLangue === 'EN' ? 'Sequence of Inscription and' : '刻写'}
           <br />
-          时序
+          {myLangue === 'EN' ? 'Carving' : '时序'}
         </div>
       </div>
 
       {/* 墓志铭格式-detail */}
       <div className={`geshi ${selectedGeshi === 0 ? 'geshiHide' : ''}`}>
-        <div className='back' onClick={() => setSelectedGeshi(0)}>
-          <img src={require('@/assets/img/btn_back.png')} alt='' />
-        </div>
+        <Zback clickFu={() => setSelectedGeshi(0)} />
+
         <div className='geshi_left'>
           <div
             className='pic'
@@ -287,7 +286,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
           ></div>
         </div>
         <div className='mzwclose' onClick={() => setIsShowMzwHot(false)}>
-          <img src={require('@/assets/img/closeWithTxt.png')} alt='' />
+          <img src={require(`@/assets/img/closeWithTxt${myLangue === 'EN' ? '_E' : ''}.png`)} alt='' />
         </div>
       </div>
     </div>

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

@@ -132,3 +132,135 @@
     }
   }
 }
+
+.sangzangHomeEn {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 4;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: url(../../../assets/img/A6_sangzang_home_bg_E.jpg) no-repeat center center;
+  background-size: 100% 100%;
+
+  &:global(.sangzangHome_show) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  :global {
+    .homeTitleEN {
+      position: absolute;
+      top: 13%;
+      left: 6%;
+      width: 385px;
+      height: 34px;
+      display: flex;
+      align-items: center;
+    }
+
+    .homeLeft {
+      position: absolute;
+      top: 16%;
+      left: 6%;
+      width: 385px;
+      height: 68%;
+      display: flex;
+      align-items: center;
+
+      .homeLeftBox {
+        width: 100%;
+        max-height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        text-align: justify;
+        overflow: auto;
+
+        .htitle {
+          width: 100%;
+          font-size: 12px;
+          line-height: 18px;
+          color: rgba(69, 68, 55, 1);
+          hyphens: auto;
+        }
+
+        .hcontent {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          overflow: auto;
+
+          &::-webkit-scrollbar {
+            width: 0px;
+            height: 0px;
+          }
+
+          .hitem {
+            width: 100%;
+            height: fit-content;
+            font-size: 9px;
+            line-height: 12px;
+            letter-spacing: 1px;
+            font-weight: 400;
+            color: rgba(124, 75, 54, 1);
+            opacity: 0.7;
+
+            // margin-bottom: 10px;
+
+            .htxt {
+              width: 100%;
+              height: fit-content;
+            }
+
+            .hfrom {
+              width: 100%;
+              text-align: right;
+              height: fit-content;
+              //    position: relative;
+              // top: -4px;
+              // margin-bottom: 5px;
+            }
+            .lastTxt {
+              text-align: right;
+            }
+          }
+        }
+      }
+    }
+
+    .btnContainner {
+      width: 430px;
+      height: 50px;
+      position: absolute;
+      bottom: 5%;
+      left: 48%;
+      transform: translate(-84%, 2%);
+      display: flex;
+      // align-items: center;
+      justify-content: center;
+      gap: 8px;
+      cursor: pointer;
+
+      .btn {
+        width: 210px;
+        height: 50px;
+        font-size: 12px;
+        line-height: 15px;
+        padding: 10px 20px;
+        text-align: center;
+        color: rgba(255, 233, 182, 1);
+        background: url(../../../assets/img/A6_sangzang_btn1.png) no-repeat center center;
+        background-size: cover;
+      }
+
+      .btn2 {
+        color: rgba(124, 75, 54, 1);
+        background: url(../../../assets/img/A6_sangzang_btn2.png) no-repeat center center;
+        background-size: cover;
+      }
+    }
+  }
+}