进销存pro 1.菜单栏样式修改

gaoluyang

5 天以前 ff609c6ba2f52818dad141407c3265abc883eb4f

 src/layout/components/Sidebar/index.vue

@@ -64,7 +64,7 @@
<style lang="scss" scoped>
  .sidebar-container {
    background-color: v-bind(getMenuBackground);
    border-radius: 22px;
    border-radius: var(--radius-lg);
    overflow: hidden;

    .scrollbar-wrapper {
@@ -72,29 +72,50 @@
    }

    .el-menu {
      border: none;
      border: 1px solid var(--surface-border) !important;
      height: 100%;
      width: 100% !important;
      border-radius: 22px;
      border-radius: var(--radius-lg);

      .el-menu-item,
      .el-sub-menu__title {
        margin-bottom: 6px;
        border-radius: 14px;
        margin-bottom: 5px;
        border-radius: var(--radius-xs);
        color: v-bind(getMenuTextColor);
        font-size: 13px;
        font-size: 13.5px;
        letter-spacing: 0.2px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        border: none !important;

        &:hover {
          background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
          border-radius: 14px;
          background-color: var(--menu-hover) !important;
          border-radius: var(--radius-sm);
          transform: translateX(2px);
        }
        
        .svg-icon {
          transition: all 0.25s ease;
        }
        
        &:hover .svg-icon {
          transform: scale(1.1);
          color: var(--el-color-primary, var(--accent-primary));
        }
      }

      .el-menu-item {
        color: var(--sidebar-text);
        
        &.is-active {
          color: v-bind(theme);
          background-color: var(--menu-active-bg, rgba(0, 0, 0, 0.06)) !important;
          font-weight: 600;
          background: var(--menu-active-bg) !important;
          color: var(--menu-active-text) !important;
          font-weight: 500;
          border-radius: var(--radius-sm);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
          
          .svg-icon {
            color: var(--menu-active-text) !important;
          }
        }
      }

@@ -112,45 +133,74 @@
        right: 12px;
        font-size: 14px !important;
        color: currentColor !important;
        opacity: 0.72;
        opacity: 0.7;
        transition: all 0.25s ease;
      }
      
      :deep(.el-sub-menu.is-opened .el-sub-menu__icon-arrow) {
        transform: rotate(180deg);
      }

      :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
        color: v-bind(theme) !important;
        color: var(--menu-active-text) !important;
        font-weight: 600;
        background-color: var(--menu-active-bg, rgba(0, 0, 0, 0.06)) !important;
        border-radius: 14px;
        margin: 0 10px 6px !important;
        // width: calc(100% - 20px) !important;
        border-radius: var(--radius-sm);
        margin: 0 10px 5px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box;
        overflow: hidden;
        background-clip: padding-box;
        background: var(--menu-active-bg) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border: none !important;
      }

      :deep(.el-menu-item.is-active) {
        margin: 0 10px 6px !important;
        margin: 0 10px 5px !important;
        width: calc(100% - 20px) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box;
        overflow: hidden;
        background-clip: padding-box;
        border-radius: 14px;
        border-radius: var(--radius-sm);
      }

      :deep(.el-sub-menu.is-active > .el-sub-menu__title .menu-title),
      :deep(.el-sub-menu.is-active > .el-sub-menu__title .svg-icon),
      :deep(.el-sub-menu.is-active > .el-sub-menu__title .el-sub-menu__icon-arrow),
      :deep(.el-menu-item.is-active .menu-title),
      :deep(.el-menu-item.is-active .svg-icon) {
        color: v-bind(theme) !important;
      :deep(.el-sub-menu.is-active > .el-sub-menu__title .svg-icon) {
        color: var(--menu-active-text) !important;
      }
      
      :deep(.el-menu-item.is-active .menu-title) {
        color: var(--menu-active-text) !important;
      }

      :deep(.el-sub-menu__title:hover),
      :deep(.el-menu-item:hover) {
        border-radius: 14px;
        border-radius: var(--radius-sm);
      }
      
      // 子菜单展开动画优化
      :deep(.el-sub-menu .el-menu) {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      // 菜单项进入动画
      :deep(.el-menu-item),
      :deep(.el-sub-menu__title) {
        animation: menuItemFadeIn 0.3s ease forwards;
      }
      
      @keyframes menuItemFadeIn {
        from {
          opacity: 0;
          transform: translateX(-8px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
    }
  }