فهرست منبع

修改loading

yangg 1 ماه پیش
والد
کامیت
74dd4fddea
5فایلهای تغییر یافته به همراه19 افزوده شده و 55 حذف شده
  1. BIN
      public/favicon.ico
  2. BIN
      public/favicon1.ico
  3. BIN
      src/assets/loading.gif
  4. 18 46
      src/theme/loading.scss
  5. 1 9
      src/utils/loading.ts

BIN
public/favicon.ico


BIN
public/favicon1.ico


BIN
src/assets/loading.gif


+ 18 - 46
src/theme/loading.scss

@@ -1,51 +1,23 @@
 .loading-next {
+	position: fixed;
+	top: 0;
+	left: 0;
 	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(--el-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);
+	background: rgba(255, 255, 255, 0.95);
+	z-index: 9999;
+	
+	.loading-next-box {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		
+		.loading-next-box-warp {
+			.loading-gif {
+				width: 300px;
+				height: 300px;
+			}
+		}
 	}
 }

+ 1 - 9
src/utils/loading.ts

@@ -19,15 +19,7 @@ export const NextLoading = {
 		const htmls = `
 			<div class="loading-next-box">
 				<div class="loading-next-box-warp">
-					<div class="loading-next-box-item"></div>
-					<div class="loading-next-box-item"></div>
-					<div class="loading-next-box-item"></div>
-					<div class="loading-next-box-item"></div>
-					<div class="loading-next-box-item"></div>
-					<div class="loading-next-box-item"></div>
-					<div class="loading-next-box-item"></div>
-					<div class="loading-next-box-item"></div>
-					<div class="loading-next-box-item"></div>
+					<img src="/src/assets/loading.gif" alt="loading" class="loading-gif" />
 				</div>
 			</div>
 		`;