|
@@ -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;
|
|
|
}
|
|
|
}
|