xing/vue-learn
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
xing 2020-06-18 10:33:42 +08:00
parent 594dbfde93
commit 1b7f38b5d8
2 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/css/globel.css
View File

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

27
src/components/users/users.vue
View File

@ -1,14 +1,31 @@
<template> <template>
<div class="users"> <div>
<h1>user lists</h1> <el-breadcrumb separator-class="el-icon-arrow-right">
<pre v-text="$attrs"/> <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> </div>
</template> </template>
<script> <script>
export default { export default {
props: { name: 'users'
}
} }
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped></style>