change: animation

 of password page

Author: recoluan

components/Background.vue

@@ -4,24 +4,21 @@
 
 <script>
 export default {
-  mounted() {
-    const keyPage = this.$themeConfig.keyPage
-    let color = '#424242'
-    let lineColor = '#424242'
-    if (keyPage) {
-      color = keyPage.color || color
-      lineColor = keyPage.lineColor || lineColor
-    }
-    
-    const script = document.createElement("script");
-    script.src = "https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js";
+  mounted () {
+    const color = '#fff'
+    const lineColor = '#fff'
+    const num = 20
+
+    const script = document.createElement('script')
+    script.src = 'https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js'
 
-    document.body.append(script);
-    script.onload = function() {
-      particlesJS("particles-oli-wrapper", {
+    document.body.append(script)
+    script.onload = function () {
+      const particlesJS = window.particlesJS
+      particlesJS('particles-oli-wrapper', {
         particles: {
           number: {
-            value: 40,
+            value: num,
             density: {
               enable: true,
               value_area: 800
@@ -31,27 +28,27 @@ export default {
             value: color
           },
           shape: {
-            type: "circle",
+            type: 'circle',
             stroke: {
               width: 0,
-              color: "#000000"
+              color: '#000000'
             },
             polygon: {
               nb_sides: 5
             }
           },
           opacity: {
-            value: 0.3,
+            value: 0.9,
             random: false,
             anim: {
               enable: false,
               speed: 1,
-              opacity_min: 0.1,
+              opacity_min: 0.6,
               sync: false
             }
           },
           size: {
-            value: 20,
+            value: 3,
             random: true,
             anim: {
               enable: false,
@@ -64,16 +61,16 @@ export default {
             enable: true,
             distance: 250,
             color: lineColor,
-            opacity: 0.2,
+            opacity: 0.4,
             width: 1
           },
           move: {
             enable: true,
             speed: 3,
-            direction: "none",
+            direction: 'none',
             random: true,
             straight: false,
-            out_mode: "out",
+            out_mode: 'out',
             bounce: true,
             attract: {
               enable: false,
@@ -83,15 +80,15 @@ export default {
           }
         },
         interactivity: {
-          detect_on: "canvas",
+          detect_on: 'canvas',
           events: {
             onhover: {
               enable: true,
-              mode: "grab"
+              mode: 'grab'
             },
             onclick: {
               enable: true,
-              mode: "push"
+              mode: 'push'
             },
             resize: true
           },
@@ -105,13 +102,17 @@ export default {
           }
         },
         retina_detect: true
-      });
-    };
+      })
+    }
   }
-};
+}
 </script>
-<style lang="stylus" scoped>
+<style lang='scss' scoped>
 #particles-oli-wrapper {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  width: 100%;
   height: 99vh;
 }
 </style>