layout

package.json

@@ -12,7 +12,9 @@
   },
   "dependencies": {
     "element-ui": "^2.4.7",
+    "node-sass": "^4.9.3",
     "normalize.css": "^8.0.0",
+    "sass-loader": "^7.1.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"
   },

src/components/AppMain.vue

@@ -1,15 +1,31 @@
 <template>
-  <section class="app-main">
-    el-main
-  </section>
+  <el-container class="app-main">
+    <el-aside width="200px">
+      <LeftTools></LeftTools>
+    </el-aside>
+    <el-main class="no-padding">
+      <GraphContainer></GraphContainer>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
+import LeftTools from './LeftTools'
+import GraphContainer from './GraphContainer'
 export default {
-
+  components: {
+    LeftTools,
+    GraphContainer
+  }
 }
 </script>
 
 <style scoped>
-
+.app-main {
+  display: flex;
+  flex-grow: 1;
+}
+.app-main .el-container {
+  height: 100%;
+}
 </style>

src/components/FlowChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flow-chart">
     <Tools></Tools>
     <AppMain></AppMain>
   </div>
@@ -18,5 +18,9 @@ export default {
 </script>
 
 <style scoped>
-
+.flow-chart {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 </style>

src/components/Graph.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="graph">
+    graph
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+.graph {
+  height: 80%;
+  border-bottom: 1px solid gray;
+}
+</style>

src/components/GraphContainer.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="graph-container">
+    <Graph></Graph>
+    <GraphProp></GraphProp>
+  </div>
+</template>
+
+<script>
+import Graph from './Graph'
+import GraphProp from './GraphProp'
+export default {
+  components: {
+    Graph,
+    GraphProp
+  }
+}
+</script>
+
+<style scoped>
+.graph-container {
+  height: 100%;
+}
+</style>

src/components/GraphProp.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="graph-prop">
+    graph-prop
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+.graph-prop {
+  height: 20%;
+}
+</style>

src/components/LeftTools.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="left-tools">
+    LeftTools
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+.left-tools {
+  height: 100%;
+  border-right: 1px solid gray;
+}
+</style>

src/components/Tools.vue

@@ -1,16 +1,15 @@
 <template>
-  <el-header class="tools">
-    <i class="el-icon-delete"></i>
-    <i class="el-icon-circle-close-outline"></i>
-
-    <i class="el-icon-zoom-out"></i>
-    <i class="el-icon-zoom-in"></i>
-    <i class="el-icon-rank"></i>
-
-    <i class="el-icon-upload2"></i>
-    <i class="el-icon-download"></i>
-
-    <i class="el-icon-question"></i>
+  <el-header class="tools flex-y-center">
+    <div>
+      <i class="el-icon-delete"></i>
+      <i class="el-icon-circle-close-outline"></i>
+      <i class="el-icon-zoom-out"></i>
+      <i class="el-icon-zoom-in"></i>
+      <i class="el-icon-rank"></i>
+      <i class="el-icon-upload2"></i>
+      <i class="el-icon-download"></i>
+      <i class="el-icon-question"></i>
+    </div>
   </el-header>
 </template>
 
@@ -23,21 +22,15 @@ export default {
 <style scoped>
 
 .tools {
+  height: 46px!important;
   background-color: #ACB9CB;
-  height: 100%;
 }
 
 .tools i {
+  height: 24px;
   color: #606266;
   margin: 0 20px;
   font-size: 1.5em;
-  vertical-align: middle;
-}
-
-.tools i:after {
-  font-size: 0;
-  content: "";
-  height: 100%;
 }
 
 </style>

src/main.js

@@ -7,6 +7,8 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 
+import '@/styles/index.scss' // global css
+
 import App from './App'
 import router from './router'
 

src/styles/index.scss

@@ -0,0 +1,96 @@
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app{
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.no-padding {
+  padding: 0px !important;
+}
+
+.padding-content {
+  padding: 4px 0;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus{
+  outline: none;
+ }
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.block {
+  display: block;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.inlineBlock {
+  display: block;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+.flex-y-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}