public/index.html

@@ -41,6 +41,8 @@
 
     <div id="pdf-viewer-root"></div>
 
+    <div id="tapianBtns"></div>
+
     <!-- 一进页面就加载字体 -->
     <i class="fontLoding">123</i>
   </body>

src/App.tsx

@@ -10,6 +10,7 @@ import NotFound from '@/components/NotFound'
 import TouchContainer from './components/TouchContainer'
 import { envFlag } from './utils/http'
 import AsyncSpinLoding from './components/AsyncSpinLoding'
+import QuanwenBtns from './components/QuanwenBtns'
 import { Image } from 'antd'
 import MessageCom from '@/components/Message'
 import { setStoreLangueFu } from './utils/storage'
@@ -1059,6 +1060,7 @@ export default function App() {
               < div className='previewImage'  >
                 <TouchContainer className='Ori' zoom={lookBigImg.zoom}>{originalNode}</TouchContainer>
                 <div className='ImgFromTxt'>{lookBigImg.fromTxt}</div>
+                {lookBigImg.url.includes('tapian') || lookBigImg.url.includes('xiantu') ? <QuanwenBtns name={lookBigImg.url.includes('tapian') ? 'tapian' : 'xiantu'} /> : null}
               </div >
             ),
             visible: lookBigImg.show,

src/assets/styles/base.css

@@ -655,7 +655,7 @@ textarea {
   100% {
     /* 最后一帧：横向偏移 = -(总帧数-1) × 单帧宽度 */
     /* 10帧：-(10-1)×200 = -1800px */
-    transform: translate(-5845px, 0);
+    transform: translate(-11857px, 0);
   }
 }
 @keyframes bei_xia {

src/assets/styles/base.less

@@ -843,7 +843,7 @@ textarea {
   100% {
     /* 最后一帧：横向偏移 = -(总帧数-1) × 单帧宽度 */
     /* 10帧：-(10-1)×200 = -1800px */
-    transform: translate(-5845px, 0);
+    transform: translate(-11857px, 0);
   }
 }
 

src/components/QuanwenBtns/index.module.scss

@@ -0,0 +1,54 @@
+.tapianBtns {
+  width: 136px !important;
+  height: 500px !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: absolute;
+  top: 51%;
+  left: 5%;
+  gap: 40px;
+  transform: translateY(-50%);
+  :global {
+    .btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: url(../../assets/sgImg/Component.png) no-repeat center center;
+      background-size: 100% 100%;
+      text-align: center;
+      line-height: 15px;
+      letter-spacing: 1px;
+      font-weight: 500;
+      color: #fbebbd;
+      cursor: pointer;
+      width: 120px;
+      height: 120px;
+      font-size: 26px;
+    }
+    .btnAc {
+      background: url(../../assets/sgImg/ComponentAc.png) no-repeat center center;
+      background-size: 100% 100%;
+      color: #7c4b36;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .tapianBtns {
+    width: 50px !important;
+    height: 200px !important;
+    gap: 20px;
+    left: 50%;
+    top: 10%;
+    transform: translate(-50%, -50%) rotate(90deg);
+    :global {
+      .btn {
+        width: 60px;
+        height: 60px;
+        font-size: 14px;
+      }
+    }
+  }
+}

src/components/QuanwenBtns/index.tsx

@@ -0,0 +1,36 @@
+
+
+import React, { useState } from 'react'
+import styles from './index.module.scss'
+import store from '@/store'
+import { isMobiileFu } from '@/utils/history'
+
+type props = {
+  name: string
+}
+// name: tapian or xiantu
+function QuanwenBtns({ name }: props) {
+  const [currentActive, setCurrentActive] = useState(1)
+  return (
+    <div className={styles.tapianBtns}>
+      <div className={`btn songFont ${currentActive === 1 ? 'btnAc' : ''}`} onClick={() => {
+        setCurrentActive(1)
+        store.dispatch({
+          type: 'layout/lookBigImg',
+          payload: { url: require(`@/assets/img/A5_${name === 'tapian' ? 'tapian1.jpg' : 'xiantu1.png'}`), show: true, fromTxt: '', zoom: isMobiileFu() ? 2 : 1 }
+        })
+      }}>碑阳</div>
+      <div className={`btn songFont ${currentActive === 2 ? 'btnAc' : ''}`} onClick={() => {
+        setCurrentActive(2)
+        store.dispatch({
+          type: 'layout/lookBigImg',
+          payload: { url: require(`@/assets/img/A5_${name === 'tapian' ? 'tapian2.jpg' : 'xiantu2.png'}`), show: true, fromTxt: '', zoom: isMobiileFu() ? 1.5 : 1 }
+        })
+      }}>碑阴</div>
+    </div>
+  )
+}
+
+const MemoQuanwenBtns = React.memo(QuanwenBtns)
+
+export default MemoQuanwenBtns

src/components/TouchContainer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 
 type TCProps = { className?: string; children?: React.ReactNode; zoom?: number }
@@ -18,6 +18,9 @@ function TouchContainer(props: TCProps) {
     midY: 0 // 两指缩放的中点 Y 坐标
   })
 
