-
加入GitLink，和社区伙伴们一起踏上开源创新的辉煌旅程！
-
- { !(current_user && current_user.login) &&
立即注册 }
-
-
- -
-
- 发现
- 探索丰富优质的开发资源
-
- -
-
- 加入
- 寻找志同道合的协作伙伴
-
- -
-
- 合作
- 开启开放共享的协同之旅
-
- -
-
- 贡献
- 书写开源创新的精彩成就
-
-
+
+
+
-
-
开源生态
-
GitLink与各大企业、高校、科研机构开展广泛的技术合作，推动我国开源软件生态的快速构建与发展
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
)
}
-export default TPMIndexHOC(Index);
\ No newline at end of file
+
+export default TPMIndexHOC(HomePage, { noFooter: true });
diff --git a/src/home/index.scss b/src/home/index.scss
index b60a31e3..e806fa72 100644
--- a/src/home/index.scss
+++ b/src/home/index.scss
@@ -1,1113 +1,335 @@
+.homePage {
+ background: #fff;
+ font-size: 16px;
+ // min-width: 800px;
+ // 首页多个部分公共样式
-body{
- overflow: auto!important;
- background-color: #fff!important;
-}
-.homePage{
- background-color: #fff;
-}
-.topEdition{
- position: relative;
- background-image: linear-gradient(to right,#081843,#000A1D);
- margin-bottom: 159px;
- .headNav{
- position: absolute;
- width: 100%;
- top:0px;
- left: 0px;
- color: #FFFFFF;
- background-color: rgba(225,225,225,0.03);
- z-index: 10000;
- .headNavDiv{
- margin:0px auto;
- padding:0px 30px;
- height: 72px;
- line-height: 72px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- .headlist{
- display: flex;
- font-weight: 400;
- li{
- margin-right: 35px;
- font-size: 16px;
- a{
- color: #FFFFFF!important;
- }
- }
- }
- .regBtn{
- display: inline-block;
- height: 30px;
- line-height: 30px;
- color: #fff!important;
- width: 60px;
- text-align: center;
- border-radius: 5px;
- background-color: #466AFF;
- margin-left: 20px;
- &:hover{
- background-color: rgba(70,106,255,0.85);
- }
- }
- }
- }
- .slick-track{
- height: 679px;
- display: flex;
- .slick-slide{
- position: relative;
- height:100%;
- div{
- height: 100%;
- .regform{
- &>div{
- overflow: hidden;
- img{
- height: 100%;
- width: 1920px;
- position: relative;
- left: 50%;
- margin-left: -960px;
- }
- }
- }
- .regPrg{
- position: absolute;
- z-index: 2;
- width: 1200px;
- left: 50%;
- margin-left: -600px;
- top:54%;
- margin-top: -23px;
- a{
- color: #fff!important;
- display: inline-block;
- background-color: #466AFF;
- border-radius: 5px;
- height: 46px;
- line-height: 46px;
- width: 98px;
- text-align: center;
- font-size: 18px;
- letter-spacing: 2px;
- &:hover{
- color: #FFFFFF!important;
- background-color: #355CFF;
- }
- }
- }
- }
-
- // img{
- // position: absolute;
- // width: 100%;
- // height: 100%;
- // top:0px;
- // left: 0px;
- // z-index: 1;
- // }
- }
- }
- .slick-slider{
- min-width: 1200px;
- position: relative;
- &:hover{
- .slick-arrow{
- display: block!important;
- cursor: pointer;
- z-index: 2;
- }
- }
- .slick-arrow{
- position: absolute;
- top:50%;
- z-index: 1000;
- background: transparent;
- border: none;
- margin-top:-50px;
- display: none!important;
- &:hover{
- i{
- color: rgba(225,225,225,0.8);
- }
- }
- i{
- font-size: 50px!important;
- color: rgba(225,225,225,0.3);
- transition: 0.3s;
- }
- &.slick-prev{
- left: 50px;
- }
- &.slick-next{
- right: 50px;
- }
- }
- .slick-dots{
- width: 1200px;
- text-align: left;
- left: 50%;
- margin-left: -600px;
- bottom: 25%;
- position: absolute;
- display: flex!important;
- z-index: 2;
- li{
- background-color: rgba(225,225,225,0.5);
- position: relative;
- height: 3px;
- width: 46px;
- margin-right: 15px;
- &::after{
- position: absolute;
- left: 0px;
- width: 0px;
- top:0px;
- height: 100%;
- content: "";
- transition: 5.2s;
- transition-property: width;
- }
- &.slick-active::after{
- background-color: #fff;
- width: 100%;
- }
- button{
- position: absolute;
- width: 100%;
- height: 10px;
- left:0px;
- background-color: transparent!important;
- border:none;
- cursor: pointer;
- color: transparent;
- }
- }
- }
- }
- .topEditionUl{
- position: absolute;
- width: 1244px;
- background-image: url('./Img/top-bg.png');
- height: 244px;
- bottom: -139px;
- left: 50%;
- margin-left: -622px;
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 3;
- a{
- background-image: url('./Img/top-2.png');
- height: 139px;
- width: 353px;
- padding:15px 24px;
- color: #fff;
- margin:0px 17px;
- border-radius: 11px;
- background-size: 100% 100%;
- color: #fff!important;
- &:hover{
- box-shadow: 0px 2px 7px rgba(225,225,225,0.85);
- }
- &:first-child{
- background-image: url('./Img/top-1.png');
- }
- &:last-child{
- background-image: url('./Img/top-3.png');
- }
- }
- }
-}
-.secondEdition{
- .theTitle{
- height: 53px;
- line-height: 53px;
- font-size: 38px;
- font-weight: 500;
- color: #1E1E1E;
- text-align: center;
- margin: 42px 0px 30px!important;
- }
- .ant-affix{
- background-color: #fff;
- box-shadow: 0px 2px 7px 0px rgba(0,0 ,0 ,0.09);
- }
- .ant-anchor-wrapper{
- width: 1200px;
- margin:0px auto;
- padding-left: 0px;
- .ant-anchor{
- display: flex;
- align-items: center;
- justify-content: center;
- .ant-anchor-ink{
- width: 100%;
- height: 1px;
- border-bottom: 1px solid rgba(153, 153, 153, 0.5);
- bottom: 0px;
- top:initial;
- }
- li{
- padding:18px 19px;
- margin:0px 10px;
- position: relative;
- font-size: 18px;
- a{
- color: #333333!important;
- }
- &.active::after{
- position: absolute;
- left: 0px;
- bottom: 0px;
- height:2px;
- background-color: #466AFF;
- content: "";
- width: 100%;
- }
- }
- }
- }
- .secondEditionContent{
- padding:65px 0px;
- width: 1200px;
- margin:0px auto;
- .hadoop{
- background:url('./Img/2-1bg.png') no-repeat center center;
- background-size:cover;
- min-height: 753px;
- padding:50px 56px;
- .hadoopCon{
- display: flex;
- width: 100%;
- }
- .descBox{
- max-width: 352px;
- word-break: break-all;
- .desc1{
- height: 50px;
- line-height: 50px;
- font-size: 36px;
- font-weight: 600;
- color: #FFFFFF;
- background: -webkit-linear-gradient(90deg, #50EDFF 0%, #557CFF 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- }
- .desc2{
- height: 72px;
- font-size: 18px;
- font-weight: 500;
- color: #69DAF5;
- line-height: 36px;
- margin-top: 97px;
- }
- .desc3{
- height: 108px;
- font-size: 18px;
- font-weight: 500;
- color: #FFFFFF;
- line-height: 36px;
- 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{
- display: flex;
- justify-content: flex-start;
- align-items: flex-start;
- position: relative;
- margin-bottom: 182px;
- }
- .osRightMain{
- margin-left: 22px;
- text-align: left;
- .osRightTitle{
- height: 50px;
- font-size: 36px;
- font-weight: 600;
- color: #FFFFFF;
- line-height: 50px;
- background: -webkit-linear-gradient(112deg, #FF8B75 0%, #DD2476 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- margin-top: 28px;
- }
- p{
- font-size: 20px;
- color: #637497;
- line-height: 36px;
- margin-top: 50px;
- margin-bottom: 0px!important;
- span{
- color: #000;
- font-weight: 500;
- }
- }
- }
- }
- .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{
- bottom:62px;
- }
- &.highImg2{
- bottom:215px;
- }
- }
- }
- .highDoTitle{
- 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;
- 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: 20px;
- line-height: 36px;
- max-width: 950px;
- margin:30px auto 28px;
- text-align: center;
- span{
- color: #000;
- font-weight: 500;
- }
- }
- .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{
- position: absolute;
- bottom:0px;
- transition: 1s;
- transition-delay: 1s;
- left:10px;
- }
- .highImg2{
- position: absolute;
- bottom:0px;
- right:10px;
- transition: 2s;
- transition-delay: 1s;
- }
- .highDoBottondesc{
- font-size: 20px;
- 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:100px 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: 20px;
- font-weight: 500;
- line-height: 36px;
- color: #000;
- max-width: 350px;
- span{
- color: #637497;
- font-weight: normal;
- }
- }
- }
- .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: 422px;
- text-align: left;
- font-weight: 500;
- line-height: 32px;
- color: #000;
- font-size: 20px;
- span{
- color: #637497;
- font-weight: normal;
- }
- &:first-child{
- margin-bottom: 55px!important;
- }
- }
- }
- }
-}
-
-.thirdEdition{
- background:url('./Img/3-bg.png') no-repeat center center;
- background-size:cover;
- min-height: 846px;
- min-width: 1200px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- .title{
- height: 53px;
- font-size: 38px;
- font-weight: 500;
- color: #FFFFFF;
- line-height: 53px;
- margin-bottom: 13px;
- }
- .subtitle{
- height: 39px;
- font-size: 18px;
- font-weight: 500;
- color: #FFFFFF;
- line-height: 39px;
- opacity: 0.6;
- }
- .thirdUl{
- display: flex;
- align-items: center;
- padding-top: 50px;
- padding-bottom: 25px;
- margin-bottom: 0px;
- justify-content: center;
- min-width: 1200px;
- li{
- padding:0px 67px;
- color: #fff;
- position: relative;
- cursor: pointer;
- width: 222px;
- &:hover{
- .hoverli1 img{
- &:first-child{
- transform: translate(5px,7px);
- }
- &:last-child{
- transform: translate(-2px,0px);
- }
- }
- .hoverli2 img{
- &:first-child{
- transform: translate(6px,-7px);
- }
- &:last-child{
- transform: translate(-2px,0px);
- }
- }
- .hoverli3 img{
- &:first-child{
- right: -3px!important;
- }
- &:last-child{
- left: -3px;
- }
- }
- .hoverli4 img{
- &:first-child{
- top: -5px;
- }
- &:last-child{
- top:13px!important;
- }
- }
- }
- &.active::after{
- position: absolute;
- content: "";
- width: 10px;
- height: 10px;
- border-radius: 50%;
- background-color: #466AFF;
- left: 50%;
- margin-left: -5px;
- bottom: -25px;
- }
- &.active,&:hover{
- &>span{
- font-size: 22px;
- }
- }
- &>span{
- font-weight: 400;
- font-size: 18px;
- margin-top:10px;
- display: block;
- height: 30px;
- text-align: center;
- line-height: 30px;
- }
- &>div{
- position: relative;
- height: 40px;
- width: 40px;
- margin:0px 20px;
- img{
- position: absolute;
- transition: .1s;
- &:first-child{
- z-index: 2;
- }
- &:last-child{
- z-index: 1;
- }
- }
- }
- }
- }
- .thirdLists{
- display: flex;
- align-items: center;
- margin-top: 48px;
- min-height: 365px;
- .listbox{
- margin-left: 54px;
- flex: 1;
- .listTitle{
- height: 30px;
- font-size: 18px;
- font-weight: 400;
- color: #FFFFFF;
- line-height: 30px;
- position: relative;
- margin-bottom: 75px!important;
- opacity: 0.8;
- &::after{
- position: absolute;
- left: 0px;
- width: 39px;
- height: 3px;
- content: "";
- bottom: -20px;
- background-color: #466AFF;
- opacity: 1;
- }
- }
- .ant-skeleton-title,.ant-skeleton-paragraph > li{
- background-color: rgba(242,242,242 ,0.2);
- }
- }
- li{
- display: flex;
- height: 22px;
- line-height: 22px;
- font-size: 16px;
- color: #fff;
- margin-bottom: 30px!important;
- a{
- flex:1;
- color: #fff!important;
- &:hover{
- text-decoration: underline;
- }
- }
- span{
- margin-left: 40px;
- }
- .listboxcount{
- min-width: 60px;
- text-align: left;
- display: flex;
- justify-content: space-between;
- }
- }
- }
-}
-
-.forthEdition{
- background:url('./Img/4-bg.png') no-repeat center center;
- background-size:cover;
- min-height: 621px;
- min-width: 1200px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- .theTitle{
- height: 42px;
- line-height: 42px;
- font-size: 30px;
- font-weight: 500;
- color: #1E1E1E;
- margin-bottom: 50px!important;
- }
- .qulikyreg{
- display: inline-block;
- width: 137px;
- text-align: center;
- height: 58px;
- line-height: 58px;
- color: #fff!important;
- background-color: #466AFF;
- border-radius: 6px;
- font-size: 18px;
- &:hover{
- color: #FFFFFF!important;
- background-color: #355CFF;
- }
- }
- .forthUl{
- display: flex;
- align-items: flex-end;
- min-width: 1200px;
- justify-content: space-between;
- li{
- margin:0px 40px;
- display: flex;
- flex-direction: column;
- align-items: center;
- .forthtitle{
- height: 30px;
- font-size: 22px;
- font-weight: 500;
- color: #1E1E1E;
- line-height: 30px;
- display: block;
- margin-top: 25px;
- }
- .forthsubtitle{
- height: 22px;
- font-size: 16px;
- font-weight: 400;
- color: #1E1E1E;
- line-height: 22px;
- margin-top: 15px;
- }
- }
- }
-}
-
-.fifthEdition{
- display: flex;
- flex-direction: column;
- align-items: center;
- padding:68px 0px;
- min-width: 1200px;
- .footSlider{
- width: 100%;
- .slick-track{
- display: flex;
- .slick-slide{
- margin:0px 20px;
- & > div{
- width: 300px;
- height: 120px;
- padding:15px;
- display: flex;
- align-items: center;
- justify-content: center;
- 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;
- margin:30px 0px;
- a{
- display: block;
- height: 100%;
- width: 100%;
- text-align: center;
- img{
- max-width: 100%;
- max-height: 100%;
- }
- }
- }
- }
- }
- }
- .title{
- height: 53px;
- font-size: 38px;
- font-weight: 500;
- color: #000000;
- line-height: 53px;
- }
- .subtitle{
- height: 39px;
- font-size: 18px;
- font-weight: 500;
- color: #1E1E1E;
- line-height: 39px;
- margin-top: 13px;
- margin-bottom: 54px;
- opacity: 0.6;
- }
- #scrollBox1{
- max-height: 332px;
+ // 1行省略号
+ .ellipsis-1 {
+ white-space: nowrap;
overflow: hidden;
- margin: 35px 0px 0px;
- width: 100%;
- .unitMainSlider{
- width: 1200px;
- margin:0px auto;
- .slick-list{
- height: 140px;
- width: 100%;
- overflow: hidden;
- .slickMainline{
- display: flex!important;
- padding:10px 2px;
- align-items: center;
- justify-content: space-between;
- a{
- background: #FFFFFF;
- box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.06);
- border-radius: 4px;
- border: 1px solid #FFFFFF;
- margin-right: 20px;
- padding:20px;
- height: 120px;
- width: 220px;
- display: flex;
- align-items: center;
- justify-content: center;
- &:hover{
- border: 1px solid #8FCEFF;
- }
- img{
- max-width: 100%;
- max-height: 100%;
- }
- &:last-child{
- margin-right: 0px;
- }
- }
- }
- }
+ 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;
+ }
+
+ // 5行省略号
+ .ellipsis-5 {
+ text-overflow: -o-ellipsis-lastline;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 5;
+ line-clamp: 5;
+ -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;
+ }
+
+ .link {
+ cursor: pointer;
+ &:hover {
+ opacity: 0.8;
}
}
- ul.fifthList{
- display: flex;
- flex-wrap: wrap;
- flex-direction: column;
- height: 332px;
- width: 100%;
- float: left;
- li{
- border-bottom: none;
- width: 320px;
- height: 130px;
- margin:15px 0px!important;
- display: flex;
- justify-content: center;
- align-items: center;
- &:nth-child(2n){
- margin:12px 0px 12px 30px!important;
- }
- &:nth-child(2n+1){
- margin:12px 30px 12px 0px!important;
- }
- &:hover a{
- width: 100%;
- height: 100%;
- box-shadow: 0px 1px 15px 7px rgba(0, 0, 0, 0.08);
- }
- a{
- width: 300px;
- height: 120px;
- background: #fff;
- box-shadow: 0px 1px 10px 3px rgba(0, 0, 0, 0.06);
- border-radius: 4px;
- border: 2px solid #FFFFFF;
- display: flex;
- align-items: center;
- justify-content: center;
- transition:.2s;
- }
- img{
- max-width: 100%;
- max-height: 100%;
- }
- }
-
+
+ .ant-btn-primary {
+ background-color: #2a3ee9;
+ border-color: #2a3ee9;
+ height: 3.5em;
+ box-shadow: 0px 0px 9px 2px rgba(65, 84, 241, 0.33) !important;
+ border-radius: 0.375em;
}
-}
-.footEdition{
- background-color: #171B23;
- .footContent{
- display: flex;
- align-items: flex-start;
- padding:86px 0px;
- justify-content: space-around;
+ .homepage-btn {
+ width: 8.75em;
+ height: 3.5em;
+ font-size: 1em;
+ &:hover {
+ background-color: #4154f1;
+ border-color: #4154f1;
+ }
+ .icon-gengduoicon {
+ margin-left: 0.375em;
+ color: #ffbf2d;
+ font-size: 1em !important;
+ }
+ }
+ .text-center {
+ text-align: center;
+ }
+
+ .homepage-main {
width: 1200px;
- margin:0px auto;
- ul{
- min-width: 120px;
- text-align: left;
- margin-right: 80px;
- &.center{
- text-align: center;
+ max-width: 96%;
+ margin: -1px auto 0;
+ }
+
+ .homePage-blue-tit {
+ color: #000870;
+ font-size: 2.125em;
+ margin-bottom: 0;
+ }
+
+ .homePage-subhead {
+ font-size: 1em;
+ color: #666;
+ }
+
+ .homePage-white-tit {
+ font-size: 2.25em;
+ font-weight: 500;
+ color: #ffffff;
+ line-height: 3.125em;
+ }
+
+ .homePage-white-subhead {
+ font-size: 1em;
+ font-weight: 400;
+ color: #fff;
+ line-height: 1.6875em;
+ opacity: 0.8;
+ }
+
+ // 首页特定头部样式起
+
+ &.newHeaders {
+ // background-color: #1a2358;
+ background-color: #0037af;
+ }
+ .head-nav {
+ min-width: auto;
+ }
+ .head-nav ul#header-nav li a {
+ font-size: 1em;
+ color: #fff;
+ }
+ .head-nav ul#header-nav li:hover a,
+ .head-nav ul#header-nav li.active a {
+ color: #ffa13a;
+ }
+ .head-nav ul#header-nav li.active a::after {
+ background-color: #ffa13a;
+ }
+
+ .logoDiv img {
+ min-width: 2.8125em;
+ height: 2.8125em;
+ }
+
+ .color-home {
+ color: #fff;
+ }
+
+ .color-home:hover {
+ color: #4154f1;
+ }
+
+ .register-button {
+ height: 3em;
+ margin-left: 1.25em;
+ padding: 0 1.5625em;
+ font-size: 0.875em;
+ }
+ // 首页特定头部样式止
+}
+
+// 波浪样式起
+.waves {
+ position: relative;
+ width: 100%;
+ height: 8vh;
+ bottom: -0.5vh;
+}
+// .waves-low {
+// height: 6vh;
+// }
+.parallax > use {
+ animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+}
+.parallax > use:nth-child(1) {
+ animation-delay: -2s;
+ animation-duration: 7s;
+}
+.parallax > use:nth-child(2) {
+ animation-delay: -3s;
+ animation-duration: 10s;
+}
+.parallax > use:nth-child(3) {
+ animation-delay: -4s;
+ animation-duration: 13s;
+}
+.parallax > use:nth-child(4) {
+ animation-delay: -5s;
+ animation-duration: 20s;
+}
+@keyframes move-forever {
+ 0% {
+ transform: translate3d(-90px, 0, 0);
+ }
+ 100% {
+ transform: translate3d(85px, 0, 0);
+ }
+} /*Shrinking for mobile*/
+
+@media screen and (max-width: 1000px) {
+ .newContainer .home-first-section {
+ height: auto;
+ margin-top: -5vh;
+ .website-content {
+ height: 60vh;
+ }
+ .grid-picture {
+ background-size: auto 100%;
+ }
+ }
+}
+@media screen and (max-width: 1200px) {
+ .waves {
+ height: 6vh;
+ }
+ .newContainer .home-first-section {
+ .grid-picture {
+ background-size: auto 100%;
+ }
+ }
+ .home-fifth-section .circle-wave {
+ left: 1.5vw;
+ }
+
+ .home-seventh-section {
+ .seventh-main .clients {
+ .start-icon {
+ top: 100px;
+ left: 150px;
}
- &>p{
- height: 22px;
- font-size: 16px;
- font-weight: 400;
- color: #FFFFFF;
- line-height: 22px;
+ .end-icon {
+ bottom: 100px;
+ right: 280px;
}
- &>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;
+ }
+ }
+ .home-footer {
+ height: 400px;
+ .arc {
+ margin: -100px -100px 0;
+ height: 200px;
+ border-radius: 50%;
+ }
+ .footer-main {
+ height: 200px;
+ }
+ }
+}
+@media screen and (min-width: 2000px) {
+ .homePage {
+ font-size: 20px;
+ &.newHeaders {
+ height: 4.375em;
+ .head-nav {
+ height: inherit;
+ ul#header-nav {
+ height: inherit;
+ li {
+ height: inherit;
+ font-size: 1em;
+ line-height: 4.375em;
+ a {
+ font-size: 1.1em;
+ }
}
}
- &.thehead{
- height: 25px;
- font-size: 18px;
- font-weight: 600;
- color: #FFFFFF;
- line-height: 25px;
- margin-bottom: 20px!important;
+ }
+ .login-box {
+ font-size: 0.9375em;
+ }
+ }
+ .homepage-main {
+ width: 1600px;
+ }
+ .home-first-section {
+ .website {
+ margin-right: 7%;
+ .website-vision {
+ justify-content: flex-start;
+ span {
+ margin-right: 1.5em;
+ }
}
}
- .theline{
- .imgCon{
- padding:5px;
- border-radius: 4px;
- background-color: #fff;
- img{
- width: 80px;
- height: 80px;
- border-radius: 3px;
- }
+ .play-img {
+ width: 50%;
+ height: 600px;
+ .play-circle {
+ right: 21%;
+ }
+ .play-circle-circle1,
+ .play-circle-circle2,
+ .play-circle-circle3,
+ .play-circle-circle4,
+ .play-circle-circle5 {
+ right: 26.1%;
+ }
+ }
+ }
+
+ .home-seventh-section {
+ .clients {
+ .start-icon {
+ top: 100px;
+ left: 380px;
+ }
+ .end-icon {
+ bottom: 130px;
+ right: 480px;
+ }
+ }
+ }
+ .footerbottom {
+ font-size: 16px !important;
+ }
+ }
+}
+
+@media screen and (min-width: 2800px) {
+ .homePage {
+ font-size: 24px;
+ .homepage-main {
+ width: 2000px;
+ }
+ .home-first-section {
+ .website {
+ margin-right: 14%;
+ }
+ .play-img {
+ width: 40%;
+ .play-circle {
+ right: 21%;
+ }
+ .play-circle-circle1,
+ .play-circle-circle2,
+ .play-circle-circle3,
+ .play-circle-circle4,
+ .play-circle-circle5 {
+ right: 26.1%;
}
}
}
}
}
-.copyrightDesc{
- font-size: 12px;
- font-weight: 400;
- color: #BDC2D1;
- line-height: 28px;
- padding:15px 0px;
- text-align: center;
- background-color: #1B212C;
- a{
- color: #BDC2D1!important;
- }
-}
\ No newline at end of file
})
- )
- })
- }
-