style: 修复 style

CaoMeiYouRen · Jan 2, 2021 · 1973cde · 1973cde
1 parent 1e4506d
commit 1973cde
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 51 deletions.
diff --git 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
@@ -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;
+ }
 }