keep in sync with vue-element-admin

src/styles/sidebar.scss

@@ -4,6 +4,7 @@
     min-height: 100%;
     transition: margin-left .28s;
     margin-left: 180px;
+    position: relative;
   }
   // 侧边栏
   .sidebar-container {

src/views/404.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="background:#f0f2f5;margin-top: -20px;">
+  <div class="wscn-http404-container">
     <div class="wscn-http404">
       <div class="pic-404">
         <img class="pic-404__parent" :src="img_404" alt="404">
@@ -9,7 +9,9 @@
       </div>
       <div class="bullshit">
         <div class="bullshit__oops">OOPS!</div>
-        <div class="bullshit__info">版权所有<a class="link-type" href="https://wallstreetcn.com" target='_blank'>华尔街见闻</a></div>
+        <div class="bullshit__info">版权所有
+          <a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a>
+        </div>
         <div class="bullshit__headline">{{ message }}</div>
         <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
         <a href="" class="bullshit__return-home">返回首页</a>
@@ -23,6 +25,7 @@ import img_404 from '@/assets/404_images/404.png'
 import img_404_cloud from '@/assets/404_images/404_cloud.png'
 
 export default {
+  name: 'page404',
   data() {
     return {
       img_404,
@@ -31,24 +34,28 @@ export default {
   },
   computed: {
     message() {
-      return '特朗普说这个页面你不能进......'
+      return '网管说这个页面你不能进......'
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
 .wscn-http404 {
   position: relative;
   width: 1200px;
-  margin: 20px auto 60px;
-  padding: 0 100px;
+  padding: 0 50px;
   overflow: hidden;
   .pic-404 {
     position: relative;
     float: left;
     width: 600px;
-    padding: 150px 0;
     overflow: hidden;
     &__parent {
       width: 100%;
@@ -160,7 +167,7 @@ export default {
     position: relative;
     float: left;
     width: 300px;
-    padding: 150px 0;
+    padding: 30px 0;
     overflow: hidden;
     &__oops {
       font-size: 32px;
@@ -176,7 +183,8 @@ export default {
     &__headline {
       font-size: 20px;
       line-height: 24px;
-      color: #1482f0;
+      color: #222;
+      font-weight: bold;
       opacity: 0;
       margin-bottom: 10px;
       animation-name: slideUp;
@@ -225,5 +233,4 @@ export default {
     }
   }
 }
-
 </style>

src/views/layout/Layout.vue

@@ -31,6 +31,7 @@ export default {
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
         withoutAnimation: this.sidebar.withoutAnimation,
         mobile: this.device === 'mobile'
       }
@@ -51,6 +52,10 @@ export default {
     position: relative;
     height: 100%;
     width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
   }
   .drawer-bg {
     background: #000;

src/views/layout/components/AppMain.vue

@@ -17,3 +17,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  min-height: calc(100vh - 50px);
+  position: relative;
+  overflow: hidden;
+}
+</style>

src/views/table/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
+    <el-table :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>
       <el-table-column align="center" label='ID' width="95">
         <template slot-scope="scope">
           {{scope.$index}}