改为暗色风格主题

klp-ui/src/layout/components/Navbar.vue

@@ -106,24 +106,32 @@ export default {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  // 金属质感渐变背景
+  background: #454c51;
+  border-bottom: 1px solid #8d939b;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 
+              0 1px 1px rgba(255, 255, 255, 0.08) inset;
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: all .3s ease;
+    -webkit-tap-highlight-color: transparent;
+    padding: 0 15px;
+    border-right: 1px solid rgba(0, 0, 0, 0.05);
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.05);
+      box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08),
+                  inset -1px -1px 2px rgba(255, 255, 255, 0.05);
     }
   }
 
   .breadcrumb-container {
     float: left;
+    padding-left: 15px;
   }
 
   .topmenu-container {
@@ -147,24 +155,29 @@ export default {
 
     .right-menu-item {
       display: inline-block;
-      padding: 0 8px;
+      padding: 0 12px;
       height: 100%;
       font-size: 18px;
-      color: #5a5e66;
+      // 金属风格文字色
+      color: #ddd;
       vertical-align: text-bottom;
+      transition: all 0.2s ease;
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        position: relative;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.05);
+          box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08),
+                      inset -1px -1px 2px rgba(255, 255, 255, 0.05);
+          color: #333;
         }
       }
     }
 
     .avatar-container {
-      margin-right: 30px;
+      margin-right: 15px;
 
       .avatar-wrapper {
         margin-top: 5px;
@@ -174,18 +187,22 @@ export default {
           cursor: pointer;
           width: 40px;
           height: 40px;
-          border-radius: 10px;
+          border-radius: 8px;
+          // 头像金属边框
+          border: 1px solid #a0a6ad;
+          box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
         }
 
         .el-icon-caret-bottom {
           cursor: pointer;
           position: absolute;
-          right: -20px;
+          right: -15px;
           top: 25px;
           font-size: 12px;
+          color: #666;
         }
       }
     }
   }
 }
-</style>
+</style>