From 14f6aebfe1fccd88d5fb4c7e8a05c0772426192c Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Thu, 2 Jul 2020 11:21:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20style=20issues=20with=20side=20menu=20co?=
 =?UTF-8?q?mponents=20and=20drawer=20components;=20:bug:=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=EF=BC=9A=E4=BE=A7=E8=BE=B9=E8=8F=9C=E5=8D=95=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=92=8C=E6=8A=BD=E5=B1=89=E7=BB=84=E4=BB=B6=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/SideMenu.vue   | 7 ++++---
 src/components/setting/Setting.vue | 8 ++++----
 src/components/tool/Drawer.vue     | 7 ++++---
 src/layouts/header/AdminHeader.vue | 1 -
 src/utils/themeUtil.js             | 2 ++
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/menu/SideMenu.vue b/src/components/menu/SideMenu.vue
index f779f84..010cbf0 100644
--- a/src/components/menu/SideMenu.vue
+++ b/src/components/menu/SideMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-layout-sider :theme="theme" :class="['side', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
+  <a-layout-sider :theme="theme" :class="['side-menu', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
     <div :class="['logo', theme]">
       <router-link to="/dashboard/workplace">
         <img src="@/assets/img/logo.png">
@@ -52,9 +52,10 @@ export default {
 
 <style lang="less" scoped>
   .shadow{
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
   }
-  .side{
+  .side-menu{
+    min-height: 100%;
     z-index: 10;
     .logo{
       height: 64px;
diff --git a/src/components/setting/Setting.vue b/src/components/setting/Setting.vue
index ee15947..97f0d8b 100644
--- a/src/components/setting/Setting.vue
+++ b/src/components/setting/Setting.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-layout-sider class="side" width="300">
+  <div class="side-setting">
     <setting-item :title="$t('theme.title')">
       <img-checkbox-group @change="values => setTheme(values[0])">
         <img-checkbox :title="$t('theme.dark')" img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" value="dark"/>
@@ -76,7 +76,7 @@
       </a-list>
     </setting-item>
     <a-button id="copyBtn" data-clipboard-text="Sorry, you have copied nothing O(∩_∩)O~" @click="copyCode" style="width: 100%" icon="copy" >{{$t('copy')}}</a-button>
-  </a-layout-sider>
+  </div>
 </template>
 
 <script>
@@ -139,9 +139,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .side{
+  .side-setting{
+    min-height: 100%;
     background-color: #fff;
-    height: 100%;
     padding: 24px;
     font-size: 14px;
     line-height: 1.5;
diff --git a/src/components/tool/Drawer.vue b/src/components/tool/Drawer.vue
index a8e34cf..ff7432a 100644
--- a/src/components/tool/Drawer.vue
+++ b/src/components/tool/Drawer.vue
@@ -2,7 +2,7 @@
   <div >
     <div :class="['mask', openDrawer ? 'open' : 'close']" @click="close"></div>
     <div :class="['drawer', placement, openDrawer ? 'open' : 'close']">
-      <div ref="drawer" class="content">
+      <div ref="drawer" class="content beauty-scroll">
         <slot></slot>
       </div>
       <div v-if="showHandler" :class="['handler-container', placement, openDrawer ? 'open' : 'close']" ref="handler" @click="handle">
@@ -88,8 +88,8 @@ export default {
   }
   .drawer{
     position: fixed;
-    height: 100%;
     transition: all 0.5s;
+    height: 100vh;
     z-index: 100;
     &.left{
       left: 0px;
@@ -119,7 +119,8 @@ export default {
   }
   .content{
     display: inline-block;
-    height: 100%;
+    height: 100vh;
+    overflow-y: auto;
   }
   .handler-container{
     position: absolute;
diff --git a/src/layouts/header/AdminHeader.vue b/src/layouts/header/AdminHeader.vue
index 6156242..a933463 100644
--- a/src/layouts/header/AdminHeader.vue
+++ b/src/layouts/header/AdminHeader.vue
@@ -96,7 +96,6 @@ export default {
       background: #fff;
     }
     &.dark{
-      background: #001529;
       .trigger{
         color: white;
       }
diff --git a/src/utils/themeUtil.js b/src/utils/themeUtil.js
index 403b7cb..677d289 100644
--- a/src/utils/themeUtil.js
+++ b/src/utils/themeUtil.js
@@ -23,6 +23,8 @@ module.exports = {
   },
   changeSelector (selector) {
     switch (selector) {
+      case '.ant-layout-sider':
+        return '.ant-layout-sider-dark'
       case '.ant-calendar-today .ant-calendar-date':
         return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
       case '.ant-btn:focus,.ant-btn:hover':