登录页效果

package.json

@@ -16,6 +16,7 @@
     "js-sha1": "^0.6.0",
     "js-sha1": "^0.6.0",
     "moment": "^2.24.0",
     "moment": "^2.24.0",
     "ol": "^6.1.1",
     "ol": "^6.1.1",
+    "particles.js": "^2.0.0",
     "vue": "^2.6.10",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
     "vue-router": "^3.1.3",
     "vuex": "^3.0.1"
     "vuex": "^3.0.1"
@@ -39,6 +40,7 @@
     "sass-loader": "^8.0.0",
     "sass-loader": "^8.0.0",
     "stylus": "^0.54.7",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "stylus-loader": "^3.0.2",
+    "vue-particles": "^1.0.9",
     "vue-template-compiler": "^2.6.10"
     "vue-template-compiler": "^2.6.10"
   },
   },
   "eslintConfig": {
   "eslintConfig": {

src/main.js

@@ -19,6 +19,10 @@ Vue.prototype.$moment = moment;
 Vue.prototype.$buildCode = buildCode;
 Vue.prototype.$buildCode = buildCode;
 Vue.prototype.oParse = new XML.ObjTree();
 Vue.prototype.oParse = new XML.ObjTree();
 Vue.prototype.axios=axios;
 Vue.prototype.axios=axios;
+
+import VueParticles from 'vue-particles'
+Vue.use(VueParticles)
+
 Vue.use(api);
 Vue.use(api);
 Vue.use(ElementUI, { size: "small", zIndex: 3000 });
 Vue.use(ElementUI, { size: "small", zIndex: 3000 });
 Vue.use(resetCss);
 Vue.use(resetCss);

src/views/Login.vue

 <template>
 <template>
 	<div id="login" :style="{height:innerHeight+'px'}">
 	<div id="login" :style="{height:innerHeight+'px'}">
+		<vue-particles
+        color="#dedede"
+        :particleOpacity="0.7"
+        :particlesNumber="80"
+        shapeType="circle"
+        :particleSize="4"
+        linesColor="#dedede"
+        :linesWidth="1"
+        :lineLinked="true"
+        :lineOpacity="0.4"
+        :linesDistance="150"
+        :moveSpeed="3"
+        :hoverEffect="true"
+        hoverMode="grab"
+        :clickEffect="true"
+        clickMode="push"
+      >
+      </vue-particles>
 			<div class="box">
 			<div class="box">
 				<h1>视频分析综合管理平台</h1>
 				<h1>视频分析综合管理平台</h1>
 				<div style="width: 60%;margin: 0 auto;">
 				<div style="width: 60%;margin: 0 auto;">
@@ -219,6 +237,15 @@ import types from '../store/types.js'
 
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 <style scoped lang="scss">
+	#particles{
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: #b61924;
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: 50% 50%;
+}
 	.loginTitle{
 	.loginTitle{
 		height:60px;
 		height:60px;
 		background: #dcdcdc;
 		background: #dcdcdc;
@@ -273,7 +300,7 @@ import types from '../store/types.js'
 	}
 	}
 .box{
 .box{
 	width: 25%; 
 	width: 25%; 
-	position: relative;
+	position: absolute;
 	left: 52%;
 	left: 52%;
 	top: 20%;
 	top: 20%;
 }
 }
@@ -306,7 +333,7 @@ import types from '../store/types.js'
 	    }
 	    }
 		.box{
 		.box{
 			width: 25%; 
 			width: 25%; 
-			position: relative;
+			position: absolute;
 			left: 57%;
 			left: 57%;
 			top: 20%;
 			top: 20%;
 		}
 		}