gx

.prettierrc.js

@@ -1,11 +1,11 @@
 module.exports = {
-  printWidth: 100, // 一行的字符数，如果超过会进行换行
+  printWidth: 200, // 一行的字符数，如果超过会进行换行
   tabWidth: 2, // 一个tab代表几个空格数，默认就是2
   useTabs: false, // 是否启用tab取代空格符缩进，.editorconfig设置空格缩进，所以设置为false
   semi: false, // 行尾是否使用分号，默认为true
   singleQuote: true, // 字符串是否使用单引号
-  trailingComma: "none", // 对象或数组末尾是否添加逗号 none| es5| all
+  trailingComma: 'none', // 对象或数组末尾是否添加逗号 none| es5| all
   jsxSingleQuote: true, // 在jsx里是否使用单引号，你看着办
   bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
-  arrowParens: "avoid", // 箭头函数如果只有一个参数则省略括号
-};
+  arrowParens: 'avoid' // 箭头函数如果只有一个参数则省略括号
+}

src/assets/styles/base.css

@@ -6,6 +6,9 @@
   -webkit-tap-highlight-color: transparent;
   font-family: heiti;
 }
+* .imgFromTxt {
+  display: none !important;
+}
 video {
   object-fit: fill;
   width: 100%;

src/assets/styles/base.less

@@ -5,6 +5,9 @@
   word-wrap: break-word;
   -webkit-tap-highlight-color: transparent;
   font-family: heiti;
+  .imgFromTxt {
+    display: none !important;
+  }
 }
 
 video {
@@ -27,8 +30,16 @@ html {
 
 body {
   position: relative;
-  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
-    'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
+  font:
+    1em/1.4 'Microsoft Yahei',
+    'PingFang SC',
+    'Avenir',
+    'Segoe UI',
+    'Hiragino Sans GB',
+    'STHeiti',
+    'Microsoft Sans Serif',
+    'WenQuanYi Micro Hei',
+    sans-serif;
   font-size: var(--fontNum);
   height: 100%;
   color: black;
@@ -47,8 +58,6 @@ body #wjwjScene {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-
-
 }
 
 body #panoramic-root {
@@ -62,8 +71,6 @@ body #panoramic-root {
   left: 0;
 }
 
-
-
 body #A7Back {
   width: 136px;
   height: 67px;
@@ -84,7 +91,6 @@ body #A7Back {
   background-color: rgba(0, 0, 0, 0.9) !important;
 }
 .ant-image-preview-img-wrapper {
-
   .previewImage {
     width: 100%;
     height: 100%;
@@ -104,7 +110,6 @@ body #A7Back {
         max-width: 100%;
         max-height: 100%;
         object-fit: contain;
-
       }
     }
     .ImgFromTxt {
@@ -119,10 +124,6 @@ body #A7Back {
   }
 }
 
-
-
-
-
 #root {
   overflow: hidden;
   margin: auto;
@@ -223,12 +224,14 @@ textarea {
 
 // 默认字体
 .sizeNo {
-  font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti',
+  font-family:
+    'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti',
     'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
 }
 
 .adm-auto-center-content {
-  font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti',
+  font-family:
+    'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti',
     'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
   font-size: 16px;
   letter-spacing: 3px;
@@ -249,7 +252,6 @@ textarea {
   color: #f1e39e;
 }
 
-
 @keyframes yunShan {
   0% {
     opacity: 1;
@@ -264,7 +266,6 @@ textarea {
   }
 }
 
-
 // 热点页面打开透明的变化
 #HotOpCss {
   animation: HotOpCss 0.5s linear forwards;
@@ -293,7 +294,6 @@ textarea {
 // antd mo 查看图片
 
 @media screen and (orientation: portrait) {
-
   /* 竖屏 */
   .adm-image-viewer-image-wrapper img {
     transform: rotate(90deg) !important;
@@ -327,7 +327,6 @@ textarea {
     }
   }
 
-
   .ant-image-preview-img-wrapper {
     .previewImage {
       position: relative;
@@ -347,8 +346,6 @@ textarea {
     }
   }
 
-
-
   #root .ant-tooltip {
     transform: rotate(0) !important;
     width: 410px !important;
@@ -360,11 +357,7 @@ textarea {
     }
   }
 
-
-
-
   #root .ant-tooltip .tooltip_MT {
-
     .top {
       position: relative;
       width: 100%;
@@ -420,7 +413,6 @@ textarea {
       object-fit: contain;
     }
   }
-
 }
 
 // 嵌套unity
@@ -532,10 +524,8 @@ textarea {
     .ant-tooltip-arrow {
       top: 2px !important;
     }
-
   }
 
-
   .ant-tooltip-inner {
     // background: url(../img/tooltipBg.png) no-repeat;
     // background-size: 100% 100%;
@@ -655,7 +645,6 @@ textarea {
     transform: translateX(0);
   }
 
-
   25% {
     transform: translateX(-20px);
   }
@@ -668,7 +657,6 @@ textarea {
     transform: translateX(20px);
   }
 
-
   100% {
     transform: translateX(0);
   }
@@ -862,4 +850,4 @@ textarea {
     /* 10帧：-(10-1)×200 = -1800px */
     transform: translate(-5845px, 0);
   }
-}
+}

src/components/MenuSider/index.tsx

@@ -28,7 +28,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
         className={classNames(myLangue === 'EN' ? styles.menuEn : '', styles.menu)}
         onClick={() => setIsShowMenu(true)}
       >
-        <img src={require('@/assets/img/btn_menu.png')} alt='' />
+        <img src={require(`@/assets/img/btn_menu${myLangue === 'EN' ? '_E' : ''}.png`)} alt='' />
       </div>
       <div
         className={classNames(
@@ -90,9 +90,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
             <div className='icon'>
               <div className='paint' onClick={() => byzhClick(activeTab)}>
                 <img src={require('@/assets/img/icon_paint.png')} alt='' />
-                <div className='txt'>
-                  {myLangue === 'EN' ? 'Smart Stone Carving' : '碑影智绘'}
-                </div>
+                <div className='txt'>{myLangue === 'EN' ? 'Smart Stone Carving' : '碑影智绘'}</div>
               </div>
               <div className='knowledge'>
                 <img src={require('@/assets/img/icon_knowledge.png')} alt='' />

src/pages/A0base/index.module.scss

@@ -9,6 +9,27 @@
   will-change: initial !important;
 
   :global {
+    .mianze {
+      position: absolute;
+      top: 3%;
+      right: 2%;
+      width: 50px;
+      height: 45px;
+      display: flex;
+      flex-direction: column;
+      cursor: pointer;
+      align-items: center;
+      z-index: 1;
+      & > img {
+        width: 25px;
+        object-fit: contain;
+      }
+      & > span {
+        font-size: 9px;
+        color: rgba(177, 150, 123, 1);
+        white-space: nowrap;
+      }
+    }
     .A0baseContainner {
       width: 58%;
       height: 60%;
@@ -62,6 +83,14 @@
           opacity: 0.7;
           text-align: justify;
           font-weight: 400;
+          overflow: auto;
+          &::-webkit-scrollbar {
+            width: 0px;
+          }
+        }
+        .textMianze {
+          width: 122%;
+          padding-top: 10px;
         }
 
         .btn {
@@ -110,6 +139,8 @@
         justify-content: center;
         flex-direction: column;
         gap: 20px;
+        position: relative;
+        z-index: 1;
 
         .base {
           transition: all 0.3s ease-in-out;
@@ -298,6 +329,10 @@
             width: 0px;
           }
         }
+        .textMianze {
+          width: 125%;
+          padding-top: 10px;
+        }
         .btn {
           width: 160px;
           font-size: 16px;

src/pages/A0base/index.tsx

@@ -20,6 +20,7 @@ function A0base() {
   const { myData, myLangue, videos } = useSelector((state: RootState) => state.A0Layout)
 
   const [currentBase, setCurrentBase] = useState(0)
+  const [isShowMianze, setIsShowMianze] = useState(false)
 
   const onClickBase = (index: number) => {
     setCurrentBase(index)
@@ -60,42 +61,66 @@ function A0base() {
     <div className={classNames(myLangue === 'ZH' ? '' : styles.A0baseEn, styles.A0base)}>
       <Zloding isShow={loding} bacNum={1} />
 
+      <div
+        className='mianze'
+        onClick={() => {
+          setIsShowMianze(true)
+          onClickBase(3)
+        }}
+      >
+        <img src={require('@/assets/img/mianze.png')} alt='' />
+        <span>{myLangue === 'ZH' ? '免责声明' : 'Disclaimer'}</span>
+      </div>
+
       <div className='A0baseContainner' id='opacityCss'>
         {myData.baseInfo.map((item, index) => (
-          <div className={`content ${currentBase === index ? 'contentShow' : 'contentHide'}`} key={index}>
-            <div className={`title songFontc`}>
-              {item.title}
-            </div>
+          <div
+            className={`content ${currentBase === index ? 'contentShow' : 'contentHide'}`}
+            key={index}
+          >
+            <div className={`title songFontc`}>{item.title}</div>
             <div className={`text`}>{item.text}</div>
-            <div
-              className='btn songFontc'
-              id='opacityChange'
-              onClick={e => goto(e, item.path)}
-            >
+            <div className='btn songFontc' id='opacityChange' onClick={e => goto(e, item.path)}>
               {myLangue === 'ZH' ? '进入单元' : 'View Detail'}
             </div>
           </div>
         ))}
-        <div className='baseContent'>
-          <div
-            className={`base songFontc ${currentBase === 0 ? 'baseAc' : ''}`}
-            onClick={() => onClickBase(0)}
-          >
-            {myData.baseInfo[0].title}
-          </div>
-          <div
-            className={`base songFontc ${currentBase === 1 ? 'baseAc' : ''}`}
-            onClick={() => onClickBase(1)}
-          >
-            {myData.baseInfo[1].title}
-          </div>
+        <div className={`content ${currentBase === 3 ? 'contentShow' : 'contentHide'}`}>
+          <div className={`title songFontc`}>{myLangue === 'ZH' ? '免责声明' : 'Disclaimer'}</div>
+          <div className={`text textMianze`}>{myData.baseMianze}</div>
           <div
-            className={`base songFontc ${currentBase === 2 ? 'baseAc' : ''}`}
-            onClick={() => onClickBase(2)}
+            className='btn songFontc'
+            id='opacityChange'
+            onClick={() => {
+              setIsShowMianze(false)
+              onClickBase(0)
+            }}
           >
-            {myData.baseInfo[2].title}
+            {myLangue === 'ZH' ? '返回目录' : 'back'}
           </div>
         </div>
+        {!isShowMianze && (
+          <div className='baseContent'>
+            <div
+              className={`base songFontc ${currentBase === 0 ? 'baseAc' : ''}`}
+              onClick={() => onClickBase(0)}
+            >
+              {myData.baseInfo[0].title}
+            </div>
+            <div
+              className={`base songFontc ${currentBase === 1 ? 'baseAc' : ''}`}
+              onClick={() => onClickBase(1)}
+            >
+              {myData.baseInfo[1].title}
+            </div>
+            <div
+              className={`base songFontc ${currentBase === 2 ? 'baseAc' : ''}`}
+              onClick={() => onClickBase(2)}
+            >
+              {myData.baseInfo[2].title}
+            </div>
+          </div>
+        )}
       </div>
 
       {/* 互动 */}
@@ -152,7 +177,7 @@ function A0base() {
             muted={false}
             webkit-playsinline='true'
             x5-video-player-type='h5'
-          // controls={true}
+            // controls={true}
           >
             <source
               type='video/mp4'

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

@@ -43,18 +43,6 @@
         font-weight: bold;
         white-space: nowrap;
         width: 40px;
-
-        &::after {
-          content: '';
-          width: 28px;
-          height: 4px;
-          position: absolute;
-          z-index: -1;
-          top: 50%;
-          left: 50%;
-          transform: translate(-57%, 147%);
-          background-color: rgb(146, 117, 102);
-        }
       }
 
       .content {
@@ -79,11 +67,6 @@
       .label {
         width: 84px;
         text-align: left;
-        &::after {
-          width: 31%;
-          left: 0;
-          transform: translate(9%, 115%);
-        }
       }
 
       .content {
@@ -92,19 +75,5 @@
         font-size: 11px;
       }
     }
-    .info:nth-child(4) {
-      .label {
-        &::after {
-          width: 62%;
-        }
-      }
-    }
-    .info:nth-child(6) {
-      .label {
-        &::after {
-          width: 79%;
-        }
-      }
-    }
   }
 }

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

@@ -39,10 +39,23 @@
           font-size: 10px;
           line-height: 50px;
           color: #fff;
-          text-shadow: 0px 0px 8px rgb(169 51 0);
+          text-shadow: 0px 0px 8px rgb(169, 51, 0);
 
           position: absolute;
           align-self: flex-start;
+          &::after {
+            font-family: 'song';
+            content: '碑额';
+            height: 40px;
+            width: 40px;
+            font-size: 18px;
+            line-height: 50px;
+            position: absolute;
+            left: 38px;
+            top: 5px;
+            z-index: -1;
+            text-shadow: 0px 0px 8px rgb(169, 51, 0);
+          }
 
           & > img {
             width: 100%;
@@ -445,6 +458,19 @@
             transform: translate(-36%, -56%);
             font-size: 13px;
           }
+          &::after {
+            font-family: 'song';
+            content: 'Stele Inscription';
+            height: 60px;
+            width: 185px;
+            font-size: 13px;
+            line-height: 50px;
+            position: absolute;
+            left: 35px;
+            top: 3px;
+            z-index: -1;
+            text-shadow: 0px 0px 8px rgb(169, 51, 0);
+          }
         }
 
         .tab0,

src/pages/A2yblm/index.module.scss

@@ -139,7 +139,7 @@
 
       .content {
         font-size: 16px;
-        line-height: 35px;
+        line-height: 30px;
         font-weight: 400;
         text-align: justify;
         padding-top: 40px;

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

@@ -6,7 +6,7 @@
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 3;
-  background-image: url('../../../assets/img/A6_zaoxiang_bg.png');
+  background-image: url('../../../assets/img/A6_zaoxiang_bg.jpg');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 100% 100%;
@@ -76,6 +76,35 @@
       }
     }
 
+    .dotLabel {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 20px;
+      height: 90px;
+      background-image: url('../../../assets/img/A6_zaoxiang_name_bg.png');
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      color: rgba(254, 232, 172, 1);
+      text-shadow: 0px 0px 4px rgba(124, 75, 54, 1);
+      font-size: 12px;
+      text-align: center;
+      line-height: 18px;
+      padding-top: 23px;
+    }
+
+    .jf {
+      transform: translate(-254%, -13%);
+    }
+
+    .tx {
+      left: auto;
+      right: 2%;
+      top: 39%;
+    }
+
     .dot {
       position: absolute;
       left: 50%;
@@ -96,22 +125,22 @@
 
     .ft {
       cursor: pointer;
-      transform: translate(-55%, 28%);
+      transform: translate(393%, -8%);
     }
 
     .fd {
       cursor: pointer;
-      transform: translate(145%, 151%);
+      transform: translate(-45%, 78%);
     }
 
     .yx {
       cursor: pointer;
-      transform: translate(379%, 49%);
+      transform: translate(32%, 142%);
     }
 
     .gy {
       cursor: pointer;
-      transform: translate(404%, -121%);
+      transform: translate(349%, 110%);
     }
   }
 }
@@ -131,6 +160,41 @@
         object-fit: contain;
       }
     }
+    .dotLabel {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(-90deg);
+      width: 20px;
+      height: 90px;
+      background-image: url('../../../assets/img/A6_zaoxiang_name_bg.png');
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      color: rgba(254, 232, 172, 1);
+      text-shadow: 0px 0px 4px rgba(124, 75, 54, 1);
+      font-size: 12px;
+      text-align: center;
+      line-height: 21px;
+      padding-top: 13px;
+      font-weight: 500;
+    }
+
+    .jf {
+      transform: translate(-185%, -4%) rotate(-90deg);
+      writing-mode: vertical-lr;
+      line-height: 22px;
+      padding-top: 0px;
+    }
+
+    .tx {
+      left: auto;
+      right: 5%;
+      top: 43%;
+      writing-mode: vertical-lr;
+      line-height: 22px;
+      padding-top: 0px;
+    }
     .zaoxiang_text {
       position: absolute;
       top: 38%;

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

@@ -18,6 +18,7 @@
       position: relative;
       top: 20%;
       .name {
+        opacity: 0;
         text-align: right;
         height: 10px;
         width: 100%;
@@ -31,6 +32,7 @@
         display: flex;
         align-items: center;
         .line {
+          opacity: 0;
           width: 100%;
           height: 0px;
           border-top: 1px dashed rgba(255, 233, 182, 1);

src/pages/A6ybwx/A6_2_zxzgh/index.tsx

@@ -9,7 +9,6 @@ import Bq from './components/Bq'
 import Bz from './components/Bz'
 import Zback from '@/components/Zback'
 
-
 export type showLineType = {
   index: number
   isShow: boolean
@@ -48,13 +47,18 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
     twoline?: boolean
   }) => {
     return (
-      <div className={`${styles.label} ${myLangue === 'EN' ? styles.labelEn : ''}`} style={{ inset: inset }}>
+      <div
+        className={`${styles.label} ${myLangue === 'EN' ? styles.labelEn : ''}`}
+        style={{ inset: inset }}
+      >
         {direct === 'left' ? (
           <div className='arrowL' style={{ width: width + 'px' }}>
             <div className='dot'></div>
           </div>
         ) : null}
-        <div className='btn' style={{ lineHeight: (myLangue === 'EN' && twoline) ? '7px' : '14px' }}>{name}</div>
+        <div className='btn' style={{ lineHeight: myLangue === 'EN' && twoline ? '7px' : '14px' }}>
+          {name}
+        </div>
         {direct === 'right' ? (
           <div className='arrowR' style={{ width: width + 'px' }}>
             <div className='dot'></div>
@@ -95,7 +99,8 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
         return
       }
       // 依次排列，如果不需要就是[0,100,200,300,400]
-      const scrollPosition = [0, 100, 200, 300, 400][selectedTime] + sinicize1Ref.current.offsetWidth
+      const scrollPosition =
+        [0, 100, 200, 300, 400][selectedTime] + sinicize1Ref.current.offsetWidth
       console.log(123, scrollPosition)
       originRef.current.scrollLeft = scrollPosition
       // setTimeout(() => {
@@ -140,8 +145,8 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
         id='A7Sinicize'
         className={styles.Sinicize}
         onWheel={handleWheel}
-      // onTouchMove={handleOriTouchMove}
-      // onTouchStart={handleTouchStart}
+        // onTouchMove={handleOriTouchMove}
+        // onTouchStart={handleTouchStart}
       >
         <Zback
           clickFu={() => {
@@ -149,37 +154,49 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
           }}
         />
         <div className='SinicizeScroll' ref={originRef}>
-          <div ref={sinicize1Ref} className={`${styles.Sinicize1} ${myLangue === 'EN' ? styles.Sinicize1EN : ''}`}>
-
+          <div
+            ref={sinicize1Ref}
+            className={`${styles.Sinicize1} ${myLangue === 'EN' ? styles.Sinicize1EN : ''}`}
+          >
             <div className='title'>
-              <img src={require(`@/assets/img/A6_sinicize_title${myLangue === 'EN' ? '_E' : ''}.png`)} draggable='false' alt='' />
+              <img
+                src={require(`@/assets/img/A6_sinicize_title${myLangue === 'EN' ? '_E' : ''}.png`)}
+                draggable='false'
+                alt=''
+              />
             </div>
             <div className='S2text'>
               <div className='line1'>
                 <img src={require('@/assets/img/A6_sinicize_line2.png')} draggable='false' alt='' />
               </div>
-              <div
-                className='t2'
-                onWheel={(e) => e.stopPropagation()}
-              >
+              <div className='t2' onWheel={e => e.stopPropagation()}>
                 {myData.sinicizeDataStatic.desc}
               </div>
             </div>
             {currentTab === 0 && (
               <div className={`zhufo ${currentTab === 0 ? 'active' : ''}`}>
                 <img src={require('@/assets/img/A6_sinicize_zhufo.png')} draggable='false' alt='' />{' '}
-                <div className='name songFont'>{myLangue === 'EN' ? 'the main Buddha figure' : '主尊佛像'}</div>
+                <div className='name songFont'>
+                  {myLangue === 'EN' ? 'the main Buddha figure' : '主尊佛像'}
+                </div>
               </div>
             )}
             {currentTab === 1 && (
               <div className={`pusha ${currentTab === 1 ? 'active' : ''}`}>
                 <img src={require('@/assets/img/A6_sinicize_pusha.png')} draggable='false' alt='' />
-                <div className='name songFont'>{myLangue === 'EN' ? 'bodhisattvas' : '胁侍菩萨'}</div>
+                <div className='name songFont'>
+                  {myLangue === 'EN' ? 'bodhisattvas' : '胁侍菩萨'}
+                </div>
               </div>
             )}
             {currentTab === 0 && (
               <>
-                <Label width={70} inset={'53px auto auto 340px'} name={myLangue === 'EN' ? 'Meat Bun' : '肉髻'} direct={'right'} />
+                <Label
+                  width={70}
+                  inset={'53px auto auto 340px'}
+                  name={myLangue === 'EN' ? 'Meat Bun' : '肉髻'}
+                  direct={'right'}
+                />
                 <Label
                   width={70}
                   inset={'176px auto auto 345px'}
@@ -187,20 +204,68 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                   direct={'right'}
                   twoline={true}
                 />
-                <Label width={42} inset={'300px auto auto 306px'} name={myLangue === 'EN' ? 'hem' : '衣摆'} direct={'right'} />
-                <Label width={40} inset={'205px auto auto 547px'} name={myLangue === 'EN' ? 'Buddhist robe' : '佛衣'} direct={'left'} twoline={true} />
-                <Label width={40} inset={'70px auto auto 532px'} name={myLangue === 'EN' ? 'halo' : '头光'} direct={'left'} />
-                <Label width={36} inset={'122px auto auto 550px'} name={myLangue === 'EN' ? 'radiance' : '身光'} direct={'left'} />
+                <Label
+                  width={42}
+                  inset={'300px auto auto 306px'}
+                  name={myLangue === 'EN' ? 'hem' : '衣摆'}
+                  direct={'right'}
+                />
+                <Label
+                  width={40}
+                  inset={'205px auto auto 547px'}
+                  name={myLangue === 'EN' ? 'Buddhist robe' : '佛衣'}
+                  direct={'left'}
+                  twoline={true}
+                />
+                <Label
+                  width={40}
+                  inset={'70px auto auto 532px'}
+                  name={myLangue === 'EN' ? 'halo' : '头光'}
+                  direct={'left'}
+                />
+                <Label
+                  width={36}
+                  inset={'122px auto auto 550px'}
+                  name={myLangue === 'EN' ? 'radiance' : '身光'}
+                  direct={'left'}
+                />
               </>
             )}
 
             {currentTab === 1 && (
               <>
-                <Label width={51} inset={'83px auto auto 360px'} name={myLangue === 'EN' ? 'halo' : '头光'} direct={'right'} />
-                <Label width={51} inset={'181px auto auto 339px'} name={myLangue === 'EN' ? 'Drape' : '披帛'} direct={'right'} />
-                <Label width={50} inset={'272px auto auto 345px'} name={myLangue === 'EN' ? 'Celestial Garment' : '天衣'} direct={'right'} twoline={true} />
-                <Label width={40} inset={'93px auto auto 522px'} name={myLangue === 'EN' ? 'Crown' : '头冠'} direct={'left'} />
-                <Label width={36} inset={'129px auto auto 530px'} name={myLangue === 'EN' ? 'Sacred Brocade' : '宝缯'} direct={'left'} twoline={true} />
+                <Label
+                  width={51}
+                  inset={'83px auto auto 360px'}
+                  name={myLangue === 'EN' ? 'halo' : '头光'}
+                  direct={'right'}
+                />
+                <Label
+                  width={51}
+                  inset={'181px auto auto 339px'}
+                  name={myLangue === 'EN' ? 'Drape' : '披帛'}
+                  direct={'right'}
+                />
+                <Label
+                  width={50}
+                  inset={'272px auto auto 345px'}
+                  name={myLangue === 'EN' ? 'Celestial Garment' : '天衣'}
+                  direct={'right'}
+                  twoline={true}
+                />
+                <Label
+                  width={40}
+                  inset={'93px auto auto 522px'}
+                  name={myLangue === 'EN' ? 'Crown' : '头冠'}
+                  direct={'left'}
+                />
+                <Label
+                  width={36}
+                  inset={'129px auto auto 530px'}
+                  name={myLangue === 'EN' ? 'Sacred Brocade' : '宝缯'}
+                  direct={'left'}
+                  twoline={true}
+                />
               </>
             )}
 
@@ -208,19 +273,29 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
               className={`songFont sinicizeBtn1 ${currentTab === 0 ? 'active' : ''}`}
               onClick={() => setCurrentTab(0)}
             >
-              {myLangue === 'EN' ? 'the main Buddha figure' : <>
-                主尊
-                <br />
-                佛像</>}
+              {myLangue === 'EN' ? (
+                'the main Buddha figure'
+              ) : (
+                <>
+                  主尊
+                  <br />
+                  佛像
+                </>
+              )}
             </div>
             <div
               className={`songFont sinicizeBtn2 ${currentTab === 1 ? 'active' : ''}`}
               onClick={() => setCurrentTab(1)}
             >
-              {myLangue === 'EN' ? 'bodhisattvas' : <>胁侍
-                <br />
-                菩萨</>}
-
+              {myLangue === 'EN' ? (
+                'bodhisattvas'
+              ) : (
+                <>
+                  胁侍
+                  <br />
+                  菩萨
+                </>
+              )}
             </div>
           </div>
 
@@ -231,7 +306,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                 <div
                   className='year'
                   style={{ backgroundImage: `url(${myData.sinicizeData[0].bgPath})` }}
-                  onClick={(e) => handleYearItemClick(e, 0)}
+                  onClick={e => handleYearItemClick(e, 0)}
                 >
                   <div className='yearContainner'>
                     <div className='txt songFont'>{myData.sinicizeData[0].time}</div>
@@ -252,7 +327,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                 <div
                   className='year'
                   style={{ backgroundImage: `url(${myData.sinicizeData[1].bgPath})` }}
-                  onClick={(e) => handleYearItemClick(e, 1)}
+                  onClick={e => handleYearItemClick(e, 1)}
                 >
                   <div className='yearContainner'>
                     <div className='txt songFont'>{myData.sinicizeData[1].time}</div>
@@ -273,7 +348,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                 <div
                   className='year'
                   style={{ backgroundImage: `url(${myData.sinicizeData[2].bgPath})` }}
-                  onClick={(e) => handleYearItemClick(e, 2)}
+                  onClick={e => handleYearItemClick(e, 2)}
                 >
                   <div className='yearContainner'>
                     <div className='txt songFont'>{myData.sinicizeData[2].time}</div>
@@ -294,7 +369,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                 <div
                   className='year'
                   style={{ backgroundImage: `url(${myData.sinicizeData[3].bgPath})` }}
-                  onClick={(e) => handleYearItemClick(e, 3)}
+                  onClick={e => handleYearItemClick(e, 3)}
                 >
                   <div className='yearContainner'>
                     <div className='txt songFont'>{myData.sinicizeData[3].time}</div>
@@ -315,7 +390,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                 <div
                   className='year'
                   style={{ backgroundImage: `url(${myData.sinicizeData[4].bgPath})` }}
-                  onClick={(e) => handleYearItemClick(e, 4)}
+                  onClick={e => handleYearItemClick(e, 4)}
                 >
                   <div className='yearContainner'>
                     <div className='txt songFont'>{myData.sinicizeData[4].time}</div>
@@ -332,16 +407,18 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
               </div>
 
               {/* 结语 */}
-              <div className='yearItem'>
-                <div className='year year-zongjie'
-                >
-                  <div className='yearContainner' onClick={(e) => handleYearItemClick(e, 5)}>
+              <div className='yearItem' style={{ display: 'none' }}>
+                <div className='year year-zongjie'>
+                  <div className='yearContainner' onClick={e => handleYearItemClick(e, 5)}>
                     <div className='txt songFont'>{myData.sinicizeDataStatic.zongjie.title}</div>
                     <div className='front' id='jieyu'></div>
                   </div>
                 </div>
-                <div id='jieyuDetail' className={`jieyuDetail ${selectedTime === 5 ? '' : 'jieyuDetailHide'}`}>
-                  <div className="jieyuDetailtxt">{myData.sinicizeDataStatic.zongjie.txt}</div>
+                <div
+                  id='jieyuDetail'
+                  className={`jieyuDetail ${selectedTime === 5 ? '' : 'jieyuDetailHide'}`}
+                >
+                  <div className='jieyuDetailtxt'>{myData.sinicizeDataStatic.zongjie.txt}</div>
                 </div>
               </div>
             </div>

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

@@ -25,14 +25,15 @@
 }
 
 .tip {
-  width: 233px;
+  width: 253px;
   height: 40px;
   position: absolute;
-  bottom: 100px;
+  bottom: 139px;
   left: 20px;
   display: flex;
   flex-direction: column;
   gap: 2px;
+  pointer-events: none;
   :global {
     .t1,
     .t2 {

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

@@ -1,6 +1,17 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import { NodeTurnRight, NodeRight, NodeBottom, RightLineDash, NodeActive, NodeTurnBottomRight, NodeRightDash, NodeBottomDash, NodeTurnBottomDashRight } from '../Utils'
+import {
+  NodeTurnRight,
+  NodeRight,
+  NodeBottom,
+  RightLineDash,
+  RightLine,
+  NodeActive,
+  NodeTurnBottomRight,
+  NodeRightDash,
+  NodeBottomDash,
+  NodeTurnBottomDashRight
+} from '../Utils'
 import { isMobiileFu } from '@/utils/history'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
@@ -31,25 +42,25 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
 
   // graph
   const startRef = useRef({
-    startX: 0,    // 触摸起始点 X 坐标
-    startY: 0,    // 触摸起始点 Y 坐标
+    startX: 0, // 触摸起始点 X 坐标
+    startY: 0, // 触摸起始点 Y 坐标
     startOffsetX: 0, // 元素起始偏移 X
-    startOffsetY: 0,  // 元素起始偏移 Y
+    startOffsetY: 0, // 元素起始偏移 Y
     initialDistance: 0, // 两指缩放的初始距离
     initialZoom: 1, // 初始缩放比例
     midX: 0, // 两指缩放的中点 X 坐标
     midY: 0 // 两指缩放的中点 Y 坐标
-  });
+  })
 
-  const graphRef = useRef<HTMLDivElement>(null);
+  const graphRef = useRef<HTMLDivElement>(null)
 
   // miniMap
   const miniMapStartRef = useRef({
-    startX: 0,    // 触摸起始点 X 坐标
-    startY: 0,    // 触摸起始点 Y 坐标
+    startX: 0, // 触摸起始点 X 坐标
+    startY: 0, // 触摸起始点 Y 坐标
     startOffsetX: 0, // 元素起始偏移 X
-    startOffsetY: 0  // 元素起始偏移 Y
-  });
+    startOffsetY: 0 // 元素起始偏移 Y
+  })
 
   // 鼠标位置
   const mousePositionRef = useRef({ x: 0, y: 0 })
@@ -60,29 +71,27 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
     if (!miniMapViewport) return
 
     const handleTouchStart = (e: TouchEvent) => {
-      const touch = e.touches[0];
-      miniMapStartRef.current.startX = touch.clientX;
-      miniMapStartRef.current.startY = touch.clientY;
-      miniMapStartRef.current.startOffsetX = offsetX;
-      miniMapStartRef.current.startOffsetY = offsetY;
-
+      const touch = e.touches[0]
+      miniMapStartRef.current.startX = touch.clientX
+      miniMapStartRef.current.startY = touch.clientY
+      miniMapStartRef.current.startOffsetX = offsetX
+      miniMapStartRef.current.startOffsetY = offsetY
     }
     const handleTouchMove = (e: TouchEvent) => {
-      const touch = e.touches[0];
-      if (!touch) return;
-      const dx = touch.clientY - miniMapStartRef.current.startY;
-      const dy = -touch.clientX + miniMapStartRef.current.startX;
+      const touch = e.touches[0]
+      if (!touch) return
+      const dx = touch.clientY - miniMapStartRef.current.startY
+      const dy = -touch.clientX + miniMapStartRef.current.startX
       setOffsetX(prev => {
-        const newX = miniMapStartRef.current.startOffsetX - dx * 18;
-        return Math.min(0, Math.max(-1640, newX));
+        const newX = miniMapStartRef.current.startOffsetX - dx * 18
+        return Math.min(0, Math.max(-1640, newX))
         // return newX
-      });
+      })
       setOffsetY(prev => {
-        const newY = miniMapStartRef.current.startOffsetY - dy * 7;
-        return Math.min(0, Math.max(-350, newY));
+        const newY = miniMapStartRef.current.startOffsetY - dy * 7
+        return Math.min(0, Math.max(-350, newY))
         // return newY
-      });
-
+      })
     }
     miniMapViewport.addEventListener('touchstart', handleTouchStart)
     miniMapViewport.addEventListener('touchmove', handleTouchMove)
@@ -102,10 +111,10 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
       e.stopPropagation()
       if (e.target !== miniMapViewport) return
       setIsDraggingMiniMap(true)
-      miniMapStartRef.current.startX = e.clientX;
-      miniMapStartRef.current.startY = e.clientY;
-      miniMapStartRef.current.startOffsetX = offsetX;
-      miniMapStartRef.current.startOffsetY = offsetY;
+      miniMapStartRef.current.startX = e.clientX
+      miniMapStartRef.current.startY = e.clientY
+      miniMapStartRef.current.startOffsetX = offsetX
+      miniMapStartRef.current.startOffsetY = offsetY
     }
     const handleMouseMove = (e: MouseEvent) => {
       e.stopPropagation()
@@ -113,14 +122,14 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
       const dy = -e.clientY + miniMapStartRef.current.startY
       if (!isDraggingMiniMap) return
       setOffsetX(prev => {
-        const newX = miniMapStartRef.current.startOffsetX + dx * 5;
-        return Math.min(0, Math.max(-1640, newX));
-      });
+        const newX = miniMapStartRef.current.startOffsetX + dx * 5
+        return Math.min(0, Math.max(-1640, newX))
+      })
       setOffsetY(prev => {
-        const newY = miniMapStartRef.current.startOffsetY + dy * 7;
-        return Math.min(0, Math.max(-350, newY));
+        const newY = miniMapStartRef.current.startOffsetY + dy * 7
+        return Math.min(0, Math.max(-350, newY))
         // return newY
-      });
+      })
     }
     const handleMouseUp = (e: MouseEvent) => {
       e.stopPropagation()
@@ -138,15 +147,14 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
     }
   }, [contentSize.height, contentSize.width, isDraggingMiniMap, offsetX, offsetY])
 
-
   // 主视角地图的Pc
   const handleMouseDown = (e: React.MouseEvent) => {
     if (e.target === e.currentTarget) {
-      setIsDragging(true);
-      startRef.current.startX = e.clientX;
-      startRef.current.startY = e.clientY;
-      startRef.current.startOffsetX = offsetX;
-      startRef.current.startOffsetY = offsetY;
+      setIsDragging(true)
+      startRef.current.startX = e.clientX
+      startRef.current.startY = e.clientY
+      startRef.current.startOffsetX = offsetX
+      startRef.current.startOffsetY = offsetY
     }
   }
   const handleMouseUp = () => setIsDragging(false)
@@ -154,8 +162,8 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
   const handleMouseMove = (e: React.MouseEvent) => {
     console.log('move')
     // 记录鼠标位置
-    const x = (e.clientX / 2.28 - offsetX)
-    const y = (e.clientY / 2.28 - offsetY)
+    const x = e.clientX / 2.28 - offsetX
+    const y = e.clientY / 2.28 - offsetY
     mousePositionRef.current = { x, y }
     // setZoomOrigin({ x, y })
 
@@ -167,91 +175,94 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
       const dx = e.clientX - startRef.current.startX
       const dy = e.clientY - startRef.current.startY
       setOffsetX(prev => {
-        const newX = startRef.current.startOffsetX + dx;
-        return Math.min(0, Math.max(-1640, newX));
+        const newX = startRef.current.startOffsetX + dx
+        return Math.min(0, Math.max(-1640, newX))
         // return newX
-      });
+      })
       setOffsetY(prev => {
-        const newY = startRef.current.startOffsetY + dy;
-        return Math.min(0, Math.max(-350, newY));
+        const newY = startRef.current.startOffsetY + dy
+        return Math.min(0, Math.max(-350, newY))
         // return newY
-      });
+      })
     }
   }
 
