From 641ace768c2fa9be8ac2cab837ae6b1cd60059ba Mon Sep 17 00:00:00 2001
From: lyt-Top <1105290566@qq.com>
Date: Thu, 1 Apr 2021 20:18:27 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.04.01:=E4=BF=AE=E5=A4=8D=E9=9B=AA?=
=?UTF-8?q?=E8=8A=B1=E5=B1=8Floading=E4=B8=8D=E5=90=8C=E6=AD=A5=E4=B8=BB?=
=?UTF-8?q?=E9=A2=98=E9=A2=9C=E8=89=B2=E7=9A=84=E9=97=AE=E9=A2=98'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 1 -
public/loading.css | 1 -
src/theme/loading.scss | 51 ++++++++++++++++++++++++++++++++++++++++++
src/utils/loading.ts | 9 ++++++++
4 files changed, 60 insertions(+), 2 deletions(-)
delete mode 100644 public/loading.css
create mode 100644 src/theme/loading.scss
diff --git a/index.html b/index.html
index 40e8d14..415a5e3 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,6 @@
content="vue-next-admin，基于 vue3 + CompositionAPI + typescript + vite + element plus，适配手机、平板、pc 的后台开源免费管理系统模板！"
/>
-
vue-next-admin
diff --git a/public/loading.css b/public/loading.css
deleted file mode 100644
index 8280a21..0000000
--- a/public/loading.css
+++ /dev/null
@@ -1 +0,0 @@
-.loading-next{width:100%;height:100%}.loading-next .loading-next-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading-next .loading-next-box-warp{width:80px;height:80px}.loading-next .loading-next-box-warp .loading-next-box-item{width:33.333333%;height:33.333333%;background-color:#409eff;float:left;animation:loading-next-animation 1.2s infinite ease;border-radius:1px}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(7){animation-delay:0s}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(4),.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(8){animation-delay:.1s}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(1),.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(5),.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(9){animation-delay:.2s}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(2),.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(6){animation-delay:.3s}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(3){animation-delay:.4s}@keyframes loading-next-animation{0%,70%,100%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}
\ No newline at end of file
diff --git a/src/theme/loading.scss b/src/theme/loading.scss
new file mode 100644
index 0000000..663bde0
--- /dev/null
+++ b/src/theme/loading.scss
@@ -0,0 +1,51 @@
+.loading-next {
+ width: 100%;
+ height: 100%;
+}
+.loading-next .loading-next-box {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+.loading-next .loading-next-box-warp {
+ width: 80px;
+ height: 80px;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item {
+ width: 33.333333%;
+ height: 33.333333%;
+ background: var(--color-primary);
+ float: left;
+ animation: loading-next-animation 1.2s infinite ease;
+ border-radius: 1px;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(7) {
+ animation-delay: 0s;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(4),
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(8) {
+ animation-delay: 0.1s;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(1),
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(5),
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(9) {
+ animation-delay: 0.2s;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(2),
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(6) {
+ animation-delay: 0.3s;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(3) {
+ animation-delay: 0.4s;
+}
+@keyframes loading-next-animation {
+ 0%,
+ 70%,
+ 100% {
+ transform: scale3D(1, 1, 1);
+ }
+ 35% {
+ transform: scale3D(0, 0, 1);
+ }
+}
diff --git a/src/utils/loading.ts b/src/utils/loading.ts
index c9cd7f1..2e75e2e 100644
--- a/src/utils/loading.ts
+++ b/src/utils/loading.ts
@@ -1,7 +1,16 @@
import { nextTick } from 'vue';
+import loadingCss from '/@/theme/loading.scss';
// 定义方法
export const NextLoading = {
+ // 载入 css
+ setCss: () => {
+ let link = document.createElement('link');
+ link.rel = 'stylesheet';
+ link.href = loadingCss;
+ link.crossOrigin = 'anonymous';
+ document.getElementsByTagName('head')[0].appendChild(link);
+ },
// 创建 loading
start: () => {
const bodys: any = document.body;