+  useEffect(() => {
+    setZoom(props.zoom || 1)
+  }, [props.zoom])
 
   // useEffect(() => {
   //   const touchContainer = document.getElementById('touch-container')

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

@@ -307,7 +307,7 @@
             width: auto;
             height: 167px;
             object-fit: fill;
-            animation: bei_shang 3s steps(35) forwards;
+            animation: bei_shang 5s steps(71) forwards;
           }
 
           .bei2 {

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

@@ -8,9 +8,8 @@ import shufaBei from '@/assets/img/A2_shufa_bei.png'
 import lian1 from '@/assets/img/frame_lian1.png'
 import lian2 from '@/assets/img/frame_lian2.png'
 import bei1 from '@/assets/img/frame_bei1.png'
-import bei2 from '@/assets/img/frame_bei2.png'
 
-type ActiveItem = 'lian1' | 'lian2' | 'bei1' | 'bei2' | 'normal'
+type ActiveItem = 'lian1' | 'lian2' | 'bei1' | 'normal'
 function Shufa({ setIsShowShufa, style }: { setIsShowShufa: (isShowShufa: boolean) => void, style?: React.CSSProperties }) {
   const [showName, setName] = useState('shufa1')
   const [activeItem, setActiveItem] = useState<ActiveItem>('normal')
@@ -31,7 +30,7 @@ function Shufa({ setIsShowShufa, style }: { setIsShowShufa: (isShowShufa: boolea
   }
 
   useEffect(() => {
-    [shufaLian, shufaBei, lian1, lian2, bei1, bei2].forEach((item) => {
+    [shufaLian, shufaBei, lian1, lian2, bei1].forEach((item) => {
       const img = new Image();
       img.src = item;
     })
@@ -44,8 +43,7 @@ function Shufa({ setIsShowShufa, style }: { setIsShowShufa: (isShowShufa: boolea
     const delayMap = {
       lian1: 5000,
       lian2: 4000,
-      bei1: 4000,
-      bei2: 4000
+      bei1: 4000
     }
 
     if (activeItem && activeItem !== 'normal' && delayMap.hasOwnProperty(activeItem)) {
@@ -173,9 +171,7 @@ function Shufa({ setIsShowShufa, style }: { setIsShowShufa: (isShowShufa: boolea
               src={
                 activeItem === 'bei1'
                   ? bei1
-                  : activeItem === 'bei2'
-                    ? bei2
-                    : shufaBei
+                  : shufaBei
               }
               alt=''
             />
@@ -185,11 +181,11 @@ function Shufa({ setIsShowShufa, style }: { setIsShowShufa: (isShowShufa: boolea
               <div
                 className={`txtitem ${activeItem === `bei${index}` ? 'txtitemAc' : ''}`}
                 key={index}
-                onClick={() => index > 0 && index < 3 && setActiveItem(`bei${index}` as ActiveItem)}
+                onClick={() => index === 1 && setActiveItem(`bei${index}` as ActiveItem)}
               >
                 <div
                   className='icon'
-                  style={{ visibility: index === 0 || index === 3 ? 'hidden' : 'visible' }}
+                  style={{ visibility: index !== 1 ? 'hidden' : 'visible' }}
                 >
                   <img src={require('@/assets/img/A7base3_icon.png')} alt='' />
                 </div>

src/pages/A5wenwu/index.module.scss

@@ -122,31 +122,41 @@
         }
       }
     }
-  }
-}
-
-.tapianModal,
-.lineModal {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  z-index: 3;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
 
-  :global {
-    .TContainner {
-      position: relative;
-      width: 100%;
-      height: 100%;
+    .tapianBtns {
+      width: 50px;
+      height: 200px;
       display: flex;
-      align-items: center;
       justify-content: center;
-      padding: 7% 5% 2%;
+      align-items: center;
+      flex-direction: column;
+      position: absolute;
+      z-index: 2;
+      top: 51%;
+      left: 5%;
+      gap: 20px;
+      transform: translateY(-50%);
+      .btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: url(../../assets/sgImg/Component.png) no-repeat center center;
+        background-size: 100% 100%;
+        text-align: center;
+        line-height: 15px;
+        letter-spacing: 1px;
+        font-weight: 500;
+        color: #fbebbd;
+        cursor: pointer;
+        width: 60px;
+        height: 60px;
+        font-size: 14px;
+      }
+      .btnAc {
+        background: url(../../assets/sgImg/ComponentAc.png) no-repeat center center;
+        background-size: 100% 100%;
+        color: #7c4b36;
+      }
     }
   }
 }

src/pages/A5wenwu/index.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import { useSelector } from 'react-redux'
 import store, { RootState } from '@/store'
 import Zback from '@/components/Zback'
-import Zclose from '@/components/Zclose'
+import QuanwenBtns from '@/components/QuanwenBtns'
 
 function A5wenwu() {
   const { myLangue } = useSelector((state: RootState) => state.A0Layout)
@@ -43,7 +43,7 @@ function A5wenwu() {
   const handleTapian = () => {
     store.dispatch({
       type: 'layout/lookBigImg',
-      payload: { url: require('@/assets/sgImg/img_tapian.png'), show: true, fromTxt: '', zoom: isMobiileFu() ? 4 : 1 }
+      payload: { url: require('@/assets/img/A5_tapian1.jpg'), show: true, fromTxt: '', zoom: isMobiileFu() ? 2 : 1 }
     })
     console.log('showTapian')
   }
@@ -51,7 +51,7 @@ function A5wenwu() {
   const handleLine = () => {
     store.dispatch({
       type: 'layout/lookBigImg',
-      payload: { url: require('@/assets/sgImg/img_xiantu.png'), show: true, fromTxt: '', zoom: isMobiileFu() ? 4 : 1 }
+      payload: { url: require('@/assets/img/A5_xiantu1.png'), show: true, fromTxt: '', zoom: isMobiileFu() ? 2 : 1 }
     })
     console.log('showLine')
   }
@@ -88,91 +88,72 @@ function A5wenwu() {
   }
 
   return (
-    <div className={classNames(styles.A5wenwu, myLangue === 'ZH' ? '' : styles.A5wenwuEn)}>
-      <Zback clickFu={() => gotoBack()} />
-
-      {isShowGesture && (
-        <div className={classNames('gesture', gestureState1)}>
-          <img src={require('@/assets/img/A5_gesture.png')} alt='' />
-          <div className='txt'>
-            {myLangue === 'EN' ? 'Rotate by swiping with a single finger' : '单指滑动进行旋转'}
+    <>
+      <div className={classNames(styles.A5wenwu, myLangue === 'ZH' ? '' : styles.A5wenwuEn)}>
+        <Zback clickFu={() => gotoBack()} />
+
+        {isShowGesture && (
+          <div className={classNames('gesture', gestureState1)}>
+            <img src={require('@/assets/img/A5_gesture.png')} alt='' />
+            <div className='txt'>
+              {myLangue === 'EN' ? 'Rotate by swiping with a single finger' : '单指滑动进行旋转'}
+            </div>
+          </div>
+        )}
+
+        {/* 左边 */}
+        <div className='A5_tabBar'>
+          <div className={`tab`} onClick={handleSize}>
+            <img
+              src={require(`@/assets/img/A5_size${currentTab === 'tab1' ? 'Ac' : ''}.png`)}
+              alt=''
+            />
+            <div className='txt'>{myLangue === 'EN' ? 'size' : '尺寸'}</div>
+          </div>
+          <div className={`tab`} onClick={handleTapian}>
+            <img
+              src={require(`@/assets/img/A5_tapian${currentTab === 'tab2' ? 'Ac' : ''}.png`)}
+              alt=''
+            />
+            <div className='txt'>{myLangue === 'EN' ? 'rubbings' : '拓片'}</div>
+          </div>
+          <div className={`tab`} onClick={handleLine}>
+            <img
+              src={require(`@/assets/img/A5_line${currentTab === 'tab3' ? 'Ac' : ''}.png`)}
+              alt=''
+            />
+            <div className='txt'>{myLangue === 'EN' ? 'graph' : '线图'}</div>
+          </div>
+          {/* 碑文 */}
+          <div className={`tab`} onClick={handleBeiwen}>
+            <img
+              src={require(`@/assets/img/A5_beiwen${currentTab === 'tab3' ? 'Ac' : ''}.png`)}
+              alt=''
+            />
+            <div className='txt'>{myLangue === 'EN' ? 'graph' : '碑文'}</div>
           </div>
         </div>
-      )}
-
-      {/* 左边 */}
-      <div className='A5_tabBar'>
-        <div className={`tab`} onClick={handleSize}>
-          <img
-            src={require(`@/assets/img/A5_size${currentTab === 'tab1' ? 'Ac' : ''}.png`)}
-            alt=''
-          />
-          <div className='txt'>{myLangue === 'EN' ? 'size' : '尺寸'}</div>
-        </div>
-        <div className={`tab`} onClick={handleTapian}>
-          <img
-            src={require(`@/assets/img/A5_tapian${currentTab === 'tab2' ? 'Ac' : ''}.png`)}
-            alt=''
-          />
-          <div className='txt'>{myLangue === 'EN' ? 'rubbings' : '拓片'}</div>
-        </div>
-        <div className={`tab`} onClick={handleLine}>
-          <img
-            src={require(`@/assets/img/A5_line${currentTab === 'tab3' ? 'Ac' : ''}.png`)}
-            alt=''
-          />
-          <div className='txt'>{myLangue === 'EN' ? 'graph' : '线图'}</div>
-        </div>
-        {/* 碑文 */}
-        <div className={`tab`} onClick={handleBeiwen}>
-          <img
-            src={require(`@/assets/img/A5_beiwen${currentTab === 'tab3' ? 'Ac' : ''}.png`)}
-            alt=''
-          />
-          <div className='txt'>{myLangue === 'EN' ? 'graph' : '碑文'}</div>
-        </div>
-      </div>
 
-      {/* 右边 */}
-      <div className='A5_tabBarR'>
-        <div className={`tab`} onClick={() => handleZoomIn(0.1)}>
-          <img src={require(`@/assets/img/A5_zoomin.png`)} alt='' />
-          <div className='txt'>{myLangue === 'EN' ? 'zoomIn' : '放大'}</div>
-        </div>
-        <div className={`tab`} onClick={() => handleZoomOut(0.1)}>
-          <img src={require(`@/assets/img/A5_zoomout.png`)} alt='' />
-          <div className='txt'>{myLangue === 'EN' ? 'zoomOut' : '缩小'}</div>
-        </div>
-        <div className={`tab`} onClick={handleReset}>
-          <img src={require(`@/assets/img/A5_reset.png`)} alt='' />
-          <div className='txt'>{myLangue === 'EN' ? 'reset' : '重置'}</div>
+        {/* 右边 */}
+        <div className='A5_tabBarR'>
+          <div className={`tab`} onClick={() => handleZoomIn(0.1)}>
+            <img src={require(`@/assets/img/A5_zoomin.png`)} alt='' />
+            <div className='txt'>{myLangue === 'EN' ? 'zoomIn' : '放大'}</div>
+          </div>
+          <div className={`tab`} onClick={() => handleZoomOut(0.1)}>
+            <img src={require(`@/assets/img/A5_zoomout.png`)} alt='' />
+            <div className='txt'>{myLangue === 'EN' ? 'zoomOut' : '缩小'}</div>
+          </div>
+          <div className={`tab`} onClick={handleReset}>
+            <img src={require(`@/assets/img/A5_reset.png`)} alt='' />
+            <div className='txt'>{myLangue === 'EN' ? 'reset' : '重置'}</div>
+          </div>
         </div>
-      </div>
-
-      {/* 拓片弹窗 */}
-      {/* <div
-        className={classNames(styles.tapianModal)}
-        style={{ display: isShowTapianModal ? 'flex' : 'none' }}
-      >
-        <Zclose
-          clickFu={() => {
-            handleTabClick('tab2')
-            setIsShowTapianModal(false)
-          }}
-        />
 
-        <div className='TContainner' onClick={() => {
-          store.dispatch({
-            type: 'layout/lookBigImg',
-            payload: { url: require('@/assets/sgImg/img_tapian.png'), show: true, fromTxt: '', zoom: isMobiileFu() ? 2 : 1 }
-          })
-        }}>
-          <img src={require('@/assets/sgImg/img_tapian.png')} alt='' />
-        </div>
-      </div> */}
+        {/* 拓片按钮 */}
 
-      {/* 线图弹窗 */}
-      {/* <div
+        {/* 线图弹窗 */}
+        {/* <div
         className={classNames(styles.lineModal)}
         style={{ display: isShowLineModal ? 'flex' : 'none' }}
       >
@@ -189,7 +170,9 @@ function A5wenwu() {
           <img src={require('@/assets/sgImg/img_xiantu.png')} alt='' />
         </div>
       </div> */}
-    </div >
+      </div >
+    </>
+
   )
 }
 

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

@@ -7,7 +7,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  transition: all 0.1s linear;
   :global {
     .nodeClickData {
       transition: all 0.1s linear;

src/pages/A7wjwj/conponents/Discover/index.module.scss

@@ -364,7 +364,9 @@
             .text_name {
               font-weight: bold;
             }
-            .text_txt {
+            .pdfItem {
+              cursor: pointer;
+              color: rgba(175, 135, 100, 1);
             }
           }
         }

src/pages/A7wjwj/conponents/Discover/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState, useRef } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import { isPc } from '@/utils/http'
 import classNames from 'classnames'
@@ -35,26 +35,35 @@ function Discover(props: { style?: React.CSSProperties }) {
     }
   }, [move])
 
-  // 为a标签添加点击事件
-  useEffect(() => {
-    const txt4 = document.getElementById('txt4') as HTMLElement
-    if (txt4) {
-      const aTags = txt4.querySelectorAll('a')
-      console.log(aTags, '---------------')
-      // aTags.forEach((item) => {
-      //   item.addEventListener('click', (e) => {
-      //     e.preventDefault()
-
-      //     if (isMobiileFu()) {
-      //       window.setPdfState({ url: 'myData/pdfs/pdfTEST.pdf', show: true })
-      //     } else {
-      //       window.open('myData/pdfs/pdfTEST.pdf', '_blank')
-      //     }
-
-      //   })
-      // })
+  const openPdf = (pdfName: string) => {
+    if (isMobiileFu()) {
+      window.setPdfState({ url: `myData/pdfs/${pdfName}`, show: true })
+    } else {
+      window.open(`myData/pdfs/${pdfName}`, '_blank')
     }
-  }, [])
+  }
+
+  // 为a标签添加点击事件
+  // useEffect(() => {
+  // const txt4 = document.getElementById('txt4') as HTMLElement
+  // if (txt4) {
+  //   const aTags = txt4.querySelectorAll('a')
+  //   console.log(aTags, '---------------')
+  //   aTags.forEach((item) => {
+  //     item.addEventListener('click', (e) => {
+  //       e.preventDefault()
+
+  //       if (isMobiileFu()) {
+  //         window.setPdfState({ url: 'myData/pdfs/pdfTEST.pdf', show: true })
+  //       } else {
+  //         window.open('myData/pdfs/pdfTEST.pdf', '_blank')
+  //       }
+
+  //     })
+  //   })
+  // }
+
+  // }, [])
   return (
     <div className={classNames(styles.Discover, isPc ? '' : styles.DiscoverMo)} style={props.style}>
       <div className='left' style={{ opacity: isShowRecord ? 1 : 0 }}>
@@ -140,7 +149,7 @@ function Discover(props: { style?: React.CSSProperties }) {
                 </div>
                 <div className='txt'>{item.title}</div>
               </div>
-              <div className='text' >
+              <div className='text' id='lunwen' >
                 {index === 0 ? (
                   <img className='textBj' src={require('@/assets/sgImg/thrrTxtBg.png')} alt='' />
                 ) : null}
@@ -148,7 +157,7 @@ function Discover(props: { style?: React.CSSProperties }) {
                   item.txt2?.map((item2, index2) => (
                     <div className='txt2_item' key={index2}>
                       <div className='text_name'>{item2.name}</div>
-                      <div className='text_txt'>{item2.text}</div>
+                      <div className={`text_txt ${item2.pdfName ? 'pdfItem' : ''}`} onClick={() => (item2.pdfName && openPdf(item2.pdfName))}>{item2.text}</div>
                     </div>
                   ))
                 }

src/types/declaration.d.ts

@@ -47,7 +47,12 @@ type MyDataType = {
   discover: {
     txt1Items: { title: string }[]
     txt2Items: { title: string }[]
-    search: { title: string; txt: string; from: string; txt2?: { name: string; text: string }[] }[]
+    search: {
+      title: string
+      txt: string
+      from: string
+      txt2?: { name: string; text: string; pdfName?: string }[]
+    }[]
   }
   // 属性之辨
   shuxing: {