airport-ui.git - Gitblit

parent: d748f46f | 补丁 | 提交 | ignore whitespace

明梦爽

2021-10-31 3838b17c3668d3e540c82dd84e437517a9ee6967

复制过来

33个文件已添加

	.browserslistrc	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	.editorconfig	5 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	.eslintrc.js	18 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	.gitignore	21 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	.prettierrc	5 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	babel.config.js	14 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	package-lock.json	25225 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	package.json	31 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	postcss.config.js	5 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	public/favicon.ico	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	public/index.html	17 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/App.vue	15 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/css/global.css	24 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/fonts/demo.css	370 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/fonts/demo_fontclass.html	100 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/fonts/demo_symbol.html	143 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/fonts/demo_unicode.html	138 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/fonts/iconfont.css	37 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/fonts/iconfont.eot	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/fonts/iconfont.js	1 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/fonts/iconfont.svg	63 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/fonts/iconfont.ttf	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/fonts/iconfont.woff	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/heima.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/logo.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/qinaide.jpg	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/Home.vue	147 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/Login.vue	148 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/Welcome.vue	15 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/user/Users.vue	121 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main.js	26 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/plugins/element.js	48 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/router.js	36 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 .browserslistrc

New file
@@ -0,0 +1,3 @@
> 1%
last 2 versions
not ie <= 8

 .editorconfig

New file
@@ -0,0 +1,5 @@
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

 .eslintrc.js

New file
@@ -0,0 +1,18 @@
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'space-before-function-paren': 0
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

 .gitignore

New file
@@ -0,0 +1,21 @@
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

 .prettierrc

New file
@@ -0,0 +1,5 @@
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": none
}

 babel.config.js

New file
@@ -0,0 +1,14 @@
module.exports = {
  'presets': [
    '@vue/app'
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk'
      }
    ]
  ]
}

 package-lock.json

New file
Diff too large

 package.json

New file
@@ -0,0 +1,31 @@
{
  "name": "vue_shop",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "element-ui": "^2.4.5",
    "node_module": "^0.0.0",
    "vue": "^2.5.22",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.4.0",
    "@vue/cli-plugin-eslint": "^3.4.0",
    "@vue/cli-service": "^3.4.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-template-compiler": "^2.5.21"
  }
}

 postcss.config.js

New file
@@ -0,0 +1,5 @@
module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

 public/favicon.ico


 public/index.html

New file
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue_shop</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue_shop doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 src/App.vue

New file
@@ -0,0 +1,15 @@
<template>
  <div id="app">
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
</style>

 src/assets/css/global.css

New file
@@ -0,0 +1,24 @@
/* 全局样式表 */
html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}

/* 改变卡片视图的阴影 */
.el-card {
  box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
}
.el-table {
  margin-top: 15px;
  font-size: 13px;
}
.el-pagination {
  margin-top: 15px;
}

 src/assets/fonts/demo.css

New file
@@ -0,0 +1,370 @@
*{margin: 0;padding: 0;list-style: none;}
/*
KISSY CSS Reset
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
特色：1. 适应中文；2. 基于最新主流浏览器。
维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
 */

/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
  margin: 0;
  padding: 0;
}

/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {
  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/** 重置列表元素 **/
ul, ol { list-style: none; }

/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: underline; }


/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */

/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

/* 清除浮动 */
.ks-clear:after, .clear:after {
  content: '\20';
  display: block;
  height: 0;
  clear: both;
}
.ks-clear, .clear {
  *zoom: 1;
}

.main {
  padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}

.helps{margin-top:40px;}
.helps pre{
  padding:20px;
  margin:10px 0;
  border:solid 1px #e7e1cd;
  background-color: #fffdef;
  overflow: auto;
}

.icon_lists{
  width: 100% !important;

}

.icon_lists li{
  float:left;
  width: 100px;
  height:180px;
  text-align: center;
  list-style: none !important;
}
.icon_lists .icon{
  font-size: 42px;
  line-height: 100px;
  margin: 10px 0;
  color:#333;
  -webkit-transition: font-size 0.25s ease-out 0s;
  -moz-transition: font-size 0.25s ease-out 0s;
  transition: font-size 0.25s ease-out 0s;

}
.icon_lists .icon:hover{
  font-size: 100px;
}



.markdown {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
}

.highlight {
  line-height: 1.5;
}

.markdown img {
  vertical-align: middle;
  max-width: 100%;
}

.markdown h1 {
  color: #404040;
  font-weight: 500;
  line-height: 40px;
  margin-bottom: 24px;
}

.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  color: #404040;
  margin: 1.6em 0 0.6em 0;
  font-weight: 500;
  clear: both;
}

.markdown h1 {
  font-size: 28px;
}

.markdown h2 {
  font-size: 22px;
}

.markdown h3 {
  font-size: 16px;
}

.markdown h4 {
  font-size: 14px;
}

.markdown h5 {
  font-size: 12px;
}

.markdown h6 {
  font-size: 12px;
}

.markdown hr {
  height: 1px;
  border: 0;
  background: #e9e9e9;
  margin: 16px 0;
  clear: both;
}

.markdown p,
.markdown pre {
  margin: 1em 0;
}

.markdown > p,
.markdown > blockquote,
.markdown > .highlight,
.markdown > ol,
.markdown > ul {
  width: 80%;
}

.markdown ul > li {
  list-style: circle;
}

.markdown > ul li,
.markdown blockquote ul > li {
  margin-left: 20px;
  padding-left: 4px;
}

.markdown > ul li p,
.markdown > ol li p {
  margin: 0.6em 0;
}

.markdown ol > li {
  list-style: decimal;
}

.markdown > ol li,
.markdown blockquote ol > li {
  margin-left: 20px;
  padding-left: 4px;
}

.markdown code {
  margin: 0 3px;
  padding: 0 5px;
  background: #eee;
  border-radius: 3px;
}

.markdown pre {
  border-radius: 6px;
  background: #f7f7f7;
  padding: 20px;
}

.markdown pre code {
  border: none;
  background: #f7f7f7;
  margin: 0;
}

.markdown strong,
.markdown b {
  font-weight: 600;
}

.markdown > table {
  border-collapse: collapse;
  border-spacing: 0px;
  empty-cells: show;
  border: 1px solid #e9e9e9;
  width: 95%;
  margin-bottom: 24px;
}

.markdown > table th {
  white-space: nowrap;
  color: #333;
  font-weight: 600;

}

.markdown > table th,
.markdown > table td {
  border: 1px solid #e9e9e9;
  padding: 8px 16px;
  text-align: left;
}

.markdown > table th {
  background: #F7F7F7;
}

.markdown blockquote {
  font-size: 90%;
  color: #999;
  border-left: 4px solid #e9e9e9;
  padding-left: 0.8em;
  margin: 1em 0;
  font-style: italic;
}

.markdown blockquote p {
  margin: 0;
}

.markdown .anchor {
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-left: 8px;
}

.markdown .waiting {
  color: #ccc;
}

.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
  opacity: 1;
  display: inline-block;
}

.markdown > br,
.markdown > p > br {
  clear: both;
}


.hljs {
  display: block;
  background: white;
  padding: 0.5em;
  color: #333333;
  overflow-x: auto;
}

.hljs-comment,
.hljs-meta {
  color: #969896;
}

.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
  color: #df5000;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
  color: #a71d5d;
}

.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
  color: #0086b3;
}

.hljs-section,
.hljs-name {
  color: #63a35c;
}

.hljs-tag {
  color: #333333;
}

.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #795da3;
}

.hljs-addition {
  color: #55a532;
  background-color: #eaffea;
}

.hljs-deletion {
  color: #bd2c00;
  background-color: #ffecec;
}

.hljs-link {
  text-decoration: underline;
}

pre{
  background: #fff;
}






 src/assets/fonts/demo_fontclass.html

New file
@@ -0,0 +1,100 @@

<!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-showpassword"></i>
                    <div class="name">show-password </div>
                    <div class="fontclass">.icon-showpassword</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user"></i>
                    <div class="name">user</div>
                    <div class="fontclass">.icon-user</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-users"></i>
                    <div class="name">users</div>
                    <div class="fontclass">.icon-users</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-3702mima"></i>
                    <div class="name">password-b</div>
                    <div class="fontclass">.icon-3702mima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangpin"></i>
                    <div class="name">06商品</div>
                    <div class="fontclass">.icon-shangpin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-danju"></i>
                    <div class="name">25单据</div>
                    <div class="fontclass">.icon-danju</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tijikongjian"></i>
                    <div class="name">28体积、空间</div>
                    <div class="fontclass">.icon-tijikongjian</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-baobiao"></i>
                    <div class="name">406报表</div>
                    <div class="fontclass">.icon-baobiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lock_fill"></i>
                    <div class="name">lock_fill</div>
                    <div class="fontclass">.icon-lock_fill</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/fonts/demo_symbol.html

New file
@@ -0,0 +1,143 @@

<!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-showpassword"></use>
                    </svg>
                    <div class="name">show-password </div>
                    <div class="fontclass">#icon-showpassword</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user"></use>
                    </svg>
                    <div class="name">user</div>
                    <div class="fontclass">#icon-user</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-users"></use>
                    </svg>
                    <div class="name">users</div>
                    <div class="fontclass">#icon-users</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-3702mima"></use>
                    </svg>
                    <div class="name">password-b</div>
                    <div class="fontclass">#icon-3702mima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangpin"></use>
                    </svg>
                    <div class="name">06商品</div>
                    <div class="fontclass">#icon-shangpin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-danju"></use>
                    </svg>
                    <div class="name">25单据</div>
                    <div class="fontclass">#icon-danju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tijikongjian"></use>
                    </svg>
                    <div class="name">28体积、空间</div>
                    <div class="fontclass">#icon-tijikongjian</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-baobiao"></use>
                    </svg>
                    <div class="name">406报表</div>
                    <div class="fontclass">#icon-baobiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lock_fill"></use>
                    </svg>
                    <div class="name">lock_fill</div>
                    <div class="fontclass">#icon-lock_fill</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/fonts/demo_unicode.html

