mirror of
https://github.com/kubesphere/website.git
synced 2025-12-26 00:12:48 +00:00
mobile css
This commit is contained in:
liuboaibc
parent
17d2cec87c
commit
750ce8a91c
|
|
@ -5,9 +5,12 @@
|
|||
padding-top: 60px;
|
||||
padding-bottom: 100px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
width: 1160px;
|
||||
margin: 0 auto;
|
||||
|
||||
& > .blog-tab-ul {
|
||||
padding: 30px 34px 22px;
|
||||
|
|
@ -51,11 +54,9 @@
|
|||
|
||||
& > li {
|
||||
position: relative;
|
||||
height: 280px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 15px 0 rgba(7,42,68,.1);
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
.img-div {
|
||||
position: absolute;
|
||||
|
|
@ -69,12 +70,18 @@
|
|||
height: 280px;
|
||||
object-fit: contain;
|
||||
}
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& > .content-div{
|
||||
height: 216px;
|
||||
padding: 32px 200px 32px 320px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 14px;
|
||||
color: #919aa3;
|
||||
|
|
@ -85,9 +92,6 @@
|
|||
margin: 12px 0;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #4ca986;
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -3,13 +3,10 @@
|
|||
|
||||
.section-1 {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
padding-top: 138px;
|
||||
padding-bottom: 100px;
|
||||
|
||||
.title-div {
|
||||
position: absolute;
|
||||
top: 138px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -24,40 +21,54 @@
|
|||
position: relative;
|
||||
.cases-ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap ;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
top: -60px;
|
||||
z-index: 2;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
top: -80px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
width: 373px;
|
||||
height: 392px;
|
||||
margin-top: 20px;
|
||||
padding: 25px 40px 50px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
|
||||
background-color: #ffffff;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
top: -80px;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
padding: 25px 20px 30px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 293px;
|
||||
height: 120px;
|
||||
margin: 24px auto;
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 293px;
|
||||
height: 128px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
width: 293px;
|
||||
height: 24px;
|
||||
margin: 25px auto 0;
|
||||
margin-top: 25px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
|
|
@ -70,6 +81,10 @@
|
|||
bottom: 30px;
|
||||
right: 50%;
|
||||
transform: translateX(-520px);
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -80,18 +95,21 @@
|
|||
background-repeat: no-repeat;
|
||||
padding-top: 80px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& > div {
|
||||
width: 1160px;
|
||||
margin: 0 auto;
|
||||
#case-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
flex-wrap: wrap;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 4px 16px 0 rgba(7, 42, 68, 0.1);
|
||||
background-color: #ffffff;
|
||||
|
|
@ -100,6 +118,7 @@
|
|||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
margin-left: 30px;
|
||||
margin-bottom: 10px;
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
|
|
@ -126,13 +145,27 @@
|
|||
z-index: 2;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: 20px;
|
||||
margin-right: 21px;
|
||||
margin-right: 20px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
margin: 20px 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
li:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
margin: 20px 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -157,5 +190,9 @@
|
|||
bottom: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(500px);
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -201,3 +201,9 @@ section {
|
|||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.bg-cover {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,13 @@
|
|||
padding-top: 60px;
|
||||
padding-bottom: 100px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
width: 1160px;
|
||||
margin: 0 auto;
|
||||
|
||||
& > ul {
|
||||
|
||||
|
|
@ -33,6 +36,11 @@
|
|||
margin-bottom: 12px;
|
||||
border-radius: 4px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
height: auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.left-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -58,6 +66,9 @@
|
|||
top: 50%;
|
||||
right: 208px;
|
||||
transform: translate(50%, -50%);
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,6 +83,11 @@
|
|||
box-shadow: 0 4px 15px 0 rgba(7,42,68,.1);
|
||||
background-color: #fff;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding: 24px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
|
||||
|
|
@ -96,6 +112,7 @@
|
|||
font-size: 14px;
|
||||
line-height: 2;
|
||||
color: #919aa3;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.line {
|
||||
|
|
@ -128,6 +145,10 @@
|
|||
height: 304px;
|
||||
border-radius: 3px;
|
||||
object-fit: contain;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@
|
|||
padding-top: 93px;
|
||||
|
||||
& > div {
|
||||
width: 1160px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
|
||||
.breadcrumb {
|
||||
|
|
@ -27,6 +25,12 @@
|
|||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background-color: #f5f8f9;
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
|
|
@ -47,6 +51,10 @@
|
|||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
color: #171c34;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -123,6 +131,9 @@
|
|||
|
||||
.aside {
|
||||
width: 230px;
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
display: none;
|
||||
}
|
||||
.title {
|
||||
height: 32px;
|
||||
font-size: 24px;
|
||||
|
|
|
|||
|
|
@ -4,13 +4,10 @@
|
|||
|
||||
.section-1 {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
padding-top: 138px;
|
||||
padding-bottom: 100px;
|
||||
|
||||
.title-div {
|
||||
position: absolute;
|
||||
top: 138px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -28,7 +25,12 @@
|
|||
& > div {
|
||||
& > ul {
|
||||
position: relative;
|
||||
transform: translateY(-40px);
|
||||
transform: translateY(-60px);
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& > li {
|
||||
position: relative;
|
||||
width: 373px;
|
||||
|
|
@ -37,6 +39,7 @@
|
|||
box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
margin-top: 20px;
|
||||
& > .title {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
|
|
@ -52,11 +55,10 @@
|
|||
}
|
||||
|
||||
& > ul {
|
||||
margin-top: 40px;
|
||||
margin-left: 60px;
|
||||
width: 216px;
|
||||
margin: 60px auto 0;
|
||||
|
||||
li {
|
||||
width: 216px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
padding-bottom: 12px;
|
||||
|
|
@ -95,6 +97,12 @@
|
|||
.organization-div {
|
||||
margin-top: 60px;
|
||||
text-align: center;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
margin-top: 20px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
|
@ -102,6 +110,14 @@
|
|||
& > div {
|
||||
position: relative;
|
||||
height: 454px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
height: auto;
|
||||
& > img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.top-div {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
|
|
@ -114,6 +130,10 @@
|
|||
border-radius: 3px;
|
||||
box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
|
||||
background-color: #060845;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
& > ul {
|
||||
|
|
@ -123,6 +143,14 @@
|
|||
width: 896px;
|
||||
transform: translateX(-50%);
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
position: relative;
|
||||
top: 0;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
& > li {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
|
|
@ -133,9 +161,17 @@
|
|||
color: #ffffff;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
|
||||
background-color: #7371df;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
margin-top: 10px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
& > div {
|
||||
background-color: #7371df;
|
||||
|
||||
img, span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -156,10 +192,19 @@
|
|||
box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
|
||||
background-color: #ffffff;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
object-fit: fill;
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -186,6 +231,14 @@
|
|||
opacity: 0.8;
|
||||
background-color: #060845;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -194,6 +247,16 @@
|
|||
transform: translateY(-50%);
|
||||
border: 6px solid transparent;
|
||||
border-left-color: #060845;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 6px solid transparent;
|
||||
border-top-color: #060845;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -213,6 +276,14 @@
|
|||
opacity: 0.8;
|
||||
background-color: #060845;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -221,6 +292,16 @@
|
|||
transform: translateY(-50%);
|
||||
border: 6px solid transparent;
|
||||
border-right-color: #060845;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 6px solid transparent;
|
||||
border-top-color: #060845;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -236,68 +317,78 @@
|
|||
padding-top: 40px;
|
||||
|
||||
& > p {
|
||||
width: 964px;
|
||||
margin: 12px auto 0;
|
||||
}
|
||||
|
||||
& > ul {
|
||||
padding-bottom: 30px;
|
||||
text-align: left;
|
||||
border-bottom: solid 2px #e5e5e5;
|
||||
& > .scroll {
|
||||
|
||||
.active {
|
||||
background-image: linear-gradient(148deg, #4a499a 16%, #8552c3 85%);
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& > ul {
|
||||
padding-bottom: 30px;
|
||||
text-align: left;
|
||||
border-bottom: solid 2px #e5e5e5;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-image: linear-gradient(148deg, #4a499a 16%, #8552c3 85%);
|
||||
|
||||
&:hover {
|
||||
background-image: linear-gradient(148deg, #4a499a 16%, #8552c3 85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 84px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 28px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-image: linear-gradient(38deg, #d5dee7 19%, #ffffff 113%);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-image: linear-gradient(44deg, #dee0e6 19%, #b6c2cd 86%);
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 84px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 28px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-image: linear-gradient(38deg, #d5dee7 19%, #ffffff 113%);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-image: linear-gradient(44deg, #dee0e6 19%, #b6c2cd 86%);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 13px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 134px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
bottom: -24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: #3d3e49;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 13px;
|
||||
object-fit: contain;
|
||||
|
||||
li:nth-child(1), li:nth-child(10) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 134px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
bottom: -24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: #3d3e49;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
li:nth-child(1), li:nth-child(10) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
& > .bottom-div {
|
||||
& > div {
|
||||
position: relative;
|
||||
width: 160px;
|
||||
|
|
@ -326,12 +417,20 @@
|
|||
left: -100px;
|
||||
border-bottom: 4px solid #4f5362;
|
||||
border-left: 4px solid #4f5362;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
left: -60px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-right {
|
||||
right: -100px;
|
||||
border-top: 4px solid #4f5362;
|
||||
border-right: 4px solid #4f5362;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
right: -60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -355,6 +454,11 @@
|
|||
width: 160px;
|
||||
height: 68px;
|
||||
object-fit: contain;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 104px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
li:nth-child(1) {
|
||||
|
|
@ -369,6 +473,10 @@
|
|||
text-align: center;
|
||||
padding-bottom: 93px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 445px;
|
||||
|
|
@ -383,10 +491,25 @@
|
|||
& > div {
|
||||
width: 963px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
}
|
||||
& > div {
|
||||
width: 471px;
|
||||
height: 565px;
|
||||
background-color: #ffffff;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 571px;
|
||||
height: auto;
|
||||
margin: 10px auto;
|
||||
padding: 0 20px 50px;
|
||||
}
|
||||
img {
|
||||
width: 168px;
|
||||
height: 168px;
|
||||
|
|
@ -398,17 +521,24 @@
|
|||
h3 {
|
||||
margin-top: 55px;
|
||||
color: #31383e;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
height: 96px;
|
||||
margin: 13px auto 0;
|
||||
color: #31383e;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
margin-top: 30px;
|
||||
height: 24px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.33;
|
||||
|
|
@ -424,12 +554,20 @@
|
|||
& > div:nth-child(1) {
|
||||
p {
|
||||
width: 300px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > div:nth-child(2) {
|
||||
p {
|
||||
width: 384px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -438,14 +576,7 @@
|
|||
.section-5 {
|
||||
|
||||
h2 {
|
||||
height: 52px;
|
||||
text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1);
|
||||
font-family: Roboto;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
line-height: 1.63;
|
||||
text-align: center;
|
||||
color: #171c34;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -455,12 +586,17 @@
|
|||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
margin: 10px 5px;
|
||||
|
||||
img {
|
||||
width: 210px;
|
||||
height: 100px;
|
||||
object-fit: contain;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 155px;
|
||||
height: 76px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,14 @@
|
|||
@import 'variables';
|
||||
.open-source-header {
|
||||
padding-top: 129px;
|
||||
padding-bottom: 40px;
|
||||
text-align: center;
|
||||
height: 300px;
|
||||
color: #ffffff;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit:cover;
|
||||
background-image: url("/images/common/resource-bg.jpg");
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
position: absolute;
|
||||
top: 129px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
height: 40px;
|
||||
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
|
|
@ -28,7 +18,6 @@
|
|||
}
|
||||
|
||||
p {
|
||||
height: 24px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 16px;
|
||||
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
|
|
@ -69,8 +58,7 @@
|
|||
}
|
||||
|
||||
.open-source-tab {
|
||||
width: 1160px;
|
||||
margin: 40px auto 0;
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
li {
|
||||
position: relative;
|
||||
|
|
@ -80,9 +68,15 @@
|
|||
font-weight: 600;
|
||||
color: #36435c;
|
||||
cursor: pointer;
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
li + li {
|
||||
margin-left: 40px;
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: rgb(48, 62, 90);
|
||||
|
|
@ -103,6 +97,10 @@
|
|||
height: 0;
|
||||
border: 1em solid transparent;
|
||||
border-bottom-color: #fff;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,18 +3,14 @@
|
|||
|
||||
.section-1 {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
padding-top: 138px;
|
||||
padding-bottom: 100px;
|
||||
|
||||
.title-div {
|
||||
position: absolute;
|
||||
top: 138px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 1067px;
|
||||
margin: 12px auto 0;
|
||||
letter-spacing: -0.04px;
|
||||
color: #ffffff;
|
||||
|
|
@ -29,6 +25,10 @@
|
|||
right: 50%;
|
||||
bottom: -40px;
|
||||
transform: translateX(-490px);
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
& > div {
|
||||
display: flex;
|
||||
|
|
@ -42,16 +42,35 @@
|
|||
height: 298px;
|
||||
border-radius: 10px 0 0 10px;
|
||||
background-color: #ffffff;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 351px;
|
||||
height: 48px;
|
||||
margin: 38px 80px 12px 40px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
p {
|
||||
width: 391px;
|
||||
height: 160px;
|
||||
margin-left: 40px;
|
||||
line-height: 2;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.img-1 {
|
||||
position: absolute;
|
||||
|
|
@ -71,6 +90,10 @@
|
|||
border-radius: 0 10px 10px 0;
|
||||
background-color: #3d3e49;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > img {
|
||||
margin-top: 107px;
|
||||
margin-left: 45px;
|
||||
|
|
@ -161,6 +184,10 @@
|
|||
ul {
|
||||
margin-top: 20px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 570px;
|
||||
height: 309px;
|
||||
|
|
@ -169,6 +196,10 @@
|
|||
box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
|
||||
background-color: #ffffff;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 40px 40px 20px;
|
||||
}
|
||||
|
|
@ -178,11 +209,16 @@
|
|||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
line-height: 2;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
margin-left: 40px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
|
@ -202,8 +238,17 @@
|
|||
margin-top: 20px;
|
||||
font-size: 0;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
li:nth-child(4n + 1) {
|
||||
margin-left: 0;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
margin: 20px 10px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -217,6 +262,10 @@
|
|||
box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
|
||||
background-color: #ffffff;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
margin: 20px 10px 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.content {
|
||||
display: block;
|
||||
|
|
@ -253,7 +302,7 @@
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 40px 30px;
|
||||
padding: 20px 30px;
|
||||
background-image: radial-gradient(circle at -23% -21%, #cdf6d5, #089566 75%);
|
||||
font-size: 14px;
|
||||
line-height: 1.71;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
@import 'open-source';
|
||||
|
||||
@import 'variables';
|
||||
|
||||
.tab-content {
|
||||
background-color: #fff;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 100px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
min-height: 580px;
|
||||
|
|
@ -21,6 +25,10 @@
|
|||
box-shadow: 0 4px 15px 0 rgba(7,42,68,.1);
|
||||
background-color: #fff;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li:first-of-type {
|
||||
border-bottom: 1px solid rgba(181,193,204,.5);
|
||||
font-size: 16px;
|
||||
|
|
@ -50,6 +58,10 @@
|
|||
.right {
|
||||
padding-left: 300px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding: 32px 157px 32px 120px;
|
||||
|
|
@ -101,6 +113,22 @@
|
|||
color: #55bc8a;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding: 12px 30px 12px 54px;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
div {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li + li {
|
||||
|
|
|
|||
|
|
@ -7,15 +7,10 @@ html {
|
|||
|
||||
.section-1 {
|
||||
position: relative;
|
||||
height: 350px;
|
||||
padding-top: 129px;
|
||||
|
||||
.title-div {
|
||||
position: absolute;
|
||||
width: 1160px;
|
||||
top: 129px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
padding-bottom: 60px;
|
||||
h1 {
|
||||
width: 1060px;
|
||||
}
|
||||
|
|
@ -27,6 +22,19 @@ html {
|
|||
color: #ffffff;
|
||||
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
top: 100px;
|
||||
|
||||
h1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,8 +45,7 @@ html {
|
|||
position: relative;
|
||||
|
||||
h2 {
|
||||
width: 760px;
|
||||
margin: 0 auto 45px;
|
||||
margin-bottom: 45px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -53,6 +60,10 @@ html {
|
|||
& > div {
|
||||
width: 460px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 24px;
|
||||
opacity: 0.9;
|
||||
|
|
@ -84,6 +95,10 @@ html {
|
|||
|
||||
img {
|
||||
width: 660px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -93,14 +108,23 @@ html {
|
|||
.section-3 {
|
||||
position: relative;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 20px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.bg-left {
|
||||
position: absolute;
|
||||
top: 242px;
|
||||
right: 50%;
|
||||
transform: translateX(-200px);
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-right {
|
||||
|
|
@ -108,6 +132,10 @@ html {
|
|||
top: 200px;
|
||||
left: 50%;
|
||||
transform: translateX(180px);
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
|
|
@ -115,6 +143,10 @@ html {
|
|||
img {
|
||||
width: 955px;
|
||||
margin-top: 40px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -132,7 +164,7 @@ html {
|
|||
font-size: 16px;
|
||||
border-radius: 28px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
|
||||
box-shadow: 0 10px 8px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 8px 0 rgba(34, 43, 62, 0.1);
|
||||
background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -5,9 +5,12 @@
|
|||
padding-top: 60px;
|
||||
padding-bottom: 100px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
width: 1160px;
|
||||
margin: 0 auto;
|
||||
|
||||
& > .video-tab-ul {
|
||||
padding: 30px 34px 22px;
|
||||
|
|
@ -49,6 +52,9 @@
|
|||
.video-ul {
|
||||
margin-top: 20px;
|
||||
font-size: 0;
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& > li {
|
||||
position: relative;
|
||||
|
|
@ -61,6 +67,7 @@
|
|||
background-color: #eef4f8;
|
||||
background-image: url('/images/videos/video-bg.svg');
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
|
||||
& > img {
|
||||
|
|
@ -126,10 +133,21 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 330px;
|
||||
height: 190px;
|
||||
display: block;
|
||||
margin: 30px auto;
|
||||
}
|
||||
}
|
||||
|
||||
li:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
margin: 30px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -168,11 +186,11 @@
|
|||
height: 420px;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
font-size: 0;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 420px;
|
||||
background-color: #171c34;
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -181,4 +199,15 @@
|
|||
top: -40px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ css: "scss/case.scss"
|
|||
section1:
|
||||
title: User Case Studies
|
||||
content: KubeSphere is trusted by various enterprises and organizations to the innovators driving the future of software.
|
||||
topImage: "images/case/case-top.jpg"
|
||||
topImage: "/images/case/case-top.jpg"
|
||||
|
||||
section2:
|
||||
tip: Read Case Study →
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: 'Development Practices of CSI Storage Plugins - Part Ⅰ'
|
||||
author: 'Xin Wang'
|
||||
date: '2019-06-25'
|
||||
createTime: '2019-06-25'
|
||||
---
|
||||
|
||||
Many users will transfer their apps to Kubernetes, where storage underlies applications. As users deploy their apps on the Kubernetes, some existing storage plugins are unable to satisfy the growing needs in terms of both diversity and functionality. This is why we need to accelerate the development of new storage plugins, and integrate QingCloud storage services with Kubernetes and KubeSphere.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: 'Cloud Native Observability: Log Management'
|
||||
author: 'Benjamin Huo, Dan Ma'
|
||||
date: '2019-06-25'
|
||||
createTime: '2019-06-25'
|
||||
---
|
||||
|
||||
As logs often contain very valuable information, log management represents an important part of cloud native observability. Logs feature a standard output (stdout) in containers and Kubernetes, which is different from physical machines or virtual machines. This means the collection, analysis and management of logs at the platform level can be carried out in a unified fashion, which demonstrates the unique value of logs. This article introduces a major solution to log management (EFK) in the cloud native area, FluentBit Operator developed by the KubeSphere team and some practices of KubeSphere in multi-tenant log management. Besides, the article also elaborates on an open source tool Loki, a low-cost and extensible application inspired by Prometheus and developed specifically for the log management of Kubernetes.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: 'Porter: An Open Source Load Balancer for Kubernetes in a Bare Metal Environment'
|
||||
author: 'Xuetao Song'
|
||||
date: '2019-06-25'
|
||||
createTime: '2019-06-25'
|
||||
---
|
||||
|
||||
We know that we can use the service of LoadBalancer in the Kubernetes cluster to expose backend workloads externally. Cloud providers often offer cloud LoadBalancer plugins, which requires the cluster to be deployed on a specific IaaS platform. However, many enterprise users often deploy the Kubernetes cluster on bare metal, especially when it is used for the production environment. For the local bare metal cluster, Kubernetes does not provide LB implementation. Porter is an open source load balancer designed specifically for the bare metal Kubernetes cluster, which serves as an excellent solution to this problem.
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ css: "scss/contribution.scss"
|
|||
section1:
|
||||
title: 'Community is the Soul of KubeSphere'
|
||||
content: 'Join the community to get help, get involved, or get updates and KubeSphere news!'
|
||||
topImage: "images/contribution/contribution-top.jpg"
|
||||
topImage: "/images/contribution/contribution-top.jpg"
|
||||
|
||||
section2:
|
||||
topType:
|
||||
|
|
@ -47,7 +47,7 @@ section2:
|
|||
topic: 'Community Governance'
|
||||
name: 'KubeSphere Community'
|
||||
icon: 'images/contribution/28.svg'
|
||||
topIcon: 'images/contribution/8.svg'
|
||||
topIcon: 'images/contribution/8.png'
|
||||
type:
|
||||
- name: 'TOC'
|
||||
icon: 'images/contribution/toc.svg'
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ css: "scss/partner.scss"
|
|||
section1:
|
||||
title: 'Join the Revolution, Partner with KubeSphere'
|
||||
content: 'We look forward to your joining KubeSphere partner to improve the ecosystem of both, and grow your business. KubeSphere provide resources and rights for partners to help them increase their expertise, deliver open source technology, and resell product.'
|
||||
topImage: 'images/partner/partner-top.jpg'
|
||||
topImage: '/images/partner/partner-top.jpg'
|
||||
|
||||
section2:
|
||||
title: 'Together, build partnership for success all over the world'
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{ define "main" }}
|
||||
{{- partial "openSource.html" . -}}
|
||||
<section class='section-1'>
|
||||
<div>
|
||||
<div class="common-layout">
|
||||
<ul class='blog-tab-ul'>
|
||||
<li class='active'>{{ .Params.tip }}</li>
|
||||
{{ $tags := slice }}
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<img src="" alt="">
|
||||
<span>{{ .Params.author }}</span>
|
||||
</div>
|
||||
<p class='summary'>{{ substr .Summary 0 89 }}</p>
|
||||
<p class='summary'>{{ substr .Summary 0 120 }}</p>
|
||||
<ul>
|
||||
{{ range (split .Params.tag ",") }}
|
||||
<li>{{ . }}</li>
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@
|
|||
<body>
|
||||
{{- partial "header.html" . -}}
|
||||
<section class="main-section">
|
||||
<div>
|
||||
<div class="common-layout">
|
||||
<div class='breadcrumb'>
|
||||
<span><a href='{{ "blogs" | absLangURL }}'>{{ i18n "introduction1"}}</a> > </span>
|
||||
<span>{{ .Title }}</span>
|
||||
</div>
|
||||
<div class='main-div'>
|
||||
<div class='author'>{{ .Params.author }}</div>
|
||||
<div class='date'>{{ i18n "introduction3" }}：{{ .Params.createTime }}</div>
|
||||
<div class='date'>{{ i18n "introduction3" }}：{{ string .Params.createTime }}</div>
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class='content'>
|
||||
<div class='md-body'>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
{{ define "main" }}
|
||||
<section class="section-1">
|
||||
{{ with .Params.section1 }}
|
||||
<img class="top-cover-img" src="{{ .topImage | absURL }}" alt="">
|
||||
<div class="title-div">
|
||||
|
||||
{{ with .Params.section1 }}
|
||||
<section class="section-1 bg-cover" style='background-image: url("{{ .topImage }}");'>
|
||||
<div class="title-div common-layout">
|
||||
<h1 class="title-center-h1">{{ .title }}</h1>
|
||||
<p class="common-p">{{ .content }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
<section class="section-2">
|
||||
{{ with .Params.section2 }}
|
||||
|
|
@ -29,8 +29,8 @@
|
|||
|
||||
<section class="section-3">
|
||||
{{ with .Params.section3 }}
|
||||
<h2 class="title-black-h2">{{ .title }}</h2>
|
||||
<div>
|
||||
<h2 class="title-black-h2 common-layout">{{ .title }}</h2>
|
||||
<div class="common-layout">
|
||||
<ul id="case-group">
|
||||
<li class="active">{{ .tip }}</li>
|
||||
{{ range .caseType }}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{{- partial "openSource.html" . -}}
|
||||
<section>
|
||||
<div class="tab-content">
|
||||
<div class="content">
|
||||
<div class="content common-layout">
|
||||
<ul>
|
||||
{{ $viewDetail := .Params.viewDetail }}
|
||||
{{ range .Params.list }}
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@
|
|||
<body>
|
||||
{{- partial "header.html" . -}}
|
||||
<section class="main-section">
|
||||
<div>
|
||||
<div class="common-layout">
|
||||
<div class='breadcrumb'>
|
||||
<span><a href='{{ "conferences" | absLangURL }}'>{{ i18n "introduction4"}}</a> > </span>
|
||||
<span>{{ .Title }}</span>
|
||||
</div>
|
||||
<div class='main-div'>
|
||||
<div class='author'>{{ .Params.author }}</div>
|
||||
<div class='date'>{{ i18n "introduction3" }}：{{ .Params.date }}</div>
|
||||
<div class='date'>{{ i18n "introduction3" }}：{{ string .Params.createTime }}</div>
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class='content'>
|
||||
<div class='md-body'>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
{{ define "main" }}
|
||||
|
||||
<section class="section-1">
|
||||
{{ with .Params.section1 }}
|
||||
<img class="top-cover-img" src="{{ .topImage | absURL }}" alt="">
|
||||
<div class="title-div">
|
||||
{{ with .Params.section1 }}
|
||||
<section class="section-1 bg-cover" style='background-image: url("{{ .topImage }}");'>
|
||||
<div class="title-div common-layout">
|
||||
<h1 class="title-center-h1">{{ .title }}</h1>
|
||||
<p class="common-p">{{ .content }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
<section class="section-2">
|
||||
{{ with .Params.section2 }}
|
||||
|
|
@ -72,24 +71,26 @@
|
|||
{{ end }}
|
||||
</section>
|
||||
|
||||
<section class='section-3'>
|
||||
<section class='section-3 common-layout'>
|
||||
{{ with .Params.section3.interestGroup }}
|
||||
<h2 class="title-black-h2">{{ .title }}</h2>
|
||||
<p class="title-p">{{ .content }}</p>
|
||||
<ul class='interest-ul common-layout' data-index='0' data-length='{{ len .children }}'>
|
||||
{{ range $index, $element := .children }}
|
||||
{{ $active := "" }}
|
||||
{{ $icon := $element.icon }}
|
||||
{{ if eq $index 0 }}
|
||||
{{ $active = "active" }}
|
||||
{{ $icon = $element.iconActive }}
|
||||
{{ end }}
|
||||
<li class="{{ $active }}" data-info='{{ . | jsonify }}' data-index='{{ $index }}'>
|
||||
<img src="{{ $icon | absURL }}" alt="">
|
||||
<p>{{ $element.name }}</p>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<div class="scroll">
|
||||
<ul class='interest-ul common-layout' data-index='0' data-length='{{ len .children }}'>
|
||||
{{ range $index, $element := .children }}
|
||||
{{ $active := "" }}
|
||||
{{ $icon := $element.icon }}
|
||||
{{ if eq $index 0 }}
|
||||
{{ $active = "active" }}
|
||||
{{ $icon = $element.iconActive }}
|
||||
{{ end }}
|
||||
<li class="{{ $active }}" data-info='{{ . | jsonify }}' data-index='{{ $index }}'>
|
||||
<img src="{{ $icon | absURL }}" alt="">
|
||||
<p>{{ $element.name }}</p>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
<div class='bottom-div'>
|
||||
{{ with $first := index .children 0}}
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -200,10 +200,11 @@
|
|||
$('.image').find('img').attr('src', "/images/home/applications2.png")
|
||||
}
|
||||
$(window).resize(function() {
|
||||
var screenWidth = $(window).width()
|
||||
if (screenWidth <= 768) {
|
||||
$('.image').find('img').attr('src', "/images/home/applications2.png")
|
||||
} else {
|
||||
$('.image').find('img').attr('src', "/images/home/applications1.png")
|
||||
$('.image').find('img').attr('src', "/images/home/applications.png")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
{{ define "main" }}
|
||||
<section class='section-1'>
|
||||
{{ with .Params.section1}}
|
||||
<img class="top-cover-img" src="{{ .image }}" alt="">
|
||||
<div class="title-div">
|
||||
|
||||
{{ with .Params.section1}}
|
||||
<section class='section-1 bg-cover' style='background-image: url("{{ .image }}");'>
|
||||
<div class="title-div common-layout">
|
||||
<h1 class="title-h1">{{ .title }}</h1>
|
||||
<p class="common-p">{{ .content }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
<section class="section-2">
|
||||
{{ with .Params.section2 }}
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@
|
|||
{{ end}}
|
||||
{{ end }}
|
||||
|
||||
<li {{ if $active }} class="menu-li menu-active" {{ else }} class="menu-li" {{ end}}>
|
||||
<li data-check="0" {{ if $active }} class="menu-li menu-active" {{ else }} class="menu-li" {{ end}}>
|
||||
<span class='menu-span'>{{ .Name }}</span>
|
||||
<ul class="dropdown-menu">
|
||||
{{ range .Children }}
|
||||
|
|
@ -136,13 +136,13 @@ var bindClickShowMenu = function() {
|
|||
}
|
||||
|
||||
var bindClickModalLi = function() {
|
||||
var check = false
|
||||
$('.modal .menu-li').click(function() {
|
||||
if (!check) {
|
||||
check = true
|
||||
var check = $(this).data('check')
|
||||
if (check === 0) {
|
||||
$(this).data('check', 1)
|
||||
$(this).find('.dropdown-menu').slideDown(200)
|
||||
} else {
|
||||
check = false
|
||||
$(this).data('check', 0)
|
||||
$(this).find('.dropdown-menu').slideUp(200)
|
||||
}
|
||||
$(this).find('.menu-span').toggleClass('up')
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<section>
|
||||
<div class='open-source-header'>
|
||||
<img src='{{ "/images/common/resource-bg.jpg" | absURL }}' alt="">
|
||||
<div>
|
||||
<div class='open-source-header bg-cover'>
|
||||
<div class="common-layout">
|
||||
<h1>{{ i18n "introduction10" }}</h1>
|
||||
<p>{{ i18n "introduction11" }}</p>
|
||||
<div>
|
||||
|
|
@ -16,7 +15,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="open-source-tab">
|
||||
<ul class="open-source-tab common-layout">
|
||||
{{ $section := .Page.Section }}
|
||||
{{ $menus := (index .Site.Menus.main 2).Children }}
|
||||
{{ range $menus }}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
{{ define "main" }}
|
||||
|
||||
<section class="section-1">
|
||||
{{ with .Params.section1 }}
|
||||
<img class="top-cover-img" src="{{ .topImage | absURL }}" alt="">
|
||||
<div class="title-div">
|
||||
{{ with .Params.section1 }}
|
||||
<section class="section-1 bg-cover" style='background-image: url("{{ .topImage }}");'>
|
||||
<div class="title-div common-layout">
|
||||
<h1 class="title-center-h1">{{ .title }}</h1>
|
||||
<p class="common-p">{{ .content }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
<section class="section-2">
|
||||
{{ with .Params.section2 }}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
{{ define "main" }}
|
||||
<section class='section-1'>
|
||||
{{ with .Params.section1}}
|
||||
<img class="top-cover-img" src="{{ .image }}" alt="">
|
||||
<div class="title-div">
|
||||
|
||||
{{ with .Params.section1}}
|
||||
<section class='section-1 bg-cover' style='background-image: url("{{ .image }}");'>
|
||||
<div class="title-div common-layout">
|
||||
<h1 class="title-h1">{{ .title }}</h1>
|
||||
<p class="common-p">{{ .content }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
<section class="section-2">
|
||||
{{ with .Params.section2 }}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{{- partial "openSource.html" . -}}
|
||||
{{ $data := index .Site.Data .Site.Language.Lang }}
|
||||
<section class='section-1'>
|
||||
<div>
|
||||
<div class="common-layout">
|
||||
<ul class='video-tab-ul'>
|
||||
<li class='active'>{{ .Params.tip }}</li>
|
||||
{{ $groups := slice }}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 384 B |
Loading…
Reference in New Issue