mirror of
https://github.com/kubesphere/website.git
synced 2025-12-26 00:12:48 +00:00
feat: Add user-group single page
Signed-off-by: TheYoungManLi <cjl@kubesphere.io>
This commit is contained in:
TheYoungManLi
parent
2f28a65562
commit
b690ff9bbe
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
|
||||
---
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{{ define "main" }}
|
||||
|
||||
{{ with .Params.topSection }}
|
||||
<section class='topSection bg-cover div' style='background-image: url("{{ .image }}");'>
|
||||
<section class='topSection div' style='background-image: url("{{ .image }}");'>
|
||||
<div class="title-div common-layout">
|
||||
<h1 class="title-h1">{{ .title }}</h1>
|
||||
<p class="common-p">{{ .content }}</p>
|
||||
|
|
@ -26,14 +26,14 @@
|
|||
|
||||
<div class="imageList" id="imageList">
|
||||
{{ range .picList }}
|
||||
<div class="normalPic">
|
||||
<a class="normalPic" href="./{{ .id }}">
|
||||
<image class="{{ .id }}" src="{{ .backgroundImage }}"></image>
|
||||
<div class="nameText">{{ .name }}</div>
|
||||
<div class="textBox">
|
||||
<div class="title">{{ .title }}</div>
|
||||
<div class="des">{{ .des }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<img class="tr-svg" src="/images/user-group/city-rect1.svg">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,262 @@
|
|||
{{ define "main" }}
|
||||
|
||||
{{ with .Params.topSection }}
|
||||
<section class='topSection div' style='background-image: url("{{ .image }}");'>
|
||||
<div class="title-div common-layout">
|
||||
<h1 class="title-h1">{{ .title }}</h1>
|
||||
<p class="common-p">{{ .content }}</p>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.station }}
|
||||
<section class="stations div" style="background-image: url(/images/user-group/org/bg.png);">
|
||||
<div class="common-layout">
|
||||
<div class="station">
|
||||
<div class="left">
|
||||
<span class="name_en">{{ .name_en }}</span>
|
||||
<span class="name"> {{ .name }} </span>
|
||||
|
||||
{{ range .description }}
|
||||
<span class="des">{{ . }}</span>
|
||||
{{ end }}
|
||||
|
||||
{{ with .manager }}
|
||||
<div class="manager">
|
||||
<image class="person" src="{{ .image }}"></image>
|
||||
<div>
|
||||
<div class="top">
|
||||
<span class="p-name">{{ .name }}</span>
|
||||
<div class="codeBox">
|
||||
<image class="p-wx" src="/images/user-group/shanghai/weChat.svg"></image>
|
||||
<image class="qrCode" src="{{ .wxCode }}"></image>
|
||||
</div>
|
||||
</div>
|
||||
<span>{{ .position }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="right">
|
||||
<image class="icon" src="{{ .icon }}"></image>
|
||||
<span class="icon-name">{{ .icon_name }}</span>
|
||||
<span class="station_name">{{ .station_name }}</span>
|
||||
{{ with .manager }}
|
||||
<div class="mobile-manager">
|
||||
<image class="person" src="{{ .image }}"></image>
|
||||
<div>
|
||||
<div class="top">
|
||||
<span class="p-name">{{ .name }}</span>
|
||||
<div class="codeBox">
|
||||
<image class="p-wx" src="/images/user-group/shanghai/weChat.svg"></image>
|
||||
<image class="qrCode" src="{{ .wxCode }}"></image>
|
||||
</div>
|
||||
</div>
|
||||
<span>{{ .position }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.returns }}
|
||||
<section class="returns">
|
||||
<div class="common-layout">
|
||||
<div class="return">
|
||||
<p class="title">{{ .title }}</p>
|
||||
<div class="cards">
|
||||
{{ range .list }}
|
||||
<div class="card">
|
||||
<span class="text">{{ .text }}</span>
|
||||
<image class="bg" src="{{ .bg }}"></image>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.members }}
|
||||
<section class="members">
|
||||
<div class="common-layout">
|
||||
<div class="member">
|
||||
<p class="title">{{ .title }}</p>
|
||||
<div id="mSwiper" class="cards">
|
||||
<div class="swiper-wrapper">
|
||||
{{ range $index,$item := .list }}
|
||||
{{ if modBool $index 3 }}
|
||||
{{ if ne $index 0 }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if modBool $index 3 }}
|
||||
<div id="m-swiper-wrapper" class="swiper-slide">
|
||||
{{ end }}
|
||||
<div class="card" id="{{ $index }}">
|
||||
<span class="name">{{ .name }}</span>
|
||||
<span class="position">{{ .position }}</span>
|
||||
<div class="mobile-bgs">
|
||||
<image class="m-bg" src="{{ .bg }}"></image>
|
||||
<div>
|
||||
<span class="m-name">{{ .name }}</span>
|
||||
<span class="m-position">{{ .position }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="des">{{ .des }}</span>
|
||||
<image class="bg" src="{{ .bg }}"></image>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="m-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.activities }}
|
||||
<section class="activities">
|
||||
<div class="common-layout">
|
||||
<div class="active">
|
||||
<p class="title">社区活动</p>
|
||||
<div class="active-content">
|
||||
<div id="video-box" class="left">
|
||||
<div class="buttons">
|
||||
<image id="video-pre" src="/images/user-group/single/pre.svg" class="pre-next"></image>
|
||||
<a id="video-open" class="video" target="_blank"></a>
|
||||
<image id="video-next" src="/images/user-group/single/next.svg" class="pre-next"></image>
|
||||
</div>
|
||||
<div class="cover-box"></div>
|
||||
<div id="swiper" class="rotations">
|
||||
<div id="swiper-wrapper" class="swiper-wrapper">
|
||||
{{ range .videos }}
|
||||
<image class="swiper-slide video" src="{{ .image }}" data-link="{{ .link }}"></image>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="titleBox">
|
||||
<span class="t-text">精彩回顾</span>
|
||||
<div class="buttons">
|
||||
<div id="review-pre" class="pre"></div>
|
||||
<span class="pages">
|
||||
<span id="current">1</span> /
|
||||
<span id="total">2</span>
|
||||
</span>
|
||||
<div id="review-next" class="next"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reviewBox">
|
||||
<div id="reviewBox">
|
||||
{{ range .review }}
|
||||
<div class="content">
|
||||
<a href="{{ .link }}" class="text">{{ .text }}</a>
|
||||
<span class="des">{{ .description }}</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var currentPicIndex = 0;
|
||||
var allLink = $('#swiper-wrapper').children().map(function (index, item) {
|
||||
return item.dataset.link
|
||||
})
|
||||
function initSwiper() {
|
||||
return new Swiper('#swiper', {
|
||||
autoplay: {
|
||||
running: true,
|
||||
pauseOnMouseEnter: true,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
delay: 3000,
|
||||
speed: 800,
|
||||
loop: true,
|
||||
on: {
|
||||
slideChange: function () {
|
||||
currentPicIndex = this.activeIndex - 1
|
||||
$('#video-open').attr('href', allLink[currentPicIndex])
|
||||
},
|
||||
}
|
||||
});
|
||||
}
|
||||
var videoSwiper = initSwiper();
|
||||
$('#video-pre').click(function () {
|
||||
videoSwiper.slidePrev();
|
||||
})
|
||||
|
||||
$('#video-next').click(function () {
|
||||
videoSwiper.slideNext();
|
||||
})
|
||||
})();
|
||||
|
||||
(function () {
|
||||
var reviewChildren = $('#reviewBox').children();
|
||||
var total = Math.ceil(reviewChildren.length / 3);
|
||||
var current = 1;
|
||||
function nextPage() {
|
||||
current += 1;
|
||||
$('#current').text(current);
|
||||
}
|
||||
|
||||
function prePage() {
|
||||
current -= 1;
|
||||
$('#current').text(current);
|
||||
}
|
||||
|
||||
$('#review-pre').click(function () {
|
||||
if (current <= 1) {
|
||||
return
|
||||
}
|
||||
var currentTop = $('#reviewBox')[0].style.transform.slice(11, -3);
|
||||
prePage();
|
||||
const now = parseFloat(currentTop) + parseFloat(current * 296) + 16;
|
||||
$('#reviewBox')[0].style.transform = "translateY(" + now + "px)";
|
||||
})
|
||||
|
||||
$('#review-next').click(function () {
|
||||
if (current >= total) {
|
||||
return
|
||||
}
|
||||
var currentTop = $('#reviewBox')[0].style.transform.slice(11, -3) || 0;
|
||||
const now = parseFloat(currentTop) - parseFloat(current * 296) - 16;
|
||||
nextPage();
|
||||
$('#reviewBox')[0].style.transform = "translateY(" + now + "px)";
|
||||
})
|
||||
|
||||
$('#total').text(total);
|
||||
})();
|
||||
|
||||
(function () {
|
||||
var mSwiper = new Swiper('#mSwiper', {
|
||||
autoplay: {
|
||||
running: false,
|
||||
pauseOnMouseEnter: true,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
delay: 3000,
|
||||
speed: 800,
|
||||
loop: true,
|
||||
pagination: {
|
||||
el: '#m-pagination',
|
||||
bulletClass:'m-bullet',
|
||||
bulletActiveClass:'m-bullet-active',
|
||||
clickable :true,
|
||||
},
|
||||
});
|
||||
})()
|
||||
</script>
|
||||
{{ end }}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 404 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 735 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.927612 9.69331C0.927612 11.7013 2.01989 13.5358 3.70796 14.7505C3.85691 14.8496 3.93138 14.9984 3.93138 15.1967C3.93138 15.2463 3.90656 15.3206 3.90656 15.3702C3.78243 15.866 3.55901 16.6841 3.53419 16.7089C3.50936 16.7832 3.48454 16.8328 3.48454 16.9072C3.48454 17.0559 3.60866 17.1799 3.75761 17.1799C3.80726 17.1799 3.85691 17.1551 3.90656 17.1303L5.6691 16.1139C5.79322 16.0395 5.94217 15.99 6.09111 15.99C6.16559 15.99 6.26489 15.99 6.33936 16.0147C7.15857 16.2626 8.05225 16.3866 8.97076 16.3866C13.4144 16.3866 17.0139 13.387 17.0139 9.69331C17.0139 5.99961 13.4144 3.00003 8.97076 3.00003C4.52717 3.00003 0.927612 5.99961 0.927612 9.69331Z" fill="url(#paint0_linear_1406_15837)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4648 20.3256C17.2325 20.3256 17.9754 20.2257 18.6441 20.0259C18.6936 20.0009 18.7679 20.0009 18.8422 20.0009C18.966 20.0009 19.0899 20.0509 19.1889 20.1008L20.65 20.95C20.6996 20.975 20.7243 21 20.7739 21C20.8977 21 20.9967 20.9001 20.9967 20.7752C20.9967 20.7253 20.972 20.6753 20.972 20.6004C20.972 20.5754 20.7739 19.901 20.6748 19.4764C20.65 19.4265 20.65 19.3765 20.65 19.3266C20.65 19.1767 20.7243 19.0518 20.8481 18.9519C22.2597 17.9279 23.1513 16.4044 23.1513 14.706C23.1513 11.6089 20.1547 9.08633 16.4648 9.08633C12.7749 9.08633 9.77832 11.584 9.77832 14.706C9.77832 17.803 12.7749 20.3256 16.4648 20.3256Z" fill="url(#paint1_linear_1406_15837)"/>
|
||||
<path d="M6.28976 8.5684C6.86669 8.5684 7.32342 8.11065 7.32342 7.53243C7.32342 6.95421 6.86669 6.49646 6.28976 6.49646C5.71284 6.49646 5.2561 6.95421 5.2561 7.53243C5.2561 8.11065 5.71284 8.5684 6.28976 8.5684Z" fill="#168743"/>
|
||||
<path d="M11.6518 8.5684C12.2288 8.5684 12.6855 8.11065 12.6855 7.53243C12.6855 6.95421 12.2288 6.49646 11.6518 6.49646C11.0749 6.49646 10.6182 6.95421 10.6182 7.53243C10.6182 8.11065 11.0749 8.5684 11.6518 8.5684Z" fill="#168743"/>
|
||||
<path d="M14.3004 13.8778C13.798 13.8778 13.396 13.475 13.396 12.9714C13.396 12.4678 13.798 12.0649 14.3004 12.0649C14.8029 12.0649 15.2049 12.4678 15.2049 12.9714C15.2049 13.475 14.8029 13.8778 14.3004 13.8778Z" fill="#919191"/>
|
||||
<path d="M18.7581 13.8778C18.2557 13.8778 17.8537 13.475 17.8537 12.9714C17.8537 12.4678 18.2557 12.0649 18.7581 12.0649C19.2606 12.0649 19.6626 12.4678 19.6626 12.9714C19.6626 13.475 19.2606 13.8778 18.7581 13.8778Z" fill="#919191"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_1406_15837" x1="8.9797" y1="16.3504" x2="8.9797" y2="3.06193" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#05CD66"/>
|
||||
<stop offset="1" stop-color="#9EEE69"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_1406_15837" x1="16.4767" y1="20.2298" x2="16.4767" y2="9.08204" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E4E6E6"/>
|
||||
<stop offset="1" stop-color="#F0F0F0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 508 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="20" cy="20" r="20" fill="white" fill-opacity="0.4"/>
|
||||
<path d="M16 13.6919L17.6919 12L26 20.3081L17.6919 28.6161L16 26.9242L22.6161 20.3081L16 13.6919Z" fill="white" fill-opacity="0.8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 301 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.12495 5.83313L7.94644 7.01164L10.8927 9.95794L7.94629 12.9044L9.1248 14.0829L13.2496 9.9581L9.12495 5.83313Z" fill="#36435C"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18.3333C14.6024 18.3333 18.3333 14.6023 18.3333 9.99996C18.3333 5.39759 14.6024 1.66663 10 1.66663C5.39763 1.66663 1.66667 5.39759 1.66667 9.99996C1.66667 14.6023 5.39763 18.3333 10 18.3333ZM7.94643 7.0116L9.12494 5.83309L13.2496 9.95806L9.12479 14.0829L7.94627 12.9043L10.8927 9.95789L7.94643 7.0116Z" fill="#CCD3DB"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 615 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.7914 5.83313L11.9699 7.01164L9.02363 9.95793L11.9701 12.9044L10.7916 14.0829L6.66678 9.9581L10.7914 5.83313Z" fill="#36435C"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 18.3333C14.6024 18.3333 18.3333 14.6023 18.3333 9.99996C18.3333 5.39759 14.6024 1.66663 9.99999 1.66663C5.39762 1.66663 1.66666 5.39759 1.66666 9.99996C1.66666 14.6023 5.39762 18.3333 9.99999 18.3333ZM11.9699 7.0116L10.7914 5.83309L6.66676 9.95806L10.7915 14.0829L11.9701 12.9043L9.02361 9.95789L11.9699 7.0116Z" fill="#CCD3DB"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 630 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle r="20" transform="matrix(-1 0 0 1 20 20)" fill="white" fill-opacity="0.4"/>
|
||||
<path d="M24 13.6919L22.3081 12L14 20.3081L22.3081 28.6161L24 26.9242L17.3839 20.3081L24 13.6919Z" fill="white" fill-opacity="0.8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 320 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="30.8" cy="30.8" r="30.8" fill="white"/>
|
||||
<path d="M42.5524 30.4832C41.3336 29.7134 27.1572 20.6688 26.4516 20.2198C25.5536 19.6424 24.6555 20.4122 24.6555 21.3103V41.8371C24.6555 42.8634 25.6177 43.3766 26.3875 42.9276C27.4138 42.2861 41.6543 33.2415 42.5524 32.6642C43.3221 32.151 43.3221 30.9322 42.5524 30.4832Z" fill="#242E42"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 447 B |
Loading…
Reference in New Issue