diff --git a/index.html b/index.html index 77907b3e..912c0928 100644 --- a/index.html +++ b/index.html @@ -30,91 +30,123 @@ display: flex; justify-content: center; align-items: center; - background: #000; - overflow: hidden; - font-family: 'Reggae One', cursive; } - .develop-p { - font-size: 8vw; - overflow: hidden; - -webkit-text-stroke: 3px #7272a5; + .loading { + display: block; + font-size: 0; + color: #409eff; + width: 82px; + height: 72px; } - .develop-span { - display: block; - font-size: 20px; - overflow: hidden; - color: green; - text-align: center; + .loading > div { + position: relative; + box-sizing: border-box; + display: inline-block; + float: none; + background-color: currentcolor; + border: 0 solid currentcolor; } - .develop-p::before { - content: ' '; - width: 100%; - height: 100%; + .loading.la-dark { + color: #333; + } + + .loading > div:nth-child(1) { position: absolute; - left: 0; - top: 0; - background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00); - mix-blend-mode: multiply; + bottom: 32%; + left: 18%; + width: 24px; + height: 24px; + border-radius: 100%; + transform-origin: center bottom; + animation: ball-climbing-dot-jump 0.6s ease-in-out infinite; } - .develop-p::after { - content: ''; - background: radial-gradient(circle, #fff, #000 50%); - background-size: 25% 25%; + .loading > div:not(:nth-child(1)) { position: absolute; - top: -100%; - left: -100%; + top: 0; right: 0; - bottom: 0; - mix-blend-mode: color-dodge; - animation: mix 2s linear infinite; + width: 24px; + height: 2px; + border-radius: 0; + transform: translate(60%, 0); + animation: ball-climbing-dot-steps 1.8s linear infinite; + } + + .loading > div:not(:nth-child(1)):nth-child(2) { + animation-delay: 0ms; } - @keyframes mix { - to { - transform: translate(50%, 50%); + .loading > div:not(:nth-child(1)):nth-child(3) { + animation-delay: -600ms; + } + + .loading > div:not(:nth-child(1)):nth-child(4) { + animation-delay: -1200ms; + } + + @keyframes ball-climbing-dot-jump { + 0% { + transform: scale(1, 0.7); + } + + 20% { + transform: scale(0.7, 1.2); + } + + 40% { + transform: scale(1, 1); + } + + 50% { + bottom: 125%; + } + + 46% { + transform: scale(1, 1); + } + + 80% { + transform: scale(0.7, 1.2); + } + + 90% { + transform: scale(0.7, 1.2); + } + + 100% { + transform: scale(1, 0.7); + } + } + + @keyframes ball-climbing-dot-steps { + 0% { + top: 0; + right: 0; + opacity: 0; + } + + 50% { + opacity: 1; + } + + 100% { + top: 100%; + right: 100%; + opacity: 0; } } -
-

SuperCuteXiaoSi

- +
+
+
+
+
- + diff --git a/package.json b/package.json index c5cbf5a7..fdd2a053 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "marked": "^4.0.17", "mitt": "^3.0.0", "mockjs": "^1.1.0", + "nprogress": "^0.2.0", "path": "^0.12.7", "pinia": "^2.0.14", "qs": "^6.11.0", @@ -58,6 +59,7 @@ "@types/lodash-es": "^4.17.6", "@types/marked": "^4.0.3", "@types/node": "^18.0.0", + "@types/nprogress": "^0.2.0", "@types/qs": "^6.9.7", "@types/sortablejs": "^1.13.0", "@typescript-eslint/eslint-plugin": "^5.30.3", diff --git a/src/router/index.ts b/src/router/index.ts index edf73c29..a4b4fa78 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -3,6 +3,7 @@ import { App } from 'vue'; import { configRouteList } from './modules'; import { handleAliveRoute, initAsyncRoute } from './utils'; import { usePermissionStoreHook } from '@/store/modules/permission'; +import NProgress from '@/utils/plugin/progress'; const { whiteRouteModulesList, routeModulesList } = configRouteList(); @@ -21,6 +22,7 @@ export const configMainRouter = async (app: App) => { // 路由守卫 router.beforeEach((to, from, next) => { + NProgress.start(); if (to.meta?.keepAlive) { const newMatched = to.matched; handleAliveRoute(newMatched, 'add'); @@ -67,3 +69,7 @@ router.beforeEach((to, from, next) => { } } }); + +router.afterEach(() => { + NProgress.done(); +}); diff --git a/src/styles/element/index.scss b/src/styles/element/index.scss index 0da2e43e..7fd47e46 100644 --- a/src/styles/element/index.scss +++ b/src/styles/element/index.scss @@ -1,8 +1,10 @@ -$text-color-base: #909399; - /* 修改element颜色变量 */ @forward 'element-plus/theme-chalk/src/common/var.scss' with ( - $colors: (), + $colors: ( + 'primary': ( + 'base': #409eff, + ), + ), $text-color: ( 'primary': #909399, 'regular': #606266, diff --git a/src/styles/index.scss b/src/styles/index.scss index 67bf5202..6910f32e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,4 +1,4 @@ -@import 'element-plus/theme-chalk/dark/css-vars.css'; +@import 'element-plus/theme-chalk/src/dark/css-vars.scss'; @import './theme.scss'; @import './intro.scss'; @import './transition.scss'; diff --git a/src/styles/nprogress.scss b/src/styles/nprogress.scss new file mode 100644 index 00000000..acc0eb91 --- /dev/null +++ b/src/styles/nprogress.scss @@ -0,0 +1,81 @@ +/* Make clicks pass-through */ +#nprogress { + pointer-events: none; +} + +#nprogress .bar { + background: var(--mian-color); + + position: fixed; + z-index: 1031; + top: 0; + left: 0; + + width: 100%; + height: 2px; +} + +/* Fancy blur effect */ +#nprogress .peg { + display: block; + position: absolute; + right: 0px; + width: 100px; + height: 100%; + box-shadow: 0 0 10px var(--mian-color), 0 0 5px var(--mian-color); + opacity: 1; + + -webkit-transform: rotate(3deg) translate(0px, -4px); + -ms-transform: rotate(3deg) translate(0px, -4px); + transform: rotate(3deg) translate(0px, -4px); +} + +/* Remove these to get rid of the spinner */ +#nprogress .spinner { + display: block; + position: fixed; + z-index: 1031; + top: 15px; + right: 15px; +} + +#nprogress .spinner-icon { + width: 18px; + height: 18px; + box-sizing: border-box; + + border: solid 2px transparent; + border-top-color: var(--mian-color); + border-left-color: var(--mian-color); + border-radius: 50%; + + -webkit-animation: nprogress-spinner 400ms linear infinite; + animation: nprogress-spinner 400ms linear infinite; +} + +.nprogress-custom-parent { + overflow: hidden; + position: relative; +} + +.nprogress-custom-parent #nprogress .spinner, +.nprogress-custom-parent #nprogress .bar { + position: absolute; +} + +@-webkit-keyframes nprogress-spinner { + 0% { + -webkit-transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + } +} +@keyframes nprogress-spinner { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/src/utils/plugin/progress.ts b/src/utils/plugin/progress.ts new file mode 100644 index 00000000..f995ebdd --- /dev/null +++ b/src/utils/plugin/progress.ts @@ -0,0 +1,17 @@ +// https://github.com/rstacruz/nprogress +import NProgress from 'nprogress'; +import '@/styles/nprogress.scss'; + +NProgress.configure({ + easing: 'ease', + // 递增进度条的速度 + speed: 400, + // 是否显示加载ico + showSpinner: true, + // 自动递增间隔 + trickleSpeed: 300, + // 初始化时的最小百分比 + minimum: 0.2, +}); + +export default NProgress;