boss_font/src/styles/index.scss

@use "./reset";
@use "./element-plus";
@use "./template-style";  // 示例模板风格
@use "./ops-ui";
// Vxe Table
@use "./vxe-table";
@import url("./vxe-table.css");

// 全局变量
$border-radius-base: 12px;  // 匹配示例模板的大圆角
$border-radius-small: 8px;
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow-base: 0 4px 6px rgba(0, 0, 0, 0.05);  // 柔和阴影
$transition-base: all 0.3s ease;

.app-container {
  padding: 25px;  // 增加内边距，更加疏朗
}

// 进度条颜色
#nprogress .bar {
  background-color: var(--el-color-primary);
  height: 3px;
}

// 混合布局左侧菜单的 hover 样式
.layout-mix .layout__sidebar--left .el-menu {
  .el-menu-item {
    &:hover {
      // 极简白主题：使用浅灰色背景
      background-color: var(--el-fill-color-light) !important;
    }
  }

  .el-sub-menu__title {
    &:hover {
      // 极简白主题：使用浅灰色背景
      background-color: var(--el-fill-color-light) !important;
    }
  }
}

// 深色主题或深蓝色侧边栏配色下的左侧菜单 hover 样式
html.dark .layout-mix .layout__sidebar--left .el-menu,
html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
  .el-menu-item {
    &:hover {
      // 深色背景：使用 CSS 变量
      background-color: var(--menu-hover) !important;
    }
  }

  .el-sub-menu__title {
    &:hover {
      // 深色背景：使用 CSS 变量
      background-color: var(--menu-hover) !important;
    }
  }
}

// 深蓝色侧边栏渐变背景（示例模板风格）- 修复空白问题
  html.sidebar-color-blue {
    // 侧边栏容器应用渐变背景
    .layout__sidebar,
    .layout-sidebar {
      background: linear-gradient(180deg, #1e293b, #0f172a) !important;
    }
    
    // 菜单容器设置为透明
    .el-menu.el-menu--vertical {
      background-color: transparent !important;
    }
  }

// 窄屏时隐藏菜单文字，只显示图标
.hideSidebar {
  // Top布局和Mix布局的水平菜单
  &.layout-top .layout__header .el-menu--horizontal,
  &.layout-mix .layout__header .el-menu--horizontal {
    .el-menu-item,
    .el-sub-menu__title {
      .menu-title,
      span:not([class*="i-svg"]):not(.el-icon) {
        display: none !important;
      }
    }
  }

  // Mix布局的左侧菜单
  &.layout-mix .layout__sidebar--left .el-menu {
    .el-menu-item,
    .el-sub-menu__title {
      .menu-title,
      span:not([class*="i-svg"]):not(.el-icon) {
        display: none !important;
      }
    }
  }
}

// 全局搜索区域样式
.search-container {
  padding: 25px 20px;  // 增加内边距
  margin-bottom: 25px;
  background-color: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color-light);
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;  // 使用更明显的阴影

  .search-buttons {
    margin-right: 0;
  }

  .el-form-item {
    margin-bottom: 20px;
  }
}

// 表格区域样式
.data-table {
  margin-bottom: 25px;
  background-color: var(--el-bg-color-overlay);
  border-radius: $border-radius-base;
  padding: 25px;
  box-shadow: $shadow-base;

  // 表格工具栏区域
  &__toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    &--actions,
    &--tools {
      display: flex;
      gap: 12px;  // 增大按钮间距
    }
  }

  // 表格内容区域
  &__content {
    margin: 0;
  }

  // 分页区域
  .el-pagination {
    justify-content: flex-end;
    margin-top: 25px;
  }
}


// 菜单样式优化 - 提高对比度和可见性
html.sidebar-color-blue {
  .el-menu {
    // 普通菜单项文字 - 提高对比度
    .el-menu-item,
    .el-sub-menu__title {
      color: #e2e8f0 !important;
      
      &:hover {
        background-color: rgba(255, 255, 255, 0.08) !important;
      }
      
      .menu-icon,
      .el-icon {
        color: #94a3b8 !important;
      }
    }
    
    // 激活菜单项 - 更明显
    .el-menu-item.is-active {
      background-color: rgba(96, 165, 250, 0.2) !important;
      border-left: 4px solid #60a5fa !important;
      color: #60a5fa !important;
      
      .menu-icon,
      .el-icon {
        color: #60a5fa !important;
      }
    }
    
    // 父菜单激活状态
    .el-sub-menu.has-active-child > .el-sub-menu__title {
      color: #60a5fa !important;
      background-color: rgba(96, 165, 250, 0.15) !important;
      
      .menu-icon,
      .el-icon {
        color: #60a5fa !important;
      }
    }
  }
}