update

src/pages/A0base/index.tsx

@@ -1,4 +1,4 @@
-import React, {  useState } from 'react'
+import React, { useState } from 'react'
 import styles from './index.module.scss'
 import { isPc } from '@/utils/http'
 import classNames from 'classnames'
@@ -27,7 +27,7 @@ function A0base() {
           <div className='title myFont'>{myData.baseInfo[currentBase].title}</div>
           <div className='text'>{myData.baseInfo[currentBase].text}</div>
           <div className='btn' onClick={e => goto(e, myData.baseInfo[currentBase].path)}>
-            {myLangue==='ZH'?'查看详情':'view details'}
+            {myLangue === 'ZH' ? '查看详情' : 'view details'}
           </div>
         </div>
         <div className='baseContent'>
@@ -59,14 +59,14 @@ function A0base() {
             碑影智绘
           </div>
           <div className='inter' onClick={() => {
-             Toast.show({
+            Toast.show({
               content: '正在开发中'
             })
           }}>
             展览图谱
           </div>
           <div className='inter' onClick={() => {
-             Toast.show({
+            Toast.show({
               content: '正在开发中'
             })
           }}>
@@ -79,7 +79,7 @@ function A0base() {
         </div>
       </div>
 
-      <div className='home' onClick={e => goto(e, '/')}>
+      <div className='home' onClick={e => goto(e, './')}>
         <img src={require('@/assets/img/home.png')} alt='' />
       </div>
 

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

@@ -64,6 +64,8 @@
 }
 
 .gesture {
+  opacity: 0;
+  pointer-events: none;
   position: absolute;
   width: 55px;
   height: 50px;
@@ -72,13 +74,17 @@
   font-size: 9px;
   color: rgba(255, 255, 255, 1);
   text-align: center;
+  transition: all 0.3s ease-in-out;
   & > img {
     width: 100%;
     object-fit: contain;
   }
-  &.state1 {
-    & > img {
-      animation: gestureState1 2s linear;
+  &:global(.state1) {
+    opacity: 1;
+    :global {
+      img {
+        animation: gestureState1 2s linear;
+      }
     }
   }
 }

src/pages/A6ybwx/Genealogy/index.tsx

@@ -32,10 +32,10 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
       <Graph setCurrentNodeIndex={setCurrentNodeIndex} />
       {/* <SvgGraph /> */}
 
-      {isShowGesture && <div className={`${styles.gesture} ${gestureState1}`} onClick={() => setIsShowGesture(false)}>
+      <div className={`${styles.gesture} ${gestureState1}`} onClick={() => setIsShowGesture(false)}>
         <img src={require('@/assets/img/A6_gen_gesture.png')} draggable='false' alt='' />
         点击查看更多
-      </div>}
+      </div>
 
       {
         isShowIntro && (

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

@@ -0,0 +1,256 @@
+.sang {
+  position: absolute;
+  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-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;
+        top: 50%;
+        left: 0;
+        transform: translate(-88%, -50%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        transition: all 0.6s ease-in-out;
+        .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;
+          & > img {
+            height: 100%;
+            width: 100%;
+            object-fit: contain;
+          }
+        }
+        .imgBox {
+          position: relative;
+          width: 75%;
+          height: 60%;
+          .pic {
+            width: 100%;
+            height: 100%;
+            background: url('../../../assets/img/A6_sangzang_tab1.png') no-repeat center center;
+            background-size: contain;
+          }
+          .zoomIn {
+            width: 30px;
+            height: 30px;
+            background-color: rgba(175, 135, 100, 0.6);
+            border-radius: 50%;
+            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 {
+          font-size: 15px;
+        }
+        .title {
+          height: 16px;
+          color: rgba(124, 75, 54, 1);
+          font-size: 22px;
+          letter-spacing: 1px;
+        }
+        .time {
+          color: rgba(175, 135, 100, 1);
+        }
+      }
+      .left {
+        width: 250px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        transition: all 0.3s ease-in-out;
+        .pic {
+          width: 76%;
+          height: 90%;
+          background: url('../../../assets/img/A6_sangzang_tab0.png') no-repeat center center;
+          background-size: contain;
+        }
+      }
+      .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;
+          .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: 72%;
+      .lHidding {
+        transform: translate(-84%, -50%);
+        .open {
+          opacity: 0;
+        }
+      }
+      .left {
+        .pic {
+          width: 100%;
+        }
+      }
+      .right {
+        width: 40%;
+        .content {
+          width: 85%;
+        }
+      }
+    }
+    .back {
+      width: 80px;
+      height: 40px;
+      position: absolute;
+      z-index: 3;
+      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);
+      }
+    }
+  }
+}

src/pages/A6ybwx/Sangzang/index.tsx

@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from "react";
+import styles from "./index.module.scss";
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+import { Toast } from "antd-mobile";
+function Sang({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
+  const [currentTab, setCurrentTab] = useState('tab0');
+  const [isShowTabBar, setIsShowTabBar] = useState(true);
+  const [isShowHidContent, setIsShowHidContent] = useState(false);
+  const { myData } = useSelector((state: RootState) => state.A0Layout)
+
+  useEffect(() => {
+    Toast.show({
+      content: '开发中',
+      duration: 1000,
+    })
+  }, [currentTab])
+
+  return (
+    <div className={styles.sang}>
+      <div className='back' onClick={() => setGotoTab(0)}>
+        <img src={require('@/assets/img/btn_back.png')} alt='' />
+      </div>
+      <div className={`main ${isShowHidContent ? 'mainAc' : ''}`} onClick={() => setIsShowHidContent(false)}>
+        <div className="lHidding">
+          <div className="open" onClick={(e) => { e.stopPropagation(); setIsShowHidContent(true) }}><img src={require('@/assets/img/A6_sangzang_hidRight.png')} alt="" /></div>
+          <div className="imgBox"><div className="pic" /><div className="zoomIn"><img src={require('@/assets/img/A5_zoomin.png')} alt="" /></div></div>
+          <div className="txt">图片来源《文物》1963年第6期P50</div>
+          <div className="title">柳子辉墓志铭</div>
+          <div className="time">北齐天保七年（556年）</div>
+        </div>
+        <div className="left"><div className="pic" /></div>
+        <div className="right">
+          <div className={`content`}>
+            <div className='title myFont'>程哲碑丧葬因素</div>
+            <div className='text'>程哲碑，其以佛像为主题的造像风格与传统造像碑无二，但传统造像碑通常以发愿文为核心，内容多为祈福禳灾、超度亡灵或祈求功德，不强调墓主生平与家族世系。<br />程哲碑则强调墓主生平与家族世系，其文字更多是丧葬语境下的内容，其行文与墓志铭密切相关。</div>
+          </div>
+        </div>
+      </div>
+      <div className='A6_tabBar' style={{ display: isShowTabBar ? 'flex' : 'none' }}>
+        <div
+          className={`tab ${currentTab === 'tab1' ? 'tab_active' : ''}`}
+          onClick={() => setCurrentTab('tab1')}
+        >
+          墓志
+          <br />
+          格式
+        </div>
+        <div
+          className={`tab ${currentTab === 'tab2' ? 'tab_active' : ''}`}
+          onClick={() => setCurrentTab('tab2')}
+        >
+          攀附
+          <br />
+          之风
+        </div>
+        <div
+          className={`tab ${currentTab === 'tab3' ? 'tab_active' : ''}`}
+          onClick={() => setCurrentTab('tab3')}
+        >
+          立碑
+          <br />
+          动机
+        </div>
+        <div
+          className={`tab ${currentTab === 'tab4' ? 'tab_active' : ''}`}
+          onClick={() => setCurrentTab('tab4')}
+        >
+          刻写
+          <br />
+          过程
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const MemoSang = React.memo(Sang);
+
+export default MemoSang;

src/pages/A6ybwx/index.tsx

@@ -2,6 +2,8 @@ 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 classNames from 'classnames'
 import { isPc } from '@/utils/http'
 import MenuSider from '@/components/MenuSider'
@@ -12,18 +14,32 @@ function A6ybwx() {
   const [gotoTab, setGotoTab] = useState(0)
 
   window.onClickMainHotspot = (hotspotName: string) => {
+    console.log('调用了onClickMainHotspot', hotspotName)
     if (hotspotName === '梵风汉韵') {
-      window.location.href = '../index.html#/ybwx?tab=1'
+      window.location.replace('../index.html#/ybwx?tab=1')
     }
     if (hotspotName === '世系铭远') {
-      window.location.href = '../index.html#/ybwx?tab=2'
+      window.location.replace('../index.html#/ybwx?tab=2')
     }
     if (hotspotName === '丧葬因素') {
-      window.location.href = '../index.html#/ybwx?tab=1'
+      window.location.replace('../index.html#/ybwx?tab=3')
     }
   }
 
   useEffect(() => {
+    const handleHashChange = () => {
+      const search = new URLSearchParams(window.location.hash.split('?')[1] || '')
+      const tab = search.get('tab')
+      if (tab) {
+        setGotoTab(Number(tab))
+      }
+    }
+
+    window.addEventListener('hashchange', handleHashChange)
+    return () => window.removeEventListener('hashchange', handleHashChange)
+  }, [])
+
+  useEffect(() => {
     const search = new URLSearchParams(window.location.hash.split('?')[1] || '')
     console.log(search.get('tab'), '===================================')
     const tab = search.get('tab')
@@ -39,8 +55,8 @@ function A6ybwx() {
       objectFit: 'cover', // 视频的object-fit样式, 默认 cover
       loop: false, // 是否循环, 默认false
       autoplay: false, // 自动播放, 默认false
-      onPlay: () => {}, // 触发播放事件
-      onPause: () => {}, // 触发暂停事件
+      onPlay: () => { }, // 触发播放事件
+      onPause: () => { }, // 触发暂停事件
       onEnded: () => {
         setIsEnter(true)
         playerRef.current.destroy()
@@ -48,7 +64,7 @@ function A6ybwx() {
       onSourceEstablished: () => {
         if (isEnter) setVideoOk(false)
         setVideoOk(true)
-       
+
       } //有足够的数据可以播放了
     }
     playerRef.current = F_Video('./myData/ybwx.ts', params)
@@ -114,6 +130,9 @@ function A6ybwx() {
 
       {/* 程氏谱系 */}
       {gotoTab === 2 && <Genealogy setGotoTab={setGotoTab} />}
+
+      {/* 丧葬因素 */}
+      {gotoTab === 3 && <Sangzang setGotoTab={setGotoTab} />}
     </div>
   )
 }