111

.babelrc

+{
+  "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"],
+    }
+  },
+
+  "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ]
+}
+
+

.editorconfig

+# 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

+build/*.js
+config/*.js
+src/assets

.eslintrc.js

+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

+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

+node_modules
+.svn
+dist
+.git
+/.idea

.postcssrc.js

+// 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: {}
+  },
+  "postcss-pxtorem": {
+    rootValue: 32,
+    propList: ["*"]
+  }
+};

.travis.yml

+language: node_js
+node_js: stable
+script: npm run test
+notifications:
+  email: false

LICENSE

+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

+<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

+<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

babel.config.js

+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+  plugins: [
+    [
+      "import",
+      {
+        libraryName: "vant",
+        libraryDirectory: "es",
+        style: true
+      },
+      "vant"
+    ]
+  ]
+};

build/build.js

+'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

+'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

+'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,
+        publicPath:'../../',
+        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

+'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

+"use strict";
+const path = require("path");
+const utils = require("./utils");
+const config = require("../config");
+const vueLoaderConfig = require("./vue-loader.conf");
+const webpack = require("webpack");
+
+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"
+  },
+  externals: {
+    BMap: "BMap"
+  },
+  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"
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: "jquery",
+      jQuery: "jquery"
+    })
+  ]
+};

build/webpack.dev.conf.js

+'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

+'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

+module.exports = {
+  NODE_ENV: '"development"',
+  ENV_CONFIG: '"dev"',
+  // BASE_API: '"http://api.test1.sgjyun.com"'
+   BASE_API: '"http://localhost:9536"'
+  //  BASE_API:'"http://api.scrm.kuyicloud.com"',//'"http://localhost:9534"'
+    // BASE_API: '"http://mt.api.sgjyun.com"'
+  //  SSO_HOST: '"https://testsso.sgjyun.com"',
+  //  SRCM_HOST: '"http://test1.sgjyun.com"',
+  //  XT_HOST: '"http://xt.test.sgjyun.com"',
+  //  MIRCO_MALL_HOST: '"http://mall.test.sgjyun.com"',
+  //  CDM_HOST: '"http://cdm.test.sgjyun.com"',
+};

config/index.js

+'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: 'microweb.kuyicloud.com',
+    host: 'localhost',
+    // host: 'jk.kuyicloud.com',
+    //  host: 'mt.sgjyun.com',
+    // port: 8091, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    // host: 'test1.sgjyun.com',
+    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

+module.exports = {
+  NODE_ENV: '"production"',
+  ENV_CONFIG: '"prod"',
+  BASE_API: '"http://api.scrm.kuyicloud.com"',
+  // BASE_API: '"http://api.test1.sgjyun.com"',
+
+  // SSO_HOST: '"https://sso.kuyicloud.com"',
+  // SRCM_HOST: '"http://jk.kuyicloud.com"',
+  // XT_HOST: '"http://xt.kuyicloud.com"',
+  // MIRCO_MALL_HOST: '"http://mall.kuyicloud.com"',
+  // CDM_HOST: '"http://cdm.kuyicloud.com"',
+}

config/sit.env.js

+module.exports = {
+  NODE_ENV: '"production"',
+  ENV_CONFIG: '"sit"',
+  // BASE_API: '"http://api.jk.test.sgjyun.com"',
+  BASE_API: '"http://mt.api.sgjyun.com"',
+  SSO_HOST: '"https://testsso.sgjyun.com"',
+  SRCM_HOST: '"http://test1.sgjyun.com"',
+  XT_HOST: '"http://xt.test.sgjyun.com"',
+  MIRCO_MALL_HOST: '"htts://mall.test.sgjyun.com"',
+  CDM_HOST: '"http://cdm.test.sgjyun.com"',
+}

index.html

+<!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="”referrer”" content="”never”" />
+    <meta name="referrer" content="no-referrer" />
+    <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 -->
+    <script src="http://api.map.baidu.com/api?v=2.0&ak=？&callback=init"></script>
+    <link
+      rel="stylesheet"
+      href="//at.alicdn.com/t/font_1480998_bf2iq8rd9p9.css"
+    />
+    <link href="//vjs.zencdn.net/4.9/video-js.css" rel="stylesheet" />
+    <script src="//vjs.zencdn.net/4.9/video.js"></script>
+  </body>
+</html>

package.json

+{
+  "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": {
+    "@types/moment": "^2.13.0",
+    "@types/qrcode": "^1.3.3",
+    "@types/spark-md5": "^3.0.1",
+    "@types/swiper": "^4.4.3",
+    "ajv": "^6.5.3",
+    "axios": "0.17.1",
+    "clipboard": "1.7.1",
+    "codemirror": "5.32.0",
+    "connect": "3.6.6",
+    "cube-ui": "^1.12.26",
+    "driver.js": "0.5.2",
+    "dropzone": "5.2.0",
+    "echarts": "3.8.5",
+    "element-ui": "^2.10.1",
+    "file-saver": "1.3.3",
+    "font-awesome": "4.7.0",
+    "js-cookie": "2.2.0",
+    "jsonlint": "1.6.3",
+    "jszip": "3.1.5",
+    "mint-ui": "^2.2.13",
+    "mockjs": "1.0.1-beta3",
+    "moment": "^2.24.0",
+    "normalize.css": "^7.0.0",
+    "nprogress": "0.2.0",
+    "print-js": "^1.0.50",
+    "qrcode": "^1.4.1",
+    "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",
+    "spark-md5": "^3.0.0",
+    "style-loader": "^1.0.0",
+    "swiper": "^4.5.1",
+    "v-viewer": "^1.4.2",
+    "vant": "^2.2.12",
+    "vue": "2.5.16",
+    "vue-baidu-map": "^0.21.22",
+    "vue-count-to": "1.0.13",
+    "vue-i18n": "7.3.2",
+    "vue-infinite-scroll": "^2.0.2",
+    "vue-multiselect": "2.0.8",
+    "vue-photo-preview": "^1.1.3",
+    "vue-router": "3.0.1",
+    "vue-splitpane": "1.0.2",
+    "vuedraggable": "^2.23.0",
+    "vuescroll": "^4.13.1",
+    "vuex": "3.0.1",
+    "webim-tencent": "^1.0.2",
+    "xlsx": "^0.11.16"
+  },
+  "devDependencies": {
+    "@types/jquery": "^3.3.31",
+    "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-import": "^1.12.2",
+    "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",
+    "jquery": "^3.4.1",
+    "koa2-cors": "^2.0.6",
+    "lint-staged": "7.2.0",
+    "node-notifier": "5.1.2",
+    "node-sass": "^4.13.1",
+    "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-pxtorem": "^4.0.1",
+    "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-merge": "4.1.1"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/App.vue

+<template>
+  <div id="app" class="app">
+    <router-view v-if="isRouterAlive"></router-view>
+  </div>
+</template>
+
+<script>
+  export default{
+    name: 'App',
+    provide () {
+      return {
+        reload:this.reload
+      }
+    },
+    data(){
+      return{
+        isRouterAlive:true
+      }
+    },
+    methods: {
+       reload(){
+         this.isRouterAlive = false;
+         this.$nextTick(function(){
+           this.isRouterAlive = true;
+         })
+       }
+    }
+  }
+</script>
+
+
+<style lang="scss" scoped>
+.app{
+  -webkit-overflow-scrolling: touch;
+}
+</style>

src/api/district.js

+import request from '@/utils/request'
+
+export function GetDistrictsByUpid(params){
+    return request({
+        url:'/api/district/getdistrictsbyupid',
+        method:'get',
+        params: params
+    })
+}

src/api/kefu/tencentim.js

+import request from '@/utils/request'
+
+export function getusersig() {
+  return request({
+    url: '/api/tencent/usersig', 
+    method: 'get',
+  })
+}
+export function GetAllMembers() {
+  return request({
+    url: '/api/members/all', 
+    method: 'get',
+  })
+}
+

src/api/login/login.js

+import request from '@/utils/request'
+import org from '../../router/modules/org'
+
+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(phone) {
+  console.log('phone', phone)
+  return request({
+    url: '/api/password/code?phone=' + phone,
+    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
+  })
+}
+
+export function submitModifyPwdAction(phone, password, code) {
+  const params = {
+    phone: phone,
+    password: password,
+    code: code
+  }
+  return request({
+    url: '/api/save/register',
+    method: 'Post',
+    params: params
+  })
+}
+
+export function getAllProvince(params) {
+  console.log('params', params)
+  return request({
+    url: '/api/login/getallprovince',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function NoPassToLogin(phone, code) {
+  const params = {
+    phone: phone,
+    code: code
+  }
+  console.log('code', code)
+  return request({
+    url: '/api/login/nopasslogin',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function getCode(phone) {
+  const params = {
+    phone: phone
+  }
+  return request({
+    url: '/api/login/getcode',
+    method: 'Post',
+    params: params
+  })
+}
+
+export function NextStep(phone, code) {
+  const params = {
+    phone: phone,
+    code: code
+  }
+  return request({
+    url: '/api/login/nextstep',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function Accomplish(phone, newpassword, confirmpassword) {
+  const params = {
+    // eslint-disable-next-line no-dupe-keys
+    phone,
+    phone,
+    newpassword: newpassword,
+    confirmpassword: confirmpassword
+  }
+  return request({
+    url: '/api/login/accomplish',
+    method: 'Post',
+    params: params
+  })
+}
+
+export function getAllOrgName(id) {
+  const params = {
+    id: id
+  }
+  return request({
+    url: '/api/login/getallorgname',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function getCityByid(id, params) {
+  return request({
+    url: '/api/login/getcitybyid?id=' + id,
+    method: 'Get',
+    params: params
+  })
+}
+
+export function getAllOrgType(params) {
+  return request({
+    url: '/api/login/getallorgtype',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function SaveOrgInformation(data, id) {
+  console.log('data是什么', data)
+  return request({
+    url: '/api/login/saveorginformation?id=' + id,
+    method: 'Post',
+    data: data
+  })
+}
+
+export function getBloodDialysisPatient(page, limit, id) {
+  const params = {
+    page: page,
+    limit: limit,
+    id: id
+  }
+  return request({
+    url: '/api/login/getblooddialysispatient',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function GetDoctroAdvice(patientid, orgid, starttime, endtime, searchval) {
+  console.log('patientid', patientid)
+  console.log('starttime', starttime)
+  console.log('orgid', orgid)
+  console.log('endtime', endtime)
+
+  const params = {
+    patientid: patientid,
+    starttime: starttime,
+    orgid: orgid,
+    endtime: endtime,
+    searchval: searchval
+  }
+
+  return request({
+    url: '/api/site/getdoctoradvice',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function SaveSearch(searchval) {
+  const params = {
+    searchval: searchval
+  }
+  return request({
+    url: '/api/site/savesearch',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function toSeacherDoctorAdvice(patientid, orgid, searchval) {
+  const params = {
+    patientid: patientid,
+    orgid: orgid,
+    searchval: searchval
+  }
+  return request({
+    url: '/api/site/toseacherdoctoradvice',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function deleteDoctorAdvice(id, params) {
+  return request({
+    url: '/api/site/deleteDoctorAdvice?id=' + id,
+    method: 'Get',
+    params: params
+  })
+}

src/api/micro/micro.js

+import request from '@/utils/request';
+import org from '../../router/modules/org';
+import { link } from 'fs';
+
+export function ToLogin(tel, psd) {
+  const params = {
+    tel: tel,
+    psd: psd
+  }
+  return request({
+    url: '/api/site/gettologin',
+    method: 'Post',
+    params: params
+  })
+}

src/api/mpwechat/material.js

+import request from '@/utils/request'
+
+export function GetMaterials(params) {
+    return request({
+        url: '/api/mpwechat/media/material',
+        method: 'get',
+        params:params
+    })
+}

src/api/mpwechat/mpmenus.js

+import request from '@/utils/request'
+
+export function GetMenus() {
+  return request({
+    url: '/api/mpwechat/menus',
+    method: 'get',
+  })
+}
+
+export function SaveMenus(data) {
+  return request({
+    url: '/api/mpwechat/savemenus',
+    method: 'put',
+    data:data,
+  })
+}
+
+export function DeleteMenu(data) {
+  return request({
+    url: '/api/mpwechat/deletemenus',
+    method: 'post',
+    data:data,
+  })
+}

src/api/mpwechat/mpreply.js

+import request from '@/utils/request'
+
+export function GetSubscribeRplay() {
+    return request({
+        url: '/api/mpwechat/reply/subscribe',
+        method: 'get',
+    })
+}
+
+export function SaveSubscribeRplay(data) {
+    return request({
+        url: '/api/mpwechat/reply/subscribe',
+        method: 'put',
+        data:data,
+    })
+}
+    
+export function GetKeyWordReplys(params) {
+    return request({
+        url: '/api/mpwechat/reply/kewords',
+        method: 'get',
+        params:params,
+    })
+}
+
+export function CreateKeyWordReply(data) {
+    return request({
+        url: '/api/mpwechat/reply/keword',
+        method: 'post',
+        data:data,
+    })
+}
+export function EditKeyWordReply(id,data) {
+    return request({
+        url: '/api/mpwechat/reply/keword?id='+id,
+        method: 'put',
+        data:data,
+    })
+}
+
+export function DeleteReplys(data) {
+    return request({
+        url: '/api/mpwechat/replys',
+        method: 'delete',
+        data:data,
+    })
+}

src/api/mpwechat/mpwechat.js

+import request from '@/utils/request'
+
+export function GetAuthorizationInfo() {
+  return request({
+    url: '/api/mpwechat/authorization',
+    method: 'get',
+  })
+}
+
+export function GetAuthUrl() {
+  return request({
+    url: '/api/mpwechat/authurl',
+    method: 'get',
+  })
+}

src/api/org/orginfo.js

+import request from '@/utils/request'
+
+export function GetOrgInfo(){
+    return request({
+        url:'/api/orginfo/getinfo',
+        method:'get',
+    })
+}
+
+export function SaveOrgGallery(data){
+    return request({
+        url:'/api/orginfo/savegallery',
+        method:'Post',
+        data:data,
+    })
+}
+
+export function EditOrgInfo(data){
+    return request({
+        url:'/api/orginfo/edit',
+        method:'Post',
+        data:data,
+    })
+}
+
+export function DeleteOrgGallery(id){
+    return request({
+        url:'/api/orginfo/deletegallery',
+        method:'delete',
+        params:{id:id},
+    })
+}

src/api/patient/patient.js

+import request from '@/utils/request'
+import org from '../../router/modules/org'
+
+export function GenerateDialysisNo(phone) {
+  console.log('phone是什么', phone)
+  return request({
+    url: '/api/patient/getneratedialysisno?phone=' + phone,
+    method: 'Get'
+  })
+}
+
+export function savePatient(data, telephone) {
+  console.log('data是什么', data)
+  return request({
+    url: '/api/patient/savepatient?telephone=' + telephone,
+    method: 'Post',
+    data: data
+  })
+}
+
+export function getCourseManagement(patientid, orgid, startime, endtime) {
+  console.log('startime', startime)
+  console.log('endtime', endtime)
+  const params = {
+    patientid: patientid,
+    orgid: orgid,
+    startime: startime,
+    endtime: endtime
+  }
+  return request({
+    url: '/api/patient/getcoursemanagement',
+    method: 'Post',
+    params: params
+  })
+}
+
+export function toDeleteCouseManage(id, orgid) {
+  const params = {
+    id: id,
+    orgid: orgid
+  }
+
+  return request({
+    url: '/api/patient/todeletecousemanage',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function getMissionInformation(patientid, orgid, startime, endtime) {
+  const params = {
+    patientid: patientid,
+    orgid: orgid,
+    startime: startime,
+    endtime: endtime
+  }
+
+  return request({
+    url: '/api/patient/getmissioninformation',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function getRecordSave(patientid, orgid, startime, endtime) {
+  const params = {
+    patientid: patientid,
+    orgid: orgid,
+    startime: startime,
+    endtime: endtime
+  }
+
+  return request({
+    url: '/api/patient/getrecordsave',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function getcheckPatientData(patientid, orgid, startime, endtime) {
+  const params = {
+    patientid: patientid,
+    orgid: orgid,
+    startime: startime,
+    endtime: endtime
+  }
+
+  return request({
+    url: '/api/patient/getcheckpatientdata',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function getlongDialysis(patientid, orgid, startime, endtime) {
+  const params = {
+    patientid: patientid,
+    orgid: orgid,
+    startime: startime,
+    endtime: endtime
+  }
+
+  return request({
+    url: '/api/patient/getlongdialysis',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function getDialysRecord(patientid, orgid, startime, endtime) {
+  const params = {
+    patientid: patientid,
+    orgid: orgid,
+    startime: startime,
+    endtime: endtime
+  }
+  return request({
+    url: '/api/patient/getdialysrecord',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function toSeacherCourseManagement(patientid, orgid, seacherVal) {
+  const params = {
+    patientid: patientid,
+    orgid: orgid,
+    seacherVal: seacherVal
+  }
+
+  return request({
+    url: '/api/site/toseacherCourseManagement',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function toDeleteSaveRecord(id, params) {
+  return request({
+    url: '/api/site/todeletesaverecord?id=' + id,
+    method: 'Get',
+    params: params
+  })
+}
+
+export function toSeacherRecord(patientid, orgid, seacherVal) {
+  const params = {
+    patientid: patientid,
+    orgid: orgid,
+    seacherVal: seacherVal
+  }
+  return request({
+    url: '/api/site/toSeacherRecord',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function deleteMissionInformation(id, orgid) {
+  const params = {
+    id: id,
+    orgid: orgid
+  }
+  return request({
+    url: '/api/site/deletemissioninformation',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function toSeacherMissionInformation(patientid, orgid, seacherVal) {
+  const params = {
+    patientid: patientid,
+    orgid: orgid,
+    seacherVal: seacherVal
+  }
+  return request({
+    url: '/api/patient/toseachermissioninformation',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function GetPatientSchedules(patientid, orgid, startime, endtime) {
+  const params = {
+    patientid: patientid,
+    orgid: orgid,
+    startime: startime,
+    endtime: endtime
+  }
+
+  return request({
+    url: '/api/patient/getpatientschedules',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function deleteScheduleInformation(id, params) {
+  return request({
+    url: '/api/patient/deletescheduleinformation?id=' + id,
+    method: 'Get',
+    params: params
+  })
+}
+
+export function toSeacherScheduleInformation(patientid, orgid, seacherVal) {
+  const params = {
+    patientid: patientid,
+    orgid: orgid,
+    seacherVal: seacherVal
+  }
+
+  return request({
+    url: '/api/patient/toseacherscheduleinformation',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function getPatientType(patientid, orgid) {
+  const params = {
+    patientid: patientid,
+    orgid: orgid
+  }
+  return request({
+    url: '/api/patient/getpatienttype',
+    method: 'Get',
+    params: params
+  })
+}
+
+export function checkAll(checkdate, patientid, orgid) {
+  const params = {
+    checkdate: checkdate,
+    patientid: patientid,
+    orgid: orgid
+  }
+  return request({
+    url: '/api/patient/checkall',
+    method: 'Get',
+    params: params
+  })
+}

src/api/qiniu.js

+import request from '@/utils/request'
+
+export function getToken(params) {
+  console.log('qiniu是什么===================')
+  return request({
+    url: '/api/qiniu/uptoken', // 假地址 自行替换
+    params: params,
+    method: 'get'
+  })
+}

src/api/role/admin.js

+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

+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

+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

+/* 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

+import Vue from 'vue'
+
+export default new Vue()

src/assets/icon/demo.css

+*{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

+
+<!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

+
+<!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

+
+<!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

+
+@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

+(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

+<?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

+*{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

+
+<!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

+
+<!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

+
+<!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>