diff --git a/assets/scss/user-group.scss b/assets/scss/user-group.scss index d2752c58e..e9186bb9d 100644 --- a/assets/scss/user-group.scss +++ b/assets/scss/user-group.scss @@ -16,18 +16,28 @@ .title-div { padding-bottom: 62px; - h1 { + .title { width: 1060px; font-weight: 600; - font-size: 40px; - line-height: 40px; text-align: center; letter-spacing: -0.1px; + color: #FFFFFF; text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15); + display: flex; + flex-direction: row; + justify-content: center; + + .t1,.t2{ + text-align: left; + display: block; + font-size: 40px; + line-height: 40px; + } } p { - width: 100%; + max-width: 1067px; + margin: 0 auto; margin-top: 12px; letter-spacing: -0.04px; color: #ffffff; @@ -36,17 +46,30 @@ font-size: 16px; line-height: 24px; } + } +} - @media only screen and (max-width: $mobile-max-width) { +@media only screen and (max-width: $mobile-max-width) { + .topSection { + padding-top: 114px; + background-image: url(/images/user-group/list/m-banner.png) !important; + .title-div { width: 100%; top: 100px; + padding-bottom: 81px; - h1 { + .title { width: 100%; + flex-direction: column; + + .t1,.t2{ + font-size: 32px; + } } p { width: 100%; + text-align: left; } } } @@ -64,44 +87,73 @@ position: relative; .innerBox { + position: relative; width: 293px; height: 300px; border-radius: 10px; - padding: 32px 24px 32px 32px; 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(12px); + z-index: 0; - .title { - display: block; - font-weight: 600; - font-size: 32px; - line-height: 52px; - color: #171C34; - margin-bottom: 8px; - } - - .des { - display: block; - font-size: 16px; - line-height: 32px; - color: #171C34; - margin-bottom: 24px; - } - - .joinUs { + .text{ + position:absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10; + padding: 32px 24px 32px 32px; display: flex; - width: 104px; - height: 40px; - align-items: center; - justify-content: center; - background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.1) 96.81%), #55BC8A; - box-shadow: 0px 8px 16px rgba(33, 43, 61, 0.2), 0px 10px 50px rgba(34, 43, 62, 0.1); - border-radius: 20px; - color: #FFFFFF; - font-weight: 600; - font-size: 14px; - line-height: 20px; + flex-direction: column; + justify-content: space-between; + + .title { + display: block; + font-weight: 600; + font-size: 32px; + line-height: 52px; + color: #171C34; + margin-bottom: 8px; + z-index: 10; + } + + .des { + display: block; + font-size: 16px; + line-height: 32px; + color: #171C34; + margin-bottom: 24px; + z-index: 10; + } + + .joinUs { + display: flex; + width: 104px; + height: 40px; + align-items: center; + justify-content: center; + background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.1) 96.81%), #55BC8A; + box-shadow: 0px 8px 16px rgba(33, 43, 61, 0.2), 0px 10px 50px rgba(34, 43, 62, 0.1); + border-radius: 20px; + color: #FFFFFF; + 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; } } @@ -141,6 +193,7 @@ overflow: hidden; position: relative; z-index: 0; + transition-delay: .2s; transition-duration: .5s; img { @@ -150,24 +203,24 @@ } .shanghai { - width: 568px; - height: 394px; - top: -47px; - left: -84px; + width: 383px; + height: 300px; + top: 0px; + left: 0px; } .hangzhou { - width: 410px; - height: 340px; + width: 383px; + height: 300px; top: 0px; - left: -20px; + left: 0px; } .chengdu { - width: 384px; - height: 512px; - top: -88px; - left: -44px; + width: 380px; + height: 300px; + top: 0px; + left: 0px; } .nameText { @@ -188,17 +241,18 @@ 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; } .des { @@ -219,7 +273,79 @@ .textBox { opacity: 1; - transition-delay: .3s; + transition-delay: .7s; + } + + .chengdu{ + left: 0px; + } + } + } +} + +@media only screen and (max-width: $mobile-max-width) { + .cityBox{ + flex-direction: column; + padding-top: 0px; + padding-bottom: 0px; + + .city-card{ + width: 100%; + margin-bottom: 20px; + border-radius: 10px; + + .innerBox{ + width: 100%; + height: 228px; + margin-top: -49px; + + .text{ + .title{ + font-size: 24px; + line-height: 32px; + } + + .des{ + margin-bottom: 20px; + } + } + } + + .bl-svg{ + display: none; + } + } + + .tr-svg{ + display: none; + } + + .imageList{ + flex-direction: column; + margin-left: 0px; + + .normalPic{ + width: 100%; + + .hangzhou,.shanghai,.chengdu{ + width: 100%; + height: auto; + } + + .textBox{ + opacity: 1; + } + + &:nth-of-type(even){ + margin: 20px 0px; + } + + @media screen and (max-width: 421px) { + .hangzhou,.shanghai,.chengdu{ + width: 100%; + height: 100%; + } + } } } } @@ -338,6 +464,86 @@ align-items: center; } } + + .m-bg{ + display: none; + } + } + } +} + +@media only screen and (max-width: $mobile-max-width) { + .org-section{ + background: linear-gradient(354.89deg, #FFFFFF 31.76%, rgba(255, 255, 255, 0.0001) 91.95%) !important; + + .org{ + height: auto; + padding-top: 64px; + padding-bottom: 64px; + flex-direction: column; + + .left{ + width: 100%; + margin-bottom: 24px; + + .textBox{ + display: flex; + align-items: center; + margin-bottom: 16px; + + .title { + font-size: 24px; + line-height: 28px; + } + + img{ + margin: 0px; + margin-left: 12px; + } + } + } + + .right{ + width: 100%; + margin-left: 0px; + + .bg{ + display: none; + } + + .m-bg{ + display: block; + position: absolute; + width: 257px; + height: 256px; + top: 8px; + left: calc(50% - 128.5px); + } + + .sig { + width: 240px; + height: 48px; + } + + .sig-zh { + width: 240px; + height: 48px; + margin-bottom: 84px; + } + + .positionBox{ + justify-content: center; + + .position{ + width: 80px; + height: 48px; + + &:nth-of-type(even){ + margin: 0 38px; + } + } + } + } } } } @@ -393,6 +599,7 @@ width: 503.19px; height: 365.97px; margin-left: 96px; + background-image: url(/images/user-group/list/applyNew/apply.svg); } } @@ -441,9 +648,118 @@ @include condition() } + .m-condition{ + display: none; + } + .apply { + @include condition(); margin: 20px 0px; - @include condition() + } + + .m-apply { + display: none; + } + } +} + +@media only screen and (max-width: $mobile-max-width) { + @mixin condition { + background: #FFFFFF; + border-radius: 10px; + padding: 20px; + + .top{ + display: flex; + + .icon { + width: 28px; + height: 28px; + margin-right: 12px; + } + } + + .des{ + display: block; + font-size: 16px; + line-height: 24px; + color: #8F94A1; + + li{ + padding-left: 21px; + text-indent: -12px; + text-align: justify; + } + + span { + display: block; + } + + a { + font-weight: 600; + color: #55BC8A; + } + } + } + + .applyNew{ + .apply{ + padding-top: 64px; + padding-bottom: 44px; + flex-direction: column; + + .text-head{ + flex-direction: column; + + .left{ + width: 100%; + + .title{ + font-size: 24px; + line-height: 28px; + margin-bottom: 16px; + } + + .des{ + color: #919AA3; + } + + .svg{ + display: none; + } + } + + .right{ + width: 333px; + height: 255px; + margin-left: 0px; + margin: 0 auto; + margin-top: 24px; + background-image: url(/images/user-group/list/applyNew/m-apply.svg); + } + } + + .condition{ + display: none; + } + + .m-condition{ + display: block; + @include condition() + } + + .apply{ + display: none; + } + + .m-apply{ + display: block; + @include condition(); + + &:nth-of-type(odd){ + margin: 20px 0px; + } + } } } } @@ -491,4 +807,26 @@ } } } +} + +@media only screen and (max-width: $mobile-max-width) { + .returns{ + margin-bottom: 44px; + .return{ + .title{ + font-size: 24px; + line-height: 28px; + margin-bottom: 32px; + } + + .cards{ + flex-direction: column; + + .card{ + width: 100%; + margin-bottom: 20px; + } + } + } + } } \ No newline at end of file diff --git a/content/zh/user-group/_index.md b/content/zh/user-group/_index.md index 4f6581522..06c646881 100644 --- a/content/zh/user-group/_index.md +++ b/content/zh/user-group/_index.md @@ -4,9 +4,10 @@ title: "社区用户委员会" css: "scss/user-group.scss" topSection: - title: KubeSphere 社区用户委员会 + title1: KubeSphere + title2: 社区用户委员会 content: KubeSphere 社区用户委员会是由 KubeSphere 社区牵头，在城市当地由活跃且愿意为 KubeSphere 社区发展而贡献的用户组成的用户组织。社区会给予委员会相应的支持和授权，以使委员会在当地组织交流活动等，从而促进 KubeSphere 的发展。目前已经成立三个城市站：上海、杭州、成都。 - image: /images/user-group/banner.png + image: /images/user-group/list/banner.png citySection: cityCard: @@ -16,26 +17,26 @@ citySection: picList: - name: 上海站 - backgroundImage: /images/user-group/cityCards/shanghai.jpeg + backgroundImage: /images/user-group/list/cityCards/shanghai.png title: KubeSphere 社区用户委员会 — 上海站 des: 上海站成立于 2021 年 5 月 15 日，是由活跃在上海的 KubeSphere 社区用户和成员组成的。目前为初创阶段，核心成员 4 人。 id: shanghai - name: 杭州站 - backgroundImage: /images/user-group/cityCards/hangzhou.jpeg + backgroundImage: /images/user-group/list/cityCards/hangzhou.png title: KubeSphere 社区用户委员会 — 杭州站 des: 杭州站成立于 2021 年 5 月 15 日，是由活跃在上海的 KubeSphere 社区用户和成员组成的。目前为初创阶段，核心成员 5 人。 id: hangzhou - name: 成都站 - backgroundImage: /images/user-group/cityCards/chengdu.jpeg + backgroundImage: /images/user-group/list/cityCards/chengdu.png title: KubeSphere 社区用户委员会 — 成都站 des: 成都站成立于 2021 年 5 月 15 日，是由活跃在上海的 KubeSphere 社区用户和成员组成的。目前为初创阶段，核心成员 6 人。 id: chengdu organization: name: 组织架构 - orgIcon: /images/user-group/org/github.svg + orgIcon: /images/user-group/list/org/github.svg description: Advocacy and Outreach SIG 旨在以创新的方式发展社区。 我们讨论宣传、外展、活动、社交媒体推广，并吸引新人加入 KubeSphere 社区。如果您感兴趣，可以加入我们的 SIG。在那里您可以找到与您感兴趣的主题所相关的一切内容。 SIG: Advocacy and Outreach SIG SIG_zh: KubeSphere 社区用户委员会 @@ -48,35 +49,35 @@ applyNew: title_en: KubeSphere community title: 申请成立新的城市站 description: 因 KubeSphere 社区成员和用户遍布全国各地，而社区无法定期在每个城市都组织如 Meetup 等交流活动，将各地用户聚集起来交流探讨。在多个城市都有一批活跃的而且愿意贡献的用户，可自发组织交流活动。为了方便 KubeSphere 社区用户的线下交流，以及本地活动的开展，KubeSphere 社区欢迎并鼓励成立新的城市站（上海、杭州、成都除外）。 - right_pic: /images/user-group/applyNew/apply.svg + right_pic: /images/user-group/list/applyNew/apply.svg conditions: text: 成立条件 description: 要成立的城市站至少要有一名近半年内在 KubeSphere 社区中活跃的成员作为站长发起。 - image: /images/user-group/applyNew/condition.svg + image: /images/user-group/list/applyNew/condition.svg apply: text: 申请方式 applyLink: https://github.com/kubesphere/community/issues - image: /images/user-group/applyNew/note.svg + image: /images/user-group/list/applyNew/note.svg requirements: text: 要求 applyLink: https://github.com/kubesphere/community/issues - image: /images/user-group/applyNew/requirements.svg + image: /images/user-group/list/applyNew/requirements.svg returns: title: 成为站长你可以获得什么？ list: - text: 结识更多的云原生领域的技术大牛、志同道合的朋友 - bg: /images/user-group/returns/bg1.svg + bg: /images/user-group/list/returns/bg1.svg - text: 提升在云原生领域的知名度 - bg: /images/user-group/returns/bg2.svg + bg: /images/user-group/list/returns/bg2.svg - text: 提升自身多项能力：交流沟通能力、组织协调能力、领导能力等 - bg: /images/user-group/returns/bg3.svg + bg: /images/user-group/list/returns/bg3.svg - text: KubeSphere 社区周边纪念礼品、社区认证证书及社区Title - bg: /images/user-group/returns/bg4.svg + bg: /images/user-group/list/returns/bg4.svg --- \ No newline at end of file diff --git a/content/zh/user-group/shanghai.md b/content/zh/user-group/shanghai.md index 56b029909..9ff3210df 100644 --- a/content/zh/user-group/shanghai.md +++ b/content/zh/user-group/shanghai.md @@ -27,16 +27,16 @@ returns: title: 为什么加入我们？ list: - text: 结识更多的云原生领域的技术大牛、志同道合的朋友 - bg: /images/user-group/returns/bg1.svg + bg: /images/user-group/list/returns/bg1.svg - text: 提升在云原生领域的知名度 - bg: /images/user-group/returns/bg2.svg + bg: /images/user-group/list/returns/bg2.svg - text: 提升自身多项能力：交流沟通能力、组织协调能力、领导能力等 - bg: /images/user-group/returns/bg3.svg + bg: /images/user-group/list/returns/bg3.svg - text: KubeSphere 社区周边纪念礼品、社区认证证书及社区Title - bg: /images/user-group/returns/bg4.svg + bg: /images/user-group/list/returns/bg4.svg members: title: 核心成员 diff --git a/layouts/user-group/list.html b/layouts/user-group/list.html index 22371e9fa..08cfcc6f8 100644 --- a/layouts/user-group/list.html +++ b/layouts/user-group/list.html @@ -3,7 +3,10 @@ {{ with .Params.topSection }}
-

{{ .title }}

+
+
{{ .title1 }} 
+
{{ .title2 }}
+

{{ .content }}

@@ -16,11 +19,14 @@ {{ with .cityCard }}
- {{ .title }} - {{ .des }} - 加入我们 +
+ {{ .title }} + {{ .des }} + 加入我们 +
+
- +
{{ end }} @@ -36,23 +42,26 @@ {{ end }} - + {{end}} {{ with .Params.organization }} -
+
-
{{ .name }}
- +
+
{{ .name }}
+ +
{{ .description }}
- + +
{{ .SIG }}
{{ .SIG_zh }}
@@ -75,9 +84,9 @@
{{ .title_en }}
{{ .title }}
{{ .description }}
- +
-
+
{{ with .conditions }}
@@ -87,6 +96,13 @@ {{ .description }}
+
+
+ + {{ .text }} +
+ {{ .description }} +
{{ end }} {{ with .apply }} @@ -99,6 +115,17 @@
+ +
+
+ + {{ .text }} + +
+ + 站长向社区 提交申请，通后即可成立。 + +
{{ end }} {{ with .requirements }} @@ -108,11 +135,23 @@ {{ .text }} 1.站长需要保证所在城市内，每年至少组织一场线下活动（出现疫情等特殊情况例外）。 - 2.如果站长由于某个原因临时、或者长期无法于所在城市组织线下活动，需要向社区 提交申请 推荐新的站长，或请求社区推荐新的站长。如果最终无人能组织活动，城市站设置为不活跃状态，直到有新的活跃成员出现。 - + 2.如果站长由于某个原因临时、或者长期无法于所在城市组织线下活动，需要向社区 提交申请 推荐新的站长，或请求社区推荐新的站长。如果最终无人能组织活动，城市站设置为不活跃状态，直到有新的活跃成员出现。 + + +
+
+ + {{ .text }} +
+
    +
  1. 1. 站长需要保证所在城市内，每年至少组织一场线下活动（出现疫情等特殊情况外）。
    2. +
  2. 2. 如果站长由于某个原因临时、或者长期无法于所在城市组织线下活动，需要向区提交申请 推荐新的长，或求社区推荐新的站长。如果最终无人能组织活动，城市站设置为不活跃状态，直有新的活跃员出现。 +
    3. +
+
{{ end }} diff --git a/static/images/user-group/cityCards/chengdu.jpeg b/static/images/user-group/cityCards/chengdu.jpeg deleted file mode 100644 index 86e965256..000000000 Binary files a/static/images/user-group/cityCards/chengdu.jpeg and /dev/null differ diff --git a/static/images/user-group/cityCards/hangzhou.jpeg b/static/images/user-group/cityCards/hangzhou.jpeg deleted file mode 100644 index 2c30022a7..000000000 Binary files a/static/images/user-group/cityCards/hangzhou.jpeg and /dev/null differ diff --git a/static/images/user-group/cityCards/shanghai.jpeg b/static/images/user-group/cityCards/shanghai.jpeg deleted file mode 100644 index 4f9a7b0fa..000000000 Binary files a/static/images/user-group/cityCards/shanghai.jpeg and /dev/null differ diff --git a/static/images/user-group/applyNew/apply.svg b/static/images/user-group/list/applyNew/apply.svg similarity index 100% rename from static/images/user-group/applyNew/apply.svg rename to static/images/user-group/list/applyNew/apply.svg diff --git a/static/images/user-group/applyNew/condition.svg b/static/images/user-group/list/applyNew/condition.svg similarity index 100% rename from static/images/user-group/applyNew/condition.svg rename to static/images/user-group/list/applyNew/condition.svg diff --git a/static/images/user-group/list/applyNew/m-apply.svg b/static/images/user-group/list/applyNew/m-apply.svg new file mode 100644 index 000000000..82189e80c --- /dev/null +++ b/static/images/user-group/list/applyNew/m-apply.svg @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/user-group/applyNew/note.svg b/static/images/user-group/list/applyNew/note.svg similarity index 100% rename from static/images/user-group/applyNew/note.svg rename to static/images/user-group/list/applyNew/note.svg diff --git a/static/images/user-group/applyNew/requirements.svg b/static/images/user-group/list/applyNew/requirements.svg similarity index 100% rename from static/images/user-group/applyNew/requirements.svg rename to static/images/user-group/list/applyNew/requirements.svg diff --git a/static/images/user-group/applyNew/top-rect.svg b/static/images/user-group/list/applyNew/top-rect.svg similarity index 100% rename from static/images/user-group/applyNew/top-rect.svg rename to static/images/user-group/list/applyNew/top-rect.svg diff --git a/static/images/user-group/banner.png b/static/images/user-group/list/banner.png similarity index 100% rename from static/images/user-group/banner.png rename to static/images/user-group/list/banner.png diff --git a/static/images/user-group/city-rect.svg b/static/images/user-group/list/city-rect.svg similarity index 100% rename from static/images/user-group/city-rect.svg rename to static/images/user-group/list/city-rect.svg diff --git a/static/images/user-group/city-rect1.svg b/static/images/user-group/list/city-rect1.svg similarity index 100% rename from static/images/user-group/city-rect1.svg rename to static/images/user-group/list/city-rect1.svg diff --git a/static/images/user-group/list/cityCards/chengdu.png b/static/images/user-group/list/cityCards/chengdu.png new file mode 100644 index 000000000..5af073741 Binary files /dev/null and b/static/images/user-group/list/cityCards/chengdu.png differ diff --git a/static/images/user-group/list/cityCards/hangzhou.png b/static/images/user-group/list/cityCards/hangzhou.png new file mode 100644 index 000000000..1141bd07c Binary files /dev/null and b/static/images/user-group/list/cityCards/hangzhou.png differ diff --git a/static/images/user-group/list/cityCards/shanghai.png b/static/images/user-group/list/cityCards/shanghai.png new file mode 100644 index 000000000..2faa16fbd Binary files /dev/null and b/static/images/user-group/list/cityCards/shanghai.png differ diff --git a/static/images/user-group/list/m-banner.png b/static/images/user-group/list/m-banner.png new file mode 100644 index 000000000..bd7b09ecd Binary files /dev/null and b/static/images/user-group/list/m-banner.png differ diff --git a/static/images/user-group/org/bg.png b/static/images/user-group/list/org/bg.png similarity index 100% rename from static/images/user-group/org/bg.png rename to static/images/user-group/list/org/bg.png diff --git a/static/images/user-group/org/github.svg b/static/images/user-group/list/org/github.svg similarity index 100% rename from static/images/user-group/org/github.svg rename to static/images/user-group/list/org/github.svg diff --git a/static/images/user-group/list/org/m-bg.svg b/static/images/user-group/list/org/m-bg.svg new file mode 100644 index 000000000..884a87d41 --- /dev/null +++ b/static/images/user-group/list/org/m-bg.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/user-group/org/tree.svg b/static/images/user-group/list/org/tree.svg similarity index 100% rename from static/images/user-group/org/tree.svg rename to static/images/user-group/list/org/tree.svg diff --git a/static/images/user-group/returns/bg1.svg b/static/images/user-group/list/returns/bg1.svg similarity index 100% rename from static/images/user-group/returns/bg1.svg rename to static/images/user-group/list/returns/bg1.svg diff --git a/static/images/user-group/returns/bg2.svg b/static/images/user-group/list/returns/bg2.svg similarity index 100% rename from static/images/user-group/returns/bg2.svg rename to static/images/user-group/list/returns/bg2.svg diff --git a/static/images/user-group/returns/bg3.svg b/static/images/user-group/list/returns/bg3.svg similarity index 100% rename from static/images/user-group/returns/bg3.svg rename to static/images/user-group/list/returns/bg3.svg diff --git a/static/images/user-group/returns/bg4.svg b/static/images/user-group/list/returns/bg4.svg similarity index 100% rename from static/images/user-group/returns/bg4.svg rename to static/images/user-group/list/returns/bg4.svg diff --git a/static/images/user-group/list/station-bg.svg b/static/images/user-group/list/station-bg.svg new file mode 100644 index 000000000..fafc6fe5c --- /dev/null +++ b/static/images/user-group/list/station-bg.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + +