1

src/views/login.vue

 <template>
   <div class="login">
-    <vue-particles
+  <!--  <div class="newTitle">
+
+    </div> -->
+   <vue-particles
             class="login-bg"
-          color="#39AFFD"
-          :particleOpacity="0.5"
-          :particlesNumber="12"
-          shapeType="edge"
+          color="#34a4ea"
+          :particleOpacity="0.8"
+          :particlesNumber="19"
+          shapeType="circle"
           :particleSize="5"
           linesColor="#8DD1FE"
           :linesWidth="1"
           :lineLinked="true"
           :lineOpacity="0.4"
           :linesDistance="150"
-          :moveSpeed="3"
-          :hoverEffect="true"
+          :moveSpeed="1"
+          :hoverEffect="false"
           hoverMode="repulse"
           :clickEffect="false"
           clickMode="push"
@@ -177,6 +180,13 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
+  .newTitle{
+    position: absolute;
+    top: 0px;
+    height: 160px;
+    width: 100%;
+    background-color: #fff;
+  }
   .login-bg{
     height: 98vh;
     width: 100vw;
@@ -184,10 +194,10 @@ export default {
   }
 .login {
   display: flex;
-  justify-content: center;
+  justify-content: right;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  background-image: url("../assets/images/login-rj.jpg");
   background-size: cover;
 }
 .title {
@@ -197,6 +207,8 @@ export default {
 }
 
 .login-form {
+  margin-top: 50px;
+  margin-right: 250px;
   border-radius: 6px;
   background: #ffffff;
   width: 400px;