🐛 fix dark mode issue

src/layout/Landing/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <AFlex :vertical="true" align="center" justify-content="center">
-    <Header/>
-    <Content/>
+  <AFlex :vertical="true" align="center" justify-content="center" v-cloak>
+    <Header style="position: fixed;"/>
+    <Content style="margin-top: 100px;z-index: 2;"/>
     <Footer/>
     <div class="area">
       <ul class="circles">
@@ -24,131 +24,6 @@ import Header from "@/layout/Landing/Header/Header.vue";
 import Footer from "@/layout/Landing/Footer/Footer.vue";
 import Content from "@/layout/Landing/Content/Content.vue";
 </script>
-<style scoped lang="scss">
-.area {
-  background: #b9f187;
-  background: -webkit-linear-gradient(to left, #b9f187, #90d952,#70c13a,#52a82e);
-  width: 100%;
-  height: 100vh;
-  z-index: -1;
-  overflow: hidden;
-  position: fixed;
-  top: 0;
-  left: 0;
+<style src="./index.scss" scoped lang="scss">
 
-}
-
-.circles {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.circles li {
-  position: absolute;
-  display: block;
-  list-style: none;
-  width: 20px;
-  height: 20px;
-  background: rgba(255, 255, 255, 0.5);
-  animation: animate 25s linear infinite;
-  bottom: -150px;
-
-}
-
-.circles li:nth-child(1) {
-  left: 25%;
-  width: 80px;
-  height: 80px;
-  animation-delay: 0s;
-}
-
-
-.circles li:nth-child(2) {
-  left: 10%;
-  width: 20px;
-  height: 20px;
-  animation-delay: 2s;
-  animation-duration: 12s;
-}
-
-.circles li:nth-child(3) {
-  left: 70%;
-  width: 20px;
-  height: 20px;
-  animation-delay: 4s;
-}
-
-.circles li:nth-child(4) {
-  left: 40%;
-  width: 60px;
-  height: 60px;
-  animation-delay: 0s;
-  animation-duration: 18s;
-}
-
-.circles li:nth-child(5) {
-  left: 65%;
-  width: 20px;
-  height: 20px;
-  animation-delay: 0s;
-}
-
-.circles li:nth-child(6) {
-  left: 75%;
-  width: 110px;
-  height: 110px;
-  animation-delay: 3s;
-}
-
-.circles li:nth-child(7) {
-  left: 35%;
-  width: 150px;
-  height: 150px;
-  animation-delay: 7s;
-}
-
-.circles li:nth-child(8) {
-  left: 50%;
-  width: 25px;
-  height: 25px;
-  animation-delay: 15s;
-  animation-duration: 45s;
-}
-
-.circles li:nth-child(9) {
-  left: 20%;
-  width: 15px;
-  height: 15px;
-  animation-delay: 2s;
-  animation-duration: 35s;
-}
-
-.circles li:nth-child(10) {
-  left: 85%;
-  width: 150px;
-  height: 150px;
-  animation-delay: 0s;
-  animation-duration: 11s;
-}
-
-
-@keyframes animate {
-
-  0% {
-    transform: translateY(0) rotate(0deg);
-    opacity: 1;
-    border-radius: 0;
-  }
-
-  100% {
-    transform: translateY(-1000px) rotate(720deg);
-    opacity: 0;
-    border-radius: 50%;
-  }
-
-}
 </style>