gx

public/BigScene/asset-manifest.json

@@ -1,11 +1,11 @@
 {
   "files": {
     "main.css": "./static/css/main.e35bc6bb.css",
-    "main.js": "./static/js/main.523453ea.js",
-    "static/css/829.11a8a479.chunk.css": "./static/css/829.11a8a479.chunk.css",
+    "main.js": "./static/js/main.e23fa697.js",
+    "static/css/829.40627a35.chunk.css": "./static/css/829.40627a35.chunk.css",
     "static/js/829.fbc361b1.chunk.js": "./static/js/829.fbc361b1.chunk.js",
-    "static/css/405.11a8a479.chunk.css": "./static/css/405.11a8a479.chunk.css",
-    "static/js/999.c24f84ae.chunk.js": "./static/js/999.c24f84ae.chunk.js",
+    "static/css/405.40627a35.chunk.css": "./static/css/405.40627a35.chunk.css",
+    "static/js/999.e574ff11.chunk.js": "./static/js/999.e574ff11.chunk.js",
     "static/media/hotlist_bg_M.png": "./static/media/hotlist_bg_M.6facd256f045cc695d61.png",
     "static/media/hot_bg.png": "./static/media/hot_bg.38f82b76c6af0b0ea884.png",
     "static/media/hot_bg_M.png": "./static/media/hot_bg_M.f5b2cb37dc2d7a6ca129.png",
@@ -23,14 +23,14 @@
     "static/media/btn_tab.png": "./static/media/btn_tab.692e20a0f44a745585c5.png",
     "index.html": "./index.html",
     "main.e35bc6bb.css.map": "./static/css/main.e35bc6bb.css.map",
-    "main.523453ea.js.map": "./static/js/main.523453ea.js.map",
-    "829.11a8a479.chunk.css.map": "./static/css/829.11a8a479.chunk.css.map",
+    "main.e23fa697.js.map": "./static/js/main.e23fa697.js.map",
+    "829.40627a35.chunk.css.map": "./static/css/829.40627a35.chunk.css.map",
     "829.fbc361b1.chunk.js.map": "./static/js/829.fbc361b1.chunk.js.map",
-    "405.11a8a479.chunk.css.map": "./static/css/405.11a8a479.chunk.css.map",
-    "999.c24f84ae.chunk.js.map": "./static/js/999.c24f84ae.chunk.js.map"
+    "405.40627a35.chunk.css.map": "./static/css/405.40627a35.chunk.css.map",
+    "999.e574ff11.chunk.js.map": "./static/js/999.e574ff11.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.e35bc6bb.css",
-    "static/js/main.523453ea.js"
+    "static/js/main.e23fa697.js"
   ]
 }

public/BigScene/css/oldVer/main0.css

@@ -96,10 +96,10 @@ iframe {
   height: 52px;
   cursor: pointer;
   text-indent: -999em;
-  background-size: 100% 100%;
+  background-size: contain;
   position: absolute;
-  top: 10px;
-  left: 10px;
+  top: 42px;
+  right: 55px;
 }
 .specialTitle {
   bottom: 65%;
@@ -224,11 +224,11 @@ a {
 }
 @media screen and (max-width: 1000px) {
   #closepop {
-    width: 62px;
+    width: 87px;
     height: 30px;
     position: absolute;
-    top: 10px;
-    left: 10px;
+    top: 27px;
+    right: 28px;
   }
 
   #title-toggle {

src/assets/styles/base.css

@@ -599,3 +599,11 @@ textarea {
     transform: translate(-5845px, 0);
   }
 }
