update: layout style

support mobile style

src/components/chart/RankList.vue

@@ -4,8 +4,8 @@
     <ul class="list">
       <li :key="index" v-for="(item, index) in list">
         <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
-        <span >{{ item.name }}</span>
-        <span >{{ item.total }}</span>
+        <span>{{ item.name }}</span>
+        <span>{{ item.total }}</span>
       </li>
     </ul>
   </div>
@@ -70,4 +70,8 @@
     }
   }
 
+  .mobile .rank {
+    padding: 0 32px 32px 32px;
+  }
+
 </style>
\ No newline at end of file

src/components/layout/LayoutMain.vue

 <template>
-  <a-layout class="layout">
+  <a-layout class="layout" :class="device">
 
     <a-drawer 
       v-if="device === 'mobile'"
-      wrapClassName="drawer-sider"
+      :wrapClassName="'drawer-sider ' + theme"
       placement="left"
       @close="() => this.collapsed = false"
       :closable="false"
@@ -93,6 +93,14 @@
     min-height: 100vh;
     overflow-x: hidden;
 
+    &.mobile {
+      .ant-table-wrapper {
+        .ant-table-body {
+          overflow-y: auto;
+        }
+      }
+    }
+
     &.ant-layout-has-sider {
       flex-direction: row;
     }
@@ -156,6 +164,22 @@
 
   // drawer-sider 自定义
   .ant-drawer.drawer-sider {
+    .sider {
+      box-shadow: none;
+    }
+
+    &.dark {
+      .ant-drawer-content {
+        background-color: rgb(0, 21, 41);
+      }
+    }
+    &.light {
+      box-shadow: none;
+      .ant-drawer-content {
+        background-color: #fff;
+      }
+    }
+
     .ant-drawer-body {
       padding: 0
     }

src/components/layout/PageHeader.vue

@@ -176,4 +176,21 @@
       }
     }
   }
+
+  .mobile .page-header {
+
+    .main {
+
+      .row {
+        flex-wrap: wrap;
+      }
+
+      .extra {
+        flex: 1 1 auto;
+        margin-left: 0;
+        min-width: 0;
+        text-align: right;
+      }
+    }
+  }
 </style>
\ No newline at end of file

src/views/dashboard/Workplace.vue

 <template>
   <page-layout :avatar="avatar">
     <div slot="headerContent">
-      <div class="title">{{ timeFix }}，{{ user.name }}，{{ welcome() }}</div>
+      <div class="title">{{ timeFix }}，{{ user.name }}<span class="welcome-text">，{{ welcome() }}</span></div>
       <div>前端工程师 | 蚂蚁金服 - 某某某事业群 - VUE平台</div>
     </div>
     <div slot="extra">
-      <a-row>
-        <a-col :sm="8" :xs="24">
+      <a-row class="more-info">
+        <a-col :span="8">
           <head-info title="项目数" content="56" :bordered="true"/>
         </a-col>
-        <a-col :sm="8" :xs="24">
+        <a-col :span="8">
           <head-info title="团队排名" content="8/24" :bordered="true"/>
         </a-col>
-        <a-col :sm="8" :xs="24">
+        <a-col :span="8">
           <head-info title="项目访问" content="2,223"/>
         </a-col>
       </a-row>
@@ -326,4 +326,18 @@
       }
     }
   }
+
+  .mobile {
+
+    .more-info {
+      border-top: 1px solid #e8e8e8;
+      padding-top: 16px;
+      margin: 16px 0 16px;
+    }
+
+    .content .title .welcome-text {
+      display: none;
+    }
+  }
+
 </style>
\ No newline at end of file