更新

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

@@ -1,7 +1,7 @@
 .Bq {
   width: auto;
   height: 100%;
-  background: url('../../../../../assets/img/A6_sinicize_bg2_4.png') repeat-x center bottom;
+  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;

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

@@ -1,7 +1,7 @@
 .Bwwq {
   width: auto;
   height: 100%;
-  background: url('../../../../../assets/img/A6_sinicize_bg2_4.png') repeat-x center bottom;
+  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;

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

@@ -1,7 +1,7 @@
 .Bwzwq {
   width: auto;
   height: 100%;
-  background: url('../../../../../assets/img/A6_sinicize_bg2_4.png') repeat-x center bottom;
+  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;
@@ -16,7 +16,7 @@
         transition: all 1s ease-in-out;
       }
       .left {
-        width: 500px;
+        width: 380px;
       }
     }
   }
@@ -72,7 +72,7 @@
       }
     }
     .left {
-      width: 500px;
+      width: 380px;
       height: 100%;
       display: inline-block;
       vertical-align: top;
@@ -151,7 +151,7 @@
                 z-index: -1;
                 top: 50%;
                 left: 50%;
-                transform: translate(-518%, 65%);
+                transform: translate(-384%, 65%);
                 background-color: rgb(197, 185, 144);
                 box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
               }
@@ -205,11 +205,12 @@
             transform: translate(-114%, 39%);
             width: 420px;
             .main {
+              width: 300px;
               text-align: right;
               white-space: normal;
             }
             .dotRight {
-              width: 160px;
+              width: 105px;
               top: -5%;
               .card_arrowR {
                 .line {
@@ -264,7 +265,7 @@
             }
           }
           .point4 {
-            transform: translate(-103%, 121%);
+            transform: translate(-120%, 182%);
             .pPoint {
               width: 350px;
               position: relative;

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

@@ -1,7 +1,7 @@
 .Bwzzq {
   width: auto;
   height: 100%;
-  background: url('../../../../../assets/img/A6_sinicize_bg2_4.png') repeat-x center bottom;
+  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;

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

@@ -1,7 +1,7 @@
 .Bz {
   width: auto;
   height: 100%;
-  background: url('../../../../../assets/img/A6_sinicize_bg2_4.png') repeat-x center bottom;
+  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;

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

@@ -32,7 +32,7 @@
   position: relative;
   background-position: center center;
   background-repeat: no-repeat;
-  background-image: url('../../../assets/img/A6_sinicize_bg.png');
+  background-image: url('../../../assets/img/A6_sinicize_bg.jpg');
   background-color: rgba(255, 233, 182, 1);
   background-size: 100% 100%;
   display: inline-block;
@@ -317,7 +317,7 @@
         }
 
         .year-zongjie {
-          background: url(../../../assets/img/sinicize_jy.png) no-repeat center center;
+          background: url(../../../assets/img/sinicize_jy.jpg) no-repeat center center;
           background-size: 100% 100%;
           width: 210px;
           white-space: normal;
@@ -432,17 +432,3 @@
     }
   }
 }
-
-// ----------移动端
-.Sinicize1 {
-  :global {
-    .back {
-      width: 80px;
-      height: 40px;
-
-      img {
-        object-fit: fill !important;
-      }
-    }
-  }
-}

src/pages/A6ybwx/A6_2_zxzgh/index.tsx

@@ -67,7 +67,9 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
     )
   }
 
