Merge pull request #2601 from weili520/station_card

fix: Update user group list page

assets/scss/user-group.scss

@@ -104,7 +104,7 @@
 
     .innerBox {
       position: relative;
-      width: 293px;
+      width: 232px;
       height: 300px;
       border-radius: 10px;
       background: #FFFFFF;
@@ -118,7 +118,7 @@
         width: 100%;
         height: 100%;
         z-index: 10;
-        padding: 32px 24px 32px 32px;
+        padding: 24px 19px 24px 24px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
@@ -192,92 +192,102 @@
     z-index: -1;
   }
 
-  .imageList {
-    margin-left: 13px;
-    display: flex;
-    flex-direction: row;
-    flex: 1;
+  .imageBox{
+    overflow: hidden;
 
-    .normalPic {
-        display: block;
-        box-sizing: border-box;
-        width: 212px;
-        height: 300px;
-        border-radius: 10px;
-        // background: #C4C4C4;
-        padding: 20px;
-        overflow: hidden;
-        position: relative;
-        z-index: 0;
-        transition-delay: .2s;
-        transition-duration: .5s;
-  
-        img {
-          position: absolute;
-          border-radius: 10px;
-          width: 383px;
+    .imageList {
+      width: 1140px;
+      margin-left: 20px;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      flex: 1;
+
+      .normalPic {
+          display: block;
+          box-sizing: border-box;
+          width: 212px;
           height: 300px;
-          top: 0px;
-          left: 0px;
-          z-index: -1;
-        }
-  
-        .nameText {
-          text-align: center;
-          width: 60px;
-          height: 24px;
-          background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.1) 96.81%), #242E42;
-          box-shadow: 0px 8px 16px rgba(33, 43, 61, 0.2), 0px 10px 50px rgba(34, 43, 62, 0.1);
-          border-radius: 18px;
-          font-weight: 500;
-          font-size: 12px;
-          line-height: 24px;
-          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;
-  
-          .title {
-            font-weight: 600;
-            font-size: 16px;
+          // 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;
+          }
+    
+          .nameText {
+            text-align: center;
+            width: 60px;
+            height: 24px;
+            background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.1) 96.81%), #242E42;
+            box-shadow: 0px 8px 16px rgba(33, 43, 61, 0.2), 0px 10px 50px rgba(34, 43, 62, 0.1);
+            border-radius: 18px;
+            font-weight: 500;
+            font-size: 12px;
             line-height: 24px;
-            letter-spacing: -0.0444444px;
-            color: #FFFFFF;
-            margin-bottom: 8px;
+            color: #ffffff;
           }
-  
-          .des {
-            font-size: 14px;
-            line-height: 20px;
-            color: rgba(255, 255, 255, 0.8);
+    
+          .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;
+            }
+    
+            .des {
+              font-size: 14px;
+              line-height: 20px;
+              color: rgba(255, 255, 255, 0.8);
+            }
+          }
+    
+          &:nth-child(even) {
+            margin: 0 20px;
           }
-        }
-  
-        &:nth-child(even) {
-          margin: 0 20px;
-        }
-    }
 
-    .pic-hover {
-        width: 380px;
-        cursor: pointer;
-  
-        .textBox {
-          opacity: 1;
-          transition-delay: .7s;
-        }
-  
-        .chengdu{
-          left: 0px;
-        }
+          &:last-child{
+            margin-right: 0px;
+          }
+
+          &:hover {
+            width: 444px;
+            cursor: pointer;
+
+            .textBox {
+              opacity: 1;
+              transition-delay: .6s;
+            }
+
+            .chengdu {
+              left: 0px;
+            }
+          }
+      }
     }
   }
 }
@@ -324,30 +334,33 @@
       display: none;
     }
 
-    .imageList{
-      flex-direction: column;
-      margin-left: 0px;
-
-      .normalPic{
+    .imageBox{
+      .imageList{
         width: 100%;
+        flex-direction: column;
+        margin-left: 0px;
 
-        img{
+        .normalPic{
           width: 100%;
-          height: auto;
-        }
 
-        .textBox{
-          opacity: 1;
-        }
-
-        &:nth-of-type(even){
-          margin: 20px 0px;
-        }
-
-        @media screen and (max-width: 421px) {
           img{
             width: 100%;
-            height: 100%;
+            height: auto;
+          }
+
+          .textBox{
+            opacity: 1;
+          }
+
+          &:nth-of-type(even){
+            margin: 20px 0px;
+          }
+
+          @media screen and (max-width: 421px) {
+            img{
+              width: 100%;
+              height: 100%;
+            }
           }
         }
       }
@@ -841,4 +854,14 @@
       }
     }
   }
+}
+
+.flex-end {
+  transform: translateX(-232px);
+  justify-content: flex-end !important;
+}
+
+.flex-start {
+  transform: translateX(0px);
+  justify-content: flex-start !important;
 }

content/zh/user-group/guangzhou.md

@@ -0,0 +1,102 @@
+---
+title: "用户委员会-广州站"
+draft: true
+weight: 4
+stationName: 广州站
+coverImage: /images/user-group/list/cityCards/guangzhou.png
+
+css: "scss/user-group-single.scss"
+
+topSection:
+  kubSphere: KubeSphere 
+  committee: 社区用户委员会
+  description: KubeSphere 社区用户委员会—广州站，成立于 2021 年 5 月 15 日，是由活跃在广州的 KubeSphere 社区用户和成员组成的。初创核心成员 4 人。
+  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/shanghai/zhanghaili.png
+    wxCode: /images/user-group/shanghai/zhanghailivx.jpeg
+    position: 广州站站长
+  icon: /images/user-group/guangzhou/guangzhou.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: 驭势科技云平台研发总监，开源爱好者，云原生社区上海站 PMC 成员，KubeSphere Ambassador；日常云原生领域工作涉及 Kubernetes、DevOps、可观察性、服务网格等。
+      image: /images/user-group/shanghai/zhanghaili.png
+
+    - name: 申红磊
+      position: 副站长
+      des: 关注内容：容器、DevSecOps 领域、Spring Cloud、Istio 以及微服务中间件；行业解决方案和发展趋势，云上架构的规划与设计，微服务方案与咨询等。
+      image: /images/user-group/shanghai/shl.png
+
+    - name: 刘德涵
+      position: 委员
+      des: 韵达科技资深运维，Docker，Linux、Kubernetes 运维，Devops，CI/CD，微服务应用部署，链路监控、helm，基础架构设计，快速定位运维相关问题，多年的运维操作经验，协助社区成员解决相关问题。
+      image: /images/user-group/shanghai/liudehan.jpeg
+
+    - name: 张浩飞
+      position: 委员
+      des: 现在任职高级运维工程师，负责公司 K8s 的搭建，维护，与新技术的探索。
+      image: /images/user-group/shanghai/zhanghaofei.jpeg
+
+activities:
+  videos:
+    - image: https://pek3b.qingstor.com/kubesphere-community/images/driverless-cic-cover.png
+      link: https://kubesphere.com.cn/live/driverless-cic/
+
+    - image: https://pek3b.qingstor.com/kubesphere-community/images/uisee0916-live-cover.png
+      link: https://kubesphere.com.cn/live/uisee0916-live/
+
+    - image: https://pek3b.qingstor.com/kubesphere-community/images/uisee0923-live-cover.png
+      link: https://kubesphere.com.cn/live/uisee0923-live/
+
+    - image: https://pek3b.qingstor.com/kubesphere-community/images/mqtt1230-live-cover.png
+      link: https://kubesphere.com.cn/live/mqtt1230-live/
+
+  review:    
+    - text: 在 KubeSphere 中快速部署使用 GitLab 并构建 DevOps 项目
+      description: 本次分享将和大家一起动手来实践一下在 KubeSphere 部署 GitLab CE（Community Edition 社区版）并构建与之联动的 DevOps 项目。
+      link: https://kubesphere.com.cn/blogs/kubesphere-gitlab-devops/
+
+    - text: 在 Kubernetes 中安装和使用 Apache APISIX Ingress 网关
+      description: 通过 KubeSphere 的应用管理能力快速使用 Apache APISIX Ingress Controller
+      link: https://kubesphere.com.cn/blogs/use-apache-apisix-ingress-in-kubesphere/
+
+    - text: 在 Kubernetes 中部署云原生开发工具 Nocalhost
+      description: 本文将介绍如何在 KubeSphere 中快速部署 Nocalhost Server，用于提供一个帮助研发团队统一管理 Nocalhost 应用部署的管理平台。
+      link: https://kubesphere.com.cn/blogs/kubesphere-nocalhost/
+
+    - text: 面向无人驾驶“云端大脑”可用性的云原生实践
+      description: 本次分享介绍了驭势科技使用 KubeSphere 的历程，在云服务高可用方面自制 Operator 实现热备切换的工作，以及基于 SkyWalking 进行车云链路追踪的一些实践。
+      link: https://kubesphere.com.cn/case/uisee/
+---

layouts/user-group/list.html

@@ -42,18 +42,21 @@
       </div>
       {{ end }}
 
-      <div id="imageList" class="imageList">
-        {{ range $Pages }}
+      <div class="imageBox">
+        <div id="imageList" class="imageList">
+          {{ range $Pages }}
           <a class="normalPic" href="{{ .Permalink }}" target="_blank">
-              <image src="{{ .Params.coverImage }}"></image>
-              <div class="nameText">{{ .Params.stationName }}</div>
-              <div class="textBox">
-                <div class="title"> KubeSphere 社区用户委员会 — {{ .Params.stationName }}</div>
-                <div class="des">{{ .Params.topSection.description }}</div>
-              </div>
+            <image src="{{ .Params.coverImage }}"></image>
+            <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>
@@ -103,89 +106,89 @@
         <div class="right"></div>
       </div>
       {{ with .conditions }}
