fix: app-header box-shadow show up

lbwa · Oct 4, 2018 · 5bade8e · 5bade8e
1 parent 6cb2505
commit 5bade8e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/src/components/App/Header.vue b/src/components/App/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-header class="header">
+  <el-header class="header" :height="height">
     <i
       class="el-icon-menu header__icon"
       @click="toggleAside"
@@ -36,6 +36,13 @@
 <script>
 import HeaderPopover from 'COMPONENTS/App/HeaderPopover'
 export default {
+  props: {
+    height: {
+      type: String,
+      default: '64px'
+    }
+  },
+
   methods: {
     toggleAside () {
       this.$emit('toggleAside')
@@ -49,11 +56,14 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+@import '~STYLE/color/background.sass'
 @import '~STYLE/color/hover.sass'
 
 .header
   padding: 0 24px 0 0
-  overflow: hidden
+  position: relative // for box-shadow
+  background-color: $background-lightest
+  box-shadow: 0 1px 4px rgba(0,21,41,.08)
 
   &__icon
     padding: 0 24px

diff --git a/src/layout/Admin.vue b/src/layout/Admin.vue
@@ -65,14 +65,18 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+@import '~STYLE/color/background.sass'
+@import '~STYLE/color/hover.sass'
+
 .admin
   &__layout
     min-height: 100vh
+    background-color: $background-light
 
 .footer
   &__layout
     padding: 20px 0
-    background-color: #f0f2f5
+    background-color: $background-light
     text-align: center
 
   &__font
@@ -88,12 +92,12 @@ export default {
   font-weight: bold
 
   &:hover
-    color: #3273dc
+    color: $hover-link
 
-.main__wrapper
-  min-height: calc(100vh - 60px - 100px)
-  padding: 24px 24px 0 24px
-  background-color: #f0f2f5
+.main
+  &__wrapper
+    min-height: calc(100vh - 64px - 100px)
+    padding: 24px 24px 0 24px
 
 .fade
   &-enter, &-leave-to