Merge branch 'master' of http://192.168.0.115:3000/lanxin/Chengzhebei

public/unityMo/StreamingAssets/Settings.json

@@ -133,7 +133,7 @@
         "position": {
           "x": 0,
           "y": 0.5,
-          "z": -12
+          "z": -11.5
         },
         "physicalLensShift": {
           "x": 0.2,
@@ -746,4 +746,4 @@
       "y": 0.98
     }
   }
-}
+}

public/unityPc/StreamingAssets/Settings.json

@@ -133,7 +133,7 @@
         "position": {
           "x": 0,
           "y": 0.5,
-          "z": -12
+          "z": -11.5
         },
         "physicalLensShift": {
           "x": 0.2,
@@ -746,4 +746,4 @@
       "y": 0.98
     }
   }
-}
+}

src/pages/A2yblm/components/ModalTxt/index.module.scss

@@ -42,7 +42,7 @@
           position: absolute;
           align-self: flex-start;
 
-          & > img {
+          &>img {
             width: 100%;
             object-fit: contain;
           }
@@ -73,7 +73,7 @@
           cursor: pointer;
           position: relative;
 
-          & > img {
+          &>img {
             height: 60px;
             object-fit: contain;
           }
@@ -82,8 +82,8 @@
             transition: all 0.3s ease-in-out;
             font-size: 18px;
             position: absolute;
-            top: 34%;
-            left: 50%;
+            top: 32%;
+            left: 48%;
             transform: translate(-50%, -73%) !important;
             color: rgba(255, 233, 182, 0.6);
           }
@@ -111,9 +111,10 @@
         background-image: url(../../../../assets/img/A2_back.png);
         background-position: center;
         background-size: 100% 100%;
+        background-repeat: no-repeat;
         width: 100%;
         padding-left: 40px;
-        padding-right: 20px;
+        padding-right: 40px;
         padding-top: 40px;
         padding-bottom: 20px;
         height: fit-content;
@@ -126,6 +127,7 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
+        // height: 330px;
 
         .intro_title {
           height: 30px;
@@ -134,29 +136,33 @@
           color: rgba(124, 75, 54, 1);
           font-weight: bold;
         }
+
         .intro_txt {
           margin-top: 10px;
           height: fit-content;
-          max-height: calc(100% - 110px);
+          max-height: calc(100% - 90px);
           overflow-y: auto;
           margin-bottom: 10px;
-          mask-image: linear-gradient(
-            to bottom,
-            rgba(0, 0, 0, 1) 0%,
-            rgba(0, 0, 0, 1) 95%,
-            /* 保留顶部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) 95%,
-            rgba(0, 0, 0, 0) 100%
-          );
+          // text-align: justify;
+          mask-image: linear-gradient(to bottom,
+              rgba(0, 0, 0, 1) 0%,
+              rgba(0, 0, 0, 1) 95%,
+              /* 保留顶部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) 95%,
+              rgba(0, 0, 0, 0) 100%);
+
           &::-webkit-scrollbar {
             width: 0px;
           }
         }
+
         .intro_btn {
+          margin-top: 0px;
           width: 150px;
           height: 30px;
           background-image: url(../../../../assets/img/A2_ywyw_btn.png);
@@ -170,6 +176,9 @@
           animation: fadeInOut 3s linear infinite;
           display: flex;
           align-items: center;
+          position: relative;
+          right: -15px;
+
           .intro_btn_dot {
             width: 6px;
             height: 2px;
@@ -177,6 +186,7 @@
             text-align: center;
             border-left: 2px solid rgba(175, 135, 100, 1);
           }
+
           .intro_btn_arrow {
             width: 26px;
             height: 30px;
@@ -195,6 +205,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
+
         .txtWithTrans {
           font-size: 16px !important;
           line-height: 22px !important;
@@ -202,30 +213,29 @@
           height: 90%;
           width: 100%;
           text-align: justify;
-          font-weight: 500;
-          color: rgba(94, 52, 34, 1); // 原始颜色
+          // font-weight: 500;
+          color: black; // 原始颜色
           overflow: auto;
           padding: 20px 30px;
 
-          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%
-          );
+          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: 0px;
           }
 
-          & > a {
-            color: rgba(94, 52, 34, 1);
+          &>a {
+            color: black;
             position: relative;
 
             &::after {
@@ -240,6 +250,7 @@
               transform-origin: right center;
             }
           }
+
           .translate {
             color: rgba(148, 148, 148, 1);
           }
@@ -311,11 +322,11 @@
               color: rgba(0, 0, 0, 0.25);
             }
 
-            &:has(> a:hover) > a:not(:hover) {
+            &:has(> a:hover)>a:not(:hover) {
               color: rgba(0, 0, 0, 0.25);
             }
 
-            & > a {
+            &>a {
               color: rgba(94, 52, 34, 1);
               position: relative;
 
@@ -346,6 +357,7 @@
       }
 
       .content {
+        padding-top: 40px;
         width: 70%;
         height: 50%;
         padding-right: 20px;
@@ -359,6 +371,7 @@
           font-size: 20px;
           line-height: 20px;
           font-weight: bold;
+          margin-bottom: 10px;
         }
 
         .text {
@@ -366,24 +379,28 @@
           line-height: 28px;
           font-size: 16px;
           text-align: justify;
-          letter-spacing: 2px;
+          // letter-spacing: 2px;
           color: #504e40;
 
-          & > p {
+          &>p {
             padding-bottom: 10px;
           }
         }
+
         .shufaBtn {
-          width: 180px;
+          width: 150px;
           height: 50px;
           background-image: url(../../../../assets/img/A2_sfjs_btn.png);
           background-position: center;
-          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          background-size: 100% auto;
           line-height: 50px;
           font-size: 17px;
           margin-top: 11px;
           text-align: center;
+          letter-spacing: 2px;
           cursor: pointer;
+          padding-left: 15px;
         }
       }
     }
@@ -433,4 +450,4 @@
     //   }
     // }
   }
-}
+}

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

@@ -305,7 +305,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
                 className='text'
                 dangerouslySetInnerHTML={{ __html: myLangue === 'EN' ? gaiShuEn : gaiShu }}
               ></div>
-              <div className='shufaBtn' onClick={() => setIsShowShufa(true)}>
+              <div className='shufaBtn songFont' onClick={() => setIsShowShufa(true)}>
                 书法赏析
               </div>
             </div>

src/pages/A2yblm/components/Shufa/index.module.scss

@@ -6,6 +6,7 @@
   top: 0;
   left: 0;
   background-color: #ffffffcf;
+
   :global {
     .shufa1 {
       width: 100%;
@@ -22,6 +23,7 @@
       background-repeat: no-repeat;
       gap: 20px;
       transition: all 0.6s ease-in-out;
+
       .sLeft {
         width: 30%;
         height: 100%;
@@ -29,29 +31,34 @@
         flex-direction: column;
         align-items: center;
         gap: 8px;
+
         .zi {
           width: 65%;
           height: 38%;
           display: flex;
           justify-content: center;
           align-items: center;
-          & > img {
+
+          &>img {
             width: 100%;
             height: 100%;
             object-fit: contain;
           }
         }
+
         .leftTxt1 {
           width: 78%;
           height: 20%;
-          color: rgba(38, 38, 38, 1);
+          color: #51504e;
           font-size: 13px;
           line-height: 20px;
         }
       }
+
       .sRight {
         width: 52%;
         height: 100%;
+
         .rightTitle1 {
           width: 88%;
           height: fit-content;
@@ -59,6 +66,7 @@
           font-size: 16px;
           line-height: 22px;
         }
+
         .rightTitleLine1 {
           transform: translateY(-8px);
           width: 88%;
@@ -66,6 +74,7 @@
           background: url(../../../../assets/img/A2_shufa_title_bg.png) no-repeat;
           background-size: 100% 100%;
         }
+
         .rightIntro {
           margin-top: 40px;
           width: 88%;
@@ -73,11 +82,13 @@
           color: rgba(69, 68, 55, 1);
           background: url(../../../../assets/img/A2_shufa_txt_bg.png) no-repeat;
           background-size: 100% 100%;
+
           .rightItem {
             width: 100%;
             transform: translateY(-21px);
             height: 41px;
             white-space: nowrap;
+
             .rLabel {
               display: inline-block;
               vertical-align: top;
@@ -88,6 +99,7 @@
               line-height: 35px;
               font-weight: 700;
             }
+
             .rtext {
               display: inline-block;
               vertical-align: top;
@@ -100,18 +112,20 @@
             }
           }
         }
+
         .rightTxt1 {
           font-size: 14px;
           margin-top: 10px;
-          color: rgba(38, 38, 38, 1);
+          color: #51504e;
           width: 88%;
           height: fit-content;
           text-align: justify;
         }
+
         .shufa1Btn {
           background: url(../../../../assets/img/A2_shufa_btn.png) no-repeat;
-          background-size: 100% 100%;
-          width: 120px;
+          background-size: auto 100%;
+          width: 130px;
           height: 45px;
           display: flex;
           justify-content: center;
@@ -145,6 +159,7 @@
         align-items: center;
         justify-content: center;
         gap: 20px;
+
         .zicontent {
           width: 48%;
           height: 100%;
@@ -152,26 +167,31 @@
           flex-direction: column;
           align-items: flex-end;
           justify-content: center;
+
           .txtitem {
             width: 100%;
-            height: 24px;
+            height: 30px;
             display: flex;
             align-items: center;
             justify-content: flex-end;
             gap: 3px;
             color: rgba(69, 68, 55, 1);
+
             .txt {
               font-size: 14px;
               line-height: 20px;
+
               span {
                 font-weight: bold;
               }
             }
+
             .icon {
               width: 24px;
               height: 24px;
               cursor: pointer;
-              & > img {
+
+              &>img {
                 width: 100%;
                 height: 100%;
                 object-fit: contain;
@@ -179,10 +199,12 @@
               }
             }
           }
+
           .txtitemAc {
             color: rgba(175, 135, 100, 1);
           }
         }
+
         .zi1,
         .zi2 {
           width: 167px;
@@ -192,14 +214,17 @@
           // background-position: center;
           // background-size: 100% 100%;
           transition: opacity 0.3s ease-in-out;
-          & > img {
+
+          &>img {
             width: 100%;
             height: 100%;
             object-fit: contain;
           }
         }
+
         .zi1 {
           position: relative;
+
           .lian1 {
             max-width: none;
             max-height: none;
@@ -208,6 +233,7 @@
             object-fit: fill;
             animation: lian_wang 5s steps(71) forwards;
           }
+
           .lian2 {
             max-width: none;
             max-height: none;
@@ -216,9 +242,11 @@
             object-fit: fill;
             animation: lian_zou 3s steps(31) forwards;
           }
+
           .normal {
             animation: fade_in 3s linear;
           }
+
           .itemAC {
             position: absolute;
             top: 0;
@@ -226,6 +254,7 @@
             animation: fadeOut 3s linear;
           }
         }
+
         .zi2 {
           .bei1 {
             max-width: none;
@@ -235,6 +264,7 @@
             object-fit: fill;
             animation: bei_shang 3s steps(35) forwards;
           }
+
           .bei2 {
             max-width: none;
             max-height: none;
@@ -245,6 +275,7 @@
           }
         }
       }
+
       .beiContainner {
         .zicontent {
           .txtitem {
@@ -265,6 +296,7 @@
   left: 50%;
   transform: translate(-312px, -135px);
   white-space: nowrap;
+
   :global {
     .dot {
       width: 3px;
@@ -274,6 +306,7 @@
       left: 50%;
       transform: translate(-50%, -50%);
     }
+
     .leftLine {
       display: inline-block;
       vertical-align: top;
@@ -283,10 +316,12 @@
       font-size: 9px;
       border-left: 2px dashed rgba(255, 233, 182, 1);
       border-bottom: 2px dashed rgba(255, 233, 182, 1);
+
       .dot {
         transform: translate(-54px, -25px);
       }
     }
+
     .rightLine {
       display: inline-block;
       vertical-align: top;
@@ -295,6 +330,7 @@
       height: 100%;
       color: rgba(124, 75, 54, 1);
       border-bottom: 2px dashed rgba(124, 75, 54, 1);
+
       .dot {
         transform: translate(27px, 2px);
       }
@@ -311,6 +347,7 @@
   left: 50%;
   transform: translate(-312px, 35px);
   white-space: nowrap;
+
   :global {
     .dot {
       width: 3px;
@@ -320,6 +357,7 @@
       left: 50%;
       transform: translate(-50%, -50%);
     }
+
     .leftLine {
       display: inline-block;
       vertical-align: top;
@@ -329,10 +367,12 @@
       font-size: 9px;
       border-left: 2px dashed rgba(255, 233, 182, 1);
       border-top: 2px dashed rgba(255, 233, 182, 1);
+
       .dot {
         transform: translate(-54px, 53px);
       }
     }
+
     .rightLine {
       display: inline-block;
       vertical-align: top;
@@ -341,9 +381,10 @@
       height: 100%;
       color: rgba(124, 75, 54, 1);
       border-top: 2px dashed rgba(124, 75, 54, 1);
+
       .dot {
         transform: translate(27px, -65px);
       }
     }
   }
-}
+}

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

@@ -8,12 +8,11 @@ import lian2 from '@/assets/img/frame_lian2.png'
 import bei1 from '@/assets/img/frame_bei1.png'
 import bei2 from '@/assets/img/frame_bei2.png'
 
-
 type ActiveItem = 'lian1' | 'lian2' | 'bei1' | 'bei2' | 'normal'
 function Shufa({ setIsShowShufa }: { setIsShowShufa: (isShowShufa: boolean) => void }) {
   const [showName, setName] = useState('shufa1')
   const [activeItem, setActiveItem] = useState<ActiveItem>('normal')
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
   const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)
   const Line = ({ index }: { index: number }) => {
     return (
@@ -30,28 +29,28 @@ function Shufa({ setIsShowShufa }: { setIsShowShufa: (isShowShufa: boolean) => v
 
   useEffect(() => {
     if (timerRef.current) {
-      clearTimeout(timerRef.current);
+      clearTimeout(timerRef.current)
     }
     const delayMap = {
       lian1: 5000,
       lian2: 4000,
       bei1: 4000,
-      bei2: 4000,
-    };
+      bei2: 4000
+    }
 
     if (activeItem && activeItem !== 'normal' && delayMap.hasOwnProperty(activeItem)) {
       timerRef.current = setTimeout(() => {
-        setActiveItem('normal');
+        setActiveItem('normal')
         // 定时器执行后清空 ref
-        timerRef.current = null;
-      }, delayMap[activeItem]);
+        timerRef.current = null
+      }, delayMap[activeItem])
     }
 
     return () => {
       if (timerRef.current) {
-        clearTimeout(timerRef.current);
+        clearTimeout(timerRef.current)
       }
-    };
+    }
   }, [activeItem])
 
   const backClick = () => {
@@ -82,7 +81,7 @@ function Shufa({ setIsShowShufa }: { setIsShowShufa: (isShowShufa: boolean) => v
           <div className='leftTxt1'>{myData?.shufa?.lIntro}</div>
         </div>
         <div className='sRight'>
-          <div className='rightTitle1'>{myData?.shufa?.rIntro}</div>
+          <div className='rightTitle1 songFont'>{myData?.shufa?.rIntro}</div>
           <div className='rightTitleLine1' />
           <div className='rightIntro'>
             {myData?.shufa?.rItems?.map((item, index) => (
@@ -93,7 +92,7 @@ function Shufa({ setIsShowShufa }: { setIsShowShufa: (isShowShufa: boolean) => v
             ))}
           </div>
           <div className='rightTxt1'>{myData?.shufa?.rTxt}</div>
-          <div className='shufa1Btn' onClick={() => setName('shufa2')}>
+          <div className='shufa1Btn songFont' onClick={() => setName('shufa2')}>
             字形赏析
           </div>
         </div>
@@ -129,14 +128,34 @@ function Shufa({ setIsShowShufa }: { setIsShowShufa: (isShowShufa: boolean) => v
               </div>
             ))}
           </div>
-          <div className={`zi1`} >
-            <img className={activeItem} src={activeItem === 'lian1' ? lian1 : activeItem === 'lian2' ? lian2 : require('@/assets/img/A2_shufa_lian.png')} alt="" />
+          <div className={`zi1`}>
+            <img
+              className={activeItem}
+              src={
+                activeItem === 'lian1'
+                  ? lian1
+                  : activeItem === 'lian2'
+                  ? lian2
+                  : require('@/assets/img/A2_shufa_lian.png')
+              }
+              alt=''
+            />
           </div>
         </div>
         {/* 碑 */}
         <div className='beiContainner'>
-          <div className={`zi2 ${activeItem}`} >
-            <img className={activeItem} src={activeItem === 'bei1' ? bei1 : activeItem === 'bei2' ? bei2 : require('@/assets/img/A2_shufa_bei.png')} alt="" />
+          <div className={`zi2 ${activeItem}`}>
+            <img
+              className={activeItem}
+              src={
+                activeItem === 'bei1'
+                  ? bei1
+                  : activeItem === 'bei2'
+                  ? bei2
+                  : require('@/assets/img/A2_shufa_bei.png')
+              }
+              alt=''
+            />
           </div>
           <div className='zicontent'>
             {myData?.shufa2?.bei?.map((item, index) => (

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

@@ -98,8 +98,8 @@ const NodeNormal = ({ className, nameClick, style, data }: nodeProps) => {
           console.log(123)
         }}
       >
-        <div className='span1'> {data.name}</div> <div className='span2'>{data.customN}</div>
-
+        <div className='span1 songFont'> {data.name}</div>
+        <div className='span2'>{data.customN}</div>
       </div>
       <div className='time'>{data.addTxt.time}</div>
       <div className='txt'>{data.addTxt.pos}</div>
@@ -117,8 +117,8 @@ const NodeActive = ({ className, nameClick, style, data }: nodeProps) => {
           nameClick?.()
         }}
       >
-        <div className='span1'> {data.name}</div> <div className='span2'>{data.customN}</div>
-
+        <div className='span1 songFont'> {data.name}</div>
+        <div className='span2'>{data.customN}</div>
       </div>
       <div className='time'>{data.addTxt.time}</div>
       <div className='txt'>{data.addTxt.pos}</div>
@@ -136,7 +136,8 @@ const NodeFalse = ({ className, nameClick, style, data }: nodeProps) => {
           nameClick?.()
         }}
       >
-        <div className='span1'> {data.name}</div> <div className='span2'>{data.customN}</div>
+        <div className='span1 songFont'> {data.name}</div>
+        <div className='span2'>{data.customN}</div>
       </div>
       <div className='time'>{data.addTxt.time}</div>
       <div className='txt'>{data.addTxt.pos}</div>
@@ -231,7 +232,6 @@ const NodeTurnBottomDashRight = ({ type, className, nameClick, style, data }: no
 }
 
 export {
-
   NodeRightDash,
   NodeTurnBottomRight,
   NodeTurnBottomDashRight,
@@ -246,6 +246,5 @@ export {
   TurnRightLine,
   NodeNormal,
   NodeActive,
-  NodeFalse,
-
+  NodeFalse
 }

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

@@ -26,8 +26,7 @@
       .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;
@@ -47,8 +46,7 @@
           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;
 
@@ -70,10 +68,10 @@
               .pic {
                 width: 100%;
                 height: 100%;
-                background: url('../../../../../assets/img/A6_sangzang_mzw0.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;
@@ -84,7 +82,7 @@
                 justify-content: center;
                 align-items: center;
 
-                & > img {
+                &>img {
                   height: 20px;
                   width: 20px;
                   object-fit: contain;
@@ -117,11 +115,12 @@
             .title {
               height: 16px;
               color: rgba(124, 75, 54, 1);
-              font-size: 24px;
+              font-size: 22px;
               letter-spacing: 1px;
             }
 
             .time {
+              font-size: 14px;
               color: rgba(175, 135, 100, 1);
             }
           }
@@ -186,6 +185,7 @@
           transition: all 0.3s ease-in-out;
           opacity: 0;
           pointer-events: none;
+          padding-top: 15px;
 
           .imgBox {
             position: relative;
@@ -195,8 +195,7 @@
             .pic {
               width: 100%;
               height: 100%;
-              background: url('../../../../../assets/img/A6_sangzang_mzw1.png') no-repeat center
-                center;
+              background: url('../../../../../assets/img/A6_sangzang_mzw1.png') no-repeat center center;
               background-size: contain;
             }
 
@@ -210,7 +209,7 @@
               justify-content: center;
               align-items: center;
 
-              & > img {
+              &>img {
                 height: 20px;
                 width: 20px;
                 object-fit: contain;
@@ -241,11 +240,12 @@
           .title {
             height: 16px;
             color: rgba(124, 75, 54, 1);
-            font-size: 24px;
+            font-size: 22px;
             letter-spacing: 1px;
           }
 
           .time {
+            font-size: 14px;
             color: rgba(175, 135, 100, 1);
           }
         }
@@ -264,8 +264,7 @@
 
           .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%;
@@ -353,19 +352,20 @@
 
           .title {
             width: 100%;
-            font-size: 26px;
             max-width: 100%;
-            font-size: 26px;
+            font-size: 24px;
             color: #fff;
+            text-shadow: 1px 1px 1px #7C4B36;
+            margin-bottom: 20px;
             // border-bottom: 1px solid rgba(93, 96, 96, 0.4);
           }
 
           .text {
-            width: 70%;
+            width: 80%;
             height: auto;
             max-height: 200px;
             font-size: 16px;
-            line-height: 28px;
+            line-height: 26px;
             // letter-spacing: 1px;
             color: #504e40;
             text-align: justify;
@@ -391,11 +391,11 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 20px;
+            font-size: 18px;
             line-height: 50px;
             cursor: pointer;
 
-            & > img {
+            &>img {
               height: 90%;
               position: absolute;
               z-index: -1;
@@ -426,8 +426,7 @@
           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;
           }
@@ -470,8 +469,7 @@
       .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 {
@@ -522,8 +520,7 @@
         .lHidding_right {
           .imgBox {
             .pic {
-              background: url('../../../../../assets/img/A6_sangzang_mzw2.png') no-repeat center
-                center;
+              background: url('../../../../../assets/img/A6_sangzang_mzw2.png') no-repeat center center;
               background-size: 100% 100%;
             }
           }
@@ -543,13 +540,14 @@
         .content {
           margin-top: 5%;
           height: 90%;
-          padding-left: 15px;
+          padding-left: 0px;
 
           display: flex;
           flex-direction: row;
           align-items: center;
 
           .text {
+            padding-top: 40px;
             height: 80%;
             max-height: 80%;
             line-height: 26px;
@@ -565,8 +563,7 @@
         .lHidding_right {
           .imgBox {
             .pic {
-              background: url('../../../../../assets/img/A6_sangzang_mzw3.png') no-repeat center
-                center;
+              background: url('../../../../../assets/img/A6_sangzang_mzw3.png') no-repeat center center;
               background-size: 100% 100%;
             }
           }
@@ -577,7 +574,7 @@
         width: 300px;
 
         .pic {
-          right: 21%;
+          right: 35%;
           top: 23%;
           transform: scale(1.9);
           position: relative;
@@ -589,9 +586,12 @@
       }
 
       .right {
+        position: relative;
+        left: -50px;
         height: 100%;
 
         .content {
+          width: 100%;
           margin-top: 5%;
           height: 90%;
           padding-left: 15px;
@@ -601,7 +601,7 @@
           align-items: center;
 
           .text {
-            width: 80%;
+            width: 98%;
             height: 90%;
             max-height: 90%;
             line-height: 26px;
@@ -648,7 +648,7 @@
           align-items: center;
 
           .text {
-            padding-top: 50px;
+            padding-top: 80px;
             width: 70%;
             height: 90%;
             max-height: 90%;
@@ -662,15 +662,21 @@
       .left {
         .pic {
           top: 134%;
-          right: 82%;
+          right: 90%;
           transform: scale(3.4);
         }
       }
 
       .right {
+        position: relative;
+        left: -30px;
+
         .content {
+          width: 100%;
+
           .text {
-            padding-top: 0px;
+            width: 80%;
+            padding-top: 30px;
           }
         }
       }
@@ -685,7 +691,7 @@
       left: 4%;
       cursor: pointer;
 
-      & > img {
+      &>img {
         height: 100%;
         object-fit: fill;
       }
@@ -710,7 +716,7 @@
         align-items: center;
         justify-content: center;
         background-image: url('../../../../../assets/sgImg/Component.png');
-        background-size: 100% 100%;
+        background-size: 100% auto;
         width: 60px;
         height: 60px;
         font-size: 14px;
@@ -718,13 +724,13 @@
         line-height: 15px;
         letter-spacing: 1px;
         font-weight: 500;
-        color: #fbebbd;
+        color: #FFE9B6;
         cursor: pointer;
       }
 
       .tab_active {
         background-image: url('../../../../../assets/sgImg/ComponentAc.png');
-        color: rgba(166, 118, 67, 1);
+        color: #5D1E20;
       }
     }
 
@@ -791,7 +797,7 @@
             cursor: pointer;
             position: relative;
 
-            & > img {
+            &>img {
               width: 60px;
               object-fit: cover;
             }
@@ -829,18 +835,27 @@
         .content {
           width: 95%;
           height: 68%;
-          font-size: 16px;
-          line-height: 24px;
-          letter-spacing: 2px;
-          font-weight: 400;
-          color: rgba(69, 68, 55, 1);
-          overflow: auto;
-          text-align: justify;
+          display: flex;
+          align-items: center;
 
-          &::-webkit-scrollbar {
-            width: 0px;
-            height: 0px;
+          &>div {
+            width: 100%;
+            max-height: 100%;
+            font-size: 16px;
+            line-height: 24px;
+            // letter-spacing: 2px;
+            font-weight: 400;
+            color: rgba(69, 68, 55, 1);
+            overflow: auto;
+            text-align: justify;
+
+            &::-webkit-scrollbar {
+              width: 0px;
+              height: 0px;
+            }
           }
+
+
         }
       }
     }
@@ -912,23 +927,27 @@
 
         .mtext {
           width: 100%;
+          height: 500px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
           padding-bottom: 30px;
-          height: fit-content;
           max-height: 80%;
           color: rgba(255, 255, 255, 1);
           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%
-          );
+          font-weight: 400;
+          letter-spacing: 2px;
+          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: 0px;
@@ -944,7 +963,7 @@
         top: 21px;
         right: 32px;
 
-        & > img {
+        &>img {
           width: 100%;
           height: 100%;
           object-fit: contain;
@@ -959,4 +978,4 @@
       pointer-events: auto;
     }
   }
-}
+}

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

@@ -26,7 +26,6 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
     }
   }, [isShowHidContent, isShowMzwHot, selectedGeshi])
 
-
   const handleTabClick = (tab: string) => {
     if (tab === currentTab) {
       setCurrentTab('tab0')
@@ -77,8 +76,9 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
         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' : ''}`}>
@@ -113,10 +113,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
                 <img src={require('@/assets/img/A6_sangzang_zoomin.png')} alt='' />
               </div>
             </div>
-            <div
-              className='txt'
-              dangerouslySetInnerHTML={{ __html: lHiddingRightFrom }}
-            ></div>
+            <div className='txt' dangerouslySetInnerHTML={{ __html: lHiddingRightFrom }}></div>
             <div className='title songFont'>{lHiddingRightTitle}</div>
             <div className='time'>{lHiddingRightTxt}</div>
           </div>
@@ -221,8 +218,9 @@ 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>
@@ -238,8 +236,9 @@ 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' : ''}`}>
@@ -251,12 +250,13 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
               </div>
             ))}
           </div>
-          <div
-            className='content'
-            dangerouslySetInnerHTML={{
-              __html: selectedGeshi !== 0 ? myData.mzgeshi[selectedGeshi - 1].txt : ''
-            }}
-          ></div>
+          <div className='content'>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: selectedGeshi !== 0 ? myData.mzgeshi[selectedGeshi - 1].txt : ''
+              }}
+            ></div>
+          </div>
         </div>
       </div>
 
@@ -276,7 +276,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
             className='mtext'
             style={{
               ...((mzwCurrentIndex === 0 || mzwCurrentIndex === 1) && {
-                lineHeight: '34px',
+                lineHeight: '28px',
                 textAlign: 'center'
               })
             }}