更新

src/assets/styles/base.css

@@ -207,6 +207,7 @@ textarea {
     background: url('../img/tooltipBg.png') no-repeat center center / 100% 100%;
   }
   #root .ant-tooltip .tooltip_MT .top {
+    position: relative;
     width: 100%;
     height: 22px !important;
   }
@@ -216,8 +217,13 @@ textarea {
     line-height: 30px !important;
   }
   #root .ant-tooltip .tooltip_MT .top .close {
-    width: 40px;
-    height: 100%;
+    position: absolute;
+    top: 0px;
+    right: 0;
+    padding-left: 30px;
+    padding-bottom: 30px;
+    width: 50px !important;
+    height: 52px !important;
     cursor: pointer;
     display: flex;
     justify-content: flex-end;
@@ -446,3 +452,30 @@ textarea {
     height: 290px;
   }
 }
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes fadeInOut {
+  0% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.3;
+  }
+}

src/assets/styles/base.less

@@ -73,7 +73,7 @@ body #A7Back {
   left: 4%;
   cursor: pointer;
 
-  &>img {
+  & > img {
     height: 100%;
     object-fit: contain;
   }
@@ -84,7 +84,7 @@ body #A7Back {
   margin: auto;
   position: relative;
 
-  &>div {
+  & > div {
     width: 100%;
     height: 100%;
   }
@@ -275,6 +275,7 @@ textarea {
   #root .ant-tooltip .tooltip_MT {
 
     .top {
+      position: relative;
       width: 100%;
       height: 22px !important;
 
@@ -285,14 +286,19 @@ textarea {
       }
 
       .close {
-        width: 40px;
-        height: 100%;
+        position: absolute;
+        top: 0px;
+        right: 0;
+        padding-left: 30px;
+        padding-bottom: 30px;
+        width: 50px !important;
+        height: 52px !important;
         cursor: pointer;
         display: flex;
         justify-content: flex-end;
         align-items: center;
 
-        &>img {
+        & > img {
           height: 90%;
           object-fit: contain;
         }
@@ -318,7 +324,7 @@ textarea {
     z-index: 3;
     cursor: pointer;
 
-    &>img {
+    & > img {
       height: 100%;
       object-fit: contain;
     }
@@ -454,7 +460,7 @@ textarea {
       justify-content: flex-end;
       align-items: center;
 
-      &>img {
+      & > img {
         height: 90%;
         object-fit: contain;
       }
@@ -587,4 +593,34 @@ textarea {
   100% {
     height: 290px;
   }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.3;
+  }
 }

src/components/MenuSider/index.tsx

@@ -18,8 +18,8 @@ function MenuSider({ activeTab }: { activeTab: number }) {
       activeTab === 0
         ? '#/byzh?fromPath=yblm'
         : activeTab === 1
-        ? '#/byzh?fromPath=ybwx'
-        : '#/byzh?fromPath=wjwj'
+          ? '#/byzh?fromPath=ybwx'
+          : '#/byzh?fromPath=wjwj'
     )
   }
   return (
@@ -36,8 +36,9 @@ function MenuSider({ activeTab }: { activeTab: number }) {
           isShowMenu ? 'show' : '',
           myLangue === 'EN' ? styles.menuSiderEn : ''
         )}
+        onClick={() => setIsShowMenu(false)}
       >
-        <div className='sider'>
+        <div className='sider' onClick={(e) => e.stopPropagation()}>
           <img
             onClick={() => setIsShowMenu(false)}
             src={require(`@/assets/img/menuSiderBtn.png`)}

src/components/Zback/index.tsx

@@ -11,7 +11,10 @@ function Zback({ clickFu }: Props) {
   const { myLangue } = useSelector((state: RootState) => state.A0Layout)
 
   return (
-    <div className={styles.Zback} onClick={clickFu} id='Zback'>
+    <div className={styles.Zback} onClick={(e) => {
+      e.stopPropagation()
+      clickFu()
+    }} id='Zback'>
       <img
         className='backImg'
         src={require(`@/assets/img/btn_back${myLangue === 'EN' ? 'En' : ''}.png`)}

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

@@ -6,8 +6,11 @@
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 1;
-  background: url('../../../assets/img/A6_zaoxiang_bg.png') no-repeat center center;
+  background-image: url('../../../assets/img/A6_zaoxiang_bg.png');
+  background-repeat: no-repeat;
+  background-position: center center;
   background-size: 100% 100%;
+  background-color: rgba(255, 233, 182, 1);
 
   :global {
     .back {

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

@@ -23,6 +23,7 @@
         width: 0;
         opacity: 0;
         transition: all 0.6s ease-in-out;
+        padding: 0;
       }
     }
   }
@@ -76,14 +77,13 @@
       white-space: normal;
       .lTop {
         text-align: justify;
-        padding: 40px;
+        padding: 20px;
         padding-right: 0;
         padding-bottom: 0;
         width: 100%;
         height: 160px;
-        font-size: 16px;
-        line-height: 24px;
-        letter-spacing: 2px;
+        font-size: 15px;
+        line-height: 22px;
         font-weight: 400;
         color: rgba(93, 96, 96, 1);
       }
@@ -110,7 +110,7 @@
           }
         }
         .lInfo {
-          padding-left: 40px;
+          padding-left: 20px;
           padding-top: 30px;
           width: 90%;
           height: 48%;
@@ -133,7 +133,7 @@
             .lTitle {
               width: 100%;
               height: fit-content;
-              font-size: 17px;
+              font-size: 19px;
               line-height: 24px;
               letter-spacing: 2px;
               font-weight: bold;
@@ -154,12 +154,12 @@
               }
             }
             .lText {
-              font-size: 16px;
-              line-height: 24px;
-              letter-spacing: 2px;
+              font-size: 15px;
+              line-height: 22px;
               font-weight: 400;
-              color: #504e40;
+              color: rgb(93, 96, 96);
               height: fit-content;
+              text-align: justify;
               margin-top: 5px;
               max-height: 90px;
               overflow: auto;
@@ -178,6 +178,7 @@
       display: inline-block;
       vertical-align: top;
       position: relative;
+
       .RItems {
         width: fit-content;
         height: 100%;
@@ -197,13 +198,13 @@
             background-size: contain;
           }
           .bq1 {
-            transform: translate(-113%, -8%);
+            transform: translate(-121%, -8%);
             .main {
               text-align: right;
               white-space: normal;
             }
             .dotRight {
-              width: 120px;
+              width: 80px;
               top: 7%;
               .card_arrowR {
                 .line {
@@ -222,13 +223,14 @@
             }
           }
           .bq2 {
-            transform: translate(-94%, 40%);
+            transform: translate(-77%, 40%);
             .main {
+              width: 221px;
               text-align: right;
               white-space: normal;
             }
             .dotRight {
-              width: 120px;
+              width: 100px;
               top: 7%;
               .card_arrowR {
                 .line {
@@ -247,15 +249,31 @@
             }
           }
           .bq3 {
-            transform: translate(-80%, -26%);
+            transform: translate(-75%, -82%);
             .main {
               width: 174px;
               text-align: right;
               white-space: normal;
+              .time::after {
+                content: '';
+                width: 6px;
+                height: 1px;
+                position: absolute;
+                z-index: -1;
+                top: 5%;
+                border-bottom: 1px dashed rgba(93, 96, 96, 1);
+              }
             }
             .dotRight {
-              width: 95px;
+              width: 110px;
+              height: 184px;
+              top: 7%;
+              border-left: 1px dashed rgba(93, 96, 96, 1);
+              padding-top: 153px;
               top: 7%;
+              .name {
+                padding-right: 17px;
+              }
               .card_arrowR {
                 .line {
                   border-top: 1px dashed rgba(93, 96, 96, 1);
@@ -272,6 +290,64 @@
               left: -77%;
             }
           }
+
+          .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(-14%, 105%);
+            .pPoint {
+              width: 334px;
+            }
+          }
+
+          .bq5 {
+            transform: translate(-18%, -49%);
+            .main {
+              width: 138px;
+              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(17%, -147%);
+            .pPoint {
+              width: 280px;
+            }
+          }
         }
         .item:nth-child(1) {
           width: 330px;
@@ -279,6 +355,14 @@
         .item:nth-child(2) {
           width: 560px;
         }
+        .item:nth-child(4) {
+          width: 420px;
+          padding-right: 100px;
+        }
+        .item:nth-child(5) {
+          width: 520px;
+          padding-right: 170px;
+        }
       }
 
       .itme2Txt {
@@ -286,6 +370,8 @@
         top: 0;
         right: 75%;
         pointer-events: none;
+        white-space: normal;
+        text-align: justify;
         padding-top: 30px;
         padding-left: 20px;
         width: 250px;
@@ -327,7 +413,7 @@
           .lTitle {
             width: 100%;
             height: fit-content;
-            font-size: 17px;
+            font-size: 19px;
             line-height: 24px;
             letter-spacing: 2px;
             font-weight: bold;
@@ -348,11 +434,11 @@
             }
           }
           .lText {
-            font-size: 16px;
-            line-height: 24px;
-            letter-spacing: 2px;
+            font-size: 15px;
+            line-height: 22px;
             font-weight: 400;
-            color: #504e40;
+            color: rgb(93, 96, 96);
+            text-align: justify;
             height: 80%;
             margin-top: 5px;
             overflow: auto;
@@ -367,6 +453,15 @@
         top: 24%;
         right: 75%;
       }
+      .lInfo2 {
+        right: 21%;
+        width: 180px;
+        .item {
+          .lTitle::after {
+            transform: translate(-141%, 65%);
+          }
+        }
+      }
     }
   }
 }

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

@@ -2,11 +2,14 @@ import React from 'react'
 import styles from './index.module.scss'
 import InfoCard from '../InfoCard'
 import InfoPoint from '../InfoPoint'
-import { yearType } from '../Bwzzq';
+import { yearType } from '../Bwzzq'
 
 function Bq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType) {
   return (
-    <div id='sinicizeDetail' className={`${styles.Bq} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
+    <div
+      id='sinicizeDetail'
+      className={`${styles.Bq} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}
+    >
       {/* {selectedTime === index && ( */}
       <>
         <div className='left'>
@@ -14,39 +17,41 @@ function Bq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType)
         </div>
         <div className='right'>
           <div className='RItems'>
-            {sItem.imgItems
-              .map((i, index2) => (
-                <div className='item' key={index2}>
-                  <div
-                    style={{
-                      backgroundImage: `url(${isShowLine[index2]?.isShow ? i.srcLine : i.src})`
-                    }}
-                    onClick={() =>
-                      setIsShowLine(
-                        isShowLine.map(item => ({
-                          ...item,
-                          isShow: item.index === index2 ? !item.isShow : item.isShow
-                        }))
-                      )
-                    }
-                    className={`pic ${isShowLine[index2]?.isShow ? 'picLine' : ''}`}
+            {sItem.imgItems.map((i, index2) => (
+              <div
+                className='item'
+                key={index2}
+                onClick={() =>
+                  setIsShowLine(
+                    isShowLine.map(item => ({
+                      ...item,
+                      isShow: item.index === index2 ? !item.isShow : item.isShow
+                    }))
+                  )
+                }
+              >
+                <div
+                  style={{
+                    backgroundImage: `url(${isShowLine[index2]?.isShow ? i.srcLine : i.src})`
+                  }}
+                  className={`pic ${isShowLine[index2]?.isShow ? 'picLine' : ''}`}
+                />
+                {!isShowLine[index2]?.isShow ? (
+                  <InfoCard {...i} />
+                ) : (
+                  <InfoPoint
+                    time={i.time}
+                    title={i.title}
+                    classNamePoint={i?.classNamePoint}
+                    direction={i?.direction}
                   />
-                  {!isShowLine[index2]?.isShow ? (
-                    <InfoCard {...i} />
-                  ) : (
-                    <InfoPoint
-                      time={i.time}
-                      title={i.title}
-                      classNamePoint={i?.classNamePoint}
-                      direction={i?.direction}
-                    />
-                  )}
-                </div>
-              ))}
+                )}
+              </div>
+            ))}
           </div>
 
-          <div className="itme2Txt">
-            123
+          <div className='itme2Txt'>
+            北齐造像更多受到印度笈多风格影响，造像风格趋于写实与人性化、理想并重。
           </div>
 
           {/* 佛像 */}

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

@@ -76,14 +76,13 @@
       white-space: normal;
       .lTop {
         text-align: justify;
-        padding: 40px;
+        padding: 20px;
         padding-right: 0;
         padding-bottom: 0;
         width: 100%;
         height: 160px;
-        font-size: 16px;
-        line-height: 24px;
-        letter-spacing: 2px;
+        font-size: 15px;
+        line-height: 22px;
         font-weight: 400;
         color: rgba(93, 96, 96, 1);
       }
@@ -110,7 +109,7 @@
           }
         }
         .lInfo {
-          padding-left: 40px;
+          padding-left: 20px;
           padding-top: 30px;
           width: 90%;
           height: 48%;
@@ -133,7 +132,7 @@
             .lTitle {
               width: 100%;
               height: fit-content;
-              font-size: 17px;
+              font-size: 19px;
               line-height: 24px;
               letter-spacing: 2px;
               font-weight: bold;
@@ -154,12 +153,12 @@
               }
             }
             .lText {
-              font-size: 16px;
-              line-height: 24px;
-              letter-spacing: 2px;
+              font-size: 15px;
+              line-height: 22px;
               font-weight: 400;
-              color: #504e40;
+              color: rgb(93, 96, 96);
               height: fit-content;
+              text-align: justify;
               margin-top: 5px;
               max-height: 90px;
               overflow: auto;
@@ -196,7 +195,7 @@
             background-size: contain;
           }
           .wq1 {
-            transform: translate(-113%, 24%);
+            transform: translate(-110%, 24%);
             width: 360px;
             .main {
               width: 230px;
@@ -226,7 +225,7 @@
         .itemHot {
           width: 800px;
           padding: 0 40px;
-          height: 100%;
+          height: 400px;
           display: flex;
           flex-direction: column;
           align-items: center;

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

@@ -11,8 +11,12 @@
     :global {
       .left,
       .right {
+        width: fit-content;
         opacity: 1;
-        transition: all 1s ease-in-out, opacity 0.3s ease-in-out;
+        transition: all 1s ease-in-out;
+      }
+      .left {
+        width: 500px;
       }
     }
   }
@@ -76,14 +80,13 @@
       white-space: normal;
       .lTop {
         text-align: justify;
-        padding: 40px;
+        padding: 20px;
         padding-right: 0;
         padding-bottom: 0;
         width: 100%;
         height: 160px;
-        font-size: 16px;
+        font-size: 15px;
         line-height: 22px;
-        letter-spacing: 2px;
         font-weight: 400;
         color: rgba(93, 96, 96, 1);
       }
@@ -110,7 +113,7 @@
           }
         }
         .lInfo {
-          padding-left: 40px;
+          padding-left: 20px;
           padding-top: 10px;
           width: 90%;
           height: 48%;
@@ -133,7 +136,7 @@
             .lTitle {
               width: 100%;
               height: fit-content;
-              font-size: 17px;
+              font-size: 19px;
               line-height: 22px;
               letter-spacing: 2px;
               font-weight: bold;
@@ -148,18 +151,18 @@
                 z-index: -1;
                 top: 50%;
                 left: 50%;
-                transform: translate(-480%, 65%);
+                transform: translate(-518%, 65%);
                 background-color: rgb(197, 185, 144);
                 box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
               }
             }
             .lText {
-              font-size: 16px;
-              line-height: 24px;
-              letter-spacing: 2px;
+              font-size: 15px;
+              line-height: 22px;
               font-weight: 400;
-              color: #504e40;
+              color: rgb(93, 96, 96);
               height: fit-content;
+              text-align: justify;
               margin-top: 5px;
               max-height: 90px;
               overflow: auto;
@@ -239,7 +242,7 @@
             }
           }
           .zwq3 {
-            transform: translate(-8%, -12%);
+            transform: translate(-13%, -12%);
             width: 420px;
             .main {
               width: 178px;
@@ -313,7 +316,7 @@
           .lTitle {
             width: 100%;
             height: fit-content;
-            font-size: 17px;
+            font-size: 19px;
             line-height: 24px;
             letter-spacing: 2px;
             font-weight: bold;
@@ -334,11 +337,11 @@
             }
           }
           .lText {
-            font-size: 16px;
-            line-height: 24px;
-            letter-spacing: 2px;
+            font-size: 15px;
+            line-height: 22px;
             font-weight: 400;
-            color: #504e40;
+            color: rgb(93, 96, 96);
+            text-align: justify;
             height: 80%;
             margin-top: 5px;
             overflow: auto;

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

@@ -80,9 +80,8 @@
         padding-bottom: 0;
         width: 100%;
         height: 130px;
-        font-size: 16px;
-        line-height: 24px;
-        letter-spacing: 2px;
+        font-size: 15px;
+        line-height: 22px;
         font-weight: 400;
         color: rgba(93, 96, 96, 1);
         position: absolute;
@@ -113,17 +112,36 @@
           }
 
           .zzq1 {
-            transform: translate(-83%, -2%);
-            width: 420px;
+            transform: translate(-79%, -13%);
+            width: 450px;
+            .main {
+              .Cardtext {
+                text-align: justify;
+                max-height: 110px;
+                margin-top: 6px;
+                line-height: 22px;
+              }
+              .from {
+                font-size: 13px;
+              }
+            }
             .dotRight {
               width: 180px;
+              top: 38%;
+            }
+          }
+          .point1 {
+            transform: translate(-117%, 40%);
+            .pPoint {
+              font-size: 18px;
+              width: 268px;
             }
           }
         }
         .lInfo {
           padding-left: 20px;
           padding-top: 30px;
-          width: 250px;
+          width: 290px;
           height: 48%;
           display: flex;
           align-items: center;
@@ -144,7 +162,7 @@
             .lTitle {
               width: 100%;
               height: fit-content;
-              font-size: 17px;
+              font-size: 19px;
               line-height: 24px;
               letter-spacing: 2px;
               font-weight: bold;
@@ -165,12 +183,12 @@
               }
             }
             .lText {
-              font-size: 16px;
-              line-height: 24px;
-              letter-spacing: 2px;
+              font-size: 15px;
+              line-height: 22px;
               font-weight: 400;
-              color: #504e40;
+              color: rgb(93, 96, 96);
               height: fit-content;
+              text-align: justify;
               margin-top: 5px;
               max-height: 90px;
               overflow: auto;
@@ -208,35 +226,47 @@
             background-size: contain;
           }
           .zzq2 {
-            transform: translate(-29%, -35%);
+            transform: translate(-8%, -61%);
             width: 450px;
             .main {
-              width: 260px;
+              width: 164px;
               white-space: normal;
             }
             .dotLeft {
               width: 150px;
-              top: 7%;
+              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(-26%, -50%);
+            transform: translate(2%, -176%);
             .pPoint {
-              width: 252px;
+              width: 232px;
             }
           }
           .zzq3 {
-            transform: translate(-26%, 37%);
+            transform: translate(-24%, 6%);
             width: 450px;
             .main {
               width: 260px;
               white-space: normal;
             }
             .dotLeft {
-              width: 148px;
+              width: 107px;
               top: 7%;
               .card_arrowR,
               .card_arrowL {
@@ -251,13 +281,18 @@
             }
           }
           .point3 {
+            transform: translate(-37%, 88%);
             .pPoint {
-              width: 332px;
+              width: 302px;
             }
           }
         }
+        .item:nth-child(1) {
+          width: 445px;
+        }
         .item:nth-child(2) {
-          width: 650px;
+          width: 600px;
+          padding-right: 30px;
         }
       }
 
@@ -290,7 +325,7 @@
           .lTitle {
             width: 100%;
             height: fit-content;
-            font-size: 17px;
+            font-size: 19px;
             line-height: 24px;
             letter-spacing: 2px;
             font-weight: bold;
@@ -311,11 +346,11 @@
             }
           }
           .lText {
-            font-size: 16px;
-            line-height: 24px;
-            letter-spacing: 2px;
+            font-size: 15px;
+            line-height: 22px;
             font-weight: 400;
-            color: #504e40;
+            color: rgb(93, 96, 96);
+            text-align: justify;
             height: 80%;
             margin-top: 5px;
             overflow: auto;

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

@@ -66,6 +66,7 @@ function Bwzzq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearTy
                   direction={sItem.imgItems[0].direction}
                   time={sItem.imgItems[0].time}
                   title={sItem.imgItems[0].title}
+                  classNamePoint={sItem.imgItems[0].classNamePoint}
                 />
               )}
             </div>

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

@@ -76,14 +76,13 @@
       white-space: normal;
       .lTop {
         text-align: justify;
-        padding: 40px;
+        padding: 20px;
         padding-right: 0;
         padding-bottom: 0;
         width: 100%;
         height: 100px;
-        font-size: 16px;
+        font-size: 15px;
         line-height: 22px;
-        letter-spacing: 2px;
         font-weight: 400;
         color: rgba(93, 96, 96, 1);
       }
@@ -110,7 +109,7 @@
           }
         }
         .lInfo {
-          padding-left: 40px;
+          padding-left: 20px;
           padding-top: 10px;
           width: 90%;
           height: 48%;
@@ -133,7 +132,7 @@
             .lTitle {
               width: 100%;
               height: fit-content;
-              font-size: 17px;
+              font-size: 19px;
               line-height: 22px;
               letter-spacing: 2px;
               font-weight: bold;
@@ -154,12 +153,12 @@
               }
             }
             .lText {
-              font-size: 16px;
-              line-height: 24px;
-              letter-spacing: 2px;
+              font-size: 15px;
+              line-height: 22px;
               font-weight: 400;
-              color: #504e40;
+              color: rgb(93, 96, 96);
               height: fit-content;
+              text-align: justify;
               margin-top: 5px;
               max-height: 90px;
               overflow: auto;
@@ -194,7 +193,7 @@
             height: 100%;
             transition: all 0.3s ease-in-out;
             background-repeat: no-repeat;
-            background-position: center center;
+            background-position: left;
             background-size: contain;
           }
           .bz1 {
@@ -207,7 +206,67 @@
               white-space: normal;
             }
             .dotRight {
-              width: 120px;
+              width: 132px;
+              top: 5%;
+              .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(-119%, 105%);
+            .pPoint {
+              width: 200px;
+            }
+          }
+
+          .bz2 {
+            transform: translate(-8%, -43%);
+            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(-31%, -59%);
+            .pPoint {
+              width: 271px;
+            }
+          }
+
+          .bz3 {
+            transform: translate(-135%, 42%);
+            width: 320px;
+            height: 170px;
+            .main {
+              width: 170px;
+              text-align: right;
+              white-space: normal;
+            }
+            .dotRight {
+              width: 85px;
               top: 5%;
               .card_arrowR {
                 .line {
@@ -217,9 +276,88 @@
               }
             }
           }
+          .point15 {
+            transform: translate(-165%, 111%);
+            .pPoint {
+              width: 148px;
+            }
+          }
         }
         .item:nth-child(1) {
-          width: 310px;
+          width: 340px;
+        }
+        .item:nth-child(2) {
+          width: 440px;
+        }
+        .item:nth-child(3) {
+          width: 665px;
+          padding-left: 80px;
+        }
+      }
+
+      .lInfo2 {
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        right: 32.2%;
+        white-space: normal;
+        padding-left: 20px;
+        padding-top: 30px;
+        width: 191px;
+        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: 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: 4px;
+              position: absolute;
+              z-index: -1;
+              top: 50%;
+              left: 50%;
+              transform: translate(-150%, 65%);
+              background-color: rgb(197, 185, 144);
+              box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
+            }
+          }
+          .lText {
+            font-size: 15px;
+            line-height: 22px;
+            font-weight: 400;
+            color: rgb(93, 96, 96);
+            text-align: justify;
+            height: 80%;
+            margin-top: 5px;
+            overflow: auto;
+            &::-webkit-scrollbar {
+              width: 0px;
+              height: 0px;
+            }
+          }
         }
       }
     }

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

