样式

本项目使用的是 css var() 变量与 scss 预处理，在 vite 里只需安装 sass 即可，不需要安装 sass-loader。

全局变量

对应文件

@/styles/_variable.scss

基础样式

:root {
  // 基础颜色
  --vus-admin-color-base: '';
  // 白色
  --vus-admin-color-white: '';
  // 黑色
  --vus-admin-color-black: '';
  // 首选(主题)颜色
  --vus-admin-color-primary: '';
  // 背景颜色
  --vus-admin-bg-page: '';
  // 基础字体大小
  --vus-admin-font-size-base: '';
  // 字体着重
  --vus-admin-font-weight-base: '';
  // 基础family字体
  --vus-admin-family-base: '';
  // 字数family字体
  --vus-admin-family-number: '';
  // 遮罩层背景
  --vus-admin-mask-bg-color: '';
}

布局样式

// 左则sidebar菜单
:root {
  // 菜单阴影颜色
  --vus-admin-sidebar-box-shadow-color: '';
  // 菜单宽度(展开)
  --vus-admin-sidebar-max-width: '';
  // 菜单宽度(收缩)
  --vus-admin-sidebar-min-width: '';
  // ---一级菜单---
  // sidebar背景图片
  --vus-admin-sidebar-bg-img: '';
  // sidebar背景颜色
  --vus-admin-sidebar-bg-color: '';
  // el-menu 菜单背景颜色
  --vus-admin-sidebar-menu-bg-color: '';
  // el-menu 菜单item鼠标经过背景颜色
  --vus-admin-sidebar-menu-hover-color: '';
  // el-menu 菜单默认文字颜色
  --vus-admin-sidebar-menu-text-color: '';
  // el-menu 菜单当前激活的文字颜色
  --vus-admin-sidebar-menu-text-active-color: '';
  // ---子菜单---
  // el-menu 子菜单背景颜色
  --vus-admin-sidebar-sub-menu-bg-color: '';
  // el-menu 子级菜单item鼠标经过背景颜色
  --vus-admin-sidebar-sub-menu-hover-color: '';
  // el-menu 子级菜单激活时其父级的文本颜色
  --vus-admin-sidebar-sub-menu-text-active-color: '';
  // el-menu 子级菜单激活时其父级的背景颜色
  --vus-admin-sidebar-sub-menu-bg-active-color: '';
  // el-menu 子菜单滚动条背景颜色
  --vus-admin-sidebar-sub-menu-track-piece-color: '';
  // el-menu 子菜单滚动条颜色
  --vus-admin-sidebar-sub-menu-thumb-color: '';
  // ---LOGO与标题---
  // LOGO标题高度
  --vus-admin-sidebar-logo-height: '';
  // LOGO标题背景颜色
  --vus-admin-sidebar-logo-bg-color: '';
  // LOGO标题文本颜色
  --vus-admin-sidebar-logo-text-color: '';
  // LOGO标题边框颜色
  --vus-admin-sidebar-logo-border-color: '';
}

// 顶部导航栏
:root {
  // 导航栏高度
  --vus-admin-header-height: '';
  // 导航栏背景颜色
  --vus-admin-header-bg-color: '';
  // 导航栏阴影颜色
  --vus-admin-header-box-shadow-color: '';
  // 菜单申缩图标颜色
  --vus-admin-header-collapse-text-color: '';
  // 菜单申缩图标背景hover颜色
  --vus-admin-header-collapse-hover-color: '';
  // app-main padding-top =
  // 顶部导航栏(--vus-admin-header-height) + 标签栏高度(--vus-admin-tags-height)
  --vus-admin-header-tags-height: '';
  // ---用户信息---
  // 用户信息背景hover颜色
  --vus-admin-header-user-hover-color: '';
  // 用户名称颜色
  --vus-admin-header-user-name-text-color: '';
  // 用户角色名称颜色
  --vus-admin-header-user-role-text-color: '';
  // 用户信息箭头图标颜色
  --vus-admin-header-user-icon-color: '';
  // ---快捷功能(偏好设置)---
  // 快捷功能图标颜色
  --vus-admin-header-setting-text-color: '';
  // 快捷功能图标hover颜色
  --vus-admin-header-setting-text-hover-color: '';
  // 快捷功能抽屉背景颜色
  --vus-admin-header-setting-drawer-bg-color: '';
  // 快捷功能抽屉阴影颜色
  --vus-admin-header-setting-drawer-box-shadow-color: '';
  // 快捷功能抽屉标题颜色
  --vus-admin-header-setting-drawer-title-color: '';
  // ---面包屑---
  // 面包屑链接文本颜色
  --vus-admin-breadcrumb-link-color: '';
  // 面包屑链接文本hover颜色
  --vus-admin-breadcrumb-link-hover-color: '';
  // 面包屑占位符、分隔符颜色
  --vus-admin-breadcrumb-separator-color: '';
  // 面包屑默认文本颜色
  --vus-admin-breadcrumb-text-color: '';
}

