|
@@ -2,10 +2,10 @@
|
|
|
<div class="sidebar" :style="collapse ? 'width:85px' : ''">
|
|
|
<div class="logo" v-if="!collapse">
|
|
|
<img src="@/assets/img/img_logo2.png" />
|
|
|
- <div class="title"><span class="point"></span>能源管理</div>
|
|
|
+ <div class="title"><span class="point"></span>{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>
|
|
|
</div>
|
|
|
<div class="logo shrink" v-else>
|
|
|
- <div class="text">能源管理</div>
|
|
|
+ <div class="text">{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>
|
|
|
</div>
|
|
|
<div class="menu-wrap no-scrollbar">
|
|
|
{{ menuListsss }}
|
|
@@ -61,6 +61,13 @@ export default {
|
|
|
},
|
|
|
openArray() {
|
|
|
return this.openList;
|
|
|
+ },
|
|
|
+ sessSetThisDetai() {
|
|
|
+ let text = '';
|
|
|
+ if (!!window.sessionStorage.getItem('setThisDetai')) {
|
|
|
+ text = JSON.parse(window.sessionStorage.getItem('setThisDetai')).name;
|
|
|
+ }
|
|
|
+ return text;
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -98,48 +105,49 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
+@import '@assets/css/public-style.scss';
|
|
|
.sidebar {
|
|
|
- width: 220px;
|
|
|
+ width: rem(220);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
background: #171f32;
|
|
|
- border-radius: 0px 30px 30px 0px;
|
|
|
+ border-radius: 0px rem(30) rem(30) 0px;
|
|
|
z-index: 2;
|
|
|
.logo {
|
|
|
width: 100%;
|
|
|
- height: 110px;
|
|
|
+ height: rem(110);
|
|
|
color: #ffffff;
|
|
|
- padding: 35px 10px 0 20px;
|
|
|
+ padding: rem(35) rem(10) 0 rem(20);
|
|
|
border-bottom: 1px solid #2a335c;
|
|
|
- margin-bottom: 25px;
|
|
|
+ margin-bottom: rem(25);
|
|
|
img {
|
|
|
- width: 90px;
|
|
|
- height: 24px;
|
|
|
+ width: rem(90);
|
|
|
+ height: rem(24);
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
- margin-right: 6px;
|
|
|
+ margin-right: rem(6);
|
|
|
}
|
|
|
.title {
|
|
|
- font-size: 16px;
|
|
|
+ font-size: rem(16);
|
|
|
font-weight: 500;
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
- border-radius: 4px;
|
|
|
+ border-radius: rem(4);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
- padding: 0px 7px;
|
|
|
+ padding: 0px rem(7);
|
|
|
}
|
|
|
.point {
|
|
|
- width: 4px;
|
|
|
- height: 4px;
|
|
|
+ width: rem(4);
|
|
|
+ height: rem(4);
|
|
|
display: inline-block;
|
|
|
// margin-right: 5px;
|
|
|
vertical-align: middle;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.text {
|
|
|
- width: 40px;
|
|
|
- margin-left: -14px;
|
|
|
+ width: rem(40);
|
|
|
+ margin-left: rem(-14);
|
|
|
}
|
|
|
}
|
|
|
.menu-wrap {
|
|
@@ -150,13 +158,13 @@ export default {
|
|
|
.menu-footer.dark {
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
- width: 220px;
|
|
|
- height: 30px;
|
|
|
+ width: rem(220);
|
|
|
+ height: rem(30);
|
|
|
|
|
|
div {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- border-radius: 0px 0 30px 0px;
|
|
|
+ border-radius: 0px 0 rem(30) 0px;
|
|
|
background-color: #171f32;
|
|
|
border: none;
|
|
|
}
|
|
@@ -172,15 +180,15 @@ export default {
|
|
|
}
|
|
|
.footer {
|
|
|
position: absolute;
|
|
|
- bottom: 30px;
|
|
|
- left: 20px;
|
|
|
+ bottom: rem(30);
|
|
|
+ left: rem(20);
|
|
|
z-index: 11;
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
+ width: rem(30);
|
|
|
+ height: rem(30);
|
|
|
img {
|
|
|
display: block;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
+ width: rem(24);
|
|
|
+ height: rem(24);
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
@@ -200,60 +208,43 @@ export default {
|
|
|
}
|
|
|
.sidebar-el-menu > div > .el-submenu.is-opened.is-active > .el-submenu__title {
|
|
|
background: #2c354a !important;
|
|
|
- border-radius: 32px 0px 0px 32px;
|
|
|
- color: rgb(39, 135, 241) !important;
|
|
|
- border-right: 2px solid #2787f1;
|
|
|
+ border-radius: rem(32) 0px 0px rem(32);
|
|
|
+ color: $mainTextColor !important;
|
|
|
+ border-right: 2px solid $mainTextColor;
|
|
|
.el-submenu__icon-arrow::before {
|
|
|
- color: rgb(39, 135, 241);
|
|
|
+ color: $mainTextColor;
|
|
|
}
|
|
|
}
|
|
|
.el-menu-item.is-active {
|
|
|
- color: rgb(39, 135, 241);
|
|
|
+ color: $mainTextColor;
|
|
|
}
|
|
|
.el-submenu.is-active > div > span {
|
|
|
- color: rgb(39, 135, 241);
|
|
|
+ color: $mainTextColor;
|
|
|
}
|
|
|
|
|
|
.sidebar .logo.shrink {
|
|
|
display: flex;
|
|
|
- font-size: 16px;
|
|
|
+ font-size: rem(16);
|
|
|
justify-content: center;
|
|
|
// color: $mainTextColor;
|
|
|
border-bottom: 2px solid #2a335c;
|
|
|
- margin-bottom: 20px;
|
|
|
+ margin-bottom: rem(20);
|
|
|
align-items: flex-start;
|
|
|
.text {
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
+ width: rem(48);
|
|
|
+ height: rem(48);
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
- border-radius: 4px;
|
|
|
+ border-radius: rem(4);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// .sidebar .logo.shrink {
|
|
|
-// display: flex;
|
|
|
-// justify-content: center;
|
|
|
-// color: #2787f1;
|
|
|
-// border-bottom: 2px solid #2a335c;
|
|
|
-// margin-bottom: 20px;
|
|
|
-// align-items: flex-start;
|
|
|
-// .text {
|
|
|
-// width: 48px;
|
|
|
-// height: 48px;
|
|
|
-// background: rgba(255, 255, 255, 0.1);
|
|
|
-// border-radius: 4px;
|
|
|
-// border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
-// text-align: center;
|
|
|
-// }
|
|
|
-// }
|
|
|
-
|
|
|
.el-menu--collapse > .is-active {
|
|
|
color: #2787f1;
|
|
|
|
|
|
background: #2c354a;
|
|
|
- border-radius: 32px 0px 0px 32px;
|
|
|
+ border-radius: rem(32) 0px 0px rem(32);
|
|
|
}
|
|
|
|
|
|
.el-menu--collapse > .is-active > .el-submenu__title {
|
|
@@ -262,9 +253,9 @@ export default {
|
|
|
.el-submenu > .el-submenu__title:hover {
|
|
|
//设置一级菜单的鼠标经过时候的样式
|
|
|
background: rgb(44, 53, 74) !important;
|
|
|
- border-radius: 32px 0px 0px 32px !important;
|
|
|
+ border-radius: rem(32) 0px 0px rem(32) !important;
|
|
|
}
|
|
|
.el-menu-item:hover {
|
|
|
- border-radius: 32px 0px 0px 32px;
|
|
|
+ border-radius: rem(32) 0px 0px rem(32);
|
|
|
}
|
|
|
</style>
|