-
   const onWheel = (e: React.WheelEvent) => {
     console.log(e.deltaY, 'e.deltaY')
     // 计算新的缩放比例
-    const delta = e.deltaY;
-    const newZoom = Math.min(1.5, Math.max(0.8, zoom - delta * 0.001));
-    console.log(zoom, mousePositionRef.current);
+    const delta = e.deltaY
+    const newZoom = Math.min(1.5, Math.max(0.8, zoom - delta * 0.001))
+    console.log(zoom, mousePositionRef.current)
 
     if (Math.abs(zoom - 1) < 0.05) {
       setZoomOrigin(mousePositionRef.current)
     }
-    setZoom(newZoom);
+    setZoom(newZoom)
   }
   // 主视角地图的移动端
-  const handleTouchStart = useCallback((e: React.TouchEvent) => {
-    const touch = e.touches[0]
-    // 记录触摸起始坐标
-    startRef.current.startX = touch.clientX;
-    startRef.current.startY = touch.clientY;
-    startRef.current.startOffsetX = offsetX;
-    startRef.current.startOffsetY = offsetY;
-    if (e.touches.length === 2) {
-      const t1 = e.touches[0]
-      const t2 = e.touches[1]
-      // 记录两指缩放的初始数据:距离，当前缩放比例，中点坐标
-      const distance = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY)
-      startRef.current.initialDistance = distance
-      startRef.current.initialZoom = zoom
-      // 计算中点坐标
-      const midX = (t1.clientX + t2.clientX) / 2
-      const midY = (t1.clientY + t2.clientY) / 2
-      startRef.current.midX = midX
-      startRef.current.midY = midY
-    }
-  }, [offsetX, offsetY, zoom])
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      const touch = e.touches[0]
+      // 记录触摸起始坐标
+      startRef.current.startX = touch.clientX
+      startRef.current.startY = touch.clientY
+      startRef.current.startOffsetX = offsetX
+      startRef.current.startOffsetY = offsetY
+      if (e.touches.length === 2) {
+        const t1 = e.touches[0]
+        const t2 = e.touches[1]
+        // 记录两指缩放的初始数据:距离，当前缩放比例，中点坐标
+        const distance = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY)
+        startRef.current.initialDistance = distance
+        startRef.current.initialZoom = zoom
+        // 计算中点坐标
+        const midX = (t1.clientX + t2.clientX) / 2
+        const midY = (t1.clientY + t2.clientY) / 2
+        startRef.current.midX = midX
+        startRef.current.midY = midY
+      }
+    },
+    [offsetX, offsetY, zoom]
+  )
   const handleTouchMove = useCallback((e: React.TouchEvent) => {
     const touch = e.touches[0]
     const dx = touch.clientY - startRef.current.startY
     const dy = -touch.clientX + startRef.current.startX
     if (e.touches.length === 1) {
       setOffsetX(prev => {
-        const newX = startRef.current.startOffsetX + dx;
-        return Math.min(0, Math.max(-1640, newX));
+        const newX = startRef.current.startOffsetX + dx
+        return Math.min(0, Math.max(-1640, newX))
         // return newX
-      });
+      })
       setOffsetY(prev => {
-        const newY = startRef.current.startOffsetY + dy;
-        return Math.min(0, Math.max(-350, newY));
+        const newY = startRef.current.startOffsetY + dy
+        return Math.min(0, Math.max(-350, newY))
         // return newY
-      });
+      })
     }
     if (e.touches.length === 2) {
       const touch2 = e.touches[1]
       // 计算当前两指之间的距离
       const distance = Math.hypot(touch2.clientX - touch.clientX, touch2.clientY - touch.clientY)
       // 根据距离调整缩放比例
-      const newZoom = Math.max(0.8, Math.min(2, distance / startRef.current.initialDistance * startRef.current.initialZoom))
+      const newZoom = Math.max(
+        0.8,
+        Math.min(2, (distance / startRef.current.initialDistance) * startRef.current.initialZoom)
+      )
       setZoom(newZoom)
       setOffsetX(prev => {
         const deltaMidX = (touch2.clientX + touch.clientX) / 2 - startRef.current.midX
         const newX = startRef.current.startOffsetX - deltaMidX + dx * 0.5
-        return Math.min(0, Math.max(-1640, newX));
+        return Math.min(0, Math.max(-1640, newX))
       })
       setOffsetY(prev => {
         const deltaMidY = (touch2.clientY + touch.clientY) / 2 - startRef.current.midY
         const newY = startRef.current.startOffsetY - deltaMidY + dy * 0.5
-        return Math.min(0, Math.max(-350, newY));
+        return Math.min(0, Math.max(-350, newY))
       })
     }
   }, [])
 
