update

public/myData/myData.js

@@ -952,6 +952,7 @@ const myDataTemp = {
     {
       type: '中国传统绘画',
       name: '阴线刻',
+      lineSrc: './myData/img/yinxianke_line.png',
       intro:
         '除主尊以外的其余部分，引入了中国传统绘画的线条雕刻，反映出浓郁的中国传统文化特色，也是佛教艺术进一步汉化的结果。',
       imgItems: [
@@ -961,13 +962,14 @@ const myDataTemp = {
         },
         {
           src: './myData/img/yinxianke2.png',
-          title: '北魏洛阳石棺 闵子骞孝行图'
+          title: '北魏洛阳石棺<br/>闵子骞孝行图'
         }
       ]
     },
     {
       type: '汉地服饰',
       name: '供养人',
+      lineSrc: './myData/img/gongyangren_line.png',
       intro: '底部供养人刻画细致，服饰冠带皆具汉地特色，反映出当时社会风貌与信仰阶层的构成。',
       imgItems: [
         {
@@ -979,6 +981,7 @@ const myDataTemp = {
     {
       type: '中西融合',
       name: '护法狮子丶飞天',
+      lineSrc: './myData/img/shizi_line.png',
       intro:
         '碑侧所刻护法狮子，则融合了中亚装饰风格，形态威猛，结构紧凑。佛龛两侧的飞天形象灵动，衣纹流畅如行云流水，线条疏密有致，技艺高超。',
       imgItems: [

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

@@ -284,16 +284,62 @@
         }
       }
 
-      .foxiang {
-        transform: translate(5%, -41%);
+      .foxiang0,
+      .foxiang1,
+      .foxiang2,
+      .foxiang3 {
+        position: relative;
+        transform: translate(122%, -40%);
         width: 400px;
         height: 150%;
+        .foxiangLine {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 100%;
+          object-fit: contain;
+        }
 
         & > img {
           height: 100%;
           object-fit: cover;
         }
       }
+
+      .foxiang0 {
+        .foxiangLine {
+          transform: translate(-59%, -63%);
+          width: 75%;
+          height: 42%;
+        }
+      }
+
+      .foxiang1 {
+        .foxiangLine {
+          transform: translate(-57%, -87%);
+          width: 81%;
+          height: 30%;
+        }
+      }
+
+      .foxiang2 {
+        transform: translate(122%, -47%);
+        .foxiangLine {
+          transform: translate(-69%, 89%);
+          width: 40%;
+          height: 17%;
+        }
+      }
+
+      .foxiang3 {
+        transform: translate(122%, -65%);
+        .foxiangLine {
+          transform: translate(-57%, 22%);
+          width: 81%;
+          height: 30%;
+        }
+      }
     }
   }
 }

src/pages/A6ybwx/A6_1_zxys/index.tsx

@@ -7,12 +7,14 @@ import { useSelector } from 'react-redux'
 
 function Zaoxiang() {
 
- const {myData} = useSelector((state: RootState) => state.A0Layout)
+  const { myData } = useSelector((state: RootState) => state.A0Layout)
 
   const [currentType, setCurrentType] = useState('')
   const [isShowDetail, setIsShowDetail] = useState(false)
 
   const currentItem = React.useMemo(() => myData.zaoxiangDataDetail.find(item => item.type === currentType), [currentType, myData.zaoxiangDataDetail])
+  const currentItemIndex = React.useMemo(() => myData.zaoxiangDataDetail.findIndex(item => item.type === currentType), [currentType, myData.zaoxiangDataDetail])
+
 
   const handleDotClick = (type: string) => {
     setCurrentType(type)
@@ -74,17 +76,17 @@ function Zaoxiang() {
             </div>
             <div className='preview'>
               {currentItem?.imgItems.map((item, index) => (
-                <div className='previewItem' key={index}>
+                <div className='previewItem' key={index} onClick={() =>
+                  store.dispatch({
+                    type: 'layout/lookBigImg',
+                    payload: { url: item.src, show: true }
+                  })
+                }>
                   <div className='pic'>
                     <img src={item.src} draggable='false' alt='' />
                   </div>
-                  <div className='txt'>{item.title}</div>
-                  <div className='icon3' onClick={() =>
-                    store.dispatch({
-                      type: 'layout/lookBigImg',
-                      payload: { url: item.src, show: true }
-                    })
-                  }>
+                  <div className='txt' dangerouslySetInnerHTML={{ __html: item.title }}></div>
+                  <div className='icon3' >
                     <img
                       src={require('@/assets/img/A6_zaoxiang_foxiang_zoomIn.png')}
                       draggable='false'
@@ -94,8 +96,9 @@ function Zaoxiang() {
                 </div>
               ))}
             </div>
-            <div className='foxiang'>
+            <div className={`foxiang${currentItemIndex}`}>
               <img src={require('@/assets/img/A6_zaoxiang_foxiang.png')} draggable='false' alt='' />
+              <img className={`foxiangLine`} src={currentItem?.lineSrc} draggable='false' alt='' />
             </div>
           </div>
         </div>)}

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

@@ -76,6 +76,11 @@
     width: 100%;
     object-fit: contain;
   }
+  &.state1 {
+    & > img {
+      animation: gestureState1 2s linear;
+    }
+  }
 }
 
 .intro {

src/pages/A6ybwx/Genealogy/index.tsx

@@ -8,11 +8,17 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
   const [currentNodeIndex, setCurrentNodeIndex] = useState(-1)
   const [isShowGesture, setIsShowGesture] = useState(true)
 
+  const [gestureState1, setGestureState1] = useState('')
+
   useEffect(() => {
     if (!isShowIntro) setTimeout(() => {
-      setIsShowGesture(false)
-    }, 2000)
+      setGestureState1('state1')
+      setTimeout(() => {
+        setGestureState1('')
+      }, 2000)
+    }, 500)
   }, [isShowIntro])
+
   return (
     <div className={styles.Genealogy}>
       <div className='back' onClick={() => setGotoTab(0)}>
@@ -26,7 +32,7 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
       <Graph setCurrentNodeIndex={setCurrentNodeIndex} />
       {/* <SvgGraph /> */}
 
-      {isShowGesture && <div className={styles.gesture} onClick={() => setIsShowGesture(false)}>
+      {isShowGesture && <div className={`${styles.gesture} ${gestureState1}`} onClick={() => setIsShowGesture(false)}>
         <img src={require('@/assets/img/A6_gen_gesture.png')} draggable='false' alt='' />
         点击查看更多
       </div>}

src/types/declaration.d.ts

@@ -63,6 +63,7 @@ declare const F_Video: any
   zaoxiangDataDetail: {
     type: string
     name: string
+    lineSrc: string
     intro: string
     imgItems: {
       src: string