New file
@@ -0,0 +1,138 @@

<!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">&#xea3f;</i>
                    <div class="name">show-password </div>
                    <div class="code">&amp;#xea3f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe89a;</i>
                    <div class="name">user</div>
                    <div class="code">&amp;#xe89a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe8b5;</i>
                    <div class="name">users</div>
                    <div class="code">&amp;#xe8b5;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe66c;</i>
                    <div class="name">password-b</div>
                    <div class="code">&amp;#xe66c;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe888;</i>
                    <div class="name">06商品</div>
                    <div class="code">&amp;#xe888;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe89b;</i>
                    <div class="name">25单据</div>
                    <div class="code">&amp;#xe89b;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe89f;</i>
                    <div class="name">28体积、空间</div>
                    <div class="code">&amp;#xe89f;</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">&#xe902;</i>
                    <div class="name">406报表</div>
                    <div class="code">&amp;#xe902;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe709;</i>
                    <div class="name">lock_fill</div>
                    <div class="code">&amp;#xe709;</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/fonts/iconfont.css

New file
@@ -0,0 +1,37 @@

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1523541245904'); /* IE9*/
  src: url('iconfont.eot?t=1523541245904#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('iconfont.ttf?t=1523541245904') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1523541245904#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-showpassword:before { content: "\ea3f"; }

.icon-user:before { content: "\e89a"; }

.icon-users:before { content: "\e8b5"; }

.icon-3702mima:before { content: "\e66c"; }

.icon-shangpin:before { content: "\e888"; }

.icon-danju:before { content: "\e89b"; }

.icon-tijikongjian:before { content: "\e89f"; }

.icon-morentouxiang:before { content: "\e8c9"; }

.icon-baobiao:before { content: "\e902"; }

.icon-lock_fill:before { content: "\e709"; }


 src/assets/fonts/iconfont.eot

Binary files differ

 src/assets/fonts/iconfont.js

New file
@@ -0,0 +1 @@
(function(window) { var svgSprite = '<svg><symbol id="icon-showpassword" viewBox="0 0 1024 1024"><path d="M1024 512c0 96-211.2 307.2-512 307.2-294.4 0-512-204.8-512-307.2s217.6-307.2 512-307.2c300.8 0 512 204.8 512 307.2l0 0zM512 262.4c-134.4 0-243.2 108.8-243.2 249.6s108.8 249.6 249.6 249.6c134.4 0 249.6-115.2 249.6-249.6-6.4-140.8-121.6-249.6-256-249.6l0 0zM512 352c-89.6 0-160 70.4-160 160s70.4 160 160 160c89.6 0 160-70.4 160-160s-70.4-160-160-160l0 0z"  ></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M622.816 702.72c-22.112-3.52-22.624-64.32-22.624-64.32s64.96-64.32 79.136-150.816c38.08 0 61.632-91.936 23.52-124.288C704.448 329.28 751.808 96 512 96c-239.808 0-192.448 233.28-190.88 267.328-38.08 32.352-14.56 124.288 23.52 124.288 14.144 86.496 79.136 150.816 79.136 150.816s-0.512 60.8-22.624 64.32C329.952 714.08 64 831.36 64 960l448 0 448 0C960 831.36 694.048 714.08 622.816 702.72z"  ></path></symbol><symbol id="icon-users" viewBox="0 0 1024 1024"><path d="M735.008 805.376c-18.944-2.976-19.392-54.656-19.392-54.656s55.68-54.656 67.808-128.16c32.64 0 52.8-78.144 20.16-105.632 1.376-28.928 41.984-227.168-163.584-227.168-205.568 0-164.96 198.24-163.584 227.168-32.64 27.488-12.48 105.632 20.16 105.632 12.128 73.504 67.84 128.16 67.84 128.16s-0.416 51.68-19.392 54.656C483.968 815.008 256 914.688 256 1024l384 0 384 0C1024 914.688 796.032 815.008 735.008 805.376zM344.064 822.816c44.096-27.136 97.632-52.32 141.536-67.424-15.744-22.432-33.28-52.928-44.32-89.056-15.392-12.576-27.936-30.528-36-52.608-8.064-22.112-11.136-46.848-8.608-69.696 1.792-16.384 6.464-31.68 13.664-45.088-4.352-46.592-7.424-138.048 52.448-204.736 23.2-25.856 52.544-44.448 87.712-55.68C544.192 173.76 511.296 97.76 384 97.76c-205.568 0-164.96 198.24-163.584 227.168-32.64 27.488-12.48 105.632 20.16 105.632 12.128 73.504 67.84 128.16 67.84 128.16s-0.416 51.68-19.392 54.656C227.968 623.008 0 722.688 0 832l329.6 0C334.304 828.928 339.104 825.856 344.064 822.816z"  ></path></symbol><symbol id="icon-3702mima" viewBox="0 0 1024 1024"><path d="M893.532041 881.355209l-0.284479-392.855436c-1.805112-41.266869-35.472909-74.250074-77.136821-74.419943l-50.869574 0.029676 0-35.523051 0.191358 0 0.170892-81.20344c0-2.183735-0.285502-4.273327-0.647753-6.363941-2.829442-123.525338-101.722776-223.293599-224.985124-227.214908l0-1.137916C414.498874 64.128553 313.084113 164.882258 310.218856 289.995767c-0.361227 2.090615-0.64673 4.180206-0.64673 6.363941l0.170892 81.20344 0.191358 0 0 36.477796-0.094144 0 0 0.323365-42.272779 0.019443c-2.596128 0.115634-5.158487 0.358157-7.682983 0.720408l-0.819668 0c-41.663912 0.169869-75.331709 33.152051-77.136821 74.419943l-0.284479 392.855436c0.209778 42.786479 34.921347 77.441766 77.763085 77.441766l38.911218 0 0 0.037862 466.923362 0.265036 0-0.302899 38.910195 0c4.331655 0 8.575306-0.370437 12.71458-1.050935C859.199095 958.181969 893.32431 923.774321 893.532041 881.355209zM387.811048 296.094672c0.514723-82.71998 65.588811-150.08832 147.393955-154.210197l0 0.847298c84.028788 1.687432 151.633512 70.065775 152.158469 154.386206l0.454348 0c0 0.095167-0.036839 0.170892-0.036839 0.265036l-0.26299 116.770494-299.860439 0.172939-0.265036-117.966739c0-0.094144-0.037862-0.169869-0.037862-0.265036L387.811048 296.094672z"  ></path></symbol><symbol id="icon-shangpin" viewBox="0 0 1024 1024"><path d="M832 256H640V160.8c0-17.6-14.4-32.8-32.8-32.8H416c-17.6 0-32.8 14.4-32.8 32.8V256H192l-64 576c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64l-64-576z m-384-64h128v64H448v-64z m-0.8 192H384v-63.2h63.2V384zM640 384h-63.2v-63.2H640V384z"  ></path></symbol><symbol id="icon-danju" viewBox="0 0 1024 1024"><path d="M800 192H640c0-70.4-57.6-128-128-128s-128 57.6-128 128H224c-17.6 0-32 14.4-32 32v704c0 17.6 14.4 32 32 32h576c17.6 0 32-14.4 32-32V224c0-17.6-14.4-32-32-32z m-288-32c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32z m64 608H320v-64h256v64z m128-128H320v-64h384v64z m0-128H320v-64h384v64z"  ></path></symbol><symbol id="icon-tijikongjian" viewBox="0 0 1024 1024"><path d="M496 895.2L138.4 771.2c-6.4-2.4-10.4-8-10.4-15.2V287.2l368 112v496z m32 0l357.6-124c6.4-2.4 10.4-8 10.4-15.2V287.2l-368 112v496z m-400-640l384 112 384-112-379.2-125.6c-3.2-0.8-7.2-0.8-10.4 0L128 255.2z"  ></path></symbol><symbol id="icon-morentouxiang" viewBox="0 0 1024 1024"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64zM384.8 376c4-64 56-115.2 120-119.2 74.4-4 135.2 55.2 135.2 128 0 70.4-57.6 128-128 128-73.6 0-132-62.4-127.2-136.8zM768 746.4c0 12-9.6 21.6-21.6 21.6H278.4c-12 0-21.6-9.6-21.6-21.6v-64c0-84.8 170.4-128 255.2-128 84.8 0 255.2 42.4 255.2 128l0.8 64z"  ></path></symbol><symbol id="icon-baobiao" viewBox="0 0 1024 1024"><path d="M960 672V160c0-17.6-14.4-32-32-32H544V64h-64v64H96c-17.6 0-32 14.4-32 32v512c0 17.6 14.4 32 32 32h384v50.4l-152.8 89.6 32 56 144-84h19.2l144 84 32-56L544 754.4V704h384c17.6 0 32-14.4 32-32zM790.4 256l41.6 48.8-316.8 270.4L352 437.6 233.6 536.8 192.8 488l160-133.6 163.2 137.6L790.4 256z"  ></path></symbol><symbol id="icon-lock_fill" viewBox="0 0 1024 1024"><path d="M394.304 316.608A124.672 124.672 0 0 1 518.72 192a124.704 124.704 0 0 1 124.48 124.608V416h-248.896V316.608zM544 704a32 32 0 0 1-64 0v-128a32 32 0 0 1 64 0v128z m256.256-288H707.2V316.608A188.736 188.736 0 0 0 518.72 128c-103.904 0-188.416 84.608-188.416 188.608V416h-106.56A64 64 0 0 0 160 480.096v319.84A64 64 0 0 0 223.744 864h576.512A64 64 0 0 0 864 799.936v-319.84A64 64 0 0 0 800.256 416z"  ></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; var done = false; var 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/fonts/iconfont.svg

New file
@@ -0,0 +1,63 @@
<?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="x" unicode="x" horiz-adv-x="1001"
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
    

    
    <glyph glyph-name="showpassword" unicode="&#59967;" d="M1024 300c0-96-211.2-307.2-512-307.2-294.4 0-512 204.8-512 307.2s217.6 307.2 512 307.2c300.8 0 512-204.8 512-307.2l0 0zM512 549.6c-134.4 0-243.2-108.8-243.2-249.6s108.8-249.6 249.6-249.6c134.4 0 249.6 115.2 249.6 249.6-6.4 140.8-121.6 249.6-256 249.6l0 0zM512 460c-89.6 0-160-70.4-160-160s70.4-160 160-160c89.6 0 160 70.4 160 160s-70.4 160-160 160l0 0z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="user" unicode="&#59546;" d="M622.816 193.28c-22.112 3.52-22.624 64.32-22.624 64.32s64.96 64.32 79.136 150.816c38.08 0 61.632 91.936 23.52 124.288C704.448 566.72 751.808 800 512 800c-239.808 0-192.448-233.28-190.88-267.328-38.08-32.352-14.56-124.288 23.52-124.288 14.144-86.496 79.136-150.816 79.136-150.816s-0.512-60.8-22.624-64.32C329.952 181.92 64 64.64 64-64l448 0 448 0C960 64.64 694.048 181.92 622.816 193.28z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="users" unicode="&#59573;" d="M735.008 90.624c-18.944 2.976-19.392 54.656-19.392 54.656s55.68 54.656 67.808 128.16c32.64 0 52.8 78.144 20.16 105.632 1.376 28.928 41.984 227.168-163.584 227.168-205.568 0-164.96-198.24-163.584-227.168-32.64-27.488-12.48-105.632 20.16-105.632 12.128-73.504 67.84-128.16 67.84-128.16s-0.416-51.68-19.392-54.656C483.968 80.992 256-18.688 256-128l384 0 384 0C1024-18.688 796.032 80.992 735.008 90.624zM344.064 73.184c44.096 27.136 97.632 52.32 141.536 67.424-15.744 22.432-33.28 52.928-44.32 89.056-15.392 12.576-27.936 30.528-36 52.608-8.064 22.112-11.136 46.848-8.608 69.696 1.792 16.384 6.464 31.68 13.664 45.088-4.352 46.592-7.424 138.048 52.448 204.736 23.2 25.856 52.544 44.448 87.712 55.68C544.192 722.24 511.296 798.24 384 798.24c-205.568 0-164.96-198.24-163.584-227.168-32.64-27.488-12.48-105.632 20.16-105.632 12.128-73.504 67.84-128.16 67.84-128.16s-0.416-51.68-19.392-54.656C227.968 272.992 0 173.312 0 64l329.6 0C334.304 67.072 339.104 70.144 344.064 73.184z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="3702mima" unicode="&#58988;" d="M893.532041 14.644791l-0.284479 392.855436c-1.805112 41.266869-35.472909 74.250074-77.136821 74.419943l-50.869574-0.029676 0 35.523051 0.191358 0 0.170892 81.20344c0 2.183735-0.285502 4.273327-0.647753 6.363941-2.829442 123.525338-101.722776 223.293599-224.985124 227.214908l0 1.137916C414.498874 831.871447 313.084113 731.117742 310.218856 606.004233c-0.361227-2.090615-0.64673-4.180206-0.64673-6.363941l0.170892-81.20344 0.191358 0 0-36.477796-0.094144 0 0-0.323365-42.272779-0.019443c-2.596128-0.115634-5.158487-0.358157-7.682983-0.720408l-0.819668 0c-41.663912-0.169869-75.331709-33.152051-77.136821-74.419943l-0.284479-392.855436c0.209778-42.786479 34.921347-77.441766 77.763085-77.441766l38.911218 0 0-0.037862 466.923362-0.265036 0 0.302899 38.910195 0c4.331655 0 8.575306 0.370437 12.71458 1.050935C859.199095-62.181969 893.32431-27.774321 893.532041 14.644791zM387.811048 599.905328c0.514723 82.71998 65.588811 150.08832 147.393955 154.210197l0-0.847298c84.028788-1.687432 151.633512-70.065775 152.158469-154.386206l0.454348 0c0-0.095167-0.036839-0.170892-0.036839-0.265036l-0.26299-116.770494-299.860439-0.172939-0.265036 117.966739c0 0.094144-0.037862 0.169869-0.037862 0.265036L387.811048 599.905328z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="shangpin" unicode="&#59528;" d="M832 640H640V735.2c0 17.6-14.4 32.8-32.8 32.8H416c-17.6 0-32.8-14.4-32.8-32.8V640H192l-64-576c0-35.2 28.8-64 64-64h640c35.2 0 64 28.8 64 64l-64 576z m-384 64h128v-64H448v64z m-0.8-192H384v63.2h63.2V512zM640 512h-63.2v63.2H640V512z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="danju" unicode="&#59547;" d="M800 704H640c0 70.4-57.6 128-128 128s-128-57.6-128-128H224c-17.6 0-32-14.4-32-32v-704c0-17.6 14.4-32 32-32h576c17.6 0 32 14.4 32 32V672c0 17.6-14.4 32-32 32z m-288 32c17.6 0 32-14.4 32-32s-14.4-32-32-32-32 14.4-32 32 14.4 32 32 32z m64-608H320v64h256v-64z m128 128H320v64h384v-64z m0 128H320v64h384v-64z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="tijikongjian" unicode="&#59551;" d="M496 0.8L138.4 124.8c-6.4 2.4-10.4 8-10.4 15.2V608.8l368-112v-496z m32 0l357.6 124c6.4 2.4 10.4 8 10.4 15.2V608.8l-368-112v-496z m-400 640l384-112 384 112-379.2 125.6c-3.2 0.8-7.2 0.8-10.4 0L128 640.8z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="morentouxiang" unicode="&#59593;" d="M512 832C264.8 832 64 631.2 64 384s200.8-448 448-448 448 200.8 448 448S759.2 832 512 832zM384.8 520c4 64 56 115.2 120 119.2 74.4 4 135.2-55.2 135.2-128 0-70.4-57.6-128-128-128-73.6 0-132 62.4-127.2 136.8zM768 149.6c0-12-9.6-21.6-21.6-21.6H278.4c-12 0-21.6 9.6-21.6 21.6v64c0 84.8 170.4 128 255.2 128 84.8 0 255.2-42.4 255.2-128l0.8-64z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="baobiao" unicode="&#59650;" d="M960 224V736c0 17.6-14.4 32-32 32H544V832h-64v-64H96c-17.6 0-32-14.4-32-32v-512c0-17.6 14.4-32 32-32h384v-50.4l-152.8-89.6 32-56 144 84h19.2l144-84 32 56L544 141.6V192h384c17.6 0 32 14.4 32 32zM790.4 640l41.6-48.8-316.8-270.4L352 458.4 233.6 359.2 192.8 408l160 133.6 163.2-137.6L790.4 640z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="lock_fill" unicode="&#59145;" d="M394.304 579.392A124.672 124.672 0 0 0 518.72 704a124.704 124.704 0 0 0 124.48-124.608V480h-248.896V579.392zM544 192a32 32 0 0 0-64 0v128a32 32 0 0 0 64 0v-128z m256.256 288H707.2V579.392A188.736 188.736 0 0 1 518.72 768c-103.904 0-188.416-84.608-188.416-188.608V480h-106.56A64 64 0 0 1 160 415.904v-319.84A64 64 0 0 1 223.744 32h576.512A64 64 0 0 1 864 96.064v319.84A64 64 0 0 1 800.256 480z"  horiz-adv-x="1024" />

    


  </font>
</defs></svg>

 src/assets/fonts/iconfont.ttf

Binary files differ

 src/assets/fonts/iconfont.woff

Binary files differ

 src/assets/heima.png


 src/assets/logo.png


 src/assets/qinaide.jpg


 src/components/Home.vue

New file
@@ -0,0 +1,147 @@
<template>
  <el-container class="home-container">
    <el-header>
      <div>
        <img src="../assets/heima.png" alt="" />
        <span>电商后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <el-menu
          background-color="rgb(50, 55, 67)"
          text-color="#fff"
          active-text-color="rgb(61, 159, 243)"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
          router
          :default-active="activePath"
        >
          <!-- 一级菜单 -->
          <el-submenu
            :index="item.id + ''"
            v-for="item in menulist"
            :key="item.id"
          >
            <template slot="title">
              <i :class="iconsObj[item.id]"></i>
              <span>{{ item.authName }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item
              :index="'/' + subItem.path"
              v-for="subItem in item.children"
              :key="subItem.id"
              @click="saveNavState('/' + subItem.path)"
            >
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{ subItem.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      //左侧菜单数据
      menulist: [],
      iconsObj: {
        125: 'iconfont icon-user',
        103: 'iconfont icon-tijikongjian',
        101: 'iconfont icon-shangpin',
        102: 'iconfont icon-danju',
        145: 'iconfont icon-baobiao'
      },
      isCollapse: false,
      //被激活的链接地址
      activePath: ''
    }
  },
  created() {
    this.getMenuLsit()
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    logout() {
      //清空token
      window.sessionStorage.clear()
      //跳转到登录页
      this.$router.push('/login')
    },
    // 获取所有菜单
    async getMenuLsit() {
      const { data: res } = await this.$http.get('/menus')
      // 如果请求失败 把错误消息打印出来
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      //如果请求成功，将获取的数据拿过来即可
      this.menulist = res.data
      console.log(res.data)
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    //保存链接的激活状态
    saveNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  background-color: rgb(55, 61, 63);
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
  > div {
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
}
.el-aside {
  background-color: rgb(50, 55, 67);
  .el-menu {
    border-right: none;
  }
}
.el-main {
  background-color: rgb(233, 237, 240);
}
.iconfont {
  margin-right: 10px;
}
.toggle-button {
  background-color: rgb(72, 81, 98);
  color: white;
  text-align: center;
  font-size: 10px;
  line-height: 26px;
  letter-spacing: 0.2em;
  cursor: pointer;
}
</style>

 src/components/Login.vue

New file
@@ -0,0 +1,148 @@
<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="" />
      </div>
      <!-- 登录表单区域 -->
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginFormRules"
        label-width="0px"
        class="login_form"
      >
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            prefix-icon="iconfont icon-user"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="iconfont icon-3702mima"
            type="password"
          ></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 点击重置按钮，重置登录表单
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields()
    },
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return
        const { data: res } = await this.$http.post('/login', this.loginForm)
        // console.log(res)
        if (res.meta.status !== 200) return this.$message.error('登录失败！')
        this.$message.success('登录成功')
        // console.log(res)
        // 1. 将登录成功之后的 token，保存到客户端的 session Storage 中
        //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
        //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
        window.sessionStorage.setItem('token', res.data.token)
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: flex-end;
}
</style>

 src/components/Welcome.vue

New file
@@ -0,0 +1,15 @@
<template>
    <div>
        <h3>欢迎！</h3>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="less" scoped>

</style>

 src/components/user/Users.vue

New file
@@ -0,0 +1,121 @@
<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="50">
        <el-col :span="8">
          <el-input placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加用户</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表区 -->
      <el-table :data="userlist" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="姓名" prop = 'username'></el-table-column>
        <el-table-column label="邮箱" prop = 'email'></el-table-column>
        <el-table-column label="电话" prop = 'mobile'></el-table-column>
        <el-table-column label="角色" prop = 'role_name'></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <!-- 单独拿到数据 -->
            <!-- {{ scope.row }} -->
            <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <!-- 修改按钮 -->
             <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
             <!-- 删除按钮 -->
             <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
             <!-- 分配角色按钮 -->
             <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
             </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 用户分页区 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //获取用户列表的参数对象
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      userlist: [],
      total: 0
    }
  },
  // 生命周期函数
  created() {
    this.getUserList()
  },
  methods: {
    async getUserList() {
      const { data: res } = await this.$http.get('/users', {
        params: this.queryInfo
      })
      // console.log(res);
      if (res.meta.status !== 200) {
        return this.$message.error('获取用户列表失败')
      }
      this.userlist = res.data.users
      this.total = res.data.total
    },
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getUserList()

    },
    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.getUserList()
    },
    //监听switch 开关状态的改变
    async userStateChanged(userinfo) {
      console.log(userinfo);
      const { data: res } = await this.$http.put(`users/${ userinfo.id }/state/${ userinfo.mg_state }`)
      if(res.meta.status !== 200){
        userinfo.mg_state =! userinfo.mg_state
        return this.$$message.error('更新用户状态失败')
      }
      this.$message.success('更新用户状态成功')
    }
  }
}
</script>

