fix: update user-group list mobile style

Signed-off-by: TheYoungManLi <cjl@kubesphere.io>

assets/scss/user-group-single.scss

@@ -79,6 +79,8 @@
 }
 
 .topSection {
+  box-sizing: border-box;
+  min-height: 300px;
   position: relative;
   padding-top: 138px;
   background-size: cover;
@@ -87,14 +89,24 @@
   .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 {
@@ -112,24 +124,49 @@
   }
 }
 
+.pc-topSection{
+  display: block;
+}
+
+.m-topSection{
+  display: none;
+}
+
 @media only screen and (max-width: $mobile-max-width) {
   .topSection {
     .title-div {
       width: 100%;
       top: 100px;
+      padding-bottom: 64px;
 
-      h1 {
+      .title {
         width: 100%;
+        flex-direction: column;
+
+        .t1,
+        .t2 {
+          font-size: 32px;
+        }
       }
 
       p {
         width: 100%;
+        text-align: left;
       }
     }
   }
+
+  .pc-topSection{
+    display: none;
+  }
+  
+  .m-topSection{
+    display: block;
+  }
 }
 
 .stations {
+  background-image: url(/images/user-group/list/org/bg.png);
   background-size: 100% 100%;
   padding-top: 77px;
   padding-bottom: 92px;
@@ -161,6 +198,7 @@
         line-height: 52px;
         color: #171C34;
         margin-bottom: 16px;
+        display: flex;
       }
 
       .des {
@@ -227,6 +265,7 @@
           color: #171C34;
           text-shadow: 0px 4px 8px rgba(35, 45, 65, 0.1);
           margin-bottom: 12px;
+          flex-direction: column;
         }
 
         .des {
@@ -320,6 +359,8 @@
 
       .title {
         margin-bottom: 32px;
+        font-size: 24px;
+        line-height: 28px;
       }
 
       .cards {
@@ -328,6 +369,7 @@
 
         .card {
           width: 100%;
+          height: 146px;
           margin-bottom: 20px;
         }
       }
@@ -419,10 +461,12 @@
 
     .member {
       .title {
+        font-size: 24px;
+        line-height: 28px;
         margin-bottom: 32px;
       }
 
-      
+
       .cards {
         flex-direction: column;
         align-items: center;
@@ -431,53 +475,53 @@
           flex-direction: column;
 
           .card {
-              width: 100%;
-              height: 216px;
-              margin: 0px;
-              margin-bottom: 20px;
-              padding: 24px;
+            width: 100%;
+            height: 216px;
+            margin: 0px;
+            margin-bottom: 20px;
+            padding: 24px;
 
-              .bg {
-                display: none;
+            .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: 20px;
+                line-height: 24px;
+                color: #36435C;
+                margin-bottom: 8px;
               }
 
-              .name,
-              .bg,
-              .position {
-                display: none;
+              .m-bg {
+                width: 56px;
+                height: 56px;
+                border-radius: 50%;
+                filter: drop-shadow(8px 8px 16px rgba(144, 158, 171, 0.1));
+                margin-right: 16px;
               }
 
-              .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;
-                }
+              .m-position {
+                font-size: 14px;
+                line-height: 24px;
+                color: #A1A6AB;
+                margin-bottom: 16px;
               }
+            }
           }
         }
       }
@@ -554,6 +598,8 @@
           .video {
             width: 100%;
             height: 100%;
+            background-size: cover;
+            background-repeat: no-repeat;
             border-radius: 8px;
           }
         }
@@ -705,7 +751,7 @@
       margin: 0 12px;
     }
 
-    &:hover{
+    &:hover {
       cursor: pointer;
     }
   }

assets/scss/user-group.scss

@@ -49,10 +49,18 @@
   }
 }
 
+.pc-topSection{
+  display: block;
+}
+
+.m-topSection{
+  display: none;
+}
+
 @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;
@@ -73,6 +81,14 @@
       }
     }
   }
+
+  .pc-topSection{
+    display: none;
+  }
+  
+  .m-topSection{
+    display: block;
+  }
 }
 
 .cityBox {
@@ -183,102 +199,85 @@
     flex: 1;
 
     .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;
+        display: block;
+        box-sizing: border-box;
+        width: 212px;
+        height: 300px;
         border-radius: 10px;
-        z-index: -1;
-      }
-
-      .shanghai {
-        width: 383px;
-        height: 300px;
-        top: 0px;
-        left: 0px;
-      }
-
-      .hangzhou {
-        width: 383px;
-        height: 300px;
-        top: 0px;
-        left: 0px;
-      }
-
-      .chengdu {
-        width: 380px;
-        height: 300px;
-        top: 0px;
-        left: 0px;
-      }
-
-      .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;
+        // background: #C4C4C4;
         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;
