!8 feat(role): 添加角色菜单权限分配功能
Merge pull request !8 from Odboy/feature_theme_20260125
This commit is contained in:
@@ -34,6 +34,13 @@ export function listMenuByPid(pid) {
|
||||
})
|
||||
}
|
||||
|
||||
export function listRoleMenuByPid(pid) {
|
||||
return request({
|
||||
url: 'api/menu/listRoleMenuByPid?pid=' + pid,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
export function searchMenu(params) {
|
||||
return request({
|
||||
url: 'api/menu/searchMenu',
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
// 科技现代：极光幻境（梦幻唯美）
|
||||
// base color
|
||||
$blue: #6C5CE7;
|
||||
$light-blue: #A29BFE;
|
||||
$red: #FF7675;
|
||||
$pink: #FD79A8;
|
||||
$green: #00B894;
|
||||
$tiffany: #81ECEC;
|
||||
$yellow: #FFEAA7;
|
||||
$panGreen: #00B894;
|
||||
|
||||
// sidebar
|
||||
$menuText: #B2BEC3;
|
||||
$menuActiveText: #A29BFE;
|
||||
$subMenuActiveText: #FFFFFF;
|
||||
$menuBg: #0F0F1F;
|
||||
$menuHover: #1A1A35;
|
||||
$subMenuBg: #14142A;
|
||||
$subMenuHover: #2C2C5A;
|
||||
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// ===== Navbar 顶部导航栏样式变量 =====
|
||||
// Navbar 背景渐变色（从深靛蓝过渡到深紫蓝色）
|
||||
$navbarBgStart: $menuBg;
|
||||
$navbarBgEnd: #0A0A18;
|
||||
|
||||
// Navbar 阴影颜色和透明度
|
||||
$navbarShadowColor: rgba(162, 155, 254, 0.18);
|
||||
$navbarShadowY: 2px;
|
||||
$navbarShadowBlur: 8px;
|
||||
$navbarShadowSpread: 0px;
|
||||
|
||||
// Navbar 底部边框颜色和透明度
|
||||
$navbarBorderColor: rgba(162, 155, 254, 0.25);
|
||||
$navbarBorderWidth: 1px;
|
||||
|
||||
// Navbar 悬停背景色（hamburger 和右侧菜单项）
|
||||
$navbarHoverBg: rgba(162, 155, 254, 0.1);
|
||||
|
||||
// 右侧菜单项文字颜色
|
||||
$navbarRightMenuColor: $menuText;
|
||||
|
||||
// 右侧菜单项悬停效果颜色
|
||||
$navbarRightMenuHoverColor: $menuActiveText;
|
||||
$navbarRightMenuHoverGlow: rgba(162, 155, 254, 0.32);
|
||||
|
||||
// 头像边框颜色
|
||||
$navbarAvatarBorderColor: rgba(162, 155, 254, 0.3);
|
||||
$navbarAvatarHoverBorderColor: $menuActiveText;
|
||||
$navbarAvatarHoverGlow: rgba(162, 155, 254, 0.42);
|
||||
|
||||
// 下拉箭头颜色
|
||||
$navbarCaretColor: $menuText;
|
||||
|
||||
// ===== Hamburger 汉堡菜单按钮样式变量 =====
|
||||
// Hamburger 默认颜色
|
||||
$hamburgerColor: $menuText;
|
||||
|
||||
// Hamburger 激活状态颜色
|
||||
$hamburgerActiveColor: $menuActiveText;
|
||||
|
||||
// Hamburger 发光效果
|
||||
$hamburgerGlow: 0 0 6px rgba(162, 155, 254, 0.45);
|
||||
|
||||
// ===== Breadcrumb 面包屑导航样式变量 =====
|
||||
// Breadcrumb 文字颜色
|
||||
$breadcrumbTextColor: #F0F1F8;
|
||||
|
||||
// Breadcrumb 链接颜色（可点击项）
|
||||
$breadcrumbLinkColor: #F0F1F8;
|
||||
|
||||
// Breadcrumb 发光效果
|
||||
$breadcrumbTextGlow: rgba(162, 155, 254, 0.18);
|
||||
|
||||
// Breadcrumb 悬停颜色
|
||||
$breadcrumbHoverColor: $menuActiveText;
|
||||
|
||||
// Breadcrumb 悬停发光效果
|
||||
$breadcrumbHoverGlow: 0 0 6px rgba(162, 155, 254, 0.4);
|
||||
|
||||
// Breadcrumb 分隔符颜色
|
||||
$breadcrumbSeparatorColor: rgba(129, 236, 236, 0.55);
|
||||
|
||||
// Breadcrumb 当前页面文字颜色（不可点击项）
|
||||
$breadcrumbNoRedirectColor: #F7F8FC;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
// 赛博橙（热情奔放）
|
||||
// base color
|
||||
$blue: #FF5722;
|
||||
$light-blue: #FF7043;
|
||||
$red: #FF1744;
|
||||
$pink: #FF4081;
|
||||
$green: #00E676;
|
||||
$tiffany: #69F0AE;
|
||||
$yellow: #FFD600;
|
||||
$panGreen: #00E676;
|
||||
|
||||
// sidebar
|
||||
$menuText: #FFCCBC;
|
||||
$menuActiveText: #FF6D00;
|
||||
$subMenuActiveText: #FFFFFF;
|
||||
$menuBg: #261411;
|
||||
$menuHover: #3D1F1A;
|
||||
$subMenuBg: #1E0D0B;
|
||||
$subMenuHover: #502620;
|
||||
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// ===== Navbar 顶部导航栏样式变量 =====
|
||||
// Navbar 背景渐变色
|
||||
$navbarBgStart: $menuBg;
|
||||
$navbarBgEnd: #1A0E0C;
|
||||
|
||||
// Navbar 阴影颜色和透明度
|
||||
$navbarShadowColor: rgba(255, 109, 0, 0.25);
|
||||
$navbarShadowY: 2px;
|
||||
$navbarShadowBlur: 8px;
|
||||
$navbarShadowSpread: 0px;
|
||||
|
||||
// Navbar 底部边框颜色和透明度
|
||||
$navbarBorderColor: rgba(255, 109, 0, 0.35);
|
||||
$navbarBorderWidth: 1px;
|
||||
|
||||
// Navbar 悬停背景色（hamburger 和右侧菜单项）
|
||||
$navbarHoverBg: rgba(255, 109, 0, 0.12);
|
||||
|
||||
// 右侧菜单项文字颜色
|
||||
$navbarRightMenuColor: #FFD0BC;
|
||||
|
||||
// 右侧菜单项悬停效果颜色
|
||||
$navbarRightMenuHoverColor: $menuActiveText;
|
||||
$navbarRightMenuHoverGlow: rgba(255, 109, 0, 0.4);
|
||||
|
||||
// 头像边框颜色
|
||||
$navbarAvatarBorderColor: rgba(255, 109, 0, 0.4);
|
||||
$navbarAvatarHoverBorderColor: $menuActiveText;
|
||||
$navbarAvatarHoverGlow: rgba(255, 109, 0, 0.5);
|
||||
|
||||
// 下拉箭头颜色
|
||||
$navbarCaretColor: #FFCCBC;
|
||||
|
||||
// ===== Hamburger 汉堡菜单按钮样式变量 =====
|
||||
// Hamburger 默认颜色
|
||||
$hamburgerColor: #FFCCBC;
|
||||
|
||||
// Hamburger 激活状态颜色
|
||||
$hamburgerActiveColor: $menuActiveText;
|
||||
|
||||
// Hamburger 发光效果
|
||||
$hamburgerGlow: 0 0 8px rgba(255, 109, 0, 0.5);
|
||||
|
||||
// ===== Breadcrumb 面包屑导航样式变量 =====
|
||||
// Breadcrumb 文字颜色
|
||||
$breadcrumbTextColor: #FFFFFF;
|
||||
|
||||
// Breadcrumb 链接颜色（可点击项）
|
||||
$breadcrumbLinkColor: #FFFFFF;
|
||||
|
||||
// Breadcrumb 发光效果
|
||||
$breadcrumbTextGlow: rgba(255, 109, 0, 0.18);
|
||||
|
||||
// Breadcrumb 悬停颜色
|
||||
$breadcrumbHoverColor: $menuActiveText;
|
||||
|
||||
// Breadcrumb 悬停发光效果
|
||||
$breadcrumbHoverGlow: 0 0 8px rgba(255, 109, 0, 0.5);
|
||||
|
||||
// Breadcrumb 分隔符颜色
|
||||
$breadcrumbSeparatorColor: rgba(255, 64, 129, 0.6);
|
||||
|
||||
// Breadcrumb 当前页面文字颜色（不可点击项）
|
||||
$breadcrumbNoRedirectColor: #FFFFFF;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
// 默认风格
|
||||
// base color
|
||||
$blue: #324157;
|
||||
$light-blue: #3A71A8;
|
||||
$red: #C03639;
|
||||
$pink: #E65D6E;
|
||||
$green: #30B08F;
|
||||
$tiffany: #4AB7BD;
|
||||
$yellow: #FEC171;
|
||||
$panGreen: #30B08F;
|
||||
|
||||
// sidebar 默认
|
||||
$menuText: #bfcbd9;
|
||||
$menuActiveText: #409EFF;
|
||||
$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951
|
||||
$menuBg: #304156;
|
||||
$menuHover: #263445;
|
||||
$subMenuBg: #1f2d3d;
|
||||
$subMenuHover: #001528;
|
||||
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// ===== Navbar 顶部导航栏样式变量 =====
|
||||
// Navbar 背景渐变色（从侧边栏颜色过渡到深蓝色）
|
||||
$navbarBgStart: $menuBg;
|
||||
$navbarBgEnd: #263445;
|
||||
|
||||
// Navbar 阴影颜色和透明度
|
||||
$navbarShadowColor: rgba(0, 21, 41, 0.15);
|
||||
$navbarShadowY: 1px;
|
||||
$navbarShadowBlur: 4px;
|
||||
$navbarShadowSpread: 0px;
|
||||
|
||||
// Navbar 底部边框颜色和透明度
|
||||
$navbarBorderColor: rgba(0, 21, 41, 0.2);
|
||||
$navbarBorderWidth: 1px;
|
||||
|
||||
// Navbar 悬停背景色（hamburger 和右侧菜单项）
|
||||
$navbarHoverBg: rgba(0, 0, 0, 0.025);
|
||||
|
||||
// 右侧菜单项文字颜色
|
||||
$navbarRightMenuColor: #5a5e66;
|
||||
|
||||
// 右侧菜单项悬停效果颜色
|
||||
$navbarRightMenuHoverColor: $menuActiveText;
|
||||
$navbarRightMenuHoverGlow: transparent;
|
||||
|
||||
// 头像边框颜色
|
||||
$navbarAvatarBorderColor: transparent;
|
||||
$navbarAvatarHoverBorderColor: transparent;
|
||||
$navbarAvatarHoverGlow: transparent;
|
||||
|
||||
// 下拉箭头颜色
|
||||
$navbarCaretColor: #5a5e66;
|
||||
|
||||
// ===== Hamburger 汉堡菜单按钮样式变量 =====
|
||||
// Hamburger 默认颜色
|
||||
$hamburgerColor: $menuText;
|
||||
|
||||
// Hamburger 激活状态颜色
|
||||
$hamburgerActiveColor: $menuActiveText;
|
||||
|
||||
// Hamburger 发光效果
|
||||
$hamburgerGlow: transparent;
|
||||
|
||||
// ===== Breadcrumb 面包屑导航样式变量 =====
|
||||
// Breadcrumb 文字颜色
|
||||
$breadcrumbTextColor: #97a8be;
|
||||
|
||||
// Breadcrumb 链接颜色（可点击项）
|
||||
$breadcrumbLinkColor: #97a8be;
|
||||
|
||||
// Breadcrumb 发光效果
|
||||
$breadcrumbTextGlow: transparent;
|
||||
|
||||
// Breadcrumb 悬停颜色
|
||||
$breadcrumbHoverColor: $menuActiveText;
|
||||
|
||||
// Breadcrumb 悬停发光效果
|
||||
$breadcrumbHoverGlow: transparent;
|
||||
|
||||
// Breadcrumb 分隔符颜色
|
||||
$breadcrumbSeparatorColor: #97a8be;
|
||||
|
||||
// Breadcrumb 当前页面文字颜色（不可点击项）
|
||||
$breadcrumbNoRedirectColor: #97a8be;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
// 专业稳重（一般）
|
||||
// base color
|
||||
$blue: #3A71A8;
|
||||
$light-blue: #5A9BDB;
|
||||
$red: #D5657A;
|
||||
$pink: #E696A5;
|
||||
$green: #4AB7BD;
|
||||
$tiffany: #6BCFD5;
|
||||
$yellow: #FFD166;
|
||||
$panGreen: #4AB7BD;
|
||||
|
||||
// sidebar
|
||||
$menuText: #C0C9D5;
|
||||
$menuActiveText: #FFFFFF;
|
||||
$subMenuActiveText: #409EFF;
|
||||
$menuBg: #234781;
|
||||
$menuHover: #1D3A6B;
|
||||
$subMenuBg: #152B4F;
|
||||
$subMenuHover: #2D5BA6;
|
||||
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// ===== Navbar 顶部导航栏样式变量 =====
|
||||
// Navbar 背景渐变色（从侧边栏颜色过渡到深蓝色）
|
||||
$navbarBgStart: $menuBg;
|
||||
$navbarBgEnd: #1A3055;
|
||||
|
||||
// Navbar 阴影颜色和透明度
|
||||
$navbarShadowColor: rgba(58, 113, 168, 0.2);
|
||||
$navbarShadowY: 2px;
|
||||
$navbarShadowBlur: 8px;
|
||||
$navbarShadowSpread: 0px;
|
||||
|
||||
// Navbar 底部边框颜色和透明度
|
||||
$navbarBorderColor: rgba(90, 155, 219, 0.3);
|
||||
$navbarBorderWidth: 1px;
|
||||
|
||||
// Navbar 悬停背景色（hamburger 和右侧菜单项）
|
||||
$navbarHoverBg: rgba(90, 155, 219, 0.15);
|
||||
|
||||
// 右侧菜单项文字颜色
|
||||
$navbarRightMenuColor: $menuText;
|
||||
|
||||
// 右侧菜单项悬停效果颜色
|
||||
$navbarRightMenuHoverColor: $menuActiveText;
|
||||
$navbarRightMenuHoverGlow: rgba(90, 155, 219, 0.3);
|
||||
|
||||
// 头像边框颜色
|
||||
$navbarAvatarBorderColor: rgba(90, 155, 219, 0.3);
|
||||
$navbarAvatarHoverBorderColor: $light-blue;
|
||||
$navbarAvatarHoverGlow: rgba(90, 155, 219, 0.4);
|
||||
|
||||
// 下拉箭头颜色
|
||||
$navbarCaretColor: $menuText;
|
||||
|
||||
// ===== Hamburger 汉堡菜单按钮样式变量 =====
|
||||
// Hamburger 默认颜色
|
||||
$hamburgerColor: $menuText;
|
||||
|
||||
// Hamburger 激活状态颜色
|
||||
$hamburgerActiveColor: $menuActiveText;
|
||||
|
||||
// Hamburger 发光效果
|
||||
$hamburgerGlow: 0 0 6px rgba(90, 155, 219, 0.3);
|
||||
|
||||
// ===== Breadcrumb 面包屑导航样式变量 =====
|
||||
// Breadcrumb 文字颜色
|
||||
$breadcrumbTextColor: #F0F4F8;
|
||||
|
||||
// Breadcrumb 链接颜色（可点击项）
|
||||
$breadcrumbLinkColor: #F0F4F8;
|
||||
|
||||
// Breadcrumb 发光效果
|
||||
$breadcrumbTextGlow: rgba(90, 155, 219, 0.2);
|
||||
|
||||
// Breadcrumb 悬停颜色
|
||||
$breadcrumbHoverColor: $light-blue;
|
||||
|
||||
// Breadcrumb 悬停发光效果
|
||||
$breadcrumbHoverGlow: 0 0 6px rgba(90, 155, 219, 0.3);
|
||||
|
||||
// Breadcrumb 分隔符颜色
|
||||
$breadcrumbSeparatorColor: rgba(90, 155, 219, 0.4);
|
||||
|
||||
// Breadcrumb 当前页面文字颜色（不可点击项）
|
||||
$breadcrumbNoRedirectColor: #F5F8FC;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
// 科技现代：太阳耀斑（热烈活力）
|
||||
// base color
|
||||
$blue: #FF6B35;
|
||||
$light-blue: #FF8C42;
|
||||
$red: #E84C5B;
|
||||
$pink: #FF7B9C;
|
||||
$green: #FFC857;
|
||||
$tiffany: #FF9F45;
|
||||
$yellow: #FFD93D;
|
||||
$panGreen: #FFC857;
|
||||
|
||||
// sidebar
|
||||
$menuText: #D4A574;
|
||||
$menuActiveText: #FF8C42;
|
||||
$subMenuActiveText: #FFFFFF;
|
||||
$menuBg: #1A1512;
|
||||
$menuHover: #2A221D;
|
||||
$subMenuBg: #221E1A;
|
||||
$subMenuHover: #3D332C;
|
||||
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// ===== Navbar 顶部导航栏样式变量 =====
|
||||
// Navbar 背景渐变色（从深棕色过渡到炭黑色）
|
||||
$navbarBgStart: $menuBg;
|
||||
$navbarBgEnd: #15100D;
|
||||
|
||||
// Navbar 阴影颜色和透明度
|
||||
$navbarShadowColor: rgba(255, 140, 66, 0.2);
|
||||
$navbarShadowY: 2px;
|
||||
$navbarShadowBlur: 8px;
|
||||
$navbarShadowSpread: 0px;
|
||||
|
||||
// Navbar 底部边框颜色和透明度
|
||||
$navbarBorderColor: rgba(255, 140, 66, 0.25);
|
||||
$navbarBorderWidth: 1px;
|
||||
|
||||
// Navbar 悬停背景色（hamburger 和右侧菜单项）
|
||||
$navbarHoverBg: rgba(255, 140, 66, 0.1);
|
||||
|
||||
// 右侧菜单项文字颜色
|
||||
$navbarRightMenuColor: $menuText;
|
||||
|
||||
// 右侧菜单项悬停效果颜色
|
||||
$navbarRightMenuHoverColor: $menuActiveText;
|
||||
$navbarRightMenuHoverGlow: rgba(255, 140, 66, 0.3);
|
||||
|
||||
// 头像边框颜色
|
||||
$navbarAvatarBorderColor: rgba(255, 140, 66, 0.3);
|
||||
$navbarAvatarHoverBorderColor: $menuActiveText;
|
||||
$navbarAvatarHoverGlow: rgba(255, 140, 66, 0.45);
|
||||
|
||||
// 下拉箭头颜色
|
||||
$navbarCaretColor: $menuText;
|
||||
|
||||
// ===== Hamburger 汉堡菜单按钮样式变量 =====
|
||||
// Hamburger 默认颜色
|
||||
$hamburgerColor: $menuText;
|
||||
|
||||
// Hamburger 激活状态颜色
|
||||
$hamburgerActiveColor: $menuActiveText;
|
||||
|
||||
// Hamburger 发光效果
|
||||
$hamburgerGlow: 0 0 6px rgba(255, 140, 66, 0.4);
|
||||
|
||||
// ===== Breadcrumb 面包屑导航样式变量 =====
|
||||
// Breadcrumb 文字颜色
|
||||
$breadcrumbTextColor: #FDF6EC;
|
||||
|
||||
// Breadcrumb 链接颜色（可点击项）
|
||||
$breadcrumbLinkColor: #FDF6EC;
|
||||
|
||||
// Breadcrumb 发光效果
|
||||
$breadcrumbTextGlow: rgba(255, 140, 66, 0.15);
|
||||
|
||||
// Breadcrumb 悬停颜色
|
||||
$breadcrumbHoverColor: $menuActiveText;
|
||||
|
||||
// Breadcrumb 悬停发光效果
|
||||
$breadcrumbHoverGlow: 0 0 6px rgba(255, 140, 66, 0.35);
|
||||
|
||||
// Breadcrumb 分隔符颜色
|
||||
$breadcrumbSeparatorColor: rgba(255, 159, 69, 0.5);
|
||||
|
||||
// Breadcrumb 当前页面文字颜色（不可点击项）
|
||||
$breadcrumbNoRedirectColor: #FFF9F0;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
// 科技现代：深空极客（好看）
|
||||
// base color
|
||||
$blue: #4A90E2;
|
||||
$light-blue: #66CCFF;
|
||||
$red: #FF6B6B;
|
||||
$pink: #FF9E9E;
|
||||
$green: #66FFCC;
|
||||
$tiffany: #81D8D0;
|
||||
$yellow: #FFD93D;
|
||||
$panGreen: #66FFCC;
|
||||
|
||||
// sidebar
|
||||
$menuText: #A0AABF;
|
||||
$menuActiveText: #66FFCC;
|
||||
$subMenuActiveText: #FFFFFF;
|
||||
$menuBg: #0F1520;
|
||||
$menuHover: #1C2430;
|
||||
$subMenuBg: #1A2332;
|
||||
$subMenuHover: #2A3B5C;
|
||||
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// ===== Navbar 顶部导航栏样式变量 =====
|
||||
// Navbar 背景渐变色（从侧边栏颜色过渡到深蓝色）
|
||||
$navbarBgStart: $menuBg;
|
||||
$navbarBgEnd: #162035;
|
||||
|
||||
// Navbar 阴影颜色和透明度
|
||||
$navbarShadowColor: rgba(74, 144, 226, 0.15);
|
||||
$navbarShadowY: 2px;
|
||||
$navbarShadowBlur: 8px;
|
||||
$navbarShadowSpread: 0px;
|
||||
|
||||
// Navbar 底部边框颜色和透明度
|
||||
$navbarBorderColor: rgba(74, 144, 226, 0.2);
|
||||
$navbarBorderWidth: 1px;
|
||||
|
||||
// Navbar 悬停背景色（hamburger 和右侧菜单项）
|
||||
$navbarHoverBg: rgba(74, 144, 226, 0.1);
|
||||
|
||||
// 右侧菜单项文字颜色
|
||||
$navbarRightMenuColor: $menuText;
|
||||
|
||||
// 右侧菜单项悬停效果颜色
|
||||
$navbarRightMenuHoverColor: $menuActiveText;
|
||||
$navbarRightMenuHoverGlow: rgba(102, 255, 204, 0.3);
|
||||
|
||||
// 头像边框颜色
|
||||
$navbarAvatarBorderColor: rgba(102, 255, 204, 0.3);
|
||||
$navbarAvatarHoverBorderColor: $menuActiveText;
|
||||
$navbarAvatarHoverGlow: rgba(102, 255, 204, 0.4);
|
||||
|
||||
// 下拉箭头颜色
|
||||
$navbarCaretColor: $menuText;
|
||||
|
||||
// ===== Hamburger 汉堡菜单按钮样式变量 =====
|
||||
// Hamburger 默认颜色
|
||||
$hamburgerColor: $menuText;
|
||||
|
||||
// Hamburger 激活状态颜色
|
||||
$hamburgerActiveColor: $menuActiveText;
|
||||
|
||||
// Hamburger 发光效果
|
||||
$hamburgerGlow: 0 0 6px $menuActiveText;
|
||||
|
||||
// ===== Breadcrumb 面包屑导航样式变量 =====
|
||||
// Breadcrumb 文字颜色
|
||||
$breadcrumbTextColor: #FFFFFF;
|
||||
|
||||
// Breadcrumb 链接颜色（可点击项）
|
||||
$breadcrumbLinkColor: #FFFFFF;
|
||||
|
||||
// Breadcrumb 发光效果
|
||||
$breadcrumbTextGlow: rgba(102, 255, 204, 0.3);
|
||||
|
||||
// Breadcrumb 悬停颜色
|
||||
$breadcrumbHoverColor: $menuActiveText;
|
||||
|
||||
// Breadcrumb 悬停发光效果
|
||||
$breadcrumbHoverGlow: 0 0 6px rgba(102, 255, 204, 0.4);
|
||||
|
||||
// Breadcrumb 分隔符颜色
|
||||
$breadcrumbSeparatorColor: rgba(102, 255, 204, 0.5);
|
||||
|
||||
// Breadcrumb 当前页面文字颜色（不可点击项）
|
||||
$breadcrumbNoRedirectColor: #FFFFFF;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
// 科技现代：赛博蓝光（好看）
|
||||
// base color
|
||||
$blue: #4FC3F7;
|
||||
$light-blue: #81D4FA;
|
||||
$red: #FF8A80;
|
||||
$pink: #FFB3B8;
|
||||
$green: #80DEEA;
|
||||
$tiffany: #81D4FA;
|
||||
$yellow: #FFD54F;
|
||||
$panGreen: #80DEEA;
|
||||
|
||||
// sidebar
|
||||
$menuText: #B0B8D0;
|
||||
$menuActiveText: #4FC3F7;
|
||||
$subMenuActiveText: #FFFFFF;
|
||||
$menuBg: #0A0E17;
|
||||
$menuHover: #151A2A;
|
||||
$subMenuBg: #12182D;
|
||||
$subMenuHover: #1E3A8A;
|
||||
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// ===== Navbar 顶部导航栏样式变量 =====
|
||||
// Navbar 背景渐变色（从侧边栏颜色过渡到深蓝紫色）
|
||||
$navbarBgStart: $menuBg;
|
||||
$navbarBgEnd: #0D1422;
|
||||
|
||||
// Navbar 阴影颜色和透明度
|
||||
$navbarShadowColor: rgba(79, 195, 247, 0.15);
|
||||
$navbarShadowY: 2px;
|
||||
$navbarShadowBlur: 8px;
|
||||
$navbarShadowSpread: 0px;
|
||||
|
||||
// Navbar 底部边框颜色和透明度
|
||||
$navbarBorderColor: rgba(79, 195, 247, 0.2);
|
||||
$navbarBorderWidth: 1px;
|
||||
|
||||
// Navbar 悬停背景色（hamburger 和右侧菜单项）
|
||||
$navbarHoverBg: rgba(79, 195, 247, 0.1);
|
||||
|
||||
// 右侧菜单项文字颜色
|
||||
$navbarRightMenuColor: $menuText;
|
||||
|
||||
// 右侧菜单项悬停效果颜色
|
||||
$navbarRightMenuHoverColor: $menuActiveText;
|
||||
$navbarRightMenuHoverGlow: rgba(79, 195, 247, 0.3);
|
||||
|
||||
// 头像边框颜色
|
||||
$navbarAvatarBorderColor: rgba(79, 195, 247, 0.3);
|
||||
$navbarAvatarHoverBorderColor: $menuActiveText;
|
||||
$navbarAvatarHoverGlow: rgba(79, 195, 247, 0.4);
|
||||
|
||||
// 下拉箭头颜色
|
||||
$navbarCaretColor: $menuText;
|
||||
|
||||
// ===== Hamburger 汉堡菜单按钮样式变量 =====
|
||||
// Hamburger 默认颜色
|
||||
$hamburgerColor: $menuText;
|
||||
|
||||
// Hamburger 激活状态颜色
|
||||
$hamburgerActiveColor: $menuActiveText;
|
||||
|
||||
// Hamburger 发光效果
|
||||
$hamburgerGlow: 0 0 6px $menuActiveText;
|
||||
|
||||
// ===== Breadcrumb 面包屑导航样式变量 =====
|
||||
// Breadcrumb 文字颜色
|
||||
$breadcrumbTextColor: #FFFFFF;
|
||||
|
||||
// Breadcrumb 链接颜色（可点击项）
|
||||
$breadcrumbLinkColor: #FFFFFF;
|
||||
|
||||
// Breadcrumb 发光效果
|
||||
$breadcrumbTextGlow: rgba(79, 195, 247, 0.2);
|
||||
|
||||
// Breadcrumb 悬停颜色
|
||||
$breadcrumbHoverColor: $menuActiveText;
|
||||
|
||||
// Breadcrumb 悬停发光效果
|
||||
$breadcrumbHoverGlow: 0 0 6px rgba(79, 195, 247, 0.4);
|
||||
|
||||
// Breadcrumb 分隔符颜色
|
||||
$breadcrumbSeparatorColor: rgba(79, 195, 247, 0.5);
|
||||
|
||||
// Breadcrumb 当前页面文字颜色（不可点击项）
|
||||
$breadcrumbNoRedirectColor: #FFFFFF;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
// 科技现代：钛银脉冲（好看）
|
||||
// base color
|
||||
$blue: #393E7C;
|
||||
$light-blue: #4A50A0;
|
||||
$red: #E84C5B;
|
||||
$pink: #FF7B9C;
|
||||
$green: #4AB7BD;
|
||||
$tiffany: #64D2FF;
|
||||
$yellow: #FFD166;
|
||||
$panGreen: #4AB7BD;
|
||||
|
||||
// sidebar
|
||||
$menuText: #CCCCCC;
|
||||
$menuActiveText: #00E5FF;
|
||||
$subMenuActiveText: #FFFFFF;
|
||||
$menuBg: #1A1A2E;
|
||||
$menuHover: #222244;
|
||||
$subMenuBg: #252545;
|
||||
$subMenuHover: #393E7C;
|
||||
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// ===== Navbar 顶部导航栏样式变量 =====
|
||||
// Navbar 背景渐变色（从侧边栏颜色过渡到深紫色）
|
||||
$navbarBgStart: $menuBg;
|
||||
$navbarBgEnd: #141426;
|
||||
|
||||
// Navbar 阴影颜色和透明度
|
||||
$navbarShadowColor: rgba(0, 229, 255, 0.15);
|
||||
$navbarShadowY: 2px;
|
||||
$navbarShadowBlur: 8px;
|
||||
$navbarShadowSpread: 0px;
|
||||
|
||||
// Navbar 底部边框颜色和透明度
|
||||
$navbarBorderColor: rgba(0, 229, 255, 0.2);
|
||||
$navbarBorderWidth: 1px;
|
||||
|
||||
// Navbar 悬停背景色（hamburger 和右侧菜单项）
|
||||
$navbarHoverBg: rgba(0, 229, 255, 0.1);
|
||||
|
||||
// 右侧菜单项文字颜色
|
||||
$navbarRightMenuColor: $menuText;
|
||||
|
||||
// 右侧菜单项悬停效果颜色
|
||||
$navbarRightMenuHoverColor: $menuActiveText;
|
||||
$navbarRightMenuHoverGlow: rgba(0, 229, 255, 0.3);
|
||||
|
||||
// 头像边框颜色
|
||||
$navbarAvatarBorderColor: rgba(0, 229, 255, 0.3);
|
||||
$navbarAvatarHoverBorderColor: $menuActiveText;
|
||||
$navbarAvatarHoverGlow: rgba(0, 229, 255, 0.4);
|
||||
|
||||
// 下拉箭头颜色
|
||||
$navbarCaretColor: $menuText;
|
||||
|
||||
// ===== Hamburger 汉堡菜单按钮样式变量 =====
|
||||
// Hamburger 默认颜色
|
||||
$hamburgerColor: $menuText;
|
||||
|
||||
// Hamburger 激活状态颜色
|
||||
$hamburgerActiveColor: $menuActiveText;
|
||||
|
||||
// Hamburger 发光效果
|
||||
$hamburgerGlow: 0 0 6px $menuActiveText;
|
||||
|
||||
// ===== Breadcrumb 面包屑导航样式变量 =====
|
||||
// Breadcrumb 文字颜色
|
||||
$breadcrumbTextColor: #FFFFFF;
|
||||
|
||||
// Breadcrumb 链接颜色（可点击项）
|
||||
$breadcrumbLinkColor: #FFFFFF;
|
||||
|
||||
// Breadcrumb 发光效果
|
||||
$breadcrumbTextGlow: rgba(0, 229, 255, 0.2);
|
||||
|
||||
// Breadcrumb 悬停颜色
|
||||
$breadcrumbHoverColor: $menuActiveText;
|
||||
|
||||
// Breadcrumb 悬停发光效果
|
||||
$breadcrumbHoverGlow: 0 0 6px rgba(0, 229, 255, 0.4);
|
||||
|
||||
// Breadcrumb 分隔符颜色
|
||||
$breadcrumbSeparatorColor: rgba(0, 229, 255, 0.5);
|
||||
|
||||
// Breadcrumb 当前页面文字颜色（不可点击项）
|
||||
$breadcrumbNoRedirectColor: #FFFFFF;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
// 清新明亮：天空云朵（清新舒适）
|
||||
// base color
|
||||
$blue: #5BA3F0;
|
||||
$light-blue: #7BC4FF;
|
||||
$red: #FF6B8A;
|
||||
$pink: #FF8FA8;
|
||||
$green: #6BCB77;
|
||||
$tiffany: #7FD1AE;
|
||||
$yellow: #FFD93D;
|
||||
$panGreen: #6BCB77;
|
||||
|
||||
// sidebar
|
||||
$menuText: #2A3A4A;
|
||||
$menuActiveText: #2B7BD9;
|
||||
$subMenuActiveText: #2B7BD9;
|
||||
$menuBg: #FFFFFF;
|
||||
$menuHover: #F0F5FF;
|
||||
$subMenuBg: #F8FAFC;
|
||||
$subMenuHover: #E1E8F5;
|
||||
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// ===== Navbar 顶部导航栏样式变量 =====
|
||||
// Navbar 背景渐变色（从白色过渡到浅蓝）
|
||||
$navbarBgStart: #FFFFFF;
|
||||
$navbarBgEnd: #F5F9FF;
|
||||
|
||||
// Navbar 阴影颜色和透明度
|
||||
$navbarShadowColor: rgba(91, 163, 240, 0.15);
|
||||
$navbarShadowY: 1px;
|
||||
$navbarShadowBlur: 4px;
|
||||
$navbarShadowSpread: 0px;
|
||||
|
||||
// Navbar 底部边框颜色和透明度
|
||||
$navbarBorderColor: rgba(91, 163, 240, 0.2);
|
||||
$navbarBorderWidth: 1px;
|
||||
|
||||
// Navbar 悬停背景色（hamburger 和右侧菜单项）
|
||||
$navbarHoverBg: #F0F5FF;
|
||||
|
||||
// 右侧菜单项文字颜色
|
||||
$navbarRightMenuColor: #5A6C7D;
|
||||
|
||||
// 右侧菜单项悬停效果颜色
|
||||
$navbarRightMenuHoverColor: $menuActiveText;
|
||||
$navbarRightMenuHoverGlow: rgba(91, 163, 240, 0.2);
|
||||
|
||||
// 头像边框颜色
|
||||
$navbarAvatarBorderColor: rgba(91, 163, 240, 0.25);
|
||||
$navbarAvatarHoverBorderColor: $menuActiveText;
|
||||
$navbarAvatarHoverGlow: rgba(91, 163, 240, 0.3);
|
||||
|
||||
// 下拉箭头颜色
|
||||
$navbarCaretColor: #5A6C7D;
|
||||
|
||||
// ===== Hamburger 汉堡菜单按钮样式变量 =====
|
||||
// Hamburger 默认颜色
|
||||
$hamburgerColor: #5A6C7D;
|
||||
|
||||
// Hamburger 激活状态颜色
|
||||
$hamburgerActiveColor: $menuActiveText;
|
||||
|
||||
// Hamburger 发光效果
|
||||
$hamburgerGlow: 0 0 4px rgba(91, 163, 240, 0.3);
|
||||
|
||||
// ===== Breadcrumb 面包屑导航样式变量 =====
|
||||
// Breadcrumb 文字颜色
|
||||
$breadcrumbTextColor: #3A4A5A;
|
||||
|
||||
// Breadcrumb 链接颜色（可点击项）
|
||||
$breadcrumbLinkColor: #3A4A5A;
|
||||
|
||||
// Breadcrumb 发光效果
|
||||
$breadcrumbTextGlow: transparent;
|
||||
|
||||
// Breadcrumb 悬停颜色
|
||||
$breadcrumbHoverColor: $menuActiveText;
|
||||
|
||||
// Breadcrumb 悬停发光效果
|
||||
$breadcrumbHoverGlow: transparent;
|
||||
|
||||
// Breadcrumb 分隔符颜色
|
||||
$breadcrumbSeparatorColor: rgba(91, 163, 240, 0.4);
|
||||
|
||||
// Breadcrumb 当前页面文字颜色（不可点击项）
|
||||
$breadcrumbNoRedirectColor: #2A3A4A;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
// 清新明亮：薄荷清新（清爽自然）
|
||||
// base color
|
||||
$blue: #5F9EA0;
|
||||
$light-blue: #7DD3C0;
|
||||
$red: #FF7F7F;
|
||||
$pink: #FFA8A8;
|
||||
$green: #95E1D3;
|
||||
$tiffany: #B8F2E6;
|
||||
$yellow: #FFEAA7;
|
||||
$panGreen: #95E1D3;
|
||||
|
||||
// sidebar
|
||||
$menuText: #3A4A5A;
|
||||
$menuActiveText: #5F9EA0;
|
||||
$subMenuActiveText: #5F9EA0;
|
||||
$menuBg: #FAFEFC;
|
||||
$menuHover: #F0FAF7;
|
||||
$subMenuBg: #FCFDFB;
|
||||
$subMenuHover: #E5F5F0;
|
||||
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// ===== Navbar 顶部导航栏样式变量 =====
|
||||
// Navbar 背景渐变色（从白色过渡到淡薄荷色）
|
||||
$navbarBgStart: #FFFFFF;
|
||||
$navbarBgEnd: #F5FFFA;
|
||||
|
||||
// Navbar 阴影颜色和透明度
|
||||
$navbarShadowColor: rgba(95, 158, 160, 0.12);
|
||||
$navbarShadowY: 1px;
|
||||
$navbarShadowBlur: 4px;
|
||||
$navbarShadowSpread: 0px;
|
||||
|
||||
// Navbar 底部边框颜色和透明度
|
||||
$navbarBorderColor: rgba(95, 158, 160, 0.15);
|
||||
$navbarBorderWidth: 1px;
|
||||
|
||||
// Navbar 悬停背景色（hamburger 和右侧菜单项）
|
||||
$navbarHoverBg: #F0FAF7;
|
||||
|
||||
// 右侧菜单项文字颜色
|
||||
$navbarRightMenuColor: #5A6B7A;
|
||||
|
||||
// 右侧菜单项悬停效果颜色
|
||||
$navbarRightMenuHoverColor: $menuActiveText;
|
||||
$navbarRightMenuHoverGlow: rgba(95, 158, 160, 0.2);
|
||||
|
||||
// 头像边框颜色
|
||||
$navbarAvatarBorderColor: rgba(95, 158, 160, 0.25);
|
||||
$navbarAvatarHoverBorderColor: $menuActiveText;
|
||||
$navbarAvatarHoverGlow: rgba(95, 158, 160, 0.3);
|
||||
|
||||
// 下拉箭头颜色
|
||||
$navbarCaretColor: #5A6B7A;
|
||||
|
||||
// ===== Hamburger 汉堡菜单按钮样式变量 =====
|
||||
// Hamburger 默认颜色
|
||||
$hamburgerColor: #5A6B7A;
|
||||
|
||||
// Hamburger 激活状态颜色
|
||||
$hamburgerActiveColor: $menuActiveText;
|
||||
|
||||
// Hamburger 发光效果
|
||||
$hamburgerGlow: 0 0 4px rgba(95, 158, 160, 0.3);
|
||||
|
||||
// ===== Breadcrumb 面包屑导航样式变量 =====
|
||||
// Breadcrumb 文字颜色
|
||||
$breadcrumbTextColor: #3A4A5A;
|
||||
|
||||
// Breadcrumb 链接颜色（可点击项）
|
||||
$breadcrumbLinkColor: #3A4A5A;
|
||||
|
||||
// Breadcrumb 发光效果
|
||||
$breadcrumbTextGlow: transparent;
|
||||
|
||||
// Breadcrumb 悬停颜色
|
||||
$breadcrumbHoverColor: $menuActiveText;
|
||||
|
||||
// Breadcrumb 悬停发光效果
|
||||
$breadcrumbHoverGlow: transparent;
|
||||
|
||||
// Breadcrumb 分隔符颜色
|
||||
$breadcrumbSeparatorColor: rgba(90, 107, 122, 0.4);
|
||||
|
||||
// Breadcrumb 当前页面文字颜色（不可点击项）
|
||||
$breadcrumbNoRedirectColor: #2A3A4A;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
// 清新明亮：海风浅蓝（宁静舒适）
|
||||
// base color
|
||||
$blue: #4A90E2;
|
||||
$light-blue: #6BB3FF;
|
||||
$red: #FF7F7F;
|
||||
$pink: #FFA3A3;
|
||||
$green: #7DD3C0;
|
||||
$tiffany: #9CE6DC;
|
||||
$yellow: #FFEAA7;
|
||||
$panGreen: #7DD3C0;
|
||||
|
||||
// sidebar
|
||||
$menuText: #3A4A5A;
|
||||
$menuActiveText: #4A90E2;
|
||||
$subMenuActiveText: #4A90E2;
|
||||
$menuBg: #F5FAFF;
|
||||
$menuHover: #EBF4FF;
|
||||
$subMenuBg: #F8FCFF;
|
||||
$subMenuHover: #D9EBFF;
|
||||
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// ===== Navbar 顶部导航栏样式变量 =====
|
||||
// Navbar 背景渐变色（从白色过渡到浅蓝色）
|
||||
$navbarBgStart: #FFFFFF;
|
||||
$navbarBgEnd: #F5FAFF;
|
||||
|
||||
// Navbar 阴影颜色和透明度
|
||||
$navbarShadowColor: rgba(74, 144, 226, 0.12);
|
||||
$navbarShadowY: 1px;
|
||||
$navbarShadowBlur: 4px;
|
||||
$navbarShadowSpread: 0px;
|
||||
|
||||
// Navbar 底部边框颜色和透明度
|
||||
$navbarBorderColor: rgba(74, 144, 226, 0.15);
|
||||
$navbarBorderWidth: 1px;
|
||||
|
||||
// Navbar 悬停背景色（hamburger 和右侧菜单项）
|
||||
$navbarHoverBg: #EBF4FF;
|
||||
|
||||
// 右侧菜单项文字颜色
|
||||
$navbarRightMenuColor: #5A6C7D;
|
||||
|
||||
// 右侧菜单项悬停效果颜色
|
||||
$navbarRightMenuHoverColor: $menuActiveText;
|
||||
$navbarRightMenuHoverGlow: rgba(74, 144, 226, 0.2);
|
||||
|
||||
// 头像边框颜色
|
||||
$navbarAvatarBorderColor: rgba(74, 144, 226, 0.25);
|
||||
$navbarAvatarHoverBorderColor: $menuActiveText;
|
||||
$navbarAvatarHoverGlow: rgba(74, 144, 226, 0.3);
|
||||
|
||||
// 下拉箭头颜色
|
||||
$navbarCaretColor: #5A6C7D;
|
||||
|
||||
// ===== Hamburger 汉堡菜单按钮样式变量 =====
|
||||
// Hamburger 默认颜色
|
||||
$hamburgerColor: #5A6C7D;
|
||||
|
||||
// Hamburger 激活状态颜色
|
||||
$hamburgerActiveColor: $menuActiveText;
|
||||
|
||||
// Hamburger 发光效果
|
||||
$hamburgerGlow: 0 0 4px rgba(74, 144, 226, 0.3);
|
||||
|
||||
// ===== Breadcrumb 面包屑导航样式变量 =====
|
||||
// Breadcrumb 文字颜色
|
||||
$breadcrumbTextColor: #3A4A5A;
|
||||
|
||||
// Breadcrumb 链接颜色（可点击项）
|
||||
$breadcrumbLinkColor: #3A4A5A;
|
||||
|
||||
// Breadcrumb 发光效果
|
||||
$breadcrumbTextGlow: transparent;
|
||||
|
||||
// Breadcrumb 悬停颜色
|
||||
$breadcrumbHoverColor: $menuActiveText;
|
||||
|
||||
// Breadcrumb 悬停发光效果
|
||||
$breadcrumbHoverGlow: transparent;
|
||||
|
||||
// Breadcrumb 分隔符颜色
|
||||
$breadcrumbSeparatorColor: rgba(90, 108, 125, 0.4);
|
||||
|
||||
// Breadcrumb 当前页面文字颜色（不可点击项）
|
||||
$breadcrumbNoRedirectColor: #2A3A4A;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
// 默认风格
|
||||
// base color
|
||||
$blue: #324157;
|
||||
$light-blue: #3A71A8;
|
||||
$red: #C03639;
|
||||
$pink: #E65D6E;
|
||||
$green: #30B08F;
|
||||
$tiffany: #4AB7BD;
|
||||
$yellow: #FEC171;
|
||||
$panGreen: #30B08F;
|
||||
|
||||
// sidebar 默认
|
||||
$menuText: #bfcbd9;
|
||||
$menuActiveText: #409EFF;
|
||||
$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951
|
||||
$menuBg: #304156;
|
||||
$menuHover: #263445;
|
||||
$subMenuBg: #1f2d3d;
|
||||
$subMenuHover: #001528;
|
||||
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
// 专业稳重（一般）
|
||||
// base color
|
||||
$blue: #3A71A8;
|
||||
$light-blue: #5A9BDB;
|
||||
$red: #D5657A;
|
||||
$pink: #E696A5;
|
||||
$green: #4AB7BD;
|
||||
$tiffany: #6BCFD5;
|
||||
$yellow: #FFD166;
|
||||
$panGreen: #4AB7BD;
|
||||
|
||||
// sidebar
|
||||
$menuText: #C0C9D5;
|
||||
$menuActiveText: #FFFFFF;
|
||||
$subMenuActiveText: #409EFF;
|
||||
$menuBg: #234781;
|
||||
$menuHover: #1D3A6B;
|
||||
$subMenuBg: #152B4F;
|
||||
$subMenuHover: #2D5BA6;
|
||||
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
@@ -1 +1 @@
|
||||
@import 'variables.technology3';
|
||||
@import 'themes/light/variables.cloudsky';
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
// 科技现代：深空极客（好看）
|
||||
// base color
|
||||
$blue: #4A90E2;
|
||||
$light-blue: #66CCFF;
|
||||
$red: #FF6B6B;
|
||||
$pink: #FF9E9E;
|
||||
$green: #66FFCC;
|
||||
$tiffany: #81D8D0;
|
||||
$yellow: #FFD93D;
|
||||
$panGreen: #66FFCC;
|
||||
|
||||
// sidebar
|
||||
$menuText: #A0AABF;
|
||||
$menuActiveText: #66FFCC;
|
||||
$subMenuActiveText: #FFFFFF;
|
||||
$menuBg: #0F1520;
|
||||
$menuHover: #1C2430;
|
||||
$subMenuBg: #1A2332;
|
||||
$subMenuHover: #2A3B5C;
|
||||
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
// 科技现代：赛博蓝光（好看）
|
||||
// base color
|
||||
$blue: #4FC3F7;
|
||||
$light-blue: #81D4FA;
|
||||
$red: #FF8A80;
|
||||
$pink: #FFB3B8;
|
||||
$green: #80DEEA;
|
||||
$tiffany: #81D4FA;
|
||||
$yellow: #FFD54F;
|
||||
$panGreen: #80DEEA;
|
||||
|
||||
// sidebar
|
||||
$menuText: #B0B8D0;
|
||||
$menuActiveText: #4FC3F7;
|
||||
$subMenuActiveText: #FFFFFF;
|
||||
$menuBg: #0A0E17;
|
||||
$menuHover: #151A2A;
|
||||
$subMenuBg: #12182D;
|
||||
$subMenuHover: #1E3A8A;
|
||||
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
// 科技现代：钛银脉冲（好看）
|
||||
// base color
|
||||
$blue: #393E7C;
|
||||
$light-blue: #4A50A0;
|
||||
$red: #E84C5B;
|
||||
$pink: #FF7B9C;
|
||||
$green: #4AB7BD;
|
||||
$tiffany: #64D2FF;
|
||||
$yellow: #FFD166;
|
||||
$panGreen: #4AB7BD;
|
||||
|
||||
// sidebar
|
||||
$menuText: #CCCCCC;
|
||||
$menuActiveText: #00E5FF;
|
||||
$subMenuActiveText: #FFFFFF;
|
||||
$menuBg: #1A1A2E;
|
||||
$menuHover: #222244;
|
||||
$subMenuBg: #252545;
|
||||
$subMenuHover: #393E7C;
|
||||
|
||||
// 左侧菜单栏宽度
|
||||
$sideBarWidth: 250px;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
}
|
||||
@@ -70,15 +70,57 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/styles/variables";
|
||||
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
margin-left: 8px;
|
||||
|
||||
::v-deep .el-breadcrumb__item {
|
||||
.el-breadcrumb__inner {
|
||||
color: $breadcrumbTextColor !important;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.is-link {
|
||||
color: $breadcrumbLinkColor !important;
|
||||
text-shadow: 0 0 4px $breadcrumbTextGlow;
|
||||
|
||||
&:hover {
|
||||
color: $breadcrumbHoverColor !important;
|
||||
filter: drop-shadow($breadcrumbHoverGlow);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $breadcrumbHoverColor !important;
|
||||
filter: drop-shadow($breadcrumbHoverGlow);
|
||||
}
|
||||
}
|
||||
|
||||
.el-breadcrumb__separator {
|
||||
color: $breadcrumbSeparatorColor;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $breadcrumbLinkColor !important;
|
||||
font-weight: 500;
|
||||
text-shadow: 0 0 4px $breadcrumbTextGlow;
|
||||
|
||||
&:hover {
|
||||
color: $breadcrumbHoverColor !important;
|
||||
filter: drop-shadow($breadcrumbHoverGlow);
|
||||
}
|
||||
}
|
||||
|
||||
.no-redirect {
|
||||
color: #97a8be;
|
||||
color: $breadcrumbNoRedirectColor !important;
|
||||
cursor: text;
|
||||
font-weight: 500;
|
||||
text-shadow: 0 0 4px $breadcrumbTextGlow;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -32,15 +32,25 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/styles/variables";
|
||||
|
||||
.hamburger {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: $hamburgerColor;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hamburger.is-active {
|
||||
transform: rotate(180deg);
|
||||
fill: $hamburgerActiveColor;
|
||||
filter: drop-shadow($hamburgerGlow);
|
||||
}
|
||||
|
||||
.hamburger:hover {
|
||||
fill: $hamburgerActiveColor;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -114,19 +114,25 @@ export default {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||||
background: linear-gradient(90deg, $navbarBgStart 0%, $navbarBgEnd 100%);
|
||||
box-shadow: 0 $navbarShadowY $navbarShadowBlur $navbarShadowSpread $navbarShadowColor;
|
||||
border-bottom: $navbarBorderWidth solid $navbarBorderColor;
|
||||
|
||||
.hamburger-container {
|
||||
line-height: 46px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
transition: all 0.3s ease;
|
||||
-webkit-tap-highlight-color:transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
background: $navbarHoverBg;
|
||||
|
||||
.hamburger {
|
||||
color: $menuActiveText;
|
||||
filter: drop-shadow($hamburgerGlow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -153,15 +159,17 @@ export default {
|
||||
padding: 0 8px;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
color: #5a5e66;
|
||||
color: $menuText;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
background: $navbarHoverBg;
|
||||
color: $navbarRightMenuHoverColor;
|
||||
filter: drop-shadow(0 0 8px $navbarRightMenuHoverGlow);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -178,6 +186,13 @@ export default {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid $navbarAvatarBorderColor;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: $navbarAvatarHoverBorderColor;
|
||||
box-shadow: 0 0 15px $navbarAvatarHoverGlow;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-caret-bottom {
|
||||
@@ -186,6 +201,12 @@ export default {
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
color: $navbarCaretColor;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: $menuActiveText;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
</el-dialog>
|
||||
<el-row :gutter="15">
|
||||
<!--角色管理-->
|
||||
<el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px">
|
||||
<el-col span="18" style="margin-bottom: 10px">
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="role-span">角色列表</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- 菜单授权 -->
|
||||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
|
||||
<el-col span="6">
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<el-tooltip class="item" effect="dark" content="选择指定角色分配菜单" placement="top">
|
||||
@@ -153,7 +153,7 @@
|
||||
<script>
|
||||
import crudRoles from '@/api/system/role'
|
||||
import { searchDept, searchDeptTree } from '@/api/system/dept'
|
||||
import { listChildMenuSetByMenuId, listMenuByPid } from '@/api/system/menu'
|
||||
import { listChildMenuSetByMenuId, listRoleMenuByPid } from '@/api/system/menu'
|
||||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
@@ -197,7 +197,7 @@ export default {
|
||||
methods: {
|
||||
getMenuDatas(node, resolve) {
|
||||
setTimeout(() => {
|
||||
listMenuByPid(node.data.id ? node.data.id : 0).then(res => {
|
||||
listRoleMenuByPid(node.data.id ? node.data.id : 0).then(res => {
|
||||
resolve(res)
|
||||
})
|
||||
}, 100)
|
||||
|
||||
+8
@@ -72,6 +72,14 @@ public class SystemMenuController {
|
||||
return ResponseEntity.ok(systemMenuTbs);
|
||||
}
|
||||
|
||||
@ApiOperation("返回全部的菜单")
|
||||
@PostMapping(value = "/listRoleMenuByPid")
|
||||
@PreAuthorize("@el.check('menu:list','roles:list')")
|
||||
public ResponseEntity<List<SystemMenuTb>> listRoleMenuByPid(@RequestParam Long pid) {
|
||||
List<SystemMenuTb> systemMenuTbs = systemMenuService.listMenuByPid(pid, true);
|
||||
return ResponseEntity.ok(systemMenuTbs);
|
||||
}
|
||||
|
||||
@ApiOperation("根据菜单ID返回所有子节点ID, 包含自身ID")
|
||||
@PostMapping(value = "/listChildMenuSetByMenuId")
|
||||
@PreAuthorize("@el.check('menu:list','roles:list')")
|
||||
|
||||
Reference in New Issue
Block a user