5 years ago · 37eb1fffe2
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -9,7 +9,10 @@
 
				   },
			
 
				   "dependencies": {
			
 
				     "core-js": "^3.6.4",
			
 
				-    "vue": "^2.6.11"
			
 
				+    "vue": "^2.6.11",
			
 
				+    "vue-particles": "^1.0.9",
			
 
				+    "vue-router": "^3.1.6",
			
 
				+    "vuex": "^3.2.0"
			
 
				   },
			
 
				   "devDependencies": {
			
 
				     "@vue/cli-plugin-babel": "^4.3.0",
			
@@ -18,6 +21,8 @@
 
				     "babel-eslint": "^10.1.0",
			
 
				     "eslint": "^6.7.2",
			
 
				     "eslint-plugin-vue": "^6.2.2",
			
 
				+    "node-sass": "^4.13.1",
			
 
				+    "sass-loader": "^8.0.2",
			
 
				     "vue-template-compiler": "^2.6.11"
			
 
				   },
			
 
				   "eslintConfig": {
			
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,8 @@
 
				     <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				   </head>
			
 
				   <body>
			
 
				+    <script src="//cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
			
 
				+    <script src="//cdn.bootcss.com/axios/0.19.0/axios.js"></script>
			
 
				     <noscript>
			
 
				       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				     </noscript>
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,24 @@
 
				 <template>
			
 
				-  <div id="app">
			
 
				-    <img alt="Vue logo" src="./assets/logo.png">
			
 
				-    <HelloWorld msg="Welcome to Your Vue.js App"/>
			
 
				+  <div id="app" v-cloak>
			
 
				+    <router-view/>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
 
				 <script>
			
 
				-import HelloWorld from './components/HelloWorld.vue'
			
 
				-
			
 
				 export default {
			
 
				-  name: 'App',
			
 
				-  components: {
			
 
				-    HelloWorld
			
 
				-  }
			
 
				-}
			
 
				+  name: "App"
			
 
				+};
			
 
				 </script>
			
 
				 
			
 
				-<style>
			
 
				+<style lang="scss">
			
 
				 #app {
			
 
				-  font-family: Avenir, Helvetica, Arial, sans-serif;
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				   -webkit-font-smoothing: antialiased;
			
 
				   -moz-osx-font-smoothing: grayscale;
			
 
				-  text-align: center;
			
 
				-  color: #2c3e50;
			
 
				-  margin-top: 60px;
			
 
				+  -webkit-user-select: none;
			
 
				+  -moz-user-select: none;
			
 
				+  -ms-user-select: none;
			
 
				+  user-select: none;
			
 
				 }
			
 
				 </style>
			