-  const handleYearItemClick = (index: number) => {
+  const handleYearItemClick = (e: React.MouseEvent, index: number) => {
+    e.preventDefault()
+    e.stopPropagation()
     if (selectedTime === index) {
       setSelectedTime(-1)
       return
@@ -86,12 +88,15 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
     if (selectedTime >= 0 && sinicize1Ref.current && originRef.current) {
       console.log(123, selectedTime)
       // 依次排列，如果不需要就是[0,100,200,300,400]
-      const scrollPosition = [0, 0, 0, 0, 0][selectedTime] + sinicize1Ref.current.offsetWidth
+      const scrollPosition = [0, 100, 200, 300, 400][selectedTime] + sinicize1Ref.current.offsetWidth
       console.log(123, scrollPosition)
-      originRef.current.scrollTo({
-        left: scrollPosition,
-        behavior: 'smooth'
-      })
+      originRef.current.scrollLeft = scrollPosition
+      // setTimeout(() => {
+      //   originRef.current?.scrollTo({
+      //     left: scrollPosition,
+      //     behavior: 'smooth'
+      //   })
+      // }, 100);
     }
   }, [selectedTime])
 
@@ -206,7 +211,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                 <div
                   className='year'
                   style={{ backgroundImage: `url(${myData.sinicizeData[0].bgPath})` }}
-                  onClick={() => handleYearItemClick(0)}
+                  onClick={(e) => handleYearItemClick(e, 0)}
                 >
                   <div className='yearContainner'>
                     <div className='txt songFont'>{myData.sinicizeData[0].time}</div>
@@ -227,7 +232,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                 <div
                   className='year'
                   style={{ backgroundImage: `url(${myData.sinicizeData[1].bgPath})` }}
-                  onClick={() => handleYearItemClick(1)}
+                  onClick={(e) => handleYearItemClick(e, 1)}
                 >
                   <div className='yearContainner'>
                     <div className='txt songFont'>{myData.sinicizeData[1].time}</div>
@@ -248,7 +253,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                 <div
                   className='year'
                   style={{ backgroundImage: `url(${myData.sinicizeData[2].bgPath})` }}
-                  onClick={() => handleYearItemClick(2)}
+                  onClick={(e) => handleYearItemClick(e, 2)}
                 >
                   <div className='yearContainner'>
                     <div className='txt songFont'>{myData.sinicizeData[2].time}</div>
@@ -269,7 +274,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                 <div
                   className='year'
                   style={{ backgroundImage: `url(${myData.sinicizeData[3].bgPath})` }}
-                  onClick={() => handleYearItemClick(3)}
+                  onClick={(e) => handleYearItemClick(e, 3)}
                 >
                   <div className='yearContainner'>
                     <div className='txt songFont'>{myData.sinicizeData[3].time}</div>
@@ -290,7 +295,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                 <div
                   className='year'
                   style={{ backgroundImage: `url(${myData.sinicizeData[4].bgPath})` }}
-                  onClick={() => handleYearItemClick(4)}
+                  onClick={(e) => handleYearItemClick(e, 4)}
                 >
                   <div className='yearContainner'>
                     <div className='txt songFont'>{myData.sinicizeData[4].time}</div>

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

@@ -6,7 +6,7 @@
   z-index: 3;
   width: 100%;
   height: 100%;
-  background: url('../../../assets/img/A6_gen_bg.png') no-repeat center center;
+  background: url('../../../assets/img/A6_gen_bg.jpg') no-repeat center center;
   background-size: 100% 100%;
 
   :global {
@@ -19,7 +19,7 @@
       left: 4%;
       cursor: pointer;
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: fill !important;
       }
@@ -33,7 +33,7 @@
       left: 16%;
       cursor: pointer;
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: contain;
       }
@@ -84,7 +84,7 @@
   text-align: center;
   transition: all 0.3s ease-in-out;
 
-  &>img {
+  & > img {
     width: 100%;
     object-fit: contain;
   }
@@ -155,7 +155,7 @@
       width: 38%;
       height: 20px;
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: contain;
       }
@@ -175,7 +175,7 @@
       width: 80px;
       height: 40px;
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: contain;
       }
@@ -266,11 +266,11 @@
         width: 70px;
         height: 50px;
 
-        &>img {
+        & > img {
           height: 100%;
           object-fit: contain;
         }
       }
     }
   }
-}
+}

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

@@ -11,7 +11,6 @@
   overflow: hidden;
 
   :global {
-
     #Zback {
       left: 3%;
     }
