diff --git a/assets/scss/common.scss b/assets/scss/common.scss index 2d987db7c..3d858a6e3 100644 --- a/assets/scss/common.scss +++ b/assets/scss/common.scss @@ -53,6 +53,14 @@ section { white-space: nowrap; } +@media screen and (max-width: $mobile-max-width) { + .nowrap-li:last-of-type { + a { + white-space: normal; + } + } +} + .title-h1 { font-size: 40px; line-height: 1; diff --git a/assets/scss/user-group.scss b/assets/scss/user-group.scss index acdd8d3dd..c835cf392 100644 --- a/assets/scss/user-group.scss +++ b/assets/scss/user-group.scss @@ -91,10 +91,16 @@ } } +.city-section{ + background-repeat: no-repeat; + background-size: 100% auto; + background-position-y: bottom; +} + .cityBox { width: 100%; - padding-top: 91px; - padding-bottom: 99px; + padding-top: 147px; + padding-bottom: 188px; display: flex; flex-direction: row; position: relative; @@ -103,46 +109,27 @@ position: relative; .innerBox { - position: relative; - width: 232px; - height: 300px; - border-radius: 10px; - background: #FFFFFF; - box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05), 0px 4px 8px rgba(36, 46, 66, 0.06); - z-index: 0; + width: 184px; + // height: 300px; - .text{ - position:absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 10; - padding: 24px 19px 24px 24px; - display: flex; - flex-direction: column; - justify-content: space-between; - - .title { + .title { display: block; font-weight: 600; font-size: 32px; line-height: 52px; color: #171C34; margin-bottom: 8px; - z-index: 10; - } - - .des { + } + + .des { display: block; font-size: 16px; line-height: 32px; color: #171C34; margin-bottom: 24px; - z-index: 10; - } - - .joinUs { + } + + .joinUs { display: flex; width: 104px; height: 40px; @@ -155,77 +142,34 @@ font-weight: 600; font-size: 14px; line-height: 20px; - z-index: 10; - } } - - .s-bg{ - width: 293px; - height: 300px; - top: 0; - left: 0; - position: absolute; - background-image: url(/images/user-group/list/station-bg.svg); - background-size: cover; - background-position: -18px 0px; - background-repeat: no-repeat; - z-index: 1; - } - } - - .bl-svg { - position: absolute; - width: 131px; - height: 128px; - bottom: -78px; - left: -63px; - z-index: -1; } } - .tr-svg { - position: absolute; - width: 131px; - height: 128px; - top: 19px; - right: -48px; - z-index: -1; - } - .imageBox{ - overflow: hidden; - - .imageList { - width: 1140px; - margin-left: 20px; + .imageList { + margin-left: 59px; display: flex; flex-direction: row; justify-content: flex-start; + align-items: center; + flex-wrap: wrap; + gap: 24px; flex: 1; .normalPic { display: block; box-sizing: border-box; - width: 212px; - height: 300px; + width: 280px; + height: 160px; border-radius: 10px; // background: #C4C4C4; padding: 20px; overflow: hidden; position: relative; z-index: 0; - transition: width .5s; - - img { - position: absolute; - border-radius: 10px; - width: 444px; - height: 300px; - top: 0px; - left: 0px; - z-index: -1; - transition: transform .5s; - } + transition: all .3s; + background-size: 100% 100%; .nameText { text-align: center; @@ -240,55 +184,47 @@ color: #ffffff; } - .textBox { - position: absolute; - bottom: 0px; - left: 0px; - padding: 20px; - padding-bottom: 16px; - opacity: 0; - background: linear-gradient(180deg, rgba(23, 28, 52, 0) 0%, rgba(23, 28, 52, 0.8) 100%); - border-radius: 10px; + // .textBox { + // position: absolute; + // bottom: 0px; + // left: 0px; + // padding: 20px; + // padding-bottom: 16px; + // opacity: 0; + // background: linear-gradient(180deg, rgba(23, 28, 52, 0) 0%, rgba(23, 28, 52, 0.8) 100%); + // border-radius: 10px; - .title { - font-weight: 600; - font-size: 16px; - line-height: 24px; - letter-spacing: -0.0444444px; - color: #FFFFFF; - margin-bottom: 8px; - } + // .title { + // font-weight: 600; + // font-size: 16px; + // line-height: 24px; + // letter-spacing: -0.0444444px; + // color: #FFFFFF; + // margin-bottom: 8px; + // } - .des { - font-size: 14px; - line-height: 20px; - color: rgba(255, 255, 255, 0.8); - } - } + // .des { + // font-size: 14px; + // line-height: 20px; + // color: rgba(255, 255, 255, 0.8); + // } + // } - &:nth-child(even) { - margin: 0 20px; - } - - &:last-child{ - margin-right: 0px; - } - &:hover { - width: 444px; + transform: scale(1.3, 1.3); + z-index: 100; cursor: pointer; - .textBox { - opacity: 1; - transition-delay: .6s; - } + // .textBox { + // opacity: 1; + // transition-delay: .6s; + // } - .chengdu { - left: 0px; - } + // .chengdu { + // left: 0px; + // } } } - } } } @@ -305,8 +241,12 @@ .innerBox{ width: 100%; - height: 228px; margin-top: -49px; + background: #FFFFFF; + box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05), 0px 4px 8px rgba(36, 46, 66, 0.06); + backdrop-filter: blur(6px); + padding: 2rem 2rem; + border-radius: 10px; .text{ .title{ @@ -334,7 +274,6 @@ display: none; } - .imageBox{ .imageList{ width: 100%; flex-direction: column; @@ -362,9 +301,13 @@ height: 100%; } } + + &:hover{ + transform: none; + } } } - } + } } diff --git a/content/zh/user-group/_index.md b/content/zh/user-group/_index.md index 49e8f99dd..5c8980893 100644 --- a/content/zh/user-group/_index.md +++ b/content/zh/user-group/_index.md @@ -6,7 +6,7 @@ css: "scss/user-group.scss" topSection: kubSphere: KubeSphere committee: 社区用户委员会 - description: KubeSphere 社区用户委员会，是由 KubeSphere 社区牵头发起，在某个城市当地，由活跃且愿意为 KubeSphere 社区发展而贡献的社区成员构成的组织。社区会给予委员会相应的支持和授权，汇聚城市当地优秀的云原生人才，连接 KubeSphere 社区与开发者，通过丰富多样化的社区交流与线下互动活动，促进云原生技术知识的分享、推广和实践，促进 KubeSphere 社区的发展。目前已经成立 4 个城市站：上海、杭州、成都、广州。 + description: KubeSphere 社区用户委员会，是由 KubeSphere 社区牵头发起，在某个城市当地，由活跃且愿意为 KubeSphere 社区发展而贡献的社区成员构成的组织。社区会给予委员会相应的支持和授权，汇聚城市当地优秀的云原生人才，连接 KubeSphere 社区与开发者，通过丰富多样化的社区交流与线下互动活动，促进云原生技术知识的分享、推广和实践，促进 KubeSphere 社区的发展。目前已经成立 5 个城市站：上海、杭州、成都、广州、深圳。 image: /images/user-group/list/banner.png mobile_image: /images/user-group/list/m-banner.png diff --git a/content/zh/user-group/shenzhen.md b/content/zh/user-group/shenzhen.md new file mode 100644 index 000000000..4a2594eee --- /dev/null +++ b/content/zh/user-group/shenzhen.md @@ -0,0 +1,101 @@ +--- +title: "用户委员会-深圳站" +weight: 4 +stationName: 深圳站 +coverImage: /images/user-group/list/cityCards/shenzhen.png + +css: "scss/user-group-single.scss" + +topSection: + kubSphere: KubeSphere + committee: 社区用户委员会 + description: KubeSphere 社区用户委员会—深圳站，成立于 2022 年 8 月 6 日，是由活跃在深圳的 KubeSphere 社区用户和成员组成的。初创核心成员 5 人。 + image: /images/user-group/guangzhou/banner.png + mobile_image: /images/user-group/guangzhou/m-banner.png + +station: + name_en: KubeSphere Community + name: + text1: 申请加入 + text2: 社区用户委员会—深圳站 + description: + - 不管你是否是 KubeSphere 的用户，只要你对云原生技术感兴趣，对组织活动有热情，对发展 KubeSphere 社区有想法，即可申请加入 KubeSphere 社区广州用户委员会。 + - 如果你想加入 KubeSphere 社区用户委员会—广州站，成为其中的一名委员（成员），为发展 KubeSphere 社区贡献自己的一份力量，可添加广州站站长微信申请，并可加入 KubeSphere 开源社区广州站微信群。 + manager: + name: 裴振飞 + image: /images/user-group/guangzhou/peizhenfei.png + wxCode: /images/user-group/guangzhou/peizhenfeivx.jpg + position: 深圳站站长 + icon: /images/user-group/shenzhen/logo.svg + icon_name: KubeSphere 社区用户委员会 + station_name: "- 深圳站 -" + +returns: + title: 为什么加入我们？ + list: + - text: 结识更多的云原生领域的技术大牛、志同道合的朋友 + bg: /images/user-group/list/returns/bg1.svg + + - text: 提升自身在云原生领域的知名度，拓宽学习和交流云原生技术的渠道 + bg: /images/user-group/list/returns/bg2.svg + + - text: 提升自身多项能力：交流沟通能力、组织协调能力等 + bg: /images/user-group/list/returns/bg3.svg + + - text: KubeSphere 社区周边纪念礼品、社区认证证书及社区 Title + bg: /images/user-group/list/returns/bg4.svg + +members: + title: 核心成员 + list: + - name: 裴振飞 + position: 站长 + des: 广州视源电子股份有限公司，运维工程师，多年系统运维经验；python 前后端全栈开发者；云原生爱技术好者。公司内部负责运维及运维开发相关工作。 + image: /images/user-group/guangzhou/peizhenfei.png + + - name: 胡卓超 + position: 副站长 + des: 担任多家企业技术顾问，云原生爱好者，个人关注领域 DevOps、Istio、Serverless，工作负责云原生相关技术的落地，架构的演进。 + image: /images/user-group/guangzhou/huzhuochao.jpeg + + - name: 刘星 + position: 委员 + des: 广东国地科技，运维工程师，云原生爱好者，日常工作领域涉及 Devops、Gitops、K8s、监控、服务网格等。 + image: /images/user-group/guangzhou/liuxing.png + + - name: 符嘉阳 + position: 委员 + des: 珠海盈米基金销售有限公司，系统开发工程师，云原生爱好者，日常工作涉及 K8s、DevOps、Service Mesh 等。 + image: /images/user-group/guangzhou/fujiayang.jpeg + + - name: 王静 + position: 委员 + des: 天翼云科技有限公司，专家，云原生爱好者。 + image: /images/user-group/guangzhou/wangjing.jpeg + +activities: + videos: + - image: https://pek3b.qingstor.com/kubesphere-community/images/meetup-guangzhou-cover.jpeg + link: https://kubesphere.io/zh/live/meetup-guangzhou-20220806/ + + - image: https://pek3b.qingstor.com/kubesphere-community/images/argocd0217-live-cover.png + link: https://kubesphere.io/zh/live/gitops-cic/ + + review: + - text: 负载均衡器 OpenELB ARP 欺骗技术解析 + description: 这篇文章介绍了如何使用 OpenELB 在 Kubernetes 上实现负载均衡，并讨论了使用 ARP 协议的优点。 + link: https://kubesphere.io/zh/blogs/openelb-arp/ + + - text: Kubernetes 多行日志采集方案探索 + description: 这篇文章介绍了如何使用 KubeSphere 收集和分析应用程序日志，并提供了相关的操作步骤。 + link: https://kubesphere.io/zh/blogs/kubesphere-log-collection/ + + - text: Argo CD 速度通关指南 + description: 本次直播将介绍 Argo CD，分享实践经验，结合测试环境案例，演示相应场景下的实验效果；让用户快速把握重点难点以及相应的思路和方向 + link: https://kubesphere.io/zh/live/argocd0217-live/ + + - text: 基于 Argo CD 的 GitOps 实践经验 + description: 通过 KubeSphere 的应用管理能力快速使用 Apache APISIX Ingress Controller + link: https://kubesphere.io/zh/blogs/gitops-argocd/ +draft: true +--- \ No newline at end of file diff --git a/layouts/user-group/list.html b/layouts/user-group/list.html index 6ce70abba..28535fc29 100644 --- a/layouts/user-group/list.html +++ b/layouts/user-group/list.html @@ -25,46 +25,33 @@ {{ $Pages := .Pages.ByWeight }} {{ with .Params.citySection }} -
+
{{ with .cityCard }}
-
- {{ .title }} - {{ .des }} - 加入我们 -
-
+ {{ .title }} + {{ .des }} + 加入我们
-
{{ end }} -
- - - -
{{end}} - + {{ with .Params.organization }} -
+
@@ -215,23 +202,6 @@ {{ end }} {{ end }} \ No newline at end of file diff --git a/layouts/user-group/single.html b/layouts/user-group/single.html index 157749f06..1111755d8 100644 --- a/layouts/user-group/single.html +++ b/layouts/user-group/single.html @@ -153,7 +153,7 @@
{{ range .videos }} -
+
{{ end }}
diff --git a/static/images/user-group/list/cityCards/shenzhen.png b/static/images/user-group/list/cityCards/shenzhen.png new file mode 100644 index 000000000..0c9cc4e38 Binary files /dev/null and b/static/images/user-group/list/cityCards/shenzhen.png differ diff --git a/static/images/user-group/shenzhen/logo.svg b/static/images/user-group/shenzhen/logo.svg new file mode 100644 index 000000000..88562e0d0 --- /dev/null +++ b/static/images/user-group/shenzhen/logo.svg @@ -0,0 +1,416 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +