diff --git a/src/home/index.jsx b/src/home/index.jsx index 96b5c4257..7105a89d3 100644 --- a/src/home/index.jsx +++ b/src/home/index.jsx @@ -1,153 +1,167 @@ -import React, { useEffect, useState } from 'react'; +import React , { useEffect , useState } from 'react'; +import "./Index.scss"; +import TopEdition from './TopEdition'; +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-3.png'; +import F44 from './Img/4-4.png'; +import SecondEdition from './SecondEdition'; +import FifthEdition from './FifthEdition'; import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC'; -import { isMobile } from 'educoder'; -import './index.scss'; +import Axios from 'axios'; -import FirstSection from './FirstSection'; -import SecondSection from './SecondSection'; -import ThirdSection from './ThirdSection'; -import FourthSection from './FourthSection'; -import FifthSection from './FifthSection'; -import SixthSection from './SixthSection'; -import SeventhSection from './SeventhSection'; -import Footer from './Footer'; +function Index(props) { + const [ value , setValue ] = useState(""); + const [ flag , setFlag ] = useState(true); + const [ bannerTab , setBannerTab ] = useState(undefined); + const register = props && props.mygetHelmetapi && props.mygetHelmetapi.common && props.mygetHelmetapi.common.register; -let isHuawei = (/honor|huawei/i.test(navigator.userAgent.toLowerCase())); -function HomePage({ history }) { + const { current_user } = props; + useEffect(()=>{ + window.addEventListener("scroll",scrollListener); + getTab(); + return ComponentWillUnmount; + },[]) - useEffect(() => { - window.addEventListener("scroll", scrollListener, false); - return () => { - window.removeEventListener("scroll", scrollListener, false); - } - }, []); + function ComponentWillUnmount() { + window.removeEventListener("scroll",scrollListener); + } - const [first, setFirst] = useState(true); - const [second, setSecond] = useState(isMobile); - const [third, setThird] = useState(false || isHuawei); - const [fourth, setFourth] = useState(false || isHuawei); - const [fifth, setFifth] = useState(false || isHuawei); - const [sixth, setSixth] = useState(false || isHuawei); - - - let settings = JSON.parse(localStorage.chromesetting); - let main_web_site_url = settings.main_web_site_url; - - - function scrollListener() { - let clientHeight = document.body.clientHeight; - let clientWidth = document.body.clientWidth; - // 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 secondSection = document.getElementById("home-second-section").offsetTop; - let thirdSection = document.getElementById("home-third-section").offsetTop; - let fourthSection = document.getElementById("home-fourth-section").offsetTop; - let fifthSection = document.getElementById("home-fifth-section").offsetTop; - let sixthSection = document.getElementById("home-sixth-section").offsetTop; - let seventhSection = document.getElementById("home-seventh-section").offsetTop; - - let top = document.documentElement.scrollTop; - - - if (top >= clientHeight - 300) { - setFirst(false); - } else { - setFirst(true); - } - - if (clientWidth > 1100) { - // 第二个动效 - if (top >= secondSection - clientHeight * 0.8 && top < thirdSection) { - setSecond(true); - } else { - setSecond(false); + function getTab() { + const url = `/topics.json?topic_type=card`; + Axios.get(url,{ + params:{ + limit:3 } - } else { - // 第二个动效 - if (top >= secondSection - clientHeight && top < thirdSection) { - setSecond(true); - } else { - setSecond(false); + }).then(result=>{ + if(result){ + setBannerTab(result.data.topics); } - } + }).catch(error=>{}) + } - // 第三个动效 - if (top >= thirdSection - clientHeight && top < fourthSection) { - setThird(true); - } else { - setThird(false); + function scrollListener(event) { + + let third = document.getElementById("thirdContent").offsetTop; + let top = document.documentElement.scrollTop + 60; + if(top>= third) + { + setFlag(false) + }else{ + setFlag(true) } + } - // 第四个动效 - if (top >= fourthSection - clientHeight && top < fifthSection) { - setFourth(true); - } else { - setFourth(false); - } - - // 第五个动效 - if (top >= fifthSection - clientHeight && top < sixthSection) { - setFifth(true); - } else { - setFifth(false); - } - - // 第六个动效 - if (top >= sixthSection - clientHeight && top < seventhSection - 100) { - setSixth(true); - } else { - setSixth(false); - } - - if(isHuawei){ - setFourth(true); - setSixth(true); + 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 ( + return(
- -
- +
+ {/* */} + + { + bannerTab && bannerTab.length > 0 ? + + : + + } +
- -
- +
+

GitLink，新一代开源创新服务平台

+ { + flag && + +
  • changeActive("#hadoop")} className={value === "#hadoop"?"active":""}>分布式协作开发
    • +
  • changeActive("#oneStop")} className={value === "#oneStop"?"active":""}>一站式过程管理
    • +
  • changeActive("#highDevops")} className={value === "#highDevops"?"active":""}>高效流水线运维
    • +
  • changeActive("#multipleAnalyse")} className={value === "#multipleAnalyse"?"active":""}>多层次代码分析
    • +
  • changeActive("#multidimensional")} className={value === "#multidimensional"?"active":""}>多维度用户画像
    • +     + } + +
    +
    +
    - -
    - +
    +

    加入GitLink，和社区伙伴们一起踏上开源创新的辉煌旅程！

    +
    + { !(current_user && current_user.login) && 立即注册 } +
    +
      +
    • + + 发现 + 探索丰富优质的开发资源 +
      • +
    • + + 加入 + 寻找志同道合的协作伙伴 +
      • +
    • + + 合作 + 开启开放共享的协同之旅 +
      • +
    • + + 贡献 + 书写开源创新的精彩成就 +
      • +
    -
    - +
    +

    开源生态

    +

    GitLink与各大企业、高校、科研机构开展广泛的技术合作，推动我国开源软件生态的快速构建与发展

    +
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    ) } - -export default TPMIndexHOC(HomePage, { noFooter: true }); +export default TPMIndexHOC(Index); \ No newline at end of file diff --git a/src/home/index.scss b/src/home/index.scss index e806fa72e..b60a31e31 100644 --- a/src/home/index.scss +++ b/src/home/index.scss @@ -1,335 +1,1113 @@ -.homePage { - background: #fff; - font-size: 16px; - // min-width: 800px; - // 首页多个部分公共样式 - // 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; - } - - // 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; - } - } - - .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; - } - .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; - 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; - } - // 首页特定头部样式止 +body{ + overflow: auto!important; + background-color: #fff!important; } - -// 波浪样式起 -.waves { +.homePage{ + background-color: #fff; +} +.topEdition{ 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; + 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; + } + } } - .end-icon { - bottom: 100px; - right: 280px; + .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); + } } } } - .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; + .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; } } } } - .login-box { - font-size: 0.9375em; + + // 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; } } - .homepage-main { - width: 1600px; + .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; + } } - .home-first-section { - .website { - margin-right: 7%; - .website-vision { + .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; - span { - margin-right: 1.5em; + 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; + } } } } - .play-img { - width: 50%; - height: 600px; - .play-circle { - right: 21%; + .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; } - .play-circle-circle1, - .play-circle-circle2, - .play-circle-circle3, - .play-circle-circle4, - .play-circle-circle5 { - right: 26.1%; + .osleftPosi1{ + right:10px; + } + .osleftPosi2{ + top:217px; + } + .imgring{ + opacity: 1; } } } - - .home-seventh-section { - .clients { - .start-icon { - top: 100px; - left: 380px; + .highDevops{ + text-align: center; + &.activeCode{ + .highDoContent img{ + opacity: 1; + &.highImg1{ + bottom:62px; + } + &.highImg2{ + bottom:215px; + } } - .end-icon { - bottom: 130px; - right: 480px; + } + .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 } } } - .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%; + .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); } - .play-circle-circle1, - .play-circle-circle2, - .play-circle-circle3, - .play-circle-circle4, - .play-circle-circle5 { - right: 26.1%; + } + .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; + 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; + } + } + } + } + } + } + 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%; + } + } + + } +} +.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{ + .imgCon{ + padding:5px; + border-radius: 4px; + background-color: #fff; + img{ + width: 80px; + height: 80px; + border-radius: 3px; + } + } + } + } + } +} +.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