修改首页动效
This commit is contained in:
parent
bdcc7a4699
commit
954cf38074
|
|
@ -25,7 +25,7 @@ if (isDev) {
|
|||
}
|
||||
debugType = window.location.search.indexOf('debug=t') !== -1 ? 'teacher' :
|
||||
window.location.search.indexOf('debug=s') !== -1 ? 'student' :
|
||||
window.location.search.indexOf('debug=a') !== -1 ? 'admin' : parsed.debug || 's'
|
||||
window.location.search.indexOf('debug=a') !== -1 ? 'admin' : parsed.debug || 'a'
|
||||
}
|
||||
function clearAllCookie() {
|
||||
cookie.remove('_educoder_session', { path: '/' });
|
||||
|
|
|
|||
|
|
@ -1,141 +1,155 @@
|
|||
import React from 'react';
|
||||
import { Collapse } from 'antd';
|
||||
import React, { memo } from 'react';
|
||||
import { Collapse, Button } from 'antd';
|
||||
import Line from '../Line';
|
||||
import './index.scss';
|
||||
const { Panel } = Collapse;
|
||||
|
||||
const text = `
|
||||
研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。
|
||||
`;
|
||||
|
||||
|
||||
|
||||
function FifthSection({ fifth }) {
|
||||
|
||||
return (
|
||||
<div className="fifth-main clearfix">
|
||||
<div className="circle-wave">
|
||||
<ul className="icon-circle">
|
||||
<li>
|
||||
<i className="iconfont icon-zhishitupu"></i>
|
||||
<span>知识图谱</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-jisuanji1"></i>
|
||||
<span>计算机</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-dianzi1"></i>
|
||||
<span>电子</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-junshililun1"></i>
|
||||
<span>军事理论</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-ruanjiangongcheng1"></i>
|
||||
<span>软件工程</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-yixue1"></i>
|
||||
<span>医学</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-tongxin1"></i>
|
||||
<span>通信</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-zhengcefagui1"></i>
|
||||
<span>政策法规</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-dashuju"></i>
|
||||
<span>大数据</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-rengongzhineng"></i>
|
||||
<span>人工智能</span>
|
||||
</li>
|
||||
</ul>
|
||||
<React.Fragment>
|
||||
<div className={`homepage-main fifth-main clearfix ${fifth ? 'active' : ''}`}>
|
||||
<div className="circle-wave">
|
||||
<ul className="icon-circle">
|
||||
<li>
|
||||
<i className="iconfont icon-zhishitupu"></i>
|
||||
<span>知识图谱</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-jisuanji1"></i>
|
||||
<span>计算机</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-dianzi1"></i>
|
||||
<span>电子</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-junshililun1"></i>
|
||||
<span>军事理论</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-ruanjiangongcheng1"></i>
|
||||
<span>软件工程</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-yixue1"></i>
|
||||
<span>医学</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-tongxin1"></i>
|
||||
<span>通信</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-zhengcefagui1"></i>
|
||||
<span>政策法规</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-dashuju"></i>
|
||||
<span>大数据</span>
|
||||
</li>
|
||||
<li><i className="iconfont icon-rengongzhineng"></i>
|
||||
<span>人工智能</span>
|
||||
</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 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>
|
||||
|
||||
<Button className="homepage-btn" type="primary">寻找创客</Button>
|
||||
</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 className="collapse-des">研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。</p>
|
||||
<div className="collapse-content">
|
||||
<p className="collapse-content-item">
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span >单人悬赏</span>
|
||||
<span className="collapse-content-money">¥ 240000</span>
|
||||
</p>
|
||||
|
||||
<p className="collapse-content-item">
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span >发布时间</span>
|
||||
<span className="collapse-content-time">2021-05-20</span>
|
||||
</p>
|
||||
|
||||
<p className="collapse-content-item">
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span >截止时间</span>
|
||||
<span className="collapse-content-time">2021-06-20</span>
|
||||
</p>
|
||||
</div>
|
||||
</Panel>
|
||||
<Panel header="开源项目群体智能学习数据集征集" key="2">
|
||||
<p className="collapse-des">研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。</p>
|
||||
<div className="collapse-content">
|
||||
<p className="collapse-content-item">
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span >单人悬赏</span>
|
||||
<span className="collapse-content-money">¥ 240000</span>
|
||||
</p>
|
||||
|
||||
<p className="collapse-content-item">
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span >发布时间</span>
|
||||
<span className="collapse-content-time">2021-05-20</span>
|
||||
</p>
|
||||
|
||||
<p className="collapse-content-item">
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span >截止时间</span>
|
||||
<span className="collapse-content-time">2021-06-20</span>
|
||||
</p>
|
||||
</div>
|
||||
</Panel>
|
||||
<Panel header="机器人仿真的高效碰撞检测算法" key="3">
|
||||
<p className="collapse-des">研发配置要求为包含网络化协同控制仿真验证与多样化目标识别仿真验证模块的1套软件和1份测试报告。</p>
|
||||
<div className="collapse-content">
|
||||
<p className="collapse-content-item">
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span >单人悬赏</span>
|
||||
<span className="collapse-content-money">¥ 240000</span>
|
||||
</p>
|
||||
|
||||
<p className="collapse-content-item">
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span >发布时间</span>
|
||||
<span className="collapse-content-time">2021-05-20</span>
|
||||
</p>
|
||||
|
||||
<p className="collapse-content-item">
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<span >截止时间</span>
|
||||
<span className="collapse-content-time">2021-06-20</span>
|
||||
</p>
|
||||
</div>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</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>
|
||||
<svg className="waves waves-low "
|
||||
viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
||||
<defs>
|
||||
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
|
||||
<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>
|
||||
<g className="parallax">
|
||||
<use xlinkHref="#wave-path" x="50" y="3" fill="rgba(4,22,112,0.2)" />
|
||||
<use xlinkHref="#wave-path" x="50" y="0" fill="rgba(4,22,112,0.2)" />
|
||||
<use xlinkHref="#wave-path" x="50" y="9" fill="#041670" />
|
||||
</g>
|
||||
</svg>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
export default FifthSection;
|
||||
export default memo(FifthSection);
|
||||
|
|
@ -3,19 +3,23 @@
|
|||
|
||||
.fifth-main {
|
||||
display: flex;
|
||||
width: 1200px;
|
||||
max-width: 98%;
|
||||
margin: 5vh auto;
|
||||
margin: 5vh auto 10vh;
|
||||
}
|
||||
|
||||
.circle-wave {
|
||||
position: relative;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
height: 650px;
|
||||
flex: none;
|
||||
|
||||
&:hover .icon-circle{
|
||||
animation-play-state:paused !important;
|
||||
&:hover .icon-circle {
|
||||
animation-play-state: paused !important;
|
||||
}
|
||||
|
||||
.homepage-btn{
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.icon-circle {
|
||||
|
|
@ -25,82 +29,81 @@
|
|||
height: 560px;
|
||||
// background-color: #2bebd7;
|
||||
border-radius: 50%;
|
||||
// animation: iconCircle infinite 20s linear;
|
||||
|
||||
animation: iconCircle infinite 20s linear;
|
||||
|
||||
li {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
position: absolute;
|
||||
background-color: #254DEA;
|
||||
background-color: #254dea;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
line-height: 70px;
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
margin-left: -30px;
|
||||
margin-left: -20px;
|
||||
margin-top: -20px;
|
||||
cursor: pointer;
|
||||
.iconfont{
|
||||
.iconfont {
|
||||
font-size: 20px !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
li:nth-of-type(2) {
|
||||
background: #E33230;
|
||||
background: #e33230;
|
||||
transform: rotate(36deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li:nth-of-type(3) {
|
||||
background: #0766FB;
|
||||
background: #0766fb;
|
||||
transform: rotate(72deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li:nth-of-type(4) {
|
||||
background: #F02C66;
|
||||
background: #f02c66;
|
||||
transform: rotate(108deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li:nth-of-type(5) {
|
||||
background: #6038FF;
|
||||
background: #6038ff;
|
||||
transform: rotate(144deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li:nth-of-type(6) {
|
||||
background: #F85E55;
|
||||
background: #f85e55;
|
||||
transform: rotate(180deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li:nth-of-type(7) {
|
||||
background: #C13CFF;
|
||||
background: #c13cff;
|
||||
transform: rotate(216deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li:nth-of-type(8) {
|
||||
background: #2CB840;
|
||||
background: #2cb840;
|
||||
transform: rotate(252deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li:nth-of-type(9) {
|
||||
background: #5744F6;
|
||||
background: #5744f6;
|
||||
transform: rotate(288deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li:nth-of-type(10) {
|
||||
background: #E9862E;
|
||||
background: #e9862e;
|
||||
transform: rotate(324deg);
|
||||
transform-origin: 20px 300px;
|
||||
}
|
||||
li{
|
||||
span{
|
||||
li {
|
||||
span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
border-radius: 50%;
|
||||
width: 100%;
|
||||
background: rgba(0,0,0,0.5);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
visibility: hidden;
|
||||
}
|
||||
&:hover span{
|
||||
&:hover span {
|
||||
visibility: visible;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
@ -118,9 +121,10 @@
|
|||
|
||||
.circleBox {
|
||||
position: relative;
|
||||
right: 15px;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
margin:200px auto 0;
|
||||
margin: 200px auto 0;
|
||||
}
|
||||
|
||||
.circle1,
|
||||
|
|
@ -144,7 +148,7 @@
|
|||
.circle-center {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding:1em 0.5em;
|
||||
padding: 1em 0.5em;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to bottom right, #2bebd7 0%, #692fd1 100%);
|
||||
color: #fff;
|
||||
|
|
@ -230,11 +234,88 @@
|
|||
}
|
||||
|
||||
.task-main {
|
||||
margin-left: 20px;
|
||||
margin-left: 40px;
|
||||
.home-line {
|
||||
text-align: left;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
}
|
||||
.fifth-tit {
|
||||
|
||||
.ant-collapse {
|
||||
border: 0;
|
||||
.ant-collapse-item {
|
||||
border: 0;
|
||||
}
|
||||
.ant-collapse-item:last-child, .ant-collapse-item:last-child > .ant-collapse-header{
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
|
||||
.ant-collapse-header {
|
||||
height: 78px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 10px 5px rgba(38, 118, 255, 0.04);
|
||||
border-radius: 6px;
|
||||
font-size: 18px;
|
||||
color: #0a1255;
|
||||
letter-spacing: 0;
|
||||
font-weight: 500;
|
||||
padding: 27px 36px;
|
||||
}
|
||||
|
||||
.ant-collapse-item-active {
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 10px 5px rgba(38, 118, 255, 0.04);
|
||||
border-radius: 6px;
|
||||
border: 0;
|
||||
.ant-collapse-header {
|
||||
height: 48px;
|
||||
padding: 15px 36px;
|
||||
background: #596cee;
|
||||
color: #fff;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-collapse-content > .ant-collapse-content-box {
|
||||
padding: 16px 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-des {
|
||||
height: 56px;
|
||||
font-size: 15px;
|
||||
color: #3a4772;
|
||||
letter-spacing: 0;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
margin-bottom: .5em !important;
|
||||
}
|
||||
.collapse-content {
|
||||
padding: 12px;
|
||||
width: 336px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
|
||||
.collapse-content-item{
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.iconfont{
|
||||
margin-right: 12px;
|
||||
color: #EA0000;
|
||||
}
|
||||
.collapse-content-money{
|
||||
margin-left:16px;
|
||||
color: #EA0000;
|
||||
}
|
||||
.collapse-content-time{
|
||||
margin-left:16px;
|
||||
}
|
||||
}
|
||||
.waves{
|
||||
position: relative;
|
||||
bottom: -10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { memo } from 'react';
|
||||
import { Button } from 'antd';
|
||||
import './index.scss';
|
||||
|
||||
|
|
@ -12,13 +12,12 @@ import text2 from '../img/text2.png';
|
|||
import text3 from '../img/text3.png';
|
||||
import text4 from '../img/text4.png';
|
||||
|
||||
|
||||
function FirstSection() {
|
||||
function FirstSection({ first }) {
|
||||
return (
|
||||
<div className="grid-picture">
|
||||
<div className="homepage-content">
|
||||
<div className={`grid-picture ${first ? "active" : ""}`}>
|
||||
<div className="homepage-main website-content">
|
||||
|
||||
<div className="website website-active">
|
||||
<div className="website">
|
||||
<h3 className="website-title">红山开源</h3>
|
||||
<div className="website-vision">
|
||||
<span>群智共享</span>
|
||||
|
|
@ -28,7 +27,7 @@ function FirstSection() {
|
|||
</div>
|
||||
<div className="website-des">红山开源是一个依托互联网群体智慧实现世界范围内资源深度融合、开放共享和协同创新的开源社区，是集开源项目演化发展、科研任务众包、竞赛组织选拔和社区开放交流为一体的创新科研服务平台。红山开源致力于打造一个“开放、汇聚、协同、众创”的生态空间。
|
||||
</div>
|
||||
<Button className="website-more" type="primary">了解详情</Button>
|
||||
<Button className="website-more homepage-btn" type="primary">了解详情</Button>
|
||||
</div>
|
||||
|
||||
<div className="play-img">
|
||||
|
|
@ -66,4 +65,4 @@ function FirstSection() {
|
|||
)
|
||||
}
|
||||
|
||||
export default FirstSection;
|
||||
export default memo(FirstSection);
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
.homePage {
|
||||
.home-first-section {
|
||||
.home-first-section {
|
||||
height: 90vh;
|
||||
min-height: 650px;
|
||||
background: linear-gradient(
|
||||
|
|
@ -8,24 +7,29 @@
|
|||
#0c2d8f 67%,
|
||||
#002a89 100%
|
||||
);
|
||||
}
|
||||
|
||||
.grid-picture {
|
||||
height: 90vh;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: url(../img/grid.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
.waves{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.homepage-content {
|
||||
.website-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 1200px;
|
||||
height: 82vh;
|
||||
max-width: 98%;
|
||||
margin: 0 auto;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.website {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -48,16 +52,14 @@
|
|||
line-height: 2.3;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.website-more {
|
||||
width: 140px;
|
||||
|
||||
.website-more{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.website-active {
|
||||
position: relative;
|
||||
animation: website 0.75s 1 forwards;
|
||||
}
|
||||
|
||||
|
||||
.play-img {
|
||||
display: flex;
|
||||
flex: none;
|
||||
|
|
@ -70,29 +72,27 @@
|
|||
margin-bottom: 10vh;
|
||||
img {
|
||||
opacity: 0;
|
||||
// animation: show 0.5s 1 forwards;
|
||||
}
|
||||
|
||||
.play-glass {
|
||||
position: relative;
|
||||
width: 351px;
|
||||
z-index: 1;
|
||||
animation: glass 0.75s 1 forwards;
|
||||
// animation: glass 0.75s 1 forwards;
|
||||
}
|
||||
.play-circle {
|
||||
position: absolute;
|
||||
width: 165px;
|
||||
// bottom: -5.5%;
|
||||
right: 18%;
|
||||
z-index: 2;
|
||||
animation: circle 0.75s 1 forwards;
|
||||
// animation: circle 0.75s 1 forwards;
|
||||
}
|
||||
.play-pillar {
|
||||
position: absolute;
|
||||
left: -11%;
|
||||
top: 37%;
|
||||
width: 230px;
|
||||
animation: pillar 0.75s 1 forwards;
|
||||
// animation: pillar 0.75s 1 forwards;
|
||||
}
|
||||
.play-code {
|
||||
position: absolute;
|
||||
|
|
@ -100,14 +100,13 @@
|
|||
top: 18%;
|
||||
width: 211px;
|
||||
z-index: 1;
|
||||
animation: code 0.75s 1 forwards;
|
||||
// animation: code 0.75s 1 forwards;
|
||||
}
|
||||
.play-logo {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
width: 87px;
|
||||
// transition: all 0.7s;
|
||||
animation: logo 1.5s 0.5s infinite;
|
||||
// animation: logo 1.5s 0.5s infinite;
|
||||
z-index: 10;
|
||||
}
|
||||
.play-text1 {
|
||||
|
|
@ -116,7 +115,7 @@
|
|||
// right: 5%;
|
||||
// width: 262px;
|
||||
// bottom: 11%;
|
||||
animation: text1-show 0.5s 1 0.5s forwards;
|
||||
// animation: text1-show 0.5s 1 0.5s forwards;
|
||||
}
|
||||
.play-text2 {
|
||||
position: absolute;
|
||||
|
|
@ -124,25 +123,58 @@
|
|||
// bottom: 10%;
|
||||
// left: 6%;
|
||||
// width: 262px;
|
||||
animation: text2-show 0.5s 1 0.5s forwards;
|
||||
// animation: text2-show 0.5s 1 0.5s forwards;
|
||||
}
|
||||
.play-text3 {
|
||||
position: absolute;
|
||||
// right: 6%;
|
||||
// top: -4%;
|
||||
// width: 227px;
|
||||
animation: text3-show 0.5s 1 0.5s forwards;
|
||||
// animation: text3-show 0.5s 1 0.5s forwards;
|
||||
}
|
||||
.play-text4 {
|
||||
position: absolute;
|
||||
// top: 7%;
|
||||
// left: 18%;
|
||||
// width: 206px;
|
||||
animation: text4-show 0.5s 1 0.5s forwards;
|
||||
// animation: text4-show 0.5s 1 0.5s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.active{
|
||||
.website {
|
||||
animation: website 0.75s 1 forwards;
|
||||
}
|
||||
.play-glass{
|
||||
animation: glass 0.75s 1 forwards;
|
||||
}
|
||||
.play-circle {
|
||||
animation: circle 0.75s 1 forwards;
|
||||
}
|
||||
.play-pillar {
|
||||
animation: pillar 0.75s 1 forwards;
|
||||
}
|
||||
.play-code {
|
||||
animation: code 0.75s 1 forwards;
|
||||
}
|
||||
.play-logo {
|
||||
animation: logo 1.5s 0.5s infinite;
|
||||
}
|
||||
.play-text1 {
|
||||
animation: text1-show 0.5s 1 0.5s forwards;
|
||||
}
|
||||
.play-text2 {
|
||||
animation: text2-show 0.5s 1 0.5s forwards;
|
||||
}
|
||||
.play-text3 {
|
||||
animation: text3-show 0.5s 1 0.5s forwards;
|
||||
}
|
||||
.play-text4 {
|
||||
animation: text4-show 0.5s 1 0.5s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes website {
|
||||
0% {
|
||||
top: 60vh;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
import React, { memo } from "react";
|
||||
import logo from '../../modules/tpm/images/hskylogo.png';
|
||||
|
||||
import './index.scss';
|
||||
|
||||
function HomeFooter() {
|
||||
return (
|
||||
<div class="home-footer homePage">
|
||||
<div className="arc"></div>
|
||||
<div className="homepage-main footer-main">
|
||||
{/* <img className="logo" src={logo} alt="红山开源"></img> */}
|
||||
<p>
|
||||
<span class="mr15"><i class="iconfont icon-weibiaoti- font-16"></i>+86-010-66357650</span>
|
||||
<span class="mr15"><i class="iconfont icon-mail font-16"></i>osredm@163.com</span>
|
||||
<span class="mr15"><i class="iconfont icon-xiazai18 font-16"></i> 北京市海淀区西三环北路72号</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
版权所有：红山开源社区
|
||||
<a className="police" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802034576">
|
||||
<img className="police-img" src="https://forge.osredm.com/police.png" />京公网安备 11010802034576 号</a>
|
||||
<a className="police-number" href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备2021005060</a>
|
||||
</p>
|
||||
</div>
|
||||
{/* <p class="mb10">
|
||||
style="width: 100%;height: 92px;background-color: #323232;color: #ccc;padding-top: 25px;"
|
||||
<span class="mr15"><i class="iconfont icon-weibiaoti- font-16"></i>+86-010-66357650</span>
|
||||
<span class="mr15"><i class="iconfont icon-mail font-16"></i>osredm@163.com</span>
|
||||
<span class="mr15"><i class="iconfont icon-xiazai18 font-16"></i> 北京市海淀区西三环北路72号</span>
|
||||
</p>
|
||||
<p>版权所有：红山开源社区
|
||||
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802034576" style="color: #ccc; margin-right: 20px;">
|
||||
<img src="https://forge.osredm.com/police.png" style="width: 16px;border-radius: 10px;margin-right: 3px" />京公网安备 11010802034576 号</a>
|
||||
<a href="https://beian.miit.gov.cn/#/Integrated/index" style="color: #ccc">京ICP备2021005060</a>
|
||||
</p> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(HomeFooter);
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
.home-footer {
|
||||
height: 40vh;
|
||||
background: #162046;
|
||||
overflow: hidden;
|
||||
.arc {
|
||||
position: relative;
|
||||
margin-top: -15vh;
|
||||
height: 30vh;
|
||||
width: 100%;
|
||||
// background: linear-gradient(#cbdcff 0%, #bbccef 100%);
|
||||
background: #cbdcff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.logo {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 75px;
|
||||
width: 190px;
|
||||
height: 60px;
|
||||
}
|
||||
.footer-main {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 25vh;
|
||||
font-size: 12px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #bdc2d1;
|
||||
line-height: 28px;
|
||||
}
|
||||
.police {
|
||||
color: #bdc2d1;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.police-img {
|
||||
width: 16px;
|
||||
border-radius: 10px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.police-number{
|
||||
color: #bdc2d1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +1,122 @@
|
|||
import React from 'react';
|
||||
import React, { memo } from 'react';
|
||||
import { Button } from 'antd';
|
||||
import Line from '../Line';
|
||||
import logoLine from '../img/logoLine.png';
|
||||
import task from '../img/task.png';
|
||||
import codeManage from '../img/codeManage.png';
|
||||
import versionManage from '../img/versionManage.png';
|
||||
import editorInline from '../img/editorInline.png';
|
||||
import teamwork from '../img/teamwork.png';
|
||||
import './index.scss';
|
||||
|
||||
const code = [
|
||||
{ str: <span><span className='code-blue'>latest:</span> Pulling from appleboy/drone-ssh</span> },
|
||||
{ str: <span><span className='code-red'>Digest:</span>sha256:095ca4ceafcb7</span> },
|
||||
{ str: <span>Status:Image is up to date for appleboy/drone-ssh:latest</span> },
|
||||
{ str: <span><span className='code-green'>======CMD======</span></span> },
|
||||
// { str: <span><span className='code-green'>echo ====暂停容器开始======= </span></span> },
|
||||
{ str: <span><span className='code-red'>docker</span> rm -f mo-test</span> },
|
||||
{ str: <span><span className='code-red'>docker</span> rmi mo-test:1.0</span> },
|
||||
// { str: <span><span className='code-blue'>cd</span> /opt/demo</span> },
|
||||
{ str: <span><span className='code-green'>echo ====开始部署=======</span></span> },
|
||||
{ str: <span><span className='code-red'>docker </span>build -t mo-test:1.0 .</span> },
|
||||
{ str: <span><span className='code-red'>docker </span>run -d -p 8080:8080 --name mo-test mo-test:1.0</span> },
|
||||
{ str: <span><span className='code-green'>echo ====部署成功======</span></span> },
|
||||
// { str: <span><span className='code-green'>======END======</span></span> },
|
||||
]
|
||||
|
||||
function FourthSection({ fourth }) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<h2 className="homePage-blue-tit">开源项目</h2>
|
||||
<h4 className="homePage-subhead">开源项目版块集项目托管、版本管理等功能于一体，为开源协作和群智汇聚提供创作环境</h4>
|
||||
<Line />
|
||||
|
||||
<div className="fourth-main homepage-main">
|
||||
<div className="fourth-title">
|
||||
<div className="fourth-main-title">
|
||||
<h2 className="homePage-blue-tit">开源项目</h2>
|
||||
<h4 className="homePage-subhead">开源项目版块集项目托管、版本管理等功能于一体，为开源协作和群智汇聚提供创作环境</h4>
|
||||
<Line />
|
||||
<Button className="homepage-btn" type="primary">查看项目</Button>
|
||||
</div>
|
||||
|
||||
|
||||
</React.Fragment>
|
||||
<div className={fourth ? "code-box clearfix activeCode" : "code-box clearfix"} >
|
||||
<div className="code-box-action code-box-picture">
|
||||
<img src={task}></img>
|
||||
</div>
|
||||
<div className="code-box-action code-box-code">
|
||||
<div className="hadoopCode">
|
||||
<li key={0}>
|
||||
<pre >
|
||||
<span className="codenum">1</span>
|
||||
<span>
|
||||
<span className='word-item code-blue' style={{ animationDelay: '2.7s' }}>c</span>
|
||||
<span className='word-item code-blue' style={{ animationDelay: '2.8s' }}>d </span>
|
||||
<span className='word-item code-green' style={{ animationDelay: '3s' }}> /o</span>
|
||||
<span className='word-item code-green' style={{ animationDelay: '3.1s' }}>pt</span>
|
||||
<span className='word-item code-green' style={{ animationDelay: '3.2s' }}>/Us</span>
|
||||
<span className='word-item code-green' style={{ animationDelay: '3.3s' }}>ers</span>
|
||||
<span className='word-item code-green' style={{ animationDelay: '3.44s' }}>/de</span>
|
||||
<span className='word-item code-green' style={{ animationDelay: '3.6s' }}>mo</span>
|
||||
<span className='word-item code-green' style={{ animationDelay: '3.9s' }}>/app</span>
|
||||
<span className='word-item code-green' style={{ animationDelay: '4.1s' }}>/sta</span>
|
||||
<span className='word-item code-green' style={{ animationDelay: '4.2s' }}>tic</span>
|
||||
</span>
|
||||
</pre>
|
||||
</li>
|
||||
{
|
||||
code.map((i, k) => {
|
||||
return (
|
||||
<li key={k + 1}><pre className="word-item" style={{ animationDelay: `${k * 0.2 + 4.2}s` }}><span className="codenum">{k + 2}</span>{i.str}</pre></li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<img src={logoLine}></img>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={fourth ?"fourth-projects activeCode":"fourth-projects"}>
|
||||
|
||||
<div className="project-item">
|
||||
<div className="fourth-item-img">
|
||||
<img src={codeManage} />
|
||||
<div className="fourth-item-circle"></div>
|
||||
</div>
|
||||
<h3 className="fourth-item-title">代码托管</h3>
|
||||
<p className="fourth-item-des">免费提供海量代码仓储</p>
|
||||
</div>
|
||||
|
||||
<div className="project-item">
|
||||
<div className="fourth-item-img">
|
||||
<img src={versionManage} />
|
||||
<div className="fourth-item-circle"></div>
|
||||
</div>
|
||||
<h3 className="fourth-item-title">版本管理</h3>
|
||||
<p className="fourth-item-des">记录和维护软件演化全过程</p>
|
||||
</div>
|
||||
|
||||
<div className="project-item">
|
||||
<div className="fourth-item-img">
|
||||
<img src={editorInline} />
|
||||
<div className="fourth-item-circle"></div>
|
||||
</div>
|
||||
<h3 className="fourth-item-title">在线编辑</h3>
|
||||
<p className="fourth-item-des">轻量级修改和提交</p>
|
||||
</div>
|
||||
|
||||
<div className="project-item">
|
||||
<div className="fourth-item-img">
|
||||
<img src={teamwork} />
|
||||
<div className="fourth-item-circle"></div>
|
||||
</div>
|
||||
<h3 className="fourth-item-title">质量追踪</h3>
|
||||
<p className="fourth-item-des">代码安全和质量管控</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FourthSection;
|
||||
export default memo(FourthSection);
|
||||
|
|
@ -1,13 +1,263 @@
|
|||
|
||||
.home-fourth-section {
|
||||
text-align: center;
|
||||
min-height: 50vh;
|
||||
margin-top: -10px;
|
||||
padding-top: 40px;
|
||||
min-height: 45vh;
|
||||
padding: 30px 0 20px 0;
|
||||
// background: linear-gradient(#fff 0%, #cbdcff 100%);
|
||||
background: #fff;
|
||||
background: url(../img/map.png) no-repeat;
|
||||
|
||||
.fourth-tit{
|
||||
|
||||
.fourth-main {
|
||||
margin: 20px auto;
|
||||
}
|
||||
.fourth-title {
|
||||
display: flex;
|
||||
}
|
||||
.fourth-main-title {
|
||||
width: 400px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.code-box {
|
||||
position: relative;
|
||||
width: 750px;
|
||||
img {
|
||||
float: left;
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
.code-box-action {
|
||||
width: 500px;
|
||||
height: 332px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.code-box-picture {
|
||||
position: relative;
|
||||
float: left;
|
||||
// background: url(../img/task.png) no-repeat;
|
||||
opacity: 0;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.code-box-code {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 160px;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.06);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hadoopCode {
|
||||
border-radius: 5px;
|
||||
margin: 10px;
|
||||
background: #1c1c25;
|
||||
padding: 18px 20px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
li {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 25px;
|
||||
color: #e1e1e1;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
|
||||
Liberation Mono, monospace;
|
||||
word-break: break-all;
|
||||
overflow: initial;
|
||||
margin-bottom: 0;
|
||||
.codenum {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
text-align: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.code-green {
|
||||
color: #00fa30;
|
||||
}
|
||||
.code-red {
|
||||
color: #ff5058;
|
||||
}
|
||||
.code-blue {
|
||||
color: #05cfc8;
|
||||
}
|
||||
}
|
||||
.word-item {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fourth-projects {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.project-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 254px;
|
||||
height: 193px;
|
||||
border: 1px dashed #517df1;
|
||||
border-radius: 6px;
|
||||
|
||||
.fourth-item-img {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 8px 7px rgba(38, 118, 255, 0.04);
|
||||
}
|
||||
|
||||
.fourth-item-circle {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: turnCircle infinite 10s linear;
|
||||
}
|
||||
.fourth-item-circle::before,
|
||||
.fourth-item-circle::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(-45deg, #0949ff 0, #03bdff 100%);
|
||||
}
|
||||
.fourth-item-circle::before {
|
||||
top: -4px;
|
||||
left: 32px;
|
||||
}
|
||||
.fourth-item-circle::after {
|
||||
left: 32px;
|
||||
bottom: -4px;
|
||||
}
|
||||
|
||||
.fourth-item-title {
|
||||
margin: 0.5em auto 0;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 20px;
|
||||
color: #0a1255;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fourth-item-des {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 16px;
|
||||
color: #777988;
|
||||
line-height: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.project-item:nth-child(2){
|
||||
margin-top:80px;
|
||||
border-color: #DF0757;
|
||||
.fourth-item-circle{
|
||||
animation: turnCircle2 infinite 10s linear;
|
||||
}
|
||||
.fourth-item-circle::before,
|
||||
.fourth-item-circle::after {
|
||||
background: linear-gradient(-45deg, #DF0757 0, #ffa38d 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.project-item:nth-child(3){
|
||||
margin-top:160px;
|
||||
border-color: #00FFA4;
|
||||
.fourth-item-circle::before,
|
||||
.fourth-item-circle::after {
|
||||
background: linear-gradient(-45deg, #00FFA4 0, #f2FFA4 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.project-item:nth-child(4){
|
||||
margin-top:140px;
|
||||
border-color: #8B5FF0;
|
||||
.fourth-item-circle{
|
||||
animation: turnCircle2 infinite 10s linear;
|
||||
}
|
||||
.fourth-item-circle::before,
|
||||
.fourth-item-circle::after {
|
||||
background: linear-gradient(-45deg, #8B5FF0 0, #fe86ff 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.activeCode {
|
||||
.code-box-picture {
|
||||
animation: taskPicture 1s 1 forwards;
|
||||
}
|
||||
.code-box-code {
|
||||
animation: taskCode 1s 1 .75s forwards;
|
||||
}
|
||||
.word-item {
|
||||
animation: show 0.2s 1 forwards;
|
||||
}
|
||||
&.fourth-projects{
|
||||
animation: taskPicture 1s 1 1.5s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes taskPicture {
|
||||
0% {
|
||||
opacity: 0;
|
||||
top: 35vh;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes taskCode {
|
||||
0% {
|
||||
opacity: 0;
|
||||
top: 35vh;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes turnCircle {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes turnCircle2 {
|
||||
0% {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { memo } from 'react';
|
||||
import { Button } from 'antd';
|
||||
import Slider from 'react-slick';
|
||||
import "slick-carousel/slick/slick.css";
|
||||
|
|
@ -23,7 +23,7 @@ let setting = {
|
|||
vertical: true,
|
||||
}
|
||||
|
||||
function SecondSection({ community }) {
|
||||
function SecondSection({ second }) {
|
||||
return (
|
||||
// <div className="home-second-section">
|
||||
<React.Fragment>
|
||||
|
|
@ -31,9 +31,9 @@ function SecondSection({ community }) {
|
|||
<h2 className="homePage-blue-tit">社区动态</h2>
|
||||
<h4 className="homePage-subhead">社区动态副标题社区动态副标题社区动态副标题</h4>
|
||||
<Line />
|
||||
<div className="community-main">
|
||||
<div className="homepage-main community-main">
|
||||
|
||||
<div className={`community-left ${community ? "community-active" : ''}`}>
|
||||
<div className={`community-left ${second ? "community-active" : ''}`}>
|
||||
<div className="community-english">C O M M U N I T Y D Y N A M I C S</div>
|
||||
<h3 className="community-star">
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
|
|
@ -51,7 +51,7 @@ function SecondSection({ community }) {
|
|||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Button className="dynamic-more" type="primary">更多动态</Button>
|
||||
<Button className="homepage-btn" type="primary">更多动态</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ function SecondSection({ community }) {
|
|||
<h3>加快推进</h3>
|
||||
<span className="slide-tag">热点资讯</span>
|
||||
</div>
|
||||
<p>习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源, sunt in culpa qui officia deserunt mollit id est laborum.</p>
|
||||
<p className="ellipsis-2">习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源, sunt in culpa qui officia deserunt mollit id est laborum.</p>
|
||||
<span>2021-09-13</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -73,7 +73,7 @@ function SecondSection({ community }) {
|
|||
<h3>加快推进</h3>
|
||||
<span className="slide-tag slide-tag-red">热点资讯</span>
|
||||
</div>
|
||||
<p>加快推进国防科技创新加优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出.</p>
|
||||
<p className="ellipsis-2">加快推进国防科技创新加优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出.</p>
|
||||
<span>2021-09-15</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -83,7 +83,7 @@ function SecondSection({ community }) {
|
|||
<h3>加快推进国防科技创新</h3>
|
||||
<span className="slide-tag slide-tag-yellow">热点资讯</span>
|
||||
</div>
|
||||
<p>习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出</p>
|
||||
<p className="ellipsis-2">习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出</p>
|
||||
<span>2021-09-12</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -93,7 +93,7 @@ function SecondSection({ community }) {
|
|||
<h3>加快推进国防科技创新</h3>
|
||||
<span className="slide-tag slide-tag-red">热点资讯</span>
|
||||
</div>
|
||||
<p>加快推进国防科技创新加优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出.</p>
|
||||
<p className="ellipsis-2">加快推进国防科技创新加优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出.</p>
|
||||
<span>2021-09-15</span>
|
||||
</div>
|
||||
</Slider>
|
||||
|
|
@ -117,4 +117,4 @@ function SecondSection({ community }) {
|
|||
)
|
||||
}
|
||||
|
||||
export default SecondSection;
|
||||
export default memo(SecondSection);
|
||||
|
|
@ -11,16 +11,13 @@
|
|||
}
|
||||
|
||||
.community-main {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 1200px;
|
||||
max-width: 98%;
|
||||
margin: 20px auto 50px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.community-english {
|
||||
text-align: left;
|
||||
font-size: 20px;
|
||||
opacity: 0.88;
|
||||
color: #e67a21;
|
||||
|
|
@ -41,6 +38,7 @@
|
|||
width: 600px;
|
||||
padding-right: 20px;
|
||||
opacity: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.community-left-content {
|
||||
font-size: 15px;
|
||||
|
|
@ -50,10 +48,6 @@
|
|||
line-height: 36px;
|
||||
}
|
||||
|
||||
.dynamic-more {
|
||||
margin-top: 40px;
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.community-active {
|
||||
position: relative;
|
||||
|
|
@ -108,9 +102,7 @@
|
|||
h3 {
|
||||
color: #000870;
|
||||
font-size: 18px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
margin-bottom: 0 !important;
|
||||
flex: auto;
|
||||
}
|
||||
|
|
@ -149,13 +141,7 @@
|
|||
|
||||
p {
|
||||
color: #3c476e;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
}
|
||||
}
|
||||
.slick-center {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
import React, { memo } from 'react';
|
||||
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 head1 from '../img/7-head1.png';
|
||||
import head2 from '../img/7-head2.png';
|
||||
import head3 from '../img/7-head3.png';
|
||||
import head4 from '../img/7-head4.png';
|
||||
import head5 from '../img/7-head5.png';
|
||||
import head6 from '../img/7-head6.png';
|
||||
import head7 from '../img/7-head7.png';
|
||||
|
||||
import './index.scss';
|
||||
|
||||
|
||||
let setting = {
|
||||
infinite: true,
|
||||
speed: 750,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
pauseOnDotsHover: true,
|
||||
autoplaySpeed: 2000,
|
||||
centerMode: true,
|
||||
centerPadding: "0px",
|
||||
autoplay: true,
|
||||
arrows: false,
|
||||
}
|
||||
|
||||
function SeventhSection() {
|
||||
return (
|
||||
<div className="homepage-main seventh-main">
|
||||
<h2 className="homePage-blue-tit">论坛交流</h2>
|
||||
<h4 className="homePage-subhead">论坛交流版块通过技术交流、学术探讨等方式，为社区用户提供自主交流空间，实现思维碰撞和智慧融合</h4>
|
||||
<Line />
|
||||
<div class="clients">
|
||||
<img class="client" src={head2} alt="images-not_found"/>
|
||||
<img class="client" src={head3} alt="images-not_found"/>
|
||||
<img class="client" src={head4} alt="images-not_found"/>
|
||||
<img class="client" src={head5} alt="images-not_found"/>
|
||||
<img class="client" src={head6} alt="images-not_found"/>
|
||||
<img class="client" src={head7} alt="images-not_found"/>
|
||||
</div>
|
||||
<Slider {...setting}>
|
||||
<div className="issue-item" key={1}>
|
||||
<img className="author-head" src={head1} />
|
||||
<span className="issue-author">opersou</span>
|
||||
<h3 className="issue-title ellipsis-1">Linux基金会发布《2021开源职业报告》提出新的方案，促进人才成长合作发展</h3>
|
||||
<p className="issue-content ellipsis-8">新冠疫情的大规模爆发对社会经济、人民生活各方面均造成较大影响，众多企业面临劳动用工、合同履约以及银行信贷三重危机。而今，世界各地经济正逐渐从新冠疫情常态化趋势下复苏，后疫情时代中雇佣模式的转变，对劳动关系领域带来了新挑战，这一变化与挑战在科技领域尤为凸显。当云原生技术的加速应用成为远程化工作的主流，使得相关信息化人才缺口在本次全球化疫情中更加恶化。
|
||||
新冠疫情的大规模爆发对社会经济、人民生活各方面均造成较大影响，众多企业面临劳动用工、合同履约以及银行信贷三重危机。而今，世界各地经济正逐渐从新冠疫情常态化趋势下复苏，后疫情时代中雇佣模式的转变，对劳动关系领域带来了新挑战，这一变化与挑战在科技领域尤为凸显。当云原生技术的加速应用成为远程化工作的主流，使得相关信息化人才缺口在本次全球化疫情中更加恶化。</p>
|
||||
<span className="issue-time">2021-09-13</span>
|
||||
</div>
|
||||
|
||||
<div className="issue-item" key={2}>
|
||||
<img className="author-head" src={head2} />
|
||||
<span className="issue-name">李刚</span>
|
||||
<h3 className="issue-title ellipsis-1">Linux基金会发布《2021开源职业报告》</h3>
|
||||
<p className="issue-content ellipsis-8">新冠疫情的大规模爆发对社会经济、人民生活各方面均造成较大影响，众多企业面临劳动用工、合同履约以及银行信贷三重危机。而今，世界各地经济正逐渐从新冠疫情常态化趋势下复苏，后疫情时代中雇佣模式的转变，对劳动关系领域带来了新挑战，这一变化与挑战在科技领域尤为凸显。当云原生技术的加速应用成为远程化工作的主流，使得相关信息化人才缺口在本次全球化疫情中更加恶化。
|
||||
新冠疫情的大规模爆发对社会经济、人民生活各方面均造成较大影响，众多企业面临劳动用工、合同履约以及银行信贷三重危机。而今，世界各地经济正逐渐从新冠疫情常态化趋势下复苏，后疫情时代中雇佣模式的转变，对劳动关系领域带来了新挑战，这一变化与挑战在科技领域尤为凸显。当云原生技术的加速应用成为远程化工作的主流，使得相关信息化人才缺口在本次全球化疫情中更加恶化。</p>
|
||||
<span className="issue-time">2021-09-13</span>
|
||||
</div>
|
||||
|
||||
</Slider>
|
||||
|
||||
<Button className="homepage-btn" type="primary">参与交流</Button>
|
||||
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(SeventhSection);
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
.home-seventh-section {
|
||||
background: linear-gradient(#fff 0%, #cbdcff 100%);
|
||||
text-align: center;
|
||||
padding-top: 40px;
|
||||
|
||||
.seventh-main{
|
||||
position: relative;
|
||||
}
|
||||
.clients{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
left: 0;
|
||||
bottom: 40px;
|
||||
z-index: 10;
|
||||
.client{
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.client:nth-child(1){
|
||||
top:0;
|
||||
left: 0;
|
||||
animation: zoomin .9s infinite alternate;
|
||||
}
|
||||
.client:nth-child(2){
|
||||
top:190px;
|
||||
left: -115px;
|
||||
animation: zoomin 1.3s infinite alternate;
|
||||
}
|
||||
.client:nth-child(3){
|
||||
left: 0;
|
||||
bottom: 70px;
|
||||
animation: zoomin 1.6s infinite alternate;
|
||||
}
|
||||
.client:nth-child(4){
|
||||
top: 40px;
|
||||
right: 0;
|
||||
animation: zoomin 1.9s infinite alternate;
|
||||
}
|
||||
.client:nth-child(5){
|
||||
right: -85px;
|
||||
bottom: 135px;
|
||||
animation: zoomin 2.1s infinite alternate;
|
||||
}
|
||||
.client:nth-child(6){
|
||||
right: 240px;
|
||||
bottom: 40px;
|
||||
animation: zoomin 1.6s infinite alternate;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slider {
|
||||
margin: 40px auto 20px;
|
||||
height: 480px;
|
||||
background: url(../img/7-bg.png) no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
.slick-list {
|
||||
width: 540px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.issue-item {
|
||||
text-align: center;
|
||||
|
||||
.author-head {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.issue-author {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #ff7300;
|
||||
line-height: 28px;
|
||||
}
|
||||
.issue-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #000870;
|
||||
line-height: 28px;
|
||||
}
|
||||
.issue-content {
|
||||
text-align: left;
|
||||
text-indent: 2em;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: #3c476e;
|
||||
line-height: 28px;
|
||||
}
|
||||
.issue-time {
|
||||
height: 28px;
|
||||
font-size: 15px;
|
||||
color: #3c476e;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomin {
|
||||
0% {
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import React, { memo } from 'react';
|
||||
import { Button } from 'antd';
|
||||
import Line from '../Line';
|
||||
import completeIcon1 from '../img/6-completeIcon1.png';
|
||||
import completeIcon2 from '../img/6-completeIcon2.png';
|
||||
import completeIcon3 from '../img/6-completeIcon3.png';
|
||||
import ball from '../img/6-ball.png';
|
||||
import cup from '../img/6-cup.png';
|
||||
import yLetter from '../img/6-y.png';
|
||||
import net from '../img/6-net.png';
|
||||
import overall from '../img/6-overall.png';
|
||||
import pillar1 from '../img/6-pillar1.png';
|
||||
import pillar2 from '../img/6-pillar2.png';
|
||||
import pillar3 from '../img/6-pillar3.png';
|
||||
|
||||
|
||||
import './index.scss';
|
||||
|
||||
function SixthSection({ sixth }) {
|
||||
return (
|
||||
<div className="grid-picture">
|
||||
<div className="homepage-main sixth-main">
|
||||
|
||||
<div className={sixth ? "active complete-des" : "complete-des"}>
|
||||
|
||||
<div className="des-item">
|
||||
<img className="des-item-img" src={completeIcon1}></img>
|
||||
<div className="des-item-content">
|
||||
<h4 className="des-item-title ellipsis-1">CCKS 2021</h4>
|
||||
<p className="des-item-time">竞赛时间：2021.05.17-2021.07.20</p>
|
||||
<p className="des-item-intro ellipsis-2">赛事简介： 本次评测任务，探索能够落地见效的无人机领域知识图谱构建技术，促进技术发展，时代进步，技术进步</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="des-item">
|
||||
<img className="des-item-img" src={completeIcon2}></img>
|
||||
<div className="des-item-content">
|
||||
<h4 className="des-item-title ellipsis-1">CCKS 2021</h4>
|
||||
<p className="des-item-time">竞赛时间：2021.05.17-2021.07.20</p>
|
||||
<p className="des-item-intro ellipsis-2">赛事简介： 本次评测任务，探索能够落地见效的无人机领域知识图谱构建技术，促进技术发展，时代进步，技术进步</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="des-item">
|
||||
<img className="des-item-img" src={completeIcon3}></img>
|
||||
<div className="des-item-content">
|
||||
<h4 className="des-item-title ellipsis-1">CCKS 2021 探索能够落地见效的无人机领域知识图谱构建技术</h4>
|
||||
<p className="des-item-time">竞赛时间：2021.05.17-2021.07.20</p>
|
||||
<p className="des-item-intro ellipsis-2">赛事简介： 本次评测任务，探索能够落地见效的无人机领域知识图谱构建技术，促进技术发展，时代进步，技术进步</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sixth-right">
|
||||
<div className="sixth-right-title">
|
||||
<h2 className="homePage-white-tit">开放竞赛</h2>
|
||||
<h4 className="homePage-white-subhead">开放竞赛版块通过赛事和学术活动组织，为验证技术成果、挖掘优秀人才提供有效途径</h4>
|
||||
<Line />
|
||||
</div>
|
||||
|
||||
<div className="sixth-play-img">
|
||||
<img className="overall" src={overall}></img>
|
||||
<img className="ball" src={ball}></img>
|
||||
<img className="cup" src={cup}></img>
|
||||
<img className="net" src={net}></img>
|
||||
<img className="yLetter" src={yLetter}></img>
|
||||
<img className="pillar3" src={pillar3}></img>
|
||||
<img className="pillar2" src={pillar2}></img>
|
||||
<img className="pillar1" src={pillar1}></img>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<Button className="homepage-btn" type="primary">我要参赛</Button>
|
||||
<svg className="waves"
|
||||
viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
||||
<defs>
|
||||
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
<g className="parallax">
|
||||
<use xlinkHref="#wave-path" x="50" y="3" fill="rgba(255,255,255,0.5)" />
|
||||
<use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.4)" />
|
||||
<use xlinkHref="#wave-path" x="50" y="9" fill="#fff" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default memo(SixthSection);
|
||||
|
|
@ -0,0 +1,295 @@
|
|||
.home-sixth-section {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
background: linear-gradient(#041670 0%, #2951da 100%);
|
||||
text-align: center;
|
||||
.grid-picture {
|
||||
background: url(../img/grid.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.sixth-main {
|
||||
display: flex;
|
||||
padding-top: 10vh;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.des-item {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
margin: 30px 0;
|
||||
align-items: center;
|
||||
width: 480px;
|
||||
height: 170px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
box-shadow: 0px 0px 10px 5px rgba(38, 118, 255, 0.04);
|
||||
border-radius: 10px;
|
||||
border: 1px transparent solid;
|
||||
border-image: linear-gradient(
|
||||
to right,
|
||||
rgba(255, 255, 255, 0.2),
|
||||
rgba(255, 255, 255, 1),
|
||||
rgba(255, 255, 255, 0.2)
|
||||
)
|
||||
1 10;
|
||||
// &:after{
|
||||
// content:'';
|
||||
// position: absolute;
|
||||
// top: -3px; bottom: -3px;
|
||||
// left: -3px; right: -3px;
|
||||
// background: linear-gradient(to right,rgba(255,255,255,.5),rgba(255,255,255,1),rgba(255,255,255,.5));
|
||||
// border-radius: 10px;
|
||||
// content: '';
|
||||
// z-index: -1;
|
||||
// }
|
||||
}
|
||||
|
||||
.des-item:nth-child(2) {
|
||||
margin: 60px 0 0 20px;
|
||||
}
|
||||
|
||||
.des-item:nth-child(3) {
|
||||
margin: 60px 0 0 40px;
|
||||
}
|
||||
|
||||
.des-item-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.des-item-content {
|
||||
width: 348px;
|
||||
text-align: left;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
.des-item-title {
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #ff9931;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.sixth-right {
|
||||
width: 680px;
|
||||
overflow: visible;
|
||||
}
|
||||
.sixth-right-title {
|
||||
margin-left: 80px;
|
||||
width: 450px;
|
||||
text-align: left;
|
||||
|
||||
.home-line {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.sixth-play-img {
|
||||
width: 781px;
|
||||
position: relative;
|
||||
|
||||
.ball {
|
||||
position: absolute;
|
||||
top: 300px;
|
||||
left: 110px;
|
||||
z-index: 1;
|
||||
width: 33px;
|
||||
animation: ball infinite 5s linear;
|
||||
}
|
||||
|
||||
.cup {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 45%;
|
||||
z-index: 1;
|
||||
width: 92px;
|
||||
animation: cup infinite 4s;
|
||||
}
|
||||
|
||||
.net {
|
||||
position: absolute;
|
||||
top: 9%;
|
||||
left: 22%;
|
||||
z-index: 1;
|
||||
width: 60px;
|
||||
animation: net infinite 4s 1s;
|
||||
}
|
||||
|
||||
.yLetter {
|
||||
position: absolute;
|
||||
top: 6%;
|
||||
right: 17%;
|
||||
z-index: 1;
|
||||
width: 55px;
|
||||
animation: yLetter infinite 4s 1.5s;
|
||||
}
|
||||
|
||||
.pillar1 {
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
left: 43%;
|
||||
z-index: 1;
|
||||
width: 36px;
|
||||
height: 42px;
|
||||
animation: pillar1 infinite 3s;
|
||||
}
|
||||
.pillar2 {
|
||||
position: absolute;
|
||||
bottom: 12%;
|
||||
left: 40%;
|
||||
z-index: 1;
|
||||
width: 28px;
|
||||
height: 50px;
|
||||
animation: pillar2 infinite 3s;
|
||||
}
|
||||
.pillar3 {
|
||||
position: absolute;
|
||||
bottom: 12%;
|
||||
left: 42%;
|
||||
z-index: 1;
|
||||
width: 28px;
|
||||
height: 59px;
|
||||
animation: pillar3 infinite 3s;
|
||||
}
|
||||
}
|
||||
|
||||
.overall {
|
||||
width: 759px;
|
||||
}
|
||||
|
||||
.homepage-btn{
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.waves {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.complete-des.active {
|
||||
.des-item {
|
||||
animation: showTop 1s 1 forwards;
|
||||
}
|
||||
.des-item:nth-child(2) {
|
||||
animation: showTop 1s 1 .75s forwards;
|
||||
}
|
||||
.des-item:nth-child(3) {
|
||||
animation: showTop 1s 1 1.5s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes showTop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
top: 30vh;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ball {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cup {
|
||||
0% {
|
||||
top: 12%;
|
||||
}
|
||||
45% {
|
||||
top: 20%;
|
||||
}
|
||||
55% {
|
||||
top: 20%;
|
||||
}
|
||||
100% {
|
||||
top: 12%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes net {
|
||||
0% {
|
||||
top: 2%;
|
||||
}
|
||||
45% {
|
||||
top: 9%;
|
||||
}
|
||||
55% {
|
||||
top: 9%;
|
||||
}
|
||||
100% {
|
||||
top: 2%;
|
||||
}
|
||||
}
|
||||
@keyframes yLetter {
|
||||
0% {
|
||||
top: 0%;
|
||||
}
|
||||
45% {
|
||||
top: 6%;
|
||||
}
|
||||
55% {
|
||||
top: 6%;
|
||||
}
|
||||
100% {
|
||||
top: 0%;
|
||||
}
|
||||
}
|
||||
@keyframes pillar1 {
|
||||
0% {
|
||||
height: 40px;
|
||||
}
|
||||
48% {
|
||||
height: 32px;
|
||||
}
|
||||
52% {
|
||||
height: 32px;
|
||||
}
|
||||
100% {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pillar2 {
|
||||
0% {
|
||||
height: 40px;
|
||||
}
|
||||
48% {
|
||||
height: 65px;
|
||||
}
|
||||
52% {
|
||||
height: 65px;
|
||||
}
|
||||
100% {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pillar3 {
|
||||
0% {
|
||||
height: 65px;
|
||||
}
|
||||
48% {
|
||||
height: 40px;
|
||||
}
|
||||
52% {
|
||||
height: 40px;
|
||||
}
|
||||
100% {
|
||||
height: 65px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { memo } from 'react';
|
||||
import CountUp from 'react-countup';
|
||||
import Line from '../Line';
|
||||
import './index.scss';
|
||||
|
|
@ -14,7 +14,7 @@ function ThirdSection({third}) {
|
|||
<div className="ball-background">
|
||||
<h2 className="third-tit">数据统计总览</h2>
|
||||
<Line />
|
||||
<div className="third-main ">
|
||||
<div className="homepage-main third-main ">
|
||||
{/* <div className={`third-main ${third?'third-active':''}`}> */}
|
||||
<div className="circle-item">
|
||||
<div className="circle-item-box">
|
||||
|
|
@ -81,4 +81,4 @@ function ThirdSection({third}) {
|
|||
)
|
||||
}
|
||||
|
||||
export default ThirdSection;
|
||||
export default memo(ThirdSection);
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
.ball-background{
|
||||
background: url(../img/ballBg.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.third-tit {
|
||||
padding-top: 1.75em;
|
||||
|
|
@ -19,7 +19,6 @@
|
|||
.third-main {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 1200px;
|
||||
max-width: 100%;
|
||||
min-height: 35vh;
|
||||
margin: 40px auto;
|
||||
|
|
@ -153,6 +152,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.waves{
|
||||
position: relative;
|
||||
bottom: -10px;
|
||||
}
|
||||
|
||||
@keyframes dashCircle {
|
||||
0% {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 751 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
|
|
@ -1,12 +1,16 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';
|
||||
import './index.scss';
|
||||
|
||||
import FirstSection from './FirstSection';
|
||||
import SecondSection from './SecondSection';
|
||||
import ThirdSection from './ThirdSection';
|
||||
import FourthSection from './FourthSection';
|
||||
import FifthSection from './FifthSection';
|
||||
import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';
|
||||
import SixthSection from './SixthSection';
|
||||
import SeventhSection from './SeventhSection';
|
||||
import Footer from './Footer';
|
||||
|
||||
import './index.scss';
|
||||
|
||||
function HomePage(props) {
|
||||
|
||||
|
|
@ -17,46 +21,81 @@ function HomePage(props) {
|
|||
};
|
||||
}, []);
|
||||
|
||||
const [firstSection, setFirstSection] = useState(true);
|
||||
const [community, setCommunity] = useState(false);
|
||||
const [first, setFirst] = useState(true);
|
||||
const [second, setSecond] = useState(false);
|
||||
const [third, setThird] = useState(false);
|
||||
const [fourth, setFourth] = useState(false);
|
||||
const [fifth, setFifth] = useState(false);
|
||||
const [sixth, setSixth] = useState(false);
|
||||
|
||||
|
||||
|
||||
|
||||
function scrollListener() {
|
||||
let clientHeight=document.body.clientHeight;
|
||||
let communityEdition = document.querySelector(".home-second-section").offsetTop;
|
||||
let clientHeight = document.body.clientHeight;
|
||||
let secondSection = document.querySelector(".home-second-section").offsetTop;
|
||||
let thirdSection = document.querySelector(".home-third-section").offsetTop;
|
||||
let fourthSection = document.querySelector(".home-fourth-section").offsetTop;
|
||||
let fifthSection = document.querySelector(".home-fifth-section").offsetTop;
|
||||
let sixthSection = document.querySelector(".home-sixth-section").offsetTop;
|
||||
let seventhSection = document.querySelector(".home-seventh-section").offsetTop;
|
||||
|
||||
|
||||
let top = document.documentElement.scrollTop;
|
||||
console.log("communityEdition:" + communityEdition);
|
||||
|
||||
console.log("thirdSection:" + thirdSection);
|
||||
console.log("thirdSection:" + thirdSection);
|
||||
console.log("fourthSection:" + fourthSection);
|
||||
console.log("fifthSection:" + fifthSection);
|
||||
console.log("sixthSection:" + sixthSection);
|
||||
console.log("seventhSection:" + seventhSection);
|
||||
console.log("top:" + top);
|
||||
|
||||
// 第一个动效
|
||||
if(top>=clientHeight-100){
|
||||
setFirstSection(false);
|
||||
}else{
|
||||
setFirstSection(true);
|
||||
if (top >= clientHeight - 100) {
|
||||
setFirst(false);
|
||||
} else {
|
||||
setFirst(true);
|
||||
}
|
||||
|
||||
// 第二个动效
|
||||
if ( top >= communityEdition - 600 && top < thirdSection) {
|
||||
setCommunity(true);
|
||||
if (top >= secondSection - 600 && top < thirdSection) {
|
||||
setSecond(true);
|
||||
}
|
||||
if (top < 100 || top > thirdSection - 100) {
|
||||
setCommunity(false);
|
||||
setSecond(false);
|
||||
}
|
||||
|
||||
// 第三个动效
|
||||
if (top >= thirdSection - 600 && top < fourthSection) {
|
||||
setThird(true);
|
||||
}
|
||||
if (top < communityEdition || top > fourthSection - 100) {
|
||||
if (top < secondSection || top > fourthSection - 100) {
|
||||
setThird(false);
|
||||
}
|
||||
|
||||
// 第四个动效
|
||||
if (top >= fourthSection - 600 && top < fifthSection) {
|
||||
setFourth(true);
|
||||
}
|
||||
if (top < thirdSection || top > fifthSection) {
|
||||
setFourth(false);
|
||||
}
|
||||
|
||||
// 第五个动效
|
||||
if (top >= fifthSection - 600 && top < sixthSection) {
|
||||
setFifth(true);
|
||||
}
|
||||
if (top < fourthSection || top > sixthSection) {
|
||||
setFifth(false);
|
||||
}
|
||||
|
||||
// 第六个动效
|
||||
if (top >= sixthSection - 400 && top < seventhSection - 100) {
|
||||
setSixth(true);
|
||||
}
|
||||
if (top < fifthSection || top > seventhSection - 100) {
|
||||
setSixth(false);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -65,28 +104,39 @@ function HomePage(props) {
|
|||
<div className="homePage">
|
||||
|
||||
<div className="home-first-section">
|
||||
<FirstSection firstSection={firstSection}/>
|
||||
<FirstSection first={first} />
|
||||
</div>
|
||||
|
||||
|
||||
<div className="home-second-section">
|
||||
<SecondSection community={community} />
|
||||
<SecondSection second={second} />
|
||||
</div>
|
||||
|
||||
|
||||
<div className="home-third-section">
|
||||
<ThirdSection third={third}/>
|
||||
<ThirdSection third={third} />
|
||||
</div>
|
||||
|
||||
<div className="home-fourth-section">
|
||||
<FourthSection />
|
||||
<FourthSection fourth={fourth} />
|
||||
</div>
|
||||
|
||||
<div className="home-fifth-section">
|
||||
<FifthSection />
|
||||
<FifthSection fifth={fifth} />
|
||||
</div>
|
||||
|
||||
<div className="home-sixth-section">
|
||||
<SixthSection sixth={sixth} />
|
||||
</div>
|
||||
|
||||
<div className="home-seventh-section">
|
||||
<SeventhSection />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TPMIndexHOC(HomePage);
|
||||
export default TPMIndexHOC(HomePage, { noFooter: true });
|
||||
|
|
|
|||
|
|
@ -1,7 +1,37 @@
|
|||
.homePage {
|
||||
background: #fff;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
|
||||
// 首页多个部分公共样式
|
||||
|
||||
// 1行省略号
|
||||
.ellipsis-1 {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
// 2行省略号
|
||||
.ellipsis-2 {
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
// 8行省略号
|
||||
.ellipsis-8 {
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 8;
|
||||
line-clamp: 8;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
background-color: #4154f1;
|
||||
border-color: #4154f1;
|
||||
|
|
@ -9,10 +39,21 @@
|
|||
box-shadow: 0px 0px 9px 2px rgba(65, 84, 241, 0.33) !important;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.homepage-btn {
|
||||
width: 140px;
|
||||
height: 56px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.homepage-main {
|
||||
width: 1200px;
|
||||
max-width: 98%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.homePage-blue-tit {
|
||||
color: #000870;
|
||||
font-size: 34px;
|
||||
|
|
@ -24,6 +65,21 @@
|
|||
color: #666;
|
||||
}
|
||||
|
||||
.homePage-white-tit {
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.homePage-white-subhead {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
line-height: 27px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
// 首页特定头部样式起
|
||||
|
||||
&.newHeaders {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import LoginDialog from '../login/LoginDialog';
|
|||
import AccountProfile from '../user/AccountProfile';
|
||||
import AccountPhoneemail from '../user/AccountPhoneemail';
|
||||
|
||||
export function TPMIndexHOC(WrappedComponent) {
|
||||
export function TPMIndexHOC(WrappedComponent, headFoot) {
|
||||
return class II extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -153,7 +153,7 @@ export function TPMIndexHOC(WrappedComponent) {
|
|||
this.gettablogourlnull();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
fetchUsers = () => {
|
||||
let url = `/users/get_user_info.json`;
|
||||
axios.get(url).then((response) => {
|
||||
|
|
@ -405,13 +405,16 @@ export function TPMIndexHOC(WrappedComponent) {
|
|||
>
|
||||
</WrappedComponent>
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
</Spin>
|
||||
<NewFooter
|
||||
{...this.state} {...this.props}
|
||||
Footerdown={Footerdown}
|
||||
/>
|
||||
{
|
||||
headFoot && headFoot.noFooter ? "" :
|
||||
<NewFooter
|
||||
{...this.state} {...this.props}
|
||||
Footerdown={Footerdown}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue