new project

85f65656 · chengcaixia · fd9f2e4c · 85f65656 · 85f65656 · 85f65656
Commit 85f65656 authored Jul 13, 2020 by chengcaixia
56 changed files
--- a/.editorconfig
+++ b/.editorconfig
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100
--- a/babel.config.js
+++ b/babel.config.js
+module.exports = {
+  presets: [
+    '@vue/app',
+  ],
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "recovery",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "test:unit": "vue-cli-service test:unit"
+  },
+  "dependencies": {
+    "axios": "^0.18.1",
+    "core-js": "^2.6.5",
+    "echarts": "^4.2.1",
+    "element-ui": "^2.9.0",
+    "file-saver": "^2.0.2",
+    "gcoord": "^0.2.3",
+    "js-cookie": "^2.2.1",
+    "moment": "^2.24.0",
+    "vue": "^2.6.10",
+    "vue-baidu-map": "^0.21.20",
+    "vue-router": "^3.0.3",
+    "vuex": "^3.0.1",
+    "xlsx": "^0.16.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.8.0",
+    "@vue/cli-plugin-eslint": "^3.8.0",
+    "@vue/cli-plugin-unit-jest": "^3.8.0",
+    "@vue/cli-service": "^3.8.0",
+    "@vue/eslint-config-airbnb": "^4.0.0",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "less": "^3.0.4",
+    "less-loader": "^4.1.0",
+    "script-loader": "^0.7.2",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "@vue/airbnb"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "jsx",
+      "json",
+      "vue"
+    ],
+    "transform": {
+      "^.+\\.vue$": "vue-jest",
+      ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
+      "^.+\\.jsx?$": "babel-jest"
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/"
+    ],
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/src/$1"
+    },
+    "snapshotSerializers": [
+      "jest-serializer-vue"
+    ],
+    "testMatch": [
+      "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
+    ],
+    "testURL": "http://localhost/",
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
+    ]
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>巡检平台</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but recovery doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+<style lang="less">
+</style>
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
+#app{
+  background: #efefef;
+}
+*{
+  margin: 0;
+  padding: 0;
+}
+.city-wap{
+  color: #3b4f62;
+  .clearfix{
+    &:after{
+      content: '';
+      display: block;
+      clear: both;
+    }
+  }
+  p{
+    background: #fff;
+    margin-bottom: 10px;
+    padding: 0 12px;
+  }
+  .search{
+    position: fixed;
+    top: 0;
+    box-shadow: 0 1px 3px 0 rgba(59,79,98,0.1);
+    width: 100%;
+    height: 50px;
+    input{
+      line-height: 50px;
+      width: 100%;
+      border: none;
+      box-shadow: none;
+      padding: 0 10px;
+      &:focus { 
+        outline: none; 
+      } 
+    }
+  }
+  .city-list{
+    .block-60{
+      height: 60px;
+    }
+    ul{
+      padding: 0 10px;
+      li{
+        list-style: none;
+        display: inline-block;
+        margin-right: 10px;
+        width: 29%;
+        margin-bottom: 8px;
+        line-height: 35px;
+        text-align: center;
+        color: #333;
+        border-radius: 3px;
+        background: #fff;
+        font-size: 14px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding: 0 2px;
+      }
+    }
+  }
+  .filter{
+    position: fixed;
+    right: 3px;
+    top: 60px;
+    font-size: 15px;
+    div{
+      margin-top: 2px;
+      text-align: center;
+    }
+  }
+  .active-key{
+    position: fixed;
+    width: 100px;
+    height: 100px;
+    line-height: 100px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 100;
+    background: #dedede;
+    color: #fff;
+    border-radius: 100%;
+    text-align: center;
+    font-size: 40px;
+  }
+}
+.city{
+  position:relative;
+  .city-components{
+    position: absolute;
+    width: 500px;
+    box-shadow: 0 0 4px 0 rgba(117,117,117,0.5);
+    border-radius: 2px;
+    padding: 20px 21px;
+    .clearfix{
+      &:after{
+        content: '';
+        display: block;
+        clear: both;
+      }
+    }
+    li{
+      list-style: none;
+    }
+    ul{
+      padding: 0;
+      margin: 0;
+    }
+    .filter-tabar{
+      border-bottom: 1px solid #d7d7d7;
+      cursor: pointer;
+      li{
+        text-align: center;
+        padding: 0 14px;
+        float: left;
+        padding-bottom: 14px;
+        font-size: 14px;
+        margin: 0 8px;
+        margin-bottom: -1px;
+        position: relative;
+        &.active{
+          border-bottom: 1px solid #ff7362;
+        }
+      }
+    }
+    .city-content{
+      max-height: 500px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 10px 13px 0 13px;
+      label{
+        display: block;
+        margin-bottom: 5px !important;
+        font-size: 20px !important;
+        margin-left: 0 !important;
+        color: #5f5f5f !important;
+        margin-top: 5px;
+      }
+      li{
+        padding: 6px 0 6px;
+        float: left;
+        text-align: left;
+        font-size: 14px;
+        min-width: 56px;
+        margin-right: 24px;
+        cursor: pointer;
+      }
+    }
+  }
+}
--- a/src/assets/css/reset.css
+++ b/src/assets/css/reset.css
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file
--- a/src/assets/data.js
+++ b/src/assets/data.js
+export default [
+  {
+    cityInfo: 'TianJin',
+    cityName: '天津',
+    status: 0,
+    lat: 39.12,
+    lng: 117.2,
+  },
+  {
+    cityInfo: 'WuHan',
+    cityName: '武汉',
+    status: 0,
+    lat: 30.52,
+    lng: 114.31,
+  },
+  {
+    cityInfo: 'ChongQing',
+    cityName: '重庆',
+    status: 0,
+    lat: 29.33,
+    lng: 106.33,
+  },
+  {
+    cityInfo: 'WuXi',
+    cityName: '无锡',
+    status: 0,
+    lat: 31.57,
+    lng: 120.30,
+  },
+  {
+    cityInfo: 'GuiLin',
+    cityName: '桂林',
+    status: 0,
+    lat: 25.27,
+    lng: 110.29,
+  },
+  {
+    cityInfo: 'HangZhou',
+    cityName: '杭州',
+    status: 0,
+    lat: 30.15,
+    lng: 120.10,
+  },
+  {
+    cityInfo: 'ShangHai',
+    cityName: '上海',
+    status: 0,
+    lat: 31.12,
+    lng: 121.26,
+  },
+  {
+    cityInfo: 'Zhengzhou',
+    cityName: '郑州',
+    status: 0,
+    lat: 34.44,
+    lng: 113.42,
+  },
+]
\ No newline at end of file
--- a/src/assets/icon/demo.css
+++ b/src/assets/icon/demo.css
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+.tab-container .content {
+  display: none;
+}
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+.helps {
+  margin-top: 40px;
+}
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+.highlight {
+  line-height: 1.5;
+}
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+.markdown h1 {
+  font-size: 28px;
+}
+.markdown h2 {
+  font-size: 22px;
+}
+.markdown h3 {
+  font-size: 16px;
+}
+.markdown h4 {
+  font-size: 14px;
+}
+.markdown h5 {
+  font-size: 12px;
+}
+.markdown h6 {
+  font-size: 12px;
+}
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+.markdown p {
+  margin: 1em 0;
+}
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+.markdown ul>li {
+  list-style: circle;
+}
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+.markdown ol>li {
+  list-style: decimal;
+}
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+.markdown>table th {
+  background: #F7F7F7;
+}
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+.markdown blockquote p {
+  margin: 0;
+}
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+.markdown .waiting {
+  color: #ccc;
+}
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+.hljs-tag {
+  color: #333333;
+}
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+.hljs-link {
+  text-decoration: underline;
+}
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+.token.punctuation {
+  color: #999;
+}
+.namespace {
+  opacity: .7;
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
--- a/src/assets/icon/demo_index.html
+++ b/src/assets/icon/demo_index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1070822" target="_blank" class="nav-more">查看项目</a>
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+            <li class="dib">
+              <span class="icon iconfont">&#xe623;</span>
+                <div class="name">姓名 用户名 昵称</div>
+                <div class="code-name">&amp;#xe623;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe624;</span>
+                <div class="name">密码</div>
+                <div class="code-name">&amp;#xe624;</div>
+              </li>
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          <li class="dib">
+            <span class="icon iconfont elxingmingyonghumingnicheng"></span>
+            <div class="name">
+              姓名 用户名 昵称
+            </div>
+            <div class="code-name">.elxingmingyonghumingnicheng
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont elmima"></span>
+            <div class="name">
+              密码
+            </div>
+            <div class="code-name">.elmima
+            </div>
+          </li>
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont elxxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#elxingmingyonghumingnicheng"></use>
+                </svg>
+                <div class="name">姓名 用户名 昵称</div>
+                <div class="code-name">#elxingmingyonghumingnicheng</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#elmima"></use>
+                </svg>
+                <div class="name">密码</div>
+                <div class="code-name">#elmima</div>
+            </li>
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>
--- a/src/assets/icon/iconfont.css
+++ b/src/assets/icon/iconfont.css
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1551860039453'); /* IE9 */
+  src: url('iconfont.eot?t=1551860039453#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATcAAsAAAAACZgAAASNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDQAqGBIUhATYCJAMYCw4ABCAFhG0HaBtfCMgehXEsLBShUVnZH3+Ih3/3Q+9L8lNglPUsO1DomVzPJIGbEpussROKhcSfz03fz0e0qqmpbstEgSYQLMUmGpir09NETybHNSb/55jx1j6N/GubS3bQ3mg8ijugA4pIjBS+A8HbpLOYUPjBrJfJ9xNoNy0VOqhvHQgShTgsEDdYrQokFasy0BhahdpxbhFvQag1PSMeAHjj/z5+QXZISJpMPOj0pboeqPwa8/k35vt5IzIPPJ4bs4vI2AQK8aDTewuO2U1Y+yYtsAe2J7dK0tfYzzc+v//8u78fXCVV3pC3XafsJCSNvPnnRSW0nRRzqGkenUwLCL7GCkh8vSEd1r2nZpnqflP552OsiAPd+AUQuLZN4lWSIoQ6rkj0CpQnxgsE0dpa7vf1DXa7qRcvBr58Ociq5VVxJMrdbqu4mXO7xylQpRz4lfNXByKwWjZ9BbjxgiS2vqxT3u6Lwdvc9Wjohie5ilPPIvDm5wXKk0/D1b3RjU/z4BAVEp7PzyPH7A+fLjkvz7/IX8hFBiV+rWLePuf+BOWFXE/RtXLtmj07dgVQq5yBg1fP38v7jetO1P3z/QetNA9cAfMFDlBcbrly515+j0yRIc47YbS3yGu0wLPpvojlqVPrLrtrdJ2RQ/uL1pq4zhnQnSZu3z7RqIipiJqguyHq2HZx+pEvxMZifODjxwNMhaci6iomNjZLcSpSu1xqqkJ8DqmLH4IPYcc7UCvXMwgNRKwatSdKzvnsEyei0fx4msCXiZkTiZHdDXUtAsF4Z/vTO1e72kMEIezlrgLzRrrmyJ0ja4IFwauP3jm6WtrsW1VX7aPcfJsolZz32S8pJW5vVhL1tiq4Q36p/VKvn0sCzB3VuogDB7ETuw4ccBFrAx6k3u9cSyGbDVHyGjYrRTTuXzthYvSuVWuXLPmW/I23/0/8lvQN3k0b58qT/i9Z8jr5dQsiqep8K0XYrDk72Ci0tvN+6oOAtcicB7ALOw8cbIWj/9g+5sVxE896eaeXG8vTvL28Kit5pYYesb8bTAb4n59gEwD5IW4ihI/YC/PB/xSjv9l+xn/v+Tfas/SvRP65Ln3Zua2BRf8XwMm1SoBlfyoZcKpsFcJWy3qy7hOoLnwT6YR2OcefKdjvNZZ+CJwmtFZkM0haTEHWahFRMJvQ6LAFVattaLeh4eIOA6ywKG1YN5NA6HUYkm7HkPV6iCiYV9AY9hWq3sDQ7kz4XrPDcrCyGiutstM9pHoCyWo4M6Mcdllo7Ka1DqPKWlZ4KkVbbWyCzErPrBcaaDNtxTjBNlabbbczJGPlTGQ9eRhtNHJkr5XT0xp7us5u7y3OyGC63ildw5lAZp8VTcWO1oOkNgGJpcExY+xiO1nj97vRtByMVKwDEzfCFJqVDbt1UpZ0mQBEg9YMmngpO9uMpZXNzo7hBzGsOCakeuqmGWWWQ+rt3kuPpmGXTpeR7lUsg81ioNr00+tN7/ImaCduVCNFjhJN1Ggx9oQ1a00aP4Gz6BwxZWY1OtqVCUysSSVel49nVZxkom5o14kOTqRWcRqHGQAAAAA=') format('woff2'),
+  url('iconfont.woff?t=1551860039453') format('woff'),
+  url('iconfont.ttf?t=1551860039453') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1551860039453#iconfont') format('svg'); /* iOS 4.1- */
+}
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.elxingmingyonghumingnicheng:before {
+  content: "\e623";
+}
+.elmima:before {
+  content: "\e624";
+}
+.elchexiao:before {
+  content: "\e6e2";
+}
+.elzhongzuo:before {
+  content: "\e6f3";
+}
+.elbaocun:before {
+  content: "\e6c4";
+}
--- a/src/assets/icon/iconfont.eot
+++ b/src/assets/icon/iconfont.eot
--- a/src/assets/icon/iconfont.js
+++ b/src/assets/icon/iconfont.js
+!function(c){var e,a='<svg><symbol id="elxingmingyonghumingnicheng" viewBox="0 0 1024 1024"><path d="M652.3 562.7C741.6 513.3 802 418.2 802 309c0-160.2-129.8-290-290-290-160.2 0-290 129.8-290 290 0 109.2 60.4 204.3 149.7 253.7C184 622.2 48 797.7 48 1005l58 0c0-224.2 181.8-406 406-406 224.2 0 406 181.8 406 406l58 0C976 797.7 840 622.2 652.3 562.7zM280 309c0-128.1 103.9-232 232-232 128.1 0 232 103.9 232 232 0 128.1-103.9 232-232 232C383.9 541 280 437.1 280 309z" fill="#707070" ></path></symbol><symbol id="elmima" viewBox="0 0 1024 1024"><path d="M739.63419875 355.43595235L304.70817565 355.43595235l0-79.80828444c0-100.4535808 88.03378062-179.16668587 200.62754133-179.79583146 110.03057493 0.58254222 192.89138062 77.594624 192.89138062 179.79583146l0 39.96239644c0 10.99839715 9.25077049 19.96954738 20.71520142 19.96954738 11.46443093 0 20.71520142-8.90124515 20.71520143-19.96954738l0-39.96239644c0-124.47762205-99.98754702-218.47663502-232.97028552-219.68832284l-2.65639253 0c-135.14979555 1.21168782-240.7530496 97.26124942-240.7530496 219.68832284l0 81.90543644c-70.06817849 9.8566144-124.29120853 67.57489778-124.29120853 137.7828864l0 259.6507193c0 77.1751936 65.011712 139.83343502 145.00640995 139.83343502l455.66452623 0c80.04130133 0 145.00640995-62.65824142 145.00640995-139.83343502L884.6639104 495.31599075C884.64060871 418.18740053 819.55899165 355.43595235 739.63419875 355.43595235L739.63419875 355.43595235 739.63419875 355.43595235zM843.21020587 754.89680498c0 55.10849422-46.44026595 99.87103858-103.57600712 99.87103857L283.99297422 854.76784355c-57.13574115 0-103.50610205-44.78584605-103.50610204-99.87103857L180.48687218 495.26938738c0-55.10849422 46.44026595-99.8244352 103.50610204-99.8244352l455.66452623 0c57.20564622 0 103.57600711 44.78584605 103.5760071 99.8244352L843.23350755 754.89680498 843.21020587 754.89680498zM511.7902848 475.27653831c-68.50696533 0-124.29120853 53.73369458-124.29120853 119.86388764 0 59.3494016 45.13537138 108.4227584 103.99543751 117.81333903-0.04660338 0.72235235-0.44273209 1.2582912-0.44273209 1.98064355l0 59.93194382c0 11.06830222 9.25077049 20.03945245 20.71520142 20.03945245s20.71520142-8.97115022 20.71520142-20.03945245L532.48218453 714.95771022c0-0.74565405-0.37282702-1.2582912-0.44273208-1.98064355 58.88336782-9.39058062 103.99543751-58.46393742 103.9954375-117.81333902C636.08149333 529.03353458 580.34385351 475.27653831 511.7902848 475.27653831L511.7902848 475.27653831 511.7902848 475.27653831zM511.7902848 675.06521885c-45.67131022 0-82.86080569-35.90790258-82.86080569-79.85488783 0-44.08679538 37.23609885-79.85488782 82.86080569-79.85488782 45.62470685 0 82.74429725 35.8612992 82.74429725 79.85488782C594.65109049 639.18061795 557.46159502 675.06521885 511.7902848 675.06521885L511.7902848 675.06521885 511.7902848 675.06521885z" fill="#707070" ></path></symbol><symbol id="elchexiao" viewBox="0 0 1024 1024"><path d="M289.6384 256H614.4a307.2 307.2 0 1 1 0 614.4H204.8a51.2 51.2 0 0 1 0-102.4h409.6a204.8 204.8 0 1 0 0-409.6H286.0032l59.2384 59.2384A51.2 51.2 0 1 1 272.7936 489.984L128 345.2416a51.2 51.2 0 0 1 0-72.448L272.7936 128a51.2 51.2 0 0 1 72.448 72.3968L289.6384 256z" fill="#666666" ></path></symbol><symbol id="elzhongzuo" viewBox="0 0 1024 1024"><path d="M737.9968 256l-55.6032-55.6032A51.2 51.2 0 1 1 754.8416 128l144.7936 144.7936a51.2 51.2 0 0 1 0 72.448L754.8416 489.984a51.2 51.2 0 0 1-72.448-72.3968L741.632 358.4H409.6a204.8 204.8 0 1 0 0 409.6h409.6a51.2 51.2 0 0 1 0 102.4H409.6A307.2 307.2 0 1 1 409.6 256h328.3968z" fill="#666666" ></path></symbol><symbol id="elbaocun" viewBox="0 0 1024 1024"><path d="M127.99 127.99h768.02l0.164 767.649-768.149 0.336-0.035-767.985z m63.794 63.794l0.253 640.179 640.124 0.199V191.838l-640.377-0.054z m6.449 0"  ></path><path d="M640.149 464.851V191.784h45.512v318.579H321.575V191.784h45.508v273.067z"  ></path><path d="M640.149 191.784h63.988v320.343H320.062V191.784h64.013v256.425h256.049z"  ></path><path d="M512.099 191.784h64.012v128.212h-64.012z"  ></path></symbol></svg>',t=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(t&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}!function(e){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(e,0);else{var t=function(){document.removeEventListener("DOMContentLoaded",t,!1),e()};document.addEventListener("DOMContentLoaded",t,!1)}else document.attachEvent&&(n=e,l=c.document,o=!1,i=function(){o||(o=!0,n())},(a=function(){try{l.documentElement.doScroll("left")}catch(e){return void setTimeout(a,50)}i()})(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,i())});var n,l,o,i,a}(function(){var e,t,n,l,o,i;(e=document.createElement("div")).innerHTML=a,a=null,(t=e.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",n=t,(l=document.body).firstChild?(o=n,(i=l.firstChild).parentNode.insertBefore(o,i)):l.appendChild(n))})}(window);
\ No newline at end of file
--- a/src/assets/icon/iconfont.svg
+++ b/src/assets/icon/iconfont.svg
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    <glyph glyph-name="xingmingyonghumingnicheng" unicode="&#58915;" d="M652.3 333.29999999999995C741.6 382.70000000000005 802 477.8 802 587c0 160.2-129.8 290-290 290-160.2 0-290-129.8-290-290 0-109.2 60.4-204.3 149.7-253.7C184 273.79999999999995 48 98.29999999999995 48-109l58 0c0 224.2 181.8 406 406 406 224.2 0 406-181.8 406-406l58 0C976 98.29999999999995 840 273.79999999999995 652.3 333.29999999999995zM280 587c0 128.1 103.9 232 232 232 128.1 0 232-103.9 232-232 0-128.1-103.9-232-232-232C383.9 355 280 458.9 280 587z"  horiz-adv-x="1024" />
+    <glyph glyph-name="mima" unicode="&#58916;" d="M739.63419875 540.56404765L304.70817565 540.56404765l0 79.80828444c0 100.4535808 88.03378062 179.16668587 200.62754133 179.79583146 110.03057493-0.58254222 192.89138062-77.594624 192.89138062-179.79583146l0-39.96239644c0-10.99839715 9.25077049-19.96954738 20.71520142-19.96954738 11.46443093 0 20.71520142 8.90124515 20.71520143 19.96954738l0 39.96239644c0 124.47762205-99.98754702 218.47663502-232.97028552 219.68832284l-2.65639253 0c-135.14979555-1.21168782-240.7530496-97.26124942-240.7530496-219.68832284l0-81.90543644c-70.06817849-9.8566144-124.29120853-67.57489778-124.29120853-137.7828864l0-259.6507193c0-77.1751936 65.011712-139.83343502 145.00640995-139.83343502l455.66452623 0c80.04130133 0 145.00640995 62.65824142 145.00640995 139.83343502L884.6639104 400.68400925C884.64060871 477.81259947 819.55899165 540.56404765 739.63419875 540.56404765L739.63419875 540.56404765 739.63419875 540.56404765zM843.21020587 141.10319502000004c0-55.10849422-46.44026595-99.87103858-103.57600712-99.87103857L283.99297422 41.23215645000005c-57.13574115 0-103.50610205 44.78584605-103.50610204 99.87103857L180.48687218 400.73061262c0 55.10849422 46.44026595 99.8244352 103.50610204 99.8244352l455.66452623 0c57.20564622 0 103.57600711-44.78584605 103.5760071-99.8244352L843.23350755 141.10319502000004 843.21020587 141.10319502000004zM511.7902848 420.72346169c-68.50696533 0-124.29120853-53.73369458-124.29120853-119.86388764 0-59.3494016 45.13537138-108.4227584 103.99543751-117.81333903-0.04660338-0.72235235-0.44273209-1.2582912-0.44273209-1.98064355l0-59.93194382c0-11.06830222 9.25077049-20.03945245 20.71520142-20.03945245s20.71520142 8.97115022 20.71520142 20.03945245L532.48218453 181.04228978000003c0 0.74565405-0.37282702 1.2582912-0.44273208 1.98064355 58.88336782 9.39058062 103.99543751 58.46393742 103.9954375 117.81333902C636.08149333 366.96646541999996 580.34385351 420.72346169 511.7902848 420.72346169L511.7902848 420.72346169 511.7902848 420.72346169zM511.7902848 220.93478115000005c-45.67131022 0-82.86080569 35.90790258-82.86080569 79.85488783 0 44.08679538 37.23609885 79.85488782 82.86080569 79.85488782 45.62470685 0 82.74429725-35.8612992 82.74429725-79.85488782C594.65109049 256.81938204999994 557.46159502 220.93478115000005 511.7902848 220.93478115000005L511.7902848 220.93478115000005 511.7902848 220.93478115000005z"  horiz-adv-x="1024" />
+    <glyph glyph-name="chexiao" unicode="&#59106;" d="M289.6384 640H614.4a307.2 307.2 0 1 0 0-614.4H204.8a51.2 51.2 0 0 0 0 102.4h409.6a204.8 204.8 0 1 1 0 409.6H286.0032l59.2384-59.2384A51.2 51.2 0 1 0 272.7936 406.016L128 550.7584a51.2 51.2 0 0 0 0 72.448L272.7936 768a51.2 51.2 0 0 0 72.448-72.3968L289.6384 640z"  horiz-adv-x="1024" />
+    <glyph glyph-name="zhongzuo" unicode="&#59123;" d="M737.9968 640l-55.6032 55.6032A51.2 51.2 0 1 0 754.8416 768l144.7936-144.7936a51.2 51.2 0 0 0 0-72.448L754.8416 406.016a51.2 51.2 0 0 0-72.448 72.3968L741.632 537.6H409.6a204.8 204.8 0 1 1 0-409.6h409.6a51.2 51.2 0 0 0 0-102.4H409.6A307.2 307.2 0 1 0 409.6 640h328.3968z"  horiz-adv-x="1024" />
+    <glyph glyph-name="baocun" unicode="&#59076;" d="M127.99 768.01h768.02l0.164-767.649-768.149-0.336-0.035 767.985z m63.794-63.794l0.253-640.179 640.124-0.199V704.162l-640.377 0.054z m6.449 0M640.149 431.149V704.216h45.512v-318.579H321.575V704.216h45.508v-273.067zM640.149 704.216h63.988v-320.343H320.062V704.216h64.013v-256.425h256.049zM512.099 704.216h64.012v-128.212h-64.012z"  horiz-adv-x="1024" />
+  </font>
+</defs></svg>
--- a/src/assets/icon/iconfont.ttf
+++ b/src/assets/icon/iconfont.ttf
--- a/src/assets/icon/iconfont.woff
+++ b/src/assets/icon/iconfont.woff
--- a/src/assets/icon/iconfont.woff2
+++ b/src/assets/icon/iconfont.woff2
--- a/src/assets/img/.DS_Store
+++ b/src/assets/img/.DS_Store
--- a/src/assets/img/17615.jpg
+++ b/src/assets/img/17615.jpg
--- a/src/assets/img/bglogo.jpeg
+++ b/src/assets/img/bglogo.jpeg
--- a/src/assets/img/jingbao_blue.png
+++ b/src/assets/img/jingbao_blue.png
--- a/src/assets/img/jingbao_red.png
+++ b/src/assets/img/jingbao_red.png
--- a/src/assets/img/map-marker-2-32.png
+++ b/src/assets/img/map-marker-2-32.png
--- a/src/assets/img/map-marker_blue.png
+++ b/src/assets/img/map-marker_blue.png
--- a/src/assets/img/map-marker_gold.png
+++ b/src/assets/img/map-marker_gold.png
--- a/src/assets/img/map-marker_orange.png
+++ b/src/assets/img/map-marker_orange.png
--- a/src/assets/img/map-marker_red.png
+++ b/src/assets/img/map-marker_red.png
--- a/src/assets/img/map-marker_yellow.png
+++ b/src/assets/img/map-marker_yellow.png
--- a/src/assets/img/marker_red_sprite.png
+++ b/src/assets/img/marker_red_sprite.png
--- a/src/assets/img/qidian.png
+++ b/src/assets/img/qidian.png
--- a/src/assets/img/regist.jpeg
+++ b/src/assets/img/regist.jpeg
--- a/src/assets/img/un_map_spot3.png
+++ b/src/assets/img/un_map_spot3.png
--- a/src/assets/img/zhongdian.png
+++ b/src/assets/img/zhongdian.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/logo_new.png
+++ b/src/assets/logo_new.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest" target="_blank" rel="noopener">unit-jest</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String,
+  },
+};
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
--- a/src/config.js
+++ b/src/config.js
+const address = 'http://152.136.233.116:8083/roadlinks/getCapitalImg?imgName=';
+// const address = 'http://vmax.corp.roadlinks.cn:8088/roadlinks/';
+// const address = 'http://127.0.0.1:8088/roadlinks/';
+// const address = 'http://193.112.197.170:8080/roadlinks/';
+// const address = 'http://172.16.40.196:29980/roadlinks/';
+export default address;
--- a/src/excel/Blob.js
+++ b/src/excel/Blob.js
+/* eslint-disable */
+/* Blob.js
+ * A Blob implementation.
+ * 2014-05-27
+ *
+ * By Eli Grey, http://eligrey.com
+ * By Devin Samarin, https://github.com/eboyjr
+ * License: X11/MIT
+ *   See LICENSE.md
+ */
+/*global self, unescape */
+/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
+ plusplus: true */
+/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
+(function (view) {
+    "use strict";
+    view.URL = view.URL || view.webkitURL;
+    if (view.Blob && view.URL) {
+        try {
+            new Blob;
+            return;
+        } catch (e) {}
+    }
+    // Internally we use a BlobBuilder implementation to base Blob off of
+    // in order to support older browsers that only have BlobBuilder
+    var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
+            var
+                get_class = function(object) {
+                    return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
+                }
+                , FakeBlobBuilder = function BlobBuilder() {
+                    this.data = [];
+                }
+                , FakeBlob = function Blob(data, type, encoding) {
+                    this.data = data;
+                    this.size = data.length;
+                    this.type = type;
+                    this.encoding = encoding;
+                }
+                , FBB_proto = FakeBlobBuilder.prototype
+                , FB_proto = FakeBlob.prototype
+                , FileReaderSync = view.FileReaderSync
+                , FileException = function(type) {
+                    this.code = this[this.name = type];
+                }
+                , file_ex_codes = (
+                    "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+                    + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
+                ).split(" ")
+                , file_ex_code = file_ex_codes.length
+                , real_URL = view.URL || view.webkitURL || view
+                , real_create_object_URL = real_URL.createObjectURL
+                , real_revoke_object_URL = real_URL.revokeObjectURL
+                , URL = real_URL
+                , btoa = view.btoa
+                , atob = view.atob
+                , ArrayBuffer = view.ArrayBuffer
+                , Uint8Array = view.Uint8Array
+                ;
+            FakeBlob.fake = FB_proto.fake = true;
+            while (file_ex_code--) {
+                FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
+            }
+            if (!real_URL.createObjectURL) {
+                URL = view.URL = {};
+            }
+            URL.createObjectURL = function(blob) {
+                var
+                    type = blob.type
+                    , data_URI_header
+                    ;
+                if (type === null) {
+                    type = "application/octet-stream";
+                }
+                if (blob instanceof FakeBlob) {
+                    data_URI_header = "data:" + type;
+                    if (blob.encoding === "base64") {
+                        return data_URI_header + ";base64," + blob.data;
+                    } else if (blob.encoding === "URI") {
+                        return data_URI_header + "," + decodeURIComponent(blob.data);
+                    } if (btoa) {
+                        return data_URI_header + ";base64," + btoa(blob.data);
+                    } else {
+                        return data_URI_header + "," + encodeURIComponent(blob.data);
+                    }
+                } else if (real_create_object_URL) {
+                    return real_create_object_URL.call(real_URL, blob);
+                }
+            };
+            URL.revokeObjectURL = function(object_URL) {
+                if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
+                    real_revoke_object_URL.call(real_URL, object_URL);
+                }
+            };
+            FBB_proto.append = function(data/*, endings*/) {
+                var bb = this.data;
+                // decode data to a binary string
+                if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
+                    var
+                        str = ""
+                        , buf = new Uint8Array(data)
+                        , i = 0
+                        , buf_len = buf.length
+                        ;
+                    for (; i < buf_len; i++) {
+                        str += String.fromCharCode(buf[i]);
+                    }
+                    bb.push(str);
+                } else if (get_class(data) === "Blob" || get_class(data) === "File") {
+                    if (FileReaderSync) {
+                        var fr = new FileReaderSync;
+                        bb.push(fr.readAsBinaryString(data));
+                    } else {
+                        // async FileReader won't work as BlobBuilder is sync
+                        throw new FileException("NOT_READABLE_ERR");
+                    }
+                } else if (data instanceof FakeBlob) {
+                    if (data.encoding === "base64" && atob) {
+                        bb.push(atob(data.data));
+                    } else if (data.encoding === "URI") {
+                        bb.push(decodeURIComponent(data.data));
+                    } else if (data.encoding === "raw") {
+                        bb.push(data.data);
+                    }
+                } else {
+                    if (typeof data !== "string") {
+                        data += ""; // convert unsupported types to strings
+                    }
+                    // decode UTF-16 to binary string
+                    bb.push(unescape(encodeURIComponent(data)));
+                }
+            };
+            FBB_proto.getBlob = function(type) {
+                if (!arguments.length) {
+                    type = null;
+                }
+                return new FakeBlob(this.data.join(""), type, "raw");
+            };
+            FBB_proto.toString = function() {
+                return "[object BlobBuilder]";
+            };
+            FB_proto.slice = function(start, end, type) {
+                var args = arguments.length;
+                if (args < 3) {
+                    type = null;
+                }
+                return new FakeBlob(
+                    this.data.slice(start, args > 1 ? end : this.data.length)
+                    , type
+                    , this.encoding
+                );
+            };
+            FB_proto.toString = function() {
+                return "[object Blob]";
+            };
+            FB_proto.close = function() {
+                this.size = this.data.length = 0;
+            };
+            return FakeBlobBuilder;
+        }(view));
+    view.Blob = function Blob(blobParts, options) {
+        var type = options ? (options.type || "") : "";
+        var builder = new BlobBuilder();
+        if (blobParts) {
+            for (var i = 0, len = blobParts.length; i < len; i++) {
+                builder.append(blobParts[i]);
+            }
+        }
+        return builder.getBlob(type);
+    };
+}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
--- a/src/excel/Export2Excel.js
+++ b/src/excel/Export2Excel.js
+/* eslint-disable */
+require('script-loader!file-saver');
+require('./Blob');
+require('script-loader!xlsx/dist/xlsx.core.min');
+function generateArray(table) {
+    var out = [];
+    var rows = table.querySelectorAll('tr');
+    var ranges = [];
+    for (var R = 0; R < rows.length; ++R) {
+        var outRow = [];
+        var row = rows[R];
+        var columns = row.querySelectorAll('td');
+        for (var C = 0; C < columns.length; ++C) {
+            var cell = columns[C];
+            var colspan = cell.getAttribute('colspan');
+            var rowspan = cell.getAttribute('rowspan');
+            var cellValue = cell.innerText;
+            if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
+            //Skip ranges
+            ranges.forEach(function (range) {
+                if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
+                    for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+                }
+            });
+            //Handle Row Span
+            if (rowspan || colspan) {
+                rowspan = rowspan || 1;
+                colspan = colspan || 1;
+                ranges.push({s: {r: R, c: outRow.length}, e: {r: R + rowspan - 1, c: outRow.length + colspan - 1}});
+            }
+            ;
+            //Handle Value
+            outRow.push(cellValue !== "" ? cellValue : null);
+            //Handle Colspan
+            if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+        }
+        out.push(outRow);
+    }
+    return [out, ranges];
+};
+function datenum(v, date1904) {
+    if (date1904) v += 1462;
+    var epoch = Date.parse(v);
+    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+}
+function sheet_from_array_of_arrays(data, opts) {
+    var ws = {};
+    var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};
+    for (var R = 0; R != data.length; ++R) {
+        for (var C = 0; C != data[R].length; ++C) {
+            if (range.s.r > R) range.s.r = R;
+            if (range.s.c > C) range.s.c = C;
+            if (range.e.r < R) range.e.r = R;
+            if (range.e.c < C) range.e.c = C;
+            var cell = {v: data[R][C]};
+            if (cell.v == null) continue;
+            var cell_ref = XLSX.utils.encode_cell({c: C, r: R});
+            if (typeof cell.v === 'number') cell.t = 'n';
+            else if (typeof cell.v === 'boolean') cell.t = 'b';
+            else if (cell.v instanceof Date) {
+                cell.t = 'n';
+                cell.z = XLSX.SSF._table[14];
+                cell.v = datenum(cell.v);
+            }
+            else cell.t = 's';
+            ws[cell_ref] = cell;
+        }
+    }
+    if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+    return ws;
+}
+function Workbook() {
+    if (!(this instanceof Workbook)) return new Workbook();
+    this.SheetNames = [];
+    this.Sheets = {};
+}
+function s2ab(s) {
+    var buf = new ArrayBuffer(s.length);
+    var view = new Uint8Array(buf);
+    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+    return buf;
+}
+export function export_table_to_excel(id) {
+    var theTable = document.getElementById(id);
+    console.log('a')
+    var oo = generateArray(theTable);
+    var ranges = oo[1];
+    /* original data */
+    var data = oo[0];
+    var ws_name = "SheetJS";
+    console.log(data);
+    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
+    /* add ranges to worksheet */
+    // ws['!cols'] = ['apple', 'banan'];
+    ws['!merges'] = ranges;
+    /* add worksheet to workbook */
+    wb.SheetNames.push(ws_name);
+    wb.Sheets[ws_name] = ws;
+    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
+    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
+}
+function formatJson(jsonData) {
+    console.log(jsonData)
+}
+export function export_json_to_excel(th, jsonData, defaultTitle) {
+    /* original data */
+    var data = jsonData;
+    data.unshift(th);
+    var ws_name = "SheetJS";
+    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
+    /* add worksheet to workbook */
+    wb.SheetNames.push(ws_name);
+    wb.Sheets[ws_name] = ws;
+    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
+    var title = defaultTitle || '列表'
+    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
+}
--- a/src/main.js
+++ b/src/main.js
+import Vue from 'vue';
+import './assets/css/reset.css';
+import Cookies from 'js-cookie';
+import ElementUI from 'element-ui';
+import BaiduMap from 'vue-baidu-map';
+import 'element-ui/lib/theme-chalk/index.css';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+Vue.use(ElementUI);
+Vue.use(BaiduMap, {
+  ak: 'AZzMTSKLP4lVHphRauTBdINZUFnpWTcu',
+});
+Vue.config.productionTip = false;
+router.beforeEach((to, from, next) => {
+  window.scrollTo(0,0);
+  if (to.matched.some(record => record.meta.requireAuth)) {
+    // 判断该路由是否需要登录权限
+    if (Cookies.get('id')) { // 判断当前的token是否存在
+      next();
+    } else {
+      // next();
+      next({
+        path: '/login',
+        query: { redirect: to.fullPath },
+        // 将跳转的路由path作为参数，登录成功后跳转到该路由
+      });
+    }
+  } else {
+    next();
+  }
+});
+router.afterEach((to,from,next) => {
+  window.scrollTo(0,0);
+});
+new Vue({
+  router,
+  store,
+  render: h => h(App),
+}).$mount('#app');
--- a/src/router.js
+++ b/src/router.js
+import Vue from 'vue';
+import Router from 'vue-router';
+import Home from './views/Home.vue';
+import Overview from './views/Overview.vue';
+import Detail from './views/Detail.vue';
+import Task from './views/Task.vue';
+import Result from './views/Result.vue';
+import ResultDetail from './views/ResultDetail.vue';
+Vue.use(Router);
+export default new Router({
+  mode: 'history',
+ // base: process.env.BASE_URL,
+  scrollBehavior (to, from, savedPosition) {
+    return { x: 0, y: 0 }
+   },
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home,
+      meta: {
+        requireAuth: true,
+      },
+      children: [{
+        path: '/overview',
+        ame: 'overview',
+        component: Overview,
+      }, {
+        path: '/detail',
+        name: 'detail',
+        component: Detail,
+      }, {
+        path: '/task',
+        name: 'task',
+        component: Task,
+      }, {
+        path: '/result',
+        name: 'result',
+        component: Result,
+      },
+      {
+        path: '/resultDetail',
+        name: 'resultDetail',
+        component: ResultDetail,
+      }
+      ],
+    },
+    // 注册页面
+    {
+      path: '/registered',
+      name: 'registered',
+      component: () => import(/* webpackChunkName: "about" */ './views/Registered.vue'),
+    },
+    // 登录页面
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import(/* webpackChunkName: "about" */ './views/Login.vue'),
+    },
+  ],
+});
--- a/src/store.js
+++ b/src/store.js
+import Vue from 'vue';
+import Vuex from 'vuex';
+Vue.use(Vuex);
+export default new Vuex.Store({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+});
--- a/src/views/About.vue
+++ b/src/views/About.vue
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
--- a/src/views/Detail.vue
+++ b/src/views/Detail.vue
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
+<template>
+  <div class="home">
+    <el-container>
+  <el-aside width="200px">
+      <el-menu
+      :default-active="onRoutes"
+      active-text-color="#41afdd"
+      background-color="#323346"
+      class="el-menu-vertical-demo">
+      <div class="logo"><img src="../assets/logo_new.png" alt=""></div>
+      <el-submenu index="1">
+        <span slot="title" class="submenu_parent">道路资产管理</span>
+        <el-menu-item index="1-1" @click="goTo('/overview')" style="background:#252639 !important">
+          <span slot="title" style="font-size: 16px">资产汇总</span>
+        </el-menu-item>
+        <el-menu-item index="1-2" @click="goTo('/detail')" style="background:#252639 !important">
+          <span slot="title" style="font-size: 16px">资产明细</span>
+        </el-menu-item>
+      </el-submenu>
+      <el-menu-item index="2" @click="goTo('/task')">
+        <span slot="title">巡检任务管理</span>
+      </el-menu-item>
+      <el-submenu index="3">
+        <span slot="title" class="submenu_parent">巡检结果管理</span>
+        <el-menu-item index="3-1" @click="goTo('/result')" style="background:#252639 !important">
+          <span slot="title" style="font-size: 16px">巡检结果查看</span>
+        </el-menu-item>
+        <el-menu-item index="3-2" @click="goTo('/resultDetail')" style="background:#252639 !important">
+          <span slot="title" style="font-size: 16px">巡检结果明细</span>
+        </el-menu-item>
+      </el-submenu>
+    </el-menu>
+  </el-aside>
+  <el-container>
+    <el-header>
+      <div class="header-title">安徽省道路综合巡检平台（测试）</div>
+      <span>欢迎您，</span>
+      <span>{{user.name}}</span>
+      <el-button type="text" class="exitSys" @click="esc">退出</el-button>
+    </el-header>
+    <el-main ref="el-main">
+      <router-view/>
+    </el-main>
+  </el-container>
+</el-container>
+  </div>
+</template>
+<style lang="less" scoped>
+.logo{
+  line-height: 50px;
+}
+.exitSys{
+  color: black;
+  background: 0 0;
+  padding-left: 0;
+  padding-right: 0;
+  font-size: 16px;
+}
+.el-container{
+  height: 100vh;
+}
+.el-header {
+    background-color: #f6f6f6;
+    color: #333;
+    text-align: right;
+    line-height: 60px;
+    .header-title{
+      font-size: 20px;
+      position: absolute;
+    }
+    span{
+      margin-right: 15px;
+      font-size: 16px;
+    }
+  }
+  .el-aside {
+    // background-color: #4ca29d;
+    color: #333;
+    text-align: center;
+    line-height: 200px;
+  }
+  .el-main {
+    // background-color: #E9EEF3;
+    color: #333;
+    width: calc(100vw - 200px);
+    // line-height: 160px;
+  }
+  body > .el-container {
+    margin-bottom: 40px;
+  }
+  .el-menu{
+    height: 100%;
+    padding-top: 40%;
+    box-sizing: border-box;
+  }
+.el-menu-item:focus, .el-menu-item:hover{
+  background-color: #151628;
+}
+.el-submenu__title:focus, .el-submenu__title:hover{
+  background-color: #151628 !important;
+}
+  .el-menu-item{
+    // color: black;
+    font-size:18px;
+  }
+  .el-menu-item.is-active[data-v-fae5bece] {
+    background-color: #151628 !important;
+  }
+  .el-submenu{
+    .submenu_parent{
+      color: #80a0b9;
+    }
+    span{
+      font-size:18px;
+    }
+  }
+  .el-menu-item.is-active {
+    background-color: #151628 !important;
+    span{
+      color: #41afdd !important;
+    }
+  }
+ .el-menu[data-v-fae5bece] {
+    background-color: #323346;
+  }
+  .el-menu-item * {
+    color: #80a0b9;
+  }
+  .el-submenu__title{
+    color:#80a0b9;
+  }
+  .el-menu.el-menu--inline{
+    background: #323346;
+  }
+</style>
+<script>
+// @ is an alias to /src
+// import HelloWorld from '@/components/HelloWorld.vue';
+import Cookies from 'js-cookie';
+export default {
+  name: 'home',
+  data() {
+    return {
+      myId: '',
+      user: {
+        name: '张三',
+      },
+    };
+  },
+  components: {
+    // HelloWorld,
+  },
+  created() {
+    const myId = Cookies.get('id');
+    this.myId = myId;
+    const username = Cookies.get('username');
+    // console.log(this.$route.params.username);
+    this.user.name = username;
+  },
+  mounted() {
+    if(this.$route.path.replace('/','') == ''){
+      this.goTo('/overview');
+    }
+  },
+  computed:{
+    onRoutes(){
+      // this.$route.path
+      // debugger
+      if(this.$route.path.replace('/','')=='overview'){
+          return '1-1'; 
+      }
+      else if(this.$route.path.replace('/','')=='detail'){
+          return '1-2'
+      }
+      else if(this.$route.path.replace('/','')=='task'){
+          return '2'
+      }
+      else if(this.$route.path.replace('/','')=='result'){
+          return '3-1'
+      }
+      else if(this.$route.path.replace('/','')=='resultDetail'){
+          return '3-2'
+      }
+      else{
+          return '1-1'; 
+      }
+    },
+  },
+  methods: {
+    // handleOpen(key, keyPath) {
+    // console.log(key, keyPath);
+    // },
+    // handleClose(key, keyPath) {
+    // console.log(key, keyPath);
+    // },
+     // 退出
+    esc() {
+      // alert(1);
+      Cookies.remove('id');
+      this.$router.push({
+        name: 'login',
+      });
+    },
+    goTo(path) {
+      this.$router.replace(path);
+    },
+  },
+};
+</script>
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
+<template>
+ <div id="nav">
+    <!-- status-icon:是否在输入框中显示校验结果反馈图标 -->
+    <div class="box">
+    <div class="information">
+      <h1 class="section-title" data-i18n-text="">登录</h1>
+   <el-form class="login-form"  status-icon :rules="loginRules"
+    ref="loginForm" :model="loginForm" label-width="0">
+    <el-form-item prop="username">
+      <el-input
+      @keyup.enter.native="handleLogin"
+      v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名">
+        <i slot="prefix" class="elxingmingyonghumingnicheng"></i>
+      </el-input>
+    </el-form-item>
+    <el-form-item prop="password">
+      <el-input
+      @keyup.enter.native="handleLogin"
+      :type="passwordType" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码">
+        <i class="el-icon-view el-input__icon"
+        :style="fontstyle" slot="suffix" @click="showPassword"></i>
+        <i slot="prefix" class="elmima"></i>
+      </el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary"
+      size="small" @click.native.prevent="handleLogin"
+      class="login-submit" name='login'>登录</el-button>
+    </el-form-item>
+  </el-form>
+  </div>
+    <div class="has-text-centered register">
+          <span @click="register">创建一个账户</span>
+        </div>
+  </div>
+</div>
+</template>
+<script>
+import axios from 'axios';
+import { Message } from 'element-ui';
+import { constants } from 'fs';
+import Cookies from 'js-cookie';
+import address from '../config.js';
+export default {
+  name: 'userlogin',
+  data() {
+    // 用户名自定义验证规则
+    return {
+      fontstyle: {
+      },
+      loginForm: {
+        username: '',
+        password: '',
+        verifycode: '',
+      },
+      checked: false,
+      identifyCodes: '1234567890',
+      identifyCode: '',
+      loginRules: { // 绑定在form表单中的验证规则
+        username: [
+          { required: true, message: '请输入用户名', trigger: 'blur' },
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+          { min: 6, message: '密码长度最少为6位', trigger: 'blur' },
+        ],
+      },
+      passwordType: 'password',
+    };
+  },
+  created() {
+  },
+  mounted() {
+    // 验证码初始化
+    // console.log(address);
+  },
+  computed: {
+  },
+  props: [],
+  methods: {
+    // 跳转到home页
+    goToHome(id, username) {
+      this.$router.push({
+        name: 'home',
+        params: {
+          id,
+          username,
+        },
+      });
+    },
+    // 创建用户
+    register() {
+      this.$router.push(
+        { path: '/registered' },
+      );
+    },
+    // 通过改变input的type使密码可见
+    showPassword() {
+      this.fontstyle === '' ? (this.fontstyle = 'color: red') : (this.fontstyle = ''); // 改变密码可见按钮颜色
+      this.passwordType === ''? (this.passwordType = 'password') : (this.passwordType = '');
+    },
+    // 点击登入按钮
+    handleLogin() {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          // 路由跳转到任务页面
+          axios.post('/roadlinks/login', {
+            username: this.loginForm.username,
+            password: this.loginForm.password,
+          })
+            .then((response) => {
+              if (response.data.code === 200) {
+                Cookies.set('id', response.data.data.id);
+                Cookies.set('username', this.loginForm.username);
+                Message({
+                  message: `登录${response.data.message}`,
+                  type: 'success',
+                  duration: '800',
+                });
+                setTimeout(() => {
+                  this.goToHome();
+                }, 1000);
+              } else {
+                Message({
+                  message: response.data.message,
+                  type: 'error',
+                });
+              }
+              console.log(response.data);
+            })
+            .catch((error) => {
+              console.log(error);
+            });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+// *{
+//   margin: 0;
+//   padding: 0;
+// }
+#nav{
+  width: 100%;
+  height: 100vh;
+  .box{
+      position: absolute;
+    left: 50%;
+    margin-left: -247px;
+    top: 45%;
+    transform: translateY(-50%);
+}
+}
+#nav{
+  background: url('../assets/img/bglogo.jpeg');
+  background-size: 100%;
+}
+.identifybox{
+  display: flex;
+  justify-content: space-between;
+  margin-top:7px;
+}
+.iconstyle{
+  color:#409EFF;
+}
+.information{
+  width: 470px;
+  display: block;
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 1;
+    padding: .75rem;
+    border-radius: 12px 12px 0 0;
+    background: #EEEEEE;
+}
+.section-title {
+    border-bottom: 1px solid #ccc;
+    font-size: 28px;
+    padding: 0 0 12px 0;
+    letter-spacing: 2px;
+    user-select: none;
+    color: #555;
+    text-align: center;
+    font-weight: normal;
+    margin: 12px;
+}
+.elxingmingyonghumingnicheng,.elmima{
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.login-form{
+ padding: 10px 40px 0 40px;
+ text-align: center;
+}
+.login-submit{
+    text-align: center;
+   padding: 12px 60px;
+      background-color: rgb(62, 107, 226);
+}
+.login-submit:hover{
+      background-color: rgb(62, 107, 226);
+}
+.register {
+    background: #fff;
+    font-size: 12px;
+    color: #000;
+    width: 470px;
+    padding: 0 12px;
+    height: 42px;
+    border-radius: 0 0 12px 12px;
+    text-align: center;
+    cursor: pointer;
+    span{
+          // display: block;
+    height: 42px;
+    line-height: 42px;
+    color: rgb(62, 107, 226);
+    }
+}
+</style>
--- a/src/views/Overview.vue
+++ b/src/views/Overview.vue
--- a/src/views/Registered.vue
+++ b/src/views/Registered.vue
+<template>
+  <div class="registered">
+    <div class="wrap">
+      <div class="has-text-centered signin">
+        <span>已有账户？</span> <i @click="goToLogin">登录</i>
+      </div>
+      <div class="formBody">
+        <h1 class="section-title" data-i18n-text="">创建用户</h1>
+    <el-form :model="ruleForm2"
+    status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
+        <el-form-item label="用户名" prop="user">
+    <el-input  v-model="ruleForm2.user"></el-input>
+  </el-form-item>
+  <el-form-item label="密码" prop="pass">
+    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
+  </el-form-item>
+  <el-form-item label="确认密码" prop="checkPass">
+    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
+  </el-form-item>
+  <el-form-item label="电子邮箱" prop="mailAddress">
+        <el-input placeholder="请填写邮箱地址" v-model="ruleForm2.mailAddress" @blur="sendEmail"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('ruleForm2')" class="newUser">创建用户</el-button>
+    <el-button @click="resetForm('ruleForm2')" class="reset">重置</el-button>
+  </el-form-item>
+</el-form>
+</div>
+</div>
+</div>
+</template>
+<script>
+import axios from 'axios';
+import { Message } from 'element-ui';
+import { setTimeout } from 'timers';
+import address from '../config.js';
+export default {
+  data() {
+    const validatePass = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入密码'));
+      } else {
+        if (this.ruleForm2.checkPass !== '') {
+          this.$refs.ruleForm2.validateField('checkPass');
+        }
+        callback();
+      }
+    };
+    const validatePass2 = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'));
+      } else if (value !== this.ruleForm2.pass) {
+        callback(new Error('两次输入密码不一致!'));
+      } else {
+        callback();
+      }
+    };
+    return {
+      ruleForm2: {
+        pass: '',
+        checkPass: '',
+        user: '',
+        mailAddress: '',
+      },
+      rules2: {
+        pass: [
+          { validator: validatePass, trigger: 'blur' },
+          { min: 6, message: '密码长度最少为6位', trigger: 'blur' },
+        ],
+        checkPass: [
+          { validator: validatePass2, trigger: 'blur' },
+          { min: 6, message: '密码长度最少为6位', trigger: 'blur' },
+        ],
+        user: [
+          { required: true, message: '请输入用户名', trigger: 'blur' },
+        ],
+        mailAddress: [
+          { required: true, message: '请填写电子邮箱', trigger: 'blur' },
+        ],
+      },
+    };
+  },
+  methods: {
+    sendEmail() {
+      var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
+      if (this.ruleForm2.mailAddress != '' && !regEmail.test(this.ruleForm2.mailAddress)) {
+          this.$message({
+              message: '邮箱格式不正确',
+              type: 'error'
+          })
+          this.ruleForm2.mailAddress = ''
+      }
+    },
+    // 创建用户
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.log(this.ruleForm2.user + this.ruleForm2.pass);
+          axios.post('/roadlinks/register', {
+            username: this.ruleForm2.user,
+            password: this.ruleForm2.pass,
+            email: this.ruleForm2.mailAddress,
+            status: 1,
+          })
+            .then((response) => {
+              if (response.data.code === 200) {
+                Message({
+                  message: response.data.data,
+                  type: 'success',
+                  duration: '500',
+                });
+                setTimeout(() => {
+                  this.goToLogin();
+                }, 1000);
+              } else {
+                Message({
+                  message: response.data.message,
+                  type: 'error',
+                });
+              }
+              console.log(response.data);
+            })
+            .catch((error) => {
+              console.log(error);
+            });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    // 重置
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    // 返回登录页面
+    goToLogin() {
+      this.$router.push(
+        { path: '/login' },
+      );
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.registered{
+  height: 100vh;
+  background: url('../assets/img/regist.jpeg');
+  background-size: 100% 100%;
+  .wrap{
+    width: 570px;
+        position: absolute;
+    left: 45%;
+    margin-left: -285px;
+    top: 50%;
+    transform: translateY(-50%);
+    .signin {
+    background: #fff;
+    height: 42px;
+    line-height: 42px;
+    font-size: 12px;
+    color: #555;
+    border-radius: 12px 12px 0 0;
+    i{
+      color: rgb(62, 107, 226);
+      cursor: pointer;
+    }
+}
+.has-text-centered {
+    text-align: center;
+}
+.formBody{
+  .section-title {
+    border-bottom: 1px solid #ccc;
+    font-size: 28px;
+    padding: 0 0 12px 0;
+    letter-spacing: 2px;
+    user-select: none;
+    color: #555;
+    text-align: center;
+    font-weight: normal;
+    margin: 12px;
+}
+  padding: 10px 40px 40px 40px;
+    background: #eee;
+    border-radius: 0 0 12px 12px;
+    .newUser{
+      padding: 12px 30px;
+    background-color: #3e6be2;
+    }
+    .reset{
+      padding: 12px 30px;
+    }
+}
+  }
+}
+</style>
--- a/src/views/Result.vue
+++ b/src/views/Result.vue
--- a/src/views/ResultDetail.vue
+++ b/src/views/ResultDetail.vue
--- a/src/views/Task.vue
+++ b/src/views/Task.vue
--- a/src/views/Video.vue
+++ b/src/views/Video.vue
+<template>
+  <div class="detail">
+    <div class="box">
+       <el-row class="warp">
+         <!-- 查询区 -->
+         <el-col :span="24" class="warp-breadcrum">
+            <!--搜索栏-->
+            <el-col :span="24" class="toolbar">
+              <el-form :inline="true" :model="filters">
+                <el-form :inline="true" :model="filters">
+                <el-form-item>
+                  <el-select
+                    v-model="filters.plateNo"
+                    multiple
+                    collapse-tags
+                    filterable
+                    placeholder="车牌号"
+                    >
+                    <el-option
+                      v-for="item in plateNoOptions"
+                      :key="item.code"
+                      :label="item.plateNo"
+                      :value="item.channelCode + '_' + item.code">
+                    </el-option>
+                  </el-select>
+                  <!-- <el-autocomplete
+                    v-model="filters.channelName"
+                    :fetch-suggestions="queryChannelSearchAsync"
+                    placeholder="渠道"
+                    @select="handleChannelSelect"
+                  ></el-autocomplete> -->
+                </el-form-item>
+                <el-form-item>
+                  <el-date-picker
+                    v-model="filters.dateTime"
+                    type="daterange"
+                    align="right"
+                    unlink-panels
+                    range-separator="至"
+                    start-placeholder="开始时间"
+                    end-placeholder="结束时间"
+                    :default-time="['00:00:00', '23:59:59']"
+                    value-format="yyyy-MM-dd HH:mm:ss"
+                    :picker-options="pickerOptions">
+                  </el-date-picker>
+                </el-form-item>
+                <!-- <el-form-item>
+                  <el-select v-model="filters.type" placeholder="车辆类型">
+                    <el-option v-for="item in typeData" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-select v-model="filters.status" placeholder="启用状态">
+                    <el-option v-for="item in statusData" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                  </el-select>
+                </el-form-item> -->
+                <el-form-item>
+                  <el-button type="primary" @click="queryVideos">搜索</el-button>
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-col>
+        <div class="overview-line">X年X月X日, 巡检车在X公路上共停车X次。</div>
+       <!-- 任务表 -->
+      <div class="detail-table">
+ <el-table
+    :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
+    style="width: 100%;"
+    border=true
+    highlight-current-row=true
+    >
+    <el-table-column
+      label="序号"
+      prop="no">
+    </el-table-column>
+    <el-table-column
+      label="车牌号"
+      prop="plateNo">
+    </el-table-column>
+    <el-table-column
+      label="起始时间"
+      prop="startTime">
+    </el-table-column>
+     <el-table-column
+      label="结束时间"
+      prop="endTime">
+    </el-table-column>
+    <el-table-column
+      label="巡检时长"
+      prop="inspectTime">
+    </el-table-column>
+    <el-table-column
+      label="停车地点"
+      prop="stopPoint">
+    </el-table-column>
+    <el-table-column fixed="right" label="视频列表" width="100">
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="playVideo(scope.$index, scope.row)">播放</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[5, 10, 20, 40]" 
+        :page-size="pagesize"        
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="tableData.length">  
+  </el-pagination>
+      </div>
+      <!-- 任务统计 -->
+      <!-- <div class="task-echarts">
+        <h3>任务统计</h3>
+        <div class="echarts-box" id="echarts-box"></div>
+      </div> -->
+       </el-row>
+    </div>
+  </div>
+</template>
+<style lang="less" scope>
+.detail{
+  .box{
+    .el-pagination{
+      padding: 15px;
+    }
+  }
+}
+</style>
+<script>
+import axios from 'axios';
+import { Message } from 'element-ui';
+import echarts from 'echarts';
+import moment from 'moment';
+import address from '../config';
+export default {
+  name: 'detail',
+  data() {
+    return {
+      tableData: [
+      ],
+      filters: {
+        plateNo: '',
+        dateTime: [],
+      },
+      plateNoOptions: [],
+      showCol: false,
+      currentPage:1, //初始页
+      pagesize:10, //每页的数据
+      loading: false,
+      no: 0,
+      capitalOptions: [
+      ],
+      currentdate: '',
+    };
+  },
+  mounted() {
+  },
+  created() {
+    this.queryAllEquipment();
+    this.queryVideos();
+  },
+  methods: {
+    queryAllEquipment() {
+      axios.post(`/roadlinks/queryAllEquipment`, {
+      }).then((response) => {
+        if (response.data.code === 200) {
+          if (response.data.data) {
+            this.plateNoOptions = [];
+            response.data.data.forEach((item) => {
+              this.plateNoOptions.push(item);
+            });
+          }
+        } else {
+          Message({
+            message: response.data.message,
+            // type: 'error',
+            // duration: '800',
+          });
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    queryVideos() {
+      if(this.filters.dateTime.length == 0){
+        this.filters.dateTime[0] = moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format("YYYY-MM-DD") + ' 00:00:00';
+        this.filters.dateTime[1] = moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format("YYYY-MM-DD") + ' 23:59:59';
+      }
+      let equipmentCode = "";
+      if(this.filters.plateNo && this.filters.plateNo.length > 0){
+        this.filters.plateNo.forEach((item) => {
+          if(equipmentCode == ""){
+            equipmentCode += item;
+          }else{
+            equipmentCode += "," + item;
+          }
+        });
+      }
+      axios.post(`/roadlinks/queryVideos`, {
+        startTime: this.filters.dateTime[0],
+        endTime: this.filters.dateTime[1],
+        equipment: equipmentCode
+      }).then((response) => {
+        if (response.data.code === 200) {
+          if (response.data.data) {
+          }
+        } else {
+          Message({
+            message: response.data.message,
+            // type: 'error',
+            // duration: '800',
+          });
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    playVideo(index, row) {
+    }
+  },
+};
+</script>
--- a/tests/unit/.eslintrc.js
+++ b/tests/unit/.eslintrc.js
+module.exports = {
+  env: {
+    jest: true,
+  },
+};
--- a/tests/unit/example.spec.js
+++ b/tests/unit/example.spec.js
+import { shallowMount } from '@vue/test-utils';
+import HelloWorld from '@/components/HelloWorld.vue';
+describe('HelloWorld.vue', () => {
+  it('renders props.msg when passed', () => {
+    const msg = 'new message';
+    const wrapper = shallowMount(HelloWorld, {
+      propsData: { msg },
+    });
+    expect(wrapper.text()).toMatch(msg);
+  });
+});