@@ -12,7 +12,14 @@ function Bz({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType)
       <>
         <div className='left'>
           <div className='lTop'>{sItem.desc}</div>
-          <div className='lContent'>
+          <div className='lContent' onClick={() =>
+            setIsShowLine(
+              isShowLine.map(item => ({
+                ...item,
+                isShow: item.index === 0 ? !item.isShow : item.isShow
+              }))
+            )
+          }>
             <div className='lInfo'>
               <div className='item' key={index}>
                 <div className='lTitle songFont'>{sItem.items[0].title}</div>
@@ -46,11 +53,21 @@ function Bz({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType)
                     <InfoPoint
                       time={i.time}
                       title={i.title}
+                      direction={i.direction}
+                      classNamePoint={i.classNamePoint}
                     />
                   )}
                 </div>
               ))}
           </div>
+
+          {/* 菩萨 */}
+          <div className='lInfo2'>
+            <div className='item' key={index}>
+              <div className='lTitle songFont'>{sItem.items[1].title}</div>
+              <div className='lText'>{sItem.items[1].txt}</div>
+            </div>
+          </div>
         </div>
       </>
       {/* )} */}

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

@@ -10,7 +10,8 @@
   pointer-events: none;
   :global {
     .dotLeft,
-    .dotRight {
+    .dotRight,
+    .extraArrow {
       width: 120px;
       height: 20px;
       position: relative;
@@ -23,6 +24,7 @@
       }
       .card_arrowR,
       .card_arrowL {
+        margin-top: 6px;
         width: 100%;
         height: 20px;
         display: flex;
@@ -55,8 +57,10 @@
         font-weight: 500;
       }
       .Cardtext {
-        max-height: 80px;
-        margin-top: 10px;
+        text-align: justify;
+        max-height: 110px;
+        margin-top: 6px;
+        line-height: 22px;
         color: rgba(93, 96, 96, 1);
         overflow: auto;
         &::-webkit-scrollbar {
@@ -65,8 +69,13 @@
         }
       }
       .from {
+        font-size: 13px;
         color: rgba(151, 151, 151, 1);
       }
     }
+
+    .extraArrow {
+      display: none;
+    }
   }
 }

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

