1

src/views/login.vue

@@ -22,7 +22,13 @@
           clickMode="push"
           >
           </vue-particles>
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" style="position: relative;background-color:rgba(0, 0, 0, 0.4) ;">
+      <ul class="bg-bubbles" >
+          <li v-for="i in 10" :key="i"></li>
+      </ul>
+      <!-- -->
+
+      <!-- -->
          <h3 class="title">陕钢安全管理系统</h3>
       <el-form-item prop="username">
         <el-input
@@ -31,7 +37,7 @@
           auto-complete="off"
           placeholder="账号"
         >
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          <!-- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> -->
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
@@ -42,7 +48,7 @@
           placeholder="密码"
           @keyup.enter.native="handleLogin"
         >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+         <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
         </el-input>
       </el-form-item>
       <!-- <el-form-item prop="code" v-if="captchaEnabled">
@@ -62,6 +68,7 @@
       <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
       <el-form-item style="width:100%;">
         <el-button
+        class="buttonClass"
           :loading="loading"
           size="medium"
           type="primary"
@@ -179,7 +186,33 @@ export default {
 };
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style rel="stylesheet/scss" lang="scss" scoped>
+ ::v-deep .el-input__inner{
+    border: #0389ff 1px solid;
+    color: #fff;
+    background-color:rgba(0, 0, 0, 0.039) ;
+  }
+.buttonClass {
+  font-size:15px;
+  font-family:Arial;
+  // width:100px;
+  height:34px;
+  border-width:1px;
+  color:#ffffff;
+  border-color:#0389ff;
+  border-top-left-radius:3px;
+  border-top-right-radius:3px;
+  border-bottom-left-radius:3px;
+  border-bottom-right-radius:3px;
+  box-shadow:inset 0px 1px 0px 0px #54a3f7;
+  text-shadow:inset 0px 1px 0px #154682;
+  background:linear-gradient(#0389ff, #00aaff);
+}
+
+.buttonClass:hover {
+  background: linear-gradient(#00aaff, #007dc1);
+}
+
   .newTitle{
     position: absolute;
     top: 0px;
@@ -203,12 +236,22 @@ export default {
 .title {
   margin: 0px auto 30px auto;
   text-align: center;
-  color: #707070;
+  color: #ffffff;
 }
 
 .login-form {
+  box-shadow:
+    5.5px 1.4px 2.2px rgba(0, 0, 0, 0.039),
+    12.4px 3.2px 5.3px rgba(0, 0, 0, 0.057),
+    21.7px 5.6px 10px rgba(0, 0, 0, 0.07),
+    36.2px 9.4px 17.9px rgba(0, 0, 0, 0.083),
+    63.8px 16.6px 33.4px rgba(0, 0, 0, 0.101),
+    146px 38px 80px rgba(0, 0, 0, 0.14)
+  ;
+
+  /* */
   margin-top: 50px;
-  margin-right: 250px;
+  margin-right: 200px;
   border-radius: 6px;
   background: #ffffff;
   width: 400px;
@@ -255,3 +298,105 @@ export default {
   height: 38px;
 }
 </style>
+<style lang='scss'>
+  .bg-bubbles {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      li {
+        position: absolute;
+        bottom: -160px;
+        width:10px;
+        height: 10px;
+        background-color: rgba(62, 146, 255, 0.5);
+        list-style: none;
+        animation: square 15s infinite;
+        transition-timing-function: linear;
+        &:nth-child(1) {
+          left: 10%;
+        }
+        &:nth-child(2) {
+          left: 20%;
+          width: 13px;
+          height: 13px;
+          animation-delay: 2s;
+          animation-duration: 7s;
+           background-color: rgba(97, 158, 255, 0.2);
+        }
+        &:nth-child(3) {
+          left: 25%;
+          animation-delay: 4s;
+        }
+        &:nth-child(4) {
+          left: 40%;
+          width: 7px;
+          height: 7px;
+          animation-duration: 8s;
+          background-color: rgba(84, 115, 255, 0.8);
+        }
+        &:nth-child(5) {
+          left: 70%;
+        }
+        &:nth-child(6) {
+          left: 80%;
+          width: 35px;
+          height: 35px;
+          animation-delay: 3s;
+          background-color: rgba(255, 88, 119, 0.2);
+        }
+        &:nth-child(7) {
+          left: 32%;
+          width: 42px;
+          height: 42px;
+          animation-delay: 2s;
+           background-color: rgba(170, 170, 127, 0.2);
+        }
+        &:nth-child(8) {
+          left: 55%;
+          width: 12px;
+          height: 12px;
+          animation-delay: 4s;
+          animation-duration: 15s;
+           background-color: rgba(126, 255, 28, 0.2);
+        }
+        &:nth-child(9) {
+          left: 25%;
+          width: 10px;
+          height: 10px;
+          animation-delay: 2s;
+          animation-duration: 12s;
+          background-color: rgba(53, 134, 255, 0.5);
+        }
+        &:nth-child(10) {
+          left: 85%;
+          width: 16px;
+          height: 16px;
+          animation-delay: 5s;
+           background-color: rgba(85, 85, 127, 0.2);
+        }
+      }
+      @keyframes square {
+        0% {
+          opacity: 0.5;
+          transform: translateY(0px) rotate(45deg);
+        }
+        25% {
+          opacity: 0.75;
+          transform: translateY(-400px) rotate(90deg)
+        }
+        50% {
+          opacity: 1;
+          transform: translateY(-600px) rotate(135deg);
+        }
+        100% {
+          opacity: 0;
+          transform: translateY(-1000px) rotate(180deg);
+        }
+      }
+    }
+
+
+</style>