From bf618998564934e291861478ea528539a6b451bd Mon Sep 17 00:00:00 2001
From: pixelqm <303176530@qq.com>
Date: Mon, 16 Sep 2019 10:38:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0canvas=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 QMPlusVuePage/package-lock.json               |  8 +++++++
 QMPlusVuePage/package.json                    |  1 +
 QMPlusVuePage/src/main.js                     |  6 +++++
 QMPlusVuePage/src/view/layout/aside/index.vue |  2 +-
 QMPlusVuePage/src/view/login/login.vue        | 20 +++++++++++++----
 QMPlusVuePage/src/view/login/regist.vue       | 22 ++++++++++++++-----
 6 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/QMPlusVuePage/package-lock.json b/QMPlusVuePage/package-lock.json
index 3c51e9f1..63eb6472 100644
--- a/QMPlusVuePage/package-lock.json
+++ b/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",
diff --git a/QMPlusVuePage/package.json b/QMPlusVuePage/package.json
index a8269591..e104f11f 100644
--- a/QMPlusVuePage/package.json
+++ b/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"
diff --git a/QMPlusVuePage/src/main.js b/QMPlusVuePage/src/main.js
index 2a532b0c..c213a3e4 100644
--- a/QMPlusVuePage/src/main.js
+++ b/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'
diff --git a/QMPlusVuePage/src/view/layout/aside/index.vue b/QMPlusVuePage/src/view/layout/aside/index.vue
index c099bcbc..8150bef2 100644
--- a/QMPlusVuePage/src/view/layout/aside/index.vue
+++ b/QMPlusVuePage/src/view/layout/aside/index.vue
@@ -18,7 +18,7 @@ export default {
   data() {
     return {
       active: '',
-      isCollapse: false
+      isCollapse: true
     }
   },
   methods: {
diff --git a/QMPlusVuePage/src/view/login/login.vue b/QMPlusVuePage/src/view/login/login.vue
index 31291f8a..ec715943 100644
--- a/QMPlusVuePage/src/view/login/login.vue
+++ b/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>
\ No newline at end of file
diff --git a/QMPlusVuePage/src/view/login/regist.vue b/QMPlusVuePage/src/view/login/regist.vue
index 604ab31f..e20b4e38 100644
--- a/QMPlusVuePage/src/view/login/regist.vue
+++ b/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>
\ No newline at end of file
-- 
GitLab