|
|
@ -1,9 +1,20 @@ |
|
|
|
<template> |
|
|
|
<el-container class="layout-cont"> |
|
|
|
<el-header class="header-cont"> |
|
|
|
<h1> |
|
|
|
QMPlus gin-vue-admin |
|
|
|
</h1> |
|
|
|
<h1 class="fl-left">QMPlus gin-vue-admin</h1> |
|
|
|
<div class="fl-right right-box"> |
|
|
|
<el-dropdown> |
|
|
|
<span class="el-dropdown-link"> |
|
|
|
<img :src="userInfo.headerImg" height="30" width="30" /> |
|
|
|
{{userInfo.nickName}} |
|
|
|
<i class="el-icon-arrow-down"></i> |
|
|
|
</span> |
|
|
|
<el-dropdown-menu class="dropdown-group" slot="dropdown"> |
|
|
|
<el-dropdown-item>更多信息</el-dropdown-item> |
|
|
|
<el-dropdown-item icon="el-icon-table-lamp" @click.native="LoginOut"> 登出</el-dropdown-item> |
|
|
|
</el-dropdown-menu> |
|
|
|
</el-dropdown> |
|
|
|
</div> |
|
|
|
</el-header> |
|
|
|
<el-container> |
|
|
|
<el-aside class="main-cont main-left"> |
|
|
@ -29,17 +40,20 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import Aside from '@/view/layout/aside' |
|
|
|
import { mapGetters,mapMutations } from 'vuex' |
|
|
|
export default { |
|
|
|
name: 'Layout', |
|
|
|
components: { |
|
|
|
Aside |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
...mapMutations("user",['LoginOut']), |
|
|
|
totalCollapse() { |
|
|
|
this.$bus.emit('totalCollapse') |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapGetters('user', ['userInfo']), |
|
|
|
title() { |
|
|
|
return this.$route.meta.title || '当前页面' |
|
|
|
}, |
|
|
@ -51,13 +65,27 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
|
|
|
|
$headerHigh: 52px; |
|
|
|
$mainHight: calc(100vh - 52px); |
|
|
|
.el-scrollbar__wrap{ |
|
|
|
.el-dropdown-link { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.dropdown-group{ |
|
|
|
min-width: 100px; |
|
|
|
} |
|
|
|
.el-scrollbar__wrap { |
|
|
|
padding-bottom: 17px; |
|
|
|
} |
|
|
|
.layout-cont { |
|
|
|
.right-box { |
|
|
|
text-align: center; |
|
|
|
vertical-align: middle; |
|
|
|
img { |
|
|
|
vertical-align: middle; |
|
|
|
border:1px solid #ccc; |
|
|
|
border-radius: 6px; |
|
|
|
} |
|
|
|
} |
|
|
|
.menu-contorl { |
|
|
|
line-height: 52px; |
|
|
|
font-size: 20px; |
|
|
@ -68,7 +96,7 @@ $mainHight: calc(100vh - 52px); |
|
|
|
.header-cont { |
|
|
|
height: $headerHigh !important; |
|
|
|
background: #fff; |
|
|
|
border-bottom:1px solid #ccc; |
|
|
|
border-bottom: 1px solid #ccc; |
|
|
|
line-height: $headerHigh; |
|
|
|
} |
|
|
|
.main-cont { |
|
|
@ -103,10 +131,10 @@ $mainHight: calc(100vh - 52px); |
|
|
|
overflow: auto; |
|
|
|
background: #fff; |
|
|
|
&::-webkit-scrollbar { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
display: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.el-menu-vertical { |
|
|
|
height: calc(100vh - 67px) !important; |
|
|
|
visibility: auto; |
|
|
|