fix: some style problem #5

src/components/layout/GlobalHeader.vue

@@ -50,7 +50,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
   .trigger {
     font-size: 20px;
     line-height: 64px;
@@ -64,15 +64,15 @@ export default {
   }
 
   .header-item{
-    margin: 0 12px;
+    padding: 0 12px;
     display: inline-block;
     height: 100%;
     cursor: pointer;
-  }
-  .header-item i{
+    i{
       font-size: 16px;
       color: rgba(0,0,0,.65);
     }
+  }
   .gloabl-header{
     background: #fff;
     padding: 0 12px 0 0;

src/components/layout/GlobalLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <a-layout>
-    <a-layout-sider width="256px" style="z-index: 10" collapsible v-model="collapsed" :trigger="null">
+    <a-layout-sider class="sider" width="256px" collapsible v-model="collapsed" :trigger="null">
       <div class="logo">
         <a href="/">
           <img src="static/img/vue-antd-logo.png">
@@ -66,7 +66,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+  .sider{
+    z-index: 10;
+    box-shadow: 2px 0 6px rgba(0,21,41,.35);
     .logo{
       height: 64px;
       position: relative;
@@ -76,8 +79,7 @@ export default {
       transition: all .3s;
       background: #002140;
       overflow: hidden;
-  }
-  .logo h1{
+      h1{
         color: #fff;
         font-size: 20px;
         margin: 0 0 0 12px;
@@ -85,9 +87,11 @@ export default {
         font-weight: 600;
         display: inline-block;
       }
-  .logo img{
+      img{
         width: 32px;
         display: inline-block;
         vertical-align: middle;
       }
+    }
+  }
 </style>

src/components/layout/HeaderSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="header-item">
+  <span class="">
     <a-icon type="search" style="font-size: 16px; cursor: pointer;" @click="enterSearchMode"/>
     <a-auto-complete
       ref="input"
@@ -69,7 +69,4 @@ export default {
   .fade-leave{
     width: 0px;
   }
-  .header-item{
-    margin: 0 12px;
-  }
 </style>

src/components/layout/HeaderlAvatar.vue

@@ -1,7 +1,7 @@
 <template>
   <a-dropdown style="display: inline-block; height: 100%" >
-    <span style="vertical-align: middle; cursor: pointer">
-      <a-avatar style="vertical-align: middle;" size="small" shape="circle" :src="currUser.avatar"/>
+    <span style="cursor: pointer">
+      <a-avatar class="avatar" size="small" shape="circle" :src="currUser.avatar"/>
       <span>{{currUser.name}}</span>
     </span>
     <a-menu style="width: 150px" slot="overlay">
@@ -44,6 +44,11 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="less" scoped>
+  .avatar{
+    margin: 20px 4px 20px 0;
+    color: #1890ff;
+    background: hsla(0,0%,100%,.85);
+    vertical-align: middle;
+  }
 </style>