增加动效和推荐内容展示
This commit is contained in:
谢思
parent
5c75e7891c
commit
bf48b2e264
|
|
@ -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() {
|
|||
<div className="banner_v2 color-white">
|
||||
{/* 主要内容区域 */}
|
||||
<div className="center">
|
||||
<div className="main-title-v2">
|
||||
<div className="main-title-v2 width1600">
|
||||
XX可控开源社区·
|
||||
<div className="highlight-wrapper">
|
||||
<div className="text-carousel">
|
||||
|
|
@ -48,26 +49,36 @@ function Banner() {
|
|||
<div className="carousel-text">构建军方协同新生态</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src={require('../image/img15.png').default} alt='' width={342} className='center-left-1'/>
|
||||
</div>
|
||||
<p className="font-18 mb40" style={{ marginTop: '-12px' }}>持续汇聚多源需求，开放共享可信资源，协同创新核心技术，聚智赋能软件生态</p>
|
||||
|
||||
{/* 中央展示图 */}
|
||||
<div className="center-image-container width1600">
|
||||
<ActionItem className="center-1-bk-wrapper" padding="1px" borderRadius="15px">
|
||||
<div className='center-1-bk-box'>
|
||||
<div className="center-image-container width1600">
|
||||
<div className='center-1-bk'>
|
||||
<div className='edu-txt-left pl25 pt8'>
|
||||
<span className='center-1-circle'></span>
|
||||
<span className='center-1-circle active ml8 mr8'></span>
|
||||
<span className='center-1-circle'></span>
|
||||
</div>
|
||||
<img src={require('../image/img10.png').default}/>
|
||||
<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='' />
|
||||
</div>
|
||||
</ActionItem>
|
||||
</div>
|
||||
</div>
|
||||
</ActionItem>
|
||||
<div className='center-left-bk'>
|
||||
<TerminalAnimation lines={lines1} width={197} height={280} class_name="center-left-code"/>
|
||||
</div>
|
||||
<div className='center-right-bk'>
|
||||
<TerminalAnimation lines={lines2} width={197} height={186}/>
|
||||
<div className='center-left-bk'>
|
||||
<TerminalAnimation lines={lines1} width={210} height={280} class_name="center-left-code" />
|
||||
</div>
|
||||
<div className='center-right-bk'>
|
||||
<TerminalAnimation lines={lines2} width={197} height={186} />
|
||||
</div>
|
||||
<img src={require('../image/img16.png')} alt='' width={1} className='center-left-2'/>
|
||||
<img src={require('../image/img17.png')} alt='' width={1} className='center-left-3'/>
|
||||
</div>
|
||||
</div>
|
||||
{/* */}
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
|||
{/* 活动和项目动态 */}
|
||||
<div className="df width1600 mt20 activities-container">
|
||||
<div className="padding20-30 activity-section mr20">
|
||||
<div className='df'>
|
||||
<div className='FlexAJ'>
|
||||
<div className='flex1 mr20'>
|
||||
<img src={require('../image/icon2.png')} alt='' width={30} className='mb10 mr10' />
|
||||
{/* <img src={require('../image/icon2.png')} alt='' width={30} className='mb10 mr10' /> */}
|
||||
<span className='font-24 font-bd'>精彩活动</span>
|
||||
<ul>
|
||||
{list2.slice(0,4).map((item, index) => (
|
||||
{list2.slice(0,5).map((item, index) => (
|
||||
<li key={index} className="activity-item-v2 df">
|
||||
<span className="font-16">
|
||||
<Link to={`/news/${firstByList1.id}`} className="title-border-to-right">{item.summary}</Link>
|
||||
|
|
@ -93,12 +93,17 @@ const CommunityDynamic = () => {
|
|||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<img src={require('../image/img2.png').default} alt='' width={392} />
|
||||
<Carousel autoplay className='activity-section-Carousel'>
|
||||
{list2.slice(0,5).map((item, index)=>{
|
||||
return <img src={item.headImg} alt=''key={index}/>
|
||||
})}
|
||||
</Carousel>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="padding20-30 flex1 project-section">
|
||||
<img src={require('../image/icon3.png')} alt='' width={30} className='mb10 mr10' />
|
||||
{/* <img src={require('../image/icon3.png')} alt='' width={30} className='mb10 mr10' /> */}
|
||||
<span className='font-24 font-bd'>XX项目动态</span>
|
||||
<ul>
|
||||
{list3.slice(0,4).map((item, index) => (
|
||||
|
|
|
|||
|
|
@ -85,7 +85,10 @@ const EcosystemAlliance = () => {
|
|||
<div className='edu-txt-left width1600 mb100'>
|
||||
<div className='font-24 font-bd mb3'>生态聚力 智创共赢</div>
|
||||
<div className='font-16 opacity8'>开放协作，与合作伙伴共拓市场蓝海。链接前沿技术，共建智慧产业新生态。赋能合作伙伴，<br />共筑可持续发展平台</div>
|
||||
<Button className='mt20 blackBut'>了解更多</Button>
|
||||
<Button className='mt20 blackBut'>
|
||||
<span>了解更多</span>
|
||||
<span>了解更多</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className='width1600 pt70'>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 <Link to={href} className={classname}>{name}<Icon type="right" className="font-15 icon-to-right"/></Link>
|
||||
}
|
||||
|
||||
export default moreContentButton
|
||||
|
|
@ -46,7 +46,10 @@ const OpenSourceCollaboration = () => {
|
|||
<div className="font-16 opacity8 mb60">
|
||||
5G自组网技术联盟是5G自组网技术学术交流平台（非社会团体、非实体机构），由5G自组网领域单位组成，遵循公开、公平、公正的原则，开展5G自组网技术体制与标准研究制定，促进成员单位深入交流与紧密合作，为5G自组网技术发展做出贡献
|
||||
</div>
|
||||
<button className="blackBut">立即试用</button>
|
||||
<button className="blackBut">
|
||||
<span>立即试用</span>
|
||||
<span>立即试用</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 右侧功能卡片 */}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,10 @@ const OpenSourceCollaboration = () => {
|
|||
</div>
|
||||
))}
|
||||
|
||||
<button className="blackBut white mt10">了解更多</button>
|
||||
<button className="blackBut white mt10">
|
||||
<span>了解更多</span>
|
||||
<span>了解更多</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="right-panel">
|
||||
|
|
|
|||
|
|
@ -71,7 +71,10 @@ const RepositoryV2 = () => {
|
|||
))}
|
||||
</div>
|
||||
|
||||
<button className="blackBut">了解更多</button>
|
||||
<button className="blackBut">
|
||||
<span>了解更多</span>
|
||||
<span>了解更多</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 右侧架构图 - 使用图片 */}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,10 @@ function SoftwareFactory() {
|
|||
<div className='font-16'>极速模式聚焦任务 - 代码 - 制品，助力软件研发快速响应、<br />实现极致效率</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button className='blackBut mt70'>了解更多</Button>
|
||||
<Button className='blackBut mt70'>
|
||||
<span>了解更多</span>
|
||||
<span>了解更多</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div className='flex1'>
|
||||
<img src={active === 1 ? img11 : img12} alt='' />
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
|||
}}
|
||||
>
|
||||
{/* 标签区域 */}
|
||||
<div className="tags">
|
||||
<span className="tag-text">XXX防雷</span>
|
||||
<span className="tag-value opacity7">20万激励金</span>
|
||||
<span className="tag-value opacity7">多合作资源</span>
|
||||
<div className="tags pl40">
|
||||
{item.tag.map((tag, i)=>{
|
||||
return !!i ? <span className="tag-value opacity7" key={i}>{tag}</span> : <span className="tag-text" key={i}><img src={item.tagIcon} width={12} className='mr3 mb2'/>{tag}</span>
|
||||
})}
|
||||
</div>
|
||||
<div className='font-26 font-bd mt25'>{item.title}</div>
|
||||
<div className='font-16'>{item.subtitle}</div>
|
||||
<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>
|
||||
{/* 图片 */}
|
||||
<div className="image-container">
|
||||
{/* <img src={item.image} alt={item.title} className="item-image" /> */}
|
||||
</div>
|
||||
{item.image && <div className="image-container">
|
||||
<img src={item.image} alt={item.title} className="item-image" />
|
||||
</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 425 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 774 B |
Binary file not shown.
|
After Width: | Height: | Size: 801 B |
Binary file not shown.
|
Before Width: | Height: | Size: 345 KiB After Width: | Height: | Size: 361 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 172 KiB After Width: | Height: | Size: 218 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 468 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 479 B |
Binary file not shown.
|
After Width: | Height: | Size: 588 B |
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 502 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 243 KiB |
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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) {
|
|||
</div>}
|
||||
<div className="flex1">
|
||||
{/* 推荐仓库 */}
|
||||
<div>推荐仓库</div>
|
||||
<div className="mb20">
|
||||
<div className="project_recommend">
|
||||
<Carousel autoplay ref={carouselEL} afterChange={setCurrent}>
|
||||
{bannerProjects.map(i => {
|
||||
const url = i.author ? `/${i.author.login}/${i.identifier}${i.author.login === "gh_mirrors" ? "/about" : "/about"}` : ``
|
||||
return <div>
|
||||
<div className="FlexAJ">
|
||||
<div className="">
|
||||
{i.topics && <div className='proListTopics mb10'>
|
||||
{i.topics.slice(0, 2).map(item => <Tooltip title={item.name}><Link to={`/explore/topic/${item.id}/${encodeURIComponent(item.name)}`} className='proListTopic mr15 font-13 task-hide'>{item.name}</Link></Tooltip>)}
|
||||
</div>}
|
||||
<div className="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>
|
||||
</div>
|
||||
<img src={img1} width={390} className="ml40" />
|
||||
</div>
|
||||
</div>
|
||||
})}
|
||||
</Carousel>
|
||||
</div>
|
||||
<div className="mb20 mt20">
|
||||
<Search
|
||||
placeholder="输入名称关键字"
|
||||
size="middle"
|
||||
onSearch={(value) => { setPage(1); setSearch(value); }}
|
||||
className="mlat custom-search"
|
||||
className="mlat custom-search-v3"
|
||||
style={{ width: "320px", marginLeft: "auto", height: "32px", marginTop: "8px" }}
|
||||
allowClear
|
||||
prefix={<span className="search_icon">
|
||||
<i className="iconfont icon-sousuo5 font-14"></i>
|
||||
</span>}
|
||||
/>
|
||||
</div>
|
||||
<Spin spinning={isSpin}>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 364 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 569 KiB |
|
|
@ -79,10 +79,7 @@ function List() {
|
|||
</div>
|
||||
<div className="others-news mt20">
|
||||
{list1.slice(4).map(item => {
|
||||
return <div className="mb10 community-news-item" key={item.id}>
|
||||
<Link to={`/news/${item.id}`} className="font-22">{item.name}<i className="iconfont icon-jiantou3 ml5 font-20"></i></Link>
|
||||
|
||||
</div>
|
||||
return <Link key={item.id} to={`/news/${item.id}`} className="font-22 task-hide mb10 community-news-item">{item.name}{item.name}{item.name}<i className="iconfont icon-jiantou3 ml5 font-20"></i></Link>
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
|
|
|
|||
Loading…
Reference in New Issue