提交 8110ad23 编写于 作者: P piexlmax

清除旧版dashbord 调整新版头图位置

上级 11ee7ac6
......@@ -191,7 +191,7 @@ export default {
&-right {
height: 600px;
width: 600px;
margin-top: -20px;
margin-top: 28px;
}
}
.dashbord2 {
......
<template>
<div class="big">
<el-row class="card">
<el-col :xs="24" :lg="16" :md="16" style="height:90px">
<div class="car-left">
<el-row>
<el-col :xs="4" :md="3" :lg="3">
<span class="card-img">
<img :src="userInfo.headerImg" alt="">
</span>
</el-col>
<el-col :xs="20" :lg="12" :md="12">
<div class="text">
<h4>早安,管理员, 请开始您一天的工作吧!</h4>
<p class="tips-text">
<i class="el-icon-sunny el-icon" />
<span>今日晴,0℃ - 10℃,天气寒冷,注意添加衣物。</span>
</p>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :xs="24" :lg="8" :md="8">
<div class="car-right">
<el-row>
<el-col :span="8">
<div class="card-item">
<span class="flow"><i class="el-icon-s-grid" /></span>
<span>今日流量 </span>
<b>13260</b>
</div>
</el-col>
<el-col :span="8">
<div class="card-item">
<span class="user-number">
<i class="el-icon-s-custom" />
</span>
<span>总用户 </span>
<b>48286</b>
</div>
</el-col>
<el-col :span="8">
<div class="card-item">
<span class="feedback">
<i class="el-icon-star-on" />
</span>
<span>好评率 </span>
<b>98%</b>
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<el-row>
<el-col>
<el-card shadow="hover">
<h2>
使用教学:<a style="color:#409EFF" target="view_window" href="https://www.bilibili.com/video/BV1Rg411u7xH/">https://www.bilibili.com/video/BV1Rg411u7xH/</a>
</h2>
<br>
<h2>
插件仓库:<a style="color:#409EFF" target="view_window" href="https://github.com/flipped-aurora/gva-plugins">https://github.com/flipped-aurora/gva-plugins</a>
</h2>
<div />
</el-card>
</el-col>
</el-row>
<div class="shadow">
<el-row :gutter="20">
<el-col
v-for="(card, key) in toolCards"
:key="key"
:span="4"
:xs="8"
@click="toTarget(card.name)"
>
<el-card shadow="hover" class="grid-content">
<i :class="card.icon" :style="{ color: card.color }" />
<p>{{ card.label }}</p>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'Dashboard',
components: {
},
data() {
return {
toolCards: [
{
label: '用户管理',
icon: 'el-icon el-icon-monitor',
name: 'user',
color: '#ff9c6e'
},
{
label: '角色管理',
icon: 'el-icon el-icon-setting',
name: 'authority',
color: '#69c0ff'
},
{
label: '菜单管理',
icon: 'el-icon el-icon-menu',
name: 'menu',
color: '#b37feb'
},
{
label: '代码生成器',
icon: 'el-icon el-icon-cpu',
name: 'autoCode',
color: '#ffd666'
},
{
label: '表单生成器',
icon: 'el-icon el-icon-document-checked',
name: 'formCreate',
color: '#ff85c0'
},
{
label: '关于我们',
icon: 'el-icon el-icon-user',
name: 'about',
color: '#5cdbd3'
}
]
}
},
computed: {
...mapGetters('user', ['userInfo'])
},
methods: {
toTarget(name) {
this.$router.push({ name })
}
}
}
</script>
<style lang="scss" scoped>
.big {
margin: 100px 0 0 0;
padding-top: 10px;
background-color: rgb(243, 243, 243);
.top {
width: 100%;
height: 360px;
margin-top: 20px;
overflow: hidden;
.chart-container {
position: relative;
width: 100%;
height: 100%;
padding: 20px;
background-color: #fff;
}
}
.mid {
width: 100%;
height: 380px;
.chart-wrapper {
height: 340px;
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
.bottom {
width: 100%;
height: 420px;
// margin: 20px 0;
.el-row {
margin-right: 4px !important;
}
.chart-player {
width: 100%;
height: 270px;
padding: 10px;
background-color: #fff;
}
.iPlayer{
width: 100%;
height: 100%;
}
}
}
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册