feat(material): material basic measurement

Author: lbwa

src/layout/Material.vue

@@ -2,16 +2,18 @@
   <el-container class="layout__material">
     <!-- Dynamic aside rendering area -->
 
-    <el-container>
+    <el-container class="layout__material__placeholder">
       <el-header>
         <el-button
           class="logout"
           type="text"
           @click="onLogout"
         >Logout</el-button>
       </el-header>
-      <router-view/>
-      <el-footer>footer</el-footer>
+      <router-view class="layout__material__placeholder-main"/>
+      <el-footer class="layout__material__footer">
+        Copyright &copy; {{currentYear}}
+      </el-footer>
     </el-container>
   </el-container>
 </template>
@@ -21,14 +23,36 @@ export default {
   data () {
     return {}
   },
+
   methods: {
     onLogout () {
       this.$store.dispatch('login/userLogout')
         .then(() => this.$router.replace('/login'))
     }
+  },
+
+  computed: {
+    currentYear () {
+      return new Date().getFullYear()
+    }
   }
 }
 </script>
 
 <style lang='scss' scoped>
+.layout__material {
+  &__placeholder {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+
+    &-main {
+      flex: 1;
+    }
+  }
+
+  &__footer {
+    line-height: 60px;
+  }
+}
 </style>

src/pages/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <router-link to="/login">login page</router-link>
+    This is home page.
   </div>
 </template>