From aae766df9340687eacc43b20d82034aea7bbb708 Mon Sep 17 00:00:00 2001 From: liuboaibc Date: Thu, 27 May 2021 18:37:44 +0800 Subject: [PATCH] add download btn Signed-off-by: liuboaibc --- assets/scss/common.scss | 24 ++++++++++++++++++++++++ assets/scss/index.scss | 20 -------------------- assets/scss/scenario.scss | 27 +++++++++++++++++++++------ content/en/_index.md | 4 ---- content/en/devops/_index.md | 2 +- content/en/observability/_index.md | 6 +++--- content/en/service-mesh/_index.md | 2 +- content/zh/_index.md | 4 ---- content/zh/devops/_index.md | 2 +- content/zh/observability/_index.md | 5 ++--- content/zh/service-mesh/_index.md | 2 +- i18n/en.yaml | 6 +++++- i18n/zh.yaml | 6 +++++- layouts/_default/scenario.html | 15 ++++++++++++++- layouts/index.html | 7 +------ layouts/partials/downloadButton.html | 6 ++++++ 16 files changed, 85 insertions(+), 53 deletions(-) create mode 100644 layouts/partials/downloadButton.html diff --git a/assets/scss/common.scss b/assets/scss/common.scss index 50f8dab47..a84e4f3fd 100644 --- a/assets/scss/common.scss +++ b/assets/scss/common.scss @@ -402,3 +402,27 @@ section { /* Avoid pushing up the copy buttons. */ margin: 0; } + +.download-btn { + height: 56px; + border-radius: 28px; + font-size: 16px; +} + +.download-btn1 { + width: 211px; + 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(76, 169, 134, 0.05); + background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1) 97%),linear-gradient(to bottom,#242e42,#242e42); +} + +.download-btn2 { + width: 195px; + margin-left: 12px; + color: #36435c; + 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(76, 169, 134, 0.05); + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 97%), linear-gradient(to bottom, #ffffff, #ffffff); + @media only screen and (max-width: $mobile-max-width) { + margin-left: 0px; + margin-top: 12px; + } +} diff --git a/assets/scss/index.scss b/assets/scss/index.scss index a679d1761..2351f0888 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -70,26 +70,6 @@ color: #ffffff; } - button { - height: 56px; - border-radius: 28px; - font-size: 16px; - } - - .btn1 { - width: 211px; - 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(76, 169, 134, 0.05); - background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1) 97%),linear-gradient(to bottom,#242e42,#242e42); - } - - .btn2 { - width: 195px; - margin-left: 12px; - color: #36435c; - 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(76, 169, 134, 0.05); - background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 97%), linear-gradient(to bottom, #ffffff, #ffffff); - } - img { position: absolute; } diff --git a/assets/scss/scenario.scss b/assets/scss/scenario.scss index b4d327d8c..a32a6047f 100644 --- a/assets/scss/scenario.scss +++ b/assets/scss/scenario.scss @@ -10,7 +10,8 @@ html { padding-top: 129px; .title-div { - padding-bottom: 60px; + position: relative; + padding-bottom: 68px; h1 { width: 1060px; } @@ -23,10 +24,18 @@ html { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } + .left-p { + max-width: 730px; + } + + .download-div { + position: absolute; + right: 0; + bottom: 64px; + } + @media only screen and (max-width: $mobile-max-width) { width: 100%; - top: 100px; - h1 { width: 100%; } @@ -34,6 +43,13 @@ html { p { width: 100%; } + + .download-div { + position: relative; + margin-top: 20px; + text-align: center; + bottom: 0; + } } } } @@ -169,7 +185,7 @@ html { iframe { margin-top: 40px; - + margin-bottom: 56px; @media only screen and (max-width: $mobile-max-width) { width: 100%; height: 300px; @@ -177,12 +193,11 @@ html { } p { - margin-top: 56px; letter-spacing: -0.04px; color: #31383e; } - button { + .lab { width: 263px; height: 56px; margin-top: 20px; diff --git a/content/en/_index.md b/content/en/_index.md index 1b09a30cc..313babc5b 100644 --- a/content/en/_index.md +++ b/content/en/_index.md @@ -9,10 +9,6 @@ section1: title: KubeSphere Container Platform topic: The Kubernetes platform tailored for hybrid multicloud content: KubeSphere is a distributed operating system managing cloud native applications with Kubernetes as its kernel, and provides plug-and-play architecture for the seamless integration of third-party applications to boost its ecosystem. - btnContent1: Install on Kubernetes - downloadLink1: "https://kubesphere.io/docs/quick-start/minimal-kubesphere-on-k8s/" - btnContent2: Install on Linux - downloadLink2: "https://kubesphere.io/docs/quick-start/all-in-one-on-linux/" section2: title: One Kubernetes Platform for Full Stack Solutions diff --git a/content/en/devops/_index.md b/content/en/devops/_index.md index e2fde084a..8d7045cdb 100644 --- a/content/en/devops/_index.md +++ b/content/en/devops/_index.md @@ -46,7 +46,7 @@ section3: image: /images/service-mesh/15.jpg content: Want to get started in action by following the hands-on lab? btnContent: Start Hands-on Lab - link: https://kubesphere.io/docs/pluggable-components/devops/ + link: docs/pluggable-components/devops/ bgLeft: /images/service-mesh/3-2.svg bgRight: /images/service-mesh/3.svg --- diff --git a/content/en/observability/_index.md b/content/en/observability/_index.md index 10c84308b..6485c1bd8 100644 --- a/content/en/observability/_index.md +++ b/content/en/observability/_index.md @@ -8,6 +8,8 @@ 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/observability/banner.jpg + showDownload: true + image: /images/observability/observability.jpg @@ -43,9 +45,7 @@ section2: section3: title: See Cloud Native Observability in KubeSphere videoLink: https://www.youtube.com/embed/uf0TTowc56I - content: Want to get started in action by following the hands-on lab? - btnContent: Start Hands-on Lab - link: https://kubesphere.io/docs/pluggable-components/ + showDownload: true bgLeft: /images/service-mesh/3-2.svg bgRight: /images/service-mesh/3.svg --- diff --git a/content/en/service-mesh/_index.md b/content/en/service-mesh/_index.md index d1dcbeee7..01dd98afe 100644 --- a/content/en/service-mesh/_index.md +++ b/content/en/service-mesh/_index.md @@ -39,7 +39,7 @@ section3: videoLink: https://www.youtube.com/embed/EkGWtwcsdE4 content: Want to get started in action by following the hands-on lab? btnContent: Start Hands-on Lab - link: https://kubesphere.io/docs/pluggable-components/service-mesh/ + link: docs/pluggable-components/service-mesh/ bgLeft: /images/service-mesh/3-2.svg bgRight: /images/service-mesh/3.svg --- diff --git a/content/zh/_index.md b/content/zh/_index.md index 5aeb42d43..8233fd891 100644 --- a/content/zh/_index.md +++ b/content/zh/_index.md @@ -9,10 +9,6 @@ section1: title: KubeSphere 容器平台 topic: 面向云原生应用的
容器混合云 content: KubeSphere 愿景是打造一个以 Kubernetes 为内核的云原生分布式操作系统，它的架构可以非常方便地使第三方应用与云原生生态组件进行即插即用（plug-and-play）的集成，支持云原生应用在多云与多集群的统一分发和运维管理。 - btnContent1: 在 Kubernetes 安装 - downloadLink1: "https://kubesphere.com.cn/docs/quick-start/minimal-kubesphere-on-k8s/" - btnContent2: 在 Linux 安装 - downloadLink2: "https://kubesphere.com.cn/docs/quick-start/all-in-one-on-linux/" section2: title: 全栈的平台级解决方案 diff --git a/content/zh/devops/_index.md b/content/zh/devops/_index.md index 87570feee..69d0aa3ee 100644 --- a/content/zh/devops/_index.md +++ b/content/zh/devops/_index.md @@ -46,7 +46,7 @@ section3: image: /images/service-mesh/15.jpg content: 想自己动手体验实际操作？ btnContent: 开始动手实验 - link: https://kubesphere.com.cn/docs/pluggable-components/devops/ + link: docs/pluggable-components/devops/ bgLeft: /images/service-mesh/3-2.svg bgRight: /images/service-mesh/3.svg --- diff --git a/content/zh/observability/_index.md b/content/zh/observability/_index.md index 6d4a95012..e050ccb70 100644 --- a/content/zh/observability/_index.md +++ b/content/zh/observability/_index.md @@ -8,6 +8,7 @@ section1: title: KubeSphere 助您轻松实现可视化 content: KubeSphere 提供了丰富的可视化功能，支持从基础设施到应用的多维度指标监控。此外，KubeSphere 还集成了许多常用的工具，包括多租户日志查询和收集、告警和通知等功能。 image: /images/observability/banner.jpg + showDownload: true image: /images/observability/observability.jpg @@ -43,9 +44,7 @@ section2: section3: title: 观看 KubeSphere 云原生可观测性演示 videoLink: https://www.youtube.com/embed/uf0TTowc56I - content: 想自己动手体验实际操作？ - btnContent: 开始动手实验 - link: https://kubesphere.com.cn/docs/pluggable-components/ + showDownload: true bgLeft: /images/service-mesh/3-2.svg bgRight: /images/service-mesh/3.svg --- diff --git a/content/zh/service-mesh/_index.md b/content/zh/service-mesh/_index.md index 8f497b145..86dacad6d 100644 --- a/content/zh/service-mesh/_index.md +++ b/content/zh/service-mesh/_index.md @@ -39,7 +39,7 @@ section3: videoLink: https://www.youtube.com/embed/EkGWtwcsdE4 content: 想自己动手体验实际操作？ btnContent: 开始动手实验 - link: https://kubesphere.com.cn/docs/pluggable-components/service-mesh/ + link: docs/pluggable-components/service-mesh/ bgLeft: /images/service-mesh/3-2.svg bgRight: /images/service-mesh/3.svg --- diff --git a/i18n/en.yaml b/i18n/en.yaml index 43c5963ba..ef726a2df 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -121,4 +121,8 @@ - id: Cookie Statement translation: Your privacy is important to us. We use cookies to remember subscription details, optimize site functionality, and deliver content tailored to your interests. To find out more, see our privacy policy. - id: Accept and continue - translation: Accept and continue \ No newline at end of file + translation: Accept and continue +- id: Install on Kubernetes + translation: Install on Kubernetes +- id: Install on Linux + translation: Install on Linux \ No newline at end of file diff --git a/i18n/zh.yaml b/i18n/zh.yaml index a4cde522f..012a7d0ed 100644 --- a/i18n/zh.yaml +++ b/i18n/zh.yaml @@ -123,4 +123,8 @@ - id: Cookie Statement translation: 您的隐私对我们很重要。我们使用Cookie来记住订阅详细信息，优化网站功能并交付根据您的兴趣量身定制的内容。要了解更多信息，请参阅我们的隐私政策. - id: Accept and continue - translation: 接受并继续 \ No newline at end of file + translation: 接受并继续 +- id: Install on Kubernetes + translation: 在 Kubernetes 安装 +- id: Install on Linux + translation: 在 Linux 安装 \ No newline at end of file diff --git a/layouts/_default/scenario.html b/layouts/_default/scenario.html index a2c552b4c..26ae55bd5 100644 --- a/layouts/_default/scenario.html +++ b/layouts/_default/scenario.html @@ -3,7 +3,14 @@

{{ .title }}

+ {{ if .showDownload }} +

{{ .content }}

+
+ {{ partial "downloadButton" . }} +
+ {{ else }}

{{ .content }}

+ {{ end }}
{{ end }} @@ -62,8 +69,14 @@ {{ else }} {{ end }} + {{ if .showDownload }} +
+ {{ partial "downloadButton" . }} +
+ {{ else }}

{{ .content }}

- + + {{ end }} {{ end }} diff --git a/layouts/index.html b/layouts/index.html index 98e372c52..63fcb2cf7 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -7,12 +7,7 @@

{{ .title | safeHTML }}

{{ .topic | safeHTML }}

{{ .content | safeHTML }}

- - - - - - + {{ partial "downloadButton" . }} {{ i18n {{ i18n diff --git a/layouts/partials/downloadButton.html b/layouts/partials/downloadButton.html new file mode 100644 index 000000000..2263080d5 --- /dev/null +++ b/layouts/partials/downloadButton.html @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file