forked from Gitlink/forgeplus-react
上传动画修改
This commit is contained in:
parent
54bffb41da
commit
e4d4375102
|
|
@ -1,13 +1,119 @@
|
|||
import React from 'react';
|
||||
import { Collapse } from 'antd';
|
||||
import Line from '../Line';
|
||||
import './index.scss';
|
||||
const { Panel } = Collapse;
|
||||
|
||||
const text = `
|
||||
研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。
|
||||
`;
|
||||
|
||||
|
||||
|
||||
function FifthSection({ fifth }) {
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
|
||||
|
||||
</React.Fragment>
|
||||
<div className="fifth-main clearfix">
|
||||
<div className="circle-wave">
|
||||
<ul className="icon-circle">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
<li>7</li>
|
||||
<li>8</li>
|
||||
<li>9</li>
|
||||
<li>10</li>
|
||||
</ul>
|
||||
|
||||
<div className="circleBox">
|
||||
<div className="circle1"></div>
|
||||
<div className="circle2"></div>
|
||||
<div className="circle3"></div>
|
||||
<div className="circle4"></div>
|
||||
<div className="circle5">
|
||||
<div className="circle-center">
|
||||
创客空间领域
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="task-main">
|
||||
<h2 className="homePage-blue-tit">创客空间</h2>
|
||||
<h4 className="homePage-subhead">开源项目版块集项目托管、版本管理等功能于一体，为开源协作和群智汇聚提供创作环境</h4>
|
||||
<Line />
|
||||
<Collapse accordion defaultActiveKey={['1']}>
|
||||
<Panel header="多样化目标识别及网络化协同控制仿真验证模块开发" key="1">
|
||||
<p>研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。</p>
|
||||
<div>
|
||||
<p>
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span>单人悬赏</span>
|
||||
<span>¥ 240000</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span>发布时间</span>
|
||||
<span>2021-05-20</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span>截止时间</span>
|
||||
<span>2021-06-20</span>
|
||||
</p>
|
||||
</div>
|
||||
</Panel>
|
||||
<Panel header="开源项目群体智能学习数据集征集" key="2">
|
||||
<p>研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。</p>
|
||||
<div>
|
||||
<p>
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span>单人悬赏</span>
|
||||
<span>¥ 240000</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span>发布时间</span>
|
||||
<span>2021-05-20</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span>截止时间</span>
|
||||
<span>2021-06-20</span>
|
||||
</p>
|
||||
</div>
|
||||
</Panel>
|
||||
<Panel header="机器人仿真的高效碰撞检测算法" key="3">
|
||||
<p>研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。</p>
|
||||
<div>
|
||||
<p>
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span>单人悬赏</span>
|
||||
<span>¥ 240000</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span>发布时间</span>
|
||||
<span>2021-05-20</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span>截止时间</span>
|
||||
<span>2021-06-20</span>
|
||||
</p>
|
||||
</div>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,213 @@
|
|||
|
||||
.home-fifth-section {
|
||||
text-align: center;
|
||||
min-height: 50vh;
|
||||
margin-top: -10px;
|
||||
|
||||
.fifth-tit{
|
||||
|
||||
.fifth-main {
|
||||
display: flex;
|
||||
width: 1200px;
|
||||
max-width: 100%;
|
||||
margin: 5vh auto;
|
||||
}
|
||||
|
||||
.circle-wave {
|
||||
position: relative;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
flex: none;
|
||||
}
|
||||
// ul,li{
|
||||
// margin: 0;
|
||||
// list-style-type: none;
|
||||
// padding: 0;
|
||||
// }
|
||||
.icon-circle {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
width: 560px;
|
||||
height: 560px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: iconCircle infinite 20s linear;
|
||||
|
||||
li {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
line-height: 70px;
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
li:nth-of-type(2) {
|
||||
transform: rotate(36deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li:nth-of-type(3) {
|
||||
transform: rotate(72deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li:nth-of-type(4) {
|
||||
transform: rotate(108deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li:nth-of-type(5) {
|
||||
transform: rotate(144deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li:nth-of-type(6) {
|
||||
transform: rotate(180deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li:nth-of-type(7) {
|
||||
transform: rotate(216deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li:nth-of-type(8) {
|
||||
transform: rotate(252deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li:nth-of-type(9) {
|
||||
transform: rotate(288deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li:nth-of-type(10) {
|
||||
transform: rotate(324deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes iconCircle {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.circleBox {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 560px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.circle1,
|
||||
.circle2,
|
||||
.circle3,
|
||||
.circle4,
|
||||
.circle5 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 180px;
|
||||
}
|
||||
|
||||
.circle5 {
|
||||
background-color: rgba(98, 88, 252, 0.3);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.circle-center {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding:1em 0.5em;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to bottom right, #2bebd7 0%, #692fd1 100%);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.circle1 {
|
||||
animation: cricle-wave 5s linear 0s infinite;
|
||||
background-color: rgba(98, 88, 252, 0.3);
|
||||
}
|
||||
|
||||
.circle2 {
|
||||
animation: cricle-wave 5s linear 1s infinite;
|
||||
background-color: rgba(98, 88, 252, 0.3);
|
||||
}
|
||||
|
||||
.circle3 {
|
||||
animation: cricle-wave 5s linear 2s infinite;
|
||||
background-color: rgba(98, 88, 252, 0.3);
|
||||
}
|
||||
|
||||
.circle4 {
|
||||
animation: cricle-wave 5s linear 3s infinite;
|
||||
background-color: rgba(98, 88, 252, 0.3);
|
||||
}
|
||||
|
||||
@keyframes cricle-wave {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: scale(1.15);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: scale(1.3);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: scale(1.45);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale(1.6);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.75);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: scale(1.9);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(2.05);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale(2.2);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: scale(2.35);
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(2.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.task-main {
|
||||
margin-left: 20px;
|
||||
.home-line {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.fifth-tit {
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React from 'react';
|
||||
import Line from '../Line';
|
||||
import './index.scss';
|
||||
|
||||
|
||||
|
|
@ -7,7 +8,8 @@ function FourthSection({ fourth }) {
|
|||
<React.Fragment>
|
||||
<h2 className="homePage-blue-tit">开源项目</h2>
|
||||
<h4 className="homePage-subhead">开源项目版块集项目托管、版本管理等功能于一体，为开源协作和群智汇聚提供创作环境</h4>
|
||||
|
||||
<Line />
|
||||
|
||||
|
||||
|
||||
</React.Fragment>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
text-align: center;
|
||||
min-height: 50vh;
|
||||
margin-top: -10px;
|
||||
padding-top: 40px;
|
||||
// background: linear-gradient(#fff 0%, #cbdcff 100%);
|
||||
background: #fff;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
import React, { memo } from 'react';
|
||||
import './index.scss';
|
||||
|
||||
|
||||
export default memo(() => {
|
||||
return (
|
||||
<p className="home-line">
|
||||
<i className="yellow-line"></i>
|
||||
<i className="brown-line"></i>
|
||||
<i className="yellow-line"></i>
|
||||
</p>
|
||||
)
|
||||
})
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
.home-line {
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
.yellow-line {
|
||||
display: inline-block;
|
||||
width: 23px;
|
||||
height: 4px;
|
||||
background: #ff8520;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.brown-line {
|
||||
display: inline-block;
|
||||
width: 38px;
|
||||
height: 4px;
|
||||
margin:0 5px;
|
||||
background: #e67a21;
|
||||
border-radius: 3px;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import { Button } from 'antd';
|
|||
import Slider from 'react-slick';
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import Line from '../Line';
|
||||
|
||||
import './index.scss';
|
||||
|
||||
|
|
@ -29,7 +30,7 @@ function SecondSection({ community }) {
|
|||
|
||||
<h2 className="homePage-blue-tit">社区动态</h2>
|
||||
<h4 className="homePage-subhead">社区动态副标题社区动态副标题社区动态副标题</h4>
|
||||
|
||||
<Line />
|
||||
<div className="community-main">
|
||||
|
||||
<div className={`community-left ${community ? "community-active" : ''}`}>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import CountUp from 'react-countup';
|
||||
import Line from '../Line';
|
||||
import './index.scss';
|
||||
|
||||
const countUpProps={
|
||||
|
|
@ -12,7 +13,7 @@ function ThirdSection({third}) {
|
|||
return (
|
||||
<div className="ball-background">
|
||||
<h2 className="third-tit">数据统计总览</h2>
|
||||
|
||||
<Line />
|
||||
<div className="third-main ">
|
||||
{/* <div className={`third-main ${third?'third-active':''}`}> */}
|
||||
<div className="circle-item">
|
||||
|
|
|
|||
Loading…
Reference in New Issue