mirror of
https://github.com/kubesphere/website.git
synced 2025-12-26 00:12:48 +00:00
fix: Update user group list page
Signed-off-by: TheYoungManLi <cjl@kubesphere.io>
This commit is contained in:
TheYoungManLi
parent
10217be9a7
commit
8f8a4729c0
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
---
|
||||
|
|
@ -25,46 +25,33 @@
|
|||
{{ $Pages := .Pages.ByWeight }}
|
||||
|
||||
{{ with .Params.citySection }}
|
||||
<section class="city-section div">
|
||||
<section class="city-section div" style="background-image: url(/images/user-group/list/org/bg.png);">
|
||||
<div class="common-layout">
|
||||
<div class="cityBox">
|
||||
{{ with .cityCard }}
|
||||
<div class="city-card">
|
||||
<div class="innerBox">
|
||||
<div class="text">
|
||||
<span class="title">{{ .title }}</span>
|
||||
<span class="des">{{ .des }}</span>
|
||||
<a class="joinUs" href="{{ .joinLink }}" target="_blank">加入我们</a>
|
||||
</div>
|
||||
<div class="s-bg"></div>
|
||||
<span class="title">{{ .title }}</span>
|
||||
<span class="des">{{ .des }}</span>
|
||||
<a class="joinUs" href="{{ .joinLink }}" target="_blank">加入我们</a>
|
||||
</div>
|
||||
<img class="bl-svg" src="/images/user-group/list/city-rect.svg">
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="imageBox">
|
||||
<div id="imageList" class="imageList">
|
||||
{{ range $Pages }}
|
||||
<a class="normalPic" href="{{ .Permalink | relURL }}" target="_blank">
|
||||
<image src="{{ .Params.coverImage }}"></image>
|
||||
<div class="imageList">
|
||||
{{ range $Pages }}
|
||||
<a class="normalPic" href="{{ .Permalink | relURL }}" target="_blank" style="background-image: url('{{ .Params.coverImage }}')">
|
||||
<div class="nameText">{{ .Params.stationName }}</div>
|
||||
<div class="textBox">
|
||||
<div class="title"> KubeSphere 社区用户委员会 — {{ .Params.stationName }}</div>
|
||||
<div class="des">{{ .Params.topSection.description }}</div>
|
||||
</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img class="tr-svg" src="/images/user-group/list/city-rect1.svg">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{end}}
|
||||
|
||||
|
||||
{{ with .Params.organization }}
|
||||
<section class="org-section div" style="background-image: url(/images/user-group/list/org/bg.png);">
|
||||
<section class="org-section div">
|
||||
<div class="common-layout">
|
||||
<div class="org">
|
||||
<div class="left">
|
||||
|
|
@ -215,23 +202,6 @@
|
|||
{{ end }}
|
||||
|
||||
<script>
|
||||
var imageList = $('#imageList')
|
||||
imageList.children().each(function (index, item) {
|
||||
if (imageList.children().length >= 4) {
|
||||
if (index === imageList.children().length - 1) {
|
||||
$(item).hover(function () {
|
||||
$('#imageList').removeClass('flex-start')
|
||||
$('#imageList').addClass('flex-end')
|
||||
})
|
||||
} else {
|
||||
$(item).hover(function () {
|
||||
if ($('#imageList').hasClass('flex-end')) {
|
||||
$('#imageList').removeClass('flex-end')
|
||||
$('#imageList').addClass('flex-start')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
<div id="swiper" class="rotations">
|
||||
<div id="swiper-wrapper" class="swiper-wrapper">
|
||||
{{ range .videos }}
|
||||
<div class="swiper-slide video" style="background-image: url({{ .image }})" data-link="{{ .link }}"></div>
|
||||
<div class="swiper-slide video" style="background-image: url('{{ .image }}')" data-link="{{ .link }}"></div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 587 KiB |
Loading…
Reference in New Issue