feat: container

src/components/container/com.vue

@@ -0,0 +1,21 @@
+<style lang="scss">
+.container {
+  background-color: #FFF;
+  margin: 30px auto;
+  padding: 20px;
+  max-width: 1000px;
+  border-radius: 2px;
+}
+</style>
+
+<template>
+  <div class="container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'container'
+}
+</script>

src/layouts/default.vue

@@ -2,13 +2,10 @@
 .layout-main {
   height: 100%;
   .layout-main--side {
-    width: 200px;
+    width: 260px;
     background-color: #051428;
     user-select: none;
     cursor: pointer;
-    .overlay {
-      height: 100%;
-    }
     .el-menu {
       border-right: none;
       .el-menu-item {
@@ -18,6 +15,12 @@
       }
     }
   }
+  .layout-main--body {
+    background-color: #F0F2F5;
+  }
+  .overlay {
+    height: 100%;
+  }
 }
 </style>
 
@@ -37,15 +40,7 @@ export default {
     const node =
       <div class="layout-main" flex="dir:left">
         <div class="layout-main--side" flex-box="0">
-          <overlay-scrollbars
-            class="overlay os-theme-light"
-            options={
-              {
-                scrollbars: {
-                  autoHide: 'scroll'
-                }
-              }
-            }>
+          <overlay-scrollbars class="overlay os-theme-light" options={ { scrollbars: { autoHide: 'scroll' } } }>
             <el-menu
               default-active={ this.$route.path }
               background-color="#051428"
@@ -56,8 +51,10 @@ export default {
             </el-menu>
           </overlay-scrollbars>
         </div>
-        <div flex-box="1">
-          <router-view/>
+        <div class="layout-main--body" flex-box="1">
+          <overlay-scrollbars class="overlay" options={ { scrollbars: { autoHide: 'scroll' } } }>
+            <router-view/>
+          </overlay-scrollbars>
         </div>
       </div>
     return node

src/pages/demo1/1.vue

@@ -5,7 +5,7 @@
 </route-meta>
 
 <template>
-  <div>
+  <container>
     {{ $route.name }}
-  </div>
+  </container>
 </template>

src/pages/demo1/2.vue

@@ -5,7 +5,7 @@
 </route-meta>
 
 <template>
-  <div>
+  <container>
     {{ $route.name }}
-  </div>
+  </container>
 </template>

src/pages/demo1/3.vue

@@ -5,7 +5,7 @@
 </route-meta>
 
 <template>
-  <div>
+  <container>
     {{ $route.name }}
-  </div>
+  </container>
 </template>

src/pages/demo1/4.vue

@@ -5,7 +5,7 @@
 </route-meta>
 
 <template>
-  <div>
+  <container>
     {{ $route.name }}
-  </div>
+  </container>
 </template>

src/pages/demo1/5.vue

@@ -5,7 +5,7 @@
 </route-meta>
 
 <template>
-  <div>
+  <container>
     {{ $route.name }}
-  </div>
+  </container>
 </template>

src/pages/demo2/1.vue

@@ -5,7 +5,7 @@
 </route-meta>
 
 <template>
-  <div>
+  <container>
     {{ $route.name }}
-  </div>
+  </container>
 </template>

src/pages/demo2/2.vue

@@ -5,7 +5,7 @@
 </route-meta>
 
 <template>
-  <div>
+  <container>
     {{ $route.name }}
-  </div>
+  </container>
 </template>

src/pages/demo2/3.vue

@@ -5,7 +5,7 @@
 </route-meta>
 
 <template>
-  <div>
+  <container>
     {{ $route.name }}
-  </div>
+  </container>
 </template>

src/pages/demo2/4.vue

@@ -5,7 +5,7 @@
 </route-meta>
 
 <template>
-  <div>
+  <container>
     {{ $route.name }}
-  </div>
+  </container>
 </template>

src/pages/demo2/5.vue

@@ -5,7 +5,7 @@
 </route-meta>
 
 <template>
-  <div>
+  <container>
     {{ $route.name }}
-  </div>
+  </container>
 </template>

src/pages/demo3/1.vue

@@ -5,7 +5,7 @@
 </route-meta>
 
 <template>
-  <div>
+  <container>
     {{ $route.name }}
-  </div>
+  </container>
 </template>

src/pages/demo3/2.vue

@@ -5,7 +5,7 @@
 </route-meta>
 
 <template>
-  <div>
+  <container>
     {{ $route.name }}
-  </div>
+  </container>
 </template>

src/pages/demo3/3.vue

@@ -5,7 +5,7 @@
 </route-meta>
 
 <template>
-  <div>
+  <container>
     {{ $route.name }}
-  </div>
+  </container>
 </template>

src/pages/demo3/4.vue

@@ -5,7 +5,7 @@
 </route-meta>
 
 <template>
-  <div>
+  <container>
     {{ $route.name }}
-  </div>
+  </container>
 </template>

src/pages/demo3/5.vue

@@ -5,7 +5,7 @@
 </route-meta>
 
 <template>
-  <div>
+  <container>
     {{ $route.name }}
-  </div>
+  </container>
 </template>

src/pages/index.vue

@@ -5,7 +5,7 @@
 </route-meta>
 
 <template>
-  <div>
+  <container>
     home
-  </div>
+  </container>
 </template>