header

src/layout/components/header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="header">
+  <div :class="`header ${showHeader ? '' : 'mt4'}`">
     <div class="topDiv">
       <div class="container">
         <lang-select />
@@ -89,6 +89,10 @@ export default class extends Vue {
 .header {
   background: #fff;
   .topDiv {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 999;
     height: 4rem;
     line-height: 4rem;
     font-size: 1.2rem;
@@ -137,74 +141,80 @@ export default class extends Vue {
       }
     }
   }
-  .logoDiv {
-    padding: 3rem 0 1rem 0;
-    .logoTitle {
-      height: 4rem;
-      line-height: 4rem;
-      font-size: 2.4rem;
-      margin-right: 1rem;
-      display: inline-block;
-      vertical-align: middle;
-    }
-    .searchDiv {
-      height: 4rem;
-      line-height: 4rem;
-      width: 55rem;
-      font-size: 1.4rem;
-      display: inline-block;
-      border-radius: 2rem;
-      border: 1px solid #fd5522;
-      overflow: hidden;
-      vertical-align: middle;
-      .searchFl {
-        width: 8rem;
-        color: #fd5522;
-        height: 100%;
-      }
-      .line {
+  > .container {
+    margin-top: 4rem;
+    .logoDiv {
+      padding: 3rem 0 1rem 0;
+      .logoTitle {
+        height: 4rem;
+        line-height: 4rem;
+        font-size: 2.4rem;
+        margin-right: 1rem;
         display: inline-block;
-        height: 1.8rem;
-        width: 0.1rem;
-        background: #fd5522;
         vertical-align: middle;
       }
-      .el-icon-search {
-        color: #fd5522;
-      }
-      .input-with-select {
-        width: 38.9rem;
-        height: 100%;
-      }
-      .searchBtn {
-        width: 8rem;
-        height: 100%;
-        font-size: 1.6rem;
-        background: #fd5522;
-        color: #fff;
-        border: 0;
-        border-radius: 0;
+      .searchDiv {
+        height: 4rem;
+        line-height: 4rem;
+        width: 55rem;
+        font-size: 1.4rem;
+        display: inline-block;
+        border-radius: 2rem;
+        border: 1px solid #fd5522;
+        overflow: hidden;
+        vertical-align: middle;
+        .searchFl {
+          width: 8rem;
+          color: #fd5522;
+          height: 100%;
+        }
+        .line {
+          display: inline-block;
+          height: 1.8rem;
+          width: 0.1rem;
+          background: #fd5522;
+          vertical-align: middle;
+        }
+        .el-icon-search {
+          color: #fd5522;
+        }
+        .input-with-select {
+          width: 38.9rem;
+          height: 100%;
+        }
+        .searchBtn {
+          width: 8rem;
+          height: 100%;
+          font-size: 1.6rem;
+          background: #fd5522;
+          color: #fff;
+          border: 0;
+          border-radius: 0;
+        }
       }
     }
-  }
-  .navs {
-    padding: 1rem 0;
-    .nav {
-      height: 5rem;
-      line-height: 5rem;
-      font-size: 1.6rem;
-      color: #333;
-      margin-right: 5rem;
-      border-bottom: 0.2rem solid #fff;
-      display: inline-block;
-      &:hover,
-      &.router-link-active {
-        border-bottom: 0.2rem solid #fd5522;
-        color: #fd5522;
+    .navs {
+      padding: 1rem 0;
+      .nav {
+        height: 5rem;
+        line-height: 5rem;
+        font-size: 1.6rem;
+        color: #333;
+        margin-right: 5rem;
+        border-bottom: 0.2rem solid #fff;
+        display: inline-block;
+        &:hover,
+        &.router-link-active {
+          border-bottom: 0.2rem solid #fd5522;
+          color: #fd5522;
+        }
       }
     }
   }
 }
+.mt4 {
+  margin-top: 4rem;
+}
 </style>
 <style lang="scss">
 .searchDiv {