git 库重建

.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"],
+  "env": {
+    "development":{
+      "plugins": ["dynamic-import-node"]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,3 @@
+build/*.js
+config/*.js
+src/assets

.eslintrc.js

@@ -0,0 +1,199 @@
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: 'eslint:recommended',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // check if imports actually resolve
+  'settings': {
+    'import/resolver': {
+      'webpack': {
+        'config': 'build/webpack.base.conf.js'
+      }
+    }
+  },
+  // add your custom rules here
+  //it is base on https://github.com/vuejs/eslint-config-vue
+  'rules': {
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [0, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': [2, 'allow-null'],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [2, 2, {
+      'SwitchCase': 1
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [2, {
+      'vars': 'all',
+      'args': 'none'
+    }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [2, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [2, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
+  }
+}
+

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.svn
+dist
+.git
+/.idea

.postcssrc.js

@@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js: stable
+script: npm run test
+notifications:
+  email: false

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-present PanJiaChen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,185 @@
+<p align="center">
+  <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
+</p>
+
+<p align="center">
+  <a href="https://github.com/vuejs/vue">
+    <img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
+  </a>
+  <a href="https://github.com/ElemeFE/element">
+    <img src="https://img.shields.io/badge/element--ui-2.3.2-brightgreen.svg" alt="element-ui">
+  </a>
+  <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
+    <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
+  </a>
+  <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
+    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
+  </a>
+  <a href="https://github.com/PanJiaChen/vue-element-admin/releases">
+    <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
+  </a>
+</p>
+
+English | [简体中文](./README.zh-CN.md)
+
+## Introduction
+
+[vue-element-admin](http://panjiachen.github.io/vue-element-admin) is a front-end management background integration solution. It based on [vue](https://github.com/vuejs/vue) and use the UI Toolkit [element](https://github.com/ElemeFE/element).
+
+It is a magical vue admin based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. It helps you build a large complex Single-Page Applications. I believe whatever your needs are, this project will help you.
+
+- [Preview](http://panjiachen.github.io/vue-element-admin)
+
+- [Documentation](https://panjiachen.github.io/vue-element-admin-site/)
+
+- [Gitter](https://gitter.im/vue-element-admin/discuss)
+
+- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+
+- [Donate](https://panjiachen.github.io/vue-element-admin-site/donate/)
+
+- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
+
+**This project is positioned as a background integration solution and is not suitable for secondary development as a basic template.**
+
+ - Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
+ - Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+
+## Preparation
+
+You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](http://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock).
+ Understanding and learning this knowledge in advance will greatly help the use of this project.
+
+ **This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**
+
+ **Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+**
+
+ <p align="center">
+  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
+</p>
+
+## Features
+```
+- Login / Logout
+
+- Permission Authentication
+  - Page permission
+  - Directive permission
+  - Two-step login
+
+- Multi-environment build
+  - dev sit stage prod
+
+- Global Features
+  - I18n
+  - Multiple dynamic themes
+  - Dynamic sidebar (supports multi-level routing)
+  - Dynamic breadcrumb
+  - Tags-view(Tab page Support right-click operation)
+  - Svg Sprite
+  - Mock data
+  - Screenfull
+  - Responsive Sidebar
+
+- Editor
+  - Rich Text Editor
+  - Markdown Editor
+  - JSON Editor
+
+- Excel
+  - Export Excel
+  - Export zip
+  - Upload Excel
+  - Visualization Excel
+
+- Table
+  - Dynamic Table
+  - Drag And Drop Table
+  - Tree Table
+  - Inline Edit Table
+
+- Error Page
+  - 401
+  - 404
+
+- Components
+  - Avatar Upload
+  - Back To Top
+  - Drag Dialog
+  - Drag Kanban
+  - Drag List
+  - SplitPane
+  - Dropzone
+  - Sticky
+  - CountTo
+
+- Advanced Example
+- Error Log
+- Dashboard
+- Guide Page
+- Echarts
+- Clipboard
+- Markdown to html
+```
+
+## Getting started
+
+```bash
+# clone the project
+git clone https://github.com/PanJiaChen/vue-element-admin.git
+
+# install dependency
+npm install
+
+# develop
+npm run dev
+```
+
+This will automatically open http://localhost:9527.
+
+## Build
+```bash
+# build for test environment
+npm run build:sit
+
+# build for production environment
+npm run build:prod
+```
+
+## Advanced
+```bash
+# --report to build with bundle size analytics
+npm run build:prod --report
+
+# --preview to start a server in local to preview
+npm run build:prod --preview
+
+# lint code
+npm run lint
+
+# auto fix
+npm run lint -- --fix
+```
+
+Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information
+
+## Changelog
+Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
+
+## Online Demo
+[Preview](http://panjiachen.github.io/vue-element-admin)
+
+## Donate
+If you find this project useful, you can buy author a glass of juice :tropical_drink:
+
+![donate](https://wpimg.wallstcn.com/bd273f0d-83a0-4ef2-92e1-9ac8ed3746b9.png)
+
+[Paypal Me](https://www.paypal.me/panfree23)
+
+[Buy me a coffee](https://www.buymeacoffee.com/Pan)
+
+## License
+
+[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
+
+Copyright (c) 2017-present PanJiaChen

README.zh-CN.md

@@ -0,0 +1,195 @@
+<p align="center">
+  <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
+</p>
+
+<p align="center">
+  <a href="https://github.com/vuejs/vue">
+    <img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
+  </a>
+  <a href="https://github.com/ElemeFE/element">
+    <img src="https://img.shields.io/badge/element--ui-2.3.2-brightgreen.svg" alt="element-ui">
+  </a>
+  <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
+    <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
+  </a>
+  <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
+    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
+  </a>
+  <a href="https://github.com/PanJiaChen/vue-element-admin/releases">
+    <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
+  </a>
+</p>
+
+简体中文 | [English](./README.md)
+
+## 简介
+
+[vue-element-admin](http://panjiachen.github.io/vue-element-admin) 是一个后台集成解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
+
+- [在线访问](http://panjiachen.github.io/vue-element-admin)
+
+- [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
+
+- [Gitter讨论组](https://gitter.im/vue-element-admin/discuss)
+
+- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+
+- [Donate](https://panjiachen.github.io/vue-element-admin-site/zh/donate/)
+
+- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
+
+**本项目的定位是后台集成方案，不适合当基础模板来开发。**
+ - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
+ - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+
+## 前序准备
+
+你需要在本地安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。本项目技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。
+
+同时配套一个系列的教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目
+ - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
+ - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
+ - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
+ - [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
+ - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
+ - [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
+ - [手摸手，带你用合理的姿势使用webpack4（上）](https://juejin.im/post/5b56909a518825195f499806)
+ - [手摸手，带你用合理的姿势使用webpack4（下）](https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc)
+
+ 或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西
+
+ **如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**
+
+ **本项目并不是一个脚手架，更倾向于是一个集成解决方案**
+
+ **注意：该项目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+**
+
+ **该项目不支持低版本浏览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
+
+ <p align="center">
+  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
+</p>
+
+## 功能
+```
+- 登录 / 注销
+
+- 权限验证
+  - 页面权限
+  - 指令权限
+  - 二步登录
+
+- 多环境发布
+  - dev sit stage prod
+
+- 全局功能
+  - 国际化多语言
+  - 多种动态换肤
+  - 动态侧边栏（支持多级路由嵌套）
+  - 动态面包屑
+  - 快捷导航(标签页)
+  - Svg Sprite 图标
+  - 本地mock数据
+  - Screenfull全屏
+  - 自适应收缩侧边栏
+
+- 编辑器
+  - 富文本
+  - Markdown
+  - JSON 等多格式
+
+- Excel
+  - 导出excel
+  - 导出zip
+  - 导入excel
+  - 前端可视化excel
+
+- 表格
+  - 动态表格
+  - 拖拽表格
+  - 树形表格
+  - 内联编辑
+
+- 错误页面
+  - 401
+  - 404
+
+- 組件
+  - 头像上传
+  - 返回顶部
+  - 拖拽Dialog
+  - 拖拽看板
+  - 列表拖拽
+  - SplitPane
+  - Dropzone
+  - Sticky
+  - CountTo
+
+- 综合实例
+- 错误日志
+- Dashboard
+- 引导页
+- Echarts 图表
+- Clipboard(剪贴复制)
+- Markdown2html
+```
+
+## 开发
+```bash
+# 克隆项目
+git clone https://github.com/PanJiaChen/vue-element-admin.git
+
+# 安装依赖
+npm install
+   
+# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
+npm install --registry=https://registry.npm.taobao.org
+
+# 启动服务
+npm run dev
+```
+浏览器访问 http://localhost:9527
+
+## 发布
+```bash
+# 构建测试环境
+npm run build:sit
+
+# 构建生产环境
+npm run build:prod
+```
+
+## 其它
+```bash
+# --report to build with bundle size analytics
+npm run build:prod --report
+
+# --preview to start a server in local to preview
+npm run build:prod --preview
+
+# lint code
+npm run lint
+
+# auto fix
+npm run lint -- --fix
+```
+
+更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
+
+## Changelog
+Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
+
+## Online Demo
+[在线 Demo](http://panjiachen.github.io/vue-element-admin)
+
+## Donate
+如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 :tropical_drink:
+![donate](https://panjiachen.github.io/donate/donation.png)
+
+[Paypal Me](https://www.paypal.me/panfree23)
+
+## License
+
+[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
+
+Copyright (c) 2017-present PanJiaChen

build/build.js

@@ -0,0 +1,56 @@
+'use strict'
+require('./check-versions')()
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+var connect = require('connect');
+var serveStatic = require('serve-static')
+
+const spinner = ora('building for ' + process.env.env_config + ' environment...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red(' Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan(' Build complete.\n'))
+    console.log(chalk.yellow(
+      ' Tip: built files are meant to be served over an HTTP server.\n' +
+      ' Opening index.html over file:// won\'t work.\n'
+    ))
+
+    if (process.env.npm_config_preview) {
+      const port = 9526
+      const host = "http://localhost:" + port
+      const basePath = config.build.assetsPublicPath
+      const app = connect()
+
+      app.use(basePath, serveStatic('./dist', {
+        'index': ['index.html', '/']
+      }))
+
+      app.listen(port, function () {
+        console.log(chalk.green(`> Listening at  http://localhost:${port}${basePath}`))
+      });
+    }
+  })
+})

build/check-versions.js

@@ -0,0 +1,54 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+// if (shell.which('npm')) {
+//   versionRequirements.push({
+//     name: 'npm',
+//     currentVersion: exec('npm --version'),
+//     versionRequirement: packageConfig.engines.npm
+//   })
+// }
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}

build/utils.js

@@ -0,0 +1,110 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass').concat(
+      {
+        loader: 'sass-resources-loader',
+        options: {
+          resources: path.resolve(__dirname, '../src/styles/variables.scss')//这里按照你的文件路径填写
+        }
+      }
+    ),
+    // scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

build/vue-loader.conf.js

@@ -0,0 +1,22 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

build/webpack.base.conf.js

@@ -0,0 +1,105 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+// const createLintingRule = () => ({
+//   test: /\.(js|vue)$/,
+//   loader: 'eslint-loader',
+//   enforce: 'pre',
+//   include: [resolve('src'), resolve('test')],
+//   options: {
+//     formatter: require('eslint-friendly-formatter'),
+//     emitWarning: !config.dev.showEslintErrorsInOverlay
+//   }
+// })
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      ...(config.dev.useEslint ? [] : []),
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader?cacheDirectory',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test: /\.svg$/,
+        loader: 'svg-sprite-loader',
+        include: [resolve('src/icons')],
+        options: {
+          symbolId: 'icon-[name]'
+        }
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        exclude: [resolve('src/icons')],
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.sass$/,
+        loaders: ['style', 'css', 'sass']
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}

build/webpack.dev.conf.js

@@ -0,0 +1,88 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: true,
+    hot: true,
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true,
+      favicon: resolve('favicon.ico'),
+      title: '血透系统',
+      path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
+    }),
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})

build/webpack.prod.conf.js

@@ -0,0 +1,175 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+const env = require('../config/'+process.env.env_config+'.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: false,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      favicon: resolve('favicon.ico'),
+      title: 'vue-element-admin',
+      path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vender modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+    // split echarts into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      async: 'echarts',
+      minChunks(module) {
+        var context = module.context;
+        return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0);
+      }
+    }),
+    // split xlsx into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      async: 'xlsx',
+      minChunks(module) {
+        var context = module.context;
+        return context && (context.indexOf('xlsx') >= 0);
+      }
+    }),
+     // split codemirror into its own file
+     new webpack.optimize.CommonsChunkPlugin({
+      async: 'codemirror',
+      minChunks(module) {
+        var context = module.context;
+        return context && (context.indexOf('codemirror') >= 0);
+      }
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

config/dev.env.js

@@ -0,0 +1,6 @@
+module.exports = {
+  NODE_ENV: '"development"',
+  ENV_CONFIG: '"dev"',
+  BASE_API: '"http://api.test1.sgjyun.com"', // // http://localhost:8090
+}
+

config/index.js

@@ -0,0 +1,96 @@
+'use strict'
+// Template version: 1.2.6
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+
+    // can be overwritten by process.env.HOST
+    // if you want dev by ip, please set host: '0.0.0.0'
+
+    // host: 'test1.sgjyun.com',
+    // host: 'jk.kuyicloud.com',
+    host: 'test1.sgjyun.com',
+    port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: true,
+    errorOverlay: true,
+    notifyOnErrors: false,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: false,
+
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: '#cheap-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,
+
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false,
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+
+    /**
+     * You can set by youself according to actual condition
+     * You will need to set this if you plan to deploy your site under a sub path,
+     * for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
+     * then assetsPublicPath should be set to "/bar/".
+     * In most cases please use '/' !!!
+     */
+    // assetsPublicPath: '/vue-element-admin/', // If you are deployed on the root path, please use '/'
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+    productionSourceMap: false,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

config/prod.env.js

@@ -0,0 +1,5 @@
+module.exports = {
+  NODE_ENV: '"production"',
+  ENV_CONFIG: '"prod"',
+  BASE_API: '"http://api.scrm.kuyicloud.com"'
+}

config/sit.env.js

@@ -0,0 +1,5 @@
+module.exports = {
+  NODE_ENV: '"production"',
+  ENV_CONFIG: '"sit"',
+  BASE_API: '"http://api.test1.sgjyun.com"'
+}

index.html

@@ -0,0 +1,30 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="renderer" content="webkit">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <title>血透管理-酷医云</title>
+  </head>
+  <body>
+    <script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
+    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
+    <script src="<%= htmlWebpackPlugin.options.path %>/neditor/neditor.config.js"></script>
+    <script src="<%= htmlWebpackPlugin.options.path %>/neditor/neditor.all.min.js"></script>
+    <script src="<%= htmlWebpackPlugin.options.path %>/neditor/neditor.service.js"></script>
+    <script src="<%= htmlWebpackPlugin.options.path %>/neditor/i18n/zh-cn/zh-cn.js"></script>
+    <script src="<%= htmlWebpackPlugin.options.path %>/neditor/neditor.parse.min.js"></script>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
+
+
+
+
+
+
+
+>>>>>>> .theirs

package.json

@@ -0,0 +1,133 @@
+{
+  "name": "vue-element-admin",
+  "version": "3.7.3",
+  "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
+  "author": "Pan <panfree23@gmail.com>",
+  "license": "MIT",
+  "scripts": {
+    "dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
+    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js && npm run fixfont && npm run fiximg",
+    "lint": "eslint --ext .js,.vue src",
+    "test": "npm run lint",
+    "precommit": "lint-staged",
+    "build": "cross-env NODE_ENV=production env_config=sit node build/build.js && npm run fixfont && npm run fiximg",
+    "fixfont": "xcopy %cd%\\dist\\static\\fonts %cd%\\dist\\static\\css\\static\\fonts /s /y /d /e /i",
+    "fiximg": "xcopy %cd%\\dist\\static\\img %cd%\\dist\\static\\css\\static\\img /s /y /d /e /i"
+  },
+  "lint-staged": {
+    "src/**/*.{js,vue}": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "keywords": [
+    "vue",
+    "element-ui",
+    "admin",
+    "management-system",
+    "admin-template"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
+  },
+  "bugs": {
+    "url": "https://github.com/PanJiaChen/vue-element-admin/issues"
+  },
+  "dependencies": {
+    "ajv": "^6.5.3",
+    "axios": "0.17.1",
+    "clipboard": "1.7.1",
+    "codemirror": "5.32.0",
+    "connect": "3.6.6",
+    "driver.js": "0.5.2",
+    "dropzone": "5.2.0",
+    "echarts": "3.8.5",
+    "element-ui": "^2.7.2",
+    "file-saver": "1.3.3",
+    "font-awesome": "4.7.0",
+    "js-cookie": "2.2.0",
+    "jsonlint": "1.6.3",
+    "jszip": "3.1.5",
+    "mockjs": "1.0.1-beta3",
+    "normalize.css": "7.0.0",
+    "nprogress": "0.2.0",
+    "print-js": "^1.0.50",
+    "qrcodejs2": "0.0.2",
+    "screenfull": "4.2.0",
+    "serve-static": "1.13.2",
+    "showdown": "1.8.5",
+    "simplemde": "1.11.2",
+    "sortablejs": "1.7.0",
+    "vue": "2.5.16",
+    "vue-count-to": "1.0.13",
+    "vue-i18n": "7.3.2",
+    "vue-multiselect": "2.0.8",
+    "vue-router": "3.0.1",
+    "vue-splitpane": "1.0.2",
+    "vuedraggable": "^2.16.0",
+    "vuex": "3.0.1",
+    "xlsx": "^0.11.16"
+  },
+  "devDependencies": {
+    "autoprefixer": "7.2.3",
+    "babel-core": "6.26.0",
+    "babel-eslint": "8.0.3",
+    "babel-helper-vue-jsx-merge-props": "2.0.3",
+    "babel-loader": "7.1.2",
+    "babel-plugin-dynamic-import-node": "^1.2.0",
+    "babel-plugin-syntax-jsx": "6.18.0",
+    "babel-plugin-transform-runtime": "6.23.0",
+    "babel-plugin-transform-vue-jsx": "3.5.0",
+    "babel-preset-env": "1.6.1",
+    "babel-preset-stage-2": "6.24.1",
+    "chalk": "2.3.0",
+    "copy-webpack-plugin": "4.3.0",
+    "cross-env": "5.1.1",
+    "css-loader": "0.28.7",
+    "eslint": "4.13.1",
+    "eslint-friendly-formatter": "3.0.0",
+    "eslint-loader": "1.9.0",
+    "eslint-plugin-html": "4.0.1",
+    "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "1.1.5",
+    "friendly-errors-webpack-plugin": "1.6.1",
+    "html-webpack-plugin": "2.30.1",
+    "lint-staged": "7.2.0",
+    "node-notifier": "5.1.2",
+    "node-sass": "^4.7.2",
+    "optimize-css-assets-webpack-plugin": "3.2.0",
+    "ora": "1.3.0",
+    "portfinder": "1.0.13",
+    "postcss-import": "11.0.0",
+    "postcss-loader": "2.0.9",
+    "postcss-url": "7.3.0",
+    "rimraf": "2.6.2",
+    "sass-loader": "^6.0.7",
+    "sass-resources-loader": "^1.3.4",
+    "script-loader": "0.7.2",
+    "semver": "5.4.1",
+    "shelljs": "0.7.8",
+    "svg-sprite-loader": "3.5.2",
+    "uglifyjs-webpack-plugin": "1.1.3",
+    "url-loader": "0.6.2",
+    "vue-loader": "13.7.2",
+    "vue-quill-editor": "^3.0.6",
+    "vue-style-loader": "3.0.3",
+    "vue-template-compiler": "2.5.16",
+    "webpack": "3.10.0",
+    "webpack-bundle-analyzer": "2.9.1",
+    "webpack-dev-server": "2.9.7",
+    "webpack-merge": "4.1.1"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+  export default{
+    name: 'App'
+  }
+</script>

src/api/login/login.js

@@ -0,0 +1,38 @@
+import request from '@/utils/request'
+
+export function verifyToken(token) {
+  return request({
+    url: '/api/token/verify',
+    method: 'post',
+    params: {
+      'token': token
+    }
+  })
+}
+
+export function modifyAdminInfo(params) {
+  return request({
+    url: '/api/admin/edit_info',
+    method: 'post',
+    params: params,
+  })
+}
+
+export function getModifyPwdCode() {
+  return request({
+    url: '/api/password/code',
+    method: 'post',
+  })
+}
+
+export function modifyPassword(new_pwd, code) {
+  var params = {
+    password: new_pwd,
+    code: code,
+  }
+  return request({
+    url: '/api/password/modify',
+    method: 'post',
+    params: params,
+  })
+}

src/api/qiniu.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+export function getToken() {
+  return request({
+    url: '/api/qiniu/uptoken', // 假地址 自行替换
+    method: 'get'
+  })
+}

src/api/role/admin.js

@@ -0,0 +1,81 @@
+import request from '@/utils/request'
+
+export function adminMainView() {
+  return request({
+    url: '/api/adminmain',
+    method: 'get'
+  })
+}
+
+export function getAdmins(page) {
+  const params = {
+    page: page
+  }
+  return request({
+    url: '/api/admins',
+    method: 'get',
+    params: params
+  })
+}
+
+export function getAddAdminInitData() {
+  return request({
+    url: '/api/admin/addinit',
+    method: 'get'
+  })
+}
+
+export function addAdmin(mobile, name, type, title, role, intro) {
+  const params = {
+    mobile: mobile,
+    name: name,
+    type: type,
+    title: title,
+    role: role,
+    intro: intro
+  }
+  return request({
+    url: '/api/admin/add',
+    method: 'post',
+    params: params
+  })
+}
+
+export function getModifyAdminInitData(uid) {
+  const params = {
+    uid: uid
+  }
+  return request({
+    url: '/api/admin/editinit',
+    method: 'get',
+    params: params
+  })
+}
+
+export function modifyAdmin(uid, name, type, title, role, intro) {
+  const params = {
+    uid: uid,
+    name: name,
+    type: type,
+    title: title,
+    role: role,
+    intro: intro
+  }
+  return request({
+    url: '/api/admin/edit',
+    method: 'post',
+    params: params
+  })
+}
+
+export function setAdminStatus(uid, enable) {
+  const params = {
+    uid: uid,
+    enable: enable
+  }
+  return request({
+    url: '/api/admin/setstatus',
+    method: 'post',
+    params: params
+  })
+}

src/api/role/role.js

@@ -0,0 +1,72 @@
+import request from '@/utils/request'
+
+export function getRoles(page) {
+    const params = {
+        page: page,
+    }
+    return request({
+        url: '/api/roles',
+        method: 'get',
+        params: params,
+    })
+}
+
+export function addRole(name, intro) {
+    const params = {
+        name: name,
+        intro: intro
+    }
+    return request({
+        url: '/api/role/create',
+        method: 'post',
+        params: params,
+    })
+}
+
+export function modifyRole(role_id, name, intro) {
+    const params = {
+        role_id: role_id,
+        name: name,
+        intro: intro
+    }
+    return request({
+        url: '/api/role/modify',
+        method: 'post',
+        params: params,
+    })
+}
+
+export function setRoleStatus(role_id, enable) {
+    const params = {
+        role_id: role_id,
+        enable: enable,
+    }
+    return request({
+        url: '/api/role/setstatus',
+        method: 'post',
+        params: params,
+    })
+}
+
+export function getEditPurviewInitData(role_id) {
+    const params = {
+        role_id: role_id,
+    }
+    return request({
+        url: '/role/purview/editinit',
+        method: 'get',
+        params: params,
+    })
+}
+
+export function editPurview(role_id, purview_ids) {
+    const params = {
+        role_id: role_id,
+        purview_ids: purview_ids,
+    }
+    return request({
+        url: '/role/purview/edit',
+        method: 'post',
+        params: params,
+    })
+}

src/api/service.js

@@ -0,0 +1,84 @@
+import request from '@/utils/request'
+
+
+export function getServiceList(params){
+  return request({
+    url:'/api/my/service',
+    method:'get',
+    params:params
+  })
+}
+
+export function getProduct(params){
+  return request({
+    url:'/api/product',
+    method:'get',
+    params:params
+  })
+}
+
+
+export function postOrderInfo(params){
+  return request({
+    url:'/api/order',
+    method:'post',
+    params:params
+  })
+}
+
+
+export function getPayUrl(params){
+  return request({
+    url:'/api/pay',
+    method:'get',
+    params:params
+  })
+}
+
+export function getOrderInfo(params){
+  return request({
+    url:'/api/order/get',
+    method:'get',
+    params:params
+  })
+}
+
+export function postOrderPayType(params){
+  return request({
+    url:'/api/pay/transfer',
+    method:'post',
+    params:params
+  })
+}
+
+export function cancleOrder(params){
+  return request({
+    url:'/api/order/cancel',
+    method:'post',
+    params:params
+  })
+}
+
+export function getOrderList(params){
+  return request({
+    url:'/api/order/list',
+    method:'get',
+    params:params
+  })
+}
+
+
+export function getHetong(order_id){
+  return request({
+    url:'/api/order/hetong?order_id='+order_id,
+    method:'get',
+  })
+}
+
+export function createHetong(order_id, het){
+  return request({
+    url:'/api/order/hetong?order_id='+order_id,
+    method:'Post',
+    data:het,
+  })
+}

src/assets/echarts-macarons.js

@@ -0,0 +1,199 @@
+/* eslint-disable */
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+}(this, function (exports, echarts) {
+    var log = function (msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+
+    var colorPalette = [
+        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
+        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
+        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
+        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
+    ];
+
+
+    var theme = {
+        color: colorPalette,
+
+        title: {
+            textStyle: {
+                fontWeight: 'normal',
+                color: '#008acd'
+            }
+        },
+
+        visualMap: {
+            itemWidth: 15,
+            color: ['#5ab1ef','#e0ffff']
+        },
+
+        toolbox: {
+            iconStyle: {
+                normal: {
+                    borderColor: colorPalette[0]
+                }
+            }
+        },
+
+        tooltip: {
+            backgroundColor: 'rgba(50,50,50,0.5)',
+            axisPointer : {
+                type : 'line',
+                lineStyle : {
+                    color: '#008acd'
+                },
+                crossStyle: {
+                    color: '#008acd'
+                },
+                shadowStyle : {
+                    color: 'rgba(200,200,200,0.2)'
+                }
+            }
+        },
+
+        dataZoom: {
+            dataBackgroundColor: '#efefff',
+            fillerColor: 'rgba(182,162,222,0.2)',
+            handleColor: '#008acd'
+        },
+
+        grid: {
+            borderColor: '#eee'
+        },
+
+        categoryAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#008acd'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#eee']
+                }
+            }
+        },
+
+        valueAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#008acd'
+                }
+            },
+            splitArea : {
+                show : true,
+                areaStyle : {
+                    color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#eee']
+                }
+            }
+        },
+
+        timeline : {
+            lineStyle : {
+                color : '#008acd'
+            },
+            controlStyle : {
+                normal : { color : '#008acd'},
+                emphasis : { color : '#008acd'}
+            },
+            symbol : 'emptyCircle',
+            symbolSize : 3
+        },
+
+        line: {
+            smooth : true,
+            symbol: 'emptyCircle',
+            symbolSize: 3
+        },
+
+        candlestick: {
+            itemStyle: {
+                normal: {
+                    color: '#d87a80',
+                    color0: '#2ec7c9',
+                    lineStyle: {
+                        color: '#d87a80',
+                        color0: '#2ec7c9'
+                    }
+                }
+            }
+        },
+
+        scatter: {
+            symbol: 'circle',
+            symbolSize: 4
+        },
+
+        map: {
+            label: {
+                normal: {
+                    textStyle: {
+                        color: '#d87a80'
+                    }
+                }
+            },
+            itemStyle: {
+                normal: {
+                    borderColor: '#eee',
+                    areaColor: '#ddd'
+                },
+                emphasis: {
+                    areaColor: '#fe994e'
+                }
+            }
+        },
+
+        graph: {
+            color: colorPalette
+        },
+
+        gauge : {
+            axisLine: {
+                lineStyle: {
+                    color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
+                    width: 10
+                }
+            },
+            axisTick: {
+                splitNumber: 10,
+                length :15,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            splitLine: {
+                length :22,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            pointer : {
+                width : 5
+            }
+        }
+    };
+
+    echarts.registerTheme('macarons', theme);
+}));

src/assets/eventBus.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+export default new Vue()

src/assets/icon/demo.css

@@ -0,0 +1,370 @@
+*{margin: 0;padding: 0;list-style: none;}
+/*
+KISSY CSS Reset
+理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
+2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
+3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
+特色：1. 适应中文；2. 基于最新主流浏览器。
+维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
+ */
+
+/** 清除内外边距 **/
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+pre, /* text formatting elements 文本格式元素 */
+form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
+th, td /* table elements 表格元素 */ {
+  margin: 0;
+  padding: 0;
+}
+
+/** 设置默认字体 **/
+body,
+button, input, select, textarea /* for ie */ {
+  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
+}
+h1, h2, h3, h4, h5, h6 { font-size: 100%; }
+address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
+code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
+small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
+
+/** 重置列表元素 **/
+ul, ol { list-style: none; }
+
+/** 重置文本格式元素 **/
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+
+/** 重置表单元素 **/
+legend { color: #000; } /* for ie6 */
+fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
+button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+/* 注：optgroup 无法扶正 */
+
+/** 重置表格元素 **/
+table { border-collapse: collapse; border-spacing: 0; }
+
+/* 清除浮动 */
+.ks-clear:after, .clear:after {
+  content: '\20';
+  display: block;
+  height: 0;
+  clear: both;
+}
+.ks-clear, .clear {
+  *zoom: 1;
+}
+
+.main {
+  padding: 30px 100px;
+width: 960px;
+margin: 0 auto;
+}
+.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
+
+.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;
+
+}
+
+.icon_lists li{
+  float:left;
+  width: 100px;
+  height:180px;
+  text-align: center;
+  list-style: none !important;
+}
+.icon_lists .icon{
+  font-size: 42px;
+  line-height: 100px;
+  margin: 10px 0;
+  color:#333;
+  -webkit-transition: font-size 0.25s ease-out 0s;
+  -moz-transition: font-size 0.25s ease-out 0s;
+  transition: font-size 0.25s ease-out 0s;
+
+}
+.icon_lists .icon:hover{
+  font-size: 100px;
+}
+
+
+
+.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,
+.markdown pre {
+  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 pre {
+  border-radius: 6px;
+  background: #f7f7f7;
+  padding: 20px;
+}
+
+.markdown pre code {
+  border: none;
+  background: #f7f7f7;
+  margin: 0;
+}
+
+.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;
+  font-style: italic;
+}
+
+.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;
+}
+
+pre{
+  background: #fff;
+}
+
+
+
+
+

