estel/gva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

美化dashbord

Browse Source
This commit is contained in:
范庆磊
2021-09-02 11:49:22 +08:00
parent 55ba5d2fef
commit 836a3d0957
6 changed files with 266 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
web/src/view/dashboard/index.vue
View File

@@ -7,17 +7,17 @@
<div class="dashbord1-left-rows">
<el-row :gutter="20">
<el-col :span="8" :xs="24" :sm="8">
<div class>
<div class="flex-center">
<i class="el-icon-sort icon"></i>今日流量 (1231231)
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class>
<div class="flex-center">
<i class="el-icon-s-custom icon"></i>总用户数 (24001)
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class>
<div class="flex-center">
<i class="el-icon-s-comment icon"></i>好评率 (99%)
</div>
</el-col>
@@ -47,8 +47,13 @@
</div>
</div>
<div class="mycard quick-entrance">
<el-row :gutter="20">
<el-card class="mycard quick-entrance">
<template #header>
<div class="card-header">
<span>快捷入口</span>
</div>
</template>
<el-row :gutter="20">
<el-col
v-for="(card, key) in toolCards"
:key="key"
@@ -58,21 +63,37 @@
class="quick-entrance-items"
>
<div class="quick-entrance-item">
<div
class="quick-entrance-item-icon"
:style="{ backgroundColor: card.bg }"
>
<div class="quick-entrance-item-icon" :style="{ backgroundColor: card.bg }">
<i :class="card.icon" :style="{ color: card.color }" />
</div>
<p>{{ card.label }}</p>
</div>
</el-col>
</el-row>
</el-card>
<!-- <div class="quick-entrance-title"></div> -->
<div class="mycard">
<el-row :gutter="0">
<el-col :xs="24" :sm="16">
<echarts-line></echarts-line>
</el-col>
<el-col :xs="24" :sm="8">
<dashbord-table></dashbord-table>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import echartsLine from '@/components/dashbordCharts/echartsLine.vue'
import dashbordTable from '@/components/dashbordTable/dashbordTable.vue'
export default {
components: {
echartsLine,
dashbordTable
},
data() {
return {
toolCards: [
@@ -81,53 +102,62 @@ export default {
icon: 'el-icon el-icon-monitor',
name: 'user',
color: '#ff9c6e',
bg :'rgba(255, 156, 110,.3)'
bg: 'rgba(255, 156, 110,.3)'
},
{
label: '角色管理',
icon: 'el-icon el-icon-setting',
name: 'authority',
color: '#69c0ff',
bg :'rgba(105, 192, 255,.3)'
bg: 'rgba(105, 192, 255,.3)'
},
{
label: '菜单管理',
icon: 'el-icon el-icon-menu',
name: 'menu',
color: '#b37feb',
bg :'rgba(179, 127, 235,.3)'
bg: 'rgba(179, 127, 235,.3)'
},
{
label: '代码生成器',
icon: ' el-icon-cpu',
name: 'autoCode',
color: '#ffd666',
bg :'rgba(255, 214, 102,.3)'
bg: 'rgba(255, 214, 102,.3)'
},
{
label: '表单生成器',
icon: 'el-icon-document-checked',
name: 'formCreate',
color: '#ff85c0',
bg :'rgba(255, 133, 192,.3)'
bg: 'rgba(255, 133, 192,.3)'
},
{
label: '关于我们',
icon: ' el-icon-user',
name: 'about',
color: '#5cdbd3',
bg :'rgba(92, 219, 211,.3)'
bg: 'rgba(92, 219, 211,.3)'
}
]
}
},
methods: {
toTarget(name) {
this.$router.push({ name })
}
}
}
</script>
<style lang="scss" scoped>
@mixin flex-center {
display: flex;
align-items: center;
}
.page {
background: #f8f8f8;
padding: 10px;
background: #f0f2f5;
padding: 0;
.mycard {
background-color: #fff;
@@ -135,16 +165,17 @@ export default {
height: auto;
padding: 10px 30px;
overflow: hidden;
margin-bottom: 20px;
margin-bottom: 15px;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.03);
}
.dashbord1 {
height: 150px;
display: flex;
align-items: center;
height: 120px;
@include flex-center;
justify-content: space-between;
color: #777;
&-left {
&-title {
margin-top: 15px;
font-size: 22px;
color: #000;
}
@@ -153,7 +184,7 @@ export default {
margin-top: 10px;
}
&-rows {
margin-top: 15px;
// margin-top: 15px;
width: 600px;
align-items: center;
}
@@ -165,46 +196,56 @@ export default {
}
}
.dashbord2 {
display: flex;
align-items: center;
@include flex-center;
justify-content: flex-start;
height: 60px;
&-item {
line-height: 25px;
}
}
.quick-entrance-title {
height: 30px;
font-size: 22px;
color: #333;
width: 100%;
border-bottom: 1px solid #eee;
}
.quick-entrance-items {
display: flex;
align-items: center;
@include flex-center;
justify-content: center;
text-align: center;
color: #333;
.quick-entrance-item {
height: auto;
text-align: center;
// align-items: center;
&-icon {
width: 50px;
height: 50px !important;
border-radius: 8px;
display: flex;
align-items: center;
@include flex-center;
justify-content: center;
i{
margin: 0 auto;
i {
font-size: 24px;
}
}
p{
p {
margin-top: 10px;
}
}
}
}
.icon {
font-size: 22px;
font-size: 20px;
color: rgb(85, 160, 248);
width: 30px;
height: 30px;
margin-right: 10px;
@include flex-center;
}
.flex-center {
@include flex-center;
}
//小屏幕不显示右侧，将登陆框居中