--- a/src/assets/iconfont/iconfont.css
+++ b/src/assets/iconfont/iconfont.css
@@ -0,0 +1,25 @@
 
				+@font-face {font-family: "iconfont";
			
 
				+  src: url('iconfont.eot?t=1587540653939'); /* IE9 */
			
 
				+  src: url('iconfont.eot?t=1587540653939#iefix') format('embedded-opentype'), /* IE6-IE8 */
			
 
				+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOQAAsAAAAAB5AAAANCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCeIJJATYCJAMMCwgABCAFhG0HNxuQBsgekqQb4pzDOQAOiKCAIvgaY7/v7hDRJJoYOt5JopFEEw1JrDGdIUQyJVqXLyUwtL/33gcxmGmJUoKU6CSlrYFN2ljTFND2qjAli7KKULVD+ZAnyKcDOWEm1OyEZZ/ncnrXEJ/fslzmWH7UCzAOKNA9aEwKAy2QgLxh7IKWuJ9ArUFqoCWH0w0UFeawQOxHmgoUMxaloT5UC5UVc4t4AEjV6RK2C7gPvh//wXRgSCoyc+zK3lqH2ZfWDQ1e8F/AxyOAdDoX2CIypgCF2K30rMtEmSlwtaom21xeqQhpqvj/P4FE01Vu9I+XiEpmbT0Yg9nEl5bDJ/imnSGBDCpRcAbcQWb7HbJopVHs08vQ07nb6akQ4OLtwv3szNXjbaVqCRSMMOErq8cg6HEsGNZ+qEeYORbBu04MidNH0WOLi4pDePy1/MD8vPKEtEPQLmjmNCvVNzNdXT+VG1q4BQDkNtMLCvjitfKgQqitjT2maOre1MoaBWt1ijrFfbdoTb6iE+eccUNopar2U0WQc/EeBVlC73iQ86wndDW6FVZEd05kGYEM2elOhG11wWd2H3Zn4l1wwfuCxxdme6KtXk0zQ2zjD+bRTLmZ8kvR56aCLHUozGKn5rn+/9BwpD7iybWWI9gafZ0QayRc68+ia0y2zm2IKquw+Vn0omxWPgMCAH638wluCnI/uRqO+Du/cbyV1fcnm71i8AV87tAnYPh3u0B3m+pz9wb/QtqxqWh6WFsUiSMxfNnyfbkSMFqLP9AIra6G6zo61xKqdSRIqgwgqzZEFuYUKtSZQaVqs6g1yXFxnTZJMqLUYEIpQGg2haTRK7Jme2RhXqJCp2dUag44aq0Gfc06IxGJs00iRUhHNRPt4DAwbLuUw/ozmVdP4bQ8YN0RJ3Ycxxpa+fyWAuIpJiRp5kRSDDSSQh834DDyvBCjpNAhTQZWikTToWZY1ZMGWrwPZYsYUQiiQ0FeoUiaUMDw2oty4fNnxHTlUXADpSp4h7CE3T3SpkGrA7nVBJ0ot3JOsiemiRTCgMKwkA85ABfxrEwIJVT3chCNGIgYkIpMaaJWYV01g+V1/vvtgFrmljlS5CgqD0I1JsmmJhMDAAAA') format('woff2'),
			
 
				+  url('iconfont.woff?t=1587540653939') format('woff'),
			
 
				+  url('iconfont.ttf?t=1587540653939') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
			
 
				+  url('iconfont.svg?t=1587540653939#iconfont') format('svg'); /* iOS 4.1- */
			
 
				+}
			
 
				+
			
 
				+.iconfont {
			
 
				+  font-family: "iconfont" !important;
			
 
				+  font-size: 16px;
			
 
				+  font-style: normal;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+}
			
 
				+
			
 
				+.icon-secret:before {
			
 
				+  content: "\e530";
			
 
				+}
			
 
				+
			
 
				+.icon-user:before {
			
 
				+  content: "\e612";
			
 
				+}
			
 
				+
			