// 标签栏
:root {
  // 标签栏高度
  --vus-admin-tags-height: '';
  // 标签栏背景颜色
  --vus-admin-tags-bg-color: '';
  // 标签栏阴影颜色
  --vus-admin-tags-box-shadow-color: '';
  // ---标签列表item---
  // tags item背景颜色
  --vus-admin-tags-item-bg-color: '';
  // tags item hover背景颜色
  --vus-admin-tags-item-bg-hover-color: '';
  // tags item active背景颜色
  --vus-admin-tags-item-bg-active-color: '';
  // tags item边框颜色
  --vus-admin-tags-item-border-color: '';
  // tags item hover边框颜色
  --vus-admin-tags-item-border-hover-color: '';
  // tags item active边框颜色
  --vus-admin-tags-item-border-active-color: '';
  // tags item文本颜色
  --vus-admin-tags-item-text-color: '';
  // tags item hover文本颜色
  --vus-admin-tags-item-text-hover-color: '';
  // tags item active文本颜色
  --vus-admin-tags-item-text-active-color: '';
  // ---tags关闭按钮---
  // tags标签关闭按钮hover图标颜色
  --vus-admin-tags-item-close-text-hover-color: '';
  // tags标签关闭按钮hover背景颜色
  --vus-admin-tags-item-close-bg-hover-color: '';
  // ---tags右键菜单---
  // tags右键菜单背景颜色
  --vus-admin-tags-context-menu-bg-color: '';
  // tags右键菜单阴影颜色
  --vus-admin-tags-context-menu-box-shadow-color: '';
  // tags右键菜单文本颜色
  --vus-admin-tags-context-menu-text-color: '';
  // tags右键菜单hover文本颜色
  --vus-admin-tags-context-menu-text-hover-color: '';
  // tags右键菜单hover item颜色
  --vus-admin-tags-context-menu-item-hover-color: '';
}

登录页

:root {
  // 登录页背景颜色
  --vus-admin-login-bg-color: '';
  // 登录页背景图片
  --vus-admin-login-bg-img: '';
  // 登录页wrapper宽度
  --vus-admin-login-wrapper-width: '';
  // 登录页wrapper最大宽度
  --vus-admin-login-wrapper-max-width: '';
  // 登录页wrapper padding
  --vus-admin-login-wrapper-padding: '';
  // 登录页form padding
  --vus-admin-login-form-padding: '';
  // 登录页form背景颜色
  --vus-admin-login-form-bg-color: '';
  // 登录页form背景图片
  --vus-admin-login-form-bg-img: '';
  // 登录页form圆角
  --vus-admin-login-form-radius: '';
  // 登录页form阴影
  --vus-admin-login-form-box-shadow: '';
  // 登录页标题文本颜色
  --vus-admin-login-title-text-color: '';
  // 登录页输入框文本颜色
  --vus-admin-login-input-text-color: '';
  // 登录页输入框背景颜色
  --vus-admin-login-input-bg-color: '';
  // 登录页输入框边框颜色
  --vus-admin-login-input-border-color: '';
  // 登录页输入框边框hover颜色
  --vus-admin-login-input-hover-border-color: '';
  // 登录页输入框前缀颜色
  --vus-admin-login-input-prefix-color: '';
  // 登录页输入框后缀颜色
  --vus-admin-login-input-suffix-color: '';
  // 登录页输入框placeholder颜色
  --vus-admin-login-input-placeholder-color: '';
}

布局样式

对应文件

@/styles/_app.scss

// 主容器
.app-container {
  // 遮罩层
  .app-mask {
  }

  // 侧边导航菜单
  .app-sidebar {
  }

  // 顶部导航栏
  .app-header {
  }

  // 主体容器
  .app-main-wrapper {
  }

  // 内容主体
  .app-main {
  }

  // 当前位置(面包屑)
  .app-breadcrumb {
  }

  // 偏好设置功能
  .app-setting-drawer {
  }

  // tags 标签
  .app-tags-wrapper {
  }

  // 用户信息
  .app-user-info {
  }

  // 隐藏侧边导航菜单(继承app-container)
  &.hideSidebar {
  }

  // 移动端(小屏)
  &.mobile {
  }
}

// 收缩菜单(popup样式)
.el-menu--vertical {
}

// 登录页样式
.app-login {
}