@@ -98,56 +98,30 @@
|
||||
------------------------------ */
|
||||
.sidebar {
|
||||
width: 190px;
|
||||
background: #0b1d33;
|
||||
border-right: 1px solid #0f2a4a;
|
||||
box-shadow: 4px 0 14px rgba(0, 163, 255, 0.12);
|
||||
background: #fafafa;
|
||||
border-right: 1px solid #e5e6eb;
|
||||
box-shadow: 2px 0 4px rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
/* Element 菜单自定义美化 */
|
||||
.el-menu {
|
||||
border-right: none !important;
|
||||
background: transparent !important;
|
||||
padding: 6px 6px !important;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
height: 46px !important;
|
||||
line-height: 46px !important;
|
||||
margin: 4px 2px !important;
|
||||
border-radius: 6px !important;
|
||||
color: #cfe6ff !important;
|
||||
transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
|
||||
position: relative;
|
||||
margin: 2px 4px !important;
|
||||
border-radius: 0 !important;
|
||||
transition: 0.2s !important;
|
||||
}
|
||||
.el-menu-item:hover {
|
||||
background: rgba(60, 203, 255, 0.12) !important;
|
||||
color: #e9f6ff !important;
|
||||
background: #e5e6eb55 !important;
|
||||
}
|
||||
.el-menu-item.is-active {
|
||||
background: rgba(60, 203, 255, 0.18) !important;
|
||||
color: #5bd3ff !important;
|
||||
background: #e3e6ff !important;
|
||||
color: #2f54eb !important;
|
||||
font-weight: 600;
|
||||
box-shadow: inset 0 0 0 1px rgba(91, 211, 255, 0.35),
|
||||
0 0 10px rgba(91, 211, 255, 0.25);
|
||||
}
|
||||
.el-menu-item.is-active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
width: 3px;
|
||||
background: #5bd3ff;
|
||||
box-shadow: 0 0 10px rgba(91, 211, 255, 0.6);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-menu-item i {
|
||||
color: #8db7e6 !important;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.el-menu-item.is-active i,
|
||||
.el-menu-item:hover i {
|
||||
color: #5bd3ff !important;
|
||||
}
|
||||
|
||||
/* ------------------------------
|
||||
@@ -225,9 +199,9 @@
|
||||
<div class="sidebar">
|
||||
<el-menu
|
||||
:default-active="currentView"
|
||||
background-color="#0b1d33"
|
||||
text-color="#cfe6ff"
|
||||
active-text-color="#5bd3ff"
|
||||
background-color="#fafafa"
|
||||
text-color="#555"
|
||||
active-text-color="#2f54eb"
|
||||
@select="handleSelect">
|
||||
|
||||
<el-menu-item index="1"><i class="el-icon-s-home"></i> 首页概览</el-menu-item>
|
||||
|
||||
Reference in New Issue
Block a user