github/lina
1
0
Fork 0
mirror of https://github.com/jumpserver/lina.git synced 2025-08-02 07:27:01 +00:00
Code Issues Projects Releases Wiki Activity

[Update] Dashboard (2)

Browse Source
This commit is contained in:
Bai 2020-05-18 12:02:19 +08:00
parent c19e897492
commit ad18663a39
3 changed files with 41 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/SummaryCard/index.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<el-card>
<div slot="header">
<span>卡片名称</span>
<span class="pull-right">卡片标签</span>
</div>
<div>
<span>卡片内容</span>
</div>
</el-card>
</template>
<script>
export default {
name: 'SummaryCard',
props: {
}
}
</script>
<style scoped>
.pull-right {
float: right!important;
}
</style>

1
src/components/index.js
View File

@ -19,3 +19,4 @@ export { default as TreeTable } from './TreeTable'
export { default as IBox } from './IBox'
export { default as QuickActions } from './QuickActions'
export { default as Switcher } from './Swicher'
export { default as SummaryCard } from './SummaryCard'

49
src/views/dashboard/index.vue
View File

@ -1,61 +1,42 @@
<template>
<Page>
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple" /></el-col>
<el-col :span="6"><div class="grid-content bg-purple" /></el-col>
<el-col :span="6"><div class="grid-content bg-purple" /></el-col>
<el-col :span="6"><div class="grid-content bg-purple" /></el-col>
<el-col :span="6"><SummaryCard /></el-col>
<el-col :span="6"><SummaryCard /></el-col>
<el-col :span="6"><SummaryCard /></el-col>
<el-col :span="6"><SummaryCard /></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4"><div class="grid-content bg-purple" /></el-col>
<el-col :span="16"><div class="grid-content bg-purple" /></el-col>
<el-col :span="4"><div class="grid-content bg-purple" /></el-col>
<el-col :span="4"><SummaryCard /></el-col>
<el-col :span="16"><SummaryCard /></el-col>
<el-col :span="4"><SummaryCard /></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="6"><div class="grid-content bg-purple" /></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light" /></el-col>
<el-col :span="6"><div class="grid-content bg-purple" /></el-col>
<el-row :gutter="20">
<el-col :span="8"><SummaryCard /></el-col>
<el-col :span="8"><SummaryCard /></el-col>
<el-col :span="8"><SummaryCard /></el-col>
</el-row>
</Page>
</template>
<script>
import { Page } from '@/layout/components'
import { SummaryCard } from '@/components'
export default {
name: 'Dashboard',
components: {
Page
Page, SummaryCard
}
}
</script>
<style lang="scss" scoped>
.dashboard {
.el-row {
margin-bottom: 20px;
min-height: 10px;
margin-bottom: 25px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
background-color: #000;
}
.bg-purple {
background: #000;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.bg-purple-light {
background: #000;
}
.row-bg {
padding: 10px 0;
background-color: #000;
}
}
</style>