mirror of
https://gitee.com/fantastic-admin/basic.git
synced 2024-12-06 05:57:58 +08:00
优化主题配色配置,增加进度条颜色设置
This commit is contained in:
parent
20510ff9c9
commit
8e24cb6000
55
src/assets/styles/nprogress.scss
Normal file
55
src/assets/styles/nprogress.scss
Normal file
@ -0,0 +1,55 @@
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
.bar {
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: $g-nprogress-color;
|
||||
}
|
||||
.peg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
transform: rotate(3deg) translate(0, -4px);
|
||||
box-shadow: 0 0 10px $g-nprogress-color, 0 0 5px $g-nprogress-color;
|
||||
}
|
||||
.spinner {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 11px;
|
||||
right: 14px;
|
||||
.spinner-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
box-sizing: border-box;
|
||||
border: solid 2px transparent;
|
||||
border-radius: 50%;
|
||||
animation: nprogress-spinner 400ms linear infinite;
|
||||
border-top-color: $g-nprogress-color;
|
||||
border-left-color: $g-nprogress-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nprogress-custom-parent {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
#nprogress .spinner,
|
||||
#nprogress .bar {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
@keyframes nprogress-spinner {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes nprogress-spinner {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
@ -1,7 +1,8 @@
|
||||
// 【主区域】
|
||||
// 背景色
|
||||
/* ----- 应用 ----- */
|
||||
// 主区域背景色
|
||||
$g-main-bg: #f0f2f5;
|
||||
// 【头部】
|
||||
|
||||
/* ----- 顶部 ----- */
|
||||
// 背景色
|
||||
$g-header-bg: #222b45;
|
||||
// 文字颜色
|
||||
@ -16,7 +17,8 @@ $g-header-menu-hover-bg: #334067;
|
||||
$g-header-menu-active-color: #fff;
|
||||
// 导航选中背景色
|
||||
$g-header-menu-active-bg: #334067;
|
||||
// 【主侧边栏】
|
||||
|
||||
/* ----- 主导航 ----- */
|
||||
// 背景色
|
||||
$g-main-sidebar-bg: #222b45;
|
||||
// 菜单文字颜色
|
||||
@ -29,7 +31,8 @@ $g-main-sidebar-menu-hover-bg: #334067;
|
||||
$g-main-sidebar-menu-active-color: #fff;
|
||||
// 菜单选中背景色
|
||||
$g-main-sidebar-menu-active-bg: #334067;
|
||||
// 【次侧边栏】
|
||||
|
||||
/* ----- 次导航 ----- */
|
||||
// 背景色
|
||||
$g-sub-sidebar-bg: #fafafa;
|
||||
// 菜单背景色
|
||||
@ -44,3 +47,6 @@ $g-sub-sidebar-menu-hover-bg: darken(#fafafa, 10);
|
||||
$g-sub-sidebar-menu-active-color: #e7f4ff;
|
||||
// 菜单选中背景色
|
||||
$g-sub-sidebar-menu-active-bg: #5482ee;
|
||||
|
||||
/* ----- 进度条 ----- */
|
||||
$g-nprogress-color: #29d;
|
||||
|
@ -4,7 +4,7 @@ import { useKeepAliveOutsideStore } from '@/store/modules/keepAlive'
|
||||
import { useUserOutsideStore } from '@/store/modules/user'
|
||||
import { useMenuOutsideStore } from '@/store/modules/menu'
|
||||
|
||||
import './nprogress.css'
|
||||
import '@/assets/styles/nprogress.scss'
|
||||
import { useNProgress } from '@vueuse/integrations/useNProgress'
|
||||
const { isLoading } = useNProgress()
|
||||
|
||||
|
@ -1,41 +0,0 @@
|
||||
/* Make clicks pass-through */
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
#nprogress .bar {
|
||||
background: #29d;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
/* Fancy blur effect */
|
||||
#nprogress .peg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
|
||||
opacity: 1;
|
||||
transform: rotate(3deg) translate(0, -4px);
|
||||
}
|
||||
.nprogress-custom-parent {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.nprogress-custom-parent #nprogress .spinner,
|
||||
.nprogress-custom-parent #nprogress .bar {
|
||||
position: absolute;
|
||||
}
|
||||
@keyframes nprogress-spinner {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes nprogress-spinner {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
Loading…
Reference in New Issue
Block a user