+@keyframes shufa_show {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

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

@@ -7,7 +7,7 @@ import classNames from 'classnames'
 import { modalTxtTab } from './data'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
-import Shufa from '../Shufa'
+
 import { forwardRef, useImperativeHandle } from 'react'
 import FlipContainer from '@/components/FlipContainner'
 
@@ -15,15 +15,15 @@ type Props = {
   setIsShowTabBar: (isShowTabBar: boolean) => void
   setIsShowMzmTitle: (isShowMzmTitle: boolean) => void
   setBottomTxt: (val: string) => void
+  setIsShowShufa: (isShowShufa: boolean) => void
   ref: any
 }
 
-function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, ref: any) {
+function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt, setIsShowShufa }: Props, ref: any) {
   const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)
 
   const [isFlipped, setIsFlipped] = useState(false)
   const [selectedTab, setSelectedTab] = useState(0)
-  const [isShowShufa, setIsShowShufa] = useState(false)
   const selectedTabRef = useRef(0)
 
   useEffect(() => {
@@ -239,114 +239,110 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
     '程哲碑碑文，31行楷书，满行45字，<br/>字径约2厘米，带方界格，总计1404字；<br/>无正式碑名，通篇颂德程氏家族的历史功绩。'
 
   return (
-    <>
-      <div
-        className={classNames(styles.modalTxt, myLangue === 'ZH' ? '' : styles.modalTxtEn)}
-        id='modalTxt'
-      >
-        <div className='modalTxtContainner'>
-          {selectedTab !== 0 && <FlipContainer
-            style={{
-              width: '82%',
-              height: '100%'
-            }}
-            isFlipped={isFlipped}
-            frontContent={
-              <div
-                className='intro'
-                id='introContent'
-              >
-                {(
-                  <>
-                    <div className='intro_title songFont'>
-                      {modalTxtTab[selectedTab - 1].name}
-                    </div>
-                    <div className='intro_txt'>
-                      {myData.readDetail[selectedTab - 1].intro}
-                    </div>
-                    <div
-                      className='intro_btn'
-                      onClick={() => {
-                        setIsFlipped(true)
-                        setShowTooltip(-1)
-                      }}
-                    >
-                      {/* 原文<span className='intro_btn_dot'></span>译文
+    <div
+      className={classNames(styles.modalTxt, myLangue === 'ZH' ? '' : styles.modalTxtEn)}
+      id='modalTxt'
+    >
+      <div className='modalTxtContainner'>
+        {selectedTab !== 0 && <FlipContainer
+          style={{
+            width: '82%',
+            height: '100%'
+          }}
+          isFlipped={isFlipped}
+          frontContent={
+            <div
+              className='intro'
+              id='introContent'
+            >
+              {(
+                <>
+                  <div className='intro_title songFont'>
+                    {modalTxtTab[selectedTab - 1].name}
+                  </div>
+                  <div className='intro_txt'>
+                    {myData.readDetail[selectedTab - 1].intro}
+                  </div>
+                  <div
+                    className='intro_btn'
+                    onClick={() => {
+                      setIsFlipped(true)
+                      setShowTooltip(-1)
+                    }}
+                  >
+                    {/* 原文<span className='intro_btn_dot'></span>译文
                       <span className='intro_btn_dot'></span> */}
-                    </div>
-                  </>
-                )}
-              </div>
-            }
-            backContent={
-
-              <div className='translateModal'>
-                {(
-                  <div className='txtWithTrans' onClick={() => {
-                    setIsFlipped(false)
-                    setShowTooltip(-1)
-                  }} onTouchMove={() => setShowTooltip(-1)}>
-                    {CommentText({
-                      str: myData.readDetail[selectedTab - 1].translate_v2,
-                      index: selectedTab - 1
-                    })}
                   </div>
-                )}
-              </div>
-            }
-          />}
+                </>
+              )}
+            </div>
+          }
+          backContent={
 
-          {selectedTab === 0 && (
-            <div className='content'>
-              <div className='title songFontc'>
-                {myLangue === 'EN' ? 'Overview of the Inscription' : '碑文概述'}
-              </div>
-              <div
-                className='text'
-                dangerouslySetInnerHTML={{ __html: myLangue === 'EN' ? gaiShuEn : gaiShu }}
-              ></div>
-              <div className='shufaBtn songFont' onClick={() => setIsShowShufa(true)}>
-                书法赏析
-              </div>
+            <div className='translateModal'>
+              {(
+                <div className='txtWithTrans' onClick={() => {
+                  setIsFlipped(false)
+                  setShowTooltip(-1)
+                }} onTouchMove={() => setShowTooltip(-1)}>
+                  {CommentText({
+                    str: myData.readDetail[selectedTab - 1].translate_v2,
+                    index: selectedTab - 1
+                  })}
+                </div>
+              )}
             </div>
-          )}
+          }
+        />}
 
