From 1973cdec58700efb74c922554d4ff4b191362d00 Mon Sep 17 00:00:00 2001
From: CaoMeiYouRen <996881204@qq.com>
Date: Sat, 2 Jan 2021 20:21:11 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BF=AE=E5=A4=8D=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html       |   2 +-
 src/styles/loading.scss | 100 ++++++++++++++++++++--------------------
 2 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/public/index.html b/public/index.html
index 60189a6..eca8d04 100644
--- a/public/index.html
+++ b/public/index.html
@@ -36,7 +36,7 @@
 
     <div id="app">
         <div v-cloak class="loading">
-            <div class="loadEffect">
+            <div class="load-effect">
                 <span></span>
                 <span></span>
                 <span></span>
diff --git a/src/styles/loading.scss b/src/styles/loading.scss
index 65f96ce..fdd7ae3 100644
--- a/src/styles/loading.scss
+++ b/src/styles/loading.scss
@@ -11,7 +11,7 @@
 
 $animation-time: 0.16s;
 
-.loadEffect {
+.load-effect {
     position: relative;
     width: 100px;
     height: 100px;
@@ -27,66 +27,66 @@ $animation-time: 0.16s;
         border-radius: 50%;
         animation: load $animation-time*8 ease infinite;
     }
-}
 
-@keyframes load {
-    0% {
-        opacity: 1;
+    span:nth-child(1) {
+        top: 50%;
+        left: 0;
+        margin-top: -8px;
+        animation-delay: $animation-time;
     }
 
-    100% {
-        opacity: 0.2;
+    span:nth-child(2) {
+        top: 14px;
+        left: 14px;
+        animation-delay: $animation-time*2;
     }
-}
 
-.loadEffect span:nth-child(1) {
-    top: 50%;
-    left: 0;
-    margin-top: -8px;
-    animation-delay: $animation-time;
-}
+    span:nth-child(3) {
+        top: 0;
+        left: 50%;
+        margin-left: -8px;
+        animation-delay: $animation-time*3;
+    }
 
-.loadEffect span:nth-child(2) {
-    top: 14px;
-    left: 14px;
-    animation-delay: $animation-time*2;
-}
+    span:nth-child(4) {
+        top: 14px;
+        right: 14px;
+        animation-delay: $animation-time*4;
+    }
 
-.loadEffect span:nth-child(3) {
-    top: 0;
-    left: 50%;
-    margin-left: -8px;
-    animation-delay: $animation-time*3;
-}
+    span:nth-child(5) {
+        top: 50%;
+        right: 0;
+        margin-top: -8px;
+        animation-delay: $animation-time*5;
+    }
 
-.loadEffect span:nth-child(4) {
-    top: 14px;
-    right: 14px;
-    animation-delay: $animation-time*4;
-}
+    span:nth-child(6) {
+        right: 14px;
+        bottom: 14px;
+        animation-delay: $animation-time*6;
+    }
 
-.loadEffect span:nth-child(5) {
-    top: 50%;
-    right: 0;
-    margin-top: -8px;
-    animation-delay: $animation-time*5;
-}
+    span:nth-child(7) {
+        bottom: 0;
+        left: 50%;
+        margin-left: -8px;
+        animation-delay: $animation-time*7;
+    }
 
-.loadEffect span:nth-child(6) {
-    right: 14px;
-    bottom: 14px;
-    animation-delay: $animation-time*6;
+    span:nth-child(8) {
+        bottom: 14px;
+        left: 14px;
+        animation-delay: $animation-time*8;
+    }
 }
 
-.loadEffect span:nth-child(7) {
-    bottom: 0;
-    left: 50%;
-    margin-left: -8px;
-    animation-delay: $animation-time*7;
-}
+@keyframes load {
+    0% {
+        opacity: 1;
+    }
 
-.loadEffect span:nth-child(8) {
-    bottom: 14px;
-    left: 14px;
-    animation-delay: $animation-time*8;
+    100% {
+        opacity: 0.2;
+    }
 }
\ No newline at end of file