|
|
@@ -1,31 +1,53 @@
|
|
|
<template>
|
|
|
+<div>
|
|
|
<div class="aside__panel" :class="!collapse?'width-160':'bg'">
|
|
|
- <div class="logo flex-align-center flex-around">
|
|
|
+ <div class="logo flex-align-center">
|
|
|
+ <i class="el-icon-s-fold inline-16" @click="collapse = !collapse"></i>
|
|
|
<img v-show="img.usetype === 'actionlogo' && !collapse" v-for="img in siteinfo.attinfos" :key="img.index" style="height:40px" :src="img.url" alt="">
|
|
|
- <p v-show="collapse">班</p>
|
|
|
- <i class="el-icon-s-fold" @click="collapse = !collapse"></i>
|
|
|
</div>
|
|
|
- <p style="padding:0 20px;font-size:12px;color:#eeeeee">系统</p>
|
|
|
+ <!-- <p v-if="!collapse" style="padding:0 20px;font-size:12px;color:#eeeeee">系统</p> -->
|
|
|
<el-menu
|
|
|
:collapse="collapse"
|
|
|
style="background:none"
|
|
|
text-color="#fff"
|
|
|
- active-text-color="#000"
|
|
|
+ active-text-color="#fff"
|
|
|
class="el-menu-vertical-demo">
|
|
|
- <el-menu-item :index="String(item.systemid)" v-for="item in systemList" :key="item.index" @click="handelMenuClick(item,'system')">
|
|
|
+ <el-menu-item :index="String(item.systemid)" v-for="item in systemList" :key="item.index" @click="handelMenuClick(item,'system')" @mouseenter.native="selectStyle(item)">
|
|
|
<p style="text-align:center" v-if="collapse">{{item.systemname.substr(0, 1)}}</p>
|
|
|
<span slot="title">{{item.systemname}}</span>
|
|
|
</el-menu-item>
|
|
|
- <!-- <el-divider></el-divider> -->
|
|
|
- <p style="padding:0 20px;font-size:12px;color:#eeeeee">应用</p>
|
|
|
+ <el-divider class="divider"></el-divider>
|
|
|
+ <!-- <p v-if="!collapse" style="padding:0 20px;font-size:12px;color:#eeeeee">应用</p> -->
|
|
|
+ <!-- <el-divider content-position="left">应用</el-divider> -->
|
|
|
+ <el-menu-item :index="String(index + 10)" v-for="(item,index) in menuApp" :key="index" @click="handelMenuAppClick(item,'app')" @mouseenter.native="selectStyle (item)">
|
|
|
+ <p class="" style="text-align:center" v-if="collapse">{{item.systemappname.substr(0, 1)}}</p>
|
|
|
+ <span slot="title">{{item.systemappname}}</span>
|
|
|
+ <i v-if="!collapse" style="float:right;line-height: 40px;" class="el-icon-error menuIconClose" @click.stop="deleteMenuApp(item)"></i>
|
|
|
+ </el-menu-item>
|
|
|
+ </el-menu>
|
|
|
+ </div>
|
|
|
+ <div v-if="collapse" :class="fixedMenu" class="aside__panel" @mouseenter="selectStyle" @mouseleave="outStyle()">>
|
|
|
+ <div class="logo flex-align-center">
|
|
|
+ <img v-show="img.usetype === 'actionlogo'" v-for="img in siteinfo.attinfos" :key="img.index" style="height:40px" :src="img.url" alt="">
|
|
|
+ </div>
|
|
|
+ <el-menu
|
|
|
+ style="background:none"
|
|
|
+ text-color="#fff"
|
|
|
+ active-text-color="#fff"
|
|
|
+ class="el-menu-vertical-demo">
|
|
|
+ <el-menu-item :index="String(item.systemid)" v-for="item in systemList" :key="item.index" @click="handelMenuClick(item,'system')">
|
|
|
+ <span slot="title">{{item.systemname}}</span>
|
|
|
+ </el-menu-item>
|
|
|
+ <el-divider class="divider"></el-divider>
|
|
|
+ <!-- <p v-if="!collapse" style="padding:0 20px;font-size:12px;color:#eeeeee">应用</p> -->
|
|
|
<!-- <el-divider content-position="left">应用</el-divider> -->
|
|
|
<el-menu-item :index="String(index + 10)" v-for="(item,index) in menuApp" :key="index" @click="handelMenuAppClick(item,'app')">
|
|
|
- <p style="text-align:center" v-if="collapse">{{item.systemappname.substr(0, 1)}}</p>
|
|
|
<span slot="title">{{item.systemappname}}</span>
|
|
|
<i v-if="!collapse" style="float:right;line-height: 40px;" class="el-icon-error menuIconClose" @click.stop="deleteMenuApp(item)"></i>
|
|
|
</el-menu-item>
|
|
|
</el-menu>
|
|
|
</div>
|
|
|
+</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -36,7 +58,8 @@ export default {
|
|
|
return {
|
|
|
systemList:[],
|
|
|
active:"0",
|
|
|
- collapse:false
|
|
|
+ collapse:true,
|
|
|
+ fixedMenu:'no__panel'
|
|
|
}
|
|
|
},
|
|
|
computed:{
|
|
|
@@ -84,7 +107,17 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
this.$store.dispatch('setAppMenu')
|
|
|
+ },
|
|
|
+ selectStyle (item) {
|
|
|
+ var _this=this;
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ _this.fixedMenu = 'pos__panel'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ outStyle (item) {
|
|
|
+ this.fixedMenu = 'no__panel'
|
|
|
}
|
|
|
+
|
|
|
},
|
|
|
mounted () {
|
|
|
this.systemList = JSON.parse(sessionStorage.getItem('module_info'))
|
|
|
@@ -102,18 +135,13 @@ export default {
|
|
|
|
|
|
</script>
|
|
|
<style>
|
|
|
-.el-menu{
|
|
|
+.aside__panel .el-menu{
|
|
|
background: none;
|
|
|
}
|
|
|
.width-160{
|
|
|
- width: 140px !important;
|
|
|
-}
|
|
|
-.bg{
|
|
|
- /* background-color: rgba(255 ,255,255,.1) !important; */
|
|
|
- /* box-shadow: 0 15px 30px rgb(0 0 0 / 10%); */
|
|
|
+ width: 160px !important;
|
|
|
}
|
|
|
.aside__panel {
|
|
|
- font-weight: bold;
|
|
|
transition: linear .3s;
|
|
|
height:100vh;
|
|
|
flex: 1 0 auto ;
|
|
|
@@ -122,17 +150,20 @@ export default {
|
|
|
transition: .2s linear;
|
|
|
/* background-color: rgba(255 ,255,255,.1) !important; */
|
|
|
}
|
|
|
+.aside__panel .el-divider--horizontal {
|
|
|
+ margin:6px 0;
|
|
|
+}
|
|
|
.aside__panel .el-menu-item{
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
- border-radius: 0 10px 10px 0;
|
|
|
- margin: 5px 0;
|
|
|
+ /* border-radius: 0 10px 10px 0; */
|
|
|
+ /* margin: 16px 0; */
|
|
|
padding-left:30px !important;
|
|
|
}
|
|
|
.aside__panel .el-menu-item:hover{
|
|
|
background-color: rgba(255 ,255,255,.2) !important;
|
|
|
/* border-radius: 0 40px 40px 0; */
|
|
|
- color:#333 !important;
|
|
|
+ /* color:#333 !important; */
|
|
|
}
|
|
|
.el-menu-item:focus, .el-menu-item:hover{
|
|
|
background: none;
|
|
|
@@ -144,9 +175,7 @@ export default {
|
|
|
</style>
|
|
|
<style scoped>
|
|
|
.is-active{
|
|
|
- background-color: rgba(255 ,255,255,1) !important;
|
|
|
- /* border-radius: 0 40px 40px 0; */
|
|
|
- color:#333 !important;
|
|
|
+ background-color: rgba(255 ,255,255,.2) !important;
|
|
|
box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
|
|
|
transition: .5 linear;
|
|
|
}
|
|
|
@@ -157,14 +186,49 @@ export default {
|
|
|
height: 62px;
|
|
|
line-height: 62px;
|
|
|
color:#fff;
|
|
|
- /* padding-left:20px; */
|
|
|
+ padding-left:30px;
|
|
|
/* border-right: 1px solid #f1f2f3; */
|
|
|
}
|
|
|
+.bg{
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+.bg .logo{
|
|
|
+ margin-left: -10px;
|
|
|
+}
|
|
|
+.bg p{
|
|
|
+ height:30px;
|
|
|
+ width: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-top:5px;
|
|
|
+ border-radius: 100%;
|
|
|
+ background-color: rgba(255 ,255,255,.2)
|
|
|
+}
|
|
|
+.is-active p{
|
|
|
+ background:none !important;
|
|
|
+}
|
|
|
.menuIconClose{
|
|
|
display: none;
|
|
|
- color:#333
|
|
|
+ opacity: .5;
|
|
|
}
|
|
|
.menuItem:hover .menuIconClose{
|
|
|
display: block;
|
|
|
}
|
|
|
+.divider{opacity: .2;}
|
|
|
+.pos__panel{
|
|
|
+ position: absolute;
|
|
|
+ width: 200px;
|
|
|
+ left:0;
|
|
|
+ top:0;
|
|
|
+ background: rgba(32, 30, 30, 0.9);
|
|
|
+ box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+.no__panel{
|
|
|
+ position: absolute;
|
|
|
+ width: 200px;
|
|
|
+ left:-200px;
|
|
|
+ top:0;
|
|
|
+ background: rgba(32, 30, 30, 0.8);
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
</style>
|