首页暂存

2025-11-24 16:52:53 +08:00 · 2025-11-24 16:52:53 +08:00 · 266e457c10
parent 2f12966df7
commit 266e457c10
49 changed files with 920 additions and 1076 deletions
--- a/src/App.js
+++ b/src/App.js
@ -109,10 +109,15 @@ const ProjectIndex = Loadable({
 });

 const Home = Loadable({
-  loader: () => import('./forge/Main/projectHomeNew/v2'),
+  loader: () => import('./forge/Main/projecthome/Index'),
  loading: Loading,
 })

+// const Home = Loadable({
+//   loader: () => import('./forge/Main/projectHomeNew/v2'),
+//   loading: Loading,
+// })
+
 const Relaction = Loadable({
  loader: () => import("./forge/Account/Index"),
  loading: Loading,
--- a/src/forge/Head/Header.js
+++ b/src/forge/Head/Header.js
@ -47,9 +47,28 @@ class NewHeader extends Component {
      visible:false,  //浮动消息框展示控制
      showSubMenu: false,
      zoneList: [], // 专区列表
+      isHome: true, // 是否首页
    }
  }
  componentDidMount() {
+    if (this.props.match.path !== '/') {
+      this.setState({
+        isHome: false
+      })
+    }
+    const header = document.querySelector('.homeHeader');
+
+    window.addEventListener('scroll', () => {
+      const threshold = window.innerWidth * 0.25;
+
+      if (window.scrollY > threshold) {
+        header.classList.add('active');
+      } else {
+        header.classList.remove('active');
+      }
+    });
+
+
    // 用personal判断是否需要再次请求settings接口，解决登录注册之后无设置按钮的情况
    let settings = localStorage.chromesetting && localStorage.chromesetting !=="undefined" &&JSON.parse(localStorage.chromesetting);
    if(settings){
@ -300,11 +319,12 @@ class NewHeader extends Component {
      isRender,
      visible,
      showSubMenu,
-      zoneList
+      zoneList,
+      isHome
    } = this.state;
    // let search_url = settings && settings.common && settings.common.search;
    return (
-      <div className={publicNav ? `newHeaders publicNav`:`newHeaders`} id="nHeader">
+      <div className={`${ publicNav ? 'newHeaders publicNav':'newHeaders'} ${ isHome && 'homeHeader' }`} id="nHeader">
        <div className="headerContent">
          {isRender === true ?
            <LoginDialog
@ -327,14 +347,14 @@ class NewHeader extends Component {
                </a>
              }
            </div> */}
-            {
+            {/* {
              settings && settings.nav_logo_url ?
              <a href={settings && settings.new_course.default_url} className={"fl mr30"}>
                <img alt="可控开源社区" className="logoimg" src={getImageUrl(`/${settings.nav_logo_url}`)}></img>
              </a>
              :
              ""
-            }
+            } */}
          {/* <div className="head-nav pr"> */}
            {
              settings && settings.navbar && settings.navbar.length > 0 ?
--- a/src/forge/Main/img/home/banner1.webp
+++ b/src/forge/Main/img/home/banner1.webp
--- a/src/forge/Main/img/home/banner2.webp
+++ b/src/forge/Main/img/home/banner2.webp
--- a/src/forge/Main/img/home/banner3.webp
+++ b/src/forge/Main/img/home/banner3.webp
--- a/src/forge/Main/img/home/button.png
+++ b/src/forge/Main/img/home/button.png
--- a/src/forge/Main/img/home/chain-bg.webp
+++ b/src/forge/Main/img/home/chain-bg.webp
--- a/src/forge/Main/img/home/chain-content.png
+++ b/src/forge/Main/img/home/chain-content.png
--- a/src/forge/Main/img/home/chain-content.webp
+++ b/src/forge/Main/img/home/chain-content.webp
--- a/src/forge/Main/img/home/chain-gif.gif
+++ b/src/forge/Main/img/home/chain-gif.gif
--- a/src/forge/Main/img/home/chain1.png
+++ b/src/forge/Main/img/home/chain1.png
--- a/src/forge/Main/img/home/chain2.png
+++ b/src/forge/Main/img/home/chain2.png
--- a/src/forge/Main/img/home/chain3.png
+++ b/src/forge/Main/img/home/chain3.png
--- a/src/forge/Main/img/home/chain4.png
+++ b/src/forge/Main/img/home/chain4.png
--- a/src/forge/Main/img/home/chain5.png
+++ b/src/forge/Main/img/home/chain5.png
--- a/src/forge/Main/img/home/chain6.png
+++ b/src/forge/Main/img/home/chain6.png
--- a/src/forge/Main/img/home/check.png
+++ b/src/forge/Main/img/home/check.png
--- a/src/forge/Main/img/home/factory-bg1.webp
+++ b/src/forge/Main/img/home/factory-bg1.webp
--- a/src/forge/Main/img/home/factory-bg2.webp
+++ b/src/forge/Main/img/home/factory-bg2.webp
--- a/src/forge/Main/img/home/factory1.webp
+++ b/src/forge/Main/img/home/factory1.webp
--- a/src/forge/Main/img/home/factory2.webp
+++ b/src/forge/Main/img/home/factory2.webp
--- a/src/forge/Main/img/home/factory3.webp
+++ b/src/forge/Main/img/home/factory3.webp
--- a/src/forge/Main/img/home/factory4.webp
+++ b/src/forge/Main/img/home/factory4.webp
--- a/src/forge/Main/img/home/forum-bg.webp
+++ b/src/forge/Main/img/home/forum-bg.webp
--- a/src/forge/Main/img/home/forum1.webp
+++ b/src/forge/Main/img/home/forum1.webp
--- a/src/forge/Main/img/home/forum2.webp
+++ b/src/forge/Main/img/home/forum2.webp
--- a/src/forge/Main/img/home/forum3.webp
+++ b/src/forge/Main/img/home/forum3.webp
--- a/src/forge/Main/img/home/store-bg.png
+++ b/src/forge/Main/img/home/store-bg.png
--- a/src/forge/Main/img/home/store-r-1.webp
+++ b/src/forge/Main/img/home/store-r-1.webp
--- a/src/forge/Main/img/home/store-r-2.webp
+++ b/src/forge/Main/img/home/store-r-2.webp
--- a/src/forge/Main/img/home/store-r-3.png
+++ b/src/forge/Main/img/home/store-r-3.png
--- a/src/forge/Main/img/home/store1.png
+++ b/src/forge/Main/img/home/store1.png
--- a/src/forge/Main/img/home/store2.png
+++ b/src/forge/Main/img/home/store2.png
--- a/src/forge/Main/img/home/store3.png
+++ b/src/forge/Main/img/home/store3.png
--- a/src/forge/Main/img/home/store4.png
+++ b/src/forge/Main/img/home/store4.png
--- a/src/forge/Main/img/home/store5.png
+++ b/src/forge/Main/img/home/store5.png
--- a/src/forge/Main/img/home/store6.png
+++ b/src/forge/Main/img/home/store6.png
--- a/src/forge/Main/projecthome/Index.jsx
+++ b/src/forge/Main/projecthome/Index.jsx
@ -1,159 +1,29 @@
 import React , { useEffect , useState } from 'react';
 import './Index.scss';
-import SubBanner from './SubBanner';
-import Icon from '../img/index/icon.png';
-import { Link } from 'react-router-dom';
-import { Spin , Input, Tooltip } from 'antd';
-import SubList from './SubList';
-import more from '../img/index/more.png';
-import axios from 'axios';
-import { getImageUrl } from 'educoder';
-import Nodata from '../../Nodata';
-import moment from 'moment';
+import { TPMIndexHOC } from "../../../modules/tpm/TPMIndexHOC";
+import Banner from './components/Banner';
+import Store from './components/Store';
+import Chain from './components/Chain';
+import Factory from './components/Factory';
+import Forum from './components/Forum';

-const { Search } = Input;
-
-const LIMIT = 20;
 function Index(props) {

-  const [ cateList , setCateList ] = useState(undefined);
-  const [ projectsList , setProjectsList ] = useState(undefined);
-  const [ search , setSearch ] = useState(undefined);
-  const [ cateID, setCateID ] = useState(undefined);
-  const [ isSpin, setIsSpin ] = useState(true);
-
  useEffect(()=>{
-    getCate();
-    document.title='可信代码仓库';
+    document.title='JYKYRJ代码仓库';
  },[])

-  useEffect(()=>{
-    setIsSpin(true);
-    getProject();
-  },[cateID, search])
-
-  function getCate() {
-    const url = `/project_categories/pinned_index.json`;
-    axios.get(url).then(result=>{
-      if(result && result.data){
-        setCateList(result.data.project_categories);
-      }
-    }).catch(error=>{})
-  }
-
-  function getProject() {
-    const url = `/projects.json`;
-    axios.get(url,{
-      params:{
-        pinned:"d",
-        category_id:cateID,
-        limit:LIMIT,
-        search:search
-      }
-    }).then(result=>{
-      if(result && result.data){
-        setProjectsList(result.data.projects);
-        setIsSpin(false);
-      }
-    }).catch(error=>{})
-  }
-
-  function searchFun(value){
-    setSearch(value);
-  }
-
  return(
-    <div>
-      <SubBanner {...props}/>
-      {/* <SubUnitBanner /> */}
-      <div className="dataPanel">
-        <div className="left">
-          <ul className="leftTypes">
-            <a className={cateID ? "" : "active"} onClick={()=>setCateID(undefined)}><img src={Icon} alt="" /><span>最近更新</span></a>
-            {
-              cateList && cateList.length>0?
-                cateList.map((i,k)=>{
-                  return(
-                    <a key={k} className={cateID === i.id ?"active":""} onClick={()=>setCateID(i.id)}><img src={i.logo_url || Icon} alt="" /><span>{i.name}</span></a>
-                  )
-                })
-              :""
-            }
-          </ul>
-          <div className="leftLists">
-            <div className="leftTitles">
-              <span>开源项目</span>
-
-              <Search
-                placeholder="输入关键字进行搜索"
-                enterButton="搜索"
-                size="middle"
-                onSearch={searchFun}
-                className="list-r-Search"
-                style={{width:"300px"}}
-                allowClear
-              />
-              <Link to={`/explore/all${search ? '?search='+search : ''}`}>更多<i className="iconfont icon-triangle font-12"></i></Link>
-            </div>
-            <Spin spinning={isSpin}>
-              <div style={{minHeight:"400px"}}>
-                {
-                  projectsList && projectsList.length > 0 ?
-                  <div className="leftlistItem">
-                    {
-                      projectsList.map((i,k)=>{
-                        return(
-                          <li key={k}>
-                            {
-                              i.platform === "educoder" ?
-                              <a href="javascript:void(0)" style={{cursor:"default"}}>
-                                <img className="p-r-photo" alt="" src={i.author && i.author.image_url} ></img>
-                              </a>
-                              :
-                              <Link to={`/${i.author && i.author.login}`}><img src={getImageUrl(`/${i.author && i.author.image_url}`)} alt="" /></Link>
-                            }
-                            <div className="itemTitle">
-                              <div className="item-title-infos">
-                                <a href={ `/${i.author && i.author.login}/${i.identifier}` } className="infotitle task-hide">{i.author && i.author.name}/{i.name}</a>
-                                {i.praises_count > 0 ? <span><i className="iconfont icon-xingzhuang mr3 font-14"></i>{i.praises_count}</span> :"" }
-                                {i.forked_count > 0 ? <span><i className="iconfont icon-yifuke_icon mr3 font-14"></i>{i.forked_count}</span>:""}
-                              </div>
-                              <div className="item-desc task-hide-2">
-                                {i.description}
-                              </div>
-                              {/* 项目标签 */}
-                              {i.topics && <div className='proListTopics'>
-                                {i.topics.map(item=><Link to={`/explore/topic/${item.id}/${encodeURIComponent(item.name)}`} className='proListTopic mr15 font-13 task-hide'>{item.name}</Link>)}
-                              </div>}
-                              <div className="item-data">
-                                {i.category && i.category.id ? <span className="category">{i.category.name}</span> :"" }
-                                {i.language && i.language.id ? <span className={`language mr30 ${i.category && i.category.id ? 'hasCate' : ''}`}>{i.language.name}</span> :""}
-                                <span style={{lineHeight:"15px",display:"flex"}}><Tooltip placement='bottom' title={i.full_last_update_time && moment(i.full_last_update_time).format("YYYY-MM-DD HH:mm")}><i className="iconfont icon-shijian font-15 mr5"></i>更新于{i.time_ago}</Tooltip></span>
-                              </div>
-                            </div>
-                          </li>
-                        )
-                      })
-                    }
-                  </div>
-                  :""
-                }
-                {
-                  projectsList && projectsList.length === 0 && <Nodata _html="暂无数据" />
-                }
-              </div>
-            </Spin>
-            {
-              projectsList && projectsList.length > 0 &&
-              <div className="left-bottom-btn">
-                <Link to={`/explore/all${search ? '?search='+search : ''}`} target="_blank">查看更多开源项目<img src={more} alt="" /></Link>
-              </div>
-            }
-          </div>
-        </div>
-        <SubList />
+    <div className="home">
+      <Banner/ >
+      <div className="home-top"></div>
+      <div className="home-main">
+        <Store/ >
+        <Chain/ >
+        <Factory/ >
+        <Forum/>
      </div>
    </div>
  )
 }
-export default Index;
+export default TPMIndexHOC(Index)
--- a/src/forge/Main/projecthome/Index.scss
+++ b/src/forge/Main/projecthome/Index.scss
@ -1,577 +1,14 @@
-.banners{
-  background: url('../img/index/banner.png') no-repeat top;
-  min-height: 360px;
-  background-size: cover;
-  background-color: #0C2A5B;
-  .bannersCenter{
-    padding-top: 30px;
-    max-width: 1200px;
-    margin: 0px auto;
-    position: relative;
-    height: 360px;
-  }
-  .bTitle{
-    height: 30px;
-    line-height: 30px;
-    font-size: 30px;
-    font-weight: 500;
-    color: #FFFFFF;
-    margin-bottom: 20px!important;
-    text-align: center;
-    span{
-      background: linear-gradient(to right,#289AF6 0%, #9E84FF 40%, #FFB03B 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-  }
-  .bSubTitle{
-    text-align: center;
-    height: 30px;
-    line-height: 30px;
-    font-size: 16px;
-    font-weight: 400;
-    color: #FFFFFF;
-  }
-  .bannerBox{
-    background: url('../img/index/box.png') no-repeat;
-    background-size: 100% 100%;
-    height: 195px;
-    width: 330px;
-    margin:0px auto;
-    padding:25px 30px 34px;
-    .bannersProject{
-      position: relative;
-      .slick-list{
-        width: 100%;
-        overflow: hidden;
-      }
-      .slick-track{
-        display: flex;
-        li{
-          padding:3px 10px;
-          .projectinfos{
-            display: flex;
-            align-items: center;
-            width: 100%;
-            margin-bottom: 8px;
-            img{
-              width: 32px;
-              height: 32px;
-              margin-right: 7px;
-              border-radius: 50%;
-            }
-            .name{
-              height: 28px;
-              line-height: 28px;
-              font-size: 18px;
-              font-weight: 500;
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              max-width: 250px;
-              color: #25EBFF;
-              a{
-                color: #25EBFF!important;
-              }
-            }
-            .company{
-              height: 20px;
-              line-height: 20px;
-              font-size: 14px;
-              font-weight: 400;
-              color: #FFFFFF;
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              max-width: 250px;
-              a{
-                color: #FFFFFF!important;
-              }
-            }
-          }
-          .desc{
-            height: 40px;
-            font-size: 13px;
-            font-weight: 400;
-            color: #FFFFFF;
-            line-height: 20px;
-            text-align: center;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-          }
-          .infoData{
-            display: flex;
-            margin-top: 7px;
-            justify-content: space-around;
-            &>span{
-              display: flex;
-              align-items: center;
-              &>span{
-                color: #FFB729;
-                font-size: 15px;
-                font-weight: 400;
-              }
-            }
-            img{
-              width: 16px;
-              margin-right: 4px;
-            }
-          }
-        }
-      }
-    }
-  }
-  .airBubble{
-    &>div{
-      position: absolute;
-      height: 100%;
-      width: 415px;
-      bottom: 0px;
-      &.right{
-        right: 0px;
-      }
-      &.left{
-        left: 0px;
-      }
-      &.right div, &.left div{
-        position: relative;
-        width: 100%;
-        height: 100%;
-        span{
-          position: absolute;
-          border-radius: 50%;
-          background: linear-gradient(124deg, rgba(255, 255, 255, 0.1) 0%, rgba(5, 200, 220, 0.04) 50%, rgba(5, 200, 220, 0.03) 100%);
-          box-shadow: 0px 0px 7px 3px rgba(0, 154, 255, 0.19);
-          border: 1px solid rgba(0, 154, 255, 0.19);
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 17px;
-          display: flex;
-          align-items: center;
-          word-break: break-all;
-          text-align: center;
-          padding:5px;
-          animation: zoomin 1.3s infinite alternate;
-          &:hover{
-            animation:none
-          }
-        }
-      }
-      &.right span:nth-child(4) a,&.left span:nth-child(1) a,&.left span:nth-child(2) a{
-        color: #25EBFF!important;
-      }
-      &.right span:nth-child(1) a,&.left span:nth-child(5) a{
-        color: #CD8AFF!important;
-      }
-      &.right span:nth-child(3) a,&.right span:nth-child(5) a,&.left span:nth-child(6) a{
-        color: #FF6125!important;
-      }
-      &.left span:nth-child(3) a{
-        color: #FF8425!important;
-      }
-      &.right span:nth-child(2) a,&.left span:nth-child(4) a{
-        color: #8CC2FF!important;
-      }
-      &.right span:nth-child(1){
-        right: 0px;
-        height: 120px;
-        width: 120px;
-      }
-      &.right span:nth-child(2){
-        right: 160px;
-        height: 72px;
-        width: 72px;
-        bottom: 220px;
-        padding:0px;
-        animation-delay: 0.2s;
-      }
-      &.right span:nth-child(3){
-        right: 300px;
-        height: 94px;
-        width: 94px;
-        bottom: 99px;
-        padding:8px;
-        animation-delay: 0.3s;
-      }
-      &.right span:nth-child(4){
-        right: 156px;
-        height: 100px;
-        width: 100px;
-        bottom: 39px;
-        font-size: 12px;
-        animation-delay: 0.2s;
-      }
-      &.right span:nth-child(5){
-        right: 10px;
-        height: 94px;
-        width: 94px;
-        bottom: 97px;
-        animation-delay: 0.4s;
-      }
-      &.left span:nth-child(1){
-        left: 80px;
-        height: 110px;
-        width: 110px;
-        padding:8px;
-        animation-delay: 0.1s;
-      }
-      &.left span:nth-child(2){
-        right: 60px;
-        height: 96px;
-        width: 96px;
-        top: 85px;
-        font-size: 13px;
-        animation-delay: 0.2s;
-      }
-      &.left span:nth-child(3){
-        left: 0px;
-        height: 86px;
-        width: 86px;
-        top: 145px;
-        font-size: 13px;
-        animation-delay: 0.3s;
-      }
-      &.left span:nth-child(4){
-        left: 164px;
-        height: 70px;
-        width: 70px;
-        bottom: 158px;
-        font-size: 12px;
-        font-size: 12px;
-        animation-delay: 0.3s;
-      }
-      &.left span:nth-child(5){
-        left: 35px;
-        height: 102px;
-        width: 102px;
-        bottom: 32px;
-        font-size: 13px;
-        animation-delay: 0.4s;
-      }
-      &.left span:nth-child(6){
-        right: 10px;
-        height: 114px;
-        width: 114px;
-        bottom: 26px;
-        padding:8px;
-      }
-    }
-  }
-}
-@keyframes zoomin{
-  0%{-webkit-transform:scale(1.05);transform:scale(1.05)}
-  100%{-webkit-transform:scale(0.8);transform:scale(0.8)}
-}
-@-webkit-keyframes zoomin{
-  0%{-webkit-transform:scale(1.05);transform:scale(1.05)}
-  100%{-webkit-transform:scale(0.8);transform:scale(0.8)}
-}
-.unitBanner{
-  padding:29px 0px;
-  background: #F9F9F9;
-  .unitContent{
-    max-width: 1200px;
-    margin:0px auto;
-    .unitTitle{
-      height: 28px;
-      line-height: 28px;
-      font-size: 20px;
-      font-weight: 500;
-      color: #1E1E1E;
-      display: flex;
-      align-items: center;
-      img{
-        margin-left: 9px;
-      }
-    }
-    .unitSlider{
-      padding:30px 0px 10px;
-      .slick-list{
-        width: 100%;
-        height: 56px;
-        overflow: hidden;
-        .slickline{
-          display: flex!important;
-          align-items: center;
-          justify-content: space-between;
-        }
-      }
-    }
-  }
-}
-.dataPanel{
-  width: 1200px;
-  display: flex;
-  justify-content: space-between;
-  padding:30px 0px 60px;
-  margin:0px auto;
-  .left{
-    width: 850px;
-    display: flex;
-    .leftTypes{
-      width: 220px;
-      height: 1576px;
-      background: url('../img/index/typebg.png');
-      background-size: 100% 100%;
-      box-shadow: 0px 0px 4px 5px rgba(0, 0, 0, 0.02);
-      a{
-        padding:0px 20px;
-        height: 44px;
-        margin-top: 10px;
-        font-size: 16px;
-        font-weight: 500;
-        color: #333333;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        &:hover{
-          background-color: #F5F5F5;
-        }
-        &.active{
-          background: linear-gradient(to right,#07228F , #466AFF);
-          color: #fff!important;
-        }
-        img{
-          margin-right: 12px;
-          width: 28px;
-        }
-      }
-    }
-    .leftLists{
-      flex:1;
-      box-shadow: 0px 0px 4px 5px rgba(0, 0, 0, 0.02);
-      .leftTitles{
-        height: 60px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid rgba(153, 153, 153, 0.16);
-        padding:0px 20px;
-        .ant-btn-primary{
-          background-color: #466AFF;
-          border-color: #466AFF;
-          &:hover,&:active{
-            background-color: rgba(70,106,255,0.8);
-            border-color: rgba(70,106,255,0.8);
-          }
-        }
-        &>span{
-          font-size: 18px;
-          font-weight: 500;
-          color: #000000;
-        }
-        a{
-          color: #466AFF!important;
-        }
-      }
-      .leftlistItem{
-        padding:0px 20px;
-        li{
-          border-bottom: 1px solid rgba(153, 153, 153, 0.16);
-          display: flex;
-          align-items: flex-start;
-          padding:20px 0px ;
-          &>a img{
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            margin-right: 10px;
-          }
-          .itemTitle{
-            flex:1;
-            .item-title-infos{
-              height: 22px;
-              display: flex;
-              align-items: center;
-              .infotitle{
-                flex:1;
-                height: 21px;
-                font-size: 15px;
-                font-weight: 600;
-                line-height: 21px;
-                color: #333!important;
-                max-width: 458px;
-                &:hover{
-                  color: #466AFF!important;
-                }
-              }
-              span{
-                margin-left:20px ;
-                color: #333;
-                i{
-                  color: #666;
-                }
-              }
-            }
-            .item-desc{
-              font-size: 14px;
-              font-weight: 400;
-              color: #414141;
-              line-height: 24px;
-              max-width: 548px;
-              margin: 5px 0px;
-            }
-            .item-data{
-              font-size: 13px;
-              font-weight: 400;
-              color: #7D7D7D;
-              height: 20px;
-              line-height: 20px;
-              display: flex;
-              align-items: center;
-              .category{
-                position: relative;
-                padding-left: 11px;
-                margin-right: 10px;
-                &::before{
-                  position: absolute;
-                  content: "";
-                  width: 6px;
-                  height: 6px;
-                  border-radius: 50%;
-                  background-color: #466AFF;
-                  top: 7px;
-                  left: 0px;
-                }
-              }
-              .language{
-                position: relative;
-                &.hasCate{
-                  padding-left: 11px;
-                }
-                &.hasCate::before{
-                  position: absolute;
-                  content: "";
-                  width: 1px;
-                  height: 10px;
-                  border-radius: 50%;
-                  border-left: 1px solid #9e9e9e;
-                  bottom: 5px;
-                  left: 0px;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    .left-bottom-btn{
-      display: flex;
-      justify-content: center;
-      padding:18px 0px;
-      a{
-        height: 38px;
-        line-height: 36px;
-        border-radius: 8px;
-        border: 1px solid #466AFF;
-        color: #466AFF;
-        font-size: 16px;
-        padding:0px 20px;
-        img{
-          height: 16px;
-          margin-top: -1px;
-          margin-left: 8px;
-        }
-      }
-    }
-  }
-  .right{
-    width: 330px;
-    &>div{
-      box-shadow: 0px 0px 4px 5px rgba(0, 0, 0, 0.02);
-      margin-bottom: 20px;
-    }
-    .partTitle{
-      padding:15px;
-      background: #F6F9FF;
+.home {
+  font-family: alibabareg;
+  .home-main {
+    border-radius: 100px 100px 0px 0px;
+    margin-top: -100px;
+    background-image:linear-gradient(180deg,#f8faff 0%,#f1f6fd 100%);
+    h4 {
+      font-family: alibaba;
      font-size: 18px;
-      color: #000000;
-      font-weight: 500;
-      margin-bottom: 10px;
-      img{
-        width: 33px;
-        margin-right: 6px;
-      }
+      line-height: 18px;
+      color:#091221;
    }
-    .righthotAuthor{
-      padding-bottom: 15px;
-      li{
-        padding-left: 15px;
-        &>div{
-          display: flex;
-          align-items: flex-start;
-          padding:10px 15px 10px 0px;
-          border-bottom: 1px solid rgba(153, 153, 153, 0.1);
-          img{
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            margin-right: 8px;
-            margin-top: 3px;
-          }
-        }
-        &:hover{
-          background-color: #F3F3F3;
-        }
-        &:last-child > div{
-          border-bottom: none;
-        }
-      }
-    }
-    .hotProjects{
-      li{
-        padding:10px 15px;
-        margin-bottom: 10px;
-        &:hover{
-          background-color: #F3F3F3;
-        }
-        .mInfos{
-          display: flex;
-          align-items: center;
-          height: 20px;
-          .num{
-            width: 18px;
-            height: 18px;
-            background: #466AFF;
-            border-radius: 2px;
-            color: #fff;
-            text-align: center;
-            line-height: 18px;
-            margin-right: 8px;
-          }
-          .name{
-            flex:1;
-            font-size: 15px;
-          }
-        }
-        .sInfos{
-          background: #F7F8F9;
-          padding:0px 5px;
-          font-size: 13px;
-          font-weight: 400;
-          color: #666666;
-          line-height: 24px;
-          word-break: break-all;
-          margin-top: 10px;
-        }
-      }
-    }
-  }
-}
-.proListTopics{
-  display: flex;
-  flex-wrap: wrap;
-  .proListTopic{
-    background-color:#f3f8ff;
-    border-radius: 4px;
-    max-width: 158px;
-    padding: 0 10px;
-    height: 24px;
-    line-height: 24px;
-    color: #4c5b76;
-    margin-bottom: 5px !important;
  }
 }
--- a/src/forge/Main/projecthome/SubBanner.jsx
+++ b/src/forge/Main/projecthome/SubBanner.jsx
@ -1,114 +0,0 @@
-import React , { useEffect , useState } from 'react';
-import Slider from 'react-slick';
-import { Link } from 'react-router-dom';
-import { getImageUrl } from 'educoder';
-import Eye from '../img/index/eye.png';
-import Data from '../img/index/data.png';
-import Earth from '../img/index/earth.png';
-import axios from 'axios';
-
-// const list =[
-//   {img:Imgs,name:"矽璓工业物联操作系统XiUOS",company:"泛在操作系统实验室",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-//   {img:Imgs,name:"openGauss-operator",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-//   {img:Imgs,name:"PaddleDetection 2.0",company:"TrustieMirrors",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-//   {img:Imgs,name:"skyline",company:"浪潮信息",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-//   {img:Imgs,name:"BitXHub",company:"开放原子开源基金会",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-//   {img:Imgs,name:"Device Model",company:"openDACS",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-//   {img:Imgs,name:"Gitlink",company:"Gitlink",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-//   {img:Imgs,name:"openEuler-datenlord",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-//   {img:Imgs,name:"OpenAtom XuperChain",company:"开放原子开源基金会",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-//   {img:Imgs,name:"xuos-web",company:"泛在操作系统实验室",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-//   {img:Imgs,name:"CrowdOS开源项目开发",company:"西北工业大学",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
-// ]
-const settings={
-  dots: false,
-  infinite: true,
-  speed: 1000,
-  slidesToShow: 1,
-  slidesToScroll: 1,
-  autoplay:true,
-  arrows:false,
-  adaptiveHeight:true
-}
-
-function SubBanner(props) {
-  const mygetHelmetapi = props && props.mygetHelmetapi;
-  const [ list , setList ] = useState(undefined);
-
-  useEffect(()=>{
-    getList();
-  },[])
-
-  function getList() {
-    const url = `/projects/banner_recommend.json`;
-    axios.get(url).then(result=>{
-      if(result && result.data){
-        setList(result.data.projects);
-      }
-    }).catch(error=>{})
-  }
-  return(
-    <div className="banners">
-      <div className="bannersCenter">
-        <p className="bTitle"><span>{mygetHelmetapi && mygetHelmetapi.name}</span></p>
-        <p className="bSubTitle">新一代开发创新服务平台 让你的创意在这里释放</p>
-        <div className="bannerBox">
-          {
-            list && list.length > 0 ?
-            <Slider {...settings} className="bannersProject">
-              {
-                list.map((i,k)=>{
-                  return(
-                    <li>
-                      <div className="projectinfos">
-                        <Link to={`/${i.author && i.author.login}`}><img src={getImageUrl(`/${i.author && i.author.image_url}`)} alt="" /></Link>
-                        <div>
-                          <p className="name"><Link to={`/${i.author && i.author.login}/${i.identifier}`}>{i.name}</Link></p>
-                          <p className="company"><Link to={`/${i.author && i.author.login}`}>{i.author && i.author.name}</Link></p>
-                        </div>
-                      </div>
-                      <p className="desc">{i.description}</p>
-                      <div className="infoData">
-                        <span><img src={Eye} alt="" /><span>{i.visits}</span></span>
-                        {i.category && i.category.id && <span><img src={Data} alt="" /><span>{i.category.name}</span></span>}
-                        {i.language && i.language.id && <span><img src={Earth} alt="" /><span>{i.language.name}</span></span>}
-                      </div>
-                    </li>
-                  )
-                })
-              }
-            </Slider>
-            :""
-          }
-        </div>
-        <div className="airBubble">
-          <div className="left">
-            <div>
-              {
-                list && list.length > 0 && list.map((i,k)=>{
-                  return(
-                    k%2 === 0? <span><Link to={`/${i.author && i.author.login}/${i.identifier}`}>{i.author && i.author.name}/{i.name}</Link></span> : ""
-                  )
-                })
-              }
-            </div>
-          </div>
-
-          <div className="right">
-            <div>
-              {
-                list && list.length > 0 && list.map((i,k)=>{
-                  return(
-                    k%2 > 0 ? <span><Link to={`/${i.author && i.author.login}/${i.identifier}`}>{i.author && i.author.name}/{i.name}</Link></span> : ""
-                  )
-                })
-              }
-            </div>
-          </div>
-          
-        </div>
-      </div>
-    </div>
-  )
-}
-export default SubBanner
--- a/src/forge/Main/projecthome/SubList.jsx
+++ b/src/forge/Main/projecthome/SubList.jsx
@ -1,145 +0,0 @@
-import React , { useEffect , useState } from 'react';
-import hotAuthor from '../img/index/hotAuthor.png';
-import week from '../img/index/week.png';
-import month from '../img/index/month.png';
-import { Link } from 'react-router-dom';
-import axios from 'axios';
-import { getImageUrl } from 'educoder';
-
-
-function SubList() {
-
-  const [ weekList ,setWeekList ] = useState(undefined);
-  const [ monthList ,setMonthList ] = useState(undefined);
-  const [ authorList ,setAuthorList ] = useState(undefined);
-
-  useEffect(()=>{
-    getList(7);
-    getList(30);
-    getAuthorList(7);
-  },[])
-
-  function getList(time){
-    const url = `/project_rank.json`;
-    axios.get(url,{
-      params:{
-        time
-      }
-    }).then(result=>{
-      if(result && result.data){
-        time === 7 ? setWeekList(result.data.projects) : setMonthList(result.data.projects);
-      }
-    }).catch(error=>{})
-  }
-  function getAuthorList(time){
-    const url = `/user_rank.json`;
-    axios.get(url,{
-      params:{
-        time
-      }
-    }).then(result=>{
-      if(result && result.data){
-        setAuthorList(result.data.users);
-      }
-    }).catch(error=>{})
-  }
-
-  return(
-    <div className="right">
-      {
-        authorList && authorList.length > 0?
-        <div>
-          <div className="partTitle"><img src={hotAuthor} alt="" /><span>本周热门开发者</span></div>
-          <div className="righthotAuthor">
-            {
-              authorList.map((i,k)=>{
-                return(
-                  <li>
-                    <div>
-                      <Link target="_blank" to={`/${i.login}`}><img src={getImageUrl(`/${i.avatar_url}`)} alt=""/></Link>
-                      <div>
-                        <Link target="_blank" to={`/${i.login}`} className="font-15">{i.name}</Link>
-                        {
-                          i.project && i.project.name ?
-                          <p className="task-hide" style={{maxWidth:"260px"}}>
-                            <Link target="_blank" to={`/${i.login}/${i.project && i.project.identifier}`}>
-                              <i className="iconfont icon-daimakuicon1 font-14 mr8"></i>
-                              {i.project && i.project.name}
-                            </Link>
-                          </p>
-                          :""
-                        }
-                      </div>
-                    </div>
-                  </li>
-                )
-              })
-            }
-          </div>
-        </div>
-        :""
-      }
-      
-      {
-        weekList && weekList.length > 0 ?
-        <div>
-          <div className="partTitle"><img src={week} alt="" /><span>本周热门项目</span></div>
-          <div className="hotProjects">
-            {
-              weekList.map((i,k)=>{
-                return(
-                  <li>
-                    <div className="mInfos">
-                      <span className="num">{k+1}</span>
-                      <Link target="_blank" to={`/${i.owner && i.owner.login}/${i.identifier}`} className="name task-hide">{i.owner && i.owner.name}/{i.name}</Link>
-                      <span>
-                        <i className="iconfont icon-dianzan11 font-16 mr4"></i>{i.praises}
-                      </span>
-                    </div>
-                    {i.description && 
-                      <div className="sInfos task-hide-2">
-                        {i.description}
-                      </div>
-                    }
-                  </li>
-                )
-              })
-            }
-          </div>
-        </div>
-        :""
-      }
-      {
-        monthList && monthList.length > 0?
-        <div>
-          <div className="partTitle"><img src={month} alt="" /><span>本月热门项目</span></div>
-          <div className="hotProjects">
-            {
-              monthList.map((i,k)=>{
-                return(
-                  <li key={k}>
-                    <div className="mInfos">
-                      <span className="num">{k+1}</span>
-                      <Link target="_blank" to={`/${i.owner && i.owner.login}/${i.identifier}`} className="name task-hide">{i.owner && i.owner.name}/{i.name}</Link>
-                      <span>
-                        <i className="iconfont icon-dianzan11 font-16 mr4"></i>{i.praises}
-                      </span>
-                    </div>
-                    {i.description && 
-                      <div className="sInfos task-hide-2">
-                        {i.description}
-                      </div>
-                    }
-                  </li>
-                )
-              })
-            }
-          </div>
-        </div>
-        :""
-      }
-      
-    </div>
-  )
-}
-export default SubList;
--- a/src/forge/Main/projecthome/SubUnitBanner.jsx
+++ b/src/forge/Main/projecthome/SubUnitBanner.jsx
@ -1,92 +0,0 @@
-import React , { useEffect , useState } from 'react';
-import Hot from '../img/index/hot.png';
-import Slider from "react-slick";
-import huawei from '../img/index/unit/huawei.png';
-import langchao from '../img/index/unit/langchao.png';
-import jijinhui from '../img/index/unit/jijinhui.png';
-import mulan from '../img/index/unit/mulan.png';
-import xigongye from '../img/index/unit/xigongye.png';
-import feiteng from '../img/index/unit/feiteng.png';
-import xiuos from '../img/index/unit/xiuos.png';
-import huake from '../img/index/unit/huake.png';
-import axios from 'axios';
-import { Link } from 'react-router-dom';
-import { getImageUrl } from 'educoder';
-
-const settings = {
-  dots: false,
-  infinite: true,
-  slidesToShow: 1,
-  slidesToScroll: 1,
-  vertical: true,
-  verticalSwiping: true,
-  autoplay:true,
-  arrows:false
-};
-// const group_size = 6;
-const list =[
-  [
-    {url:"/Huawei_Technology",avatar_url:huawei,name:"华为技术有限公司"},
-    {url:"/openatom_foundation",avatar_url:jijinhui,name:"开放原子开源基金会"},
-    {url:"/Inspur",avatar_url:langchao,name:"浪潮信息"},
-    {url:"/mulan-community",avatar_url:mulan,name:"木兰开源社区"},
-  ],
-  [
-    {url:"/CrowdOS_WeSense",avatar_url:xigongye,name:"西北工业大学"},
-    {url:"/pkecosystem",avatar_url:feiteng,name:"PK开源生态项目组"},
-    {url:"/xuos",avatar_url:xiuos,name:"泛在操作系统实验室"},
-    {url:"/hustos",avatar_url:huake,name:"华中科技大学操作系统团队"},
-  ]
-]
-function SubUnitBanner() {
-
-  // const [ list , setlist ] = useState(undefined);
-
-  // useEffect(()=>{
-  //   getRecommandOrz();
-  // },[])
-
-  // function getRecommandOrz(params) {
-  //   const url = `/organizations/recommend.json`;
-  //   axios.get(url,{
-  //     params:{
-  //       group_size
-  //     }
-  //   }).then(result=>{
-  //     if(result){
-  //       setlist(result.data.organizations)
-  //     }
-  //   }).catch(error=>{})
-  // }
-  return(
-    list && list.length > 0 ?
-      <div className="unitBanner">
-        <div className="unitContent">
-          <div className="unitTitle">
-            <span>精选开源组织</span>
-            <img src={Hot} alt="" width="47px"/>
-          </div>
-          <Slider {...settings} className="unitSlider">
-            {
-              list.map((i,k)=>{
-                return(
-                  <div className="slickline">
-                    {
-                      i.map((j,k1)=>{
-                        return(
-                          <Link to={j.url}><img src={j.avatar_url} title={j.name} alt={j.name} height="56px" style={{maxWidth:"180px"}}/></Link>
-                        )
-                      })
-                    }
-                  </div>
-                )
-              })
-            }
-          </Slider>
-        </div>
-      </div>
-    :""
-    
-  )
-}
-export default SubUnitBanner;
--- a/src/forge/Main/projecthome/components/Banner.jsx
+++ b/src/forge/Main/projecthome/components/Banner.jsx
@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react';
+import './index.scss';
+import banner1 from '../../img/home/banner1.webp';
+import banner2 from '../../img/home/banner2.webp';
+import banner3 from '../../img/home/banner3.webp';
+
+const BANNER_DATA = [
+    { key: 1, name: '开源仓库', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner1},
+    { key: 2, name: '供应链平台', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner2},
+    { 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);
+
+  // 在组件挂载时预加载图片
+  useEffect(() => {
+    preloadImages(bannerList);
+  }, [bannerList]); // 只在组件挂载时运行一次
+
+  const handleSelect = (key) => {
+    const item = bannerList.find(b => b.key === key);
+    if (item) setSelected(item);
+  };
+
+  // 定时器逻辑保持不变
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const currentIndex = bannerList.findIndex(item => item.key === selected.key);
+      const nextIndex = (currentIndex + 1) % bannerList.length;
+      setSelected(bannerList[nextIndex]);
+    }, 5000);
+
+    return () => clearInterval(timer);
+  }, [selected, bannerList]);
+
+  return (
+    <div className="home-banner" style={{ backgroundImage: `url(${selected.img})` }}>
+      {/* ... 渲染逻辑不变 */}
+      <div className="banner-tab">
+        {bannerList.map(item => (
+          <div
+            key={item.key}
+            className={`banner-tab-item ${selected.key === item.key ? 'banner-tab-item-selected' : ''}`}
+            onClick={() => handleSelect(item.key)}
+          >
+            <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>
+         <button>立即体验</button>
+      </div>
+    </div>
+  );
+}
+
+export default Banner;
+
--- a/src/forge/Main/projecthome/components/Chain.jsx
+++ b/src/forge/Main/projecthome/components/Chain.jsx
@ -0,0 +1,71 @@
+import React, { useEffect, useState, useRef } from 'react';
+import './index.scss';
+import chain1 from '../../img/home/chain1.png';
+import chain2 from '../../img/home/chain2.png';
+import chain3 from '../../img/home/chain3.png';
+import chain4 from '../../img/home/chain4.png';
+import chain5 from '../../img/home/chain5.png';
+import chain6 from '../../img/home/chain6.png';
+import chainGif from '../../img/home/chain-gif.gif'
+
+const Item = [
+  {text: '威胁情报管理', desc: '汇聚内外部威胁数据，实现情报的集中分析与主动防御', img: chain1},
+  {text: '软件供应链分析', desc: '深度分析开源及第三方软件依赖，识别其中的潜在威胁与合规问题', img: chain2},
+  {text: '全景图谱维护', desc: '构建并动态更新供应链组件关系图谱，清晰洞察依赖与风险来源', img: chain3},
+  {text: '智能风险预警', desc: '基于规则与算法实时监测，对供应链潜在中断与安全风险进行提前预警', img: chain4},
+  {text: '漏洞风险识别', desc: '快速识别软件组件中的已知漏洞，并提供修复优先级建议', img: chain5},
+  {text: '硬件供应链监控', desc: '监控硬件组件从生产到交付的全流程，确保来源可信与固件安全', img: chain6},
+]
+
+function Chain(props) {
+
+  const contentRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      // 如果元素进入视口
+      if (entry.isIntersecting) {
+        setIsVisible(true);
+        // 只触发一次动画
+        observer.disconnect(); 
+      }
+    }, {
+      threshold: 0.3 //露出 30% 时触发
+    });
+
+    if (contentRef.current) {
+      observer.observe(contentRef.current);
+    }
+
+    return () => {
+      if (contentRef.current) observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <div className="home-chain home-module">
+      <h1 className="module-title">供应链平台</h1>
+      <p className="module-desc">全链路软硬件风险控制</p>
+      <div className={`chain-content ${isVisible ? 'animate-active' : ''}`} ref={contentRef}>
+        {
+          Item.map((e, index) => {
+            return <div className={ `chain-content-item item-${ index + 1 }` } key={ index }>
+              <img src={ e.img } alt="" />
+              <div className="item-right">
+                <h4>{ e.text }</h4>
+                <p>{ e.desc }</p>
+              </div>
+            </div>
+          })
+        }
+        <div className="chain-content-img">
+          <img src={ chainGif } alt="" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Chain;
--- a/src/forge/Main/projecthome/components/Factory.jsx
+++ b/src/forge/Main/projecthome/components/Factory.jsx
@ -0,0 +1,68 @@
+import React, { useEffect, useState } 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 factory4 from '../../img/home/factory4.webp';
+
+const Item1 = [
+  {text: '全流程协同', desc: '提供从需求、设计、开发到测试的端到端线上协同能力，确保信息无缝流转，提升团队协作效率', img: factory1, sub: ['端到端协同', '全流程无缝管理', '团队效率提升']},
+  {text: '持续交付流水线', desc: '提供自动化构建、测试与部署的一站式流水线，实现快速、可靠的软件集成与交付，提升发布效率', img: factory2, sub: ['自动化流水线', '拖拽快速生成流水线', '高效构建']},
+  {text: '组件制品管理', desc: '对二进制组件与依赖进行统一存储、版本控制与全生命周期管理，确保制品可信、可追溯、易管理', img: factory1, sub: ['统一存储', '版本管控', '全生命周期']},
+  {text: '结构化知识库', desc: '实现项目文档、规范与经验的沉淀、分类与共享，形成可复用的组织资产，赋能团队持续成长', img: factory2, sub: ['知识沉淀', '智能检索', '版本回溯']},
+]
+
+const Item2 = [
+  {text: '自动化测试体系', desc: '集成多层级自动化测试能力，并提供详尽的测试报告与分析，保障产品质量，提升测试效率', img: factory3, sub: ['多级测试', '质量分析', 'GJB测试报告生成']},
+  {text: '三库统一管控', desc: '实现源代码库、制品库与知识库的关联与统一管控，保障研发资产的一致性、安全性与可追溯性', img: factory4, sub: ['三库联动', '资产溯源', '统一治理']},
+]
+
+function Factory(props) {
+
+  return (
+    <div className="home-factory home-module">
+      <h1 className="module-title">软件工厂</h1>
+      <p className="module-desc">面向军方的高效项目工程化系统管理</p>
+      <div className="factory-content1">
+        {
+          Item1.map((e, index) => {
+            return <div className={ `factory-content1-item item-${ index + 1 }` } key={ index }>
+              <img src={ e.img } alt="" />
+              <h4>{ e.text }</h4>
+              <p>{ e.desc }</p>
+              <div className="item-sub">
+                {
+                  e.sub.map((subE, subIndex) => {
+                    return <span key={ subIndex }> { subE } </span>
+                  })
+                }
+              </div>
+            </div>
+          })
+        }
+      </div>
+      <div className="factory-content2">
+        {
+          Item2.map((e, index) => {
+            return <div className={ `factory-content2-item item-${ index + 1 }` } key={ index }>
+              <div className="item-left">
+                <h4>{ e.text }</h4>
+                <p>{ e.desc }</p>
+                <div className="item-sub">
+                  {
+                    e.sub.map((subE, subIndex) => {
+                      return <span key={ subIndex }> { subE } </span>
+                    })
+                  }
+                </div>
+              </div>
+              <img src={ e.img } alt="" />
+            </div>
+          })
+        }
+      </div>
+    </div>
+  );
+}
+
+export default Factory;
--- a/src/forge/Main/projecthome/components/Forum.jsx
+++ b/src/forge/Main/projecthome/components/Forum.jsx
@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import './index.scss';
+import forum1 from '../../img/home/forum1.webp';
+import forum2 from '../../img/home/forum2.webp';
+import forum3 from '../../img/home/forum3.webp';
+
+const Item1 = [
+  {text: '结构化论坛分区', desc: '清晰划分专业版块，助您快速定位技术话题，参与高效讨论'},
+  {text: '自由开放的交流通道', desc: '支持自由发帖与互动回帖，促进知识共享与思想碰撞'},
+  {text: '发帖审核及内容治理', desc: '实施内容审核机制，维护高质量、安全有序的交流环境'},
+  {text: '需求提报及产品共创', desc: '提供官方需求提报通道，支持用户反馈需要的组件需求及提报功能建议'},
+]
+
+const Item2 = [
+  {text: '精准探讨专业技术', desc: '设有问答交流、技术专区、最佳实践等核心版块', img: forum1},
+  {text: '实现知识的共享与思想的碰撞', desc: '支持自由发帖、回帖，参与各类技术讨论', img: forum2},
+  {text: '听见每个用户的声音', desc: '官方【需求提报】通道反馈需要的组件需求与功能建议', img: forum3},
+]
+
+function forum(props) {
+
+  return (
+    <div className="home-forum home-module">
+      <h1 className="module-title">论坛交流</h1>
+      <p className="module-desc">需求探讨互动，开启开源新视野</p>
+      <div className="forum-content1">
+        {
+          Item1.map((e, index) => {
+            return <div className={ `forum-content1-item item-${ index + 1 }` } key={ index }>
+              <h4>{ e.text }</h4>
+              <p>{ e.desc }</p>
+            </div>
+          })
+        }
+      </div>
+      <div className="forum-content2">
+        {
+          Item2.map((e, index) => {
+            return <div className={ `forum-content2-item item-${ index + 1 }` } key={ index }>
+              <img src={ e.img } alt="" />
+              <div className="item-right">
+                <h4>{ e.text }</h4>
+                <p>{ e.desc }</p>
+              </div>
+            </div>
+          })
+        }
+      </div>
+    </div>
+  );
+}
+
+export default forum;
--- a/src/forge/Main/projecthome/components/Store.jsx
+++ b/src/forge/Main/projecthome/components/Store.jsx
@ -0,0 +1,83 @@
+import React, { useEffect, useState, useRef } from 'react';
+import './index.scss';
+import store1 from '../../img/home/store1.png';
+import store2 from '../../img/home/store2.png';
+import store3 from '../../img/home/store3.png';
+import store4 from '../../img/home/store4.png';
+import store5 from '../../img/home/store5.png';
+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'
+
+const Item = [
+  {text: '数据存储', img: store1},
+  {text: '元数据管理', img: store2},
+  {text: '数据同步', img: store3},
+  {text: '数据管理', img: store4},
+  {text: '快速检索', img: store5},
+  {text: '制品分发', img: store6},
+]
+
+function Store(props) {
+
+  const contentRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      // 如果元素进入视口
+      if (entry.isIntersecting) {
+        setIsVisible(true);
+        // 只触发一次动画
+        observer.disconnect(); 
+      }
+    }, {
+      threshold: 0.3 //露出 30% 时触发
+    });
+
+    if (contentRef.current) {
+      observer.observe(contentRef.current);
+    }
+
+    return () => {
+      if (contentRef.current) observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <div className="home-store home-module">
+      <h1 className="module-title">开源仓库</h1>
+      <p className="module-desc">一站式国产化软硬件体验与适配中心</p>
+      <div className="store-feature">
+        {
+          Item.map(e => {
+            return <div className="store-feature-item" key={e.text}>
+              <img src={ e.img } alt="" />
+              { e.text }
+            </div>
+          })
+        }
+      </div>
+      <div className="store-content">
+        <div className="content-left">
+          <h2>一站式国产化软硬件体验与适配中心</h2>
+          <p>提供统一可信的代码与制品存储服务，确保资产安全稳定、防丢失篡改</p>
+          <p>实现制品从创建到归档的全流程可追溯与自动化管理，提升交付效率</p>
+          <p>通过数据治理与光宇同步，实现制品快速、安全的分发与极速下载体验</p>
+        </div>
+        <div 
+          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="" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Store;
--- a/src/forge/Main/projecthome/components/index.scss
+++ b/src/forge/Main/projecthome/components/index.scss
@ -0,0 +1,504 @@
+.home-banner {
+  height: 33vw;
+  display: flex;
+  padding-left: 160px;
+  padding-top: 182px;
+  margin-top: -58px;
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+
+  // 定义动画关键帧：从高度0变到100%
+  @keyframes vertical-progress {
+    from {
+      height: 0;
+    }
+    to {
+      height: 100%;
+    }
+  }
+
+  .banner-tab {
+    font-size: 15px;
+    height: fit-content;
+    border-right: 1px solid #ffffff44;
+
+    &-item {
+      width: 148px;
+      height: 60px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #ffffff;
+
+      &-selected {
+        background-image: linear-gradient(270deg, rgba(33, 73, 212, 0.46) 0%, rgba(1, 5, 15, 0) 100%);
+        position: relative;
+
+        .item-progress {
+          position: absolute;
+          right: -1px;
+          top: 0; // 【关键】锚定顶部，确保向下生长
+          width: 2px;
+          height: 0; // 【关键】初始高度为0，由动画控制增长
+          background-image: linear-gradient(136.87deg, #5eb4ff 0%, #2149d4 100%);
+          
+          // 【关键】添加动画：5秒，线性匀速，结束后保持最后一帧状态
+          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 {
+    0% {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .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-bottom: 10px;
+      line-height: 40px;
+    }
+    p {
+      opacity: 80%;
+      font-family: alibabaReg;
+      font-size: 16px;
+    }
+    button {
+      margin-top: 15px;
+      cursor: pointer;
+      background: none; 
+      border: unset;
+      
+      width: 140px;
+      height: 36.5px;
+      font-size: 16px;
+      
+      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%;
+      }
+
+      &:hover {
+        &::before {
+          transform: rotate(180deg);
+        }
+      }
+    }
+
+  }
+}
+.home-module {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .module-title {
+    font-family: alibaba;
+    color: #091221;
+    font-size: 36px;
+    margin-bottom: 10px;
+    line-height: 50px;
+  }
+  .module-desc {
+    font-family: alibabareg;
+    color: #091221;
+    font-size: 18px;
+  }
+}
+.home-store {
+  padding-top: 68px;
+  .store-feature {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 80px;
+    &-item {
+      width: 167px;
+      height: 54px;
+      background-color: #ffffff;
+      border-radius: 27px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 60px;
+      img {
+        width: 24px;
+        margin-right: 4px;
+      }
+    }
+  }
+  .store-content {
+    width: 1600px;
+    height: 470px;
+    background-color: #ffffff;
+    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 {
+        opacity: 0;
+      }
+      30% {
+        opacity: 1;
+      }
+      60% {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    .content-right {
+      margin-left: auto;
+      width: 918px;
+      background-image: url('../../img/home/store-bg.png');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+
+      .right-img-1, .right-img-2, .right-img-3 {
+        opacity: 0; 
+        position: absolute;
+      }
+      
+      .right-img-1 {
+        width: 640px;
+        height: 438px;
+        left: 237px;
+        top: 15px;
+      }
+      .right-img-2 {
+        width: 588px;
+        height: 111px;
+        left: 181px;
+        top: 80px;
+      }
+      .right-img-3 {
+        width: 57px;
+        height: 57px;
+        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 执行
+        }
+      }
+    }
+  }
+}
+.home-chain {
+  padding-top: 200px;
+  background-image: url("../../img/home/chain-bg.webp");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  height: 913px;
+  margin-top: -100px;
+  .chain-content {
+    position: relative;
+    height: 566px;
+    width: 1600px;
+    &-img {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, 0);
+      width: 566px;
+      height: 566px;
+      background-image: url("../../img/home/chain-content.webp");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      img {
+        width: 121px;
+        height: 121px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+    &-item {
+      position: absolute;
+      width: 580px;
+      height: 104px;
+      background-color: #ffffff;
+      border-radius: 15px;
+      padding: 28px 30px;
+      display: flex;
+      z-index: 1;
+      opacity: 0;
+      img {
+        width: 48px;
+        height: 48px;
+      }
+      .item-right {
+        margin-left: 25px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        p {
+          color:#091221;
+          font-size: 14px;
+          line-height: 14px;
+        }
+      }
+    }
+    .item-1 {
+      top: 82px;
+      left: 56px;
+    }
+    .item-2 {
+      top: 82px;
+      right: 56px;
+    }
+    .item-3 {
+      top: 237px;
+      left: 0;
+    }
+    .item-4 {
+      top: 237px;
+      right: 0;
+    }
+    .item-5 {
+      top: 392px;
+      left: 56px;
+    }
+    .item-6 {
+      top: 392px;
+      right: 56px;
+    }
+    
+    &.animate-active {
+      .chain-content-item {
+        animation: fadeInUp 0.6s ease-out forwards;
+      }
+
+      // 循环生成延迟
+      @for $i from 1 through 6 {
+        .item-#{$i} {
+          animation-delay: #{$i * 0.1}s;
+        }
+      }
+    }
+  }
+}
+.home-factory {
+  margin-top: 60px;
+  background-image: url("../../img/home/factory-bg1.webp");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  p {
+    color: #091221;
+    font-size: 14px;
+    line-height: 24px;
+    margin-top: 20px;
+  }
+  .factory-content1 {
+    display: flex;
+    margin-top: 80px;
+    margin-bottom: 20px;
+    &-item {
+      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;
+      margin-right: 20px;
+      border-radius: 14px;
+      img {
+        width: 40px;
+        height: 40px;
+        margin-bottom: 40px;
+      }
+      .item-sub {
+        margin-top: 30px;
+        span {
+          padding: 3px 10px 4px 10px;
+          background-color: #f6f7fa;
+          border-radius: 4px;
+          color: #091221bd;
+          font-size: 12px;
+        }
+        span:not(:last-child) {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+  .factory-content2 {
+    display: flex;
+    &-item {
+      display: flex;
+      width: 790px;
+      margin-right: 20px;
+      background-image: linear-gradient(171.31deg,#ffffff 0%,#ffffff 52.22%,#e2e9ff 100%);
+      border-radius: 15px;
+      justify-content: space-between;
+      .item-left {
+        padding: 28px 0 28px 35px;
+      }
+      img {
+        width: 164px;
+        height: 164px;
+        flex-shrink: 0;
+      }
+      .item-sub {
+        margin-top: 20px;
+        span {
+          padding: 3px 10px 4px 10px;
+          background-color: #f6f7fa;
+          border-radius: 4px;
+          color: #091221bd;
+          font-size: 12px;
+        }
+        span:not(:last-child) {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}
+.home-forum {
+  margin-top: 90px;
+  height: 694px;
+  background-image: url("../../img/home/forum-bg.webp");
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+  background-position: center bottom;
+  .forum-content1 {
+    margin-top: 78px;
+    display: flex;
+    &-item {
+      height: 100px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      width: 356px;
+      padding: 0 54px;
+      line-height: 30px;
+      h4 {
+        font-size: 18px;
+      }
+      &:not(:last-child) {
+        border-right: 1px dashed rgba(146, 164, 201, 0.56);
+      }
+    }
+  }
+  .forum-content2 {
+    margin-top: 135px;
+    width: 1600px;
+    height: 160px;
+    background-color: #ffffff;
+    border-radius: 15px;
+    display: flex;
+    padding: 60px;
+    justify-content: space-between;
+    &-item {
+      display: flex;
+      &:not(:last-child) {
+        margin-right: 105px;
+        padding-right: 105px;
+        border-right: 1px dashed rgba(146, 164, 201, 0.56);
+      }
+      img {
+        width: 40px;
+        height: 40px;
+        flex-shrink: 0;
+        margin-right: 20px;
+      }
+      .item-right {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        p {
+          line-height: 14px;
+        }
+      }
+    }
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
--- a/src/modules/tpm/TPMIndex.css
+++ b/src/modules/tpm/TPMIndex.css
@ -29,9 +29,22 @@ body>.-task-title {
  min-width: 1200px;
  z-index: 1001;
  position: fixed;
-  background: #1B2440;
+  background: rgb(27, 36, 64);
  color: #fff;
 }
+
+.homeHeader {
+  background: rgba(27, 36, 64, 0.1);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  transition: background 0.3s ease;
+}
+
+.homeHeader.active {
+  background: rgba(27, 36, 64, 1);
+}
+
+
 .newHeaders.publicNav{
  position: absolute;
  background: rgba(27, 36, 64,0.2);