gx

src/assets/styles/base.css

@@ -536,6 +536,38 @@ textarea {
     opacity: 1;
   }
 }
+@keyframes fade_in3 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fade_out3 {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes fade_in4 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.7;
+  }
+}
+@keyframes fade_out4 {
+  0% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 @keyframes fadeOut {
   0% {
     opacity: 1;
@@ -599,11 +631,3 @@ textarea {
     transform: translate(-5845px, 0);
   }
 }
-@keyframes shufa_show {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}

src/assets/styles/base.less

@@ -706,6 +706,42 @@ textarea {
   }
 }
 
+@keyframes fade_in3 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade_out3 {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fade_in4 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.7;
+  }
+}
+
+@keyframes fade_out4 {
+  0% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
 @keyframes fadeOut {
   0% {
     opacity: 1;

src/pages/A0base/index.module.scss

@@ -9,9 +9,6 @@
   will-change: initial !important;
 
   :global {
-
-
-
     .A0baseContainner {
       width: 58%;
       height: 60%;
@@ -39,9 +36,19 @@
           border-bottom: 1px solid rgba(93, 96, 96, 0.4);
           width: 160px;
           font-size: 26px;
+          transition: all 0.3s ease-in-out;
+        }
+
+        .titleAc {
+          animation: fade_out3 0.2s linear forwards;
+        }
+
+        .titleAni {
+          animation: fade_in3 0.2s linear forwards;
         }
 
         .text {
+          transition: all 0.3s ease-in-out;
           width: 90%;
           height: fit-content;
           max-height: 200px;
@@ -54,6 +61,14 @@
           font-weight: 400;
         }
 
+        .textAc {
+          animation: fade_out4 0.2s linear forwards;
+        }
+
+        .textAni {
+          animation: fade_in4 0.2s linear forwards;
+        }
+
         .btn {
           color: rgba(93, 96, 96, 1);
           cursor: pointer;
@@ -196,12 +211,12 @@
       color: #b1967b;
       cursor: pointer;
 
-      &>img {
+      & > img {
         width: 44px;
         object-fit: contain;
       }
 
-      &>.guideVideoTitle {
+      & > .guideVideoTitle {
         height: 12px;
         line-height: 8px;
         font-weight: 500;
@@ -295,4 +310,4 @@
       }
     }
   }
-}
+}

src/pages/A0base/index.tsx

@@ -11,16 +11,31 @@ import { baseUrl } from '@/utils/http'
 
 function A0base() {
   const [loding, setLoding] = useState(false)
+  const [isChanging, setIsChanging] = useState(false)
 
   useEffect(() => {
     // 切换场景
     cutUnityFu('TombstoneView', () => setLoding(true))
   }, [])
 
+
+
   const { myData, myLangue, videos } = useSelector((state: RootState) => state.A0Layout)
 
   const [currentBase, setCurrentBase] = useState(0)
 
+
+  const onClickBase = (index: number) => {
+    // setIsChanging(true)
+    // setTimeout(() => {
+    //   setCurrentBase(index)
+    //   setTimeout(() => {
+    //     setIsChanging(false)
+    //   }, 200)
+    // }, 200)
+    setCurrentBase(index)
+  }
+
   // 从二三单元返回
   useEffect(() => {
     const urlAll = window.location.href
@@ -58,8 +73,10 @@ function A0base() {
 
       <div className='A0baseContainner' id='opacityCss'>
         <div className={`content`}>
-          <div className='title songFontc'>{myData.baseInfo[currentBase].title}</div>
-          <div className='text'>{myData.baseInfo[currentBase].text}</div>
+          <div className={`title ${isChanging ? 'titleAc' : 'titleAni'} songFontc`}>
+            {myData.baseInfo[currentBase].title}
+          </div>
+          <div className={`text ${isChanging ? 'textAc' : 'textAni'} songFontc`}>{myData.baseInfo[currentBase].text}</div>
           <div
             className='btn'
             id='opacityChange'
@@ -71,19 +88,19 @@ function A0base() {
         <div className='baseContent'>
           <div
             className={`base songFontc ${currentBase === 0 ? 'baseAc' : ''}`}
-            onClick={() => setCurrentBase(0)}
+            onClick={() => onClickBase(0)}
           >
             {myData.baseInfo[0].title}
           </div>
           <div
             className={`base songFontc ${currentBase === 1 ? 'baseAc' : ''}`}
-            onClick={() => setCurrentBase(1)}
+            onClick={() => onClickBase(1)}
           >
             {myData.baseInfo[1].title}
           </div>
           <div
             className={`base songFontc ${currentBase === 2 ? 'baseAc' : ''}`}
-            onClick={() => setCurrentBase(2)}
+            onClick={() => onClickBase(2)}
           >
             {myData.baseInfo[2].title}
           </div>
@@ -144,7 +161,7 @@ function A0base() {
             muted={false}
             webkit-playsinline='true'
             x5-video-player-type='h5'
-            // controls={true}
+          // controls={true}
           >
             <source
               type='video/mp4'

src/pages/A4quanwen/index.module.scss

@@ -5,15 +5,6 @@
   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 {

src/pages/A5wenwu/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import styles from './index.module.scss'
-import { callIframeFu } from '@/utils/history'
+import { callIframeFu, isMobiileFu } from '@/utils/history'
 import classNames from 'classnames'
 import { useSelector } from 'react-redux'
 import store, { RootState } from '@/store'
@@ -146,7 +146,7 @@ function A5wenwu() {
         <div className='TContainner' onClick={() => {
           store.dispatch({
             type: 'layout/lookBigImg',
-            payload: { url: require('@/assets/sgImg/img_tapian.png'), show: true, fromTxt: '', zoom: 2 }
+            payload: { url: require('@/assets/sgImg/img_tapian.png'), show: true, fromTxt: '', zoom: isMobiileFu() ? 2 : 1 }
           })
         }}>
           <img src={require('@/assets/sgImg/img_tapian.png')} alt='' />
@@ -168,7 +168,7 @@ function A5wenwu() {
         <div className='TContainner' onClick={() => {
           store.dispatch({
             type: 'layout/lookBigImg',
-            payload: { url: require('@/assets/sgImg/img_xiantu.png'), show: true, fromTxt: '', zoom: 2 }
+            payload: { url: require('@/assets/sgImg/img_xiantu.png'), show: true, fromTxt: '', zoom: isMobiileFu() ? 2 : 1 }
           })
         }}>
           <img src={require('@/assets/sgImg/img_xiantu.png')} alt='' />

src/pages/A6ybwx/A6_2_zxzgh/components/Bwzzq/index.module.scss

@@ -122,6 +122,7 @@
             transform: translate(-79%, -13%);
             width: 450px;
             .main {
+              text-align: right;
               .Cardtext {
                 text-align: justify;
                 max-height: 110px;