cfel-base-components 2.5.55 → 2.5.57

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

@@ -11,6 +11,73 @@ ul {
   margin: 0;
 }
 
+.ant-popover-inner {
+  padding: 8px !important;
+}
+
+.menu-popover {
+  width: 168px;
+  font-weight: 400;
+  font-size: 14px;
+  color: #04073b;
+  text-align: left;
+  font-style: normal;
+  cursor: pointer;
+
+  .menu-item-icon {
+    background: rgba(255, 255, 255, 0.85);
+  }
+
+  .sub-list {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .sub-li {
+    width: 152px;
+    height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 400;
+    font-size: 14px;
+    padding: 6px 8px;
+
+    &:hover {
+      color: #185dfe;
+    }
+
+    &:not(:first-child) {
+      margin-top: 4px;
+    }
+  }
+
+  .grand-li {
+    width: 130px;
+    height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 400;
+    font-size: 14px;
+    padding: 6px 8px;
+
+    &:hover {
+      color: #185dfe;
+    }
+
+    &:not(:first-child) {
+      margin-top: 4px;
+    }
+  }
+
+  .sub-item-selected {
+    font-weight: 500;
+    color: #3d76ec;
+    background: rgba(61, 118, 236, 0.1);
+    border-radius: 4px;
+  }
+}
+
 .layout-menu-console {
   border-radius: 16px;
   height: calc(100% - 107px);
@@ -23,6 +90,7 @@ ul {
     cursor: pointer;
     position: relative;
     z-index: 90;
+    color: rgba(255, 255, 255, 0.25);
 
     .#{$menuPrefixCls}-submenu-arrow {
       display: inline-block;
@@ -37,7 +105,7 @@ ul {
       .ant-layout-sider-collapsed & {
         display: none;
       }
-    
+
       &::before,
       &::after {
         position: absolute;
@@ -49,15 +117,15 @@ ul {
         transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
         content: '';
       }
-    
+
       &::before {
         transform: rotate(-45deg) translateX(2.5px);
       }
-    
+
       &::after {
         transform: rotate(45deg) translateX(-2.5px);
       }
-    
+
       // RTL support
       &.#{$menuPrefixCls}-rtl,
       .#{$menuPrefixCls}-submenu-rtl & {
@@ -65,7 +133,7 @@ ul {
         left: 16px;
       }
     }
-    
+
     .#{$menuPrefixCls}-submenu-open > .#{$menuPrefixCls}-submenu-title {
       .#{$menuPrefixCls}-submenu-arrow {
         transform: translateY(-3px);
@@ -77,7 +145,7 @@ ul {
         }
       }
     }
-    
+
     .#{$menuPrefixCls}-submenu-selected {
       > .#{$menuPrefixCls}-submenu-title {
         .#{$menuPrefixCls}-submenu-arrow {
@@ -88,7 +156,6 @@ ul {
         }
       }
     }