<style lang="less" scoped>
</style>

 src/main.js

New file
@@ -0,0 +1,26 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 导入字体图标
import './assets/fonts/iconfont.css'
// 导入全局样式表
import './assets/css/global.css'

import axios from 'axios'
// 配置请求的跟路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1'
axios.interceptors.request.use(config => {
  console.log(config)
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})
//把这个包挂载到Vue的原型对象上
Vue.prototype.$http = axios

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

 src/plugins/element.js

New file
@@ -0,0 +1,48 @@
import Vue from 'vue'
import {
  Button,
  Form,
  FormItem,
  Input,
  Message,
  Container,
  Header,
  Aside,
  Main,
  Menu,
  Submenu,
  MenuItem,
  Breadcrumb,
  BreadcrumbItem,
  Card,
  Row,
  Col,
  Table,
  TableColumn,
  Switch,
  Tooltip,
  Pagination
} from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.prototype.$message = Message

 src/router.js

New file
@@ -0,0 +1,36 @@
import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'
import Welcome from './components/Welcome.vue'
import Users from './components/user/Users.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    { path: '/home', component: Home, redirect:'/welcome',children: [{
      path: '/welcome', component: Welcome
    },{
      path: '/users', component: Users
    }] }
  ]
})

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  //     next()  放行    next('/login')  强制跳转

  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

