增加动效

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

@@ -2,7 +2,7 @@ import { Divider } from 'antd';
 import React, { useEffect, useState } from 'react';
 import TerminalAnimation from './terminalAnimation2';
 import ActionItem from '../../../../../factory/resource/components/ActionItem';
-import gif1 from '../image/gif1.gif';
+import gif1 from '../image/icon27.png';
 import gif2 from '../image/gif.webp';
 import './index.scss';
 
@@ -44,30 +44,39 @@ function Banner({isVisible}) {
     {
       title: "汇聚多源需求",
       desc: "需求全景融合",
+      desc1: "持续汇聚多源需求",
       image: require("../image/banner2.png").default
     },
     {
       title: "共享可信资源",
       desc: "资源开放共享",
+      desc1: "开放共享可信资源",
       image: require("../image/banner3.png").default
     },
     {
       title: "创新核心技术",
       desc: "引进-协作-汇聚",
+      desc1: "协同创新核心技术",
       image: require("../image/banner4.png").default
+    },
+    {
+      title: "赋能软件生态",
+      desc: "智慧驱动生态赋能",
+      desc1: "聚智赋能软件生态",
+      image: require("../image/banner5.png").default
     }
   ]
   useEffect(() => {
     const interval = setInterval(() => {
       setActive(prevActive => {
-        return prevActive < 2 ? prevActive+1 : 0;
+        return prevActive < 3 ? prevActive+1 : 0;
       });
       setTimeout(() => {
         setActive1(prevActive => {
-          return prevActive < 2 ? prevActive+1 : 0;
+          return prevActive < 3 ? prevActive+1 : 0;
         });
-      }, 300);
-    }, 4000);
+      }, 400);
+    }, 3000);
 
     // 清理定时器
     return () => {
@@ -111,7 +120,7 @@ function Banner({isVisible}) {
               <div style={{ margin: '3px 25px' }}>
                 <ActionItem className="center-1-bk-wrapper" padding="2px" borderRadius="15px">
                   <div className='center-image-container-content'>
-                    <span className='font-18 center-image-container-content-title'>持续汇聚多源需求</span>
+                    <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'>

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

@@ -345,6 +345,7 @@
       border-radius: 15px;
       padding: 0px 80px 0 50px;
       position: relative;
+      overflow: hidden;
 
       &-title {
         display: inline-block;
@@ -364,6 +365,8 @@
           flex-direction: column;
           gap: 30px;
           margin-left: 10px;
+          position: relative;
+          left: 15px;
           &-item{
             width: 118px;
             height: 49px;
@@ -391,16 +394,16 @@
           color: #091221;
           text-align: left;
           position: relative;
-          top: 15px;
+          top: 17px;
           &-img{
             position: absolute;
-            width: 68px;
-            bottom: -26px;
-            left: 120px;
+            width: 40px;
+            bottom: -19px;
+            left: 130px;
           }
         }
         &-avtive-img{
-          width: 105%;
+          width: 108%;
         }
       }
       .banner_img4 {
@@ -801,6 +804,7 @@
         width: 1.5px;
         height: 83%;
         background-color: rgba(9, 18, 33, 1);
+        animation: height0-83 5.9s linear 0s infinite;
       }
     }
 
@@ -1386,4 +1390,14 @@
   100% {
     height: 74%;
   }
+}
+
+@keyframes height0-83 {
+  0% {
+    height: 0;
+  }
+
+  100% {
+    height: 83%;
+  }
 }

src/forge/projectHome/explore/index.jsx

@@ -15,6 +15,7 @@ import img3 from '../image/icon10.png';
 import img4 from '../image/icon11.png';
 import img5 from '../image/icon12.png';
 import img6 from '../image/icon13.png';
+import img16 from '../image/icon16.png';
 import { rollingButton } from "../../../components/button";
 const { Search } = Input;
 function ProjectHomePage(props) {
@@ -61,7 +62,7 @@ function ProjectHomePage(props) {
 
   useEffect(() => {
     getCate();
-    getList();
+    // getList();
     getCateTopic();
     document.title = '菌用开源软件仓库';
     // 获取总数
@@ -134,8 +135,14 @@ function ProjectHomePage(props) {
   return <div className="homepage-box">
     {/* banner区域内容 */}
     <div className="width1600 mb40">
-      <div className="font-60 p_h_title center pt70">开源软件仓库·<span className="p_h_title_text">护航菌事数智</span></div>
-      <div className="font-18 center mb40">汇聚全球顶尖开源力量，构建安全、协同、创新的软件生态，赋能菌事数字化转型与智能化升级</div>
+      <div className="homepage-box-title">
+        <span className="font-12 homepage-box-title-tag"><img src={img16} width={13} className="mr5"/>技术赋能</span>
+        <div className="font-40 p_h_title mt10">开源软件仓库</div>
+        <div className="font-40 p_h_title">护航菌事<span className="p_h_title_text">数智发展</span></div>
+        <div className="font-18 mb40 mt10">汇聚全球顶尖开源力量，构建安全、协同、创新的软件生态</div>
+      </div>
+      {/* <div className="font-60 p_h_title pt70">·<span className="p_h_title_text">护航菌事数智</span></div> */}
+      {/* <div className="font-18 mb40">汇聚全球顶尖开源力量，构建安全、协同、创新的软件生态，赋能菌事数字化转型与智能化升级</div> */}
       <div className="df">
         <div className="color-white project_count flex1 FlexAJ" style={{justifyContent: count.length > 3 ? 'space-between' : 'space-around'}}>
           {count.map((item, index)=>{
@@ -156,7 +163,7 @@ function ProjectHomePage(props) {
         </div>
       </div>
     </div>
-    <div className="homepage_content_v3 pt40">
+    <div className="homepage_content_v3 pt30">
       <div className="width1600">
         <div className="AlignCenter">
           <div className="cate_list_box">
@@ -231,37 +238,39 @@ function ProjectHomePage(props) {
                 style={{ width: "320px", marginLeft: "auto", height: "32px", marginTop: "8px" }}
                 allowClear
                 prefix={<span className="search_icon">
-                  <i className="iconfont icon-sousuo5 font-14"></i>
+                  <i className="iconfont icon-sousuo6 font-14"></i>
                 </span>}
               />
             </div>
             <Spin spinning={isSpin}>
-              {projectsList && !!projectsList.length ? <div className={`df home_project_list ${!topicsLength ? 'sixItemBox' : ''}`}>
-                {projectsList.map(i => {
-                  const url = i.author ? `/${i.author.login}/${i.identifier}${i.author.login === "gh_mirrors" ? "/about" : "/about"}` : ``
-                  return <div className="home_project">
-                    <div className="df a-i-center">
-                      {i.lesson_url && <img src={getImageUrl(`${i.lesson_url}`)} alt="" className="author_img" />}
-                      {!i.lesson_url && <img src={require("../image/icon14.png").default} alt="" className="author_img" />}
-                      <div className="flex1">
-                        <Link to={url}><div className="task-hide font-16 color-dark hover-light" style={{ marginTop: '-5px' }} title={i.name}>{i.name}</div></Link>
-                        {/* 项目标签 */}
-                        {i.topics && <div className='proListTopics mt3'>
-                          {/* {i.author && i.author.login === "gh_mirrors" && i.topics && !i.topics.length && <span className='proListTopic mr15 font-13 task-hide'>华中科技大学</span>} */}
-                          {i.topics.slice(0, 2).map(item => <Tooltip title={item.name}><Link to={`/explore/topic/${item.id}/${encodeURIComponent(item.name)}`} className='proListTopic mr15 font-13 task-hide'>{item.name}</Link></Tooltip>)}
-                        </div>}
+              <div className="home_project_list_box">
+                {projectsList && !!projectsList.length ? <div className={`df home_project_list ${!topicsLength ? 'sixItemBox' : ''}`}>
+                  {projectsList.map(i => {
+                    const url = i.author ? `/${i.author.login}/${i.identifier}${i.author.login === "gh_mirrors" ? "/about" : "/about"}` : ``
+                    return <div className="home_project">
+                      <div className="df a-i-center mb5">
+                        {i.lesson_url && <img src={getImageUrl(`${i.lesson_url}`)} alt="" className="author_img" />}
+                        {/* {!i.lesson_url && <img src={require("../image/icon14.png").default} alt="" className="author_img" />} */}
+                        <div className="flex1">
+                          <Link to={url}><div className="task-hide font-16 color-dark hover-light" style={{ marginTop: '-5px' }} title={i.name}>{i.name}</div></Link>
+                        </div>
                       </div>
+                      {/* {i.author && i.author.login !== "gh_mirrors" && <a className="download-icon mt10" href={url}><i className="iconfont icon-a-xiazai3 font-12 mr5 color-dark"></i>下载</a>} */}
+                      {i.description && <div className="task-hide font-13 detail-desc">{i.description}</div>}
+                      {/* 项目标签 */}
+                      {i.topics && <div className='proListTopics mt12'>
+                        {/* {i.author && i.author.login === "gh_mirrors" && i.topics && !i.topics.length && <span className='proListTopic mr15 font-13 task-hide'>华中科技大学</span>} */}
+                        {i.topics.slice(0, 2).map(item => <Tooltip title={item.name}><Link to={`/explore/topic/${item.id}/${encodeURIComponent(item.name)}`} className='proListTopic mr15 font-13 task-hide'>{item.name}</Link></Tooltip>)}
+                      </div>}
+                      <Button className="detail-but-black" href={url}>查看详情</Button>
                     </div>
-                    {/* {i.author && i.author.login !== "gh_mirrors" && <a className="download-icon mt10" href={url}><i className="iconfont icon-a-xiazai3 font-12 mr5 color-dark"></i>下载</a>} */}
-                    <div className="task-hide font-13 mt10 detail-desc">{i.description}</div>
-                    <Button className="detail-but-black" href={url}>查看详情</Button>
-                  </div>
-                })}
-              </div> : <Nodata _html="暂无数据" />}
+                  })}
+                </div> : <Nodata _html="暂无数据" />}
+              </div>
             </Spin>
-            {cateID && <Pagination pageSize={LIMIT} total={total} hideOnSinglePage={true} current={page} onChange={(page) => { setPage(page) }} className='center mt30' />}
           </div>
         </div>
+        {cateID && <Pagination pageSize={LIMIT} total={total} hideOnSinglePage={true} current={page} onChange={(page) => { setPage(page) }} className='edu-txt-right mt30' />}
       </div>
     </div>
   </div>

src/forge/projectHome/explore/index.scss

@@ -7,9 +7,21 @@
   background-color: #f1f6fd;
   padding-bottom: 200px;
 
+  .homepage-box-title{
+    padding-left: 120px;
+    padding-top: 67px;
+  }
+
+  .homepage-box-title-tag{
+    padding: 5px 10px;
+    color:#ffffff;
+    background-image:linear-gradient(90.73deg,#816af2 0%,#ac97f9 100%);
+    border-radius:10px 0px 10px 0px;
+  }
+
   .p_h_title {
     font-family: "DouyinSansBold";
-    letter-spacing: 4px;
+    letter-spacing: 1px;
     line-height: normal;
   }
 
@@ -38,6 +50,7 @@
   }
 
   .feedBackBox {
+    width:374px;
     padding: 17px 30px;
     background-image: linear-gradient(145.03deg, #f2e8e9 0%, #f2e8e9 19.38%, #a7b0ff 76.71%, #b3a7ff 100%);
     border-radius: 15px;
@@ -53,6 +66,8 @@
     line-height: 32px;
     color: #091221;
     transition: all 0.3s ease;
+    overflow: hidden;
+    position: relative;
 
     &:hover,
     &:active,
@@ -60,29 +75,65 @@
       color: #ffffff;
       background-color: #091221;
     }
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(120deg, rgba(255, 255, 255, 0)0%, rgba(255, 255, 255, 0.5)50%, rgba(255, 255, 255, 0)100%);
+      transition: left 0.5s ease-in-out;
+      transition-delay: 0.5s;
+    }
+    &:hover::before {
+      left: 100%;
+    }
   }
 
   .homepage_content_v3 {
-    background-image: linear-gradient(179.88deg, #ffffff 0%, #F3F7FD 100%);
+    background-image:linear-gradient(179.88deg,#ffffff 0%,rgba(255, 255, 255, 0.62) 16.1%,rgba(255, 255, 255, 0) 100%);
     border-radius: 40px 40px 0 0;
 
     .cate_list_box {
       display: flex;
       gap: 15px;
       flex-wrap: wrap;
+      background-color:#ffffff;
+      border-radius:10px;
+      box-shadow:0px 0px 6px rgba(92, 102, 193, 0.05);
+      padding: 20px 30px;
+      background-image: url('../image/icon17.png');
+      background-size: 100% 100%;
     }
 
     .cate_item {
       cursor: pointer;
-      padding: 2px 25px;
-      background-color: #f5f7fb;
+      padding: 2px 15px;
+      background-color: rgba(255, 255, 255, 0.7);
       border-radius: 16px;
+      position: relative;
+      overflow: hidden;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(120deg, rgba(255, 255, 255, 0)0%, rgba(255, 255, 255, 0.5)50%, rgba(255, 255, 255, 0)100%);
+        transition-delay: 0.5s;
+      }
 
       &.active {
         font-weight: normal;
         font-size: 16px;
         color: #ffffff;
         background-color: #091221;
+        &::before {
+          left: 100%;
+          transition: left 0.5s ease-in-out;
+        }
       }
     }
 
@@ -91,44 +142,53 @@
       background-color: #ffffff;
       border-radius: 10px;
       box-shadow: 0px 0px 6px rgba(92, 102, 193, 0.05);
-      padding: 25px 10px;
+      padding: 25px 0px;
 
       li {
         color: #42464e;
         font-size: 16px;
-        padding: 10px 20px;
+        padding: 10px 30px;
         cursor: pointer;
 
         &.active {
           background-color: #f7f9fd;
-          border-radius: 6px;
           font-weight: bold;
+          border-left: 2px solid #091221;
         }
       }
     }
 
+    .home_project_list_box{
+      background-color:#ffffff;
+      border-radius:10px;
+      box-shadow:0px 0px 6px rgba(92, 102, 193, 0.05);
+      padding: 20px;
+      min-height: 50vh;
+    }
     .home_project_list {
       flex-wrap: wrap;
       gap: 15px;
+      
 
       &.sixItemBox {
         .home_project {
-          flex: 0 0 calc(16.6% - 13px);
+          flex: 0 0 calc(16.6% - 12px);
         }
       }
 
       .home_project {
-        padding: 20px;
-        flex: 0 0 calc(20% - 13px);
+        min-height:88px;
+        padding: 15px;
+        flex: 0 0 calc(20% - 12px);
         background-color: #ffffff;
-        border-radius: 8px;
+        border-radius: 10px;
         display: flex;
         flex-direction: column;
-        justify-content: space-around;
+        // justify-content: space-around;
         width: 0;
         background-image: url('../image/bk5.png');
         background-size: 100% 100%;
-        border: 1px solid transparent;
+        border: 1px solid #f1f6ff;
         position: relative;
         box-shadow: 0 0 12px rgba(92, 102, 193, 0.05);
 
@@ -163,7 +223,7 @@
         }
 
         &:hover {
-          border-color: #2149d4;
+          // border-color: #2149d4;
         }
 
 
@@ -171,7 +231,7 @@
           line-height: 32px;
           width: 85%;
           color: #ffffff;
-          background-color: #2149d4;
+          background-color: #091221;
           border: none;
           position: absolute;
           opacity: 0;
@@ -206,13 +266,17 @@
 
     .custom-search-v3 {
       .ant-input {
-        border-color: rgba(130, 132, 164, 0.18);
-        border-radius: 6px;
+        border-color: rgba(65, 84, 241, 0.13);
+        border-radius: 17px;
+        box-shadow:0px 0px 6px rgba(92, 102, 193, 0.07);
       }
 
       .ant-input-search-icon {
         display: none;
       }
+      .icon-sousuo5{
+        color: #091221;
+      }
     }
     .tipByCate {
       padding: 10px 30px;

src/forums/detail/index.jsx

@@ -151,9 +151,8 @@ function detail(props) {
               </span>
             </div>
           </div>
-          <div className="forums-white-bk mt20 pt15 pb40">
-            <span className="font-22 pl25 pr25">作者最近文章</span>
-            <Divider style={{borderColor: 'rgba(130, 132, 164, 0.18)', margin: '10px 0 5px'}}/>
+          <div className="forums-white-bk mt20 pb40">
+            <span className="forums-white-bk-title font-18"><img src={require("../image/icon16.png")} width={25} className="mr8"/>作者最近文章</span>
             {recent_memos.map((item, index) => (
               <div className="font-15 forums-author-recent-item" key={index}>
                 <div className="AlignCenter">

src/forums/detail/index.scss

@@ -125,6 +125,12 @@
       }
     }
 }
+.forums-white-bk-title{
+  display: block;
+  background-image: url('../image/bk2.png');
+  background-size: 100% 100%;
+  padding: 14px 25px;
+}
 
 @keyframes gifEmoji {
   from {

src/forums/list/index.jsx

@@ -140,7 +140,7 @@ function List(props) {
           <div className="font-18 mb35">开源动态，社区前言新闻速递，开启开源新视野</div>
           {forumsDoMain && rollingButton({href: `${forumsDoMain}/forums/new`, name: '发布帖子', hoverName: '发布帖子', classname: "add-forums"})}
         </div>
-        <div className="width1600 df pt70">
+        <div className="width1600 df pt50">
           {forumsImgList && !!forumsImgList.length && <Carousel autoplay className='forums-list-left-Carousel' beforeChange={(_, nextId)=>{setActiveId(nextId)}}>
             {forumsImgList.map((item, index)=>{
               return <img src={httpUrl + item.memo_image_info.url} alt=''key={index}/>
@@ -187,12 +187,12 @@ function List(props) {
               return (
                 <div key={index} className={`forums-section-item-box flex1 ${isSelected && 'active'}`} onClick={()=>{setForumTagDetail(item)}}>
                   <div className="forums-section-item">
-                    <div className="font-20 font-bd center section-title pt8 pb5">{item.title}</div>
+                    <div className="font-22 center section-title pt8 pb5">{item.title}</div>
                     <div className="forums-section-item-content">
                       {forums.memo_image_info && <img src={httpUrl + forums.memo_image_info.url} alt="" className="memo_image_info"/>}
                       <div className="pl20 pr20">
                         <Link to={`/forums/${forums.id}`} className="AlignCenter pt10 pb10">
-                          <div className="task-hide font-22">{forums.subject}</div>
+                          <div className="task-hide font-20">{forums.subject}</div>
                           <i className="iconfont icon-jiantou3 ml5 font-20"></i>
                         </Link>
                         <div className="pt10 pb10">

src/forums/list/index.scss

@@ -118,7 +118,9 @@
   }
 
   .hot-forums-list-header {
-    padding: 12px 25px 0 25px;
+    padding: 12px 25px 10px 25px;
+    background-image: url('../image/bk2.png');
+    background-size: 100% 100%;
   }
 
   .forums-list2 {
@@ -148,20 +150,28 @@
     &.active{
       border-color: #2149d4;
       &::before{
-        content: '\e880';
-        font-family: "iconfont";
+        width: 104%;
+        height: 104%;
+        content: '';
         position: absolute;
-        bottom: -20px;
-        font-size: 13px;
-        left: 48%;
-        color: #2149d4;
+        background-color: rgb(33 72 212 / 20%);
+        top: -2%;
+        left: -2%;
+        border-radius:15px;
       }
     }
-    &:nth-of-type(2) .forums-section-item, &:nth-of-type(4) .forums-section-item{
+    &:nth-of-type(3) .forums-section-item{
       background-image:linear-gradient(90deg,#D7DEFF 0% 49.37%,#C7CFFF 100%);
     }
+    &:nth-of-type(2) .forums-section-item{
+      background-image:linear-gradient(90deg,#C7E3FF 0% 49.37%,#B2D6FF 100%);
+    }
+    &:nth-of-type(4) .forums-section-item{
+      background-image:linear-gradient(90deg,#DCF6D6 0% 49.37%,#C8FFDF 100%);
+    }
   }
   .forums-section-item{
+    position: relative;
     cursor: pointer;
     border-radius:15px;
     background-image:linear-gradient(90deg,#C0E9FE 0% 49.37%,#A6DDFC 100%);

src/news/detail/index.jsx

@@ -79,9 +79,8 @@ function detail(props) {
         </div>
         {/* 右侧 */}
         <div className="news-detail-right">
-          <div className="news-white-bk pt15 pb40">
-            <span className="font-22 pl25 pr25">栏目新闻</span>
-            <Divider style={{ borderColor: 'rgba(130, 132, 164, 0.18)', margin: '10px 0 5px' }} />
+          <div className="news-white-bk pb40">
+            <span className="news-white-bk-title font-18"><img src={require("../image/icon15.png")} width={25} className="mr8"/>栏目新闻</span>
             {list1.map((item, index) => (
               <div className={`font-15 news-author-recent-item ${id == item.id ? 'acitve' : ''}`} key={index}>
                 <div className="AlignCenter">

src/news/detail/index.scss

@@ -141,4 +141,10 @@
   .commentContentRight .contentHtml{
     margin-top: 20px;
   }
+}
+.news-white-bk-title{
+  display: block;
+  background-image: url('../image/bk9.png');
+  background-size: 100% 100%;
+  padding: 14px 25px;
 }

src/news/list/index.jsx

@@ -17,6 +17,8 @@ function List() {
   const [firstActivity, setFirstActivity] = useState(undefined);
   const [list3, setList3] = useState([]);
   const firstDynamics = list3.slice(0,2);
+  const [isShowAll, setIsShowAll] = useState(false);
+  const list1ByShowAll = isShowAll ? list1.slice(4) : list1.slice(4, 10)
 
   useEffect(() => {
     document.title = "社区动态";
@@ -81,13 +83,16 @@ function List() {
           })}
         </div>
         <div className="others-news mt20">
-          {list1.slice(4).map(item => {
-            return <Link key={item.id} to={`/news/${item.id}`} className="font-18 task-hide community-news-item">
-              <Badge color="#466aff"/>
+          {list1ByShowAll.map(item => {
+            return <Link key={item.id} to={`/news/${item.id}`} className="font-18 task-hide community-news-item pl5">
+              <Badge color="#091221" className="news_item_badge"/>
               {item.name}
             <i className="iconfont icon-jiantou3 ml5 font-17"></i></Link>
           })}
         </div>
+        <div className="center mt15">
+          {list1.length > 4 && <a className="font-16 show-more-button" onClick={()=>{setIsShowAll(!isShowAll)}}>{isShowAll ? '收起' : '查看更多'}<i className={`iconfont ${isShowAll ? 'icon-xiangshangyidong' : 'icon-xiangxiayidong'} font-15 ml5`}></i></a>}
+        </div>
       </div>
       {/* 精彩活动 */}
       <div className="activities-box pb80">
@@ -135,8 +140,8 @@ function List() {
                 </div>
                 <div className="font-15 opacity8 task-hide-2">{item.summary}</div>
               </div>
-            })  
-}
+            })
+            }
           </div>
         </div>
       </div>

src/news/list/index.scss

@@ -30,7 +30,7 @@
 }
 .community-news-1{
   margin-top: 60px;
-  padding: 70px 30px 35px 30px;
+  padding: 70px 30px 25px 30px;
   border-radius: 10px;
   background-image: url('../image/bk5.png');
   background-size: 100% 100%;
@@ -91,6 +91,12 @@
     grid-template-columns: repeat(2, 1fr);
     gap: 12px 30px;
   }
+  .show-more-button{
+    color: #091221;
+    &:hover{
+      color: #2149d4;
+    }
+  }
 }
 .first-activity{
   height: 231px;
@@ -172,4 +178,19 @@
     align-items: flex-start;
     justify-content: space-between;
   }
+}
+.news_item_badge{
+  .ant-badge-status-dot{
+    position: relative;
+    &::before{
+      content: '';
+      position: absolute;
+      top: -2px;
+      left: -2px;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: #0912213b;
+    }
+  }
 }