fix: some style problems #5

src/components/dashboard/WorkPlace.vue

@@ -170,14 +170,13 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
   .content {
     position: relative;
     top: 4px;
     flex: 1 1 auto;
     color: rgba(0, 0, 0, 0.45);
     line-height: 22px;
-    margin-left: 24px;
     .title {
       font-size: 20px;
       line-height: 28px;

src/components/layout/GlobalHeader.vue

@@ -75,6 +75,7 @@ export default {
     display: inline-block;
     height: 100%;
     cursor: pointer;
+    vertical-align: middle;
     i{
       font-size: 16px;
       color: rgba(0,0,0,.65);

src/components/layout/HeaderNotice.vue

@@ -31,7 +31,7 @@
         </a-tabs>
       </a-spin>
     </template>
-    <span @click="fetchNotice">
+    <span @click="fetchNotice" class="header-notice">
       <a-badge count="12">
         <a-icon style="font-size: 16px; padding: 4px" type="bell" />
       </a-badge>
@@ -75,6 +75,14 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less">
-
+  .header-notice{
+    display: inline-block;
+    transition: all 0.3s;
+    & :global{
+      span {
+        vertical-align: initial;
+      }
+    }
+  }
 </style>

src/components/page/PageHeader.vue

@@ -69,7 +69,7 @@ export default {
       }
       .avatar {
         flex: 0 1 72px;
-        margin-bottom: 8px;
+        margin:0 24px 8px 0;
         & > span {
           border-radius: 72px;
           display: block;