--- a/src/assets/iconfont/iconfont.eot
+++ b/src/assets/iconfont/iconfont.eot
--- a/src/assets/iconfont/iconfont.svg
+++ b/src/assets/iconfont/iconfont.svg
@@ -0,0 +1,32 @@
 
				+<?xml version="1.0" standalone="no"?>
			
 
				+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
			
 
				+<!--
			
 
				+2013-9-30: Created.
			
 
				+-->
			
 
				+<svg>
			
 
				+<metadata>
			
 
				+Created by iconfont
			
 
				+</metadata>
			
 
				+<defs>
			
 
				+
			
 
				+<font id="iconfont" horiz-adv-x="1024" >
			
 
				+  <font-face
			
 
				+    font-family="iconfont"
			
 
				+    font-weight="500"
			
 
				+    font-stretch="normal"
			
 
				+    units-per-em="1024"
			
 
				+    ascent="896"
			
 
				+    descent="-128"
			
 
				+  />
			
 
				+    <missing-glyph />
			
 
				+    
			
 
				+    <glyph glyph-name="secret" unicode="&#58672;" d="M744.398 520.103h-99.6v37.081c0 62.518-17.161 167.123-132.798 167.123-120.065 0-132.8-116.762-132.8-167.123v-37.081h-99.599v37.081c0 163.786 91.291 269.48 232.398 269.48s232.398-105.694 232.398-269.48v-37.081zM578.399 247.898c0 37.627-29.897 68-66.399 68s-66.4-30.374-66.4-68c0-25.47 13.315-47.092 33.235-58.635v-77.5c0-18.796 14.914-34.324 33.2-34.324 18.285 0 33.2 15.528 33.2 34.324v77.5c19.885 11.543 33.164 33.165 33.164 58.635zM843.997 384v-340.307c0-56.423-44.845-102.357-99.599-102.357H279.601c-54.72 0-99.6 45.935-99.6 102.357V384c0 56.388 44.846 102.357 99.6 102.357h464.797c54.754 0.001 99.6-45.968 99.6-102.357z"  horiz-adv-x="1024" />
			
 
				+
			
 
				+    
			
 
				+    <glyph glyph-name="user" unicode="&#58898;" d="M345.763 694.345c23.813 29.027 53.189 47.912 80.492 60.17 13.139 5.898 26.896 10.092 40.59 12.89 15.122 3.09 30.256 4.467 44.417 4.553h1.475c14.16-0.086 29.293-1.463 44.417-4.553 13.694-2.798 27.451-6.992 40.59-12.89 27.304-12.258 56.68-31.143 80.49-60.17 18.92-23.064 34.2-52.305 41.966-89.354 5.514-26.3 7.274-55.944 4.764-84.953-2.38-27.533-8.61-54.831-19.124-78.637-5.731-12.974-13.662-28.107-24.632-45.047-8.782-13.558-19.43-28.127-32.337-43.444-2.282-4.034-10.18-20.395 5.69-29.87 18.242-10.895 62.59-37.639 103.817-62.848 27.008-16.514 53.83-33.085 73.069-45.34 14.011-8.926 30.844-20.164 44.925-34.572 15.694-16.056 27.712-35.671 29.183-59.825 0.433-7.097 0.631-15.473 0.665-24.23a667.064 667.064 0 0 0-0.478-27.581c-0.74-19.305-4.74-36.207-14.569-49.252-10.765-14.29-27.005-22.82-51.153-23.353h-0.405c-94.846 0.344-203.744 0.516-327.617 0.516s-232.77-0.172-327.616-0.516h-0.404c-24.148 0.533-40.388 9.063-51.152 23.353-9.828 13.045-13.83 29.947-14.57 49.252a667.115 667.115 0 0 0-0.477 27.583c0.032 8.755 0.233 17.13 0.664 24.228 1.472 24.154 13.49 43.767 29.184 59.825 14.082 14.408 30.913 25.647 44.925 34.573 19.237 12.253 46.057 28.822 73.062 45.336 41.229 25.21 85.58 51.955 103.824 62.85 15.869 9.477 7.971 25.837 5.69 29.87-12.906 15.318-23.555 29.887-32.337 43.445-10.971 16.94-18.903 32.073-24.632 45.047-10.515 23.806-16.744 51.104-19.125 78.637-2.51 29.009-0.748 58.653 4.764 84.953 7.768 37.049 23.045 66.291 41.965 89.354"  horiz-adv-x="1024" />
			
 
				+
			
 
				+    
			
 
				+
			
 
				+
			
 
				+  </font>
			
 
				+</defs></svg>
			
