diff --git a/src/components/button/index.jsx b/src/components/button/index.jsx index 530fbfb99..c483afa74 100644 --- a/src/components/button/index.jsx +++ b/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 {name} +} + +// 鼠标悬停文本往上翻滚,再加背景光从左往右 +export const rollingButton = ({href="/", name="了解更多", hoverName="了解更多", classname="mt20"}) =>{ + return + {name} + {hoverName} + } \ No newline at end of file diff --git a/src/components/button/index.scss b/src/components/button/index.scss index aaf6e8889..9b6ef67d1 100644 --- a/src/components/button/index.scss +++ b/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%; + } + } } \ No newline at end of file diff --git a/src/forge/Main/projecthome/v2/components/banner.jsx b/src/forge/Main/projecthome/v2/components/banner.jsx index 09212124c..ac90aef75 100644 --- a/src/forge/Main/projecthome/v2/components/banner.jsx +++ b/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 (
{/* 主要内容区域 */} @@ -65,8 +105,26 @@ function Banner({isVisible}) {
- 持续汇聚多源需求 - + 持续汇聚多源需求 + {/* 四张banner轮播 */} +
+
+ {bannerList.map((item, index) => { + return
{item.title}
+ })} +
+
+
+ {bannerList[active].desc} + + {/* */} +
+ +
+
+
diff --git a/src/forge/Main/projecthome/v2/components/communityDynamic.jsx b/src/forge/Main/projecthome/v2/components/communityDynamic.jsx index 18423ab0e..d15306eb1 100644 --- a/src/forge/Main/projecthome/v2/components/communityDynamic.jsx +++ b/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}) => {

{firstByList1.summary}

- - 了解更多 - 了解更多 - + {rollingButton({href: `/news/${firstByList1.id}`})}
{/* 新闻列表 */} diff --git a/src/forge/Main/projecthome/v2/components/openSourceCollaboration.jsx b/src/forge/Main/projecthome/v2/components/openSourceCollaboration.jsx index d0a73b3c6..f060a8f79 100644 --- a/src/forge/Main/projecthome/v2/components/openSourceCollaboration.jsx +++ b/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 ( -
+
开源协作
- -
- {/* 左侧主内容 */} -
- - - 协作开发 - -
一站式协作平台
-
- 5G自组网技术联盟是5G自组网技术学术交流平台(非社会团体、非实体机构),由5G自组网领域单位组成,遵循公开、公平、公正的原则,开展5G自组网技术体制与标准研究制定,促进成员单位深入交流与紧密合作,为5G自组网技术发展做出贡献 -
- -
- - {/* 右侧功能卡片 */} - {/*
-
- {[...leftList, ...leftList].map((iten, index)=>{ - return ( -
- {iten.title} - {iten.title} -
{iten.description}
-
- ) - })} -
-
- {[...rightList, ...rightList].map((iten, index)=>{ - return ( -
- {iten.title} - {iten.title} -
{iten.description}
-
- ) - })} -
-
*/} +
+
+
+
+ {features.map((feature, index) => ( +
+ + + {feature.title} + +
{feature.description}
+
+ ))} + + {rollingButton({href: `/projects`, classname: 'mt10 white'})} +
+ +
+ +
-
- {collaborationFeatures.map((feature, index) => ( -
- {feature.title} - {feature.title} -
{feature.description}
- ))} + +
+ +
+ +
+ {active === 1 && + + } + {active === 2 && + + + + + + + } + +
+ +
diff --git a/src/forge/Main/projecthome/v2/components/openSourceCollaboration1.jsx b/src/forge/Main/projecthome/v2/components/openSourceCollaboration1.jsx deleted file mode 100644 index 5df9c2d31..000000000 --- a/src/forge/Main/projecthome/v2/components/openSourceCollaboration1.jsx +++ /dev/null @@ -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 ( -
-
开源协作
-
-
-
-
- {features.map((feature, index) => ( -
- - - {feature.title} - -
{feature.description}
-
- ))} - - -
- -
- -
- -
- -
- -
- -
- {active === 1 && - - } - {active === 2 && - - - - - - - } - -
- -
-
-
-
- ); -}; - -export default OpenSourceCollaboration; \ No newline at end of file diff --git a/src/forge/Main/projecthome/v2/components/project.jsx b/src/forge/Main/projecthome/v2/components/project.jsx index 76484d5bf..1388fb0e8 100644 --- a/src/forge/Main/projecthome/v2/components/project.jsx +++ b/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 = () => { ))}
- + {rollingButton({href: `/exploreStore`})}
{/* 右侧架构图 - 使用图片 */} diff --git a/src/forge/Main/projecthome/v2/components/softwareFactory.jsx b/src/forge/Main/projecthome/v2/components/softwareFactory.jsx index b14abb893..b85cafc8f 100644 --- a/src/forge/Main/projecthome/v2/components/softwareFactory.jsx +++ b/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() {
-
+
敏捷模式 全流程迭代演化 @@ -40,10 +41,7 @@ function SoftwareFactory() {
极速模式聚焦任务 - 代码 - 制品,助力软件研发快速响应、
实现极致效率
- + {rollingButton({href: `/softwareFactory`, classname: 'mt70'})}
diff --git a/src/forge/Main/projecthome/v2/components/supplyChainGovernance.jsx b/src/forge/Main/projecthome/v2/components/supplyChainGovernance.jsx index 16e87de90..db2b2f2f1 100644 --- a/src/forge/Main/projecthome/v2/components/supplyChainGovernance.jsx +++ b/src/forge/Main/projecthome/v2/components/supplyChainGovernance.jsx @@ -73,9 +73,9 @@ const SupplyChainGovernance = () => {
{item.title}
{item.subtitle}
{/* 图片 */} - {item.image &&
+ {/* {item.image &&
{item.title} -
} +
} */}
))}
diff --git a/src/forge/Main/projecthome/v2/components/terminalAnimation1.jsx b/src/forge/Main/projecthome/v2/components/terminalAnimation1.jsx index c3cf1f3cd..475d0ae41 100644 --- a/src/forge/Main/projecthome/v2/components/terminalAnimation1.jsx +++ b/src/forge/Main/projecthome/v2/components/terminalAnimation1.jsx @@ -246,11 +246,11 @@ const TerminalAnimation = ({ startAnimation = false }) => { }, [animationState]); // 包含 animationState 以确保状态更新 return ( -
+
diff --git a/src/forge/Main/projecthome/v2/image/banner2.png b/src/forge/Main/projecthome/v2/image/banner2.png new file mode 100644 index 000000000..0976a3961 Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/banner2.png differ diff --git a/src/forge/Main/projecthome/v2/image/banner3.png b/src/forge/Main/projecthome/v2/image/banner3.png new file mode 100644 index 000000000..0606aaac3 Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/banner3.png differ diff --git a/src/forge/Main/projecthome/v2/image/banner4.png b/src/forge/Main/projecthome/v2/image/banner4.png new file mode 100644 index 000000000..ebbd9e97c Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/banner4.png differ diff --git a/src/forge/Main/projecthome/v2/image/banner_img1.png b/src/forge/Main/projecthome/v2/image/banner_img1.png new file mode 100644 index 000000000..03e75a945 Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/banner_img1.png differ diff --git a/src/forge/Main/projecthome/v2/image/banner_img2.png b/src/forge/Main/projecthome/v2/image/banner_img2.png new file mode 100644 index 000000000..311a735ca Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/banner_img2.png differ diff --git a/src/forge/Main/projecthome/v2/image/banner_img3.png b/src/forge/Main/projecthome/v2/image/banner_img3.png new file mode 100644 index 000000000..0a7c38b31 Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/banner_img3.png differ diff --git a/src/forge/Main/projecthome/v2/image/bk6.png b/src/forge/Main/projecthome/v2/image/bk6.png index 40048b943..14592f420 100644 Binary files a/src/forge/Main/projecthome/v2/image/bk6.png and b/src/forge/Main/projecthome/v2/image/bk6.png differ diff --git a/src/forge/Main/projecthome/v2/image/gif.webp b/src/forge/Main/projecthome/v2/image/gif.webp new file mode 100644 index 000000000..8819476e4 Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/gif.webp differ diff --git a/src/forge/Main/projecthome/v2/image/gif1.gif b/src/forge/Main/projecthome/v2/image/gif1.gif new file mode 100644 index 000000000..98a6890e8 Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/gif1.gif differ diff --git a/src/forge/Main/projecthome/v2/image/img11.png b/src/forge/Main/projecthome/v2/image/img11.png index 3f15c1172..0e0aae069 100644 Binary files a/src/forge/Main/projecthome/v2/image/img11.png and b/src/forge/Main/projecthome/v2/image/img11.png differ diff --git a/src/forge/Main/projecthome/v2/image/img12.png b/src/forge/Main/projecthome/v2/image/img12.png index dff2ec3e9..d85d60273 100644 Binary files a/src/forge/Main/projecthome/v2/image/img12.png and b/src/forge/Main/projecthome/v2/image/img12.png differ diff --git a/src/forge/Main/projecthome/v2/image/img13.png b/src/forge/Main/projecthome/v2/image/img13.png deleted file mode 100644 index 0565e12e0..000000000 Binary files a/src/forge/Main/projecthome/v2/image/img13.png and /dev/null differ diff --git a/src/forge/Main/projecthome/v2/image/img18.png b/src/forge/Main/projecthome/v2/image/img18.png new file mode 100644 index 000000000..9ecb5fd6e Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/img18.png differ diff --git a/src/forge/Main/projecthome/v2/image/risk-warning.png b/src/forge/Main/projecthome/v2/image/risk-warning.png index af9663502..dd3704863 100644 Binary files a/src/forge/Main/projecthome/v2/image/risk-warning.png and b/src/forge/Main/projecthome/v2/image/risk-warning.png differ diff --git a/src/forge/Main/projecthome/v2/image/software-assessment.png b/src/forge/Main/projecthome/v2/image/software-assessment.png index 1468a18e6..b4775a42b 100644 Binary files a/src/forge/Main/projecthome/v2/image/software-assessment.png and b/src/forge/Main/projecthome/v2/image/software-assessment.png differ diff --git a/src/forge/Main/projecthome/v2/image/software-supply-chain.png b/src/forge/Main/projecthome/v2/image/software-supply-chain.png index d3ba6a4d2..9a8ba089b 100644 Binary files a/src/forge/Main/projecthome/v2/image/software-supply-chain.png and b/src/forge/Main/projecthome/v2/image/software-supply-chain.png differ diff --git a/src/forge/Main/projecthome/v2/image/supply-chain-security.png b/src/forge/Main/projecthome/v2/image/supply-chain-security.png index 27f627950..e732a3914 100644 Binary files a/src/forge/Main/projecthome/v2/image/supply-chain-security.png and b/src/forge/Main/projecthome/v2/image/supply-chain-security.png differ diff --git a/src/forge/Main/projecthome/v2/image/vulnerability-detection.png b/src/forge/Main/projecthome/v2/image/vulnerability-detection.png index 262a046b9..4a46ad105 100644 Binary files a/src/forge/Main/projecthome/v2/image/vulnerability-detection.png and b/src/forge/Main/projecthome/v2/image/vulnerability-detection.png differ diff --git a/src/forge/Main/projecthome/v2/index.jsx b/src/forge/Main/projecthome/v2/index.jsx index fec8612a7..d13574706 100644 --- a/src/forge/Main/projecthome/v2/index.jsx +++ b/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'; diff --git a/src/forge/Main/projecthome/v2/index.scss b/src/forge/Main/projecthome/v2/index.scss index eca836eaf..83f052680 100644 --- a/src/forge/Main/projecthome/v2/index.scss +++ b/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; } } diff --git a/src/forge/projectHome/explore/index.jsx b/src/forge/projectHome/explore/index.jsx index aa3695cb0..4a9713b46 100644 --- a/src/forge/projectHome/explore/index.jsx +++ b/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) {
}
{i.name}
{i.description &&
{i.description}
} - + {rollingButton({href: url, name: "查看详情", hoverName: "查看详情", classname: 'mt10'})}
@@ -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
-
+
{i.lesson_url && } - {/* {!i.lesson_url && } */} + {!i.lesson_url && }
{i.name}
{/* 项目标签 */} @@ -254,11 +252,6 @@ function ProjectHomePage(props) {
}
- {/* {i.description && -
- {i.description} -
-
} */} {/* {i.author && i.author.login !== "gh_mirrors" && 下载} */}
{i.description}
diff --git a/src/forge/projectHome/explore/index.scss b/src/forge/projectHome/explore/index.scss index 34f1b5e33..e69e070b3 100644 --- a/src/forge/projectHome/explore/index.scss +++ b/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 { diff --git a/src/forums/image/banner.png b/src/forums/image/banner.png index f5fac30a9..e47bbedfb 100644 Binary files a/src/forums/image/banner.png and b/src/forums/image/banner.png differ diff --git a/src/forums/list/index.jsx b/src/forums/list/index.jsx index 9b420d82d..756fed096 100644 --- a/src/forums/list/index.jsx +++ b/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) {
论坛交流·解锁头脑风暴
开源动态,社区前言新闻速递,开启开源新视野
- {forumsDoMain && } + {forumsDoMain && rollingButton({href: `${forumsDoMain}/forums/new`, name: '发布帖子', hoverName: '发布帖子', classname: "add-forums"})}
{forumsImgList && !!forumsImgList.length && {setActiveId(nextId)}}> @@ -176,25 +178,28 @@ function List(props) { const isSelected = forumTagDetail && forumTagDetail.id === item.id; const forums = item.essencePosts[0] || {}; return ( -
{setForumTagDetail(item)}}> -
-
- {forums.memo_image_info && } -
- {setForumTagDetail(item)}} className="AlignCenter pt10 pb10"> -
{item.title}
-
-
- - {forums.username} +
{setForumTagDetail(item)}}> +
+
{item.title}
+
+ {forums.memo_image_info && } +
+ +
{forums.subject}
+ + +
+ + {forums.username} +
+
+ + {forums.praises_count} + + {forums.replies_count} + {forums.published_time} +
- {/*
- - {forums.praises_count} - - {forums.replies_count} - {forums.published_time} -
*/}
diff --git a/src/forums/list/index.scss b/src/forums/list/index.scss index 171648f20..ee0c3eaea 100644 --- a/src/forums/list/index.scss +++ b/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;