84 lines
1.7 KiB
Vue
84 lines
1.7 KiB
Vue
<template>
|
|
<div class="home">
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-card shadow="hover">
|
|
<div class="card-header">
|
|
<i class="el-icon-user"></i>
|
|
<span>总成员数</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<span class="number">100</span>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card shadow="hover">
|
|
<div class="card-header">
|
|
<i class="el-icon-office-building"></i>
|
|
<span>部门数量</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<span class="number">10</span>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card shadow="hover">
|
|
<div class="card-header">
|
|
<i class="el-icon-user-solid"></i>
|
|
<span>在职人数</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<span class="number">95</span>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card shadow="hover">
|
|
<div class="card-header">
|
|
<i class="el-icon-user"></i>
|
|
<span>离职人数</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<span class="number">5</span>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Home'
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home {
|
|
padding: 20px;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card-header i {
|
|
font-size: 20px;
|
|
margin-right: 10px;
|
|
color: #409EFF;
|
|
}
|
|
|
|
.card-body {
|
|
text-align: center;
|
|
}
|
|
|
|
.number {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
}
|
|
</style> |