pro 1.菜单栏样式修改

gaoluyang

4 天以前 622c03d32fbb441194e87d7124d9b37c16523639

pro
1.菜单栏样式修改

 src/assets/styles/sidebar.scss

@@ -216,33 +216,38 @@
    & .nest-menu .el-sub-menu > .el-sub-menu__title,
    & .el-sub-menu .el-menu-item {
      min-width: 0 !important;
      width: calc(100% - 24px) !important;
      margin: 0 12px 8px !important;
      height: 46px;
      line-height: 46px;
      padding-left: 14px !important;
      padding-right: 14px !important;
      border-radius: 12px;
      width: calc(100% - 32px) !important;
      margin: 0 16px 6px !important;
      height: 40px;
      line-height: 40px;
      padding-left: 12px !important;
      padding-right: 12px !important;
      border-radius: 8px;
      transition: all 0.24s ease;
      color: var(--sidebar-text);
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
      background: linear-gradient(128deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
      border: none !important;
      background: transparent;
      font-size: 13px;

      &:hover {
        background: linear-gradient(128deg, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.24), rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.07)) !important;
        border-color: rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.3) !important;
        transform: translateX(2px);
        background: rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.12) !important;
        transform: translateX(4px);
      }

      &.is-active {
        background: var(--menu-active-bg, linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3))) !important;
        background-size: 180% 180%;
        background: rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.85) !important;
        color: #fff !important;
        font-weight: 500;
        box-shadow: var(--menu-active-glow, 0 10px 24px rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.34));
        animation: sidebarActiveFlow 4.6s ease infinite;
        box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.25);
      }
    }

    // 子菜单容器样式 - 增加缩进和视觉层次
    & .el-sub-menu .el-menu {
      padding: 4px 0 8px;
      margin-left: 8px;
      border-left: 2px solid rgba(255, 255, 255, 0.08);
    }
  }

  .hideSidebar {

 src/layout/components/Sidebar/SidebarItem.vue

@@ -102,57 +102,70 @@
</script>



<style lang="scss" scoped>

.sidebar-item-wrapper {
  :deep(.menu-icon) {
    width: 26px;
    height: 26px;
    margin-right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s ease;
    color: var(--sidebar-text);
    opacity: 0.88;
  }
  
  :deep(.el-menu-item:hover .menu-icon),
  :deep(.el-sub-menu__title:hover .menu-icon) {
    color: #ffffff;
    opacity: 1;
  }
.sidebar-item-wrapper {

  :deep(.menu-icon) {

    width: 26px;

    height: 26px;

    margin-right: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    transition: color 0.2s ease;

    color: var(--sidebar-text);

    opacity: 0.88;

  }

  
  :deep(.el-menu-item:hover .menu-icon),

  :deep(.el-sub-menu__title:hover .menu-icon) {

    color: #ffffff;

    opacity: 1;

  }

  

  :deep(.el-menu-item.is-active .menu-icon) {

    color: var(--menu-active-text) !important;

    opacity: 1;

  }

  

  :deep(.menu-title) {
    font-weight: 500;
    transition: color 0.2s ease;
    color: var(--sidebar-text);
    opacity: 0.82;
  }
  
  :deep(.el-menu-item:hover .menu-title),
  :deep(.el-sub-menu__title:hover .menu-title) {
    color: #ffffff;
    opacity: 1;
  }
  
  :deep(.el-menu-item.is-active .menu-title) {
    color: var(--menu-active-text) !important;
    opacity: 1;
  }
  
  :deep(.nest-menu) {
    .menu-icon {
      width: 22px;
      height: 22px;
      margin-right: 10px;
    }
    
    .menu-title { font-size: 13px; }
  }
}
  :deep(.menu-title) {

    font-weight: 500;

    transition: color 0.2s ease;

    color: var(--sidebar-text);

    opacity: 0.82;

  }

  
  :deep(.el-menu-item:hover .menu-title),

  :deep(.el-sub-menu__title:hover .menu-title) {

    color: #ffffff;

    opacity: 1;

  }

  
  :deep(.el-menu-item.is-active .menu-title) {

    color: var(--menu-active-text) !important;

    opacity: 1;

  }

  
  :deep(.nest-menu) {

    .menu-icon {

      width: 18px;

      height: 18px;

      margin-right: 8px;

      opacity: 0.7;

    }

    
    .menu-title { 
      font-size: 13px;

      opacity: 0.85;

    }

    
    .el-menu-item.is-active {

      .menu-icon {

        opacity: 1;

      }

      .menu-title {

        opacity: 1;

      }

    }

  }

}

</style>