diff --git a/assets/scss/live-detail.scss b/assets/scss/live-detail.scss index e69de29bb..a7ed7427c 100644 --- a/assets/scss/live-detail.scss +++ b/assets/scss/live-detail.scss @@ -0,0 +1,100 @@ +@import 'variables'; +@import 'mixin'; +@import 'markdown'; + +.md-body { + font-size: 16px; + line-height: 2.29; + color: #36435c; +} + +.md-body h2 { + font-weight: 500; + line-height: 64px; + color: #171c34; + text-shadow: none; + text-align: left; + margin-bottom: 20px; + border-bottom: 1px solid #ccd3db; +} + +.md-body h3 { + font-weight: 600; + line-height: 1.5; + color: #171c34; +} + +.md-body img { + max-width: 100%; + box-sizing: content-box; + background-color: #fff; + border-radius: 5px; + box-shadow: none; +} + +.md-body blockquote { + padding: 4px 20px 4px 12px; + border-radius: 4px; + background-color: #ecf0f2; +} + +header.navigation { + box-shadow: 0 4px 8px 0 rgba(36,46,66,.06), 0 8px 16px 0 rgba(36,46,66,.05); + background-image: linear-gradient(to bottom,rgba(134,219,162,0.9),rgba(0,170,114,0.9)); +} + +.section-1 { + padding-top: 124px; + + & > div { + box-sizing: border-box; + width: 880px; + margin: 0 auto; + padding: 40px 60px 76px; + background-color: #ffffff; + + @media only screen and (max-width: $mobile-max-width) { + width: 100%; + padding: 20px; + } + + .video-div { + position: relative; + margin-bottom: 24px; + + video { + width: 100%; + outline: none; + } + + iframe { + width: 100%; + height: 400px; + + @media only screen and (max-width: $mobile-max-width) { + height: 200px; + } + } + } + + .time-div { + img, span { + vertical-align: middle; + font-size: 14px; + line-height: 1.43; + color: #919aa3; + } + span + img { + margin-left: 20px; + } + } + + h1 { + margin-top: 8px; + text-shadow: 0 8px 16px rgba(35, 45, 65, 0.1); + font-size: 40px; + line-height: 1.4; + color: #171c34; + } + } +} \ No newline at end of file diff --git a/assets/scss/live.scss b/assets/scss/live.scss index f954f1995..8d2e677ce 100644 --- a/assets/scss/live.scss +++ b/assets/scss/live.scss @@ -1,15 +1,147 @@ -@import 'open-source'; - +@import 'variables'; +@import 'mixin'; +.btn-a { + display: inline-block; + padding: 0 53px; + height: 56px; + border-radius: 28px; + line-height: 56px; + font-size: 16px; + color: #ffffff; + 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; + } +} .section-1 { position: relative; padding-top: 124px; padding-bottom: 136px; } +.section-2 { + position: relative; + margin-top: -94px; + + .common-layout { + display: flex; + border-radius: 8px; + box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05); + overflow: hidden; + background-color: #ffffff; + + @media only screen and (max-width: $mobile-max-width) { + flex-direction: column; + border-radius: 0; + } + + .live-2-left { + width: 840px; + height: 400px; + @media only screen and (max-width: $mobile-max-width) { + width: 100%; + height: auto; + } + img { + width: 100%; + height: 100%; + min-height: 200px; + object-fit: cover; + } + } + + .live-2-right { + box-sizing: border-box; + width: 320px; + height: 400px; + padding: 10px; + @media only screen and (max-width: $mobile-max-width) { + max-width: 320px; + width: auto; + height: auto; + margin: 0 auto; + } + h2 { + margin-bottom: 10px; + font-size: 18px; + line-height: 1.78; + letter-spacing: -0.05px; + color: #3d3e49; + @include block-ellipsis(2); + } + + .tag { + position: absolute; + top: 4px; + right: 0; + font-size: 12px; + padding: 4px 10px; + line-height: 12px; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + } + + .shadow { + position: relative; + padding: 20px 24px; + border-radius: 8px; + box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05); + } + + .notice { + box-sizing: border-box; + height: 250px; + + p { + margin-bottom: 6px; + height: 28px; + font-size: 16px; + line-height: 28px; + letter-spacing: -0.04px; + color: #919aa3; + + img { + vertical-align: middle; + margin-right: 4px; + } + } + + a { + margin: 34px auto 0; + height: 40px; + padding: 0 28px; + line-height: 40px; + } + + .tag { + color: #3d3e49; + background-color: #f7b500; + } + } + + .over { + box-sizing: border-box; + height: 120px; + margin-top: 10px; + + a { + color: #3d3e49; + } + + .tag { + color: #ffffff; + background-color: #919aa3; + } + } + } + } +} + .section-3 { background-color: #fff; - padding-top: 60px; - padding-bottom: 100px; + padding-top: 30px; + padding-bottom: 60px; @media only screen and (max-width: $mobile-max-width) { padding-top: 20px; @@ -19,7 +151,7 @@ & > div { & > .video-tab-ul { - padding: 30px 34px 22px; + padding: 0 34px; border-radius: 5px; box-shadow: 0 4px 16px 0 rgba(7,42,68,.1); background-color: #fff; @@ -28,7 +160,7 @@ display: inline-block; min-width: 48px; padding: 8px 16px; - margin-bottom: 8px; + margin: 10px 0; border-radius: 20px; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; @@ -220,4 +352,129 @@ height: 300px; } } +} + +.section-4 { + background-image: linear-gradient(113deg, #4a499a 27%, #8552c3 81%); + .common-layout { + white-space: nowrap; + overflow: auto; + & > div { + box-sizing: border-box; + display: inline-block; + vertical-align: top; + white-space: normal; + width: 140px; + height: 225px; + margin: 80px 40px; + padding-top: 20px; + border-top: 1px solid #a1b3c4; + + .time-div { + display: flex; + + .right { + margin-left: 4px; + font-weight: bold; + line-height: 1; + color: #ffffff; + .date { + margin-bottom: 4px; + font-size: 24px; + } + .time { + font-size: 14px; + } + } + } + + h3 { + height: 60px; + margin: 21px 0 47px; + font-size: 14px; + font-weight: 500; + line-height: 1.43; + color: #d5dee7; + a { + color: #d5dee7; + + &:hover { + color: #008a5c; + } + } + } + + button { + font-size: 12px; + font-weight: 600; + line-height: 2; + border: none; + padding: 5px 28px; + border-radius: 17px; + cursor: pointer; + box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2); + &:hover { + box-shadow: none; + } + } + + .over-btn { + color: #ffffff; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #242e42, #242e42); + } + + .notive-btn { + color: #3d3e49; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #ffffff, #ffffff); + } + } + } +} + +.section-5 { + .common-layout { + position: relative; + padding-top: 100px; + padding-left: 60px; + padding-bottom: 30px; + @media only screen and (max-width: $mobile-max-width) { + padding-left: 20px; + } + .left-div { + position: relative; + width: 600px; + @media only screen and (max-width: $mobile-max-width) { + width: 100%; + z-index: 2; + } + h2 { + font-size: 32px; + font-weight: 600; + line-height: 1.63; + color: #171c34; + text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1); + } + + p { + margin-top: 13px; + font-size: 16px; + line-height: 1.5; + letter-spacing: -0.04px; + color: #31383e; + } + + a { + margin-top: 18px; + } + } + + & > img { + position: absolute; + top: 88px; + right: 0; + @media only screen and (max-width: $mobile-max-width) { + opacity: 0.3; + } + } + } } \ No newline at end of file diff --git a/assets/scss/mixin.scss b/assets/scss/mixin.scss index 139597f9c..962945ca1 100644 --- a/assets/scss/mixin.scss +++ b/assets/scss/mixin.scss @@ -1,2 +1,183 @@ +@import 'variables'; +@mixin clearfix { + zoom: 1; + + &:after { + content: '.'; + display: block; + clear: both; + overflow: hidden; + height: 0; + visibility: hidden; + } +} + +@mixin ellipsis { + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; + overflow: hidden; +} + +@mixin block-ellipsis($line: 2) { + display: -webkit-box; + overflow: hidden; + -webkit-line-clamp: $line; + -webkit-box-orient: vertical; +} + +@mixin nowrap { + white-space: nowrap; + word-wrap: normal; +} + +@mixin break-all { + word-break: break-all; + white-space: normal; +} + +@mixin break-word { + word-wrap: break-word; + white-space: normal; +} + +@mixin vertical-center { + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +@mixin middle { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +@mixin TypographyTitle($fontWeight: $font-bold) { + font-family: $font-family-id; + font-style: normal; + font-stretch: normal; + letter-spacing: normal; + font-weight: $fontWeight; +} + +@mixin TypographyTitleH1($color: $dark-color06) { + font-size: 40px; + line-height: 1.4; + @include TypographyTitle(); + color: $color; +} + +@mixin TypographyTitleH2($color: $dark-color06) { + font-size: 32px; + line-height: 1.38; + @include TypographyTitle(); + color: $color; +} + +@mixin TypographyTitleH3($color: $dark-color06) { + font-size: 24px; + line-height: 1.33; + @include TypographyTitle(); + color: $color; +} + +@mixin TypographyTitleH4($color: $dark-color06) { + font-size: 20px; + line-height: 1.4; + @include TypographyTitle(); + color: $color; +} + +@mixin TypographyTitleH5($color: $dark-color06) { + font-size: 14px; + line-height: 1.43; + @include TypographyTitle(bold); + color: $color; +} + +@mixin TypographyTitleH6($color: $dark-color06) { + font-size: $size-small; + line-height: 1.67; + @include TypographyTitle(bold); + color: $color; +} + +@mixin TypographySymbolText($color: $dark-color06) { + font-family: $font-family; + font-size: $size-small; + font-weight: $font-bold; + font-style: normal; + font-stretch: normal; + line-height: 1.67; + letter-spacing: normal; + color: $color; +} + +@mixin TypographyParagraphCode($color: #363e4a) { + font-family: Monaco; + font-size: $size-small; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 2; + letter-spacing: normal; + color: $color; +} + +@mixin TypographyParagraph($color: $dark-color07) { + font-family: $font-family-id; + font-size: $size-small; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 1.67; + letter-spacing: normal; + color: $color; +} + +@mixin common-flex { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +@mixin absolute-center { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +@mixin product-container { + width: 277px; + height: 172px; + padding: 12px; + border-radius: 3px; + border: solid 1px $light-color06; + cursor: pointer; + + &:hover { + box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.2); + border: solid 1px $dark-color01; + } +} + +@mixin common-layout { + position: relative; + width: 1140px; + margin: 0 auto; + padding-left: 260px; + + @media only screen and (max-width: $width-01) { + width: 100%; + } + + @media only screen and (max-width: $width-02) { + padding: 10px; + padding-top: 20px; + } +} diff --git a/content/en/live/_index.md b/content/en/live/_index.md deleted file mode 100644 index 742968dc5..000000000 --- a/content/en/live/_index.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: live - KubeSphere | Enterprise container platform, built on Kubernetes -description: KubeSphere is an open source container platform based on Kubernetes for enterprise app development and deployment, suppors installing anywhere from on-premise datacenter to any cloud to edge. -keywords: KubeSphere,DevOps,Istio,Service Mesh,Jenkins, -css: "scss/live.scss" - -section1: - title: KubeSphere Cloud Native Live Room - image: /images/live/background.jpg ---- \ No newline at end of file diff --git a/content/zh/live/_index.md b/content/zh/live/_index.md new file mode 100644 index 000000000..0abc4f89e --- /dev/null +++ b/content/zh/live/_index.md @@ -0,0 +1,68 @@ +--- +title: live - KubeSphere | Enterprise container platform, built on Kubernetes +description: KubeSphere is an open source container platform based on Kubernetes for enterprise app development and deployment, suppors installing anywhere from on-premise datacenter to any cloud to edge. +keywords: KubeSphere,DevOps,Istio,Service Mesh,Jenkins, +css: "scss/live.scss" + +section1: + title: KubeSphere 云原生直播间 + image: /images/live/background.jpg + +section2: + image: /images/live/friend.jpeg + url: ./test + + notice: + title: KubeSphere 在直播电商行业的多集群应用实践 + timeIcon: /images/live/clock.svg + time: 2020/10/22 – 10/25 + baseIcon: /images/live/base.svg + base: 线上 + tag: 预告 + url: ./test + + over: + title: KubeSphere 在直播电商行业的多集群应用实践 + url: ./test + tag: 结束 + +section3: + videos: + - title: 为什么选择 KubeSphere + link: //player.bilibili.com/player.html?aid=69124503&bvid=BV1vJ411T7th&cid=119801064&page=1 + snapshot: https://pek3b.qingstor.com/kubesphere-docs/png/20200206170305.png + type: iframe + createTime: 2019.12.14 + group: Meetup + + - title: 为什么选择 KubeSphere + link: https://kubesphere-docs.pek3b.qingstor.com/website/meetup/meetup-final-1226.mp4 + snapshot: https://pek3b.qingstor.com/kubesphere-docs/png/20200206170305.png + type: video + createTime: 2019.12.14 + group: Meetup + +section4: + overImg: /images/live/over.svg + noticeImg: /images/live/notice.svg + list: + - title: KubeSphere 在直播电商行业的多集群应用实践1 + date: 10/27 + time: 13:30 - 14:10 + lastTime: 2020-10-27T14:10:00Z + url: ./test + + - title: KubeSphere 在直播电商行业的多集群应用实践2 + date: 11/27 + time: 13:30 - 14:10 + lastTime: 2020-12-27T14:10:00Z + url: ./test + +section5: + title: 分享你的主题 + content: 想在社区分享你的落地经验？说出你和 KubeSphere 的开源故事，即刻加入 KubeSphere 开源社区直播计划，提交你的分享主题，将有定制礼品相送！ + btn: 提交分享主题 + url: + image: /images/live/30.svg + +--- \ No newline at end of file diff --git a/content/zh/live/test.md b/content/zh/live/test.md new file mode 100644 index 000000000..de31ae5f0 --- /dev/null +++ b/content/zh/live/test.md @@ -0,0 +1,18 @@ +--- +title: KubeSphere 在直播电商行业的多集群应用实践 +description: +css: scss/live-detail.scss + +section1: + snapshot: https://pek3b.qingstor.com/kubesphere-docs/png/20200206170305.png + videoUrl: //player.bilibili.com/player.html?aid=69124503&bvid=BV1vJ411T7th&cid=119801064&page=1 + type: iframe + time: 2020-10-13 20:00-20:40 + timeIcon: /images/live/clock.svg + base: 线上 + baseIcon: /images/live/base.svg +--- + +## 导引 + +随着容器的普及和 Kubernetes 的日渐成熟，企业内部运行多个 Kubernetes 集群已变得非常主流，多集群天然适合业务高可用、异地容灾备份、低延迟、开发生产隔离、避免单一厂商绑定等使用场景，并且很多企业通常会选择将 Kubernetes 多集群分别部署在本地环境+公有云这样的模式来构建容器混合云。本次技术分享将介绍杭州遥望网络公司如何将 KubeSphere 3.0 在生产环境进行落地，并基于 KubeSphere 3.0 打造多集群架构的电商支撑体系，使亿级交易的核心订单交易系统在 KubeSphere 之上平稳运行。 diff --git a/i18n/en.yaml b/i18n/en.yaml index d9e87fa73..9418c4586 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -82,4 +82,7 @@ translation: Search Documentation - id: ALL translation: ALL - +- id: Watch replay + translation: Watch replay +- id: View details + translation: View details diff --git a/i18n/zh.yaml b/i18n/zh.yaml index 526db19e3..2ed120aa2 100644 --- a/i18n/zh.yaml +++ b/i18n/zh.yaml @@ -81,4 +81,8 @@ - id: Search Documentation translation: 搜索文档 - id: ALL - translation: 全部 \ No newline at end of file + translation: 全部 +- id: Watch replay + translation: 观看回放 +- id: View details + translation: 了解详情 \ No newline at end of file diff --git a/layouts/live/list.html b/layouts/live/list.html index 537058643..bda506674 100644 --- a/layouts/live/list.html +++ b/layouts/live/list.html @@ -1,5 +1,4 @@ {{ define "main" }} -{{ $data := index .Site.Data .Site.Language.Lang }} {{ with .Params.section1 }}
@@ -9,19 +8,45 @@
{{ end }} - +{{ with .Params.section2 }}
-

+
+ + + +
+
+ {{ with .notice }} +
+

{{ .title }}

+

{{ .time }}

+

{{ .base }}

+ {{ i18n "View details" }} +
{{ .tag }}
+
+ {{ end }} + {{ with .over }} +
+

+ {{ .title }} +

+
{{ .tag }}
+
+ {{ end }} +
+{{ end }} +{{ $language := .Site.Language.Lang }} +{{ with .Params.section3 }}
-
+{{ end }} +{{ $overImg := .Params.section4.overImg}} +{{ $noticeImg := .Params.section4.noticeImg}} +{{ with .Params.section4 }}
-
-

-
+
+ {{ range .list }} +
+
+ {{$over := (time .lastTime).Unix}} + {{ if ge now.Unix $over}} + + {{ else }} + + {{ end }} +
+

{{ .date }}

+

{{ .time }}

+
+
+

{{ .title }}

+ {{ if ge now.Unix $over}} + + {{ else }} + + {{ end }} +
+ {{ end }} +
+{{ end }} - +{{ with .Params.section5 }}
-
-

-
+
+
+

{{ .title }}

+

{{ .content }}

+ {{ .btn }} +
+ +
+{{ end }} @@ -85,10 +142,10 @@ var bindClickVideoLi = function() { $('.video-ul').on('click', 'li', function(ev) { var link = $(this).data('link') - var language = $('.video-ul').data('language') - if (language === 'zh') { + var type = $(this).data('type') + if (type === 'video') { showVideo(link) - } else if (language === 'en') { + } else if (type === 'iframe') { showIframe(link) } }) @@ -132,7 +189,7 @@ var group = '

' + video.group + '

' var time = '

' + video.createTime + '

' var div = '
' + button + '
' + title + group + time + '
' - var s = '
  • ' + img + div + '
    • ' + var s = '
  • ' + img + div + '
    • ' return s } @@ -143,7 +200,7 @@ prevText: '<<', nextText: '>>', callback: function(data, pagination) { - var videoList =createVideoList(data) + var videoList = createVideoList(data) $('.video-ul').empty().append(videoList) } }) diff --git a/layouts/live/single.html b/layouts/live/single.html new file mode 100644 index 000000000..a7d3ef6a9 --- /dev/null +++ b/layouts/live/single.html @@ -0,0 +1,38 @@ +{{ define "main" }} + +
    +
    + {{ with .Params.section1 }} + + {{ if .videoUrl }} +
    + {{ if eq .type "iframe" }} + + {{ else }} + + {{ end }} +
    + {{ end }} +
    + + {{ .time }} + + {{ .base }} +
    + {{ end }} + +

    {{ .Title }}

    +
    +
    + {{ .Content }} +
    +
    +
    +
    + +{{ end }} \ No newline at end of file diff --git a/static/images/live/30.svg b/static/images/live/30.svg new file mode 100644 index 000000000..8b719948c --- /dev/null +++ b/static/images/live/30.svg @@ -0,0 +1,147 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/live/base.svg b/static/images/live/base.svg new file mode 100644 index 000000000..b15d8aa57 --- /dev/null +++ b/static/images/live/base.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/images/live/clock.svg b/static/images/live/clock.svg new file mode 100644 index 000000000..75bb4343f --- /dev/null +++ b/static/images/live/clock.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/images/live/friend.jpeg b/static/images/live/friend.jpeg new file mode 100644 index 000000000..3ccbe7cc3 Binary files /dev/null and b/static/images/live/friend.jpeg differ diff --git a/static/images/live/notice.svg b/static/images/live/notice.svg new file mode 100644 index 000000000..7d95afff0 --- /dev/null +++ b/static/images/live/notice.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + 预 告 + + + + + + + + + + diff --git a/static/images/live/over.svg b/static/images/live/over.svg new file mode 100644 index 000000000..4aed1d98f --- /dev/null +++ b/static/images/live/over.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + 结 束 + + + + + + + + + +