src/assets/icon/demo_fontclass.html

@@ -0,0 +1,52 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <link rel="stylesheet" href="iconfont.css">
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont icon-activity"></i>
+                    <div class="name">activity</div>
+                    <div class="fontclass">.icon-activity</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-editor"></i>
+                    <div class="name">editor</div>
+                    <div class="fontclass">.icon-editor</div>
+                </li>
+            
+        </ul>
+
+        <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="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+</body>
+</html>

src/assets/icon/demo_symbol.html

@@ -0,0 +1,79 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <script src="iconfont.js"></script>
+
+    <style type="text/css">
+        .icon {
+          /* 通过设置 font-size 来改变图标大小 */
+          width: 1em; height: 1em;
+          /* 图标和文字相邻时，垂直对齐 */
+          vertical-align: -0.15em;
+          /* 通过设置 color 来改变 SVG 的颜色/fill */
+          fill: currentColor;
+          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+             normalize.css 中也包含这行 */
+          overflow: hidden;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-activity"></use>
+                    </svg>
+                    <div class="name">activity</div>
+                    <div class="fontclass">#icon-activity</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-editor"></use>
+                    </svg>
+                    <div class="name">editor</div>
+                    <div class="fontclass">#icon-editor</div>
+                </li>
+            
+        </ul>
+
+
+        <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="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
+        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
+.icon {
+   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
+   vertical-align: <span class="hljs-number">-0.15</span>em;
+   fill: currentColor;
+   overflow: hidden;
+}
+&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
+  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
+</span>&lt;<span class="hljs-regexp">/svg&gt;
+        </span></code></pre>
+    </div>
+</body>
+</html>

src/assets/icon/demo_unicode.html

@@ -0,0 +1,90 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+
+    <style type="text/css">
+
+        @font-face {font-family: "iconfont";
+          src: url('iconfont.eot'); /* IE9*/
+          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
+          url('iconfont.woff') format('woff'), /* chrome, firefox */
+          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+        }
+
+        .iconfont {
+          font-family:"iconfont" !important;
+          font-size:16px;
+          font-style:normal;
+          -webkit-font-smoothing: antialiased;
+          -webkit-text-stroke-width: 0.2px;
+          -moz-osx-font-smoothing: grayscale;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont">&#xe6de;</i>
+                    <div class="name">activity</div>
+                    <div class="code">&amp;#xe6de;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6f5;</i>
+                    <div class="name">editor</div>
+                    <div class="code">&amp;#xe6f5;</div>
+                </li>
+            
+        </ul>
+        <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">第一步：拷贝项目下面生成的font-face</h3>
+        <pre><code class="lang-js hljs javascript">@font-face {
+  font-family: <span class="hljs-string">'iconfont'</span>;
+  src: url(<span class="hljs-string">'iconfont.eot'</span>);
+  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
+  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
+  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
+  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
+}
+</code></pre>
+        <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
+        <pre><code class="lang-js hljs javascript">.iconfont{
+  font-family:<span class="hljs-string">"iconfont"</span> !important;
+  font-size:<span class="hljs-number">16</span>px;font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>
+
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+
+
+</body>
+</html>

src/assets/icon/iconfont.css

@@ -0,0 +1,21 @@
+
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1540390919997'); /* IE9*/
+  src: url('iconfont.eot?t=1540390919997#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAATgAAsAAAAAB5wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY9VEjnY21hcAAAAYAAAABWAAABhmnZ0opnbHlmAAAB2AAAARMAAAGARACD3GhlYWQAAALsAAAALwAAADYTDIYbaGhlYQAAAxwAAAAcAAAAJAfeA4RobXR4AAADOAAAAAwAAAAMDAAAAGxvY2EAAANEAAAACAAAAAgAfADAbWF4cAAAA0wAAAAfAAAAIAESAGRuYW1lAAADbAAAAUUAAAJtPlT+fXBvc3QAAAS0AAAAKgAAADvAZlSmeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye3Xv2lbnhfwNDDHMDQwNQmBEkBwABmQ22eJztkLERgDAMA99OSMExCAUDUTE6ZTZIHRQHtkB3b51lVwIWIIlDZLALY+hUapEn1shz/BS54fWurXf4XDLdSrhrFH5tMfd389HWZDRb2wR/AEzpFJIAAHicVU9NToNAFH7fTIRADCmU0oQWZWiHuNFUoO1KZePKA7gywaVXcGNX3sKkR8Eb9AJNunXnBaAORRt8mfd972/mfUMnRPtvXvCQdDqnO3qgRyKppSKa20Jm1+nA9ZLFDY7sBRByMs/iSAtwZAu6fYahuMXSvgJEssjiiYg01xt2Yh4C1SdYXpUrZ+yUyt9QlSz/y1ajKTAdsfzA9T3Ichxrf8BOnHKO7QfvNYVei2BP6395PK7eAwnIgL0Gsn5Wr6uzbomIkTJesB2d0gURvGQJpTPSobky0ga2sH+Fd7+WxfgyfRMzo++b9cZAYTlVibBZWe864h28GAZmpt836o3pXzZtlqvNaqAq28Hm2g+0Cz92AHicY2BkYGAA4uuNR03j+W2+MnCzMIDA9W8L2RH0/w8sDMwKQC4HAxNIFABGvAsNAHicY2BkYGBu+N/AEMPCAAJAkpEBFTADAEcJAmwEAAAABAAAAAQAAAAAAAAAAHwAwHicY2BkYGBgZohgYGUAASYg5gJCBob/YD4DABGmAXcAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAmZGJkZmRhYEjMbkksyyzpJItNSWzJL+IgQEAQDkGHgAA') format('woff'),
+  url('iconfont.ttf?t=1540390919997') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1540390919997#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family:"iconfont" !important;
+  font-size:16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-activity:before { content: "\e6de"; }
+
+.icon-editor:before { content: "\e6f5"; }
+

src/assets/icon/iconfont.js

@@ -0,0 +1 @@
+(function(window){var svgSprite='<svg><symbol id="icon-activity" viewBox="0 0 1024 1024"><path d="M800 845.088c0 1.76-0.736 2.784-0.096 2.88l-574.656 0.416C224.992 848.192 224 847.04 224 845.088v-477.12h576v477.12zM224 210.88c0-1.728 0.64-2.752 0.096-2.912H352V224a32 32 0 1 0 64 0v-16h192V224a32 32 0 1 0 64 0v-16h127.008a4.736 4.736 0 0 1 0.992 2.88V304H224V210.88zM799.84 144H672V128a32 32 0 0 0-64 0v16h-192V128a32 32 0 0 0-64 0v16H223.712C188.576 144 160 174.016 160 210.88V845.12c0 36.896 28.608 66.88 63.744 66.88h576.512c35.136 0 63.744-29.984 63.744-66.88V210.88c0-36.896-28.768-66.912-64.16-66.912z"  ></path><path d="M384 560h256a32 32 0 0 0 0-64h-256a32 32 0 0 0 0 64M384 720h256a32 32 0 0 0 0-64h-256a32 32 0 0 0 0 64"  ></path></symbol><symbol id="icon-editor" viewBox="0 0 1024 1024"><path d="M489.376 534.624a31.904 31.904 0 0 0 45.248 0l304-304a31.968 31.968 0 1 0-45.248-45.248l-304 304a31.968 31.968 0 0 0 0 45.248"  ></path><path d="M832 480a32 32 0 0 0-32 32l0.256 288L224 800.256 223.744 224H512a32 32 0 0 0 0-64H223.744A63.84 63.84 0 0 0 160 223.744v576.512C160 835.392 188.608 864 223.744 864h576.512A63.84 63.84 0 0 0 864 800.256V512a32 32 0 0 0-32-32"  ></path></symbol></svg>';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;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)}}ready(appendSvg)})(window)

src/assets/icon/iconfont.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="activity" unicode="&#59102;" d="M800 50.912c0-1.76-0.736-2.784-0.096-2.88l-574.656-0.416C224.992 47.808 224 48.96 224 50.912v477.12h576v-477.12zM224 685.12c0 1.728 0.64 2.752 0.096 2.912H352V672a32 32 0 1 1 64 0v16h192V672a32 32 0 1 1 64 0v16h127.008a4.736 4.736 0 0 0 0.992-2.88V592H224V685.12zM799.84 752H672V768a32 32 0 0 1-64 0v-16h-192V768a32 32 0 0 1-64 0v-16H223.712C188.576 752 160 721.984 160 685.12V50.88c0-36.896 28.608-66.88 63.744-66.88h576.512c35.136 0 63.744 29.984 63.744 66.88V685.12c0 36.896-28.768 66.912-64.16 66.912zM384 336h256a32 32 0 0 1 0 64h-256a32 32 0 0 1 0-64M384 176h256a32 32 0 0 1 0 64h-256a32 32 0 0 1 0-64"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="editor" unicode="&#59125;" d="M489.376 361.376a31.904 31.904 0 0 1 45.248 0l304 304a31.968 31.968 0 1 1-45.248 45.248l-304-304a31.968 31.968 0 0 1 0-45.248M832 416a32 32 0 0 1-32-32l0.256-288L224 95.744 223.744 672H512a32 32 0 0 1 0 64H223.744A63.84 63.84 0 0 1 160 672.256v-576.512C160 60.608 188.608 32 223.744 32h576.512A63.84 63.84 0 0 1 864 95.744V384a32 32 0 0 1-32 32"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

src/assets/iconfont/demo.css

@@ -0,0 +1,370 @@
+*{margin: 0;padding: 0;list-style: none;}
+/*
+KISSY CSS Reset
+理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
+2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
+3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
+特色：1. 适应中文；2. 基于最新主流浏览器。
+维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
+ */
+
+/** 清除内外边距 **/
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+pre, /* text formatting elements 文本格式元素 */
+form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
+th, td /* table elements 表格元素 */ {
+  margin: 0;
+  padding: 0;
+}
+
+/** 设置默认字体 **/
+body,
+button, input, select, textarea /* for ie */ {
+  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
+}
+h1, h2, h3, h4, h5, h6 { font-size: 100%; }
+address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
+code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
+small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
+
+/** 重置列表元素 **/
+ul, ol { list-style: none; }
+
+/** 重置文本格式元素 **/
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+
+/** 重置表单元素 **/
+legend { color: #000; } /* for ie6 */
+fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
+button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+/* 注：optgroup 无法扶正 */
+
+/** 重置表格元素 **/
+table { border-collapse: collapse; border-spacing: 0; }
+
+/* 清除浮动 */
+.ks-clear:after, .clear:after {
+  content: '\20';
+  display: block;
+  height: 0;
+  clear: both;
+}
+.ks-clear, .clear {
+  *zoom: 1;
+}
+
+.main {
+  padding: 30px 100px;
+width: 960px;
+margin: 0 auto;
+}
+.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
+
+.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;
+
+}
+
+.icon_lists li{
+  float:left;
+  width: 100px;
+  height:180px;
+  text-align: center;
+  list-style: none !important;
+}
+.icon_lists .icon{
+  font-size: 42px;
+  line-height: 100px;
+  margin: 10px 0;
+  color:#333;
+  -webkit-transition: font-size 0.25s ease-out 0s;
+  -moz-transition: font-size 0.25s ease-out 0s;
+  transition: font-size 0.25s ease-out 0s;
+
+}
+.icon_lists .icon:hover{
+  font-size: 100px;
+}
+
+
+
+.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,
+.markdown pre {
+  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 pre {
+  border-radius: 6px;
+  background: #f7f7f7;
+  padding: 20px;
+}
+
+.markdown pre code {
+  border: none;
+  background: #f7f7f7;
+  margin: 0;
+}
+
+.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;
+  font-style: italic;
+}
+
+.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;
+}
+
+pre{
+  background: #fff;
+}
+
+
+
+
+

src/assets/iconfont/demo_fontclass.html