-
-
   // 动态获取容器尺寸
   useEffect(() => {
     if (graphRef.current) {
@@ -266,56 +277,306 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
     setCurrentNodeIndex(index)
   }
 
-  const NodeData = React.memo(() =>
+  const NodeData = React.memo(() => (
     <div className='nodeData'>
       {myData.genealogyData.map((item, index) => {
         let res
-        if (item.type === 'active') res = <NodeActive key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} className='nodeActiveG' />
-        if (item.type === 'nodeRight_n') res = <NodeRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' />
-        if (item.type === 'nodeRight_a') res = <NodeRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' />
-        if (item.type === 'nodeRight_f') res = <NodeRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='false' />
-        if (item.type === 'nodeBottom_n') res = <NodeBottom key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' />
-        if (item.type === 'nodeTurnRight_n') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} arrowHeight={item.arrowHeight} type='normal' />
-        if (item.type === 'nodeTurnRight_a') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} arrowHeight={item.arrowHeight} type='active' />
-        if (item.type === 'nodeTurnBottomRight_a') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} arrowHeight={item.arrowHeight} type='active' />
-        if (item.type === 'nodeTurnBottomRight_n') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} arrowHeight={item.arrowHeight} type='normal' />
-        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' />
-        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' />
-        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' />
-        if (item.type === 'nodeTurnBottomDashRight_n') res = <NodeTurnBottomDashRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' />
+        if (item.type === 'active')
+          res = (
+            <NodeActive
+              key={index}
+              data={item}
+              style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
+              className='nodeActiveG'
+            />
+          )
+        if (item.type === 'nodeRight_n')
+          res = (
+            <NodeRight
+              key={index}
+              data={item}
+              style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
+              type='normal'
+            />
+          )
+        if (item.type === 'nodeRight_a')
+          res = (
+            <NodeRight
+              key={index}
+              data={item}
+              style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
+              type='active'
+            />
+          )
+        if (item.type === 'nodeRight_f')
+          res = (
+            <NodeRight
+              key={index}
+              data={item}
+              style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
+              type='false'
+            />
+          )
+        if (item.type === 'nodeBottom_n')
+          res = (
+            <NodeBottom
+              key={index}
+              data={item}
+              style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
+              type='normal'
+            />
+          )
+        if (item.type === 'nodeTurnRight_n')
+          res = (
+            <NodeTurnRight
+              key={index}
+              data={item}
+              style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
+              arrowHeight={item.arrowHeight}
+              type='normal'
+            />
+          )
+        if (item.type === 'nodeTurnRight_a')
+          res = (
+            <NodeTurnRight
+              key={index}
+              data={item}
+              style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
+              arrowHeight={item.arrowHeight}
+              type='active'
+            />
+          )
+        if (item.type === 'nodeTurnBottomRight_a')
+          res = (
+            <NodeTurnBottomRight
+              key={index}
+              data={item}
+              style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
+              arrowHeight={item.arrowHeight}
+              type='active'
+            />
+          )
+        if (item.type === 'nodeTurnBottomRight_n')
+          res = (
+            <NodeTurnBottomRight
+              key={index}
+              data={item}
+              style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
+              arrowHeight={item.arrowHeight}
+              type='normal'
+            />
+          )
+        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'
+            />
+          )
+        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'
+            />
+          )
+        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'
+            />
+          )
+        if (item.type === 'nodeTurnBottomDashRight_n')
+          res = (
+            <NodeTurnBottomDashRight
+              key={index}
+              data={item}
+              style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
+              type='normal'
+            />
+          )
         return res
       })}
     </div>
