|
|
|
@ -2,15 +2,16 @@ |
|
|
|
<el-container class="layout-cont"> |
|
|
|
<el-container> |
|
|
|
<el-aside class="main-cont main-left"> |
|
|
|
<h1 class="admin-title" :class="isCollapse&&'collapse'"> |
|
|
|
<img :src="require('@/assets/logo.png')" height="40" width="40" /> |
|
|
|
Gin-Vue-Admin |
|
|
|
</h1> |
|
|
|
<Aside class="aside" /> |
|
|
|
</el-aside> |
|
|
|
<!-- 分块滑动功能 --> |
|
|
|
<el-main class="main-cont main-right"> |
|
|
|
<el-header class="header-cont"> |
|
|
|
<div @click="totalCollapse" class="menu-total"> |
|
|
|
<i class="el-icon-s-unfold" v-if="isCollapse"></i> |
|
|
|
<i class="el-icon-s-fold" v-else></i> |
|
|
|
</div> |
|
|
|
<h1 class="admin-title">Gin-Vue-Admin</h1> |
|
|
|
<div class="fl-right right-box"> |
|
|
|
<el-dropdown> |
|
|
|
<span class="el-dropdown-link"> |
|
|
|
@ -32,15 +33,16 @@ |
|
|
|
</div> |
|
|
|
</el-header> |
|
|
|
<!-- 当前面包屑用路由自动生成可根据需求修改 --> |
|
|
|
<!-- |
|
|
|
:to="{ path: item.path }" 暂时注释不用--> |
|
|
|
<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right"> |
|
|
|
<el-breadcrumb-item |
|
|
|
:key="item.path" |
|
|
|
:to="{ path: item.path }" |
|
|
|
v-for="item in matched.slice(1,matched.length)" |
|
|
|
>{{item.meta.title}}</el-breadcrumb-item> |
|
|
|
</el-breadcrumb> |
|
|
|
<transition mode="out-in" name="el-fade-in-linear"> |
|
|
|
<router-view></router-view> |
|
|
|
<router-view class="admin-box"></router-view> |
|
|
|
</transition> |
|
|
|
</el-main> |
|
|
|
</el-container> |
|
|
|
@ -52,9 +54,9 @@ import Aside from '@/view/layout/aside' |
|
|
|
import { mapGetters, mapMutations } from 'vuex' |
|
|
|
export default { |
|
|
|
name: 'Layout', |
|
|
|
data(){ |
|
|
|
return{ |
|
|
|
isCollapse:false |
|
|
|
data() { |
|
|
|
return { |
|
|
|
isCollapse: false |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
@ -63,6 +65,7 @@ export default { |
|
|
|
methods: { |
|
|
|
...mapMutations('user', ['LoginOut']), |
|
|
|
totalCollapse() { |
|
|
|
this.isCollapse = !this.isCollapse |
|
|
|
this.$bus.emit('totalCollapse') |
|
|
|
}, |
|
|
|
toPerson() { |
|
|
|
@ -77,22 +80,13 @@ export default { |
|
|
|
matched() { |
|
|
|
return this.$route.matched |
|
|
|
} |
|
|
|
}, |
|
|
|
created(){ |
|
|
|
this.$bus.on('totalCollapse', () => { |
|
|
|
this.isCollapse = !this.isCollapse |
|
|
|
console.log(this.isCollapse) |
|
|
|
}) |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
this.$bus.off('totalCollapse') |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
$headerHigh: 52px; |
|
|
|
$mainHight: calc(100vh - 52px); |
|
|
|
$mainHight: 100vh; |
|
|
|
.el-dropdown-link { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
@ -122,7 +116,7 @@ $mainHight: calc(100vh - 52px); |
|
|
|
.header-cont { |
|
|
|
height: $headerHigh !important; |
|
|
|
background: #fff; |
|
|
|
border-bottom: 1px solid #ccc; |
|
|
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); |
|
|
|
line-height: $headerHigh; |
|
|
|
} |
|
|
|
.main-cont { |
|
|
|
@ -141,16 +135,20 @@ $mainHight: calc(100vh - 52px); |
|
|
|
overflow: visible; |
|
|
|
position: relative; |
|
|
|
.menu-total { |
|
|
|
z-index: 5; |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
margin-top: -10px; |
|
|
|
line-height: 20px; |
|
|
|
font-size: 20px; |
|
|
|
border: 0 solid #ffffff; |
|
|
|
border-radius: 50%; |
|
|
|
right: -10px; |
|
|
|
background: #fff; |
|
|
|
// z-index: 5; |
|
|
|
// position: absolute; |
|
|
|
// top: 10px; |
|
|
|
// right: -35px; |
|
|
|
margin-left: -10px; |
|
|
|
float: left; |
|
|
|
margin-top: 10px; |
|
|
|
width: 30px; |
|
|
|
height: 30px; |
|
|
|
line-height: 30px; |
|
|
|
font-size: 30px; |
|
|
|
// border: 0 solid #ffffff; |
|
|
|
// border-radius: 50%; |
|
|
|
// background: #fff; |
|
|
|
} |
|
|
|
.aside { |
|
|
|
overflow: auto; |
|
|
|
@ -161,10 +159,10 @@ $mainHight: calc(100vh - 52px); |
|
|
|
} |
|
|
|
|
|
|
|
.el-menu-vertical { |
|
|
|
height: calc(100vh - 60px) !important; |
|
|
|
height: 100vh !important; |
|
|
|
visibility: auto; |
|
|
|
&:not(.el-menu--collapse) { |
|
|
|
width: 250px; |
|
|
|
width: 220px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -173,19 +171,17 @@ $mainHight: calc(100vh - 52px); |
|
|
|
} |
|
|
|
&.main-left { |
|
|
|
width: auto !important; |
|
|
|
} |
|
|
|
&.main-right { |
|
|
|
.admin-title { |
|
|
|
padding-left: 10px; |
|
|
|
font-size: 18px; |
|
|
|
float: left; |
|
|
|
font-size: 16px; |
|
|
|
vertical-align: middle; |
|
|
|
width: 240px; |
|
|
|
background:#0F3D5F; |
|
|
|
color: #fff; |
|
|
|
margin-left: 20px; |
|
|
|
img { |
|
|
|
vertical-align: middle; |
|
|
|
} |
|
|
|
height: 60px; |
|
|
|
line-height: 60px; |
|
|
|
&.collapse{ |
|
|
|
&.collapse { |
|
|
|
width: 53px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
pixel
5 years ago