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

dashboard调整

Browse Source
This commit is contained in:
piexlmax
2021-09-18 17:09:15 +08:00
parent a5b989d278
commit d85b481e68
5 changed files with 252 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,93 +1,104 @@
<template>
<div class="page">
<div class="mycard dashbord1">
<div class="dashbord1-left">
<div class="dashbord1-left-title">早安，管理员，请开始一天的工作吧</div>
<div class="dashbord1-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
<div class="dashbord1-left-rows">
<div class="gva-card-box">
<div class="gva-card dashbord1">
<div class="dashbord1-left">
<div class="dashbord1-left-title">早安，管理员，请开始一天的工作吧</div>
<div class="dashbord1-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
<div class="dashbord1-left-rows">
<el-row :gutter="20">
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-sort icon" />今日流量 (1231231)
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-s-custom icon" />总用户数 (24001)
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-s-comment icon" />好评率 (99%)
</div>
</el-col>
</el-row>
</div>
</div>
<img src="@/assets/dashbord.png" class="dashbord1-right" alt>
</div>
</div>
<div class="gva-card-box">
<div class="gva-card dashbord2">
<div>
<div class="dashbord2-item">
使用教学：
<a
style="color:#409EFF"
target="view_window"
href="https://www.bilibili.com/video/BV1Rg411u7xH/"
>https://www.bilibili.com/video/BV1Rg411u7xH</a>
</div>
<div class="dashbord2-item">
插件仓库：
<a
style="color:#409EFF"
target="view_window"
href="https://github.com/flipped-aurora/gva-plugins"
>https://github.com/flipped-aurora/gva-plugins</a>
</div>
</div>
</div>
</div>
<div class="gva-card-box">
<el-card class="gva-card 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"
:span="4"
:xs="8"
class="quick-entrance-items"
@click="toTarget(card.name)"
>
<div class="quick-entrance-item">
<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>
<div class="gva-card-box">
<div class="gva-card">
<div class="card-header">
<span>数据统计</span>
</div>
<div class="echart-box">
<el-row :gutter="20">
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-sort icon" />今日流量 (1231231)
</div>
<el-col :xs="24" :sm="18">
<echarts-line />
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-s-custom icon" />总用户数 (24001)
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-s-comment icon" />好评率 (99%)
</div>
<el-col :xs="24" :sm="6">
<dashbord-table />
</el-col>
</el-row>
</div>
</div>
<img src="@/assets/dashbord.png" class="dashbord1-right" alt>
</div>
<div class="mycard dashbord2">
<div>
<div class="dashbord2-item">
使用教学：
<a
style="color:#409EFF"
target="view_window"
href="https://www.bilibili.com/video/BV1Rg411u7xH/"
>https://www.bilibili.com/video/BV1Rg411u7xH</a>
</div>
<div class="dashbord2-item">
插件仓库：
<a
style="color:#409EFF"
target="view_window"
href="https://github.com/flipped-aurora/gva-plugins"
>https://github.com/flipped-aurora/gva-plugins</a>
</div>
</div>
</div>
<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"
:span="4"
:xs="8"
class="quick-entrance-items"
@click="toTarget(card.name)"
>
<div class="quick-entrance-item">
<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 />
</el-col>
<el-col :xs="24" :sm="8">
<dashbord-table />
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import echartsLine from '@/components/dashbordCharts/echartsLine.vue'
import dashbordTable from '@/components/dashbordTable/dashbordTable.vue'
import echartsLine from '@/view/dashboard/dashbordCharts/echartsLine.vue'
import dashbordTable from '@/view/dashboard/dashbordTable/dashbordTable.vue'
export default {
components: {
echartsLine,
@@ -157,33 +168,42 @@ export default {
.page {
background: #f0f2f5;
padding: 0;
.mycard {
.gva-card-box{
padding: 12px;
&+.gva-card-box{
padding-top: 0px;
}
}
.gva-card {
box-sizing: border-box;
background-color: #fff;
border-radius: 10px;
border-radius: 2px;
height: auto;
padding: 10px 30px;
padding: 26px 30px;
overflow: hidden;
margin-bottom: 15px;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.03);
}
.dashbord1 {
height: 120px;
height: 196px;
@include flex-center;
justify-content: space-between;
color: #777;
&-left {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
&-title {
margin-top: 15px;
font-size: 22px;
color: #000;
color: #343844;
}
&-dot {
font-size: 14px;
margin-top: 10px;
color: #6B7687;
}
&-rows {
// margin-top: 15px;
color: #6B7687;
width: 600px;
align-items: center;
}
@@ -194,11 +214,21 @@ export default {
margin-top: 28px;
}
}
::v-deep(.el-card__header){
padding:0;
border-bottom: none;
}
.card-header{
padding-bottom: 20px;
border-bottom: 1px solid #e8e8e8;
}
.dashbord2 {
@include flex-center;
justify-content: flex-start;
height: 60px;
&-item {
&+.dashbord2-item{
margin-top:24px;
}
line-height: 25px;
}
}
@@ -234,6 +264,9 @@ export default {
}
}
}
.echart-box{
padding: 14px;
}
}
.icon {
font-size: 20px;
@@ -249,7 +282,7 @@ export default {
//小屏幕不显示右侧，将登陆框居中
@media (max-width: 750px) {
.mycard {
.gva-card {
padding: 20px 10px !important;
.dashbord1 {
height: auto;