-  )
-
-
-  const NodeClickData = React.memo(() =>
-    <div className='nodeClickData' id='nodeClickData' style={{ transform: `scale(${zoom})`, transformOrigin: `${zoomOrigin.x}px ${zoomOrigin.y}px` }}>
-      {
-        myData.genealogyData.map((item, index) => {
-          let res
-          if (item.type === 'active') res = <NodeActive key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} nameClick={() => handleNameClick(index)} className='nodeActiveG' />
-          if (item.type === 'nodeRight_n') res = <NodeRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
-          if (item.type === 'nodeRight_a') res = <NodeRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' />
-          if (item.type === 'nodeRight_f') res = <NodeRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='false' nameClick={() => handleNameClick(index)} />
-          if (item.type === 'nodeBottom_n') res = <NodeBottom key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
-          if (item.type === 'nodeTurnRight_n') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} arrowHeight={item.arrowHeight} 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)` }} arrowHeight={item.arrowHeight} type='active' />
-          if (item.type === 'nodeTurnBottomRight_a') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)`, height: item.height || undefined }} arrowHeight={item.arrowHeight} type='active' />
-          if (item.type === 'nodeTurnBottomRight_n') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)`, height: item.height || undefined }} arrowHeight={item.arrowHeight} 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
-        })
-      }
-    </div >
-  )
-
-
+  ))
+
+  const NodeClickData = React.memo(() => (
+    <div
+      className='nodeClickData'
+      id='nodeClickData'
+      style={{
+        transform: `scale(${zoom})`,
+        transformOrigin: `${zoomOrigin.x}px ${zoomOrigin.y}px`
+      }}
+    >
+      {myData.genealogyData.map((item, index) => {
+        let res
+        if (item.type === 'active')
+          res = (
+            <NodeActive
+              key={index}
+              data={item}
+              style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
+              nameClick={() => handleNameClick(index)}
+              className='nodeActiveG'
+            />
+          )
+        if (item.type === 'nodeRight_n')
+          res = (
+            <NodeRight
+              key={index}
+              data={item}
+              style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
+              type='normal'
+              nameClick={() => handleNameClick(index)}
+            />
+          )
+        if (item.type === 'nodeRight_a')
+          res = (
+            <NodeRight
+              key={index}
+              data={item}
+              style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
+              type='active'
+            />
+          )
+        if (item.type === 'nodeRight_f')
+          res = (
+            <NodeRight
+              key={index}
+              data={item}
+              style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
+              type='false'
+              nameClick={() => handleNameClick(index)}
+            />
+          )
+        if (item.type === 'nodeBottom_n')
+          res = (
+            <NodeBottom
+              key={index}
+              data={item}
+              style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
+              type='normal'
+              nameClick={() => handleNameClick(index)}
+            />
+          )
+        if (item.type === 'nodeTurnRight_n')
+          res = (
+            <NodeTurnRight
+              key={index}
+              data={item}
+              style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
+              arrowHeight={item.arrowHeight}
+              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)` }}
+              arrowHeight={item.arrowHeight}
+              type='active'
+            />
+          )
+        if (item.type === 'nodeTurnBottomRight_a')
+          res = (
+            <NodeTurnBottomRight
+              key={index}
+              data={item}
+              style={{
+                transform: `translate(${item.position.x}px, ${item.position.y}px)`,
+                height: item.height || undefined
+              }}
+              arrowHeight={item.arrowHeight}
+              type='active'
+            />
+          )
+        if (item.type === 'nodeTurnBottomRight_n')
+          res = (
+            <NodeTurnBottomRight
+              key={index}
+              data={item}
+              style={{
+                transform: `translate(${item.position.x}px, ${item.position.y}px)`,
+                height: item.height || undefined
+              }}
+              arrowHeight={item.arrowHeight}
+              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
+      })}
+    </div>
+  ))
 
   return (
     <>
@@ -335,19 +596,47 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
           userSelect: 'none'
         }}
       >