@@ -0,0 +1,544 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <link rel="stylesheet" href="iconfont.css">
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont icon-76"></i>
+                    <div class="name">电话</div>
+                    <div class="fontclass">.icon-76</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-dianhua1"></i>
+                    <div class="name">电话</div>
+                    <div class="fontclass">.icon-dianhua1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-wsmp-payuser"></i>
+                    <div class="name">会员</div>
+                    <div class="fontclass">.icon-wsmp-payuser</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jiankangshuidi"></i>
+                    <div class="name">健康 水滴</div>
+                    <div class="fontclass">.icon-jiankangshuidi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-iconbaocuo"></i>
+                    <div class="name">报错</div>
+                    <div class="fontclass">.icon-iconbaocuo</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-dianhua"></i>
+                    <div class="name">电话</div>
+                    <div class="fontclass">.icon-dianhua</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-morentouxiang"></i>
+                    <div class="name">225默认头像</div>
+                    <div class="fontclass">.icon-morentouxiang</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-accessory"></i>
+                    <div class="name">accessory</div>
+                    <div class="fontclass">.icon-accessory</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-add"></i>
+                    <div class="name">add</div>
+                    <div class="fontclass">.icon-add</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-addition_fill"></i>
+                    <div class="name">addition_fill</div>
+                    <div class="fontclass">.icon-addition_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-addition"></i>
+                    <div class="name">addition</div>
+                    <div class="fontclass">.icon-addition</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-addressbook_fill"></i>
+                    <div class="name">addressbook_fill</div>
+                    <div class="fontclass">.icon-addressbook_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-addressbook"></i>
+                    <div class="name">addressbook</div>
+                    <div class="fontclass">.icon-addressbook</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-browse_fill"></i>
+                    <div class="name">browse_fill</div>
+                    <div class="fontclass">.icon-browse_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-brush"></i>
+                    <div class="name">brush</div>
+                    <div class="fontclass">.icon-brush</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-brush_fill"></i>
+                    <div class="name">brush_fill</div>
+                    <div class="fontclass">.icon-brush_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-computer_fill"></i>
+                    <div class="name">computer_fill</div>
+                    <div class="fontclass">.icon-computer_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-computer"></i>
+                    <div class="name">computer</div>
+                    <div class="fontclass">.icon-computer</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-coordinates_fill"></i>
+                    <div class="name">coordinates_fill</div>
+                    <div class="fontclass">.icon-coordinates_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-coordinates"></i>
+                    <div class="name">coordinates</div>
+                    <div class="fontclass">.icon-coordinates</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-coupons_fill"></i>
+                    <div class="name">coupons_fill</div>
+                    <div class="fontclass">.icon-coupons_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-customerservice_fill"></i>
+                    <div class="name">customerservice_fill</div>
+                    <div class="fontclass">.icon-customerservice_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-customerservice"></i>
+                    <div class="name">customerservice</div>
+                    <div class="fontclass">.icon-customerservice</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-document"></i>
+                    <div class="name">document</div>
+                    <div class="fontclass">.icon-document</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-document_fill"></i>
+                    <div class="name">document_fill</div>
+                    <div class="fontclass">.icon-document_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-dynamic_fill"></i>
+                    <div class="name">dynamic_fill</div>
+                    <div class="fontclass">.icon-dynamic_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-editor"></i>
+                    <div class="name">editor</div>
+                    <div class="fontclass">.icon-editor</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-emoji"></i>
+                    <div class="name">emoji</div>
+                    <div class="fontclass">.icon-emoji</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-enter"></i>
+                    <div class="name">enter</div>
+                    <div class="fontclass">.icon-enter</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-flag_fill"></i>
+                    <div class="name">flag_fill</div>
+                    <div class="fontclass">.icon-flag_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-flag"></i>
+                    <div class="name">flag</div>
+                    <div class="fontclass">.icon-flag</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-group_fill"></i>
+                    <div class="name">group_fill</div>
+                    <div class="fontclass">.icon-group_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-headlines_fill"></i>
+                    <div class="name">headlines_fill</div>
+                    <div class="fontclass">.icon-headlines_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-homepage_fill"></i>
+                    <div class="name">homepage_fill</div>
+                    <div class="fontclass">.icon-homepage_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-homepage"></i>
+                    <div class="name">homepage</div>
+                    <div class="fontclass">.icon-homepage</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-interactive_fill"></i>
+                    <div class="name">interactive_fill</div>
+                    <div class="fontclass">.icon-interactive_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-interactive"></i>
+                    <div class="name">interactive</div>
+                    <div class="fontclass">.icon-interactive</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-label"></i>
+                    <div class="name">label</div>
+                    <div class="fontclass">.icon-label</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-like_fill"></i>
+                    <div class="name">like_fill</div>
+                    <div class="fontclass">.icon-like_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-like"></i>
+                    <div class="name">like</div>
+                    <div class="fontclass">.icon-like</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-lock"></i>
+                    <div class="name">lock</div>
+                    <div class="fontclass">.icon-lock</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-mail"></i>
+                    <div class="name">mail</div>
+                    <div class="fontclass">.icon-mail</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-manage"></i>
+                    <div class="name">manage</div>
+                    <div class="fontclass">.icon-manage</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-message"></i>
+                    <div class="name">message</div>
+                    <div class="fontclass">.icon-message</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-mine_fill"></i>
+                    <div class="name">mine_fill</div>
+                    <div class="fontclass">.icon-mine_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-mobilephone_fill"></i>
+                    <div class="name">mobilephone_fill</div>
+                    <div class="fontclass">.icon-mobilephone_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-mobilephone"></i>
+                    <div class="name">mobilephone</div>
+                    <div class="fontclass">.icon-mobilephone</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-offline_fill"></i>
+                    <div class="name">offline_fill</div>
+                    <div class="fontclass">.icon-offline_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-offline"></i>
+                    <div class="name">offline</div>
+                    <div class="fontclass">.icon-offline</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-order_fill"></i>
+                    <div class="name">order_fill</div>
+                    <div class="fontclass">.icon-order_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-other"></i>
+                    <div class="name">other</div>
+                    <div class="fontclass">.icon-other</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-picture_fill"></i>
+                    <div class="name">picture_fill</div>
+                    <div class="fontclass">.icon-picture_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-prompt_fill"></i>
+                    <div class="name">prompt_fill</div>
+                    <div class="fontclass">.icon-prompt_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-qrcode_fill"></i>
+                    <div class="name">qrcode_fill</div>
+                    <div class="fontclass">.icon-qrcode_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-remind_fill"></i>
+                    <div class="name">remind_fill</div>
+                    <div class="fontclass">.icon-remind_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-remind"></i>
+                    <div class="name">remind</div>
+                    <div class="fontclass">.icon-remind</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-return"></i>
+                    <div class="name">return</div>
+                    <div class="fontclass">.icon-return</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-service_fill"></i>
+                    <div class="name">service_fill</div>
+                    <div class="fontclass">.icon-service_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-service"></i>
+                    <div class="name">service</div>
+                    <div class="fontclass">.icon-service</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-setup_fill"></i>
+                    <div class="name">setup_fill</div>
+                    <div class="fontclass">.icon-setup_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-setup"></i>
+                    <div class="name">setup</div>
+                    <div class="fontclass">.icon-setup</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-smallscreen"></i>
+                    <div class="name">smallscreen</div>
+                    <div class="fontclass">.icon-smallscreen</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-success_fill"></i>
+                    <div class="name">success_fill</div>
+                    <div class="fontclass">.icon-success_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-success"></i>
+                    <div class="name">success</div>
+                    <div class="fontclass">.icon-success</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-time_fill"></i>
+                    <div class="name">time_fill</div>
+                    <div class="fontclass">.icon-time_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-trash"></i>
+                    <div class="name">trash</div>
+                    <div class="fontclass">.icon-trash</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-trash_fill"></i>
+                    <div class="name">trash_fill</div>
+                    <div class="fontclass">.icon-trash_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-undo"></i>
+                    <div class="name">undo</div>
+                    <div class="fontclass">.icon-undo</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-workbench_fill"></i>
+                    <div class="name">workbench_fill</div>
+                    <div class="fontclass">.icon-workbench_fill</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-daoru"></i>
+                    <div class="name">导入</div>
+                    <div class="fontclass">.icon-daoru</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-search"></i>
+                    <div class="name">search</div>
+                    <div class="fontclass">.icon-search</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-dianhua2"></i>
+                    <div class="name">电话</div>
+                    <div class="fontclass">.icon-dianhua2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-packup"></i>
+                    <div class="name">packup</div>
+                    <div class="fontclass">.icon-packup</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-unfold"></i>
+                    <div class="name">unfold</div>
+                    <div class="fontclass">.icon-unfold</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-wangwang"></i>
+                    <div class="name">wangwang_fill</div>
+                    <div class="fontclass">.icon-wangwang</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yanzhengma"></i>
+                    <div class="name">验证码</div>
+                    <div class="fontclass">.icon-yanzhengma</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-baocuo-chahua"></i>
+                    <div class="name">报错-插画</div>
+                    <div class="fontclass">.icon-baocuo-chahua</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-pengyou"></i>
+                    <div class="name">朋友</div>
+                    <div class="fontclass">.icon-pengyou</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-suoyou"></i>
+                    <div class="name">所有</div>
+                    <div class="fontclass">.icon-suoyou</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-huiyuan"></i>
+                    <div class="name">会员</div>
+                    <div class="fontclass">.icon-huiyuan</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-huiyuan1"></i>
+                    <div class="name">会员</div>
+                    <div class="fontclass">.icon-huiyuan1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-kongyemian"></i>
+                    <div class="name">空页面</div>
+                    <div class="fontclass">.icon-kongyemian</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-logout"></i>
+                    <div class="name">logout</div>
+                    <div class="fontclass">.icon-logout</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-cloudupload-o"></i>
+                    <div class="name">cloud upload-o</div>
+                    <div class="fontclass">.icon-cloudupload-o</div>
+                </li>
+            
+        </ul>
+
+        <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="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+</body>
+</html>

src/assets/iconfont/demo_symbol.html

