github/lina
1
0
Fork 0
mirror of https://github.com/jumpserver/lina.git synced 2025-08-16 22:07:21 +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 IBox } from './IBox'
export { default as QuickActions } from './QuickActions' export { default as QuickActions } from './QuickActions'
export { default as Switcher } from './Swicher' 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> <template>
<Page> <Page>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple" /></el-col> <el-col :span="6"><SummaryCard /></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"><div class="grid-content bg-purple" /></el-col> <el-col :span="6"><SummaryCard /></el-col>
<el-col :span="6"><div class="grid-content bg-purple" /></el-col> <el-col :span="6"><SummaryCard /></el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="4"><div class="grid-content bg-purple" /></el-col> <el-col :span="4"><SummaryCard /></el-col>
<el-col :span="16"><div class="grid-content bg-purple" /></el-col> <el-col :span="16"><SummaryCard /></el-col>
<el-col :span="4"><div class="grid-content bg-purple" /></el-col> <el-col :span="4"><SummaryCard /></el-col>
</el-row> </el-row>
<el-row type="flex" class="row-bg" justify="space-between"> <el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple" /></el-col> <el-col :span="8"><SummaryCard /></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light" /></el-col> <el-col :span="8"><SummaryCard /></el-col>
<el-col :span="6"><div class="grid-content bg-purple" /></el-col> <el-col :span="8"><SummaryCard /></el-col>
</el-row> </el-row>
</Page> </Page>
</template> </template>
<script> <script>
import { Page } from '@/layout/components' import { Page } from '@/layout/components'
import { SummaryCard } from '@/components'
export default { export default {
name: 'Dashboard', name: 'Dashboard',
components: { components: {
Page Page, SummaryCard
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard {
.el-row { .el-row {
margin-bottom: 20px; margin-bottom: 25px;
min-height: 10px;
&:last-child { &:last-child {
margin-bottom: 0; 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> </style>