@@ -23,6 +22,8 @@
       width: 100%;
       height: 102%;
       overflow: auto;
+      -webkit-overflow-scrolling: touch;
+      overscroll-behavior: none;
 
       // overflow-y: hidden;
       // overflow-y: hidden;
@@ -69,7 +70,7 @@
             width: 100%;
             height: 54%;
 
-            &>img {
+            & > img {
               width: 100%;
               height: 100%;
               object-fit: fill;
@@ -84,7 +85,6 @@
           // display: flex;
           display: inline-block;
 
-
           .part1,
           .part2 {
             position: relative;
@@ -112,7 +112,12 @@
               z-index: 1;
               // background-image: url('../../../../../assets/sgImg/mask.png');
               // background-size: 100% 100%;
-              background: linear-gradient(to top, rgba(255, 255, 255, 1), 20%, rgba(255, 255, 255, 0));
+              background: linear-gradient(
+                to top,
+                rgba(255, 255, 255, 1),
+                20%,
+                rgba(255, 255, 255, 0)
+              );
             }
 
             &::-webkit-scrollbar {
@@ -122,7 +127,7 @@
           }
 
           .part1 {
-            background-image: url('../../../../../assets/img/A6_policy_part_bg1.png');
+            background-image: url('../../../../../assets/img/A6_policy_part_bg1.jpg');
             background-size: #ddd6c2;
             background-size: 100% 100%;
             padding-bottom: 60px;
@@ -180,7 +185,7 @@
             align-items: center;
             justify-content: space-between;
             gap: 10px;
-            background-image: url('../../../../../assets/img/A6_policy_part_bg.png');
+            background-image: url('../../../../../assets/img/A6_policy_part_bg.jpg');
             background-color: #ddd6c1;
             background-size: 100% 100%;
 
@@ -192,7 +197,7 @@
               justify-content: space-between;
               text-align: center;
 
-              &>img {
+              & > img {
                 height: 78%;
                 max-width: 50%;
                 object-fit: contain;
@@ -252,7 +257,7 @@
                   position: relative;
                   font-size: 15px;
 
-                  &>img {
+                  & > img {
                     position: absolute;
                     top: 50%;
                     left: 50%;
@@ -334,7 +339,7 @@
           color: #7c4b36;
         }
 
-        &>img {
+        & > img {
           height: 24px;
           object-fit: contain;
         }
@@ -359,4 +364,4 @@
       }
     }
   }
-}
+}

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

@@ -5,7 +5,7 @@
   z-index: 5;
   width: 100%;
   height: 100%;
-  background-image: url('../../../../../assets/img/A6_sangzang_bg.png');
+  background-image: url('../../../../../assets/img/A6_sangzang_bg.jpg');
   background-size: 100% 100%;
   background-color: #c6b49b;
   display: flex;
@@ -743,7 +743,7 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      background: url('../../../../../assets/img/A6_sangzang_bg.png') no-repeat center center;
+      background: url('../../../../../assets/img/A6_sangzang_bg.jpg') no-repeat center center;
       background-size: 100% 100%;
       display: flex;
       padding: 0 20px;

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

@@ -255,6 +255,12 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
           <div className='mtitle songFont'>{myData.mzw[mzwCurrentIndex].title}</div>
           <div
             className='mtext'
+            style={{
+              ...(mzwCurrentIndex === 0 && {
+                lineHeight: '34px',
+                textAlign: 'center'
+              })
+            }}
             dangerouslySetInnerHTML={{
               __html: myData.mzw[mzwCurrentIndex].txt
             }}

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

@@ -8,7 +8,7 @@
   height: 100%;
   background-position: center center;
   background-repeat: no-repeat;
-  background-image: url('../../../assets/img/A6_ffhy_bg.png');
+  background-image: url('../../../assets/img/A6_ffhy_bg.jpg');
   background-color: rgba(255, 233, 182, 1);
   background-size: 100% 100%;