diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index a07e683600beeef0d00784cd78da1dc557d996a9..78cd72e5e180a323e8dc7fe17860c627f58e86cc 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -64,7 +64,11 @@ module.exports = {
           limit: 10000,
           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
         }
-      }
+      },
+      {
+        test: /\.scss$/,
+        loaders: ["style", "css", "sass"]
+      },
     ]
   },
   node: {
diff --git a/config/index.js b/config/index.js
index c5eded7f81ab3b7f3c6fb54e0c86bcf7adeab944..91050241c6b9791071f3b5242ced15233cae0659 100644
--- a/config/index.js
+++ b/config/index.js
@@ -6,32 +6,41 @@ const path = require('path')
 
 module.exports = {
   dev: {
-
     // Paths
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    proxyTable: {},
+    proxyTable: {
+      '/api': {
+        //target: 'http://www.choisaaaa.shop',
+        target: 'http://localhost:8080',
+        //target: 'http://localhost:8082/systex_sbtWeb/api', 
+        changeOrigin: true, //是否跨域
+        pathRewrite: {
+          '^/api': '' //需要rewrite的,
+        }
+      }
+    },
 
     // Various Dev Server settings
     host: 'localhost', // can be overwritten by process.env.HOST
-    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,
     notifyOnErrors: true,
     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 
-    
     /**
      * Source Maps
      */
 
     // https://webpack.js.org/configuration/devtool/#development
-    devtool: 'cheap-module-eval-source-map',
+    //devtool: 'cheap-module-eval-source-map',
+    devtool: 'source-map',
 
     // If you have problems debugging vue-files in devtools,
     // set this to false - it *may* help
     // https://vue-loader.vuejs.org/en/options.html#cachebusting
-    cacheBusting: true,
+    cacheBusting: false,
 
     cssSourceMap: true
   },
diff --git a/index.html b/index.html
index ec9c94922981f40d22ca37192d0097eca433af5e..310cd42d50faf9a8a0c494bd6ffa03b6cea380d1 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
index 0126943d9661fe141c99426791c3477d4379aca4..ff912cfc0fd0474793239673f47615882d3ee7cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,12 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "http://registry.npm.taobao.org/abbrev/download/abbrev-1.1.1.tgz",
+      "integrity": "sha1-+PLIh60Qv2f2NPAFtph/7TF5qsg=",
+      "dev": true
+    },
     "accepts": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
@@ -72,6 +78,12 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "http://registry.npm.taobao.org/amdefine/download/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
+      "dev": true
+    },
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -109,6 +121,16 @@
       "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
       "dev": true
     },
+    "are-we-there-yet": {
+      "version": "1.1.5",
+      "resolved": "http://registry.npm.taobao.org/are-we-there-yet/download/are-we-there-yet-1.1.5.tgz",
+      "integrity": "sha1-SzXClE8GKov82mZBB2A1D+nd/CE=",
+      "dev": true,
+      "requires": {
+        "delegates": "1.0.0",
+        "readable-stream": "2.3.6"
+      }
+    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -185,6 +207,15 @@
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
       "dev": true
     },
+    "asn1": {
+      "version": "0.2.4",
+      "resolved": "http://registry.npm.taobao.org/asn1/download/asn1-0.2.4.tgz",
+      "integrity": "sha1-jSR136tVO7M+d7VOWeiAu4ziMTY=",
+      "dev": true,
+      "requires": {
+        "safer-buffer": "2.1.2"
+      }
+    },
     "asn1.js": {
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz",
@@ -222,6 +253,12 @@
         }
       }
     },
+    "assert-plus": {
+      "version": "1.0.0",
+      "resolved": "http://registry.npm.taobao.org/assert-plus/download/assert-plus-1.0.0.tgz",
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+      "dev": true
+    },
     "assign-symbols": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
@@ -243,12 +280,32 @@
       "integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0=",
       "dev": true
     },
+    "async-foreach": {
+      "version": "0.1.3",
+      "resolved": "http://registry.npm.taobao.org/async-foreach/download/async-foreach-0.1.3.tgz",
+      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
+      "dev": true
+    },
     "async-limiter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
       "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "http://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz",
+      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
+      "requires": {
+        "babel-runtime": "6.26.0"
+      }
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "http://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
+      "dev": true
+    },
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -269,6 +326,27 @@
         "postcss-value-parser": "3.3.0"
       }
     },
+    "aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "http://registry.npm.taobao.org/aws-sign2/download/aws-sign2-0.7.0.tgz",
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
+      "dev": true
+    },
+    "aws4": {
+      "version": "1.8.0",
+      "resolved": "http://registry.npm.taobao.org/aws4/download/aws4-1.8.0.tgz",
+      "integrity": "sha1-8OAD2cqef1nHpQiUXXsu+aBKVC8=",
+      "dev": true
+    },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "http://registry.npm.taobao.org/axios/download/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "1.5.8",
+        "is-buffer": "1.1.6"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -519,8 +597,7 @@
     "babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
-      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==",
-      "dev": true
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
     },
     "babel-helpers": {
       "version": "6.24.1",
@@ -1048,7 +1125,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "2.5.7",
         "regenerator-runtime": "0.11.1"
@@ -1181,6 +1257,16 @@
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
       "dev": true
     },
+    "bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "http://registry.npm.taobao.org/bcrypt-pbkdf/download/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "tweetnacl": "0.14.5"
+      }
+    },
     "bfj-node4": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/bfj-node4/-/bfj-node4-5.3.1.tgz",
@@ -1204,6 +1290,15 @@
       "integrity": "sha1-RqoXUftqL5PuXmibsQh9SxTGwgU=",
       "dev": true
     },
+    "block-stream": {
+      "version": "0.0.9",
+      "resolved": "http://registry.npm.taobao.org/block-stream/download/block-stream-0.0.9.tgz",
+      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
+      "dev": true,
+      "requires": {
+        "inherits": "2.0.3"
+      }
+    },
     "bluebird": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.2.tgz",
@@ -1232,6 +1327,14 @@
         "qs": "6.5.1",
         "raw-body": "2.3.2",
         "type-is": "1.6.16"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.5.1",
+          "resolved": "http://registry.npm.taobao.org/qs/download/qs-6.5.1.tgz",
+          "integrity": "sha1-NJzfbu+J7EXBLX1es/wMhwNDptg=",
+          "dev": true
+        }
       }
     },
     "bonjour": {
@@ -1543,6 +1646,12 @@
       "integrity": "sha512-cXKbYwpxBLd7qHyej16JazPoUacqoVuDhvR61U7Fr5vSxMUiodzcYa1rQYRYfZ5GexV03vGZHd722vNPLjPJGQ==",
       "dev": true
     },
+    "caseless": {
+      "version": "0.12.0",
+      "resolved": "http://registry.npm.taobao.org/caseless/download/caseless-0.12.0.tgz",
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
+      "dev": true
+    },
     "center-align": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
@@ -1707,6 +1816,35 @@
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
+    "clone-deep": {
+      "version": "2.0.2",
+      "resolved": "http://registry.npm.taobao.org/clone-deep/download/clone-deep-2.0.2.tgz",
+      "integrity": "sha1-ANs6Hhc2VnMNEYjD1qztbX6pdxM=",
+      "dev": true,
+      "requires": {
+        "for-own": "1.0.0",
+        "is-plain-object": "2.0.4",
+        "kind-of": "6.0.2",
+        "shallow-clone": "1.0.0"
+      },
+      "dependencies": {
+        "for-own": {
+          "version": "1.0.0",
+          "resolved": "http://registry.npm.taobao.org/for-own/download/for-own-1.0.0.tgz",
+          "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
+          "dev": true,
+          "requires": {
+            "for-in": "1.0.2"
+          }
+        },
+        "kind-of": {
+          "version": "6.0.2",
+          "resolved": "http://registry.npm.taobao.org/kind-of/download/kind-of-6.0.2.tgz",
+          "integrity": "sha1-ARRrNqYhjmTljzqNZt5df8b20FE=",
+          "dev": true
+        }
+      }
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -1790,6 +1928,15 @@
       "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
       "dev": true
     },
+    "combined-stream": {
+      "version": "1.0.7",
+      "resolved": "http://registry.npm.taobao.org/combined-stream/download/combined-stream-1.0.7.tgz",
+      "integrity": "sha1-LR0kMXr7ir6V1tLAsHtXgTU52Cg=",
+      "dev": true,
+      "requires": {
+        "delayed-stream": "1.0.0"
+      }
+    },
     "commander": {
       "version": "2.17.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
@@ -1865,6 +2012,12 @@
         "date-now": "0.1.4"
       }
     },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "http://registry.npm.taobao.org/console-control-strings/download/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+      "dev": true
+    },
     "consolidate": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.14.5.tgz",
@@ -1952,8 +2105,7 @@
     "core-js": {
       "version": "2.5.7",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
-      "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==",
-      "dev": true
+      "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw=="
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -2370,6 +2522,15 @@
         "es5-ext": "0.10.46"
       }
     },
+    "dashdash": {
+      "version": "1.14.1",
+      "resolved": "http://registry.npm.taobao.org/dashdash/download/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "1.0.0"
+      }
+    },
     "date-now": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
@@ -2409,6 +2570,11 @@
       "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "1.5.2",
+      "resolved": "http://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
+    },
     "define-properties": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
@@ -2508,6 +2674,18 @@
         }
       }
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "http://registry.npm.taobao.org/delayed-stream/download/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
+      "dev": true
+    },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "http://registry.npm.taobao.org/delegates/download/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
+      "dev": true
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -2675,6 +2853,25 @@
         "stream-shift": "1.0.0"
       }
     },
+    "ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "http://registry.npm.taobao.org/ecc-jsbn/download/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "jsbn": "0.1.1",
+        "safer-buffer": "2.1.2"
+      }
+    },
+    "echarts": {
+      "version": "4.2.0-rc.1",
+      "resolved": "http://registry.npm.taobao.org/echarts/download/echarts-4.2.0-rc.1.tgz",
+      "integrity": "sha1-x2vDkunTT5FEgPgpkwX2b6C3nLc=",
+      "requires": {
+        "zrender": "4.0.5"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -2693,6 +2890,19 @@
       "integrity": "sha512-h3zEBLdHvsKfaXv1SHAtykJyNtwYFEKkrWGSFyW1BzGgPQ4ykAzD5Hd8C5MZGTAEhkCKmtyIwYUrapsI0xfKww==",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.4.8",
+      "resolved": "http://registry.npm.taobao.org/element-ui/download/element-ui-2.4.8.tgz",
+      "integrity": "sha1-BMaEVA+EmD70QLUWaAsNxqTGbv8=",
+      "requires": {
+        "async-validator": "1.8.5",
+        "babel-helper-vue-jsx-merge-props": "2.0.3",
+        "deepmerge": "1.5.2",
+        "normalize-wheel": "1.0.1",
+        "resize-observer-polyfill": "1.5.0",
+        "throttle-debounce": "1.1.0"
+      }
+    },
     "elliptic": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.1.tgz",
@@ -3097,6 +3307,12 @@
         "vary": "1.1.2"
       },
       "dependencies": {
+        "qs": {
+          "version": "6.5.1",
+          "resolved": "http://registry.npm.taobao.org/qs/download/qs-6.5.1.tgz",
+          "integrity": "sha1-NJzfbu+J7EXBLX1es/wMhwNDptg=",
+          "dev": true
+        },
         "safe-buffer": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
@@ -3105,6 +3321,12 @@
         }
       }
     },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "http://registry.npm.taobao.org/extend/download/extend-3.0.2.tgz",
+      "integrity": "sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo=",
+      "dev": true
+    },
     "extend-shallow": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
@@ -3209,6 +3431,12 @@
         "webpack-sources": "1.2.0"
       }
     },
+    "extsprintf": {
+      "version": "1.3.0",
+      "resolved": "http://registry.npm.taobao.org/extsprintf/download/extsprintf-1.3.0.tgz",
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
+      "dev": true
+    },
     "fast-deep-equal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
@@ -3372,7 +3600,6 @@
       "version": "1.5.8",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.8.tgz",
       "integrity": "sha512-sy1mXPmv7kLAMKW/8XofG7o9T+6gAjzdZK4AJF6ryqQYUa/hnzgiypoeUecZ53x7XiqKNEpNqLtS97MshW2nxg==",
-      "dev": true,
       "requires": {
         "debug": "3.1.0"
       },
@@ -3381,13 +3608,17 @@
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
           "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
         }
       }
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "http://registry.npm.taobao.org/font-awesome/download/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -3403,6 +3634,34 @@
         "for-in": "1.0.2"
       }
     },
+    "forever-agent": {
+      "version": "0.6.1",
+      "resolved": "http://registry.npm.taobao.org/forever-agent/download/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
+      "dev": true
+    },
+    "form-data": {
+      "version": "2.3.2",
+      "resolved": "http://registry.npm.taobao.org/form-data/download/form-data-2.3.2.tgz",
+      "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=",
+      "dev": true,
+      "requires": {
+        "asynckit": "0.4.0",
+        "combined-stream": "1.0.6",
+        "mime-types": "2.1.20"
+      },
+      "dependencies": {
+        "combined-stream": {
+          "version": "1.0.6",
+          "resolved": "http://registry.npm.taobao.org/combined-stream/download/combined-stream-1.0.6.tgz",
+          "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=",
+          "dev": true,
+          "requires": {
+            "delayed-stream": "1.0.0"
+          }
+        }
+      }
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -4019,12 +4278,71 @@
         }
       }
     },
+    "fstream": {
+      "version": "1.0.11",
+      "resolved": "http://registry.npm.taobao.org/fstream/download/fstream-1.0.11.tgz",
+      "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "4.1.11",
+        "inherits": "2.0.3",
+        "mkdirp": "0.5.1",
+        "rimraf": "2.6.2"
+      }
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "gauge": {
+      "version": "2.7.4",
+      "resolved": "http://registry.npm.taobao.org/gauge/download/gauge-2.7.4.tgz",
+      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "dev": true,
+      "requires": {
+        "aproba": "1.2.0",
+        "console-control-strings": "1.1.0",
+        "has-unicode": "2.0.1",
+        "object-assign": "4.1.1",
+        "signal-exit": "3.0.2",
+        "string-width": "1.0.2",
+        "strip-ansi": "3.0.1",
+        "wide-align": "1.1.3"
+      },
+      "dependencies": {
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "dev": true,
+          "requires": {
+            "number-is-nan": "1.0.1"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "http://registry.npm.taobao.org/string-width/download/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "dev": true,
+          "requires": {
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
+          }
+        }
+      }
+    },
+    "gaze": {
+      "version": "1.1.3",
+      "resolved": "http://registry.npm.taobao.org/gaze/download/gaze-1.1.3.tgz",
+      "integrity": "sha1-xEFzPhO5J6yMD/C0w7Az8ogSkko=",
+      "dev": true,
+      "requires": {
+        "globule": "1.2.1"
+      }
+    },
     "get-caller-file": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
@@ -4049,6 +4367,15 @@
       "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=",
       "dev": true
     },
+    "getpass": {
+      "version": "0.1.7",
+      "resolved": "http://registry.npm.taobao.org/getpass/download/getpass-0.1.7.tgz",
+      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "1.0.0"
+      }
+    },
     "glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
@@ -4140,6 +4467,17 @@
         "slash": "1.0.0"
       }
     },
+    "globule": {
+      "version": "1.2.1",
+      "resolved": "http://registry.npm.taobao.org/globule/download/globule-1.2.1.tgz",
+      "integrity": "sha1-Xf+xsZHyLSB5epNptJ6rTpg5aW0=",
+      "dev": true,
+      "requires": {
+        "glob": "7.1.3",
+        "lodash": "4.17.11",
+        "minimatch": "3.0.4"
+      }
+    },
     "graceful-fs": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
@@ -4168,6 +4506,22 @@
       "integrity": "sha1-/Xqtcmvxpf0W38KbL3pmAdJxOcQ=",
       "dev": true
     },
+    "har-schema": {
+      "version": "2.0.0",
+      "resolved": "http://registry.npm.taobao.org/har-schema/download/har-schema-2.0.0.tgz",
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
+      "dev": true
+    },
+    "har-validator": {
+      "version": "5.0.3",
+      "resolved": "http://registry.npm.taobao.org/har-validator/download/har-validator-5.0.3.tgz",
+      "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=",
+      "dev": true,
+      "requires": {
+        "ajv": "5.5.2",
+        "har-schema": "2.0.0"
+      }
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -4192,6 +4546,12 @@
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
       "dev": true
     },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "http://registry.npm.taobao.org/has-unicode/download/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
+      "dev": true
+    },
     "has-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
@@ -4545,6 +4905,17 @@
         }
       }
     },
+    "http-signature": {
+      "version": "1.2.0",
+      "resolved": "http://registry.npm.taobao.org/http-signature/download/http-signature-1.2.0.tgz",
+      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "1.0.0",
+        "jsprim": "1.4.1",
+        "sshpk": "1.14.2"
+      }
+    },
     "https-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
@@ -4624,6 +4995,12 @@
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
       "dev": true
     },
+    "in-publish": {
+      "version": "2.0.0",
+      "resolved": "http://registry.npm.taobao.org/in-publish/download/in-publish-2.0.0.tgz",
+      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
+      "dev": true
+    },
     "indent-string": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
@@ -4736,8 +5113,7 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "is-builtin-module": {
       "version": "1.0.0",
@@ -4935,6 +5311,12 @@
       "integrity": "sha1-PMWfAAJRlLarLjjbrmaJJWtmBXI=",
       "dev": true
     },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "http://registry.npm.taobao.org/is-typedarray/download/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