@@ -0,0 +1,743 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <script src="iconfont.js"></script>
+
+    <style type="text/css">
+        .icon {
+          /* 通过设置 font-size 来改变图标大小 */
+          width: 1em; height: 1em;
+          /* 图标和文字相邻时，垂直对齐 */
+          vertical-align: -0.15em;
+          /* 通过设置 color 来改变 SVG 的颜色/fill */
+          fill: currentColor;
+          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+             normalize.css 中也包含这行 */
+          overflow: hidden;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-76"></use>
+                    </svg>
+                    <div class="name">电话</div>
+                    <div class="fontclass">#icon-76</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-dianhua1"></use>
+                    </svg>
+                    <div class="name">电话</div>
+                    <div class="fontclass">#icon-dianhua1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-wsmp-payuser"></use>
+                    </svg>
+                    <div class="name">会员</div>
+                    <div class="fontclass">#icon-wsmp-payuser</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-jiankangshuidi"></use>
+                    </svg>
+                    <div class="name">健康 水滴</div>
+                    <div class="fontclass">#icon-jiankangshuidi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-iconbaocuo"></use>
+                    </svg>
+                    <div class="name">报错</div>
+                    <div class="fontclass">#icon-iconbaocuo</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-dianhua"></use>
+                    </svg>
+                    <div class="name">电话</div>
+                    <div class="fontclass">#icon-dianhua</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-morentouxiang"></use>
+                    </svg>
+                    <div class="name">225默认头像</div>
+                    <div class="fontclass">#icon-morentouxiang</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-accessory"></use>
+                    </svg>
+                    <div class="name">accessory</div>
+                    <div class="fontclass">#icon-accessory</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-add"></use>
+                    </svg>
+                    <div class="name">add</div>
+                    <div class="fontclass">#icon-add</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-addition_fill"></use>
+                    </svg>
+                    <div class="name">addition_fill</div>
+                    <div class="fontclass">#icon-addition_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-addition"></use>
+                    </svg>
+                    <div class="name">addition</div>
+                    <div class="fontclass">#icon-addition</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-addressbook_fill"></use>
+                    </svg>
+                    <div class="name">addressbook_fill</div>
+                    <div class="fontclass">#icon-addressbook_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-addressbook"></use>
+                    </svg>
+                    <div class="name">addressbook</div>
+                    <div class="fontclass">#icon-addressbook</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-browse_fill"></use>
+                    </svg>
+                    <div class="name">browse_fill</div>
+                    <div class="fontclass">#icon-browse_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-brush"></use>
+                    </svg>
+                    <div class="name">brush</div>
+                    <div class="fontclass">#icon-brush</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-brush_fill"></use>
+                    </svg>
+                    <div class="name">brush_fill</div>
+                    <div class="fontclass">#icon-brush_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-computer_fill"></use>
+                    </svg>
+                    <div class="name">computer_fill</div>
+                    <div class="fontclass">#icon-computer_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-computer"></use>
+                    </svg>
+                    <div class="name">computer</div>
+                    <div class="fontclass">#icon-computer</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-coordinates_fill"></use>
+                    </svg>
+                    <div class="name">coordinates_fill</div>
+                    <div class="fontclass">#icon-coordinates_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-coordinates"></use>
+                    </svg>
+                    <div class="name">coordinates</div>
+                    <div class="fontclass">#icon-coordinates</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-coupons_fill"></use>
+                    </svg>
+                    <div class="name">coupons_fill</div>
+                    <div class="fontclass">#icon-coupons_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-customerservice_fill"></use>
+                    </svg>
+                    <div class="name">customerservice_fill</div>
+                    <div class="fontclass">#icon-customerservice_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-customerservice"></use>
+                    </svg>
+                    <div class="name">customerservice</div>
+                    <div class="fontclass">#icon-customerservice</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-document"></use>
+                    </svg>
+                    <div class="name">document</div>
+                    <div class="fontclass">#icon-document</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-document_fill"></use>
+                    </svg>
+                    <div class="name">document_fill</div>
+                    <div class="fontclass">#icon-document_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-dynamic_fill"></use>
+                    </svg>
+                    <div class="name">dynamic_fill</div>
+                    <div class="fontclass">#icon-dynamic_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-editor"></use>
+                    </svg>
+                    <div class="name">editor</div>
+                    <div class="fontclass">#icon-editor</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-emoji"></use>
+                    </svg>
+                    <div class="name">emoji</div>
+                    <div class="fontclass">#icon-emoji</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-enter"></use>
+                    </svg>
+                    <div class="name">enter</div>
+                    <div class="fontclass">#icon-enter</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-flag_fill"></use>
+                    </svg>
+                    <div class="name">flag_fill</div>
+                    <div class="fontclass">#icon-flag_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-flag"></use>
+                    </svg>
+                    <div class="name">flag</div>
+                    <div class="fontclass">#icon-flag</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-group_fill"></use>
+                    </svg>
+                    <div class="name">group_fill</div>
+                    <div class="fontclass">#icon-group_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-headlines_fill"></use>
+                    </svg>
+                    <div class="name">headlines_fill</div>
+                    <div class="fontclass">#icon-headlines_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-homepage_fill"></use>
+                    </svg>
+                    <div class="name">homepage_fill</div>
+                    <div class="fontclass">#icon-homepage_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-homepage"></use>
+                    </svg>
+                    <div class="name">homepage</div>
+                    <div class="fontclass">#icon-homepage</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-interactive_fill"></use>
+                    </svg>
+                    <div class="name">interactive_fill</div>
+                    <div class="fontclass">#icon-interactive_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-interactive"></use>
+                    </svg>
+                    <div class="name">interactive</div>
+                    <div class="fontclass">#icon-interactive</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-label"></use>
+                    </svg>
+                    <div class="name">label</div>
+                    <div class="fontclass">#icon-label</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-like_fill"></use>
+                    </svg>
+                    <div class="name">like_fill</div>
+                    <div class="fontclass">#icon-like_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-like"></use>
+                    </svg>
+                    <div class="name">like</div>
+                    <div class="fontclass">#icon-like</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-lock"></use>
+                    </svg>
+                    <div class="name">lock</div>
+                    <div class="fontclass">#icon-lock</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-mail"></use>
+                    </svg>
+                    <div class="name">mail</div>
+                    <div class="fontclass">#icon-mail</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-manage"></use>
+                    </svg>
+                    <div class="name">manage</div>
+                    <div class="fontclass">#icon-manage</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-message"></use>
+                    </svg>
+                    <div class="name">message</div>
+                    <div class="fontclass">#icon-message</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-mine_fill"></use>
+                    </svg>
+                    <div class="name">mine_fill</div>
+                    <div class="fontclass">#icon-mine_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-mobilephone_fill"></use>
+                    </svg>
+                    <div class="name">mobilephone_fill</div>
+                    <div class="fontclass">#icon-mobilephone_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-mobilephone"></use>
+                    </svg>
+                    <div class="name">mobilephone</div>
+                    <div class="fontclass">#icon-mobilephone</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-offline_fill"></use>
+                    </svg>
+                    <div class="name">offline_fill</div>
+                    <div class="fontclass">#icon-offline_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-offline"></use>
+                    </svg>
+                    <div class="name">offline</div>
+                    <div class="fontclass">#icon-offline</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-order_fill"></use>
+                    </svg>
+                    <div class="name">order_fill</div>
+                    <div class="fontclass">#icon-order_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-other"></use>
+                    </svg>
+                    <div class="name">other</div>
+                    <div class="fontclass">#icon-other</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-picture_fill"></use>
+                    </svg>
+                    <div class="name">picture_fill</div>
+                    <div class="fontclass">#icon-picture_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-prompt_fill"></use>
+                    </svg>
+                    <div class="name">prompt_fill</div>
+                    <div class="fontclass">#icon-prompt_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-qrcode_fill"></use>
+                    </svg>
+                    <div class="name">qrcode_fill</div>
+                    <div class="fontclass">#icon-qrcode_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-remind_fill"></use>
+                    </svg>
+                    <div class="name">remind_fill</div>
+                    <div class="fontclass">#icon-remind_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-remind"></use>
+                    </svg>
+                    <div class="name">remind</div>
+                    <div class="fontclass">#icon-remind</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-return"></use>
+                    </svg>
+                    <div class="name">return</div>
+                    <div class="fontclass">#icon-return</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-service_fill"></use>
+                    </svg>
+                    <div class="name">service_fill</div>
+                    <div class="fontclass">#icon-service_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-service"></use>
+                    </svg>
+                    <div class="name">service</div>
+                    <div class="fontclass">#icon-service</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-setup_fill"></use>
+                    </svg>
+                    <div class="name">setup_fill</div>
+                    <div class="fontclass">#icon-setup_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-setup"></use>
+                    </svg>
+                    <div class="name">setup</div>
+                    <div class="fontclass">#icon-setup</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-smallscreen"></use>
+                    </svg>
+                    <div class="name">smallscreen</div>
+                    <div class="fontclass">#icon-smallscreen</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-success_fill"></use>
+                    </svg>
+                    <div class="name">success_fill</div>
+                    <div class="fontclass">#icon-success_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-success"></use>
+                    </svg>
+                    <div class="name">success</div>
+                    <div class="fontclass">#icon-success</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-time_fill"></use>
+                    </svg>
+                    <div class="name">time_fill</div>
+                    <div class="fontclass">#icon-time_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-trash"></use>
+                    </svg>
+                    <div class="name">trash</div>
+                    <div class="fontclass">#icon-trash</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-trash_fill"></use>
+                    </svg>
+                    <div class="name">trash_fill</div>
+                    <div class="fontclass">#icon-trash_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-undo"></use>
+                    </svg>
+                    <div class="name">undo</div>
+                    <div class="fontclass">#icon-undo</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-workbench_fill"></use>
+                    </svg>
+                    <div class="name">workbench_fill</div>
+                    <div class="fontclass">#icon-workbench_fill</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-daoru"></use>
+                    </svg>
+                    <div class="name">导入</div>
+                    <div class="fontclass">#icon-daoru</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-search"></use>
+                    </svg>
+                    <div class="name">search</div>
+                    <div class="fontclass">#icon-search</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-dianhua2"></use>
+                    </svg>
+                    <div class="name">电话</div>
+                    <div class="fontclass">#icon-dianhua2</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-packup"></use>
+                    </svg>
+                    <div class="name">packup</div>
+                    <div class="fontclass">#icon-packup</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-unfold"></use>
+                    </svg>
+                    <div class="name">unfold</div>
+                    <div class="fontclass">#icon-unfold</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-wangwang"></use>
+                    </svg>
+                    <div class="name">wangwang_fill</div>
+                    <div class="fontclass">#icon-wangwang</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-yanzhengma"></use>
+                    </svg>
+                    <div class="name">验证码</div>
+                    <div class="fontclass">#icon-yanzhengma</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-baocuo-chahua"></use>
+                    </svg>
+                    <div class="name">报错-插画</div>
+                    <div class="fontclass">#icon-baocuo-chahua</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-pengyou"></use>
+                    </svg>
+                    <div class="name">朋友</div>
+                    <div class="fontclass">#icon-pengyou</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-suoyou"></use>
+                    </svg>
+                    <div class="name">所有</div>
+                    <div class="fontclass">#icon-suoyou</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-huiyuan"></use>
+                    </svg>
+                    <div class="name">会员</div>
+                    <div class="fontclass">#icon-huiyuan</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-huiyuan1"></use>
+                    </svg>
+                    <div class="name">会员</div>
+                    <div class="fontclass">#icon-huiyuan1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-kongyemian"></use>
+                    </svg>
+                    <div class="name">空页面</div>
+                    <div class="fontclass">#icon-kongyemian</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-logout"></use>
+                    </svg>
+                    <div class="name">logout</div>
+                    <div class="fontclass">#icon-logout</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-cloudupload-o"></use>
+                    </svg>
+                    <div class="name">cloud upload-o</div>
+                    <div class="fontclass">#icon-cloudupload-o</div>
+                </li>
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-manbing-xuanzhong"></use>
+                    </svg>
+                    <div class="name">慢病</div>
+                    <div class="fontclass">#icon-manbing-xuanzhong</div>
+                </li>
+                
+            
+        </ul>
+
+
+        <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="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
+        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
+.icon {
+   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
+   vertical-align: <span class="hljs-number">-0.15</span>em;
+   fill: currentColor;
+   overflow: hidden;
+}
+&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
+  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
+</span>&lt;<span class="hljs-regexp">/svg&gt;
+        </span></code></pre>
+    </div>
+</body>
+</html>

src/assets/iconfont/demo_unicode.html

@@ -0,0 +1,582 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+
+    <style type="text/css">
+
+        @font-face {font-family: "iconfont";
+          src: url('iconfont.eot'); /* IE9*/
+          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
+          url('iconfont.woff') format('woff'), /* chrome, firefox */
+          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+        }
+
+        .iconfont {
+          font-family:"iconfont" !important;
+          font-size:16px;
+          font-style:normal;
+          -webkit-font-smoothing: antialiased;
+          -webkit-text-stroke-width: 0.2px;
+          -moz-osx-font-smoothing: grayscale;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont">&#xe686;</i>
+                    <div class="name">电话</div>
+                    <div class="code">&amp;#xe686;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe671;</i>
+                    <div class="name">电话</div>
+                    <div class="code">&amp;#xe671;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61d;</i>
+                    <div class="name">会员</div>
+                    <div class="code">&amp;#xe61d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60c;</i>
+                    <div class="name">健康 水滴</div>
+                    <div class="code">&amp;#xe60c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe777;</i>
+                    <div class="name">报错</div>
+                    <div class="code">&amp;#xe777;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe602;</i>
+                    <div class="name">电话</div>
+                    <div class="code">&amp;#xe602;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8c9;</i>
+                    <div class="name">225默认头像</div>
+                    <div class="code">&amp;#xe8c9;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6dd;</i>
+                    <div class="name">accessory</div>
+                    <div class="code">&amp;#xe6dd;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6df;</i>
+                    <div class="name">add</div>
+                    <div class="code">&amp;#xe6df;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6e1;</i>
+                    <div class="name">addition_fill</div>
+                    <div class="code">&amp;#xe6e1;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6e0;</i>
+                    <div class="name">addition</div>
+                    <div class="code">&amp;#xe6e0;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6e2;</i>
+                    <div class="name">addressbook_fill</div>
+                    <div class="code">&amp;#xe6e2;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6e3;</i>
+                    <div class="name">addressbook</div>
+                    <div class="code">&amp;#xe6e3;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6e4;</i>
+                    <div class="name">browse_fill</div>
+                    <div class="code">&amp;#xe6e4;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6e5;</i>
+                    <div class="name">brush</div>
+                    <div class="code">&amp;#xe6e5;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6e6;</i>
+                    <div class="name">brush_fill</div>
+                    <div class="code">&amp;#xe6e6;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6eb;</i>
+                    <div class="name">computer_fill</div>
+                    <div class="code">&amp;#xe6eb;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6ec;</i>
+                    <div class="name">computer</div>
+                    <div class="code">&amp;#xe6ec;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6ed;</i>
+                    <div class="name">coordinates_fill</div>
+                    <div class="code">&amp;#xe6ed;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6ee;</i>
+                    <div class="name">coordinates</div>
+                    <div class="code">&amp;#xe6ee;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6ef;</i>
+                    <div class="name">coupons_fill</div>
+                    <div class="code">&amp;#xe6ef;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6f0;</i>
+                    <div class="name">customerservice_fill</div>
+                    <div class="code">&amp;#xe6f0;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6f1;</i>
+                    <div class="name">customerservice</div>
+                    <div class="code">&amp;#xe6f1;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6f3;</i>
+                    <div class="name">document</div>
+                    <div class="code">&amp;#xe6f3;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6f4;</i>
+                    <div class="name">document_fill</div>
+                    <div class="code">&amp;#xe6f4;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6f6;</i>
+                    <div class="name">dynamic_fill</div>
+                    <div class="code">&amp;#xe6f6;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6f5;</i>
+                    <div class="name">editor</div>
+                    <div class="code">&amp;#xe6f5;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6f9;</i>
+                    <div class="name">emoji</div>
+                    <div class="code">&amp;#xe6f9;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6f8;</i>
+                    <div class="name">enter</div>
+                    <div class="code">&amp;#xe6f8;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6fb;</i>
+                    <div class="name">flag_fill</div>
+                    <div class="code">&amp;#xe6fb;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6fc;</i>
+                    <div class="name">flag</div>
+                    <div class="code">&amp;#xe6fc;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6ff;</i>
+                    <div class="name">group_fill</div>
+                    <div class="code">&amp;#xe6ff;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe700;</i>
+                    <div class="name">headlines_fill</div>
+                    <div class="code">&amp;#xe700;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe702;</i>
+                    <div class="name">homepage_fill</div>
+                    <div class="code">&amp;#xe702;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe703;</i>
+                    <div class="name">homepage</div>
+                    <div class="code">&amp;#xe703;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe704;</i>
+                    <div class="name">interactive_fill</div>
+                    <div class="code">&amp;#xe704;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe705;</i>
+                    <div class="name">interactive</div>
+                    <div class="code">&amp;#xe705;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe706;</i>
+                    <div class="name">label</div>
+                    <div class="code">&amp;#xe706;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe707;</i>
+                    <div class="name">like_fill</div>
+                    <div class="code">&amp;#xe707;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe708;</i>
+                    <div class="name">like</div>
+                    <div class="code">&amp;#xe708;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe709;</i>
+                    <div class="name">lock</div>
+                    <div class="code">&amp;#xe709;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe70a;</i>
+                    <div class="name">mail</div>
+                    <div class="code">&amp;#xe70a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe70b;</i>
+                    <div class="name">manage</div>
+                    <div class="code">&amp;#xe70b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe70c;</i>
+                    <div class="name">message</div>
+                    <div class="code">&amp;#xe70c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe70e;</i>
+                    <div class="name">mine_fill</div>
+                    <div class="code">&amp;#xe70e;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe710;</i>
+                    <div class="name">mobilephone_fill</div>
+                    <div class="code">&amp;#xe710;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe70f;</i>
+                    <div class="name">mobilephone</div>
+                    <div class="code">&amp;#xe70f;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe712;</i>
+                    <div class="name">offline_fill</div>
+                    <div class="code">&amp;#xe712;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe713;</i>
+                    <div class="name">offline</div>
+                    <div class="code">&amp;#xe713;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe714;</i>
+                    <div class="name">order_fill</div>
+                    <div class="code">&amp;#xe714;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe715;</i>
+                    <div class="name">other</div>
+                    <div class="code">&amp;#xe715;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe716;</i>
+                    <div class="name">picture_fill</div>
+                    <div class="code">&amp;#xe716;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe71b;</i>
+                    <div class="name">prompt_fill</div>
+                    <div class="code">&amp;#xe71b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe71c;</i>
+                    <div class="name">qrcode_fill</div>
+                    <div class="code">&amp;#xe71c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe71f;</i>
+                    <div class="name">remind_fill</div>
+                    <div class="code">&amp;#xe71f;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe721;</i>
+                    <div class="name">remind</div>
+                    <div class="code">&amp;#xe721;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe720;</i>
+                    <div class="name">return</div>
+                    <div class="code">&amp;#xe720;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe727;</i>
+                    <div class="name">service_fill</div>
+                    <div class="code">&amp;#xe727;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe728;</i>
+                    <div class="name">service</div>
+                    <div class="code">&amp;#xe728;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe729;</i>
+                    <div class="name">setup_fill</div>
+                    <div class="code">&amp;#xe729;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe72a;</i>
+                    <div class="name">setup</div>
+                    <div class="code">&amp;#xe72a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe72b;</i>
+                    <div class="name">smallscreen</div>
+                    <div class="code">&amp;#xe72b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe72d;</i>
+                    <div class="name">success_fill</div>
+                    <div class="code">&amp;#xe72d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe72e;</i>
+                    <div class="name">success</div>
+                    <div class="code">&amp;#xe72e;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe735;</i>
+                    <div class="name">time_fill</div>
+                    <div class="code">&amp;#xe735;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe738;</i>
+                    <div class="name">trash</div>
+                    <div class="code">&amp;#xe738;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe739;</i>
+                    <div class="name">trash_fill</div>
+                    <div class="code">&amp;#xe739;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe73a;</i>
+                    <div class="name">undo</div>
+                    <div class="code">&amp;#xe73a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe73e;</i>
+                    <div class="name">workbench_fill</div>
+                    <div class="code">&amp;#xe73e;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe639;</i>
+                    <div class="name">导入</div>
+                    <div class="code">&amp;#xe639;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe741;</i>
+                    <div class="name">search</div>
+                    <div class="code">&amp;#xe741;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6ac;</i>
+                    <div class="name">电话</div>
+                    <div class="code">&amp;#xe6ac;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe749;</i>
+                    <div class="name">packup</div>
+                    <div class="code">&amp;#xe749;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe74a;</i>
+                    <div class="name">unfold</div>
+                    <div class="code">&amp;#xe74a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe74b;</i>
+                    <div class="name">wangwang_fill</div>
+                    <div class="code">&amp;#xe74b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe600;</i>
+                    <div class="name">验证码</div>
+                    <div class="code">&amp;#xe600;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe610;</i>
+                    <div class="name">报错-插画</div>
+                    <div class="code">&amp;#xe610;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe643;</i>
+                    <div class="name">朋友</div>
+                    <div class="code">&amp;#xe643;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe644;</i>
+                    <div class="name">所有</div>
+                    <div class="code">&amp;#xe644;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe645;</i>
+                    <div class="name">会员</div>
+                    <div class="code">&amp;#xe645;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe641;</i>
+                    <div class="name">会员</div>
+                    <div class="code">&amp;#xe641;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe637;</i>
+                    <div class="name">空页面</div>
+                    <div class="code">&amp;#xe637;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe78c;</i>
+                    <div class="name">logout</div>
+                    <div class="code">&amp;#xe78c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe7d9;</i>
+                    <div class="name">cloud upload-o</div>
+                    <div class="code">&amp;#xe7d9;</div>
+                </li>
+            
+        </ul>
+        <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">第一步：拷贝项目下面生成的font-face</h3>
+        <pre><code class="lang-js hljs javascript">@font-face {
+  font-family: <span class="hljs-string">'iconfont'</span>;
+  src: url(<span class="hljs-string">'iconfont.eot'</span>);
+  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
+  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
+  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
+  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
+}
+</code></pre>
+        <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
+        <pre><code class="lang-js hljs javascript">.iconfont{
+  font-family:<span class="hljs-string">"iconfont"</span> !important;
+  font-size:<span class="hljs-number">16</span>px;font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>
+
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+
+
+</body>
+</html>

src/assets/service/close.svg

@@ -0,0 +1 @@
+<?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"><svg t="1538015700218" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1650" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M551.37985422 496.46554075l345.36986548-345.3698655a38.83614815 38.83614815 0 0 0-54.91431348-54.91431347L496.46554075 441.55122725 151.09567525 96.18136178a38.83614815 38.83614815 0 0 0-54.91431347 54.91431347l345.36986547 345.3698655-345.36986547 345.36986547a38.83614815 38.83614815 0 0 0 54.91431347 54.91431348l345.3698655-345.36986548 345.36986547 345.36986548a38.7196397 38.7196397 0 0 0 54.91431348 0 38.83614815 38.83614815 0 0 0 0-54.91431348L551.37985422 496.46554075z" p-id="1651"></path></svg>

src/assets/service/empty.svg

@@ -0,0 +1 @@
+<?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"><svg t="1538015693219" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1519" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M606.91554608 463.15641363v255.46418252a38.83614815 38.83614815 0 1 0 77.67229629 0v-255.46418252a38.83614815 38.83614815 0 1 0-77.67229629 0M373.89865718 463.15641363v255.46418252a38.83614815 38.83614815 0 1 0 77.6722963 0v-255.46418252a38.83614815 38.83614815 0 1 0-77.6722963 0" p-id="1520"></path><path d="M348.96585008 226.99379674l-10.79644919-76.89557333 307.65996563-43.26346905 10.83528533 76.93440949-307.69880177 43.22463289z m538.38552177-75.65281659l-153.79114667 21.59289836-14.40821096-102.44975881a44.31204503 44.31204503 0 0 0-17.51510281-29.39896415c-19.922944-15.02958933-50.09863111-13.43730725-66.44864949-11.18481067L327.13993482 73.20265008c-56.5454317 7.96141037-73.01195852 37.24386608-69.51670519 61.98249243l14.36937482 102.60510341-153.79114667 21.63173452a38.83614815 38.83614815 0 1 0 10.83528533 76.89557334l55.72987259-7.80606578a38.05942518 38.05942518 0 0 0-5.0875354 18.17531733v543.62840178c0 42.87510755 34.83602489 77.71113245 77.67229629 77.71113244h543.66723793a77.78880475 77.78880475 0 0 0 77.6722963-77.71113244V346.68680533a38.83614815 38.83614815 0 1 0-77.6722963 0v543.66723792l-543.70607407-0.03883614V346.68680533a38.52545897 38.52545897 0 0 0-10.91295763-26.83577837l651.78707436-91.61447348a38.83614815 38.83614815 0 0 0 33.01072593-43.8848474 38.40895052 38.40895052 0 0 0-43.88484741-33.01072593z" p-id="1521"></path></svg>

src/assets/service/icon_Pop-ups_close.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
+    <title>元素/基础图标/icon_close</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="元素/基础图标/icon_close">
+            <rect id="Rectangle-2" x="2" y="2" width="20" height="20"></rect>
+            <path d="M12,11 L12,3.5 C12,3.22385763 12.2238576,3 12.5,3 C12.7761424,3 13,3.22385763 13,3.5 L13,11 L20.5,11 C20.7761424,11 21,11.2238576 21,11.5 C21,11.7761424 20.7761424,12 20.5,12 L13,12 L13,19.5 C13,19.7761424 12.7761424,20 12.5,20 C12.2238576,20 12,19.7761424 12,19.5 L12,12 L4.5,12 C4.22385763,12 4,11.7761424 4,11.5 C4,11.2238576 4.22385763,11 4.5,11 L12,11 Z" id="Combined-Shape" fill="#B2B2B2" transform="translate(12.500000, 11.500000) rotate(45.000000) translate(-12.500000, -11.500000) "></path>
+        </g>
+    </g>
+</svg>

src/assets/service/icon_pay_wechat.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>图标/支付/icon_pay_wechat</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <polygon id="path-1" points="2 3 21.9487163 3 21.9487163 20.6005461 2 20.6005461"></polygon>
+    </defs>
+    <g id="图标/支付/icon_pay_wechat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
+        <rect id="Combined-Shape" fill="#1AAD19" x="0" y="0" width="24" height="24" rx="2"></rect>
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="Clip-2"></g>
+        <path d="M9.81906093,13.9295605 C9.74687586,13.9659659 9.66553255,13.9870697 9.57906974,13.9870697 C9.37906761,13.9870697 9.20528874,13.8770003 9.11382018,13.7141999 L9.07889376,13.6376917 L7.62250735,10.4416963 C7.60680752,10.4069974 7.59708046,10.367634 7.59708046,10.3294084 C7.59708046,10.1820803 7.71642189,10.062682 7.86369309,10.062682 C7.92353445,10.062682 7.97871138,10.0825912 8.02319422,10.1156973 L9.74187011,11.3393168 C9.86746872,11.4214564 10.0174703,11.4696367 10.1787917,11.4696367 C10.2749816,11.4696367 10.3668483,11.4516046 10.4522872,11.4206032 L18.5347398,7.82335207 C17.0860326,6.11582533 14.6999435,5 11.9999147,5 C7.58155128,5 4,7.98473035 4,11.6667947 C4,13.6755192 5.07759966,15.4837296 6.7641933,16.7059838 C6.8994621,16.8025718 6.98802959,16.9612766 6.98802959,17.1403456 C6.98802959,17.1995044 6.97540147,17.2537143 6.9598723,17.3102564 C6.82522922,17.8127646 6.60964103,18.6174945 6.59951578,18.6550944 C6.58273517,18.718235 6.55651191,18.7839923 6.55651191,18.8499771 C6.55651191,18.9973051 6.67585334,19.1166466 6.82335207,19.1166466 C6.88108875,19.1166466 6.92847264,19.0951446 6.97727863,19.0669305 L8.72866249,18.0558275 C8.86040451,17.9798882 8.99988268,17.9327318 9.15352482,17.9327318 C9.2352663,17.9327318 9.31427738,17.9453599 9.38856714,17.9681133 C10.2056976,18.2030987 11.0871632,18.3336462 11.9999147,18.3336462 C16.4180505,18.3336462 20,15.3486314 20,11.6667947 C20,10.551595 19.6696779,9.50129943 19.0887275,8.57739879 L9.87742332,13.8957718 L9.81906093,13.9295605 Z" id="Fill-1" fill="#FFFFFF" mask="url(#mask-2)"></path>
+    </g>
+</svg>

src/assets/service/red_info_prompt.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#FB6161" d="M60 30.37C60 13.431 46.569 0 29.63 0 13.43 0 0 13.431 0 30.37 0 46.57 13.431 60 29.63 60 46.569 60 60 46.569 60 30.37z"/>
+        <path fill="#FFF" d="M29.736 16.129h.528c1.102 0 1.961.891 1.92 1.991l-.642 17.39c-.02.552-.485.997-1.04.997h-1.005a1.042 1.042 0 0 1-1.04-.997l-.642-17.39a1.913 1.913 0 0 1 1.92-1.991zM30 43.871a2.258 2.258 0 1 1 0-4.516 2.258 2.258 0 0 1 0 4.516z"/>
+    </g>
+</svg>

src/components/BackToTop/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <transition :name="transitionName">
+    <div class="back-to-ceiling" @click="backToTop" v-show="visible" :style="customStyle">
+      <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px; width: 16px;">
+        <title>回到顶部</title>
+        <g>
+          <path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"></path>
+        </g>
+      </svg>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'BackToTop',
+  props: {
+    visibilityHeight: {
+      type: Number,
+      default: 400
+    },
+    backPosition: {
+      type: Number,
+      default: 0
+    },
+    customStyle: {
+      type: Object,
+      default: function() {
+        return {
+          right: '50px',
+          bottom: '50px',
+          width: '40px',
+          height: '40px',
+          'border-radius': '4px',
+          'line-height': '45px',
+          background: '#e7eaf1'
+        }
+      }
+    },
+    transitionName: {
+      type: String,
+      default: 'fade'
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      interval: null
+    }
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll)
+    if (this.interval) {
+      clearInterval(this.interval)
+    }
+  },
+  methods: {
+    handleScroll() {
+      this.visible = window.pageYOffset > this.visibilityHeight
+    },
+    backToTop() {
+      const start = window.pageYOffset
+      let i = 0
+      this.interval = setInterval(() => {
+        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
+        if (next <= this.backPosition) {
+          window.scrollTo(0, this.backPosition)
+          clearInterval(this.interval)
+        } else {
+          window.scrollTo(0, next)
+        }
+        i++
+      }, 16.7)
+    },
+    easeInOutQuad(t, b, c, d) {
+      if ((t /= d / 2) < 1) return c / 2 * t * t + b
+      return -c / 2 * (--t * (t - 2) - 1) + b
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .back-to-ceiling {
+    position: fixed;
+    display: inline-block;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .back-to-ceiling:hover {
+    background: #d5dbe7;
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity .5s;
+  }
+
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0
+  }
+
+  .back-to-ceiling .Icon {
+    fill: #9aaabf;
+    background: none;
+  }
+</style>

src/components/Breadcrumb/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path" v-if='item.meta.title'>
+        <span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{generateTitle(item.meta.title)}}</span>
+        <router-link v-else :to="item.redirect||item.path">{{generateTitle(item.meta.title)}}</router-link>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import { generateTitle } from '@/utils/i18n'
+
+export default {
+  created() {
+    this.getBreadcrumb()
+  },
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  },
+  methods: {
+    generateTitle,
+    getBreadcrumb() {
+      let matched = this.$route.matched.filter(item => item.name)
+      const first = matched[0]
+      if (first && first.name !== 'dashboard') {
+        matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
+      }
+      this.levelList = matched
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-breadcrumb.el-breadcrumb {
+    display: inline-block;
+    font-size: 14px;
+    line-height: 50px;
+    margin-left: 10px;
+    .no-redirect {
+      color: #97a8be;
+      cursor: text;
+    }
+  }
+</style>

src/components/Charts/keyboard.vue

@@ -0,0 +1,152 @@
+<template>
+  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      const xAxisData = []
+      const data = []
+      const data2 = []
+      for (let i = 0; i < 50; i++) {
+        xAxisData.push(i)
+        data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
+        data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
+      }
+      this.chart.setOption(
+        {
+          backgroundColor: '#08263a',
+          xAxis: [{
+            show: false,
+            data: xAxisData
+          }, {
+            show: false,
+            data: xAxisData
+          }],
+          visualMap: {
+            show: false,
+            min: 0,
+            max: 50,
+            dimension: 0,
+            inRange: {
+              color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+            }
+          },
+          yAxis: {
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#4a657a'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#08263f'
+              }
+            },
+            axisTick: {
+              show: false
+            }
+          },
+          series: [{
+            name: 'back',
+            type: 'bar',
+            data: data2,
+            z: 1,
+            itemStyle: {
+              normal: {
+                opacity: 0.4,
+                barBorderRadius: 5,
+                shadowBlur: 3,
+                shadowColor: '#111'
+              }
+            }
+          }, {
+            name: 'Simulate Shadow',
+            type: 'line',
+            data,
+            z: 2,
+            showSymbol: false,
+            animationDelay: 0,
+            animationEasing: 'linear',
+            animationDuration: 1200,
+            lineStyle: {
+              normal: {
+                color: 'transparent'
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: '#08263a',
+                shadowBlur: 50,
+                shadowColor: '#000'
+              }
+            }
+          }, {
+            name: 'front',
+            type: 'bar',
+            data,
+            xAxisIndex: 1,
+            z: 3,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5
+              }
+            }
+          }],
+          animationEasing: 'elasticOut',
+          animationEasingUpdate: 'elasticOut',
+          animationDelay(idx) {
+            return idx * 20
+          },
+          animationDelayUpdate(idx) {
+            return idx * 20
+          }
+        })
+    }
+  }
+}
+</script>

