mirror of
https://github.com/kubesphere/website.git
synced 2025-12-26 00:12:48 +00:00
Merge pull request #17 from liuboaibc/update/addCaseDetailPage
add case detail page
This commit is contained in:
pengfei
GitHub
commit
98c1fd12c3
|
|
@ -0,0 +1,187 @@
|
|||
.section-1 {
|
||||
height: 300px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
div {
|
||||
position: relative;
|
||||
width: 1160px;
|
||||
margin: -162px auto 0;
|
||||
|
||||
h1 {
|
||||
height: 40px;
|
||||
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.11px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 733px;
|
||||
margin-top: 12px;
|
||||
opacity: 0.8;
|
||||
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.04px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-2 {
|
||||
position: relative;
|
||||
& > img {
|
||||
position: absolute;
|
||||
top: 320px;
|
||||
left: 50%;
|
||||
transform: translateX(400px);
|
||||
}
|
||||
& > div {
|
||||
position: relative;
|
||||
width: 1160px;
|
||||
margin: 0 auto;
|
||||
padding-top: 56px;
|
||||
z-index: 2;
|
||||
|
||||
.ul-left {
|
||||
width: 668px;
|
||||
|
||||
& > li + li {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
& > li {
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
left: 28px;
|
||||
letter-spacing: -0.07px;
|
||||
color: #30313b;
|
||||
}
|
||||
|
||||
& > p {
|
||||
margin-top: 12px;
|
||||
font-size: 16px;
|
||||
line-height: 1.75;
|
||||
letter-spacing: -0.04px;
|
||||
color: #919aa3;
|
||||
}
|
||||
|
||||
& > img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
|
||||
& > ul {
|
||||
width: 660px;
|
||||
font-size: 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 220px;
|
||||
height: 126px;
|
||||
|
||||
p {
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 16px;
|
||||
line-height: 1.75;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
li:nth-child(1) {
|
||||
background-image: linear-gradient(to left, #0c8349 99%, #00603c 0%);
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background-image: linear-gradient(to left, #2a9762 99%, #278d67 0%);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
background-image: linear-gradient(to left, #65c194 99%, #4ca986 9%);
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
position: relative;
|
||||
padding: 20px 60px 20px 38px;
|
||||
border-radius: 8px;
|
||||
background-image: linear-gradient(107deg, #4a499a 28%, #8552c3 81%);
|
||||
|
||||
.p1 {
|
||||
font-size: 16px;
|
||||
line-height: 1.75;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.p2 {
|
||||
opacity: 0.8;
|
||||
font-size: 14px;
|
||||
line-height: 1.86;
|
||||
letter-spacing: 0.35px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: -56px;
|
||||
width: 373px;
|
||||
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;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 293px;
|
||||
margin: 0 auto;
|
||||
height: 120px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.ul-right {
|
||||
padding: 4px 60px 26px;
|
||||
|
||||
li + li {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
li {
|
||||
.p1 {
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
color: #30313b;
|
||||
}
|
||||
|
||||
.p2 {
|
||||
font-size: 16px;
|
||||
line-height: 1.75;
|
||||
letter-spacing: -0.04px;
|
||||
color: #919aa3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,11 @@
|
|||
@import 'footer';
|
||||
|
||||
body {
|
||||
font-family: $font-family-id;
|
||||
font-family: $font-family-2;
|
||||
}
|
||||
|
||||
h1, h2, h3 ,h4, h5, h6 {
|
||||
font-family: $font-family-1;
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
width: 209px;
|
||||
height: 20px;
|
||||
font-size: 14px;
|
||||
margin-left: 17px;
|
||||
margin-left: 16px;
|
||||
color: #ccd3db;
|
||||
border: none;
|
||||
background-color: #f5f8f9;
|
||||
|
|
@ -88,7 +88,6 @@
|
|||
display: block;
|
||||
line-height: 2;
|
||||
color: #919aa3;
|
||||
font-family: $font-family-id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ section {
|
|||
}
|
||||
|
||||
h1 {
|
||||
width: 668px;
|
||||
width: 660px;
|
||||
height: 120px;
|
||||
margin-top: 12px;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -65,7 +65,7 @@ section {
|
|||
}
|
||||
|
||||
.p2 {
|
||||
width: 668px;
|
||||
width: 660px;
|
||||
height: 72px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 30px;
|
||||
|
|
@ -113,14 +113,16 @@ section {
|
|||
top: 231px;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
width: 480px;
|
||||
height: 297px;
|
||||
width: 460px;
|
||||
object-fit: contain;
|
||||
border: 6px solid #ffffff;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 10px 20px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 30px 0 rgba(34, 43, 62, 0.1);
|
||||
}
|
||||
|
||||
.img2 {
|
||||
top: 490px;
|
||||
right: 454px;
|
||||
top: 470px;
|
||||
right: 445px;
|
||||
}
|
||||
|
||||
.img4 {
|
||||
|
|
@ -221,7 +223,7 @@ section {
|
|||
width: 964px;
|
||||
margin: 16px auto 50px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
line-height: 2;
|
||||
color: #919aa3;
|
||||
}
|
||||
|
||||
|
|
@ -310,6 +312,7 @@ section {
|
|||
font-size: 16px;
|
||||
color: #36435c;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
li::before {
|
||||
|
|
@ -327,6 +330,7 @@ section {
|
|||
|
||||
& > img {
|
||||
position: absolute;
|
||||
max-width: 365px;
|
||||
bottom: -50px;
|
||||
right: -16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
$mobile-max-width: 768px;
|
||||
|
||||
.md-body {
|
||||
font-family: $font-family-id;
|
||||
font-size: 16px;
|
||||
line-height: 2;
|
||||
word-wrap: break-word;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
$font-family: 'PingFang SC', 'Lantinghei SC', 'Helvetica Neue', Helvetica, Arial,
|
||||
'Microsoft YaHei', 微软雅黑, STHeitiSC-Light, simsun, 宋体,
|
||||
'WenQuanYi Zen Hei', 'WenQuanYi Micro Hei', sans-serif;
|
||||
$font-family-id: Roboto, $font-family;
|
||||
$font-family-1: Roboto, $font-family;
|
||||
$font-family-2: Proxima Nova, $font-family;
|
||||
|
|
@ -15,32 +15,32 @@ section2:
|
|||
- icon: "images/case/case1.jpg"
|
||||
content: "KubeSphere is trusted by various enterprises and organizations to the innovators driving the future
|
||||
of software."
|
||||
link: ""
|
||||
link: "aqara"
|
||||
|
||||
- icon: "images/case/case2.jpg"
|
||||
content: "KubeSphere is trusted by various enterprises and organizations to the innovators driving the future
|
||||
of software."
|
||||
link: ""
|
||||
link: "aqara"
|
||||
|
||||
- icon: "images/case/case3.jpg"
|
||||
content: "KubeSphere is trusted by various enterprises and organizations to the innovators driving the future
|
||||
of software."
|
||||
link: ""
|
||||
link: "aqara"
|
||||
|
||||
- icon: "images/case/case4.jpg"
|
||||
content: "KubeSphere is trusted by various enterprises and organizations to the innovators driving the future
|
||||
of software."
|
||||
link: ""
|
||||
link: "aqara"
|
||||
|
||||
- icon: "images/case/case5.jpg"
|
||||
content: "KubeSphere is trusted by various enterprises and organizations to the innovators driving the future
|
||||
of software."
|
||||
link: ""
|
||||
link: "aqara"
|
||||
|
||||
- icon: "images/case/case6.jpg"
|
||||
content: "KubeSphere is trusted by various enterprises and organizations to the innovators driving the future
|
||||
of software."
|
||||
link: ""
|
||||
link: "aqara"
|
||||
|
||||
section3:
|
||||
title: 'Various Industries are Powered by KubeSphere'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
title: Aqara
|
||||
description:
|
||||
|
||||
css: scss/case-detail.scss
|
||||
|
||||
section1:
|
||||
title: Aqara
|
||||
content: KubeSphere is trusted by various enterprises and organizations to the innovators driving the future of software.
|
||||
|
||||
section2:
|
||||
listLeft:
|
||||
- title: Company Introduction
|
||||
content: China Minsheng Bank’s main applications were written in C and Java, using traditional architecture. “Our biggest challenge is how to make our traditional legacy applications adaptable to the cloud native environment,” says Zhang Li, who is leader of technology for CMBC’s container cloud. “We want to do distributed applications because in the past we used VMs, and that was quite expensive.”
|
||||
image: /images/case/aqara-1.jpg
|
||||
|
||||
- title: Challenge
|
||||
content: CMBC brought in Alibaba Cloud to help with its cloud native transformation. The company is now in the process of breaking down and migrating its legacy applications to a Kubernetes platform, as well as developing new microservices on it.
|
||||
image:
|
||||
|
||||
- title: Solution
|
||||
content: With the Kubernetes platform, delivery efficiency has increased 3-4x, and resource utilization has doubled. “We are now developing AI-based applications, a blockchain application, and some big data analysis applications on the cloud native platform,” says Zhang.
|
||||
image:
|
||||
|
||||
- title: Benefit
|
||||
content: With the Kubernetes platform, delivery efficiency has increased 3-4x, and resource utilization has doubled. “We are now developing AI-based applications, a blockchain application, and some big data analysis applications on the cloud native platform,” says Zhang.
|
||||
image:
|
||||
|
||||
- type: 1
|
||||
contentList:
|
||||
- content: With the Kubernetes platform
|
||||
- content: With the Kubernetes platform
|
||||
- content: With the Kubernetes platform
|
||||
|
||||
|
||||
- title: Installation Architecture
|
||||
content: CMBC brought in Alibaba Cloud to help with its cloud native transformation. The company is now in the process of breaking down and migrating its legacy applications to a Kubernetes platform, as well as developing new microservices on it.
|
||||
image:
|
||||
|
||||
- title: Bussiness introduction
|
||||
content: With the Kubernetes platform, delivery efficiency has increased 3-4x, and resource utilization has doubled. “We are now developing AI-based applications, a blockchain application, and some big data analysis applications on the cloud native platform,” says Zhang.
|
||||
image:
|
||||
|
||||
- type: 2
|
||||
content: 'We are now developing AI-based applications, a blockchain application, and some big data analysis applications'
|
||||
author: 'Katherine Martinez'
|
||||
|
||||
- title: Testimonial
|
||||
content: With the Kubernetes platform, delivery efficiency has increased 3-4x, and resource utilization has doubled. “We are now developing AI-based applications, a blockchain application, and some big data analysis applications on the cloud native platform,” says Zhang.
|
||||
image:
|
||||
|
||||
rightPart:
|
||||
icon: /images/case/aqara-detail.jpg
|
||||
list:
|
||||
- title: INDUSTRY
|
||||
content: Financial Services
|
||||
- title: LOCATION
|
||||
content: China
|
||||
- title: CLOUD TYPE
|
||||
content: Hybrid
|
||||
- title: CHALLENGES
|
||||
content: Availability, Efficiency, Velocity
|
||||
- title: ADOPTED FEATURES
|
||||
content: Hosted
|
||||
|
||||
---
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<img src="{{ .icon | absURL }}" alt="">
|
||||
<p>{{ .content }}</p>
|
||||
<div>
|
||||
<a href="">{{ $tip }}</a>
|
||||
<a href="{{ .link }}">{{ $tip }}</a>
|
||||
</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
{{ define "main" }}
|
||||
|
||||
<section class='section-1'>
|
||||
{{ with .Params.section1}}
|
||||
<img src="/images/case/case-detail-bg.png" alt="">
|
||||
<div>
|
||||
<h1>{{ .title }}</h1>
|
||||
<p>{{ .content }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
|
||||
<section class='section-2'>
|
||||
{{ with .Params.section2 }}
|
||||
<div>
|
||||
<ul class='ul-left'>
|
||||
{{ range .listLeft}}
|
||||
<li>
|
||||
{{ if eq .type 1}}
|
||||
<ul>
|
||||
{{ range .contentList }}
|
||||
<li>
|
||||
<p>{{ .content }}</p>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ else if eq .type 2}}
|
||||
<div>
|
||||
<p class='p1'>{{ .content }}</p>
|
||||
<p class='p2'>{{ .author }}</p>
|
||||
<img src="/images/case/ic-quote-right.svg" alt="">
|
||||
</div>
|
||||
{{ else }}
|
||||
<h2>{{ .title }}</h2>
|
||||
<p>{{ .content }}</p>
|
||||
{{ if .image }}
|
||||
<img src="{{ .image }}" alt="">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<div>
|
||||
{{ with .rightPart}}
|
||||
<img src="{{ .icon }}" alt="">
|
||||
<ul class='ul-right'>
|
||||
{{ range .list }}
|
||||
<li>
|
||||
<p class='p1'>{{ .title }}</p>
|
||||
<p class='p2'>{{ .content }}</p>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<img src="/images/common/hexagon.svg" alt="">
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
{{ $data := index .Site.Data .Site.Language.Lang }}
|
||||
<section class='section-1'>
|
||||
{{ with .Params.section1 }}
|
||||
<img class='img1' src="images/home/bg.png" alt="">
|
||||
<img class='img1' src="images/home/bg.jpg" alt="">
|
||||
<img class='img2' src="/images/home/12-3.png" alt="">
|
||||
<img class='img3' src="/images/home/2.svg" alt="">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<meta name="description" content="{{ with .Params.Description }}{{ . }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}">
|
||||
|
||||
<link rel="stylesheet" href="/fonts/Roboto/stylesheet.css">
|
||||
<link rel="stylesheet" href="/fonts/ProximaNova/stylesheet.css">
|
||||
|
||||
{{ $common := resources.Get "scss/common.scss" | toCSS | minify | fingerprint }}
|
||||
<link rel="stylesheet" href="{{ $common.Permalink }}">
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,54 @@
|
|||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('./ProximaNova-Bold.woff2') format('woff2'),
|
||||
url('./ProximaNova-Bold.woff') format('woff'),
|
||||
url('./ProximaNova-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('./ProximaNova-Light.woff2') format('woff2'),
|
||||
url('./ProximaNova-Light.woff') format('woff'),
|
||||
url('./ProximaNova-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('./ProximaNova-Regular.woff2') format('woff2'),
|
||||
url('./ProximaNova-Regular.woff') format('woff'),
|
||||
url('./ProximaNova-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('./ProximaNova-Semibold.woff2') format('woff2'),
|
||||
url('./ProximaNova-Semibold.woff') format('woff'),
|
||||
url('./ProximaNova-Semibold.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('./ProximaNova-SemiboldIt.woff2') format('woff2'),
|
||||
url('./ProximaNova-SemiboldIt.woff') format('woff'),
|
||||
url('./ProximaNova-SemiboldIt.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('./ProximaNova-Regular_1.woff2') format('woff2'),
|
||||
url('./ProximaNova-Regular_1.woff') format('woff'),
|
||||
url('./ProximaNova-Regular_1.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 219 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="107" height="107" viewBox="0 0 107 107">
|
||||
<defs>
|
||||
<path id="prefix__a" d="M57.61 38.98c0 7.048 5.513 12.768 12.328 12.79h14.556c3.4 0 6.162 2.84 6.183 6.356v2.145c0 9.396-7.353 17.019-16.438 17.04h-4.301c-2.261.022-4.089 1.912-4.11 4.25v8.501c.021 2.339 1.849 4.229 4.11 4.25h4.148c18.16-.043 32.872-15.259 32.914-34.041V13.438C106.979 6.39 101.448.688 94.633.688H69.938c-6.809 0-12.329 5.708-12.329 12.75V38.98zM0 38.98c0 7.048 5.513 12.768 12.328 12.79h14.556c3.4 0 6.163 2.84 6.184 6.356v2.145c0 9.396-7.353 17.019-16.438 17.04h-4.302c-2.26.022-4.088 1.912-4.109 4.25v8.501c.02 2.339 1.849 4.229 4.11 4.25h4.147c18.16-.043 32.872-15.259 32.915-34.041V13.438C49.369 6.39 43.839.688 37.024.688H12.328C5.52.688 0 6.396 0 13.438V38.98z"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd" opacity=".099" transform="translate(0 6)">
|
||||
<mask id="prefix__b" fill="#fff">
|
||||
<use xlink:href="#prefix__a"/>
|
||||
</mask>
|
||||
<g fill="#FFF" mask="url(#prefix__b)">
|
||||
<path d="M0 0H107V107H0z" transform="translate(0 -6)"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 283 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 530 KiB |
Loading…
Reference in New Issue