export default router

New file
			@@ -0,0 +1,5 @@
			[*.{js,jsx,ts,tsx,vue}]
			indent_style = space
			indent_size = 2
			trim_trailing_whitespace = true
			insert_final_newline = true

New file
			@@ -0,0 +1,18 @@
			module.exports = {
			root: true,
			env: {
			node: true
			},
			'extends': [
			'plugin:vue/essential',
			'@vue/standard'
			],
			rules: {
			'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
			'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
			'space-before-function-paren': 0
			},
			parserOptions: {
			parser: 'babel-eslint'
			}
			}

New file
			@@ -0,0 +1,21 @@
			.DS_Store
			node_modules
			/dist

			# local env files
			.env.local
			.env.*.local

			# Log files
			npm-debug.log*
			yarn-debug.log*
			yarn-error.log*

			# Editor directories and files
			.idea
			.vscode
			*.suo
			.ntvs
			*.njsproj
			*.sln
			.sw

New file
			@@ -0,0 +1,5 @@
			{
			"semi": false,
			"singleQuote": true,
			"trailingComma": none
			}

New file
			@@ -0,0 +1,14 @@
			module.exports = {
			'presets': [
			'@vue/app'
			],
			'plugins': [
			[
			'component',
			{
			'libraryName': 'element-ui',
			'styleLibraryName': 'theme-chalk'
			}
			]
			]
			}

New file
			@@ -0,0 +1,31 @@
			{
			"name": "vue_shop",
			"version": "0.1.0",
			"private": true,
			"scripts": {
			"serve": "vue-cli-service serve",
			"build": "vue-cli-service build",
			"lint": "vue-cli-service lint"
			},
			"dependencies": {
			"axios": "^0.18.0",
			"element-ui": "^2.4.5",
			"node_module": "^0.0.0",
			"vue": "^2.5.22",
			"vue-router": "^3.0.1"
			},
			"devDependencies": {
			"@vue/cli-plugin-babel": "^3.4.0",
			"@vue/cli-plugin-eslint": "^3.4.0",
			"@vue/cli-service": "^3.4.0",
			"@vue/eslint-config-standard": "^4.0.0",
			"babel-eslint": "^10.0.1",
			"babel-plugin-component": "^1.1.1",
			"eslint": "^5.8.0",
			"eslint-plugin-vue": "^5.0.0",
			"less": "^3.9.0",
			"less-loader": "^4.1.0",
			"vue-cli-plugin-element": "^1.0.1",
			"vue-template-compiler": "^2.5.21"
			}
			}

New file
			@@ -0,0 +1,17 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width,initial-scale=1.0">
			<link rel="icon" href="<%= BASE_URL %>favicon.ico">
			<title>vue_shop</title>
			</head>
			<body>
			<noscript>
			<strong>We're sorry but vue_shop doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			</noscript>
			<div id="app"></div>
			<!-- built files will be auto injected -->
			</body>
			</html>

New file
			@@ -0,0 +1,15 @@
			<template>
			<div id="app">
			<!-- 路由占位符 -->
			<router-view></router-view>
			</div>
			</template>

			<script>
			export default {
			name: 'app'
			}
			</script>

			<style>
			</style>

New file
			@@ -0,0 +1,24 @@
			/* 全局样式表 */
			html,
			body,
			#app {
			height: 100%;
			margin: 0;
			padding: 0;
			}
			.el-breadcrumb {
			margin-bottom: 15px;
			font-size: 12px;
			}

			/* 改变卡片视图的阴影 */
			.el-card {
			box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
			}
			.el-table {
			margin-top: 15px;
			font-size: 13px;
			}
			.el-pagination {
			margin-top: 15px;
			}

