列表的面包屑导航和搜索栏

src/assets/css/globel.css

@@ -3,3 +3,11 @@ html,body,#app{
     margin: 0;
     padding: 0;
 }
+.el-breadcrumb {
+    margin-bottom: 15px;
+    font-size: 12px;
+}
+
+.el-card {
+    box-shadow: 0 1px 1px rgba(0,0,0, .15) !important;
+}

src/components/users/users.vue

@@ -1,14 +1,31 @@
 <template>
-    <div class="users">
-      <h1>user lists</h1>
-        <pre v-text="$attrs"/>
+  <div>
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
+      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
+
+    </el-breadcrumb>
+    <!--卡片-->
+    <el-card class="box-card">
+      <el-row :gutter="10">
+        <el-col :span="7">
+          <el-input placeholder="请输入内容" >
+            <el-button slot="append" icon="el-icon-search"></el-button>
+          </el-input>
+        </el-col>
+        <el-col :span="4">
+          <el-button type="primary">添加用户</el-button>
+        </el-col>
+      </el-row>
+    </el-card>
   </div>
+
 </template>
 
 <script>
 export default {
-  props: {
-  }
+  name: 'users'
 }
 </script>
 <style lang="less" scoped></style>