fix: some style problem #5

src/components/layout/GlobalHeader.vue

@@ -2,7 +2,7 @@
   <a-layout-header class="gloabl-header">
     <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
     <div style="float: right">
-        <header-search class="header-item"/>
+        <header-search class="header-item" />
         <a-tooltip class="header-item" title="帮助文档" placement="bottom" >
           <a>
             <a-icon type="question-circle-o" />
@@ -50,7 +50,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
   .trigger {
     font-size: 20px;
     line-height: 64px;
@@ -64,14 +64,14 @@ export default {
   }
 
   .header-item{
-    margin: 0 12px;
+    padding: 0 12px;
     display: inline-block;
     height: 100%;
     cursor: pointer;
-  }
+    i{
-  .header-item i{
+      font-size: 16px;
-    font-size: 16px;
+      color: rgba(0,0,0,.65);
-    color: rgba(0,0,0,.65);
+    }
   }
   .gloabl-header{
     background: #fff;

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,28 +66,32 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
-  .logo{
+  .sider{
-    height: 64px;
+    z-index: 10;
-    position: relative;
+    box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    line-height: 64px;
+    .logo{
-    padding-left: 24px;
+      height: 64px;
-    -webkit-transition: all .3s;
+      position: relative;
-    transition: all .3s;
+      line-height: 64px;
-    background: #002140;
+      padding-left: 24px;
-    overflow: hidden;
+      -webkit-transition: all .3s;
-  }
+      transition: all .3s;
-  .logo h1{
+      background: #002140;
-    color: #fff;
+      overflow: hidden;
-    font-size: 20px;
+      h1{
-    margin: 0 0 0 12px;
+        color: #fff;
-    font-family: "Myriad Pro","Helvetica Neue",Arial,Helvetica,sans-serif;
+        font-size: 20px;
-    font-weight: 600;
+        margin: 0 0 0 12px;
-    display: inline-block;
+        font-family: "Myriad Pro","Helvetica Neue",Arial,Helvetica,sans-serif;
-  }
+        font-weight: 600;
-  .logo img{
+        display: inline-block;
-    width: 32px;
+      }
-    display: inline-block;
+      img{
-    vertical-align: middle;
+        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">
+    <span style="cursor: pointer">
-      <a-avatar style="vertical-align: middle;" size="small" shape="circle" :src="currUser.avatar"/>
+      <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>