test/basic2
1
0
Fork 0
mirror of https://gitee.com/fantastic-admin/basic.git synced 2024-12-08 06:57:42 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

优化主题配色配置，增加进度条颜色设置

Browse Source
This commit is contained in:
hooray 2022-01-13 01:11:47 +08:00
parent 20510ff9c9
commit 8e24cb6000
4 changed files with 67 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/assets/styles/nprogress.scss Normal file
View 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); }
}

16
src/assets/styles/resources/themes.scss
View File

@ -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;

2
src/router/index.js
View File

@ -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()

41
src/router/nprogress.css
View File

@ -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); }
}