|
@@ -1,32 +1,60 @@
|
|
|
<template>
|
|
|
- <div id="pageLeft">
|
|
|
- <div class="topContainer">
|
|
|
- <div class="logoDiv">
|
|
|
- <img :src="logoUrl" class="logoImg" />
|
|
|
+ <div id="pageLeft" :class="{leftClose:!leftIsOpen}">
|
|
|
+ <div class="leftContainer" v-if="leftIsOpen">
|
|
|
+ <div class="topContainer">
|
|
|
+ <div class="logoDiv">
|
|
|
+ <img :src="logoUrl" class="logoImg" />
|
|
|
+ </div>
|
|
|
+ <div class="middDiv">
|
|
|
+ <i class="el-icon-fa-bars fa fa-bars" @click="toggleLeft"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="middDiv">
|
|
|
- <i class="el-icon-fa-bars fa fa-bars"></i>
|
|
|
+ <div class="menuDiv">
|
|
|
+ <el-menu
|
|
|
+ text-color="#fff"
|
|
|
+ active-text-color="#ffd04b"
|
|
|
+ background-color="#364150"
|
|
|
+ router
|
|
|
+ >
|
|
|
+ <el-menu-item-group v-for="menu in menus" :key="menu.id">
|
|
|
+ <template slot="title">
|
|
|
+ <span v-text="menu.name"></span>
|
|
|
+ </template>
|
|
|
+ <leftMenu
|
|
|
+ :menu="subMenu"
|
|
|
+ v-for="subMenu in menu.children"
|
|
|
+ :key="subMenu.id"
|
|
|
+ :index="subMenu.id"
|
|
|
+ :leftIsOpen="leftIsOpen"
|
|
|
+ ></leftMenu>
|
|
|
+ </el-menu-item-group>
|
|
|
+ </el-menu>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="menuDiv">
|
|
|
- <el-menu
|
|
|
- text-color="#fff"
|
|
|
- active-text-color="#ffd04b"
|
|
|
- background-color="#364150"
|
|
|
- router
|
|
|
- >
|
|
|
- <el-menu-item-group v-for="menu in menus" :key="menu.id">
|
|
|
- <template slot="title">
|
|
|
- <span v-text="menu.name"></span>
|
|
|
- </template>
|
|
|
- <leftMenu
|
|
|
- :menu="subMenu"
|
|
|
- v-for="subMenu in menu.children"
|
|
|
- :key="subMenu.id"
|
|
|
- :index="subMenu.id"
|
|
|
- ></leftMenu>
|
|
|
- </el-menu-item-group>
|
|
|
- </el-menu>
|
|
|
+ <div class="leftContainer" v-if="!leftIsOpen">
|
|
|
+ <div class="topContainer">
|
|
|
+ <div class="middDiv middDivClose">
|
|
|
+ <i class="el-icon-fa-bars fa fa-bars el-icon-fa-barsClose" @click="toggleLeft"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="menuDiv">
|
|
|
+ <el-menu
|
|
|
+ text-color="#fff"
|
|
|
+ active-text-color="#ffd04b"
|
|
|
+ background-color="#364150"
|
|
|
+ router
|
|
|
+ >
|
|
|
+ <el-menu-item-group v-for="menu in menus" :key="menu.id">
|
|
|
+ <leftMenu
|
|
|
+ :menu="subMenu"
|
|
|
+ v-for="subMenu in menu.children"
|
|
|
+ :key="subMenu.id"
|
|
|
+ :index="subMenu.id"
|
|
|
+ :leftIsOpen="leftIsOpen"
|
|
|
+ ></leftMenu>
|
|
|
+ </el-menu-item-group>
|
|
|
+ </el-menu>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -37,13 +65,18 @@ export default {
|
|
|
props: [],
|
|
|
data() {
|
|
|
return {
|
|
|
+ leftIsOpen: true,
|
|
|
logoUrl: require("@/assets/images/logo.png"),
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState(["menus"]),
|
|
|
},
|
|
|
- methods: {},
|
|
|
+ methods: {
|
|
|
+ toggleLeft: function () {
|
|
|
+ this.leftIsOpen = !this.leftIsOpen;
|
|
|
+ },
|
|
|
+ },
|
|
|
created() {},
|
|
|
|
|
|
mounted() {},
|
|
@@ -57,8 +90,16 @@ export default {
|
|
|
#pageLeft {
|
|
|
width: 235px;
|
|
|
height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.leftClose{
|
|
|
+ width:64px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.leftContainer {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
.topContainer {
|
|
@@ -97,6 +138,10 @@ export default {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
+.el-icon-fa-barsClose{
|
|
|
+ margin-left: 0;
|
|
|
+}
|
|
|
+
|
|
|
.logoDiv {
|
|
|
flex: 1;
|
|
|
}
|
|
@@ -105,6 +150,10 @@ export default {
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
+.middDivClose{
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
.el-menu-item-group__title span {
|
|
|
font-size: 14px !important;
|
|
|
color: #68707b;
|