+      "dev": true
+    },
     "is-utf8": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
@@ -4971,6 +5353,12 @@
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
       "dev": true
     },
+    "isstream": {
+      "version": "0.1.2",
+      "resolved": "http://registry.npm.taobao.org/isstream/download/isstream-0.1.2.tgz",
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
+      "dev": true
+    },
     "js-base64": {
       "version": "2.4.9",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.9.tgz",
@@ -4993,6 +5381,13 @@
         "esprima": "2.7.3"
       }
     },
+    "jsbn": {
+      "version": "0.1.1",
+      "resolved": "http://registry.npm.taobao.org/jsbn/download/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
+      "dev": true,
+      "optional": true
+    },
     "jsesc": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
@@ -5011,12 +5406,24 @@
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
       "dev": true
     },
+    "json-schema": {
+      "version": "0.2.3",
+      "resolved": "http://registry.npm.taobao.org/json-schema/download/json-schema-0.2.3.tgz",
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
+      "dev": true
+    },
     "json-schema-traverse": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
       "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=",
       "dev": true
     },
+    "json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "http://registry.npm.taobao.org/json-stringify-safe/download/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
+      "dev": true
+    },
     "json3": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
@@ -5029,6 +5436,18 @@
       "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
       "dev": true
     },
+    "jsprim": {
+      "version": "1.4.1",
+      "resolved": "http://registry.npm.taobao.org/jsprim/download/jsprim-1.4.1.tgz",
+      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.2.3",
+        "verror": "1.10.0"
+      }
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -5131,12 +5550,24 @@
       "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
       "dev": true
     },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "http://registry.npm.taobao.org/lodash.assign/download/lodash.assign-4.2.0.tgz",
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
+      "dev": true
+    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
       "dev": true
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "http://registry.npm.taobao.org/lodash.clonedeep/download/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -5149,6 +5580,18 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "lodash.mergewith": {
+      "version": "4.6.1",
+      "resolved": "http://registry.npm.taobao.org/lodash.mergewith/download/lodash.mergewith-4.6.1.tgz",
+      "integrity": "sha1-Y5BX5ybDr72z59QnQcqo1uQzWSc=",
+      "dev": true
+    },
+    "lodash.tail": {
+      "version": "4.1.1",
+      "resolved": "http://registry.npm.taobao.org/lodash.tail/download/lodash.tail-4.1.1.tgz",
+      "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
+      "dev": true
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -5546,6 +5989,24 @@
         }
       }
     },
+    "mixin-object": {
+      "version": "2.0.1",
+      "resolved": "http://registry.npm.taobao.org/mixin-object/download/mixin-object-2.0.1.tgz",
+      "integrity": "sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=",
+      "dev": true,
+      "requires": {
+        "for-in": "0.1.8",
+        "is-extendable": "0.1.1"
+      },
+      "dependencies": {
+        "for-in": {
+          "version": "0.1.8",
+          "resolved": "http://registry.npm.taobao.org/for-in/download/for-in-0.1.8.tgz",
+          "integrity": "sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE=",
+          "dev": true
+        }
+      }
+    },
     "mkdirp": {
       "version": "0.5.1",
       "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
@@ -5572,8 +6033,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -5595,8 +6055,7 @@
       "version": "2.11.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.11.0.tgz",
       "integrity": "sha512-F4miItu2rGnV2ySkXOQoA8FKz/SR2Q2sWP0sbTxNxz/tuokeC8WxOhPMcwi0qIyGtVn/rrSeLbvVkznqCdwYnw==",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -5658,8 +6117,36 @@
       "integrity": "sha512-MmbQJ2MTESTjt3Gi/3yG1wGpIMhUfcIypUCGtTizFR9IiccFwxSpfp0vtIZlkFclEqERemxfnSdZEMR9VqqEFQ==",
       "dev": true
     },
-    "node-libs-browser": {
-      "version": "2.1.0",
+    "node-gyp": {
+      "version": "3.8.0",
+      "resolved": "http://registry.npm.taobao.org/node-gyp/download/node-gyp-3.8.0.tgz",
+      "integrity": "sha1-VAMEJhwzDoDQ1e3OJTpoyzlkIYw=",
+      "dev": true,
+      "requires": {
+        "fstream": "1.0.11",
+        "glob": "7.1.3",
+        "graceful-fs": "4.1.11",
+        "mkdirp": "0.5.1",
+        "nopt": "3.0.6",
+        "npmlog": "4.1.2",
+        "osenv": "0.1.5",
+        "request": "2.87.0",
+        "rimraf": "2.6.2",
+        "semver": "5.3.0",
+        "tar": "2.2.1",
+        "which": "1.3.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.3.0",
+          "resolved": "http://registry.npm.taobao.org/semver/download/semver-5.3.0.tgz",
+          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
+          "dev": true
+        }
+      }
+    },
+    "node-libs-browser": {
+      "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.1.0.tgz",
       "integrity": "sha512-5AzFzdoIMb89hBGMZglEegffzgRg+ZFoUmisQ8HI4j1KDdpx13J0taNp2y9xPbur6W61gepGDDotGBVQ7mfUCg==",
       "dev": true,
@@ -5709,6 +6196,79 @@
         "which": "1.3.1"
       }
     },
+    "node-sass": {
+      "version": "4.9.3",
+      "resolved": "http://registry.npm.taobao.org/node-sass/download/node-sass-4.9.3.tgz",
+      "integrity": "sha1-9AfPPWb3gwi7HjRrJPpChwMZYiQ=",
+      "dev": true,
+      "requires": {
+        "async-foreach": "0.1.3",
+        "chalk": "1.1.3",
+        "cross-spawn": "3.0.1",
+        "gaze": "1.1.3",
+        "get-stdin": "4.0.1",
+        "glob": "7.1.3",
+        "in-publish": "2.0.0",
+        "lodash.assign": "4.2.0",
+        "lodash.clonedeep": "4.5.0",
+        "lodash.mergewith": "4.6.1",
+        "meow": "3.7.0",
+        "mkdirp": "0.5.1",
+        "nan": "2.11.0",
+        "node-gyp": "3.8.0",
+        "npmlog": "4.1.2",
+        "request": "2.87.0",
+        "sass-graph": "2.2.4",
+        "stdout-stream": "1.4.1",
+        "true-case-path": "1.0.3"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "http://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          }
+        },
+        "cross-spawn": {
+          "version": "3.0.1",
+          "resolved": "http://registry.npm.taobao.org/cross-spawn/download/cross-spawn-3.0.1.tgz",
+          "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "4.1.3",
+            "which": "1.3.1"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
+      }
+    },
+    "nopt": {
+      "version": "3.0.6",
+      "resolved": "http://registry.npm.taobao.org/nopt/download/nopt-3.0.6.tgz",
+      "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+      "dev": true,
+      "requires": {
+        "abbrev": "1.1.1"
+      }
+    },
     "normalize-package-data": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
@@ -5748,6 +6308,11 @@
         "sort-keys": "1.1.2"
       }
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "http://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -5757,6 +6322,18 @@
         "path-key": "2.0.1"
       }
     },
+    "npmlog": {
+      "version": "4.1.2",
+      "resolved": "http://registry.npm.taobao.org/npmlog/download/npmlog-4.1.2.tgz",
+      "integrity": "sha1-CKfyqL9zRgR3mp76StXMcXq7lUs=",
+      "dev": true,
+      "requires": {
+        "are-we-there-yet": "1.1.5",
+        "console-control-strings": "1.1.0",
+        "gauge": "2.7.4",
+        "set-blocking": "2.0.0"
+      }
+    },
     "nth-check": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.1.tgz",
@@ -5778,6 +6355,12 @@
       "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
       "dev": true
     },
+    "oauth-sign": {
+      "version": "0.8.2",
+      "resolved": "http://registry.npm.taobao.org/oauth-sign/download/oauth-sign-0.8.2.tgz",
+      "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=",
+      "dev": true
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5954,6 +6537,16 @@
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
       "dev": true
     },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "http://registry.npm.taobao.org/osenv/download/osenv-0.1.5.tgz",
+      "integrity": "sha1-hc36+uso6Gd/QW4odZK18/SepBA=",
+      "dev": true,
+      "requires": {
+        "os-homedir": "1.0.2",
+        "os-tmpdir": "1.0.2"
+      }
+    },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
@@ -6150,6 +6743,12 @@
         "sha.js": "2.4.11"
       }
     },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "http://registry.npm.taobao.org/performance-now/download/performance-now-2.1.0.tgz",
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
+      "dev": true
+    },
     "pify": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
@@ -8398,9 +8997,9 @@
       "dev": true
     },
     "qs": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz",
-      "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==",
+      "version": "6.5.2",
+      "resolved": "http://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
+      "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
       "dev": true
     },
     "query-string": {
@@ -8664,8 +9263,7 @@
     "regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-      "dev": true
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
     },
     "regenerator-transform": {
       "version": "0.10.1",
@@ -8785,6 +9383,34 @@
         "is-finite": "1.0.2"
       }
     },
+    "request": {
+      "version": "2.87.0",
+      "resolved": "http://registry.npm.taobao.org/request/download/request-2.87.0.tgz",
+      "integrity": "sha1-MvACNc0I1IK00NaNuTqCnA7VdW4=",
+      "dev": true,
+      "requires": {
+        "aws-sign2": "0.7.0",
+        "aws4": "1.8.0",
+        "caseless": "0.12.0",
+        "combined-stream": "1.0.7",
+        "extend": "3.0.2",
+        "forever-agent": "0.6.1",
+        "form-data": "2.3.2",
+        "har-validator": "5.0.3",
+        "http-signature": "1.2.0",
+        "is-typedarray": "1.0.0",
+        "isstream": "0.1.2",
+        "json-stringify-safe": "5.0.1",
+        "mime-types": "2.1.20",
+        "oauth-sign": "0.8.2",
+        "performance-now": "2.1.0",
+        "qs": "6.5.2",
+        "safe-buffer": "5.1.2",
+        "tough-cookie": "2.3.4",
+        "tunnel-agent": "0.6.0",
+        "uuid": "3.3.2"
+      }
+    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -8809,6 +9435,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.0",
+      "resolved": "http://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.0.tgz",
+      "integrity": "sha1-Zg/x2XEqI4K6osrUUKRxYgn5ymk="
+    },
     "resolve": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",
@@ -8907,6 +9538,216 @@
         "ret": "0.1.15"
       }
     },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "http://registry.npm.taobao.org/safer-buffer/download/safer-buffer-2.1.2.tgz",
+      "integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=",
+      "dev": true
+    },
+    "sass-graph": {
+      "version": "2.2.4",
+      "resolved": "http://registry.npm.taobao.org/sass-graph/download/sass-graph-2.2.4.tgz",
+      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+      "dev": true,
+      "requires": {
+        "glob": "7.1.3",
+        "lodash": "4.17.11",
+        "scss-tokenizer": "0.2.3",
+        "yargs": "7.1.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "3.0.0",
+          "resolved": "http://registry.npm.taobao.org/camelcase/download/camelcase-3.0.0.tgz",
+          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
+          "dev": true
+        },
+        "cliui": {
+          "version": "3.2.0",
+          "resolved": "http://registry.npm.taobao.org/cliui/download/cliui-3.2.0.tgz",
+          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+          "dev": true,
+          "requires": {
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1",
+            "wrap-ansi": "2.1.0"
+          }
+        },
+        "find-up": {
+          "version": "1.1.2",
+          "resolved": "http://registry.npm.taobao.org/find-up/download/find-up-1.1.2.tgz",
+          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "dev": true,
+          "requires": {
+            "path-exists": "2.1.0",
+            "pinkie-promise": "2.0.1"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "dev": true,
+          "requires": {
+            "number-is-nan": "1.0.1"
+          }
+        },
+        "load-json-file": {
+          "version": "1.1.0",
+          "resolved": "http://registry.npm.taobao.org/load-json-file/download/load-json-file-1.1.0.tgz",
+          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "4.1.11",
+            "parse-json": "2.2.0",
+            "pify": "2.3.0",
+            "pinkie-promise": "2.0.1",
+            "strip-bom": "2.0.0"
+          }
+        },
+        "os-locale": {
+          "version": "1.4.0",
+          "resolved": "http://registry.npm.taobao.org/os-locale/download/os-locale-1.4.0.tgz",
+          "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
+          "dev": true,
+          "requires": {
+            "lcid": "1.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "2.2.0",
+          "resolved": "http://registry.npm.taobao.org/parse-json/download/parse-json-2.2.0.tgz",
+          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+          "dev": true,
+          "requires": {
+            "error-ex": "1.3.2"
+          }
+        },
+        "path-exists": {
+          "version": "2.1.0",
+          "resolved": "http://registry.npm.taobao.org/path-exists/download/path-exists-2.1.0.tgz",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "dev": true,
+          "requires": {
+            "pinkie-promise": "2.0.1"
+          }
+        },
+        "path-type": {
+          "version": "1.1.0",
+          "resolved": "http://registry.npm.taobao.org/path-type/download/path-type-1.1.0.tgz",
+          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "4.1.11",
+            "pify": "2.3.0",
+            "pinkie-promise": "2.0.1"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "http://registry.npm.taobao.org/pify/download/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+          "dev": true
+        },
+        "read-pkg": {
+          "version": "1.1.0",
+          "resolved": "http://registry.npm.taobao.org/read-pkg/download/read-pkg-1.1.0.tgz",
+          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+          "dev": true,
+          "requires": {
+            "load-json-file": "1.1.0",
+            "normalize-package-data": "2.4.0",
+            "path-type": "1.1.0"
+          }
+        },
+        "read-pkg-up": {
+          "version": "1.0.1",
+          "resolved": "http://registry.npm.taobao.org/read-pkg-up/download/read-pkg-up-1.0.1.tgz",
+          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+          "dev": true,
+          "requires": {
+            "find-up": "1.1.2",
+            "read-pkg": "1.1.0"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "http://registry.npm.taobao.org/string-width/download/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "dev": true,
+          "requires": {
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "strip-bom": {
+          "version": "2.0.0",
+          "resolved": "http://registry.npm.taobao.org/strip-bom/download/strip-bom-2.0.0.tgz",
+          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+          "dev": true,
+          "requires": {
+            "is-utf8": "0.2.1"
+          }
+        },
+        "which-module": {
+          "version": "1.0.0",
+          "resolved": "http://registry.npm.taobao.org/which-module/download/which-module-1.0.0.tgz",
+          "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=",
+          "dev": true
+        },
+        "y18n": {
+          "version": "3.2.1",
+          "resolved": "http://registry.npm.taobao.org/y18n/download/y18n-3.2.1.tgz",
+          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
+          "dev": true
+        },
+        "yargs": {
+          "version": "7.1.0",
+          "resolved": "http://registry.npm.taobao.org/yargs/download/yargs-7.1.0.tgz",
+          "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
+          "dev": true,
+          "requires": {
+            "camelcase": "3.0.0",
+            "cliui": "3.2.0",
+            "decamelize": "1.2.0",
+            "get-caller-file": "1.0.3",
+            "os-locale": "1.4.0",
+            "read-pkg-up": "1.0.1",
+            "require-directory": "2.1.1",
+            "require-main-filename": "1.0.1",
+            "set-blocking": "2.0.0",
+            "string-width": "1.0.2",
+            "which-module": "1.0.0",
+            "y18n": "3.2.1",
+            "yargs-parser": "5.0.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "5.0.0",
+          "resolved": "http://registry.npm.taobao.org/yargs-parser/download/yargs-parser-5.0.0.tgz",
+          "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+          "dev": true,
+          "requires": {
+            "camelcase": "3.0.0"
+          }
+        }
+      }
+    },
+    "sass-loader": {
+      "version": "7.1.0",
+      "resolved": "http://registry.npm.taobao.org/sass-loader/download/sass-loader-7.1.0.tgz",
+      "integrity": "sha1-Fv1ROMuLQkv4p1lSihly1yqtBp0=",
+      "dev": true,
+      "requires": {
+        "clone-deep": "2.0.2",
+        "loader-utils": "1.1.0",
+        "lodash.tail": "4.1.1",
+        "neo-async": "2.5.2",
+        "pify": "3.0.0",
+        "semver": "5.5.1"
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -8922,6 +9763,27 @@
         "ajv": "5.5.2"
       }
     },
+    "scss-tokenizer": {
+      "version": "0.2.3",
+      "resolved": "http://registry.npm.taobao.org/scss-tokenizer/download/scss-tokenizer-0.2.3.tgz",
+      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
+      "dev": true,
+      "requires": {
+        "js-base64": "2.4.9",
+        "source-map": "0.4.4"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "http://registry.npm.taobao.org/source-map/download/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "dev": true,
+          "requires": {
+            "amdefine": "1.0.1"
+          }
+        }
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -9056,6 +9918,25 @@
         "safe-buffer": "5.1.2"
       }
     },
+    "shallow-clone": {
+      "version": "1.0.0",
+      "resolved": "http://registry.npm.taobao.org/shallow-clone/download/shallow-clone-1.0.0.tgz",
+      "integrity": "sha1-RIDNBuiC72iyrYij6lSDLixItXE=",
+      "dev": true,
+      "requires": {
+        "is-extendable": "0.1.1",
+        "kind-of": "5.1.0",
+        "mixin-object": "2.0.1"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "5.1.0",
+          "resolved": "http://registry.npm.taobao.org/kind-of/download/kind-of-5.1.0.tgz",
+          "integrity": "sha1-cpyR4thXt6QZofmqZWhcTDP1hF0=",
+          "dev": true
+        }
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -9376,6 +10257,23 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "sshpk": {
+      "version": "1.14.2",
+      "resolved": "http://registry.npm.taobao.org/sshpk/download/sshpk-1.14.2.tgz",
+      "integrity": "sha1-xvxhZIo9nE52T9P8306hBeSSupg=",
+      "dev": true,
+      "requires": {
+        "asn1": "0.2.4",
+        "assert-plus": "1.0.0",
+        "bcrypt-pbkdf": "1.0.2",
+        "dashdash": "1.14.1",
+        "ecc-jsbn": "0.1.2",
+        "getpass": "0.1.7",
+        "jsbn": "0.1.1",
+        "safer-buffer": "2.1.2",
+        "tweetnacl": "0.14.5"
+      }
+    },
     "ssri": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-5.3.0.tgz",
@@ -9418,6 +10316,15 @@
       "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==",
       "dev": true
     },
+    "stdout-stream": {
+      "version": "1.4.1",
+      "resolved": "http://registry.npm.taobao.org/stdout-stream/download/stdout-stream-1.4.1.tgz",
+      "integrity": "sha1-WsF0zdXNcmEEqgwLK9g4FdjVNd4=",
+      "dev": true,
+      "requires": {
+        "readable-stream": "2.3.6"
+      }
+    },
     "stream-browserify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz",
@@ -9559,6 +10466,22 @@
       "integrity": "sha1-mTcqXJmb8t8WCvwNdL7U9HlIzSI=",
       "dev": true
     },
+    "tar": {
+      "version": "2.2.1",
+      "resolved": "http://registry.npm.taobao.org/tar/download/tar-2.2.1.tgz",
+      "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
+      "dev": true,
+      "requires": {
+        "block-stream": "0.0.9",
+        "fstream": "1.0.11",
+        "inherits": "2.0.3"
+      }
+    },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "http://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
+    },
     "through2": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz",
@@ -9639,6 +10562,23 @@
       "integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=",
       "dev": true
     },
