feat: 新版设计工作台界面

src/router/index.ts

@@ -8,58 +8,76 @@ const routes: Array<RouteRecordRaw> = [
     },
     {
         path: '/',
+        name: 'MainFrame',
+        component: () => import(/* webpackChunkName: "main-frame" */ '@/views/main-frame/MainFrame.vue'),
+        children: [
+            {
+                path: '',
+                name: 'Workbench',
+                component: () => import(/* webpackChunkName: "workbench" */ '@/views/workbench/Workbench.vue'),
+            },
+            {
+                path: 'project-list',
+                name: 'ProjectList',
+                component: () => import(/* webpackChunkName: "project-list" */ '@/views/project-list/ProjectList.vue'),
+            },
+            {
+                path: 'ration',
+                name: 'Ration',
+                component: () => import(/* webpackChunkName: "project-list" */ '@/views/ration/Ration.vue'),
+            },
+        ]
+    },
+    /*
+    {
+        path: '/old',
         name: 'Main',
-        component: () => import(/* webpackChunkName: "main" */ '@/views/main/Main.vue'),
+        component: () => import(/!* webpackChunkName: "main" *!/ '@/views/main/Main.vue'),
         children: [
             {
                 path: '',
                 name: 'Dashboard',
-                component: () => import(/* webpackChunkName: "dashboard" */ '@/views/main/dashboard/Dashboard.vue'),
+                component: () => import(/!* webpackChunkName: "dashboard" *!/ '@/views/main/dashboard/Dashboard.vue'),
             },
             {
-                path: '/projects',
+                path: 'projects',
                 name: 'ProjectList',
-                component: () => import(/* webpackChunkName: "projects" */ '@/views/main/project-list/ProjectList.vue'),
+                component: () => import(/!* webpackChunkName: "projects" *!/ '@/views/main/project-list/ProjectList.vue'),
             },
             {
-                path: '/ration',
+                path: 'ration',
                 name: 'Ration',
-                component: () => import(/* webpackChunkName: "ration" */ '@/views/main/ration/Ration.vue'),
+                component: () => import(/!* webpackChunkName: "ration" *!/ '@/views/main/ration/Ration.vue'),
             },
             {
-                path: '/project',
+                path: 'project',
                 name: 'Project',
-                component: () => import(/* webpackChunkName: "project" */ '@/views/project/Project.vue'),
+                component: () => import(/!* webpackChunkName: "project" *!/ '@/views/project/Project.vue'),
                 children: [
                     {
                         path: '',
                         name: 'Overview',
-                        component: () => import(/* webpackChunkName: "overview" */ '@/views/project/overview/Overview.vue'),
+                        component: () => import(/!* webpackChunkName: "overview" *!/ '@/views/project/overview/Overview.vue'),
                     },
                     {
                         path: 'process',
                         name: 'Process',
-                        component: () => import(/* webpackChunkName: "overview" */ '@/views/project/process/Process.vue'),
+                        component: () => import(/!* webpackChunkName: "overview" *!/ '@/views/project/process/Process.vue'),
                     },
                     {
                         path: 'summary',
                         name: 'Summary',
-                        component: () => import(/* webpackChunkName: "overview" */ '@/views/project/summary/Summary.vue'),
+                        component: () => import(/!* webpackChunkName: "overview" *!/ '@/views/project/summary/Summary.vue'),
                     },
                     {
                         path: 'report',
                         name: 'Report',
-                        component: () => import(/* webpackChunkName: "overview" */ '@/views/project/report/Report.vue'),
+                        component: () => import(/!* webpackChunkName: "overview" *!/ '@/views/project/report/Report.vue'),
                     },
                 ]
             }
         ]
-    },
-    {
-        path: '/oh',
-        name: 'MainFrame',
-        component: () => import(/* webpackChunkName: "main-frame" */ '@/views/main-frame/MainFrame.vue')
-    }
+    },*/
 ];
 
 const router = createRouter({

src/styles/_element_plus.scss

@@ -22,7 +22,11 @@
       'base': $info,
     ),
   ),
-  $font-path: 'element-plus/theme-chalk/fonts'
+  $font-path: 'element-plus/theme-chalk/fonts',
+  $sm: 1140px,
+  $md: 1440px,
+  $lg: 1680px,
+  $xl: 1840px,
 );
 
 @import "element-plus/theme-chalk/src/index.scss";

