mirror of
https://github.com/kubesphere/website.git
synced 2025-12-26 00:12:48 +00:00
Merge pull request #23 from liuboaibc/update/addNewPage
Update/add new page
This commit is contained in:
pengfei
GitHub
commit
df8c6dd18e
|
|
@ -0,0 +1,4 @@
|
|||
.section-1 {
|
||||
padding-top: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -14,3 +14,43 @@ h1, h2, h3 ,h4, h5, h6 {
|
|||
html {
|
||||
background-color: #f5f8f9;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.title-h1 {
|
||||
font-size: 40px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.11px;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.title-black-h2 {
|
||||
text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1);
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
line-height: 1.63;
|
||||
color: #3d3e49;
|
||||
}
|
||||
|
||||
.title-white-h2 {
|
||||
text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1);
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
line-height: 1.63;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.title-p {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.04px;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,175 @@
|
|||
@import 'variables';
|
||||
@import 'mixin';
|
||||
|
||||
html {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.section-1 {
|
||||
position: relative;
|
||||
height: 350px;
|
||||
min-width: 1160px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit:cover;
|
||||
}
|
||||
|
||||
.title-div {
|
||||
position: absolute;
|
||||
width: 1160px;
|
||||
top: 129px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
h1 {
|
||||
width: 1060px;
|
||||
font-size: 40px;
|
||||
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
line-height: 1;
|
||||
letter-spacing: -0.11px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 1060px;
|
||||
margin-top: 25px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.04px;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-2 {
|
||||
background-color: #f5f8f9;
|
||||
padding-top: 60px;
|
||||
& > div {
|
||||
position: relative;
|
||||
width: 1160px;
|
||||
margin: 0 auto;
|
||||
|
||||
h2 {
|
||||
width: 760px;
|
||||
margin: 0 auto 45px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& > ul {
|
||||
& > li:nth-child(2n) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
& > li {
|
||||
@include common-flex-style;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
& > div {
|
||||
width: 460px;
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
color: #3d3e49;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 24px;
|
||||
opacity: 0.9;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #3d3e49;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
margin-top: 25px;
|
||||
padding-left: 14px;
|
||||
font-size: 16px;
|
||||
color: #36435c;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
border-radius: 50%;
|
||||
background-color: #00a971;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 660px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-3 {
|
||||
position: relative;
|
||||
padding-top: 80px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
.bg-left {
|
||||
position: absolute;
|
||||
top: 242px;
|
||||
right: 50%;
|
||||
transform: translateX(-200px);
|
||||
}
|
||||
|
||||
.bg-right {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 50%;
|
||||
transform: translateX(180px);
|
||||
}
|
||||
|
||||
& > div {
|
||||
position: relative;
|
||||
width: 1160px;
|
||||
margin: 0 auto;
|
||||
img {
|
||||
width: 955px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 56px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.04px;
|
||||
color: #31383e;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 263px;
|
||||
height: 56px;
|
||||
margin-top: 20px;
|
||||
letter-spacing: -0.04px;
|
||||
color: #ffffff;
|
||||
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);
|
||||
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 {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
---
|
||||
title: "observability"
|
||||
|
||||
css: "scss/service-mesh.scss"
|
||||
|
||||
section1:
|
||||
title: KubeSphere allows you to build visualizations simply and intuitively
|
||||
content: KubeSphere provides rich observability from infrastructure to applications. It integrates your favorite tools for multi-dimensional monitoring metrics, multi-tenant log query and collection, alerting and notification.
|
||||
image: /images/service-mesh/banner.jpg
|
||||
|
||||
section2:
|
||||
title: Discoverability, Observability, Security, Everything You Need in One Platform
|
||||
list:
|
||||
- title: Multi-dimensional Monitoring
|
||||
image: /images/observability/multi-dimensional-monitoring.png
|
||||
contentList:
|
||||
- content: <span>Infrastructure monitoring</span> provides K8s control plane and cluster node metrics
|
||||
- content: <span>Application resources monitoring</span> includes CPU, memory, network and storage metrics
|
||||
- content: <span>Resource usage ranking</span> by node, workspace and project.
|
||||
- content: <span>Service component monitoring</span> for user to quickly locate component failures
|
||||
- content: <span>Custom metrics support</span> including application custom metrics dashboard (in v3.0.0)
|
||||
|
||||
- title: Log Query and Collection
|
||||
image: /images/observability/log-query-and-collection.png
|
||||
contentList:
|
||||
- content: <span>Multi-tenant log management</span>, different tenants can only see their own log information.
|
||||
- content: <span>Multi-level log queries</span>, including project, workload, Pod, container and keywords, supports drilling into each level to locate the issues.
|
||||
- content: <span>Support multiple log collection platforms</span>, such as Elasticsearch, Kafka, Fluentd
|
||||
- content: <span>Service component monitoring</span> for user to quickly locate component failures
|
||||
|
||||
- title: Flexible Alerting and Notification
|
||||
image: /images/observability/flexible-alerting-and-notification.png
|
||||
contentList:
|
||||
- content: <span>Rich alerting rules</span> based on multi-tenancy and multi-dimensional monitoring metrics
|
||||
- content: <span>Flexible alerting policy</span> allows you to customize an alerting policy that contains multiple alerting rules
|
||||
- content: Multi-level monitoring metrics for alerting, including from infrastructure to workloads.
|
||||
- content: <span>Flexible alerting rules</span> allows you to customize the detection period, duration and alerting priority of monitoring metrics
|
||||
- content: <span>Integration with AlertManager</span>, support multiple notification channels (in v3.0.0)
|
||||
|
||||
section3:
|
||||
title: See Cloud Native Observability in KubeSphere
|
||||
image: /images/service-mesh/15.jpg
|
||||
content: Want to get started in action by following with the hands-on lab?
|
||||
btnContent: Start Hands-on Lab
|
||||
link:
|
||||
bgLeft: /images/service-mesh/3-2.svg
|
||||
bgRight: /images/service-mesh/3.svg
|
||||
---
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
---
|
||||
title: "service mesh"
|
||||
|
||||
css: "scss/service-mesh.scss"
|
||||
|
||||
section1:
|
||||
title: KubeSphere Service Mesh provides a simpler distribution of Istio with consolidated UX
|
||||
content: If you’re running and scaling microservices on Kubernetes, it’s time to adopt the istio-based service mesh for your distributed system. We design a unified UI to integrate and manage tools including Istio, Envoy, Jaeger.
|
||||
image: /images/service-mesh/banner.jpg
|
||||
|
||||
section2:
|
||||
title: What Makes KubeSphere Service Mesh Special
|
||||
list:
|
||||
- title: Traffic Management
|
||||
image: /images/service-mesh/traffic-management.png
|
||||
summary:
|
||||
contentList:
|
||||
- content: <span>Canary release,</span> provides canary rollouts, and staged rollouts with percentage-based traffic splits.
|
||||
- content: <span>Blue-green deployment</span> allows the new version of the application to be deployed in the green environment and tested for functionality and performance.
|
||||
- content: <span>Traffic mirroring</span> enables teams to bring changes to production with as little risk as possible.
|
||||
- content: <span>Circuit breakers</span> allows users to set limits for calls to individual hosts within a service
|
||||
|
||||
- title: Visualization
|
||||
image: /images/service-mesh/visualization.png
|
||||
summary: observability is extremely useful in understanding cloud-native microservice interconnections. KubeSphere has the ability to visualize the connections between microservices and the topology of how they interconnect.
|
||||
contentList:
|
||||
|
||||
- title: Distributed Tracing
|
||||
image: /images/service-mesh/distributed-tracing.png
|
||||
summary: Based on Jaeger, KubeSphere enables users to track how each service interacts with other services. It brings a deeper understanding about request latency, bottlenecks, serialization and parallelism via visualization.
|
||||
contentList:
|
||||
|
||||
section3:
|
||||
title: See KubeSphere Service Mesh In Action
|
||||
image: /images/service-mesh/15.jpg
|
||||
content: Want to get started in action by following with the hands-on lab?
|
||||
btnContent: Start Hands-on Lab
|
||||
link:
|
||||
bgLeft: /images/service-mesh/3-2.svg
|
||||
bgRight: /images/service-mesh/3.svg
|
||||
---
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{{ define "main" }}
|
||||
|
||||
<section>
|
||||
<h2>页面不存在</h2>
|
||||
<section style="text-align: center; margin-top: 200px;">
|
||||
<h2>404</h2>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
{{ define "main" }}
|
||||
<section class='section-1'>
|
||||
{{ with .Params.section1}}
|
||||
<img src="{{ .image }}" alt="">
|
||||
<div class="title-div">
|
||||
<h1>{{ .title }}</h1>
|
||||
<p>{{ .content }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
|
||||
<section class="section-2">
|
||||
{{ with .Params.section2 }}
|
||||
<div>
|
||||
<h2 class="title-black-h2">{{ .title }}</h2>
|
||||
<ul>
|
||||
{{ range .list }}
|
||||
<li>
|
||||
<div>
|
||||
<h3>{{ .title }}</h3>
|
||||
{{ if .summary }}
|
||||
<p>{{ .summary }}</p>
|
||||
{{ end }}
|
||||
{{ if .contentList }}
|
||||
<ul>
|
||||
{{ range .contentList}}
|
||||
<li>{{ .content | safeHTML }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
</div>
|
||||
<img src="{{ .image }}" alt="">
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
|
||||
<section class="section-3">
|
||||
{{ with .Params.section3 }}
|
||||
<img class="bg-left" src="{{ .bgLeft }}" alt="">
|
||||
<img class="bg-right" src="{{ .bgRight }}" alt="">
|
||||
<div>
|
||||
<h2 class="title-black-h2">{{ .title }}</h2>
|
||||
<img src="{{ .image }}" alt="">
|
||||
<p>{{ .content }}</p>
|
||||
<a href="{{ .link }}"><button>{{ .btnContent }}</button></a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
{{ define "main" }}
|
||||
<section class='section-1'>
|
||||
{{ with .Params.section1}}
|
||||
<img src="{{ .image }}" alt="">
|
||||
<div class="title-div">
|
||||
<h1>{{ .title }}</h1>
|
||||
<p>{{ .content }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
|
||||
<section class="section-2">
|
||||
{{ with .Params.section2 }}
|
||||
<div>
|
||||
<h2 class="title-black-h2">{{ .title }}</h2>
|
||||
<ul>
|
||||
{{ range .list }}
|
||||
<li>
|
||||
<div>
|
||||
<h3>{{ .title }}</h3>
|
||||
{{ if .summary }}
|
||||
<p>{{ .summary }}</p>
|
||||
{{ end }}
|
||||
{{ if .contentList }}
|
||||
<ul>
|
||||
{{ range .contentList}}
|
||||
<li>{{ .content | safeHTML }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
</div>
|
||||
<img src="{{ .image }}" alt="">
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
|
||||
<section class="section-3">
|
||||
{{ with .Params.section3 }}
|
||||
<img class="bg-left" src="{{ .bgLeft }}" alt="">
|
||||
<img class="bg-right" src="{{ .bgRight }}" alt="">
|
||||
<div>
|
||||
<h2 class="title-black-h2">{{ .title }}</h2>
|
||||
<img src="{{ .image }}" alt="">
|
||||
<p>{{ .content }}</p>
|
||||
<a href="{{ .link }}"><button>{{ .btnContent }}</button></a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 398 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 674 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 357 KiB |
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="515" height="502" viewBox="0 0 515 502">
|
||||
<defs>
|
||||
<linearGradient id="prefix__a" x1="35.858%" x2="26.061%" y1="76.876%" y2="24.3%">
|
||||
<stop offset="0%" stop-color="#ECAF24"/>
|
||||
<stop offset="100%" stop-color="#FFF8CB" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path fill="url(#prefix__a)" fill-rule="evenodd" d="M202.481 138L655.634 252 0 677.132z" opacity=".4" transform="rotate(180 257.317 338.566)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 507 B |
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="529" height="408" viewBox="0 0 529 408">
|
||||
<defs>
|
||||
<linearGradient id="prefix__a" x1="29.692%" x2="76.951%" y1="82.633%" y2="96.033%">
|
||||
<stop offset="0%" stop-color="#EEE" stop-opacity="0"/>
|
||||
<stop offset="100%" stop-color="#56BC8A"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path fill="url(#prefix__a)" fill-rule="evenodd" d="M1282.481 48L1463.344 478.413 1080 587.132z" opacity=".599" transform="scale(-1 1) rotate(52 690.024 -1291.288)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 529 B |
Binary file not shown.
|
After Width: | Height: | Size: 331 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 607 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 609 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 692 KiB |
Loading…
Reference in New Issue