-          <div className='topBar'>
-            <div className='beie' hidden={selectedTab !== 0}>
-              <img src={require('@/assets/img/beie.png')} alt='' />
-              <div className='txt songFont' onClick={handleBeie}>
-                {myLangue === 'EN' ? 'forehead' : '碑额'}
-              </div>
+        {selectedTab === 0 && (
+          <div className='content'>
+            <div className='title songFontc'>
+              {myLangue === 'EN' ? 'Overview of the Inscription' : '碑文概述'}
+            </div>
+            <div
+              className='text'
+              dangerouslySetInnerHTML={{ __html: myLangue === 'EN' ? gaiShuEn : gaiShu }}
+            ></div>
+            <div className='shufaBtn songFont' onClick={() => setIsShowShufa(true)}>
+              书法赏析
+            </div>
+          </div>
+        )}
+
+        <div className='topBar'>
+          <div className='beie' hidden={selectedTab !== 0}>
+            <img src={require('@/assets/img/beie.png')} alt='' />
+            <div className='txt songFont' onClick={handleBeie}>
+              {myLangue === 'EN' ? 'forehead' : '碑额'}
             </div>
+          </div>
 
-            {modalTxtTab.map((item, index) => (
+          {modalTxtTab.map((item, index) => (
+            <div
+              key={item.key}
+              className={`tab${index}`}
+              onClick={() => handleTabClick(item.key, myData.readDetail[index]?.mzmtz?.title)}
+            >
+              <img
+                src={require(`@/assets/img/btn_ModalTxt_bg${selectedTab === item.key ? '_ac' : ''
+                  }.png`)}
+                alt=''
+              />
+              <div className={`tabNub songFont ${selectedTab === item.key ? 'tabNubAc' : ''}`}>
+                {item.sonTxt}
+              </div>
               <div
-                key={item.key}
-                className={`tab${index}`}
-                onClick={() => handleTabClick(item.key, myData.readDetail[index]?.mzmtz?.title)}
+                className={classNames('txt songFont', selectedTab === item.key ? 'txtAc' : '')}
+                style={{ opacity: selectedTab === 0 ? '1' : '0' }}
               >
-                <img
-                  src={require(`@/assets/img/btn_ModalTxt_bg${selectedTab === item.key ? '_ac' : ''
-                    }.png`)}
-                  alt=''
-                />
-                <div className={`tabNub songFont ${selectedTab === item.key ? 'tabNubAc' : ''}`}>
-                  {item.sonTxt}
-                </div>
-                <div
-                  className={classNames('txt songFont', selectedTab === item.key ? 'txtAc' : '')}
-                  style={{ opacity: selectedTab === 0 ? '1' : '0' }}
-                >
-                  {myLangue === 'EN' ? item.nameEn : item.name}
-                </div>
+                {myLangue === 'EN' ? item.nameEn : item.name}
               </div>
-            ))}
-          </div>
+            </div>
+          ))}
         </div>
       </div>
-      {/* 书法赏析 */}
-      {isShowShufa && <Shufa setIsShowShufa={setIsShowShufa} />}
-    </>
+    </div>
   )
 }
 export default forwardRef(ModalTxt)

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