src/styles/_main.scss

@@ -1,17 +1,18 @@
 html {
   height: 100%;
   width: 100%;
-  font-size: 12px;
+  font-size: 14px;
 
   body {
     width: 100%;
     height: 100%;
     font-family: "微软雅黑", "Microsoft YaHei", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial,
-      sans-serif;
+    sans-serif;
     -webkit-font-smoothing: antialiased; /*chrome、safari*/
     -moz-osx-font-smoothing: grayscale; /*firefox*/
     -webkit-text-size-adjust: none;
     line-height: 1.5715;
+    color: #515a6e;
   }
 }
 

src/styles/index.scss

@@ -4,4 +4,4 @@
 @import "animate.css";
 
 // iconfont，新增图标需要更新此url
-@import url("//at.alicdn.com/t/font_2835708_bg21nztdnq5.css");
+@import url("//at.alicdn.com/t/font_2835708_qzi4i5ccjr.css");

src/views/main-frame/MainFrame.vue

@@ -3,7 +3,7 @@ import {onMounted, ref} from "vue";
 </script>
 
 <template>
-  <article class="main-frame">
+  <article class="main-frame-page">
     <header class="header">
       <img src="@/assets/logo.png" class="logo" alt="logo">
       <span class="refresh" title="刷新">
@@ -32,30 +32,39 @@ import {onMounted, ref} from "vue";
     </header>
     <aside class="aside">
       <ul class="menu">
-        <li class="item active">
-          <iconfont class="icon dsk-dashboard-one"/>
-        </li>
-        <li class="item">
-          <iconfont class="icon dsk-city-one"/>
-        </li>
-        <li class="item">
-          <iconfont class="icon dsk-data"/>
-        </li>
-        <li class="item">
+        <router-link custom to="/" v-slot="{ navigate, isExactActive }">
+          <li class="item" @click="navigate" :class="{ 'active': isExactActive }">
+            <iconfont class="icon dsk-dashboard-one"/>
+          </li>
+        </router-link>
+
+        <router-link custom to="/project-list" v-slot="{ navigate, isExactActive }">
+          <li class="item" @click="navigate" :class="{ 'active': isExactActive }">
+            <iconfont class="icon dsk-city-one"/>
+          </li>
+        </router-link>
+        <router-link custom to="/ration" v-slot="{ navigate, isExactActive }">
+          <li class="item" @click="navigate" :class="{ 'active': isExactActive }">
+            <iconfont class="icon dsk-data"/>
+          </li>
+        </router-link>
+        <li class="item disabled">
           <iconfont class="icon dsk-more-app"/>
         </li>
-        <li class="item">
+        <li class="item disabled">
           <iconfont class="icon dsk-tool"/>
         </li>
-        <li class="item">
+        <li class="item disabled">
           <iconfont class="icon dsk-doc-detail"/>
         </li>
-        <li class="item">
+        <li class="item disabled">
           <iconfont class="icon dsk-application-one"/>
         </li>
       </ul>
     </aside>
-    <main class="main"></main>
+    <main class="main">
+      <router-view></router-view>
+    </main>
   </article>
 </template>
 

src/views/main-frame/style.scss

@@ -1,4 +1,4 @@
-.main-frame {
+.main-frame-page {
   @apply w-full h-full;
   min-width: $small-screen;
 
@@ -81,7 +81,7 @@
         @apply flex justify-center items-center relative cursor-pointer;
         height: 52px;
         color: #515a6e;
-        transition: color .1s;
+        transition: all .2s ease-in-out;
 
         &:hover {
           color: #2d8cf0;
@@ -103,7 +103,34 @@
           }
         }
 
+        &.disabled {
+          color: #ccc;
+          cursor: not-allowed;
+        }
+      }
+    }
 
+    @media (max-width: $small-screen) {
+      @apply w-full;
+      height: 50px;
+      min-height: auto;
+      top: 64px;
+      padding-top: 0;
+      .menu {
+        @apply flex justify-center h-full;
+        .item {
+          width: 64px;
+
+          &.active {
+            &::after {
+              bottom: 2px;
+              top: auto;
+              left: 0;
+              width: 100%;
+              height: 2px;
+            }
+          }
+        }
       }
     }
   }
