cfel-base-components 2.5.52 → 2.5.54

package/src/components/layout-console/index-console.scss

@@ -21,6 +21,8 @@ ul {
     margin: 0;
     list-style: none;
     cursor: pointer;
+    position: relative;
+    z-index: 90;
 
     .#{$menuPrefixCls}-submenu-arrow {
       display: inline-block;
@@ -40,7 +42,7 @@ ul {
       &::after {
         position: absolute;
         width: 6px;
-        height: 1.25px;
+        height: 1px;
         scale: 1.25;
         background: rgba(255, 255, 255, 0.65);
         border-radius: 2px;
@@ -89,6 +91,20 @@ ul {
     
 
     > li {
+      .first-li {
+        &:hover {
+          .menu-item-icon {
+            color: #fff;
+            font-weight: 500;
+          }
+          
+          .menu-item-label {
+            color: #fff;
+            font-weight: 500;
+          }
+        }
+      }
+
       &:hover {
         > .menu-item-content {
           .menu-item-icon,
@@ -204,6 +220,20 @@ ul {
       position: relative;
       z-index: 9;
       line-height: 52px;
+      width: 100%;
+
+      .menu-item-content{
+        width: 100%;
+        padding-right: 24px;
+
+        .menu-item-label{
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+      }
+      
 
       &::before {
         content: '';
@@ -213,14 +243,14 @@ ul {
         width: 5px;
         height: 5px;
         background: #8f9cec;
-        border-radius: 50%;
+        border-radius: 100%;
         z-index: 1;
       }
 
       &::after {
         content: '';
         position: absolute;
-        left: 32.8px;
+        left: 32.9px;
         top: 0 !important;
         width: 1px;
         height: 100%;
@@ -259,10 +289,6 @@ ul {
         box-shadow: 0px 0px 30px 0px transparent;
 
         &.rc-menu-item-selected {
-          .menu-item-content {
-            width: 100%;
-            padding-right: 24px;
-          }
           .menu-item-label {
             color: #fff;
             font-weight: 500;
@@ -270,7 +296,6 @@ ul {
             align-items: center;
             padding-left: 12px;
             width: 100%;
-            padding-right: 24px;
             height: 40px;
             background: rgba(255, 255, 255, 0.05);
             box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
@@ -284,7 +309,7 @@ ul {
     }
 
     .grand-li {
-      background: #206abd;
+      background: #3568B7;
       position: relative;
       z-index: 9;
       line-height: 52px;
@@ -305,7 +330,7 @@ ul {
         width: 5px;
         height: 5px;
         background: #8f9cec;
-        border-radius: 50%;
+        border-radius: 100%;
         transform: translateY(-50%);
         z-index: 2;
       }
@@ -363,7 +388,6 @@ ul {
       &:hover {
         > .menu-item-content {
           .menu-item-icon,
-          .iconfont,
           .menu-item-label {
             color: #fff;
           }
@@ -372,12 +396,14 @@ ul {
     }
   }
 
-  .menu-collapsed-console {
+  .menu-console-collapsed {
     display: flex;
     flex-direction: column;
     align-items: center;
     list-style: none;
     cursor: pointer;
+    position: relative;
+    z-index: 20;
 
     .menu-item-content {
       font-weight: 400;
@@ -426,13 +452,15 @@ body {
   }
 
   .close-trigger-console {
+    position: relative;
+    z-index: 20;
     margin-top: 24px;
     width: 30px;
     height: 30px;
-    background: #f0f4fe;
+    background: rgba(255, 255, 255, 0.05);
     box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
     border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.55);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     display: flex;
     justify-content: center;
@@ -441,7 +469,7 @@ body {
 
   .search-console {
     position: relative;
-    z-index: 99;
+    z-index: 11;
     height: 40px;
     color: #fff;
     background: #5b6ecf;
@@ -533,7 +561,21 @@ body {
   }
 }
 
+.layout-side-mask1-console {
+  z-index: 9;
+  background: white;
+  border: 2px solid #ffffff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+}
+
+
 .layout-side-mask2-console {
+  z-index: 10;
   background: linear-gradient(227deg, #7856e6 0%, #6a6ed2 0%, #0271c3 100%) !important;
   border: 2px solid #ffffff;
   position: absolute;
@@ -559,7 +601,8 @@ body {
     cursor: pointer;
     height: 30px;
     position: relative;
-    z-index: 99;
+    z-index: 11;
+    
 
     .logo-sub {
       width: 31px;
@@ -574,36 +617,6 @@ body {
 }
 
 .layout-header-console {
-  .down {
-    transform: rotate(0deg);
-    animation: downanimation 0.3s ease-in-out;
-  }
-
-  @keyframes downanimation {
-    from {
-      transform: rotate(180deg);
-    }
-
-    to {
-      transform: rotate(0deg);
-    }
-  }
-
-  //---
-  .up {
-    transform: rotate(180deg);
-    animation: upanimation 0.3s ease-in-out;
-  }
-
-  @keyframes upanimation {
-    from {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(180deg);
-    }
-  }
 
   z-index: 1;
   height: $header-height;
@@ -659,6 +672,37 @@ body {
     border-radius: 6px;
     cursor: pointer;
 
+    &-down {
+      transform: rotate(0deg);
+      animation: downanimation 0.3s ease-in-out;
+    }
+  
+    @keyframes downanimation {
+      from {
+        transform: rotate(180deg);
+      }
+  
+      to {
+        transform: rotate(0deg);
+      }
+    }
+  
+    //---
+    &-up {
+      transform: rotate(180deg);
+      animation: upanimation 0.3s ease-in-out;
+    }
+  
+    @keyframes upanimation {
+      from {
+        transform: rotate(0deg);
+      }
+  
+      to {
+        transform: rotate(180deg);
+      }
+    }
+
     &:hover {
       background: rgba(0, 0, 0, 0.06);
     }