顶部导航栏现在是固定的

顶部导航栏增加毛玻璃效果
修复修改顶部导航栏导致的某些地方错位的问题

src/components/Github/index.vue

@@ -1,6 +1,6 @@
 <template>
   <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
-    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 50px; border: 0; right: 0;"
+    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 0px; border: 0; right: 0;"
       aria-hidden="true">
       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
       <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"

src/views/dashboard/admin/index.vue

@@ -98,7 +98,6 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .dashboard-editor-container {
-    margin: 30px;
     .btn-group {
         margin-bottom: 60px;
     }

src/views/dashboard/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dashboard-container">
+  <div class="dashboard-container" style="padding:20px;">
     <component :is="currentRole"></component>
   </div>
 </template>

src/views/layout/AppMain.vue

@@ -1,5 +1,5 @@
 <template>
-	<section class="app-main" style="min-height: 100%">
+	<section class="app-main" style="min-height: 100%;margin-top:50px;">
 		<transition name="fade" mode="out-in">
 			<router-view :key="key"></router-view>
 		</transition>

src/views/layout/Navbar.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="tab-container">
     <el-menu class="navbar" mode="horizontal">
       <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
       <levelbar></levelbar>
@@ -25,6 +26,7 @@
         </el-dropdown-menu>
       </el-dropdown>
     </el-menu>
+  </div>
 </template>
 
 <script>
@@ -70,10 +72,31 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+  .tab-container {
+      position:fixed;
+      top:0;
+      z-index:102;
+      width:100%;
+      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+      &::before{
+        content:'';
+        display: block;
+        width:100%;
+        z-index:-1;
+        filter:blur(10px);
+        background: rgba(238,241,246,0.8);
+        height:50px;
+        position:fixed;
+        left:0;
+        right:0;
+        top:0;
+        bottom:0;
+      }
     .navbar {
       height: 50px;
       line-height: 50px;
       border-radius: 0px !important;
+      background-color: rgba(238,241,246,0.8);
       .hamburger-container {
         line-height: 58px;
         height: 50px;
@@ -86,7 +109,7 @@ export default {
         right: 150px;
       }
       .screenfull {
-					position: absolute;
+        position: fixed;
         right: 90px;
         top: 16px;
         color: red;
@@ -94,7 +117,7 @@ export default {
       .avatar-container {
         height: 50px;
         display: inline-block;
-					position: absolute;
+        position: fixed;
         right: 35px;
         .avatar-wrapper {
           cursor: pointer;
@@ -114,6 +137,7 @@ export default {
         }
       }
     }
+  }
 </style>