#改善了status页面的显示UI

2020-09-10 17:38:15 +08:00 · 2020-09-10 17:38:15 +08:00 · e4f1ac3310
parent 11e9e5fec0
commit e4f1ac3310
13 changed files with 1391 additions and 4 deletions
--- a/package.json
+++ b/package.json
@ -48,7 +48,7 @@
    "jsonlint": "1.6.3",
    "jszip": "3.1.5",
    "mockjs": "1.0.1-beta3",
-    "moment": "^2.22.2",
+    "moment": "^2.27.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "screenfull": "3.3.2",
@ -63,7 +63,7 @@
    "vue-multiselect": "2.0.8",
    "vue-router": "3.0.1",
    "vue-splitpane": "1.0.2",
-    "vuedraggable": "^2.16.0",
+    "vuedraggable": "^2.24.1",
    "vuex": "3.0.1",
    "xlsx": "^0.11.16"
  },
--- a/src/assets/icon/demo.css
+++ b/src/assets/icon/demo.css
@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
--- a/src/assets/icon/demo_index.html
+++ b/src/assets/icon/demo_index.html
@ -0,0 +1,538 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2058344" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe857;</span>
+                <div class="name">signal-2</div>
+                <div class="code-name">&amp;#xe857;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe818;</span>
+                <div class="name">signal-1</div>
+                <div class="code-name">&amp;#xe818;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe81a;</span>
+                <div class="name">signal-3</div>
+                <div class="code-name">&amp;#xe81a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xf60e;</span>
+                <div class="name">signal-4</div>
+                <div class="code-name">&amp;#xf60e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xebf6;</span>
+                <div class="name">mosquito.1</div>
+                <div class="code-name">&amp;#xebf6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xebf5;</span>
+                <div class="name">mosquito</div>
+                <div class="code-name">&amp;#xebf5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe617;</span>
+                <div class="name">power_0</div>
+                <div class="code-name">&amp;#xe617;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe618;</span>
+                <div class="name">power_1</div>
+                <div class="code-name">&amp;#xe618;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe619;</span>
+                <div class="name">power_2</div>
+                <div class="code-name">&amp;#xe619;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61a;</span>
+                <div class="name">power_3</div>
+                <div class="code-name">&amp;#xe61a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61b;</span>
+                <div class="name">power_4</div>
+                <div class="code-name">&amp;#xe61b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61c;</span>
+                <div class="name">power_5</div>
+                <div class="code-name">&amp;#xe61c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61d;</span>
+                <div class="name">power_6</div>
+                <div class="code-name">&amp;#xe61d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61e;</span>
+                <div class="name">power_8</div>
+                <div class="code-name">&amp;#xe61e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61f;</span>
+                <div class="name">power_7</div>
+                <div class="code-name">&amp;#xe61f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe625;</span>
+                <div class="name">power_9</div>
+                <div class="code-name">&amp;#xe625;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alisignal-2"></span>
+            <div class="name">
+              signal-2
+            </div>
+            <div class="code-name">.el-icon-alisignal-2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alisignal-1"></span>
+            <div class="name">
+              signal-1
+            </div>
+            <div class="code-name">.el-icon-alisignal-1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alisignal-3"></span>
+            <div class="name">
+              signal-3
+            </div>
+            <div class="code-name">.el-icon-alisignal-3
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alisignal-4"></span>
+            <div class="name">
+              signal-4
+            </div>
+            <div class="code-name">.el-icon-alisignal-4
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alimosquito1"></span>
+            <div class="name">
+              mosquito.1
+            </div>
+            <div class="code-name">.el-icon-alimosquito1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alimosquito"></span>
+            <div class="name">
+              mosquito
+            </div>
+            <div class="code-name">.el-icon-alimosquito
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alipower_"></span>
+            <div class="name">
+              power_0
+            </div>
+            <div class="code-name">.el-icon-alipower_
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alipower_1"></span>
+            <div class="name">
+              power_1
+            </div>
+            <div class="code-name">.el-icon-alipower_1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alipower_2"></span>
+            <div class="name">
+              power_2
+            </div>
+            <div class="code-name">.el-icon-alipower_2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alipower_3"></span>
+            <div class="name">
+              power_3
+            </div>
+            <div class="code-name">.el-icon-alipower_3
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alipower_4"></span>
+            <div class="name">
+              power_4
+            </div>
+            <div class="code-name">.el-icon-alipower_4
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alipower_5"></span>
+            <div class="name">
+              power_5
+            </div>
+            <div class="code-name">.el-icon-alipower_5
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alipower_6"></span>
+            <div class="name">
+              power_6
+            </div>
+            <div class="code-name">.el-icon-alipower_6
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alipower_8"></span>
+            <div class="name">
+              power_8
+            </div>
+            <div class="code-name">.el-icon-alipower_8
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alipower_7"></span>
+            <div class="name">
+              power_7
+            </div>
+            <div class="code-name">.el-icon-alipower_7
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alipower_9"></span>
+            <div class="name">
+              power_9
+            </div>
+            <div class="code-name">.el-icon-alipower_9
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont el-icon-alixxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alisignal-2"></use>
+                </svg>
+                <div class="name">signal-2</div>
+                <div class="code-name">#el-icon-alisignal-2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alisignal-1"></use>
+                </svg>
+                <div class="name">signal-1</div>
+                <div class="code-name">#el-icon-alisignal-1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alisignal-3"></use>
+                </svg>
+                <div class="name">signal-3</div>
+                <div class="code-name">#el-icon-alisignal-3</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alisignal-4"></use>
+                </svg>
+                <div class="name">signal-4</div>
+                <div class="code-name">#el-icon-alisignal-4</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alimosquito1"></use>
+                </svg>
+                <div class="name">mosquito.1</div>
+                <div class="code-name">#el-icon-alimosquito1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alimosquito"></use>
+                </svg>
+                <div class="name">mosquito</div>
+                <div class="code-name">#el-icon-alimosquito</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alipower_"></use>
+                </svg>
+                <div class="name">power_0</div>
+                <div class="code-name">#el-icon-alipower_</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alipower_1"></use>
+                </svg>
+                <div class="name">power_1</div>
+                <div class="code-name">#el-icon-alipower_1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alipower_2"></use>
+                </svg>
+                <div class="name">power_2</div>
+                <div class="code-name">#el-icon-alipower_2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alipower_3"></use>
+                </svg>
+                <div class="name">power_3</div>
+                <div class="code-name">#el-icon-alipower_3</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alipower_4"></use>
+                </svg>
+                <div class="name">power_4</div>
+                <div class="code-name">#el-icon-alipower_4</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alipower_5"></use>
+                </svg>
+                <div class="name">power_5</div>
+                <div class="code-name">#el-icon-alipower_5</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alipower_6"></use>
+                </svg>
+                <div class="name">power_6</div>
+                <div class="code-name">#el-icon-alipower_6</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alipower_8"></use>
+                </svg>
+                <div class="name">power_8</div>
+                <div class="code-name">#el-icon-alipower_8</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alipower_7"></use>
+                </svg>
+                <div class="name">power_7</div>
+                <div class="code-name">#el-icon-alipower_7</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alipower_9"></use>
+                </svg>
+                <div class="name">power_9</div>
+                <div class="code-name">#el-icon-alipower_9</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>
--- a/src/assets/icon/iconfont.css
+++ b/src/assets/icon/iconfont.css
@ -0,0 +1,91 @@
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1599730308106'); /* IE9 */
+  src: url('iconfont.eot?t=1599730308106#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1599730308106') format('woff'),
+  url('iconfont.ttf?t=1599730308106') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1599730308106#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;
+}
+
+[class^="el-icon-ali"], 
+[class*=" el-icon-ali"]/*这里有空格*/
+{ 
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; 
+}
+
+.el-icon-alisignal-2:before {
+  content: "\e857";
+}
+
+.el-icon-alisignal-1:before {
+  content: "\e818";
+}
+
+.el-icon-alisignal-3:before {
+  content: "\e81a";
+}
+
+.el-icon-alisignal-4:before {
+  content: "\f60e";
+}
+
+.el-icon-alimosquito1:before {
+  content: "\ebf6";
+}
+
+.el-icon-alimosquito:before {
+  content: "\ebf5";
+}
+
+.el-icon-alipower_:before {
+  content: "\e617";
+}
+
+.el-icon-alipower_1:before {
+  content: "\e618";
+}
+
+.el-icon-alipower_2:before {
+  content: "\e619";
+}
+
+.el-icon-alipower_3:before {
+  content: "\e61a";
+}
+
+.el-icon-alipower_4:before {
+  content: "\e61b";
+}
+
+.el-icon-alipower_5:before {
+  content: "\e61c";
+}
+
+.el-icon-alipower_6:before {
+  content: "\e61d";
+}
+
+.el-icon-alipower_8:before {
+  content: "\e61e";
+}
+
+.el-icon-alipower_7:before {
+  content: "\e61f";
+}
+
+.el-icon-alipower_9:before {
+  content: "\e625";
+}
+
--- a/src/assets/icon/iconfont.eot
+++ b/src/assets/icon/iconfont.eot
--- a/src/assets/icon/iconfont.js
+++ b/src/assets/icon/iconfont.js
--- a/src/assets/icon/iconfont.json
+++ b/src/assets/icon/iconfont.json
@ -0,0 +1,121 @@
+{
+  "id": "2058344",
+  "name": "eleThirdIcon",
+  "font_family": "iconfont",
+  "css_prefix_text": "el-icon-ali",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "10023646",
+      "name": "signal-2",
+      "font_class": "signal-2",
+      "unicode": "e857",
+      "unicode_decimal": 59479
+    },
+    {
+      "icon_id": "10248563",
+      "name": "signal-1",
+      "font_class": "signal-1",
+      "unicode": "e818",
+      "unicode_decimal": 59416
+    },
+    {
+      "icon_id": "10248566",
+      "name": "signal-3",
+      "font_class": "signal-3",
+      "unicode": "e81a",
+      "unicode_decimal": 59418
+    },
+    {
+      "icon_id": "14536693",
+      "name": "signal-4",
+      "font_class": "signal-4",
+      "unicode": "f60e",
+      "unicode_decimal": 62990
+    },
+    {
+      "icon_id": "7757423",
+      "name": "mosquito.1",
+      "font_class": "mosquito1",
+      "unicode": "ebf6",
+      "unicode_decimal": 60406
+    },
+    {
+      "icon_id": "7757432",
+      "name": "mosquito",
+      "font_class": "mosquito",
+      "unicode": "ebf5",
+      "unicode_decimal": 60405
+    },
+    {
+      "icon_id": "6697986",
+      "name": "power_0",
+      "font_class": "power_",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "6697988",
+      "name": "power_1",
+      "font_class": "power_1",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "6697989",
+      "name": "power_2",
+      "font_class": "power_2",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "6697991",
+      "name": "power_3",
+      "font_class": "power_3",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "6697992",
+      "name": "power_4",
+      "font_class": "power_4",
+      "unicode": "e61b",
+      "unicode_decimal": 58907
+    },
+    {
+      "icon_id": "6697993",
+      "name": "power_5",
+      "font_class": "power_5",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "6697994",
+      "name": "power_6",
+      "font_class": "power_6",
+      "unicode": "e61d",
+      "unicode_decimal": 58909
+    },
+    {
+      "icon_id": "6697995",
+      "name": "power_8",
+      "font_class": "power_8",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "6697996",
+      "name": "power_7",
+      "font_class": "power_7",
+      "unicode": "e61f",
+      "unicode_decimal": 58911
+    },
+    {
+      "icon_id": "6697997",
+      "name": "power_9",
+      "font_class": "power_9",
+      "unicode": "e625",
+      "unicode_decimal": 58917
+    }
+  ]
+}
--- a/src/assets/icon/iconfont.svg
+++ b/src/assets/icon/iconfont.svg
@ -0,0 +1,74 @@
+<?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="signal-2" unicode="&#59479;" d="M432 320h-96c-17.68 0-32-14.32-32-32v-384c0-17.68 14.32-32 32-32h96c17.68 0 32 14.32 32 32V288c0 17.68-14.32 32-32 32zM176 128H80c-17.68 0-32-14.32-32-32v-192c0-17.68 14.32-32 32-32h96c17.68 0 32 14.32 32 32v192c0 17.68-14.32 32-32 32z"  horiz-adv-x="1280" />
+
+    
+    <glyph glyph-name="signal-1" unicode="&#59416;" d="M176 128H80c-17.68 0-32-14.32-32-32v-192c0-17.68 14.32-32 32-32h96c17.68 0 32 14.32 32 32v192c0 17.68-14.32 32-32 32z"  horiz-adv-x="1280" />
+
+    
+    <glyph glyph-name="signal-3" unicode="&#59418;" d="M432 320h-96c-17.68 0-32-14.32-32-32v-384c0-17.68 14.32-32 32-32h96c17.68 0 32 14.32 32 32V288c0 17.68-14.32 32-32 32zM176 128H80c-17.68 0-32-14.32-32-32v-192c0-17.68 14.32-32 32-32h96c17.68 0 32 14.32 32 32v192c0 17.68-14.32 32-32 32z m512 384h-96c-17.68 0-32-14.32-32-32v-576c0-17.68 14.32-32 32-32h96c17.68 0 32 14.32 32 32V480c0 17.68-14.32 32-32 32z"  horiz-adv-x="1280" />
+
+    
+    <glyph glyph-name="signal-4" unicode="&#62990;" d="M432 320h-96c-17.68 0-32-14.32-32-32v-384c0-17.68 14.32-32 32-32h96c17.68 0 32 14.32 32 32V288c0 17.68-14.32 32-32 32zM176 128H80c-17.68 0-32-14.32-32-32v-192c0-17.68 14.32-32 32-32h96c17.68 0 32 14.32 32 32v192c0 17.68-14.32 32-32 32z m512 384h-96c-17.68 0-32-14.32-32-32v-576c0-17.68 14.32-32 32-32h96c17.68 0 32 14.32 32 32V480c0 17.68-14.32 32-32 32z m256 192h-96c-17.68 0-32-14.32-32-32v-768c0-17.68 14.32-32 32-32h96c17.68 0 32 14.32 32 32V672c0 17.68-14.32 32-32 32z"  horiz-adv-x="1280" />
+
+    
+    <glyph glyph-name="mosquito1" unicode="&#60406;" d="M965.973333 578.56c-85.333333 58.026667-283.306667-13.653333-351.573333-40.96l112.64 68.266667c3.413333 3.413333 6.826667 6.826667 6.826667 10.24L785.066667 800.426667l47.786666 47.786666c6.826667 6.826667 6.826667 17.066667 0 23.893334s-17.066667 6.826667-23.893333 0l-51.2-51.2c-3.413333 0-6.826667-3.413333-6.826667-6.826667l-47.786666-180.906667L580.266667 558.08v3.413333c13.653333 17.066667 17.066667 37.546667 17.066666 61.44 0 30.72-23.893333 75.093333-68.266666 81.92V759.466667c0 10.24-6.826667 17.066667-17.066667 17.066666s-17.066667-6.826667-17.066667-17.066666v-54.613334c-44.373333-10.24-68.266667-51.2-68.266666-81.92 0-23.893333 6.826667-44.373333 17.066666-61.44v-3.413333L320.853333 633.173333 273.066667 797.013333c0 3.413333 0 3.413333-3.413334 6.826667L218.453333 872.106667C211.626667 878.933333 201.386667 882.346667 194.56 875.52s-10.24-17.066667-3.413333-23.893333L238.933333 786.773333l51.2-167.253333c0-3.413333 3.413333-6.826667 6.826667-10.24l109.226667-68.266667c-68.266667 27.306667-262.826667 98.986667-348.16 44.373334-30.72-20.48-44.373333-51.2-44.373334-92.16 0-44.373333 17.066667-75.093333 47.786667-98.986667 30.72-20.48 71.68-27.306667 116.053333-27.306667 92.16 0 194.56 34.133333 221.866667 40.96l3.413333-10.24-102.4-34.133333c-6.826667-3.413333-10.24-6.826667-10.24-13.653333-3.413333-71.68-37.546667-256-119.466666-256-10.24 0-17.066667-6.826667-17.066667-17.066667s6.826667-17.066667 17.066667-17.066667c119.466667 0 146.773333 218.453333 153.6 276.48l88.746666 30.72 3.413334-20.48c-58.026667-34.133333-126.293333-249.173333-126.293334-303.786666 0-47.786667-61.44-105.813333-92.16-122.88-6.826667-3.413333-10.24-13.653333-6.826666-23.893334 3.413333-6.826667 10.24-10.24 13.653333-10.24 3.413333 0 6.826667 0 6.826667 3.413334 37.546667 20.48 112.64 85.333333 112.64 150.186666 0 54.613333 61.44 221.866667 98.986666 266.24l3.413334-10.24c-3.413333-37.546667-20.48-252.586667 37.546666-317.44 13.653333-13.653333 30.72-20.48 47.786667-20.48s34.133333 6.826667 47.786667 20.48c61.44 68.266667 40.96 283.306667 37.546666 317.44l3.413334 10.24c37.546667-44.373333 98.986667-211.626667 98.986666-266.24 0-64.853333 75.093333-133.12 112.64-150.186666 3.413333 0 6.826667-3.413333 6.826667-3.413334 6.826667 0 13.653333 3.413333 13.653333 10.24 3.413333 6.826667 0 17.066667-6.826666 23.893334-30.72 17.066667-92.16 75.093333-92.16 122.88 0 54.613333-68.266667 269.653333-126.293334 303.786666l3.413334 20.48 88.746666-30.72c6.826667-58.026667 34.133333-276.48 153.6-276.48 10.24 0 17.066667 6.826667 17.066667 17.066667s-6.826667 17.066667-17.066667 17.066667c-81.92 0-116.053333 184.32-119.466666 256 0 6.826667-3.413333 13.653333-10.24 13.653333l-102.4 34.133333 3.413333 10.24c27.306667-10.24 129.706667-40.96 221.866667-40.96 44.373333 0 88.746667 6.826667 119.466666 30.72 30.72 20.48 44.373333 51.2 44.373334 92.16-3.413333 40.96-17.066667 71.68-44.373334 88.746667z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="mosquito" unicode="&#60405;" d="M958.933333 579.541333c-75.306667 49.365333-229.418667 4.778667-313.941333-25.856l70.826667 47.232a21.333333 21.333333 0 0 1 8.405333 11.008l62.421333 187.221334 39.082667 39.082666a21.333333 21.333333 0 0 1-30.165333 30.165334l-42.666667-42.666667a20.608 20.608 0 0 1-5.162667-8.32l-61.696-185.045333-98.133333-65.450667c7.381333 16.938667 9.429333 34.602667 9.429333 51.754667 0 30.848-20.096 72.490667-64 82.858666V768a21.333333 21.333333 0 0 1-42.666666 0v-66.474667C446.762667 691.157333 426.666667 649.514667 426.666667 618.666667c0-17.194667 2.048-34.858667 9.429333-51.797334L337.92 632.362667 276.224 817.408a20.608 20.608 0 0 1-5.162667 8.32l-42.666666 42.666667a21.333333 21.333333 0 0 1-30.165334-30.165334l39.125334-39.082666 62.421333-187.221334a21.162667 21.162667 0 0 1 8.405333-11.008l70.784-47.189333c-84.522667 30.677333-238.634667 75.264-313.898666 25.813333C45.098667 566.485333 21.333333 540.458667 21.333333 490.666667c0-41.813333 15.36-74.026667 45.696-95.701334 30.805333-21.973333 74.410667-29.653333 120.32-29.653333 70.656 0 146.730667 18.176 189.909334 30.421333l-86.528-34.602666a21.376 21.376 0 0 1-13.397334-18.773334C274.346667 281.216 248.277333 106.666667 170.666667 106.666667a21.333333 21.333333 0 0 1 0-42.666667c119.424 0 143.829333 202.752 148.394666 262.485333l88.661334 35.456 1.92-6.741333C353.536 312.32 277.333333 99.456 277.333333 42.666667c0-43.52-43.050667-92.885333-73.984-109.141334a21.333333 21.333333 0 1 1 19.925334-37.717333C262.272-83.669333 320-22.826667 320 42.666667c0 48 64.213333 216.917333 102.784 266.581333l3.541333-12.330667c-4.266667-37.76-22.656-229.845333 34.730667-294.570666 13.738667-15.488 31.36-23.68 50.944-23.68s37.205333 8.192 50.944 23.637333c57.386667 64.725333 38.997333 256.853333 34.730667 294.570667l3.541333 12.373333C639.829333 259.498667 704 90.666667 704 42.666667c0-65.493333 57.728-126.336 96.768-146.858667a21.12 21.12 0 0 1 28.757333 8.917333 21.333333 21.333333 0 0 1-8.917333 28.8C789.717333-50.218667 746.666667-0.853333 746.666667 42.666667c0 56.746667-76.117333 269.525333-132.309334 312.576l1.92 6.741333 88.618667-35.456c4.608-59.776 29.013333-262.528 148.437333-262.528a21.333333 21.333333 0 0 1-0.042666 42.709333c-77.568 0-103.68 174.549333-106.666667 235.690667a21.376 21.376 0 0 1-13.397333 18.773333l-85.888 34.346667c43.306667-12.245333 118.954667-30.250667 189.269333-30.250667 45.909333 0 89.514667 7.68 120.32 29.653334 30.378667 21.717333 45.738667 53.930667 45.738667 95.744 0 49.792-23.765333 75.818667-43.733334 88.874666z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="power_" unicode="&#58903;" d="M172 42.666h100.66V725.334H172v-682.668z m1621.334 512V725.334C1793.334 819.2 1716.534 896 1622.666 896H172C78.134 896 1.334 819.2 1.334 725.334v-682.668C1.334-51.2 78.134-128 172-128h1450.666c93.868 0 170.668 76.8 170.668 170.666V213.334c46.932 0 85.332 38.4 85.332 85.332V469.334c0 46.932-38.4 85.332-85.332 85.332zM1708 469.334v-426.668c0-46.932-38.4-85.332-85.334-85.332H172c-46.934 0-85.334 38.4-85.334 85.332V725.334c0 46.932 38.4 85.332 85.334 85.332h1450.666c46.934 0 85.334-38.4 85.334-85.332v-256z"  horiz-adv-x="1880" />
+
+    
+    <glyph glyph-name="power_1" unicode="&#58904;" d="M172 42.666h280.66V725.334H172v-682.668z m1621.334 512V725.334C1793.334 819.2 1716.534 896 1622.666 896H172C78.134 896 1.334 819.2 1.334 725.334v-682.668C1.334-51.2 78.134-128 172-128h1450.666c93.868 0 170.668 76.8 170.668 170.666V213.334c46.932 0 85.332 38.4 85.332 85.332V469.334c0 46.932-38.4 85.332-85.332 85.332zM1708 469.334v-426.668c0-46.932-38.4-85.332-85.334-85.332H172c-46.934 0-85.334 38.4-85.334 85.332V725.334c0 46.932 38.4 85.332 85.334 85.332h1450.666c46.934 0 85.334-38.4 85.334-85.332v-256z"  horiz-adv-x="1880" />
+
+    
+    <glyph glyph-name="power_2" unicode="&#58905;" d="M172 42.666h462.66V725.334H172v-682.668z m1621.334 512V725.334C1793.334 819.2 1716.534 896 1622.666 896H172C78.134 896 1.334 819.2 1.334 725.334v-682.668C1.334-51.2 78.134-128 172-128h1450.666c93.868 0 170.668 76.8 170.668 170.666V213.334c46.932 0 85.332 38.4 85.332 85.332V469.334c0 46.932-38.4 85.332-85.332 85.332zM1708 469.334v-426.668c0-46.932-38.4-85.332-85.334-85.332H172c-46.934 0-85.334 38.4-85.334 85.332V725.334c0 46.932 38.4 85.332 85.334 85.332h1450.666c46.934 0 85.334-38.4 85.334-85.332v-256z"  horiz-adv-x="1880" />
+
+    
+    <glyph glyph-name="power_3" unicode="&#58906;" d="M172 42.666h590.66V725.334H172v-682.668z m1621.334 512V725.334C1793.334 819.2 1716.534 896 1622.666 896H172C78.134 896 1.334 819.2 1.334 725.334v-682.668C1.334-51.2 78.134-128 172-128h1450.666c93.868 0 170.668 76.8 170.668 170.666V213.334c46.932 0 85.332 38.4 85.332 85.332V469.334c0 46.932-38.4 85.332-85.332 85.332zM1708 469.334v-426.668c0-46.932-38.4-85.332-85.334-85.332H172c-46.934 0-85.334 38.4-85.334 85.332V725.334c0 46.932 38.4 85.332 85.334 85.332h1450.666c46.934 0 85.334-38.4 85.334-85.332v-256z"  horiz-adv-x="1880" />
+
+    
+    <glyph glyph-name="power_4" unicode="&#58907;" d="M172 42.666h720.66V725.334H172v-682.668z m1621.334 512V725.334C1793.334 819.2 1716.534 896 1622.666 896H172C78.134 896 1.334 819.2 1.334 725.334v-682.668C1.334-51.2 78.134-128 172-128h1450.666c93.868 0 170.668 76.8 170.668 170.666V213.334c46.932 0 85.332 38.4 85.332 85.332V469.334c0 46.932-38.4 85.332-85.332 85.332zM1708 469.334v-426.668c0-46.932-38.4-85.332-85.334-85.332H172c-46.934 0-85.334 38.4-85.334 85.332V725.334c0 46.932 38.4 85.332 85.334 85.332h1450.666c46.934 0 85.334-38.4 85.334-85.332v-256z"  horiz-adv-x="1880" />
+
+    
+    <glyph glyph-name="power_5" unicode="&#58908;" d="M172 42.666h830.66V725.334H172v-682.668z m1621.334 512V725.334C1793.334 819.2 1716.534 896 1622.666 896H172C78.134 896 1.334 819.2 1.334 725.334v-682.668C1.334-51.2 78.134-128 172-128h1450.666c93.868 0 170.668 76.8 170.668 170.666V213.334c46.932 0 85.332 38.4 85.332 85.332V469.334c0 46.932-38.4 85.332-85.332 85.332zM1708 469.334v-426.668c0-46.932-38.4-85.332-85.334-85.332H172c-46.934 0-85.334 38.4-85.334 85.332V725.334c0 46.932 38.4 85.332 85.334 85.332h1450.666c46.934 0 85.334-38.4 85.334-85.332v-256z"  horiz-adv-x="1880" />
+
+    
+    <glyph glyph-name="power_6" unicode="&#58909;" d="M172 42.666h970.66V725.334H172v-682.668z m1621.334 512V725.334C1793.334 819.2 1716.534 896 1622.666 896H172C78.134 896 1.334 819.2 1.334 725.334v-682.668C1.334-51.2 78.134-128 172-128h1450.666c93.868 0 170.668 76.8 170.668 170.666V213.334c46.932 0 85.332 38.4 85.332 85.332V469.334c0 46.932-38.4 85.332-85.332 85.332zM1708 469.334v-426.668c0-46.932-38.4-85.332-85.334-85.332H172c-46.934 0-85.334 38.4-85.334 85.332V725.334c0 46.932 38.4 85.332 85.334 85.332h1450.666c46.934 0 85.334-38.4 85.334-85.332v-256z"  horiz-adv-x="1880" />
+
+    
+    <glyph glyph-name="power_8" unicode="&#58910;" d="M172 42.666000000000054h1270.66V725.3340000000001H172v-682.668z m1621.334 512V725.3340000000001C1793.334 819.2 1716.534 896 1622.666 896H172C78.134 896 1.334 819.2 1.334 725.3340000000001v-682.668C1.334-51.200000000000045 78.134-128 172-128h1450.666c93.868 0 170.668 76.8 170.668 170.666V213.33399999999995c46.932 0 85.332 38.4 85.332 85.332V469.334c0 46.932-38.4 85.332-85.332 85.332zM1708 469.334v-426.668c0-46.932-38.4-85.332-85.334-85.332H172c-46.934 0-85.334 38.4-85.334 85.332V725.3340000000001c0 46.932 38.4 85.332 85.334 85.332h1450.666c46.934 0 85.334-38.4 85.334-85.332v-256z"  horiz-adv-x="1880" />
+
+    
+    <glyph glyph-name="power_7" unicode="&#58911;" d="M172 42.666000000000054h1110.66V725.3340000000001H172v-682.668z m1621.334 512V725.3340000000001C1793.334 819.2 1716.534 896 1622.666 896H172C78.134 896 1.334 819.2 1.334 725.3340000000001v-682.668C1.334-51.200000000000045 78.134-128 172-128h1450.666c93.868 0 170.668 76.8 170.668 170.666V213.33399999999995c46.932 0 85.332 38.4 85.332 85.332V469.334c0 46.932-38.4 85.332-85.332 85.332zM1708 469.334v-426.668c0-46.932-38.4-85.332-85.334-85.332H172c-46.934 0-85.334 38.4-85.334 85.332V725.3340000000001c0 46.932 38.4 85.332 85.334 85.332h1450.666c46.934 0 85.334-38.4 85.334-85.332v-256z"  horiz-adv-x="1880" />
+
+    
+    <glyph glyph-name="power_9" unicode="&#58917;" d="M172 42.666h1450.666V725.334H172v-682.668z m1621.334 512V725.334C1793.334 819.2 1716.534 896 1622.666 896H172C78.134 896 1.334 819.2 1.334 725.334v-682.668C1.334-51.2 78.134-128 172-128h1450.666c93.868 0 170.668 76.8 170.668 170.666V213.334c46.932 0 85.332 38.4 85.332 85.332V469.334c0 46.932-38.4 85.332-85.332 85.332zM1708 469.334v-426.668c0-46.932-38.4-85.332-85.334-85.332H172c-46.934 0-85.334 38.4-85.334 85.332V725.334c0 46.932 38.4 85.332 85.334 85.332h1450.666c46.934 0 85.334-38.4 85.334-85.332v-256z"  horiz-adv-x="1880" />
+
+    
+
+
+  </font>
+</defs></svg>
--- a/src/assets/icon/iconfont.ttf
+++ b/src/assets/icon/iconfont.ttf
--- a/src/assets/icon/iconfont.woff
+++ b/src/assets/icon/iconfont.woff
--- a/src/assets/icon/iconfont.woff2
+++ b/src/assets/icon/iconfont.woff2
--- a/src/main.js
+++ b/src/main.js
@ -13,6 +13,7 @@ import store from './store'

 import i18n from './lang' // Internationalization
 import './icons' // icon