-        <div className="fixed" style={{ width: '5px', height: '5px', backgroundColor: '#000', borderRadius: '50%', position: 'absolute', top: '0', left: '0', transform: `translate(${-offsetX}px,${-offsetY}px)` }}></div>
+        <div
+          className='fixed'
+          style={{
+            width: '5px',
+            height: '5px',
+            backgroundColor: '#000',
+            borderRadius: '50%',
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            transform: `translate(${-offsetX}px,${-offsetY}px)`
+          }}
+        ></div>
         <NodeClickData />
       </div>
       <div className={styles.tip}>
         <div className='t1'>
           <div className='icon'>
+            <img src={require('@/assets/img/A6_gen_active.png')} draggable='false' alt='' />
+          </div>
+          <div className='txt'>
+            {myLangue === 'ZH' ? '见于史书记载的人物' : 'Figures recorded in historical documents'}
+          </div>
+        </div>
+        <div className='t1'>
+          <div className='icon'>
             <img src={require('@/assets/img/A6_gen_normal.png')} draggable='false' alt='' />
           </div>
-          <div className='txt'>{myLangue === 'ZH' ? '为勘误之人' : 'For the correction'}</div>
+          <div className='txt'>
+            {myLangue === 'ZH'
+              ? '未见于史书记载的人物'
+              : 'Figures not recorded in historical documents'}
+          </div>
+        </div>
+        <div className='t2'>
+          <RightLine className='t2_rightLine' />
+          <div className='txt'>{myLangue === 'ZH' ? '直系亲属' : 'Lineal relatives'}</div>
         </div>
         <div className='t2'>
           <RightLineDash className='t2_rightLine' />
-          <div className='txt'>{myLangue === 'ZH' ? '为非直系父子关系' : 'For non-direct father-son relationships'}</div>
+          <div className='txt'>{myLangue === 'ZH' ? '非直系亲属' : 'Collateral relatives'}</div>
         </div>
       </div>
       <div className={styles.miniMap}>

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

@@ -180,9 +180,13 @@
       text-align: center;
       display: flex;
       justify-content: center;