@@ -6,6 +6,27 @@
   top: 0;
   left: 0;
   background-color: #ffffffcf;
+  @keyframes shufa_show {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes shufa_hide {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  animation: shufa_show 0.6s ease-in-out;
+
+  &:global(.shufaHide) {
+    animation: shufa_hide 0.6s ease-in-out;
+  }
 
   :global {
     .shufa1 {

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

@@ -11,9 +11,10 @@ import bei1 from '@/assets/img/frame_bei1.png'
 import bei2 from '@/assets/img/frame_bei2.png'
 
 type ActiveItem = 'lian1' | 'lian2' | 'bei1' | 'bei2' | 'normal'
-function Shufa({ setIsShowShufa }: { setIsShowShufa: (isShowShufa: boolean) => void }) {
+function Shufa({ setIsShowShufa, style }: { setIsShowShufa: (isShowShufa: boolean) => void, style?: React.CSSProperties }) {
   const [showName, setName] = useState('shufa1')
   const [activeItem, setActiveItem] = useState<ActiveItem>('normal')
+  const [isHideShufa, setIsHideShufa] = useState(false)
   const timerRef = useRef<NodeJS.Timeout | null>(null)
   const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)
   const Line = ({ index }: { index: number }) => {
@@ -67,12 +68,25 @@ function Shufa({ setIsShowShufa }: { setIsShowShufa: (isShowShufa: boolean) => v
       setActiveItem('normal')
       setName('shufa1')
     }
-    if (showName === 'shufa1') setIsShowShufa(false)
+    if (showName === 'shufa1') {
+      setIsHideShufa(true)
+      setTimeout(() => {
+        setIsShowShufa(false)
+        setIsHideShufa(false)
+      }, 600)
+    }
   }
 
   return (
-    <div className={styles.shufa} style={{ zIndex: showName === 'shufa1' ? 3 : 4 }}>
+    <div className={`${styles.shufa} ${isHideShufa ? ' shufaHide' : ''}`} style={{ zIndex: showName === 'shufa1' ? 3 : 4, ...style }}>
       <Zback clickFu={backClick} />
+      <div className='wenwu' onClick={() => window.location.replace(`#/quanwen?m=shufa`)}>
+        <img
+          src={require(`@/assets/img/A2_quanwen${myLangue === 'EN' ? 'En' : ''
+            }.png`)}
+          alt=''
+        />
+      </div>
       <div
         className='shufa1'
         style={{

src/pages/A2yblm/index.module.scss

@@ -46,14 +46,14 @@
     // 文物鉴赏
     .wenwu {
       position: absolute;
-      z-index: 3;
+      z-index: 2;
       cursor: pointer;
       bottom: 2%;
       left: 3.5%;
       width: 70px;
       height: 70px;
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: contain;
       }
@@ -79,7 +79,7 @@
         width: 28px;
         height: 100%;
 
-        &>img {
+        & > img {
           height: 100%;
           object-fit: contain;
         }
@@ -127,7 +127,7 @@
           height: 80px;
           cursor: pointer;
 
-          &>img {
+          & > img {
             height: 100%;
             object-fit: contain;
           }
@@ -149,7 +149,7 @@
           height: 0px;
         }
 
-        &>p {
+        & > p {
           padding-bottom: 15px;
         }
       }
@@ -266,7 +266,7 @@
             font-size: 10px;
           }
 
-          &>img {
+          & > img {
             width: 100%;
             height: 100%;
             object-fit: contain;
@@ -280,23 +280,24 @@
         width: 100%;
         padding: 0 10px;
         overflow-y: auto;
-        mask-image: linear-gradient(to bottom,
-            rgba(0, 0, 0, 1) 0%,
-            rgba(0, 0, 0, 1) 80%,
-            /* 保留顶部70%不透明 */
-            rgba(0, 0, 0, 0) 100%
-            /* 底部30%完全透明 */
-          );
-        -webkit-mask-image: linear-gradient(to bottom,
-            rgba(0, 0, 0, 1) 0%,
-            rgba(0, 0, 0, 1) 80%,
-            rgba(0, 0, 0, 0) 100%);
+        mask-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 1) 0%,
+          rgba(0, 0, 0, 1) 80%,
+          /* 保留顶部70%不透明 */ rgba(0, 0, 0, 0) 100% /* 底部30%完全透明 */
+        );
+        -webkit-mask-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 1) 0%,
+          rgba(0, 0, 0, 1) 80%,
+          rgba(0, 0, 0, 0) 100%
+        );
 
         &::-webkit-scrollbar {
           width: 0px;
         }
 
-        &>div {
+        & > div {
           text-align: justify;
           width: 100%;
           height: 100%;
@@ -338,7 +339,7 @@
         }
       }
 
-      .content>div {
+      .content > div {
         letter-spacing: 0;
         text-align: start;
       }
@@ -349,7 +350,6 @@
 // 控制调整光源
 .A2yblmLight {
   :global {
-
     // 重置亮度滚动位置
     #Zlight {
       right: auto;
@@ -357,4 +357,4 @@
       z-index: 2;
     }
   }
-}
+}

src/pages/A2yblm/index.tsx

@@ -12,6 +12,7 @@ import Zback from '@/components/Zback'
 import { cutUnityFu } from '../A0base/data'
 import Zloding from '@/components/Zloding'
 import Zlight from '@/components/Zlight'
+import Shufa from './components/Shufa'
 
 function A2yblm() {
   const [loding, setLoding] = useState(false)
@@ -40,12 +41,19 @@ function A2yblm() {
 
     if (urlAll.includes('?m=')) {
       const urlTab = urlAll.split('?m=')[1]
-      setCurrentTab(urlTab)
+      if (urlTab !== 'shufa') {
+        setCurrentTab(urlTab)
+      } else {
+        setCurrentTab('tab3')
+        setIsShowShufa(true)
+      }
+
     }
   }, [])
 
   const [isShowTabBar, setIsShowTabBar] = useState(true)
   const [isShowMzmTitle, setIsShowMzmTitle] = useState(false)
+  const [isShowShufa, setIsShowShufa] = useState(false)
   const previousTab = useRef(currentTab)
 
   const [isOpenMzm, setIsOpenMzm] = useState(false)
@@ -222,12 +230,16 @@ function A2yblm() {
         </div>
       )}
       {currentTab === 'tab3' && (
-        <ModalTxt
+        <><ModalTxt
           ref={rightTopTabRef}
           setBottomTxt={val => setBottomTxt(val)}
           setIsShowTabBar={setIsShowTabBar}
           setIsShowMzmTitle={setIsShowMzmTitle}
+          setIsShowShufa={setIsShowShufa}
         />
+          {/* 书法赏析 */}
+          {isShowShufa && <Shufa setIsShowShufa={setIsShowShufa} />}
+        </>
       )}
 
       {/* menu界面 */}
@@ -236,9 +248,8 @@ function A2yblm() {
       {/* 文物鉴赏，全文鉴赏  */}
       <div className='wenwu' onClick={gotoQuanwenOrWenwu}>
         <img
-          src={require(`@/assets/img/A2_${currentTab === 'tab3' ? 'quanwen' : 'wenwu'}${
-            myLangue === 'EN' ? 'En' : ''
-          }.png`)}
+          src={require(`@/assets/img/A2_${currentTab === 'tab3' ? 'quanwen' : 'wenwu'}${myLangue === 'EN' ? 'En' : ''
+            }.png`)}
           alt=''
         />
       </div>

src/pages/A4quanwen/index.module.scss

@@ -5,6 +5,15 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  @keyframes quanwen_show {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  animation: quanwen_show 0.6s ease-in-out;
 
   :global {
     .highlight {