update: layout style

support mobile style

Author: sendya

src/components/chart/RankList.vue

@@ -1,73 +1,77 @@
-<template>
-  <div class="rank">
-    <h4 class="title">{{ title }}</h4>
-    <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>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: "RankList",
-    // ['title', 'list']
-    props: {
-      title: {
-        type: String,
-        default: ''
-      },
-      list: {
-        type: Array,
-        default: null
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-
-    .rank {
-        padding: 0 32px 32px 72px;
-
-        .list {
-            margin: 25px 0 0;
-            padding: 0;
-            list-style: none;
-
-            li {
-                margin-top: 16px;
-
-                span {
-                    color: rgba(0, 0, 0, .65);
-                    font-size: 14px;
-                    line-height: 22px;
-
-                    &:first-child {
-                        background-color: #f5f5f5;
-                        border-radius: 20px;
-                        display: inline-block;
-                        font-size: 12px;
-                        font-weight: 600;
-                        margin-right: 24px;
-                        height: 20px;
-                        line-height: 20px;
-                        width: 20px;
-                        text-align: center;
-                    }
-                    &.active {
-                        background-color: #314659;
-                        color: #fff;
-                    }
-                    &:last-child {
-                        float: right;
-                    }
-                }
-            }
-        }
-    }
-
+<template>
+  <div class="rank">
+    <h4 class="title">{{ title }}</h4>
+    <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>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "RankList",
+    // ['title', 'list']
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+      list: {
+        type: Array,
+        default: null
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+  .rank {
+    padding: 0 32px 32px 72px;
+
+    .list {
+      margin: 25px 0 0;
+      padding: 0;
+      list-style: none;
+
+      li {
+        margin-top: 16px;
+
+        span {
+          color: rgba(0, 0, 0, .65);
+          font-size: 14px;
+          line-height: 22px;
+
+          &:first-child {
+            background-color: #f5f5f5;
+            border-radius: 20px;
+            display: inline-block;
+            font-size: 12px;
+            font-weight: 600;
+            margin-right: 24px;
+            height: 20px;
+            line-height: 20px;
+            width: 20px;
+            text-align: center;
+          }
+          &.active {
+            background-color: #314659;
+            color: #fff;
+          }
+          &:last-child {
+            float: right;
+          }
+        }
+      }
+    }
+  }
+
+  .mobile .rank {
+    padding: 0 32px 32px 32px;
+  }
+
 </style>

src/components/layout/LayoutMain.vue

@@ -1,9 +1,9 @@
 <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
     }