forked from Gitlink/forgeplus-react
gitlink首页-第一版
This commit is contained in:
caishi
parent
d4690cc8b5
commit
7d087ec1f2
|
|
@ -363,7 +363,7 @@ li.ant-menu-item{
|
|||
color: #333;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 10px!important;
|
||||
a{
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
import React , { useEffect } from 'react';
|
||||
import Beijing from './Img/unit/beijing.png';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const list = [
|
||||
{image_url:Beijing, name:"111",src:""},
|
||||
{image_url:Beijing, name:"111",src:""},
|
||||
{image_url:Beijing, name:"222",src:""},
|
||||
{image_url:Beijing, name:"111",src:""},
|
||||
{image_url:Beijing, name:"222",src:""},
|
||||
{image_url:Beijing, name:"111",src:""},
|
||||
{image_url:Beijing, name:"222",src:""},
|
||||
{image_url:Beijing, name:"222",src:""},
|
||||
{image_url:Beijing, name:"222",src:""},
|
||||
{image_url:Beijing, name:"222",src:""},
|
||||
{image_url:Beijing, name:"222",src:""},
|
||||
{image_url:Beijing, name:"222",src:""},
|
||||
]
|
||||
|
||||
function FifthEdition() {
|
||||
|
||||
useEffect(()=>{
|
||||
if(list.length>10){
|
||||
Init();
|
||||
}
|
||||
},[])
|
||||
|
||||
function Init() {
|
||||
let box = document.getElementById('scrollBox1');
|
||||
scrollUp();
|
||||
var myTimer = setInterval(scrollUp, 10);
|
||||
// 鼠标移入container 元素上 清除定时器 停止滚动
|
||||
box.onmouseover = () => {
|
||||
clearInterval(myTimer);
|
||||
}
|
||||
// 鼠标移出container 元素上 继续滚动
|
||||
// 60表示每隔60毫秒向上滚动一次
|
||||
box.onmouseout = () => {
|
||||
myTimer = setInterval(scrollUp, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function scrollUp() {
|
||||
let box = document.getElementById('scrollBox1');
|
||||
if(box){
|
||||
let con1 = document.getElementById('box1');
|
||||
if (box.scrollLeft >= con1.clientWidth) {
|
||||
box.scrollLeft = 0;
|
||||
} else {
|
||||
box.scrollLeft++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return(
|
||||
<div id={"scrollBox1"}>
|
||||
<ul className="fifthList" id="box1">
|
||||
{
|
||||
list && list.map((i,k)=>{
|
||||
return(
|
||||
<li><Link to={i.src}><img src={i.image_url} alt={i.name}/></Link></li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
{list.length > 10 &&
|
||||
<ul className="fifthList" id="box2">
|
||||
{
|
||||
list && list.map((i,k)=>{
|
||||
return(
|
||||
<li><Link to={i.src}><img src={i.image_url} alt={i.name}/></Link></li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default FifthEdition;
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import React from 'react';
|
||||
import Img from './Img/gitlink.png'
|
||||
|
||||
function Footnav() {
|
||||
return(
|
||||
<div className="footEdition">
|
||||
<div className="footContent">
|
||||
<ul className="center">
|
||||
<img src={Img} alt="Gitlink（确实开源）" height="29px"/>
|
||||
<p>（确实开源）</p>
|
||||
</ul>
|
||||
<ul>
|
||||
<li className="thehead">社区</li>
|
||||
<li><a>网站首页</a></li>
|
||||
<li><a>帮助中心</a></li>
|
||||
<li><a>论坛交流</a></li>
|
||||
<li><a>合作伙伴</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li className="thehead">支持与服务</li>
|
||||
<li><a>API文档</a></li>
|
||||
<li><a>Git常用命令</a></li>
|
||||
<li><a>DevOps使用文档</a></li>
|
||||
<li><a>服务协议</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li className="thehead">加入我们</li>
|
||||
<li className="theline">
|
||||
<div className="mr50">
|
||||
<li>公众号</li>
|
||||
<img src={Img} alt="公众号"/>
|
||||
</div>
|
||||
<div>
|
||||
<li>qq群</li>
|
||||
<img src={Img} alt="qq群"/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className="copyrightDesc">©Copyright 2007～2021 国防科技大学Gitlink团队 & IntelliDE <br/>湘ICP备 17009477号</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Footnav;
|
||||
|
|
@ -1,15 +1,18 @@
|
|||
import React from 'react';
|
||||
import './Index.scss';
|
||||
import gitlink from './Img/gitlink.png';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function HeadNav() {
|
||||
return(
|
||||
<div className="headNav">
|
||||
<div className="headNavDiv">
|
||||
<ul className="headlist">
|
||||
<li>协同开发</li>
|
||||
<li>教学实践</li>
|
||||
<li>论坛交流</li>
|
||||
<li>关于我们</li>
|
||||
<li><img src={gitlink} alt="gitlink" height="37px" style={{marginRight:"15px"}}/></li>
|
||||
<li><Link to={`/explore`}>协同开发</Link></li>
|
||||
<li><a href="https://forum.trustie.net/forums/4701/detail">教学实践</a></li>
|
||||
<li><a href="https://forum.trustie.net/forums">论坛交流</a></li>
|
||||
<li><a href="https://forgeplus.trustie.net/Gitlink/forgeplus/about">关于我们</a></li>
|
||||
</ul>
|
||||
<div>
|
||||
<a className="color-white">登录</a>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 232 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 483 KiB After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 397 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 334 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 277 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 882 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React , { useEffect , useState } from 'react';
|
||||
import "./Index.scss";
|
||||
import HeadNav from './Headnav';
|
||||
import TopEdition from './TopEdition';
|
||||
|
|
@ -6,12 +6,27 @@ import ThirdEdition from './ThirdEdition';
|
|||
import { Anchor } from 'antd';
|
||||
import F41 from './Img/4-1.png';
|
||||
import F42 from './Img/4-2.png';
|
||||
import F43 from './Img/4-1.png';
|
||||
import F44 from './Img/4-2.png';
|
||||
import F43 from './Img/4-3.png';
|
||||
import F44 from './Img/4-4.png';
|
||||
import SecondEdition from './SecondEdition';
|
||||
import FifthEdition from './FifthEdition';
|
||||
import Footnav from './Footnav';
|
||||
|
||||
|
||||
function Index(props) {
|
||||
const [ value , setValue ] = useState("");
|
||||
|
||||
function changeActive(params) {
|
||||
if(params){
|
||||
setValue(params);
|
||||
let h = params.split("#")[1];
|
||||
let t = document.getElementById(h).offsetTop;
|
||||
document.documentElement.scrollTop = t-100;
|
||||
}else{
|
||||
setValue("");
|
||||
}
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="homePage">
|
||||
<div className="topEdition">
|
||||
|
|
@ -36,13 +51,13 @@ function Index(props) {
|
|||
<div className="secondEdition">
|
||||
<p className="theTitle">Gitlink，新一代开源创新服务平台</p>
|
||||
<Anchor>
|
||||
<li className="active"><a>分布式协作开发</a></li>
|
||||
<li><a>一站式过程管理</a></li>
|
||||
<li><a>高效流水线运维</a></li>
|
||||
<li><a>多层次代码分析</a></li>
|
||||
<li><a>多维度用户画像</a></li>
|
||||
<li onClick={()=>changeActive("#hadoop")} className={value === "#hadoop"?"active":""}><a>分布式协作开发</a></li>
|
||||
<li onClick={()=>changeActive("#oneStop")} className={value === "#oneStop"?"active":""}><a>一站式过程管理</a></li>
|
||||
<li onClick={()=>changeActive("#highDevops")} className={value === "#highDevops"?"active":""}><a>高效流水线运维</a></li>
|
||||
<li onClick={()=>changeActive("#multipleAnalyse")} className={value === "#multipleAnalyse"?"active":""}><a>多层次代码分析</a></li>
|
||||
<li onClick={()=>changeActive("#multidimensional")} className={value === "#multidimensional"?"active":""}><a>多维度用户画像</a></li>
|
||||
</Anchor>
|
||||
<SecondEdition />
|
||||
<SecondEdition {...props} setValue={setValue}/>
|
||||
</div>
|
||||
|
||||
<ThirdEdition />
|
||||
|
|
@ -77,7 +92,9 @@ function Index(props) {
|
|||
<div className="fifthEdition">
|
||||
<p className="title">开源生态</p>
|
||||
<p className="subtitle">Gitlink与各大企业、高校、科研机构开展广泛的技术合作，推动我国开源软件生态的快速构建与发展</p>
|
||||
<FifthEdition />
|
||||
</div>
|
||||
<Footnav />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
body{
|
||||
overflow: auto!important;
|
||||
background-color: #fff;
|
||||
background-color: #fff!important;
|
||||
}
|
||||
.homePage{
|
||||
background-color: #fff;
|
||||
|
|
@ -29,9 +29,12 @@ body{
|
|||
.headlist{
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
margin-left: 30px;
|
||||
li{
|
||||
margin-right: 38px;
|
||||
margin-right: 35px;
|
||||
font-size: 16px;
|
||||
a{
|
||||
color: #FFFFFF!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.regBtn{
|
||||
|
|
@ -65,6 +68,10 @@ body{
|
|||
background-size:cover;
|
||||
}
|
||||
.regform3{
|
||||
background:url('./Img/banner3.png') no-repeat center center;
|
||||
background-size:cover;
|
||||
}
|
||||
.regform4{
|
||||
background:url('./Img/banner4.png') no-repeat center center;
|
||||
background-size:cover;
|
||||
}
|
||||
|
|
@ -164,9 +171,13 @@ body{
|
|||
text-align: center;
|
||||
margin: 42px 0px 30px!important;
|
||||
}
|
||||
.ant-affix{
|
||||
background-color: #fff;
|
||||
}
|
||||
.ant-anchor-wrapper{
|
||||
width: 1200px;
|
||||
margin:0px auto;
|
||||
padding-left: 0px;
|
||||
.ant-anchor{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -208,7 +219,10 @@ body{
|
|||
background-size:cover;
|
||||
min-height: 753px;
|
||||
padding:50px 56px;
|
||||
display: flex;
|
||||
.hadoopCon{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.descBox{
|
||||
max-width: 352px;
|
||||
word-break: break-all;
|
||||
|
|
@ -239,9 +253,23 @@ body{
|
|||
margin-top: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.hadoopdesc{
|
||||
color: #FFFFFF;
|
||||
background: -webkit-linear-gradient(112deg, #FF8B75 0%, #DD2476 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
.oneStop{
|
||||
text-align: center;
|
||||
opacity: 0.3;
|
||||
transition: 2s;
|
||||
.oneStopContent{
|
||||
display: flex;
|
||||
.osLeftMain{
|
||||
|
|
@ -250,15 +278,6 @@ body{
|
|||
align-items: flex-start;
|
||||
position: relative;
|
||||
margin-bottom: 182px;
|
||||
.osleftPosi1,.osleftPosi2{
|
||||
position: absolute;
|
||||
right:10px;
|
||||
top:102px;
|
||||
}
|
||||
.osleftPosi2{
|
||||
top:217px;
|
||||
right:20px;
|
||||
}
|
||||
}
|
||||
.osRightMain{
|
||||
margin-left: 22px;
|
||||
|
|
@ -287,29 +306,279 @@ body{
|
|||
}
|
||||
}
|
||||
}
|
||||
.osleftPosi,.imgring{
|
||||
transition: 3s;
|
||||
opacity: 0;
|
||||
}
|
||||
.osleftPosi1,.osleftPosi2{
|
||||
position: absolute;
|
||||
right:-200px;
|
||||
top:102px;
|
||||
transition: 2s;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.osleftPosi2{
|
||||
top:317px;
|
||||
right:10px;
|
||||
transition: 2.5s;
|
||||
z-index: 2;
|
||||
}
|
||||
&.activeCode{
|
||||
opacity: 1;
|
||||
.osleftPosi,.osleftPosi1,.osleftPosi2{
|
||||
opacity: 1;
|
||||
}
|
||||
.osleftPosi1{
|
||||
right:10px;
|
||||
}
|
||||
.osleftPosi2{
|
||||
top:217px;
|
||||
}
|
||||
.imgring{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.highDevops{
|
||||
text-align: center;
|
||||
&.activeCode{
|
||||
.highDoContent img{
|
||||
opacity: 1;
|
||||
&.highImg1{
|
||||
left:10px;
|
||||
}
|
||||
&.highImg2{
|
||||
right:10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.highDoTitle{
|
||||
display: inline-block;
|
||||
height: 90px;
|
||||
line-height: 90px;
|
||||
padding: 0px 66px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
background: -webkit-linear-gradient(112deg, #D57CA0 0%, #4877F3 51%, #20C3EF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
position: relative;
|
||||
padding:2px;
|
||||
width: 384px;
|
||||
height: 90px;
|
||||
margin:7px auto 0px;
|
||||
border-radius: 10px;
|
||||
span{
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 380px;
|
||||
height: 86px;
|
||||
line-height: 86px;
|
||||
border-radius: 10px;
|
||||
left: 2px;
|
||||
top:2px;
|
||||
display: inline-block;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
background: -webkit-linear-gradient(1deg, #D57CA0 12%, #4877F3 57%, #20C3EF 76%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
&::before{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 380px;
|
||||
height: 86px;
|
||||
line-height: 86px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
content: "";
|
||||
top:2px;
|
||||
left: 2px;
|
||||
}
|
||||
&::after{
|
||||
position: absolute;
|
||||
top: -3px; bottom: -3px;
|
||||
left: -3px; right: -3px;
|
||||
background: linear-gradient(135deg,#000781, #23b7cb);
|
||||
border-radius: 30px;
|
||||
content: '';
|
||||
z-index: -1;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top:0px;
|
||||
left: 0px;
|
||||
border-radius: 10px;
|
||||
background: -webkit-linear-gradient(1deg, #D57CA0 12%, #4877F3 57%, #20C3EF 76%);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.highDoSubtitle{
|
||||
color: #637497;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 36px;
|
||||
width: 878px;
|
||||
margin:30px auto 28px;
|
||||
text-align: center;
|
||||
span{
|
||||
color: #1F1E1E;
|
||||
}
|
||||
}
|
||||
.highDoContent{
|
||||
background:url('./Img/2-3bg.png') no-repeat center center;
|
||||
background-size:cover;
|
||||
height: 920px;
|
||||
padding:20px 0px 114px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
&>div{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
img{
|
||||
opacity: 0;
|
||||
transition: 2.4s;
|
||||
}
|
||||
.highImg1,.highImg2{
|
||||
position: absolute;
|
||||
transition: 3s;
|
||||
}
|
||||
.highImg1{
|
||||
top:126px;
|
||||
left:-100px;
|
||||
}
|
||||
.highImg2{
|
||||
top:63px;
|
||||
right:-100px;
|
||||
}
|
||||
.highDoBottondesc{
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
line-height: 39px
|
||||
}
|
||||
}
|
||||
}
|
||||
.multipleAnalyse{
|
||||
background:url('./Img/2-4bg.png') no-repeat center center;
|
||||
background-size:cover;
|
||||
height: 710px;
|
||||
padding-left: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
opacity: 0.3;
|
||||
transition: 2s;
|
||||
&.activeCode{
|
||||
opacity: 1;
|
||||
.maContent{
|
||||
transform: rotateY(360deg);
|
||||
}
|
||||
}
|
||||
.title{
|
||||
display: inline-block;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 26px;
|
||||
background: -webkit-linear-gradient(1deg, #6D66FF 12%, #C148FF 57%, #F59F77 76%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
line-height: 50px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.maContent{
|
||||
height: 400px;
|
||||
width: 763px;
|
||||
background:url('./Img/2-4-1.png') no-repeat;
|
||||
background-size:100% 100%;
|
||||
margin:26px 0px;
|
||||
transition: 3s;
|
||||
}
|
||||
.desc{
|
||||
text-align: center;
|
||||
max-width: 869px;
|
||||
line-height: 30px;
|
||||
color:#69DAF5 ;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.multidimensional{
|
||||
background:url('./Img/2-5bg.png') no-repeat center center;
|
||||
background-size:cover;
|
||||
height: 1139px;
|
||||
padding:268px 0px 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
opacity: 0.3;
|
||||
transition: 1s;
|
||||
.multidimensinalhalf{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 447px;
|
||||
img{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: -20px;
|
||||
opacity: 0;
|
||||
transition: 3s;
|
||||
}
|
||||
.halfTitle{
|
||||
height: 50px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
line-height: 50px;
|
||||
background: -webkit-linear-gradient(112deg, #D57CA0 0%, #4877F3 51%, #20C3EF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 70px!important;
|
||||
}
|
||||
.halfsubTitle{
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 36px;
|
||||
color: #1E1E1E;
|
||||
span{
|
||||
color: #637497;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.activeCode{
|
||||
opacity: 1;
|
||||
.multidimensinalPart{
|
||||
img{
|
||||
left: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.multidimensinalhalf{
|
||||
img{
|
||||
left: 380px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.multidimensinalPart{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
position: relative;
|
||||
height: 396px;
|
||||
transition: 4s;
|
||||
img{
|
||||
position: absolute;
|
||||
left: 620px;
|
||||
bottom: -20px;
|
||||
opacity: 0;
|
||||
transition: 3s;
|
||||
}
|
||||
p{
|
||||
max-width: 345px;
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
color: #1E1E1E;
|
||||
span{
|
||||
color: #637497;
|
||||
}
|
||||
&:first-child{
|
||||
margin-bottom: 55px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -455,8 +724,8 @@ body{
|
|||
color: #fff!important;
|
||||
background-color: #466AFF;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 80px;
|
||||
font-size: 18px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.forthUl{
|
||||
display: flex;
|
||||
|
|
@ -509,4 +778,111 @@ body{
|
|||
margin-top: 13px;
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
#scrollBox1{
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
margin: 35px 0px 0px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
ul.fifthList{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
height: 300px;
|
||||
li{
|
||||
border-bottom: none;
|
||||
width: 300px;
|
||||
height: 120px;
|
||||
margin:15px 20px!important;
|
||||
background: linear-gradient(180deg, #F1F7FF 0%, #F7FAFF 53%, #FFFFFF 100%);
|
||||
box-shadow: 0px 1px 10px 3px rgba(0, 0, 0, 0.06);
|
||||
border-radius: 4px;
|
||||
border: 2px solid #FFFFFF;
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.footEdition{
|
||||
background-color: #171B23;
|
||||
.footContent{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding:86px 0px;
|
||||
justify-content: space-around;
|
||||
width: 1200px;
|
||||
margin:0px auto;
|
||||
ul{
|
||||
min-width: 120px;
|
||||
text-align: left;
|
||||
margin-right: 80px;
|
||||
&.center{
|
||||
text-align: center;
|
||||
}
|
||||
&>p{
|
||||
height: 22px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 22px;
|
||||
}
|
||||
&>img{
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 25px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
li{
|
||||
height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
color: #BDC2D1;
|
||||
margin-bottom: 15px!important;
|
||||
a{
|
||||
color: #BDC2D1!important;
|
||||
&:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&.thehead{
|
||||
height: 25px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
line-height: 25px;
|
||||
margin-bottom: 20px!important;
|
||||
}
|
||||
&.theline{
|
||||
display: flex;
|
||||
img{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.copyrightDesc{
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #BDC2D1;
|
||||
line-height: 28px;
|
||||
padding:15px 0px;
|
||||
text-align: center;
|
||||
background-color: #1B212C;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,21 +4,129 @@ import ImgHead from './Img/2-2-head.png';
|
|||
import Img2 from './Img/2-2-2.png';
|
||||
import Img3 from './Img/2-2-3.png';
|
||||
import Imgring from './Img/2-2-ring.png';
|
||||
import ImgS1 from './Img/2-3-1.png';
|
||||
import ImgS2 from './Img/2-3-2.png';
|
||||
import ImgS3 from './Img/2-3-3.png';
|
||||
import ImgS4 from './Img/2-3-4.png';
|
||||
import ImgM2 from './Img/2-6-2.png';
|
||||
import ImgM1 from './Img/2-5-1.png';
|
||||
import ImgM3 from './Img/2-5-2.png';
|
||||
import ImgM4 from './Img/2-6-1.png';
|
||||
import Codeafter from './Img/codeafter.png';
|
||||
import './code.scss';
|
||||
import { useEffect } from 'react';
|
||||
import { useState } from 'react';
|
||||
|
||||
function SecondEdition(params) {
|
||||
const code=[
|
||||
{str:<span><span className='code-green'>git remote</span> add origin https://git.trustie.net/Gitlink/Gitlink.git</span>},
|
||||
{str:<span><span className='code-red'>git push</span> -u origin master</span>},
|
||||
{str:<span><span className='code-green'>git branch</span> dev</span>},
|
||||
{str:<span><span className='code-blue'>git checkout</span> dev</span>},
|
||||
{str:<span><span className='code-green'>git add</span> .</span>},
|
||||
{str:<span><span className='code-red'>git commit</span> -m "xxx"</span>},
|
||||
{str:<span><span className='code-red'>git push</span> origin dev</span>},
|
||||
{str:<span><span className='code-blue'>git checkout</span> master</span>},
|
||||
{str:<span><span className='code-green'>git pull</span> origin master</span>},
|
||||
{str:<span><span className='code-green'>git merge</span> dev</span>},
|
||||
{str:<span><span className='code-red'>git push</span> origin master</span>}
|
||||
]
|
||||
|
||||
function SecondEdition({setValue}) {
|
||||
useEffect(()=>{
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
},[])
|
||||
|
||||
const [ hadoop , setHadoop ] = useState(false);
|
||||
const [ hadoopImg , setHadoopImg ] = useState(false);
|
||||
const [ highDevops , setHighDevops ] = useState(false);
|
||||
const [ multipleAnalyse , setMultipleAnalyse ] = useState(false);
|
||||
const [ multidimensional , setMultidimensional ] = useState(false);
|
||||
|
||||
const [ oneStop , setOneStop ] = useState(false);
|
||||
|
||||
function handleScroll() {
|
||||
let clientHeight = document.documentElement.clientHeight; //可视区域高度
|
||||
let scrollTop = document.documentElement.scrollTop; //滚动条滚动高度
|
||||
let f = checkPosi("hadoop",clientHeight,scrollTop);
|
||||
if(f){
|
||||
setValue("#hadoop");
|
||||
setHadoop(true);
|
||||
setTimeout(function() {
|
||||
setHadoopImg(true);
|
||||
},2300)
|
||||
}else{
|
||||
setHadoop(false);
|
||||
setHadoopImg(false);
|
||||
}
|
||||
let f1 = checkPosi("oneStop",clientHeight,scrollTop);
|
||||
if(f1){
|
||||
setValue("#oneStop");
|
||||
setOneStop(true);
|
||||
}else{
|
||||
setOneStop(false);
|
||||
setOneStop(false);
|
||||
}
|
||||
let f3 = checkPosi("highDevops",clientHeight,scrollTop);
|
||||
if(f3){
|
||||
setValue("#highDevops");
|
||||
setHighDevops(true);
|
||||
}else{
|
||||
setHighDevops(false);
|
||||
setHighDevops(false);
|
||||
}
|
||||
let f4 = checkPosi("multipleAnalyse",clientHeight,scrollTop);
|
||||
if(f4){
|
||||
setValue("#multipleAnalyse");
|
||||
setMultipleAnalyse(true);
|
||||
}else{
|
||||
setMultipleAnalyse(false);
|
||||
setMultipleAnalyse(false);
|
||||
}
|
||||
let f5 = checkPosi("multidimensional",clientHeight,scrollTop);
|
||||
if(f5){
|
||||
setValue("#multidimensional");
|
||||
setMultidimensional(true);
|
||||
}else{
|
||||
setMultidimensional(false);
|
||||
setMultidimensional(false);
|
||||
}
|
||||
}
|
||||
|
||||
function checkPosi(ele,clientHeight,scrollTop) {
|
||||
var a = document.getElementById(ele).offsetTop - scrollTop -(clientHeight/3);
|
||||
var b = document.getElementById(ele).clientHeight + (clientHeight/3);
|
||||
if(a>0 || a<-b){
|
||||
return false;
|
||||
}else{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return(
|
||||
<div className="secondEditionContent">
|
||||
<div className="hadoop">
|
||||
<div className="descBox">
|
||||
<p className="desc1">分布式协作开发</p>
|
||||
<p className="desc2">基于Git打造分布式代码托管环境，提供免费公、私有代码仓库；</p>
|
||||
<p className="desc3">支持在线文件编辑、代码分支管理、协作贡献统计、代码仓库复刻（Fork）、贡献合并请求（PR）、群智贡献审阅等功能；</p>
|
||||
<div className="hadoop" id="hadoop">
|
||||
<div className="hadoopCon">
|
||||
<div className="descBox">
|
||||
<p className="desc1">分布式协作开发</p>
|
||||
<p className="desc2">基于Git打造分布式代码托管环境，提供免费公、私有代码仓库；</p>
|
||||
<p className="desc3">支持在线文件编辑、代码分支管理、协作贡献统计、代码仓库复刻（Fork）、贡献合并请求（PR）、群智贡献审阅等功能；</p>
|
||||
</div>
|
||||
<div className={hadoop ? "hadoopCode activeCode" :"hadoopCode"}>
|
||||
{
|
||||
code.map((i,k)=>{
|
||||
return(
|
||||
<li><pre className="word-item" style={{animationDelay: `${k * 0.1 + .4}s`}}><span className="codenum">{k+1}</span>{i.str}</pre></li>
|
||||
)
|
||||
})
|
||||
}
|
||||
<img src={Codeafter} alt="运行结果" className={hadoopImg?"activeImg":""}/>
|
||||
</div>
|
||||
</div>
|
||||
<p className="hadoopdesc">让您的项目在这里健康、快速的成长！</p>
|
||||
</div>
|
||||
<div className="oneStop">
|
||||
<div className="oneStopContent">
|
||||
<div className="osLeftMain">
|
||||
<img src={Img1} alt="" width="494px"/>
|
||||
<div className={oneStop ? "oneStop activeCode" :"oneStop"} id="oneStop">
|
||||
<div className={"oneStopContent"}>
|
||||
<div className={"osLeftMain"}>
|
||||
<img src={Img1} alt="" width="494px" className="osleftPosi"/>
|
||||
<img src={ImgHead} alt="" width="213px" style={{marginLeft:"-12px"}}/>
|
||||
<img src={Img2} alt="" width="627px" className="osleftPosi1"/>
|
||||
<img src={Img3} alt="" width="412px" className="osleftPosi2"/>
|
||||
|
|
@ -30,10 +138,51 @@ function SecondEdition(params) {
|
|||
<p><span>让您的团队协作更高效、过程更透明！</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<img src={Imgring} alt="" height="83px"/>
|
||||
<img src={Imgring} alt="" height="83px" className="imgring"/>
|
||||
</div>
|
||||
<div className="highDevops">
|
||||
<span className="highDoTitle">高效流水线运维</span>
|
||||
<div className={highDevops ? "highDevops activeCode" : "highDevops"} id="highDevops">
|
||||
<div className="highDoTitle">
|
||||
<span>高效流水线运维</span>
|
||||
</div>
|
||||
<div className="highDoSubtitle">
|
||||
融合DevOps思想，提供轻量级的工作流引擎（Engine），
|
||||
<span>打通编码、测试、构建、部署</span>等开发运维环节；支持
|
||||
<span>自定义配置、代码静态扫描、构建自动触发、容器镜像托管</span>等功能，同时支持接入第三方运维工具。
|
||||
</div>
|
||||
<div className="highDoContent">
|
||||
<div>
|
||||
<img src={ImgS1} alt="" width="794px"/>
|
||||
<img src={ImgS2} alt="" width="520px" style={{marginBottom:'74px',marginTop:"25px"}}/>
|
||||
<img src={ImgS3} alt="" width="427px" className="highImg2"/>
|
||||
<img src={ImgS4} alt="" width="413px" className="highImg1"/>
|
||||
</div>
|
||||
<p className="highDoBottondesc">让您的代码更加快速、可靠地形成高质量的产品！</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={multipleAnalyse ? "multipleAnalyse activeCode":"multipleAnalyse"} id="multipleAnalyse">
|
||||
<span className="title">多层次代码分析</span>
|
||||
<div className="maContent"></div>
|
||||
<p className="desc">提供软件软代码和芯片RTL代码的溯源分析、文件级和组件级许可证识别及风险分析、输入性开源漏洞检测和加固建议，支持分析结果的多层次可视化展示。</p>
|
||||
</div>
|
||||
<div className={multidimensional ? "multidimensional activeCode":"multidimensional"} id="multidimensional">
|
||||
<div className="multidimensinalhalf">
|
||||
<div>
|
||||
<p className="halfTitle">多维度用户画像</p>
|
||||
<p className="halfsubTitle"><span>实时采集和分析平台中的各类开源资源数<br/>据，</span>搭建多维度用户画像评估系统；</p>
|
||||
</div>
|
||||
<div style={{width:"820px",marginLeft:"40px"}}>
|
||||
<img src={ImgM4} alt="" width="820px" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="multidimensinalPart">
|
||||
<div style={{width:"614px",marginRight:"40px"}}>
|
||||
<img src={ImgM2} alt="" width="614px" />
|
||||
</div>
|
||||
<div>
|
||||
<p><span>提供</span>开发活动统计、贡献度日历、用户能力建模、角色与专业定位分析<span>等功能。</span></p>
|
||||
<p>让您在个人主页展示开发动态与创新能力！</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@ import T332 from './Img/3-3-2.png';
|
|||
import T341 from './Img/3-4-1.png';
|
||||
import T342 from './Img/3-4-2.png';
|
||||
import bg3 from './Img/3-1.png';
|
||||
import bg32 from './Img/3-2.png';
|
||||
import bg33 from './Img/3-3.png';
|
||||
import bg34 from './Img/3-4.png';
|
||||
|
||||
import './Index.scss';
|
||||
|
||||
|
|
@ -49,7 +52,7 @@ function ThirdEdition(params) {
|
|||
</li>
|
||||
</ul>
|
||||
<div className="thirdLists">
|
||||
<img src={bg3} alt="" width="336px"/>
|
||||
<img src={active === 1 ? bg3 : active===2 ? bg32 :active===3 ? bg33 :bg34 } alt="" width="336px"/>
|
||||
<div className="listbox">
|
||||
<p className="listTitle">Gitlink分享最新平台资讯、社区活动通知、开源竞赛信息，把握开源生态发展脉搏</p>
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ function TopEdition() {
|
|||
<div className="regform1"></div>
|
||||
<div className="regform2"></div>
|
||||
<div className="regform3">
|
||||
</div>
|
||||
<div className="regform4">
|
||||
<p className="regPrg"><a>注册</a></p>
|
||||
</div>
|
||||
</Carousel>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
.hadoopCode{
|
||||
margin-left: 32px;
|
||||
box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
|
||||
border-radius: 10px;
|
||||
padding:18px 20px;
|
||||
flex: 1;
|
||||
margin-top: 60px;
|
||||
position: relative;
|
||||
&.activeCode{
|
||||
&>img.activeImg{
|
||||
right: 0px;
|
||||
bottom: -20px;
|
||||
opacity: 1;
|
||||
width: 705px;
|
||||
}
|
||||
}
|
||||
&>img{
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
bottom: -50px;
|
||||
transition: 1s;
|
||||
width: 805px;
|
||||
opacity: 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
li{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 30px;
|
||||
color: #E1E1E1;
|
||||
pre {
|
||||
font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
|
||||
.codenum{
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
text-align: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.code-green{
|
||||
color: #00FA30;
|
||||
}
|
||||
.code-red{
|
||||
color: #FF5058;
|
||||
}
|
||||
.code-blue{
|
||||
color: #05CFC8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.activeCode .word-item {
|
||||
opacity: 0;
|
||||
animation: show .3s 1 forwards;
|
||||
}
|
||||
@keyframes show {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue