黑色按钮统一样式+banner+论坛

src/components/button/index.jsx

@@ -3,9 +3,18 @@ import { Link } from "react-router-dom";
 import arrowIcon from '../../images/icon_arrow.png'
 import './index.scss';
 
+// 鼠标悬停箭头往右上角走的效果
 export const slidingArrowButton = ({href="/", name="探索更多内容", classname="font-16 font-bd", imageSrc}) =>{
   return <Link to={href} className={`slidingArrowButton ${classname}`}>
     {name}
     <span className="arrowIconBox"><img src={imageSrc || arrowIcon} className="arrowIcon"/></span>
   </Link>
+}
+
+// 鼠标悬停文本往上翻滚，再加背景光从左往右
+export const rollingButton = ({href="/", name="了解更多", hoverName="了解更多", classname="mt20"}) =>{
+  return <Link className={`rollingButton ${classname}`}to={href}>
+    <span>{name}</span>
+    <span>{hoverName}</span>
+  </Link>
 }

src/components/button/index.scss

@@ -24,4 +24,56 @@
       top: -14px;
     }
   }
+}
+
+.rollingButton {
+  display: inline-block;
+  color: #ffffff;
+  font-size: 16px;
+  background-color: #091221;
+  border-radius: 18px;
+  padding: 0 15px;
+  border: none;
+  height: 36px;
+  line-height: 36px;
+  overflow: hidden;
+  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(24px);
+  transition: background-color .4s ease-in-out;
+  position: relative;
+  &:link, &:visited, &:hover, &:focus{
+    color: #ffffff;
+  }
+
+  &::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;
+  }
+
+  &.white {
+    background-color: #ffffff;
+    color: #091221;
+  }
+
+  span {
+    display: block;
+    transition: transform 0.5s;
+  }
+
+  &:hover {
+    span {
+      transform: translateY(-36px);
+    }
+
+    &::before {
+      left: 100%;
+    }
+  }
 }

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

@@ -1,10 +1,14 @@
 import { Divider } from 'antd';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import TerminalAnimation from './terminalAnimation2';
 import ActionItem from '../../../../../factory/resource/components/ActionItem';