-        <div class="condition">
-          <image class="icon" src="{{ .image }}"></image>
-          <div class="text">
-            <span class="title">{{ .text }}</span>
-            <span class="des">
-              {{ range .description }}
-                <span>
-                  {{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
-                </span>
-              {{ end }}
-            </span>
-          </div>
-        </div>
-        <div class="m-condition">
-          <div class="top">
-            <image class="icon" src="{{ .image }}"></image>
-            <span class="title">{{ .text }}</span>
-          </div>
+      <div class="condition">
+        <image class="icon" src="{{ .image }}"></image>
+        <div class="text">
+          <span class="title">{{ .text }}</span>
           <span class="des">
             {{ range .description }}
-              <span>
-                {{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
-              </span>
+            <span>
+              {{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
+            </span>
             {{ end }}
           </span>
         </div>
+      </div>
+      <div class="m-condition">
+        <div class="top">
+          <image class="icon" src="{{ .image }}"></image>
+          <span class="title">{{ .text }}</span>
+        </div>
+        <span class="des">
+          {{ range .description }}
+          <span>
+            {{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
+          </span>
+          {{ end }}
+        </span>
+      </div>
       {{ end }}
 
       {{ with .apply }}
-        <div class="apply">
-          <image class="icon" src="{{ .image }}"></image>
-          <div class="text">
-            <span class="title">{{ .text }}</span>
-            {{ with .des }}
-              <span class="des">
-                {{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
-              </span>
-            {{ end }}
-          </div>
-        </div>
-
-        <div class="m-apply">
-          <div class="top">
-            <image class="icon" src="{{ .image }}"></image>
-            <span class="title">{{ .text }}</span>
-
-          </div>
+      <div class="apply">
+        <image class="icon" src="{{ .image }}"></image>
+        <div class="text">
+          <span class="title">{{ .text }}</span>
           {{ with .des }}
-            <span class="des">
-              {{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
-            </span>
+          <span class="des">
+            {{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
+          </span>
           {{ end }}
         </div>
+      </div>
+
+      <div class="m-apply">
+        <div class="top">
+          <image class="icon" src="{{ .image }}"></image>
+          <span class="title">{{ .text }}</span>
+
+        </div>
+        {{ with .des }}
+        <span class="des">
+          {{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
+        </span>
+        {{ end }}
+      </div>
       {{ end }}
 
       {{ with .requirements }}
-        <div class="apply">
-          <image class="icon" src="{{ .image }}"></image>
-          <div class="text">
-            <span class="title">{{ .text }}</span>
-            <span class="des" style="line-height: 32px;">
-              {{ range .des }}
-                <span>
-                  {{ .head }}<a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{.tail}}
-                </span>
-              {{ end }}
-            </span>
-          </div>
-        </div>
-
-        <div class="m-apply">
-          <div class="top">
-            <image class="icon" src="{{ .image }}"></image>
-            <span class="title">{{ .text }}</span>
-          </div>
-          <ol class="des" style="line-height: 32px;">
+      <div class="apply">
+        <image class="icon" src="{{ .image }}"></image>
+        <div class="text">
+          <span class="title">{{ .text }}</span>
+          <span class="des" style="line-height: 32px;">
             {{ range .des }}
-              <li>
-                {{ .head }}<a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{.tail}}
-              </li>
-              {{ end }}
-          </ol>
+            <span>
+              {{ .head }}<a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{.tail}}
+            </span>
+            {{ end }}
+          </span>
         </div>
+      </div>
+
+      <div class="m-apply">
+        <div class="top">
+          <image class="icon" src="{{ .image }}"></image>
+          <span class="title">{{ .text }}</span>
+        </div>
+        <ol class="des" style="line-height: 32px;">
+          {{ range .des }}
+          <li>
+            {{ .head }}<a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{.tail}}
+          </li>
+          {{ end }}
+        </ol>
+      </div>
       {{ end }}
     </div>
   </div>
@@ -200,10 +203,10 @@
       <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>
+        <div class="card">
+          <span class="text">{{ .text }}</span>
+          <image class="bg" src="{{ .bg }}"></image>
+        </div>
         {{ end }}
       </div>
     </div>
@@ -214,15 +217,21 @@
 <script>
   var imageList = $('#imageList')
   imageList.children().each(function (index, item) {
-    if (index === 0) {
-      $(item).addClass('pic-hover')
+    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')
+          }
+        })
+      }
     }
-    $(item).hover(function () {
-      imageList.children().each(function (index, item) {
-        $(item).removeClass('pic-hover')
-      })
-      $(item).addClass('pic-hover')
-    })
   }) 
 </script>
 {{ end }}