@@ -9,6 +9,7 @@ type InfoCardProps = {
   name?: string
   direction?: string
   classNameCard?: string
+  extraName?: string
 }
 function InfoCard({
   time,
@@ -17,7 +18,8 @@ function InfoCard({
   picfrom,
   name = '主尊',
   direction = 'left',
-  classNameCard = ''
+  classNameCard = '',
+  extraName = ''
 }: InfoCardProps) {
   return (
     <div className={`${styles.InfoCard} ${classNameCard}`}>
@@ -33,7 +35,7 @@ function InfoCard({
       <div className='main'>
         <div className='time'>{time}</div>
         <div className='location'>{title}</div>
-        <div className='Cardtext'>{txt}</div>
+        <div className='Cardtext' dangerouslySetInnerHTML={{ __html: txt || '' }}></div>
         <div className='from'>{picfrom}</div>
       </div>
       {direction === 'right' && (
@@ -45,6 +47,13 @@ function InfoCard({
           </div>
         </div>
       )}
+      <div className='extraArrow'>
+        <div className='name'>{name}</div>
+        <div className='card_arrowR'>
+          <div className='line'></div>
+          <img src={require('@/assets/img/icon_dot2.png')} alt='' />
+        </div>
+      </div>
     </div>
   )
 }

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

@@ -6,6 +6,22 @@
   width: 225px;
   height: 60px;
   pointer-events: none;
+  animation: fadeIn 2s linear infinite;
+  @keyframes fadeIn {
+    0% {
+      opacity: 0.3;
+      scale: 0.98;
+    }
+    50% {
+      opacity: 1;
+      scale: 1.02;
+    }
+    100% {
+      opacity: 0.3;
+      scale: 0.98;
+    }
+  }
+
   &:global(.pointright) {
     :global {
       .pointBg {
@@ -34,6 +50,7 @@
       width: 100%;
       height: 100%;
       display: flex;
+      font-size: 18px;
       flex-direction: column;
       align-items: center;
       justify-content: center;
@@ -43,7 +60,7 @@
         padding-left: 10px;
         width: fit-content;
         height: 50%;
-        font-size: 20px;
+
         font-weight: 500;
         color: rgba(124, 75, 54, 1);
         text-align: center;

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

@@ -7,6 +7,7 @@
   transform: translate(-50%, -50%);
   z-index: 1;
   overflow: hidden;
+  background-color: rgba(255, 233, 182, 1);
 
   :global {
     .SinicizeScroll {
@@ -29,27 +30,15 @@
   width: 737px;
   height: 100%;
   position: relative;
-  background: url('../../../assets/img/A6_sinicize_bg.png') no-repeat center center;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-image: url('../../../assets/img/A6_sinicize_bg.png');
+  background-color: rgba(255, 233, 182, 1);
   background-size: 100% 100%;
   display: inline-block;
   vertical-align: top;
   white-space: normal;
   :global {
-    .back {
-      width: 60px;
-      height: 30px;
-      position: fixed;
-      z-index: 2;
-      top: 3%;
-      left: 4%;
-      cursor: pointer;
-
-      & > img {
-        height: 100%;
-        object-fit: contain;
-      }
-    }
-
     .title {
       position: absolute;
       top: 13%;
@@ -185,10 +174,14 @@
     .btn {
       width: 40px;
       height: 15px;
-      background: url('../../../assets/img/A6_sinicize_btn1.png') no-repeat center center;
+      background-position: center center;
+      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;
     }
 
     .arrowL,
@@ -197,6 +190,7 @@
       position: relative;
       height: 0;
       border-bottom: 1px dashed rgba(124, 75, 54, 1);
+      animation: fadeInOut 3s linear infinite;
       .dot {
         position: absolute;
         width: 4px;
@@ -290,7 +284,8 @@
               text-align: left;
               letter-spacing: 4px;
               width: 100%;
-              padding: 30px 40%;
+              padding: 50px 40%;
+              padding-bottom: 10px;
               height: 44%;
             }
             .front {
@@ -329,8 +324,8 @@
           .yearContainner {
             .txt {
               padding: 20px 40%;
-              padding-top: 30px;
-              letter-spacing: 10px;
+              padding-top: 50px;
+              letter-spacing: 2px;
               height: 35%;
               line-height: 45px;
             }

src/pages/A6ybwx/A6_2_zxzgh/index.tsx

@@ -8,6 +8,7 @@ import Bwzwq from './components/Bwzwq'
 import Bwwq from './components/Bwwq'
 import Bq from './components/Bq'
 import Bz from './components/Bz'
+import Zback from '@/components/Zback'
 
 
 export type showLineType = {
@@ -19,7 +20,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
   const { myData } = useSelector((state: RootState) => state.A0Layout)
 
   const [currentTab, setCurrentTab] = useState(0)
-  const [selectedTime, setSelectedTime] = useState(0)
+  const [selectedTime, setSelectedTime] = useState(-1)
   const [isShowTip, setIsShowTip] = useState(false)
   const [isShowLine, setIsShowLine] = useState<showLineType>(
     myData.sinicizeData[0].imgItems.map((item, index) => ({
@@ -72,23 +73,27 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
       return
     }
     setSelectedTime(index)
-    console.log(selectedTime, 'selectedTime')
+
     setIsShowLine(
       myData.sinicizeData[index].imgItems.map((item, index) => ({
         index,
         isShow: true
       }))
     )
+  }
 
-    // 点击时将对应年份项滚动到最左边
-    if (sinicize1Ref.current && originRef.current) {
-      const scrollPosition = [0, 100, 200, 300, 400][index] + sinicize1Ref.current.offsetWidth
+  useEffect(() => {
+    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
+      console.log(123, scrollPosition)
       originRef.current.scrollTo({
         left: scrollPosition,
         behavior: 'smooth'
       })
     }
-  }
+  }, [selectedTime])
 
   // 处理滚轮事件
   const handleWheel = (e: any) => {
@@ -121,11 +126,14 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
       // onTouchMove={handleOriTouchMove}
       // onTouchStart={handleTouchStart}
       >
+        <Zback
+          clickFu={() => {
+            setGotopage(0)
+          }}
+        />
         <div className='SinicizeScroll' ref={originRef}>
           <div ref={sinicize1Ref} className={styles.Sinicize1}>
-            <div className='back' onClick={() => setGotopage(0)}>
-              <img src={require('@/assets/img/btn_back.png')} alt='' />
-            </div>
+
             <div className='title'>
               <img src={require('@/assets/img/A6_sinicize_title.png')} draggable='false' alt='' />
             </div>

src/pages/A6ybwx/Genealogy/components/Graph/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import { NodeTurnRight, NodeRight, NodeBottom, RightLineDash, NodeActive, NodeTurnBottomRight, NodeRightDash } from '../Utils'
+import { NodeTurnRight, NodeRight, NodeBottom, RightLineDash, NodeActive, NodeTurnBottomRight, NodeRightDash, NodeBottomDash, NodeTurnBottomDashRight } from '../Utils'
 import { useDrag } from '@use-gesture/react'
 import { isMobiileFu } from '@/utils/history'
 import { useSelector } from 'react-redux'
@@ -229,9 +229,12 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
         if (item.type === 'nodeTurnRight_n') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
         if (item.type === 'nodeTurnRight_a') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' />
         if (item.type === 'nodeTurnBottomRight_a') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' />
+        if (item.type === 'nodeTurnBottomRight_n') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
         if (item.type === 'nodeRight_dash_n') res = <NodeRightDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
         if (item.type === 'nodeRight_dash_a') res = <NodeRightDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' />
         if (item.type === 'nodeRight_dash_f') res = <NodeRightDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='false' nameClick={() => handleNameClick(index)} />
+        if (item.type === 'nodeBottom_dash_n') res = <NodeBottomDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
+        if (item.type === 'nodeTurnBottomDashRight_n') res = <NodeTurnBottomDashRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
         return res
       })}
     </>
@@ -250,9 +253,12 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
         if (item.type === 'nodeTurnRight_n') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
         if (item.type === 'nodeTurnRight_a') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' />
         if (item.type === 'nodeTurnBottomRight_a') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' />
+        if (item.type === 'nodeTurnBottomRight_n') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
         if (item.type === 'nodeRight_dash_n') res = <NodeRightDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
         if (item.type === 'nodeRight_dash_a') res = <NodeRightDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' />
         if (item.type === 'nodeRight_dash_f') res = <NodeRightDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='false' nameClick={() => handleNameClick(index)} />
+        if (item.type === 'nodeBottom_dash_n') res = <NodeBottomDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
+        if (item.type === 'nodeTurnBottomDashRight_n') res = <NodeTurnBottomDashRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
         return res
       })}
     </>

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

@@ -64,6 +64,29 @@
   }
 }
 
+.bottomLineDash {
+  width: 6px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  :global {
+    .line {
+      transform: translateX(-33%);
+      width: 0px;
+      height: calc(100% - 5px);
+      border-left: 1px dashed rgba(255, 233, 182, 1);
+    }
+    .arrow {
+      width: 0;
+      height: 0;
+      border-right: 3px solid transparent;
+      border-left: 3px solid transparent;
+      border-top: 4px solid rgba(255, 233, 182, 1);
+    }
+  }
+}
+
 .turnRightLine {
   width: 25px;
   height: 80px;
@@ -110,6 +133,29 @@
   }
 }
 
+.turnBottomRightLineDash {
+  width: 25px;
+  height: 80px;
+  display: flex;
+  :global {
+    .line {
+      align-self: flex-start;
+      width: calc(100% - 5px);
+      height: calc(100% - 3px);
+      border-bottom: 1px dashed rgba(255, 233, 182, 1);
+      border-left: 1px dashed rgba(255, 233, 182, 1);
+    }
+    .arrow {
+      align-self: flex-end;
+      width: 0;
+      height: 0;
+      border-top: 3px solid transparent;
+      border-bottom: 3px solid transparent;
+      border-left: 4px solid rgba(255, 233, 182, 1);
+    }
+  }
+}
+
 .nodeNormal,
 .nodeActive,
 .nodeFalse {
@@ -263,6 +309,37 @@
   }
 }
 
+.nodeBottomDash {
+  pointer-events: none;
+  width: 140px;
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  :global {
+    #bottomLineDash {
+      transform: translate(40px, -5px);
+    }
+    #nodeNormal,
+    #nodeActive,
+    #nodeFalse {
+      .bg {
+        pointer-events: auto !important;
+      }
+      .extra {
+        width: 50%;
+        position: absolute;
+        top: 50%;
+        right: 50%;
+        transform: translate(60%, -393%);
+      }
+    }
+  }
+}
+
 .nodeTurnRight {
   pointer-events: none;
   width: 165px;
@@ -296,9 +373,27 @@
   left: 50%;
   transform: translate(-50%, -50%);
   :global {
-    #turnRightLine {
-      transform: translate(3px, 8px);
+    #nodeNormal,
+    #nodeActive,
+    #nodeFalse {
+      .bg {
+        pointer-events: auto !important;
+      }
+      align-self: flex-end;
     }
+  }
+}
+
+.nodeTurnBottomDashRight {
+  pointer-events: none;
+  width: 165px;
+  height: 119px;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  :global {
     #nodeNormal,
     #nodeActive,
     #nodeFalse {

src/pages/A6ybwx/Genealogy/components/Utils/index.tsx

@@ -52,6 +52,15 @@ const BottomLine = () => {
   )
 }
 
+const BottomLineDash = () => {
+  return (
+    <div className={styles.bottomLineDash} id='bottomLineDash'>
+      <div className='line'></div>
+      <div className='arrow'></div>
+    </div>
+  )
+}
+
 const TurnRightLine = () => {
   return (
     <div className={styles.turnRightLine} id='turnRightLine'>
@@ -70,6 +79,15 @@ const TurnBottomRightLine = () => {
   )
 }
 
+const TurnBottomRightLineDash = () => {
+  return (
+    <div className={styles.turnBottomRightLineDash} id='turnBottomRightLineDash'>
+      <div className='line'></div>
+      <div className='arrow'></div>
+    </div>
+  )
+}
+
 const NodeNormal = ({ className, nameClick, style, data }: nodeProps) => {
   return (
     <div className={`${styles.nodeNormal} ${className}`} style={style} id='nodeNormal'>
@@ -160,6 +178,17 @@ const NodeBottom = ({ type, className, nameClick, style, data }: nodeProps) => {
   )
 }
 
+const NodeBottomDash = ({ type, className, nameClick, style, data }: nodeProps) => {
+  return (
+    <div className={`${styles.nodeBottomDash} ${className}`} id='nodeBottomDash' style={style}>
+      <BottomLineDash />
+      {type === 'normal' && <NodeNormal nameClick={nameClick} data={data} />}
+      {type === 'active' && <NodeActive nameClick={nameClick} data={data} />}
+      {type === 'false' && <NodeFalse nameClick={nameClick} data={data} />}
+    </div>
+  )
+}
+
 const NodeTurnRight = ({ type, className, nameClick, style, data }: nodeProps) => {
   return (
     <div className={`${styles.nodeTurnRight} ${className}`} id='nodeTurnRight' style={style}>
@@ -186,17 +215,37 @@ const NodeTurnBottomRight = ({ type, className, nameClick, style, data }: nodePr
   )
 }
 
+const NodeTurnBottomDashRight = ({ type, className, nameClick, style, data }: nodeProps) => {
+  return (
+    <div
+      className={`${styles.nodeTurnBottomDashRight} ${className}`}
+      id='nodeTurnBottomDashRight'
+      style={style}
+    >
+      <TurnBottomRightLineDash />
+      {type === 'normal' && <NodeNormal nameClick={nameClick} data={data} />}
+      {type === 'active' && <NodeActive nameClick={nameClick} data={data} />}
+      {type === 'false' && <NodeFalse nameClick={nameClick} data={data} />}
+    </div>
+  )
+}
+
 export {
+
   NodeRightDash,
   NodeTurnBottomRight,
+  NodeTurnBottomDashRight,
   NodeTurnRight,
   NodeRight,
   NodeBottom,
+  NodeBottomDash,
   RightLine,
   RightLineDash,
   BottomLine,
+  BottomLineDash,
   TurnRightLine,
   NodeNormal,
   NodeActive,
-  NodeFalse
+  NodeFalse,
+
 }

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

@@ -26,7 +26,8 @@
       .lHidding {
         width: 300px;
         height: 100%;
-        background: url('../../../../../assets/img/A6_sangzang_hidContent.png') no-repeat center center;
+        background: url('../../../../../assets/img/A6_sangzang_hidContent.png') no-repeat center
+          center;
         background-size: 100% 100%;
         position: absolute;
         z-index: 1;
@@ -42,11 +43,12 @@
           position: absolute;
           left: 0;
           transform: translateX(-239px);
-          width: 520px;
+          width: 300px;
           height: 100%;
           display: flex;
           align-items: center;
-          background: url('../../../../../assets/img/A6_sangzang_hidding_left.png') no-repeat center center;
+          background: url('../../../../../assets/img/A6_sangzang_hidding_left.png') no-repeat center
+            center;
           background-size: 100% 100%;
           transition: all 0.6s ease-in-out;
 
@@ -68,9 +70,26 @@
               .pic {
                 width: 100%;
                 height: 100%;
-                background: url('../../../../../assets/img/A6_sangzang_yp.png') no-repeat center center;
+                background: url('../../../../../assets/img/A6_sangzang_mzw0.png') no-repeat center
+                  center;
                 background-size: contain;
               }
+              .zoomIn {
+                width: 30px;
+                height: 30px;
+                position: absolute;
+                bottom: -1%;
+                right: 2%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                & > img {
+                  height: 20px;
+                  width: 20px;
+                  object-fit: contain;
+                }
+              }
             }
 
             .txt,
@@ -107,51 +126,52 @@
             }
           }
 
-          .detail_info2 {
-            width: calc(100% - 330px);
-            height: 74%;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            transition: all 0.6s ease-in-out;
-
-            .title_info2 {
-              width: fit-content;
-              position: relative;
-              height: 60px;
-              font-size: 26px;
-              color: rgba(124, 75, 54, 1);
-
-              &::after {
-                content: '';
-                position: absolute;
-                bottom: 0;
-                left: 0;
-                width: 100%;
-                height: 10px;
-                background: url('../../../../../assets/img/A6_sinicize_line2.png') no-repeat center center;
-                background-size: 100% 100%;
-              }
-            }
-
-            .txt_info2 {
-              padding-top: 25px;
-              width: 90%;
-              height: 100%;
-              font-size: 16px;
-              line-height: 24px;
-              letter-spacing: 1px;
-              font-weight: 400;
-              color: #504e40;
-              overflow: auto;
-              text-align: justify;
-
-              &::-webkit-scrollbar {
-                width: 0;
-                height: 0;
-              }
-            }
-          }
+          // .detail_info2 {
+          //   width: calc(100% - 330px);
+          //   height: 74%;
+          //   display: flex;
+          //   flex-direction: column;
+          //   gap: 10px;
+          //   transition: all 0.6s ease-in-out;
+
+          //   .title_info2 {
+          //     width: fit-content;
+          //     position: relative;
+          //     height: 60px;
+          //     font-size: 26px;
+          //     color: rgba(124, 75, 54, 1);
+
+          //     &::after {
+          //       content: '';
+          //       position: absolute;
+          //       bottom: 0;
+          //       left: 0;
+          //       width: 100%;
+          //       height: 10px;
+          //       background: url('../../../../../assets/img/A6_sinicize_line2.png') no-repeat center
+          //         center;
+          //       background-size: 100% 100%;
+          //     }
+          //   }
+
+          //   .txt_info2 {
+          //     padding-top: 25px;
+          //     width: 90%;
+          //     height: 100%;
+          //     font-size: 16px;
+          //     line-height: 24px;
+          //     letter-spacing: 1px;
+          //     font-weight: 400;
+          //     color: #504e40;
+          //     overflow: auto;
+          //     text-align: justify;
+
+          //     &::-webkit-scrollbar {
+          //       width: 0;
+          //       height: 0;
+          //     }
+          //   }
+          // }
         }
 
         .lHidding_right {
@@ -175,7 +195,8 @@
             .pic {
               width: 100%;
               height: 100%;
-              background: url('../../../../../assets/img/A6_sangzang_yp2.png') no-repeat center center;
+              background: url('../../../../../assets/img/A6_sangzang_mzw1.png') no-repeat center
+                center;
               background-size: contain;
             }
 
@@ -189,7 +210,7 @@
               justify-content: center;
               align-items: center;
 
-              &>img {
+              & > img {
                 height: 20px;
                 width: 20px;
                 object-fit: contain;
@@ -244,7 +265,8 @@
 
           .openPic {
             opacity: 0;
-            background: url('../../../../../assets/img/A6_sangzang_hidRight.png') no-repeat center center;
+            background: url('../../../../../assets/img/A6_sangzang_hidRight.png') no-repeat center
+              center;
             background-size: 100% 100%;
             height: 100%;
             width: 100%;
@@ -267,7 +289,6 @@
           height: 90%;
           background-size: contain;
           transition: all 0.3s ease-in-out;
-
         }
 
         .operate {
@@ -290,7 +311,6 @@
           color: rgba(255, 233, 182, 1);
           cursor: pointer;
 
-
           .beiwen1 {
             width: 25%;
             height: 100%;
@@ -376,7 +396,7 @@
             line-height: 50px;
             cursor: pointer;
 
-            &>img {
+            & > img {
               height: 90%;
               position: absolute;
               z-index: -1;
@@ -407,7 +427,8 @@
           right: -2%;
 
           .openPic {
-            background: url('../../../../../assets/img/A6_sangzang_hidLeft.png') no-repeat center center;
+            background: url('../../../../../assets/img/A6_sangzang_hidLeft.png') no-repeat center
+              center;
             background-size: 100% 100%;
             animation: opacityChange 3s infinite ease-in-out;
           }
@@ -415,7 +436,7 @@
       }
 
       .showRight {
-        width: 97%;
+        width: 69%;
 
         .lHidding_right {
           transition: all 0.3s ease-in-out 0.3s;
@@ -450,7 +471,8 @@
       .lHidding {
         width: 330px;
         transform: translate(-7%, -50%);
-        background: url('../../../../../assets/img/A6_sangzang_hidContent_r.png') no-repeat center center;
+        background: url('../../../../../assets/img/A6_sangzang_hidContent_r.png') no-repeat center
+          center;
         background-size: 100% 100%;
 
         .lHidding_left {
@@ -501,7 +523,8 @@
         .lHidding_right {
           .imgBox {
             .pic {
-              background: url('../../../../../assets/img/A6_sangzang_tab1.png') no-repeat center center;
+              background: url('../../../../../assets/img/A6_sangzang_mzw2.png') no-repeat center
+                center;
               background-size: 100% 100%;
             }
           }
@@ -543,7 +566,8 @@
         .lHidding_right {
           .imgBox {
             .pic {
-              background: url('../../../../../assets/img/A6_sangzang_tab2.png') no-repeat center center;
+              background: url('../../../../../assets/img/A6_sangzang_mzw3.png') no-repeat center
+                center;
               background-size: 100% 100%;
             }
           }
@@ -645,13 +669,9 @@
       }
 
       .right {
-
         .content {
-
-
           .text {
             padding-top: 0px;
-
           }
         }
       }
@@ -666,7 +686,7 @@
       left: 4%;
       cursor: pointer;
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: fill;
       }
@@ -772,7 +792,7 @@
             cursor: pointer;
             position: relative;
 
-            &>img {
+            & > img {
               width: 60px;
               object-fit: cover;
             }
@@ -861,7 +881,7 @@
           padding: 6px 10px;
           width: 100%;
           height: 100%;
-          background: url(../../../../../assets/img/A6_sangzang_tab1.png) no-repeat center center;
+          background: url(../../../../../assets/img/A6_sangzang_mzw3.png) no-repeat center center;
           background-size: 100% 100%;
         }
       }
@@ -912,7 +932,7 @@
         top: 21px;
         right: 32px;
 
-        &>img {
+        & > img {
           width: 100%;
           height: 100%;
           object-fit: contain;
@@ -927,4 +947,4 @@
       pointer-events: auto;
     }
   }
-}
+}

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

@@ -8,28 +8,24 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
   const [currentTab, setCurrentTab] = useState('tab0')
   const [isShowTabBar, setIsShowTabBar] = useState(true)
   const [isShowHidContent, setIsShowHidContent] = useState(false)
+  // 是否展示lHidding_right
   const [isShowHidContentRight, setIsShowHidContentRight] = useState(true)
   const [isShowMzwHot, setIsShowMzwHot] = useState(false)
+  const [mzwCurrentIndex, setMzwCurrentIndex] = useState(0)
   const [selectedGeshi, setSelectedGeshi] = useState(0)
   const { myData } = useSelector((state: RootState) => state.A0Layout)
 
   const picRef = useRef<HTMLDivElement>(null)
-
+  console.log(picRef.current)
+  // 隐藏tab栏
   useEffect(() => {
-    if (isShowHidContent || isShowMzwHot) {
+    if (isShowHidContent || isShowMzwHot || selectedGeshi !== 0) {
       setIsShowTabBar(false)
     } else {
       setIsShowTabBar(true)
     }
-  }, [isShowHidContent, isShowMzwHot])
+  }, [isShowHidContent, isShowMzwHot, selectedGeshi])
 
-  useEffect(() => {
-    if (selectedGeshi !== 0) {
-      setIsShowTabBar(false)
-    } else {
-      setIsShowTabBar(true)
-    }
-  }, [selectedGeshi])
 
   const handleTabClick = (tab: string) => {
     if (tab === currentTab) {
@@ -39,27 +35,41 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
     setCurrentTab(tab)
   }
 
-  console.log(currentTab)
+  // mzw[0]和mzw[1]是两个发愿文，mzw[1]和mzw[2]是两个墓志文
+  const handleImgBox = (index: number) => {
+    if (currentTab === 'tab0') setMzwCurrentIndex(index)
+    else setMzwCurrentIndex(currentTab === 'tab1' ? index + 1 : index + 2)
+    setIsShowMzwHot(true)
+  }
 
   return (
     <div className={styles.sang}>
       <Zback
         clickFu={() => {
+          // 点击返回按钮时，先关闭当前内容直到tab未选中
           if (selectedGeshi !== 0) setSelectedGeshi(0)
-          else setShowTab(0)
+          if (currentTab !== 'tab0') handleTabClick('tab0')
+          if (isShowHidContent) setIsShowHidContent(false)
+          if (currentTab === 'tab0' && !isShowHidContent) setShowTab(0)
         }}
       />
 
+      {/* main:tab未选中状态时的样式
+        mainAc：点击了tab0的按钮后，弹出右侧隐藏内容
+        mainShow_tab1~4：选中tab1~4时的样式 */}
       <div
-        className={`main ${
-          isShowHidContent ? 'mainAc' : currentTab === 'tab0' ? '' : 'mainShow_' + currentTab
-        }`}
+        className={`main ${isShowHidContent ? 'mainAc' : currentTab === 'tab0' ? '' : 'mainShow_' + currentTab
+          }`}
       >
+        {/* 左侧隐藏内容 */}
         <div className={`lHidding ${isShowHidContentRight ? 'showRight' : ''}`}>
           <div className='lHidding_left'>
             <div className='detail_info1'>
-              <div className='imgBox'>
+              <div className='imgBox' onClick={() => handleImgBox(0)}>
                 <div className='pic' ref={picRef} />
+                <div className='zoomIn'>
+                  <img src={require('@/assets/img/A6_sangzang_zoomin.png')} alt='' />
+                </div>
               </div>
               <div
                 className='txt'
@@ -68,16 +78,17 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
               <div className='title songFont'>{myData.sangzangLeftInfo2[0].name}</div>
               <div className='time'>{myData.sangzangLeftInfo2[0].txt}</div>
             </div>
-            <div
+
+            {/*废弃 <div
               className='detail_info2'
-              // onClick={() => setIsShowHidContentRight(!isShowHidContentRight)}
+            onClick={() => setIsShowHidContentRight(!isShowHidContentRight)}
             >
-              {/* <div className='title_info2 songFont'>{myData.sangzangStatic.leftInfoName}</div> */}
+              <div className='title_info2 songFont'>{myData.sangzangStatic.leftInfoName}</div>
               <div className='txt_info2'>{myData.sangzangStatic.txt}</div>
-            </div>
+            </div> */}
           </div>
           <div className='lHidding_right'>
-            <div className='imgBox' onClick={() => setIsShowMzwHot(true)}>
+            <div className='imgBox' onClick={() => handleImgBox(1)}>
               <div className='pic' />
               <div className='zoomIn'>
                 <img src={require('@/assets/img/A6_sangzang_zoomin.png')} alt='' />
@@ -101,6 +112,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
             <div className='openPic' />
           </div>
         </div>
+        {/* 左侧碑图 */}
         <div className='left'>
           <div
             className='pic'
@@ -120,6 +132,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
             </div>
           </div>
         </div>
+        {/* 右侧文本 */}
         <div
           className='right'
           style={
@@ -144,6 +157,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
           </div>
         </div>
       </div>
+      {/* 右侧tab栏 */}
       <div className={`A6_tabBar ${!isShowTabBar ? 'A6_tabBar_hide' : ''}`}>
         <div
           className={`tab songFont ${currentTab === 'tab1' ? 'tab_active' : ''}`}
@@ -151,15 +165,15 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
         >
           墓志
           <br />
-          格式
+          范式
         </div>
         <div
           className={`tab songFont ${currentTab === 'tab2' ? 'tab_active' : ''}`}
           onClick={() => handleTabClick('tab2')}
         >
-          攀附
+          郡望
           <br />
-          之风
+          标榜
         </div>
         <div
           className={`tab songFont ${currentTab === 'tab3' ? 'tab_active' : ''}`}
@@ -175,7 +189,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
         >
           刻写
           <br />
-          过程
+          时序
         </div>
       </div>
 
@@ -188,9 +202,8 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
           <div
             className='pic'
             style={{
-              background: `url(${require(`@/assets/img/A6_sangzang_geshi${
-                selectedGeshi === 0 ? '1' : selectedGeshi
-              }.png`)}) no-repeat center/contain`
+              background: `url(${require(`@/assets/img/A6_sangzang_geshi${selectedGeshi === 0 ? '1' : selectedGeshi
+                }.png`)}) no-repeat center/contain`
             }}
           />
         </div>
@@ -206,9 +219,8 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
                 }}
               >
                 <img
-                  src={require(`@/assets/img/btn_ModalTxt_bg${
-                    selectedGeshi === item.key ? '_ac' : ''
-                  }.png`)}
+                  src={require(`@/assets/img/btn_ModalTxt_bg${selectedGeshi === item.key ? '_ac' : ''
+                    }.png`)}
                   alt=''
                 />
                 <div className={`tabNub songFont ${selectedGeshi === item.key ? 'tabNubAc' : ''}`}>
@@ -235,31 +247,16 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
           <div
             className='mPic'
             style={{
-              background: `url(${require(`@/assets/img/A6_sangzang_${
-                currentTab !== 'tab1' && currentTab !== 'tab2' ? 'yp2' : currentTab
-              }.png`)}) no-repeat center/contain`
+              background: `url(${require(`@/assets/img/A6_sangzang_mzw${mzwCurrentIndex}.png`)}) no-repeat center/contain`
             }}
           ></div>
         </div>
         <div className='mzwHotR'>
-          <div className='mtitle songFont'>
-            {
-              myData.mzw[
-                currentTab !== 'tab1' && currentTab !== 'tab2'
-                  ? 0
-                  : Number(currentTab.split('tab')[1])
-              ].title
-            }
-          </div>
+          <div className='mtitle songFont'>{myData.mzw[mzwCurrentIndex].title}</div>
           <div
             className='mtext'
             dangerouslySetInnerHTML={{
-              __html:
-                myData.mzw[
-                  currentTab !== 'tab1' && currentTab !== 'tab2'
-                    ? 0
-                    : Number(currentTab.split('tab')[1])
-                ].txt
+              __html: myData.mzw[mzwCurrentIndex].txt
             }}
           ></div>
         </div>

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

@@ -6,7 +6,10 @@
   z-index: 3;
   width: 100%;
   height: 100%;
-  background: url('../../../assets/img/A6_ffhy_bg.png') no-repeat center center;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-image: url('../../../assets/img/A6_ffhy_bg.png');
+  background-color: rgba(255, 233, 182, 1);
   background-size: 100% 100%;
 
   :global {