@@ -112,5 +139,10 @@
     @apply min-h-full;
     background: #f5f7f9;
     padding-left: 80px;
+    padding-top: 64px;
+    @media (max-width: $small-screen) {
+      padding-left: 0;
+      padding-top: 114px;
+    }
   }
 }

src/views/project/overview/Overview.vue

@@ -3,7 +3,9 @@ import { onMounted, reactive, ref } from "vue";
 </script>
 
 <template>
-  <article class="overview-page">项目概况</article>
+  <article class="project-list">
+    项目列表
+  </article>
 </template>
 
 <style lang="scss" src="./style.scss" scoped></style>

src/views/project-list/style.scss

@@ -0,0 +1,2 @@
+.project-list {
+}

src/views/project/Project.vue

@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-</script>
-
-<template>
-  <article class="project-page">
-    <header class="header">
-      <span class="project-name">市妇幼保健医院新址配套市政道路工程</span>
-      <ul class="nav">
-        <router-link custom to="/project" v-slot="{ navigate, isExactActive }">
-          <li
-            class="item overview"
-            @click="navigate"
-            :class="{ 'exact-active': isExactActive }"
-          >
-            项目概况
-          </li>
-        </router-link>
-        <router-link
-          custom
-          to="/project/process"
-          v-slot="{ navigate, isExactActive }"
-        >
-          <li
-            class="item process"
-            @click="navigate"
-            :class="{ 'exact-active': isExactActive }"
-          >
-            项目流程
-          </li>
-        </router-link>
-        <router-link
-          custom
-          to="/project/summary"
-          v-slot="{ navigate, isExactActive }"
-        >
-          <li
-            class="item summary"
-            @click="navigate"
-            :class="{ 'exact-active': isExactActive }"
-          >
-            项目流汇总
-          </li>
-        </router-link>
-        <router-link
-          custom
-          to="/project/report"
-          v-slot="{ navigate, isExactActive }"
-        >
-          <li
-            class="item report"
-            @click="navigate"
-            :class="{ 'exact-active': isExactActive }"
-          >
-            报表
-          </li>
-        </router-link>
-      </ul>
-    </header>
-    <router-view></router-view>
-  </article>
-</template>
-
-<style lang="scss" src="./style.scss" scoped></style>

src/views/project/process/Process.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
-</script>
-
-<template>
-  <article class="process-page">项目流程</article>
-</template>
-
-<style lang="scss" src="./style.scss" scoped></style>

src/views/project/style.scss

@@ -1,29 +0,0 @@
-.project-page {
-    .header {
-        @apply flex items-center;
-        height: 50px;
-        padding: 0 10px;
-        border-bottom: 1px solid $border-gray;
-        background-color: #fff;
-
-        .project-name {
-            @apply flex-1 font-bold;
-            font-size: 20px;
-        }
-        .nav {
-            @apply flex h-full items-center;
-            font-size: 18px;
-
-            .item {
-                @apply h-full cursor-pointer;
-                line-height: 50px;
-                margin: 0 10px;
-
-                &.exact-active {
-                    border-bottom: 3px solid #409eff;
-                    color: #409eff;
-                }
-            }
-        }
-    }
-}

src/views/project/summary/Summary.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
-</script>
-
-<template>
-  <article class="report-page">项目流汇总</article>
-</template>
-
-<style lang="scss" src="./style.scss" scoped></style>

src/views/project/report/Report.vue

@@ -3,7 +3,9 @@ import { onMounted, reactive, ref } from "vue";
 </script>
 
 <template>
-  <article class="report-page">报表</article>
+  <article class="ration">
+    定额库
+  </article>
 </template>
 
 <style lang="scss" src="./style.scss" scoped></style>

src/views/ration/style.scss

@@ -0,0 +1,2 @@
+.ration {
+}

