1

package.json

@@ -85,6 +85,7 @@
     "script-ext-html-webpack-plugin": "2.1.5",
     "svg-sprite-loader": "5.1.1",
     "ts-loader": "~8.2.0",
+    "vue-particles": "^1.0.9",
     "vue-property-decorator": "^9.1.2",
     "vue-template-compiler": "2.6.12"
   },

src/main.js

 import Vue from 'vue'
+import VueParticles from 'vue-particles'
 
 /* 引入公用UI插件 */
 import Element from 'element-ui'
@@ -79,6 +80,7 @@ Vue.component('ImagePreview', ImagePreview)
 Vue.use(framework)
 Vue.use(plugins)
 Vue.use(VueMeta)
+Vue.use(VueParticles)
 DictData.install()
 /**
  * If you don't want to use mock-server

src/views/login.vue

 <template>
   <div class="login">
+    <vue-particles
+            class="login-bg"
+          color="#39AFFD"
+          :particleOpacity="0.5"
+          :particlesNumber="12"
+          shapeType="edge"
+          :particleSize="5"
+          linesColor="#8DD1FE"
+          :linesWidth="1"
+          :lineLinked="true"
+          :lineOpacity="0.4"
+          :linesDistance="150"
+          :moveSpeed="3"
+          :hoverEffect="true"
+          hoverMode="repulse"
+          :clickEffect="false"
+          clickMode="push"
+          >
+          </vue-particles>
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
       <h3 class="title">陕钢安全管理系统</h3>
       <el-form-item prop="username">
@@ -158,6 +177,11 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
+  .login-bg{
+    height: 98vh;
+    width: 100vw;
+    position: absolute;
+  }
 .login {
   display: flex;
   justify-content: center;

src/views/riskPrecontrol/maintenanceRiskTask/dtl/edit.vue

@@ -44,6 +44,7 @@
                         <el-input :readonly="readonly"  v-model="form.sysversion" ></el-input>
                     </el-form-item>
                 </el-col>
+            </el-row>
         </el-form>
     </RelDialog>
 </template>