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

gaoluyang

5 天以前 ff609c6ba2f52818dad141407c3265abc883eb4f

 src/assets/styles/variables.module.scss

@@ -1,221 +1,250 @@
// base color

$blue: #324157;

$light-blue: #333c46;

$red: #C03639;

$pink: #E65D6E;

$green: #30B08F;

$tiffany: #4AB7BD;

$yellow: #FEC171;

$panGreen: #30B08F;



// 默认主题变量

$menuText: #bfcbd9;

$menuActiveText: #409eff;

$menuBg: #304156;

$menuHover: #263445;



// 浅色主题theme-light

$menuLightBg: #ffffff;

$menuLightHover: #f0f1f5;

$menuLightText: #303133;

$menuLightActiveText: #409EFF;



// 基础变量

$base-sidebar-width: 200px;

$sideBarWidth: 200px;



// 菜单暗色变量

$base-menu-color: #bfcbd9;

$base-menu-color-active: #f4f4f5;

$base-menu-background: #304156;

$base-sub-menu-background: #1f2d3d;

$base-sub-menu-hover: #001528;



// 组件变量

$--color-primary: #409EFF;

$--color-success: #67C23A;

$--color-warning: #E6A23C;

$--color-danger: #F56C6C;

$--color-info: #909399;



:export {

  menuText: $menuText;

  menuActiveText: $menuActiveText;

  menuBg: $menuBg;

  menuHover: $menuHover;

  menuLightBg: $menuLightBg;

  menuLightHover: $menuLightHover;

  menuLightText: $menuLightText;

  menuLightActiveText: $menuLightActiveText;

  sideBarWidth: $sideBarWidth;

  // 导出基础颜色

  blue: $blue;

  lightBlue: $light-blue;

  red: $red;

  pink: $pink;

  green: $green;

  tiffany: $tiffany;

  yellow: $yellow;

  panGreen: $panGreen;

  // 导出组件颜色

  colorPrimary: $--color-primary;

  colorSuccess: $--color-success;

  colorWarning: $--color-warning;

  colorDanger: $--color-danger;

  colorInfo: $--color-info;

}



// CSS变量定义

:root {

  /* 亮色模式变量 */

  --sidebar-bg: #{$menuBg};

  --sidebar-text: #{$menuText};

  --menu-hover: #{$menuHover};

  
  --navbar-bg: #ffffff;

  --navbar-text: #303133;

  
  /* splitpanes default-theme 变量 */

  --splitpanes-default-bg: #ffffff;



}



// 暗黑模式变量

html.dark {

  /* 默认通用 */

  --el-bg-color: #141414;

  --el-bg-color-overlay: #1d1e1f;

  --el-text-color-primary: #ffffff;

  --el-text-color-regular: #d0d0d0;

  --el-border-color: #434343;

  --el-border-color-light: #434343;



  /* 侧边栏 */

  --sidebar-bg: #141414;

  --sidebar-text: #ffffff;

  --menu-hover: #2d2d2d;

  --menu-active-text: #{$menuActiveText};



  /* 顶部导航栏 */

  --navbar-bg: #141414;

  --navbar-text: #ffffff;

  --navbar-hover: #141414;



  /* 标签栏 */

  --tags-bg: #141414;

  --tags-item-bg: #1d1e1f;

  --tags-item-border: #303030;

  --tags-item-text: #d0d0d0;

  --tags-item-hover: #2d2d2d;

  --tags-close-hover: #64666a;



  /* splitpanes 组件暗黑模式变量 */

  --splitpanes-bg: #141414;

  --splitpanes-border: #303030;

  --splitpanes-splitter-bg: #1d1e1f;

  --splitpanes-splitter-hover-bg: #2d2d2d;



  /* blockquote 暗黑模式变量 */

  --blockquote-bg: #1d1e1f;

  --blockquote-border: #303030;

  --blockquote-text: #d0d0d0;

  
  /* Cron 时间表达式 模式变量 */

  --cron-border: #303030;



  /* splitpanes default-theme 暗黑模式变量 */

  --splitpanes-default-bg: #141414;



  /* 侧边栏菜单覆盖 */

   .sidebar-container {

    .el-menu-item, .menu-title {

      color: var(--el-text-color-regular);

    }

    & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,

    & .theme-dark .el-sub-menu .el-menu-item {

      background-color: var(--el-bg-color) !important;

    }

  }



  /* 顶部栏栏菜单覆盖 */

  .el-menu--horizontal {

    .el-menu-item {

      &:not(.is-disabled) {

        &:hover,

        &:focus {

          background-color: var(--navbar-hover) !important;

        }

      }

    }

  }



  /* 分割窗格覆盖 */

  .splitpanes {

    background-color: var(--splitpanes-bg);



    .splitpanes__pane {

      background-color: var(--splitpanes-bg);

      border-color: var(--splitpanes-border);

    }



    .splitpanes__splitter {

      background-color: var(--splitpanes-splitter-bg);

      border-color: var(--splitpanes-border);



      &:hover {

        background-color: var(--splitpanes-splitter-hover-bg);

      }



      &:before,

      &:after {

        background-color: var(--splitpanes-border);

      }

    }

  }



  /* 表格样式覆盖 */

  .el-table {

    --el-table-header-bg-color: var(--el-bg-color-overlay) !important;

    --el-table-header-text-color: var(--el-text-color-regular) !important;

    --el-table-border-color: var(--el-border-color-light) !important;

    --el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;



    .el-table__header-wrapper, .el-table__fixed-header-wrapper {

      th {

        background-color: var(--el-bg-color-overlay, #f8f8f9) !important;

        color: var(--el-text-color-regular, #515a6e);

      }

    }

  }



  /* 树组件高亮样式覆盖 */

  .el-tree {

    .el-tree-node.is-current > .el-tree-node__content {

      background-color: var(--el-bg-color-overlay) !important;

      color: var(--el-color-primary);

    }



    .el-tree-node__content:hover {

      background-color: var(--el-bg-color-overlay);

    }

  }

  
  /* 下拉菜单样式覆盖 */

  .el-dropdown-menu__item:not(.is-disabled):focus, .el-dropdown-menu__item:not(.is-disabled):hover{

    background-color: var(--navbar-hover) !important;

  }



  /* blockquote样式覆盖 */

  blockquote {

    background-color: var(--blockquote-bg) !important;

    border-left-color: var(--blockquote-border) !important;

    color: var(--blockquote-text) !important;

  }

  
  /* 时间表达式标题样式覆盖 */

  .popup-result .title {

    background: var(--cron-border);

  }



}



// base color
$blue: #324157;
$light-blue: #333c46;
$red: #c03639;
$pink: #e65d6e;
$green: #30b08f;
$tiffany: #4ab7bd;
$yellow: #fec171;
$panGreen: #30b08f;

// menu palette - 使用主题色
$menuText: #5a6478;
$menuActiveText: #ffffff;
$menuBg: #f8fafb;
$menuHover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08);

// light theme - 使用主题色
$menuLightBg: #f8fafb;
$menuLightHover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08);
$menuLightText: #3d4858;
$menuLightActiveText: #ffffff;

// layout
$base-sidebar-width: 216px;
$sideBarWidth: 216px;

// sidebar - 优化后的侧边栏配色
$base-menu-color: #5a6478;
$base-menu-color-active: #0d9488;
$base-menu-background: #f8fafb;
$base-sub-menu-background: #f0f5f4;
$base-sub-menu-hover: #ffffff;

// component - 优化后的主题色
$--color-primary: #0d9488;
$--color-success: #67c23a;
$--color-warning: #d89b41;
$--color-danger: #d25b52;
$--color-info: #7d8797;

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  menuLightBg: $menuLightBg;
  menuLightHover: $menuLightHover;
  menuLightText: $menuLightText;
  menuLightActiveText: $menuLightActiveText;
  sideBarWidth: $sideBarWidth;
  blue: $blue;
  lightBlue: $light-blue;
  red: $red;
  pink: $pink;
  green: $green;
  tiffany: $tiffany;
  yellow: $yellow;
  panGreen: $panGreen;
  colorPrimary: $--color-primary;
  colorSuccess: $--color-success;
  colorWarning: $--color-warning;
  colorDanger: $--color-danger;
  colorInfo: $--color-info;
}

:root {
  --sidebar-bg: #{$menuBg};
  --sidebar-text: #{$menuText};
  --sidebar-muted: #5a6478;
  --menu-hover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08);
  --menu-active-bg: var(--el-color-primary, #0d9488);
  --menu-active-text: #ffffff;
  --menu-surface: #f8fafb;

  --app-bg: #f0f4f3;
  --app-bg-accent: #e0ebe9;
  --surface-base: #ffffff;
  --surface-soft: #f7faf9;
  --surface-muted: #eef3f2;
  --surface-border: #d5e0de;
  --surface-border-strong: #c5d5d2;
  --text-primary: #1e293b;
  --text-secondary: #4a5568;
  --text-tertiary: #718096;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.1);
  --shadow-menu: 0 2px 8px rgba(0, 0, 0, 0.05);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-xs: 6px;

  --navbar-bg: rgba(255, 255, 255, 0.85);
  --navbar-text: #1e293b;
  --navbar-hover: rgba(13, 148, 136, 0.08);

  --tags-bg: transparent;
  --tags-item-bg: rgba(255, 255, 255, 0.8);
  --tags-item-border: rgba(197, 213, 210, 0.9);
  --tags-item-text: #4a5568;
  --tags-item-hover: rgba(13, 148, 136, 0.1);
  --tags-close-hover: rgba(13, 148, 136, 0.2);
  
  --accent-primary: #0d9488;
  --accent-light: #14b8a6;
  --accent-lighter: #5eead4;

  --splitpanes-default-bg: #ffffff;
}

html.dark {
  --el-bg-color: #141414;
  --el-bg-color-overlay: #1d1e1f;
  --el-text-color-primary: #ffffff;
  --el-text-color-regular: #d0d0d0;
  --el-border-color: #434343;
  --el-border-color-light: #434343;

  --sidebar-bg: #1a1a1a;
  --sidebar-text: #d0d0d0;
  --sidebar-muted: #888888;
  --menu-hover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.12);
  --menu-active-bg: var(--el-color-primary, #0d9488);
  --menu-active-text: #ffffff;
  --menu-surface: #1a1a1a;
  
  --text-primary: #ffffff;
  --text-secondary: #d0d0d0;
  --text-tertiary: #888888;
  --accent-primary: var(--el-color-primary, #0d9488);
  --accent-light: var(--el-color-primary-light-3, #14b8a6);

  --navbar-bg: #141414;
  --navbar-text: #ffffff;
  --navbar-hover: #141414;

  --tags-bg: #141414;
  --tags-item-bg: #1d1e1f;
  --tags-item-border: #303030;
  --tags-item-text: #d0d0d0;
  --tags-item-hover: #2d2d2d;
  --tags-close-hover: #64666a;

  --splitpanes-bg: #141414;
  --splitpanes-border: #303030;
  --splitpanes-splitter-bg: #1d1e1f;
  --splitpanes-splitter-hover-bg: #2d2d2d;

  --blockquote-bg: #1d1e1f;
  --blockquote-border: #303030;
  --blockquote-text: #d0d0d0;
  --cron-border: #303030;
  --splitpanes-default-bg: #141414;

  .sidebar-container {
    .el-menu-item,
    .menu-title {
      color: var(--sidebar-text);
    }
    
    .el-menu-item.is-active,
    .el-menu-item.is-active .menu-title {
      color: var(--menu-active-text) !important;
    }

    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
    & .theme-dark .el-sub-menu .el-menu-item {
      background-color: var(--el-bg-color) !important;
    }
    
    & .theme-dark .el-sub-menu .el-menu-item.is-active {
      background-color: var(--menu-active-bg) !important;
    }
  }

  .el-menu--horizontal {
    .el-menu-item {
      &:not(.is-disabled) {
        &:hover,
        &:focus {
          background-color: var(--navbar-hover) !important;
        }
      }
    }
  }

  .splitpanes {
    background-color: var(--splitpanes-bg);

    .splitpanes__pane {
      background-color: var(--splitpanes-bg);
      border-color: var(--splitpanes-border);
    }

    .splitpanes__splitter {
      background-color: var(--splitpanes-splitter-bg);
      border-color: var(--splitpanes-border);

      &:hover {
        background-color: var(--splitpanes-splitter-hover-bg);
      }

      &:before,
      &:after {
        background-color: var(--splitpanes-border);
      }
    }
  }

  .el-table {
    --el-table-header-bg-color: var(--el-bg-color-overlay) !important;
    --el-table-header-text-color: var(--el-text-color-regular) !important;
    --el-table-border-color: var(--el-border-color-light) !important;
    --el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;

    .el-table__header-wrapper,
    .el-table__fixed-header-wrapper {
      th {
        background-color: var(--el-bg-color-overlay, #f0f1f5) !important;
        color: var(--el-text-color-regular, #515a6e);
      }
    }
  }

  .el-tree {
    .el-tree-node.is-current > .el-tree-node__content {
      background-color: var(--el-bg-color-overlay) !important;
      color: var(--el-color-primary);
    }

    .el-tree-node__content:hover {
      background-color: var(--el-bg-color-overlay);
    }
  }

  .el-dropdown-menu__item:not(.is-disabled):focus,
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: var(--navbar-hover) !important;
  }

  blockquote {
    background-color: var(--blockquote-bg) !important;
    border-left-color: var(--blockquote-border) !important;
    color: var(--blockquote-text) !important;
  }

  .popup-result .title {
    background: var(--cron-border);
  }
}