更新

src/pages/A6ybwx/Genealogy/index.tsx

@@ -58,19 +58,15 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
       {isShowIntro && (
         <div className={styles.intro}>
           <div className='title'>
-            <div className='big'>世系铭远</div>
-            <div className='small'>程哲碑所载家族谱系</div>
+            <div className='big'>{myData?.genealogyIntro?.bigTitle}</div>
+            <div className='small'>{myData?.genealogyIntro?.smallTitle}</div>
             <div className='sun'></div>
           </div>
           <div className='line'>
             <img src={require('@/assets/img/A6_gen_introline.png')} draggable='false' alt='' />
           </div>
           <div className='content'>
-            东魏时期，北魏末年战乱虽让门阀制度略有松动，
-            但家族血缘依旧是社会结构的核心纽带，北魏“以姓定族”“以族定贵”的门阀传统得以延续，家族的政治地位、世系传承与宗族凝聚力成为衡量社会地位的核心标准。
-            程哲碑的碑文通过追溯祖先，将上党程氏家族塑造为世代簪缨的望族。
-            在社会动荡的背景下，以先祖攀附、郡望嫁接来重新构建地方家族门阀秩序显得意义重大，
-            也是这一时期地方家族巩固、提升社会地位潮流的产物。
+            {myData?.genealogyIntro?.content}
           </div>
           <div className='close' onClick={() => setIsShowIntro(false)}>
             <img src={require('@/assets/img/closeWithTxt.png')} draggable='false' alt='' />

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

@@ -8,6 +8,7 @@
   transform: translate(-50%, -50%);
   background: url(../../../../../assets/img/A6_policy_detail_bg.png) no-repeat center center;
   background-size: 100% 100%;
+  overflow: hidden;
   :global {
     .back {
       width: 80px;
@@ -31,24 +32,26 @@
         width: 0;
         height: 0;
       }
-      display: flex;
-      align-items: center;
+
+      .containner2 {
+        width: auto;
+        height: 100%;
+        display: inline-block;
+        white-space: nowrap;
+        overflow-x: hidden;
+      }
       .tabItem {
-        width: fit-content;
+        display: inline-block;
+        width: auto;
+        vertical-align: top;
         height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 1px;
-        position: relative;
         .history1 {
+          display: inline-block;
+          vertical-align: top;
           width: 110px;
           height: 100%;
           background-color: rgba(128, 75, 42, 1);
           box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
-          display: flex;
-          align-items: center;
-          flex-direction: column;
           .txt {
             width: 25px;
             line-height: 25px;
@@ -58,6 +61,7 @@
             color: rgba(255, 233, 182, 1);
             letter-spacing: 7px;
             padding-top: 80px;
+            margin: 0 auto;
           }
           .bottom {
             width: 100%;
@@ -70,20 +74,17 @@
           }
         }
         .historyDetail {
-          width: 1300px;
+          width: auto;
           height: 100%;
-          background: url(../../../../../assets/img/A6_policy_detail_bg.png) no-repeat center center;
-          background-size: 100% 100%;
-          transition: all 0.3s ease-in-out 0.3s;
-          display: flex;
-          align-items: center;
-          gap: 10px;
+          transition: all 0.6s ease-in-out;
+          // display: flex;
+          display: inline-block;
+
           .part1,
-          .part2,
-          .part3,
-          .part4 {
+          .part2 {
+            display: inline-block;
             padding: 35px 20px;
-            width: 300px;
+            width: 340px;
             height: 100%;
             overflow: auto;
             font-size: 16px;
@@ -91,20 +92,20 @@
             letter-spacing: 2px;
             font-weight: 400;
             color: rgba(69, 68, 55, 1);
-            display: flex;
-            flex-direction: column;
+            white-space: normal;
+            transition: width 0.6s ease-in-out, padding 0.86s ease-in-out, opacity 0.3s ease-in-out;
             &::-webkit-scrollbar {
               width: 0;
               height: 0;
             }
           }
-          .part2 {
-            display: flex;
-            justify-content: space-between;
-            .part2txt {
+          .part1 {
+            background: url(../../../../../assets/img/A6_policy_part_bg1.png) no-repeat center
+              center;
+            background-size: 100% 100%;
+            .part1txt {
               width: 100%;
-              height: fit-content;
-              max-height: 60%;
+              height: 80%;
               overflow: auto;
               &::-webkit-scrollbar {
                 width: 0;
@@ -114,7 +115,7 @@
             .from {
               width: 100%;
               height: fit-content;
-              max-height: 40%;
+              max-height: 20%;
               overflow: auto;
               color: rgba(124, 75, 54, 1);
               font-size: 14px;
@@ -126,7 +127,6 @@
               .fromtxt {
                 width: 100%;
                 height: fit-content;
-                margin-bottom: 8px;
               }
               .author {
                 text-align: right;
@@ -135,19 +135,23 @@
               }
             }
           }
-          .part3,
-          .part4 {
+          .part2 {
+            display: inline-block;
             position: relative;
-            width: 320px;
             align-items: center;
+            justify-content: space-between;
             gap: 10px;
+            background: url(../../../../../assets/img/A6_policy_part_bg.png) no-repeat center center;
+            background-size: 100% 100%;
             .imgBox {
               width: 100%;
-              height: 80%;
+              height: 76%;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
               & > img {
-                width: 100%;
-                height: 80%;
-                object-fit: fill;
+                height: 78%;
+                object-fit: contain;
               }
               .from {
                 text-align: center;
@@ -169,6 +173,42 @@
                 font-size: 22px;
                 height: 50%;
               }
+              .changeBar {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-222%, -154%);
+                width: 70px;
+                height: 60px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                gap: 10px;
+                .yuan,
+                .ta {
+                  opacity: 0.6;
+                  width: 70px;
+                  height: 40px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  position: relative;
+                  font-size: 15px;
+                  & > img {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    width: 100%;
+                    height: 100%;
+                    object-fit: contain;
+                  }
+                }
+                .cActive {
+                  opacity: 1;
+                }
+              }
               .time {
                 right: 0;
                 font-size: 16px;
@@ -182,22 +222,15 @@
               line-height: 20px;
               width: 100%;
               height: 20%;
-            }
-          }
-          .part4 {
-            width: 340px;
-            .imgBox {
-              & > img {
-                object-fit: contain;
+              white-space: normal;
+              overflow: auto;
+              &::-webkit-scrollbar {
+                width: 0;
+                height: 0;
               }
             }
           }
         }
-        .historyDetail_hide {
-          width: 0;
-          opacity: 0;
-          transition: all 0.3s ease-in-out;
-        }
       }
     }
 

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

@@ -1,12 +1,19 @@
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import styles from './index.module.scss'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
 function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
   const [currentItem, setCurrentItem] = useState(1)
+
   const originRef = useRef<HTMLDivElement>(null)
   const itemRef = useRef<HTMLDivElement>(null)
   const { myData } = useSelector((state: RootState) => state.A0Layout)
+  const [isOriStates, setIsOriStates] = useState(myData.policy[0].part2.map((item) => item.img ? true : false))
+
+  // 切换tab的时候重置为原碑
+  useEffect(() => {
+    setIsOriStates(myData.policy[currentItem - 1].part2.map(() => true))
+  }, [currentItem, myData.policy])
 
   const handleItemClick = (item: number) => {
     if (currentItem === item) return
@@ -30,60 +37,113 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
     }
   }
 
+  const partChangeCss = (item: number) => {
+    return {
+      width: currentItem === item + 1 ? '340px' : '0',
+      padding: currentItem === item + 1 ? undefined : '0',
+      opacity: currentItem === item + 1 ? '1' : '0'
+    } as React.CSSProperties
+  }
+
+  const part2Src = (part2Item: any, part2Index: number) => {
+    return isOriStates[part2Index] ? part2Item?.img?.[0] || '' : part2Item?.img_ac?.[0] || ''
+  }
+
   return (
     <div className={styles.Policy}>
       <div className='back' onClick={() => setShowTab(0)}>
         <img src={require('@/assets/img/btn_back.png')} alt='' />
       </div>
       <div className='containner' ref={originRef} onWheel={handleWheel}>
-        {myData.policy.map((item, index) => (
-          <div className='tabItem' ref={itemRef} key={item.title}>
-            <div className={`history1`} onClick={() => handleItemClick(index + 1)}>
-              <div className='txt'> {item.title}</div>
-              <div className='bottom'><img src={item.bottomPic} alt="" /></div>
-            </div>
-            <div className={`historyDetail ${currentItem !== index + 1 ? 'historyDetail_hide' : ''}`}>
-              {currentItem === index + 1 && <>
-                <div className='part1'>{item.part1}</div>
-                <div className='part2'>
-                  <div className='part2txt'>{item.part2.txt} </div>
-                  <div className='from'>
-                    <div className='fromtxt'>{item.part2.from} </div>
-                    <div className='author'>{item.part2.author}</div>
-                  </div>
-                </div>
-                <div className='part3'>
-                  <div className='imgBox'>
-                    <img src={item.part3.img} alt='' />
-                    <div className='from'>{item.part3.from}</div>
-                    <div className='name'>{item.part3.name}</div>
-                    <div className='time'>{item.part3.time}</div>
-                  </div>
-                  <div className='desc'>{item.part3.desc}</div>
+        <div className='containner2'>
+          {myData.policy.map((item, index) => (
+            <div className='tabItem' ref={itemRef} key={item.title}>
+              <div className={`history1`} onClick={() => handleItemClick(index + 1)}>
+                <div className='txt'> {item.title}</div>
+                <div className='bottom'>
+                  <img src={item.bottomPic} alt='' />
                 </div>
-                <div className='part4'>
-                  <div className='imgBox'>
-                    <img src={item.part4.img} alt='' />
-                    <div className='from'>{item.part4.from}</div>
-                    <div className='name'>{item.part4.name}</div>
-                    <div className='time'>{item.part4.time}</div>
+
+              </div>
+              <div className={`historyDetail ${currentItem !== 0 ? '' : 'historyDetail_hide'}`}>
+                <>
+                  <div
+                    className='part1'
+                    style={partChangeCss(index)}
+                  >
+                    <div className='part1txt'>{item.part1.txt} </div>
+                    <div className='from'>
+                      <div className='fromtxt'>{item.part1.from} </div>
+                      <div className='author'>{item.part1.author}</div>
+                    </div>
                   </div>
-                  <div className='desc'>{item.part4.desc}</div>
-                </div>
-              </>}
+                  {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'>
+                          {isOriStates[part2Index] ? part2Item.from : part2Item.from_ac}
+                        </div>
+                        <div className='name'>
+                          {isOriStates[part2Index] ? part2Item.name : part2Item.name_ac}
+                        </div>
+                        <div className='time'>
+                          {part2Item.time}
+                        </div>
+                        <div className='changeBar'>
+                          <div
+                            className={`yuan ${isOriStates[part2Index] ? 'cActive' : ''}`}
+                            style={{ display: part2Item?.img ? 'flex' : 'none' }}
+                            onClick={() =>
+                              setIsOriStates(prev =>
+                                prev.map((item, index) => (index === part2Index ? !item : item))
+                              )
+                            }
+                          >
+                            原碑
+                            <img src={require('@/assets/img/A6_policy_btn.png')} alt='' />
+                          </div>
+                          <div
+                            className={`ta ${!isOriStates[part2Index] ? 'cActive' : ''}`}
+                            style={{ display: part2Item?.img_ac ? 'flex' : 'none' }}
+                            onClick={() =>
+                              setIsOriStates(prev =>
+                                prev.map((item, index) => (index === part2Index ? !item : item))
+                              )
+                            }
+                          >
+                            拓片
+                            <img src={require('@/assets/img/A6_policy_btn.png')} alt='' />
+                          </div>
+                        </div>
+                      </div>
+                      <div className='desc'>{part2Item.desc}</div>
+                    </div>
+                  ))}
+                </>
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
+        </div>
       </div>
-      <div className="timeLine">
-        <div className="lineContainner" />
+      <div className='timeLine'>
+        <div className='lineContainner' />
         {myData.policy.map((item, index) => (
-          <div className="dot" key={item.title}>
-            <div className="txt">{item.title}</div>
-            <img src={require(`@/assets/img/A7base3_icon${currentItem - 1 === index ? '' : '_n'}.png`)} alt='' />
+          <div className='dot' key={item.title}>
+            <div className='txt'>{item.title}</div>
+            <img
+              src={require(`@/assets/img/A7base3_icon${currentItem - 1 === index ? '' : '_n'}.png`)}
+              alt=''
+            />
           </div>
         ))}
-
       </div>
     </div>
   )

src/types/declaration.d.ts

@@ -71,6 +71,11 @@ type MyDataType = {
     }[]
   }[]
   // 家族谱系
+  genealogyIntro: {
+    bigTitle: string
+    smallTitle: string
+    content: string
+  }
   genealogyData: {
     name: string
     customN?: string
@@ -117,25 +122,20 @@ type MyDataType = {
   policy: {
       title: string
       bottomPic: string
-    part1:string
-    part2: {
+    part1: {
       txt: string
       from: string
       author: string
     }
-    part3: {
-      desc: string
-      img: string
-      from: string
-      name: string
-      time: string
-    }
-    part4: {
+    part2: {
       desc: string
-      img: string
+      img: string[]
       from: string
       name: string
       time: string
-    }
+      img_ac: string[]
+      from_ac: string
+      name_ac: string
+    }[]
   }[]
   }