up

package.json

@@ -53,6 +53,7 @@
     "serve-static": "1.13.2",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
+    "vue-particles": "^1.0.9",
     "vue-template-compiler": "2.6.10"
   },
   "browserslist": [

src/main.js

@@ -35,7 +35,8 @@ if (process.env.NODE_ENV === 'production') {
   const { mockXHR } = require('../mock')
   mockXHR()
 }
-
+import VueParticles from 'vue-particles' 
+Vue.use(VueParticles) 
 // set ElementUI lang to EN
 //Vue.use(ElementUI, { locale })
 // 如果想要中文版 element-ui，按如下方式声明

src/views/login/index.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="login-container">
+
+    <vue-particles color="#ffffff" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4"
+      linesColor="#ffffff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3"
+      :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push"> </vue-particles>
+
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
       label-position="left">
 
       <div class="title-container">
-        <h3 class="title">智能工具箱管理平台</h3>
+        <h3 class="title">朗业前端初始化界面</h3>
       </div>
 
       <el-form-item prop="username">
@@ -121,12 +126,18 @@
 </script>
 
 <style lang="scss">
+  #particles-js {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+
   /* 修复input 背景不协调 和光标变色 */
   /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-  $bg:#283443;
-  $light_gray:#fff;
-  $cursor: #fff;
+  $bg:#122583;
+  $light_gray:#122583;
+  $cursor: #122583;
 
   @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
     .login-container .el-input input {
@@ -168,23 +179,25 @@
 </style>
 
 <style lang="scss" scoped>
-  $bg:#2d3a4b;
-  $dark_gray:#889aa4;
-  $light_gray:#eee;
+  $bg:#122583;
+  $dark_gray:#122583;
+  $light_gray:#122583;
 
   .login-container {
     min-height: 100%;
     width: 100%;
-    background-color: $bg;
+    //background-color: $bg;
+    background: url("../../assets/bg.jpg") no-repeat;
     overflow: hidden;
 
     .login-form {
       position: relative;
       width: 520px;
       max-width: 100%;
-      padding: 160px 35px 0;
-      margin: 0 auto;
+      padding: 20px 35px 0;
+      margin: 160px auto;
       overflow: hidden;
+      background-color: #fff;
     }
 
     .tips {