+      will-change: transform;
+      transform: translateZ(0);
       .span1 {
         width: fit-content;
         height: 100%;
+        will-change: transform;
+        transform: translateZ(0);
       }
       .span2 {
         line-height: 27px;

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

@@ -29,9 +29,9 @@ interface nodeProps {
   arrowHeight?: number
 }
 
-const RightLine = () => {
+const RightLine = ({ className }: { className?: string }) => {
   return (
-    <div className={`${styles.rightLine}`} id='rightLine'>
+    <div className={`${styles.rightLine} ${className}`} id='rightLine'>
       <div className='line'></div>
       <div className='arrow'></div>
     </div>
@@ -67,7 +67,11 @@ const BottomLineDash = () => {
 
 const TurnRightLine = ({ arrowHeight }: { arrowHeight?: number }) => {
   return (
-    <div className={styles.turnRightLine} id='turnRightLine' style={{ height: arrowHeight ? `${arrowHeight}px` : '80px' }}>
+    <div
+      className={styles.turnRightLine}
+      id='turnRightLine'
+      style={{ height: arrowHeight ? `${arrowHeight}px` : '80px' }}
+    >
       <div className='line'></div>
       <div className='arrow'></div>
     </div>
@@ -76,7 +80,11 @@ const TurnRightLine = ({ arrowHeight }: { arrowHeight?: number }) => {
 
 const TurnBottomRightLine = ({ arrowHeight }: { arrowHeight?: number }) => {
   return (
-    <div className={styles.turnBottomRightLine} id='turnBottomRightLine' style={{ height: arrowHeight ? `${arrowHeight}px` : '80px' }}>
+    <div
+      className={styles.turnBottomRightLine}
+      id='turnBottomRightLine'
+      style={{ height: arrowHeight ? `${arrowHeight}px` : '80px' }}
+    >
       <div className='line'></div>
       <div className='arrow'></div>
     </div>
@@ -121,7 +129,7 @@ const NodeActive = ({ className, nameClick, style, data }: nodeProps) => {
           nameClick?.()
         }}
       >
-        <div className='span1 songFont'> {data.name}</div>
+        <div className='span1 songFont' dangerouslySetInnerHTML={{ __html: data.name }}></div>
         <div className='span2'>{data.customN}</div>
       </div>
       <div className='time'>{data.addTxt.time}</div>
@@ -205,11 +213,21 @@ const NodeTurnRight = ({ type, className, nameClick, style, data, arrowHeight }:
   )
 }
 
-const NodeTurnBottomRight = ({ type, className, nameClick, style, data, arrowHeight }: nodeProps) => {
+const NodeTurnBottomRight = ({
+  type,
+  className,
+  nameClick,
+  style,
+  data,
+  arrowHeight
+}: nodeProps) => {
   const { myLangue } = useSelector((state: RootState) => state.A0Layout)
   return (
     <div
-      className={classNames(`${styles.nodeTurnBottomRight} ${className}`, myLangue === 'EN' ? styles.nodeTurnBottomRightEn : '')}
+      className={classNames(
+        `${styles.nodeTurnBottomRight} ${className}`,
+        myLangue === 'EN' ? styles.nodeTurnBottomRightEn : ''
+      )}
       id='nodeTurnBottomRight'
       style={style}
     >

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

@@ -26,6 +26,7 @@
     }
 
     .icon1 {
+      display: none;
       width: 30px;
       height: 30px;
       position: absolute;
@@ -170,7 +171,7 @@
       height: 200px;
       font-size: 16px;
       color: rgba(209, 201, 178, 1);
-      text-align: center;
+      text-align: left;
       line-height: 26px;
     }
 

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

@@ -194,8 +194,18 @@
               height: 76%;
               display: flex;
               flex-direction: column;
-              justify-content: space-between;
+              justify-content: flex-start;
               text-align: center;
+              position: relative;
+
+              .zoomIn {
+                width: 30px;
+                height: 30px;
+                position: absolute;
+                bottom: 22%;
+                right: 7%;
+                cursor: pointer;
+              }
 
               & > img {
                 height: 78%;
@@ -205,9 +215,10 @@
                 top: 0;
                 left: 50%;
                 transform: translateX(-50%);
+                cursor: pointer;
               }
 
-              .from {
+              .imgFromTxt {
                 text-align: center;
                 height: 20%;
                 width: 100%;
@@ -219,20 +230,17 @@
 
               .name,
               .time {
-                writing-mode: vertical-lr;
-                position: absolute;
-                right: 18%;
-                top: 50%;
-                transform: translateY(-80%);
-                width: 20px;
+                width: 100%;
                 text-align: center;
-                font-size: 22px;
-                min-height: 52%;
+                font-size: 20px;
                 height: auto;
-                max-height: 200%;
                 color: #5e3422;
               }
 
+              .name {
+                margin-top: 4px;
+              }
+
               .changeBar {
                 position: absolute;
                 top: 50%;
@@ -276,8 +284,8 @@
 
               .time {
                 right: 10px;
-                font-size: 14px;
-                width: 40px;
+                font-size: 11px;
+                width: 100%;
                 // text-align: left;
                 line-height: 20px;
               }
@@ -586,7 +594,7 @@
               height: 76%;
               display: flex;
               flex-direction: column;
-              justify-content: space-between;
+              justify-content: flex-start;
               text-align: center;
 
               & > img {
@@ -597,9 +605,10 @@
                 top: 0;
                 left: 50%;
                 transform: translateX(-50%);
+                cursor: pointer;
               }
 
-              .from {
+              .imgFromTxt {
                 text-align: center;
                 height: 20%;
                 width: 100%;
@@ -609,25 +618,17 @@
                 padding-top: 15px;
               }
 
-              .part2Box {
-                position: absolute;
-                right: 1%;
-                top: 20%;
-                width: 90px;
-                height: 200px;
-              }
-
-              .nameE,
-              .timeE {
-                text-align: left;
-                font-size: 13px;
-                line-height: 15px;
+              .name,
+              .time {
+                width: 100%;
+                text-align: center;
+                font-size: 16px;
+                height: auto;
+                color: #5e3422;
               }
 
-              .timeE {
+              .name {
                 margin-top: 4px;
-                font-size: 10px;
-                line-height: 12px;
               }
 
               .changeBar {
@@ -670,6 +671,14 @@
                   color: #7c4b36;
                 }
               }
+
+              .time {
+                right: 10px;
+                font-size: 11px;
+                width: 100%;
+                // text-align: left;
+                line-height: 20px;
+              }
             }
 
             .desc {

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

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react'
 import styles from './index.module.scss'
 import { useSelector } from 'react-redux'
-import { RootState } from '@/store'
+import store, { RootState } from '@/store'
 import classNames from 'classnames'
 import Zback from '@/components/Zback'
 
@@ -110,27 +110,50 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
                   {item.part2.map((part2Item, part2Index) => (
                     <div className='part2' style={partChangeCss(index)} key={part2Item.name}>
                       <div className='imgBox'>
-                        <img src={part2Src(part2Item, part2Index)} alt='' />
-                        <div className='from'>
+                        <img
+                          src={part2Src(part2Item, part2Index)}
+                          alt=''
+                          onClick={() => {
+                            store.dispatch({
+                              type: 'layout/lookBigImg',
+                              payload: {
+                                url: part2Src(part2Item, part2Index),
+                                show: true,
+                                fromTxt: isOriStates[part2Index]
+                                  ? part2Item.from
+                                  : part2Item.from_ac,
+                                zoom: 1
+                              }
+                            })
+                          }}
+                        />
+                        <div
+                          className='zoomIn'
+                          onClick={() => {
+                            store.dispatch({
+                              type: 'layout/lookBigImg',
+                              payload: {
+                                url: part2Src(part2Item, part2Index),
+                                show: true,
+                                fromTxt: isOriStates[part2Index]
+                                  ? part2Item.from
+                                  : part2Item.from_ac,
+                                zoom: 1
+                              }
+                            })
+                          }}
+                        >
+                          <img src={require('@/assets/img/A6_sangzang_zoomin.png')} alt='' />
+                        </div>
+                        <div className='imgFromTxt'>
                           {isOriStates[part2Index] ? part2Item.from : part2Item.from_ac}
                         </div>
-                        {myLangue === 'ZH' ? (
-                          <>
-                            <div className='name songFont'>{part2Item.name}</div>
-                            <div
-                              className='time songFont'
-                              dangerouslySetInnerHTML={{ __html: part2Item.time }}
-                            ></div>
-                          </>
-                        ) : (
-                          <div className='part2Box'>
-                            <div className='nameE songFont'>{part2Item.name}</div>
-                            <div
-                              className='timeE songFont'
-                              dangerouslySetInnerHTML={{ __html: part2Item.time }}
-                            ></div>
-                          </div>
-                        )}
+
+                        <div className='name songFont'>{part2Item.name}</div>
+                        <div
+                          className='time songFont'
+                          dangerouslySetInnerHTML={{ __html: part2Item.time }}
+                        ></div>
 
                         <div className='changeBar'>
                           <div
@@ -159,7 +182,9 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
                           </div>
                         </div>
                       </div>
-                      <div className='desc' onWheel={(e) => e.stopPropagation()}>{part2Item.desc}</div>
+                      <div className='desc' onWheel={e => e.stopPropagation()}>
+                        {part2Item.desc}
+                      </div>
                     </div>
                   ))}
                 </>

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

@@ -45,10 +45,10 @@
 
     .Stext {
       width: 240px;
-      height: 95%;
+      height: 113%;
       font-size: 14px;
       letter-spacing: 0px;
-      line-height: 30px;
+      line-height: 26px;
       color: rgb(91, 71, 46);
       font-weight: 300;
       transform: translate(90%, 23%);

src/pages/A7wjwj/conponents/Discover/index.module.scss

@@ -194,37 +194,37 @@
       position: relative;
 
       .point3 {
-        transform: translate(36px, 16px);
+        transform: translate(35px, 35px);
       }
 
       .point4 {
-        transform: translate(-33px, 45px);
+        transform: translate(-33px, 49px);
       }
 
       .point5 {
-        transform: translate(-62px, -57px);
+        transform: translate(-55px, -53px);
       }
 
       .arrow2 {
         width: 22px;
-        height: 72px;
+        height: 90px;
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-261%, -18%);
+        transform: translate(-248%, -25%);
         background: url('../../../../assets/img/A7_discover_arrow2.png') no-repeat center center;
         background-size: 100% 100%;
       }
 
       .arrow3 {
-        width: 57px;
-        height: 28px;
+        width: 73px;
+        height: 20px;
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-26%, 139%);
+        transform: translate(-31%, 305%);
         background: url('../../../../assets/img/A7_discover_arrow3.png') no-repeat center center;
-        background-size: 100% 100%;
+        background-size: contain;
       }
 
       .back {
@@ -333,12 +333,12 @@
         .text {
           width: 95%;
           height: fit-content;
-          align-self: flex-end;
+          align-self: flex-start;
           color: rgba(93, 96, 96, 1);
           font-size: 11px;
           line-height: 18px;
           position: relative;
-
+          padding-left: 22px;
           a {
             color: rgba(175, 135, 100, 1);
           }
@@ -374,7 +374,7 @@
         .from {
           width: 95%;
           height: fit-content;
-          align-self: flex-end;
+          align-self: flex-start;
           text-align: right;
           color: rgba(93, 96, 96, 1);
           font-size: 11px;
@@ -475,7 +475,7 @@
       .record3 {
         width: 182px;
         height: 44px;
-        transform: translate(11px, -26px);
+        transform: translate(10px, -7px);
         background: url('../../../../assets/img/A7_discover_record3.png') no-repeat center center;
         background-size: 100% 100%;
         display: flex;

src/pages/A7wjwj/conponents/Shuxing/index.module.scss

@@ -7,7 +7,7 @@
     .mainContent {
       width: 100%;
       height: 100%;
-      padding: 80px 30px 0 30px;
+      padding: 80px 30px 20px 30px;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -18,10 +18,9 @@
         width: 100%;
         height: fit-content;
         font-size: 14px;
+        line-height: 20px;
         // font-weight: 500;
-        color: #7e807d;
-        font-size: 16px;
-        line-height: 22px;
+        color: rgb(93, 96, 96);
         height: 90px;
         max-height: 95px;
       }
@@ -105,7 +104,7 @@
           height: 100%;
           display: flex;
           flex-direction: column;
-          gap: 10px;
+          gap: 6px;
           color: rgba(93, 96, 96, 1);
           font-size: 10px;
 
@@ -138,18 +137,6 @@
             font-weight: bold;
             white-space: nowrap;
             width: 40px;
-
-            &::after {
-              content: '';
-              width: 24px;
-              height: 4px;
-              position: absolute;
-              z-index: -1;
-              bottom: 0%;
-              left: 50%;
-              transform: translate(-65%, -55%);
-              background-color: rgba(124, 75, 54, 0.5);
-            }
           }
 
           p {
@@ -185,6 +172,14 @@
             opacity: 0.7;
             z-index: 1;
           }
+          .zoomIn {
+            width: 30px;
+            height: 30px;
+            position: absolute;
+            bottom: 3%;
+            right: 2%;
+            cursor: pointer;
+          }
         }
       }
 
@@ -244,7 +239,7 @@
         height: fit-content;
         font-size: 14px;
         // font-weight: 500;
-        color: #7e807d;
+        color: rgb(93, 96, 96);
         font-size: 13px;
         line-height: 18px;
         height: 90px;
@@ -349,7 +344,7 @@
           height: 100%;
           display: flex;
           flex-direction: column;
-          gap: 10px;
+          gap: 6px;
           color: rgba(93, 96, 96, 1);
           font-size: 10px;
 
@@ -382,18 +377,6 @@
             font-weight: bold;
             white-space: nowrap;
             width: 80px;
-
-            &::after {
-              content: '';
-              width: 24px;
-              height: 7px;
-              position: absolute;
-              z-index: -1;
-              bottom: 0%;
-              left: 50%;
-              transform: translate(-160%, 10%);
-              background-color: #af8764;
-            }
           }
 
           p {
@@ -422,6 +405,7 @@
             object-fit: contain;
             position: relative;
             z-index: 2;
+            cursor: pointer;
           }
 
           .diwen {

src/types/declaration.d.ts

@@ -19,6 +19,7 @@ declare const F_Video: any
 type MyDataType = {
   isLdong: boolean
   baseInfo: { title: string; text: string; path: string }[]
+  baseMianze: string
   introInfo: { title: string; text: string }[]
   detail_modal: {
     top: { title: string; txt: string }[]