332 lines
8.4 KiB
Vue
332 lines
8.4 KiB
Vue
<template>
|
|
<div class="page">
|
|
<div class="ds-card-box" style="padding-top: 0px;">
|
|
<div class="ds-card ds-top-card" style="">
|
|
<div class="ds-top-card-left">
|
|
<div class="ds-top-card-left-title">高效的一天开始了</div>
|
|
<div class="ds-top-card-left-dot">1231231231</div>
|
|
<el-row class="my-8 w-[500px]">
|
|
<el-col :span="8" :xs="24" :sm="8">
|
|
<div class="flex items-center">
|
|
<el-icon class="dashboard-icon">
|
|
<sort />
|
|
</el-icon>
|
|
今日流量 (1231231)
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8" :xs="24" :sm="8">
|
|
<div class="flex items-center">
|
|
<el-icon class="dashboard-icon">
|
|
<avatar />
|
|
</el-icon>
|
|
总用户数 (24001)
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8" :xs="24" :sm="8">
|
|
<div class="flex items-center">
|
|
<el-icon class="dashboard-icon">
|
|
<comment />
|
|
</el-icon>
|
|
好评率 (99%)
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ds-card-box">
|
|
<div class="ds-card quick-entrance">
|
|
<div class="ds-card-title card-header">快捷入口</div>
|
|
<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 }">
|
|
<el-icon>
|
|
<component :is="card.icon" :style="{ color: card.color }" />
|
|
</el-icon>
|
|
</div>
|
|
<p>{{ card.label }}</p>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
<div class="ds-card-box">
|
|
<div class="ds-card">
|
|
<div class="ds-card-title">数据统计</div>
|
|
<div class="p-4">
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="18">
|
|
<line-chart :chart-data="lineChartData" />
|
|
</el-col>
|
|
<el-col :xs="24" :sm="6">
|
|
<line-chart :chart-data="lineChartData" />
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import LineChart from '../dashboard/LineChart'
|
|
const lineChartData = {
|
|
newVisitis: {
|
|
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
|
actualData: [120, 82, 91, 154, 162, 140, 145]
|
|
},
|
|
messages: {
|
|
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
|
actualData: [180, 160, 151, 106, 145, 150, 130]
|
|
},
|
|
purchases: {
|
|
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
|
actualData: [120, 90, 100, 138, 142, 130, 130]
|
|
},
|
|
shoppings: {
|
|
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
|
actualData: [120, 82, 91, 154, 162, 140, 130]
|
|
}
|
|
}
|
|
|
|
export default {
|
|
name: 'DS5',
|
|
components: {
|
|
LineChart
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
toolCards:[
|
|
{
|
|
label: '用户管理',
|
|
icon: 'monitor',
|
|
name: 'user',
|
|
color: '#ff9c6e',
|
|
bg: 'rgba(255, 156, 110,.3)'
|
|
},
|
|
{
|
|
label: '角色管理',
|
|
icon: 'setting',
|
|
name: 'authority',
|
|
color: '#69c0ff',
|
|
bg: 'rgba(105, 192, 255,.3)'
|
|
},
|
|
{
|
|
label: '菜单管理',
|
|
icon: 'menu',
|
|
name: 'menu',
|
|
color: '#b37feb',
|
|
bg: 'rgba(179, 127, 235,.3)'
|
|
},
|
|
{
|
|
label: '代码生成器',
|
|
icon: 'cpu',
|
|
name: 'autoCode',
|
|
color: '#ffd666',
|
|
bg: 'rgba(255, 214, 102,.3)'
|
|
},
|
|
{
|
|
label: '表单生成器',
|
|
icon: 'document-checked',
|
|
name: 'formCreate',
|
|
color: '#ff85c0',
|
|
bg: 'rgba(255, 133, 192,.3)'
|
|
},
|
|
{
|
|
label: '关于我们',
|
|
icon: 'user',
|
|
name: 'about',
|
|
color: '#5cdbd3',
|
|
bg: 'rgba(92, 219, 211,.3)'
|
|
}
|
|
],
|
|
lineChartData: lineChartData.newVisitis,
|
|
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
handleSetLineChartData(type) {
|
|
this.lineChartData = lineChartData[type]
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@mixin flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.page {
|
|
background: #f0f2f5;
|
|
padding: 0;
|
|
.ds-card-box{
|
|
padding: 12px 0px;
|
|
&+.ds-card-box{
|
|
padding-top: 0px;
|
|
}
|
|
}
|
|
.ds-card {
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
border-radius: 2px;
|
|
height: auto;
|
|
padding: 26px 30px;
|
|
overflow: hidden;
|
|
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.03);
|
|
}
|
|
.ds-top-card {
|
|
// height: 260px;
|
|
background:url(~@/assets/images/dashboard_top_bg.png);
|
|
background-position: right;
|
|
background-repeat: no-repeat;
|
|
background-size: 30%;
|
|
background-color: #fff;
|
|
@include flex-center;
|
|
justify-content: space-between;
|
|
color: #777;
|
|
&-left {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
&-title {
|
|
font-size: 22px;
|
|
color: #343844;
|
|
}
|
|
&-dot {
|
|
font-size: 16px;
|
|
color: #6B7687;
|
|
margin-top: 24px;
|
|
}
|
|
&-rows {
|
|
// margin-top: 15px;
|
|
margin-top: 18px;
|
|
color: #6B7687;
|
|
width: 600px;
|
|
align-items: center;
|
|
}
|
|
&-item{
|
|
+.ds-top-card-left-item{
|
|
margin-top: 24px;
|
|
}
|
|
margin-top: 14px;
|
|
}
|
|
}
|
|
&-right {
|
|
height: 600px;
|
|
width: 600px;
|
|
margin-top: 28px;
|
|
}
|
|
}
|
|
::v-deep(.el-card__header){
|
|
padding:0;
|
|
border-bottom: none;
|
|
}
|
|
.card-header{
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
}
|
|
.quick-entrance-title {
|
|
height: 30px;
|
|
font-size: 22px;
|
|
color: #333;
|
|
width: 100%;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.quick-entrance-items {
|
|
@include flex-center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
color: #333;
|
|
.quick-entrance-item {
|
|
padding: 16px 28px;
|
|
margin-top: -16px;
|
|
margin-bottom: -16px;
|
|
border-radius: 4px;
|
|
transition: all 0.2s;
|
|
&:hover{
|
|
box-shadow: 0px 0px 7px 0px rgba(217, 217, 217, 0.55);
|
|
}
|
|
cursor: pointer;
|
|
height: auto;
|
|
text-align: center;
|
|
// align-items: center;
|
|
&-icon {
|
|
width: 50px;
|
|
height: 50px !important;
|
|
border-radius: 8px;
|
|
@include flex-center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
i {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
p {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
.echart-box{
|
|
padding: 14px;
|
|
}
|
|
}
|
|
.dashboard-icon {
|
|
font-size: 20px;
|
|
color: rgb(85, 160, 248);
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-right: 10px;
|
|
@include flex-center;
|
|
}
|
|
.flex-center {
|
|
@include flex-center;
|
|
}
|
|
|
|
//小屏幕不显示右侧，将登录框居中
|
|
@media (max-width: 750px) {
|
|
.ds-card {
|
|
padding: 20px 10px !important;
|
|
.ds-top-card {
|
|
height: auto;
|
|
&-left {
|
|
&-title {
|
|
font-size: 20px !important;
|
|
}
|
|
&-rows {
|
|
margin-top: 15px;
|
|
align-items: center;
|
|
}
|
|
}
|
|
&-right {
|
|
display: none;
|
|
}
|
|
}
|
|
.ds-middle-card {
|
|
&-item {
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
.dashboard-icon {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|