New file
			@@ -0,0 +1,370 @@
			*{margin: 0;padding: 0;list-style: none;}
			/*
			KISSY CSS Reset
			理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
			2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
			3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
			特色：1. 适应中文；2. 基于最新主流浏览器。
			维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
			*/

			/ 清除内外边距 /
			body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
			dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
			pre, /* text formatting elements 文本格式元素 */
			form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
			th, td /* table elements 表格元素 */ {
			margin: 0;
			padding: 0;
			}

			/ 设置默认字体 /
			body,
			button, input, select, textarea /* for ie */ {
			font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
			}
			h1, h2, h3, h4, h5, h6 { font-size: 100%; }
			address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
			code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
			small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

			/ 重置列表元素 /
			ul, ol { list-style: none; }

			/ 重置文本格式元素 /
			a { text-decoration: none; }
			a:hover { text-decoration: underline; }


			/ 重置表单元素 /
			legend { color: #000; } /* for ie6 */
			fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
			button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
			/* 注：optgroup 无法扶正 */

			/ 重置表格元素 /
			table { border-collapse: collapse; border-spacing: 0; }

			/* 清除浮动 */
			.ks-clear:after, .clear:after {
			content: '\20';
			display: block;
			height: 0;
			clear: both;
			}
			.ks-clear, .clear {
			*zoom: 1;
			}

			.main {
			padding: 30px 100px;
			width: 960px;
			margin: 0 auto;
			}
			.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}

			.helps{margin-top:40px;}
			.helps pre{
			padding:20px;
			margin:10px 0;
			border:solid 1px #e7e1cd;
			background-color: #fffdef;
			overflow: auto;
			}

			.icon_lists{
			width: 100% !important;

			}

			.icon_lists li{
			float:left;
			width: 100px;
			height:180px;
			text-align: center;
			list-style: none !important;
			}
			.icon_lists .icon{
			font-size: 42px;
			line-height: 100px;
			margin: 10px 0;
			color:#333;
			-webkit-transition: font-size 0.25s ease-out 0s;
			-moz-transition: font-size 0.25s ease-out 0s;
			transition: font-size 0.25s ease-out 0s;

			}
			.icon_lists .icon:hover{
			font-size: 100px;
			}



			.markdown {
			color: #666;
			font-size: 14px;
			line-height: 1.8;
			}

			.highlight {
			line-height: 1.5;
			}

			.markdown img {
			vertical-align: middle;
			max-width: 100%;
			}

			.markdown h1 {
			color: #404040;
			font-weight: 500;
			line-height: 40px;
			margin-bottom: 24px;
			}

			.markdown h2,
			.markdown h3,
			.markdown h4,
			.markdown h5,
			.markdown h6 {
			color: #404040;
			margin: 1.6em 0 0.6em 0;
			font-weight: 500;
			clear: both;
			}

			.markdown h1 {
			font-size: 28px;
			}

			.markdown h2 {
			font-size: 22px;
			}

			.markdown h3 {
			font-size: 16px;
			}

			.markdown h4 {
			font-size: 14px;
			}

			.markdown h5 {
			font-size: 12px;
			}

			.markdown h6 {
			font-size: 12px;
			}

			.markdown hr {
			height: 1px;
			border: 0;
			background: #e9e9e9;
			margin: 16px 0;
			clear: both;
			}

			.markdown p,
			.markdown pre {
			margin: 1em 0;
			}

			.markdown > p,
			.markdown > blockquote,
			.markdown > .highlight,
			.markdown > ol,
			.markdown > ul {
			width: 80%;
			}

			.markdown ul > li {
			list-style: circle;
			}

			.markdown > ul li,
			.markdown blockquote ul > li {
			margin-left: 20px;
			padding-left: 4px;
			}

			.markdown > ul li p,
			.markdown > ol li p {
			margin: 0.6em 0;
			}

			.markdown ol > li {
			list-style: decimal;
			}

			.markdown > ol li,
			.markdown blockquote ol > li {
			margin-left: 20px;
			padding-left: 4px;
			}

			.markdown code {
			margin: 0 3px;
			padding: 0 5px;
			background: #eee;
			border-radius: 3px;
			}

			.markdown pre {
			border-radius: 6px;
			background: #f7f7f7;
			padding: 20px;
			}

			.markdown pre code {
			border: none;
			background: #f7f7f7;
			margin: 0;
			}

			.markdown strong,
			.markdown b {
			font-weight: 600;
			}

			.markdown > table {
			border-collapse: collapse;
			border-spacing: 0px;
			empty-cells: show;
			border: 1px solid #e9e9e9;
			width: 95%;
			margin-bottom: 24px;
			}

			.markdown > table th {
			white-space: nowrap;
			color: #333;
			font-weight: 600;

			}

			.markdown > table th,
			.markdown > table td {
			border: 1px solid #e9e9e9;
			padding: 8px 16px;
			text-align: left;
			}

			.markdown > table th {
			background: #F7F7F7;
			}

			.markdown blockquote {
			font-size: 90%;
			color: #999;
			border-left: 4px solid #e9e9e9;
			padding-left: 0.8em;
			margin: 1em 0;
			font-style: italic;
			}

			.markdown blockquote p {
			margin: 0;
			}

			.markdown .anchor {
			opacity: 0;
			transition: opacity 0.3s ease;
			margin-left: 8px;
			}

			.markdown .waiting {
			color: #ccc;
			}

			.markdown h1:hover .anchor,
			.markdown h2:hover .anchor,
			.markdown h3:hover .anchor,
			.markdown h4:hover .anchor,
			.markdown h5:hover .anchor,
			.markdown h6:hover .anchor {
			opacity: 1;
			display: inline-block;
			}

			.markdown > br,
			.markdown > p > br {
			clear: both;
			}


			.hljs {
			display: block;
			background: white;
			padding: 0.5em;
			color: #333333;
			overflow-x: auto;
			}

			.hljs-comment,
			.hljs-meta {
			color: #969896;
			}

			.hljs-string,
			.hljs-variable,
			.hljs-template-variable,
			.hljs-strong,
			.hljs-emphasis,
			.hljs-quote {
			color: #df5000;
			}

			.hljs-keyword,
			.hljs-selector-tag,
			.hljs-type {
			color: #a71d5d;
			}

			.hljs-literal,
			.hljs-symbol,
			.hljs-bullet,
			.hljs-attribute {
			color: #0086b3;
			}

			.hljs-section,
			.hljs-name {
			color: #63a35c;
			}

			.hljs-tag {
			color: #333333;
			}

			.hljs-title,
			.hljs-attr,
			.hljs-selector-id,
			.hljs-selector-class,
			.hljs-selector-attr,
			.hljs-selector-pseudo {
			color: #795da3;
			}

			.hljs-addition {
			color: #55a532;
			background-color: #eaffea;
			}

			.hljs-deletion {
			color: #bd2c00;
			background-color: #ffecec;
			}

			.hljs-link {
			text-decoration: underline;
			}

			pre{
			background: #fff;
			}

New file
			@@ -0,0 +1,100 @@

			<!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-showpassword"></i>
			<div class="name">show-password </div>
			<div class="fontclass">.icon-showpassword</div>
			</li>

			<li>
			<i class="icon iconfont icon-user"></i>
			<div class="name">user</div>
			<div class="fontclass">.icon-user</div>
			</li>

			<li>
			<i class="icon iconfont icon-users"></i>
			<div class="name">users</div>
			<div class="fontclass">.icon-users</div>
			</li>

			<li>
			<i class="icon iconfont icon-3702mima"></i>
			<div class="name">password-b</div>
			<div class="fontclass">.icon-3702mima</div>
			</li>

			<li>
			<i class="icon iconfont icon-shangpin"></i>
			<div class="name">06商品</div>
			<div class="fontclass">.icon-shangpin</div>
			</li>

			<li>
			<i class="icon iconfont icon-danju"></i>
			<div class="name">25单据</div>
			<div class="fontclass">.icon-danju</div>
			</li>

			<li>
			<i class="icon iconfont icon-tijikongjian"></i>
			<div class="name">28体积、空间</div>
			<div class="fontclass">.icon-tijikongjian</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-baobiao"></i>
			<div class="name">406报表</div>
			<div class="fontclass">.icon-baobiao</div>
			</li>

			<li>
			<i class="icon iconfont icon-lock_fill"></i>
			<div class="name">lock_fill</div>
			<div class="fontclass">.icon-lock_fill</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"><link rel="stylesheet" type="text/css" href="./iconfont.css"></span></code></pre>
			<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
			<pre><code class="lang-css hljs"><<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>"></<span class="hljs-selector-tag">i</span>></code></pre>
			<blockquote>
			<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
			</blockquote>
			</div>
			</body>
			</html>

New file
			@@ -0,0 +1,143 @@

			<!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-showpassword"></use>
			</svg>
			<div class="name">show-password </div>
			<div class="fontclass">#icon-showpassword</div>
			</li>

			<li>
			<svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-user"></use>
			</svg>
			<div class="name">user</div>
			<div class="fontclass">#icon-user</div>
			</li>

			<li>
			<svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-users"></use>
			</svg>
			<div class="name">users</div>
			<div class="fontclass">#icon-users</div>
			</li>

			<li>
			<svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-3702mima"></use>
			</svg>
			<div class="name">password-b</div>
			<div class="fontclass">#icon-3702mima</div>
			</li>

			<li>
			<svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-shangpin"></use>
			</svg>
			<div class="name">06商品</div>
			<div class="fontclass">#icon-shangpin</div>
			</li>

			<li>
			<svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-danju"></use>
			</svg>
			<div class="name">25单据</div>
			<div class="fontclass">#icon-danju</div>
			</li>

			<li>
			<svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-tijikongjian"></use>
			</svg>
			<div class="name">28体积、空间</div>
			<div class="fontclass">#icon-tijikongjian</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-baobiao"></use>
			</svg>
			<div class="name">406报表</div>
			<div class="fontclass">#icon-baobiao</div>
			</li>

			<li>
			<svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-lock_fill"></use>
			</svg>
			<div class="name">lock_fill</div>
			<div class="fontclass">#icon-lock_fill</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"><script src="./iconfont.js"></script></span></code></pre>
			<h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
			<pre><code class="lang-js hljs javascript"><style type=<span class="hljs-string">"text/css"</span>>
			.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;
			}
			<<span class="hljs-regexp">/style></span></code></pre>
			<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
			<pre><code class="lang-js hljs javascript"><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>><span class="xml"><span class="hljs-tag">
			<<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>></span><span class="hljs-tag"></<span class="hljs-name">use</span>></span>
			</span><<span class="hljs-regexp">/svg>
			</span></code></pre>
			</div>
			</body>
			</html>

New file
			@@ -0,0 +1,138 @@

			<!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"></i>
			<div class="name">show-password </div>
			<div class="code">&#xea3f;</div>
			</li>

			<li>
			<i class="icon iconfont"></i>
			<div class="name">user</div>
			<div class="code">&#xe89a;</div>
			</li>

			<li>
			<i class="icon iconfont"></i>
			<div class="name">users</div>
			<div class="code">&#xe8b5;</div>
			</li>

			<li>
			<i class="icon iconfont"></i>
			<div class="name">password-b</div>
			<div class="code">&#xe66c;</div>
			</li>

			<li>
			<i class="icon iconfont"></i>
			<div class="name">06商品</div>
			<div class="code">&#xe888;</div>
			</li>

			<li>
			<i class="icon iconfont"></i>
			<div class="name">25单据</div>
			<div class="code">&#xe89b;</div>
			</li>

			<li>
			<i class="icon iconfont"></i>
			<div class="name">28体积、空间</div>
			<div class="code">&#xe89f;</div>
			</li>

			<li>
			<i class="icon iconfont"></i>
			<div class="name">225默认头像</div>
			<div class="code">&#xe8c9;</div>
			</li>

			<li>
			<i class="icon iconfont"></i>
			<div class="name">406报表</div>
			<div class="code">&#xe902;</div>
			</li>

			<li>
			<i class="icon iconfont"></i>
			<div class="name">lock_fill</div>
			<div class="code">&#xe709;</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"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>>&#x33;<span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></code></pre>

			<blockquote>
			<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
			</blockquote>
			</div>


			</body>
			</html>