src/views/workbench/Workbench.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import {onMounted, reactive, ref} from "vue";
+</script>
+
+<template>
+  <article class="workbench-page">
+    <header class="header">
+      <h1 class="title">工作台</h1>
+      <section class="content">
+        <el-avatar :size="64">张三</el-avatar>
+        <div class="greeting">
+          <h2 class="hello">早安，张三，开始您一天的工作吧！</h2>
+          <p class="weather">今日阴转小雨，22℃ - 32℃，出门记得带伞哦。</p>
+        </div>
+        <ul class="summary">
+          <li class="item project-count">
+            <span class="text"><img src="@/assets/project-icon.svg" class="icon" alt="">项目数</span>
+            <span class="number">12</span>
+          </li>
+          <li class="item todo">
+            <span class="text"><img src="@/assets/todo-icon.svg" class="icon" alt="">待办项</span>
+            <span class="number">4/10</span>
+          </li>
+          <li class="item enterprise">
+            <span class="text"><img src="@/assets/enterprise-icon.svg" class="icon" alt="">企业数</span>
+            <span class="number">12</span>
+          </li>
+        </ul>
+      </section>
+    </header>
+    <main class="row main">
+      <div class="col left">
+        <!-- 我的项目 -->
+        <el-card shadow="never" class="my-project">
+          <template #header>
+            <div class="card-header">
+              <span class="text">
+                <img src="@/assets/project-icon.svg" alt="" class="icon">
+                我的项目
+              </span>
+              <router-link class="link" to="/project-list">全部项目</router-link>
+            </div>
+          </template>
+          <div class="card-body">
+            <ul class="list">
+              <li class="item" v-for="item in 6" :key="item">
+                <div class="wrap">
+                  <h3 class="name">市妇幼保健医院道路工程</h3>
+                  <p class="desc">香洲区某某大道</p>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+        <!-- 动态 -->
+        <el-card shadow="never" class="dynamic">
+          <template #header>
+            <div class="card-header">
+              <span class="text">
+                <img src="@/assets/comment-icon.svg" alt="" class="icon">
+                动态
+              </span>
+            </div>
+          </template>
+          <div class="card-body">
+            <ul class="list">
+              <li class="item" v-for="item in 6" :key="item">
+                <el-avatar :size="40">李四</el-avatar>
+                <div class="wrap">
+                  <p class="content">
+                    <strong class="name">李四</strong>
+                    <span class="do">编辑了</span>
+                    <router-link to="/project" class="link">市妇幼保健医院道路工程</router-link>
+                  </p>
+                  <time class="time">2019-06-01 11:35:20</time>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </div>
+      <div class="col right">
+        <!-- 快捷操作 -->
+        <el-card shadow="never" class="shortcut">
+          <template #header>
+            <div class="card-header">
+              <span class="text">
+                <img src="@/assets/like-icon.svg" alt="" class="icon">
+                快捷操作
+              </span>
+            </div>
+          </template>
+          <div class="card-body">
+            <ul class="list">
+              <li class="item">
+                <iconfont class="icon dsk-dashboard-one" style="color: rgb(82, 196, 26)"/>
+                <span class="text">主控台</span>
+              </li>
+              <li class="item">
+                <iconfont class="icon dsk-me" style="color: rgb(24, 144, 255)"/>
+                <span class="text">个人中心</span>
+              </li>
+              <li class="item">
+                <iconfont class="icon dsk-config" style="color: rgb(250, 173, 20)"/>
+                <span class="text">设置</span>
+              </li>
+              <li class="item">
+                <iconfont class="icon dsk-robot-two" style="color: rgb(114, 46, 209)"/>
+                <span class="text">定额库</span>
+              </li>
+              <li class="item">
+                <iconfont class="icon dsk-doc-detail" style="color: rgb(19, 194, 194)"/>
+                <span class="text">消息</span>
+              </li>
+              <li class="item">
+                <iconfont class="icon dsk-search" style="color: rgb(235, 47, 150)"/>
+                <span class="text">搜索</span>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+        <!-- 待办事项 -->
+        <el-card shadow="never" class="todo">
+          <template #header>
+            <div class="card-header">
+              <span class="text">
+                <img src="@/assets/todo-icon.svg" alt="" class="icon">
+                待办事项
+              </span>
+            </div>
+          </template>
+          <div class="card-body">
+            <ul class="list">
+              <li class="item head">
+                <span class="task">任务</span>
+                <span class="deadline">截止时间</span>
+              </li>
+              <li class="item" v-for="item in 5" :key="item">
+                <span class="task">某某工程-审批流程{{ item }}</span>
+                <span class="deadline">2020-07-01</span>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+        <!-- 小组成员 -->
+        <el-card shadow="never" class="member">
+          <template #header>
+            <div class="card-header">
+              <span class="text">
+                <img src="@/assets/enterprise-icon.svg" alt="" class="icon">
+                成员
+              </span>
+            </div>
+          </template>
+          <div class="card-body">
+            <ul class="list">
+              <li class="item">
+                <el-avatar :size="32">张三</el-avatar>
+                <p class="desc">
+                  <strong class="name">张三</strong>
+                  <span class="position">造价师</span>
+                </p>
+                <el-tag type="success" size="medium">在线</el-tag>
+              </li>
+              <li class="item">
+                <el-avatar :size="32">李四</el-avatar>
+                <p class="desc">
+                  <strong class="name">李四</strong>
+                  <span class="position">造价师</span>
+                </p>
+                <el-tag type="danger" size="medium">离线</el-tag>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+
+      </div>
+    </main>
+  </article>
+</template>
+
+<style lang="scss" src="./style.scss" scoped></style>