-    
 
     > li {
       .first-li {
@@ -97,7 +164,7 @@ ul {
             color: #fff;
             font-weight: 500;
           }
-          
+
           .menu-item-label {
             color: #fff;
             font-weight: 500;
@@ -196,6 +263,7 @@ ul {
       padding-left: 11px;
       display: flex;
     }
+
     .menu-item-icon {
       display: inline-block;
       height: 22px;
@@ -222,18 +290,17 @@ ul {
       line-height: 52px;
       width: 100%;
 
-      .menu-item-content{
+      .menu-item-content {
         width: 100%;
         padding-right: 24px;
 
-        .menu-item-label{
+        .menu-item-label {
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: space-between;
         }
       }
-      
 
       &::before {
         content: '';
@@ -309,7 +376,7 @@ ul {
     }
 
     .grand-li {
-      background: #3568B7;
+      background: #3568b7;
       position: relative;
       z-index: 9;
       line-height: 52px;
@@ -404,6 +471,19 @@ ul {
     cursor: pointer;
     position: relative;
     z-index: 20;
+    font-weight: 400;
+
+    .menu-item-icon {
+      display: inline-block;
+      height: 22px;
+      width: 22px;
+      color: rgba(255, 255, 255, 0.85);
+
+      &:hover {
+        color: #fff;
+        font-weight: 500;
+      }
+    }
 
     .menu-item-content {
       font-weight: 400;
@@ -412,6 +492,11 @@ ul {
       line-height: 24px;
       text-align: left;
     }
+
+    .submenu-selected {
+      color: #fff;
+      font-weight: 500;
+    }
   }
 
   .cpc-icon {
@@ -473,9 +558,7 @@ body {
     height: 40px;
     color: #fff;
     background: #5b6ecf;
-    box-shadow:
-      inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05),
-      inset 0px -2px 0px 0px #ffffff22;
+    box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05), inset 0px -2px 0px 0px #ffffff22;
     border-radius: 10px;
     background-size: 50%;
     background-position-x: right;
@@ -551,9 +634,7 @@ body {
     width: 40px;
     height: 40px;
     background: #f8f8fb;
-    box-shadow:
-      inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05),
-      inset 0px -2px 0px 0px #ffffff;
+    box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05), inset 0px -2px 0px 0px #ffffff;
     border-radius: 10px;
     backdrop-filter: blur(10px);
     padding-top: 11px;
@@ -573,7 +654,6 @@ body {
   border-radius: 16px;
 }
 
-
 .layout-side-mask2-console {
   z-index: 10;
   background: linear-gradient(227deg, #7856e6 0%, #6a6ed2 0%, #0271c3 100%) !important;
@@ -602,7 +682,6 @@ body {
     height: 30px;
     position: relative;
     z-index: 11;
-    
 
     .logo-sub {
       width: 31px;
@@ -617,7 +696,6 @@ body {
 }
 
 .layout-header-console {
-
   z-index: 1;
   height: $header-height;
   background: linear-gradient(223deg, #faf8ff 0%, #eeecfe 29%, #ffffff 100%);
@@ -672,37 +750,6 @@ 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);
     }
@@ -748,9 +795,7 @@ body {
   background: linear-gradient(227deg, #556ec611 0%, #556ec6aa 100%);
   color: #fff;
   border-radius: 16px;
-  box-shadow:
-    0 8px 20px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  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);
@@ -813,18 +858,6 @@ body {
   }
 }
 
-@keyframes dropDown {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-
 .#{$menuPrefixCls} {
   &-zoom-enter,
   &-zoom-appear {
@@ -856,25 +889,58 @@ body {
       transform-origin: top right !important;
     }
   }
+}
+// 箭头向下样式
+.down {
+  transform: rotate(0deg);
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
 
-  @keyframes rcMenuOpenZoomIn {
-    0% {
-      opacity: 0;
-      transform: scale(0, 0);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1, 1);
-    }
+// 箭头向上样式
+.up {
+  transform: rotate(180deg);
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+// 箭头切换动画
+.arrow-transition {
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  &.down-to-up {
+    animation: colorRotateUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
   }
 
-  @keyframes rcMenuOpenZoomOut {
-    0% {
-      transform: scale(1, 1);
-    }
-    100% {
-      opacity: 0;
-      transform: scale(0, 0);
-    }
+  &.up-to-down {
+    animation: colorRotateDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  }
+}
+
+@keyframes colorRotateUp {
+  0% {
+    transform: rotate(0deg) scale(1);
+    color: currentColor;
+  }
+  50% {
+    transform: rotate(90deg) scale(1.2);
+    color: #1890ff;
+  }
+  100% {
+    transform: rotate(180deg) scale(1);
+    color: currentColor;
+  }
+}
+
+@keyframes colorRotateDown {
+  0% {
+    transform: rotate(180deg) scale(1);
+    color: currentColor;
+  }
+  50% {
+    transform: rotate(90deg) scale(1.2);
+    color: #1890ff;
+  }
+  100% {
+    transform: rotate(0deg) scale(1);
+    color: currentColor;
   }
 }