+        overflow: hidden;
+        position: relative;
+        z-index: 0;
+        transition-delay: .2s;
+        transition-duration: .5s;
+  
+        img {
+          position: absolute;
+          border-radius: 10px;
+          width: 383px;
+          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;
-          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;
-      }
+        width: 380px;
+        cursor: pointer;
+  
+        .textBox {
+          opacity: 1;
+          transition-delay: .7s;
+        }
+  
+        .chengdu{
+          left: 0px;
+        }
     }
   }
 }
@@ -309,6 +308,11 @@
             margin-bottom: 20px;
           }
         }
+
+        .s-bg{
+          width: 100%;
+        height: 100%;
+        }
       }
 
       .bl-svg{
@@ -327,7 +331,7 @@
       .normalPic{
         width: 100%;
 
-        .hangzhou,.shanghai,.chengdu{
+        img{
           width: 100%;
           height: auto;
         }
@@ -341,7 +345,7 @@
         }
 
         @media screen and (max-width: 421px) {
-          .hangzhou,.shanghai,.chengdu{
+          img{
             width: 100%;
             height: 100%;
           }
@@ -811,7 +815,8 @@
 
 @media only screen and (max-width: $mobile-max-width) {
   .returns{
-    margin-bottom: 44px;
+    margin-bottom: 14px;
+
     .return{
       .title{
         font-size: 24px;
@@ -824,7 +829,12 @@
 
         .card{
           width: 100%;
+          height: 146px;
           margin-bottom: 20px;
+
+          &:last-child{
+            margin-bottom: 0px;
+          }
         }
       }
     }

content/zh/user-group/_index.md

@@ -4,39 +4,21 @@ title: "社区用户委员会"
 css: "scss/user-group.scss"
 
 topSection:
-  title1: KubeSphere 
-  title2: 社区用户委员会
-  content: KubeSphere 社区用户委员会是由 KubeSphere 社区牵头，在城市当地由活跃且愿意为 KubeSphere 社区发展而贡献的用户组成的用户组织。社区会给予委员会相应的支持和授权，以使委员会在当地组织交流活动等，从而促进 KubeSphere 的发展。目前已经成立三个城市站：上海、杭州、成都。
+  kubSphere: KubeSphere 
+  committee: 社区用户委员会
+  description: KubeSphere 社区用户委员会是由 KubeSphere 社区牵头，在城市当地由活跃且愿意为 KubeSphere 社区发展而贡献的用户组成的用户组织。社区会给予委员会相应的支持和授权，以使委员会在当地组织交流活动等，从而促进 KubeSphere 的发展。目前已经成立三个城市站：上海、杭州、成都。
   image: /images/user-group/list/banner.png
+  mobile_image: /images/user-group/list/m-banner.png
 
 citySection:
   cityCard: 
     title: 城市站
     des: KubeSphere 用户委员会目前已经成立三个城市站：上海、杭州、成都。
-    joinLink: https://www.baidu.com
+    joinLink: https://github.com/kubesphere/website/issues
 
-  picList:
-    - name: 上海站
-      backgroundImage: /images/user-group/list/cityCards/shanghai.png
-      title: KubeSphere 社区用户委员会 — 上海站
-      des: 上海站成立于 2021 年 5 月 15 日，是由活跃在上海的 KubeSphere 社区用户和成员组成的。目前为初创阶段，核心成员 4 人。
-      id: shanghai
-    
-    - name: 杭州站
-      backgroundImage: /images/user-group/list/cityCards/hangzhou.png
-      title: KubeSphere 社区用户委员会 — 杭州站
-      des: 杭州站成立于 2021 年 5 月 15 日，是由活跃在上海的 KubeSphere 社区用户和成员组成的。目前为初创阶段，核心成员 5 人。
-      id: hangzhou
-
-    - name: 成都站
-      backgroundImage: /images/user-group/list/cityCards/chengdu.png
-      title: KubeSphere 社区用户委员会 — 成都站
-      des: 成都站成立于 2021 年 5 月 15 日，是由活跃在上海的 KubeSphere 社区用户和成员组成的。目前为初创阶段，核心成员 6 人。
-      id: chengdu 
-  
 organization:
   name: 组织架构
-  orgIcon: /images/user-group/list/org/github.svg
+  githubIcon: /images/user-group/list/org/github.svg
   description: Advocacy and Outreach SIG 旨在以创新的方式发展社区。 我们讨论宣传、外展、活动、社交媒体推广，并吸引新人加入 KubeSphere 社区。如果您感兴趣，可以加入我们的 SIG。在那里您可以找到与您感兴趣的主题所相关的一切内容。
   SIG: Advocacy and Outreach SIG
   SIG_zh: KubeSphere 社区用户委员会

content/zh/user-group/chengdu.md

@@ -0,0 +1,108 @@
+---
+title: "用户委员会-成都站"
+weight: 3
+stationName: 成都站
+coverImage: /images/user-group/list/cityCards/chengdu.png
+
+css: "scss/user-group-single.scss"
+
+topSection:
+  kubSphere: KubeSphere 
+  committee: 社区用户委员会
+  description: KubeSphere 社区用户委员会—成都站成立于 2021 年  6 月 19 日，是由活跃在成都的 KubeSphere 社区用户和成员组成的。目前为初创阶段，核心成员 3 人。
+  image: /images/user-group/chengdu/banner.png
+  mobile_image: /images/user-group/chengdu/m-banner.png
+
+station:
+  name_en: KubeSphere Community
+  name: 
+    text1: 申请加入
+    text2: 社区用户委员会—成都站
+  description: 
+    - 不管你是否是 KubeSphere 的用户，只要你对云原生技术感兴趣，对组织活动有热情，对发展 KubeSphere 社区有想法，即可申请加入 KubeSphere 社区上海用户委员会。
+    - 如果你想加入 KubeSphere 社区用户委员会—成都站，成为其中的一名委员（成员），为发展 KubeSphere 社区贡献自己的一份力量，可添加成都站站长申红磊微信申请，并邀请您加入 KubeSphere 开源社区成都站微信群。
+  manager: 
+    name: 周正军
+    image: /images/user-group/chengdu/person.png
+    wxCode: /images/user-group/chengdu/wxCode.png
+    position: 成都站长
+  icon: /images/user-group/chengdu/chengdu.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: 工作领域涉及 Docker、Kubernetes、DevOps、Helm、kind、Ngnix 等，可以协助社区成员解决此领域涉及到的相关问题。
+      image: /images/user-group/shanghai/zhl.png
+
+    - name: 郭旭东
+      position: 云原生社区上海站站长
+      des: 主要负责 devops 及云原生领域建设，涉及各种云原生工具、Kubernetes、Istio、OAM 等，致力于提升研发及运维效率，优化交付的质量及体验。
+      image: /images/user-group/shanghai/gxd.png
+
+    - name: 申红磊
+      position: QingCloud SA
+      des: 主要负责 devops 及云原生领域建设，涉及各种云原生工具、Kubernetes、Istio、OAM 等，致力于提升研发及运维效率，优化交付的质量及体验。
+      image: /images/user-group/shanghai/shl.png
+
+    - name: 申红磊
+      position: QingCloud SA
+      des: 主要负责 devops 及云原生领域建设，涉及各种云原生工具、Kubernetes、Istio、OAM 等，致力于提升研发及运维效率，优化交付的质量及体验。
+      image: /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 基于云原生环境的基础设施和软件设计，可以简单轻松的在各种云原生环境
+      link: 
+      
+    - text: KubeSphere DevOps 越开放，越强大
+      description: 开源社区只有保持开放和中立的态度，才能越来越强大，才能像大海一样海纳百川
+      link: 
+
+    - text: 集群镜像重塑分布式应用交付
+      description: 集群镜像把整个集群看成一台服务器，把 K8s 看成云操作系统，实现整个集群的镜
+      link: 
+
+    - text: KubeSphere DevOps 越开放，越强大
+      description: 开源社区只有保持开放和中立的态度，才能越来越强大，才能像大海一样海纳百川
+      link: 
+
+    - text: 集群镜像重塑分布式应用交付
+      description: 集群镜像把整个集群看成一台服务器，把 K8s 看成云操作系统，实现整个集群的镜
+      link: 
+
+    - text: JuiceFS CSI Driver 的最佳实践
+      description: 6JuiceFS 基于云原生环境的基础设施和软件设计，可以简单轻松的在各种云原生环境
+      link: 
+
+
+---

content/zh/user-group/hangzhou.md

@@ -0,0 +1,104 @@
+---
+title: "用户委员会-杭州站"
+weight: 2
+stationName: 杭州站
+coverImage: /images/user-group/list/cityCards/hangzhou.png
+
+css: "scss/user-group-single.scss"
+
+topSection:
+  kubSphere: KubeSphere 
+  committee: 社区用户委员会
+  description: KubeSphere 社区用户委员会—杭州站成立于 2021 年 5 月 29 日，是由活跃在杭州的 KubeSphere 社区用户和成员组成的。目前为初创阶段，核心成员 3 人。
+  image: /images/user-group/hangzhou/banner.png
+  mobile_image: /images/user-group/hangzhou/m-banner.png
+
+station:
+  name_en: KubeSphere Community
+  name: 
+    text1: 申请加入
+    text2: 社区用户委员会—杭州站
+  description: 
+    - 不管你是否是 KubeSphere 的用户，只要你对云原生技术感兴趣，对组织活动有热情，对发展 KubeSphere 社区有想法，即可申请加入 KubeSphere 社区上海用户委员会。
+    - 如果你想加入 KubeSphere 社区用户委员会—杭州站，成为其中的一名委员（成员），为发展 KubeSphere 社区贡献自己的一份力量，可添加杭州站站长尹珉微信申请，并邀请您加入 KubeSphere 开源社区杭州站微信群。
+  manager: 
+    name: 尹珉
+    image: /images/user-group/hangzhou/person.png
+    wxCode: /images/user-group/hangzhou/wxCode.png
+    position: 杭州站站长
+  icon: /images/user-group/hangzhou/hangzhou.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: 工作领域涉及 Docker、Kubernetes、DevOps、Helm、kind、Ngnix 等，可以协助社区成员解决此领域涉及到的相关问题。
+      image: /images/user-group/shanghai/zhl.png
+
+    - name: 郭旭东
+      position: 云原生社区上海站站长
+      des: 主要负责 devops 及云原生领域建设，涉及各种云原生工具、Kubernetes、Istio、OAM 等，致力于提升研发及运维效率，优化交付的质量及体验。
+      image: /images/user-group/shanghai/gxd.png
+
+    - name: 申红磊
+      position: QingCloud SA
+      des: 主要负责 devops 及云原生领域建设，涉及各种云原生工具、Kubernetes、Istio、OAM 等，致力于提升研发及运维效率，优化交付的质量及体验。
+      image: /images/user-group/shanghai/shl.png
+
+    - name: 申红磊
+      position: QingCloud SA
+      des: 主要负责 devops 及云原生领域建设，涉及各种云原生工具、Kubernetes、Istio、OAM 等，致力于提升研发及运维效率，优化交付的质量及体验。
+      image: /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 基于云原生环境的基础设施和软件设计，可以简单轻松的在各种云原生环境
+      link: 
+      
+    - text: KubeSphere DevOps 越开放，越强大
+      description: 开源社区只有保持开放和中立的态度，才能越来越强大，才能像大海一样海纳百川
+      link: 
+
+    - text: 集群镜像重塑分布式应用交付
+      description: 3集群镜像把整个集群看成一台服务器，把 K8s 看成云操作系统，实现整个集群的镜
+      link: 
+
+    - text: KubeSphere DevOps 越开放，越强大
+      description: 4开源社区只有保持开放和中立的态度，才能越来越强大，才能像大海一样海纳百川
+      link: 
+
+    - text: 集群镜像重塑分布式应用交付
+      description: 5集群镜像把整个集群看成一台服务器，把 K8s 看成云操作系统，实现整个集群的镜
+      link: 
+
+    - text: JuiceFS CSI Driver 的最佳实践
+      description: 6JuiceFS 基于云原生环境的基础设施和软件设计，可以简单轻松的在各种云原生环境
+      link: 
+---

content/zh/user-group/shanghai.md

@@ -1,16 +1,23 @@
 ---
 title: "用户委员会-上海站"
+weight: 1
+stationName: 上海站
+coverImage: /images/user-group/list/cityCards/shanghai.png
 
 css: "scss/user-group-single.scss"
 
 topSection:
-  title: KubeSphere 社区用户委员会—上海站
-  content: KubeSphere 社区用户委员会—上海站成立于 2021 年 5 月 15 日，是由活跃在上海的 KubeSphere 社区用户和成员组成的。目前为初创阶段，核心成员 4 人。
+  kubSphere: KubeSphere 
+  committee: 社区用户委员会
+  description: KubeSphere 社区用户委员会—上海站成立于 2021 年 5 月 15 日，是由活跃在上海的 KubeSphere 社区用户和成员组成的。目前为初创阶段，核心成员 4 人。
   image: /images/user-group/shanghai/banner.png
+  mobile_image: /images/user-group/shanghai/m-banner.png
 
 station:
   name_en: KubeSphere Community
-  name: 申请加入社区用户委员会—上海站
+  name: 
+    text1: 申请加入
+    text2: 社区用户委员会—上海站
   description: 
     - 不管你是否是 KubeSphere 的用户，只要你对云原生技术感兴趣，对组织活动有热情，对发展 KubeSphere 社区有想法，即可申请加入 KubeSphere 社区上海用户委员会。
     - 如果你想加入 KubeSphere 社区用户委员会—上海站，成为其中的一名委员（成员），为发展 KubeSphere 社区贡献自己的一份力量，可添加上海站站长申红磊微信申请，并邀请您加入 KubeSphere 开源社区上海站微信群。
@@ -44,22 +51,22 @@ members:
     - name: 张海立
       position: 驭势科技云平台研发总监
       des: 工作领域涉及 Docker、Kubernetes、DevOps、Helm、kind、Ngnix 等，可以协助社区成员解决此领域涉及到的相关问题。
-      bg: /images/user-group/shanghai/zhl.png
+      image: /images/user-group/shanghai/zhl.png
 
     - name: 郭旭东
       position: 云原生社区上海站站长
       des: 主要负责 devops 及云原生领域建设，涉及各种云原生工具、Kubernetes、Istio、OAM 等，致力于提升研发及运维效率，优化交付的质量及体验。
-      bg: /images/user-group/shanghai/gxd.png
+      image: /images/user-group/shanghai/gxd.png
 
     - name: 申红磊
       position: QingCloud SA
       des: 主要负责 devops 及云原生领域建设，涉及各种云原生工具、Kubernetes、Istio、OAM 等，致力于提升研发及运维效率，优化交付的质量及体验。
-      bg: /images/user-group/shanghai/shl.png
+      image: /images/user-group/shanghai/shl.png
 
     - name: 申红磊
       position: QingCloud SA
       des: 主要负责 devops 及云原生领域建设，涉及各种云原生工具、Kubernetes、Istio、OAM 等，致力于提升研发及运维效率，优化交付的质量及体验。
-      bg: /images/user-group/shanghai/shl.png
+      image: /images/user-group/shanghai/shl.png
 
 activities:
   videos:

layouts/user-group/list.html

@@ -1,17 +1,29 @@
 {{ define "main" }}
 
 {{ with .Params.topSection }}
-<section class='topSection div' style='background-image: url("{{ .image }}");'>
+<section class='topSection div pc-topSection' style='background-image: url("{{ .image }}");'>
   <div class="title-div common-layout">
     <div class="title">
-      <div class="t1">{{ .title1 }}&nbsp;</div>
-      <div class="t1">{{ .title2 }}</div>
+      <div class="t1">{{ .kubSphere }}&nbsp;</div>
+      <div class="t1">{{ .committee }}</div>
     </div>
-    <p class="common-p">{{ .content }}</p>
+    <p class="common-p">{{ .description }}</p>
+  </div>
+</section>
+
+<section class='topSection div m-topSection' style='background-image: url("{{ .mobile_image }}");'>
+  <div class="title-div common-layout">
+    <div class="title">
+      <div class="t1">{{ .kubSphere }}&nbsp;</div>
+      <div class="t1">{{ .committee }}</div>
+    </div>
+    <p class="common-p">{{ .description }}</p>
   </div>
 </section>
 {{ end }}
 
+{{ $Pages := .Pages.ByWeight }}
+
 {{ with .Params.citySection }}
 <section class="city-section div">
   <div class="common-layout">
@@ -22,7 +34,7 @@
           <div class="text">
             <span class="title">{{ .title }}</span>
             <span class="des">{{ .des }}</span>
-            <a class="joinUs" href="{{ .joinLink }}">加入我们</a>
+            <a class="joinUs" href="{{ .joinLink }}" target="_blank">加入我们</a>
           </div>
           <div class="s-bg"></div>
         </div>
@@ -30,16 +42,16 @@
       </div>
       {{ end }}
 
-      <div class="imageList" id="imageList">
-        {{ range .picList }}
-        <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>
-        </a>
+      <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>
+          </a>
         {{ end }}
       </div>
       <img class="tr-svg" src="/images/user-group/list/city-rect1.svg">
@@ -55,7 +67,7 @@
       <div class="left">
         <div class="textBox">
           <div class="title">{{ .name }}</div>
-          <image src="{{ .orgIcon }}" class="orgIcon"></image>
+          <image src="{{ .githubIcon }}" class="orgIcon"></image>
         </div>
         <div class="des"> {{ .description }}</div>
       </div>
@@ -148,7 +160,7 @@
           </div>
           <ol class="des" style="line-height: 32px;">
             <li>1. 站长需要保证所在城市内，每年至少组织一场线下活动（出现疫情等特殊情况外）。</li>
-            <li>2. 如果站长由于某个原因临时、或者长期无法于所在城市组织线下活动，需要向区<a target="_blank" href="{{ .applyLink }}">提交申请</a> 推荐新的长，或求社区推荐新的站长。如果最终无人能组织活动，城市站设置为不活跃状态，直有新的活跃员出现。
+            <li>2. 如果站长由于某个原因临时、或者长期无法于所在城市组织线下活动，需要向社区 <a target="_blank" href="{{ .applyLink }}">提交申请</a> 推荐新的长，或求社区推荐新的站长。如果最终无人能组织活动，城市站设置为不活跃状态，直有新的活跃员出现。
             </li>
           </ol>
         </div>

layouts/user-group/single.html

@@ -1,21 +1,39 @@
 {{ define "main" }}
 
 {{ with .Params.topSection }}
-<section class='topSection div' style='background-image: url("{{ .image }}");'>
+<section class='topSection div pc-topSection' data-bg="{{ .image }},{{ .mobile_image }}" style='background-image: url("{{ .image }}");'>
   <div class="title-div common-layout">
-    <h1 class="title-h1">{{ .title }}</h1>
-    <p class="common-p">{{ .content }}</p>
+    <div class="title">
+      <div class="t1">{{ .kubSphere }}&nbsp;</div>
+      <div class="t1">{{ .committee }}</div>
+    </div>
+    <p class="common-p">{{ .description }}</p>
+  </div>
+</section>
+
+<section class='topSection div m-topSection' style='background-image: url("{{ .mobile_image }}");'>
+  <div class="title-div common-layout">
+    <div class="title">
+      <div class="t1">{{ .kubSphere }}&nbsp;</div>
+      <div class="t1">{{ .committee }}</div>
+    </div>
+    <p class="common-p">{{ .description }}</p>
   </div>
 </section>
 {{ end }}
 
 {{ with .Params.station }}
-<section class="stations div" style="background-image: url(/images/user-group/org/bg.png);">
+<section class="stations div">
   <div class="common-layout">
     <div class="station">
       <div class="left">
         <span class="name_en">{{ .name_en }}</span>
-        <span class="name"> {{ .name }} </span>
+        {{ with .name }}
+        <span class="name"> 
+          <span class="text1">{{ .text1 }}</span>
+          <span class="text2">{{ .text2 }}</span>
+        </span>
+        {{ end }}
 
         {{ range .description }}
         <span class="des">{{ . }}</span>
@@ -101,14 +119,14 @@
               <span class="name">{{ .name }}</span>
               <span class="position">{{ .position }}</span>
               <div class="mobile-bgs">
-                <image class="m-bg" src="{{ .bg }}"></image>
+                <image class="m-bg" src="{{ .image }}"></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>
+              <image class="bg" src="{{ .image }}"></image>
             </div>
         {{ end }}
         </div>
@@ -135,7 +153,7 @@
           <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>
+              <div class="swiper-slide video" style="background-image: url({{ .image }})" data-link="{{ .link }}"></div>
               {{ end }}
             </div>
           </div>
@@ -156,7 +174,7 @@
             <div id="reviewBox">
               {{ range .review }}
               <div class="content">
-                <a href="{{ .link }}" class="text">{{ .text }}</a>
+                <a href="{{ .link }}" class="text" target="_blank">{{ .text }}</a>
                 <span class="des">{{ .description }}</span>
               </div>
               {{ end }}
@@ -243,7 +261,7 @@
   (function () {
     var mSwiper = new Swiper('#mSwiper', {
       autoplay: {
-        running: false,
+        running: true,
         pauseOnMouseEnter: true,
         disableOnInteraction: false,
       },
@@ -257,6 +275,6 @@
         clickable :true,
       },
     });
-  })()
+  })();
 </script>
 {{ end }}