graph

src/components/Graph.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="graph">
-    graph
   </div>
 </template>
 
@@ -13,6 +12,7 @@ export default {
 <style scoped>
 .graph {
   height: 80%;
-  border-bottom: 1px solid gray;
+  border-bottom: 1px solid #6e94e0;
+  background: url('../assets/wf_edit_bg.gif');
 }
 </style>

src/components/GraphProp.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="graph-prop">
-    graph-prop
+    <div class="prop-title">节点属性：</div>
+    <ul>
+      <Li>
+        <span>ID:</span><span>test1</span>
+      </Li>
+      <Li>
+        <span>名称:</span><span>test2</span>
+      </Li>
+    </ul>
   </div>
 </template>
 
@@ -14,4 +22,29 @@ export default {
 .graph-prop {
   height: 20%;
 }
+
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+ul li {
+  list-style-type: none;
+  margin-bottom: 4px;
+  padding: 4px 6px;
+  border-bottom: 1px solid #cbd8f3;
+}
+
+ul li span {
+  display: inline-block;
+  width: 25%;
+  color: gray;
+}
+
+.prop-title {
+  line-height: 40px;
+  padding-left: 6px;
+  text-align: middle;
+  background-color: #d7dfef;;
+}
 </style>

src/components/LeftTools.vue

@@ -42,7 +42,7 @@ export default {
 .left-tools {
   width: 160px;
   height: 100%;
-  border-right: 1px solid gray;
+  border-right: 1px solid #6e94e0;
 }
 
 ul {

src/components/Tools.vue

@@ -24,12 +24,12 @@ export default {
 .tools {
   min-width: 600px;
   height: 46px!important;
-  background-color: #ACB9CB;
+  border-bottom: 1px solid #6e94e0;
 }
 
 .tools i {
   height: 24px;
-  color: #606266;
+  color: #6e94e0;
   margin: 0 20px;
   font-size: 1.5em;
   cursor: pointer;