src/components/Charts/lineMarker.vue

@@ -0,0 +1,227 @@
+<template>
+  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      this.chart.setOption({
+        backgroundColor: '#394056',
+        title: {
+          top: 20,
+          text: 'Requests',
+          textStyle: {
+            fontWeight: 'normal',
+            fontSize: 16,
+            color: '#F1F1F3'
+          },
+          left: '1%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        },
+        legend: {
+          top: 20,
+          icon: 'rect',
+          itemWidth: 14,
+          itemHeight: 5,
+          itemGap: 13,
+          data: ['CMCC', 'CTCC', 'CUCC'],
+          right: '4%',
+          textStyle: {
+            fontSize: 12,
+            color: '#F1F1F3'
+          }
+        },
+        grid: {
+          top: 100,
+          left: '3%',
+          right: '4%',
+          bottom: '2%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
+        }],
+        yAxis: [{
+          type: 'value',
+          name: '(%)',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          axisLabel: {
+            margin: 10,
+            textStyle: {
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        }],
+        series: [{
+          name: 'CMCC',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(137, 189, 27, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(137, 189, 27, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(137,189,27)',
+              borderColor: 'rgba(137,189,2,0.27)',
+              borderWidth: 12
+
+            }
+          },
+          data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
+        }, {
+          name: 'CTCC',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(0, 136, 212, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(0, 136, 212, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(0,136,212)',
+              borderColor: 'rgba(0,136,212,0.2)',
+              borderWidth: 12
+
+            }
+          },
+          data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
+        }, {
+          name: 'CUCC',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(219, 50, 51, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(219, 50, 51, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(219,50,51)',
+              borderColor: 'rgba(219,50,51,0.2)',
+              borderWidth: 12
+            }
+          },
+          data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
+        }]
+      })
+    }
+  }
+}
+</script>