+import './assets/icon/iconfont.css' // ali icon
 import './errorLog'// error log
 import './permission' // permission control
 // import './mock' // simulation data
--- a/src/views/counter/device.vue
+++ b/src/views/counter/device.vue
@ -55,24 +55,46 @@
        :label="$t('counter.status')"
        min-width="80">
        <template slot-scope="scope">
-          <span v-if="scope.row.status==0" style="color: #F56C6C">{{$t('counter.offline')}}</span>
-          <span v-if="scope.row.status==1" style="color: #67C23A">{{$t('counter.online')}}</span>
+          <span v-if="scope.row.status==0" style="color: #F56C6C" ><i class="el-icon-error"></i> {{$t('counter.offline')}}</span>
+          <span v-if="scope.row.status==1" style="color: #67C23A" ><i class="el-icon-success"></i> {{$t('counter.online')}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="count"
        :label="$t('counter.count')"
        min-width="80">
+        <template slot-scope="scope">
+          <span ><i class="el-icon-alimosquito"></i> {{scope.row.count}}</span>
+        </template>
      </el-table-column>
      <el-table-column
        prop="signal"
        :label="$t('counter.signal')"
        min-width="80">
+        <template slot-scope="scope">
+          <span v-if="scope.row.signal>=24" style="color: #67C23A" ><i class="el-icon-alisignal-4"></i></span>
+          <span v-if="scope.row.signal>=16 && scope.row.signal<24" style="color: #67C23A" ><i class="el-icon-alisignal-3"></i></span>
+          <span v-if="scope.row.signal>=8 && scope.row.signal<16" style="color: #FF9B21" ><i class="el-icon-alisignal-2"></i></span>
+          <span v-if="scope.row.signal>=0 && scope.row.signal<8" style="color: #F56C6C" ><i class="el-icon-alisignal-1"></i></span>
+        </template>
+
      </el-table-column>
      <el-table-column
        prop="energy"
        :label="$t('counter.energy')"
        min-width="80">
+        <template slot-scope="scope">
+          <span v-if="scope.row.energy.replace('%','') >= 90" style="color: #67C23A" ><i class="el-icon-alipower_9"></i> {{scope.row.energy}}</span>
+          <span v-if="scope.row.energy.replace('%','') >= 80 && scope.row.energy.replace('%','') < 90" style="color: #67C23A" ><i class="el-icon-alipower_8"></i> {{scope.row.energy}}</span>
+          <span v-if="scope.row.energy.replace('%','') >= 70 && scope.row.energy.replace('%','') < 80" style="color: #67C23A" ><i class="el-icon-alipower_7"></i> {{scope.row.energy}}</span>
+          <span v-if="scope.row.energy.replace('%','') >= 60 && scope.row.energy.replace('%','') < 70" style="color: #67C23A" ><i class="el-icon-alipower_6"></i> {{scope.row.energy}}</span>
+          <span v-if="scope.row.energy.replace('%','') >= 50 && scope.row.energy.replace('%','') < 60" style="color: #67C23A" ><i class="el-icon-alipower_5"></i> {{scope.row.energy}}</span>
+          <span v-if="scope.row.energy.replace('%','') >= 40 && scope.row.energy.replace('%','') < 50" style="color: #FF9B21" ><i class="el-icon-alipower_4"></i> {{scope.row.energy}}</span>
+          <span v-if="scope.row.energy.replace('%','') >= 30 && scope.row.energy.replace('%','') < 40" style="color: #FF9B21" ><i class="el-icon-alipower_3" ></i> {{scope.row.energy}}</span>
+          <span v-if="scope.row.energy.replace('%','') >= 20 && scope.row.energy.replace('%','') < 30" style="color: #FF9B21" ><i class="el-icon-alipower_2"></i> {{scope.row.energy}}</span>
+          <span v-if="scope.row.energy.replace('%','') >= 10 && scope.row.energy.replace('%','') < 20" style="color: #F56C6C" ><i class="el-icon-alipower_1"></i> {{scope.row.energy}}</span>
+          <span v-if="scope.row.energy.replace('%','') >= 0 && scope.row.energy.replace('%','') < 10" style="color: #F56C6C" ><i class="el-icon-alipower_"></i> {{scope.row.energy}}</span>
+        </template>
      </el-table-column>
      <el-table-column
        prop="time"