up

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

@@ -6,14 +6,24 @@ import { Tooltip } from 'antd'
 import { callIframeFu, isMobiileFu } from '@/utils/history'
 import classNames from 'classnames'
 
+
+
+
 function ModalTxt({
   setIsShowTabBar,
-  setIsShowMzmTitle
+  setIsShowMzmTitle,
+  setBottomTxt,
 }: {
   setIsShowTabBar: (isShowTabBar: boolean) => void
   setIsShowMzmTitle: (isShowMzmTitle: boolean) => void
+  setBottomTxt:(val:string)=>void
+
 }) {
   const [selectedTab, setSelectedTab] = useState(0)
+  const selectedTabRef = useRef(0)
+  useEffect(() => {
+    selectedTabRef.current = selectedTab
+  }, [selectedTab])
 
   const [activeAId, setActiveAId] = useState<number | null>(null)
   const [showTooltip, setShowTooltip] = useState(-1)
@@ -94,13 +104,12 @@ function ModalTxt({
               <div className='title'>{word}</div>
               <div
                 className='close'
-                onClick={(e) => {
+                onClick={e => {
                   e.preventDefault()
                   e.stopPropagation()
                   setShowTooltip(-1)
                 }}
-
-                onTouchEnd={(e) => {
+                onTouchEnd={e => {
                   e.preventDefault()
                   e.stopPropagation()
                   setShowTooltip(-1)
@@ -109,7 +118,14 @@ function ModalTxt({
                 <img src={require('@/assets/img/close.png')} alt='' draggable='false' />
               </div>
             </div>
-            <div className='content' ref={contentRef} onTouchStart={(e) => handleTouchStart(e, content_touchStartX)} onTouchMove={handleTooltipTouchMove}>{define}</div>
+            <div
+              className='content'
+              ref={contentRef}
+              onTouchStart={e => handleTouchStart(e, content_touchStartX)}
+              onTouchMove={handleTooltipTouchMove}
+            >
+              {define}
+            </div>
           </div>
         }
         getPopupContainer={() => document.body.querySelector('#root') as HTMLElement}
@@ -198,22 +214,31 @@ function ModalTxt({
     callIframeFu('showInscription', 0)
   }
 
-  const handleTabClick = (tabIndex: number) => {
-    setSelectedTab(tabIndex)
-    callIframeFu('showInscription', tabIndex)
+  const handleTabClick = (tabIndex: number,txt:string) => {
+
+    setBottomTxt(txt)
+
+    let index = tabIndex
+    if (selectedTabRef.current === index) index = 0
+
+    setSelectedTab(index)
+    callIframeFu('showInscription', index === 0 ? -1 : index)
+
+    if(index===0) setIsShowMzmTitle(false)
+
   }
 
   return (
     <div className={classNames(styles.modalTxt, isPc ? '' : styles.modalTxtMo)} id='modalTxt'>
       <div className='modalTxtContainner'>
         <div className='topBar'>
-          <div className='beie'>
+          <div className='beie' hidden={selectedTab !== 0}>
             <img src={require('@/assets/img/beie.png')} alt='' />
             <div className='txt' onClick={handleBeie}>
               碑额
             </div>
           </div>
-          <div className='tab ' onClick={() => handleTabClick(1)}>
+          <div className='tab ' onClick={() => handleTabClick(1,'造碑人与碑主')}>
             <img
               src={require(`@/assets/img/btn_ModalTxt_bg${selectedTab === 1 ? '_ac' : ''}.png`)}
               alt=''
@@ -226,7 +251,7 @@ function ModalTxt({
               造碑人与碑主
             </div>
           </div>
-          <div className='tab ' onClick={() => handleTabClick(2)}>
+          <div className='tab ' onClick={() => handleTabClick(2,'程哲生平与家族世系')}>
             <img
               src={require(`@/assets/img/btn_ModalTxt_bg${selectedTab === 2 ? '_ac' : ''}.png`)}
               alt=''
@@ -239,7 +264,7 @@ function ModalTxt({
               程哲生平与家族世系
             </div>
           </div>
-          <div className='tab ' onClick={() => handleTabClick(3)}>
+          <div className='tab ' onClick={() => handleTabClick(3,'颂文')}>
             <img
               src={require(`@/assets/img/btn_ModalTxt_bg${selectedTab === 3 ? '_ac' : ''}.png`)}
               alt=''
@@ -254,7 +279,13 @@ function ModalTxt({
           </div>
         </div>
 
-        <div className='intro' style={{ opacity: selectedTab !== 0 ? '1' : '0' }}>
+        <div
+          className='intro'
+          style={{
+            opacity: selectedTab !== 0 ? '1' : '0',
+            height: selectedTab !== 0 ? '15%' : '5%'
+          }}
+        >
           {selectedTab !== 0 && myData.readDetail[selectedTab - 1].intro}
         </div>
 

src/pages/A2yblm/index.module.scss

@@ -51,7 +51,7 @@
       left: 4%;
       cursor: pointer;
 
-      & > img {
+      &>img {
         height: 100%;
         object-fit: contain;
       }
@@ -67,14 +67,14 @@
       left: 4%;
       cursor: pointer;
 
-      & > img {
+      &>img {
         height: 100%;
         object-fit: contain;
       }
     }
 
     .extra {
-      width: 110px;
+      width: auto;
       height: 25px;
       position: absolute;
       z-index: 1;
@@ -92,7 +92,7 @@
         width: 20px;
         height: 100%;
 
-        & > img {
+        &>img {
           height: 100%;
           object-fit: contain;
         }
@@ -140,7 +140,7 @@
           height: 50px;
           cursor: pointer;
 
-          & > img {
+          &>img {
             height: 100%;
             object-fit: contain;
           }
@@ -155,7 +155,7 @@
         color: rgba(255, 255, 255, 1);
         letter-spacing: 4px;
 
-        & > p {
+        &>p {
           padding-bottom: 15px;
         }
       }
@@ -179,7 +179,7 @@
       z-index: 1;
       top: 50%;
       left: 50%;
-      transform: translate(120%, -50%);
+      transform: translate(140%, -44%);
     }
 
     .sider3 {
@@ -250,7 +250,7 @@
           align-items: center;
           justify-content: center;
 
-          & > img {
+          &>img {
             width: 100%;
             height: 100%;
             object-fit: contain;
@@ -265,7 +265,7 @@
         padding-right: 6px;
         overflow-y: auto;
 
-        & > div {
+        &>div {
           color: #595547;
           width: 100%;
           height: 100%;
@@ -324,7 +324,7 @@
       .content {
         height: 240px;
 
-        & > div {
+        &>div {
           width: 100%;
           height: 100%;
           line-height: 18px;
@@ -335,7 +335,7 @@
     }
 
     .extra {
-      width: 180px;
+      width: auto;
       height: 40px;
 
       .icon {
@@ -365,4 +365,4 @@
       }
     }
   }
-}
+}

src/pages/A2yblm/index.tsx

@@ -10,21 +10,34 @@ import classNames from 'classnames'
 
 function A2yblm() {
   const [currentTab, setCurrentTab] = useState('tab1')
+
+  useEffect(()=>{
+    
+    const urlAll =window.location.href
+
+    if(urlAll.includes('?m=')){
+      const urlTab =urlAll.split('?m=')[1]
+      setCurrentTab(urlTab)
+    }
+  },[])
+
   const [isShowTabBar, setIsShowTabBar] = useState(true)
   const [isShowMzmTitle, setIsShowMzmTitle] = useState(false)
+
+
   const [isOpenMzm, setIsOpenMzm] = useState(false)
   const [currentTagIndex, setCurrentTagIndex] = useState(1)
   const [isShowTag, setIsShowTag] = useState(false)
 
   const gotoQuanwenOrWenwu = useCallback(() => {
-    if (currentTab === 'tab3') window.location.replace('#/quanwen')
-    else window.location.replace('#/wenwu')
+    if (currentTab === 'tab3') window.location.replace(`#/quanwen?m=${currentTab}`)
+    else window.location.replace(`#/wenwu?m=${currentTab}`)
   }, [currentTab])
 
-  const gotoBack = () => {
-    if (currentTab === 'tab3') setCurrentTab('tab1')
-    else window.location.replace('#/base')
-  }
+  // const gotoBack = () => {
+  //   if (currentTab === 'tab3') setCurrentTab('tab1')
+  //   else window.location.replace('#/base')
+  // }
 
   // 退出图像赏析时调用showHotspot(-1) 退出碑文解读时调用showInscription(-1)
   useEffect(() => {
@@ -42,6 +55,11 @@ function A2yblm() {
     }
     callIframeFu('changePanel', currentTab === 'tab1' ? 1 : currentTab === 'tab2' ? 2 : 3)
   }, [currentTab])
+
+
+  // 底部文字
+  const [bottomTxt,setBottomTxt] =useState('')
+
   return (
     <div className={classNames(isPc ? '' : styles.A2yblmMo, styles.A2yblm)}>
       {/* 左侧边 */}
@@ -73,7 +91,7 @@ function A2yblm() {
       </div>
 
       {/* 返回，文物鉴赏，全文鉴赏 */}
-      <div className='back' onClick={gotoBack}>
+      <div className='back' onClick={()=> window.location.replace('#/base')}>
         <img src={require('@/assets/img/btn_back.png')} alt='' />
       </div>
       <div className='wenwu' onClick={gotoQuanwenOrWenwu}>
@@ -89,7 +107,7 @@ function A2yblm() {
           <div className='icon'>
             <img src={require('@/assets/img/tip.png')} alt='' />
           </div>
-          <div className='txt'>墓志铭体制之变例</div>
+          <div className='txt'>{bottomTxt}</div>
         </div>
       )}
 
@@ -137,7 +155,7 @@ function A2yblm() {
         </div>
       )}
       {currentTab === 'tab3' && (
-        <ModalTxt setIsShowTabBar={setIsShowTabBar} setIsShowMzmTitle={setIsShowMzmTitle} />
+        <ModalTxt setBottomTxt={(val)=>setBottomTxt(val)} setIsShowTabBar={setIsShowTabBar} setIsShowMzmTitle={setIsShowMzmTitle} />
       )}
 
       {/* menu界面 */}

src/pages/A3beie/index.tsx

@@ -7,12 +7,12 @@ import MenuSider from '@/components/MenuSider'
 
 function A3beie() {
   const handleBack = () => {
-    backPageFu('#/yblm')
+    backPageFu('#/yblm?m=tab3')
     callIframeFu('showInscription', -1)
   }
 
   const gotoQuanwen = () => {
-    window.location.replace('#/quanwen')
+    window.location.replace('#/quanwen?m=tab3')
     callIframeFu('showInscription', 10)
   }
 

src/pages/A4quanwen/index.tsx

@@ -1,12 +1,11 @@
-import React, { useState, useEffect, useCallback } from "react";
-import styles from "./index.module.scss";
-import { backPageFu, callIframeFu } from "@/utils/history";
-import { isPc, myData } from "@/utils/http";
+import React, { useState, useEffect, useCallback } from 'react'
+import styles from './index.module.scss'
+import { backPageFu, callIframeFu } from '@/utils/history'
+import { isPc, myData } from '@/utils/http'
 import classNames from 'classnames'
 
-
 function A4quanwen() {
-  const [isHighlight, setIsHighlight] = useState(true);
+  const [isHighlight, setIsHighlight] = useState(true)
   useEffect(() => {
     callIframeFu('showInscription', 10)
     callIframeFu('openHightlight', isHighlight ? 1 : 0)
@@ -19,36 +18,48 @@ function A4quanwen() {
   }, [isHighlight])
 
   const gotoBack = () => {
-    backPageFu('#/yblm')
-    callIframeFu('openHightlight', 1)
-  }
+    const urlAll = window.location.href
+    if (urlAll.includes('?m=')) {
+      const tabNum = urlAll.split('?m=')[1]
 
+      backPageFu(`#/yblm?m=${tabNum}`)
+    } else {
+      backPageFu('#/yblm')
+      callIframeFu('openHightlight', 1)
+    }
+  }
 
   return (
-    <div className={classNames(styles.A4quanwen,isPc?'':styles.A4quanwenMo)}>
+    <div className={classNames(styles.A4quanwen, isPc ? '' : styles.A4quanwenMo)}>
       <div className='back' onClick={() => gotoBack()}>
         <img src={require('@/assets/img/btn_back.png')} alt='' />
       </div>
 
       <div className={`highlight`} onClick={() => handleHighlight()}>
-        <img src={require(`@/assets/img/${isHighlight ? 'highlight_ac.png' : 'highlight.png'}`)} alt='' />
+        <img
+          src={require(`@/assets/img/${isHighlight ? 'highlight_ac.png' : 'highlight.png'}`)}
+          alt=''
+        />
       </div>
 
       {/* 文字内容 */}
-      <div className="txtContent">
+      <div className='txtContent'>
         {myData.allTxt.map((item, index) => (
-          <div className="item" key={index}>
-            <div className="left">
-              <div className="icon"><img src={require('@/assets/img/icon_dot1.png')} alt="" /></div>
-              <div className="line"></div>
+          <div className='item' key={index}>
+            <div className='left'>
+              <div className='icon'>
+                <img src={require('@/assets/img/icon_dot1.png')} alt='' />
+              </div>
+              <div className='line'></div>
             </div>
-            <div className="right">{item.title}</div>
-          </div>))}
+            <div className='right'>{item.title}</div>
+          </div>
+        ))}
       </div>
     </div>
   )
 }
 
-const MemoA4quanwen = React.memo(A4quanwen);
+const MemoA4quanwen = React.memo(A4quanwen)
 
-export default MemoA4quanwen;
+export default MemoA4quanwen

src/pages/A5wenwu/index.tsx

@@ -48,8 +48,15 @@ function A5wenwu() {
   }
 
   const gotoBack = () => {
-    backPageFu('#/yblm')
-    callIframeFu('hideSize', undefined)
+    const urlAll = window.location.href
+    if (urlAll.includes('?m=')) {
+      const tabNum =urlAll.split('?m=')[1]
+
+      backPageFu(`#/yblm?m=${tabNum}`)
+    } else {
+      backPageFu('#/yblm')
+      callIframeFu('hideSize', undefined)
+    }
   }
 
   window.hideGesture = () => {