upp

public/myData/myData.js

@@ -1768,7 +1768,7 @@ const myDataTemp = {
   // 丧葬因素
   sangzangData: [
     {
-      txt: '程哲碑，其以佛像为主题的造像风格与传统造像碑无二，但传统造像碑通常以发愿文为核心，内容多为祈福禳灾、超度亡灵或祈求功德，不强调墓主生平与家族世系。<br/>程哲碑则强调墓主生平与家族世系，其文字更多是丧葬语境下的内容，其行文与墓志铭密切相关。'
+      txt: '程哲碑，其以佛像为主题的造像风格与传统造像碑无二，但传统造像碑通常以发愿文为核心，内容多为祈福禳灾、超度亡灵或祈求功德，不强调墓主生平与家族世系。程哲碑则强调墓主生平与家族世系，其文字更多是丧葬语境下的内容，其行文与墓志铭密切相关。'
     },
     {
       txt: '碑文详述上党程氏先祖功绩、程哲生平及卒年信息，并以程氏家族三组父子的颂文结尾。虽其“支离杂沓、漫无体裁”，但在这一时期仍符合墓志铭常见“先祖+逝者生卒葬信息+颂文”的基本格式。'
@@ -2034,7 +2034,8 @@ const myDataTemp = {
           from: ''
         },
         {
-          name: '元恩墓志铭（《长孙子泽墓志铭》）',
+          // name: '元恩墓志铭（《长孙子泽墓志铭》）',
+          name: '元恩墓志铭',
           time: '北魏永熙三年（534年）',
           desc: '',
           from: ''

src/App.tsx

@@ -30,6 +30,7 @@ const A6_2_zxzgh = React.lazy(() => import('./pages/A6ybwx/A6_2_zxzgh'))
 // 墓影智慧
 const A8byzh = React.lazy(() => import('./pages/A8byzh'))
 const A9knowlege = React.lazy(() => import('./pages/A9knowlege'))
+const text = React.lazy(() => import('./pages/Ztext'))
 
 declare global {
   //设置全局属性
@@ -583,6 +584,7 @@ export default function App() {
             <Route path='/sinicize' component={A6_2_zxzgh} exact />
             <Route path='/byzh' component={A8byzh} exact />
             <Route path='/knowlege' component={A9knowlege} exact />
+            <Route path='/text' component={text} exact />
             <Route path='*' component={NotFound} />
           </Switch>
         </React.Suspense>

src/components/Zback/index.tsx

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

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

@@ -11,19 +11,9 @@
   overflow: hidden;
 
   :global {
-    .back {
-      width: 80px;
-      height: 40px;
-      position: absolute;
-      z-index: 3;
-      top: 3%;
-      left: 4%;
-      cursor: pointer;
 
-      &>img {
-        height: 100%;
-        object-fit: fill;
-      }
+    #Zback {
+      left: 3%;
     }
 
     .containner {
@@ -33,6 +23,7 @@
       width: 100%;
       height: 102%;
       overflow: auto;
+
       // overflow-y: hidden;
       // overflow-y: hidden;
       &::-webkit-scrollbar {
@@ -93,10 +84,12 @@
           // display: flex;
           display: inline-block;
 
+
           .part1,
           .part2 {
+            position: relative;
             display: inline-block;
-            padding: 35px 20px;
+            padding: 35px 20px 45px;
             width: 340px;
             height: 100%;
             overflow: auto;
@@ -108,6 +101,20 @@
             white-space: normal;
             transition: width 0.6s ease-in-out, padding 0.86s ease-in-out, opacity 0.3s ease-in-out;
 
+            &::before {
+              content: '';
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              width: 100%;
+              height: 40%;
+              pointer-events: none;
+              z-index: 1;
+              // background-image: url('../../../../../assets/sgImg/mask.png');
+              // background-size: 100% 100%;
+              background: linear-gradient(to top, rgba(255, 255, 255, 1), 20%, rgba(255, 255, 255, 0));
+            }
+
             &::-webkit-scrollbar {
               width: 0;
               height: 0;
@@ -117,10 +124,11 @@
           .part1 {
             background: url(../../../../../assets/img/A6_policy_part_bg1.png) no-repeat center center;
             background-size: 100% 100%;
+            padding-bottom: 60px;
 
-            .part1txt {
+            .part1Box {
               width: 100%;
-              height: 80%;
+              height: 100%;
               overflow: auto;
 
               &::-webkit-scrollbar {
@@ -129,19 +137,28 @@
               }
             }
 
+            .part1txt {
+              width: 100%;
+              text-align: justify;
+
+              // overflow: auto;
+
+              // &::-webkit-scrollbar {
+              //   width: 0;
+              //   height: 0;
+              // }
+            }
+
             .from {
               width: 100%;
-              height: fit-content;
-              max-height: 20%;
-              overflow: auto;
               color: rgba(124, 75, 54, 1);
               font-size: 14px;
               line-height: 16px;
 
-              &::-webkit-scrollbar {
-                width: 0;
-                height: 0;
-              }
+              // &::-webkit-scrollbar {
+              //   width: 0;
+              //   height: 0;
+              // }
 
               .fromtxt {
                 width: 100%;
@@ -171,10 +188,16 @@
               display: flex;
               flex-direction: column;
               justify-content: space-between;
+              text-align: center;
 
               &>img {
                 height: 78%;
+                max-width: 50%;
                 object-fit: contain;
+                position: relative;
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%);
               }
 
               .from {
@@ -183,20 +206,24 @@
                 width: 100%;
                 font-size: 14px;
                 line-height: 16px;
-                color: rgba(124, 75, 54, 0.7);
+                color: #908c7b;
+                padding-top: 15px;
               }
 
               .name,
               .time {
                 writing-mode: vertical-lr;
                 position: absolute;
-                right: 15%;
+                right: 18%;
                 top: 50%;
                 transform: translateY(-80%);
                 width: 20px;
                 text-align: center;
                 font-size: 22px;
-                height: 50%;
+                min-height: 52%;
+                height: auto;
+                max-height: 200%;
+                color: #5e3422;
               }
 
               .changeBar {
@@ -210,7 +237,7 @@
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
-                gap: 10px;
+                gap: 20px;
 
                 .yuan,
                 .ta {
@@ -236,14 +263,15 @@
 
                 .cActive {
                   opacity: 1;
+                  color: #7c4b36;
                 }
               }
 
               .time {
-                right: 0;
-                font-size: 16px;
+                right: 10px;
+                font-size: 14px;
                 width: 40px;
-                text-align: left;
+                // text-align: left;
                 line-height: 20px;
               }
             }
@@ -255,6 +283,8 @@
               height: 20%;
               white-space: normal;
               overflow: auto;
+              text-align: justify;
+              font-size: 15px;
 
               &::-webkit-scrollbar {
                 width: 0;
@@ -295,6 +325,11 @@
           text-align: center;
           letter-spacing: 1px;
           color: rgba(69, 68, 55, 1);
+          font-weight: 700;
+        }
+
+        .txtAc {
+          color: #7c4b36;
         }
 
         &>img {
@@ -312,12 +347,13 @@
         height: 2px;
         display: flex;
         align-items: center;
-        background: linear-gradient(90deg,
-            rgba(93, 96, 96, 0.2) 0%,
-            rgba(93, 96, 96, 1) 50%,
-            rgba(93, 96, 96, 0.2) 100%);
-        background-size: 5px 2px;
-        background-repeat: repeat-x;
+        background-image: url('../../../../../assets/sgImg/line.png');
+        background-size: 100% 2px;
+        background-repeat: no-repeat;
+        background-position: center center;
+
+        // background-size: 5px 2px;
+        // background-repeat: repeat-x;
       }
     }
   }

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

@@ -2,13 +2,18 @@ import React, { useState, useRef, useEffect } from 'react'
 import styles from './index.module.scss'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
+import classNames from 'classnames'
+import Zback from '@/components/Zback'
+
 function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
   const [currentItem, setCurrentItem] = useState(1)
 
   const originRef = useRef<HTMLDivElement>(null)
   const itemRef = useRef<HTMLDivElement>(null)
   const { myData } = useSelector((state: RootState) => state.A0Layout)
-  const [isOriStates, setIsOriStates] = useState(myData.policy[0].part2.map((item) => item.img ? true : false))
+  const [isOriStates, setIsOriStates] = useState(
+    myData.policy[0].part2.map(item => (item.img ? true : false))
+  )
 
   // 切换tab的时候重置为原碑
   useEffect(() => {
@@ -51,9 +56,8 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
 
   return (
     <div className={styles.Policy}>
-      <div className='back' onClick={() => setShowTab(0)}>
-        <img src={require('@/assets/img/btn_back.png')} alt='' />
-      </div>
+      <Zback clickFu={() => setShowTab(0)} />
+
       <div className='containner' ref={originRef} onWheel={handleWheel}>
         <div className='containner2'>
           {myData.policy.map((item, index) => (
@@ -63,40 +67,27 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
                 <div className='bottom'>
                   <img src={item.bottomPic} alt='' />
                 </div>
-
               </div>
               <div className={`historyDetail ${currentItem !== 0 ? '' : 'historyDetail_hide'}`}>
                 <>
-                  <div
-                    className='part1'
-                    style={partChangeCss(index)}
-                  >
-                    <div className='part1txt'>{item.part1.txt} </div>
-                    <div className='from'>
-                      <div className='fromtxt'>{item.part1.from} </div>
-                      <div className='author'>{item.part1.author}</div>
+                  <div className='part1' style={partChangeCss(index)}>
+                    <div className='part1Box'>
+                      <div className='part1txt'>{item.part1.txt} </div>
+                      <div className='from'>
+                        <div className='fromtxt'>{item.part1.from} </div>
+                        <div className='author'>{item.part1.author}</div>
+                      </div>
                     </div>
                   </div>
                   {item.part2.map((part2Item, part2Index) => (
-                    <div
-                      className='part2'
-                      style={partChangeCss(index)}
-                      key={part2Item.name}
-                    >
+                    <div className='part2' style={partChangeCss(index)} key={part2Item.name}>
                       <div className='imgBox'>
-                        <img
-                          src={part2Src(part2Item, part2Index)}
-                          alt=''
-                        />
+                        <img src={part2Src(part2Item, part2Index)} alt='' />
                         <div className='from'>
                           {isOriStates[part2Index] ? part2Item.from : part2Item.from_ac}
                         </div>
-                        <div className='name'>
-                          {part2Item.name}
-                        </div>
-                        <div className='time'>
-                          {part2Item.time}
-                        </div>
+                        <div className='name songFont'>{part2Item.name}</div>
+                        <div className='time songFont'>{part2Item.time}</div>
                         <div className='changeBar'>
                           <div
                             className={`yuan ${isOriStates[part2Index] ? 'cActive' : ''}`}
@@ -108,7 +99,7 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
                             }
                           >
                             原碑
-                            <img src={require('@/assets/img/A6_policy_btn.png')} alt='' />
+                            <img src={require('@/assets/sgImg/btn_active.png')} alt='' />
                           </div>
                           <div
                             className={`ta ${!isOriStates[part2Index] ? 'cActive' : ''}`}
@@ -120,7 +111,7 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
                             }
                           >
                             拓片
-                            <img src={require('@/assets/img/A6_policy_btn.png')} alt='' />
+                            <img src={require('@/assets/sgImg/btn_normal.png')} alt='' />
                           </div>
                         </div>
                       </div>
@@ -136,10 +127,14 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
       <div className='timeLine'>
         <div className='lineContainner' />
         {myData.policy.map((item, index) => (
-          <div className='dot' key={item.title} onClick={()=>setCurrentItem(index+1)}>
-            <div className='txt'>{item.title}</div>
+          <div className='dot' key={item.title} onClick={() => setCurrentItem(index + 1)}>
+            <div className={classNames('txt', currentItem - 1 === index ? 'txtAc' : '')}>
+              {item.title}
+            </div>
             <img
-              src={require(`@/assets/img/A7base3_icon${currentItem - 1 === index ? 'A' : '_n'}.png`)}
+              src={require(`@/assets/img/A7base3_icon${
+                currentItem - 1 === index ? 'A' : '_n'
+              }.png`)}
               alt=''
             />
           </div>

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

@@ -11,6 +11,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
+
   :global {
     .main {
       position: relative;
@@ -21,11 +22,11 @@
       justify-content: center;
       gap: 20px;
       transition: all 0.6s ease-in-out;
+
       .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;
@@ -36,6 +37,7 @@
         align-items: center;
         justify-content: flex-end;
         transition: all 0.6s ease-in-out;
+
         .lHidding_left {
           position: absolute;
           left: 0;
@@ -44,10 +46,10 @@
           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;
+
           .detail_info1 {
             width: 300px;
             height: 100%;
@@ -57,18 +59,20 @@
             justify-content: center;
             gap: 10px;
             transition: all 0.6s ease-in-out;
+
             .imgBox {
               position: relative;
               width: 80%;
               height: 50%;
+
               .pic {
                 width: 100%;
                 height: 100%;
-                background: url('../../../../../assets/img/A6_sangzang_yp.png') no-repeat center
-                  center;
+                background: url('../../../../../assets/img/A6_sangzang_yp.png') no-repeat center center;
                 background-size: contain;
               }
             }
+
             .txt,
             .title,
             .time {
@@ -78,24 +82,29 @@
               line-height: 24px;
               font-weight: 400;
               color: rgba(69, 68, 55, 1);
+
               text-align: center;
             }
+
             .txt {
               line-height: 16px;
               font-size: 15px;
               height: 40px;
               color: rgba(69, 68, 55, 0.8);
             }
+
             .title {
               height: 16px;
               color: rgba(124, 75, 54, 1);
               font-size: 25px;
               letter-spacing: 1px;
             }
+
             .time {
               color: rgba(175, 135, 100, 1);
             }
           }
+
           .detail_info2 {
             width: calc(100% - 330px);
             height: 74%;
@@ -103,12 +112,14 @@
             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;
@@ -116,11 +127,11 @@
                 left: 0;
                 width: 100%;
                 height: 10px;
-                background: url('../../../../../assets/img/A6_sinicize_line2.png') no-repeat center
-                  center;
+                background: url('../../../../../assets/img/A6_sinicize_line2.png') no-repeat center center;
                 background-size: 100% 100%;
               }
             }
+
             .txt_info2 {
               width: 100%;
               height: 80%;
@@ -130,6 +141,7 @@
               font-weight: 400;
               color: #504e40;
               overflow: auto;
+
               &::-webkit-scrollbar {
                 width: 0;
                 height: 0;
@@ -137,6 +149,7 @@
             }
           }
         }
+
         .lHidding_right {
           width: 300px;
           height: 100%;
@@ -154,13 +167,14 @@
             position: relative;
             width: 75%;
             height: 60%;
+
             .pic {
               width: 100%;
               height: 100%;
-              background: url('../../../../../assets/img/A6_sangzang_yp2.png') no-repeat center
-                center;
+              background: url('../../../../../assets/img/A6_sangzang_yp2.png') no-repeat center center;
               background-size: contain;
             }
+
             .zoomIn {
               width: 30px;
               height: 30px;
@@ -171,13 +185,14 @@
               justify-content: center;
               align-items: center;
 
-              & > img {
+              &>img {
                 height: 20px;
                 width: 20px;
                 object-fit: contain;
               }
             }
           }
+
           .txt,
           .title,
           .time {
@@ -189,22 +204,26 @@
             color: rgba(69, 68, 55, 1);
             text-align: center;
           }
+
           .txt {
             line-height: 16px;
             font-size: 15px;
             height: 30px;
             color: rgba(69, 68, 55, 0.8);
           }
+
           .title {
             height: 16px;
             color: rgba(124, 75, 54, 1);
             font-size: 25px;
             letter-spacing: 1px;
           }
+
           .time {
             color: rgba(175, 135, 100, 1);
           }
         }
+
         .open {
           position: absolute;
           top: 50%;
@@ -219,8 +238,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%;
@@ -228,6 +246,7 @@
           }
         }
       }
+
       .left {
         width: 250px;
         height: 100%;
@@ -236,12 +255,14 @@
         justify-content: flex-end;
         transition: all 0.3s ease-in-out;
         position: relative;
+
         .pic {
           width: 84%;
           height: 90%;
           background-size: contain;
           transition: all 0.3s ease-in-out;
         }
+
         .operate {
           opacity: 0;
           pointer-events: none;
@@ -261,18 +282,21 @@
           font-size: 22px;
           color: rgba(255, 233, 182, 1);
           cursor: pointer;
+
           .beiwen1 {
             width: 25%;
             height: 100%;
             line-height: 47px;
             writing-mode: vertical-rl;
           }
+
           .beiwen2 {
             width: 18%;
             height: 100%;
             line-height: 37px;
             writing-mode: vertical-rl;
           }
+
           .beiwen3 {
             width: 37%;
             height: 100%;
@@ -281,6 +305,7 @@
           }
         }
       }
+
       .right {
         width: 50%;
         height: 60%;
@@ -288,6 +313,7 @@
         justify-content: space-between;
         align-items: center;
         transition: all 0.3s ease-in-out;
+
         .content {
           width: 68%;
           height: 100%;
@@ -296,6 +322,7 @@
           gap: 10px;
           transition: all 0.3s ease-in-out;
           position: relative;
+
           .title {
             width: 100%;
             font-size: 26px;
@@ -316,6 +343,7 @@
             text-align: justify;
             font-weight: 400;
             overflow: auto;
+
             &::-webkit-scrollbar {
               width: 0px;
               height: 0px;
@@ -324,7 +352,7 @@
 
           .btn {
             font-size: 14px;
-            color: rgba(93, 96, 96, 1);
+            color: #7c4b36;
             cursor: pointer;
             width: 80%;
             height: 50px;
@@ -338,7 +366,8 @@
             font-size: 20px;
             line-height: 50px;
             cursor: pointer;
-            & > img {
+
+            &>img {
               height: 90%;
               position: absolute;
               z-index: -1;
@@ -351,26 +380,31 @@
         }
       }
     }
+
     .mainAc {
       width: 100%;
       justify-content: flex-end;
       gap: 0;
+
       .lHidding {
         width: 66%;
         transform: translate(-3%, -50%);
+
         .lHidding_left {
           transform: translateX(0);
         }
+
         .open {
           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;
           }
         }
       }
+
       .showRight {
         width: 97%;
 
@@ -380,14 +414,17 @@
           pointer-events: auto;
         }
       }
+
       .left {
         .pic {
           width: 100%;
         }
       }
+
       .right {
         width: 0;
         opacity: 0;
+
         .content {
           width: 85%;
         }
@@ -400,38 +437,46 @@
     .mainShow_tab3,
     .mainShow_tab4 {
       padding-left: 190px;
+
       .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 {
           display: none;
         }
+
         .lHidding_right {
           width: 330px;
           opacity: 1;
           pointer-events: auto;
         }
+
         .open {
           opacity: 0;
           pointer-events: none;
         }
       }
+
       .left {
         transition: all 0.6s ease-in-out;
       }
+
       .right {
         width: 39%;
         transition: all 0.6s ease-in-out;
+
         .title {
           display: none;
         }
+
         .content {
           width: 92%;
           transition: all 0.6s ease-in-out;
         }
+
         .btn {
           opacity: 0;
           pointer-events: none;
@@ -444,8 +489,7 @@
         .lHidding_right {
           .imgBox {
             .pic {
-              background: url('../../../../../assets/img/A6_sangzang_tab1.png') no-repeat center
-                center;
+              background: url('../../../../../assets/img/A6_sangzang_tab1.png') no-repeat center center;
               background-size: 100% 100%;
             }
           }
@@ -462,12 +506,12 @@
 
     .mainShow_tab2 {
       padding-left: 140px;
+
       .lHidding {
         .lHidding_right {
           .imgBox {
             .pic {
-              background: url('../../../../../assets/img/A6_sangzang_tab2.png') no-repeat center
-                center;
+              background: url('../../../../../assets/img/A6_sangzang_tab2.png') no-repeat center center;
               background-size: 100% 100%;
             }
           }
@@ -476,6 +520,7 @@
 
       .left {
         width: 300px;
+
         .pic {
           right: 21%;
           top: 23%;
@@ -493,12 +538,15 @@
     .mainShow_tab4 {
       .lHidding {
         transform: translate(-88%, -50%);
+
         .lHidding_right {
           width: 330px;
         }
       }
+
       .left {
         width: 300px;
+
         .pic {
           right: 23%;
           top: 14%;
@@ -510,8 +558,10 @@
           background-size: cover;
         }
       }
+
       .right {
         width: 50%;
+
         .content {
           width: 75%;
         }
@@ -537,14 +587,15 @@
       left: 4%;
       cursor: pointer;
 
-      & > img {
+      &>img {
         height: 100%;
         object-fit: fill;
       }
     }
+
     .A6_tabBar {
       width: 50px;
-      height: 260px;
+      // height: 260px;
       display: flex;
       align-items: center;
       flex-direction: column;
@@ -560,7 +611,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background: url(../../../../../assets/img/btn_tab.png) no-repeat center center;
+        background-image: url('../../../../../assets/sgImg/Component.png');
         background-size: 100% 100%;
         width: 60px;
         height: 60px;
@@ -568,18 +619,17 @@
         text-align: center;
         line-height: 15px;
         letter-spacing: 1px;
-        font-size: 12px;
         font-weight: 500;
         color: #fbebbd;
         cursor: pointer;
       }
 
       .tab_active {
-        background: url(../../../../../assets/img/btn_tabAc.png) no-repeat center center;
-        background-size: 100% 100%;
+        background-image: url('../../../../../assets/sgImg/ComponentAc.png');
         color: rgba(166, 118, 67, 1);
       }
     }
+
     .A6_tabBar_hide {
       opacity: 0;
       pointer-events: none;
@@ -600,30 +650,35 @@
       padding: 0 20px;
       align-items: center;
       transition: all 0.3s ease-in-out;
+
       .geshi_left {
         width: 45%;
         height: 100%;
         display: flex;
         justify-content: flex-end;
         align-items: center;
+
         .pic {
           width: 80%;
           height: 95%;
           background-size: contain;
         }
       }
+
       .geshi_right {
         width: 55%;
         height: 100%;
         display: flex;
         flex-direction: column;
         gap: 20px;
+
         .top {
           width: 100%;
           height: 90px;
           display: flex;
           align-items: center;
           gap: 80px;
+
           .tab0,
           .tab1,
           .tab2 {
@@ -637,7 +692,7 @@
             cursor: pointer;
             position: relative;
 
-            & > img {
+            &>img {
               width: 60px;
               object-fit: cover;
             }
@@ -665,11 +720,13 @@
               width: 200%;
               font-weight: 700;
             }
+
             .txtAc {
               opacity: 0.4;
             }
           }
         }
+
         .content {
           width: 95%;
           height: 68%;
@@ -679,6 +736,7 @@
           font-weight: 400;
           color: rgba(69, 68, 55, 1);
           overflow: auto;
+
           &::-webkit-scrollbar {
             width: 0px;
             height: 0px;
@@ -686,6 +744,7 @@
         }
       }
     }
+
     .geshiHide {
       opacity: 0;
       pointer-events: none;
@@ -708,6 +767,7 @@
       padding: 6px 20px;
       align-items: center;
       gap: 10px;
+
       .mzwHotL {
         width: 37%;
         height: 100%;
@@ -715,6 +775,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
+
         .mPic {
           padding: 6px 10px;
           width: 90%;
@@ -723,6 +784,7 @@
           background-size: 100% 100%;
         }
       }
+
       .mzwHotR {
         padding-top: 10px;
         width: 60%;
@@ -730,6 +792,7 @@
         display: flex;
         flex-direction: column;
         gap: 10px;
+
         .mtitle,
         .mtext {
           font-size: 16px;
@@ -738,35 +801,41 @@
           font-weight: 400;
           color: rgba(255, 233, 182, 1);
         }
+
         .mtitle {
           padding: 20px 0;
           font-size: 20px;
           width: 100%;
           height: 50px;
         }
+
         .mtext {
           width: 100%;
           height: fit-content;
           max-height: 80%;
           color: rgba(255, 255, 255, 1);
           overflow: auto;
+
           &::-webkit-scrollbar {
             width: 0px;
             height: 0px;
           }
         }
       }
+
       .mzwclose {
         width: 70px;
         height: 50px;
         position: absolute;
         top: 14px;
         right: 63px;
-        & > img {
+
+        &>img {
           width: 100%;
           height: 100%;
           object-fit: contain;
         }
+
         cursor: pointer;
       }
     }
@@ -776,4 +845,4 @@
       pointer-events: auto;
     }
   }
-}
+}

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import styles from './index.module.scss'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
-
+import Zback from '@/components/Zback'
 
 function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
   const [currentTab, setCurrentTab] = useState('tab0')
@@ -26,15 +26,11 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
   useEffect(() => {
     if (selectedGeshi !== 0) {
       setIsShowTabBar(false)
-    }
-    else {
+    } else {
       setIsShowTabBar(true)
     }
-
   }, [selectedGeshi])
 
-
-
   const handleTabClick = (tab: string) => {
     if (tab === currentTab) {
       setCurrentTab('tab0')
@@ -47,12 +43,12 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
 
   return (
     <div className={styles.sang}>
-      <div className='back' onClick={() => setShowTab(0)}>
-        <img src={require('@/assets/img/btn_back.png')} alt='' />
-      </div>
+      <Zback clickFu={() => setShowTab(0)} />
+
       <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'>
@@ -60,12 +56,17 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
               <div className='imgBox'>
                 <div className='pic' ref={picRef} />
               </div>
-              <div className='txt' dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[0].from }} >
-              </div>
+              <div
+                className='txt'
+                dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[0].from }}
+              ></div>
               <div className='title'>{myData.sangzangLeftInfo2[0].name}</div>
               <div className='time'>{myData.sangzangLeftInfo2[0].txt}</div>
             </div>
-            <div className='detail_info2' onClick={() => setIsShowHidContentRight(!isShowHidContentRight)}>
+            <div
+              className='detail_info2'
+              onClick={() => setIsShowHidContentRight(!isShowHidContentRight)}
+            >
               <div className='title_info2'>{myData.sangzangStatic.leftInfoName}</div>
               <div className='txt_info2'>{myData.sangzangStatic.txt}</div>
             </div>
@@ -77,8 +78,10 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
                 <img src={require('@/assets/img/A6_sangzang_zoomin.png')} alt='' />
               </div>
             </div>
-            <div className='txt' dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[1].from }} >
-            </div>
+            <div
+              className='txt'
+              dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[1].from }}
+            ></div>
             <div className='title'>{myData.sangzangLeftInfo2[1].name}</div>
             <div className='time'>{myData.sangzangLeftInfo2[1].txt}</div>
           </div>
@@ -94,21 +97,35 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
           </div>
         </div>
         <div className='left'>
-          <div className='pic' style={{
-            background: `url(${require(`@/assets/img/A6_sangzang_left_${currentTab}.png`)}) no-repeat center/contain`
-          }} />
+          <div
+            className='pic'
+            style={{
+              background: `url(${require(`@/assets/img/A6_sangzang_left_${currentTab}.png`)}) no-repeat center/contain`
+            }}
+          />
           <div className='operate'>
-            <div className='beiwen1' onClick={() => setSelectedGeshi(1)}>程氏颂文</div>
-            <div className='beiwen2' onClick={() => setSelectedGeshi(2)}>程哲生卒</div>
-            <div className='beiwen3' onClick={() => setSelectedGeshi(3)}>先祖功绩</div>
+            <div className='beiwen1' onClick={() => setSelectedGeshi(1)}>
+              程氏颂文
+            </div>
+            <div className='beiwen2' onClick={() => setSelectedGeshi(2)}>
+              程哲生卒
+            </div>
+            <div className='beiwen3' onClick={() => setSelectedGeshi(3)}>
+              先祖功绩
+            </div>
           </div>
         </div>
         <div className='right'>
           <div className={`content`}>
-            <div className='title myFont'>{myData.sangzangStatic.rightInfoName}</div>
-            <div className='text' dangerouslySetInnerHTML={{ __html: myData.sangzangData[Number(currentTab.split('tab')[1])].txt }} />
-            <div className="btn" onClick={() => setIsShowHidContent(true)}>
-              <img src={require('@/assets/img/A6_sangzang_btn2.png')} alt="" />
+            <div className='title songFont'>{myData.sangzangStatic.rightInfoName}</div>
+            <div
+              className='text'
+              dangerouslySetInnerHTML={{
+                __html: myData.sangzangData[Number(currentTab.split('tab')[1])].txt
+              }}
+            />
+            <div className='btn songFont' onClick={() => setIsShowHidContent(true)}>
+              <img src={require('@/assets/img/A6_sangzang_btn2.png')} alt='' />
               传统造像碑文
             </div>
           </div>
@@ -116,7 +133,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
       </div>
       <div className={`A6_tabBar ${!isShowTabBar ? 'A6_tabBar_hide' : ''}`}>
         <div
-          className={`tab ${currentTab === 'tab1' ? 'tab_active' : ''}`}
+          className={`tab songFont ${currentTab === 'tab1' ? 'tab_active' : ''}`}
           onClick={() => handleTabClick('tab1')}
         >
           墓志
@@ -124,7 +141,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
           格式
         </div>
         <div
-          className={`tab ${currentTab === 'tab2' ? 'tab_active' : ''}`}
+          className={`tab songFont ${currentTab === 'tab2' ? 'tab_active' : ''}`}
           onClick={() => handleTabClick('tab2')}
         >
           攀附
@@ -132,7 +149,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
           之风
         </div>
         <div
-          className={`tab ${currentTab === 'tab3' ? 'tab_active' : ''}`}
+          className={`tab songFont ${currentTab === 'tab3' ? 'tab_active' : ''}`}
           onClick={() => handleTabClick('tab3')}
         >
           立碑
@@ -140,7 +157,7 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
           动机
         </div>
         <div
-          className={`tab ${currentTab === 'tab4' ? 'tab_active' : ''}`}
+          className={`tab songFont ${currentTab === 'tab4' ? 'tab_active' : ''}`}
           onClick={() => handleTabClick('tab4')}
         >
           刻写
@@ -154,53 +171,89 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
         <div className='back' onClick={() => setSelectedGeshi(0)}>
           <img src={require('@/assets/img/btn_back.png')} alt='' />
         </div>
-        <div className="geshi_left">
-          <div className="pic" style={{
-            background: `url(${require(`@/assets/img/A6_sangzang_geshi${selectedGeshi === 0 ? '1' : selectedGeshi}.png`)}) no-repeat center/contain`
-          }} />
+        <div className='geshi_left'>
+          <div
+            className='pic'
+            style={{
+              background: `url(${require(`@/assets/img/A6_sangzang_geshi${
+                selectedGeshi === 0 ? '1' : selectedGeshi
+              }.png`)}) no-repeat center/contain`
+            }}
+          />
         </div>
-        <div className="geshi_right">
-          <div className="top">
+        <div className='geshi_right'>
+          <div className='top'>
             {myData.mzgeshi.map((item, index) => (
-              <div key={item.key} className={`tab${index}`} onClick={(e) => {
-                e.stopPropagation()
-                setSelectedGeshi(item.key)
-              }}>
+              <div
+                key={item.key}
+                className={`tab${index}`}
+                onClick={e => {
+                  e.stopPropagation()
+                  setSelectedGeshi(item.key)
+                }}
+              >
                 <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 ${selectedGeshi === item.key ? 'tabNubAc' : ''}`}>
                   {item.sonTxt}
                 </div>
-                <div
-                  className={`txt ${selectedGeshi !== item.key ? 'txtAc' : ''}`}
-
-                >
+                <div className={`txt ${selectedGeshi !== item.key ? 'txtAc' : ''}`}>
                   {item.name}
                 </div>
               </div>
             ))}
-
           </div>
-          <div className="content" dangerouslySetInnerHTML={{ __html: selectedGeshi !== 0 ? myData.mzgeshi[selectedGeshi - 1].txt : '' }}></div>
+          <div
+            className='content'
+            dangerouslySetInnerHTML={{
+              __html: selectedGeshi !== 0 ? myData.mzgeshi[selectedGeshi - 1].txt : ''
+            }}
+          ></div>
         </div>
       </div>
 
       {/* 墓志文 */}
-      <div className={`mzwHot ${isShowMzwHot ? 'mzwHot_show' : ''}`} >
-        <div className="mzwHotL"><div className="mPic" style={{
-          background: `url(${require(`@/assets/img/A6_sangzang_${(currentTab !== 'tab1' && currentTab !== 'tab2') ? 'yp2' : currentTab}.png`)}) no-repeat center/contain`
-        }}></div></div>
-        <div className="mzwHotR">
-          <div className="mtitle">{myData.mzw[(currentTab !== 'tab1' && currentTab !== 'tab2') ? 0 : Number(currentTab.split('tab')[1])].title}</div>
-          <div className="mtext" dangerouslySetInnerHTML={{ __html: myData.mzw[(currentTab !== 'tab1' && currentTab !== 'tab2') ? 0 : Number(currentTab.split('tab')[1])].txt }}></div>
+      <div className={`mzwHot ${isShowMzwHot ? 'mzwHot_show' : ''}`}>
+        <div className='mzwHotL'>
+          <div
+            className='mPic'
+            style={{
+              background: `url(${require(`@/assets/img/A6_sangzang_${
+                currentTab !== 'tab1' && currentTab !== 'tab2' ? 'yp2' : currentTab
+              }.png`)}) no-repeat center/contain`
+            }}
+          ></div>
+        </div>
+        <div className='mzwHotR'>
+          <div className='mtitle'>
+            {
+              myData.mzw[
+                currentTab !== 'tab1' && currentTab !== 'tab2'
+                  ? 0
+                  : Number(currentTab.split('tab')[1])
+              ].title
+            }
+          </div>
+          <div
+            className='mtext'
+            dangerouslySetInnerHTML={{
+              __html:
+                myData.mzw[
+                  currentTab !== 'tab1' && currentTab !== 'tab2'
+                    ? 0
+                    : Number(currentTab.split('tab')[1])
+                ].txt
+            }}
+          ></div>
+        </div>
+        <div className='mzwclose' onClick={() => setIsShowMzwHot(false)}>
+          <img src={require('@/assets/img/closeWithTxt.png')} alt='' />
         </div>
-        <div className="mzwclose" onClick={() => setIsShowMzwHot(false)}><img src={require('@/assets/img/closeWithTxt.png')} alt="" /></div>
       </div>
-
-
     </div>
   )
 }

src/pages/Ztext/index.module.scss

@@ -0,0 +1,4 @@
+.AAAAA {
+  :global {
+  }
+}

src/pages/Ztext/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import styles from './index.module.scss'
+import SangzangHome from '../A6ybwx/Sangzang'
+function AAAAA() {
+  return (
+    <div className={styles.AAAAA}>
+      <SangzangHome setGotoTab={() => {}} />
+    </div>
+  )
+}
+
+const MemoAAAAA = React.memo(AAAAA)
+
+export default MemoAAAAA