更新

src/assets/styles/base.css

@@ -27,7 +27,7 @@ body {
   font-size: var(--fontNum);
   height: 100%;
   color: black;
-  overflow: auto;
+  overflow: hidden;
   background-color: #cbc5b7;
 }
 body #wjwjScene {
@@ -222,6 +222,9 @@ textarea {
   .adm-toast-wrap {
     transform: rotate(90deg) !important;
   }
+  .ant-image-mask {
+    background: rgba(0, 0, 0, 0.8) !important;
+  }
   .ant-image-preview-wrap {
     transform: rotate(90deg) !important;
   }

src/assets/styles/base.less

@@ -33,7 +33,7 @@ body {
   font-size: var(--fontNum);
   height: 100%;
   color: black;
-  overflow: auto;
+  overflow: hidden;
   background-color: #cbc5b7;
   // background-color: rgba(0, 0, 0, 0.8);
 }
@@ -73,7 +73,7 @@ body #A7Back {
   left: 4%;
   cursor: pointer;
 
-  &>img {
+  & > img {
     height: 100%;
     object-fit: contain;
   }
@@ -84,7 +84,7 @@ body #A7Back {
   margin: auto;
   position: relative;
 
-  &>div {
+  & > div {
     width: 100%;
     height: 100%;
   }
@@ -190,6 +190,7 @@ textarea {
   color: #f1e39e;
 }
 
+
 @keyframes yunShan {
   0% {
     opacity: 1;
@@ -213,7 +214,7 @@ textarea {
   bottom: 15px;
   right: 20px;
 
-  &>img {
+  & > img {
     position: absolute;
     top: 0;
     left: 0;
@@ -287,6 +288,10 @@ textarea {
     transform: rotate(90deg) !important;
   }
 
+  .ant-image-mask {
+    background: rgba(0, 0, 0, 0.8) !important;
+  }
+
   .ant-image-preview-wrap {
     transform: rotate(90deg) !important;
   }
@@ -331,7 +336,7 @@ textarea {
         justify-content: flex-end;
         align-items: center;
 
-        &>img {
+        & > img {
           height: 90%;
           object-fit: contain;
         }
@@ -357,7 +362,7 @@ textarea {
     z-index: 3;
     cursor: pointer;
 
-    &>img {
+    & > img {
       height: 100%;
       object-fit: contain;
     }
@@ -493,7 +498,7 @@ textarea {
       justify-content: flex-end;
       align-items: center;
 
-      &>img {
+      & > img {
         height: 90%;
         object-fit: contain;
       }
@@ -600,11 +605,11 @@ textarea {
 // }
 
 // 宋体
-.songFont{
+.songFont {
   font-family: 'song' !important;
 }
 
-.songFontc{
+.songFontc {
   font-family: 'song' !important;
   font-weight: 700 !important;
 }

src/pages/A1home2/index.tsx

@@ -24,7 +24,7 @@ function A1home() {
   const moveImg2 = useRef<any>(null)
 
   // 视频准备
-  const videoCanvasFu = useCallback((val: 'EN' | 'ZH') => {
+  const videoCanvasFu = useCallback((val: 'ZH' | 'EN') => {
     const params = {
       objectFit: 'cover', // 视频的object-fit样式, 默认 cover
       loop: true, // 是否循环, 默认false
@@ -36,7 +36,10 @@ function A1home() {
     }
 
     if (val === 'EN') {
-      moveImg.current = F_Video(`./myData/baseEN.ts`, params)
+      // moveImg.current = F_Video(`./myData/base.ts`, params)
+      // const dom = document.querySelector(`.A1baseVideo2`)!
+      // dom.append(moveImg2.current.domElement)
+      moveImg.current = F_Video(`./myData/baseEn.ts`, params)
       const dom = document.querySelector(`.A1baseVideo`)!
       dom.append(moveImg.current.domElement)
     } else {

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

@@ -66,7 +66,7 @@
 
       .t2 {
         width: 90%;
-        font-size: 16px;
+        font-size: 15px;
         letter-spacing: 0.5px;
         text-align: justify;
       }
@@ -192,8 +192,8 @@
 
           .icon1,
           .icon2 {
-            width: 30px;
-            height: 30px;
+            width: 20px;
+            height: 20px;
 
             & > img {
               height: 100%;
@@ -222,7 +222,7 @@
         color: rgba(93, 96, 96, 1);
         text-align: justify;
         letter-spacing: 2px;
-        line-height: 22px;
+        line-height: 26px;
       }
 
       .preview {

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

@@ -6,20 +6,21 @@
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 1;
-  overflow-x: auto;
-  transition: all 0.3s ease-in-out;
-
-  &::-webkit-scrollbar {
-    height: 0;
-  }
+  overflow: hidden;
 
   :global {
     .SinicizeScroll {
-      width: fit-content;
+      width: 100%;
       height: 100%;
+      overflow-x: auto;
+      transition: all 0.3s ease-in-out;
+      white-space: nowrap;
+      -webkit-overflow-scrolling: touch;
+      overscroll-behavior: none;
 
-      display: flex;
-      align-items: center;
+      &::-webkit-scrollbar {
+        height: 0;
+      }
     }
   }
 }
@@ -30,7 +31,9 @@
   position: relative;
   background: url('../../../assets/img/A6_sinicize_bg.png') no-repeat center center;
   background-size: 100% 100%;
-
+  display: inline-block;
+  vertical-align: top;
+  white-space: normal;
   :global {
     .back {
       width: 60px;
@@ -61,7 +64,7 @@
       }
     }
 
-    .Stext {
+    .S2text {
       position: absolute;
       top: 36%;
       left: 50%;
@@ -85,10 +88,9 @@
       }
 
       .t2 {
-        width: 90%;
-        font-size: 16px;
-        line-height: 22px;
-        letter-spacing: 2px;
+        width: 87%;
+        font-size: 15px;
+        line-height: 24px;
         font-weight: 400;
       }
     }
@@ -142,10 +144,10 @@
     .sinicizeBtn1,
     .sinicizeBtn2 {
       position: absolute;
-      right: 4%;
-      bottom: 15%;
-      height: 60px;
-      width: 60px;
+      right: 2%;
+      bottom: 5%;
+      height: 80px;
+      width: 80px;
       background: url('../../../assets/img/btn_tab.png') no-repeat center center;
       background-size: 100% 100%;
       display: flex;
@@ -163,13 +165,13 @@
     }
 
     .sinicizeBtn1 {
-      bottom: 35%;
+      bottom: 21%;
     }
   }
 }
 
 .label {
-  transform: scale(1.4);
+  transform: scale(1.5);
   position: absolute;
   height: 30px;
   width: fit-content;
@@ -249,19 +251,22 @@
   width: fit-content;
   height: 100%;
   position: relative;
-
+  display: inline-block;
+  vertical-align: top;
+  white-space: normal;
   :global {
     .scroll {
       width: fit-content;
       height: 100%;
-      display: flex;
-      align-items: center;
+      display: inline-block;
+      vertical-align: top;
+      white-space: nowrap;
 
       .yearItem {
         width: fit-content;
         height: 100%;
-        display: flex;
-        align-items: center;
+        display: inline-block;
+        vertical-align: top;
         background-color: #fff;
 
         .year {
@@ -272,18 +277,18 @@
           color: rgba(255, 233, 182, 1);
           text-align: center;
           background-size: 100% 100%;
+          box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
+          display: inline-block;
+          vertical-align: top;
+          white-space: normal;
 
           .yearContainner {
             width: 100%;
             height: 100%;
-            background-image: linear-gradient(
-              to bottom,
-              rgba(117, 56, 4, 1) 0%,
-              rgba(163, 117, 63, 0.2) 100%
-            );
+
             .txt {
               writing-mode: vertical-rl;
-              text-align: right;
+              text-align: left;
               letter-spacing: 4px;
               width: 100%;
               padding: 30px 40%;
@@ -318,6 +323,8 @@
         }
 
         .year-zongjie {
+          background: url(../../../assets/img/sinicize_jy.png) no-repeat center center;
+          background-size: 100% 100%;
           width: 150px;
           .yearContainner {
             .txt {
@@ -337,8 +344,9 @@
           background-size: auto 99%;
           overflow: hidden;
           transition: all 0.7s ease-in-out;
-          display: flex;
-          align-items: center;
+          display: inline-block;
+          vertical-align: top;
+          white-space: normal;
           .point {
             position: absolute;
             top: 50%;

src/pages/A6ybwx/A6_2_zxzgh/index.tsx

@@ -3,6 +3,11 @@ import styles from './index.module.scss'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
 import { Toast } from 'antd-mobile'
+import iosTouch from '@/utils/iosTouch'
+
+
+
+
 
 type InfoCardProps = {
   time: string
@@ -35,6 +40,10 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
   const sinicize1Ref = useRef<HTMLDivElement>(null)
   // const ori_touchStartX = useRef<number>(0)
 
+  useEffect(() => {
+    iosTouch('A7Sinicize')
+  }, [])
+
   // width 线的长度 inset 整体的定位 name 文字 direct 方向 left/right
   const Label = ({
     width,
@@ -149,13 +158,14 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
   return (
     <>
       <div
-        ref={originRef}
+        id='A7Sinicize'
+
         className={styles.Sinicize}
         onWheel={handleWheel}
       // onTouchMove={handleOriTouchMove}
       // onTouchStart={handleTouchStart}
       >
-        <div className='SinicizeScroll'>
+        <div className='SinicizeScroll' ref={originRef}>
           <div ref={sinicize1Ref} className={styles.Sinicize1}>
             <div className='back' onClick={() => setGotopage(0)}>
               <img src={require('@/assets/img/btn_back.png')} alt='' />
@@ -163,7 +173,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
             <div className='title'>
               <img src={require('@/assets/img/A6_sinicize_title.png')} draggable='false' alt='' />
             </div>
-            <div className='Stext'>
+            <div className='S2text'>
               <div className='line1'>
                 <img src={require('@/assets/img/A6_sinicize_line2.png')} draggable='false' alt='' />
               </div>
@@ -172,13 +182,13 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
             {currentTab === 0 && (
               <div className={`zhufo ${currentTab === 0 ? 'active' : ''}`}>
                 <img src={require('@/assets/img/A6_sinicize_zhufo.png')} draggable='false' alt='' />{' '}
-                <div className='name'>主尊佛像</div>
+                <div className='name songFont'>主尊佛像</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'>胁侍菩萨</div>
+                <div className='name songFont'>胁侍菩萨</div>
               </div>
             )}
             {currentTab === 0 && (
@@ -208,7 +218,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
             )}
 
             <div
-              className={`sinicizeBtn1 ${currentTab === 0 ? 'active' : ''}`}
+              className={`songFont sinicizeBtn1 ${currentTab === 0 ? 'active' : ''}`}
               onClick={() => setCurrentTab(0)}
             >
               主尊
@@ -216,7 +226,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
               佛像
             </div>
             <div
-              className={`sinicizeBtn2 ${currentTab === 1 ? 'active' : ''}`}
+              className={`songFont sinicizeBtn2 ${currentTab === 1 ? 'active' : ''}`}
               onClick={() => setCurrentTab(1)}
             >
               胁侍
@@ -235,8 +245,8 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                     onClick={() => handleYearItemClick(index)}
                   >
                     <div className="yearContainner">
-                      <div className='txt'>{sItem.time}</div>
-                      <div className='front'>{sItem.desc}</div>
+                      <div className='txt songFont'>{sItem.time}</div>
+                      {/* <div className='front'>{sItem.desc}</div> */}
                     </div>
 
                   </div>
@@ -351,8 +361,8 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                   className='year year-zongjie'
                 >
                   <div className="yearContainner">
-                    <div className='txt'>{myData.sinicizeDataStatic.zongjie.title}</div>
-                    <div className='front'>{myData.sinicizeDataStatic.zongjie.txt}</div>
+                    <div className='txt songFont'>{myData.sinicizeDataStatic.zongjie.title}</div>
+                    {/* <div className='front'>{myData.sinicizeDataStatic.zongjie.txt}</div> */}
                   </div>
 
                 </div>

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

@@ -223,14 +223,14 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
         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' 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)` }} type='normal' nameClick={() => handleNameClick(index)} />
-        if (item.type === 'nodeTurnRight_a') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' nameClick={() => handleNameClick(index)} />
-        if (item.type === 'nodeTurnBottomRight_a') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' nameClick={() => handleNameClick(index)} />
+        if (item.type === 'nodeTurnRight_a') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' />
+        if (item.type === 'nodeTurnBottomRight_a') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' />
         if (item.type === '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' 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)} />
         return res
       })}
@@ -242,14 +242,17 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
     <>
       {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 === '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' />
-        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)` }} type='normal' />
+        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)` }} type='normal' nameClick={() => handleNameClick(index)} />
         if (item.type === 'nodeTurnRight_a') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' />
         if (item.type === 'nodeTurnBottomRight_a') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' />
+        if (item.type === '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)} />
         return res
       })}
     </>

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

@@ -143,9 +143,9 @@
         object-fit: contain;
       }
     }
-    .content {
+    .intro_content {
       width: 80%;
-      height: 45%;
+      height: 200px;
       font-size: 16px;
       color: rgba(209, 201, 178, 1);
       text-align: center;
@@ -186,11 +186,16 @@
         display: flex;
         align-items: center;
         letter-spacing: 10px;
-        padding-top: 40px;
+        padding-top: 60px;
         width: 20%;
         height: 100%;
         font-size: 20px;
         color: rgba(255, 233, 182, 1);
+        .customN {
+          letter-spacing: 5px;
+          padding-top: 20px;
+          font-size: 16px;
+        }
       }
       .info {
         width: 80%;
@@ -200,10 +205,17 @@
         flex-direction: column;
         align-items: center;
         gap: 10px;
+
         .infoitem {
+          &:nth-child(2) {
+            max-height: 38%;
+          }
+          &:nth-child(3) {
+            max-height: 70%;
+          }
           width: 100%;
           height: fit-content;
-          max-height: 50%;
+          max-height: 20%;
           display: flex;
           flex-direction: column;
           gap: 6px;
@@ -219,6 +231,13 @@
             height: fit-content;
             font-size: 15px;
             color: rgba(93, 96, 96, 1);
+            overflow: auto;
+            max-height: calc(100% - 50px);
+
+            &::-webkit-scrollbar {
+              width: 0;
+              height: 0;
+            }
           }
         }
       }
@@ -227,8 +246,8 @@
         bottom: 4%;
         right: 9%;
         cursor: pointer;
-        width: 55px;
-        height: 35px;
+        width: 70px;
+        height: 50px;
         & > img {
           height: 100%;
           object-fit: contain;

src/pages/A6ybwx/Genealogy/index.tsx

@@ -17,13 +17,12 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
   useEffect(() => {
     let timer: NodeJS.Timeout
     if (!isShowIntro) {
-      timer =
+      timer = setTimeout(() => {
+        setGestureState1('state1')
         setTimeout(() => {
-          setGestureState1('state1')
-          setTimeout(() => {
-            setGestureState1('')
-          }, 2000)
-        }, 500)
+          setGestureState1('')
+        }, 2000)
+      }, 500)
     }
     return () => {
       clearTimeout(timer)
@@ -35,26 +34,17 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
       <div className='back' onClick={() => setGotoTab(0)}>
         <img src={require('@/assets/img/btn_back.png')} alt='' />
       </div>
-
       <MemuSider activeTab={1} />
-
       <Graph setCurrentNodeIndex={setCurrentNodeIndex} />
       {/* <SvgGraph /> */}
-
       <div className='icon1' onClick={() => setIsShowIntro(true)}>
         <img src={require('@/assets/img/A6_gen_icon1.png')} alt='' />
       </div>
-
-
-      <div
-        className={`${styles.gesture} ${gestureState1}`}
-        onClick={() => setIsShowGesture(false)}
-      >
+      <div className={`${styles.gesture} ${gestureState1}`} onClick={() => setIsShowGesture(false)}>
         <img src={require('@/assets/img/A6_gen_gesture.png')} draggable='false' alt='' />
         点击查看更多
       </div>
       )
-
       {isShowIntro && (
         <div className={styles.intro}>
           <div className='title'>
@@ -65,26 +55,36 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
           <div className='line'>
             <img src={require('@/assets/img/A6_gen_introline.png')} draggable='false' alt='' />
           </div>
-          <div className='content' dangerouslySetInnerHTML={{ __html: myData?.genealogyIntro?.content }}>
-          </div>
+          <div
+            className='intro_content'
+            dangerouslySetInnerHTML={{ __html: myData?.genealogyIntro?.content }}
+          ></div>
           <div className='close' onClick={() => setIsShowIntro(false)}>
             <img src={require('@/assets/img/closeWithTxt.png')} draggable='false' alt='' />
           </div>
         </div>
       )}
-
       <div className={`${styles.nodeDetail} ${currentNodeIndex !== -1 ? 'showD' : 'hideD'}`}>
         <div className='sider'>
-          <div className='name'>{myData?.genealogyData?.[currentNodeIndex]?.name}</div>
+          <div className='name songFont'>
+            {myData?.genealogyData?.[currentNodeIndex]?.name}
+            <div className='customN songFont'>
+              {myData?.genealogyData?.[currentNodeIndex]?.customN}
+            </div>
+          </div>
           <div className='info'>
-            {myData?.genealogyData?.[currentNodeIndex]?.text?.map((item, index) => (
-              <div className='infoitem' key={index}>
-                <div className='title'>{item?.title}</div>
-                <div className='txt'>
-                  {item?.content}
-                </div>
-              </div>
-            ))}
+            {myData?.genealogyData?.[currentNodeIndex]?.text?.map((item, index) => {
+              if (!!item.content) {
+                return (
+                  <div className='infoitem' key={index}>
+                    <div className='title '>{item?.title}</div>
+                    <div className='txt'>{item?.content}</div>
+                  </div>
+                )
+              } else {
+                return null
+              }
+            })}
           </div>
           <div
             className='close'

src/utils/iosTouch.ts

@@ -0,0 +1,52 @@
+const iosTouch = (id: string) => {
+  let startY = 0;
+  let startX = 0;
+  const scrollContainer = document.getElementById(id);
+  console.log(scrollContainer);
+
+  if (!scrollContainer) {
+    return;
+  }
+
+// 监听触摸事件，阻止顶部下拉溢出
+scrollContainer.addEventListener('touchstart', (e) => {
+  startY = e.touches[0].clientY; // 记录触摸起始位置
+  startX = e.touches[0].clientX; // 记录触摸起始位置
+}, { passive: true });
+
+scrollContainer.addEventListener('touchmove', (e) => {
+  const currentY = e.touches[0].clientY;
+  const currentX = e.touches[0].clientX;
+
+  const scrollTop = scrollContainer.scrollTop;
+  const scrollLeft = scrollContainer.scrollLeft;
+
+  // 当滚动到容器顶部（scrollTop = 0），且继续下拉（currentY > startY），阻止默认行为
+  // if (scrollTop <= 0 && currentY > startY) {
+  //   e.preventDefault();
+  // }
+
+  // 当滚动到容器左侧（scrollLeft = 0），且继续右拉（currentX < startX），阻止默认行为
+  // if (scrollLeft <= 0 && currentX < startX) {
+  //   e.preventDefault();
+  // }
+
+  // 当滚动到容器右侧（scrollLeft >= scrollWidth - clientWidth），且继续左拉（currentX > startX），阻止默认行为
+  // const scrollWidth = scrollContainer.scrollWidth;
+  // const clientWidth = scrollContainer.clientWidth;
+  // if (scrollLeft >= scrollWidth - clientWidth && currentX > startX) {
+  //   e.preventDefault();
+  // }
+
+  // 可选：阻止底部上拉溢出（如果需要）
+  // const scrollHeight = scrollContainer.scrollHeight;
+  // const clientHeight = scrollContainer.clientHeight;
+  // if (scrollTop >= scrollHeight - clientHeight && currentY < startY) {
+  //   e.preventDefault();
+  // }
+
+  startY = currentY; // 更新起始位置
+}, { passive: false }); // 必须设为false，才能触发e.preventDefault()
+}
+
+export default iosTouch;