数据更新

src/App.tsx

@@ -10,6 +10,9 @@ import NotFound from '@/components/NotFound'
 import { baseURL, isLoc, myData } from './utils/http'
 import AsyncSpinLoding from './components/AsyncSpinLoding'
 import { Image } from 'antd'
+import MessageCom from '@/components/Message'
+
+
 
 // import Vconsole from 'vconsole'
 // new Vconsole()
@@ -245,6 +248,8 @@ export default function App() {
         />
       ) : null}
 
+      <MessageCom />
+
     </>
   )
 }

src/assets/styles/base.css

@@ -227,9 +227,13 @@ textarea {
   #root .ant-tooltip {
     transform: rotate(0) !important;
     inset: 24.331px auto auto 399.25px !important;
-    width: 250px !important;
+    width: 350px !important;
     height: 150px !important;
-    max-width: 250px !important;
+    max-width: 350px !important;
+  }
+  .ant-tooltip-inner {
+    background: rgba(0, 0, 0, 0.5) !important;
+    border: 1px solid #ffe9b6 !important;
   }
   #root .ant-tooltip .tooltip_MT .top {
     width: 100%;
@@ -237,7 +241,7 @@ textarea {
   }
   #root .ant-tooltip .tooltip_MT .top .title {
     width: 80px !important;
-    font-size: 13px !important;
+    font-size: 16px !important;
   }
   #root .ant-tooltip .tooltip_MT .top .close {
     width: 40px;
@@ -252,8 +256,8 @@ textarea {
     object-fit: contain;
   }
   #root .ant-tooltip .tooltip_MT .content {
-    font-size: 12px !important;
-    line-height: 13px !important;
+    font-size: 16px !important;
+    line-height: 18px !important;
   }
   body #A7Back {
     transform: rotate(90deg);
@@ -320,7 +324,7 @@ textarea {
 }
 /* 隐藏静音按钮 */
 #root .ant-tooltip {
-  width: 190px;
+  width: 220px;
   height: 92px;
   max-width: 200px;
 }

src/assets/styles/base.less

@@ -295,19 +295,25 @@ textarea {
   #root .ant-tooltip {
     transform: rotate(0) !important;
     inset: 24.331px auto auto 399.25px !important;
-    width: 250px !important;
+    width: 350px !important;
     height: 150px !important;
-    max-width: 250px !important;
+    max-width: 350px !important;
+  }
+
+  .ant-tooltip-inner {
+    background: rgba(0, 0, 0, .5) !important;
+    border: 1px solid rgba(255, 233, 182, 1) !important;
   }
 
   #root .ant-tooltip .tooltip_MT {
+
     .top {
       width: 100%;
       height: 20px !important;
 
       .title {
         width: 80px !important;
-        font-size: 13px !important;
+        font-size: 16px !important;
       }
 
       .close {
@@ -325,8 +331,8 @@ textarea {
       }
     }
     .content {
-      font-size: 12px !important;
-      line-height: 13px !important;
+      font-size: 16px !important;
+      line-height: 18px !important;
     }
   }
 