New file
			@@ -0,0 +1,37 @@

			@font-face {font-family: "iconfont";
			src: url('iconfont.eot?t=1523541245904'); /* IE9*/
			src: url('iconfont.eot?t=1523541245904#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
			url('iconfont.ttf?t=1523541245904') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
			url('iconfont.svg?t=1523541245904#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-showpassword:before { content: "\ea3f"; }

			.icon-user:before { content: "\e89a"; }

			.icon-users:before { content: "\e8b5"; }

			.icon-3702mima:before { content: "\e66c"; }

			.icon-shangpin:before { content: "\e888"; }

			.icon-danju:before { content: "\e89b"; }

			.icon-tijikongjian:before { content: "\e89f"; }

			.icon-morentouxiang:before { content: "\e8c9"; }

			.icon-baobiao:before { content: "\e902"; }

			.icon-lock_fill:before { content: "\e709"; }

New file
			@@ -0,0 +1 @@
			(function(window) { var svgSprite = '<svg><symbol id="icon-showpassword" viewBox="0 0 1024 1024"><path d="M1024 512c0 96-211.2 307.2-512 307.2-294.4 0-512-204.8-512-307.2s217.6-307.2 512-307.2c300.8 0 512 204.8 512 307.2l0 0zM512 262.4c-134.4 0-243.2 108.8-243.2 249.6s108.8 249.6 249.6 249.6c134.4 0 249.6-115.2 249.6-249.6-6.4-140.8-121.6-249.6-256-249.6l0 0zM512 352c-89.6 0-160 70.4-160 160s70.4 160 160 160c89.6 0 160-70.4 160-160s-70.4-160-160-160l0 0z" ></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M622.816 702.72c-22.112-3.52-22.624-64.32-22.624-64.32s64.96-64.32 79.136-150.816c38.08 0 61.632-91.936 23.52-124.288C704.448 329.28 751.808 96 512 96c-239.808 0-192.448 233.28-190.88 267.328-38.08 32.352-14.56 124.288 23.52 124.288 14.144 86.496 79.136 150.816 79.136 150.816s-0.512 60.8-22.624 64.32C329.952 714.08 64 831.36 64 960l448 0 448 0C960 831.36 694.048 714.08 622.816 702.72z" ></path></symbol><symbol id="icon-users" viewBox="0 0 1024 1024"><path d="M735.008 805.376c-18.944-2.976-19.392-54.656-19.392-54.656s55.68-54.656 67.808-128.16c32.64 0 52.8-78.144 20.16-105.632 1.376-28.928 41.984-227.168-163.584-227.168-205.568 0-164.96 198.24-163.584 227.168-32.64 27.488-12.48 105.632 20.16 105.632 12.128 73.504 67.84 128.16 67.84 128.16s-0.416 51.68-19.392 54.656C483.968 815.008 256 914.688 256 1024l384 0 384 0C1024 914.688 796.032 815.008 735.008 805.376zM344.064 822.816c44.096-27.136 97.632-52.32 141.536-67.424-15.744-22.432-33.28-52.928-44.32-89.056-15.392-12.576-27.936-30.528-36-52.608-8.064-22.112-11.136-46.848-8.608-69.696 1.792-16.384 6.464-31.68 13.664-45.088-4.352-46.592-7.424-138.048 52.448-204.736 23.2-25.856 52.544-44.448 87.712-55.68C544.192 173.76 511.296 97.76 384 97.76c-205.568 0-164.96 198.24-163.584 227.168-32.64 27.488-12.48 105.632 20.16 105.632 12.128 73.504 67.84 128.16 67.84 128.16s-0.416 51.68-19.392 54.656C227.968 623.008 0 722.688 0 832l329.6 0C334.304 828.928 339.104 825.856 344.064 822.816z" ></path></symbol><symbol id="icon-3702mima" viewBox="0 0 1024 1024"><path d="M893.532041 881.355209l-0.284479-392.855436c-1.805112-41.266869-35.472909-74.250074-77.136821-74.419943l-50.869574 0.029676 0-35.523051 0.191358 0 0.170892-81.20344c0-2.183735-0.285502-4.273327-0.647753-6.363941-2.829442-123.525338-101.722776-223.293599-224.985124-227.214908l0-1.137916C414.498874 64.128553 313.084113 164.882258 310.218856 289.995767c-0.361227 2.090615-0.64673 4.180206-0.64673 6.363941l0.170892 81.20344 0.191358 0 0 36.477796-0.094144 0 0 0.323365-42.272779 0.019443c-2.596128 0.115634-5.158487 0.358157-7.682983 0.720408l-0.819668 0c-41.663912 0.169869-75.331709 33.152051-77.136821 74.419943l-0.284479 392.855436c0.209778 42.786479 34.921347 77.441766 77.763085 77.441766l38.911218 0 0 0.037862 466.923362 0.265036 0-0.302899 38.910195 0c4.331655 0 8.575306-0.370437 12.71458-1.050935C859.199095 958.181969 893.32431 923.774321 893.532041 881.355209zM387.811048 296.094672c0.514723-82.71998 65.588811-150.08832 147.393955-154.210197l0 0.847298c84.028788 1.687432 151.633512 70.065775 152.158469 154.386206l0.454348 0c0 0.095167-0.036839 0.170892-0.036839 0.265036l-0.26299 116.770494-299.860439 0.172939-0.265036-117.966739c0-0.094144-0.037862-0.169869-0.037862-0.265036L387.811048 296.094672z" ></path></symbol><symbol id="icon-shangpin" viewBox="0 0 1024 1024"><path d="M832 256H640V160.8c0-17.6-14.4-32.8-32.8-32.8H416c-17.6 0-32.8 14.4-32.8 32.8V256H192l-64 576c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64l-64-576z m-384-64h128v64H448v-64z m-0.8 192H384v-63.2h63.2V384zM640 384h-63.2v-63.2H640V384z" ></path></symbol><symbol id="icon-danju" viewBox="0 0 1024 1024"><path d="M800 192H640c0-70.4-57.6-128-128-128s-128 57.6-128 128H224c-17.6 0-32 14.4-32 32v704c0 17.6 14.4 32 32 32h576c17.6 0 32-14.4 32-32V224c0-17.6-14.4-32-32-32z m-288-32c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32z m64 608H320v-64h256v64z m128-128H320v-64h384v64z m0-128H320v-64h384v64z" ></path></symbol><symbol id="icon-tijikongjian" viewBox="0 0 1024 1024"><path d="M496 895.2L138.4 771.2c-6.4-2.4-10.4-8-10.4-15.2V287.2l368 112v496z m32 0l357.6-124c6.4-2.4 10.4-8 10.4-15.2V287.2l-368 112v496z m-400-640l384 112 384-112-379.2-125.6c-3.2-0.8-7.2-0.8-10.4 0L128 255.2z" ></path></symbol><symbol id="icon-morentouxiang" viewBox="0 0 1024 1024"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64zM384.8 376c4-64 56-115.2 120-119.2 74.4-4 135.2 55.2 135.2 128 0 70.4-57.6 128-128 128-73.6 0-132-62.4-127.2-136.8zM768 746.4c0 12-9.6 21.6-21.6 21.6H278.4c-12 0-21.6-9.6-21.6-21.6v-64c0-84.8 170.4-128 255.2-128 84.8 0 255.2 42.4 255.2 128l0.8 64z" ></path></symbol><symbol id="icon-baobiao" viewBox="0 0 1024 1024"><path d="M960 672V160c0-17.6-14.4-32-32-32H544V64h-64v64H96c-17.6 0-32 14.4-32 32v512c0 17.6 14.4 32 32 32h384v50.4l-152.8 89.6 32 56 144-84h19.2l144 84 32-56L544 754.4V704h384c17.6 0 32-14.4 32-32zM790.4 256l41.6 48.8-316.8 270.4L352 437.6 233.6 536.8 192.8 488l160-133.6 163.2 137.6L790.4 256z" ></path></symbol><symbol id="icon-lock_fill" viewBox="0 0 1024 1024"><path d="M394.304 316.608A124.672 124.672 0 0 1 518.72 192a124.704 124.704 0 0 1 124.48 124.608V416h-248.896V316.608zM544 704a32 32 0 0 1-64 0v-128a32 32 0 0 1 64 0v128z m256.256-288H707.2V316.608A188.736 188.736 0 0 0 518.72 128c-103.904 0-188.416 84.608-188.416 188.608V416h-106.56A64 64 0 0 0 160 480.096v319.84A64 64 0 0 0 223.744 864h576.512A64 64 0 0 0 864 799.936v-319.84A64 64 0 0 0 800.256 416z" ></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; var done = false; var 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)

New file
			@@ -0,0 +1,63 @@
			<?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="x" unicode="x" horiz-adv-x="1001"
			d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
			t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
			t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />



			<glyph glyph-name="showpassword" unicode="" d="M1024 300c0-96-211.2-307.2-512-307.2-294.4 0-512 204.8-512 307.2s217.6 307.2 512 307.2c300.8 0 512-204.8 512-307.2l0 0zM512 549.6c-134.4 0-243.2-108.8-243.2-249.6s108.8-249.6 249.6-249.6c134.4 0 249.6 115.2 249.6 249.6-6.4 140.8-121.6 249.6-256 249.6l0 0zM512 460c-89.6 0-160-70.4-160-160s70.4-160 160-160c89.6 0 160 70.4 160 160s-70.4 160-160 160l0 0z" horiz-adv-x="1024" />


			<glyph glyph-name="user" unicode="" d="M622.816 193.28c-22.112 3.52-22.624 64.32-22.624 64.32s64.96 64.32 79.136 150.816c38.08 0 61.632 91.936 23.52 124.288C704.448 566.72 751.808 800 512 800c-239.808 0-192.448-233.28-190.88-267.328-38.08-32.352-14.56-124.288 23.52-124.288 14.144-86.496 79.136-150.816 79.136-150.816s-0.512-60.8-22.624-64.32C329.952 181.92 64 64.64 64-64l448 0 448 0C960 64.64 694.048 181.92 622.816 193.28z" horiz-adv-x="1024" />


			<glyph glyph-name="users" unicode="" d="M735.008 90.624c-18.944 2.976-19.392 54.656-19.392 54.656s55.68 54.656 67.808 128.16c32.64 0 52.8 78.144 20.16 105.632 1.376 28.928 41.984 227.168-163.584 227.168-205.568 0-164.96-198.24-163.584-227.168-32.64-27.488-12.48-105.632 20.16-105.632 12.128-73.504 67.84-128.16 67.84-128.16s-0.416-51.68-19.392-54.656C483.968 80.992 256-18.688 256-128l384 0 384 0C1024-18.688 796.032 80.992 735.008 90.624zM344.064 73.184c44.096 27.136 97.632 52.32 141.536 67.424-15.744 22.432-33.28 52.928-44.32 89.056-15.392 12.576-27.936 30.528-36 52.608-8.064 22.112-11.136 46.848-8.608 69.696 1.792 16.384 6.464 31.68 13.664 45.088-4.352 46.592-7.424 138.048 52.448 204.736 23.2 25.856 52.544 44.448 87.712 55.68C544.192 722.24 511.296 798.24 384 798.24c-205.568 0-164.96-198.24-163.584-227.168-32.64-27.488-12.48-105.632 20.16-105.632 12.128-73.504 67.84-128.16 67.84-128.16s-0.416-51.68-19.392-54.656C227.968 272.992 0 173.312 0 64l329.6 0C334.304 67.072 339.104 70.144 344.064 73.184z" horiz-adv-x="1024" />


			<glyph glyph-name="3702mima" unicode="" d="M893.532041 14.644791l-0.284479 392.855436c-1.805112 41.266869-35.472909 74.250074-77.136821 74.419943l-50.869574-0.029676 0 35.523051 0.191358 0 0.170892 81.20344c0 2.183735-0.285502 4.273327-0.647753 6.363941-2.829442 123.525338-101.722776 223.293599-224.985124 227.214908l0 1.137916C414.498874 831.871447 313.084113 731.117742 310.218856 606.004233c-0.361227-2.090615-0.64673-4.180206-0.64673-6.363941l0.170892-81.20344 0.191358 0 0-36.477796-0.094144 0 0-0.323365-42.272779-0.019443c-2.596128-0.115634-5.158487-0.358157-7.682983-0.720408l-0.819668 0c-41.663912-0.169869-75.331709-33.152051-77.136821-74.419943l-0.284479-392.855436c0.209778-42.786479 34.921347-77.441766 77.763085-77.441766l38.911218 0 0-0.037862 466.923362-0.265036 0 0.302899 38.910195 0c4.331655 0 8.575306 0.370437 12.71458 1.050935C859.199095-62.181969 893.32431-27.774321 893.532041 14.644791zM387.811048 599.905328c0.514723 82.71998 65.588811 150.08832 147.393955 154.210197l0-0.847298c84.028788-1.687432 151.633512-70.065775 152.158469-154.386206l0.454348 0c0-0.095167-0.036839-0.170892-0.036839-0.265036l-0.26299-116.770494-299.860439-0.172939-0.265036 117.966739c0 0.094144-0.037862 0.169869-0.037862 0.265036L387.811048 599.905328z" horiz-adv-x="1024" />


			<glyph glyph-name="shangpin" unicode="" d="M832 640H640V735.2c0 17.6-14.4 32.8-32.8 32.8H416c-17.6 0-32.8-14.4-32.8-32.8V640H192l-64-576c0-35.2 28.8-64 64-64h640c35.2 0 64 28.8 64 64l-64 576z m-384 64h128v-64H448v64z m-0.8-192H384v63.2h63.2V512zM640 512h-63.2v63.2H640V512z" horiz-adv-x="1024" />


			<glyph glyph-name="danju" unicode="" d="M800 704H640c0 70.4-57.6 128-128 128s-128-57.6-128-128H224c-17.6 0-32-14.4-32-32v-704c0-17.6 14.4-32 32-32h576c17.6 0 32 14.4 32 32V672c0 17.6-14.4 32-32 32z m-288 32c17.6 0 32-14.4 32-32s-14.4-32-32-32-32 14.4-32 32 14.4 32 32 32z m64-608H320v64h256v-64z m128 128H320v64h384v-64z m0 128H320v64h384v-64z" horiz-adv-x="1024" />


			<glyph glyph-name="tijikongjian" unicode="" d="M496 0.8L138.4 124.8c-6.4 2.4-10.4 8-10.4 15.2V608.8l368-112v-496z m32 0l357.6 124c6.4 2.4 10.4 8 10.4 15.2V608.8l-368-112v-496z m-400 640l384-112 384 112-379.2 125.6c-3.2 0.8-7.2 0.8-10.4 0L128 640.8z" horiz-adv-x="1024" />


			<glyph glyph-name="morentouxiang" unicode="" d="M512 832C264.8 832 64 631.2 64 384s200.8-448 448-448 448 200.8 448 448S759.2 832 512 832zM384.8 520c4 64 56 115.2 120 119.2 74.4 4 135.2-55.2 135.2-128 0-70.4-57.6-128-128-128-73.6 0-132 62.4-127.2 136.8zM768 149.6c0-12-9.6-21.6-21.6-21.6H278.4c-12 0-21.6 9.6-21.6 21.6v64c0 84.8 170.4 128 255.2 128 84.8 0 255.2-42.4 255.2-128l0.8-64z" horiz-adv-x="1024" />


			<glyph glyph-name="baobiao" unicode="" d="M960 224V736c0 17.6-14.4 32-32 32H544V832h-64v-64H96c-17.6 0-32-14.4-32-32v-512c0-17.6 14.4-32 32-32h384v-50.4l-152.8-89.6 32-56 144 84h19.2l144-84 32 56L544 141.6V192h384c17.6 0 32 14.4 32 32zM790.4 640l41.6-48.8-316.8-270.4L352 458.4 233.6 359.2 192.8 408l160 133.6 163.2-137.6L790.4 640z" horiz-adv-x="1024" />


			<glyph glyph-name="lock_fill" unicode="" d="M394.304 579.392A124.672 124.672 0 0 0 518.72 704a124.704 124.704 0 0 0 124.48-124.608V480h-248.896V579.392zM544 192a32 32 0 0 0-64 0v128a32 32 0 0 0 64 0v-128z m256.256 288H707.2V579.392A188.736 188.736 0 0 1 518.72 768c-103.904 0-188.416-84.608-188.416-188.608V480h-106.56A64 64 0 0 1 160 415.904v-319.84A64 64 0 0 1 223.744 32h576.512A64 64 0 0 1 864 96.064v319.84A64 64 0 0 1 800.256 480z" horiz-adv-x="1024" />




			</font>
			</defs></svg>

New file
			@@ -0,0 +1,147 @@
			<template>
			<el-container class="home-container">
			<el-header>
			<div>
			<img src="../assets/heima.png" alt="" />
			<span>电商后台管理系统</span>
			</div>
			<el-button type="info" @click="logout">退出</el-button>
			</el-header>
			<el-container>
			<el-aside :width="isCollapse ? '64px' : '200px'">
			<div class="toggle-button" @click="toggleCollapse">\|\|\|</div>
			<el-menu
			background-color="rgb(50, 55, 67)"
			text-color="#fff"
			active-text-color="rgb(61, 159, 243)"
			unique-opened
			:collapse="isCollapse"
			:collapse-transition="false"
			router
			:default-active="activePath"
			>
			<!-- 一级菜单 -->
			<el-submenu
			:index="item.id + ''"
			v-for="item in menulist"
			:key="item.id"
			>
			<template slot="title">
			<i :class="iconsObj[item.id]"></i>
			<span>{{ item.authName }}</span>
			</template>
			<!-- 二级菜单 -->
			<el-menu-item
			:index="'/' + subItem.path"
			v-for="subItem in item.children"
			:key="subItem.id"
			@click="saveNavState('/' + subItem.path)"
			>
			<template slot="title">
			<i class="el-icon-menu"></i>
			<span>{{ subItem.authName }}</span>
			</template>
			</el-menu-item>
			</el-submenu>
			</el-menu>
			</el-aside>
			<el-main>
			<router-view></router-view>
			</el-main>
			</el-container>
			</el-container>
			</template>

			<script>
			export default {
			data() {
			return {
			//左侧菜单数据
			menulist: [],
			iconsObj: {
			125: 'iconfont icon-user',
			103: 'iconfont icon-tijikongjian',
			101: 'iconfont icon-shangpin',
			102: 'iconfont icon-danju',
			145: 'iconfont icon-baobiao'
			},
			isCollapse: false,
			//被激活的链接地址
			activePath: ''
			}
			},
			created() {
			this.getMenuLsit()
			this.activePath = window.sessionStorage.getItem('activePath')
			},
			methods: {
			logout() {
			//清空token
			window.sessionStorage.clear()
			//跳转到登录页
			this.$router.push('/login')
			},
			// 获取所有菜单
			async getMenuLsit() {
			const { data: res } = await this.$http.get('/menus')
			// 如果请求失败把错误消息打印出来
			if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
			//如果请求成功，将获取的数据拿过来即可
			this.menulist = res.data
			console.log(res.data)
			},
			toggleCollapse() {
			this.isCollapse = !this.isCollapse
			},
			//保存链接的激活状态
			saveNavState(activePath) {
			window.sessionStorage.setItem('activePath', activePath)
			this.activePath = activePath
			}
			}
			}
			</script>

			<style lang="less" scoped>
			.home-container {
			height: 100%;
			}
			.el-header {
			background-color: rgb(55, 61, 63);
			display: flex;
			justify-content: space-between;
			padding-left: 0;
			align-items: center;
			color: #fff;
			font-size: 20px;
			> div {
			display: flex;
			justify-content: center;
			align-items: center;
			span {
			margin-left: 15px;
			}
			}
			}
			.el-aside {
			background-color: rgb(50, 55, 67);
			.el-menu {
			border-right: none;
			}
			}
			.el-main {
			background-color: rgb(233, 237, 240);
			}
			.iconfont {
			margin-right: 10px;
			}
			.toggle-button {
			background-color: rgb(72, 81, 98);
			color: white;
			text-align: center;
			font-size: 10px;
			line-height: 26px;
			letter-spacing: 0.2em;
			cursor: pointer;
			}
			</style>

New file
			@@ -0,0 +1,148 @@
			<template>
			<div class="login_container">
			<div class="login_box">
			<!-- 头像区域 -->
			<div class="avatar_box">
			<img src="../assets/logo.png" alt="" />
			</div>
			<!-- 登录表单区域 -->
			<el-form
			ref="loginFormRef"
			:model="loginForm"
			:rules="loginFormRules"
			label-width="0px"
			class="login_form"
			>
			<!-- 用户名 -->
			<el-form-item prop="username">
			<el-input
			v-model="loginForm.username"
			prefix-icon="iconfont icon-user"
			></el-input>
			</el-form-item>
			<!-- 密码 -->
			<el-form-item prop="password">
			<el-input
			v-model="loginForm.password"
			prefix-icon="iconfont icon-3702mima"
			type="password"
			></el-input>
			</el-form-item>
			<!-- 按钮区域 -->
			<el-form-item class="btns">
			<el-button type="primary" @click="login">登录</el-button>
			<el-button type="info" @click="resetLoginForm">重置</el-button>
			</el-form-item>
			</el-form>
			</div>
			</div>
			</template>

			<script>
			export default {
			data() {
			return {
			// 这是登录表单的数据绑定对象
			loginForm: {
			username: 'admin',
			password: '123456'
			},
			// 这是表单的验证规则对象
			loginFormRules: {
			// 验证用户名是否合法
			username: [
			{ required: true, message: '请输入登录名称', trigger: 'blur' },
			{
			min: 3,
			max: 10,
			message: '长度在 3 到 10 个字符',
			trigger: 'blur'
			}
			],
			// 验证密码是否合法
			password: [
			{ required: true, message: '请输入登录密码', trigger: 'blur' },
			{
			min: 6,
			max: 15,
			message: '长度在 6 到 15 个字符',
			trigger: 'blur'
			}
			]
			}
			}
			},
			methods: {
			// 点击重置按钮，重置登录表单
			resetLoginForm() {
			this.$refs.loginFormRef.resetFields()
			},
			login() {
			this.$refs.loginFormRef.validate(async (valid) => {
			if (!valid) return
			const { data: res } = await this.$http.post('/login', this.loginForm)
			// console.log(res)
			if (res.meta.status !== 200) return this.$message.error('登录失败！')
			this.$message.success('登录成功')
			// console.log(res)
			// 1. 将登录成功之后的 token，保存到客户端的 session Storage 中
			// 1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
			// 1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
			window.sessionStorage.setItem('token', res.data.token)
			// 2. 通过编程式导航跳转到后台主页，路由地址是 /home
			this.$router.push('/home')
			})
			}
			}
			}
			</script>

			<style lang="less" scoped>
			.login_container {
			background-color: #2b4b6b;
			height: 100%;
			}

			.login_box {
			width: 450px;
			height: 300px;
			background-color: #fff;
			border-radius: 3px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			.avatar_box {
			height: 130px;
			width: 130px;
			border: 1px solid #eee;
			border-radius: 50%;
			padding: 10px;
			box-shadow: 0 0 10px #ddd;
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #fff;
			img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #eee;
			}
			}
			}

			.login_form {
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 0 20px;
			box-sizing: border-box;
			}

			.btns {
			display: flex;
			justify-content: flex-end;
			}
			</style>

New file
			@@ -0,0 +1,121 @@
			<template>
			<div>
			<!-- 面包屑导航区 -->
			<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
			</el-breadcrumb>
			<!-- 卡片视图区 -->
			<el-card class="box-card">
			<!-- 搜索与添加区域 -->
			<el-row :gutter="50">
			<el-col :span="8">
			<el-input placeholder="请输入内容">
			<el-button slot="append" icon="el-icon-search"></el-button>
			</el-input>
			</el-col>
			<el-col :span="4">
			<el-button type="primary">添加用户</el-button>
			</el-col>
			</el-row>
			<!-- 用户列表区 -->
			<el-table :data="userlist" border stripe>
			<el-table-column type="index"></el-table-column>
			<el-table-column label="姓名" prop = 'username'></el-table-column>
			<el-table-column label="邮箱" prop = 'email'></el-table-column>
			<el-table-column label="电话" prop = 'mobile'></el-table-column>
			<el-table-column label="角色" prop = 'role_name'></el-table-column>
			<el-table-column label="状态">
			<template slot-scope="scope">
			<!-- 单独拿到数据 -->
			<!-- {{ scope.row }} -->
			<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
			</template>
			</el-table-column>
			<el-table-column label="操作">
			<template>
			<!-- 修改按钮 -->
			<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
			<!-- 删除按钮 -->
			<el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
			<!-- 分配角色按钮 -->
			<el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
			<el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
			</el-tooltip>
			</template>
			</el-table-column>
			</el-table>
			<!-- 用户分页区 -->
			<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="queryInfo.pagenum"
			:page-sizes="[1, 2, 5, 10]"
			:page-size="queryInfo.pagesize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total">
			</el-pagination>
			</el-card>
			</div>
			</template>

			<script>
			export default {
			data() {
			return {
			//获取用户列表的参数对象
			queryInfo: {
			query: '',
			pagenum: 1,
			pagesize: 2
			},
			userlist: [],
			total: 0
			}
			},
			// 生命周期函数
			created() {
			this.getUserList()
			},
			methods: {
			async getUserList() {
			const { data: res } = await this.$http.get('/users', {
			params: this.queryInfo
			})
			// console.log(res);
			if (res.meta.status !== 200) {
			return this.$message.error('获取用户列表失败')
			}
			this.userlist = res.data.users
			this.total = res.data.total
			},
			// 监听pagesize改变的事件
			handleSizeChange(newSize) {
			// console.log(newSize)
			this.queryInfo.pagesize = newSize
			this.getUserList()

			},
			// 监听页码值改变的事件
			handleCurrentChange(newPage) {
			// console.log(newPage)
			this.queryInfo.pagenum = newPage
			this.getUserList()
			},
			//监听switch 开关状态的改变
			async userStateChanged(userinfo) {
			console.log(userinfo);
			const { data: res } = await this.$http.put(`users/${ userinfo.id }/state/${ userinfo.mg_state }`)
			if(res.meta.status !== 200){
			userinfo.mg_state =! userinfo.mg_state
			return this.$$message.error('更新用户状态失败')
			}
			this.$message.success('更新用户状态成功')
			}
			}
			}
			</script>

			<style lang="less" scoped>
			</style>

New file
			@@ -0,0 +1,26 @@
			import Vue from 'vue'
			import App from './App.vue'
			import router from './router'
			import './plugins/element.js'
			// 导入字体图标
			import './assets/fonts/iconfont.css'
			// 导入全局样式表
			import './assets/css/global.css'

			import axios from 'axios'
			// 配置请求的跟路径
			axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1'
			axios.interceptors.request.use(config => {
			console.log(config)
			config.headers.Authorization = window.sessionStorage.getItem('token')
			return config
			})
			//把这个包挂载到Vue的原型对象上
			Vue.prototype.$http = axios

			Vue.config.productionTip = false

			new Vue({
			router,
			render: h => h(App)
			}).$mount('#app')

New file
			@@ -0,0 +1,48 @@
			import Vue from 'vue'
			import {
			Button,
			Form,
			FormItem,
			Input,
			Message,
			Container,
			Header,
			Aside,
			Main,
			Menu,
			Submenu,
			MenuItem,
			Breadcrumb,
			BreadcrumbItem,
			Card,
			Row,
			Col,
			Table,
			TableColumn,
			Switch,
			Tooltip,
			Pagination
			} from 'element-ui'

			Vue.use(Button)
			Vue.use(Form)
			Vue.use(FormItem)
			Vue.use(Input)
			Vue.use(Container)
			Vue.use(Header)
			Vue.use(Aside)
			Vue.use(Main)
			Vue.use(Menu)
			Vue.use(Submenu)
			Vue.use(MenuItem)
			Vue.use(Breadcrumb)
			Vue.use(BreadcrumbItem)
			Vue.use(Card)
			Vue.use(Row)
			Vue.use(Col)
			Vue.use(Table)
			Vue.use(TableColumn)
			Vue.use(Switch)
			Vue.use(Tooltip)
			Vue.use(Pagination)
			Vue.prototype.$message = Message

New file
			@@ -0,0 +1,36 @@
			import Vue from 'vue'
			import Router from 'vue-router'
			import Login from './components/Login.vue'
			import Home from './components/Home.vue'
			import Welcome from './components/Welcome.vue'
			import Users from './components/user/Users.vue'

			Vue.use(Router)

			const router = new Router({
			routes: [
			{ path: '/', redirect: '/login' },
			{ path: '/login', component: Login },
			{ path: '/home', component: Home, redirect:'/welcome',children: [{
			path: '/welcome', component: Welcome
			},{
			path: '/users', component: Users
			}] }
			]
			})

			// 挂载路由导航守卫
			router.beforeEach((to, from, next) => {
			// to 将要访问的路径
			// from 代表从哪个路径跳转而来
			// next 是一个函数，表示放行
			// next() 放行 next('/login') 强制跳转

			if (to.path === '/login') return next()
			// 获取token
			const tokenStr = window.sessionStorage.getItem('token')
			if (!tokenStr) return next('/login')
			next()
			})

			export default router