+    "tough-cookie": {
+      "version": "2.3.4",
+      "resolved": "http://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.3.4.tgz",
+      "integrity": "sha1-7GDO44rGdQY//JelwYlwV47oNlU=",
+      "dev": true,
+      "requires": {
+        "punycode": "1.4.1"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "http://registry.npm.taobao.org/punycode/download/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
+          "dev": true
+        }
+      }
+    },
     "trim-newlines": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
@@ -9651,6 +10591,15 @@
       "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=",
       "dev": true
     },
+    "true-case-path": {
+      "version": "1.0.3",
+      "resolved": "http://registry.npm.taobao.org/true-case-path/download/true-case-path-1.0.3.tgz",
+      "integrity": "sha1-+BO1qMhrQNpZYGcisUTjIleZ9H0=",
+      "dev": true,
+      "requires": {
+        "glob": "7.1.3"
+      }
+    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -9663,6 +10612,22 @@
       "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=",
       "dev": true
     },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "http://registry.npm.taobao.org/tunnel-agent/download/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "http://registry.npm.taobao.org/tweetnacl/download/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
+      "dev": true,
+      "optional": true
+    },
     "type-is": {
       "version": "1.6.16",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz",
@@ -10009,6 +10974,17 @@
       "integrity": "sha512-w/hry/368nO21AN9QljsaIhb9ZiZtZARoVH5f3CsFbawdLdayCgKRPup7CggujvySMxx0I91NOyxdVENohprLQ==",
       "dev": true
     },
+    "verror": {
+      "version": "1.10.0",
+      "resolved": "http://registry.npm.taobao.org/verror/download/verror-1.10.0.tgz",
+      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "1.3.0"
+      }
+    },
     "vm-browserify": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
@@ -10029,6 +11005,12 @@
       "integrity": "sha512-2j/t+wIbyVMP5NvctQoSUvLkYKoWAAk2QlQiilrM2a6/ulzFgdcLUJfTvs4XQ/3eZhHiBmmEojbjmM4AzZj8JA==",
       "dev": true
     },
+    "vue-lazyload": {
+      "version": "1.2.6",
+      "resolved": "http://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.2.6.tgz",
+      "integrity": "sha1-uqBMFy1SqBJgjrEsemv7FPXJEHk=",
+      "dev": true
+    },
     "vue-loader": {
       "version": "13.7.3",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz",
@@ -10581,6 +11563,15 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "http://registry.npm.taobao.org/wide-align/download/wide-align-1.1.3.tgz",
+      "integrity": "sha1-rgdOa9wMFKQx6ATmJFScYzsABFc=",
+      "dev": true,
+      "requires": {
+        "string-width": "2.1.1"
+      }
+    },
     "window-size": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
@@ -10761,6 +11752,11 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "4.0.5",
+      "resolved": "http://registry.npm.taobao.org/zrender/download/zrender-4.0.5.tgz",
+      "integrity": "sha1-bo9ziXHOLNYkqsgrIVZymxwOWoI="
     }
   }
 }
diff --git a/package.json b/package.json
index af3a225fa214a414a2bc0aabb62247f6ccc263f8..639b210645a54f1bbcafa5be614933d75e115c91 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,10 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.18.0",
+    "echarts": "^4.2.0-rc.1",
+    "element-ui": "^2.4.7",
+    "font-awesome": "^4.7.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"
   },
@@ -31,17 +35,21 @@
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
     "node-notifier": "^5.1.2",
+    "node-sass": "^4.9.3",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "portfinder": "^1.0.13",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.2.1",
+    "qs": "^6.5.2",
     "rimraf": "^2.6.0",
+    "sass-loader": "^7.1.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
+    "vue-lazyload": "^1.2.6",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
diff --git a/src/App.vue b/src/App.vue
index d74c648e1586c443cc1f9afd4235260074da0109..f2bc114bea9f76220560f7e7ed38734f1f545fa1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,23 +1,28 @@
+/*
+ * @Author: Mark
+ * @Date: 2018-09-17 11:31:54
+ * @LastEditors: Mark
+ * @LastEditTime: 2018-09-19 09:39:19
+ * @Description: vue的入口文件
+ */
+
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'App'
-}
+  name: "App"
+};
 </script>
 
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+<style lang='scss'>
+@import "@/assets/css/common.scss";
+body {
+  background-image: url("../static/images/bgImg.png");
+  background-color: #fafafa;
+  background-repeat: repeat-x;
 }
 </style>
diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1094f00b91f959d2ae035c3ef9f9e3219cdb7d88
--- /dev/null
+++ b/src/assets/css/common.scss
@@ -0,0 +1,55 @@
+/*
+ * @Author: Mark
+ * @Date: 2018-09-19 09:35:30
+ * @LastEditors: Mark
+ * @LastEditTime: 2018-09-19 09:36:46
+ * @Description: 页面通用样式
+ */
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+* {
+  margin: 0;
+  padding: 0;
+}
+body {
+  background: #f6f6f6;
+  font: 12px/1.5 tahoma, arial, Microsoft YaHei, sans-serif;
+}
+li {
+  list-style: none;
+}
+img {
+  display: block;
+  border: none;
+}
+label {
+  cursor: pointer;
+}
+input[type="checkbox"] {
+  cursor: pointer;
+}
+a {
+  text-decoration: none;
+}
+
+// 主题色
+.theme-color {
+  color: #409eff;
+  cursor: pointer;
+}
+.theme-color:hover {
+  color: #38f;
+}
+
+#app {
+  font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei",
+    "WenQuanYi Micro Hei", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
diff --git a/src/assets/css/home/home-banner.scss b/src/assets/css/home/home-banner.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1dbc9635ccf8c472913af3590117591be48b6367
--- /dev/null
+++ b/src/assets/css/home/home-banner.scss
@@ -0,0 +1,22 @@
+/*
+ * @Author: Mark
+ * @Date: 2018-09-19 12:45:12
+ * @LastEditors: Mark
+ * @LastEditTime: 2018-09-19 13:53:18
+ * @Description: 
+ */
+ .el-carousel__item h3 {
+  color: #475669;
+  font-size: 14px;
+  opacity: 0.75;
+  line-height: 200px;
+  margin: 0;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n+1) {
+  background-color: #d3dce6;
+}
diff --git a/src/assets/css/login/login-forget-pwd.scss b/src/assets/css/login/login-forget-pwd.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e76b9ae98e0d3b3b9b03341567617a0656e69a0b
--- /dev/null
+++ b/src/assets/css/login/login-forget-pwd.scss
@@ -0,0 +1,61 @@
+/*
+ * @Author: Mark
+ * @Date: 2018-09-18 08:34:37
+ * @LastEditors: Mark
+ * @LastEditTime: 2018-09-18 08:37:57
+ * @Description: 登录模块中忘记密码页面样式文件
+ */
+.forget-pwd {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+.forget-pwd .el-card {
+  position: absolute;
+  margin: auto;
+  top: 30%;
+  right: 0px;
+  left: 0px;
+  width: 500px;
+  margin: 0 auto;
+  .icon {
+    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
+      Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
+      sans-serif;
+    font-size: 23px;
+    margin-bottom: 50px;
+    .fa-color {
+      color: #eb8c9d;
+    }
+  }
+  // icon图标鼠标经过时的颜色
+  .theme-color:hover {
+    .fa-color {
+      color: #c60023;
+    }
+  }
+  .el-form {
+    span {
+      //表单提示信息的样式
+      display: block;
+      text-align: left;
+      margin: 0px 0px 10px 80px;
+      font-size: 13px;
+      color: #666;
+    }
+  }
+  .link-item {
+    text-align: right;
+    margin-top: 10px;
+    .link {
+      margin-left: 10px;
+      color: #999;
+      .fa-smile-o:hover {
+        color: #c60023;
+      }
+    }
+  }
+
+}
diff --git a/src/assets/css/login/login.scss b/src/assets/css/login/login.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f11d4459562c592e604b1779dfa1afc84006e2bf
--- /dev/null
+++ b/src/assets/css/login/login.scss
@@ -0,0 +1,52 @@
+/*
+ * @Author: Mark
+ * @Date: 2018-09-18 08:52:34
+ * @LastEditors: Mark
+ * @LastEditTime: 2018-09-18 08:54:14
+ * @Description: 登录页面的样式文件
+ */
+.login {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+.login .el-main .el-card {
+  position: absolute;
+  margin: auto;
+  top: 20%;
+  right: 0px;
+  left: 0px;
+  width: 500px;
+  margin: 0 auto;
+  .icon {
+    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
+      Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
+      sans-serif;
+    font-size: 23px;
+    margin-bottom: 50px;
+    .fa-color {
+      color: #eb8c9d;
+    }
+  }
+  // icon图标鼠标经过时的颜色
+  .theme-color:hover {
+    .fa-color {
+      color: #c60023;
+    }
+  }
+  .link-item {
+    text-align: right;
+    margin-top: 10px;
+    .link {
+      margin-left: 10px;
+      color: #999;
+    }
+  }
+  /* 登录标签页 */
+  .el-tabs--border-card {
+    border: 0px;
+    box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.12), 0 0 1px 0 rgba(0, 0, 0, 0.04);
+  }
+}
diff --git a/src/assets/css/register/register.scss b/src/assets/css/register/register.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3cf650708858449819cc27967deec16d5fff4dcd
--- /dev/null
+++ b/src/assets/css/register/register.scss
@@ -0,0 +1,51 @@
+/*
+ * @Author: HuashengA 
+ * @Date: 2018-09-24 18:59:18 
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2018-10-03 13:30:58
+ */
+ .register .register-content{
+
+}
+.register .el-main .el-card {
+  position: absolute;
+  right: 0;
+  left: 0;
+  margin: auto;
+  top: 20%;
+  width: 500px;
+  .icon {
+    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
+      Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
+      sans-serif;
+    font-size: 23px;
+    margin-bottom: 50px;
+    .fa-color {
+      color: #eb8c9d;
+    }
+  }
+  // icon图标鼠标经过时的颜色
+  .theme-color:hover {
+    .fa-color {
+      color: #c60023;
+    }
+  }
+  .link-item {
+    text-align: right;
+    margin-top: 10px;
+    .link {
+      margin-left: 10px;
+      color: #999;
+    }
+  }
+  .el-tabs__content{
+    .el-tab-pane{
+      .el-form{
+        // 性别按钮组的样式
+        .el-form-item.radio-group{
+            text-align: left;
+        }
+      }
+    }
+  }
+}
diff --git a/src/assets/js/home/home-banner.js b/src/assets/js/home/home-banner.js
new file mode 100644
index 0000000000000000000000000000000000000000..e8d66c3e3020620c2132f8dc3ddc133b03c5cb6a
--- /dev/null
+++ b/src/assets/js/home/home-banner.js
@@ -0,0 +1,76 @@
+/*
+ * @Author: Mark
+ * @Date: 2018-09-19 12:45:09
+ * @LastEditors: Mark
+ * @LastEditTime: 2018-09-20 09:39:20
+ * @Description: 
+ */
+import myChart from "@/components/myChart/MyChart";
+export default {
+
+  data() {
+    return {
+      webServer: '',
+      chart: {
+        sourceWebChart: {}
+      }
+    };
+  },
+  mounted() {
+    this.initChart()
+  },
+
+  methods: {
+    initChart() {
+      let vue = this
+      vue.chart.sourceWebChart = vue.$echarts.init(document.getElementById('source-web-chart'))
+
+      var option = [{
+        "name": "m.facebook.com",
+        "value": 100
+      },
+      {
+        "name": "www.simpleapche.com",
+        "value": 88
+      },
+      {
+        "name": "www.google.com",
+        "value": 70
+      },
+      {
+        "name": "simpleapacheshi.com",
+        "value": 65
+      },
+      {
+        "name": "www.facebook.com",
+        "value": 55
+      },
+      {
+        "name": "www.baidu.com",
+        "value": 54
+      },
+      {
+        "name": "www.rjt.com",
+        "value": 33
+      },
+      {
+        "name": "org.chinasoft.com",
+        "value": 28
+      },
+      {
+        "name": "www.sbt.com",
+        "value": 22
+      },
+      {
+        "name": "其他",
+        "value": 21
+      }
+      ]
+
+      let optionvalue= myChart.getPieRoseOption([])
+
+      vue.chart.sourceWebChart.setOption(optionvalue)
+    }
+
+  }
+}
\ No newline at end of file
diff --git a/src/assets/js/login/login-forget-pwd.js b/src/assets/js/login/login-forget-pwd.js
new file mode 100644
index 0000000000000000000000000000000000000000..ccc62ad92d10431556b1bc6828912c3e2a004417
--- /dev/null
+++ b/src/assets/js/login/login-forget-pwd.js
@@ -0,0 +1,200 @@
+/*
+ * @Author: Mark
+ * @Date: 2018-09-18 08:40:49
+ * @LastEditors: Mark
+ * @LastEditTime: 2018-09-18 08:40:49
+ * @Description: 登录模块中忘记密码页面js文件
+ */
+import HeaderLogin from '@/components/HeaderLogin'
+import Tips from '@/utils/tipsUtil'
+import User from '@/service/user-service'
+const _user = new User()                  //用户模块发送请求对象
+const _tips = new Tips()                  //提示信息对象
+
+
+
+export default {
+  
+  data() {
+
+    let validatePass = (rule,value,callback)=>{
+      if(value === ''){
+        callback(new Error('请输入新密码'))
+      }else{
+        if(this.newPwdForm.confirmPwd !== ''){
+          this.$refs.newPwdForm.validateField('confirmPwd')
+        }
+        callback()
+      }
+    }
+
+    let validateConfirmPwd = (rule,value,callback)=>{
+      if(value === ''){
+        callback(new Error('再次输入新密码'))
+      }else if(value !== this.newPwdForm.newPwd){
+        callback(new Error('两次输入的密码不一样'))
+      }else{
+        callback()
+      }
+    }
+
+    return {
+      data :{
+        progress_percentage : 10,  //进度条的进度
+        progress_status : 'fail'   //进度条的状态
+      },
+      usernameForm: { //用户名信息表单
+        isShow: true,
+        username: '',
+        tips: ''
+      },
+      answerForm: {  //提交回答问题的表单
+        isShow: false,
+        question: '',
+        answer: '',
+        tips: ''
+      },
+      newPwdForm: {  //重置密码的表单
+        isShow: false,
+        token: '',  
+        newPwd: '',
+        confirmPwd: ''
+      },
+      successCard : { //显示重置密码成功的卡片信息
+        isShow : false 
+      },
+      usernameFormRules: { //规则校验对象
+        username: [
+          {
+            required: true,
+            message: '请输入用户名',
+            trigger: 'blur'
+          },
+          {
+            min: 3,
+            max: 10,
+            message: '长度在 3 到 10 个字符',
+            trigger: 'blur'
+          }
+        ],
+      },
+      answerFormRules: {
+        answer: [
+          {
+            required: true,
+            message: 'way way！回我呀！',
+            trigger: 'blur'
+          }
+        ]
+      },
+      newPwdFormRules :{
+        newPwd :[
+          {validator : validatePass,trigger : 'blur'}
+        ],
+        confirmPwd : [
+          {validator : validateConfirmPwd ,trigger : 'blur'}
+        ]
+      }
+    };
+  },
+  components :{
+    HeaderLogin
+  },
+  methods: {
+   
+    /**
+     * 第一步：提交用户名 获取问题
+     * @param {*} usernameForm 填写用户名的表单
+     */
+    firstStep(usernameForm) {
+      let vue = this;
+      vue.$refs[usernameForm].validate((valid) => {
+        if (valid) { //验证通过
+
+          let userinfo = { //请求的对象信息
+            username: vue.usernameForm.username
+          }
+
+          _user.getQuestion(userinfo).then((res) => {
+            vue.usernameForm.isShow = false
+            vue.answerForm.isShow = true
+            vue.answerForm.question = res.msg
+            vue.data.progress_percentage = 45
+          }, (err) => {
+            _tips.notifyTips(vue,err.msg)
+          })
+        } else { 
+          return false
+        }
+      })
+    },
+
+    /**
+     * 第二步 ：回答步骤一的问题 
+     * @param {*} answerForm 回答问题的表单
+     */
+    secondStep(answerForm) {
+      let vue = this
+      vue.$refs[answerForm].validate((valid) => {
+        if (valid) {
+
+          let userinfo = { 
+            username: vue.usernameForm.username,
+            question: vue.answerForm.question,
+            answer: vue.answerForm.answer
+          }
+
+          _user.checkAnswer(userinfo).then((res) => {
+            vue.answerForm.isShow = false
+            vue.newPwdForm.isShow = true
+            vue.newPwdForm.token = res.data
+            vue.data.progress_percentage = 90
+          }, (err) => {
+            _tips.notifyTips(vue,err.msg)
+          })
+        } else {
+          return false
+        }
+
+      })
+    },
+
+    /**
+     * 第三步：重置密码
+     * @param {*} newPwdForm 重置密码的表单对象
+     */
+    thirdStep(newPwdForm){
+      let vue = this
+      vue.$refs[newPwdForm].validate((valid) => {
+        if(valid){
+
+          let passwordInfo = {
+            username : vue.usernameForm.username,
+            passwordNew : vue.newPwdForm.confirmPwd,
+            forgetToken : vue.newPwdForm.token
+          }
+          _user.resetPassword(passwordInfo).then((res)=>{
+             vue.newPwdForm.isShow = false
+             vue.successCard.isShow = true
+             vue.data.progress_percentage = 100
+             vue.data.progress_status = 'success'
+             _tips.notifyTips(vue,res.msg,'success')
+          },(err)=>{
+            _tips.notifyTips(vue,err.msg)
+          })
+        }else{
+          return false
+        }
+      })
+    },
+
+    /**
+     * 登录的路由跳转
+     */
+    login(){
+      this.$router.push({
+        path : 'login'
+      })
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/js/login/login.js b/src/assets/js/login/login.js
new file mode 100644
index 0000000000000000000000000000000000000000..6b8a3599c1754458a5894538418089232fe20dce
--- /dev/null
+++ b/src/assets/js/login/login.js
@@ -0,0 +1,172 @@
+/*
+ * @Author: Mark
+ * @Date: 2018-09-18 08:52:16
+ * @LastEditors: Mark
+ * @LastEditTime: 2018-09-18 09:01:06
+ * @Description: 登录页面的样式文件
+ */
+
+import HeaderLogin from '@/components/HeaderLogin'
+import User from '@/service/user-service'
+import Tips from '@/utils/tipsUtil'
+import RulesUtil from '@/utils/rulesUtil'
+const _user = new User()
+const _tips = new Tips()
+const _regular = new RulesUtil()
+export default {
+
+  data() {
+    //自定义的验证规则 用户名的校验规则
+    let validateUsername = (rule, value, callback) => {
+      let result = _regular.validate(value, 'username');
+      if (result) {
+        callback(new Error(result))
+      } else {
+        callback()
+      }
+    }
+
+    //自定义的验证规则 手机号码的校验
+    let validatePhone = (rule, value, callback) => {
+      let result = _regular.validate(value, 'phone');
+      if (result) {
+        callback(new Error(result))
+      } else {
+        callback()
+      }
+    }
+
+    //自定义的验证规则 邮箱的校验
+    let validateEmail = (rule, value, callback) => {
+      let result = _regular.validate(value, 'email');
+      if (result) {
+        callback(new Error(result))
+      } else {
+        callback()
+      }
+    }
+
+    //自定义的验证规则 密码的校验
+    let validatePassWord = (rule, value, callback) => {
+      let result = _regular.validate(value, 'password');
+      if (result) {
+        callback(new Error(result))
+      } else {
+        callback()
+      }
+    }
+
+
+    return {
+      form: {
+        type: 'username',   // 登录请求类型
+        typeValue: '',      // 登录请求的类型对应的value
+        password: '',       // 登录请求的密码
+
+        username: '',      // 用于校验时的用户名
+        phone: '',         // 用于校验时的手机号
+        email: ''          // 用于校验时的邮箱
+      },
+      rules: {
+        //用户名的校验
+        username: [{ validator: validateUsername, trigger: 'blur' }],
+
+        //手机号的校验
+        phone: [{ validator: validatePhone, trigger: 'blur' }],
+
+        //邮箱的校验
+        email: [{ validator: validateEmail, trigger: 'blur' }],
+
+        //密码的校验
+        password: [{ validator: validatePassWord, trigger: 'blur' }]
+      }
+    }
+  },
+  components: {
+    HeaderLogin
+  },
+  mounted(){
+    //取出路由上的从注册跳转过来的用户名
+    this.form.typeValue = this.$route.query.username || ''
+  },
+  methods: {
+    /**
+     * 登录方法
+     */
+    onSubmit(formName) {
+      let vue = this
+      if (vue.validateLogin()) {
+        let userInfo = {
+          type: vue.form.type,
+          typeValue: vue.form.typeValue,
+          password: vue.form.password
+        }
+        _user.login2(userInfo).then(
+          res => {
+            this.$notify({
+              //请求成功的回调
+              title: '警告',
+              message: '这是一条警告的提示消息',
+              type: 'warning'
+            })
+          },
+          err => {
+            _tips.notifyTips(vue, err.msg)
+          }
+        )
+      }
+    },
+
+    /**
+     * 用户名输入框失去焦点时保存用于校验的用户名
+     */
+    setUserName() {
+      this.form.username = this.form.typeValue
+    },
+
+    /**
+     * 电话号码输入框失去焦点时保存用于校验的电话号码
+     */
+    setPhone() {
+      this.form.phone = this.form.typeValue
+    },
+
+    /**
+     * 电子邮箱输入框失去焦点时保存用于校验的电子邮箱
+     */
+    setEmail() {
+      this.form.email = this.form.typeValue
+    },
+
+    /**
+     * 点击登录按钮时验证字段
+     */
+    validateLogin() {
+      let vue = this
+      if (vue.form.typeValue === '') {
+        this.$notify({
+          title: '警告',
+          message: '登录信息不能为空！',
+          type: 'warning'
+        })
+        return false
+      } else if (vue.form.password === '') {
+        this.$notify({
+          title: '警告',
+          message: '请输入密码',
+          type: 'warning'
+        })
+        return false
+      }
+      return true
+    },
+
+    /**
+     * 点击tab时，重置输入框的值
+     */
+    clickTab() {
+      this.form.typeValue = ''
+    }
+
+  }
+}
diff --git a/src/assets/js/register/register.js b/src/assets/js/register/register.js
new file mode 100644
index 0000000000000000000000000000000000000000..a614fd3d041c8bc60e7dee320081465769c626a4
--- /dev/null
+++ b/src/assets/js/register/register.js
@@ -0,0 +1,203 @@
+/*
+ * @Author: HuashengA 
+ * @Date: 2018-09-24 18:59:16 
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2018-10-05 10:17:22
+ * 注册页面的js文件
+ */
+import HeaderLogin from '@/components/HeaderLogin'
+import User from '@/service/user-service'
+import Tips from '@/utils/tipsUtil'
+import RulesUtil from '@/utils/rulesUtil'
+const _user = new User()
+const _tips = new Tips()
+const _regular = new RulesUtil()
+
+export default {
+  data() {
+    //自定义的验证规则 用户名的校验规则
+    let validateUsername = (rule, value, callback) => {
+      let result = _regular.validate(value, 'username')
+      if (result) {
+        callback(new Error(result))
+      } else {
+        callback()
+      }
+    }
+
+    //自定义的验证规则 密码的校验
+    let validatePassWord = (rule, value, callback) => {
+      if (_regular.validate(value, 'require')) {
+        length = value.length
+        if (length >= 3 && length <= 15) {
+          callback()
+        } else {
+          callback(new Error('输入的密码的长度在3到15个字符'))
+        }
+      } else {
+        callback(new Error('请输入密码！'))
+      }
+    }
+
+    //自定义的验证规则 确认密码的校验
+    let validateConfirmPwd = (rule, value, callback) => {
+      if (_regular.validate(value, 'require')) {
+        length = value.length
+        if (length >= 3 && length <= 15) {
+          if (this.registerFrom.confirmPwd !== this.registerFrom.password) {
+            callback(new Error('两次输入的密码不一致'))
+          } else {
+            callback()
+          }
+        } else {
+          callback(new Error('输入的密码的长度在3到15个字符'))
+        }
+      } else {
+        callback(new Error('请输入确认密码！'))
+      }
+    }
+
+    //自定义的验证规则 电话号码的验证
+    let validatePhone = (rule, value, callback) => {
+      let result = _regular.validate(value, 'phone')
+      if (result) {
+        callback(new Error(result))
+      } else {
+        callback()
+      }
+    }
+
+    //自定义的验证规则 邮箱的验证
+    let validateEmail = (rule, value, callback) => {
+      let result = _regular.validate(value, 'email')
+      if (result) {
+        callback(new Error(result))
+      } else {
+        callback()
+      }
+    }
+    //自定义的验证规则 问题的验证
+    let validateQuestion = (rule, value, callback) => {
+      if (_regular.validate(value, 'require')) {
+        callback()
+      } else {
+        callback(new Error('请输入你的问题'))
+      }
+    }
+
+    //自定义的验证规则 答案的验证
+    let validateAnswer = (rule, value, callback) => {
+      if (_regular.validate(value, 'require')) {
+        callback()
+      } else {
+        callback(new Error('请输入回答问题答案'))
+      }
+    }
+
+    return {
+      activeName: 'first',
+      registerFrom: {
+        username: '',   //用户名
+        password: '',   //密码
+        confirmPwd: '', //确认密码
+        phone: '',      //手机号
+        email: '',      //邮箱
+        question: '',   //问题
+        answer: '',     //回答问题的答案
+        sex: '3'        //性别
+      },
+
+      //快速注册的表单的校验
+      registerRules: {
+        //用户名的校验
+        username: [{ validator: validateUsername, trigger: 'blur' }],
+        //密码的校验
+        password: [{ validator: validatePassWord, trigger: 'blur' }],
+        //确人密码的校验
+        confirmPwd: [{ validator: validateConfirmPwd, trigger: 'blur' }]
+      },
+
+      //注册的表单的校验
+      registerRules2: {
+        //用户名的校验
+        username: [{ validator: validateUsername, trigger: 'blur' }],
+        //密码的校验
+        password: [{ validator: validatePassWord, trigger: 'blur' }],
+        //确人密码的校验
+        confirmPwd: [{ validator: validateConfirmPwd, trigger: 'blur' }],
+        //手机号的验证
+        phone: [{ validator: validatePhone, trigger: 'blur' }],
+        //邮箱的验证
+        email: [{ validator: validateEmail, trigger: 'blur' }],
+        //问题的验证
+        question: [{ validator: validateQuestion, trigger: 'blur' }],
+        //答案的验证
+        answer: [{ validator: validateAnswer, trigger: 'blur' }]
+      }
+    }
+  },
+  components: {
+    HeaderLogin
+  },
+  methods: {
+    /**
+     * 注册
+     */
+    register(registerFrom2) {
+      let vue = this
+      vue.$refs[registerFrom2].validate((valid) => {
+        if(valid){
+          if(vue.activeName === 'first'){
+            let userInfo = {
+              username: vue.registerFrom.username,
+              password: vue.registerFrom.password
+            }
+            _user.registerQuick(userInfo).then(res=>{
+              //取出用户名
+              let responseUsername = res.data.username
+              //编程式路由跳转到登录页面
+              vue.$router.push({path:'/login',name:'Login',query:{username: responseUsername}})
+            },err=>{
+              _tips.notifyTips(vue, err.msg)
+            })     
+          }else if(vue.activeName === 'second'){
+            let userInfo = {
+              username: vue.registerFrom.username,
+              password: vue.registerFrom.password,
+              email: vue.registerFrom.email,
+              phone: vue.registerFrom.phone,
+              question: vue.registerFrom.question,
+              answer: vue.registerFrom.answer,
+              gender: vue.registerFrom.sex
+            }
+            _user.register(userInfo).then(res=>{
+              let responseUsername = res.data.username
+              vue.$router.push({path:'/login',name:'Login',query:{username: responseUsername}})
+            },err=>{
+              _tips.notifyTips(vue, err.msg)
+            })
+            
+          }
+        }else{
+          _tips.notifyTips(vue, '填写表单有误')
+        }
+      })
+    },
+
+    /**
+     * 2.用户名、电子邮箱、手机号码是否已经被使用的实时的校验
+     */
+    checkValue(type, value) {
+      let vue = this
+      _user.checkValid(type,value).then(
+        res => {
+          
+        },
+        err => {
+          _tips.notifyTips(vue, err.msg);
+        }
+      );
+    }
+    
+  }
+}
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503fc2a44b5053b0837ebea6e87a2d339a43..0000000000000000000000000000000000000000
Binary files a/src/assets/logo.png and /dev/null differ
diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0d1d7a09d7c89361fbbc3c4a253e0cc49c1c081a
--- /dev/null
+++ b/src/components/Breadcrumb.vue
@@ -0,0 +1,41 @@
+/*
+ * @Author: mikey.zhaopeng 
+ * @Date: 2018-10-06 17:26:41 
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2018-10-06 17:40:19
+ */
+<template>
+    <div class="MyBreadcrunb">
+        <div class="title">
+            <router-link to="/"> 首页 | </router-link><slot name="message"></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  components: {}
+};
+</script>
+
+<style scoped lang="scss">
+.MyBreadcrunb {
+    .title {
+      font-family: "PingFang SC", "微软雅黑";
+      font-size: 18px;
+      font-weight:500;
+      color: #333;
+      clear: both;
+      padding-bottom: 40px;
+      background-repeat: no-repeat;
+      padding-top: 70px;
+      padding-left: 28px;
+      text-align: left;
+      background-position: 0 74px;
+      background-image: url("../../static/images/square.png");
+    }
+  }
+</style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..111d83c8873ca39d0b0b503889d33eb033323ded
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,61 @@
+/*
+ * @Author: Sa 
+ * @Date: 2018-09-16 07:41:38 
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2018-10-06 17:55:28
+ * 
+ */
+
+<template>
+    <div class="footer">
+        <div>
+            <div class="links">
+                <a class="link" href="http://www.zhbit.com/jgsz/wzdh.html" target="_blank">
+                    <i class="fa fa-bank"></i> 北理工</a> |
+                <a class="link" href="http://www.xiaohongshu.com/" target="_blank">
+                    <i class="fa fa-link"> </i>友情链接</a> |
+                <a class="link" href="https://gitee.com/CampusO2OView" target="_blank">
+                    <i class="fa fa-gitlab"></i> Gitee</a> |
+                <a class="link" href="https://github.com/25Dong/campus_o2o" target="_blank">
+                    <i class="fa fa-github"></i> GitHub</a> |
+                <a class="link" href="https://blog.csdn.net/ycd500756/article/details/77508716" target="_blank">
+                    <i class="fa fa-phone"></i> 联系我们</a>
+            </div>
+            <p class="copyright">
+                Copyright © 2014-2018 豆浆油条(个人非正式工作室) | 消费者维权热线 :4006067733
+            </p>
+        </div>
+    </div>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+  data() {
+    return {};
+  },
+  components: {}
+};
+</script>
+
+<style scoped lang="scss">
+.footer {
+  background-color: #1a1818;
+  margin-top: 20px;
+  color: #666;
+  .links {
+    text-align: center;
+    font-size: 10px;
+    line-height: 50px;
+    .link {
+      padding: 0 10px;
+      color: #666;
+    }
+  }
+  .copyright {
+    font-size: 13px;
+    text-align: center;
+    color: #666;
+    line-height: 50px;
+  }
+}
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4a4ace1d250cca6627a5012b2603bd3da3b15324
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,111 @@
+<template>
+    <div class="header" id="header1">
+
+        <el-row>
+            <el-col :span="24">
+                <div class="login-out" style="float:left">
+                    <span>login</span>
+                    <span>logout</span>
+                </div>
+                <div class="header-main" style="height:66px">
+                    <el-menu :default-active="activeIndex2" mode="horizontal" @select="handleSelect" background-color="rgba(255,255,255,0.95)" text-color="#333" active-text-color="rgb(51, 51, 51)">
+                        <el-submenu index="1">
+                            <template slot="title">学习</template>
+                            <el-menu-item index="2-1">选项1</el-menu-item>
+                            <el-menu-item index="2-2">选项2</el-menu-item>
+                            <el-menu-item index="2-3">选项3</el-menu-item>
+                            <el-submenu index="2-4">
+                                <template slot="title">选项4</template>
+                                <el-menu-item index="2-4-1">选项1</el-menu-item>
+                                <el-menu-item index="2-4-2">选项2</el-menu-item>
+                                <el-menu-item index="2-4-3">选项3</el-menu-item>
+                            </el-submenu>
+                        </el-submenu>
+                        <el-submenu index="2">
+                            <template slot="title">我的工作台</template>
+                            <el-menu-item index="2-1">选项1</el-menu-item>
+                            <el-menu-item index="2-2">选项2</el-menu-item>
+                            <el-menu-item index="2-3">选项3</el-menu-item>
+                            <el-submenu index="2-4">
+                                <template slot="title">选项4</template>
+                                <el-menu-item index="2-4-1">选项1</el-menu-item>
+                                <el-menu-item index="2-4-2">选项2</el-menu-item>
+                                <el-menu-item index="2-4-3">选项3</el-menu-item>
+                            </el-submenu>
+                        </el-submenu>
+                        <el-menu-item index="3" disabled>消息中心</el-menu-item>
+                        <el-menu-item index="4">
+                            <a href="https://www.ele.me" target="_blank">订单管理</a>
+                        </el-menu-item>
+                        <el-menu-item index="5">
+                            <a href="https://www.ele.me" target="_blank">订单管理</a>
+                        </el-menu-item>
+                    </el-menu>
+                </div>
+
+                <div class="header-about-us" style="height:66px">
+                    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" background-color="rgba(255,255,255,0.95)" text-color="#333" active-text-color="#fafafa">
+                        <el-submenu index="6">
+                            <template slot="title">个人中心</template>
+                            <el-menu-item index="2-1">我的账号</el-menu-item>
+                            <el-menu-item index="2-2">购物车</el-menu-item>
+                            <el-menu-item index="2-3">我的订单</el-menu-item>
+                            <el-menu-item index="2-3">身份</el-menu-item>
+                        </el-submenu>
+                        <el-submenu index="7">
+                            <template slot="title">About us</template>
+                            <el-menu-item index="7-1">version 1</el-menu-item>
+                            <el-menu-item index="7-2">选项2</el-menu-item>
+                            <el-menu-item index="7-3">选项3</el-menu-item>
+                        </el-submenu>
+                    </el-menu>
+                </div>
+            </el-col>
+        </el-row>
+
+        
+    </div>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+  data() {
+    return {
+      activeIndex: "1",
+      activeIndex2: "0"
+    };
+  },
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.header {
+  background-color: rgba(255, 255, 255, 0.95);
+  height: 60px;
+  .login-out {
+    float: left;
+    height: 66px;
+    line-height: 66px;
+    padding-left: 10px;
+    font-size: 15px;
+  }
+  .header-main ul {
+    display: inline-block !important;
+    overflow: auto !important;
+    padding: 0;
+    li {
+      display: inline !important;
+    }
+  }
+  .header-about-us {
+    float: right;
+    margin-top: -66px;
+  }
+  
+}
+</style>
diff --git a/src/components/HeaderLogin.vue b/src/components/HeaderLogin.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2b95a3763272c6b9a806e9a09f3ee16a8d9f6e6b
--- /dev/null
+++ b/src/components/HeaderLogin.vue
@@ -0,0 +1,85 @@
+/*
+ * @Author: Sa 
+ * @Date: 2018-09-15 08:39:49 
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2018-09-24 18:29:26
+ */
+<template>
+  <div class="page">
+    <el-container>
+      <el-header>
+         
+        <el-tooltip class="item" effect="dark" placement="bottom-start">
+          <div slot="content" class="tooltip-content">
+            <p> 嘿！你来了 </p>
+          </div>
+         <div class="theme-color">CampusO2O</div>
+        </el-tooltip>
+
+        <div class="about-us">
+          <el-tooltip class="item" effect="dark" placement="bottom-start" offset='1000'>
+            <div slot="content" class="tooltip-content">
+              <p>消费者维权热线 :4006067733</p>
+              <p>联系邮箱：1685368363@qq.com</p>
+              <p>Copyright © 2018-2019 豆浆油条(个人非正式工作室) </p>
+            </div>
+            <div class="info">关于我们</div>
+          </el-tooltip>
+        </div>
+        <div class="about-us">加入我们</div>
+      </el-header>
+    </el-container>
+
+
+  </div>
+
+
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+    data() {
+        return {}
+    },
+    components: {}
+}
+</script>
+
+<style scoped lang="scss">
+
+.el-header {
+  background-color: #fff;
+  font-size: 26px;
+  font-weight: 700;
+  text-align: left;
+  line-height: 60px;
+  padding-left: 25%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+
+  .el-tooltip {
+    float: left;
+    overflow: hidden;
+  }
+
+  .item {
+    margin: 4px;
+  }
+
+  .about-us {
+    font-size: 15px;
+    font-weight: 300;
+    color: gray;
+    float: right;
+    overflow: hidden;
+    margin-right: 25px;
+    display: block;
+    .info{
+      margin-top: 1px;
+      color: #000
+    }
+    :hover{
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 1c19f2a399d4735f5a3dd4ae1456f476f3de2fa4..0000000000000000000000000000000000000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-        >
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-        >
-          Forum
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-        >
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-        >
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a
-          href="http://vuejs-templates.github.io/webpack/"
-          target="_blank"
-        >
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a
-          href="http://router.vuejs.org/"
-          target="_blank"
-        >
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vuex.vuejs.org/"
-          target="_blank"
-        >
-          vuex
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vue-loader.vuejs.org/"
-          target="_blank"
-        >
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-        >
-          awesome-vue
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..211313162d52fa8d182be445289d1dddef6a715a
--- /dev/null
+++ b/src/components/Modal.vue
@@ -0,0 +1,312 @@
+/*
+ * @Author: Sa
+ * @Date: 2018-10-04 11:14:30 
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2018-10-05 16:19:27
+ */
+<template>
+    <div>
+
+        <div class="md-modal modal-msg md-modal-transition" v-bind:class="{'md-show':mdShow}">
+                <div class="md-modal-inner">
+                    <div class="md-top">
+                        <div class="md-close" @click="closeModal">Close</div>
+                    </div>
+                    <div class="md-content">
+                        <div class="confirm-tips">
+                            <slot name="message"></slot>
+                        </div>
+                        <div class="modal--wrap">
+                            <slot name="content"></slot>
+                        </div>
+                    </div>
+                </div>
+        </div>
+        <div class="md-overlay" v-if="mdShow" @click="closeModal"></div>
+
+    </div>
+</template>
+
+<script>
+export default {
+  props: ["mdShow"],
+  name: "Modal",
+  data() {
+    return {};
+  },
+  methods: {
+    closeModal() {
+      this.$emit("close");
+      //trigger()
+    }
+  }
+};
+</script>
+
+<style scoped>
+.md-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 535px;
+  height: auto;
+  -webkit-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  visibility: hidden;
+  z-index: 201;
+}
+
+.md-modal.md-modal-m {
+  width: 620px;
+}
+
+.md-modal .md-close {
+  position: absolute;
+  top: 7px;
+  right: 7px;
+  width: 34px;
+  height: 34px;
+  -webkit-transform: scale(0.5);
+  -ms-transform: scale(0.5);
+  transform: scale(0.5);
+  text-indent: -8000px;
+}
+
+.md-modal .md-close:before,
+.md-modal .md-close:after {
+  position: absolute;
+  top: 16px;
+  left: -4px;
+  content: "";
+  width: 44px;
+  height: 3px;
+  background: #d7d8dd;
+  -webkit-transition: -webkit-transform 0.5s ease-out;
+  transition: -webkit-transform 0.5s ease-out;
+  transition: transform 0.5s ease-out;
+  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
+}
+
+.md-modal .md-close:before {
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.md-modal .md-close:after {
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.md-modal .md-close:hover {
+  color: red;
+  cursor: pointer;
+}
+.md-modal .md-close:hover:before,
+.md-modal .md-close:hover:after {
+  -webkit-transition: -webkit-transform 0.3s ease-out;
+  transition: -webkit-transform 0.3s ease-out;
+  transition: transform 0.3s ease-out;
+  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
+}
+
+.md-modal .md-close:hover:before {
+  -webkit-transform: rotate(-135deg);
+  -ms-transform: rotate(-135deg);
+  transform: rotate(-135deg);
+}
+
+.md-modal .md-close:hover:after {
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.md-modal .md-tit {
+  font-weight: 200;
+  line-height: 1.8em;
+  text-align: center;
+}
+
+.md-modal .md-modal-inner {
+  padding: 60px 50px;
+}
+
+.md-modal .btn-wrap {
+  margin-top: 20px;
+  text-align: center;
+  font-size: 0;
+}
+
+.md-modal .btn-wrap .btn {
+  width: 45%;
+  min-width: 80px;
+  margin: 0 2.5%;
+}
+
+.md-modal .confirm-tips,
+.md-modal .alert-tips {
+  font-size: 20px;
+  font-weight: 300;
+  text-align: center;
+}
+
+.md-modal .confirm-tips p,
+.md-modal .alert-tips p {
+  line-height: 1.8em;
+}
+
+.md-modal .confirm-tips {
+  min-height: 2.65em;
+}
+
+.md-modal .alert-tips {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 10.25em;
+  -ms-flex-align: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+.md-modal .alert-tips p {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.md-modal.modal-normal .content-tit {
+  margin-bottom: 20px;
+  line-height: 20px;
+  font-size: 16px;
+  color: #333;
+}
+
+.md-modal .icon-status-ok {
+  width: 20px;
+  height: 20px;
+  fill: #ee7a23;
+  vertical-align: middle;
+  margin-right: 15px;
+}
+
+.md-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 200;
+}
+
+.md-modal-transition .md-modal-inner {
+  background: #fff;
+  -webkit-transform: translateY(20%);
+  -ms-transform: translateY(20%);
+  transform: translateY(20%);
+  opacity: 0;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.md-modal-transition.md-show {
+  visibility: visible;
+}
+
+.md-modal-transition.md-show .md-modal-inner {
+  -webkit-transform: translateY(0);
+  -ms-transform: translateY(0);
+  transform: translateY(0);
+  opacity: 1;
+  -webkit-transition: all 0.5s ease-out;
+  transition: all 0.5s ease-out;
+}
+
+@media only screen and (max-width: 767px) {
+  .md-modal {
+    width: 300px !important;
+  }
+
+  .md-modal.md-modal-fun .md-content {
+    padding-top: 30px;
+  }
+
+  .md-modal .md-close {
+    display: none;
+  }
+
+  .md-modal .md-tit {
+    padding: 0 15px;
+  }
+
+  .md-modal .md-modal-inner {
+    padding: 0 !important;
+  }
+
+  .md-modal .confirm-tips,
+  .md-modal .alert-tips {
+    padding: 30px 10px;
+  }
+
+  .md-modal .confirm-tips {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    min-height: 90px;
+    -ms-flex-align: center;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+  }
+
+  .md-modal .confirm-tips p {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+  }
+
+  .md-modal .btn-wrap {
+    display: -ms-flex;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    margin-top: 0;
+  }
+
+  .md-modal .btn-wrap .btn {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    width: 100%;
+    margin: 0;
+    font-size: 12px;
+  }
+
+  .md-modal .btn-wrap .btn:first-child {
+    border-left: none;
+    border-right: none;
+  }
+
+  .md-modal.modal-normal .content-tit {
+    font-size: 12px;
+  }
+}
+.md-modal .md-modal-inner .md-content .modal--wrap {
+  text-align: center;
+}
+.md-modal .md-modal-inner .md-content .modal--wrap .btn:hover {
+  background-color: #ffe5e6;
+  transition: all 0.3s ease-out;
+  border: 1px solid #ffe5e6;
+}
+</style>
diff --git a/src/components/myChart/MyChartColor.vue b/src/components/myChart/MyChartColor.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c4fd7e088706e17ef09160ddc4bf3f2894db28a9
--- /dev/null
+++ b/src/components/myChart/MyChartColor.vue
@@ -0,0 +1,51 @@
+<script>
+let colorList = [
+  'rgba(72, 121, 223, 0.9)',
+  'rgba(88, 221, 245, 0.9)',
+  'rgba(33, 195, 147, 0.9)',
+  'rgba(75, 187, 66, 0.9)',
+  'rgba(250, 212, 100, 0.9)',
+  'rgba(245, 166, 127, 0.9)',
+  'rgba(246, 129, 137, 0.9)',
+  'rgba(250, 145, 239, 0.9)',
+  'rgba(156, 117, 235, 0.9)',
+  'rgba(115, 159, 251, 0.9)'
+]
+/**
+ * 当百分比≤50%时，蓝色；
+ * 当50%＜百分比≤80%时，黄色；
+ * 当80%＜百分比时，红色。
+ *
+ * @param number: 百分比数值
+ * @return 颜色
+ */
+let getColorByNumber = function (number) {
+  if (number <= 50) {
+    // 蓝
+    return '#1c7ae6'
+  } else if (number > 50 && number <= 80) {
+    // 黄
+    return '#e5bc17'
+  } else {
+    // 红
+    return '#e5454a'
+  }
+}
+let logColor = [
+  '#739ffb',
+  '#9c75eb',
+  '#fa91ef',
+  '#f68189',
+  '#f5a67f',
+  '#fad464',
+  '#4bbb42',
+  '#21c393',
+  '#58ddf5',
+  '#4879df'
+]
+export default {
+  colorList,
+  getColorByNumber,
+  logColor
+}
+</script>
diff --git a/src/components/myChart/Mychart.vue b/src/components/myChart/Mychart.vue
new file mode 100644
index 0000000000000000000000000000000000000000..93b6683fcf630e581d6618b11e7e74e67aa01de9
--- /dev/null
+++ b/src/components/myChart/Mychart.vue
@@ -0,0 +1,93 @@
+<script>
+import echarts from 'echarts'
+import MyChartColor from './MyChartColor'
+let getPieRoseOption = function(data){
+  let  argumentsObject = arguments
+  let legendData = []
+  for(let i in data){
+    let element = {}
+    element['name'] = 'rectangle'
+    legendData.push(element)
+  }
+  let selectedMode = 'single'
+  let titleText = ''
+
+  if(data.length === 0){
+    data= [
+      {
+        name : '暂无数据',
+        value : 0
+      }
+    ]
+    selectedMode = false
+    titleText = '暂无数据'
+  }
+  
+  let option = {
+    title :{
+      text : titleText,
+      x: 'center'
+    },
+     tooltip: {
+      trigger: 'item',
+      position: ['50%', '50%'],
+      formatter: '{b} : {c} ({d}%)'
+    },
+    legend :{
+      orient : 'vertical',
+      y : 'center',
+      right : 5,
+      formatter (name){
+        if(argumentsObject.legend > 1){
+          for(let i =1 ; i < argumentsObject.legend ;i++){
+            if (argumentsObj[i] === 'legend_val') {
+              let target
+              for (let i = 0, l = data.length; i < l; i++) {
+                if (data[i].name === name) {
+                  target = data[i].value
+                }
+              }
+              return name + '：' + target
+            }
+          }
+        }else{
+          return echarts.format.truncateText(name, 85, '14px Microsoft Yahei', '…')
+        }
+      },
+      data : legendData
+    },
+    color : MyChartColor.colorList,
+    calculable: true,
+    series :[
+      {
+              type: 'pie',
+        selectedMode: selectedMode,
+        radius: [20, 110],
+        center: ['40%', '50%'],
+        roseType: 'radius', // 扇区圆心角展现数据的百分比，半径展现数据的大小
+        label: {
+          normal: {
+            show: false
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        lableLine: {
+          normal: {
+            show: false
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        data: data
+      }
+    ]
+  }
+   return option
+}
+export default {
+  getPieRoseOption
+}
+</script>
diff --git a/src/config/UserURLConfig.js b/src/config/UserURLConfig.js
new file mode 100644
index 0000000000000000000000000000000000000000..3b7f7bbb027c86ff337d681c95fc96f3c9cb64f1
--- /dev/null
+++ b/src/config/UserURLConfig.js
@@ -0,0 +1,39 @@
+/*
+ * @Author: mikey.zhaopeng 
+ * @Date: 2018-10-06 09:31:25 
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2018-10-06 13:38:46
+ */
+
+const server = '/api'
+export const registerQuick = '/user/register_quick.do'                        //快速注册
+export const login = '/user/login.do'                                   //登录
+export const register = '/user/register.do'                              //注册
+export const getQuestion = '/user/forget_get_question.do'               //忘记密码时 step1 根据用户名查找问题
+export const checkAnswer = '/user/forget_check_answer.do'               //忘记密码时 step2 根据提交回调问题的答案
+export const forgetResetPassword = '/user/forget_reset_password.do'     //忘记密码时 step3 重置密码
+export const getInfromation = '/user/get_information.do'
+export const updateInfromation = '/user/update_information.do'
+export const checkValid = '/user/check_valid.do'
+export const resetpwd = '/user/reset_password.do'
+export const uploadImage = '/image/upload'
+export const getImages = '/user/get_images.do'
+export const updateImage = '/user/update_image.do'
+
+
+export default {
+    registerQuick,
+    login,
+    register,
+    getQuestion,
+    checkAnswer,
+    forgetResetPassword,
+    getInfromation,
+    updateInfromation,
+    checkValid,
+    resetpwd,
+    uploadImage,
+    getImages,
+    updateImage,
+    server
+}
diff --git a/src/main.js b/src/main.js
index 417390e2862c8510f8b42dd01014e88d4136a449..686d438f4d53d61156b4f281ce64961a7c3401f0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,12 +1,51 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+/*
+ * @Author: Mark
+ * @Date: 2018-09-17 11:21:02
+ * @LastEditors: Mark
+ * @LastEditTime: 2018-09-17 11:32:32
+ * @Description: vue项目js入口文件
+ */
+
+/**
+ * 引入第三方的模块
+ */
 import Vue from 'vue'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import 'font-awesome/css/font-awesome.css'
+import Echarts from 'echarts'
+import VueLazyload from 'vue-lazyload'
+
+
+/**
+ * 引入自定义的模块
+ */
 import App from './App'
 import router from './router'
+import resUtil from './utils/requestUtil'
+import uriConf from './config/UserURLConfig'
+
+/**
+ * 
+ */
+router.beforeEach((to,from,next)=>{
+  if(to.meta.title){
+    document.title = to.meta.title
+  }
+  next()
+})
 
+/**
+ * vue属性的全局配置
+ */
+Vue.use(ElementUI)
+Vue.use(Echarts)
+Vue.use(VueLazyload)
 Vue.config.productionTip = false
+Vue.prototype.$uriConf = uriConf
+Vue.prototype.$resUtil = resUtil
+Vue.prototype.$echarts= Echarts
 
-/* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
diff --git a/src/modules/home/HomeBanner.vue b/src/modules/home/HomeBanner.vue
new file mode 100644
index 0000000000000000000000000000000000000000..db26b75bd67d4e026c7ce573284d8f099d1c161e
--- /dev/null
+++ b/src/modules/home/HomeBanner.vue
@@ -0,0 +1,39 @@
+/*
+ * @Author: Mark
+ * @Date: 2018-09-19 12:43:04
+ * @LastEditors: Mark
+ * @LastEditTime: 2018-09-20 09:40:51
+ * @Description: 首页banner
+ */
+<template>
+  <div style="width:80%;margin: 0 auto">
+    <template>
+      <el-carousel :interval="4000" type="card" height="200px">
+        <el-carousel-item v-for="item in 6" :key="item">
+          <h3>{{ item }}</h3>
+        </el-carousel-item>
+      </el-carousel>
+
+      <el-col :span="24">
+        <span class="lable-names">Web服务器</span>
+        <el-input v-model="webServer" placeholder="请输入web服务名称,不填默认为全部"  style="float:left;width:80%"></el-input>
+      </el-col>
+
+      <!-- echart图表测试 -->
+      <div id="source-web-chart" style="width: 600px;height:400px;"></div>
+    </template>
+
+  </div>
+</template>
+
+
+<script>
+  import index from '@/assets/js/home/home-banner.js'
+  export default{
+    ...index
+  }
+</script>
+
+<style lang='scss' scoped>
+  @import "@/assets/css/home/home-banner.scss";
+</style>
diff --git a/src/modules/login/Login.vue b/src/modules/login/Login.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c3d60b981f2949a39c83ee82a7040045fd11ad08
--- /dev/null
+++ b/src/modules/login/Login.vue
@@ -0,0 +1,111 @@
+/*
+ * @Author: Mark
+ * @Date: 2018-09-17 11:34:26
+ * @LastEditors: Mark
+ * @LastEditTime: 2018-09-18 08:54:11
+ * @Description: 登录模板文件
+ */
+<template>
+    <div class="login">
+        <header-login></header-login>
+
+        <div>
+            <el-main>
+                <el-card class="box-card" shadow="hover">
+
+                    <div class="icon theme-color">
+                        告别旧世界-
+                        <i class="fa fa-heart fa-color"></i>-建立自我派
+                    </div>
+
+                    <el-tabs type="border-card"   v-model="form.type" @tab-click="clickTab">
+                        <el-tab-pane name="username">
+                            <span slot="label">
+                                <i class="fa fa-user-o"></i> 用户名登录</span>
+                            <div>
+                                <el-form :rules="rules" :model="form" ref="form" label-width="80px" class="demo-ruleForm">
+                                    <el-form-item label="用户名" prop="username">
+                                        <el-input v-model="form.typeValue" @blur="setUserName" clearable>
+                                            <i slot="prefix" class="fa fa-user-o"></i>
+                                        </el-input>
+                                    </el-form-item>
+                                    <el-form-item label="密 码" prop="password">
+                                        <el-input v-model="form.password" type="password" @keyup.enter.native="onSubmit('form')" clearable>
+                                            <i slot="prefix" class="fa fa-key fa-fw"></i>
+                                        </el-input>
+                                    </el-form-item>
+                                    <el-form-item>
+                                        <el-button style=" width:100%" type="primary" plain @click="onSubmit('form')">登录</el-button>
+                                    </el-form-item>
+                                </el-form>
+                            </div>
+                        </el-tab-pane>
+
+                         <el-tab-pane  name="phone">
+                            <span slot="label">
+                                <i class="fa fa-mobile-phone"></i> 手机号登录</span>
+                            <div>
+                                <el-form :rules="rules" :model="form" ref="form" label-width="80px" class="demo-ruleForm">
+                                    <el-form-item label="手机号" prop="phone">
+                                        <el-input v-model="form.typeValue"  @blur="setPhone" clearable>
+                                            <i slot="prefix" class="fa fa-mobile-phone"></i>
+                                        </el-input>
+                                    </el-form-item>
+                                    <el-form-item label="密 码" prop="password">
+                                        <el-input v-model="form.password" type="password" @keyup.enter.native="onSubmit('form')" clearable>
+                                            <i slot="prefix" class="fa fa-key fa-fw"></i>
+                                        </el-input>
+                                    </el-form-item>
+                                    <el-form-item>
+                                        <el-button style=" width:100%" type="primary" plain @click="onSubmit('form')">登录</el-button>
+                                    </el-form-item>
+                                </el-form>
+                            </div>
+                        </el-tab-pane>
+
+                         <el-tab-pane  name="email">
+                            <span slot="label">
+                                <i class="fa fa-envelope-o fa-fw"></i> 邮箱登录</span>
+                            <div>
+                                <el-form :rules="rules" :model="form" ref="form" label-width="80px" class="demo-ruleForm">
+                                    <el-form-item label="邮箱" prop="email">
+                                        <el-input v-model="form.typeValue" type="email" @blur="setEmail"  clearable>
+                                            <i slot="prefix" class="fa fa-envelope-o fa-fw"></i>
+                                        </el-input>
+                                    </el-form-item>
+                                    <el-form-item label="密 码" prop="password">
+                                        <el-input v-model="form.password" type="password" @keyup.enter.native="onSubmit('form')" clearable>
+                                            <i slot="prefix" class="fa fa-key fa-fw"></i>
+                                        </el-input>
+                                    </el-form-item>
+                                    <el-form-item>
+                                        <el-button style=" width:100%" type="primary" plain @click="onSubmit('form')">登录</el-button>
+                                    </el-form-item>
+                                </el-form>
+                            </div>
+                        </el-tab-pane>
+                    </el-tabs>
+
+                    <div class="link-item">
+                        <router-link to="/forget" class="link">忘记密码
+                            <i class="fa fa-unlock-alt"></i>
+                        </router-link>
+                        <router-link to="/register" class="link">免费注册>></router-link>
+                    </div>
+
+                </el-card>
+            </el-main>
+        </div>
+    </div>
+</template>
+
+<script type="text/ecmascript-6">
+import index from '@/assets/js/login/login.js'
+export default {
+    ...index
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/css/login/login.scss';
+</style>
diff --git a/src/modules/login/LoginForgetPwd.vue b/src/modules/login/LoginForgetPwd.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3bca74cafa765e49d2a159594eb2af6c33b7028f
--- /dev/null
+++ b/src/modules/login/LoginForgetPwd.vue
@@ -0,0 +1,100 @@
+/*
+ * @Author: Mark
+ * @Date: 2018-09-17 20:58:10
+ * @LastEditors: Mark
+ * @LastEditTime: 2018-09-19 12:46:26
+ * @Description: 忘记密码登录
+ */
+ 
+ <template>
+  <div class="forget-pwd">
+    <header-login></header-login>
+    <el-card class="box-card" shadow="hover">
+      <div class="icon theme-color">
+        静静地陪你-<i class="fa fa-heartbeat fa-color"></i>-走过了好远
+      </div>
+      <div>
+        <!-- 第一步 输入用户名 -->
+        <el-form v-if="usernameForm.isShow" status-icon :rules="usernameFormRules" :model="usernameForm" ref="usernameForm" label-width="80px">
+          <el-form-item label="用户名" prop="username">
+            <el-input  v-model="usernameForm.username" @keyup.enter.native="firstStep('usernameForm')" placeholder="请输入你的用户名" autofocus='true' clearable>
+              <i slot="prefix" class="fa fa-user-circle"></i>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button style=" width:100%" type="primary" @click="firstStep('usernameForm')">下一步
+              <i class="fa fa-hand-o-right" aria-hidden="true"></i>
+            </el-button>
+          </el-form-item>
+        </el-form>
+
+        <!-- 第二步回答问题 -->
+        <el-form v-show="answerForm.isShow" status-icon :rules="answerFormRules" :model="answerForm" ref="answerForm" label-width="80px">
+          <span>请回答:{{answerForm.question}}?</span>
+          <el-form-item label="答案" prop="answer">
+            <el-input v-model="answerForm.answer" placeholder="清输入您的答案" autofocus='true' clearable>
+              <i slot="prefix" class="fa fa-question-circle-o"></i>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button style=" width:100%" type="primary" @click="secondStep('answerForm')">下一步
+              <i class="fa fa-hand-o-right" aria-hidden="true"></i>
+            </el-button>
+          </el-form-item>
+        </el-form>
+
+        <!-- 重置密码 -->
+        <el-form v-show="newPwdForm.isShow" status-icon :rules="newPwdFormRules" :model="newPwdForm" ref="newPwdForm" label-width="80px">
+          <span>设置我的新密码</span>
+          <el-form-item label="密 码" prop="newPwd">
+            <el-input v-model="newPwdForm.newPwd" type="password" placeholder="请输入你的新密码" auto-complete="off" autofocus='true' clearable>
+              <i slot="prefix" class="fa fa-lock"></i>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="新密码" prop="confirmPwd">
+            <el-input v-model="newPwdForm.confirmPwd" type="password" placeholder="再次输入你的新密码" auto-complete="off" clearable>
+              <i slot="prefix" class="fa fa-lock"></i>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button style=" width:100%" type="primary" @click="thirdStep('newPwdForm')">重置密码
+              <i class="fa fa-hand-peace-o" aria-hidden="true"></i>
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <el-progress :percentage="data.progress_percentage" :status="data.progress_status"></el-progress>
+      <div class="link-item">
+        <router-link to="/login" class="link">去登录 <i class="fa fa-smile-o"></i></router-link>
+        <router-link to="/register" class="link">免费注册>></router-link>
+      </div>
+    </el-card>
+
+    <el-card v-show="successCard.isShow" class="box-card" shadow="hover">
+      <div class="icon theme-color">
+        请想起我们-<i class="fa fa-venus-double fa-color"></i>-有过的从前
+      </div>
+      <el-button style=" width:80%" type="primary" @click="login">马上登录
+        <i class="fa fa-hand-peace-o" aria-hidden="true"></i>
+      </el-button>
+      <el-progress style=" margin-top: 50px;" :percentage="data.progress_percentage" :status="data.progress_status"></el-progress>
+      <div class="link-item">
+        <router-link to="/login" class="link">去登录 <i class="fa fa-smile-o"></i></router-link>
+        <router-link to="/register" class="link">免费注册>></router-link>
+      </div>
+    </el-card>
+
+  </div>
+</template>
+ 
+<script>
+  import index from '@/assets/js/login/login-forget-pwd.js'
+  export default{
+    ...index
+  }
+</script>
+
+<style lang='scss' scoped>
+ @import "@/assets/css/login/login-forget-pwd.scss";
+</style>
diff --git a/src/modules/register/register.vue b/src/modules/register/register.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f8429ad33ffa1cd075e1cd4b911fa58b7af4b556
--- /dev/null
+++ b/src/modules/register/register.vue
@@ -0,0 +1,113 @@
+/*
+ * @Author: HuashengA 
+ * @Date: 2018-09-24 18:53:49 
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2018-10-05 10:15:10
+ */
+<template>
+    <div class="register">
+        <header-login></header-login>
+        <div class="register-content">
+            <el-main>
+                <el-card class="box-card" shadow="hover">
+
+                    <div class="icon theme-color">
+                        伴你长高-
+                        <i class="fa fa-heart fa-color"></i>-伴你征讨
+                    </div>
+
+                    <el-tabs v-model="activeName">
+                        <el-tab-pane label="快速注册" name="first">
+                            <el-form :rules="registerRules" ref="registerFrom" label-position="left" label-width="80px" :model="registerFrom">
+                                <el-form-item label="用户名" prop="username">
+                                    <el-input v-model="registerFrom.username"  @blur="checkValue('username',registerFrom.username)" clearable placeholder="用户名长度为3~18个字符">
+                                        <i slot="prefix" class="fa fa-user-o"></i>
+                                    </el-input>
+                                </el-form-item>
+                                <el-form-item label="密码" prop="password">
+                                    <el-input type="password" v-model="registerFrom.password" clearable placeholder="密码长度为3~20个字符">
+                                        <i slot="prefix" class="fa fa-key fa-fw"></i>
+                                    </el-input>
+                                </el-form-item>
+                                <el-form-item label="确认密码" prop="confirmPwd">
+                                    <el-input type="password" v-model="registerFrom.confirmPwd" clearable placeholder="请再次输入密码">
+                                        <i slot="prefix" class="fa fa-key fa-fw"></i>
+                                    </el-input>
+                                </el-form-item>
+                                <el-form-item>
+                                    <el-button style=" width:100%" type="primary" @click="register('registerFrom')">快速注册</el-button>
+                                </el-form-item>
+                            </el-form>
+
+                        </el-tab-pane>
+                        <el-tab-pane label="注册" name="second">
+                            <el-form :rules="registerRules2" ref="registerFrom2" label-position="left" label-width="80px" :model="registerFrom">
+                                <el-form-item label="用户名" prop="username">
+                                    <el-input v-model="registerFrom.username" @blur="checkValue('username',registerFrom.username)" clearable placeholder="用户名长度为3~18个字符">
+                                        <i slot="prefix" class="fa fa-user-o"></i>
+                                    </el-input>
+                                </el-form-item>
+                                <el-form-item label="密码" prop="password">
+                                    <el-input type="password" v-model="registerFrom.password" clearable placeholder="密码长度为3~20个字符">
+                                        <i slot="prefix" class="fa fa-key fa-fw"></i>
+                                    </el-input>
+                                </el-form-item>
+                                <el-form-item label="确认密码" prop="confirmPwd">
+                                    <el-input type="password" v-model="registerFrom.confirmPwd" clearable placeholder="请再次输入密码">
+                                        <i slot="prefix" class="fa fa-key fa-fw"></i>
+                                    </el-input>
+                                </el-form-item>
+                                <el-form-item label="手机号" prop="phone">
+                                    <el-input v-model="registerFrom.phone" @blur="checkValue('username',registerFrom.phone)" clearable placeholder="请输入手机号">
+                                        <i slot="prefix" class="fa fa-mobile-phone"></i>
+                                    </el-input>
+                                </el-form-item>
+                                <el-form-item label="邮箱" prop="email">
+                                    <el-input type="email" v-model="registerFrom.email" @blur="checkValue('username',registerFrom.email)" clearable placeholder="请输入邮箱">
+                                        <i slot="prefix" class="fa fa-envelope-o fa-fw"></i>
+                                    </el-input>
+                                </el-form-item>
+                                <el-form-item label="设置问题" prop="question">
+                                    <el-input v-model="registerFrom.question" clearable placeholder="通过该回答问题找回密码">
+                                        <i slot="prefix" class="fa fa-question-circle-o"></i>
+                                    </el-input>
+                                </el-form-item>
+                                <el-form-item label="我的答案" prop="answer">
+                                    <el-input v-model="registerFrom.answer" clearable placeholder="请回答 1988">
+                                        <i slot="prefix" class="fa fa-unlock"></i>
+                                    </el-input>
+                                </el-form-item>
+                                <el-form-item label="性别" prop="sex" class="radio-group">
+                                    <el-radio-group v-model="registerFrom.sex">
+                                        <el-radio label="1" border>男</el-radio>
+                                        <el-radio label="2" border>女</el-radio>
+                                        <el-radio label="3" border>保密</el-radio>
+                                    </el-radio-group>
+                                </el-form-item>
+                                <el-form-item>
+                                    <el-button style=" width:100%" type="primary" @click="register('registerFrom2')">注册</el-button>
+                                </el-form-item>
+                            </el-form>
+                        </el-tab-pane>
+                    </el-tabs>
+
+                    <div class="link-item">
+                        <router-link to="/login" class="link">马上登录>></router-link>
+                    </div>
+
+                </el-card>
+            </el-main>
+        </div>
+    </div>
+
+</template>
+<script type="text/ecmascript-6">
+import index from '@/assets/js/register/register.js'
+export default {
+    ...index
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/css/register/register.scss';
+</style>
diff --git a/src/modules/user/UserCenter.vue b/src/modules/user/UserCenter.vue
new file mode 100644
index 0000000000000000000000000000000000000000..059a501c58be1fb292ab71cb9c7a33bf432bf6ab
--- /dev/null
+++ b/src/modules/user/UserCenter.vue
@@ -0,0 +1,682 @@
+/*
+ * @Author: Sa
+ * @Date: 2018-10-06 22:32:02 
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2018-10-06 23:57:40
+ * @Description: 用户个人中心页面
+ */
+<template>
+  <div>
+    <!-- 1.头部 -->
+    <my-header></my-header>
+
+    <!-- 2.面板屑 -->
+    <breadcrumb class="user-breadcrumb">
+      <span slot="message">个人中心</span>
+    </breadcrumb>
+
+    <!--3.个人中心信息 -->
+    <div class="user-info-card">
+      <el-row :gutter="20">
+
+        <!-- 3.1个人中心信息卡片 -->
+        <el-col :span="18">
+          <div class="grid-content bg-purple">
+            <el-card class="box-card" shadow="hover">
+              <div slot="header" class="clearfix">
+                <el-tooltip class="item" effect="dark" :content="userInfo.username+'您已经注册'+userInfo.totalDays+'天了！'" placement="left">
+                  <span style="font-size:20px">我的明信片 <i class="fa fa-vcard"></i></span>
+                </el-tooltip>
+
+                <el-button style="float: right; padding: 30px 0" type="text" @click="updteInfoShow=true">修改</el-button>
+              </div>
+              <div class="text item">
+                <div class="user-img" v-if="userInfo.userImg">
+                  <img v-lazy="userInfo.userImg" alt="">
+                </div>
+                <div v-else class="user-img">
+                  <i class="fa fa-user-circle-o"></i>
+                  <div>
+                    <el-button type="text" @click="updatePwdShow=true">上传图片</el-button>
+                  </div>
+
+                </div>
+                <div class="user-from">
+                  <el-form status-icon label-width="150px" class="demo-ruleForm" label-position="left">
+                    <el-form-item label="你猴吗->我就系>>" prop="pass">
+                      <div class="form-item-value">
+                        {{userInfo.username}}
+                      </div>
+                    </el-form-item>
+
+                    <el-form-item label="绑定的手机号码>>" prop="pass">
+                      <div v-if="userInfo.phone" class="form-item-value">
+                        {{userInfo.phone}}
+                      </div>
+                      <div v-else class="form-item-unvalue">
+                        暂未绑定手机号
+                      </div>
+                    </el-form-item>
+
+                    <el-form-item label="绑定账号的邮箱>>" prop="pass">
+                      <div v-if="userInfo.email" class="form-item-value">
+                        {{userInfo.email}}
+                      </div>
+                      <div v-else class="form-item-unvalue">
+                        暂未绑定邮箱
+                      </div>
+                    </el-form-item>
+
+                    <el-form-item label="找回密码的问题>>" prop="pass">
+                      <div v-if="userInfo.question" class="form-item-value">
+                        {{userInfo.question}}
+                      </div>
+                      <div v-else class="form-item-unvalue">
+                        暂未设置找回密码的问题
+                      </div>
+                    </el-form-item>
+
+                    <el-form-item label="回答问题的答案>>" prop="pass">
+                      <div v-if="userInfo.answer" class="form-item-value">
+                        {{userInfo.answer}}
+                      </div>
+                      <div v-else class="form-item-unvalue">
+                        问题都空着，答案肯定还没有咯！
+                      </div>
+                    </el-form-item>
+                  </el-form>
+                </div>
+              </div>
+            </el-card>
+          </div>
+        </el-col>
+
+        <!-- 3.2侧边导航栏 -->
+        <el-col :span="6">
+          <!-- 3.2.1:导航栏菜单 -->
+          <div class="grid-content bg-purple">
+            <el-menu :default-openeds="['1']" class="el-menu-vertical-demo">
+              <el-submenu index="1">
+                <template slot="title">
+                  <i class="el-icon-location"></i>
+                  <!-- <span>个人中心</span> -->
+                </template>
+                <el-menu-item-group>
+                  <el-menu-item index="1-1" @click="updteInfoShow=true"><i class="fa fa-address-card-o"></i> 更新信息</el-menu-item>
+                  <el-menu-item index="1-2" @click="updatePwdShow=true"><i class="fa fa-lock"></i> 更新密码</el-menu-item>
+                  <el-menu-item index="1-3" @click="updateImgShow=true"><i class="fa fa-user-o"></i> 更新头像</el-menu-item>
+                  <el-menu-item index="1-4" @click="getImages(false)"><i class="fa fa-user-circle"></i> 我的头像</el-menu-item>
+                </el-menu-item-group>
+              </el-submenu>
+
+            </el-menu>
+          </div>
+
+          <!-- 用户头像卡片 -->
+          <el-collapse-transition>
+            <el-card v-show="imagesCardShow" style="margin-top: 10px;">
+              <div class="images-content">
+                <div class="images" v-for="(image,index) in userInfo.imagesList" :key="index">
+                  <img style="width=25%" :src="image.url" :alt="image.createTime" @click="clickImage(image.url)">
+                </div>
+              </div>
+              <div v-if="pagination.pageSize<pagination.total" class="image-pagination">
+                <el-pagination :small=true layout="prev, next" :page-size="pagination.pageSize" :total="pagination.total" @prev-click="clickPre" @next-click="clickNext">
+                </el-pagination>
+              </div>
+            </el-card>
+          </el-collapse-transition>
+        </el-col>
+      </el-row>
+
+    </div>
+
+    <!-- 4.弹出的模态框 -->
+    <!-- 4.1 用户更的模态框 -->
+    <modal v-bind:mdShow="updteInfoShow" v-on:close="closeModal">
+      <p slot="message">
+        修改个人信息
+      </p>
+      <div slot="content">
+        <el-form :rules="updateRules" ref="updateFrom" label-position="left" label-width="80px" :model="userInfo">
+
+          <el-form-item label="用户名" prop="username">
+            <el-input @blur="checkValue('username',userInfo.username)" v-model="userInfo.username" clearable placeholder="用户名长度为3~18个字符">
+              <i slot="prefix" class="fa fa-user-o"></i>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="手机号" prop="phone">
+            <el-input @blur="checkValue('phone',userInfo.phone)" v-model="userInfo.phone" clearable placeholder="请输入手机号">
+              <i slot="prefix" class="fa fa-mobile-phone"></i>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="邮箱" prop="email">
+            <el-input @blur="checkValue('email',userInfo.email)" type="email" v-model="userInfo.email" clearable placeholder="请输入邮箱">
+              <i slot="prefix" class="fa fa-envelope-o fa-fw"></i>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="设置问题" prop="question">
+            <el-input v-model="userInfo.question" clearable placeholder="通过该回答问题找回密码">
+              <i slot="prefix" class="fa fa-question-circle-o"></i>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="我的答案" prop="answer">
+            <el-input v-model="userInfo.answer" clearable placeholder="请回答 1988">
+              <i slot="prefix" class="fa fa-unlock"></i>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="性别" prop="sex" class="radio-group">
+            <el-radio-group v-model="userInfo.gender">
+              <el-radio label='男' border>男</el-radio>
+              <el-radio label='女' border>女</el-radio>
+              <el-radio label='保密' border>保密</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button style=" width:100%" type="primary" @click="update('updateFrom')">提交</el-button>
+          </el-form-item>
+
+        </el-form>
+      </div>
+    </modal>
+
+    <!-- 4.2 更新密码的模态框 -->
+    <modal v-bind:mdShow="updatePwdShow" v-on:close="closeModal">
+      <p slot="message">
+        修改密码
+      </p>
+      <div slot="content">
+        <el-form :rules="updateRules" ref="updatePwdFrom" label-position="left" label-width="80px" :model="userInfo">
+
+          <el-form-item label="原密码">
+            <el-input type="password" v-model="userInfo.oldPwd" clearable placeholder="请输入原密码">
+              <i slot="prefix" class="fa fa-user-o"></i>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="新密码" prop="newPwd">
+            <el-input type="password" v-model="userInfo.newPwd" clearable placeholder="请输入新密码">
+              <i slot="prefix" class="fa fa-mobile-phone"></i>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="新密码" prop="confrimPwd">
+            <el-input type="password" v-model="userInfo.confrimPwd" clearable placeholder="请再次输入新密码">
+              <i slot="prefix" class="fa fa-envelope-o fa-fw"></i>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button style=" width:100%" type="primary" @click="updatePwd('updatePwdFrom')">提交</el-button>
+          </el-form-item>
+
+        </el-form>
+      </div>
+    </modal>
+
+    <!-- 4.3 更新头像的模态框 -->
+    <modal v-bind:mdShow="updateImgShow" v-on:close="closeModal">
+      <p slot="message">
+        更新头像
+      </p>
+      <div slot="content">
+        <el-form label-position="left" label-width="80px" :model="userInfo">
+
+          <el-form-item label="上传头像">
+            <el-input type="file" ref="imagesFile"></el-input>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button style=" width:100%" type="primary" @click="uploadImages">提交</el-button>
+          </el-form-item>
+
+        </el-form>
+      </div>
+    </modal>
+
+    <!-- 5 页脚 -->
+    <my-footer class="user-footer"></my-footer>
+  </div>
+</template>
+
+<script>
+import Modal from "@/components/Modal";
+import Breadcrumb from "@/components/Breadcrumb";
+import MyHeader from "@/components/Header";
+import MyFooter from "@/components/Footer";
+import User from "@/service/user-service";
+import Tips from "@/utils/tipsUtil";
+import RulesUtil from "@/utils/rulesUtil";
+const _user = new User();
+const _tips = new Tips();
+const _regular = new RulesUtil();
+
+export default {
+  data() {
+    //自定义的验证规则 用户名的校验规则
+    let validateUsername = (rule, value, callback) => {
+      let result = _regular.validate(value, "username");
+      if (result) {
+        callback(new Error(result));
+      } else {
+        callback();
+      }
+    };
+
+    //自定义的验证规则 电话号码的验证
+    let validatePhone = (rule, value, callback) => {
+      let result = _regular.validate(value, "phone");
+      if (result) {
+        callback(new Error(result));
+      } else {
+        callback();
+      }
+    };
+
+    //自定义的验证规则 邮箱的验证
+    let validateEmail = (rule, value, callback) => {
+      let result = _regular.validate(value, "email");
+      if (result) {
+        callback(new Error(result));
+      } else {
+        callback();
+      }
+    };
+    //自定义的验证规则 问题的验证
+    let validateQuestion = (rule, value, callback) => {
+      if (_regular.validate(value, "require")) {
+        callback();
+      } else {
+        callback(new Error("请输入你的问题"));
+      }
+    };
+
+    //自定义的验证规则 答案的验证
+    let validateAnswer = (rule, value, callback) => {
+      if (_regular.validate(value, "require")) {
+        callback();
+      } else {
+        callback(new Error("请输入回答问题答案"));
+      }
+    };
+
+    //自定义的验证规则 密码的校验
+    let validatePassWord = (rule, value, callback) => {
+      if (_regular.validate(value, "require")) {
+        length = value.length;
+        if (length >= 3 && length <= 15) {
+          callback();
+        } else {
+          callback(new Error("输入的密码的长度在3到15个字符"));
+        }
+      } else {
+        callback(new Error("请输入密码！"));
+      }
+    };
+
+    //自定义的验证规则 确认密码的校验
+    let validateConfirmPwd = (rule, value, callback) => {
+      if (_regular.validate(value, "require")) {
+        length = value.length;
+        if (length >= 3 && length <= 15) {
+          if (this.userInfo.newPwd !== this.userInfo.confrimPwd) {
+            callback(new Error("两次输入的密码不一致"));
+          } else {
+            callback();
+          }
+        } else {
+          callback(new Error("输入的密码的长度在3到15个字符"));
+        }
+      } else {
+        callback(new Error("请输入确认密码！"));
+      }
+    };
+
+    return {
+      //存储分页信息的对象
+      pagination: {
+        pageNum: 1, //当前的页数
+        pageSize: 4, //页面大小
+        total: 0 //总的条数（即总的用户头像个数）
+      },
+
+      //存储用户信息的对象
+      userInfo: {
+        userId: "", //用户id
+        username: "姓名", //用户名
+        phone: "手机号", //手机号
+        email: "电子邮箱", //电子邮箱
+        question: "问题", //问题
+        answer: "答案", //答案
+        gender: "性别", //性别
+        userImg: "", //头像地址
+        imageHost: "", //头像的主机地址（冗余字段）
+        totalDays: 0, //成为系统用户总的天数
+
+        oldPwd: "", //旧密码
+        newPwd: "", //新密码
+        confrimPwd: "", //确认密码
+
+        imagesList: [] //头像列表
+      },
+
+      updteInfoShow: false, //更新信息的标志
+      updatePwdShow: false, //更新密码的标志
+      updateImgShow: false, //更新头像的标志
+      imagesCardShow: false, //用户头像列表
+
+      //更新的表单校验
+      updateRules: {
+        //用户名的校验
+        username: [{ validator: validateUsername, trigger: "blur" }],
+        //手机号的验证
+        phone: [{ validator: validatePhone, trigger: "blur" }],
+        //邮箱的验证
+        email: [{ validator: validateEmail, trigger: "blur" }],
+        //问题的验证
+        question: [{ validator: validateQuestion, trigger: "blur" }],
+        //答案的验证
+        answer: [{ validator: validateAnswer, trigger: "blur" }],
+        //密码的校验
+        newPwd: [{ validator: validatePassWord, trigger: "blur" }],
+        //确人密码的校验
+        confrimPwd: [{ validator: validateConfirmPwd, trigger: "blur" }]
+      }
+    };
+  },
+  components: {
+    Modal,
+    Breadcrumb,
+    MyFooter,
+    MyHeader
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    /**
+     *1.初始化，获取用户信息
+     */
+    init() {
+      let vue = this;
+      _user.getUserInfomation().then(
+        res => {
+          let result = res.data;
+          vue.initUserInfoByResponse(result);
+        },
+        err => {
+          _tips.notifyTips(vue, err.msg);
+        }
+      );
+    },
+
+    /**
+     *2.关闭模态框
+     */
+    closeModal() {
+      this.updteInfoShow = false;
+      this.updatePwdShow = false;
+      this.updateImgShow = false;
+    },
+
+    /**
+     *3.更新用户信息
+     */
+    update(updateFrom) {
+      let vue = this;
+      vue.$refs[updateFrom].validate(valid => {
+        let updateInfo = {
+          username: vue.userInfo.username,
+          email: vue.userInfo.email,
+          phone: vue.userInfo.phone,
+          question: vue.userInfo.question,
+          answer: vue.userInfo.answer,
+          gender: vue.userInfo.gender
+        };
+        _user.getUpdateInfromation(updateInfo).then(
+          res => {
+            _tips.notifyTips(vue, res.msg); //信息提示
+            vue.updteInfoShow = false; //关闭模态框
+            vue.initUserInfoByResponse(res.data); //缓存数据
+          },
+          err => {
+            _tips.notifyTips(vue, err.msg);
+          }
+        );
+      });
+    },
+
+    /**
+     * 4.更新密码
+     */
+    updatePwd(updatePwdFrom) {
+      let vue = this;
+      vue.$refs[updatePwdFrom].validate(valid => {
+        let pwdInfo = {
+          passwordOld: vue.userInfo.newPwd,
+          passwordNew: vue.userInfo.newPwd
+        };
+        _user.updatePwd(pwdInfo).then(
+          res => {
+
+            _tips.notifyTips(vue, res.msg);
+            this.updatePwdShow = false;
+            
+            vue
+              .$confirm("是否重新登录？", "修改密码成功", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "success"
+              })
+              .then(() => {
+                vue.$router.push({path:'/login',name:'Login',query:{username: vue.userInfo.username}})
+              })
+              .catch(() => {
+                this.$message({
+                  type: "info",
+                  message: "下次记得用新密码登录哦！"
+                });
+              });
+          },
+          err => {
+            _tips.notifyTips(vue, err.msg);
+          }
+        );
+      });
+    },
+
+    /**
+     *5.上传用户头像
+     */
+    uploadImages() {
+      let vue = this;
+      const userId = vue.userInfo.userId;
+      let file = this.$refs.imagesFile.$refs.input.files[0];
+      _user.uploadImages(file, userId, res => {
+        vue.updateImgShow = false; //关闭更新头像的模态框
+        vue.userInfo.userImg = res.data.data[0].url; //缓存头像地址
+        vue.getImages(); //刷新头像卡片
+      });
+    },
+
+    /**
+     *6.获取我的的头像
+     *@param paginationClick:布尔值：是否为分页的点击
+     */
+    getImages(paginationClick) {
+      let vue = this;
+      vue.imagesCardShow = !vue.imagesCardShow;
+
+      //如果是分页点击触发该函数，需要显示头像卡片
+      if (paginationClick) {
+        vue.imagesCardShow = true;
+      }
+      if (vue.imagesCardShow) {
+        let pageInfo = {
+          pageNum: vue.pagination.pageNum,
+          pageSize: vue.pagination.pageSize
+        };
+        _user.getImages(pageInfo).then(
+          res => {
+            vue.userInfo.imagesList = res.data.list;
+            vue.pagination.total = res.data.total;
+          },
+          err => {
+            _tips.notifyTips(vue, err.msg);
+          }
+        );
+      }
+    },
+
+    /**
+     *7.实时校验用户名、手机号。电子邮箱是否可用
+     @param type:类型【取值为：用户名、手机号、邮箱】
+     @param value:类型的值
+     */
+    checkValue(type, value) {
+      let vue = this;
+      _user.checkValid(type, value).then(
+        res => {
+          _tips.notifyTips(vue, res.msg);
+        },
+        err => {
+          _tips.notifyTips(vue, err.msg);
+        }
+      );
+    },
+
+    /**
+     * 8.点击分页组件前一页触发的事件
+     */
+    clickPre() {
+      this.pagination.pageNum--;
+      this.getImages(true);
+    },
+    /**
+     * 9.点击分页组件的下一页的触发的事件
+     */
+    clickNext() {
+      this.pagination.pageNum++;
+      this.getImages(true);
+    },
+
+    /**
+     *10.点击头像列表触发的更新头像的事件
+     @param imageUrl:被点击头像的地址
+     */
+    clickImage(imageUrl) {
+      _user.updateImage(imageUrl).then(
+        res => {
+          this.initUserInfoByResponse(res.data);
+        },
+        er => {
+          _tips.notifyTips(vue, err.msg);
+        }
+      );
+    },
+
+    /**
+     * ------------------------------------------------------------------------
+     * 公共函数：缓存请求相应的数据
+     */
+    initUserInfoByResponse(result) {
+      this.userInfo.userId = result.userId;
+      this.userInfo.username = result.username;
+      this.userInfo.phone = result.phone;
+      this.userInfo.email = result.email;
+      this.userInfo.question = result.question;
+      this.userInfo.answer = result.answer;
+      this.userInfo.gender = result.gender != null ? result.gender : "保密";
+      this.userInfo.imageHost = result.imageHost;
+      this.userInfo.userImg = result.userImg;
+      this.userInfo.totalDays = result.totalDays;
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+//导航栏
+.user-breadcrumb {
+  width: 55%;
+  margin: 0 auto;
+}
+//用户卡片
+.user-info-card {
+  width: 55%;
+  margin: 0 auto;
+  .clearfix {
+    text-align: center;
+  }
+  .user-img {
+    .fa-user-circle-o {
+      font-size: 100px;
+      padding: 0 0 10px 0;
+      opacity: 0.5;
+    }
+  }
+  .user-img img {
+    height: 100px;
+    width: 100px;
+    border-radius: 50%;
+    margin: 0 auto;
+    padding: 0 0 10px 0;
+    :hover {
+      opacity: 0.8;
+      cursor: pointer;
+      background-color: red;
+    }
+  }
+  .el-form-item__label {
+    width: 120px;
+    font-size: 11px;
+  }
+  .form-item-value {
+    float: left;
+  }
+  .form-item-unvalue {
+    float: left;
+    color: #c60023;
+    opacity: 0.7;
+  }
+}
+// 性别按钮组的样式
+.el-form-item.radio-group {
+  text-align: left;
+}
+//头像列表
+.images-content {
+  position: relative;
+  overflow: hidden;
+  .images {
+    float: left;
+    width: 25%;
+    height: auto;
+    :hover {
+      cursor: pointer;
+      opacity: 0.7;
+    }
+    img {
+      width: 100%;
+      margin: 2px;
+      border-radius: 50%;
+    }
+  }
+}
+//头像分页
+.image-pagination {
+  padding-top: 10px;
+}
+//页脚
+.user-footer {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 5fa7f9d3191e33ac45048462ca4ad9a582a76e73..df8be65042751fbb04b133eb1876e21de4d431be 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,15 +1,79 @@
+/*
+ * @Author: Sa
+ * @Date: 2018-10-03 13:43:59 
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2018-10-03 15:21:53
+ */
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import HeaderLogin from '@/components/HeaderLogin'
+import Header from '@/components/Header'
+import Footer from '@/components/Footer'
+import Login from '@/modules/login/Login'
+import Register from '@/modules/register/register'
+import LoginForgetPwd from '@/modules/login/LoginForgetPwd'
+import HomeBanner from '@/modules/home/HomeBanner'
+import UserCenter from '@/modules/user/UserCenter'
 
+import test from '@/test/TestUploadFile.vue'
 Vue.use(Router)
 
+const baseTitle = 'CampusO2O-'
+
 export default new Router({
   routes: [
+    {
+      path: '/test',
+      name: ' test',
+      component:  test
+    },
     {
       path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
+      name: ' Header',
+      component:  Header
+    },
+    {
+      path : '/footer',
+      name : 'Footer',
+      component : Footer
+    },
+    {
+      path:'/login',
+      name : 'Login',
+      component : Login,
+      meta : {
+        title : baseTitle+'登录'
+      }
+    },
+    {
+      path:'/register',
+      name : 'Register',
+      component : Register,
+      meta : {
+        title : baseTitle+'注册'
+      }
+    },
+    {
+      path:'/forget',
+      name : 'LoginForgetPwd',
+      component : LoginForgetPwd,
+      meta : {
+        title : baseTitle+'找回密码'
+      }
+    },
+    {
+      path:'/home',
+      name : 'HomeBanner',
+      component : HomeBanner,
+    
+    },
+    {
+      path:'/user-center',
+      name : 'UserCenter',
+      component : UserCenter,
+      meta : {
+        title : baseTitle+'找回密码'
+      }
     }
   ]
 })
diff --git a/src/service/user-service.js b/src/service/user-service.js
new file mode 100644
index 0000000000000000000000000000000000000000..0ccda9cc6743971c32777e250e7e4565d62a4447
--- /dev/null
+++ b/src/service/user-service.js
@@ -0,0 +1,157 @@
+/*
+ * @Author: Sa 
+ * @Date: 2018-09-16 23:11:54 
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2018-10-06 13:55:49
+ */
+
+import _axios from "@/utils/requestUtil";
+import _urlConfig from "@/config/UserURLConfig";
+import { get } from "http";
+class User {
+  /**
+   * 1.快速注册
+   */
+  registerQuick(userinfo) {
+    return _axios.request({
+      url: _urlConfig.registerQuick,
+      data: userinfo,
+      method: "post"
+    });
+  }
+
+  /**
+   *2.用户注册
+   */
+  register(userinfo) {
+    return _axios.request({
+      url: _urlConfig.register,
+      data: userinfo,
+      method: "post"
+    });
+  }
+
+   /**
+   * 3.用户登录
+   */
+  login2(userInfo) {
+    return _axios.request({
+      url: _urlConfig.login,
+      data: userInfo,
+      method: "post"
+    });
+  }
+
+  /**
+   * 4.忘记密码：根据用户名获取问题
+   */
+  getQuestion(userInfo) {
+    return _axios.request({
+      url: _urlConfig.getQuestion,
+      data: userInfo,
+      method: "post"
+    });
+  }
+
+  /**
+   * 5.忘记密码：检查密码提示的答案
+   */
+  checkAnswer(userInfo) {
+    return _axios.request({
+      url: _urlConfig.checkAnswer,
+      data: userInfo,
+      method: "post"
+    });
+  }
+
+  /**
+   * 6.忘记密码： 重置密码
+   */
+  resetPassword(passwordInfo) {
+    return _axios.request({
+      url: _urlConfig.forgetResetPassword,
+      data: passwordInfo,
+      method: "post"
+    });
+  }
+
+  /**
+   *7. 获取用户信息
+   */
+  getUserInfomation(){
+    return _axios.request({
+      url: _urlConfig.getInfromation,
+      data: null,
+      method: "post"
+    });
+  }
+
+  /**
+   * 8.更新用户信息
+   */
+  getUpdateInfromation(updateInfo){
+    return _axios.request({
+      url: _urlConfig.updateInfromation,
+      data: updateInfo,
+      method: "post"
+    });
+  }
+
+  /**
+   * 9.校验用户名，电子邮箱、手机号的合法性
+   */
+  checkValid(type,value){
+    return _axios.request({
+      url: _urlConfig.checkValid+"?type="+type+"&value="+value,
+    })
+  }
+
+  /**
+   * 10.更新用户密码
+   */
+  updatePwd(passwordInfo){
+    return _axios.request({
+      url: _urlConfig.resetpwd,
+      data: passwordInfo,
+      method: "post"
+    });
+  }
+
+  /**
+   * 11.上传用户头像
+   */
+  uploadImages(file,userId,callBack, errorHandler){
+    const url = _urlConfig.uploadImage
+    let formData = new FormData()
+    formData.append("files",file)
+    formData.append("role","user")
+    formData.append("roleId",userId)
+    _axios.uploadFile(url,formData,callBack,errorHandler)
+  }
+
+  /**
+   * 12.获取该用户的头像列表
+   */
+  getImages(pageInfo){
+    return _axios.request({
+      url: _urlConfig.getImages,
+      data: pageInfo,
+      method: "post"
+    });
+  }
+
+  /**
+   * 12.更新用户头像
+   */
+  updateImage(imageUrl){
+    return _axios.request({
+      url: _urlConfig.updateImage,
+      data:{
+        imageUrl: imageUrl
+      },
+      method: "post"
+    });
+  }
+
+}
+export default User;
diff --git a/src/test/TestUploadFile.vue b/src/test/TestUploadFile.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2d20557197583ed618d33ca059e04b563451b975
--- /dev/null
+++ b/src/test/TestUploadFile.vue
@@ -0,0 +1,69 @@
+/*
+ * @Author: OBKoro1
+ * @Date: 2018-09-26 22:22:29
+ * @LastEditors: OBKoro1
+ * @LastEditTime: 2018-09-26 22:44:47
+ * @Description: 
+ */
+
+<template>
+  <div>
+    <el-form label-position="left" label-width="80px" :model="form">
+      <el-form-item label="名称">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+
+       <el-form-item label="jar包输入">
+          <el-input type="file" id="jar" ref="jarFile"  @change="saveFile()"></el-input>
+        </el-form-item>
+       
+      <el-form-item>
+        <el-button style=" width:100%" type="primary" plain @click="onSubmit">登录</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+
+import _axios from '@/utils/requestUtil'
+export default {
+    data() {
+        return {
+            form: {
+                name: '',
+                file : null
+            },
+            jarFile : {},
+            xmlFile : {}
+
+        }
+    },
+    components: {},
+    methods :{
+
+      saveFile(e){
+
+        this.jarFile = this.$refs.jarFile.$refs.input.files[0]
+
+      },
+
+      onSubmit(){
+          let formData = new FormData()
+          let fileData = this.jarFile
+          formData.append("file",fileData)
+          formData.append("file",fileData)
+          formData.append("file",fileData)
+          formData.append("username","mark")
+          _axios.uploadFile("/image/upload",formData,(res)=>{
+
+          },(err)=>{
+
+          })
+      }
+    }
+}
+</script>
+
+<style lang='scss'>
+</style>
diff --git a/src/utils/regularUtil.js b/src/utils/regularUtil.js
new file mode 100644
index 0000000000000000000000000000000000000000..bde3c3a8699e65ad58440250cab53eb9c61e002e
--- /dev/null
+++ b/src/utils/regularUtil.js
@@ -0,0 +1,14 @@
+/*
+ * @Author: Mark
+ * @Date: 2018-09-20 09:36:38
+ * @LastEditors: Mark
+ * @LastEditTime: 2018-09-20 09:37:08
+ * @Description: 校验工具类
+ */
+export default{
+
+  isValidIP: (ip) => {
+    var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
+    return reg.test(ip)
+  }
+}
diff --git a/src/utils/requestUtil.js b/src/utils/requestUtil.js
new file mode 100644
index 0000000000000000000000000000000000000000..710aa0d4d667c72ad0009f276aeca75a3e22f7a4
--- /dev/null
+++ b/src/utils/requestUtil.js
@@ -0,0 +1,128 @@
+/*
+ * @Author: Sa 
+ * @Date: 2018-09-16 09:19:58 
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2018-10-06 09:31:13
+ */
+
+import axios from 'axios'
+import config from '@/config/UserURLConfig'
+import qs from 'qs'
+
+//Global axios defaults
+//axios.defaults.headers.post['Content-Type'] = 'application/json'
+//axios.defaults.headers.get['Content-Type'] = 'application/json'
+//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+
+/**
+ * 在请求URL前面添加server
+ */
+function addServerUrl(url) {
+  let server = config.server
+  return server + url
+}
+
+export default {
+  /**
+   * 1.get请求
+   * @param url ：请求的url
+   * @param callBack ： 请求的回调函数
+   * @param errorHandler ： 异常的回调函数
+   */
+  get: (url, callBack, errorHandler) => {
+    axios
+      .get(addServerUrl(url))
+      .then(callBack)
+      .catch(errorHandler)
+  },
+
+  /**
+   * 2.post请求
+   * @param url ：请求的url
+   * @param data ： 请求的参数
+   * @param callBack ： 回到函数
+   * @param errorHandler ：异常的回调函数
+   */
+  post: (url, data, callBack, errorHandler) => {
+    data = qs.stringify(data)
+    axios
+      .post(addServerUrl(url), data)
+      .then(callBack)
+      .catch(errorHandler)
+  },
+
+  /**
+   * 3.文件上传的请求
+   * @param url : 请求的Url
+   * @param data ： 请求的数据
+   * @param callBack ： 请求的回到函数
+   * @param errorHandler ： 请求发生异常的回调函数
+   */
+  uploadFile: (url, data, callBack, errorHandler) => {
+    axios
+      .post(addServerUrl(url), data, {
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      })
+      .then(callBack)
+      .catch(errorHandler)
+  },
+
+  request(param) {
+    let serverPath = '/api'
+    return new Promise((resolve, rejects) => {
+      axios({
+        method: param.method || 'get',
+        url: serverPath + param.url || '',
+        headers: {
+          'content-Type': 'application/x-www-form-urlencoded'
+        },
+        data: param.method=='post'? qs.stringify(param.data) : null
+      })
+        .then(res => {
+          let data = {
+            data : res.data.data || null,
+            msg : res.data.msg || ''
+          }
+          
+          if (0 === res.data.status) {
+            
+            typeof resolve === 'function' && resolve(data)
+          }
+
+          //前端输入的参数值有误
+          else if (1 === res.data.status) {
+            typeof rejects === 'function' && rejects(data)
+          }
+
+          //需要登录
+          else if (10 === res.status) {
+            // _this.doLogin()
+          }
+
+          //店家需要登录
+          else if (11 === res.status) {
+            //_this.doSellerLogin()
+          }
+
+          //后台发生了异常
+          else if (-1 === res.status) {
+            console.error(res.msg)
+            res.msg = '我们的服务器不是很听话，它又淘气了！请稍后再试...'
+            typeof param.error === 'function' && param.error(res)
+          }
+
+          //前端输入的参数有误
+          else if (2 == res.status) {
+            console.error(res.msg)
+            res.msg = '抱歉！您输入的参数值不合法..'
+            typeof param.error === 'function' && param.error(res)
+          }
+        })
+        .catch(err => {
+          typeof param.error === 'function' && param.error(err.statusText)
+        })
+    })
+  }
+}
diff --git a/src/utils/rulesUtil.js b/src/utils/rulesUtil.js
new file mode 100644
index 0000000000000000000000000000000000000000..cf716dfcf970016afbe8b22c3487b9649ca69b96
--- /dev/null
+++ b/src/utils/rulesUtil.js
@@ -0,0 +1,91 @@
+/*
+ * @Author: Sa 
+ * @Date: 2018-09-23 14:11:18 
+ * @Last Modified by: HuaShengA
+ * @Last Modified time: 2018-09-25 23:10:56
+ */
+
+ class RulesUtil{
+
+    validate(value ,type){
+        //非空验证
+        if(type === 'require'){
+            return !! value
+        }
+        
+        /**
+         * 用户名的校验
+         * 校验通过返回空的字符，如果校验不用返回错误提示信息
+         */
+        if(type === 'username'){
+          let result = ''
+          if(value){
+            const rsultRegex = /^([A-Za-z0-9_])*$/.test(value) //用户名格式的正则匹配(用户名只能有字母、数字和下划线组成)
+            if(rsultRegex){
+              const length = value.length
+              if(!(length >= 3 && length <=15)){
+                result = '用户名的长度在3~15个字符'
+              }
+            }else{
+              result = '用户名只能有字母、数字、下划线组成'
+            }
+          }else{
+            result = '输入的用户名不能为空'
+          }
+          return result
+        }
+
+        /**
+         * 手机号验证
+         * 
+         */
+        if(type === 'phone'){
+          let result = ''
+          if(value){
+            const regexResult = /^1\d{10}$/.test(value)
+            if(!regexResult){
+              result = '输入的手机号格式不正确'
+            }
+          }else{
+            result = '输入的手机号不能为空'
+          }
+            return result
+        }
+
+        /**
+         * 邮箱格式验证
+         * 校验通过返回空的字符，如果校验不用返回错误提示信息
+         */
+        if(type === 'email'){
+          let result = ''
+          if(value){
+            const regexResult = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/.test(value)
+            if(!regexResult){
+              result = '输入的邮箱格式不正确'
+            }
+          }else{
+            result = '输入的邮箱不能为空'
+          }
+            return result;
+        }
+
+        /**
+         * 用户登录注册的密码的校验
+         */
+        if(type === 'password'){
+          let result = ''
+          if(value){
+            const length = value.length
+            if(!(length >= 3 && length <=20)){
+              result = '密码的长度在3~20个字符'
+            }
+          }else{
+            result = '输入的密码不能为空'
+          }
+          return result
+        }
+
+        
+    }
+ }
+export default RulesUtil
\ No newline at end of file
diff --git a/src/utils/tipsUtil.js b/src/utils/tipsUtil.js
new file mode 100644
index 0000000000000000000000000000000000000000..a7db27992c2b4aa7d3058bd2592c74dcf69899cc
--- /dev/null
+++ b/src/utils/tipsUtil.js
@@ -0,0 +1,18 @@
+/*
+ * @Author: Sa 
+ * @Date: 2018-09-18 23:35:16 
+ * @Last Modified by: Sa
+ * @Last Modified time: 2018-09-18 23:54:08
+ * 提示工具类
+ */
+class tips  {
+    notifyTips(vue,msg,level){
+        vue.$notify({ //响应失败的回调
+            title: '提示',
+            message: msg,
+            type: level || 'warning',
+            offset: 50
+          })
+    }
+ }
+export default tips
\ No newline at end of file
diff --git a/static/images/bgImg.png b/static/images/bgImg.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ddff811b683dbccec7cb81ce4f268ddf20a7fe5
Binary files /dev/null and b/static/images/bgImg.png differ
diff --git a/static/images/square.png b/static/images/square.png
new file mode 100644
index 0000000000000000000000000000000000000000..82cc6702ce91231a0efcc30b112a849994d49893
Binary files /dev/null and b/static/images/square.png differ