增加canvas背景图

QMPlusVuePage/package-lock.json

@@ -11639,6 +11639,14 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-particle-line": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/vue-particle-line/-/vue-particle-line-0.1.4.tgz",
+      "integrity": "sha512-l5qvk5R3VJrAU8G1JTJPGG610/R4kmutayb2F0SZp2qA4lo2pxImK7R+IgEcMGpJ5r1qg5K4c719IRwnPJokoA==",
+      "requires": {
+        "vue": "^2.5.21"
+      }
+    },
     "vue-router": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.3.tgz",

QMPlusVuePage/package.json

@@ -16,6 +16,7 @@
         "qs": "^6.8.0",
         "sass-loader": "^8.0.0",
         "vue": "^2.6.10",
+        "vue-particle-line": "^0.1.4",
         "vue-router": "^3.1.3",
         "vuex": "^3.1.1",
         "vuex-persist": "^2.1.0"

QMPlusVuePage/src/main.js

@@ -5,6 +5,12 @@ import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);
 // 引入封装的router
+
+import vueParticleLine from 'vue-particle-line'
+import 'vue-particle-line/dist/vue-particle-line.css'
+Vue.use(vueParticleLine)
+    // canvas背景插件
+
 import router from '@/router/index'
 import '@/permission'
 import { store } from '@/store/index'

QMPlusVuePage/src/view/layout/aside/index.vue

@@ -18,7 +18,7 @@ export default {
   data() {
     return {
       active: '',
-      isCollapse: false
+      isCollapse: true
     }
   },
   methods: {

QMPlusVuePage/src/view/login/login.vue

@@ -1,6 +1,9 @@
 <template>
-  <el-container class="login-box">
-    <el-main>
+
+  <el-container class="login-regist-box">
+    <vue-particle-line>
+  </vue-particle-line>
+    <el-main class="login-box">
       <el-form :model="loginForm" :rules="rules" label-width="100px" ref="loginForm" status-icon>
         <el-form-item label="用户名" prop="username">
           <el-input v-model="loginForm.username"></el-input>
@@ -11,9 +14,10 @@
           </el-input>
         </el-form-item>
       </el-form>
-      <el-button @click="submitForm">登录</el-button>
+      <el-button @click="submitForm" style="float:right;width:calc(100% - 100px)">登 录</el-button>
     </el-main>
   </el-container>
+
 </template>
 
 <script>
@@ -75,7 +79,15 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.login-box {
+.login-regist-box {
   background: #409eff;
+  height: 100vh;
+  .login-box{
+    width: 40vw;
+    position: absolute;
+    left: 50%;
+    margin-left: -22vw;
+    top:25vh;
+  }
 }
 </style>

QMPlusVuePage/src/view/login/regist.vue

@@ -1,6 +1,8 @@
 <template>
-  <el-container class="login-box">
-    <el-main>
+  <el-container class="login-regist-box">
+       <vue-particle-line>
+  </vue-particle-line>
+    <el-main class="login-box">
       <el-form :model="registForm" :rules="rules" label-width="100px" ref="registForm" status-icon>
         <el-form-item label="用户名" prop="username">
           <el-input v-model="registForm.username"></el-input>
@@ -16,7 +18,7 @@
           </el-input>
         </el-form-item>
       </el-form>
-      <el-button @click="submitForm">注册</el-button>
+      <el-button style="float:right;width:calc(100% - 100px)" @click="submitForm">注册</el-button>
     </el-main>
   </el-container>
 </template>
@@ -94,8 +96,16 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-.login-box {
+<style lang="scss">
+.login-regist-box {
   background: #409eff;
-}
+  height: 100vh;
+  .login-box{
+    width: 40vw;
+    position: absolute;
+    left: 50%;
+    margin-left: -22vw;
+    top:25vh;
+  }
+}  
 </style>