--- a/src/assets/iconfont/iconfont.ttf
+++ b/src/assets/iconfont/iconfont.ttf
--- a/src/assets/iconfont/iconfont.woff
+++ b/src/assets/iconfont/iconfont.woff
--- a/src/assets/iconfont/iconfont.woff2
+++ b/src/assets/iconfont/iconfont.woff2
--- a/src/assets/img/bg-1.jpg
+++ b/src/assets/img/bg-1.jpg
--- a/src/assets/img/bg-2.jpg
+++ b/src/assets/img/bg-2.jpg
--- a/src/assets/img/bg-3.jpg
+++ b/src/assets/img/bg-3.jpg
--- a/src/assets/img/bg-4.jpg
+++ b/src/assets/img/bg-4.jpg
--- a/src/assets/img/bg-5.jpg
+++ b/src/assets/img/bg-5.jpg
--- a/src/assets/img/bg.png
+++ b/src/assets/img/bg.png
--- a/src/assets/js/script.js
+++ b/src/assets/js/script.js
--- a/src/assets/styles/base.scss
+++ b/src/assets/styles/base.scss
@@ -0,0 +1,128 @@
 
				+@charset "utf-8";
			
 
				+
			
 
				+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { 
			
 
				+  margin:0; padding:0; 
			
 
				+} 
			
 
				+ol, ul, li {
			
 
				+  list-style: none;
			
 
				+}
			
 
				+blockquote, q {
			
 
				+  quotes: none;
			
 
				+}
			
 
				+blockquote:before, blockquote:after,
			
 
				+q:before, q:after {
			
 
				+  content: '';
			
 
				+  content: none;
			
 
				+}
			
 
				+table {
			
 
				+  border-collapse: collapse;
			
 
				+  border-spacing: 0;
			
 
				+}
			
 
				+address, caption, cite, code, dfn, em, strong, th, var, optgroup { 
			
 
				+  font-style: normal; 
			
 
				+  font-weight: normal;
			
 
				+}
			
 
				+fieldset, img { 
			
 
				+  border:0;
			
 
				+}
			
 
				+textarea { 
			
 
				+  resize: none;
			
 
				+}
			
 
				+
			
 
				+[v-cloak] {
			
 
				+  display: none
			
 
				+}
			
 
				+
			
 
				+body::-webkit-scrollbar {
			
 
				+  display: none
			
 
				+}
			
 
				+ 
			
 
				+/* custom */
			
 
				+a {
			
 
				+  color: #7e8c8d;
			
 
				+  text-decoration: none;
			
 
				+  -webkit-backface-visibility: hidden;
			
 
				+}
			
 
				+::-webkit-scrollbar {
			
 
				+  width: 5px;
			
 
				+  height: 5px;
			
 
				+}
			
 
				+::-webkit-scrollbar-track-piece {
			
 
				+  background-color: rgba(0, 0, 0, 0.2);
			
 
				+  -webkit-border-radius: 6px;
			
 
				+}
			
 
				+::-webkit-scrollbar-thumb:vertical {
			
 
				+  height: 5px;
			
 
				+  background-color: rgba(125, 125, 125, 0.7);
			
 
				+  -webkit-border-radius: 6px;
			
 
				+}
			
 
				+::-webkit-scrollbar-thumb:horizontal {
			
 
				+  width: 5px;
			
 
				+  background-color: rgba(125, 125, 125, 0.7);
			
 
				+  -webkit-border-radius: 6px;
			
 
				+}
			
 
				+html, body {
			
 
				+  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
			
 
				+}
			
 
				+body {
			
 
				+  height: 100%; 
			
 
				+  width: 100%;
			
 
				+  line-height: 1;
			
 
				+  font-size: 12px;
			
 
				+  overflow: hidden;
			
 
				+  -webkit-text-size-adjust: none;
			
 
				+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			
 
				+}
			
 
				+html {
			
 
				+  overflow-y: scroll;
			
 
				+}
			
 
				+ 
			
 
				+/*清除浮动*/
			
 
				+.clearfix:before,
			
 
				+.clearfix:after {
			
 
				+  content: " ";
			
 
				+  display: inline-block;
			
 
				+  height: 0;
			
 
				+  clear: both;
			
 
				+  visibility: hidden;
			
 
				+}
			
 
				+.clearfix {
			
 
				+  *zoom: 1;
			
 
				+}
			
 
				+ 
			
 
				+/*隐藏*/
			
 
				+.dn{
			
 
				+  display: none;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+@media (min-width:1024px) {
			
 
				+	body { font-size: 18px; }
			
 
				+}
			
 
				+
			
 
				+@media (min-width:1100px) {
			
 
				+	body { font-size: 20px; }
			
 
				+}
			
 
				+
			
 
				+@media (min-width:1280px) {
			
 
				+	body { font-size: 22px; }
			
 
				+}
			
 
				+
			
 
				+@media (min-width:1366px) {
			
 
				+	body { font-size: 24px; }
			
 
				+}
			
 
				+
			
 
				+@media (min-width:1440px) {
			
 
				+	body { font-size: 25px; }
			
 
				+}
			
 
				+
			
 
				+@media (min-width:1680px) {
			
 
				+	body { font-size: 28px; }
			
 
				+}
			
 
				+
			
 
				+@media (min-width:1920px){
			
 
				+	body { font-size: 33px; }
			
 
				+}
			
--- a/src/components/bgAnimation/index.vue
+++ b/src/components/bgAnimation/index.vue
@@ -0,0 +1,114 @@
 
				+<template>
			
 
				+  <ul class="slide-box">
			
 
				+    <li></li>
			
 
				+    <li></li>
			
 
				+    <li></li>
			
 
				+    <li></li>
			
 
				+  </ul>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+
			
 
				+export default {
			
 
				+  name: "bgAnimation"
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss">
			
 
				+.slide-box {
			
 
				+  position: fixed;
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  background: rgba(0, 134, 179, .5);
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  z-index: 0;
			
 
				+  li {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    position: absolute;
			
 
				+    top: 0px;
			
 
				+    left: 0px;
			
 
				+    color: transparent;
			
 
				+    background-size: cover;
			
 
				+    background-position: 50% 50%;
			
 
				+    background-repeat: none;
			
 
				+    opacity: 0;
			
 
				+    z-index: 0;
			
 
				+    -webkit-backface-visibility: hidden;
			
 
				+    -webkit-animation: imgAnimation 48s linear infinite 0s;
			
 
				+    -moz-animation: imgAnimation 48s linear infinite 0s;
			
 
				+    -o-animation: imgAnimation 48s linear infinite 0s;
			
 
				+    -ms-animation: imgAnimation 48s linear infinite 0s;
			
 
				+    animation: imgAnimation 48s linear infinite 0s;
			
 
				+
			
 
				+    &:nth-child(1) {
			
 
				+      background-image: url(../../assets/img/bg-4.jpg);
			
 
				+    }
			
 
				+    &:nth-child(2) {
			
 
				+      background-image: url(../../assets/img/bg-5.jpg);
			
 
				+      -webkit-animation-delay: 12s;
			
 
				+      -moz-animation-delay: 12s;
			
 
				+      -o-animation-delay: 12s;
			
 
				+      -ms-animation-delay: 12s;
			
 
				+      animation-delay: 12s;
			
 
				+    }
			
 
				+    &:nth-child(3) {
			
 
				+      background-image: url(../../assets/img/bg-2.jpg);
			
 
				+      -webkit-animation-delay: 24s;
			
 
				+      -moz-animation-delay: 24s;
			
 
				+      -o-animation-delay: 24s;
			
 
				+      -ms-animation-delay: 24s;
			
 
				+      animation-delay: 24s;
			
 
				+    }
			
 
				+    &:nth-child(4) {
			
 
				+      background-image: url(../../assets/img/bg-4.jpg);
			
 
				+      animation-delay: 36s;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+@-webkit-keyframes imgAnimation {
			
 
				+  0% {
			
 
				+    opacity: 0;
			
 
				+    -webkit-animation-timing-function: ease-in;
			
 
				+  }
			
 
				+  8% {
			
 
				+    opacity: 1;
			
 
				+    -webkit-transform: scale(1.1);
			
 
				+    -webkit-animation-timing-function: ease-out;
			
 
				+  }
			
 
				+  17% {
			
 
				+    opacity: 1;
			
 
				+    -webkit-transform: scale(1.2);
			
 
				+  }
			
 
				+  25% {
			
 
				+    opacity: 0;
			
 
				+    -webkit-transform: scale(1.3);
			
 
				+  }
			
 
				+  100% {
			
 
				+    opacity: 0;
			
 
				+  }
			
 
				+}
			
 
				+@keyframes imgAnimation {
			
 
				+  0% {
			
 
				+    opacity: 0;
			
 
				+    animation-timing-function: ease-in;
			
 
				+  }
			
 
				+  8% {
			
 
				+    opacity: 1;
			
 
				+    transform: scale(1.1);
			
 
				+    animation-timing-function: ease-out;
			
 
				+  }
			
 
				+  17% {
			
 
				+    opacity: 1;
			
 
				+    transform: scale(1.2);
			
 
				+  }
			
 
				+  25% {
			
 
				+    opacity: 0;
			
 
				+    transform: scale(1.3);
			
 
				+  }
			
 
				+  100% {
			
 
				+    opacity: 0;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -0,0 +1,30 @@
 
				+import bgAnimation from './bgAnimation'
			
 
				+
			
 
				+const components = {
			
 
				+  bgAnimation,
			
 
				+  // particles
			
 
				+};
			
 
				+
			
 
				+const install = (Vue = {}) => {
			
 
				+  if (install.installed) return;
			
 
				+  Object.keys(components).forEach(component => {
			
 
				+    Vue.component(components[component].name, components[component]);
			
 
				+  });
			
 
				+
			
 
				+  Vue.prototype.$notice = Notification;
			
 
				+  install.installed = true;
			
 
				+};
			
 
				+
			
 
				+install.installed = false;
			
 
				+if (typeof window !== "undefined" && window.Vue) {
			
 
				+  install(window.Vue);
			
 
				+  install.installed = true;
			
 
				+}
			
 
				+
			
 
				+const Vcomp = {
			
 
				+  ...components,
			
 
				+  install
			
 
				+};
			
 
				+
			
 
				+
			
 
				+export default Vcomp
			
--- a/src/components/particles/index.vue
+++ b/src/components/particles/index.vue
@@ -0,0 +1,40 @@
 
				+<template>
			
 
				+  <vue-particles
			
 
				+    color="#6495ED"
			
 
				+    :particleOpacity="0.8"
			
 
				+    :particlesNumber="70"
			
 
				+    shapeType="circle"
			
 
				+    :particleSize="4"
			
 
				+    linesColor="#6495ED"
			
 
				+    :linesWidth="1"
			
 
				+    :lineLinked="true"
			
 
				+    :lineOpacity="0.6"
			
 
				+    :linesDistance="150"
			
 
				+    :moveSpeed="3"
			
 
				+    :hoverEffect="true"
			
 
				+    hoverMode="grab"
			
 
				+    :clickEffect="true"
			
 
				+    clickMode="push"
			
 
				+  >
			
 
				+  </vue-particles>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import Vue from "vue";
			
 
				+import VueParticles from "vue-particles";
			
 
				+Vue.use(VueParticles);
			
 
				+export default {
			
 
				+  name: "particles"
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+#particles-js {
			
 
				+  position: fixed;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  z-index: 1000;
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+}
			
 
				+</style>
			
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,24 @@
 
				 import Vue from 'vue'
			
 
				 import App from './App.vue'
			
 
				+import router from './router'
			
 
				+import store from './store'
			
 
				+import Axios from "axios";
			
 
				+import vueParticles from 'vue-particles'
			
 
				+import Vcomp from './components/index'
			
 
				+import $ from 'jquery'
			
 
				+
			
 
				+import '@/assets/styles/base.scss'
			
 
				+import '@/assets/iconfont/iconfont.css'
			
 
				+
			
 
				+Vue.use(vueParticles)
			
 
				+Vue.use(Vcomp)
			
 
				 
			
 
				 Vue.config.productionTip = false
			
 
				 
			
 
				+Vue.prototype.$Axios = Axios
			
 
				+
			
 
				 new Vue({
			
 
				+  router,
			
 
				+  store,
			
 
				   render: h => h(App),
			
 
				 }).$mount('#app')
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,26 @@
 
				+import Vue from 'vue'
			
 
				+import VueRouter from 'vue-router'
			
 
				+import Login from '@/views/Login.vue'
			
 
				+
			
 
				+Vue.use(VueRouter)
			
 
				+
			
 
				+const routes = [
			
 
				+  {
			
 
				+    path: '/',
			
 
				+    name: 'Login',
			
 
				+    component: Login
			
 
				+  },
			
 
				+  // {
			
 
				+  //   path: '/Home',
			
 
				+  //   name: 'Home',
			
 
				+  //   component: () => import('../views/Home.vue')
			
 
				+  // }
			
 
				+]
			
 
				+
			
 
				+const router = new VueRouter({
			
 
				+  mode: 'history',
			
 
				+  base: process.env.BASE_URL,
			
 
				+  routes
			
 
				+})
			
 
				+
			
 
				+export default router
			
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -0,0 +1,15 @@
 
				+import Vue from 'vue'
			
 
				+import Vuex from 'vuex'
			
 
				+
			
 
				+Vue.use(Vuex)
			
 
				+
			
 
				+export default new Vuex.Store({
			
 
				+  state: {
			
 
				+  },
			
 
				+  mutations: {
			
 
				+  },
			
 
				+  actions: {
			
 
				+  },
			
 
				+  modules: {
			
 
				+  }
			
 
				+})
			
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -0,0 +1,276 @@
 
				+<template>
			
 
				+  <div class="login-container">
			
 
				+  	<div class="layer">
			
 
				+  			<div class="some-space">
			
 
				+        	<div class="form">
			
 
				+						<h2>大数据可视化平台</h2>
			
 
				+						<div class="item">
			
 
				+							<i class="iconfont icon-user"></i>
			
 
				+							<input
			
 
				+	              autocomplete="off"
			
 
				+	              type="text"
			
 
				+	              class="input"
			
 
				+	              v-model="userName"
			
 
				+	              placeholder="请输入用户名"
			
 
				+	            />
			
 
				+            </div>
			
 
				+            <div class="item">
			
 
				+            	<i class="iconfont icon-secret"></i>
			
 
				+	            <input
			
 
				+	              autocomplete="off"
			
 
				+	              type="password"
			
 
				+	              class="input"
			
 
				+	              v-model="userPwd"
			
 
				+	              maxlength="20"
			
 
				+	              @keyup.enter="login"
			
 
				+	              placeholder="请输入密码"
			
 
				+	            />
			
 
				+            </div>
			
 
				+	          <button 
			
 
				+	            class="loginBtn"
			
 
				+	            :disabled="isLoginAble"
			
 
				+	            @click.stop="login">
			
 
				+	            立即登录
			
 
				+	          </button>
			
 
				+	          <div class="tip">
			
 
				+							默认用户名：admin ，默认密码：123456
			
 
				+	          </div>
			
 
				+        	</div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <div class="layer">
			
 
				+	    <vue-particles 
			
 
				+	      color="#6495ED"
			
 
				+	      :particleOpacity="0.7"
			
 
				+	      :particlesNumber="80"
			
 
				+	      shapeType="circle"
			
 
				+	      :particleSize="4"
			
 
				+	      linesColor="#6495ED"
			
 
				+	      :linesWidth="1"
			
 
				+	      :lineLinked="true"
			
 
				+	      :lineOpacity="0.6"
			
 
				+	      :linesDistance="150"
			
 
				+	      :moveSpeed="3"
			
 
				+	      :hoverEffect="true"
			
 
				+	      hoverMode="grab"
			
 
				+	      :clickEffect="true"
			
 
				+	      clickMode="push"
			
 
				+	    >
			
 
				+	    </vue-particles>
			
 
				+    </div>
			
 
				+
			
 
				+    <bgAnimation />
			
 
				+
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+
			
 
				+export default {
			
 
				+  name: 'Login',
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+  	return {
			
 
				+  		userName: 'admin',
			
 
				+  		userPwd: '123456'
			
 
				+  	}
			
 
				+  },
			
 
				+  computed: {
			
 
				+  	isLoginAble() {
			
 
				+  		return !(this.userName && this.userPwd);
			
 
				+  	}
			
 
				+  },
			
 
				+  created() {},
			
 
				+  mounted() {
			
 
				+
			
 
				+  },
			
 
				+  methods: {
			
 
				+  	login() {
			
 
				+  		console.log('login')
			
 
				+  	}
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss">
			
 
				+.login-container {
			
 
				+	.layer {
			
 
				+	  position: absolute;
			
 
				+	  height: 100%;
			
 
				+	  width: 100%;
			
 
				+	}
			
 
				+	#particles-js {
			
 
				+	  position: absolute;
			
 
				+	  top: 0;
			
 
				+	  left: 0;
			
 
				+	  width: 100%;
			
 
				+	  height: 100%;
			
 
				+    z-index: 1000;
			
 
				+	}
			
 
				+	.some-space {
			
 
				+	  color: white;
			
 
				+	  font-weight: 100;
			
 
				+	  letter-spacing: 2px;
			
 
				+	  position: absolute;
			
 
				+	  top: 50%;
			
 
				+	  left: 50%;
			
 
				+	  z-index: 1001;
			
 
				+	  -webkit-transform: translate3d(-50%, -50%, 0);
			
 
				+	  transform: translate3d(-50%, -50%, 0);
			
 
				+
			
 
				+	  -ms-animation: cloud 2s 3s ease-in infinite alternate;
			
 
				+	  -moz-animation: cloud 2s 3s ease-in infinite alternate;
			
 
				+	  -webkit-animation: cloud 2s 3s ease-in infinite alternate;
			
 
				+	  -o-animation: cloud 2s 3s ease-in infinite alternate;
			
 
				+	  -webkit-animation: cloud 2s 3s ease-in infinite alternate;
			
 
				+	  animation: cloud 2s 3s ease-in infinite alternate;
			
 
				+
			
 
				+	  .form {
			
 
				+	  	width: 460px;
			
 
				+	  	height: auto;
			
 
				+	  	background: rgba(36, 36, 85, .5);
			
 
				+	  	margin: 0 auto;
			
 
				+	  	padding: 35px 30px 25px;
			
 
				+	  	box-shadow: 0 0 25px rgb(72, 72, 85);
			
 
				+	  	border-radius: 10px;
			
 
				+	    .item {
			
 
				+	    	display: flex;
			
 
				+	    	align-items: center;
			
 
				+				margin-bottom: 25px;
			
 
				+        border-bottom: 1px solid #d3d7f7;
			
 
				+				i {
			
 
				+					color: #d3d7f7;
			
 
				+					margin-right: 10px;
			
 
				+				}
			
 
				+	    }
			
 
				+	  	h2 {
			
 
				+	  		text-align: center;
			
 
				+	  		font-weight: normal;
			
 
				+	  		font-size: 26px;
			
 
				+	  		color: #d3d7f7;
			
 
				+	  		padding-bottom: 35px;
			
 
				+	  	}
			
 
				+	  	.input {
			
 
				+        font-size: 16px;
			
 
				+        line-height: 30px;
			
 
				+        width: 100%;
			
 
				+        color: #d3d7f7;
			
 
				+        outline: none;
			
 
				+        border: none;
			
 
				+        background-color: rgba(0, 0, 0, 0);
			
 
				+        padding: 10px 0;
			
 
				+	  	}
			
 
				+	  	.loginBtn {
			
 
				+	  		width: 100%;
			
 
				+	  		padding: 12px 0;
			
 
				+	  		border: 1px solid #d3d7f7;
			
 
				+        font-size: 16px;
			
 
				+    		color: #d3d7f7;
			
 
				+    		cursor: pointer;
			
 
				+    		background: transparent;
			
 
				+    		border-radius: 4px;
			
 
				+        margin-top: 10px;
			
 
				+    		&:hover {
			
 
				+    			color: #fff;
			
 
				+    			background: #0090ff;
			
 
				+    			border-color: #0090ff;
			
 
				+    		}
			
 
				+	  	}
			
 
				+	  	.tip {
			
 
				+        font-size: 12px;
			
 
				+        padding-top: 20px;
			
 
				+	  	}
			
 
				+	  }
			
 
				+
			
 
				+
			
 
				+	}
			
 
				+
			
 
				+}
			
 
				+
			
 
				+input::-webkit-input-placeholder {
			
 
				+    color: #d3d7f7;
			
 
				+}
			
 
				+input::-moz-placeholder {   /* Mozilla Firefox 19+ */
			
 
				+    color: #d3d7f7;
			
 
				+}
			
 
				+input:-moz-placeholder {    /* Mozilla Firefox 4 to 18 */
			
 
				+    color: #d3d7f7;
			
 
				+}
			
 
				+input:-ms-input-placeholder {  /* Internet Explorer 10-11 */ 
			
 
				+    color: #d3d7f7;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+@-ms-keyframes cloud{
			
 
				+    0%{
			
 
				+        -ms-transform: translate(-50%, -50%);
			
 
				+    }
			
 
				+    40%{
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+    60%{
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+    100%{
			
 
				+        -ms-transform: translate(-50%, -40%);
			
 
				+    }
			
 
				+}
			
 
				+@-moz-keyframes cloud{
			
 
				+    0%{
			
 
				+        -moz-transform: translate(-50%, -50%);
			
 
				+    }
			
 
				+    40%{
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+    60%{
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+    100%{
			
 
				+        -moz-transform: translate(-50%, -40%);
			
 
				+    }
			
 
				+}
			
 
				+@-o-keyframes cloud{
			
 
				+    0%{
			
 
				+        -o-transform: translate(-50%, -50%);
			
 
				+    }
			
 
				+    40%{
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+    60%{
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+    100%{
			
 
				+        -o-transform: translate(-50%, -40%);
			
 
				+    }
			
 
				+}
			
 
				+@-webkit-keyframes cloud{
			
 
				+    0%{
			
 
				+        -webkit-transform: translate(-50%, -50%);
			
 
				+    }
			
 
				+    40%{
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+    60%{
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+    100%{
			
 
				+        -webkit-transform: translate(-50%, -40%);
			
 
				+    }
			
 
				+}
			
 
				+@keyframes cloud{
			
 
				+    0%{
			
 
				+        transform: translate(-50%, -50%);
			
 
				+    }
			
 
				+    40%{
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+    60%{
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+    100%{
			
 
				+        transform: translate(-50%, -40%);
			
 
				+    }
			
 
				+}
			
 
				+	
			
 
				+</style>
			
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,25 @@
 
				+module.exports = {
			
 
				+  publicPath: process.env.NODE_ENV === "production" ? "/vueDataV/" : "/",
			
 
				+  productionSourceMap: false,
			
 
				+  lintOnSave: false,
			
 
				+  devServer: {
			
 
				+    port: 8081,
			
 
				+    // proxy: {
			
 
				+    //   "/api": {
			
 
				+    //     target: "https://api.github.com",
			
 
				+    //     changeOrigin: true,
			
 
				+    //     ws: false,
			
 
				+    //     pathRewrite: {
			
 
				+    //       "^/api": ""
			
 
				+    //     }
			
 
				+    //   }
			
 
				+    // }
			
 
				+  },
			
 
				+  configureWebpack: {
			
 
				+      // 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并
			
 
				+      externals: {
			
 
				+           'jquery' : '$',
			
 
				+           'axios' : 'axios'
			
 
				+      }
			
 
				+    }
			
 
				+};