更新

src/App.tsx

@@ -163,6 +163,36 @@ export default function App() {
   // }
   // }, [])
 
+
+  useEffect(() => {
+    // 添加状态跟踪自动旋转
+    let timer: NodeJS.Timeout
+
+    window.onModelControlled = () => {
+      console.log('djl')
+      callIframeFu('setModelAutoRotation', 0)
+      resetTimer()
+    }
+
+    const resetTimer = () => {
+      timer = setTimeout(() => {
+        if (window.currentChangePanelIndex === 0 || window.currentChangePanelIndex === 4) {
+          console.log(window.currentChangePanelIndex)
+          callIframeFu('setModelAutoRotation', -0.5)
+          isAutoRotating.current = true
+        }
+      }, 3000)
+    }
+
+    // 初始化计时器
+    setTimeout(() => {
+      resetTimer()
+    }, 1000)
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [])
+
   useEffect(() => {
     rootRef.current = document.querySelector('#root')
     rootRef.current.style.width = planSize.width + 'px'
@@ -181,12 +211,16 @@ export default function App() {
       callIframeFu('changePanel', 0)
       callIframeFu('showInscription', -1)
       callIframeFu('showHotspot', -1)
+      window.onModelControlled()
     }
     if (window.location.hash === '#/yblm') {
       callIframeFu('changePanel', 1)
       callIframeFu('showInscription', -1)
       callIframeFu('showHotspot', -1)
     }
+    if (window.location.hash === '#/ybwx' || window.location.hash === '#/yblm' || window.location.hash === '#/wjwj') {
+      callIframeFu('setModelAutoRotation', 0)
+    }
     if (window.location.hash === '#/beie') {
       callIframeFu('changePanel', 3)
       callIframeFu('showInscription', 0)
@@ -195,7 +229,8 @@ export default function App() {
       callIframeFu('changePanel', 3)
       callIframeFu('showInscription', -1)
     }
-    if (window.location.hash === '#/wenwu') {
+    if (window.location.hash.includes('wenwu')) {
+      window.onModelControlled()
       callIframeFu('changePanel', 4)
       callIframeFu('showInscription', -1)
       callIframeFu('showHotspot', -1)
@@ -208,59 +243,6 @@ export default function App() {
     }
   }, [])
 
-  useEffect(() => {
-    // 添加状态跟踪自动旋转
-    let timer: NodeJS.Timeout
-
-    window.onModelControlled = () => {
-      callIframeFu('setModelAutoRotation', 0)
-      resetTimer()
-    }
-
-    const resetTimer = () => {
-      // 清除现有计时器
-      if (timer) clearTimeout(timer)
-
-      // 重置计时器并检查旋转状态
-      timer = setTimeout(() => {
-        if (window.currentChangePanelIndex === 0 || window.currentChangePanelIndex === 4) {
-          console.log(window.currentChangePanelIndex)
-          callIframeFu('setModelAutoRotation', -0.5)
-          isAutoRotating.current = true
-        }
-      }, 3000)
-
-      // 如果正在旋转则取消
-      if (isAutoRotating.current) {
-        callIframeFu('setModelAutoRotation', 0)
-        isAutoRotating.current = false
-      }
-    }
-
-    // 初始化计时器
-    resetTimer()
-
-    // 操作事件监听
-    const handleUserAction = () => {
-      resetTimer()
-    }
-
-    document.addEventListener('click', handleUserAction)
-    document.addEventListener('touchstart', handleUserAction)
-
-    return () => {
-      clearTimeout(timer)
-      document.removeEventListener('click', handleUserAction)
-      document.removeEventListener('touchstart', handleUserAction)
-    }
-  }, [])
-
-  document.addEventListener('click', () => {
-    if (window.currentChangePanelIndex === 0 || window.currentChangePanelIndex === 4) {
-      console.log(window.currentChangePanelIndex)
-      callIframeFu('setModelAutoRotation', 0)
-    }
-  })
 
   // 更新unity页面
   useEffect(() => {

src/pages/A0base/index.module.scss

@@ -44,6 +44,7 @@
           line-height: 24px;
           letter-spacing: 2px;
           color: #504e40;
+          opacity: 0.7;
           text-align: justify;
           font-weight: 400;
         }

src/pages/A5wenwu/index.tsx

@@ -63,6 +63,7 @@ function A5wenwu() {
   }
 
   const gotoBack = () => {
+    callIframeFu('setModelAutoRotation', 0)
     const urlAll = window.location.href
     callIframeFu('hideSize', undefined)
     if (urlAll.includes('?m=')) {

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

@@ -0,0 +1,251 @@
+.Policy {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 3;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #ccc;
+  :global {
+    .back {
+      width: 80px;
+      height: 40px;
+      position: absolute;
+      z-index: 3;
+      top: 3%;
+      left: 4%;
+      cursor: pointer;
+
+      & > img {
+        height: 100%;
+        object-fit: fill;
+      }
+    }
+    .containner {
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
+      display: flex;
+      align-items: center;
+      .tabItem {
+        width: fit-content;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1px;
+        position: relative;
+        .history1 {
+          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;
+            height: 46%;
+            font-size: 20px;
+            writing-mode: vertical-rl;
+            color: rgba(255, 233, 182, 1);
+            letter-spacing: 7px;
+            padding-top: 80px;
+          }
+          .bottom {
+            width: 100%;
+            height: 54%;
+            background: url(../../../../../assets/img/A6_policy_tab1.png) no-repeat center center;
+            background-size: 100% 100%;
+          }
+        }
+        .historyDetail {
+          width: 1300px;
+          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;
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          .part1,
+          .part2,
+          .part3,
+          .part4 {
+            padding: 35px 20px;
+            width: 300px;
+            height: 100%;
+            overflow: auto;
+            font-size: 16px;
+            line-height: 24px;
+            letter-spacing: 2px;
+            font-weight: 400;
+            color: rgba(69, 68, 55, 1);
+            display: flex;
+            flex-direction: column;
+            &::-webkit-scrollbar {
+              width: 0;
+              height: 0;
+            }
+          }
+          .part2 {
+            display: flex;
+            justify-content: space-between;
+            .part2txt {
+              width: 100%;
+              height: fit-content;
+              max-height: 60%;
+              overflow: auto;
+              &::-webkit-scrollbar {
+                width: 0;
+                height: 0;
+              }
+            }
+            .from {
+              width: 100%;
+              height: fit-content;
+              max-height: 40%;
+              overflow: auto;
+              color: rgba(124, 75, 54, 1);
+              font-size: 14px;
+              line-height: 16px;
+              &::-webkit-scrollbar {
+                width: 0;
+                height: 0;
+              }
+              .fromtxt {
+                width: 100%;
+                height: fit-content;
+                margin-bottom: 8px;
+              }
+              .author {
+                text-align: right;
+                width: 100%;
+                height: fit-content;
+              }
+            }
+          }
+          .part3,
+          .part4 {
+            position: relative;
+            width: 320px;
+            align-items: center;
+            gap: 10px;
+            .imgBox {
+              width: 100%;
+              height: 80%;
+              & > img {
+                width: 100%;
+                height: 80%;
+                object-fit: fill;
+              }
+              .from {
+                text-align: center;
+                height: 20%;
+                width: 100%;
+                font-size: 14px;
+                line-height: 16px;
+                color: rgba(124, 75, 54, 0.7);
+              }
+              .name,
+              .time {
+                writing-mode: vertical-lr;
+                position: absolute;
+                right: 15%;
+                top: 50%;
+                transform: translateY(-80%);
+                width: 20px;
+                text-align: center;
+                font-size: 22px;
+                height: 50%;
+              }
+              .time {
+                right: 0;
+                font-size: 16px;
+                width: 40px;
+                text-align: left;
+                line-height: 20px;
+              }
+            }
+            .desc {
+              letter-spacing: 0px;
+              line-height: 20px;
+              width: 100%;
+              height: 20%;
+            }
+          }
+          .part4 {
+            width: 340px;
+            .imgBox {
+              & > img {
+                object-fit: contain;
+              }
+            }
+          }
+        }
+        .historyDetail_hide {
+          width: 0;
+        }
+      }
+    }
+
+    .timeLine {
+      position: absolute;
+      z-index: 4;
+      bottom: -10px;
+      left: 15%;
+      width: 600px;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      .dot {
+        align-self: flex-start;
+        width: 60px;
+        height: 35px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        margin: 0 50px;
+        .txt {
+          width: 100%;
+          height: 15px;
+          font-size: 12px;
+          line-height: 16px;
+          text-align: center;
+          letter-spacing: 1px;
+          color: rgba(69, 68, 55, 1);
+        }
+        & > img {
+          height: 24px;
+          object-fit: contain;
+        }
+      }
+      .lineContainner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+        height: 2px;
+        display: flex;
+        align-items: center;
+        background: linear-gradient(
+          90deg,
+          rgba(93, 96, 96, 0.2) 0%,
+          rgba(93, 96, 96, 1) 50%,
+          rgba(93, 96, 96, 0.2) 100%
+        );
+        background-size: 5px 2px;
+        background-repeat: repeat-x;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,92 @@
+import React, { useState, useRef } 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 handleItemClick = (item: number) => {
+    if (currentItem === item) return
+    setCurrentItem(item)
+
+    // 点击时将对应年份项滚动到最左边
+    if (itemRef.current && originRef.current) {
+      const scrollPosition = [0, 110, 220, 330, 440][item - 1]
+      console.log(scrollPosition)
+      originRef.current.scrollTo({
+        left: scrollPosition,
+        behavior: 'smooth'
+      })
+    }
+  }
+
+  // 处理滚轮事件
+  const handleWheel = (e: any) => {
+    if (originRef.current) {
+      originRef.current.scrollLeft += e.deltaY
+    }
+  }
+
+  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}>
+            <div className={`history1`} onClick={() => handleItemClick(index + 1)}>
+              <div className='txt'> {item.title}</div>
+              <div className='bottom'></div>
+            </div>
+            <div className={`historyDetail ${currentItem !== 1 ? 'historyDetail_hide' : ''}`}>
+              <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>
+              <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='desc'>{item.part4.desc}</div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      <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>
+        ))}
+
+      </div>
+    </div>
+  )
+}
+
+const MemoPolicy = React.memo(Policy)
+
+export default MemoPolicy

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

@@ -0,0 +1,763 @@
+.sang {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 5;
+  width: 100%;
+  height: 100%;
+  background: url('../../../../../assets/img/A6_sangzang_bg.png') no-repeat center center;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  :global {
+    .main {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 20px;
+      transition: all 0.6s ease-in-out;
+      .lHidding {
+        width: 300px;
+        height: 100%;
+        background: url('../../../../../assets/img/A6_sangzang_hidContent.png') no-repeat center
+          center;
+        background-size: 100% 100%;
+        position: absolute;
+        z-index: 1;
+        top: 50%;
+        left: 0;
+        transform: translate(-88%, -50%);
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        transition: all 0.6s ease-in-out;
+        .lHidding_left {
+          position: absolute;
+          left: 0;
+          transform: translateX(-239px);
+          width: 525px;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          background: url('../../../../../assets/img/A6_sangzang_hidding_left.png') no-repeat center
+            center;
+          background-size: 100% 100%;
+          transition: all 0.6s ease-in-out;
+          .detail_info1 {
+            width: 300px;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            transition: all 0.6s ease-in-out;
+            .imgBox {
+              position: relative;
+              width: 80%;
+              height: 50%;
+              .pic {
+                width: 100%;
+                height: 100%;
+                background: url('../../../../../assets/img/A6_sangzang_yp.png') no-repeat center
+                  center;
+                background-size: contain;
+              }
+            }
+            .txt,
+            .title,
+            .time {
+              width: 85%;
+              height: 20px;
+              font-size: 16px;
+              line-height: 24px;
+              font-weight: 400;
+              color: rgba(69, 68, 55, 1);
+              text-align: center;
+            }
+            .txt {
+              line-height: 16px;
+              font-size: 15px;
+              height: 40px;
+              color: rgba(69, 68, 55, 0.8);
+            }
+            .title {
+              height: 16px;
+              color: rgba(124, 75, 54, 1);
+              font-size: 25px;
+              letter-spacing: 1px;
+            }
+            .time {
+              color: rgba(175, 135, 100, 1);
+            }
+          }
+          .detail_info2 {
+            width: calc(100% - 330px);
+            height: 74%;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            transition: all 0.6s ease-in-out;
+            .title_info2 {
+              width: fit-content;
+              position: relative;
+              height: 60px;
+              font-size: 26px;
+              color: rgba(124, 75, 54, 1);
+              &::after {
+                content: '';
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                height: 10px;
+                background: url('../../../../../assets/img/A6_sinicize_line2.png') no-repeat center
+                  center;
+                background-size: 100% 100%;
+              }
+            }
+            .txt_info2 {
+              width: 100%;
+              height: 80%;
+              font-size: 16px;
+              line-height: 24px;
+              letter-spacing: 1px;
+              font-weight: 400;
+              color: #504e40;
+              overflow: auto;
+              &::-webkit-scrollbar {
+                width: 0;
+                height: 0;
+              }
+            }
+          }
+        }
+        .lHidding_right {
+          width: 300px;
+          height: 100%;
+          padding-right: 20px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 10px;
+          transition: all 0.3s ease-in-out;
+          opacity: 0;
+          pointer-events: none;
+
+          .imgBox {
+            position: relative;
+            width: 75%;
+            height: 60%;
+            .pic {
+              width: 100%;
+              height: 100%;
+              background: url('../../../../../assets/img/A6_sangzang_yp2.png') no-repeat center
+                center;
+              background-size: contain;
+            }
+            .zoomIn {
+              width: 30px;
+              height: 30px;
+              position: absolute;
+              bottom: -1%;
+              right: 2%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+
+              & > img {
+                height: 20px;
+                width: 20px;
+                object-fit: contain;
+              }
+            }
+          }
+          .txt,
+          .title,
+          .time {
+            width: 85%;
+            height: 20px;
+            font-size: 16px;
+            line-height: 24px;
+            font-weight: 400;
+            color: rgba(69, 68, 55, 1);
+            text-align: center;
+          }
+          .txt {
+            line-height: 16px;
+            font-size: 15px;
+            height: 30px;
+            color: rgba(69, 68, 55, 0.8);
+          }
+          .title {
+            height: 16px;
+            color: rgba(124, 75, 54, 1);
+            font-size: 25px;
+            letter-spacing: 1px;
+          }
+          .time {
+            color: rgba(175, 135, 100, 1);
+          }
+        }
+        .open {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          right: -6%;
+          width: 50px;
+          height: 50px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          transition: all 0.3s ease-in-out;
+
+          .openPic {
+            background: url('../../../../../assets/img/A6_sangzang_hidRight.png') no-repeat center
+              center;
+            background-size: 100% 100%;
+            height: 100%;
+            width: 100%;
+            object-fit: contain;
+            animation: opacityChange 3s infinite ease-in-out;
+          }
+        }
+      }
+      .left {
+        width: 250px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        transition: all 0.3s ease-in-out;
+        position: relative;
+        .pic {
+          width: 84%;
+          height: 90%;
+          background-size: contain;
+          transition: all 0.3s ease-in-out;
+        }
+        .operate {
+          opacity: 0;
+          pointer-events: none;
+          padding-top: 45px;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 100%;
+          height: 90%;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          text-align: center;
+          gap: 6px;
+          padding-bottom: 50px;
+          font-size: 22px;
+          color: rgba(255, 233, 182, 1);
+          cursor: pointer;
+          .beiwen1 {
+            width: 25%;
+            height: 100%;
+            line-height: 47px;
+            writing-mode: vertical-rl;
+          }
+          .beiwen2 {
+            width: 18%;
+            height: 100%;
+            line-height: 37px;
+            writing-mode: vertical-rl;
+          }
+          .beiwen3 {
+            width: 37%;
+            height: 100%;
+            line-height: 110px;
+            writing-mode: vertical-rl;
+          }
+        }
+      }
+      .right {
+        width: 50%;
+        height: 60%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        transition: all 0.3s ease-in-out;
+        .content {
+          width: 68%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          transition: all 0.3s ease-in-out;
+          .title {
+            width: 100%;
+            font-size: 26px;
+            max-width: 100%;
+            font-size: 26px;
+            color: #fff;
+            border-bottom: 1px solid rgba(93, 96, 96, 0.4);
+          }
+
+          .text {
+            width: 90%;
+            height: fit-content;
+            max-height: 300px;
+            font-size: 16px;
+            line-height: 24px;
+            letter-spacing: 2px;
+            color: #504e40;
+            text-align: justify;
+            font-weight: 400;
+            overflow: auto;
+            &::-webkit-scrollbar {
+              width: 0px;
+              height: 0px;
+            }
+          }
+
+          .btn {
+            padding-top: 10px;
+            font-size: 14px;
+            color: rgba(93, 96, 96, 1);
+            cursor: pointer;
+            position: relative;
+
+            &::before {
+              content: '';
+              position: absolute;
+              left: 55px;
+              top: 8px;
+              width: 22px;
+              height: 22px;
+              background-image: url('../../../../../assets/sgImg/icon_more.png');
+              background-size: 100% 100%;
+            }
+          }
+        }
+      }
+    }
+    .mainAc {
+      width: 100%;
+      justify-content: flex-end;
+      gap: 0;
+      .lHidding {
+        width: 66%;
+        transform: translate(-3%, -50%);
+        .lHidding_left {
+          transform: translateX(0);
+        }
+        .open {
+          right: -2%;
+          .openPic {
+            background: url('../../../../../assets/img/A6_sangzang_hidLeft.png') no-repeat center
+              center;
+            background-size: 100% 100%;
+          }
+        }
+      }
+      .showRight {
+        width: 97%;
+
+        .lHidding_right {
+          transition: all 0.3s ease-in-out 0.3s;
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+      .left {
+        .pic {
+          width: 100%;
+        }
+      }
+      .right {
+        width: 0;
+        opacity: 0;
+        .content {
+          width: 85%;
+        }
+      }
+    }
+
+    // 点击tab后的样式
+    .mainShow_tab1,
+    .mainShow_tab2,
+    .mainShow_tab3,
+    .mainShow_tab4 {
+      padding-left: 190px;
+      .lHidding {
+        width: 330px;
+        transform: translate(-7%, -50%);
+        background: url('../../../../../assets/img/A6_sangzang_hidContent_r.png') no-repeat center
+          center;
+        background-size: 100% 100%;
+        .lHidding_left {
+          display: none;
+        }
+        .lHidding_right {
+          width: 330px;
+          opacity: 1;
+          pointer-events: auto;
+        }
+        .open {
+          opacity: 0;
+          pointer-events: none;
+        }
+      }
+      .left {
+        transition: all 0.6s ease-in-out;
+      }
+      .right {
+        width: 39%;
+        transition: all 0.6s ease-in-out;
+        .title {
+          display: none;
+        }
+        .content {
+          width: 92%;
+          transition: all 0.6s ease-in-out;
+        }
+      }
+    }
+
+    .mainShow_tab1 {
+      .lHidding {
+        .lHidding_right {
+          .imgBox {
+            .pic {
+              background: url('../../../../../assets/img/A6_sangzang_tab1.png') no-repeat center
+                center;
+              background-size: 100% 100%;
+            }
+          }
+        }
+      }
+
+      .left {
+        .operate {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+    }
+
+    .mainShow_tab2 {
+      padding-left: 140px;
+      .lHidding {
+        .lHidding_right {
+          .imgBox {
+            .pic {
+              background: url('../../../../../assets/img/A6_sangzang_tab2.png') no-repeat center
+                center;
+              background-size: 100% 100%;
+            }
+          }
+        }
+      }
+
+      .left {
+        width: 300px;
+        .pic {
+          right: 17%;
+          top: 3%;
+          transform: scale(1.4);
+          position: relative;
+          width: 100%;
+          height: 100%;
+          background-position: center top;
+          background-size: cover;
+        }
+      }
+    }
+
+    .mainShow_tab3,
+    .mainShow_tab4 {
+      .lHidding {
+        transform: translate(-88%, -50%);
+        .lHidding_right {
+          width: 330px;
+        }
+      }
+      .left {
+        width: 300px;
+        .pic {
+          right: 27%;
+          top: 3%;
+          transform: scale(1.6);
+          position: relative;
+          width: 100%;
+          height: 100%;
+          background-position: center top;
+          background-size: cover;
+        }
+      }
+      .right {
+        width: 50%;
+        .content {
+          width: 75%;
+        }
+      }
+    }
+
+    .mainShow_tab4 {
+      .left {
+        .pic {
+          top: 37%;
+        }
+      }
+    }
+
+    .back {
+      width: 80px;
+      height: 40px;
+      position: absolute;
+      z-index: 1;
+      top: 3%;
+      left: 4%;
+      cursor: pointer;
+
+      & > img {
+        height: 100%;
+        object-fit: fill;
+      }
+    }
+    .A6_tabBar {
+      width: 50px;
+      height: 260px;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      position: absolute;
+      z-index: 2;
+      top: 51%;
+      right: 5%;
+      gap: 20px;
+      transform: translateY(-50%);
+
+      .tab {
+        transition: all 0.3s ease-in-out;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: url(../../../../../assets/img/btn_tab.png) no-repeat center center;
+        background-size: 100% 100%;
+        width: 60px;
+        height: 60px;
+        font-size: 14px;
+        text-align: center;
+        line-height: 15px;
+        letter-spacing: 1px;
+        font-size: 12px;
+        font-weight: 500;
+        color: #fbebbd;
+        cursor: pointer;
+      }
+
+      .tab_active {
+        background: url(../../../../../assets/img/btn_tabAc.png) no-repeat center center;
+        background-size: 100% 100%;
+        color: rgba(166, 118, 67, 1);
+      }
+    }
+    .A6_tabBar_hide {
+      opacity: 0;
+      pointer-events: none;
+      transition: all 0.3s ease-in-out;
+    }
+
+    .geshi {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: 1;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: url('../../../../../assets/img/A6_sangzang_bg.png') no-repeat center center;
+      background-size: 100% 100%;
+      display: flex;
+      padding: 0 20px;
+      align-items: center;
+      transition: all 0.3s ease-in-out;
+      .geshi_left {
+        width: 45%;
+        height: 100%;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        .pic {
+          width: 80%;
+          height: 95%;
+          background-size: contain;
+        }
+      }
+      .geshi_right {
+        width: 55%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        .top {
+          width: 100%;
+          height: 90px;
+          display: flex;
+          align-items: center;
+          gap: 80px;
+          .tab0,
+          .tab1,
+          .tab2 {
+            width: fit-content;
+            min-width: 70px;
+            height: 90px;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            gap: 6px;
+            cursor: pointer;
+            position: relative;
+
+            & > img {
+              width: 60px;
+              object-fit: cover;
+            }
+
+            .tabNub {
+              transition: all 0.3s ease-in-out;
+              font-size: 18px;
+              position: absolute;
+              top: 34%;
+              left: 50%;
+              transform: translate(-55%, -68%);
+              color: rgba(255, 233, 182, 0.6);
+            }
+
+            .tabNubAc {
+              color: rgba(255, 233, 182, 1);
+            }
+
+            .txt {
+              font-size: 16px;
+              line-height: 15px;
+              text-align: center;
+              font-weight: lighter;
+              color: rgba(255, 255, 255, 1);
+              width: 200%;
+              font-weight: 700;
+            }
+            .txtAc {
+              opacity: 0.4;
+            }
+          }
+        }
+        .content {
+          width: 95%;
+          height: 68%;
+          font-size: 16px;
+          line-height: 24px;
+          letter-spacing: 2px;
+          font-weight: 400;
+          color: rgba(69, 68, 55, 1);
+          overflow: auto;
+          &::-webkit-scrollbar {
+            width: 0px;
+            height: 0px;
+          }
+        }
+      }
+    }
+    .geshiHide {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .mzwHot {
+      opacity: 0;
+      pointer-events: none;
+      transition: all 0.3s ease-in-out;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: 1;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: rgba(0, 0, 0, 0.7);
+      backdrop-filter: blur(3px);
+      display: flex;
+      padding: 6px 20px;
+      align-items: center;
+      gap: 10px;
+      .mzwHotL {
+        width: 37%;
+        height: 100%;
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .mPic {
+          padding: 6px 10px;
+          width: 90%;
+          height: 98%;
+          background: url(../../../../../assets/img/A6_sangzang_tab1.png) no-repeat center center;
+          background-size: 100% 100%;
+        }
+      }
+      .mzwHotR {
+        padding-top: 10px;
+        width: 60%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        .mtitle,
+        .mtext {
+          font-size: 16px;
+          line-height: 24px;
+          letter-spacing: 2px;
+          font-weight: 400;
+          color: rgba(255, 233, 182, 1);
+        }
+        .mtitle {
+          padding: 20px 0;
+          font-size: 20px;
+          width: 100%;
+          height: 50px;
+        }
+        .mtext {
+          width: 100%;
+          height: fit-content;
+          max-height: 80%;
+          color: rgba(255, 255, 255, 1);
+          overflow: auto;
+          &::-webkit-scrollbar {
+            width: 0px;
+            height: 0px;
+          }
+        }
+      }
+      .mzwclose {
+        width: 70px;
+        height: 50px;
+        position: absolute;
+        top: 14px;
+        right: 63px;
+        & > img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+        cursor: pointer;
+      }
+    }
+
+    .mzwHot_show {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}

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

@@ -0,0 +1,206 @@
+import React, { useState, useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+
+
+function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
+  const [currentTab, setCurrentTab] = useState('tab0')
+  const [isShowTabBar, setIsShowTabBar] = useState(true)
+  const [isShowHidContent, setIsShowHidContent] = useState(false)
+  const [isShowHidContentRight, setIsShowHidContentRight] = useState(false)
+  const [isShowMzwHot, setIsShowMzwHot] = useState(false)
+  const [selectedGeshi, setSelectedGeshi] = useState(0)
+  const { myData } = useSelector((state: RootState) => state.A0Layout)
+
+  const picRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (isShowHidContent || isShowMzwHot) {
+      setIsShowTabBar(false)
+    } else {
+      setIsShowTabBar(true)
+    }
+  }, [isShowHidContent, isShowMzwHot])
+
+  useEffect(() => {
+    if (selectedGeshi !== 0) {
+      setIsShowTabBar(false)
+    }
+    else {
+      setIsShowTabBar(true)
+    }
+
+  }, [selectedGeshi])
+
+
+
+  const handleTabClick = (tab: string) => {
+    if (tab === currentTab) {
+      setCurrentTab('tab0')
+      return
+    }
+    setCurrentTab(tab)
+  }
+
+  console.log(currentTab)
+
+  return (
+    <div className={styles.sang}>
+      <div className='back' onClick={() => setShowTab(0)}>
+        <img src={require('@/assets/img/btn_back.png')} alt='' />
+      </div>
+      <div
+        className={`main ${isShowHidContent ? 'mainAc' : currentTab === 'tab0' ? '' : 'mainShow_' + currentTab
+          }`}
+      >
+        <div className={`lHidding ${isShowHidContentRight ? 'showRight' : ''}`}>
+          <div className='lHidding_left'>
+            <div className='detail_info1'>
+              <div className='imgBox'>
+                <div className='pic' ref={picRef} />
+              </div>
+              <div className='txt' dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[0].from }} >
+              </div>
+              <div className='title'>{myData.sangzangLeftInfo2[0].name}</div>
+              <div className='time'>{myData.sangzangLeftInfo2[0].txt}</div>
+            </div>
+            <div className='detail_info2' onClick={() => setIsShowHidContentRight(!isShowHidContentRight)}>
+              <div className='title_info2'>{myData.sangzangStatic.leftInfoName}</div>
+              <div className='txt_info2'>{myData.sangzangStatic.txt}</div>
+            </div>
+          </div>
+          <div className='lHidding_right'>
+            <div className='imgBox' onClick={() => setIsShowMzwHot(true)}>
+              <div className='pic' />
+              <div className='zoomIn'>
+                <img src={require('@/assets/img/A6_sangzang_zoomin.png')} alt='' />
+              </div>
+            </div>
+            <div className='txt' dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[1].from }} >
+            </div>
+            <div className='title'>{myData.sangzangLeftInfo2[1].name}</div>
+            <div className='time'>{myData.sangzangLeftInfo2[1].txt}</div>
+          </div>
+          <div
+            className='open'
+            onClick={e => {
+              e.stopPropagation()
+              setIsShowHidContent(!isShowHidContent)
+              setIsShowHidContentRight(false)
+            }}
+          >
+            <div className='openPic' />{' '}
+          </div>
+        </div>
+        <div className='left'>
+          <div className='pic' style={{
+            background: `url(${require(`@/assets/img/A6_sangzang_left_${currentTab}.png`)}) no-repeat center/contain`
+          }} />
+          <div className='operate'>
+            <div className='beiwen1' onClick={() => setSelectedGeshi(1)}>程氏颂文</div>
+            <div className='beiwen2' onClick={() => setSelectedGeshi(2)}>程哲生卒</div>
+            <div className='beiwen3' onClick={() => setSelectedGeshi(3)}>先祖功绩</div>
+          </div>
+        </div>
+        <div className='right'>
+          <div className={`content`}>
+            <div className='title myFont'>{myData.sangzangStatic.rightInfoName}</div>
+            <div className='text' dangerouslySetInnerHTML={{ __html: myData.sangzangData[Number(currentTab.split('tab')[1])].txt }} />
+          </div>
+        </div>
+      </div>
+      <div className={`A6_tabBar ${!isShowTabBar ? 'A6_tabBar_hide' : ''}`}>
+        <div
+          className={`tab ${currentTab === 'tab1' ? 'tab_active' : ''}`}
+          onClick={() => handleTabClick('tab1')}
+        >
+          墓志
+          <br />
+          格式
+        </div>
+        <div
+          className={`tab ${currentTab === 'tab2' ? 'tab_active' : ''}`}
+          onClick={() => handleTabClick('tab2')}
+        >
+          攀附
+          <br />
+          之风
+        </div>
+        <div
+          className={`tab ${currentTab === 'tab3' ? 'tab_active' : ''}`}
+          onClick={() => handleTabClick('tab3')}
+        >
+          立碑
+          <br />
+          动机
+        </div>
+        <div
+          className={`tab ${currentTab === 'tab4' ? 'tab_active' : ''}`}
+          onClick={() => handleTabClick('tab4')}
+        >
+          刻写
+          <br />
+          过程
+        </div>
+      </div>
+
+      {/* 墓志铭格式-detail */}
+      <div className={`geshi ${selectedGeshi === 0 ? 'geshiHide' : ''}`}>
+        <div className='back' onClick={() => setSelectedGeshi(0)}>
+          <img src={require('@/assets/img/btn_back.png')} alt='' />
+        </div>
+        <div className="geshi_left">
+          <div className="pic" style={{
+            background: `url(${require(`@/assets/img/A6_sangzang_geshi${selectedGeshi === 0 ? '1' : selectedGeshi}.png`)}) no-repeat center/contain`
+          }} />
+        </div>
+        <div className="geshi_right">
+          <div className="top">
+            {myData.mzgeshi.map((item, index) => (
+              <div key={item.key} className={`tab${index}`} onClick={(e) => {
+                e.stopPropagation()
+                setSelectedGeshi(item.key)
+              }}>
+                <img
+                  src={require(`@/assets/img/btn_ModalTxt_bg${selectedGeshi === item.key ? '_ac' : ''
+                    }.png`)}
+                  alt=''
+                />
+                <div className={`tabNub ${selectedGeshi === item.key ? 'tabNubAc' : ''}`}>
+                  {item.sonTxt}
+                </div>
+                <div
+                  className={`txt ${selectedGeshi !== item.key ? 'txtAc' : ''}`}
+
+                >
+                  {item.name}
+                </div>
+              </div>
+            ))}
+
+          </div>
+          <div className="content" dangerouslySetInnerHTML={{ __html: selectedGeshi !== 0 ? myData.mzgeshi[selectedGeshi - 1].txt : '' }}></div>
+        </div>
+      </div>
+
+      {/* 墓志文 */}
+      <div className={`mzwHot ${isShowMzwHot ? 'mzwHot_show' : ''}`} >
+        <div className="mzwHotL"><div className="mPic" style={{
+          background: `url(${require(`@/assets/img/A6_sangzang_${(currentTab !== 'tab1' && currentTab !== 'tab2') ? 'tab1' : currentTab}.png`)}) no-repeat center/contain`
+        }}></div></div>
+        <div className="mzwHotR">
+          <div className="mtitle">{myData.mzw[(currentTab !== 'tab1' && currentTab !== 'tab2') ? 0 : Number(currentTab.split('tab')[1]) - 1].title}</div>
+          <div className="mtext" dangerouslySetInnerHTML={{ __html: myData.mzw[(currentTab !== 'tab1' && currentTab !== 'tab2') ? 0 : Number(currentTab.split('tab')[1]) - 1].txt }}></div>
+        </div>
+        <div className="mzwclose" onClick={() => setIsShowMzwHot(false)}><img src={require('@/assets/img/closeWithTxt.png')} alt="" /></div>
+      </div>
+
+
+    </div>
+  )
+}
+
+const MemoSangzangys = React.memo(Sangzangys)
+
+export default MemoSangzangys

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

@@ -1,513 +1,24 @@
-.sang {
+.sangzangHome {
+  width: 100%;
+  height: 100%;
   position: absolute;
+  z-index: 4;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: 3;
-  width: 100%;
-  height: 100%;
-  background: url('../../../assets/img/A6_sangzang_bg.png') no-repeat center center;
+  background: url(../../../assets/img/A6_sangzang_home_bg.png) no-repeat center center;
   background-size: 100% 100%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  :global {
-    .main {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 20px;
-      transition: all 0.6s ease-in-out;
-      .lHidding {
-        width: 300px;
-        height: 100%;
-        background: url('../../../assets/img/A6_sangzang_hidContent.png') no-repeat center center;
-        background-size: 100% 100%;
-        position: absolute;
-        z-index: 1;
-        top: 50%;
-        left: 0;
-        transform: translate(-88%, -50%);
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        transition: all 0.6s ease-in-out;
-        .lHidding_left {
-          position: absolute;
-          left: 0;
-          transform: translateX(-239px);
-          width: 525px;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          background: url('../../../assets/img/A6_sangzang_hidding_left.png') no-repeat center
-            center;
-          background-size: 100% 100%;
-          transition: all 0.6s ease-in-out;
-          .detail_info1 {
-            width: 300px;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            transition: all 0.6s ease-in-out;
-            .imgBox {
-              position: relative;
-              width: 80%;
-              height: 50%;
-              .pic {
-                width: 100%;
-                height: 100%;
-                background: url('../../../assets/img/A6_sangzang_yp.png') no-repeat center center;
-                background-size: contain;
-              }
-            }
-            .txt,
-            .title,
-            .time {
-              width: 80%;
-              height: 20px;
-              font-size: 16px;
-              line-height: 24px;
-              font-weight: 400;
-              color: rgba(69, 68, 55, 1);
-              text-align: center;
-            }
-            .txt {
-              line-height: 16px;
-              font-size: 15px;
-              height: 40px;
-              color: rgba(69, 68, 55, 0.8);
-            }
-            .title {
-              height: 16px;
-              color: rgba(124, 75, 54, 1);
-              font-size: 25px;
-              letter-spacing: 1px;
-            }
-            .time {
-              color: rgba(175, 135, 100, 1);
-            }
-          }
-          .detail_info2 {
-            width: calc(100% - 330px);
-            height: 74%;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            transition: all 0.6s ease-in-out;
-            .title_info2 {
-              width: fit-content;
-              position: relative;
-              height: 60px;
-              font-size: 26px;
-              color: rgba(124, 75, 54, 1);
-              &::after {
-                content: '';
-                position: absolute;
-                bottom: 0;
-                left: 0;
-                width: 100%;
-                height: 10px;
-                background: url('../../../assets/img/A6_sinicize_line2.png') no-repeat center center;
-                background-size: 100% 100%;
-              }
-            }
-            .txt_info2 {
-              width: 100%;
-              height: 80%;
-              font-size: 16px;
-              line-height: 24px;
-              letter-spacing: 1px;
-              font-weight: 400;
-              color: #504e40;
-              overflow: auto;
-              &::-webkit-scrollbar {
-                width: 0;
-                height: 0;
-              }
-            }
-          }
-        }
-        .lHidding_right {
-          width: 300px;
-          height: 100%;
-          padding-right: 20px;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          gap: 10px;
-          transition: all 0.3s ease-in-out;
-          opacity: 0;
-          pointer-events: none;
-
-          .imgBox {
-            position: relative;
-            width: 75%;
-            height: 60%;
-            .pic {
-              width: 100%;
-              height: 100%;
-              background: url('../../../assets/img/A6_sangzang_yp2.png') no-repeat center center;
-              background-size: contain;
-            }
-            .zoomIn {
-              width: 30px;
-              height: 30px;
-              position: absolute;
-              bottom: -1%;
-              right: 2%;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-
-              & > img {
-                height: 20px;
-                width: 20px;
-                object-fit: contain;
-              }
-            }
-          }
-          .txt,
-          .title,
-          .time {
-            width: 80%;
-            height: 20px;
-            font-size: 16px;
-            line-height: 24px;
-            font-weight: 400;
-            color: rgba(69, 68, 55, 1);
-            text-align: center;
-          }
-          .txt {
-            line-height: 16px;
-            font-size: 15px;
-            height: 30px;
-            color: rgba(69, 68, 55, 0.8);
-          }
-          .title {
-            height: 16px;
-            color: rgba(124, 75, 54, 1);
-            font-size: 25px;
-            letter-spacing: 1px;
-          }
-          .time {
-            color: rgba(175, 135, 100, 1);
-          }
-        }
-        .open {
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%);
-          right: -6%;
-          width: 50px;
-          height: 50px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          transition: all 0.3s ease-in-out;
-
-          .openPic {
-            background: url('../../../assets/img/A6_sangzang_hidRight.png') no-repeat center center;
-            background-size: 100% 100%;
-            height: 100%;
-            width: 100%;
-            object-fit: contain;
-            animation: opacityChange 3s infinite ease-in-out;
-          }
-        }
-      }
-      .left {
-        width: 250px;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        transition: all 0.3s ease-in-out;
-        position: relative;
-        .pic {
-          width: 84%;
-          height: 90%;
-          background-size: contain;
-          transition: all 0.3s ease-in-out;
-        }
-        .operate {
-          opacity: 0;
-          pointer-events: none;
-          padding-top: 45px;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          width: 100%;
-          height: 90%;
-          display: flex;
-          justify-content: flex-end;
-          align-items: center;
-          text-align: center;
-          gap: 6px;
-          padding-bottom: 50px;
-          font-size: 22px;
-          color: rgba(255, 233, 182, 1);
-          cursor: pointer;
-          .beiwen1 {
-            width: 25%;
-            height: 100%;
-            line-height: 47px;
-            writing-mode: vertical-rl;
-          }
-          .beiwen2 {
-            width: 18%;
-            height: 100%;
-            line-height: 37px;
-            writing-mode: vertical-rl;
-          }
-          .beiwen3 {
-            width: 37%;
-            height: 100%;
-            line-height: 110px;
-            writing-mode: vertical-rl;
-          }
-        }
-      }
-      .right {
-        width: 50%;
-        height: 60%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        transition: all 0.3s ease-in-out;
-        .content {
-          width: 68%;
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-          gap: 10px;
-          transition: all 0.3s ease-in-out;
-          .title {
-            width: 100%;
-            font-size: 26px;
-            max-width: 100%;
-            font-size: 26px;
-            color: #fff;
-            border-bottom: 1px solid rgba(93, 96, 96, 0.4);
-          }
-
-          .text {
-            width: 90%;
-            height: fit-content;
-            max-height: 300px;
-            font-size: 16px;
-            line-height: 24px;
-            letter-spacing: 2px;
-            color: #504e40;
-            text-align: justify;
-            font-weight: 400;
-            overflow: auto;
-            &::-webkit-scrollbar {
-              width: 0px;
-              height: 0px;
-            }
-          }
-
-          .btn {
-            padding-top: 10px;
-            font-size: 14px;
-            color: rgba(93, 96, 96, 1);
-            cursor: pointer;
-            position: relative;
-
-            &::before {
-              content: '';
-              position: absolute;
-              left: 55px;
-              top: 8px;
-              width: 22px;
-              height: 22px;
-              background-image: url('../../../assets/sgImg/icon_more.png');
-              background-size: 100% 100%;
-            }
-          }
-        }
-      }
-    }
-    .mainAc {
-      width: 100%;
-      justify-content: flex-end;
-      gap: 0;
-      .lHidding {
-        width: 66%;
-        transform: translate(-3%, -50%);
-        .lHidding_left {
-          transform: translateX(0);
-        }
-        .open {
-          right: -2%;
-          .openPic {
-            background: url('../../../assets/img/A6_sangzang_hidLeft.png') no-repeat center center;
-            background-size: 100% 100%;
-          }
-        }
-      }
-      .showRight {
-        width: 97%;
-
-        .lHidding_right {
-          transition: all 0.3s ease-in-out 0.3s;
-          opacity: 1;
-          pointer-events: auto;
-        }
-      }
-      .left {
-        .pic {
-          width: 100%;
-        }
-      }
-      .right {
-        width: 0;
-        opacity: 0;
-        .content {
-          width: 85%;
-        }
-      }
-    }
-
-    // 点击tab后的样式
-    .mainShow_tab1,
-    .mainShow_tab2,
-    .mainShow_tab3,
-    .mainShow_tab4 {
-      padding-left: 190px;
-      .lHidding {
-        width: 330px;
-        transform: translate(-7%, -50%);
-        background: url('../../../assets/img/A6_sangzang_hidContent_r.png') no-repeat center center;
-        background-size: 100% 100%;
-        .lHidding_left {
-          display: none;
-        }
-        .lHidding_right {
-          width: 330px;
-          opacity: 1;
-          pointer-events: auto;
-        }
-        .open {
-          opacity: 0;
-          pointer-events: none;
-        }
-      }
-      .left {
-        transition: all 0.6s ease-in-out;
-      }
-      .right {
-        width: 39%;
-        transition: all 0.6s ease-in-out;
-        .title {
-          display: none;
-        }
-        .content {
-          width: 92%;
-          transition: all 0.6s ease-in-out;
-        }
-      }
-    }
-
-    .mainShow_tab1 {
-      .lHidding {
-        .lHidding_right {
-          .imgBox {
-            .pic {
-              background: url('../../../assets/img/A6_sangzang_tab1.png') no-repeat center center;
-              background-size: 100% 100%;
-            }
-          }
-        }
-      }
-
-      .left {
-        .operate {
-          opacity: 1;
-          pointer-events: auto;
-        }
-      }
-    }
-
-    .mainShow_tab2 {
-      padding-left: 140px;
-      .lHidding {
-        .lHidding_right {
-          .imgBox {
-            .pic {
-              background: url('../../../assets/img/A6_sangzang_tab2.png') no-repeat center center;
-              background-size: 100% 100%;
-            }
-          }
-        }
-      }
-
-      .left {
-        width: 300px;
-        .pic {
-          right: 17%;
-          top: 3%;
-          transform: scale(1.4);
-          position: relative;
-          width: 100%;
-          height: 100%;
-          background-position: center top;
-          background-size: cover;
-        }
-      }
-    }
-
-    .mainShow_tab3,
-    .mainShow_tab4 {
-      .lHidding {
-        transform: translate(-88%, -50%);
-        .lHidding_right {
-          width: 330px;
-        }
-      }
-      .left {
-        width: 300px;
-        .pic {
-          right: 27%;
-          top: 3%;
-          transform: scale(1.6);
-          position: relative;
-          width: 100%;
-          height: 100%;
-          background-position: center top;
-          background-size: cover;
-        }
-      }
-      .right {
-        width: 50%;
-        .content {
-          width: 75%;
-        }
-      }
-    }
-
-    .mainShow_tab4 {
-      .left {
-        .pic {
-          top: 37%;
-        }
-      }
-    }
 
+  &:global(.sangzangHome_show) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  :global {
     .back {
       width: 80px;
       height: 40px;
       position: absolute;
-      z-index: 1;
+      z-index: 3;
       top: 3%;
       left: 4%;
       cursor: pointer;
@@ -517,238 +28,83 @@
         object-fit: fill;
       }
     }
-    .A6_tabBar {
-      width: 50px;
-      height: 260px;
-      display: flex;
-      align-items: center;
-      flex-direction: column;
-      position: absolute;
-      z-index: 2;
-      top: 51%;
-      right: 5%;
-      gap: 20px;
-      transform: translateY(-50%);
-
-      .tab {
-        transition: all 0.3s ease-in-out;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: url(../../../assets/img/btn_tab.png) no-repeat center center;
-        background-size: 100% 100%;
-        width: 60px;
-        height: 60px;
-        font-size: 14px;
-        text-align: center;
-        line-height: 15px;
-        letter-spacing: 1px;
-        font-size: 12px;
-        font-weight: 500;
-        color: #fbebbd;
-        cursor: pointer;
-      }
-
-      .tab_active {
-        background: url(../../../assets/img/btn_tabAc.png) no-repeat center center;
-        background-size: 100% 100%;
-        color: rgba(166, 118, 67, 1);
-      }
-    }
-    .A6_tabBar_hide {
-      opacity: 0;
-      pointer-events: none;
-      transition: all 0.3s ease-in-out;
-    }
-
-    .geshi {
-      width: 100%;
-      height: 100%;
+    .homeLeft {
       position: absolute;
-      z-index: 1;
       top: 50%;
       left: 50%;
-      transform: translate(-50%, -50%);
-      background: url('../../../assets/img/A6_sangzang_bg.png') no-repeat center center;
-      background-size: 100% 100%;
+      transform: translate(-84%, -51%);
+      width: 445px;
+      height: 68%;
       display: flex;
-      padding: 0 20px;
-      align-items: center;
-      transition: all 0.3s ease-in-out;
-      .geshi_left {
-        width: 45%;
-        height: 100%;
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        .pic {
-          width: 80%;
-          height: 95%;
-          background-size: contain;
-        }
-      }
-      .geshi_right {
-        width: 55%;
-        height: 100%;
+      flex-direction: column;
+      gap: 10px;
+      .htitle {
+        width: 100%;
+        height: 100px;
+        font-size: 16px;
+        line-height: 24px;
+        color: rgba(69, 68, 55, 1);
+      }
+      .hcontent {
+        width: 100%;
+        height: calc(100% - 85px);
         display: flex;
         flex-direction: column;
-        gap: 20px;
-        .top {
-          width: 100%;
-          height: 90px;
-          display: flex;
-          align-items: center;
-          gap: 80px;
-          .tab0,
-          .tab1,
-          .tab2 {
-            width: fit-content;
-            min-width: 70px;
-            height: 90px;
-            display: flex;
-            align-items: center;
-            flex-direction: column;
-            gap: 6px;
-            cursor: pointer;
-            position: relative;
-
-            & > img {
-              width: 60px;
-              object-fit: cover;
-            }
-
-            .tabNub {
-              transition: all 0.3s ease-in-out;
-              font-size: 18px;
-              position: absolute;
-              top: 34%;
-              left: 50%;
-              transform: translate(-55%, -68%);
-              color: rgba(255, 233, 182, 0.6);
-            }
-
-            .tabNubAc {
-              color: rgba(255, 233, 182, 1);
-            }
-
-            .txt {
-              font-size: 16px;
-              line-height: 15px;
-              text-align: center;
-              font-weight: lighter;
-              color: rgba(255, 255, 255, 1);
-              width: 200%;
-              font-weight: 700;
-            }
-            .txtAc {
-              opacity: 0.4;
-            }
-          }
+        gap: 10px;
+        overflow: auto;
+        &::-webkit-scrollbar {
+          width: 0px;
+          height: 0px;
         }
-        .content {
-          width: 95%;
-          height: 68%;
-          font-size: 16px;
-          line-height: 24px;
+        .hitem {
+          width: 100%;
+          height: fit-content;
+          font-size: 15px;
+          line-height: 18px;
           letter-spacing: 2px;
           font-weight: 400;
-          color: rgba(69, 68, 55, 1);
-          overflow: auto;
-          &::-webkit-scrollbar {
-            width: 0px;
-            height: 0px;
+          color: rgba(124, 75, 54, 1);
+          opacity: 0.7;
+          .htxt {
+            width: 100%;
+            height: fit-content;
+          }
+          .hfrom {
+            width: 100%;
+            text-align: right;
+            height: fit-content;
           }
         }
       }
     }
-    .geshiHide {
-      opacity: 0;
-      pointer-events: none;
-    }
 
-    .mzwHot {
-      opacity: 0;
-      pointer-events: none;
-      transition: all 0.3s ease-in-out;
-      width: 100%;
-      height: 100%;
+    .btnContainner {
+      width: 450px;
+      height: 50px;
       position: absolute;
-      z-index: 1;
-      top: 50%;
+      bottom: 5%;
       left: 50%;
-      transform: translate(-50%, -50%);
-      background-color: rgba(0, 0, 0, 0.7);
-      backdrop-filter: blur(3px);
+      transform: translate(-84%, 2%);
       display: flex;
-      padding: 6px 20px;
       align-items: center;
-      gap: 10px;
-      .mzwHotL {
-        width: 37%;
-        height: 100%;
-        background-color: #fff;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .mPic {
-          padding: 6px 10px;
-          width: 90%;
-          height: 98%;
-          background: url(../../../assets/img/A6_sangzang_tab1.png) no-repeat center center;
-          background-size: 100% 100%;
-        }
-      }
-      .mzwHotR {
-        padding-top: 10px;
-        width: 60%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        .mtitle,
-        .mtext {
-          font-size: 16px;
-          line-height: 24px;
-          letter-spacing: 2px;
-          font-weight: 400;
-          color: rgba(255, 233, 182, 1);
-        }
-        .mtitle {
-          padding: 20px 0;
-          font-size: 20px;
-          width: 100%;
-          height: 50px;
-        }
-        .mtext {
-          width: 100%;
-          height: fit-content;
-          max-height: 80%;
-          color: rgba(255, 255, 255, 1);
-          overflow: auto;
-          &::-webkit-scrollbar {
-            width: 0px;
-            height: 0px;
-          }
-        }
-      }
-      .mzwclose {
-        width: 70px;
+      justify-content: center;
+      gap: 20px;
+      cursor: pointer;
+      .btn {
+        width: 220px;
         height: 50px;
-        position: absolute;
-        top: 14px;
-        right: 63px;
-        & > img {
-          width: 100%;
-          height: 100%;
-          object-fit: contain;
-        }
-        cursor: pointer;
+        font-size: 16px;
+        line-height: 48px;
+        text-align: center;
+        color: rgba(255, 233, 182, 1);
+        background: url(../../../assets/img/A6_sangzang_btn1.png) no-repeat center center;
+        background-size: 100% 100%;
+      }
+      .btn2 {
+        color: rgba(124, 75, 54, 1);
+        background: url(../../../assets/img/A6_sangzang_btn2.png) no-repeat center center;
+        background-size: 100% 100%;
       }
-    }
-
-    .mzwHot_show {
-      opacity: 1;
-      pointer-events: auto;
     }
   }
 }

src/pages/A6ybwx/Sangzang/index.tsx

@@ -1,203 +1,36 @@
-import React, { useState, useEffect, useRef } from 'react'
-import styles from './index.module.scss'
-import { useSelector } from 'react-redux'
-import { RootState } from '@/store'
-
-
-function Sang({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
-  const [currentTab, setCurrentTab] = useState('tab0')
-  const [isShowTabBar, setIsShowTabBar] = useState(true)
-  const [isShowHidContent, setIsShowHidContent] = useState(false)
-  const [isShowHidContentRight, setIsShowHidContentRight] = useState(false)
-  const [isShowMzwHot, setIsShowMzwHot] = useState(false)
-  const [selectedGeshi, setSelectedGeshi] = useState(0)
-  const { myData } = useSelector((state: RootState) => state.A0Layout)
-
-  const picRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (isShowHidContent || isShowMzwHot) {
-      setIsShowTabBar(false)
-    } else {
-      setIsShowTabBar(true)
-    }
-  }, [isShowHidContent, isShowMzwHot])
-
-  useEffect(() => {
-    if (selectedGeshi !== 0) {
-      setIsShowTabBar(false)
-    }
-    else {
-      setIsShowTabBar(true)
-    }
-
-  }, [selectedGeshi])
-
-
-
-  const handleTabClick = (tab: string) => {
-    if (tab === currentTab) {
-      setCurrentTab('tab0')
-      return
-    }
-    setCurrentTab(tab)
-  }
-
-  console.log(currentTab)
-
+import React, { useState } from "react";
+import styles from "./index.module.scss";
+import Sangzangys from './components/Sangzangys/index'
+import Policy from './components/Policy/index'
+function SangzangHome({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
+  const [showTab, setShowTab] = useState(0)
   return (
-    <div className={styles.sang}>
+    <div className={`${styles.sangzangHome}`}>
       <div className='back' onClick={() => setGotoTab(0)}>
         <img src={require('@/assets/img/btn_back.png')} alt='' />
       </div>
-      <div
-        className={`main ${isShowHidContent ? 'mainAc' : currentTab === 'tab0' ? '' : 'mainShow_' + currentTab
-          }`}
-      >
-        <div className={`lHidding ${isShowHidContentRight ? 'showRight' : ''}`}>
-          <div className='lHidding_left'>
-            <div className='detail_info1'>
-              <div className='imgBox'>
-                <div className='pic' ref={picRef} />
-              </div>
-              <div className='txt' dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[0].from }} >
-              </div>
-              <div className='title'>{myData.sangzangLeftInfo2[0].name}</div>
-              <div className='time'>{myData.sangzangLeftInfo2[0].txt}</div>
-            </div>
-            <div className='detail_info2' onClick={() => setIsShowHidContentRight(!isShowHidContentRight)}>
-              <div className='title_info2'>{myData.sangzangStatic.leftInfoName}</div>
-              <div className='txt_info2'>{myData.sangzangStatic.txt}</div>
-            </div>
-          </div>
-          <div className='lHidding_right'>
-            <div className='imgBox' onClick={() => setIsShowMzwHot(true)}>
-              <div className='pic' />
-              <div className='zoomIn'>
-                <img src={require('@/assets/img/A6_sangzang_zoomin.png')} alt='' />
-              </div>
-            </div>
-            <div className='txt' dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[1].from }} >
-            </div>
-            <div className='title'>{myData.sangzangLeftInfo2[1].name}</div>
-            <div className='time'>{myData.sangzangLeftInfo2[1].txt}</div>
-          </div>
-          <div
-            className='open'
-            onClick={e => {
-              e.stopPropagation()
-              setIsShowHidContent(!isShowHidContent)
-              setIsShowHidContentRight(false)
-            }}
-          >
-            <div className='openPic' />{' '}
-          </div>
-        </div>
-        <div className='left'>
-          <div className='pic' style={{
-            background: `url(${require(`@/assets/img/A6_sangzang_left_${currentTab}.png`)}) no-repeat center/contain`
-          }} />
-          <div className='operate'>
-            <div className='beiwen1' onClick={() => setSelectedGeshi(1)}>程氏颂文</div>
-            <div className='beiwen2' onClick={() => setSelectedGeshi(2)}>程哲生卒</div>
-            <div className='beiwen3' onClick={() => setSelectedGeshi(3)}>先祖功绩</div>
-          </div>
-        </div>
-        <div className='right'>
-          <div className={`content`}>
-            <div className='title myFont'>{myData.sangzangStatic.rightInfoName}</div>
-            <div className='text' dangerouslySetInnerHTML={{ __html: myData.sangzangData[Number(currentTab.split('tab')[1])].txt }} />
+      <div className="homeLeft">
+        <div className="htitle">程哲碑一直以其造像碑与墓碑的“两面性”而备受关注，丧葬因素与佛教因素的结合在程哲碑上得到了微妙而深刻的体现。这种融汇礼教伦理、宗教信仰与时代风尚的丧葬艺术，彰显了北朝社会结构的多元特征。</div>
+        <div className="hcontent">
+          <div className="hitem">
+            <div className="htxt">长治天平元年造像碑（即程哲碑），是造像碑与墓碑结合在一起的情况。</div>
+            <div className="hfrom">——王静芬 <br />《中国石碑：一种象征形式在佛教传入之前和之后的运用》</div>
           </div>
         </div>
+
       </div>
-      <div className={`A6_tabBar ${!isShowTabBar ? 'A6_tabBar_hide' : ''}`}>
-        <div
-          className={`tab ${currentTab === 'tab1' ? 'tab_active' : ''}`}
-          onClick={() => handleTabClick('tab1')}
-        >
-          墓志
-          <br />
-          格式
-        </div>
-        <div
-          className={`tab ${currentTab === 'tab2' ? 'tab_active' : ''}`}
-          onClick={() => handleTabClick('tab2')}
-        >
-          攀附
-          <br />
-          之风
-        </div>
-        <div
-          className={`tab ${currentTab === 'tab3' ? 'tab_active' : ''}`}
-          onClick={() => handleTabClick('tab3')}
-        >
-          立碑
-          <br />
-          动机
-        </div>
-        <div
-          className={`tab ${currentTab === 'tab4' ? 'tab_active' : ''}`}
-          onClick={() => handleTabClick('tab4')}
-        >
-          刻写
-          <br />
-          过程
-        </div>
+      <div className="btnContainner">
+        <div className="btn btn1" onClick={() => setShowTab(2)}>碑禁政策与程哲碑</div>
+        <div className="btn btn2" onClick={() => setShowTab(1)}>程哲碑丧葬因素</div>
       </div>
 
-      {/* 墓志铭格式-detail */}
-      <div className={`geshi ${selectedGeshi === 0 ? 'geshiHide' : ''}`}>
-        <div className='back' onClick={() => setSelectedGeshi(0)}>
-          <img src={require('@/assets/img/btn_back.png')} alt='' />
-        </div>
-        <div className="geshi_left">
-          <div className="pic" style={{
-            background: `url(${require(`@/assets/img/A6_sangzang_geshi${selectedGeshi === 0 ? '1' : selectedGeshi}.png`)}) no-repeat center/contain`
-          }} />
-        </div>
-        <div className="geshi_right">
-          <div className="top">
-            {myData.mzgeshi.map((item, index) => (
-              <div key={item.key} className={`tab${index}`} onClick={(e) => {
-                e.stopPropagation()
-                setSelectedGeshi(item.key)
-              }}>
-                <img
-                  src={require(`@/assets/img/btn_ModalTxt_bg${selectedGeshi === item.key ? '_ac' : ''
-                    }.png`)}
-                  alt=''
-                />
-                <div className={`tabNub ${selectedGeshi === item.key ? 'tabNubAc' : ''}`}>
-                  {item.sonTxt}
-                </div>
-                <div
-                  className={`txt ${selectedGeshi !== item.key ? 'txtAc' : ''}`}
+      {showTab === 2 && <Policy setShowTab={setShowTab} />}
+      {showTab === 1 && <Sangzangys setShowTab={setShowTab} />}
 
-                >
-                  {item.name}
-                </div>
-              </div>
-            ))}
-
-          </div>
-          <div className="content" dangerouslySetInnerHTML={{ __html: selectedGeshi !== 0 ? myData.mzgeshi[selectedGeshi - 1].txt : '' }}></div>
-        </div>
-      </div>
-
-      <div className={`mzwHot ${isShowMzwHot ? 'mzwHot_show' : ''}`} >
-        <div className="mzwHotL"><div className="mPic" style={{
-          background: `url(${require(`@/assets/img/A6_sangzang_${(currentTab !== 'tab1' && currentTab !== 'tab2') ? 'tab1' : currentTab}.png`)}) no-repeat center/contain`
-        }}></div></div>
-        <div className="mzwHotR">
-          <div className="mtitle">{myData.mzw[(currentTab !== 'tab1' && currentTab !== 'tab2') ? 0 : Number(currentTab.split('tab')[1]) - 1].title}</div>
-          <div className="mtext" dangerouslySetInnerHTML={{ __html: myData.mzw[(currentTab !== 'tab1' && currentTab !== 'tab2') ? 0 : Number(currentTab.split('tab')[1]) - 1].txt }}></div>
-        </div>
-        <div className="mzwclose" onClick={() => setIsShowMzwHot(false)}><img src={require('@/assets/img/closeWithTxt.png')} alt="" /></div>
-      </div>
     </div>
   )
 }
 
-const MemoSang = React.memo(Sang)
+const MemoSangzangHome = React.memo(SangzangHome);
 
-export default MemoSang
+export default MemoSangzangHome;

src/pages/A6ybwx/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import styles from './index.module.scss'
 import StatueArt from './StatueArt'
 import Genealogy from './Genealogy'
-import Sangzang from './Sangzang'
+import SangzangHome from './Sangzang'
 
 import classNames from 'classnames'
 import { isPc } from '@/utils/http'
@@ -66,9 +66,9 @@ function A6ybwx() {
       videoRefLast.current?.pause()
       const A6ybwxIframe = document.getElementById('A6ybwxIframe') as HTMLIFrameElement
       if (A6ybwxIframe) {
-        A6ybwxIframe.src = `Beizhongshijie${isPc?'Pc':''}/index.html`
+        A6ybwxIframe.src = `Beizhongshijie${isPc ? 'Pc' : ''}/index.html`
       }
-    }  
+    }
   }, [isEnter])
 
   // 进度条
@@ -152,7 +152,7 @@ function A6ybwx() {
       {gotoTab === 2 && <Genealogy setGotoTab={setGotoTab} />}
 
       {/* 丧葬因素 */}
-      {gotoTab === 3 && <Sangzang setGotoTab={setGotoTab} />}
+      {gotoTab === 3 && <SangzangHome setGotoTab={setGotoTab} />}
 
       {/* 进度条 */}
       {isEnter && loding < 100 ? (

src/types/declaration.d.ts

@@ -114,4 +114,27 @@ type MyDataType = {
     title: string
     txt: string
   }[]
-}
+  policy: {
+      title: string
+    part1:string
+    part2: {
+      txt: string
+      from: string
+      author: string
+    }
+    part3: {
+      desc: string
+      img: string
+      from: string
+      name: string
+      time: string
+    }
+    part4: {
+      desc: string
+      img: string
+      from: string
+      name: string
+      time: string
+    }
+  }[]
+  }