@@ -426,7 +432,7 @@ textarea {
 // }
 
 #root .ant-tooltip {
-  width: 190px;
+  width: 220px;
   height: 92px;
   max-width: 200px;
 
@@ -520,7 +526,7 @@ textarea {
 
 
 // 热点图标闪动
-.opacityChange{
+.opacityChange {
   animation: opacityChange 2s infinite linear;
 }
 @keyframes opacityChange {

src/components/IsDev/index.module.scss

@@ -1,33 +1,21 @@
 .isDev {
-  width: 100%;
-  height: 100%;
   position: fixed;
-  z-index: 100;
-  top: 0;
-  left: 0;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 150px;
+  height: 40px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 12px;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
-  background: url('../../assets/img/devingBG.png') no-repeat center center;
-  background-size: 100% 100%;
+  transition: all 0.6s ease-in-out;
   :global {
-    .back {
-      width: 60px;
-      height: 30px;
-      position: absolute;
-      z-index: 3;
-      top: 3%;
-      left: 4%;
-      cursor: pointer;
-
-      & > img {
-        height: 100%;
-        object-fit: contain;
-      }
-    }
-    .deving {
-      font-size: 24px;
-      font-weight: 500;
+    .txt {
+      font-size: 16px;
+      font-weight: 600;
       color: rgba(93, 96, 96, 1);
     }
   }

src/components/IsDev/index.tsx

@@ -1,13 +1,9 @@
 import React from "react";
 import styles from "./index.module.scss";
-function IsDev({ closeFn }: { closeFn: () => void }) {
-
+function IsDev({ txt, isShow }: { txt: string, isShow: boolean }) {
   return (
-    <div className={styles.isDev}>
-      <div className='deving'>加急开发中!!</div>
-      <div className='back' onClick={() => closeFn()}>
-        <img src={require('@/assets/img/btn_back.png')} alt='' />
-      </div>
+    <div className={`${styles.isDev}`} style={{ top: isShow ? '20px' : '-50%' }}>
+      <div className="txt">{txt}</div>
     </div>
   )
 }

src/components/Message/index.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect } from "react";
+import { message } from "antd";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
+
+function MessageCom() {
+  // 从仓库中获取 antd 轻提示信息
+  const messageReducerInfo = useSelector(
+    (state: RootState) => state.A0Layout.message
+  );
+
+  console.log(messageReducerInfo);
+
+  const [messageApi, contextHolder] = message.useMessage();
+
+  useEffect(() => {
+    if (messageReducerInfo.txt) {
+      messageApi.open({
+        type: messageReducerInfo.type,
+        content: messageReducerInfo.txt,
+        duration: messageReducerInfo.duration,
+      });
+    }
+  }, [messageApi, messageReducerInfo]);
+
+  return <>{contextHolder}</>;
+}
+
+const MemoMessage = React.memo(MessageCom);
+
+export default MemoMessage;

src/pages/A0base/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import { isPc, myData } from '@/utils/http'
 import classNames from 'classnames'
@@ -9,7 +9,7 @@ import IsDev from '@/components/IsDev'
 function A0base() {
   const [currentBase, setCurrentBase] = useState(0)
   const [isOpenInteract, setIsOpenInteract] = useState(false)
-  const [isOpenGuideVideo, setIsOpenGuideVideo] = useState(false)
+  const [showIsDev, setShowIsDev] = useState(false)
 
   const goto = (e: React.MouseEvent, path: string) => {
     e.preventDefault()
@@ -17,6 +17,13 @@ function A0base() {
     window.location.replace(path)
   }
 
+  useEffect(() => {
+    showIsDev && setTimeout(() => {
+      setShowIsDev(false)
+    }, 2000)
+  }, [showIsDev])
+
+
   return (
     <div className={classNames(isPc ? '' : styles.A0baseMo, styles.A0base)}>
       <div className='A0baseContainner'>
@@ -40,10 +47,10 @@ function A0base() {
 
       {/* 互动 */}
       <div className='interact'>
-        <div className={`inter_content ${isOpenInteract ? 'inter_content_active' : ''}`}>
-          <div className='inter' onClick={() => setIsOpenGuideVideo(true)} > 碑影智绘</div>
-          <div className='inter' onClick={() => setIsOpenGuideVideo(true)} > 展览图谱</div>
-          <div className='inter' onClick={() => setIsOpenGuideVideo(true)}> AI问答</div>
+        <div className={`inter_content ${isOpenInteract ? 'inter_content_active' : ''}`} onClick={() => setShowIsDev(true)}>
+          <div className='inter' > 碑影智绘</div>
+          <div className='inter'  > 展览图谱</div>
+          <div className='inter'> AI问答</div>
         </div >
         <div className='icon' onClick={() => setIsOpenInteract(!isOpenInteract)}>
           <img src={require('@/assets/img/interaction.png')} alt='' />
@@ -55,16 +62,13 @@ function A0base() {
       </div>
 
       {/* 先导片 */}
-      <div className='guideVideo' onClick={() => setIsOpenGuideVideo(true)}>
+      <div className='guideVideo'>
         <img src={require('@/assets/img/guideVideo.png')} alt='' />
         <div className='guideVideoTitle'>先导片</div>
       </div>
 
-      {
-        isOpenGuideVideo && (
-          <IsDev closeFn={() => setIsOpenGuideVideo(false)} />
-        )
-      }
+      <IsDev txt='加急开发中！' isShow={showIsDev} />
+
     </div >
   )
 }

src/pages/A5wenwu/index.module.scss

@@ -13,7 +13,7 @@
       left: 4%;
       cursor: pointer;
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: contain;
       }
@@ -32,7 +32,7 @@
       justify-content: center;
       flex-direction: column;
 
-      &>img {
+      & > img {
         width: 100%;
         object-fit: contain;
       }
@@ -70,7 +70,7 @@
         height: 55px;
         cursor: pointer;
 
-        &>img {
+        & > img {
           width: 100%;
           object-fit: contain;
         }
@@ -109,7 +109,7 @@
         height: 55px;
         cursor: pointer;
 
-        &>img {
+        & > img {
           width: 100%;
           object-fit: contain;
         }
@@ -129,6 +129,72 @@
   }
 }
 
+.tapianModal,
+.lineModal {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  :global {
+    .close {
+      width: 100px;
+      height: 50px;
+      position: absolute;
+      z-index: 3;
+      top: 6%;
+      right: 4%;
+      cursor: pointer;
+
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    .TContainner {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .TLeft {
+        position: absolute;
+        left: 2%;
+        width: 20%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 40px;
+        .Tbtn1,
+        .Tbtn2 {
+          width: 70px;
+          height: 70px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 17px;
+          cursor: pointer;
+          background: url('../../assets/img/btn_tab.png') no-repeat;
+          background-size: 100% 100%;
+          color: rgba(255, 233, 182, 1);
+        }
+        .TActive {
+          color: rgba(124, 75, 54, 1);
+          background: url('../../assets/img/btn_tabAc.png') no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
+}
 
 // ---------移动端
 .A5wenwuMo {
@@ -157,7 +223,6 @@
       }
     }
 
-
     .gesture {
       left: 46%;
       width: 140px;
@@ -182,4 +247,4 @@
       }
     }
   }
-}
+}

src/pages/A5wenwu/index.tsx

@@ -7,6 +7,10 @@ import { isPc } from '@/utils/http'
 function A5wenwu() {
   const [currentTab, setCurrentTab] = useState('tab0')
   const [isShowGesture, setIsShowGesture] = useState(true)
+  const [isShowTapianModal, setIsShowTapianModal] = useState(false)
+  const [tapianType, setTapianType] = useState('碑面')
+  const [isShowLineModal, setIsShowLineModal] = useState(false)
+  const [lineType, setLineType] = useState('碑面')
 
   useEffect(() => {
     setIsShowGesture(true)
@@ -26,14 +30,14 @@ function A5wenwu() {
   }
 
   const handleTapian = () => {
-    handleTabClick('tab2')
-    callIframeFu('hideSize', undefined)
+    setCurrentTab('tab2')
+    setIsShowTapianModal(true)
     console.log('showTapian')
   }
 
   const handleLine = () => {
-    handleTabClick('tab3')
-    callIframeFu('hideSize', undefined)
+    setCurrentTab('tab3')
+    setIsShowLineModal(true)
     console.log('showLine')
   }
 
@@ -108,6 +112,40 @@ function A5wenwu() {
           <div className='txt'>重置</div>
         </div>
       </div>
+
+      {/* 拓片弹窗 */}
+      <div className={classNames(styles.tapianModal)} style={{ display: isShowTapianModal ? 'flex' : 'none' }}>
+        <div className='close' onClick={() => { handleTabClick('tab2'); setIsShowTapianModal(false) }}>
+          <img src={require('@/assets/img/closeWithTxt.png')} alt='' />
+        </div>
+        <div className="TContainner">
+          <div className="TLeft">
+            <div className={`Tbtn1 ${tapianType === '碑面' ? 'TActive' : ''}`} onClick={() => setTapianType('碑面')}>碑面</div>
+            <div className={`Tbtn2 ${tapianType === '碑文' ? 'TActive' : ''}`} onClick={() => setTapianType('碑文')}>碑文</div>
+          </div>
+          <div className="TRight">
+            <img src={require(`@/assets/img/A5_tapian${tapianType === '碑面' ? '1' : '2'}.png`)} alt="" />
+          </div>
+        </div>
+
+      </div>
+
+      {/* 线图弹窗 */}
+      <div className={classNames(styles.lineModal)} style={{ display: isShowLineModal ? 'flex' : 'none' }}>
+        <div className='close' onClick={() => { handleTabClick('tab3'); setIsShowLineModal(false) }}>
+          <img src={require('@/assets/img/closeWithTxt.png')} alt='' />
+        </div>
+        <div className="TContainner">
+          <div className="TLeft">
+            <div className={`Tbtn1 ${lineType === '碑面' ? 'TActive' : ''}`} onClick={() => setLineType('碑面')}>碑面</div>
+            <div className={`Tbtn2 ${lineType === '碑文' ? 'TActive' : ''}`} onClick={() => setLineType('碑文')}>碑文</div>
+          </div>
+          <div className="TRight">
+            <img src={require(`@/assets/img/A5_xiantu${lineType === '碑面' ? '1' : '2'}.png`)} alt="" />
+          </div>
+        </div>
+
+      </div>
     </div>
   )
 }

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

@@ -190,6 +190,7 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
   })
 
   const bindMobile = useDrag(({ offset: [x, y] }) => {
+    console.log(x, y, '------------')
     // 计算视口最大移动范围
     const maxX = contentSize.width * miniMapScale - MAIN_CONTENT_WIDTH * MINIMAP_SCALE - 2
     const maxY = contentSize.height * miniMapScale - MAIN_CONTENT_HEIGHT * MINIMAP_SCALE - 4
@@ -201,12 +202,8 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
   }, {
     // 移动端专用配置
     pointer: { touch: true },
-    pointerEvents: true,
-    // 阻止触摸滚动
     preventScroll: true,
-    // 延迟触发防止误触
-    delay: 100,
-    // filterTouches: (e: TouchEvent) => e.target === e.currentTarget
+    filterTouches: (e: TouchEvent) => e.target === e.currentTarget
   })
 
 

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

@@ -1,5 +1,9 @@
 .Genealogy {
-  position: relative;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 3;
   width: 100%;
   height: 100%;
   background: url('../../../assets/img/A6_gen_bg.png') no-repeat center center;

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

@@ -1,5 +1,9 @@
 .StatueArt {
-  position: relative;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 3;
   width: 100%;
   height: 100%;
   background: url('../../../assets/img/A6_ffhy_bg.png') no-repeat center center;

src/pages/A6ybwx/index.module.scss

@@ -19,7 +19,7 @@
         left: 4%;
         cursor: pointer;
 
-        &>img {
+        & > img {
           height: 100%;
           object-fit: contain;
         }
@@ -50,29 +50,40 @@
         border: none;
       }
 
-      .tabBar {
+      .BtnTabBar {
         position: absolute;
         z-index: 3;
         bottom: 20px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 280px;
-        height: 35px;
+        right: 3%;
+        width: 40px;
+        height: 280px;
         cursor: pointer;
         display: flex;
-        justify-content: space-between;
+        flex-direction: column;
         align-items: center;
-
-        .tab {
-          width: 48%;
-          height: 100%;
+        gap: 20px;
+        .tab1,
+        .tab2,
+        .tab3 {
+          width: 55px;
+          height: 55px;
           line-height: 35px;
           display: flex;
           justify-content: center;
           align-items: center;
           color: rgba(91, 71, 46, 1);
           font-size: 12px;
-          background: url('../../assets/img/A6_base2_btn_bg.png') no-repeat center center;
+        }
+        .tab1 {
+          background: url('../../assets/img/A6_shixi.png') no-repeat center center;
+          background-size: 100% 100%;
+        }
+        .tab2 {
+          background: url('../../assets/img/A6_fanfeng.png') no-repeat center center;
+          background-size: 100% 100%;
+        }
+        .tab3 {
+          background: url('../../assets/img/A6_sangzang.png') no-repeat center center;
           background-size: 100% 100%;
         }
       }
@@ -80,7 +91,6 @@
   }
 }
 
-
 // --------移动端
 .A6ybwxMo {
   :global {
@@ -96,13 +106,12 @@
       .tabBar {
         width: 340px;
         height: 45px;
-        .tab{
+        .tab {
           width: 46%;
           font-size: 18px;
           font-weight: 700;
         }
       }
     }
-
   }
-}
+}

src/pages/A6ybwx/index.tsx

@@ -4,6 +4,7 @@ import StatueArt from "./StatueArt";
 import Genealogy from "./Genealogy";
 import classNames from 'classnames'
 import { isPc } from "@/utils/http";
+import MenuSider from "@/components/MenuSider";
 
 function A6ybwx() {
   const [isEnter, setIsEnter] = useState(true)
@@ -55,8 +56,8 @@ function A6ybwx() {
   }, [isEnter, videoOk])
 
   return (
-    <div className={classNames(styles.A6ybwx,isPc?'':styles.A6ybwxMo)}>
-      {gotoTab === 0 && <div className="videoBox">
+    <div className={classNames(styles.A6ybwx, isPc ? '' : styles.A6ybwxMo)}>
+      <div className="videoBox">
         <div className='back' onClick={() => window.location.replace('#/base')}>
           <img src={require('@/assets/img/btn_back.png')} alt='' />
         </div>
@@ -65,15 +66,15 @@ function A6ybwx() {
         <div className='A6video' style={{ opacity: 1 }}></div>
         <iframe style={{ zIndex: isEnter ? 2 : -1 }} title="A6ybwx" src="https://app.4dage.com/projects/Chenzhebei-ShanxiMuseum/RoomScene/index.html" />
 
-        <div className="tabBar" style={{ display: isEnter ? 'flex' : 'none' }}>
-          <div className='tab' onClick={() => setGotoTab(1)}>
-            造像艺术
-          </div>
-          <div className='tab' style={{ left: '50%' }} onClick={() => setGotoTab(2)}>
-            程氏谱系
-          </div>
+        <div className="BtnTabBar" style={{ display: isEnter ? 'flex' : 'none' }}>
+          <div className='tab1' onClick={() => setGotoTab(1)} />
+          <div className='tab2' style={{ left: '50%' }} onClick={() => setGotoTab(2)} />
+          <div className='tab3' style={{ left: '50%' }} onClick={() => setGotoTab(3)} />
         </div>
-      </div>}
+      </div>
+
+      <MenuSider activeTab={1} />
+
       {/* 造像艺术 */}
       {gotoTab === 1 && <StatueArt setGotoTab={setGotoTab} />}