feature: dash

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div class="root">
     <nav-bar />
     <div class="wrap">
       <left-aside class="menu" v-if="isSdk"></left-aside>
@@ -28,6 +28,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #444;
+  height: 100%;
 }
 
 body {
@@ -39,6 +40,10 @@ body {
   min-width: 700PX;
 }
 
+#app {
+  height: 100%;
+}
+
 .run,
 .demo {
   padding-bottom: 10px;
@@ -50,11 +55,14 @@ body {
 </style>
 
 <style lang="less" scoped>
-#app {
+.root {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
   .wrap {
     display: flex;
     align-items: stretch;
-    min-height: calc(100vh - 80px);
+    flex-grow: 1;
     .menu {
       width: 200px;
       border-right: 1px solid #eee;

src/views/dashboard/index.vue

@@ -1,3 +1,14 @@
 <template>
-  <div>this is dashboard</div>
+  <div class="dash-wrap">this is dashboard</div>
 </template>
+
+<style lang="less" scoped>
+.dash-wrap {
+  height: 100%;
+  background-color: #1d1d3c;
+  background-image: url(./assets/bg.jpg);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+</style>