src/views/workbench/style.scss

@@ -0,0 +1,380 @@
+.workbench-page {
+  .header {
+    padding: 16px 32px;
+    border-bottom: 1px solid #e8eaec;
+    background: #fff;
+
+    .title {
+      font-size: 20px;
+      font-weight: 500;
+      color: #17233d;
+      margin-bottom: 16px;
+    }
+
+    .content {
+      @apply flex;
+      .el-avatar {
+        margin-right: 16px;
+      }
+
+      .greeting {
+        @apply flex-1;
+        .hello {
+          font-size: 20px;
+          font-weight: 700;
+          margin-bottom: 12px;
+        }
+
+        .weather {
+          color: #808695;
+        }
+      }
+
+      .summary {
+        @apply flex;
+        margin-top: 8px;
+
+        .item {
+          padding-left: 6px;
+          padding-right: 6px;
+
+          .text {
+            @apply flex;
+            color: #808695;
+
+            .icon {
+              width: 20px;
+              height: 22px;
+              margin-right: 4px;
+            }
+          }
+
+          .number {
+            @apply block text-center;
+            font-size: 19px;
+            line-height: 1.5;
+          }
+        }
+      }
+    }
+  }
+
+  .row {
+    @apply flex flex-row w-full;
+    padding: 16px 24px 60px;
+
+    @media (max-width: $small-screen) {
+      @apply flex-col;
+
+      .col {
+        &.left {
+          flex: 24;
+          margin-right: 0 !important;
+        }
+
+        &.right {
+          flex: 24;
+          margin-left: 0 !important;
+        }
+      }
+    }
+
+    .col {
+      ::v-deep .el-card {
+        border: none;
+
+        .el-card__header {
+          border-bottom: 1px solid #e8eaec;
+          padding: 14px 16px;
+
+          .card-header {
+            @apply flex justify-between;
+            .text {
+              @apply flex items-center;
+              .icon {
+                @apply inline;
+                width: 20px;
+                height: 22px;
+                margin-right: 8px;
+              }
+            }
+
+            .link {
+              color: #2d8cf0;
+
+              &:hover {
+                color: #57a3f3;
+              }
+            }
+          }
+        }
+
+        .el-card__body {
+          .card-body {
+          }
+        }
+
+        &.dynamic, &.todo, &.member {
+          margin-top: 16px;
+
+          .el-card__body {
+            padding: 16px;
+          }
+        }
+
+        @media (max-width: $small-screen) {
+          &.shortcut {
+            margin-top: 16px;
+          }
+        }
+
+        &.my-project {
+          .el-card__body {
+            padding: 6px;
+
+            .card-body {
+              .list {
+                .item {
+                  @apply inline-block w-1/3 cursor-pointer;
+                  padding: 6px;
+                  height: 112px;
+
+                  &:hover {
+                    box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
+                  }
+
+                  .wrap {
+                    @apply relative h-full;
+                    border-radius: 3px;
+                    background: #b6e8ff no-repeat center;
+                    background-size: cover;
+
+                    &::before {
+                      @apply absolute block top-0 left-0 right-0 bottom-0 z-0;
+                      content: "";
+                      border-radius: 3px;
+                      z-index: 0;
+                    }
+
+
+                    .name {
+                      @apply relative;
+                      color: #fff;
+                      font-weight: 600;
+                      padding: 4px 0 0 8px;
+                      font-size: 15px;
+                    }
+
+                    .desc {
+                      @apply relative;
+                      font-weight: 400;
+                      font-size: 12px;
+                      color: #fff;
+                      padding: 4px 0 0 8px;
+                      margin-right: 45px;
+                    }
+                  }
+
+                  &:nth-child(1) {
+                    .wrap {
+                      background-image: url("@/assets/project-figure1.png");
+                    }
+                  }
+
+                  &:nth-child(2) {
+                    .wrap {
+                      background-image: url("@/assets/project-figure2.png");
+                    }
+                  }
+
+                  &:nth-child(3) {
+                    .wrap {
+                      background-image: url("@/assets/project-figure3.png");
+                    }
+                  }
+
+                  &:nth-child(4) {
+                    .wrap {
+                      background-image: url("@/assets/project-figure4.png");
+                    }
+                  }
+
+                  &:nth-child(5) {
+                    .wrap {
+                      background-image: url("@/assets/project-figure5.png");
+                    }
+                  }
+
+                  &:nth-child(6) {
+                    .wrap {
+                      background-image: url("@/assets/project-figure6.png");
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        &.dynamic {
+          .card-body {
+            .list {
+              .item {
+                @apply flex;
+                border-bottom: 1px solid #e8eaec;
+                padding: 20px 0;
+
+                &:last-child {
+                  border-bottom: none;
+                }
+
+                .el-avatar {
+                  margin: 0 30px;
+                }
+
+                .wrap {
+                  .content {
+                    .name {
+                      margin-right: 5px;
+                    }
+
+                    .do {
+                      margin-right: 5px;
+                    }
+
+                    .link {
+                      color: #2d8cf0;
+
+                      &:hover {
+                        color: #57a3f3;
+                      }
+                    }
+                  }
+
+                  .time {
+                    font-size: 12px;
+                    color: rgb(128, 134, 149);
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        &.shortcut {
+          .card-body {
+            .list {
+              .item {
+                @apply inline-flex flex-col items-center w-1/3 cursor-pointer;
+                margin-bottom: 16px;
+
+                &:hover {
+                  color: #2d8cf0;
+                }
+
+                .icon {
+                  font-size: 24px;
+                }
+
+                .text {
+                  margin-top: 8px;
+                }
+
+                &:nth-child(4),
+                &:nth-child(5),
+                &:nth-child(6) {
+                  margin-bottom: 0;
+                }
+
+              }
+            }
+          }
+        }
+
+        &.todo {
+          .el-card__body {
+            padding: 10px;
+
+            .card-body {
+              .list {
+                .item {
+                  height: 46px;
+                  line-height: 46px;
+                  padding: 0 20px;
+                  border-bottom: 1px solid #e8eaec;
+
+                  &:last-child {
+                    border-bottom: none;
+                  }
+
+                  .task {
+                    @apply inline-block w-3/4;
+                  }
+
+                  .deadline {
+                    @apply inline-block w-1/4;
+                    font-size: 12px;
+                    color: #808695;
+                  }
+
+
+                  &.head {
+                    font-weight: 600;
+
+                    .task, .deadline {
+                      color: #303133 !important;
+                      font-size: 14px !important;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        &.member {
+          .card-body {
+            .list {
+              .item {
+                @apply flex items-center;
+                margin-bottom: 16px;
+
+                .el-avatar {
+                  margin: 0 20px;
+                }
+
+                .desc {
+                  @apply flex flex-col flex-1;
+                  .name {
+
+                  }
+
+                  .position {
+                    font-size: 12px;
+                    color: rgb(128, 134, 149);
+                  }
+                }
+
+                .el-tag {
+
+                }
+              }
+            }
+          }
+        }
+      }
+
+      &.left {
+        flex: 16;
+        margin-right: 12px;
+      }
+
+      &.right {
+        flex: 8;
+        margin-left: 12px;
+      }
+
+
+    }
+  }
+}