You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
472 lines
8.3 KiB
472 lines
8.3 KiB
@home-bg-color: #2f54eb;
|
|
@home-text-color: #314659;
|
|
|
|
.home-page-wrapper {
|
|
position: relative; // will-change: transform;
|
|
width: 100%;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
color: @home-text-color;
|
|
font-family: Avenir, @font-family, sans-serif;
|
|
|
|
.page {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: auto;
|
|
padding: 0 24px;
|
|
h2 {
|
|
margin: 140px auto 100px;
|
|
color: @home-text-color;
|
|
font-weight: 400;
|
|
font-size: 38px;
|
|
line-height: 46px;
|
|
text-align: center;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
p {
|
|
will-change: transform;
|
|
}
|
|
}
|
|
}
|
|
|
|
.banner-bg {
|
|
&-wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
position: absolute;
|
|
bottom: -200px;
|
|
left: 0%;
|
|
width: 120%;
|
|
height: 200px;
|
|
background: @home-bg-color;
|
|
transform: rotate(-4deg);
|
|
transform-origin: 0;
|
|
}
|
|
|
|
.banner {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 576px;
|
|
&-wrapper {
|
|
position: relative;
|
|
z-index: 1;
|
|
overflow: initial;
|
|
}
|
|
.text-wrapper {
|
|
width: 54%;
|
|
min-width: 420px;
|
|
max-width: 560px;
|
|
min-height: 400px;
|
|
color: @home-text-color;
|
|
> * {
|
|
will-change: transform;
|
|
}
|
|
h1 {
|
|
margin: 8px 0 28px;
|
|
font-weight: 600;
|
|
font-size: 68px;
|
|
font-family: Avenir, @font-family, sans-serif;
|
|
line-height: 76px;
|
|
letter-spacing: 0;
|
|
}
|
|
p {
|
|
color: @home-text-color;
|
|
font-size: 20px;
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
|
|
.img-wrapper {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 26px;
|
|
width: 46%;
|
|
max-width: 482px;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.banner-btns {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 520px;
|
|
margin-top: 24px;
|
|
|
|
.banner-btn {
|
|
display: inline-block;
|
|
height: 40px;
|
|
padding: 0 24px;
|
|
font-size: 16px;
|
|
font-family: Avenir, @font-family, sans-serif;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
border: 1px solid @home-bg-color;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.banner-btn.components {
|
|
color: #fff;
|
|
background: @home-bg-color;
|
|
}
|
|
|
|
.banner-btn.language {
|
|
color: @home-bg-color;
|
|
}
|
|
}
|
|
|
|
.banner-promote {
|
|
max-width: 100%;
|
|
margin: 48px 0 24px 0;
|
|
|
|
.ant-divider-inner-text {
|
|
padding: 0 12px;
|
|
color: rgba(0, 0, 0, 0.25);
|
|
font-weight: normal;
|
|
font-size: 12px;
|
|
}
|
|
|
|
a {
|
|
color: @home-text-color;
|
|
font-size: 16px;
|
|
transition: all 0.3s;
|
|
|
|
.anticon {
|
|
position: relative;
|
|
left: 0;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
&:hover {
|
|
color: @home-bg-color;
|
|
|
|
.anticon {
|
|
left: 4px;
|
|
}
|
|
}
|
|
|
|
img {
|
|
position: relative;
|
|
top: -1px;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
svg {
|
|
display: block;
|
|
g {
|
|
transform-origin: 50%;
|
|
transform-box: fill-box;
|
|
}
|
|
}
|
|
|
|
/** page1 **/
|
|
|
|
.page1 {
|
|
min-height: 784px;
|
|
background: @home-bg-color;
|
|
background: linear-gradient(to bottom, rgba(47, 84, 235, 1) 0%, rgba(58, 64, 212, 1) 100%);
|
|
h2 {
|
|
color: #fff !important;
|
|
}
|
|
&-block {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: block;
|
|
max-width: 160px;
|
|
margin: auto;
|
|
text-align: center;
|
|
h3 {
|
|
color: #fff;
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
}
|
|
p {
|
|
color: #fff;
|
|
}
|
|
&:hover .page1-image {
|
|
box-shadow: 0 6px 10px rgba(5, 26, 180, 0.35);
|
|
transform: translateY(-4px);
|
|
}
|
|
}
|
|
&-image {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 120px;
|
|
height: 120px;
|
|
margin: 46px auto 40px;
|
|
background: #fff;
|
|
border-radius: 100%;
|
|
transition: transform 0.45s @ease-out, box-shadow 0.45s @ease-out;
|
|
img {
|
|
display: block;
|
|
}
|
|
}
|
|
&-point-wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
margin: auto;
|
|
overflow: inherit !important;
|
|
}
|
|
}
|
|
|
|
/** page2 **/
|
|
|
|
.page2 {
|
|
min-height: 1110px;
|
|
padding-top: 1px;
|
|
overflow: initial;
|
|
background: #eff3f6;
|
|
.page {
|
|
position: relative;
|
|
z-index: 1;
|
|
h2 {
|
|
margin-bottom: 112px;
|
|
}
|
|
}
|
|
&-content {
|
|
background: @home-bg-color;
|
|
box-shadow: 0 12px 20px #d8e0e6;
|
|
}
|
|
&-components,
|
|
&-product {
|
|
min-height: 670px;
|
|
}
|
|
&-components {
|
|
position: initial;
|
|
padding: 56px;
|
|
color: #fff;
|
|
line-height: 32px;
|
|
background: @home-bg-color;
|
|
h3 {
|
|
margin: 0 auto 32px;
|
|
color: #fff;
|
|
font-size: 28px;
|
|
}
|
|
.components-button-wrapper {
|
|
position: absolute;
|
|
bottom: 48px;
|
|
left: 56px;
|
|
a {
|
|
display: block;
|
|
margin-top: 16px;
|
|
color: #fff;
|
|
line-height: 1.5em;
|
|
}
|
|
}
|
|
}
|
|
&-product {
|
|
padding: 48px 56px;
|
|
background: #fff;
|
|
.product-block {
|
|
margin-bottom: 24px;
|
|
color: @home-text-color;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
.block-text-wrapper {
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
.block-text-wrapper {
|
|
position: relative;
|
|
padding-bottom: 24px;
|
|
border-bottom: 1px solid @site-border-color-split;
|
|
h4 {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-bottom: 8px;
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
white-space: nowrap;
|
|
.new {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
display: inline-block;
|
|
padding: 0 2px;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
background: #f5222d;
|
|
border-radius: 4px;
|
|
transform: translate(~'calc(100% + 4px)', -50%); // 手机回行处理
|
|
}
|
|
}
|
|
p {
|
|
margin-bottom: 16px;
|
|
line-height: 24px;
|
|
}
|
|
.more {
|
|
display: inline-block;
|
|
color: @home-bg-color;
|
|
line-height: 22px;
|
|
vertical-align: top;
|
|
i {
|
|
font-size: 12px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
.more-mobile-react,
|
|
.more-mobile-angular {
|
|
display: block;
|
|
margin-top: 8px;
|
|
color: @home-bg-color;
|
|
}
|
|
}
|
|
.block-image-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 104px;
|
|
img {
|
|
display: block;
|
|
max-width: 80%;
|
|
}
|
|
&.right {
|
|
justify-content: flex-end;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
a.product-block:hover {
|
|
h4 {
|
|
color: @home-bg-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.parallax-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
&.bottom {
|
|
z-index: 0;
|
|
}
|
|
&.top {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 220px;
|
|
svg {
|
|
overflow: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** page3 **/
|
|
|
|
.page3 {
|
|
min-height: 556px;
|
|
&-block {
|
|
padding: 24px 12px;
|
|
a {
|
|
display: flex;
|
|
justify-content: center;
|
|
color: @home-text-color;
|
|
}
|
|
&:hover {
|
|
h3 {
|
|
color: @home-bg-color;
|
|
}
|
|
}
|
|
}
|
|
&-img-wrapper,
|
|
&-text-wrapper {
|
|
display: inline-block;
|
|
}
|
|
&-text-wrapper {
|
|
margin-top: 2px;
|
|
// max-width: 182px;
|
|
margin-left: 32px;
|
|
line-height: 24px;
|
|
h3 {
|
|
margin-bottom: 4px;
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
}
|
|
}
|
|
.parallax-bg.top {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
/** video **/
|
|
|
|
.new-version-video {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 9999;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: #fbfbfb;
|
|
.vidoe-wrap {
|
|
width: 100%;
|
|
background: url('https://gw.alipayobjects.com/zos/rmsportal/gEeRuETmbpAYRaeilexm.jpg') repeat-x;
|
|
background-size: cover;
|
|
video {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.banner-1024 {
|
|
display: block;
|
|
cursor: pointer;
|
|
transition: all 0.4s;
|
|
|
|
&:hover {
|
|
transform: translateY(-16px) scale(1.01);
|
|
}
|
|
}
|
|
|
|
.github-btn-large {
|
|
height: 40px;
|
|
font-family: Avenir, @font-family, sans-serif;
|
|
line-height: 40px;
|
|
|
|
.gh-btn,
|
|
.gh-count {
|
|
height: 40px;
|
|
padding: 9px;
|
|
background: transparent;
|
|
}
|
|
|
|
.gh-count {
|
|
margin-left: 10px;
|
|
|
|
&::after {
|
|
border-width: 7px 6px 7px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@supports (-moz-appearance: meterbar) {
|
|
.en-us .banner-btn {
|
|
line-height: 38px !important;
|
|
}
|
|
}
|
|
|