侧栏收缩

Author: bigrocs

src/components/Layout.vue

@@ -61,15 +61,35 @@
                 >.el-submenu__icon-arrow{
                   display: none;
                 }
+                display: -webkit-box;
               }
               >.el-menu{
-                display: none;
+                display: none !important;
               }
               &:hover{
+                >.el-submenu__title{
+                  >span{
+                    margin-left: 22px;
+                    -moz-box-flex:1.0;
+                    -webkit-box-flex: 1.0;
+                    display: block;
+                  }
+                  >.el-submenu__icon-arrow{
+                    padding-top: 5px;
+                    display: block;
+                  }
+                  background-color: #222d32;
+                  width: 230px;
+                  border-top-right-radius: 4px;
+                }
                 >.el-menu{
-                  display: block;
+                  display: block !important;
                   position: absolute;
+                  width: 150px;
                   left: 50px;
+                  padding-top: 5px;
+                  padding-bottom: 5px;
+                  border-bottom-right-radius: 4px;
                 }
               }
             }
@@ -90,7 +110,7 @@
     /* 收缩侧栏后的样式end */
   }
   .layout-sidebar-left{
-    width: 200px;
+    width: 230px;
   }
   .layout-right{
     -moz-box-flex:1.0;

src/components/Layout/Sidebar.vue

@@ -3,8 +3,17 @@
     <div class="layout-logo-lg">CoreCMF</div>
     <div class="layout-logo-mini">Core</div>
     <el-menu default-active="1-4-1" theme="dark" class="sidebar-menu">
+      <div class="user-panel">
+        <div class="pull-left image">
+          <img src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
+        </div>
+        <div class="pull-left info">
+          <p>Alexander Pierce</p>
+          <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
+        </div>
+      </div>
       <el-submenu index="1">
-        <template slot="title"><i class="el-icon-message"></i><span>导航一</span></template>
+        <template slot="title"><i class="el-icon-message"></i><span>Dashboard</span></template>
           <el-menu-item index="1-1">选项1</el-menu-item>
           <el-menu-item index="1-2">选项2</el-menu-item>
           <el-menu-item index="1-3">选项3</el-menu-item>
@@ -74,7 +83,7 @@
   }
   .sidebar-menu {
     position: fixed;
-    width:200px;
+    width:230px;
     min-height: 100%;
     top: 50px;
     bottom:0;
@@ -87,6 +96,11 @@
   }
   .el-menu--dark{
     background-color: #222d32!important;
+    >.is-active{
+      >.el-submenu__title{
+        border-left-color: #dd4b39;
+      }
+    }
   }
   .el-submenu__title{
     height: 44px!important;
@@ -100,11 +114,50 @@
     background-color: #2c3b41!important;
   }
   .el-menu--dark .el-menu-item, .el-menu--dark .el-submenu__title{
+    border-left: 3px solid transparent;
     color: #b8c7ce;
   }
   .el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active, .el-menu-item.is-active{
     color:#fff;
   }
   /** 对饿了么菜单框架配色进行调整end **/
-
+  .user-panel{
+    position:relative;
+    height: 45px;
+    padding: 10px;
+    position:relative;
+    >.pull-left{
+      float:left;
+    }
+    >.image{
+      >img{
+        width:100%;
+        max-width: 45px;
+        height: auto;
+      }
+      >.img-circle{
+        border-radius: 50%;
+      }
+    }
+    >.info{
+      >a{
+        color: #fff;
+        text-decoration: none;
+        padding-right: 5px;
+        margin-top: 3px;
+        font-size: 11px;
+      }
+      >p{
+        font-weight: 600;
+        margin-bottom: 9px;
+      }
+      padding:5px 5px 5px 15px;
+      line-height: 1;
+      position: absolute;
+      left: 55px;
+    }
+    .text-success{
+      color: #3c763d;
+    }
+  }
 </style>