组织架构页顶部

src/views/departments/index.vue

@@ -1,9 +1,32 @@
 <template>
   <div class="dashboard-container">
     <div class="app-container">
-      <h2>
-        组织架构
-      </h2>
+      <el-card class="tree-card">
+        <!-- 用了一个行列布局 -->
+        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
+          <el-col>
+            <strong>xxx股份有限公司</strong>
+          </el-col>
+          <el-col :span="4">
+            <el-row type="flex" justify="end">
+              <!-- 两个内容 -->
+              <el-col>负责人</el-col>
+              <el-col>
+                <!-- 下拉菜单 element -->
+                <el-dropdown>
+                  <span>
+                    操作<i class="el-icon-arrow-down" />
+                  </span>
+                  <!-- 下拉菜单 -->
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item>添加子部门</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </el-card>
     </div>
   </div>
 </template>
@@ -14,6 +37,9 @@ export default {
 }
 </script>
 
-<style>
-
+<style scoped>
+.tree-card {
+  padding: 30px  140px;
+  font-size:14px;
+}
 </style>