范庆磊
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