diff --git a/src/forge/Main/projecthome/v2/components/banner.jsx b/src/forge/Main/projecthome/v2/components/banner.jsx index ba5d2c52..68ce0365 100644 --- a/src/forge/Main/projecthome/v2/components/banner.jsx +++ b/src/forge/Main/projecthome/v2/components/banner.jsx @@ -2,6 +2,7 @@ import { Divider } from 'antd'; import React from 'react'; import TerminalAnimation from './terminalAnimation2'; import ActionItem from '../../../../../factory/resource/components/ActionItem'; +import './index.scss'; function Banner() { const lines1 = [ @@ -37,7 +38,7 @@ function Banner() {
{/* 主要内容区域 */}
-
+
XX可控开源社区·
@@ -48,26 +49,36 @@ function Banner() {
构建军方协同新生态
+

持续汇聚多源需求，开放共享可信资源，协同创新核心技术，聚智赋能软件生态

{/* 中央展示图 */} -
- +
+
- +
+ +
+ 持续汇聚多源需求 + +
+ +
- -
- -
-
- +
+ +
+
+ +
+ +
{/* */} diff --git a/src/forge/Main/projecthome/v2/components/communityDynamic.jsx b/src/forge/Main/projecthome/v2/components/communityDynamic.jsx index 5ccee5d7..3d076e1e 100644 --- a/src/forge/Main/projecthome/v2/components/communityDynamic.jsx +++ b/src/forge/Main/projecthome/v2/components/communityDynamic.jsx @@ -1,4 +1,4 @@ -import { Button, Divider } from 'antd'; +import { Button, Carousel, Divider } from 'antd'; import React, { Fragment, useEffect, useState } from 'react'; import { getSubDocList, getNewsDetail } from '../../../../Information/api'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; @@ -76,12 +76,12 @@ const CommunityDynamic = () => { {/* 活动和项目动态 */}
-
+
- + {/* */} 精彩活动
    - {list2.slice(0,4).map((item, index) => ( + {list2.slice(0,5).map((item, index) => (
  • {item.summary} @@ -93,12 +93,17 @@ const CommunityDynamic = () => { ))}
- + + {list2.slice(0,5).map((item, index)=>{ + return + })} + +
- + {/* */} XX项目动态
    {list3.slice(0,4).map((item, index) => ( diff --git a/src/forge/Main/projecthome/v2/components/ecosystemAlliance.jsx b/src/forge/Main/projecthome/v2/components/ecosystemAlliance.jsx index 0911e6e4..1878c6d3 100644 --- a/src/forge/Main/projecthome/v2/components/ecosystemAlliance.jsx +++ b/src/forge/Main/projecthome/v2/components/ecosystemAlliance.jsx @@ -85,7 +85,10 @@ const EcosystemAlliance = () => {
    生态聚力 智创共赢
    开放协作，与合作伙伴共拓市场蓝海。链接前沿技术，共建智慧产业新生态。赋能合作伙伴，
    共筑可持续发展平台
    - +
    diff --git a/src/forge/Main/projecthome/v2/components/index.scss b/src/forge/Main/projecthome/v2/components/index.scss new file mode 100644 index 00000000..5b019271 --- /dev/null +++ b/src/forge/Main/projecthome/v2/components/index.scss @@ -0,0 +1,58 @@ +.center-1-bk-box{ + perspective: 1200px; +} +.center-image-container { + transform-style: preserve-3d; + /* 初始状态：向前倾斜30度 */ + transform: rotateX(30deg); + /* 动画效果 */ + animation: rotateToVertical 1.2s ease-in-out forwards, cardSettle 0.8s ease-in-out 1s forwards; +} + + @keyframes rotateToVertical { + 0% { + transform: rotateX(30deg); + } + 100% { + transform: rotateX(0deg); + } + } + + @keyframes cardSettle { + 0% { + transform: + rotateX(0deg) + rotateY(0deg) + rotateZ(0deg) + translateY(0) + translateZ(0) + scale3d(1, 1, 1); + } + 30% { + transform: + rotateX(-0.8deg) + rotateY(0.1deg) + rotateZ(0.05deg) + translateY(-1px) + translateZ(1px) + scale3d(1.002, 1.002, 1.002); + } + 60% { + transform: + rotateX(0.3deg) + rotateY(-0.05deg) + rotateZ(-0.02deg) + translateY(0.3px) + translateZ(-0.3px) + scale3d(0.999, 0.999, 0.999); + } + 100% { + transform: + rotateX(0deg) + rotateY(0deg) + rotateZ(0deg) + translateY(0) + translateZ(0) + scale3d(1, 1, 1); + } + } \ No newline at end of file diff --git a/src/forge/Main/projecthome/v2/components/moreContentButton.jsx b/src/forge/Main/projecthome/v2/components/moreContentButton.jsx new file mode 100644 index 00000000..850314c8 --- /dev/null +++ b/src/forge/Main/projecthome/v2/components/moreContentButton.jsx @@ -0,0 +1,9 @@ +import { Icon } from "antd"; +import React from "react"; +import { Link } from "react-router-dom"; + +function moreContentButton({href="/", name="探索更多内容", classname="font-16 color-white but-to-right"}){ + return {name} +} + +export default moreContentButton \ No newline at end of file diff --git a/src/forge/Main/projecthome/v2/components/openSourceCollaboration.jsx b/src/forge/Main/projecthome/v2/components/openSourceCollaboration.jsx index 0181eebb..dd9c674e 100644 --- a/src/forge/Main/projecthome/v2/components/openSourceCollaboration.jsx +++ b/src/forge/Main/projecthome/v2/components/openSourceCollaboration.jsx @@ -46,7 +46,10 @@ const OpenSourceCollaboration = () => {
    5G自组网技术联盟是5G自组网技术学术交流平台（非社会团体、非实体机构），由5G自组网领域单位组成，遵循公开、公平、公正的原则，开展5G自组网技术体制与标准研究制定，促进成员单位深入交流与紧密合作，为5G自组网技术发展做出贡献
    - +
    {/* 右侧功能卡片 */} diff --git a/src/forge/Main/projecthome/v2/components/openSourceCollaboration1.jsx b/src/forge/Main/projecthome/v2/components/openSourceCollaboration1.jsx index ca05015b..799ad746 100644 --- a/src/forge/Main/projecthome/v2/components/openSourceCollaboration1.jsx +++ b/src/forge/Main/projecthome/v2/components/openSourceCollaboration1.jsx @@ -66,7 +66,10 @@ const OpenSourceCollaboration = () => {
))} - +
diff --git a/src/forge/Main/projecthome/v2/components/project.jsx b/src/forge/Main/projecthome/v2/components/project.jsx index ee500408..1c29288f 100644 --- a/src/forge/Main/projecthome/v2/components/project.jsx +++ b/src/forge/Main/projecthome/v2/components/project.jsx @@ -71,7 +71,10 @@ const RepositoryV2 = () => { ))}
- +
{/* 右侧架构图 - 使用图片 */} diff --git a/src/forge/Main/projecthome/v2/components/softwareFactory.jsx b/src/forge/Main/projecthome/v2/components/softwareFactory.jsx index a6c4fe87..826aa53f 100644 --- a/src/forge/Main/projecthome/v2/components/softwareFactory.jsx +++ b/src/forge/Main/projecthome/v2/components/softwareFactory.jsx @@ -42,7 +42,10 @@ function SoftwareFactory() {
极速模式聚焦任务 - 代码 - 制品，助力软件研发快速响应、
实现极致效率
- +
diff --git a/src/forge/Main/projecthome/v2/components/supplyChainGovernance.jsx b/src/forge/Main/projecthome/v2/components/supplyChainGovernance.jsx index c29e7997..265fb547 100644 --- a/src/forge/Main/projecthome/v2/components/supplyChainGovernance.jsx +++ b/src/forge/Main/projecthome/v2/components/supplyChainGovernance.jsx @@ -1,49 +1,52 @@ -// components/SupplyChainGovernance.jsx import React from 'react'; +import icon1 from '../image/icon25.png'; +import icon2 from '../image/icon22.png'; +import icon3 from '../image/icon26.png'; const SupplyChainGovernance = () => { const governanceItems = [ { id: 'security', - title: '供应链安全XX', - subtitle: '汇聚漏洞、恶意代码、组件三类关键信息要素', - image: '/images/supply-chain-security.png', - width: '40%' + title: '供应链安全XX库', + subtitle: '汇聚漏洞信息，恶意代码信息，组件信息三类关键供应链安全信息要素', + image: require('../image/supply-chain-security.png').default, + width: '40%', + tag: ["漏洞", "恶意代码", "组件"], + tagIcon: icon1 }, { id: 'software', title: '软件供应链治理', - subtitle: '开展软件供应链成分分析和组件安全性分析', - image: '/images/software-supply-chain.png', - width: '28.5%' + subtitle: '实施软供链成分与安全分析，形成清单并定位漏洞', + image: require('../image/software-supply-chain.png').default, + width: '28.5%', + tag: ["成分分析", "安全性分析", "软件治理"], + tagIcon: icon2 }, { id: 'risk', title: '实时风险预警', - subtitle: '根据新发布漏洞信息，实时评估和通报软件供应链风险', - image: '/images/risk-warning.png', - width: '28.5%' + subtitle: '据新漏洞评估波及范围，并示警软件供应链', + image: require('../image/risk-warning.png').default, + width: '28.5%', + tag: ["风险预警", "影响范围", "实时监测"], + tagIcon: icon1 }, { id: 'vulnerability', title: '已知漏洞监测', - subtitle: '支持15种主流编程语言的软件漏洞检测', - image: '/images/vulnerability-detection.png', - width: '28.5%' + subtitle: '提供供应链已知漏洞检测、恶意代码检测、\n克隆漏洞检测、二进制漏洞检测等多种安\n全性分析能力', + width: '48%', + tag: ["恶意代码检测", "二进制漏洞检测", "克隆漏洞检测"], + tagIcon: icon3 }, { id: 'assessment', title: '软件治理能力评估', - subtitle: '数据构建、多维分析、量化打分、结果融合的评估闭环', - image: '/images/software-assessment.png', - width: '28.5%' - }, - { - id: 'hardware', - title: '硬件供应链能力评估', - subtitle: '构建单芯片或基于SIP封装的多芯片模块的供应链供给能力评估', - image: '/images/hardware-assessment.png', - width: '40%' + subtitle: '数据构建、多维分析、量化打分、结果融合\n的软件治理能力评估体系', + width: '', + tag: ["软件治理", "能力评估", "多维分析"], + tagIcon: icon3 } ]; @@ -61,17 +64,17 @@ const SupplyChainGovernance = () => { }} > {/* 标签区域 */} -
- XXX防雷 - 20万激励金 - 多合作资源 +
+ {item.tag.map((tag, i)=>{ + return !!i ? {tag} : {tag} + })}
-
{item.title}
-
{item.subtitle}
+
{item.title}
+
{item.subtitle}
{/* 图片 */} -
- {/* {item.title} */} -
+ {item.image &&
+ {item.title} +
}
))}
diff --git a/src/forge/Main/projecthome/v2/image/banner-bk.png b/src/forge/Main/projecthome/v2/image/banner-bk.png index 98c0cd05..8125b08f 100644 Binary files a/src/forge/Main/projecthome/v2/image/banner-bk.png and b/src/forge/Main/projecthome/v2/image/banner-bk.png differ diff --git a/src/forge/Main/projecthome/v2/image/bk6.png b/src/forge/Main/projecthome/v2/image/bk6.png new file mode 100644 index 00000000..40048b94 Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/bk6.png differ diff --git a/src/forge/Main/projecthome/v2/image/icon25.png b/src/forge/Main/projecthome/v2/image/icon25.png new file mode 100644 index 00000000..fa94116b Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/icon25.png differ diff --git a/src/forge/Main/projecthome/v2/image/icon26.png b/src/forge/Main/projecthome/v2/image/icon26.png new file mode 100644 index 00000000..9c9cb958 Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/icon26.png differ diff --git a/src/forge/Main/projecthome/v2/image/img11.png b/src/forge/Main/projecthome/v2/image/img11.png index e0f66c5d..3f15c117 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 3741cf38..dff2ec3e 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 new file mode 100644 index 00000000..0565e12e Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/img13.png differ diff --git a/src/forge/Main/projecthome/v2/image/img14.png b/src/forge/Main/projecthome/v2/image/img14.png new file mode 100644 index 00000000..a5a9bfb8 Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/img14.png differ diff --git a/src/forge/Main/projecthome/v2/image/img15.png b/src/forge/Main/projecthome/v2/image/img15.png new file mode 100644 index 00000000..bb96e118 Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/img15.png differ diff --git a/src/forge/Main/projecthome/v2/image/img16.png b/src/forge/Main/projecthome/v2/image/img16.png new file mode 100644 index 00000000..e7bd06ff Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/img16.png differ diff --git a/src/forge/Main/projecthome/v2/image/img17.png b/src/forge/Main/projecthome/v2/image/img17.png new file mode 100644 index 00000000..5d09135e Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/img17.png differ diff --git a/src/forge/Main/projecthome/v2/image/risk-warning.png b/src/forge/Main/projecthome/v2/image/risk-warning.png new file mode 100644 index 00000000..af966350 Binary files /dev/null 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 new file mode 100644 index 00000000..1468a18e Binary files /dev/null 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 new file mode 100644 index 00000000..d3ba6a4d Binary files /dev/null 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 new file mode 100644 index 00000000..3e788950 Binary files /dev/null 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 new file mode 100644 index 00000000..262a046b Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/vulnerability-detection.png differ diff --git a/src/forge/Main/projecthome/v2/index.scss b/src/forge/Main/projecthome/v2/index.scss index 1bbaf92a..5f5f2af8 100644 --- a/src/forge/Main/projecthome/v2/index.scss +++ b/src/forge/Main/projecthome/v2/index.scss @@ -9,7 +9,12 @@ color: #091221; font-family: "alibabaReg"; - a:not(.blackBut):hover, a:not(.blackBut):focus{ + .object-fit-contain { + object-fit: contain; + } + + a:not(.blackBut):hover, + a:not(.blackBut):focus { color: #2149d4; } @@ -36,14 +41,15 @@ backdrop-filter: blur(24px); transition: background-color .4s ease-in-out; position: relative; - &::before{ + + &::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%); + 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; } @@ -52,15 +58,18 @@ background-color: #ffffff; color: #091221; } - span{ + + span { display: block; transition: transform 0.5s; } - &:hover{ - span{ + + &:hover { + span { transform: translateY(-36px); } - &::before{ + + &::before { left: 100%; } } @@ -91,11 +100,12 @@ } // 标题悬停：下划线从左到右滑出 - .title-border-to-right{ + .title-border-to-right { display: inline-block; max-width: 100%; position: relative; - &::after{ + + &::after { position: absolute; bottom: 0; left: 0; @@ -105,16 +115,20 @@ background-color: #2149d4; transition: all 0.5s ease; } - &:hover{ + + &:hover { padding-right: 25px; - &+.hot-tag{ + + &+.hot-tag { display: none; } } - &:hover::after{ + + &:hover::after { width: 100%; } - &:hover::before{ + + &:hover::before { content: "\e9c4"; font-family: 'iconfont'; font-weight: normal; @@ -128,10 +142,13 @@ .banner_v2 { background-image: url('./image/banner1.png'); background-size: 100% 100%; - padding-top: 160px; + padding-bottom: 150px; margin-top: -58px; height: 100vh; position: relative; + display: flex; + justify-content: center; + flex-direction: column; .main-title-v2 { font-family: "ziyouwenyihei"; @@ -139,6 +156,7 @@ display: flex; justify-content: center; align-items: center; + position: relative; .highlight-wrapper { height: 80px; @@ -176,6 +194,12 @@ -webkit-text-fill-color: transparent; background-clip: text; } + + .center-left-1 { + position: absolute; + left: 50px; + top: 75px; + } } .stats-container { @@ -193,41 +217,45 @@ overflow: hidden; // 防止光效溢出 // 添加流动光效 - &::after { - content: ""; - position: absolute; - top: 0; - left: -100%; - width: 100px; - height: 1px; - background: linear-gradient(90deg, - transparent, - rgba(255, 255, 255, 0.8), - rgba(255, 255, 255, 0.4), - transparent); - box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); - animation: flowLight 3s linear infinite; - } + // &::after { + // content: ""; + // position: absolute; + // top: 0; + // left: -100%; + // width: 100px; + // height: 1px; + // background: linear-gradient(90deg, + // transparent, + // rgba(255, 255, 255, 0.8), + // rgba(255, 255, 255, 0.4), + // transparent); + // box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); + // animation: flowLight 3s linear infinite; + // } .stat-number { font-size: 44px; font-family: "ziyouwenyihei"; } } - .center-image-container{ + + .center-image-container { position: relative; - .center-left-bk{ - background-image:linear-gradient(91.39deg,rgba(255, 255, 255, 0.04) 0%,rgba(255, 255, 255, 0.05) 30%,rgba(255, 255, 255, 0.15) 100%); - border-radius:15px; + + .center-left-bk { + background-image: linear-gradient(91.39deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.15) 100%); + border-radius: 15px; padding: 10px; position: absolute; top: 15%; left: 8%; } - .center-left-code{ + + .center-left-code { border-radius: 10px; position: relative; padding: 20px; + &::before { content: ""; position: absolute; @@ -244,48 +272,85 @@ mask-composite: exclude; } } - .center-right-bk{ - background-image:linear-gradient(178.97deg,rgba(91, 99, 187, 0.23) 0%,rgba(78, 87, 171, 0.14) 13.39%,rgba(255, 255, 255, 0) 100%); - border-radius:0px 15px 15px 15px; + + .center-right-bk { + background-image: linear-gradient(178.97deg, rgba(91, 99, 187, 0.23) 0%, rgba(78, 87, 171, 0.14) 13.39%, rgba(255, 255, 255, 0) 100%); + border-radius: 0px 15px 15px 15px; padding: 10px; position: absolute; bottom: 8%; right: 9.5%; } + + .center-left-2 { + opacity: 0.4; + position: absolute; + bottom: -6%; + left: 18%; + } + + .center-left-3 { + opacity: 0.5; + position: absolute; + top: 19%; + right: 19.1%; + } } - .center-1-bk-wrapper{ + + .center-1-bk-wrapper { display: inline-block; + &:before { animation-delay: 1s; animation: rotate 8s linear infinite; - background: conic-gradient( - from 180deg at 50% 50%, - #e3ffca 0deg, - #43bfff 45deg, - transparent 90deg, - transparent 180deg, - #e3ffca 180deg, - #43bfff 225deg, - transparent 270deg - ); + background: conic-gradient(from 180deg at 50% 50%, + #e3ffca 0deg, + #43bfff 45deg, + transparent 90deg, + transparent 180deg, + #e3ffca 180deg, + #43bfff 225deg, + transparent 270deg); z-index: 0; } } - .center-1-bk{ - - width:866px; - height:512px; - border-radius:15px; + + .center-1-bk { + display: inline-block; + width: 866px; + height: 528px; + border-radius: 15px; background-image: url('./image/banner-bk.png'); background-size: 100% 100%; - .center-1-circle{ + + .center-1-circle { display: inline-block; width: 12px; height: 12px; border-radius: 50%; - background-color:#ffffff; - &.active{ - background-color:#e5caff; + background-color: #ffffff; + + &.active { + background-color: #e5caff; + } + } + + .center-image-container-content { + height: 461px; + + background-image: url('./image/bk6.png'); + background-size: 100% 100%; + + img { + max-width: 99%; + } + + &-title { + display: inline-block; + background-image: url('./image/img14.png'); + background-size: 100% 100%; + padding: 7px 30px 14px; + line-height: normal; } } } @@ -324,6 +389,13 @@ .activity-section { width: 60%; } + .activity-section-Carousel{ + width: 400px; + border-radius: 10px; + img{ + max-width: 100%; + } + } .activity-item-v2 { justify-content: space-between; @@ -410,17 +482,10 @@ } .governance-item { - background-image: linear-gradient(156.13deg, #ffffff 0%, #ffffff 52.22%, #eef1fc 100%); + background-color: #ffffff; border-radius: 15px; - padding: 40px 35px; - - &.governance-item5 { - background-image: linear-gradient(156.13deg, #4f73f6 0%, #7babff 100%); - - div { - color: white; - } - } + padding-top: 40px; + max-height:478px; .tags { display: flex; @@ -433,8 +498,8 @@ .tag-text { font-size: 12px; - color: #666; - background-color: #f0f5ff; + color:#00a5aa; + background-color:#edfbfb; padding: 2px 8px; border-radius: 4px; } @@ -444,15 +509,72 @@ background-color: #f6f7fa; padding: 2px 8px; border-radius: 4px; - color: #091221; } } .image-container { - background-color: rgba(228, 229, 231, 0.54); - width: 80%; - height: 262px; - margin: 20px auto 0; + width: 100%; + + .item-image { + max-width: 100%; + } + } + + &.governance-item0 { + .image-container { + position: relative; + top: -157px; + } + } + + &.governance-item1 { + .tag-text { + color:#417aff; + background-color:#edf2ff; + } + } + + &.governance-item3 { + margin-top: 30px; + height: 335px; + background-image: url('./image/vulnerability-detection.png'); + background-size: auto 100%; + background-position: right; + background-repeat: no-repeat; + .tag-text { + color:#8d56da; + background-color:#f8f3ff; + } + .governance-item-title{ + padding-top: 20px; + padding-bottom: 10px; + } + } + + &.governance-item4 { + flex: 1; + margin-top: 30px; + height: 335px; + background-image: url('./image/software-assessment.png'), linear-gradient(156.13deg, #4f73f6 0%, #7babff 100%); + background-size: auto 100%; + background-position: right; + background-repeat: no-repeat; + .tag-text { + color:#8d56da; + background-color:#f8f3ff; + } + .tag-value { + color:#091221; + background-color:#ffffff; + } + .governance-item-title{ + padding-top: 20px; + padding-bottom: 10px; + } + + div { + color: white; + } } } } @@ -560,7 +682,8 @@ .software-left-item.active span { color: #258832; } - .mode-tag{ + + .mode-tag { background-image: url('./image/icon25.svg'); } } @@ -568,8 +691,8 @@ .software-left { width: 30%; margin: 50px 40px; - - .software-left-border{ + + .software-left-border { padding-left: 12px; position: relative; max-height: max-content; @@ -657,7 +780,7 @@ display: inline-block; background-color: #ffffff; border-radius: 23px; - padding: 6px 8px; + padding: 7px 6px; .tab-button { padding: 8px 15px; @@ -738,7 +861,8 @@ } } } - .partner1-list{ + + .partner1-list { gap: 20px; display: grid; grid-template-columns: repeat(5, 1fr); @@ -750,7 +874,8 @@ display: flex; align-items: center; justify-content: center; - img{ + + img { max-width: 80%; } } @@ -1144,4 +1269,14 @@ 100% { left: 100%; } +} + +@keyframes flowBottom1 { + 0% { + transform: translateY(-40px) scale(0.95) rotateX(40deg); + } + + 100% { + transform: translateY(0) scale(1) rotateX(0deg); + } } \ No newline at end of file diff --git a/src/forge/projectHome/explore/index.jsx b/src/forge/projectHome/explore/index.jsx index bc936285..2b74b8eb 100644 --- a/src/forge/projectHome/explore/index.jsx +++ b/src/forge/projectHome/explore/index.jsx @@ -1,6 +1,6 @@ -import React, { useEffect, useState } from "react"; +import React, { createRef, useEffect, useState } from "react"; import axios from "axios"; -import { Button, Divider, Input, Pagination, Popover, Spin, Tooltip } from "antd"; +import { Button, Carousel, Divider, Input, Pagination, Popover, Spin, Tooltip } from "antd"; import { Link } from "react-router-dom"; import Nodata from "../../Nodata"; import { getImageUrl } from "../../../common/UrlTool"; @@ -9,14 +9,17 @@ import RenderHtml from "../../../components/render-html"; import FeedBack from "../../../forge/Component/feedBack"; import './index.scss'; import ActionItem from "../../../factory/resource/components/ActionItem"; +import img1 from '../image/icon15.png' const { Search } = Input; function ProjectHomePage(props) { + const carouselEL = createRef() + const [current, setCurrent] = useState(0); const [cateList, setCateList] = useState(undefined); const [projectsList, setProjectsList] = useState(undefined); const [search, setSearch] = useState(undefined); const [cateID, setCateID] = useState(undefined); const [isSpin, setIsSpin] = useState(true); - const [monthList, setMonthList] = useState(undefined); + const [bannerProjects, setBannerProjects] = useState([]); const [total, setTotal] = useState(0); const [page, setPage] = useState(1); const [cateTopics, setCateTopics] = useState(undefined); @@ -51,7 +54,7 @@ function ProjectHomePage(props) { useEffect(() => { getCate(); - // getList(); + getList(); getCateTopic(); document.title = 'JY开源软件仓库'; // 获取总数 @@ -136,17 +139,9 @@ function ProjectHomePage(props) { } function getList() { - // const url = `/project_rank.json`; - const url = `/projects/banner_recommend.json` - axios.get(url, { - // params: { - // time: 30, - // page: 1, - // limit: 16 - // } - }).then(result => { + axios.get(`/projects/banner_recommend.json`).then(result => { if (result && result.data) { - setMonthList(result.data.projects); + setBannerProjects(result.data.projects); } }).catch(error => { }) } @@ -223,15 +218,40 @@ function ProjectHomePage(props) {
}
{/* 推荐仓库 */} -
推荐仓库
-
+
+ + {bannerProjects.map(i => { + const url = i.author ? `/${i.author.login}/${i.identifier}${i.author.login === "gh_mirrors" ? "/about" : "/about"}` : `` + return
+
+
+ {i.topics &&
+ {i.topics.slice(0, 2).map(item => {item.name})} +
} +
{i.name}
+ {i.description &&
{i.description}
} + +
+ +
+
+ })} + +
+
{ setPage(1); setSearch(value); }} - className="mlat custom-search" + className="mlat custom-search-v3" style={{ width: "320px", marginLeft: "auto", height: "32px", marginTop: "8px" }} allowClear + prefix={ + + } />
diff --git a/src/forge/projectHome/explore/index.scss b/src/forge/projectHome/explore/index.scss index 47273f80..8f1c9668 100644 --- a/src/forge/projectHome/explore/index.scss +++ b/src/forge/projectHome/explore/index.scss @@ -1,3 +1,52 @@ +.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; @@ -120,15 +169,15 @@ .home_project { padding: 20px 20px 60px 20px; flex: 0 0 calc(20% - 13px); - background-color:#ffffff; - border-radius:8px; + background-color: #ffffff; + border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between; width: 0; background-image: url('../image/bk5.png'); background-size: 100% 100%; - border:1px solid transparent; + border: 1px solid transparent; position: relative; box-shadow: 0 0 12px rgba(92, 102, 193, 0.05); @@ -152,7 +201,7 @@ } .download-icon { - color:#8284a4; + color: #8284a4; position: absolute; bottom: 10px; } @@ -163,55 +212,98 @@ } &:hover { - border-color:#2149d4; + border-color: #2149d4; } - .proListTopics { - display: flex; - .proListTopic { - background-color:#f7f9fd; - border-radius: 4px; - max-width: 158px; - padding: 0 10px; - height: 22px; - line-height: 22px; - color: #737a87; - &:first-of-type{ - color:#2149d4; - background-color:rgba(33, 73, 212, 0.05); - } - } - } - .detail-but-black{ + .detail-but-black { width: 88%; - color:#ffffff; - background-color:#2149d4; + color: #ffffff; + background-color: #2149d4; border: none; display: none; position: absolute; bottom: 10px; } - &:hover{ - .download-icon{ + + &:hover { + .download-icon { display: none; } - .detail-but-black{ + + .detail-but-black { display: block; } - .detail-but-black::after{ + + .detail-but-black::after { content: ''; position: absolute; top: 0; left: -150%; 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%); + background: linear-gradient(120deg, rgba(255, 255, 255, 0)0%, rgba(255, 255, 255, 0.5)50%, rgba(255, 255, 255, 0)100%); animation: flowLight 0.5s ease-in-out; } } } } + + .custom-search-v3 { + .ant-input { + border-color: rgba(130, 132, 164, 0.18); + border-radius: 6px; + } + + .ant-input-search-icon { + display: none; + } + } + } + + .project_recommend { + background-image: url('../image/bk6.png'); + background-size: 100% 100%; + border: 2px solid white; + border-radius: 15px; + height: 268px; + padding: 10px 30px 12px 50px; + + .proListTopics .proListTopic { + background-color: #ffffff; + color: #091221; + opacity: 0.8; + } + + .ant-carousel .slick-dots li button { + width: 4px; + height: 4px; + background-color: #bec3d1; + border-radius: 2px; + } + + .ant-carousel .slick-dots li.slick-active button { + background-color: #091221; + } + } + + .proListTopics { + display: flex; + + .proListTopic { + background-color: #f7f9fd; + border-radius: 4px; + max-width: 158px; + padding: 0 10px; + height: 22px; + line-height: 22px; + color: #737a87; + + &:first-of-type { + color: #2149d4; + background-color: rgba(33, 73, 212, 0.05); + } + } } } diff --git a/src/forge/projectHome/image/bk6.png b/src/forge/projectHome/image/bk6.png new file mode 100644 index 00000000..8fa0f3ce Binary files /dev/null and b/src/forge/projectHome/image/bk6.png differ diff --git a/src/forge/projectHome/image/icon15.png b/src/forge/projectHome/image/icon15.png new file mode 100644 index 00000000..5f8f6d65 Binary files /dev/null and b/src/forge/projectHome/image/icon15.png differ diff --git a/src/news/list/index.jsx b/src/news/list/index.jsx index 73d83166..8719265b 100644 --- a/src/news/list/index.jsx +++ b/src/news/list/index.jsx @@ -79,10 +79,7 @@ function List() {
{list1.slice(4).map(item => { - return
- {item.name} - -
+ return {item.name}{item.name}{item.name} })}
diff --git a/src/news/list/index.scss b/src/news/list/index.scss index 7e1e4ef7..6845d302 100644 --- a/src/news/list/index.scss +++ b/src/news/list/index.scss @@ -85,6 +85,8 @@ background-color:#ffffff; border-radius:10px; box-shadow:0px 0px 6px rgba(92, 102, 193, 0.05); + display: grid; + grid-template-columns: repeat(2, 1fr); } } .first-activity{