update 重做菜单

Web/src/assets/style/main.less

@@ -4,12 +4,9 @@
 .main(@nav-background: @layout-header-background,
   @nav-box-shadow-color: fade(@black, 25%),
   @nav-scrollbar-background: fade(@white, 30%),
+  @nav-app-color: fade(@white, 35%),
   @logo-color: @white,
   @logo-box-shadow: none,
-  @app-selector-color: @white,
-  @app-selector-border-color: fade(@white, 10%),
-  @app-selector-background-color: fade(@white, 30%),
-  @app-selector-box-shadow-color: fade(@white, 15%),
   @header-action-color: fade(@white, 60%),
   @header-action-hover-color: @white,
   @header-action-hover-background: fade(@white, 20%),
@@ -251,6 +248,52 @@
       border-right: 0;
     }
   }
+  .yo-nav {
+    padding-top: @padding-lg;
+    padding-bottom: @padding-lg;
+    &--row {
+      padding: 1px 0;
+
+      column-gap: @padding-md;
+      column-count: 3;
+    }
+    &--col {
+      break-inside: avoid;
+    }
+    &--sub-item {
+    }
+    &--item-group {
+      font-size: @font-size-base;
+      line-height: 1.5;
+
+      margin-bottom: @padding-xs;
+      padding-top: @padding-xs * 2;
+
+      color: fade(@black, 35%);
+      border: @border-width-base @border-style-base transparent;
+    }
+    &--item {
+      font-size: @font-size-base;
+      line-height: 1.5;
+
+      position: relative;
+
+      margin-bottom: @padding-xs;
+      padding: @padding-xs @padding-sm;
+
+      cursor: pointer;
+      transition: @animation-duration-fast;
+
+      border: @border-width-base @border-style-base @border-color-split;
+      border-radius: @border-radius-base;
+      background-color: @white;
+      &:hover {
+        color: @white;
+        border-color: @primary-color;
+        background-color: @primary-color;
+      }
+    }
+  }
   .yo-layout--left-menu,
   .yo-layout--right-menu {
     position: absolute;
@@ -345,15 +388,21 @@
           position: relative;
           z-index: 10;
 
-          display: flex;
           flex: 1 1 100%;
-          flex-direction: column;
 
           box-shadow: 2px 0 8px @nav-box-shadow-color;
+          &--app {
+            font-size: @font-size-sm;
+
+            margin-top: @padding-sm;
+            padding: 0 @padding-md;
+
+            color: @nav-app-color;
+          }
         }
         .swiper-container {
           position: absolute;
-          top: (@layout-header-height / 2) + (@padding-xxs * 2);
+          top: 0;
           left: 0;
           bottom: 0;
 
@@ -385,28 +434,6 @@
             }
           }
         }
-        .yo-apps-selector {
-          >span {
-            line-height: @layout-header-height / 2 - 2px;
-
-            display: block;
-
-            height: @layout-header-height / 2;
-            margin: @padding-xxs @padding-xs;
-
-            cursor: pointer;
-            transition: @animation-duration-slow box-shadow;
-            text-align: center;
-
-            color: @app-selector-color;
-            border: @border-width-base @border-style-base @app-selector-border-color;
-            border-radius: @border-radius-base;
-            background-color: @app-selector-background-color;
-            &:hover {
-              box-shadow: 0 0 15px @app-selector-box-shadow-color;
-            }
-          }
-        }
       }
     }
   }