cfel-base-components 2.5.47 → 2.5.48

package/src/components/{layout → layout-console}/index-console.scss

@@ -1,6 +1,9 @@
 $menuPrefixCls: rc-menu;
 
-
+.ant-layout {
+  background: linear-gradient(223deg, #fef8ff 0%, #eceefe 29%, #fff9fe 100%) !important;
+  box-shadow: inset 0px -1px 0px 0px #edeefd !important;
+}
 
 ul {
   list-style: none;
@@ -8,17 +11,90 @@ ul {
   margin: 0;
 }
 
-.layout-menu {
-  height: calc(100% - 120px);
+.layout-menu-console {
+  border-radius: 16px;
+  height: calc(100% - 107px);
   overflow-y: scroll;
 
-  .menu {
-
+  .menu-console {
     padding: 0;
     margin: 0;
     list-style: none;
     cursor: pointer;
 
+    > li {
+      &:hover {
+        > .menu-item-content {
+          .menu-item-icon,
+          .menu-item-label {
+            color: #fff;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+
+    .rc-menu-submenu {
+      &:hover {
+        > .rc-menu-submenu-title {
+          .menu-item-icon,
+          .menu-item-label {
+            color: #fff;
+            font-weight: 500;
+          }
+
+          .#{$menuPrefixCls}-submenu-arrow {
+            &::before,
+            &::after {
+              background: #fff;
+            }
+          }
+        }
+      }
+    }
+
+    .rc-menu-submenu {
+      .rc-menu-submenu-title {
+        position: relative;
+
+        .menu-item-content {
+          .menu-item-icon,
+          .menu-item-label {
+            transition: all 0.3s ease-in-out;
+          }
+        }
+
+        &:hover {
+          .menu-item-content {
+            .menu-item-icon,
+            .menu-item-label {
+              color: #fff;
+              font-weight: 500;
+            }
+          }
+
+          .#{$menuPrefixCls}-submenu-arrow {
+            &::before,
+            &::after {
+              background: #fff;
+            }
+          }
+        }
+      }
+
+      .rc-menu-item {
+        &:hover {
+          .menu-item-content {
+            .menu-item-icon,
+            .menu-item-label {
+              color: #fff;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+
     .rc-menu-submenu-title {
       position: relative;
     }
@@ -67,7 +143,7 @@ ul {
         content: '';
         position: absolute;
         left: 31px;
-        top: 26px;
+        top: 24px;
         width: 5px;
         height: 5px;
         background: #8f9cec;
@@ -82,7 +158,7 @@ ul {
         top: 0 !important;
         width: 1px;
         height: 100%;
-        background: rgba(255, 255, 255, 0.25);
+        background: #929df7;
         z-index: 0;
       }
 
@@ -95,7 +171,7 @@ ul {
       }
 
       &:first-child::after {
-        top: 26px !important;
+        top: 24px !important;
       }
 
       &.rc-menu-submenu-selected {
@@ -117,7 +193,7 @@ ul {
         box-shadow: 0px 0px 30px 0px transparent;
 
         &.rc-menu-item-selected {
-          .menu-item-content{
+          .menu-item-content {
             width: 100%;
             padding-right: 24px;
           }
@@ -142,18 +218,24 @@ ul {
     }
 
     .grand-li {
-      background: #4370DA;
+      background: #206abd;
       position: relative;
       z-index: 9;
       line-height: 52px;
       display: flex;
       align-items: center;
+      margin-left: 2px;
+      width: 252px;
+
+      &:last-child {
+        box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.05);
+      }
 
       &::before {
         content: '';
         position: absolute;
         left: 49px;
-        top: 48%;
+        top: 50%;
         width: 5px;
         height: 5px;
         background: #8f9cec;
@@ -169,7 +251,7 @@ ul {
         top: 0;
         width: 1px;
         height: 100%;
-        background: rgba(255, 255, 255, 0.25);
+        background: #929df7;
         z-index: 1;
       }
 
@@ -182,11 +264,11 @@ ul {
       }
 
       &:first-child::after {
-        top: 26px !important;
+        top: 50% !important;
       }
 
       &.rc-menu-item-selected {
-        .menu-item-content{
+        .menu-item-content {
           width: 100%;
           padding-right: 24px;
           height: 52px;
@@ -211,10 +293,20 @@ ul {
           background: rgba(255, 255, 255);
         }
       }
+
+      &:hover {
+        > .menu-item-content {
+          .menu-item-icon,
+          .iconfont,
+          .menu-item-label {
+            color: #fff;
+          }
+        }
+      }
     }
   }
 
-  .menu-collapsed {
+  .menu-collapsed-console {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -244,7 +336,7 @@ body {
   overflow: hidden;
 }
 
-.layout-warps {
+.layout-warps-console {
   display: flex;
   padding: 12px;
   background-color: #f3f6fd;
@@ -253,21 +345,21 @@ body {
     display: none;
   }
 
-  .trigger {
+  .trigger-console {
     margin-right: 16px;
     width: 30px;
     height: 30px;
-    background: rgba(255,255,255,0.05);
-    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.05);
+    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.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     display: flex;
     justify-content: center;
     align-items: center;
   }
 
-  .close-trigger {
+  .close-trigger-console {
     margin-top: 24px;
     width: 30px;
     height: 30px;
@@ -281,17 +373,35 @@ body {
     align-items: center;
   }
 
-  .search {
+  .search-console {
+    position: relative;
+    z-index: 99;
     height: 40px;
     color: #fff;
-    background: #7E64F5;
-    box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.05), inset 0px -2px 0px 0px #FFFFFF22;
+    background: #5b6ecf;
+    box-shadow:
+      inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05),
+      inset 0px -2px 0px 0px #ffffff22;
     border-radius: 10px;
-    background: url('https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg-console.png') no-repeat;
     background-size: 50%;
     background-position-x: right;
-    position: relative;
 
+    &:hover {
+      background: rgba(0, 0, 0, 0.05);
+    }
+
+    .search-bg-mask {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 93px;
+      height: 38px;
+
+      img {
+        width: 93px;
+        height: 37px;
+      }
+    }
 
     .search-input {
       width: 100%;
@@ -304,9 +414,8 @@ body {
       font-size: 14px;
       color: #ffffff;
 
-
       &::placeholder {
-        color: rgba(255, 255, 255, 0.45);
+        color: rgba(255, 255, 255, 0.65);
       }
 
       // 为了兼容不同浏览器
@@ -328,13 +437,12 @@ body {
     .search-command {
       position: absolute;
       right: 4px;
-      top: 50%;
-      transform: translateY(-50%);
+      top: 4px;
       width: 40px;
       height: 30px;
-      background: #826deb;
+      background: #5b6ed0;
       border-radius: 8px;
-      border: 1px solid #8e75f2;
+      border: 1px solid #6d7cd5;
       backdrop-filter: blur(10px);
       display: flex;
       justify-content: center;
@@ -345,7 +453,7 @@ body {
     }
   }
 
-  .search-mobile {
+  .search-mobile-console {
     width: 40px;
     height: 40px;
     background: #f8f8fb;
@@ -356,13 +464,12 @@ body {
     backdrop-filter: blur(10px);
     padding-top: 11px;
     cursor: pointer;
-
-
   }
 }
 
-.layout-side-mask{
-  background: linear-gradient(227deg, #805df5 0%, #757ef6 38%, #3d76ec 100%) !important;
+.layout-side-mask2-console {
+  background: linear-gradient(227deg, #7856e6 0%, #6a6ed2 0%, #0271c3 100%) !important;
+  border: 2px solid #ffffff;
   position: absolute;
   top: 0;
   left: 0;
@@ -371,8 +478,7 @@ body {
   border-radius: 16px;
 }
 
-
-.layout-side {
+.layout-side-console {
   background: transparent !important;
   height: calc(100vh - 24px) !important;
   user-select: none;
@@ -380,32 +486,62 @@ body {
   border-radius: 16px;
   padding-top: 24px;
 
-  .header-logo {
+  .header-logo-console {
     padding-left: 16px;
     display: flex;
     justify-content: space-between;
     cursor: pointer;
     height: 30px;
+    position: relative;
+    z-index: 99;
 
-
-    .logo-sub{
+    .logo-sub {
       width: 31px;
       height: 30px;
     }
 
-
     .logo-base {
       height: 30px;
       width: 105px;
     }
+  }
 }
-}
 
-.layout-header {
+.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;
-  background: linear-gradient( 223deg, #FAF8FF 0%, #EEECFE 29%, #FFFFFF 100%);
-  box-shadow: inset 0px -1px 0px 0px #edeefd;
+  background: linear-gradient(223deg, #faf8ff 0%, #eeecfe 29%, #ffffff 100%);
   border-radius: 16px;
   border: 1px solid #ffffff;
   position: relative;
@@ -419,39 +555,35 @@ body {
     color: rgba(0, 0, 0, 0.65);
   }
 
-  .layout-header-fill {
+  .layout-header-fill-console {
     flex: 1;
   }
 
-  .layout-header-actions {
+  .layout-header-actions-console {
+    cursor: pointer;
     display: flex;
     justify-content: flex-start;
     align-items: center;
     height: 100%;
     max-width: 400px;
     z-index: 2;
+    gap: 24px;
 
     .actions-item {
-      height: 36px;
-      border-radius: 6px;
-      transition: all 0.3s;
+      line-height: 22px;
+      font-size: 14px;
       cursor: pointer;
-      margin: 0 4px;
-      padding: 0 4px;
 
       display: flex;
       justify-content: center;
       align-items: center;
-
-      &:hover {
-        background: rgba(0, 0, 0, 0.06);
-      }
     }
   }
 
-  .layout-header-user {
+  .layout-header-user-console {
     height: 48px;
     display: flex;
+    font-size: 14px;
     justify-content: flex-start;
     align-items: center;
     z-index: 2;
@@ -474,14 +606,14 @@ body {
   }
 }
 
-.layout-main {
+.layout-main-console {
   flex: 1;
   height: 100%;
   padding-left: 12px;
   overflow: auto;
 }
 
-.layout-content {
+.layout-content-console {
   width: 100%;
   height: calc(100vh - #{$header-height} - 12px - 24px);
   overflow: auto;
@@ -499,25 +631,21 @@ body {
   overflow: hidden;
 }
 
-.lists {
+.lists-console {
   position: absolute;
   z-index: 1000;
   width: 88%;
-  background: linear-gradient(
-    227deg, 
-    rgba(128, 93, 245, 0.98) 0%, 
-    rgba(117, 126, 246, 0.95) 100%
-  );
+  background: linear-gradient(227deg, #556ec611 0%, #556ec6aa 100%);
   color: #fff;
   border-radius: 16px;
-  box-shadow: 
+  box-shadow:
     0 8px 20px rgba(0, 0, 0, 0.1),
     inset 0 1px 0 rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   padding: 16px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   animation: dropDown 0.2s ease-out;
-  
+
   .ant-list-header {
     padding: 0 0 12px;
     font-weight: 500;
@@ -539,7 +667,7 @@ body {
     align-items: center;
     gap: 12px;
     font-size: 14px;
-    
+
     &:hover {
       background: rgba(255, 255, 255, 0.08);
       transform: translateX(2px);
@@ -549,16 +677,16 @@ body {
       color: rgba(255, 255, 255, 0.9);
       font-size: 16px;
     }
-    
+
     .search-item-content {
       flex: 1;
     }
-    
+
     .search-item-title {
       font-size: 14px;
       color: rgba(255, 255, 255, 0.95);
     }
-    
+
     .search-item-description {
       font-size: 12px;
       color: rgba(255, 255, 255, 0.6);
@@ -586,17 +714,15 @@ body {
   }
 }
 
-
 .#{$menuPrefixCls}-submenu-arrow {
   display: inline-block;
   position: absolute;
   top: 52%;
   right: 16px;
-  width: 10px;
-  height: 10px;
+  width: 16px;
+  height: 16px;
   transform: translateY(0);
   transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-
   // 当菜单收起时隐藏箭头
   .ant-layout-sider-collapsed & {
     display: none;
@@ -605,13 +731,12 @@ body {
   &::before,
   &::after {
     position: absolute;
-    width: 5.5px;
-    height: 1.5px;
-    background-color: white;
+    width: 6px;
+    height: 1.25px;
+    scale: 1.25;
+    background: rgba(255, 255, 255, 0.65);
     border-radius: 2px;
-    transition:
-      background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
-      transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     content: '';
   }
 
@@ -707,4 +832,3 @@ body {
     }
   }
 }
-