mirror of
https://github.com/kubesphere/website.git
synced 2025-12-25 15:32:54 +00:00
408 lines
8.1 KiB
SCSS
408 lines
8.1 KiB
SCSS
@import 'reset';
|
|
@import 'variables';
|
|
@import 'else';
|
|
@import 'header';
|
|
@import 'footer';
|
|
|
|
.section-div-1 {
|
|
width: 1160px;
|
|
margin: 0 auto;
|
|
.banner-title {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 460px;
|
|
margin-top: 140px;
|
|
margin-right: 25px;
|
|
|
|
.banner-activities {
|
|
padding: 8px 12px;
|
|
margin-bottom: 40px;
|
|
border-radius: 22px;
|
|
background-color: #e3e9ef;
|
|
|
|
.banner-tag {
|
|
height: 24px;
|
|
min-width: 58px;
|
|
padding: 2px 12px;
|
|
margin-right: 12px;
|
|
border-radius: 4px;
|
|
background-image: linear-gradient(152deg,#51b484,#329dce);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
line-height: 20px;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
color: #fff;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
a {
|
|
display: inline-block;
|
|
font-family: $font-family-id;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
color: #36435c;
|
|
word-break: keep-all;
|
|
white-space: pre;
|
|
}
|
|
}
|
|
|
|
.h1 {
|
|
font-family: $font-family-id;
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
color: #171c34;
|
|
text-shadow: 0 8px 16px rgba(35,45,65,.16);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.banner-sub-title {
|
|
margin-bottom: 16px;
|
|
text-shadow: 0 8px 16px rgba(35,45,65,.16);
|
|
color: #171c34;
|
|
}
|
|
|
|
p {
|
|
font-family: $font-family-id;
|
|
font-size: 16px;
|
|
line-height: 2;
|
|
color: #919aa3;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.install-button {
|
|
margin-top: 20px;
|
|
margin-right: 13px;
|
|
padding: 7px 20px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
background-color: #242e42;
|
|
box-shadow: 0 10px 50px 0 rgba(34,43,62,.1), 0 8px 16px 0 rgba(33,43,61,.2);
|
|
height: 48px;
|
|
border-radius: 30px;
|
|
font-size: 16px;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.banner-snapshot {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 670px;
|
|
height: 440px;
|
|
margin-top: 40px;
|
|
|
|
.banner-snapshot-sub {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 314px;
|
|
width: 280px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.section-div-2 {
|
|
width: 1160px;
|
|
margin: 0 auto;
|
|
padding-top: 120px;
|
|
text-align: center;
|
|
|
|
.h1 {
|
|
font-size: 32px;
|
|
line-height: 1.63;
|
|
color: #171c34;
|
|
text-shadow: 0 4px 8px rgba(35,45,65,.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
& > p {
|
|
width: 640px;
|
|
font-size: 14px;
|
|
margin: 0 auto 50px;
|
|
line-height: 2;
|
|
color: #485b7f;
|
|
}
|
|
|
|
.feature-cards {
|
|
font-size: 0;
|
|
.feature-card + .feature-card {
|
|
margin-left: 40px;
|
|
}
|
|
|
|
.feature-card {
|
|
display: inline-block;
|
|
width: 280px;
|
|
height: 280px;
|
|
padding: 60px 40px;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
vertical-align: top;
|
|
|
|
img {
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.h2 {
|
|
font-size: 24px;
|
|
margin-bottom: 20px;
|
|
line-height: 1.33;
|
|
color: #4d5566;
|
|
text-shadow: 0 4px 8px rgba(35,45,65,.1);
|
|
}
|
|
|
|
p {
|
|
line-height: 1.71;
|
|
color: #8f94a1;
|
|
font-size: 14px;
|
|
a {
|
|
color: #8f94a1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.section-div-3 {
|
|
padding-bottom: 60px;
|
|
padding-top: 120px;
|
|
text-align: center;
|
|
|
|
.app-install-title {
|
|
position: relative;
|
|
padding: 80px 0;
|
|
height: 268px;
|
|
min-width: 1188px;
|
|
text-align: center;
|
|
background-image: linear-gradient(115deg,#4a499a,#8552c3);
|
|
|
|
.left {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.right {
|
|
position: absolute;
|
|
top: 130px;
|
|
right: 0;
|
|
}
|
|
|
|
div {
|
|
font-family: $font-family-id;
|
|
text-align: center;
|
|
color: #fff;
|
|
text-shadow: 0 8px 16px rgba(35,45,65,.16);
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
p {
|
|
max-width: 752px;
|
|
height: 64px;
|
|
margin: 16px auto 0;
|
|
font-size: 16px;
|
|
line-height: 2;
|
|
font-family: $font-family-id;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.slider-wrapper {
|
|
position: relative;
|
|
margin: -132px auto 0;
|
|
height: 612px;
|
|
width: 1188px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px 0 rgba(36,46,66,.12);
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
|
|
.slider-repeat {
|
|
position: relative;
|
|
-webkit-animation: scrollUp 30s linear infinite;
|
|
animation: scrollUp 30s linear infinite;
|
|
font-size: 0;
|
|
text-align: center;
|
|
|
|
.app {
|
|
display: inline-block;
|
|
width: 260px;
|
|
height: 128px;
|
|
padding: 0 6px;
|
|
margin-right: 12px;
|
|
margin-bottom: 12px;
|
|
border-radius: 4px;
|
|
box-shadow: 0 4px 8px 0 rgba(36,46,66,.06), 0 8px 16px 0 rgba(36,46,66,.12);
|
|
background-color: #fff;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
|
|
.app-header {
|
|
display: flex;
|
|
padding: 12px 6px;
|
|
border-bottom: 1px solid #e3e9ef;
|
|
|
|
.app-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 12px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.app-title {
|
|
display: inline;
|
|
|
|
.app-name {
|
|
font-family: $font-family-id;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 20px;
|
|
color: #242e42;
|
|
}
|
|
|
|
.app-version {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
color: #79879c;
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-desc {
|
|
height: 30px;
|
|
padding: 12px 6px;
|
|
font-family: PingFang SC,Lantinghei SC,Helvetica Neue,Helvetica,Arial,Microsoft YaHei,微软雅黑,STHeitiSC-Light,simsun,宋体,WenQuanYi Zen Hei,WenQuanYi Micro Hei,sans-serif;
|
|
overflow: hidden;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
color: #79879c;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes scrollUp {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(-840px);
|
|
transform: translateY(-840px);
|
|
}
|
|
}
|
|
|
|
.section-div-4 {
|
|
width: 1160px;
|
|
margin: 0 auto;
|
|
padding-top: 120px;
|
|
text-align: center;
|
|
|
|
.h1 {
|
|
font-size: 32px;
|
|
line-height: 1.63;
|
|
color: #171c34;
|
|
text-shadow: 0 4px 8px rgba(35,45,65,.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
& > p {
|
|
width: 640px;
|
|
font-size: 16px;
|
|
margin: 0 auto 50px;
|
|
line-height: 2;
|
|
color: #485b7f;
|
|
}
|
|
|
|
.contribute-cards {
|
|
width: 100%;
|
|
max-width: 1188px;
|
|
margin: 0 auto;
|
|
|
|
.contribute-card {
|
|
width: 100%;
|
|
padding: 40px;
|
|
border-radius: 8px;
|
|
margin-top: 24px;
|
|
background-color: #fff;
|
|
-webkit-transition: all .3s ease;
|
|
transition: all .3s ease;
|
|
text-align: left;
|
|
|
|
.contribute-title {
|
|
margin-bottom: 12px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
line-height: 1.56;
|
|
color: #171c34;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.71;
|
|
color: #485b7f;
|
|
font-family: $font-family-id;
|
|
}
|
|
|
|
li {
|
|
position: relative;
|
|
font-family: $font-family-id;
|
|
line-height: 2.14;
|
|
color: #919aa3;
|
|
word-break: break-all;
|
|
}
|
|
|
|
a {
|
|
color: #55bc8a;
|
|
}
|
|
}
|
|
|
|
li:before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 14px;
|
|
left: -18px;
|
|
-webkit-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background-color: #55bc8a;
|
|
}
|
|
}
|
|
}
|
|
|
|
.section-div-5 {
|
|
display: flex;
|
|
justify-content: center;
|
|
min-height: 120px;
|
|
margin-top: 48px;
|
|
padding: 30px 0;
|
|
background-color: rgba(143,148,161,.06);
|
|
text-align: center;
|
|
|
|
& > div {
|
|
font-size: 16px;
|
|
line-height: 2;
|
|
color: #919aa3;
|
|
|
|
img {
|
|
height: 60px;
|
|
}
|
|
}
|
|
} |