首页cont.

src/App.js

@@ -113,10 +113,10 @@ const Home = Loadable({
   loading: Loading,
 })
 
-// const Home = Loadable({
+const Store = Loadable({
-//   loader: () => import('./forge/Main/projectHomeNew/v2'),
+  loader: () => import('./forge/Main/projectHomeNew/v2'),
-//   loading: Loading,
+  loading: Loading,
-// })
+})
 
 const Relaction = Loadable({
   loader: () => import("./forge/Account/Index"),
@@ -465,7 +465,7 @@ class App extends Component {
             <Route exact path="/explore"
               render={
                 (props) => (
-                    <ProjectIndex {...this.props} {...props} />
+                    <Store {...this.props} {...props} />
                 )
               }
             />

src/forge/Component/Component.scss

@@ -278,7 +278,7 @@ li.ant-menu-item{
   width: 40px;
   right: 30px;
   bottom: 80px;
-  z-index: 10;
+  z-index: 20;
 }
 
 // @media screen and (max-width: 1920px){

src/forge/Head/Header.js

@@ -361,6 +361,7 @@ class NewHeader extends Component {
               <ul id="header-nav" className="head-nav pr">
                 {
                   settings.navbar && settings.navbar.map((item, key) => {     
+                    if (item.hidden) return               
                     var new_link = item.link;
                     var is_hidden = item.hidden;
                     var waiLian = (new_link && str.filter(item=>new_link.indexOf(item)>-1) );

src/forge/Main/projecthome/Index.jsx

@@ -15,13 +15,13 @@ function Index(props) {
 
   return(
     <div className="home">
-      <Banner/ >
+      <Banner {...props} />
       <div className="home-top"></div>
       <div className="home-main">
-        <Store/ >
+        <Store />
-        <Chain/ >
+        <Chain />
-        <Factory/ >
+        <Factory />
-        <Forum/>
+        <Forum />
       </div>
     </div>
   )

src/forge/Main/projecthome/Index.scss

@@ -1,6 +1,18 @@
 .home {
   font-family: alibabareg;
+  .home-top {
+    width: 100%;
+    position: absolute;
+    z-index: 9;
+    height: 100px;
+    background-image: linear-gradient(180deg,#ffffff 0%,#f1f6fd 100%);
+    border-radius: 100px 100px 0px 0px;
+    opacity: 0.2;
+    top: calc(33vw - 117px);
+  }
   .home-main {
+    position: relative;
+    z-index: 10;
     border-radius: 100px 100px 0px 0px;
     margin-top: -100px;
     background-image:linear-gradient(180deg,#f8faff 0%,#f1f6fd 100%);

src/forge/Main/projecthome/components/Banner.jsx

@@ -3,69 +3,85 @@ import './index.scss';
 import banner1 from '../../img/home/banner1.webp';
 import banner2 from '../../img/home/banner2.webp';
 import banner3 from '../../img/home/banner3.webp';
+import { Link } from "react-router-dom";
 
 const BANNER_DATA = [
-    { key: 1, name: '开源仓库', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner1},
+  { key: 1, name: '开源仓库', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner1 },
-    { key: 2, name: '供应链平台', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner2},
+  { key: 2, name: '供应链平台', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner2 },
-    { key: 3, name: '软件工厂', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner3}
+  { key: 3, name: '软件工厂', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner3 }
-  ]
+]
-
-// 预加载所有图片
-const preloadImages = (data) => {
-  data.forEach(item => {
-    const img = new Image();
-    img.src = item.img;
-  });
-};
 
 function Banner(props) {
   const [selected, setSelected] = useState(BANNER_DATA[0]);
-  const [bannerList] = useState(BANNER_DATA);
+  const [bannerList, setBannerList] = useState(BANNER_DATA);
 
-  // 在组件挂载时预加载图片
   useEffect(() => {
-    preloadImages(bannerList);
+    let newData = []
-  }, [bannerList]); // 只在组件挂载时运行一次
+    const nav = props.mygetHelmetapi && props.mygetHelmetapi.navbar ? props.mygetHelmetapi.navbar : [{name: '开源仓库', link: '/explore'},{name: '供应链平台', link: '/explore'},{name: '软件工厂', link: '/explore'}]
+    for(let i of BANNER_DATA) {      
+      const patch = nav.find(e => {
+        if (e.name === i.name) i.link = e.link
+        return e.name === i.name
+      })      
+      if ( patch ) {
+        newData.push(i)
+      }
+    }
+    if (newData.length > 0) {
+      setBannerList(newData)
+    }    
+  },[])
 
   const handleSelect = (key) => {
     const item = bannerList.find(b => b.key === key);
     if (item) setSelected(item);
   };
 
-  // 定时器逻辑保持不变
+  // useEffect(() => {
-  useEffect(() => {
+  //   const timer = setInterval(() => {
-    const timer = setInterval(() => {
+  //     const currentIndex = bannerList.findIndex(item => item.key === selected.key);
-      const currentIndex = bannerList.findIndex(item => item.key === selected.key);
+  //     const nextIndex = (currentIndex + 1) % bannerList.length;
-      const nextIndex = (currentIndex + 1) % bannerList.length;
+  //     setSelected(bannerList[nextIndex]);
-      setSelected(bannerList[nextIndex]);
+  //   }, 5000);
-    }, 5000);
 
-    return () => clearInterval(timer);
+  //   return () => clearInterval(timer);
-  }, [selected, bannerList]);
+  // }, [selected, bannerList]);
 
   return (
-    <div className="home-banner" style={{ backgroundImage: `url(${selected.img})` }}>
+    <div className="home-banner">
-      {/* ... 渲染逻辑不变 */}
+      {bannerList.map(item => (
-      <div className="banner-tab">
+        <div
-        {bannerList.map(item => (
+          key={item.key}
-          <div
+          className={`banner-image ${selected.key === item.key ? 'banner-image-active' : ''}`}
-            key={item.key}
+          style={{ backgroundImage: `url(${item.img})` }}
-            className={`banner-tab-item ${selected.key === item.key ? 'banner-tab-item-selected' : ''}`}
+        />
-            onClick={() => handleSelect(item.key)}
+      ))}
-          >
+
-            <span>{item.name}</span>
+      <div className="banner-overlay-content">
-            <div className="item-progress"></div>
+        <div className="banner-tab">
-          </div>
+          {bannerList.map(item => (
-        ))}
+            <div
-      </div>
+              key={item.key}
-      <div className="banner-content" key={selected.key}>
+              className={`banner-tab-item ${selected.key === item.key ? 'banner-tab-item-selected' : ''}`}
-         <h1>{selected.title}</h1>
+              onClick={() => handleSelect(item.key)}
-         <p>{selected.content}</p>
+            >
-         <button>立即体验</button>
+              <span>{item.name}</span>
+              <div className="item-progress"></div>
+            </div>
+          ))}
+        </div>
+        <div className="banner-content" key={selected.key}>
+          <h1>{selected.title}</h1>
+          <p>{selected.content}</p>
+          <Link to={ `${selected.link}` }>
+            <div className="banner-content-button">立即体验</div>
+          </Link>
+        </div>
       </div>
     </div>
   );
 }
 
+
 export default Banner;
 

src/forge/Main/projecthome/components/Factory.jsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import './index.scss';
 import factory1 from '../../img/home/factory1.webp';
 import factory2 from '../../img/home/factory2.webp';
-import factory3 from '../../img/home/factory3.webp';
+import factory3 from '../../img/home/factory3.png';
-import factory4 from '../../img/home/factory4.webp';
+import factory4 from '../../img/home/factory4.png';
+import factoryIcon from '../../img/home/factory-icon.png';
 
 const Item1 = [
   {text: '全流程协同', desc: '提供从需求、设计、开发到测试的端到端线上协同能力，确保信息无缝流转，提升团队协作效率', img: factory1, sub: ['端到端协同', '全流程无缝管理', '团队效率提升']},
@@ -18,12 +19,60 @@ const Item2 = [
 ]
 
 function Factory(props) {
+  const content1Ref = useRef(null);
+  const content2Ref = useRef(null);
+  const [isVisible1, setIsVisible1] = useState(false);
+  const [isVisible2, setIsVisible2] = useState(false);
+  
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {      
+      const entry = entries[0];
+      // 如果元素进入视口
+      if (entry.isIntersecting) {
+        setIsVisible1(true);
+        // 只触发一次动画
+        observer.disconnect(); 
+      }
+    }, {
+      threshold: 0.3 //露出 30% 时触发
+    });
+
+    if (content1Ref.current) {
+      observer.observe(content1Ref.current);
+    }
+
+    return () => {
+      if (content1Ref.current) observer.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {            
+      const entry = entries[0];
+      // 如果元素进入视口
+      if (entry.isIntersecting) {
+        setIsVisible2(true);
+        // 只触发一次动画
+        observer.disconnect(); 
+      }
+    }, {
+      threshold: 0.3 //露出 30% 时触发
+    });
+
+    if (content2Ref.current) {
+      observer.observe(content2Ref.current);
+    }
+
+    return () => {
+      if (content2Ref.current) observer.disconnect();
+    };
+  }, []);
 
   return (
     <div className="home-factory home-module">
       <h1 className="module-title">软件工厂</h1>
       <p className="module-desc">面向军方的高效项目工程化系统管理</p>
-      <div className="factory-content1">
+      <div className={ `factory-content1  ${isVisible1 ? 'animate-active' : ''}`} ref={content1Ref}>
         {
           Item1.map((e, index) => {
             return <div className={ `factory-content1-item item-${ index + 1 }` } key={ index }>
@@ -41,7 +90,7 @@ function Factory(props) {
           })
         }
       </div>
-      <div className="factory-content2">
+      <div className={ `factory-content2  ${isVisible2 ? 'animate-active' : ''}`} ref={content2Ref}>
         {
           Item2.map((e, index) => {
             return <div className={ `factory-content2-item item-${ index + 1 }` } key={ index }>
@@ -57,6 +106,37 @@ function Factory(props) {
                 </div>
               </div>
               <img src={ e.img } alt="" />
+              {
+                index === 0 && <>
+                  <div className="line-1"></div>
+                  <div className="line-2"></div>
+                </>
+              }
+              {
+                index === 1 && <>
+                  <div className="item-title">
+                    <img src={ factoryIcon } alt="" />
+                    安全管控
+                  </div>
+                  <div class="item-desc">
+                    <span class="char">保</span>
+                    <span class="char">障</span>
+                    <span class="char">研</span>
+                    <span class="char">发</span>
+                    <span class="char">资</span>
+                    <span class="char">产</span>
+                    <span class="char">一</span>
+                    <span class="char">致</span>
+                    <span class="char">、</span>
+                    <span class="char">安</span>
+                    <span class="char">全</span>
+                    <span class="char">、</span>
+                    <span class="char">可</span>
+                    <span class="char">追</span>
+                    <span class="char">溯</span>
+                  </div>
+                </>
+              }
             </div>
           })
         }

src/forge/Main/projecthome/components/Forum.jsx

@@ -3,6 +3,7 @@ import './index.scss';
 import forum1 from '../../img/home/forum1.webp';
 import forum2 from '../../img/home/forum2.webp';
 import forum3 from '../../img/home/forum3.webp';
+import forumBg from '../../img/home/forum-bg1.png';
 
 const Item1 = [
   {text: '结构化论坛分区', desc: '清晰划分专业版块，助您快速定位技术话题，参与高效讨论'},
@@ -33,6 +34,7 @@ function forum(props) {
           })
         }
       </div>
+      <img  className="forum-light" src={ forumBg } alt="" />
       <div className="forum-content2">
         {
           Item2.map((e, index) => {

src/forge/Main/projecthome/components/Store.jsx

@@ -9,6 +9,7 @@ import store6 from '../../img/home/store6.png';
 import storeR1 from '../../img/home/store-r-1.webp';
 import storeR2 from '../../img/home/store-r-2.webp';
 import storeR3 from '../../img/home/store-r-3.png'
+import { Link } from "react-router-dom";
 
 const Item = [
   {text: '数据存储', img: store1},
@@ -60,17 +61,17 @@ function Store(props) {
           })
         }
       </div>
-      <div className="store-content">
+      <div className={ `store-content  ${isVisible ? 'animate-active' : ''}`} ref={contentRef}>
         <div className="content-left">
           <h2>一站式国产化软硬件体验与适配中心</h2>
-          <p>提供统一可信的代码与制品存储服务，确保资产安全稳定、防丢失篡改</p>
+          <p className="item-1">提供统一可信的代码与制品存储服务，确保资产安全稳定、防丢失篡改</p>
-          <p>实现制品从创建到归档的全流程可追溯与自动化管理，提升交付效率</p>
+          <p className="item-2">实现制品从创建到归档的全流程可追溯与自动化管理，提升交付效率</p>
-          <p>通过数据治理与光宇同步，实现制品快速、安全的分发与极速下载体验</p>
+          <p className="item-3">通过数据治理与光宇同步，实现制品快速、安全的分发与极速下载体验</p>
+          <Link to={`/explore`}>
+            <button className="item-4">进入系统</button>
+          </Link>
         </div>
-        <div 
+        <div className={`content-right`} >
-          className={`content-right ${isVisible ? 'animate-active' : ''}`} 
-          ref={contentRef}
-        >
           <img className="right-img-1" src={storeR1} alt="" />
           <img className="right-img-2" src={storeR2} alt="" />
           <img className="right-img-3" src={storeR3} alt="" />

src/forge/Main/projecthome/components/index.scss

@@ -1,127 +1,146 @@
+
 .home-banner {
   height: 33vw;
-  display: flex;
   padding-left: 160px;
   padding-top: 182px;
   margin-top: -58px;
   background-repeat: no-repeat;
   background-size: auto 100%;
+  position: relative;
+  z-index: 1;
 
-  // 定义动画关键帧：从高度0变到100%
+  .banner-image {
-  @keyframes vertical-progress {
+    position: absolute;
-    from {
+    top: 0;
-      height: 0;
+    left: 0;
-    }
+    width: 100%;
-    to {
+    height: 100%;
-      height: 100%;
+    opacity: 0;
-    }
+    transition: opacity 0.5s ease-in-out;
+    background-size: cover;
+    background-position: center;
+    z-index: -1;
   }
 
-  .banner-tab {
+  .banner-image-active {
-    font-size: 15px;
+    opacity: 1;
-    height: fit-content;
+  }
-    border-right: 1px solid #ffffff44;
 
-    &-item {
+  .banner-overlay-content {
-      width: 148px;
+    display: flex;
-      height: 60px;
+    @keyframes vertical-progress {
-      cursor: pointer;
+      from {
-      display: flex;
+        height: 0;
-      align-items: center;
+      }
-      justify-content: center;
+      to {
-      color: #ffffff;
+        height: 100%;
+      }
+    }
 
-      &-selected {
+    .banner-tab {
-        background-image: linear-gradient(270deg, rgba(33, 73, 212, 0.46) 0%, rgba(1, 5, 15, 0) 100%);
+      font-size: 15px;
-        position: relative;
+      height: fit-content;
+      border-right: 1px solid #ffffff44;
 
-        .item-progress {
+      &-item {
-          position: absolute;
+        width: 148px;
-          right: -1px;
+        height: 60px;
-          top: 0; // 【关键】锚定顶部，确保向下生长
+        cursor: pointer;
-          width: 2px;
+        display: flex;
-          height: 0; // 【关键】初始高度为0，由动画控制增长
+        align-items: center;
-          background-image: linear-gradient(136.87deg, #5eb4ff 0%, #2149d4 100%);
+        justify-content: center;
+        color: #ffffff;
 
-          // 【关键】添加动画：5秒，线性匀速，结束后保持最后一帧状态
+        &-selected {
-          animation: vertical-progress 5s linear forwards;
+          background-image: linear-gradient(270deg, rgba(33, 73, 212, 0.46) 0%, rgba(1, 5, 15, 0) 100%);
-        }
+          position: relative;
 
-        span {
+          .item-progress {
-          font-family: alibaba;
+            position: absolute;
-          background-image: linear-gradient(136.9deg, #5eb4ff 0%, #54b5ff 26.25%, #3c80e9 62.21%, #2249d2 100%);
+            right: -1px;
-          -webkit-background-clip: text;
+            top: 0;
-          -webkit-text-fill-color: transparent;
+            width: 2px;
+            height: 0;
+            background-image: linear-gradient(136.87deg, #5eb4ff 0%, #2149d4 100%);
+            
+            //线性匀速，结束后保持最后一帧状态
+            animation: vertical-progress 5s linear forwards;
+          }
+
+          span {
+            font-family: alibaba;
+            background-image: linear-gradient(136.9deg, #5eb4ff 0%, #54b5ff 26.25%, #3c80e9 62.21%, #2249d2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+          }
         }
       }
     }
-  }
 
-  @keyframes content-fade-in {
+    @keyframes content-fade-in {
-    0% {
+      0% {
-      opacity: 0;
+        opacity: 0;
-      transform: translateY(10px);
+        transform: translateY(10px);
+      }
+      100% {
+        opacity: 1;
+        transform: translateY(0);
+      }
     }
-    100% {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
 
-  .banner-content {
+    .banner-content {
-    color: #ffffff;
-    margin-left: 43px;
-    width: 677px;
-    animation: content-fade-in 0.8s ease-out forwards;
-    h1 {
-      font-family: ziyouwenyihei;
       color: #ffffff;
-      font-size: 36px;
+      margin-left: 43px;
-      margin-bottom: 10px;
+      width: 677px;
-      line-height: 40px;
+      animation: content-fade-in 0.8s ease-out forwards;
-    }
+      h1 {
-    p {
+        font-family: ziyouwenyihei;
-      opacity: 80%;
+        color: #ffffff;
-      font-family: alibabaReg;
+        font-size: 36px;
-      font-size: 16px;
+        margin-bottom: 10px;
-    }
+        line-height: 40px;
-    button {
+      }
-      margin-top: 15px;
+      p {
-      cursor: pointer;
+        opacity: 80%;
-      background: none; 
+        font-family: alibabaReg;
-      border: unset;
+        font-size: 16px;
-      
+      }
-      width: 140px;
+      &-button {
-      height: 36.5px;
+        color: #ffffff;
-      font-size: 16px;
+        margin-top: 15px;
-      
+        cursor: pointer;
-      position: relative;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1;
-        
         background-image: url('../../img/home/button.png');
         background-repeat: no-repeat;
         background-size: 100% 100%;
-      }
+        width: 140px;
+        height: 36.5px;
+        font-size: 16px;
+        position: relative;
+        border-radius: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
 
-      &:hover {
         &::before {
-          transform: rotate(180deg);
+          content: "";
+          position: absolute;
+          width: 150px;
+          height: 100%;
+          background-image: linear-gradient(120deg, #fff0 30%, #ffffff4d, #fff0 70%);
+          top: 0;
+          left: -150px;
+          transition: none;
+        }
+
+        &:hover {
+          &::before {
+            left: 100%;
+            transition: all .65s ease-out;
+          }
         }
       }
     }
-
   }
 }
 .home-module {
@@ -169,32 +188,6 @@
     border-radius: 15px;
     margin-top: 48px;
     display: flex;
-    .content-left {
-      padding: 80px 48px;
-      color: #091221;
-      h2 {
-        font-family: alibaba;
-        font-size: 24px;
-        padding-bottom: 37px;
-      }
-      p {
-        margin-left: 46px;
-        position: relative;
-        padding-bottom: 23px;
-        font-size: 16px;
-        &::before {
-          content: "";
-          position: absolute;
-          top: 0;
-          left: -46px;
-          width: 36px;
-          height: 36px;
-          background-image: url('../../img/home/check.png');
-          background-repeat: no-repeat;
-          background-size: 100% 100%;
-        }
-      }
-    }
 
     @keyframes shinning {
       from {
@@ -211,6 +204,72 @@
       }
     }
 
+    &.animate-active {
+      .right-img-1 {
+        animation: fadeInUp 0.8s ease-out forwards;
+      }
+      .right-img-2 {
+        animation: fadeInUp 0.8s ease-out forwards;
+        animation-delay: 0.2s; // 延迟 0.2s 执行
+      }
+      .right-img-3 {
+        animation: shinning 1.6s linear forwards;
+        animation-delay: 0.4s; // 延迟 0.4s 执行
+      }
+      .content-left p, .content-left button {
+        animation: fadeInUp 0.8s ease-out forwards;
+      }
+      // 循环生成延迟
+      @for $i from 1 through 4 {
+        .item-#{$i} {
+          animation-delay: #{$i * 0.1}s !important;
+        }
+      }
+    }
+    .content-left {
+      padding: 80px 48px;
+      color: #091221;
+      h2 {
+        font-family: alibaba;
+        font-size: 24px;
+        padding-bottom: 37px;
+      }
+      p {
+        opacity: 0; 
+        margin-left: 46px;
+        position: relative;
+        padding-bottom: 23px;
+        font-size: 16px;
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: -46px;
+          width: 36px;
+          height: 36px;
+          background-image: url('../../img/home/check.png');
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+      button {
+        opacity: 0; 
+        cursor: pointer;
+        margin-top: 30px;
+        width: 140px;
+        height: 36px;
+        background-color: #2149d4;
+        border-radius: 22px;
+        color: #ffffff;
+        font-size: 16px;
+        &:hover {
+          background-color:#325beb;
+        }
+        &:active {
+          background-color:#3b66ff;
+        }
+      }
+    }
     .content-right {
       margin-left: auto;
       width: 918px;
@@ -242,20 +301,6 @@
         left: 686px;
         top: 20px;
       }
-
-      &.animate-active {
-        .right-img-1 {
-          animation: fadeInUp 0.8s ease-out forwards;
-        }
-        .right-img-2 {
-          animation: fadeInUp 0.8s ease-out forwards;
-          animation-delay: 0.2s; // 延迟 0.2s 执行
-        }
-        .right-img-3 {
-          animation: shinning 1.6s linear forwards;
-          animation-delay: 0.4s; // 延迟 0.4s 执行
-        }
-      }
     }
   }
 }
@@ -341,13 +386,13 @@
     
     &.animate-active {
       .chain-content-item {
-        animation: fadeInUp 0.6s ease-out forwards;
+        animation: fadeInUp 0.8s ease-out forwards;
       }
 
       // 循环生成延迟
       @for $i from 1 through 6 {
         .item-#{$i} {
-          animation-delay: #{$i * 0.1}s;
+          animation-delay: #{($i - 1) * 0.1}s;
         }
       }
     }
@@ -369,11 +414,11 @@
     margin-top: 80px;
     margin-bottom: 20px;
     &-item {
+      opacity: 0;
       box-sizing: border-box;
       width: 385px;
       height: 354px;
       background-color: #ffffff;
-      background-image: url("../../img/home/factory-bg2.webp");
       background-repeat: no-repeat;
       background-size: 100% 100%;
       padding: 60px 33px;
@@ -398,10 +443,28 @@
         }
       }
     }
+    @for $i from 1 through 4 {
+      .item-#{$i} {
+        background-image: url("../../img/home/factory-item-bg#{$i}.png");
+      }
+    }
+    &.animate-active {
+      .factory-content1-item {
+        animation: fadeInUp 0.8s ease-out forwards;
+      }
+
+      // 循环生成延迟
+      @for $i from 1 through 4 {
+        .item-#{$i} {
+          animation-delay: #{($i - 1) * 0.1}s;
+        }
+      }
+    }
   }
   .factory-content2 {
     display: flex;
     &-item {
+      position: relative;
       display: flex;
       width: 790px;
       margin-right: 20px;
@@ -429,13 +492,104 @@
           margin-right: 10px;
         }
       }
+      .line-1 {
+        border-radius: 1px;
+        position: absolute;
+        height: 2px;
+        width: 0;
+        background-color: #52cea2;
+        left: 686px;
+        top: 68px;
+      }
+      .line-2 {
+        border-radius: 1px;
+        position: absolute;
+        height: 2px;
+        width: 0;
+        background-color: #52cea2;
+        left: 686px;
+        top: 121px;
+      }
+      .item-title {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        right: 33px;
+        font-family: alibaba;
+        font-size: 10px;
+        top: 32px;
+        img {
+          width: 16px;
+          height: 16px;
+          margin-right: 6px;
+        }
+      }
+      .item-desc {
+        position: absolute;
+        font-size: 6px;
+        display: flex;
+        align-items: center;
+        right: 17px;
+        top: 68px;
+
+        &::before {
+          content: "";
+          width: 4px;
+          height: 4px;
+          border-radius: 2px;
+          background-color: #52cea2;
+          margin-right: 4px;
+        }
+        .char {
+          opacity: 0;
+        }
+      }
+
+    }
+    @keyframes lineGrow1 {
+      to {
+        width: 30px;
+      }
+    }
+
+    @keyframes lineGrow2 {
+      to {
+        width: 40px;
+      }
+    }
+
+    @keyframes fadeIn {
+      to {
+        opacity: 1;
+      }
+    }
+
+    &.animate-active {
+      .item-title {
+        animation: fadeIn 0.8s ease-out forwards;
+      }
+      .line-1 {
+        animation: lineGrow1 0.8s ease-out forwards;
+      }
+      .line-2 {
+        animation: lineGrow2 0.8s ease-out forwards;
+      }
+      .item-desc {
+        .char {
+          animation: fadeIn 0.5s forwards;
+          @for $i from 1 through 15 {
+            &:nth-child(#{$i}) {
+              animation-delay: #{$i * 0.1}s;
+            }
+          }
+        }
+      }
     }
   }
 }
 .home-forum {
   margin-top: 90px;
-  height: 694px;
+  background-image: url("../../img/home/forum-bg.png");
-  background-image: url("../../img/home/forum-bg.webp");
   background-repeat: no-repeat;
   background-size: 100% auto;
   background-position: center bottom;
@@ -458,8 +612,12 @@
       }
     }
   }
+  .forum-light {
+    margin-top: 35px;
+    width: 1600px;
+  }
   .forum-content2 {
-    margin-top: 135px;
+    margin-bottom: 122px;
     width: 1600px;
     height: 160px;
     background-color: #ffffff;