范庆磊
3 years ago
6 changed files with 9393 additions and 180 deletions
-
1web/package.json
-
BINweb/src/assets/dashbord.png
-
286web/src/view/dashboard/index.vue
-
197web/src/view/dashboard/index1.vue
-
3web/vue.config.js
-
8974web/yarn.lock
|
After Width: 700 | Height: 700 | Size: 70 KiB |
@ -0,0 +1,197 @@ |
|||||
|
<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> |
||||
8974
web/yarn.lock
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue