diff --git a/assets/scss/user-group-single.scss b/assets/scss/user-group-single.scss new file mode 100644 index 000000000..2784326c9 --- /dev/null +++ b/assets/scss/user-group-single.scss @@ -0,0 +1,717 @@ +@import 'variables'; +@import 'mixin'; + +.div { + div { + box-sizing: border-box; + } +} + +@mixin title { + .title { + font-weight: 600; + font-size: 32px; + line-height: 48px; + color: #3D3E49; + text-shadow: 0px 4px 8px rgba(35, 45, 65, 0.1); + text-align: center; + margin-bottom: 40px; + } +} + +@mixin manager { + margin-top: 27px; + display: flex; + flex-direction: row; + align-items: center; + + .person { + width: 48px; + height: 48px; + margin-right: 12px; + } + + .top { + display: flex; + flex-direction: row; + align-items: center; + + .p-name { + font-weight: 600; + font-size: 16px; + line-height: 180%; + color: #171C34; + } + + .codeBox { + position: relative; + + .p-wx { + width: 24px; + height: 24px; + margin-left: 8px; + } + + .qrCode { + position: absolute; + width: 108px; + height: 108px; + box-sizing: border-box; + padding: 8px; + background: #FFFFFF; + box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05), 0px 4px 8px rgba(36, 46, 66, 0.06); + border-radius: 8px; + top: -5px; + left: 18px; + transform: translateX(-50%) translateY(-100%); + display: none; + } + + &:hover { + cursor: pointer; + + .qrCode { + display: block; + } + } + } + } +} + +.topSection { + position: relative; + padding-top: 138px; + background-size: cover; + background-repeat: no-repeat; + + .title-div { + padding-bottom: 62px; + + h1 { + width: 1060px; + font-weight: 600; + font-size: 40px; + line-height: 40px; + text-align: center; + letter-spacing: -0.1px; + text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15); + } + + p { + width: 100%; + margin-top: 12px; + letter-spacing: -0.04px; + color: #ffffff; + text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15); + text-align: center; + font-size: 16px; + line-height: 24px; + } + + + } +} + +@media only screen and (max-width: $mobile-max-width) { + .topSection { + .title-div { + width: 100%; + top: 100px; + + h1 { + width: 100%; + } + + p { + width: 100%; + } + } + } +} + +.stations { + background-size: 100% 100%; + padding-top: 77px; + padding-bottom: 92px; + + .station { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-end; + + .left { + width: 580px; + + span { + display: block; + } + + .name_en { + font-weight: 500; + font-size: 14px; + line-height: 24px; + text-transform: uppercase; + color: #00A971; + } + + .name { + font-weight: 600; + font-size: 32px; + line-height: 52px; + color: #171C34; + margin-bottom: 16px; + } + + .des { + font-size: 16px; + line-height: 32px; + color: #171C34; + } + + .manager { + @include manager(); + } + + } + + .right { + width: 400px; + height: 420px; + display: flex; + align-items: center; + flex-direction: column; + + .icon { + width: 400px; + height: 364px; + } + + span { + display: block; + width: 234px; + font-size: 18px; + line-height: 28px; + text-align: center; + color: #171C34; + } + + .station_name { + font-weight: bold; + } + + .mobile-manager { + display: none; + } + } + } +} + +@media only screen and (max-width: $mobile-max-width) { + .stations { + padding-top: 40px; + padding-bottom: 64px; + background: linear-gradient(354.89deg, #FFFFFF 31.76%, rgba(255, 255, 255, 0.0001) 91.95%); + + .station { + flex-direction: column; + align-items: center; + + .left { + width: 100%; + + .name { + font-weight: 600; + font-size: 24px; + line-height: 32px; + color: #171C34; + text-shadow: 0px 4px 8px rgba(35, 45, 65, 0.1); + margin-bottom: 12px; + } + + .des { + font-size: 16px; + line-height: 28px; + color: #919AA3; + } + + .manager { + display: none; + } + } + + .right { + height: auto; + + span { + width: auto; + } + + .mobile-manager { + display: block; + @include manager(); + margin-top: 32px; + + .top { + .p-name { + font-weight: 600; + font-size: 16px; + line-height: 180%; + } + } + + span { + font-size: 14px; + line-height: 180%; + color: #8F94A1; + } + } + } + } + } +} + + +.returns { + margin-top: 48px; + margin-bottom: 78px; + + .return { + + @include title(); + + .cards { + display: flex; + flex-direction: row; + justify-content: space-between; + + .card { + box-sizing: border-box; + width: 275px; + height: 156px; + background: #FFFFFF; + border-radius: 8px; + padding: 24px; + position: relative; + overflow: hidden; + + .text { + font-size: 16px; + line-height: 28px; + color: #36435C; + } + + .bg { + position: absolute; + top: 92px; + right: 0px; + } + } + } + } +} + +@media only screen and (max-width: $mobile-max-width) { + .returns { + margin-top: 64px; + margin-bottom: 44px; + + .return { + + .title { + margin-bottom: 32px; + } + + .cards { + flex-direction: column !important; + align-items: center; + + .card { + width: 100%; + margin-bottom: 20px; + } + } + } + } +} + +.members { + margin-top: 48px; + margin-bottom: 77px; + + .member { + .title { + font-weight: 600; + font-size: 32px; + line-height: 48px; + color: #3D3E49; + text-shadow: 0px 4px 8px rgba(35, 45, 65, 0.1); + text-align: center; + margin-bottom: 40px; + } + + .cards { + width: 100%; + overflow: hidden; + + #m-swiper-wrapper { + display: flex; + flex-direction: row; + + .card { + box-sizing: border-box; + width: 323px; + height: 237px; + background: #FFFFFF; + border-radius: 8px; + padding: 29px 20px 23px 69px; + position: relative; + margin-left: 63px; + flex-shrink: 0; + + .bg { + position: absolute; + width: 100px; + height: 100px; + border-radius: 50%; + filter: drop-shadow(8px 8px 16px rgba(144, 158, 171, 0.1)); + top: 23px; + left: -50px; + } + + span { + display: block; + } + + .name { + font-weight: 500; + font-size: 16px; + line-height: 24px; + color: #36435C; + margin-bottom: 6px; + } + + .position { + font-size: 14px; + line-height: 24px; + color: #A1A6AB; + margin-bottom: 12px; + } + + .des { + font-size: 14px; + line-height: 24px; + color: #36435C; + } + + .mobile-bgs { + display: none; + } + } + } + } + } +} + +@media only screen and (max-width: $mobile-max-width) { + .members { + margin-bottom: 64px; + + .member { + .title { + margin-bottom: 32px; + } + + + .cards { + flex-direction: column; + align-items: center; + + #m-swiper-wrapper { + flex-direction: column; + + .card { + width: 100%; + height: 216px; + margin: 0px; + margin-bottom: 20px; + padding: 24px; + + .bg { + display: none; + } + + .name, + .bg, + .position { + display: none; + } + + .des { + line-height: 22px; + } + + .mobile-bgs { + display: flex; + flex-direction: row; + + .m-name { + font-weight: 500; + font-size: 16px; + line-height: 24px; + color: #36435C; + margin-bottom: 6px; + } + + .m-bg { + width: 56px; + height: 56px; + border-radius: 50%; + filter: drop-shadow(8px 8px 16px rgba(144, 158, 171, 0.1)); + margin-right: 16px; + } + + .m-position { + font-size: 14px; + line-height: 24px; + color: #A1A6AB; + margin-bottom: 12px; + } + } + } + } + } + } + } +} + +.activities { + .active { + margin-top: 7px; + margin-bottom: 2px; + @include title(); + + .active-content { + display: flex; + flex-direction: row; + justify-content: space-between; + + @media only screen and (max-width: $mobile-max-width) { + flex-direction: column; + } + + .left { + width: 570px; + height: 340px; + border-radius: 8px; + position: relative; + + .buttons { + box-sizing: border-box; + height: 100%; + padding: 16px; + display: flex; + justify-content: space-between; + align-items: center; + + .video { + width: 61.6px; + height: 61.6px; + background-image: url(/images/user-group/single/video.svg); + cursor: pointer; + } + + .pre-next { + width: 40px; + height: 40px; + cursor: pointer; + } + } + + .cover-box { + width: 100%; + height: 86px; + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.29) 100%); + position: absolute; + bottom: 0; + left: 0; + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; + } + + .rotations { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + display: flex; + flex-direction: row; + overflow: hidden; + border-radius: 8px; + z-index: -1; + + .video { + width: 100%; + height: 100%; + border-radius: 8px; + } + } + } + + .right { + width: 570px; + height: 340px; + + .titleBox { + margin-bottom: 14px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + .t-text { + display: block; + font-weight: 600; + font-size: 20px; + line-height: 28px; + color: #30313B; + margin: auto 0px; + } + + .buttons { + box-sizing: border-box; + background: #FFFFFF; + border-radius: 24px; + height: 32px; + padding: 6px 8px; + display: flex; + justify-content: space-between; + align-items: center; + + .pages { + font-weight: 600; + font-size: 16px; + line-height: 28px; + color: #36435C; + margin: 0px 12px; + } + + .pre { + width: 20px; + height: 20px; + background-image: url('/images/user-group/single/pre-next.svg'); + opacity: 0.4; + + &:hover { + cursor: pointer; + opacity: 1; + } + } + + .next { + width: 20px; + height: 20px; + transform: rotateY(180deg); + background-image: url('/images/user-group/single/pre-next.svg'); + opacity: 0.4; + + &:hover { + opacity: 1; + cursor: pointer; + } + } + } + } + + .reviewBox { + overflow: hidden; + height: 296px; + + .content { + background: #FFFFFF; + border-radius: 8px; + padding: 16px 20px; + + span { + display: block; + } + + .text { + display: block; + width: 100%; + font-weight: 600; + font-size: 18px; + line-height: 32px; + color: #36435C; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + .des { + width: 100%; + font-size: 14px; + line-height: 24px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + &:nth-of-type(even) { + margin: 16px 0px; + } + } + } + } + } + } +} + +@media only screen and (max-width: $mobile-max-width) { + .activities { + .active { + .active-content { + flex-direction: column; + align-items: center; + + .left { + width: 100%; + height: 200px; + margin-bottom: 10px; + } + + .right { + width: 100%; + margin-top: 20px; + } + } + } + } +} + +#m-pagination { + display: flex; + justify-content: center; + margin-top: 20px; + + .m-bullet { + width: 7px; + height: 7px; + border-radius: 50%; + background: #D8DEE5; + + &:nth-of-type(even) { + margin: 0 12px; + } + + &:hover{ + cursor: pointer; + } + } + + .m-bullet-active { + background: #55BC8A; + opacity: 1; + } +} \ No newline at end of file diff --git a/assets/scss/user-group.scss b/assets/scss/user-group.scss index f92222979..d2752c58e 100644 --- a/assets/scss/user-group.scss +++ b/assets/scss/user-group.scss @@ -10,6 +10,8 @@ .topSection { position: relative; padding-top: 138px; + background-size: cover; + background-repeat: no-repeat; .title-div { padding-bottom: 62px; @@ -25,7 +27,7 @@ } p { - width: 1060px; + width: 100%; margin-top: 12px; letter-spacing: -0.04px; color: #ffffff; @@ -129,6 +131,8 @@ flex: 1; .normalPic { + display: block; + box-sizing: border-box; width: 212px; height: 300px; border-radius: 10px; @@ -154,7 +158,7 @@ .hangzhou { width: 410px; - height: 330px; + height: 340px; top: 0px; left: -20px; } @@ -446,6 +450,7 @@ .returns { margin-bottom: 78px; + .return { .title { font-weight: 600; @@ -472,13 +477,13 @@ position: relative; overflow: hidden; - .text{ + .text { font-size: 16px; line-height: 28px; color: #36435C; } - .bg{ + .bg { position: absolute; top: 92px; right: 0px; diff --git a/content/zh/user-group/shanghai.md b/content/zh/user-group/shanghai.md new file mode 100644 index 000000000..56b029909 --- /dev/null +++ b/content/zh/user-group/shanghai.md @@ -0,0 +1,99 @@ +--- +title: "用户委员会-上海站" + +css: "scss/user-group-single.scss" + +topSection: + title: KubeSphere 社区用户委员会—上海站 + content: KubeSphere 社区用户委员会—上海站成立于 2021 年 5 月 15 日，是由活跃在上海的 KubeSphere 社区用户和成员组成的。目前为初创阶段，核心成员 4 人。 + image: /images/user-group/shanghai/banner.png + +station: + name_en: KubeSphere Community + name: 申请加入社区用户委员会—上海站 + description: + - 不管你是否是 KubeSphere 的用户，只要你对云原生技术感兴趣，对组织活动有热情，对发展 KubeSphere 社区有想法，即可申请加入 KubeSphere 社区上海用户委员会。 + - 如果你想加入 KubeSphere 社区用户委员会—上海站，成为其中的一名委员（成员），为发展 KubeSphere 社区贡献自己的一份力量，可添加上海站站长申红磊微信申请，并邀请您加入 KubeSphere 开源社区上海站微信群。 + manager: + name: 申红磊 + image: /images/user-group/shanghai/person.png + wxCode: /images/user-group/shanghai/wxCode.png + position: 上海站站长 + icon: /images/user-group/shanghai/shanghai.svg + icon_name: KubeSphere 社区用户委员会 + station_name: "- 上海站 -" + +returns: + title: 为什么加入我们？ + list: + - text: 结识更多的云原生领域的技术大牛、志同道合的朋友 + bg: /images/user-group/returns/bg1.svg + + - text: 提升在云原生领域的知名度 + bg: /images/user-group/returns/bg2.svg + + - text: 提升自身多项能力：交流沟通能力、组织协调能力、领导能力等 + bg: /images/user-group/returns/bg3.svg + + - text: KubeSphere 社区周边纪念礼品、社区认证证书及社区Title + bg: /images/user-group/returns/bg4.svg + +members: + title: 核心成员 + list: + - name: 张海立 + position: 驭势科技云平台研发总监 + des: 工作领域涉及 Docker、Kubernetes、DevOps、Helm、kind、Ngnix 等，可以协助社区成员解决此领域涉及到的相关问题。 + bg: /images/user-group/shanghai/zhl.png + + - name: 郭旭东 + position: 云原生社区上海站站长 + des: 主要负责 devops 及云原生领域建设，涉及各种云原生工具、Kubernetes、Istio、OAM 等，致力于提升研发及运维效率，优化交付的质量及体验。 + bg: /images/user-group/shanghai/gxd.png + + - name: 申红磊 + position: QingCloud SA + des: 主要负责 devops 及云原生领域建设，涉及各种云原生工具、Kubernetes、Istio、OAM 等，致力于提升研发及运维效率，优化交付的质量及体验。 + bg: /images/user-group/shanghai/shl.png + + - name: 申红磊 + position: QingCloud SA + des: 主要负责 devops 及云原生领域建设，涉及各种云原生工具、Kubernetes、Istio、OAM 等，致力于提升研发及运维效率，优化交付的质量及体验。 + bg: /images/user-group/shanghai/shl.png + +activities: + videos: + - image: /images/user-group/shanghai/rotation/ex.png + link: http://localhost:1313/zh/live/mqtt1230-live/ + - image: /images/user-group/shanghai/rotation/ex.png + link: http://localhost:1313/zh/live/openfunction0113-live/ + - image: /images/user-group/shanghai/rotation/ex.png + link: http://localhost:1313/zh/live/mqtt1230-live/ + + review: + - text: JuiceFS CSI Driver 的最佳实践 + description: JuiceFS 基于云原生环境的基础设施和软件设计，可以简单轻松的在各种云原生环境11111 + link: + + - text: KubeSphere DevOps 越开放，越强大 + description: 开源社区只有保持开放和中立的态度，才能越来越强大，才能像大海一样海纳百川2222222 + link: + + - text: 集群镜像重塑分布式应用交付 + description: 3集群镜像把整个集群看成一台服务器，把 K8s 看成云操作系统，实现整个集群的镜333333 + link: + + - text: KubeSphere DevOps 越开放，越强大 + description: 4开源社区只有保持开放和中立的态度，才能越来越强大，才能像大海一样海纳百川2222222 + link: + + - text: 集群镜像重塑分布式应用交付 + description: 5集群镜像把整个集群看成一台服务器，把 K8s 看成云操作系统，实现整个集群的镜333333 + link: + + - text: JuiceFS CSI Driver 的最佳实践 + description: 6JuiceFS 基于云原生环境的基础设施和软件设计，可以简单轻松的在各种云原生环境11111 + link: + + +--- \ No newline at end of file diff --git a/layouts/user-group/list.html b/layouts/user-group/list.html index 4e0323265..22371e9fa 100644 --- a/layouts/user-group/list.html +++ b/layouts/user-group/list.html @@ -1,7 +1,7 @@ {{ define "main" }} {{ with .Params.topSection }} -
+

{{ .title }}

{{ .content }}

@@ -26,14 +26,14 @@
{{ range .picList }} -
+
{{ .name }}
{{ .title }}
{{ .des }}
-
+ {{ end }}
diff --git a/layouts/user-group/single.html b/layouts/user-group/single.html index e69de29bb..6dbd5b55e 100644 --- a/layouts/user-group/single.html +++ b/layouts/user-group/single.html @@ -0,0 +1,262 @@ +{{ define "main" }} + +{{ with .Params.topSection }} +
+
+

{{ .title }}

+

{{ .content }}

+
+
+{{ end }} + +{{ with .Params.station }} +
+
+
+
+ {{ .name_en }} + {{ .name }} + + {{ range .description }} + {{ . }} + {{ end }} + + {{ with .manager }} +
+ +
+
+ {{ .name }} +
+ + +
+
+ {{ .position }} +
+
+ {{ end }} +
+
+ + {{ .icon_name }} + {{ .station_name }} + {{ with .manager }} +
+ +
+
+ {{ .name }} +
+ + +
+
+ {{ .position }} +
+
+ {{ end }} +
+
+
+
+{{ end }} + +{{ with .Params.returns }} +
+
+
+

{{ .title }}

+
+ {{ range .list }} +
+ {{ .text }} + +
+ {{ end }} +
+
+
+
+{{ end }} + +{{ with .Params.members }} +
+
+
+

{{ .title }}

+
+
+ {{ range $index,$item := .list }} + {{ if modBool $index 3 }} + {{ if ne $index 0 }} +
+ {{ end }} + {{ end }} + + {{ if modBool $index 3 }} +
+ {{ end }} +
+ {{ .name }} + {{ .position }} +
+ +
+ {{ .name }} + {{ .position }} +
+
+ {{ .des }} + +
+ {{ end }} +
+
+
+
+
+
+{{ end }} + +{{ with .Params.activities }} +
+
+
+

社区活动

+
+
+
+ + + +
+
+
+
+ {{ range .videos }} + + {{ end }} +
+
+
+
+
+ 精彩回顾 +
+
+ + 1 / + 2 + + +
+
+
+
+ {{ range .review }} +
+ {{ .text }} + {{ .description }} +
+ {{ end }} +
+
+
+
+
+
+
+{{ end }} + + +{{ end }} \ No newline at end of file diff --git a/static/images/user-group/shanghai/banner.png b/static/images/user-group/shanghai/banner.png new file mode 100644 index 000000000..c59943dc3 Binary files /dev/null and b/static/images/user-group/shanghai/banner.png differ diff --git a/static/images/user-group/shanghai/gxd.png b/static/images/user-group/shanghai/gxd.png new file mode 100644 index 000000000..8e86529bb Binary files /dev/null and b/static/images/user-group/shanghai/gxd.png differ diff --git a/static/images/user-group/shanghai/person.png b/static/images/user-group/shanghai/person.png new file mode 100644 index 000000000..74380e6d2 Binary files /dev/null and b/static/images/user-group/shanghai/person.png differ diff --git a/static/images/user-group/shanghai/rotation/ex.png b/static/images/user-group/shanghai/rotation/ex.png new file mode 100644 index 000000000..1f2c616ce Binary files /dev/null and b/static/images/user-group/shanghai/rotation/ex.png differ diff --git a/static/images/user-group/shanghai/shanghai.svg b/static/images/user-group/shanghai/shanghai.svg new file mode 100644 index 000000000..bbe777fbd --- /dev/null +++ b/static/images/user-group/shanghai/shanghai.svg @@ -0,0 +1,436 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/user-group/shanghai/shl.png b/static/images/user-group/shanghai/shl.png new file mode 100644 index 000000000..6b65d7bae Binary files /dev/null and b/static/images/user-group/shanghai/shl.png differ diff --git a/static/images/user-group/shanghai/weChat.svg b/static/images/user-group/shanghai/weChat.svg new file mode 100644 index 000000000..7f1fda364 --- /dev/null +++ b/static/images/user-group/shanghai/weChat.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/static/images/user-group/shanghai/wxCode.png b/static/images/user-group/shanghai/wxCode.png new file mode 100644 index 000000000..cb54309b4 Binary files /dev/null and b/static/images/user-group/shanghai/wxCode.png differ diff --git a/static/images/user-group/shanghai/zhl.png b/static/images/user-group/shanghai/zhl.png new file mode 100644 index 000000000..297773d0c Binary files /dev/null and b/static/images/user-group/shanghai/zhl.png differ diff --git a/static/images/user-group/single/next.svg b/static/images/user-group/single/next.svg new file mode 100644 index 000000000..245746916 --- /dev/null +++ b/static/images/user-group/single/next.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/images/user-group/single/pre-next-hover.svg b/static/images/user-group/single/pre-next-hover.svg new file mode 100644 index 000000000..e8ba80e14 --- /dev/null +++ b/static/images/user-group/single/pre-next-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/images/user-group/single/pre-next.svg b/static/images/user-group/single/pre-next.svg new file mode 100644 index 000000000..ddf888d31 --- /dev/null +++ b/static/images/user-group/single/pre-next.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/static/images/user-group/single/pre.svg b/static/images/user-group/single/pre.svg new file mode 100644 index 000000000..cf2f6cf72 --- /dev/null +++ b/static/images/user-group/single/pre.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/images/user-group/single/video.svg b/static/images/user-group/single/video.svg new file mode 100644 index 000000000..5a45a7246 --- /dev/null +++ b/static/images/user-group/single/video.svg @@ -0,0 +1,4 @@ + + + +