优化首页banner区交互

src/forge/Main/projecthome/v2/components/banner.jsx

@@ -9,6 +9,7 @@ import './index.scss';
 function Banner({isVisible}) {
   const [active, setActive] = useState(0);
   const [active1, setActive1] = useState(0);
+  const [intervalId, setIntervalId] = useState(null);
   
   const lines1 = [
     'if(!isVisible)',
@@ -77,6 +78,7 @@ function Banner({isVisible}) {
         });
       }, 400);
     }, 3000);
+    setIntervalId(interval);
 
     // 清理定时器
     return () => {
@@ -84,6 +86,29 @@ function Banner({isVisible}) {
     };
   }, []);
 
+  const pauseInterval = () => {
+    if (intervalId) {
+      clearInterval(intervalId);
+      setIntervalId(null);
+    }
+  };
+
+  const resumeInterval = () => {
+    if (!intervalId) {
+      const interval = setInterval(() => {
+      setActive(prevActive => {
+        return prevActive < 3 ? prevActive+1 : 0;
+      });
+      setTimeout(() => {
+        setActive1(prevActive => {
+          return prevActive < 3 ? prevActive+1 : 0;
+        });
+      }, 400);
+    }, 3000);
+      setIntervalId(interval);
+    }
+  };
+
   return (
     <div className="banner_v2 color-white home_v2_child eco_home_banner" id="home_v2_child1">
       {/* 主要内容区域 */}
@@ -114,22 +139,24 @@ function Banner({isVisible}) {
               </div>
               <div style={{ margin: '3px 25px' }}>
                 {/* <ActionItem className="center-1-bk-wrapper" padding="2px" borderRadius="15px"> */}
-                  <div className='center-image-container-content'>
+                  <div className='center-image-container-content' onMouseEnter={pauseInterval} onMouseLeave={resumeInterval}>
                     <span className='font-18 center-image-container-content-title'>{bannerList[active].desc1}</span>
                     {/* 四张banner轮播 */}
                     <div className='center-image-container-content-banner-box FlexAJ pt3'>
                       <div className='center-image-container-content-banner-box-left mb20'>
                         {bannerList.map((item, index) => {
-                          return <div className={`center-image-container-content-banner-box-left-item ${active === index ? 'active' : ''}`}>{item.title}</div>
+                          return <div className={`center-image-container-content-banner-box-left-item pointer ${active === index ? 'active' : ''}`} onClick={()=>{
+                            setActive(index);
+                            setTimeout(() => {
+                              setActive1(index);
+                            }, 200);
+                          }}>{item.title}</div>
                         })}
                       </div>
                       <div>
                         <div className='center-image-container-content-banner-box-avtive-desc font-15'>
                           {bannerList[active].desc}
                           <img src={gif1} className='center-image-container-content-banner-box-avtive-desc-img'/>
-                          {/* <video autoPlay muted>
-                            <source src={gif1}/>
-                          </video> */}
                         </div>
                         <img src={bannerList[active1].image} className='center-image-container-content-banner-box-avtive-img'/>
                       </div>

src/forge/Main/projecthome/v2/components/terminalAnimation2.jsx

@@ -10,18 +10,11 @@ const TerminalAnimation = ({ startAnimation = true, lines, width, height, class_
   const animationRef = useRef(null);
 
   const keyColor = {
-    'git clone': '#fff700',
-    'git commit': '#fff700',
-    'git log': '#fff700',
-    'git merge': '#fff700',
-    'git remote': '#fff700',
-    'git pull': '#d24a6f',
-    'git push': '#d24a6f',
-    'git status': '#2977ff',
-    'git fetch': '#2977ff',
-    'git add': '#9aff41',
-    'cd forgeplus': '#9aff41',
-    'git checkout': '#9aff41'
+    'if(!isVisible)': '#e5caff6a',
+    'setInterval': '#e5caff6a',
+    'clearInterval': '#e5caff6a',
+    'const params': '#e5caff6a',
+    'addComment': '#e5caff6a'
   };
 
   const fontSize = 12;