+import gif1 from '../image/gif1.gif';
+import gif2 from '../image/gif.webp';
 import './index.scss';
 
 function Banner({isVisible}) {
+  const [active, setActive] = useState(1);
+  
   const lines1 = [
     'if(!isVisible)',
     ' return',
@@ -34,6 +38,42 @@ function Banner({isVisible}) {
     '  }',
     '})',
   ]
+
+  const bannerList = [
+    {
+      title: "汇聚多源需求",
+      desc: "需求全景融合",
+      image: require("../image/banner2.png").default
+    },
+    {
+      title: "共享可信资源",
+      desc: "资源开放共享",
+      image: require("../image/banner3.png").default
+    },
+    {
+      title: "创新核心技术",
+      desc: "引进-协作-汇聚",
+      image: require("../image/banner4.png").default
+    }
+  ]
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActive(prevActive => {
+        return prevActive < 2 ? prevActive+1 : 0;
+      });
+    }, 4000);
+
+    // 清理定时器
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  useEffect(()=>{
+    if(isVisible){
+      setActive(0);
+    }
+  }, [isVisible])
   return (
     <div className="banner_v2 color-white home_v2_child" id="home_v2_child1">
       {/* 主要内容区域 */}
@@ -65,8 +105,26 @@ 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 mb20'>持续汇聚多源需求</span>
-                    <img src={require('../image/img13.png').default} alt='' />
+                    <span className='font-18 center-image-container-content-title'>持续汇聚多源需求</span>
+                    {/* 四张banner轮播 */}
+                    <div className='center-image-container-content-banner-box FlexAJ pt20'>
+                      <div className='center-image-container-content-banner-box-left'>
+                        {bannerList.map((item, index) => {
+                          return <div className={`center-image-container-content-banner-box-left-item ${active === index ? 'active' : ''}`}>{item.title}</div>
+                        })}
+                      </div>
+                      <div>
+                        <div className='center-image-container-content-banner-box-avtive-desc font-15'>
+                          {bannerList[active].desc}
+                          <img src={gif1} className='center-image-container-content-banner-box-avtive-desc-img'/>
+                          {/* <video autoPlay muted>
+                            <source src={gif1}/>
+                          </video> */}
+                        </div>
+                        <img src={bannerList[active].image} className='center-image-container-content-banner-box-avtive-img'/>
+                      </div>
+                    </div>
+                    <img src={gif2} alt='' className='banner_img4'/>
                   </div>
                 </ActionItem>
               </div>

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

@@ -3,7 +3,7 @@ import React, { Fragment, useEffect, useState } from 'react';
 import { getSubDocList, getNewsDetail } from '../../../../Information/api';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import moment from 'moment';
-import { slidingArrowButton } from '../../../../../components/button';
+import { rollingButton, slidingArrowButton } from '../../../../../components/button';
 
 const CommunityDynamic = ({isVisible}) => {
   const [list1, setList1] = useState([]);
@@ -57,10 +57,7 @@ const CommunityDynamic = ({isVisible}) => {
           <p className="opacity8 font-16 task-hide-2 line-normal mt5">
             {firstByList1.summary}
           </p>
-          <Link className="blackBut mt20" to={`/news/${firstByList1.id}`}>
-            <span>了解更多</span>
-            <span>了解更多</span>
-          </Link>
+          {rollingButton({href: `/news/${firstByList1.id}`})}
         </div>
 
         {/* 新闻列表 */}

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

@@ -1,91 +1,103 @@
-import React from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
+import { AlignCenter } from '../../../../Component/layout';
+import TerminalAnimation from './terminalAnimation1';
+import { Button } from 'antd';
+import { rollingButton } from '../../../../../components/button';
+const OpenSourceCollaboration = ({isVisible}) => {
+  const [selectedFeature, setSelectedFeature] = useState(null);
+  const [active, setActive] = useState(1);
 
-const OpenSourceCollaboration = () => {
-  const collaborationFeatures = [
+  const features = [
     {
-      id: 'code-hosting',
       title: '软件代码托管',
       description: '提供开源代码Git协议访问、分支管理、版本管理、许可证管理等服务',
-      icon: require('../image/icon11.png')
     },
     {
-      id: 'ecosystem',
-      title: '生态资源持续构建',
-      description: '提供持续集成流水线、供应链治理流水线、兼容测试流水线、发布流水线等服务',
-      icon: require('../image/icon12.png')
-    },
-    {
-      id: 'collaborative-improvement',
       title: '群智协同改进',
       description: '提供功能需求、漏洞治理、缺陷改进、迭代演化等开发能力',
-      icon: require('../image/icon13.png')
     },
     {
-      id: 'knowledge-sharing',
+      title: '生态资源持续构建',
+      description: '提供持续集成流水线、供应链治理流水线、兼容测试流水线、发布流水线等服务',
+    },
+    {
       title: '社区信息学习共享',
       description: '提供技术交流、开发知识库、开发训练营等服务',
-      icon: require('../image/icon14.png')
     }
   ];
-  // 将合作伙伴数据分成两部分
-  // const leftList = collaborationFeatures.slice(0, Math.ceil(collaborationFeatures.length / 2));
-  // const rightList = collaborationFeatures.slice(Math.ceil(collaborationFeatures.length / 2));
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActive(prevActive => {
+        return prevActive === 1 ? 2 : 1;
+      });
+    }, 6000);
+
+    // 清理定时器
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  useEffect(()=>{
+    if(isVisible){
+      setActive(1);
+    }
+  }, [isVisible])
+
+  const handleFeatureClick = (feature) => {
+    setSelectedFeature(selectedFeature === feature ? null : feature);
+  };
 
   return (
-    <div className="open-source-collaboration">
+    <div className={`open-source-collaboration-container home_v2_child`} id="home_v2_child3">
       <div className="title_v2">开源协作</div>
-      
-      <div className="width1600 content-wrapper-v2 df">
-        {/* 左侧主内容 */}
-        <div className="left-content-collaboration flex1 pt30">
-          <span className="badge">
-            <img src={require("../image/icon22.png")} alt='' width={13} className='mr2'/>
-            协作开发
-          </span>
-          <div className="font-24 font-bd mt15 mb15">一站式协作平台</div>
-          <div className="font-16 opacity8 mb60">
-            5G自组网技术联盟是5G自组网技术学术交流平台（非社会团体、非实体机构），由5G自组网领域单位组成，遵循公开、公平、公正的原则，开展5G自组网技术体制与标准研究制定，促进成员单位深入交流与紧密合作，为5G自组网技术发展做出贡献
-          </div>
-          <button className="blackBut">
-            <span>立即试用</span>
-            <span>立即试用</span>
-          </button>
-        </div>
-        
-        {/* 右侧功能卡片 */}
-        {/* <div className='df right-content-collaboration-1'>
-          <div className='content-collaboration-left'>
-            {[...leftList, ...leftList].map((iten, index)=>{
-              return (
-                <div key={index} className={`feature-card-left`}>
-                  <img src={iten.icon} alt={iten.title} className="mb10 mr10" width={30} />
-                  <span className="font-20 font-bd">{iten.title}</span>
-                  <div className='' style={{lineHeight: '32px'}}>{iten.description}</div>
-                </div>
-              )
-            })}
-          </div>
-          <div className='content-collaboration-right'>
-            {[...rightList, ...rightList].map((iten, index)=>{
-              return (
-                <div key={index} className={`feature-card-right`}>
-                  <img src={iten.icon} alt={iten.title} className="mb10 mr10" width={30} />
-                  <span className="font-20 font-bd">{iten.title}</span>
-                  <div className='' style={{lineHeight: '32px'}}>{iten.description}</div>
-                </div>
-              )
-            })}
-          </div>
-        </div> */}
+      <div className='open-source-collaboration-container-content'>
+        <div className="content-wrapper-bottom width1600"></div>
+        <div className="content-wrapper width1600 df color-white mb35">
+          <div className="left-panel-features-list">
+            {features.map((feature, index) => (
+              <div
+                key={index}
+                className={`feature-item pb20 font-20`}
+              >
+                <AlignCenter>
+                  <i className='iconfont icon-sijiaoxing font-15 mr10'></i>
+                  {feature.title}
+                </AlignCenter>
+                <div className="opacity8 font-14 ml24">{feature.description}</div>
+              </div>
+            ))}
+
+            {rollingButton({href: `/projects`, classname: 'mt10 white'})}
+          </div>
+
+          <div className="right-panel">
+
+            <div className="right-panel-1">
 
-        <div className="right-content-collaboration">
-          {collaborationFeatures.map((feature, index) => (
-            <div key={feature.id} className={`feature-card ${index % 2 === 0 ? 'even' : 'odd'}`}>
-              <img src={feature.icon} alt={feature.title} className="mb10 mr10" width={30} />
-              <span className="font-20 font-bd">{feature.title}</span>
-              <div className='mt10' style={{lineHeight: '36px'}}>{feature.description}</div>
             </div>
-          ))}
+
+            <div className="right-panel-2">
+
+            </div>
+
+            <div className="right-panel-3">
+              {active === 1 && <Fragment>
+                <TerminalAnimation startAnimation={isVisible}/>
+              </Fragment>}
+              {active === 2 && <Fragment>
+                <img src={require("../image/img9.png").default} alt='' className='right-img-center'/>
+                <img src={require("../image/img10.png").default} alt='' className='right-img-left'/>
+                <img src={require("../image/img8.png").default} alt='' className='right-img-right'/>
+                <img src={require("../image/img5.png")} alt='' className='right-img-1'/>
+                <img src={require("../image/img6.png").default} alt='' className='right-img-2'/>
+                <img src={require("../image/img7.png").default} alt='' className='right-img-3'/>
+              </Fragment>}
+              <img src={require('../image/img4.png').default} alt='' className='right-panel-3-img1'/>
+            </div>
+
+          </div>
         </div>
       </div>
     </div>

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

@@ -1,109 +0,0 @@
-import React, { Fragment, useEffect, useState } from 'react';
-import { AlignCenter } from '../../../../Component/layout';
-import TerminalAnimation from './terminalAnimation1';
-import { Button } from 'antd';
-const OpenSourceCollaboration = ({isVisible}) => {
-  const [selectedFeature, setSelectedFeature] = useState(null);
-  const [active, setActive] = useState(1);
-
-  const features = [
-    {
-      title: '软件代码托管',
-      description: '提供开源代码Git协议访问、分支管理、版本管理、许可证管理等服务',
-    },
-    {
-      title: '群智协同改进',
-      description: '提供功能需求、漏洞治理、缺陷改进、迭代演化等开发能力',
-    },
-    {
-      title: '生态资源持续构建',
-      description: '提供持续集成流水线、供应链治理流水线、兼容测试流水线、发布流水线等服务',
-    },
-    {
-      title: '社区信息学习共享',
-      description: '提供技术交流、开发知识库、开发训练营等服务',
-    }
-  ];
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setActive(prevActive => {
-        return prevActive === 1 ? 2 : 1;
-      });
-    }, 6000);
-
-    // 清理定时器
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  useEffect(()=>{
-    if(isVisible){
-      setActive(1);
-    }
-  }, [isVisible])
-
-  const handleFeatureClick = (feature) => {
-    setSelectedFeature(selectedFeature === feature ? null : feature);
-  };
-
-  return (
-    <div className={`open-source-collaboration-container home_v2_child`} id="home_v2_child3">
-      <div className="title_v2">开源协作</div>
-      <div className='open-source-collaboration-container-content'>
-        <div className="content-wrapper-bottom width1600"></div>
-        <div className="content-wrapper width1600 df color-white mb35">
-          <div className="left-panel-features-list">
-            {features.map((feature, index) => (
-              <div
-                key={index}
-                className={`feature-item pb20 font-20`}
-              >
-                <AlignCenter>
-                  <i className='iconfont icon-sijiaoxing font-15 mr10'></i>
-                  {feature.title}
-                </AlignCenter>
-                <div className="opacity8 font-14 ml24">{feature.description}</div>
-              </div>
-            ))}
-
-            <Button className="blackBut white mt10" href="/projects">
-              <span>了解更多</span>
-              <span>了解更多</span>
-            </Button>
-          </div>
-
-          <div className="right-panel">
-
-            <div className="right-panel-1">
-
-            </div>
-
-            <div className="right-panel-2">
-
-            </div>
-
-            <div className="right-panel-3">
-              {active === 1 && <Fragment>
-                <TerminalAnimation startAnimation={isVisible}/>
-              </Fragment>}
-              {active === 2 && <Fragment>
-                <img src={require("../image/img9.png").default} alt='' className='right-img-center'/>
-                <img src={require("../image/img10.png").default} alt='' className='right-img-left'/>
-                <img src={require("../image/img8.png").default} alt='' className='right-img-right'/>
-                <img src={require("../image/img5.png")} alt='' className='right-img-1'/>
-                <img src={require("../image/img6.png").default} alt='' className='right-img-2'/>
-                <img src={require("../image/img7.png").default} alt='' className='right-img-3'/>
-              </Fragment>}
-              <img src={require('../image/img4.png').default} alt='' className='right-panel-3-img1'/>
-            </div>
-
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default OpenSourceCollaboration;

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

@@ -1,5 +1,6 @@
 import { Button } from 'antd';
 import React from 'react';
+import { rollingButton } from '../../../../../components/button';
 
 const RepositoryV2 = () => {
   const tabs = [
@@ -74,10 +75,7 @@ const RepositoryV2 = () => {
                 ))}
               </div>
 
-              <Button className="blackBut" href='/exploreStore'>
-                <span>了解更多</span>
-                <span>了解更多</span>
-              </Button>
+              {rollingButton({href: `/exploreStore`})}
             </div>
 
             {/* 右侧架构图 - 使用图片 */}

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

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import img11 from '../image/img11.png';
 import img12 from '../image/img12.png';
 import { Button } from 'antd';
+import { rollingButton } from '../../../../../components/button';
 
 function SoftwareFactory() {
   const [active, setActive] = useState(1);
@@ -25,7 +26,7 @@ function SoftwareFactory() {
       <div className={`width1600 df software-factory-content software-factory-${active}`}>
         <div className='software-left'>
           <div className='software-left-border'>
-            <div className={`mb35 software-left-item ${active === 1 ? 'active' : ''}`}>
+            <div className={`mb60 software-left-item ${active === 1 ? 'active' : ''}`}>
               <div className='font-26 font-bd'>
                 敏捷模式
                 <span className='ml12'>全流程迭代演化<i className='iconfont icon-a-zu15512 font-14'></i></span>
@@ -40,10 +41,7 @@ function SoftwareFactory() {
               <div className='font-16'>极速模式聚焦任务 - 代码 - 制品，助力软件研发快速响应、<br />实现极致效率</div>
             </div>
           </div>
-          <Button className='blackBut mt70' href='/softwareFactory'>
-            <span>了解更多</span>
-            <span>了解更多</span>
-          </Button>
+          {rollingButton({href: `/softwareFactory`, classname: 'mt70'})}
         </div>
         <div className='flex1'>
           <img src={active === 1 ? img11 : img12} alt='' />

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

@@ -73,9 +73,9 @@ const SupplyChainGovernance = () => {
             <div className='governance-item-title font-26 font-bd mt20 mb5 pl40'>{item.title}</div>
             <div className='font-16 pl40' style={{whiteSpace: 'pre-line'}}>{item.subtitle}</div>
             {/* 图片 */}
-            {item.image && <div className="image-container">
+            {/* {item.image && <div className="image-container">
               <img src={item.image} alt={item.title} className="item-image" />
-            </div>}
+            </div>} */}
           </div>
         ))}
       </div>

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

@@ -246,11 +246,11 @@ const TerminalAnimation = ({ startAnimation = false }) => {
   }, [animationState]); // 包含 animationState 以确保状态更新
 
   return (
-    <div className='center pl15'>
+    <div className='center pt15'>
       <svg
         width="755"
-        height="420"
-        viewBox="0 0 755 420"
+        height="450"
+        viewBox="0 0 755 450"
         xmlns="http://www.w3.org/2000/svg"
         style={{ backgroundColor: 'transparent' }}
       >

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

@@ -5,7 +5,7 @@ import Banner from './components/banner';
 import CommunityDynamic from './components/communityDynamic';
 import Project from './components/project';
 import SupplyChainGovernance from './components/supplyChainGovernance';
-import OpenSourceCollaboration from './components/openSourceCollaboration1';
+import OpenSourceCollaboration from './components/openSourceCollaboration';
 import SoftwareFactory from './components/softwareFactory';
 import Forum from './components/forum';
 import EcosystemAlliance from './components/ecosystemAlliance';

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

@@ -13,8 +13,8 @@
     object-fit: contain;
   }
 
-  a:not(.blackBut):hover,
-  a:not(.blackBut):focus {
+  a:not(.rollingButton):hover,
+  a:not(.rollingButton):focus {
     color: #2149d4;
   }
 
@@ -26,55 +26,6 @@
     margin-bottom: 50px;
   }
 
-  .blackBut {
-    display: inline-block;
-    color: #ffffff;
-    font-size: 16px;
-    background-color: #091221;
-    border-radius: 18px;
-    padding: 0 15px;
-    border: none;
-    height: 36px;
-    line-height: 36px;
-    overflow: hidden;
-    -webkit-backdrop-filter: blur(24px);
-    backdrop-filter: blur(24px);
-    transition: background-color .4s ease-in-out;
-    position: relative;
-
-    &::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;
-    }
-
-    &.white {
-      background-color: #ffffff;
-      color: #091221;
-    }
-
-    span {
-      display: block;
-      transition: transform 0.5s;
-    }
-
-    &:hover {
-      span {
-        transform: translateY(-36px);
-      }
-
-      &::before {
-        left: 100%;
-      }
-    }
-  }
-
   .but-to-right {
     .icon-to-right {
       transition: transform 0.5s;
@@ -392,10 +343,8 @@
       background-image: url('./image/bk6.png'), linear-gradient(145deg, #1d36a1, #171e41);
       background-size: 100% 100%;
       border-radius: 15px;
-
-      img {
-        max-width: 95.4%;
-      }
+      padding: 0px 80px 0 50px;
+      position: relative;
 
       &-title {
         display: inline-block;
@@ -404,6 +353,63 @@
         padding: 7px 30px 14px;
         line-height: normal;
       }
+      &-banner-box{
+        width: 826px;
+        height: 460px;
+        background-image: url('./image/img18.png');
+        background-size: 100% 100%;
+        &-left{
+          flex-shrink: 0;
+          display: flex;
+          flex-direction: column;
+          gap: 30px;
+          margin-left: 10px;
+          &-item{
+            width: 118px;
+            height: 49px;
+            line-height: 49px;
+            color: #091221;
+            background-image: url('./image/banner_img1.png');
+            background-size: 100% 100%;
+            &:first-of-type, &:last-of-type{
+              margin-left: 35px;
+            }
+            &.active{
+              color: white;
+              background-image: url('./image/banner_img2.png');
+            }
+          }
+        }
+        &-avtive-desc{
+          width: 303px;
+          height: 41px;
+          background-image: url('./image/banner_img3.png');
+          background-size: 100% 100%;
+          margin: 0 auto;
+          padding-left: 15px;
+          line-height: 41px;
+          color: #091221;
+          text-align: left;
+          position: relative;
+          top: 10px;
+          &-img{
+            position: absolute;
+            width: 68px;
+            bottom: -26px;
+            left: 120px;
+          }
+        }
+        &-avtive-img{
+          width: 100%;
+        }
+      }
+      .banner_img4 {
+        position: absolute;
+        bottom: -80px;
+        right: -35px;
+        width: 260px;
+        transform: scaleX(-1);
+      }
     }
   }
 }
@@ -482,7 +488,7 @@
   border-radius: 40px;
   padding: 70px 0px 80px;
   position: relative;
-  top: -50px;
+  top: 0px;
 
   .nav-tabs-v2 {
     display: flex;
@@ -581,6 +587,9 @@
     }
 
     &.governance-item0 {
+      height:478px;
+      background-image: url('./image/supply-chain-security.png');
+      background-size: 100% 100%;
       .image-container {
         position: relative;
         top: -157px;
@@ -588,12 +597,19 @@
     }
 
     &.governance-item1 {
+      background-image: url('./image/software-supply-chain.png');
+      background-size: 100% 100%;
       .tag-text {
         color:#417aff;
         background-color:#edf2ff;
       }
     }
 
+    &.governance-item2 {
+      background-image: url('./image/risk-warning.png');
+      background-size: 100% 100%;
+    }
+
     &.governance-item3 {
       margin-top: 30px;
       height: 335px;
@@ -750,8 +766,8 @@
   }
 
   .software-left {
-    width: 30%;
-    margin: 50px 40px;
+    width: 27.7%;
+    margin: 95px 40px;
 
     .software-left-border {
       padding-left: 12px;
@@ -969,7 +985,7 @@
     justify-content: space-between;
 
     .left-panel-features-list {
-      margin: 65px 0 70px 100px;
+      margin: 93px 0 98px 100px;
     }
 
     .feature-item:not(:last-of-type) {
@@ -989,7 +1005,7 @@
 
   .right-panel {
     position: relative;
-    width: 47%;
+    width: 51%;
     margin: 25px 80px;
 
     .right-panel-1,
@@ -1059,7 +1075,7 @@
       left: 50%;
       transform: translate(-50%, -50%);
       opacity: 0;
-      animation: fadeInOut 3s 1 forwards;
+      animation: fadeInOut 3s ease-in-out forwards;
     }
 
     .right-img-left {
@@ -1069,7 +1085,7 @@
       bottom: 75px;
       left: -100px;
       opacity: 0;
-      animation: slideInLeft 1s 1 forwards;
+      animation: slideInLeft 1s ease-in-out forwards;
       animation-delay: 1s;
     }
 
@@ -1080,7 +1096,7 @@
       top: 20px;
       right: -100px;
       opacity: 0;
-      animation: slideInRight 1s 1 forwards;
+      animation: slideInRight 1s ease-in-out forwards;
       animation-delay: 1s;
     }
 
@@ -1091,7 +1107,7 @@
       top: 42%;
       left: 53%;
       opacity: 0;
-      animation: fadeInOut1 4s 1 forwards;
+      animation: fadeInOut1 4s ease-in-out forwards;
       animation-delay: 2.5s;
     }
 
@@ -1102,7 +1118,7 @@
       // right: 6.5%;
       // bottom: 18%;
       opacity: 0;
-      animation: slideInBottomRight 1s 1 forwards;
+      animation: slideInBottomRight 1s ease-in-out forwards;
       animation-delay: 2s;
     }
 
@@ -1113,7 +1129,7 @@
       // top: 5.5%;
       // left: 10%;
       opacity: 0;
-      animation: slideInTopLeft 1s 1 forwards;
+      animation: slideInTopLeft 1s ease-in-out forwards;
       animation-delay: 2s;
     }
   }

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 { rollingButton } from "../../../components/button";
 const { Search } = Input;
 function ProjectHomePage(props) {
   const carouselEL = createRef()
@@ -200,10 +201,7 @@ function ProjectHomePage(props) {
                         </div>}
                         <div className="mb10"><Link className="font-22 font-bd task-hide" to={url}>{i.name}</Link></div>
                         {i.description && <div className="opacity8 font-15 mb20">{i.description}</div>}
-                        <Button className="blackBut mt10">
-                          <span>查看详情</span>
-                          <span>查看详情</span>
-                        </Button>
+                        {rollingButton({href: url, name: "查看详情", hoverName: "查看详情", classname: 'mt10'})}
                       </div>
                       <img src={img1} width={390} className="ml40" />
                     </div>
@@ -242,9 +240,9 @@ function ProjectHomePage(props) {
                 {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" style={{ flex: 1 }}>
+                    <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" />} */}
+                      {!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>
                         {/* 项目标签 */}
@@ -254,11 +252,6 @@ function ProjectHomePage(props) {
                         </div>}
                       </div>
                     </div>
-                    {/* {i.description && <Tooltip title={i.description}>
-                      <div className="task-hide color-424 mt10">
-                        {i.description}
-                      </div>
-                    </Tooltip>} */}
                     {/* {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>

src/forge/projectHome/explore/index.scss

@@ -1,52 +1,3 @@
-.blackBut {
-  display: inline-block;
-  color: #ffffff !important;
-  font-size: 16px;
-  background-color: #091221 !important;
-  border-radius: 18px;
-  padding: 0 15px;
-  border: none;
-  height: 36px;
-  line-height: 36px;
-  overflow: hidden;
-  -webkit-backdrop-filter: blur(24px);
-  backdrop-filter: blur(24px);
-  transition: background-color .4s ease-in-out;
-  position: relative;
-
-  &::after {
-    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;
-  }
-
-  &.white {
-    background-color: #ffffff !important;
-    color: #091221 !important;
-  }
-
-  span {
-    display: block;
-    transition: transform 0.5s;
-  }
-
-  &:hover {
-    span {
-      transform: translateY(-36px);
-    }
-
-    &::after {
-      left: 100%;
-    }
-  }
-}
-
 .homepage-box {
   font-family: "alibabaReg";
   color: #091221;
@@ -167,13 +118,13 @@
       }
 
       .home_project {
-        padding: 20px 20px 60px 20px;
+        padding: 20px;
         flex: 0 0 calc(20% - 13px);
         background-color: #ffffff;
         border-radius: 8px;
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
+        justify-content: space-around;
         width: 0;
         background-image: url('../image/bk5.png');
         background-size: 100% 100%;
@@ -199,13 +150,6 @@
           margin-right: 15px;
           border-radius: 6px;
         }
-        
-
-        .detail-desc{
-          position: absolute;
-          bottom: 10px;
-          top: 0;
-        }
 
         .download-icon {
           color: #8284a4;
@@ -229,9 +173,11 @@
           color: #ffffff;
           background-color: #2149d4;
           border: none;
-          display: none;
           position: absolute;
-          bottom: 10px;
+          opacity: 0;
+          bottom: 0px;
+          transition: bottom 0.2s ease-out, opacity 0.2s ease-out;
+          overflow: hidden;
         }
 
         &:hover {
@@ -240,7 +186,8 @@
           }
 
           .detail-but-black {
-            display: block;
+            bottom: 10px;
+            opacity: 1;
           }
 
           .detail-but-black::after {

src/forums/list/index.jsx

@@ -3,17 +3,19 @@ import './index.scss';
 import { Button, Carousel, Divider, Pagination, Tag } from "antd";
 import { getForumsById, getForumSections, getForumsList } from "../api";
 import { httpUrl } from "../fetch";
-import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import { Link } from "react-router-dom";
 import icon5 from '../image/icon5.png';
 import icon6 from '../image/icon6.png';
 import icon10 from '../image/icon10.png';
 import Nodata from "../../forge/Nodata";
 import { forumSectionId } from "../static";
+import { rollingButton } from "../../components/button";
 
 function List(props) {
-  const {mygetHelmetapi} = props;
+  const {mygetHelmetapi, location} = props;
   const {common} = mygetHelmetapi || {};
   const {forums: forumsDoMain} = common || {};
+  const tagNameByState = location && location.state && location.state.name;
   const [forumsList, setForumsList] = useState([]);
   const [forumsImgList, setForumsImgList] = useState([]);
   const [hottestForumsList, setHottestForumsList] = useState([]);
@@ -28,7 +30,6 @@ function List(props) {
   const [forumListByTag, setForumListByTag] = useState([]);
   // 轮播的active
   const [activeId, setActiveId] = useState(0);
-  
 
   const sortImg1 = {
     0: require('../image/icon7.png'),
@@ -90,21 +91,22 @@ function List(props) {
           .then(updatedTags => {
             setForumTag(updatedTags);
             if (updatedTags.length > 0) {
-              setForumTagDetail(updatedTags[0]);
+              const tagByState = updatedTags.filter(i=>i.title.includes(tagNameByState))
+              setForumTagDetail(tagByState && !!tagByState.length ? tagByState[0] : updatedTags[0]);
             }
           })
           .catch(error => {
             // 降级处理
             setForumTag(childrenTags);
             if (childrenTags.length > 0) {
-              setForumTagDetail(childrenTags[0]);
+              const tagByState = updatedTags.filter(i=>i.title.includes(tagNameByState))
+              setForumTagDetail(tagByState && !!tagByState.length ? tagByState[0] : updatedTags[0]);
             }
           });
       }
     })
   }, [])
 
-
   useEffect(() => {
     if (forumTagDetail && forumTagDetail.id) {
       const forums = forumTagDetail.essencePosts[0] || {}
@@ -129,7 +131,7 @@ function List(props) {
         <div className="width1600 center">
           <div className="font-60 font-bd forums-banner-title1">论坛交流·<span className="carousel-text">解锁头脑风暴</span></div>
           <div className="font-18 mb35">开源动态，社区前言新闻速递，开启开源新视野</div>
-          {forumsDoMain && <Button className="add-forums font-18" href={`${forumsDoMain}/forums/new`}>发布帖子</Button>}
+          {forumsDoMain && rollingButton({href: `${forumsDoMain}/forums/new`, name: '发布帖子', hoverName: '发布帖子', classname: "add-forums"})}
         </div>
         <div className="width1600 df pt70">
           {forumsImgList && !!forumsImgList.length && <Carousel autoplay className='forums-list-left-Carousel' beforeChange={(_, nextId)=>{setActiveId(nextId)}}>
@@ -176,25 +178,28 @@ function List(props) {
               const isSelected = forumTagDetail && forumTagDetail.id === item.id;
               const forums = item.essencePosts[0] || {};
               return (
-                <div key={index} className={`forums-section-item flex1 ${isSelected && 'active'}`} onClick={()=>{setForumTagDetail(item)}}>
-                  <div className="font-20 font-bd center section-title mt8 mb5"></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">
-                      <a onClick={()=>{setForumTagDetail(item)}} className="AlignCenter pt10 pb10">
-                        <div className="task-hide font-22">{item.title}</div>
-                      </a>
-                      <div className="pt10 pb10">
-                        <img src={forums.image_url} alt="" className="user-img" />
-                        {forums.username}
+                <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="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>
+                          <i className="iconfont icon-jiantou3 ml5 font-20"></i>
+                        </Link>
+                        <div className="pt10 pb10">
+                          <img src={forums.image_url} alt="" className="user-img" />
+                          {forums.username}
+                        </div>
+                        <div className="opacity8 clearfix pt10 pb10">
+                          <img src={icon5} width={14} className="mb3 mr5" />
+                          {forums.praises_count}
+                          <img src={icon6} width={14} className="mb3 mr5 ml10" />
+                          {forums.replies_count}
+                          <span className="fr">{forums.published_time}</span>
+                        </div>
                       </div>
-                      {/* <div className="opacity8 clearfix pt10 pb10">
-                        <img src={icon5} width={14} className="mb3 mr5" />
-                        {forums.praises_count}
-                        <img src={icon6} width={14} className="mb3 mr5 ml10" />
-                        {forums.replies_count}
-                        <span className="fr">{forums.published_time}</span>
-                      </div> */}
                     </div>
                   </div>
                 </div>

src/forums/list/index.scss

@@ -28,17 +28,17 @@
   }
 
   .add-forums {
-    color: white;
+    width:168px;
+    height:60px;
     border-radius: 30px;
-    background-color: #091221;
     border: 4px solid #CCD3E8;
-    padding: 16px 53px;
-    display: inline;
+    line-height: 52px;
 
-    // &:hover {
-    //   border: 1px solid;
-    //   border-image: linear-gradient(313.07deg, #d62ece 0%, #1664ff 59.75%, #f9c160 100%) 1;
-    // }
+    &:hover {
+      span {
+        transform: translateY(-52px);
+      }
+    }
   }
 
   .ant-carousel{
@@ -124,20 +124,32 @@
   .forums-section-box{
     gap: 20px;
   }
-  .forums-section-item{
-    cursor: pointer;
+  .forums-section-item-box{
+    border-radius:15px;
+    border: 2px solid transparent;
     box-shadow:0px 3px 6px rgba(22, 100, 255, 0.02);
-    padding: 0px 6px 6px 6px;
-    .section-title{
-      color: transparent;
-    }
+    position: relative;
     &.active{
-      background-image:linear-gradient(139.02deg,#3f4df4 0%,#649dff 49.37%,#cbaaff 100%);
-      border-radius:15px;
-      .section-title{
-        color: white;
+      border-color: #2149d4;
+      &::before{
+        content: '\e791';
+        font-family: "iconfont";
+        position: absolute;
+        bottom: -32px;
+        font-size: 26px;
+        left: 48%;
+        color: #2149d4;
       }
     }
+    &:nth-of-type(2) .forums-section-item{
+      background-image:linear-gradient(90deg,#D7DEFF 0% 49.37%,#C7CFFF 100%);
+    }
+  }
+  .forums-section-item{
+    cursor: pointer;
+    border-radius:15px;
+    background-image:linear-gradient(90deg,#C0E9FE 0% 49.37%,#A6DDFC 100%);
+
     .memo_image_info{
       width: 100%;
       height: 160px;