数据更新

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

public/myData/myData.js

@@ -217,7 +217,7 @@ const myDataTemp = {
         '假恒农太守程定宗，诏假常山太守程文静，前祭酒、轻车将军、给事中程海珍，假太原太守程盖世、程进、程庆仲等造。朔州故平北府长史程钵、字洪根，故晋阳令程蠡、字士琏，故高都令程买、字市略，故赠代郡太守程府君之碑文。',
       // 译文
       translate:
-        '假恒农太守程定宗、诏假常山太守程文静、前祭酒轻车将军给事中程海珎、假太原太守程盖世、程进、程庆仲等造：原朔州平北府长史程钵字洪根、原晋阳令程䗍字士琏、原高都令程买字市略、原赠代郡太守程府君之碑文。'
+        '假恒农太守程定宗、诏假常山太守程文静、前祭酒轻车将军给事中程海珎、假太原太守程盖世、程进、程庆仲等造：原朔州平北府长史程钵字洪根、原晋阳令程䗍字士琏、原高都令程买字市略、原赠代郡太守程府君之碑文。<div class=t1 />'
     },
     {
       // 关键词以及注释

src/assets/styles/base.css

@@ -418,3 +418,14 @@ textarea {
     opacity: 1;
   }
 }
+@keyframes gestureState1 {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(-50px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}

src/assets/styles/base.less

@@ -543,4 +543,20 @@ textarea {
   100% {
     opacity: 1;
   }
+}
+
+@keyframes gestureState1 {
+  0% {
+    transform: translateX(0);
+  }
+
+
+  50% {
+    transform: translateX(-50px);
+  }
+
+
+  100% {
+    transform: translateX(0);
+  }
 }

src/components/MenuSider/index.tsx

@@ -8,6 +8,10 @@ import { isPc } from '@/utils/http'
  */
 function MenuSider({ activeTab }: { activeTab: number }) {
   const [isShowMenu, setIsShowMenu] = useState(false)
+
+  const byzhClick = (activeTab: number) => {
+    window.location.replace(activeTab === 0 ? '#/byzh?fromPath=yblm' : activeTab === 1 ? '#/byzh?fromPath=yblm' : '#/byzh?fromPath=yblm')
+  }
   return (
     <>
       <div
@@ -67,7 +71,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
               </div>
             </div>
             <div className='icon'>
-              <div className='paint' onClick={() => window.location.replace('#/byzh')}>
+              <div className='paint' onClick={() => byzhClick(activeTab)}>
                 <img src={require('@/assets/img/icon_paint.png')} alt='' />
                 <div className='txt'>碑影智绘</div>
               </div>

src/pages/A0base/index.module.scss

@@ -23,11 +23,9 @@
         display: flex;
         flex-direction: column;
         gap: 10px;
-
         .title {
           width: 150px;
           max-width: 80%;
-          height: 20x;
           font-size: 21px;
           color: rgba(124, 75, 54, 1);
           border-bottom: 1px solid rgba(93, 96, 96, 0.4);
@@ -73,11 +71,12 @@
         gap: 20px;
 
         .base {
+          transition: all 0.3s ease-in-out;
           width: 165px;
           height: 60px;
           background: url('../../assets/img/A0_btn_bg.png') no-repeat center center;
           background-size: 100% 100%;
-          line-height: 60px;
+          line-height: 55px;
           text-align: center;
           color: rgba(255, 233, 182, 1);
           cursor: pointer;
@@ -87,7 +86,7 @@
           color: rgba(124, 75, 54, 1);
           background: url('../../assets/img/A0_btn_bg_ac.png') no-repeat center center;
           background-size: 100% 100%;
-          line-height: 55px;
+          // line-height: 55px;
         }
       }
     }
@@ -239,11 +238,11 @@
 
       .btn {
         font-size: 18px;
-        padding-top: 30px;
+        padding-top: 15px;
 
         &::before {
           left: 72px;
-          top: 30px;
+          top: 15px;
         }
       }
     }

src/pages/A0base/index.tsx

@@ -26,7 +26,7 @@ function A0base() {
   return (
     <div className={classNames(isPc ? '' : styles.A0baseMo, styles.A0base)}>
       <div className='A0baseContainner'>
-        <div className='content'>
+        <div className={`content`}>
           <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)}>查看详情</div>

src/pages/A1home/index.tsx

@@ -67,7 +67,7 @@ function A1home() {
       const dom = document.querySelector('.A1videoBox')
       if (dom) dom.append(playerRef.current.domElement)
     }
-  }, [baseFlag])
+  }, [baseFlag, isClickedSkip])
 
   useEffect(() => {
     if (video2Flag) {

src/pages/A1home2/index.tsx

@@ -6,6 +6,7 @@ import { isPc } from '@/utils/http'
 function A1home() {
   // 开场视频-------------
   const [baseFlag, setBaseFlag] = useState(false)
+  const [isClickedSkip, setIsClickedSkip] = useState(false)
   useEffect(() => {
     const params = {
       objectFit: 'cover', // 视频的object-fit样式, 默认 cover
@@ -50,7 +51,7 @@ function A1home() {
         onPlay: () => { }, // 触发播放事件
         onPause: () => { }, // 触发暂停事件
         onEnded: () => {
-          window.location.replace('#/base')
+          if (!isClickedSkip) window.location.replace('#/base')
         }, // 触发播放结束事件
         onSourceEstablished: () => {
           setVideoOk(true)
@@ -124,7 +125,10 @@ function A1home() {
       {baseFlag ? (
         <div className='A1videoBox'>
           <div className='A1video' style={{ opacity: 1 }}></div>
-          <div className='A1videoBtn' onClick={() => window.location.replace('#/base')}>
+          <div className='A1videoBtn' onClick={() => {
+            setIsClickedSkip(true)
+            if (!isClickedSkip) window.location.replace('#/base')
+          }}>
             跳过
           </div>
         </div>

src/pages/A2yblm/components/ModalTxt/index.module.scss

@@ -75,6 +75,7 @@
           }
 
           .tabNub {
+            transition: all 0.3s ease-in-out;
             font-size: 18px;
             position: absolute;
             top: 34%;
@@ -148,6 +149,18 @@
             color: rgba(94, 52, 34, 1); // 原始颜色
             overflow: auto;
             padding-bottom: 10px;
+            -webkit-overflow-scrolling: touch; /* 启用原生平滑滚动 */
+            overflow-scrolling: touch;
+            overscroll-behavior-y: none;
+
+            .t1 {
+              width: 100%;
+              height: 17px;
+            }
+            .t2 {
+              width: 100%;
+              height: 370px;
+            }
 
             &::-webkit-scrollbar {
               width: 0px;

src/pages/A2yblm/components/ModalTxt/index.tsx

@@ -32,6 +32,9 @@ function ModalTxt({
   const originRef = useRef<any>(null)
   const translateRef = useRef<any>(null)
   const contentRef = useRef<any>(null)
+  const originStartX = useRef<number>(0)
+  const translateStartX = useRef<number>(0)
+  const contentStartX = useRef<number>(0)
 
   useEffect(() => {
     if (selectedTab !== 0) {
@@ -52,47 +55,108 @@ function ModalTxt({
     const OriContent = document.getElementById('OriContent')
     const introContent = document.getElementById('introContent')
     const TransContent = document.getElementById('TransContent')
+    console.log(TransContent, 'TransContent')
+    // // 新增滚动同步逻辑
+    let isSyncing = false
+
+    const syncScroll = (source: HTMLElement, target: HTMLElement) => {
+      if (!isSyncing) {
+        isSyncing = true
+        target.scrollTop = source.scrollTop
+        setTimeout(() => isSyncing = false, 100)
+      }
+    }
+
+    const handleOriScroll = () => {
+      if (OriContent && TransContent) {
+        // syncScroll(OriContent, TransContent)
+        TransContent.scrollTop = OriContent.scrollTop
+      }
+    }
+
+    const handleTransScroll = () => {
+      if (TransContent && OriContent) {
+        // syncScroll(TransContent, OriContent)
+        OriContent.scrollTop = TransContent.scrollTop
+      }
+    }
+
+    // if (OriContent) {
+    //   OriContent.addEventListener('scroll', handleOriScroll)
+    // }
+    // if (TransContent) {
+    //   TransContent.addEventListener('scroll', handleTransScroll)
+    // }
+
+    // return () => {
+    //   if (OriContent) {
+    //     OriContent.removeEventListener('scroll', handleOriScroll)
+    //   }
+    //   if (TransContent) {
+    //     TransContent.removeEventListener('scroll', handleTransScroll)
+    //   }
+    // }
+    const handleStart = (e: TouchEvent, startX: any) => {
+      startX.current = e.touches[0].clientX
+    }
     const handlerOri = (e: TouchEvent) => {
       // e.stopPropagation()
-      const deltaX = e.touches[0].clientX
-      if (OriContent) {
-        OriContent.scrollTop += deltaX
+      const deltaX = e.touches[0].clientX - originStartX.current
+
+      if (OriContent && TransContent) {
+        OriContent.scrollTop += deltaX * 0.06
+        console.log(OriContent.scrollTop, 'scrollTop')
+        TransContent.scrollTop = OriContent.scrollTop
       }
     }
-    const handler = (e: TouchEvent) => {
+
+    const handlerTrans = (e: TouchEvent) => {
       // e.stopPropagation()
-      const deltaX = e.touches[0].clientX
-      if (tooltipContent) {
-        tooltipContent.scrollTop += deltaX
+      const deltaX = e.touches[0].clientX - translateStartX.current
+
+      if (TransContent && OriContent) {
+        TransContent.scrollTop += deltaX * 0.06
+        OriContent.scrollTop = TransContent.scrollTop
       }
     }
+
     // 处理触摸开始事件
 
     if (OriContent) {
+      OriContent.addEventListener('touchstart', (e) => { handleStart(e, originStartX) })
       OriContent.addEventListener('touchmove', handlerOri)
-      return () => {
-        OriContent.removeEventListener('touchmove', handlerOri) // 保持参数一致
-      }
-    }
-    if (tooltipContent) {
-      tooltipContent.addEventListener('touchmove', handler)
-      return () => {
-        tooltipContent.removeEventListener('touchmove', handler) // 保持参数一致
-      }
-    }
-    if (introContent) {
-      introContent.addEventListener('touchmove', handler)
-      return () => {
-        introContent.removeEventListener('touchmove', handler) // 保持参数一致
-      }
+      OriContent.addEventListener('scroll', handleOriScroll)
     }
+    // if (tooltipContent) {
+    //   tooltipContent.addEventListener('touchmove', handler)
+    //   return () => {
+    //     tooltipContent.removeEventListener('touchmove', handler) // 保持参数一致
+    //   }
+    // }
+    // if (introContent) {
+    //   introContent.addEventListener('touchmove', handler)
+    //   return () => {
+    //     introContent.removeEventListener('touchmove', handler) // 保持参数一致
+    //   }
+    // }
     if (TransContent) {
-      TransContent.addEventListener('touchmove', handler)
+      console.log(TransContent, 'TransContent')
+      TransContent.addEventListener('touchstart', (e) => { handleStart(e, translateStartX) })
+      TransContent.addEventListener('touchmove', handlerTrans)
+      TransContent.addEventListener('scroll', handleTransScroll)
+    }
+    if (OriContent && TransContent) {
       return () => {
-        TransContent.removeEventListener('touchmove', handler) // 保持参数一致
+        OriContent.removeEventListener('touchstart', (e) => { handleStart(e, originStartX) })
+        OriContent.removeEventListener('touchmove', handlerOri) // 保持参数一致
+        OriContent.removeEventListener('scroll', handleOriScroll)
+        TransContent.removeEventListener('touchstart', (e) => { handleStart(e, translateStartX) })
+        TransContent.removeEventListener('touchmove', handlerTrans) // 保持参数一致
+        TransContent.removeEventListener('scroll', handleTransScroll)
       }
     }
-  }, [])
+
+  }, [selectedTab])
 
 
   //动态加入a标签
@@ -107,12 +171,16 @@ function ModalTxt({
     define: string
     inset: string
   }) => {
+    const dragFlag = useRef(false); // 新增拖拽标志位
+
     const handleClick = () => {
+      if (dragFlag.current) return; // 如果是拖拽操作则直接返回
       setActiveAId(index)
       setShowTooltip(index)
       const tooltip = document.querySelector('.ant-tooltip') as HTMLElement
       if (isMobiileFu() && tooltip) tooltip.style.inset = inset
     }
+
     return (
       <Tooltip
         title={
@@ -154,7 +222,15 @@ function ModalTxt({
         <a
           key={index}
           className={activeAId === index ? 'active' : ''}
-          onTouchEnd={handleClick}
+          onTouchStart={() => dragFlag.current = false} // 触摸开始时重置标志位
+          onTouchMove={() => dragFlag.current = true}  // 检测到移动时标记为拖拽
+          onTouchEnd={(e) => {
+            if (!dragFlag.current) {  // 只有非拖拽操作才处理
+              handleClick();
+            }
+            e.preventDefault();
+            e.stopPropagation();
+          }}
           onClick={handleClick}
         >
           {word}

src/pages/A2yblm/index.module.scss

@@ -19,6 +19,7 @@
       transform: translateY(-50%);
 
       .tab {
+        transition: all 0.3s ease-in-out;
         display: flex;
         align-items: center;
         justify-content: center;

src/pages/A3beie/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import styles from './index.module.scss'
-import { backPageFu, callIframeFu } from '@/utils/history'
+import { callIframeFu } from '@/utils/history'
 import classNames from 'classnames'
 import { isPc } from '@/utils/http'
 import MenuSider from '@/components/MenuSider'
 
 function A3beie() {
   const handleBack = () => {
-    backPageFu('#/yblm?m=tab3')
+    window.location.replace('#/yblm?m=tab3')
     callIframeFu('showInscription', -1)
   }
 

src/pages/A4quanwen/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import styles from './index.module.scss'
-import { backPageFu, callIframeFu } from '@/utils/history'
+import { callIframeFu } from '@/utils/history'
 import { isPc, myData } from '@/utils/http'
 import classNames from 'classnames'
 
@@ -24,9 +24,9 @@ function A4quanwen() {
     if (urlAll.includes('?m=')) {
       const tabNum = urlAll.split('?m=')[1]
 
-      backPageFu(`#/yblm?m=${tabNum}`)
+      window.location.replace(`#/yblm?m=${tabNum}`)
     } else {
-      backPageFu('#/yblm')
+      window.location.replace('#/yblm')
     }
   }
 

src/pages/A5wenwu/index.module.scss

@@ -32,7 +32,14 @@
       justify-content: center;
       flex-direction: column;
 
+      &.state1 {
+        & > img {
+          animation: gestureState1 2s linear;
+        }
+      }
+
       & > img {
+        transform: translateX(0);
         width: 100%;
         object-fit: contain;
       }
@@ -175,6 +182,7 @@
         gap: 40px;
         .Tbtn1,
         .Tbtn2 {
+          transition: all 0.3s ease-in-out;
           width: 70px;
           height: 70px;
           display: flex;

src/pages/A5wenwu/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import styles from './index.module.scss'
-import { backPageFu, callIframeFu } from '@/utils/history'
+import { callIframeFu } from '@/utils/history'
 import classNames from 'classnames'
 import { isPc } from '@/utils/http'
 
@@ -12,13 +12,24 @@ function A5wenwu() {
   const [isShowLineModal, setIsShowLineModal] = useState(false)
   const [lineType, setLineType] = useState('碑面')
 
+  const [gestureState1, setGestureState1] = useState('')
+
   useEffect(() => {
-    setIsShowGesture(true)
     setTimeout(() => {
-      setIsShowGesture(false)
-    }, 2000)
+      setGestureState1('state1')
+      setTimeout(() => {
+        setGestureState1('')
+      }, 2000)
+    }, 500)
   }, [])
 
+  // useEffect(() => {
+  //   setIsShowGesture(true)
+  //   setTimeout(() => {
+  //     setIsShowGesture(false)
+  //   }, 2000)
+  // }, [])
+
   useEffect(() => {
     if (currentTab !== 'tab1') callIframeFu('hideSize', undefined)
   }, [currentTab])
@@ -61,9 +72,9 @@ function A5wenwu() {
     if (urlAll.includes('?m=')) {
       const tabNum = urlAll.split('?m=')[1]
 
-      backPageFu(`#/yblm?m=${tabNum}`)
+      window.location.replace(`#/yblm?m=${tabNum}`)
     } else {
-      backPageFu('#/yblm')
+      window.location.replace('#/yblm')
     }
   }
 
@@ -77,7 +88,7 @@ function A5wenwu() {
       </div>
 
       {isShowGesture && (
-        <div className='gesture'>
+        <div className={classNames('gesture', gestureState1)} >
           <img src={require('@/assets/img/A5_gesture.png')} alt='' />
           <div className='txt'>单指滑动进行旋转</div>
         </div>

src/pages/A7wjwj/index.tsx

@@ -5,13 +5,11 @@ import Discover from "./conponents/Discover";
 import Shuxing from "./conponents/Shuxing";
 import { myData } from "@/utils/http";
 
-
-import { backPageFu } from "@/utils/history";
 function A7Wjwj() {
   const [currentTab, setCurrentTab] = useState(0)
 
   const gotoBack = () => {
-    backPageFu('#/base')
+    window.location.replace('#/base')
   }
   return (
     <div className={styles.A7Wjwj}>

src/pages/A8byzh/index.module.scss

@@ -1,7 +1,25 @@
 .A8byzh {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
   width: 100%;
   height: 100%;
   :global {
+    .back {
+      width: 60px;
+      height: 30px;
+      position: absolute;
+      z-index: 3;
+      top: 3%;
+      left: 4%;
+      cursor: pointer;
+
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+    }
     iframe {
       width: 100%;
       height: 100%;

src/pages/A8byzh/index.tsx

@@ -1,10 +1,25 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styles from "./index.module.scss";
 function A8byzh() {
+  const fromPath = new URLSearchParams(window.location.hash.split('?')[1] || '')
+    .get('fromPath') || ''
+  console.log(fromPath)
+  const backToBase = () => {
+    window.location.replace(fromPath ? `#/${fromPath}` : '#/base')
+  }
 
+  useEffect(() => {
+    const byzhModal = document.getElementById('byzhModal') as HTMLIFrameElement | null
+    if (byzhModal) {
+      byzhModal.src = 'beiyingzhihui/index.html'
+    }
+  })
   return (
     <div className={styles.A8byzh}>
-      <iframe src="beiyingzhihui/index.html" title="byzh" />
+      <div className='back' onClick={backToBase}>
+        <img src={require('@/assets/img/btn_back.png')} alt='' />
+      </div>
+      <iframe id='byzhModal' title="byzh" />
     </div>
   )
 }