LeftTools

src/components/AppMain.vue

@@ -1,12 +1,8 @@
 <template>
-  <el-container class="app-main">
-    <el-aside width="200px">
-      <LeftTools></LeftTools>
-    </el-aside>
-    <el-main class="no-padding">
-      <GraphContainer></GraphContainer>
-    </el-main>
-  </el-container>
+  <div class="app-main">
+    <LeftTools></LeftTools>
+    <GraphContainer></GraphContainer>
+  </div>
 </template>
 
 <script>
@@ -23,9 +19,9 @@ export default {
 <style scoped>
 .app-main {
   display: flex;
+  flex-direction: row;
   flex-grow: 1;
-}
-.app-main .el-container {
+  width: 100%;
   height: 100%;
 }
 </style>

src/components/GraphContainer.vue

@@ -18,6 +18,6 @@ export default {
 
 <style scoped>
 .graph-container {
-  height: 100%;
+  flex-grow: 1;
 }
 </style>

src/components/LeftTools.vue

@@ -1,6 +1,34 @@
 <template>
   <div class="left-tools">
-    LeftTools
+    <ul>
+      <li>
+        <i class="tools select-icon"></i><span>选择</span>
+      </li>
+      <li>
+        <i class="tools addStartEnd-icon"></i><span>自动插入</span>
+      </li>
+      <li draggable>
+        <i class="tools start-icon"></i><span>开始</span>
+      </li>
+      <li draggable>
+        <i class="tools end-icon"></i><span>结束</span>
+      </li>
+      <li draggable>
+        <i class="tools ordinary-icon"></i><span>普通活动</span>
+      </li>
+      <li draggable>
+        <i class="tools block-icon"></i><span>块活动</span>
+      </li>
+      <li draggable>
+        <i class="tools subFlow-icon"></i><span>子活动</span>
+      </li>
+      <li>
+        <i class="tools line-icon"></i><span>转移</span>
+      </li>
+      <li>
+        <i class="tools polyline-icon"></i><span>自转移</span>
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -12,7 +40,96 @@ export default {
 
 <style scoped>
 .left-tools {
+  width: 160px;
   height: 100%;
   border-right: 1px solid gray;
 }
+
+ul {
+  padding: 0 10px;
+  color: #757474;
+}
+
+ul li {
+  list-style-type: none;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 8px;
+  border-radius: 4px;
+  position: relative;
+}
+
+ul li:hover {
+  cursor: pointer;
+  color: white;
+  background-color: #ACB9CB;
+}
+
+.left-tools i.tools {
+  position: absolute;
+  top: 8px;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+}
+
+.left-tools span {
+  margin-left: 20px;
+}
+
+.left-tools .select-icon {
+  background: url('../assets/wf_tools.png');
+  background-position: 0px 0px;
+}
+
+.left-tools .addStartEnd-icon {
+  background: url('../assets/wf_tools.png');
+  background-position: 42px 0px;
+}
+
+.left-tools .start-icon {
+  background: url('../assets/wf_tools.png');
+  background-position: 81px 0px;
+}
+
+.left-tools .end-icon {
+  background: url('../assets/wf_tools.png');
+  background-position: 61px 0px;
+}
+
+.left-tools .ordinary-icon {
+  background: url('../assets/wf_tools.png');
+  background-position: 0px 57px;
+}
+
+.left-tools .block-icon {
+  background: url('../assets/wf_tools.png');
+  background-position: 80px 57px;
+}
+
+.left-tools .subFlow-icon {
+  background: url('../assets/wf_tools.png');
+  background-position: 61px 57px;
+}
+
+.left-tools .route-icon {
+  background: url('../assets/wf_tools.png');
+  background-position: 41px 57px;
+}
+
+.left-tools .line-icon {
+  background: url('../assets/wf_tools.png');
+  background-position: 0 34px;
+}
+
+.left-tools .polyline-icon {
+  background: url('../assets/wf_tools.png');
+  background-position: 81px 34px;
+}
+
+.left-tools .loop-icon {
+  background: url('../assets/wf_tools.png');
+  background-position: 60px 34px;
+}
 </style>

src/components/Tools.vue

@@ -22,6 +22,7 @@ export default {
 <style scoped>
 
 .tools {
+  min-width: 600px;
   height: 46px!important;
   background-color: #ACB9CB;
 }
@@ -31,6 +32,11 @@ export default {
   color: #606266;
   margin: 0 20px;
   font-size: 1.5em;
+  cursor: pointer;
+}
+
+.tools i:hover {
+  color: #9fe499;
 }
 
 </style>