src/components/Charts/mixChart.vue

@@ -0,0 +1,269 @@
+<template>
+  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      const xData = (function() {
+        const data = []
+        for (let i = 1; i < 13; i++) {
+          data.push(i + 'month')
+        }
+        return data
+      }())
+      this.chart.setOption({
+        backgroundColor: '#344b58',
+        title: {
+          text: 'statistics',
+          x: '20',
+          top: '20',
+          textStyle: {
+            color: '#fff',
+            fontSize: '22'
+          },
+          subtextStyle: {
+            color: '#90979c',
+            fontSize: '16'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            textStyle: {
+              color: '#fff'
+            }
+          }
+        },
+        grid: {
+          borderWidth: 0,
+          top: 110,
+          bottom: 95,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        legend: {
+          x: '5%',
+          top: '10%',
+          textStyle: {
+            color: '#90979c'
+          },
+          data: ['female', 'male', 'average']
+        },
+        calculable: true,
+        xAxis: [{
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#90979c'
+            }
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitArea: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0
+
+          },
+          data: xData
+        }],
+        yAxis: [{
+          type: 'value',
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#90979c'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0
+          },
+          splitArea: {
+            show: false
+          }
+        }],
+        dataZoom: [{
+          show: true,
+          height: 30,
+          xAxisIndex: [
+            0
+          ],
+          bottom: 30,
+          start: 10,
+          end: 80,
+          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+          handleSize: '110%',
+          handleStyle: {
+            color: '#d3dee5'
+
+          },
+          textStyle: {
+            color: '#fff' },
+          borderColor: '#90979c'
+
+        }, {
+          type: 'inside',
+          show: true,
+          height: 15,
+          start: 1,
+          end: 35
+        }],
+        series: [{
+          name: 'female',
+          type: 'bar',
+          stack: 'total',
+          barMaxWidth: 35,
+          barGap: '10%',
+          itemStyle: {
+            normal: {
+              color: 'rgba(255,144,128,1)',
+              label: {
+                show: true,
+                textStyle: {
+                  color: '#fff'
+                },
+                position: 'insideTop',
+                formatter(p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              }
+            }
+          },
+          data: [
+            709,
+            1917,
+            2455,
+            2610,
+            1719,
+            1433,
+            1544,
+            3285,
+            5208,
+            3372,
+            2484,
+            4078
+          ]
+        },
+
+        {
+          name: 'male',
+          type: 'bar',
+          stack: 'total',
+          itemStyle: {
+            normal: {
+              color: 'rgba(0,191,183,1)',
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: 'top',
+                formatter(p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              }
+            }
+          },
+          data: [
+            327,
+            1776,
+            507,
+            1200,
+            800,
+            482,
+            204,
+            1390,
+            1001,
+            951,
+            381,
+            220
+          ]
+        }, {
+          name: 'average',
+          type: 'line',
+          stack: 'total',
+          symbolSize: 10,
+          symbol: 'circle',
+          itemStyle: {
+            normal: {
+              color: 'rgba(252,230,48,1)',
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: 'top',
+                formatter(p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              }
+            }
+          },
+          data: [
+            1036,
+            3693,
+            2962,
+            3810,
+            2519,
+            1915,
+            1748,
+            4675,
+            6209,
+            4323,
+            2865,
+            4298
+          ]
+        }
+        ]
+      })
+    }
+  }
+}
+</script>

src/components/Charts/mixins/resize.js

@@ -0,0 +1,15 @@
+import { debounce } from '@/utils'
+
+export default {
+  mounted() {
+    this.__resizeHanlder = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHanlder)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.__resizeHanlder)
+  }
+}