aa

src/assets/icon/icon1/demo.css

+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/icon/icon1/demo_index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1592179" 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">&#xe600;</span>
+                <div class="name">右</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">右上</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">异常</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe603;</span>
+                <div class="name">右下</div>
+                <div class="code-name">&amp;#xe603;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe604;</span>
+                <div class="name">重置</div>
+                <div class="code-name">&amp;#xe604;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe605;</span>
+                <div class="name">展示</div>
+                <div class="code-name">&amp;#xe605;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe606;</span>
+                <div class="name">左上</div>
+                <div class="code-name">&amp;#xe606;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe607;</span>
+                <div class="name">下</div>
+                <div class="code-name">&amp;#xe607;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe608;</span>
+                <div class="name">运行路数</div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe609;</span>
+                <div class="name">总量</div>
+                <div class="code-name">&amp;#xe609;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60a;</span>
+                <div class="name">左下</div>
+                <div class="code-name">&amp;#xe60a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60b;</span>
+                <div class="name">定位 位置</div>
+                <div class="code-name">&amp;#xe60b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60c;</span>
+                <div class="name">保存 面性</div>
+                <div class="code-name">&amp;#xe60c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">上</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60e;</span>
+                <div class="name">分析</div>
+                <div class="code-name">&amp;#xe60e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60f;</span>
+                <div class="name">导出</div>
+                <div class="code-name">&amp;#xe60f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe610;</span>
+                <div class="name">开启</div>
+                <div class="code-name">&amp;#xe610;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe611;</span>
+                <div class="name">删 除 (2)</div>
+                <div class="code-name">&amp;#xe611;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe612;</span>
+                <div class="name">导入</div>
+                <div class="code-name">&amp;#xe612;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe613;</span>
+                <div class="name">左</div>
+                <div class="code-name">&amp;#xe613;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe614;</span>
+                <div class="name">删 除</div>
+                <div class="code-name">&amp;#xe614;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe615;</span>
+                <div class="name">编组 12</div>
+                <div class="code-name">&amp;#xe615;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe616;</span>
+                <div class="name">编组 14</div>
+                <div class="code-name">&amp;#xe616;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe617;</span>
+                <div class="name">编组 13</div>
+                <div class="code-name">&amp;#xe617;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe618;</span>
+                <div class="name">添加</div>
+                <div class="code-name">&amp;#xe618;</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 iconyou"></span>
+            <div class="name">
+              右
+            </div>
+            <div class="code-name">.iconyou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconyoushang"></span>
+            <div class="name">
+              右上
+            </div>
+            <div class="code-name">.iconyoushang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconyichang"></span>
+            <div class="name">
+              异常
+            </div>
+            <div class="code-name">.iconyichang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconyouxia"></span>
+            <div class="name">
+              右下
+            </div>
+            <div class="code-name">.iconyouxia
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzhongzhi"></span>
+            <div class="name">
+              重置
+            </div>
+            <div class="code-name">.iconzhongzhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzhanshi"></span>
+            <div class="name">
+              展示
+            </div>
+            <div class="code-name">.iconzhanshi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzuoshang"></span>
+            <div class="name">
+              左上
+            </div>
+            <div class="code-name">.iconzuoshang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconxia"></span>
+            <div class="name">
+              下
+            </div>
+            <div class="code-name">.iconxia
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconyunhanglushu"></span>
+            <div class="name">
+              运行路数
+            </div>
+            <div class="code-name">.iconyunhanglushu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzongliang"></span>
+            <div class="name">
+              总量
+            </div>
+            <div class="code-name">.iconzongliang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzuoxia"></span>
+            <div class="name">
+              左下
+            </div>
+            <div class="code-name">.iconzuoxia
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icondingweiweizhi"></span>
+            <div class="name">
+              定位 位置
+            </div>
+            <div class="code-name">.icondingweiweizhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconbaocunmianxing"></span>
+            <div class="name">
+              保存 面性
+            </div>
+            <div class="code-name">.iconbaocunmianxing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshang"></span>
+            <div class="name">
+              上
+            </div>
+            <div class="code-name">.iconshang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconfenxi"></span>
+            <div class="name">
+              分析
+            </div>
+            <div class="code-name">.iconfenxi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icondaochu"></span>
+            <div class="name">
+              导出
+            </div>
+            <div class="code-name">.icondaochu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconkaiqi"></span>
+            <div class="name">
+              开启
+            </div>
+            <div class="code-name">.iconkaiqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshanchu"></span>
+            <div class="name">
+              删 除 (2)
+            </div>
+            <div class="code-name">.iconshanchu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icondaoru"></span>
+            <div class="name">
+              导入
+            </div>
+            <div class="code-name">.icondaoru
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzuo"></span>
+            <div class="name">
+              左
+            </div>
+            <div class="code-name">.iconzuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshanchu1"></span>
+            <div class="name">
+              删 除
+            </div>
+            <div class="code-name">.iconshanchu1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconbianzu"></span>
+            <div class="name">
+              编组 12
+            </div>
+            <div class="code-name">.iconbianzu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconbianzu1"></span>
+            <div class="name">
+              编组 14
+            </div>
+            <div class="code-name">.iconbianzu1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconbianzu2"></span>
+            <div class="name">
+              编组 13
+            </div>
+            <div class="code-name">.iconbianzu2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icontianjia"></span>
+            <div class="name">
+              添加
+            </div>
+            <div class="code-name">.icontianjia
+            </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 iconxxx"&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="#iconyou"></use>
+                </svg>
+                <div class="name">右</div>
+                <div class="code-name">#iconyou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconyoushang"></use>
+                </svg>
+                <div class="name">右上</div>
+                <div class="code-name">#iconyoushang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconyichang"></use>
+                </svg>
+                <div class="name">异常</div>
+                <div class="code-name">#iconyichang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconyouxia"></use>
+                </svg>
+                <div class="name">右下</div>
+                <div class="code-name">#iconyouxia</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzhongzhi"></use>
+                </svg>
+                <div class="name">重置</div>
+                <div class="code-name">#iconzhongzhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzhanshi"></use>
+                </svg>
+                <div class="name">展示</div>
+                <div class="code-name">#iconzhanshi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzuoshang"></use>
+                </svg>
+                <div class="name">左上</div>
+                <div class="code-name">#iconzuoshang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconxia"></use>
+                </svg>
+                <div class="name">下</div>
+                <div class="code-name">#iconxia</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconyunhanglushu"></use>
+                </svg>
+                <div class="name">运行路数</div>
+                <div class="code-name">#iconyunhanglushu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzongliang"></use>
+                </svg>
+                <div class="name">总量</div>
+                <div class="code-name">#iconzongliang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzuoxia"></use>
+                </svg>
+                <div class="name">左下</div>
+                <div class="code-name">#iconzuoxia</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icondingweiweizhi"></use>
+                </svg>
+                <div class="name">定位 位置</div>
+                <div class="code-name">#icondingweiweizhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconbaocunmianxing"></use>
+                </svg>
+                <div class="name">保存 面性</div>
+                <div class="code-name">#iconbaocunmianxing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshang"></use>
+                </svg>
+                <div class="name">上</div>
+                <div class="code-name">#iconshang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconfenxi"></use>
+                </svg>
+                <div class="name">分析</div>
+                <div class="code-name">#iconfenxi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icondaochu"></use>
+                </svg>
+                <div class="name">导出</div>
+                <div class="code-name">#icondaochu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconkaiqi"></use>
+                </svg>
+                <div class="name">开启</div>
+                <div class="code-name">#iconkaiqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshanchu"></use>
+                </svg>
+                <div class="name">删 除 (2)</div>
+                <div class="code-name">#iconshanchu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icondaoru"></use>
+                </svg>
+                <div class="name">导入</div>
+                <div class="code-name">#icondaoru</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzuo"></use>
+                </svg>
+                <div class="name">左</div>
+                <div class="code-name">#iconzuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshanchu1"></use>
+                </svg>
+                <div class="name">删 除</div>
+                <div class="code-name">#iconshanchu1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconbianzu"></use>
+                </svg>
+                <div class="name">编组 12</div>
+                <div class="code-name">#iconbianzu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconbianzu1"></use>
+                </svg>
+                <div class="name">编组 14</div>
+                <div class="code-name">#iconbianzu1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconbianzu2"></use>
+                </svg>
+                <div class="name">编组 13</div>
+                <div class="code-name">#iconbianzu2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icontianjia"></use>
+                </svg>
+                <div class="name">添加</div>
+                <div class="code-name">#icontianjia</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>

src/assets/icon/icon1/iconfont.css

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1577785849356'); /* IE9 */
+  src: url('iconfont.eot?t=1577785849356#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=1577785849356') format('woff'),
+  url('iconfont.ttf?t=1577785849356') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1577785849356#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;
+}
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+[class^="icon-faxin"], [class*="icon-fanxin"] {
+  font-family:"iconfont" !important;
+  /* 以下内容参照第三方图标库本身的规则 */
+  font-size: 18px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-fanxin-you:before {
+  content: "\e600";
+}
+
+.icon-fanxin-youshang:before {
+  content: "\e601";
+}
+
+.icon-fanxin-yichang:before {
+  content: "\e602";
+}
+
+.icon-fanxin-youxia:before {
+  content: "\e603";
+}
+
+.icon-fanxin-zhongzhi:before {
+  content: "\e604";
+}
+
+.icon-fanxin-zhanshi:before {
+  content: "\e605";
+}
+
+.icon-fanxin-zuoshang:before {
+  content: "\e606";
+}
+
+.icon-fanxin-xia:before {
+  content: "\e607";
+}
+
+.icon-fanxin-yunhanglushu:before {
+  content: "\e608";
+}
+
+.icon-fanxin-zongliang:before {
+  content: "\e609";
+}
+
+.icon-fanxin-zuoxia:before {
+  content: "\e60a";
+}
+
+.icon-fanxin-dingweiweizhi:before {
+  content: "\e60b";
+}
+
+.icon-fanxin-baocunmianxing:before {
+  content: "\e60c";
+}
+
+.icon-fanxin-shang:before {
+  content: "\e60d";
+}
+
+.icon-fanxin-fenxi:before {
+  content: "\e60e";
+}
+
+.icon-fanxin-daochu:before {
+  content: "\e60f";
+}
+
+.icon-fanxin-kaiqi:before {
+  content: "\e610";
+}
+
+.icon-fanxin-shanchu:before {
+  content: "\e611";
+}
+
+.icon-fanxin-daoru:before {
+  content: "\e612";
+}
+
+.icon-fanxin-zuo:before {
+  content: "\e613";
+}
+
+.icon-fanxin-shanchu1:before {
+  content: "\e614";
+}
+
+.icon-fanxin-bianzu:before {
+  content: "\e615";
+}
+
+.icon-fanxin-bianzu1:before {
+  content: "\e616";
+}
+
+.icon-fanxin-bianzu2:before {
+  content: "\e617";
+}
+
+.icon-fanxin-tianjia:before {
+  content: "\e618";
+}
+

src/assets/icon/icon1/iconfont.js

+!function(i){var a,o='<svg><symbol id="iconyou" viewBox="0 0 1024 1024"><path d="M1006.644068 1006.644068m-52.067797 0l-885.152542 0q-52.067797 0-52.067797-52.067797l0-885.152542q0-52.067797 52.067797-52.067797l885.152542 0q52.067797 0 52.067797 52.067797l0 885.152542q0 52.067797-52.067797 52.067797Z"  ></path><path d="M143.186441 111.077966L514.169492 506.79322 143.186441 902.508475H514.169492L885.152542 506.79322l-370.98305-395.715254z"  ></path></symbol><symbol id="iconyoushang" viewBox="0 0 1041 1024"><path d="MNaN NaNmNaN NaNlNaN NaNqNaN NaN NaN NaNlNaN NaNqNaN NaN NaN NaNlNaN NaNqNaN NaN NaN NaNlNaN NaNqNaN NaN NaN NaNZ"  ></path><path d="MNaN NaNLNaN NaNlNaN NaN NaN NaN NaN NaN NaN NaNz"  ></path></symbol><symbol id="iconyichang" viewBox="0 0 1024 1024"><path d="M378.88 739.84c0-199.68 161.28-360.96 360.96-360.96 33.28 0 64 5.12 94.72 12.8V76.8c0-40.96-33.28-76.8-76.8-76.8H76.8C33.28 0 0 33.28 0 76.8v796.16c0 40.96 33.28 76.8 76.8 76.8h368.64c-40.96-61.44-66.56-133.12-66.56-209.92zM189.44 151.04h455.68c20.48 0 38.4 17.92 38.4 38.4s-17.92 38.4-38.4 38.4H189.44c-20.48 0-38.4-17.92-38.4-38.4s17.92-38.4 38.4-38.4z m0 227.84h151.04c20.48 0 38.4 17.92 38.4 38.4s-17.92 38.4-38.4 38.4H189.44c-20.48 0-38.4-17.92-38.4-38.4s17.92-38.4 38.4-38.4z m76.8 304.64h-76.8c-20.48 0-38.4-17.92-38.4-38.4s17.92-38.4 38.4-38.4h76.8c20.48 0 38.4 17.92 38.4 38.4s-17.92 38.4-38.4 38.4z m473.6-227.84c156.16 0 284.16 128 284.16 284.16S896 1024 739.84 1024s-284.16-128-284.16-284.16 128-284.16 284.16-284.16z m0 122.88c-20.48 0-38.4 17.92-38.4 38.4v153.6c0 20.48 17.92 38.4 38.4 38.4s38.4-17.92 38.4-38.4v-153.6c0-20.48-17.92-38.4-38.4-38.4z m0 256c-20.48 0-38.4 17.92-38.4 38.4s17.92 38.4 38.4 38.4 38.4-17.92 38.4-38.4-17.92-38.4-38.4-38.4z"  ></path></symbol><symbol id="iconyouxia" viewBox="0 0 1024 1024"><path d="MNaN NaNmNaN NaNlNaN NaNqNaN NaN NaN NaNlNaN NaNqNaN NaN NaN NaNlNaN NaNqNaN NaN NaN NaNlNaN NaNqNaN NaN NaN NaNZ"  ></path><path d="MNaN NaNLNaN NaNlNaN NaN NaN NaN NaN NaN NaN NaNz"  ></path></symbol><symbol id="iconzhongzhi" viewBox="0 0 1024 1024"><path d="M1024 0m0 53.894737l0 916.210526q0 53.894737-53.894737 53.894737l-916.210526 0q-53.894737 0-53.894737-53.894737l0-916.210526q0-53.894737 53.894737-53.894737l916.210526 0q53.894737 0 53.894737 53.894737Z"  ></path><path d="M835.116912 324.033123L891.957895 267.551439 892.335158 512l-246.029474-0.377263 95.752983-95.142176c-59.176421-125.556772-209.596632-179.667088-335.961825-120.867929a251.724351 251.724351 0 0 0-127.155649 133.425403l-132.652912-0.07186C198.512281 227.579509 405.162667 106.388211 607.860772 158.288842a378.826105 378.826105 0 0 1 227.25614 165.744281z m-538.606035 298.217544c59.266246 125.538807 209.740351 179.577263 336.069614 120.670315a251.778246 251.778246 0 0 0 126.976-133.245754l132.778667-0.053895c-52.241965 201.422596-258.928281 322.63186-461.626386 270.713263a378.88 378.88 0 0 1-227.184281-165.690385l-56.858947 56.481684-0.377263-244.502456 246.047438 0.377263-95.824842 95.178105 0 0.053895z"  ></path></symbol><symbol id="iconzhanshi" viewBox="0 0 1024 1024"><path d="M512 294.343111C358.4 294.343111 224.085333 428.714667 224.085333 512c0 83.171556 134.371556 217.656889 287.914667 217.656889 159.971556 0 287.914667-153.6 287.914667-217.656889 0-63.943111-127.943111-217.656889-287.914667-217.656889z m0 313.685333c-51.2 0-96.028444-44.828444-96.028444-96.028444 0-51.2 44.828444-96.028444 96.028444-96.028444 51.2 0 96.028444 44.828444 96.028444 96.028444 0 51.2-44.828444 96.028444-96.028444 96.028444zM512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512-230.4-512-512-512z m0 793.6c-185.571556 0-352.028444-159.971556-352.028444-281.6 0-121.628444 166.456889-281.6 352.028444-281.6 185.571556 0 352.028444 172.828444 352.028444 281.6 0 108.771556-166.456889 281.6-352.028444 281.6z"  ></path></symbol><symbol id="iconzuoshang" viewBox="0 0 1024 1024"><path d="M1006.644068 16.713763m0 52.067796l0 885.794712q0 52.067797-52.067797 52.067797l-885.794712 0q-52.067797 0-52.067796-52.067797l0-885.794712q0-52.067797 52.067796-52.067796l885.794712 0q52.067797 0 52.067797 52.067796Z"  ></path><path d="M395.472271 955.461424l17.49478-542.494373 542.494373-17.49478-262.491119-262.491118L150.475932 150.475932l-17.494779 542.494373z"  ></path></symbol><symbol id="iconxia" viewBox="0 0 1024 1024"><path d="MNaN NaNmNaN NaNlNaN NaNqNaN NaN NaN NaNlNaN NaNqNaN NaN NaN NaNlNaN NaNqNaN NaN NaN NaNlNaN NaNqNaN NaN NaN NaNZ"  ></path><path d="MNaN NaNLNaN NaN NaN NaN NaN NaN NaN NaNlNaN NaNz"  ></path></symbol><symbol id="iconyunhanglushu" viewBox="0 0 1137 1024"><path d="M1037.767111 366.40237l-76.231111-220.008296-1.517037-2.048a51.275852 51.275852 0 0 0-3.565037-6.257778C930.702222 89.088 883.749926 0 763.904 0H372.811852C251.828148 0.265481 204.420741 90.794667 179.920593 139.226074L173.700741 151.703704v5.309629c0 0.910222-0.910222 1.820444-0.910222 2.692741L100.958815 365.530074C37.05363 409.144889 0 472.367407 0 538.320593V830.577778c0 40.808296 14.184296 80.402963 40.011852 111.881481v6.712889h5.423407a182.878815 182.878815 0 0 0 113.246815 59.543704 177.682963 177.682963 0 0 0 183.940741-95.345778l449.725629-1.744593a182.992593 182.992593 0 0 0 186.671408 98.152297A179.503407 179.503407 0 0 0 1137.777778 831.260444v-292.029629c-0.606815-64.625778-37.850074-128.265481-100.010667-172.828445z m-778.126222 333.368889a80.175407 80.175407 0 0 1-80.023704-80.327111c0-44.373333 35.84-80.327111 80.023704-80.327111s80.023704 35.991704 80.023704 80.327111c0 44.373333-35.84 80.365037-80.023704 80.365037z m621.340444 0a80.175407 80.175407 0 0 1-80.023703-80.327111c0-44.373333 35.84-80.327111 80.023703-80.327111s80.023704 35.991704 80.023704 80.327111c0 44.373333-35.84 80.365037-80.023704 80.365037zM179.655111 426.249481l86.281482-246.897777v-0.872297c25.78963-49.910519 49.682963-84.612741 107.406222-84.61274h392.078222c58.595556 0 82.488889 36.484741 109.150815 88.177777l1.782518 3.565037c0 1.782519 1.782519 3.565037 2.654815 6.257778l81.957926 234.382222H179.655111z"  ></path></symbol><symbol id="iconzongliang" viewBox="0 0 1024 1024"><path d="M512 413.513143c272.64 0 493.714286-92.598857 493.714286-206.811429C1005.714286 92.452571 784.64 0 512 0S18.285714 92.598857 18.285714 206.701714s221.074286 206.811429 493.714286 206.811429z m419.218286-10.752c-109.092571 59.904-267.483429 88.32-419.218286 88.32-151.844571 0-310.125714-28.416-419.218286-88.32C45.604571 434.468571 18.285714 471.771429 18.285714 511.926857c0 114.249143 221.074286 206.811429 493.714286 206.811429S1005.714286 626.176 1005.714286 511.926857c0-40.118857-27.318857-77.421714-74.496-109.165714z m0 305.225143c-109.092571 59.904-267.483429 88.356571-419.218286 88.356571-151.844571 0-310.125714-28.452571-419.218286-88.356571C45.604571 739.730286 18.285714 777.069714 18.285714 817.188571 18.285714 931.401143 239.36 1024 512 1024S1005.714286 931.401143 1005.714286 817.188571c0-40.118857-27.318857-77.568-74.496-109.202285z"  ></path></symbol><symbol id="iconzuoxia" viewBox="0 0 1024 1024"><path d="M16.713763 17.355932m52.067796 0l885.794712 0q52.067797 0 52.067797 52.067797l0 885.794712q0 52.067797-52.067797 52.067796l-885.794712 0q-52.067797 0-52.067796-52.067796l0-885.794712q0-52.067797 52.067796-52.067797Z"  ></path><path d="M955.461424 628.527729l-542.494373-17.49478-17.49478-542.494373-262.491118 262.491119L150.475932 873.524068l542.494373 17.494779z"  ></path></symbol><symbol id="icondingweiweizhi" viewBox="0 0 1024 1024"><path d="M511.99904 0C282.23904 0 95.99904 189.888 95.99904 424.192c0 117.12 46.592 223.104 121.856 299.904L511.99904 1024l294.144-299.904A427.072 427.072 0 0 0 927.99904 424.192C927.99904 189.888 741.75904 0 511.99904 0z m0 612.608C409.59904 612.352 326.78304 528 327.03904 424.192v-0.128C326.78304 320.32 409.59904 235.904 511.87104 235.648H511.99904c102.4 0.256 185.216 84.608 184.96 188.416v0.128c0.32 103.744-82.432 188.16-184.768 188.48H511.99904v-0.064z"  ></path></symbol><symbol id="iconbaocunmianxing" viewBox="0 0 1024 1024"><path d="M170.642286 0v385.974857c0 31.890286 30.573714 57.782857 68.315428 57.782857h546.084572c37.741714 0 68.315429-25.892571 68.315428-57.782857V0A170.642286 170.642286 0 0 1 1024 170.642286v682.715428A170.642286 170.642286 0 0 1 853.357714 1024H170.642286A170.642286 170.642286 0 0 1 0 853.357714V170.642286A170.642286 170.642286 0 0 1 170.642286 0z m68.315428 0h546.084572v375.442286H238.957714V0z m443.684572 136.557714a34.157714 34.157714 0 0 0-34.084572 34.084572v102.4a34.157714 34.157714 0 0 0 68.242286 0v-102.4a34.157714 34.157714 0 0 0-34.157714-34.084572z"  ></path></symbol><symbol id="iconshang" viewBox="0 0 1024 1024"><path d="M1006.644068 17.355932m0 52.067797l0 885.152542q0 52.067797-52.067797 52.067797l-885.152542 0q-52.067797 0-52.067797-52.067797l0-885.152542q0-52.067797 52.067797-52.067797l885.152542 0q52.067797 0 52.067797 52.067797Z"  ></path><path d="M111.077966 880.813559L506.79322 509.830508 902.508475 880.813559 902.508475 509.830508 506.79322 138.847458l-395.715254 370.98305z"  ></path></symbol><symbol id="iconfenxi" viewBox="0 0 1024 1024"><path d="M284.444339 1024a31.895692 31.895692 0 0 1-31.516433-32.312877 31.933618 31.933618 0 0 1 31.478507-31.326803H739.555282c17.673475 0.265481 31.781914 14.791106 31.478507 32.350803a31.933618 31.933618 0 0 1-31.478507 31.288877h-455.110943zM895.961742 0.000379H127.999953A127.658619 127.658619 0 0 0 0 127.317665v587.775783a127.658619 127.658619 0 0 0 127.999953 127.317286h767.999715A127.658619 127.658619 0 0 0 1023.999621 715.093448V127.317665A127.658619 127.658619 0 0 0 895.999668 0.000379z m-46.724723 260.171756l-246.783909 288.729967c-1.592888 1.896296-1.592888 1.896296-3.33748 3.565036a44.980131 44.980131 0 0 1-63.336273-1.744592l-139.3398-146.735353-175.862454 158.682015a32.123247 32.123247 0 0 1-45.131835-3.223703 31.706062 31.706062 0 0 1 2.123851-43.88028l189.819189-171.34927a44.980131 44.980131 0 0 1 62.729459 2.351407l137.48143 144.876983 232.865099-272.497676a32.123247 32.123247 0 0 1 45.169761-2.920296c13.008588 11.339848 14.601476 30.909618 3.602962 44.183688z"  ></path></symbol><symbol id="icondaochu" viewBox="0 0 1084 1024"><path d="M189.741176 615.243294c0 53.910588 9.336471 106.194824 26.262589 154.202353 61.801412-179.501176 226.183529-307.621647 420.98447-307.621647v76.739765c0 29.515294 16.082824 55.597176 41.562353 69.089882 10.119529 5.059765 21.985882 8.432941 32.948706 8.432941 16.143059 0 31.322353-5.059765 44.93553-15.179294l298.164705-230.942118c18.672941-14.275765 29.635765-37.044706 29.635765-61.500235 0-24.455529-11.023059-47.224471-29.635765-61.500235L756.434824 15.179294A72.161882 72.161882 0 0 0 678.490353 8.432941c-25.419294 12.649412-41.502118 39.634824-41.502118 69.089883V154.202353C390.505412 153.419294 189.741176 360.688941 189.741176 615.243294z m840.282353-22.768941c-29.635765 0-54.211765 24.455529-54.211764 53.970823v64.873412c0 113.784471-4.216471 204.8-216.847059 204.8H325.270588c-219.376941 0-216.847059-96.918588-216.847059-215.762823V430.682353c-15.239529-169.441882 65.234824-206.486588 162.635295-214.076235h3.373176c29.635765 0 54.211765-24.455529 54.211765-53.970824s-24.576-54.814118-54.211765-54.814118H271.058824v-0.783058h-54.211765C97.400471 107.038118 0 203.956706 0 322.800941v485.496471C0 927.021176 97.400471 1024 216.847059 1024h649.697882c119.446588 0 216.847059-96.978824 216.847059-215.762824v-161.792a53.187765 53.187765 0 0 0-53.368471-53.970823z"  ></path></symbol><symbol id="iconkaiqi" viewBox="0 0 1706 1024"><path d="M47.047111 504.604444C47.047111 251.221333 256.284444 45.681778 514.446222 45.681778c258.161778 0 467.399111 205.482667 467.399111 458.922666s-209.237333 458.922667-467.399111 458.922667c-258.161778 0-467.399111-205.482667-467.399111-458.922667M0 505.742222c0 279.267556 230.570667 505.685333 515.072 505.685334h676.522667c284.444444 0 515.072-226.417778 515.072-505.742223C1706.666667 226.417778 1476.096 0 1191.594667 0H515.072C230.627556 0 0 226.417778 0 505.685333"  ></path></symbol><symbol id="iconshanchu" viewBox="0 0 1024 1024"><path d="M784.96 125.12H221.568C170.048 125.12 128 167.04 128 219.2v30.976h750.528v-31.488c0-51.584-41.984-93.568-93.568-93.568zM620.864 62.528l14.016 98.56H371.712l13.952-98.56h235.2zM628.352 0H378.24a55.68 55.68 0 0 0-53.504 46.528l-18.56 131.136a39.872 39.872 0 0 0 40.576 46.528h312.704a39.872 39.872 0 0 0 40.512-46.528L681.408 46.528A54.72 54.72 0 0 0 628.352 0z m172.16 312.704H206.08a56.384 56.384 0 0 0-57.088 62.592l51.072 563.392c3.008 34.048 33.984 62.528 68.032 62.528h469.376c34.56 0 65.024-27.968 68.032-62.528l51.52-563.392a55.744 55.744 0 0 0-56.512-62.592z m-422.336 562.944H284.16l-30.976-437.824h125.056v437.824z m187.648 0H440.704V437.824h125.12v437.824z m156.608 0h-94.08V437.824h125.12l-31.04 437.824z"  ></path></symbol><symbol id="icondaoru" viewBox="0 0 1296 1024"><path d="M973.183381 360.866032a8.32243 8.32243 0 0 0 1.841849-8.663514 7.230964 7.230964 0 0 0-6.753447-4.979815h-200.693358l0.4093-323.619745A24.557991 24.557991 0 0 0 761.711794 6.821664 20.669642 20.669642 0 0 0 746.294833 0H549.830906a20.737859 20.737859 0 0 0-15.280527 6.889881 24.626207 24.626207 0 0 0-6.344148 16.713077l0.4093 323.619745H327.785739a7.230964 7.230964 0 0 0-6.685231 4.979815 8.32243 8.32243 0 0 0 1.84185 8.663514l310.385717 313.660115a20.669642 20.669642 0 0 0 14.734794 6.275931 20.669642 20.669642 0 0 0 14.734795-6.275931l310.385717-313.660115z m309.226034 333.852241l-194.622077-165.493571a81.859969 81.859969 0 0 0-45.5005-17.05416h-77.221237L1184.927835 716.274732l-254.857371 0.136433-95.093998 148.507628H460.262456L369.056807 716.479382l-253.493038-0.136433 227.502498-204.240624-89.295583 0.068217a81.859969 81.859969 0 0 0-45.432283 17.05416L13.648107 694.718273c-11.051096 9.34568-16.508427 28.855639-12.142562 43.385784l77.630537 258.813936c4.365865 14.461928 19.373526 26.331623 33.357938 26.331624h1072.570248c13.984411 0 28.923856-11.869696 33.221505-26.39984l76.402638-258.74572c4.229432-14.530145-1.2279-34.040104-12.278996-43.385784z"  ></path></symbol><symbol id="iconzuo" viewBox="0 0 1024 1024"><path d="MNaN NaNmNaN NaNlNaN NaNqNaN NaN NaN NaNlNaN NaNqNaN NaN NaN NaNlNaN NaNqNaN NaN NaN NaNlNaN NaNqNaN NaN NaN NaNZ"  ></path><path d="MNaN NaNLNaN NaN NaN NaN NaN NaN NaN NaNlNaN NaNz"  ></path></symbol><symbol id="iconshanchu1" viewBox="0 0 1024 1024"><path d="M784.96 125.12H221.568C170.048 125.12 128 167.04 128 219.2v30.976h750.528v-31.488c0-51.584-41.984-93.568-93.568-93.568zM620.864 62.528l14.016 98.56H371.712l13.952-98.56h235.2zM628.352 0H378.24a55.68 55.68 0 0 0-53.504 46.528l-18.56 131.136a39.872 39.872 0 0 0 40.576 46.528h312.704a39.872 39.872 0 0 0 40.512-46.528L681.408 46.528A54.72 54.72 0 0 0 628.352 0z m172.16 312.704H206.08a56.384 56.384 0 0 0-57.088 62.592l51.072 563.392c3.008 34.048 33.984 62.528 68.032 62.528h469.376c34.56 0 65.024-27.968 68.032-62.528l51.52-563.392a55.744 55.744 0 0 0-56.512-62.592z m-422.336 562.944H284.16l-30.976-437.824h125.056v437.824z m187.648 0H440.704V437.824h125.12v437.824z m156.608 0h-94.08V437.824h125.12l-31.04 437.824z"  ></path></symbol><symbol id="iconbianzu" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"  ></path><path d="M427.776 420.0448l-35.712-128.3328h-95.232v-25.6512h95.232l49.28 135.5008 402.9952-7.168v25.6512H427.776z"  ></path><path d="M439.7312 420.0448h404.608v-68.4544H416.6144z"  ></path><path d="M125.7472 555.4688V693.76h51.968v-4.5056c-0.4096-56.9344 46.1824-103.5264 104.3712-104.4224 58.1888 0.896 104.7552 47.488 104.3712 104.448 0 1.4848 34.048 2.5344 10.496 2.5344h212.0192c0-1.5104 5.6576-1.0496 5.6576-2.56-0.384-56.9344 46.1824-103.5264 104.3712-104.4224a104.448 104.448 0 0 1 39.936 7.936l59.7248-62.336h25.6768v-103.7568H396.6976l-35.328-92.2112H243.5584L126.464 555.4688h-0.7168z m70.6816-25.344l73.3952-139.392h48.0768l31.6672 139.7248-153.1392-0.3584z"  ></path><path d="M639.0272 693.7856a85.5552 85.5552 0 1 0 171.1104 0 85.5552 85.5552 0 1 0-171.1104 0zM211.3024 693.7856a85.5552 85.5552 0 1 0 171.0848 0 85.5552 85.5552 0 1 0-171.0848 0zM449.408 351.5904l-15.6928-30.2848 5.888-7.168 46.8992-26.8288h58.5216l35.328-51.968 69.0432-7.3216 64.1536-30.4128 37.3248 89.7024h31.5904l27.776 4.7616 34.0992 59.52z"  ></path></symbol><symbol id="iconbianzu1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"  ></path><path d="M851.3792 298.9056l-37.1968-76.8512c-6.0672-12.5952-20.4288-19.456-34.56-16.64L572.7232 247.04l0.0768 0.256c-50.6368 12.5696-87.9104 56.7808-87.808 109.312 0.128 62.0288 54.3488 113.152 118.9632 112.3328a120.96 120.96 0 0 0 57.6-15.36l0.1792 0.4608 179.072-117.9136c12.5184-8.2688 16.9472-24.0128 10.5728-37.1968zM394.88 542.72v-151.296c0-16.4864-13.9008-29.824-31.0528-29.824h-33.408c-23.6032 0-46.336 8.6272-63.6672 24.1408l-93.44 83.84a58.4704 58.4704 0 0 0-19.712 43.52v187.648c0 16.4608 13.9008 29.7984 31.0528 29.7984h15.7696c0-52.7872 44.5952-95.7184 99.6352-95.7184 55.0656 0 99.584 42.8032 99.584 95.6416 0 0.0768 208.512 0.1536 208.512 0.0768 0-52.7872 44.544-95.7184 99.5584-95.7184 54.9632 0 99.5584 43.008 99.5584 95.7952 0 0.0768 32.0768-0.0768 32.0768-0.0768 17.152 0 31.0528-13.3376 31.0528-29.824V602.368c0-16.4864-13.9008-29.824-31.0528-29.824H425.9584c-17.152 0-31.0784-13.312-31.0784-29.7984z m-156.416 190.5152c0 33.3312 28.16 60.3648 62.9248 60.3648 34.7392 0 62.8992-27.0336 62.8992-60.3648 0-33.3568-28.16-60.3904-62.8992-60.3904-34.7392 0-62.8992 27.0336-62.8992 60.3904z m407.7312 0c0 33.3312 28.16 60.3648 62.8992 60.3648 34.7392 0 62.8992-27.0336 62.8992-60.3648 0-33.3568-28.16-60.3904-62.8992-60.3904-34.7392 0-62.8992 27.0336-62.8992 60.3904z m218.2912-311.5008c0.0768-23.9104-27.7248-38.144-48.384-24.832l-131.456 84.7616c-45.44 26.8288-81.3312 25.7792-105.7024 21.9136-64.2304-10.2144-96.9984-45.6192-113.6128-81.9968-20.8896-45.824-16.0768 24.2432-16.0768 24.2432v43.52c0 16.4608 13.9008 29.824 31.0528 29.824h352.896c17.152 0 30.976-13.2864 31.0528-29.7472l0.256-67.6864z"  ></path></symbol><symbol id="iconbianzu2" viewBox="0 0 1024 1024"><path d="M512 512m-499.512195 0a499.512195 499.512195 0 1 0 999.02439 0 499.512195 499.512195 0 1 0-999.02439 0Z"  ></path><path d="M809.284683 682.033951h-53.947317c-6.743415-47.50361-46.154927-84.067902-94.357854-84.067902s-87.964098 36.913951-94.382829 84.067902h-107.844683c-14.835512 0-26.973659-12.312976-26.973659-27.672975V313.044293h45.505561v322.510048h55.620683c22.577951-49.876293 72.129561-84.042927 128.074927-84.042926s105.496976 34.166634 128.074927 84.042926h2.023024V313.044293h45.155903V654.360976c0 15.010341-12.113171 27.672976-26.973659 27.672975z m-58.99239-218.661463c7.417756 0 12.487805 4.096 15.160195 11.963317 0.349659 1.698341 0.674341 3.396683 0.674341 5.444683 0 9.915317-6.044098 15.384976-18.531902 16.059317 5.070049 5.144976 7.417756 10.589659 7.417756 15.384975 0 5.12-2.697366 9.565659-7.742439 13.312a16.384 16.384 0 0 1-9.116098 2.747318c-9.765463 0-16.483902-8.192-20.554926-25.275318l-80.221659-30.420292-80.221659 30.420292c-4.046049 16.733659-10.764488 25.275317-20.230243 25.275318a21.004488 21.004488 0 0 1-9.415805-2.747318c-5.070049-3.746341-7.417756-7.842341-7.417756-13.312 0-5.12 2.347707-10.24 7.417756-15.384975-12.487805-0.674341-18.881561-6.144-18.881561-16.059317 0-2.048 0.349659-3.746341 0.674341-5.444683 3.022049-7.867317 8.092098-11.988293 15.484878-11.988293 6.094049 0 13.162146 3.096976 21.254244 8.891317l46.179903-17.083317-46.854244-17.732683c-7.742439 5.095024-15.160195 7.842341-21.578927 7.842342-7.068098 0-11.788488-4.096-14.485854-11.988293a26.898732 26.898732 0 0 1-0.674341-5.444683c0-9.915317 6.393756-15.384976 18.881561-16.059317-5.070049-5.12-7.417756-10.589659-7.417756-15.36 0-5.144976 2.347707-9.565659 7.417756-13.336976a19.106341 19.106341 0 0 1 8.41678-2.048c10.115122 0 16.858537 8.891317 20.554927 26.299318l80.571317 30.420292 80.546342-31.094634c3.721366-17.083317 10.439805-25.624976 20.554926-25.624976 3.047024 0 5.74439 0.674341 8.441756 2.048 5.394732 3.746341 7.742439 8.192 7.742439 13.336976 0 5.12-2.697366 10.24-7.417756 15.36 12.487805 0.674341 18.531902 6.144 18.531903 16.059317 0 1.698341-0.324683 3.746341-0.674342 5.469659-2.347707 7.867317-7.068098 11.963317-14.485853 11.963317-6.743415 0-13.811512-2.747317-21.578927-7.867317l-46.504586 17.757658 45.830244 17.432976c8.766439-6.144 16.184195-9.240976 22.253269-9.240976z m-61.340098-84.742244v4.096c0 6.843317-1.998049 12.312976-6.393756 16.733658a26.074537 26.074537 0 0 1-16.184195 7.867318c-6.069073 0.349659-10.789463-0.674341-14.161171-3.072a24.825756 24.825756 0 0 1-15.834536 5.494634c-6.069073 0-11.813463-2.072976-16.858537-5.819317-3.371707 2.722341-8.092098 4.096-14.835512 3.396683a24.076488 24.076488 0 0 1-16.184195-7.492683 23.102439 23.102439 0 0 1-6.393756-16.733659v-5.494634c-22.92761-6.818341-40.785171-17.757659-53.248-32.792976a80.49639 80.49639 0 0 1-18.881561-52.623609c0-4.420683 0.349659-9.216 1.348683-14.336 4.370732-30.744976 17.857561-56.045268 40.110829-76.17561 23.601951-21.204293 52.248976-31.469268 86.290732-31.469269s62.68878 10.614634 86.290731 31.793952c22.577951 19.805659 36.06478 45.105951 40.435512 75.850927 0.999024 5.12 1.348683 9.915317 1.348683 14.336 0 20.504976-6.393756 38.262634-19.555902 53.297951-13.486829 15.035317-32.693073 26.324293-57.294049 33.142634z m-80.896-126.75122c-6.743415-8.192-15.160195-12.288-24.600975-12.288-9.765463 0-17.857561 4.096-24.600976 12.288-6.743415 8.192-10.439805 18.107317-10.439805 30.070635 0 11.613659 3.346732 21.853659 10.439805 30.070634 6.743415 8.192 15.160195 12.288 24.600976 12.288 9.765463 0 17.857561-4.096 24.600975-12.288 6.743415-8.216976 10.46478-18.107317 10.464781-30.070634s-3.721366-21.878634-10.464781-30.070635z m38.762146 83.018927c-3.022049-5.12-6.069073-7.492683-9.091121-7.492683-3.371707 0-6.418732 2.372683-9.79044 6.818342a22.153366 22.153366 0 0 0-5.045073 13.661658c0 2.747317 0.674341 5.12 2.347708 7.168 2.697366 3.072 7.093073 4.445659 12.812487 4.445659 8.766439 0 13.162146-3.421659 13.162147-10.24a33.642146 33.642146 0 0 0-4.395708-14.360976z m66.73483-83.018927c-6.743415-8.192-15.160195-12.288-24.925659-12.288-9.44078 0-17.882537 4.096-24.625951 12.288-6.743415 8.192-10.090146 18.107317-10.090146 30.070635 0 11.613659 3.346732 21.853659 10.090146 30.070634 6.743415 8.192 14.835512 12.288 24.625951 12.288 9.740488 0 18.182244-4.096 24.925659-12.288 6.743415-8.216976 10.115122-18.107317 10.115122-30.070634a43.857171 43.857171 0 0 0-10.115122-30.070635zM377.880976 682.033951c-6.743415-47.50361-46.179902-84.067902-94.38283-84.067902s-87.964098 36.913951-94.357853 84.067902h-26.973659c-14.835512 0-26.973659-12.312976-26.973658-27.672975v-137.690537c0-25.974634 20.554927-55.69561 20.554926-55.69561l60.341074-81.994927c12.487805-15.035317 20.554927-27.672976 40.460487-27.672975h121.331513c14.835512 0 26.973659 12.288 26.973658 27.672975V654.360976c0 15.010341-12.138146 27.323317-26.973658 27.672975z m-18.531903-284.27239H259.896195l-6.069073 7.192976-2.023024 2.722341-59.342049 80.621268c-6.044098 9.240976-12.113171 22.902634-12.113171 28.372293l1.348683 11.613659 177.626537-1.723318v-128.799219z m-76.525268 225.50478c38.762146 0 70.43122 32.468293 70.431219 72.07961 0 39.636293-31.669073 72.07961-70.431219 72.07961-38.762146 0-70.43122-32.468293-70.43122-72.07961 0-39.636293 31.669073-72.07961 70.43122-72.07961z m379.529366 0c38.762146 0 70.43122 32.468293 70.431219 72.07961 0 39.636293-31.669073 72.07961-70.431219 72.07961-38.762146 0-70.43122-32.468293-70.43122-72.07961 0-39.960976 31.669073-72.07961 70.43122-72.07961z"  ></path></symbol><symbol id="icontianjia" viewBox="0 0 1024 1024"><path d="M874.03928 149.903832A508.584406 508.584406 0 0 0 512 0.002276a508.755072 508.755072 0 0 0-362.03928 149.901556A508.698184 508.698184 0 0 0 0.002276 512c0 136.81717 53.304652 265.442376 150.015333 362.096168A508.584406 508.584406 0 0 0 512 1023.997724a508.299963 508.299963 0 0 0 361.982391-149.901556A509.039515 509.039515 0 0 0 1023.997724 512a508.356852 508.356852 0 0 0-149.958444-362.03928zM767.998862 548.69317H548.636282v220.443465a36.636282 36.636282 0 0 1-36.579393 36.750059 36.636282 36.636282 0 0 1-36.579393-36.750059V548.750059H256.001138A36.636282 36.636282 0 0 1 219.421745 512c0-20.309243 16.383927-36.750059 36.579393-36.750059h219.476358V254.863365c0-20.309243 16.383927-36.750059 36.579393-36.750059 20.195466 0 36.579393 16.440816 36.579393 36.750059v220.386576H767.998862c20.195466 0 36.579393 16.497704 36.579393 36.750059a36.636282 36.636282 0 0 1-36.579393 36.750059z"  ></path></symbol></svg>',N=(a=document.getElementsByTagName("script"))[a.length-1].getAttribute("data-injectcss");if(N&&!i.__iconfont__svg__cssinject__){i.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(a){console&&console.log(a)}}!function(a){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(a,0);else{var N=function(){document.removeEventListener("DOMContentLoaded",N,!1),a()};document.addEventListener("DOMContentLoaded",N,!1)}else document.attachEvent&&(c=a,t=i.document,h=!1,(o=function(){try{t.documentElement.doScroll("left")}catch(a){return void setTimeout(o,50)}l()})(),t.onreadystatechange=function(){"complete"==t.readyState&&(t.onreadystatechange=null,l())});function l(){h||(h=!0,c())}var c,t,h,o}(function(){var a,N,l,c,t,h;(a=document.createElement("div")).innerHTML=o,o=null,(N=a.getElementsByTagName("svg")[0])&&(N.setAttribute("aria-hidden","true"),N.style.position="absolute",N.style.width=0,N.style.height=0,N.style.overflow="hidden",l=N,(c=document.body).firstChild?(t=l,(h=c.firstChild).parentNode.insertBefore(t,h)):c.appendChild(l))})}(window);
\ No newline at end of file

src/assets/icon/icon1/iconfont.json

+{
+  "id": "1592179",
+  "name": "fanxin_new",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "12616237",
+      "name": "右",
+      "font_class": "you",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "12616238",
+      "name": "右上",
+      "font_class": "youshang",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "12616239",
+      "name": "异常",
+      "font_class": "yichang",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "12616240",
+      "name": "右下",
+      "font_class": "youxia",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "12616241",
+      "name": "重置",
+      "font_class": "zhongzhi",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "12616242",
+      "name": "展示",
+      "font_class": "zhanshi",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "12616243",
+      "name": "左上",
+      "font_class": "zuoshang",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "12616244",
+      "name": "下",
+      "font_class": "xia",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "12616245",
+      "name": "运行路数",
+      "font_class": "yunhanglushu",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "12616246",
+      "name": "总量",
+      "font_class": "zongliang",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "12616247",
+      "name": "左下",
+      "font_class": "zuoxia",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "12616248",
+      "name": "定位 位置",
+      "font_class": "dingweiweizhi",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "12616249",
+      "name": "保存 面性",
+      "font_class": "baocunmianxing",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "12616250",
+      "name": "上",
+      "font_class": "shang",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "12616251",
+      "name": "分析",
+      "font_class": "fenxi",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "12616252",
+      "name": "导出",
+      "font_class": "daochu",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "12616253",
+      "name": "开启",
+      "font_class": "kaiqi",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "12616254",
+      "name": "删 除 (2)",
+      "font_class": "shanchu",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "12616255",
+      "name": "导入",
+      "font_class": "daoru",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "12616256",
+      "name": "左",
+      "font_class": "zuo",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "12616257",
+      "name": "删 除",
+      "font_class": "shanchu1",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "12616258",
+      "name": "编组 12",
+      "font_class": "bianzu",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "12616259",
+      "name": "编组 14",
+      "font_class": "bianzu1",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "12616260",
+      "name": "编组 13",
+      "font_class": "bianzu2",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "12616261",
+      "name": "添加",
+      "font_class": "tianjia",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    }
+  ]
+}

src/assets/icon/icon1/iconfont.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="you" unicode="&#58880;" d="M1006.644068-110.644068m-52.067797 0l-885.152542 0q-52.067797 0-52.067797 52.067797l0 885.152542q0 52.067797 52.067797 52.067797l885.152542 0q52.067797 0 52.067797-52.067797l0-885.152542q0-52.067797-52.067797-52.067797ZM143.186441 784.922034L514.169492 389.20678 143.186441-6.508475H514.169492L885.152542 389.20678l-370.98305 395.715254z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="youshang" unicode="&#58881;" d=""  horiz-adv-x="1041" />
+
+    
+    <glyph glyph-name="yichang" unicode="&#58882;" d="M378.88 156.16c0 199.68 161.28 360.96 360.96 360.96 33.28 0 64-5.12 94.72-12.8V819.2c0 40.96-33.28 76.8-76.8 76.8H76.8C33.28 896 0 862.72 0 819.2v-796.16c0-40.96 33.28-76.8 76.8-76.8h368.64c-40.96 61.44-66.56 133.12-66.56 209.92zM189.44 744.96h455.68c20.48 0 38.4-17.92 38.4-38.4s-17.92-38.4-38.4-38.4H189.44c-20.48 0-38.4 17.92-38.4 38.4s17.92 38.4 38.4 38.4z m0-227.84h151.04c20.48 0 38.4-17.92 38.4-38.4s-17.92-38.4-38.4-38.4H189.44c-20.48 0-38.4 17.92-38.4 38.4s17.92 38.4 38.4 38.4z m76.8-304.64h-76.8c-20.48 0-38.4 17.92-38.4 38.4s17.92 38.4 38.4 38.4h76.8c20.48 0 38.4-17.92 38.4-38.4s-17.92-38.4-38.4-38.4z m473.6 227.84c156.16 0 284.16-128 284.16-284.16S896-128 739.84-128s-284.16 128-284.16 284.16 128 284.16 284.16 284.16z m0-122.88c-20.48 0-38.4-17.92-38.4-38.4v-153.6c0-20.48 17.92-38.4 38.4-38.4s38.4 17.92 38.4 38.4v153.6c0 20.48-17.92 38.4-38.4 38.4z m0-256c-20.48 0-38.4-17.92-38.4-38.4s17.92-38.4 38.4-38.4 38.4 17.92 38.4 38.4-17.92 38.4-38.4 38.4z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="youxia" unicode="&#58883;" d=""  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zhongzhi" unicode="&#58884;" d="M1024 896m0-53.894737l0-916.210526q0-53.894737-53.894737-53.894737l-916.210526 0q-53.894737 0-53.894737 53.894737l0 916.210526q0 53.894737 53.894737 53.894737l916.210526 0q53.894737 0 53.894737-53.894737ZM835.116912 571.966877L891.957895 628.448561 892.335158 384l-246.029474 0.377263 95.752983 95.142176c-59.176421 125.556772-209.596632 179.667088-335.961825 120.867929a251.724351 251.724351 0 0 1-127.155649-133.425403l-132.652912 0.07186C198.512281 668.420491 405.162667 789.611789 607.860772 737.711158a378.826105 378.826105 0 0 0 227.25614-165.744281z m-538.606035-298.217544c59.266246-125.538807 209.740351-179.577263 336.069614-120.670315a251.778246 251.778246 0 0 1 126.976 133.245754l132.778667 0.053895c-52.241965-201.422596-258.928281-322.63186-461.626386-270.713263a378.88 378.88 0 0 0-227.184281 165.690385l-56.858947-56.481684-0.377263 244.502456 246.047438-0.377263-95.824842-95.178105 0-0.053895z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zhanshi" unicode="&#58885;" d="M512 601.656889C358.4 601.656889 224.085333 467.285333 224.085333 384c0-83.171556 134.371556-217.656889 287.914667-217.656889 159.971556 0 287.914667 153.6 287.914667 217.656889 0 63.943111-127.943111 217.656889-287.914667 217.656889z m0-313.685333c-51.2 0-96.028444 44.828444-96.028444 96.028444 0 51.2 44.828444 96.028444 96.028444 96.028444 51.2 0 96.028444-44.828444 96.028444-96.028444 0-51.2-44.828444-96.028444-96.028444-96.028444zM512 896C230.4 896 0 665.6 0 384s230.4-512 512-512 512 230.4 512 512-230.4 512-512 512z m0-793.6c-185.571556 0-352.028444 159.971556-352.028444 281.6 0 121.628444 166.456889 281.6 352.028444 281.6 185.571556 0 352.028444-172.828444 352.028444-281.6 0-108.771556-166.456889-281.6-352.028444-281.6z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zuoshang" unicode="&#58886;" d="M1006.644068 879.286237m0-52.067796l0-885.794712q0-52.067797-52.067797-52.067797l-885.794712 0q-52.067797 0-52.067796 52.067797l0 885.794712q0 52.067797 52.067796 52.067796l885.794712 0q52.067797 0 52.067797-52.067796ZM395.472271-59.461424l17.49478 542.494373 542.494373 17.49478-262.491119 262.491118L150.475932 745.524068l-17.494779-542.494373z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xia" unicode="&#58887;" d=""  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yunhanglushu" unicode="&#58888;" d="M1037.767111 529.59763l-76.231111 220.008296-1.517037 2.048a51.275852 51.275852 0 0 1-3.565037 6.257778C930.702222 806.912 883.749926 896 763.904 896H372.811852C251.828148 895.734519 204.420741 805.205333 179.920593 756.773926L173.700741 744.296296v-5.309629c0-0.910222-0.910222-1.820444-0.910222-2.692741L100.958815 530.469926C37.05363 486.855111 0 423.632593 0 357.679407V65.422222c0-40.808296 14.184296-80.402963 40.011852-111.881481v-6.712889h5.423407a182.878815 182.878815 0 0 1 113.246815-59.543704 177.682963 177.682963 0 0 1 183.940741 95.345778l449.725629 1.744593a182.992593 182.992593 0 0 1 186.671408-98.152297A179.503407 179.503407 0 0 1 1137.777778 64.739556v292.029629c-0.606815 64.625778-37.850074 128.265481-100.010667 172.828445z m-778.126222-333.368889a80.175407 80.175407 0 0 0-80.023704 80.327111c0 44.373333 35.84 80.327111 80.023704 80.327111s80.023704-35.991704 80.023704-80.327111c0-44.373333-35.84-80.365037-80.023704-80.365037z m621.340444 0a80.175407 80.175407 0 0 0-80.023703 80.327111c0 44.373333 35.84 80.327111 80.023703 80.327111s80.023704-35.991704 80.023704-80.327111c0-44.373333-35.84-80.365037-80.023704-80.365037zM179.655111 469.750519l86.281482 246.897777v0.872297c25.78963 49.910519 49.682963 84.612741 107.406222 84.61274h392.078222c58.595556 0 82.488889-36.484741 109.150815-88.177777l1.782518-3.565037c0-1.782519 1.782519-3.565037 2.654815-6.257778l81.957926-234.382222H179.655111z"  horiz-adv-x="1137" />
+
+    
+    <glyph glyph-name="zongliang" unicode="&#58889;" d="M512 482.486857c272.64 0 493.714286 92.598857 493.714286 206.811429C1005.714286 803.547429 784.64 896 512 896S18.285714 803.401143 18.285714 689.298286s221.074286-206.811429 493.714286-206.811429z m419.218286 10.752c-109.092571-59.904-267.483429-88.32-419.218286-88.32-151.844571 0-310.125714 28.416-419.218286 88.32C45.604571 461.531429 18.285714 424.228571 18.285714 384.073143c0-114.249143 221.074286-206.811429 493.714286-206.811429S1005.714286 269.824 1005.714286 384.073143c0 40.118857-27.318857 77.421714-74.496 109.165714z m0-305.225143c-109.092571-59.904-267.483429-88.356571-419.218286-88.356571-151.844571 0-310.125714 28.452571-419.218286 88.356571C45.604571 156.269714 18.285714 118.930286 18.285714 78.811429 18.285714-35.401143 239.36-128 512-128S1005.714286-35.401143 1005.714286 78.811429c0 40.118857-27.318857 77.568-74.496 109.202285z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zuoxia" unicode="&#58890;" d="M16.713763 878.644068m52.067796 0l885.794712 0q52.067797 0 52.067797-52.067797l0-885.794712q0-52.067797-52.067797-52.067796l-885.794712 0q-52.067797 0-52.067796 52.067796l0 885.794712q0 52.067797 52.067796 52.067797ZM955.461424 267.472271l-542.494373 17.49478-17.49478 542.494373-262.491118-262.491119L150.475932 22.475932l542.494373-17.494779z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="dingweiweizhi" unicode="&#58891;" d="M511.99904 896C282.23904 896 95.99904 706.112 95.99904 471.808c0-117.12 46.592-223.104 121.856-299.904L511.99904-128l294.144 299.904A427.072 427.072 0 0 1 927.99904 471.808C927.99904 706.112 741.75904 896 511.99904 896z m0-612.608C409.59904 283.648 326.78304 368 327.03904 471.808v0.128C326.78304 575.68 409.59904 660.096 511.87104 660.352H511.99904c102.4-0.256 185.216-84.608 184.96-188.416v-0.128c0.32-103.744-82.432-188.16-184.768-188.48H511.99904v0.064z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="baocunmianxing" unicode="&#58892;" d="M170.642286 896v-385.974857c0-31.890286 30.573714-57.782857 68.315428-57.782857h546.084572c37.741714 0 68.315429 25.892571 68.315428 57.782857V896A170.642286 170.642286 0 0 0 1024 725.357714v-682.715428A170.642286 170.642286 0 0 0 853.357714-128H170.642286A170.642286 170.642286 0 0 0 0 42.642286V725.357714A170.642286 170.642286 0 0 0 170.642286 896z m68.315428 0h546.084572v-375.442286H238.957714V896z m443.684572-136.557714a34.157714 34.157714 0 0 1-34.084572-34.084572v-102.4a34.157714 34.157714 0 0 1 68.242286 0v102.4a34.157714 34.157714 0 0 1-34.157714 34.084572z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shang" unicode="&#58893;" d="M1006.644068 878.644068m0-52.067797l0-885.152542q0-52.067797-52.067797-52.067797l-885.152542 0q-52.067797 0-52.067797 52.067797l0 885.152542q0 52.067797 52.067797 52.067797l885.152542 0q52.067797 0 52.067797-52.067797ZM111.077966 15.186441L506.79322 386.169492 902.508475 15.186441 902.508475 386.169492 506.79322 757.152542l-395.715254-370.98305z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="fenxi" unicode="&#58894;" d="M284.444339-128a31.895692 31.895692 0 0 0-31.516433 32.312877 31.933618 31.933618 0 0 0 31.478507 31.326803H739.555282c17.673475-0.265481 31.781914-14.791106 31.478507-32.350803a31.933618 31.933618 0 0 0-31.478507-31.288877h-455.110943zM895.961742 895.999621H127.999953A127.658619 127.658619 0 0 1 0 768.682335v-587.775783a127.658619 127.658619 0 0 1 127.999953-127.317286h767.999715A127.658619 127.658619 0 0 1 1023.999621 180.906552V768.682335A127.658619 127.658619 0 0 1 895.999668 895.999621z m-46.724723-260.171756l-246.783909-288.729967c-1.592888-1.896296-1.592888-1.896296-3.33748-3.565036a44.980131 44.980131 0 0 0-63.336273 1.744592l-139.3398 146.735353-175.862454-158.682015a32.123247 32.123247 0 0 0-45.131835 3.223703 31.706062 31.706062 0 0 0 2.123851 43.88028l189.819189 171.34927a44.980131 44.980131 0 0 0 62.729459-2.351407l137.48143-144.876983 232.865099 272.497676a32.123247 32.123247 0 0 0 45.169761 2.920296c13.008588-11.339848 14.601476-30.909618 3.602962-44.183688z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="daochu" unicode="&#58895;" d="M189.741176 280.756706c0-53.910588 9.336471-106.194824 26.262589-154.202353 61.801412 179.501176 226.183529 307.621647 420.98447 307.621647v-76.739765c0-29.515294 16.082824-55.597176 41.562353-69.089882 10.119529-5.059765 21.985882-8.432941 32.948706-8.432941 16.143059 0 31.322353 5.059765 44.93553 15.179294l298.164705 230.942118c18.672941 14.275765 29.635765 37.044706 29.635765 61.500235 0 24.455529-11.023059 47.224471-29.635765 61.500235L756.434824 880.820706A72.161882 72.161882 0 0 1 678.490353 887.567059c-25.419294-12.649412-41.502118-39.634824-41.502118-69.089883V741.797647C390.505412 742.580706 189.741176 535.311059 189.741176 280.756706z m840.282353 22.768941c-29.635765 0-54.211765-24.455529-54.211764-53.970823v-64.873412c0-113.784471-4.216471-204.8-216.847059-204.8H325.270588c-219.376941 0-216.847059 96.918588-216.847059 215.762823V465.317647c-15.239529 169.441882 65.234824 206.486588 162.635295 214.076235h3.373176c29.635765 0 54.211765 24.455529 54.211765 53.970824s-24.576 54.814118-54.211765 54.814118H271.058824v0.783058h-54.211765C97.400471 788.961882 0 692.043294 0 573.199059v-485.496471C0-31.021176 97.400471-128 216.847059-128h649.697882c119.446588 0 216.847059 96.978824 216.847059 215.762824v161.792a53.187765 53.187765 0 0 1-53.368471 53.970823z"  horiz-adv-x="1084" />
+
+    
+    <glyph glyph-name="kaiqi" unicode="&#58896;" d="M47.047111 391.395556C47.047111 644.778667 256.284444 850.318222 514.446222 850.318222c258.161778 0 467.399111-205.482667 467.399111-458.922666s-209.237333-458.922667-467.399111-458.922667c-258.161778 0-467.399111 205.482667-467.399111 458.922667M0 390.257778c0-279.267556 230.570667-505.685333 515.072-505.685334h676.522667c284.444444 0 515.072 226.417778 515.072 505.742223C1706.666667 669.582222 1476.096 896 1191.594667 896H515.072C230.627556 896 0 669.582222 0 390.314667"  horiz-adv-x="1706" />
+
+    
+    <glyph glyph-name="shanchu" unicode="&#58897;" d="M784.96 770.88H221.568C170.048 770.88 128 728.96 128 676.8v-30.976h750.528v31.488c0 51.584-41.984 93.568-93.568 93.568zM620.864 833.472l14.016-98.56H371.712l13.952 98.56h235.2zM628.352 896H378.24a55.68 55.68 0 0 1-53.504-46.528l-18.56-131.136a39.872 39.872 0 0 1 40.576-46.528h312.704a39.872 39.872 0 0 1 40.512 46.528L681.408 849.472A54.72 54.72 0 0 1 628.352 896z m172.16-312.704H206.08a56.384 56.384 0 0 1-57.088-62.592l51.072-563.392c3.008-34.048 33.984-62.528 68.032-62.528h469.376c34.56 0 65.024 27.968 68.032 62.528l51.52 563.392a55.744 55.744 0 0 1-56.512 62.592z m-422.336-562.944H284.16l-30.976 437.824h125.056v-437.824z m187.648 0H440.704V458.176h125.12v-437.824z m156.608 0h-94.08V458.176h125.12l-31.04-437.824z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="daoru" unicode="&#58898;" d="M973.183381 535.133968a8.32243 8.32243 0 0 1 1.841849 8.663514 7.230964 7.230964 0 0 1-6.753447 4.979815h-200.693358l0.4093 323.619745A24.557991 24.557991 0 0 1 761.711794 889.178336 20.669642 20.669642 0 0 1 746.294833 896H549.830906a20.737859 20.737859 0 0 1-15.280527-6.889881 24.626207 24.626207 0 0 1-6.344148-16.713077l0.4093-323.619745H327.785739a7.230964 7.230964 0 0 1-6.685231-4.979815 8.32243 8.32243 0 0 1 1.84185-8.663514l310.385717-313.660115a20.669642 20.669642 0 0 1 14.734794-6.275931 20.669642 20.669642 0 0 1 14.734795 6.275931l310.385717 313.660115z m309.226034-333.852241l-194.622077 165.493571a81.859969 81.859969 0 0 1-45.5005 17.05416h-77.221237L1184.927835 179.725268l-254.857371-0.136433-95.093998-148.507628H460.262456L369.056807 179.520618l-253.493038 0.136433 227.502498 204.240624-89.295583-0.068217a81.859969 81.859969 0 0 1-45.432283-17.05416L13.648107 201.281727c-11.051096-9.34568-16.508427-28.855639-12.142562-43.385784l77.630537-258.813936c4.365865-14.461928 19.373526-26.331623 33.357938-26.331624h1072.570248c13.984411 0 28.923856 11.869696 33.221505 26.39984l76.402638 258.74572c4.229432 14.530145-1.2279 34.040104-12.278996 43.385784z"  horiz-adv-x="1296" />
+
+    
+    <glyph glyph-name="zuo" unicode="&#58899;" d=""  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shanchu1" unicode="&#58900;" d="M784.96 770.88H221.568C170.048 770.88 128 728.96 128 676.8v-30.976h750.528v31.488c0 51.584-41.984 93.568-93.568 93.568zM620.864 833.472l14.016-98.56H371.712l13.952 98.56h235.2zM628.352 896H378.24a55.68 55.68 0 0 1-53.504-46.528l-18.56-131.136a39.872 39.872 0 0 1 40.576-46.528h312.704a39.872 39.872 0 0 1 40.512 46.528L681.408 849.472A54.72 54.72 0 0 1 628.352 896z m172.16-312.704H206.08a56.384 56.384 0 0 1-57.088-62.592l51.072-563.392c3.008-34.048 33.984-62.528 68.032-62.528h469.376c34.56 0 65.024 27.968 68.032 62.528l51.52 563.392a55.744 55.744 0 0 1-56.512 62.592z m-422.336-562.944H284.16l-30.976 437.824h125.056v-437.824z m187.648 0H440.704V458.176h125.12v-437.824z m156.608 0h-94.08V458.176h125.12l-31.04-437.824z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="bianzu" unicode="&#58901;" d="M512 384m-512 0a512 512 0 1 1 1024 0 512 512 0 1 1-1024 0ZM427.776 475.9552l-35.712 128.3328h-95.232v25.6512h95.232l49.28-135.5008 402.9952 7.168v-25.6512H427.776zM439.7312 475.9552h404.608v68.4544H416.6144zM125.7472 340.5312V202.24h51.968v4.5056c-0.4096 56.9344 46.1824 103.5264 104.3712 104.4224 58.1888-0.896 104.7552-47.488 104.3712-104.448 0-1.4848 34.048-2.5344 10.496-2.5344h212.0192c0 1.5104 5.6576 1.0496 5.6576 2.56-0.384 56.9344 46.1824 103.5264 104.3712 104.4224a104.448 104.448 0 0 0 39.936-7.936l59.7248 62.336h25.6768v103.7568H396.6976l-35.328 92.2112H243.5584L126.464 340.5312h-0.7168z m70.6816 25.344l73.3952 139.392h48.0768l31.6672-139.7248-153.1392 0.3584zM639.0272 202.2144a85.5552 85.5552 0 1 1 171.1104 0 85.5552 85.5552 0 1 1-171.1104 0zM211.3024 202.2144a85.5552 85.5552 0 1 1 171.0848 0 85.5552 85.5552 0 1 1-171.0848 0zM449.408 544.4096l-15.6928 30.2848 5.888 7.168 46.8992 26.8288h58.5216l35.328 51.968 69.0432 7.3216 64.1536 30.4128 37.3248-89.7024h31.5904l27.776-4.7616 34.0992-59.52z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="bianzu1" unicode="&#58902;" d="M512 384m-512 0a512 512 0 1 1 1024 0 512 512 0 1 1-1024 0ZM851.3792 597.0944l-37.1968 76.8512c-6.0672 12.5952-20.4288 19.456-34.56 16.64L572.7232 648.96l0.0768-0.256c-50.6368-12.5696-87.9104-56.7808-87.808-109.312 0.128-62.0288 54.3488-113.152 118.9632-112.3328a120.96 120.96 0 0 1 57.6 15.36l0.1792-0.4608 179.072 117.9136c12.5184 8.2688 16.9472 24.0128 10.5728 37.1968zM394.88 353.28v151.296c0 16.4864-13.9008 29.824-31.0528 29.824h-33.408c-23.6032 0-46.336-8.6272-63.6672-24.1408l-93.44-83.84a58.4704 58.4704 0 0 1-19.712-43.52v-187.648c0-16.4608 13.9008-29.7984 31.0528-29.7984h15.7696c0 52.7872 44.5952 95.7184 99.6352 95.7184 55.0656 0 99.584-42.8032 99.584-95.6416 0-0.0768 208.512-0.1536 208.512-0.0768 0 52.7872 44.544 95.7184 99.5584 95.7184 54.9632 0 99.5584-43.008 99.5584-95.7952 0-0.0768 32.0768 0.0768 32.0768 0.0768 17.152 0 31.0528 13.3376 31.0528 29.824V293.632c0 16.4864-13.9008 29.824-31.0528 29.824H425.9584c-17.152 0-31.0784 13.312-31.0784 29.7984z m-156.416-190.5152c0-33.3312 28.16-60.3648 62.9248-60.3648 34.7392 0 62.8992 27.0336 62.8992 60.3648 0 33.3568-28.16 60.3904-62.8992 60.3904-34.7392 0-62.8992-27.0336-62.8992-60.3904z m407.7312 0c0-33.3312 28.16-60.3648 62.8992-60.3648 34.7392 0 62.8992 27.0336 62.8992 60.3648 0 33.3568-28.16 60.3904-62.8992 60.3904-34.7392 0-62.8992-27.0336-62.8992-60.3904z m218.2912 311.5008c0.0768 23.9104-27.7248 38.144-48.384 24.832l-131.456-84.7616c-45.44-26.8288-81.3312-25.7792-105.7024-21.9136-64.2304 10.2144-96.9984 45.6192-113.6128 81.9968-20.8896 45.824-16.0768-24.2432-16.0768-24.2432v-43.52c0-16.4608 13.9008-29.824 31.0528-29.824h352.896c17.152 0 30.976 13.2864 31.0528 29.7472l0.256 67.6864z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="bianzu2" unicode="&#58903;" d="M512 384m-499.512195 0a499.512195 499.512195 0 1 1 999.02439 0 499.512195 499.512195 0 1 1-999.02439 0ZM809.284683 213.966049h-53.947317c-6.743415 47.50361-46.154927 84.067902-94.357854 84.067902s-87.964098-36.913951-94.382829-84.067902h-107.844683c-14.835512 0-26.973659 12.312976-26.973659 27.672975V582.955707h45.505561v-322.510048h55.620683c22.577951 49.876293 72.129561 84.042927 128.074927 84.042926s105.496976-34.166634 128.074927-84.042926h2.023024V582.955707h45.155903V241.639024c0-15.010341-12.113171-27.672976-26.973659-27.672975z m-58.99239 218.661463c7.417756 0 12.487805-4.096 15.160195-11.963317 0.349659-1.698341 0.674341-3.396683 0.674341-5.444683 0-9.915317-6.044098-15.384976-18.531902-16.059317 5.070049-5.144976 7.417756-10.589659 7.417756-15.384975 0-5.12-2.697366-9.565659-7.742439-13.312a16.384 16.384 0 0 0-9.116098-2.747318c-9.765463 0-16.483902 8.192-20.554926 25.275318l-80.221659 30.420292-80.221659-30.420292c-4.046049-16.733659-10.764488-25.275317-20.230243-25.275318a21.004488 21.004488 0 0 0-9.415805 2.747318c-5.070049 3.746341-7.417756 7.842341-7.417756 13.312 0 5.12 2.347707 10.24 7.417756 15.384975-12.487805 0.674341-18.881561 6.144-18.881561 16.059317 0 2.048 0.349659 3.746341 0.674341 5.444683 3.022049 7.867317 8.092098 11.988293 15.484878 11.988293 6.094049 0 13.162146-3.096976 21.254244-8.891317l46.179903 17.083317-46.854244 17.732683c-7.742439-5.095024-15.160195-7.842341-21.578927-7.842342-7.068098 0-11.788488 4.096-14.485854 11.988293a26.898732 26.898732 0 0 0-0.674341 5.444683c0 9.915317 6.393756 15.384976 18.881561 16.059317-5.070049 5.12-7.417756 10.589659-7.417756 15.36 0 5.144976 2.347707 9.565659 7.417756 13.336976a19.106341 19.106341 0 0 0 8.41678 2.048c10.115122 0 16.858537-8.891317 20.554927-26.299318l80.571317-30.420292 80.546342 31.094634c3.721366 17.083317 10.439805 25.624976 20.554926 25.624976 3.047024 0 5.74439-0.674341 8.441756-2.048 5.394732-3.746341 7.742439-8.192 7.742439-13.336976 0-5.12-2.697366-10.24-7.417756-15.36 12.487805-0.674341 18.531902-6.144 18.531903-16.059317 0-1.698341-0.324683-3.746341-0.674342-5.469659-2.347707-7.867317-7.068098-11.963317-14.485853-11.963317-6.743415 0-13.811512 2.747317-21.578927 7.867317l-46.504586-17.757658 45.830244-17.432976c8.766439 6.144 16.184195 9.240976 22.253269 9.240976z m-61.340098 84.742244v-4.096c0-6.843317-1.998049-12.312976-6.393756-16.733658a26.074537 26.074537 0 0 0-16.184195-7.867318c-6.069073-0.349659-10.789463 0.674341-14.161171 3.072a24.825756 24.825756 0 0 0-15.834536-5.494634c-6.069073 0-11.813463 2.072976-16.858537 5.819317-3.371707-2.722341-8.092098-4.096-14.835512-3.396683a24.076488 24.076488 0 0 0-16.184195 7.492683 23.102439 23.102439 0 0 0-6.393756 16.733659v5.494634c-22.92761 6.818341-40.785171 17.757659-53.248 32.792976a80.49639 80.49639 0 0 0-18.881561 52.623609c0 4.420683 0.349659 9.216 1.348683 14.336 4.370732 30.744976 17.857561 56.045268 40.110829 76.17561 23.601951 21.204293 52.248976 31.469268 86.290732 31.469269s62.68878-10.614634 86.290731-31.793952c22.577951-19.805659 36.06478-45.105951 40.435512-75.850927 0.999024-5.12 1.348683-9.915317 1.348683-14.336 0-20.504976-6.393756-38.262634-19.555902-53.297951-13.486829-15.035317-32.693073-26.324293-57.294049-33.142634z m-80.896 126.75122c-6.743415 8.192-15.160195 12.288-24.600975 12.288-9.765463 0-17.857561-4.096-24.600976-12.288-6.743415-8.192-10.439805-18.107317-10.439805-30.070635 0-11.613659 3.346732-21.853659 10.439805-30.070634 6.743415-8.192 15.160195-12.288 24.600976-12.288 9.765463 0 17.857561 4.096 24.600975 12.288 6.743415 8.216976 10.46478 18.107317 10.464781 30.070634s-3.721366 21.878634-10.464781 30.070635z m38.762146-83.018927c-3.022049 5.12-6.069073 7.492683-9.091121 7.492683-3.371707 0-6.418732-2.372683-9.79044-6.818342a22.153366 22.153366 0 0 1-5.045073-13.661658c0-2.747317 0.674341-5.12 2.347708-7.168 2.697366-3.072 7.093073-4.445659 12.812487-4.445659 8.766439 0 13.162146 3.421659 13.162147 10.24a33.642146 33.642146 0 0 1-4.395708 14.360976z m66.73483 83.018927c-6.743415 8.192-15.160195 12.288-24.925659 12.288-9.44078 0-17.882537-4.096-24.625951-12.288-6.743415-8.192-10.090146-18.107317-10.090146-30.070635 0-11.613659 3.346732-21.853659 10.090146-30.070634 6.743415-8.192 14.835512-12.288 24.625951-12.288 9.740488 0 18.182244 4.096 24.925659 12.288 6.743415 8.216976 10.115122 18.107317 10.115122 30.070634a43.857171 43.857171 0 0 1-10.115122 30.070635zM377.880976 213.966049c-6.743415 47.50361-46.179902 84.067902-94.38283 84.067902s-87.964098-36.913951-94.357853-84.067902h-26.973659c-14.835512 0-26.973659 12.312976-26.973658 27.672975v137.690537c0 25.974634 20.554927 55.69561 20.554926 55.69561l60.341074 81.994927c12.487805 15.035317 20.554927 27.672976 40.460487 27.672975h121.331513c14.835512 0 26.973659-12.288 26.973658-27.672975V241.639024c0-15.010341-12.138146-27.323317-26.973658-27.672975z m-18.531903 284.27239H259.896195l-6.069073-7.192976-2.023024-2.722341-59.342049-80.621268c-6.044098-9.240976-12.113171-22.902634-12.113171-28.372293l1.348683-11.613659 177.626537 1.723318v128.799219z m-76.525268-225.50478c38.762146 0 70.43122-32.468293 70.431219-72.07961 0-39.636293-31.669073-72.07961-70.431219-72.07961-38.762146 0-70.43122 32.468293-70.43122 72.07961 0 39.636293 31.669073 72.07961 70.43122 72.07961z m379.529366 0c38.762146 0 70.43122-32.468293 70.431219-72.07961 0-39.636293-31.669073-72.07961-70.431219-72.07961-38.762146 0-70.43122 32.468293-70.43122 72.07961 0 39.960976 31.669073 72.07961 70.43122 72.07961z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="tianjia" unicode="&#58904;" d="M874.03928 746.096168A508.584406 508.584406 0 0 1 512 895.997724a508.755072 508.755072 0 0 1-362.03928-149.901556A508.698184 508.698184 0 0 1 0.002276 384c0-136.81717 53.304652-265.442376 150.015333-362.096168A508.584406 508.584406 0 0 1 512-127.997724a508.299963 508.299963 0 0 1 361.982391 149.901556A509.039515 509.039515 0 0 1 1023.997724 384a508.356852 508.356852 0 0 1-149.958444 362.03928zM767.998862 347.30683H548.636282v-220.443465a36.636282 36.636282 0 0 0-36.579393-36.750059 36.636282 36.636282 0 0 0-36.579393 36.750059V347.249941H256.001138A36.636282 36.636282 0 0 0 219.421745 384c0 20.309243 16.383927 36.750059 36.579393 36.750059h219.476358V641.136635c0 20.309243 16.383927 36.750059 36.579393 36.750059 20.195466 0 36.579393-16.440816 36.579393-36.750059v-220.386576H767.998862c20.195466 0 36.579393-16.497704 36.579393-36.750059a36.636282 36.636282 0 0 0-36.579393-36.750059z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

src/assets/icon/icon2/demo.css

+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/icon/icon2/demo_index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1565499" 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">&#xe61e;</span>
+                <div class="name">导出</div>
+                <div class="code-name">&amp;#xe61e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe616;</span>
+                <div class="name">日历</div>
+                <div class="code-name">&amp;#xe616;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe600;</span>
+                <div class="name">导入</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe87a;</span>
+                <div class="name">展示</div>
+                <div class="code-name">&amp;#xe87a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe662;</span>
+                <div class="name">添加</div>
+                <div class="code-name">&amp;#xe662;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61c;</span>
+                <div class="name">播放</div>
+                <div class="code-name">&amp;#xe61c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe607;</span>
+                <div class="name">播放</div>
+                <div class="code-name">&amp;#xe607;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe644;</span>
+                <div class="name">删 除</div>
+                <div class="code-name">&amp;#xe644;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe664;</span>
+                <div class="name">迁移</div>
+                <div class="code-name">&amp;#xe664;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe685;</span>
+                <div class="name">暂停</div>
+                <div class="code-name">&amp;#xe685;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe643;</span>
+                <div class="name">暂停 停止</div>
+                <div class="code-name">&amp;#xe643;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe632;</span>
+                <div class="name">修 改</div>
+                <div class="code-name">&amp;#xe632;</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 icon-daochu"></span>
+            <div class="name">
+              导出
+            </div>
+            <div class="code-name">.icon-daochu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-rili"></span>
+            <div class="name">
+              日历
+            </div>
+            <div class="code-name">.icon-rili
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-login"></span>
+            <div class="name">
+              导入
+            </div>
+            <div class="code-name">.icon-login
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhanshi"></span>
+            <div class="name">
+              展示
+            </div>
+            <div class="code-name">.icon-zhanshi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-add-circle-s"></span>
+            <div class="name">
+              添加
+            </div>
+            <div class="code-name">.icon-add-circle-s
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-bofang1"></span>
+            <div class="name">
+              播放
+            </div>
+            <div class="code-name">.icon-bofang1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-bofang"></span>
+            <div class="name">
+              播放
+            </div>
+            <div class="code-name">.icon-bofang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-detail"></span>
+            <div class="name">
+              删 除
+            </div>
+            <div class="code-name">.icon-detail
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-Migration"></span>
+            <div class="name">
+              迁移
+            </div>
+            <div class="code-name">.icon-Migration
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zanting"></span>
+            <div class="name">
+              暂停
+            </div>
+            <div class="code-name">.icon-zanting
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zantingtingzhi"></span>
+            <div class="name">
+              暂停 停止
+            </div>
+            <div class="code-name">.icon-zantingtingzhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiugai"></span>
+            <div class="name">
+              修 改
+            </div>
+            <div class="code-name">.icon-xiugai
+            </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 icon-xxx"&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="#icon-daochu"></use>
+                </svg>
+                <div class="name">导出</div>
+                <div class="code-name">#icon-daochu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-rili"></use>
+                </svg>
+                <div class="name">日历</div>
+                <div class="code-name">#icon-rili</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-login"></use>
+                </svg>
+                <div class="name">导入</div>
+                <div class="code-name">#icon-login</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhanshi"></use>
+                </svg>
+                <div class="name">展示</div>
+                <div class="code-name">#icon-zhanshi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-add-circle-s"></use>
+                </svg>
+                <div class="name">添加</div>
+                <div class="code-name">#icon-add-circle-s</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-bofang1"></use>
+                </svg>
+                <div class="name">播放</div>
+                <div class="code-name">#icon-bofang1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-bofang"></use>
+                </svg>
+                <div class="name">播放</div>
+                <div class="code-name">#icon-bofang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-detail"></use>
+                </svg>
+                <div class="name">删 除</div>
+                <div class="code-name">#icon-detail</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-Migration"></use>
+                </svg>
+                <div class="name">迁移</div>
+                <div class="code-name">#icon-Migration</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zanting"></use>
+                </svg>
+                <div class="name">暂停</div>
+                <div class="code-name">#icon-zanting</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zantingtingzhi"></use>
+                </svg>
+                <div class="name">暂停 停止</div>
+                <div class="code-name">#icon-zantingtingzhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiugai"></use>
+                </svg>
+                <div class="name">修 改</div>
+                <div class="code-name">#icon-xiugai</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>

src/assets/icon/icon2/iconfont.css

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1578278184611'); /* IE9 */
+  src: url('iconfont.eot?t=1578278184611#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=1578278184611') format('woff'),
+  url('iconfont.ttf?t=1578278184611') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1578278184611#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-daochu:before {
+  content: "\e61e";
+}
+
+.icon-rili:before {
+  content: "\e616";
+}
+
+.icon-login:before {
+  content: "\e600";
+}
+
+.icon-zhanshi:before {
+  content: "\e87a";
+}
+
+.icon-add-circle-s:before {
+  content: "\e662";
+}
+
+.icon-bofang1:before {
+  content: "\e61c";
+}
+
+.icon-bofang:before {
+  content: "\e607";
+}
+
+.icon-detail:before {
+  content: "\e644";
+}
+
+.icon-Migration:before {
+  content: "\e664";
+}
+
+.icon-zanting:before {
+  content: "\e685";
+}
+
+.icon-zantingtingzhi:before {
+  content: "\e643";
+}
+
+.icon-xiugai:before {
+  content: "\e632";
+}
+

src/assets/icon/icon2/iconfont.js

+!function(a){var t,n='<svg><symbol id="icon-daochu" viewBox="0 0 1024 1024"><path d="M179.2 610.4c0 51.2 8.8 100.8 24.8 146.4 58.4-170.4 213.6-292 397.6-292l0 72.8c0 28 15.2 52.8 39.2 65.6 9.6 4.8 20.8 8 31.2 8 15.2 0 29.6-4.8 42.4-14.4l281.6-219.2c17.6-13.6 28-35.2 28-58.4 0-23.2-10.4-44.8-28-58.4L714.4 40.8c-12-9.6-27.2-14.4-42.4-14.4-10.4 0-21.6 2.4-31.2 8-24 12-39.2 37.6-39.2 65.6l0 72.8C368.8 172 179.2 368.8 179.2 610.4z"  ></path><path d="M972.8 588.8c-28 0-51.2 23.2-51.2 51.2l0 51.2 0 10.4c0 108-4 194.4-204.8 194.4L307.2 896c-207.2 0-204.8-92-204.8-204.8l0-256C88 274.4 164 239.2 256 232l0 0 3.2 0c28 0 51.2-23.2 51.2-51.2 0-28-23.2-52-51.2-52l-3.2 0L256 128l-51.2 0C92 128 0 220 0 332.8l0 460.8c0 112.8 92 204.8 204.8 204.8l613.6 0c112.8 0 204.8-92 204.8-204.8L1023.2 640C1024 612 1000.8 588.8 972.8 588.8z"  ></path></symbol><symbol id="icon-rili" viewBox="0 0 1024 1024"><path d="M329.197037 662.186667l365.605926 0c9.102222 0 16.402963-7.395556 16.402963-16.402963s-7.395556-16.402963-16.402963-16.402963L329.197037 629.380741c-9.102222 0-16.402963 7.395556-16.402963 16.402963S320.094815 662.186667 329.197037 662.186667z"  ></path><path d="M329.197037 565.380741l365.605926 0c9.102222 0 16.402963-7.395556 16.402963-16.402963 0-9.102222-7.395556-16.402963-16.402963-16.402963L329.197037 532.574815c-9.102222 0-16.402963 7.395556-16.402963 16.402963C312.794074 557.985185 320.094815 565.380741 329.197037 565.380741z"  ></path><path d="M724.385185 214.755556l-42.477037 0 0-42.477037-42.477037 0 0 42.477037L384.568889 214.755556l0-42.477037-42.477037 0 0 42.477037L299.614815 214.755556c-46.648889 0-84.859259 38.21037-84.859259 84.859259l0 467.247407c0 46.648889 38.21037 84.859259 84.859259 84.859259l424.77037 0c46.648889 0 84.859259-38.21037 84.859259-84.859259L809.244444 299.614815C809.244444 252.965926 771.034074 214.755556 724.385185 214.755556zM778.145185 766.862222c0 23.419259-30.435556 53.76-53.76 53.76L299.614815 820.622222c-23.419259 0-53.76-30.435556-53.76-53.76L245.854815 427.045926l532.385185 0L778.24 766.862222zM779.093333 395.946667 244.906667 395.946667 244.906667 299.614815c0-23.419259 31.383704-53.76 54.708148-53.76l42.477037 0L342.091852 299.614815l42.477037 0 0-53.854815 254.767407 0L639.336296 299.614815l42.477037 0 0-53.854815L724.385185 245.76c23.419259 0 54.708148 30.435556 54.708148 53.76L779.093333 395.946667z"  ></path></symbol><symbol id="icon-login" viewBox="0 0 1024 1024"><path d="M780.875 396.388c1.754-1.622 2.427-4.217 1.501-6.574-0.924-2.365-3.182-3.804-5.574-3.804h-166.755l0.359-246.761c0.005-4.603-1.742-9.209-5.254-12.72-3.508-3.514-8.111-5.274-12.715-5.274h-163.328c-4.597 0-9.201 1.76-12.715 5.274-3.506 3.513-5.255 8.117-5.25 12.72l0.332 246.761h-166.764c-2.387 0-4.643 1.438-5.575 3.804-0.925 2.359-0.252 4.951 1.504 6.574l257.895 239.15c3.209 2.971 7.502 4.794 12.218 4.794 4.72 0 9.013-1.824 12.219-4.794l257.902-239.15zM1037.742 650.941l-161.68-126.155c-9.159-7.147-26.16-12.993-37.775-12.993h-64.199l182.757 155.557-211.754 0.103-79.019 113.225h-311.316l-75.815-113.121-210.615-0.103 188.985-155.756-74.142 0.097c-11.617 0-28.618 5.847-37.776 12.993l-161.68 126.154c-9.159 7.148-13.701 22.029-10.091 33.073l64.499 197.362c3.609 11.043 16.067 20.078 27.684 20.078h891.089c11.617 0 24.032-9.049 27.591-20.108l63.447-197.302c3.554-11.061-1.029-25.956-10.19-33.103z"  ></path></symbol><symbol id="icon-zhanshi" viewBox="0 0 1024 1024"><path d="M512 336.1c-124.1 0-232.7 108.6-232.7 175.9 0 67.2 108.6 175.9 232.7 175.9 129.3 0 232.7-124.1 232.7-175.9 0-51.7-103.4-175.9-232.7-175.9z m0 253.5c-41.4 0-77.6-36.2-77.6-77.6 0-41.4 36.2-77.6 77.6-77.6 41.4 0 77.6 36.2 77.6 77.6 0 41.4-36.2 77.6-77.6 77.6z m0 0"  ></path><path d="M512 98.2C284.4 98.2 98.2 284.4 98.2 512S284.4 925.8 512 925.8 925.8 739.6 925.8 512 739.6 98.2 512 98.2z m0 641.4c-150 0-284.5-129.3-284.5-227.6 0-98.3 134.5-227.6 284.5-227.6S796.5 424.1 796.5 512 662 739.6 512 739.6z m0 0"  ></path></symbol><symbol id="icon-add-circle-s" viewBox="0 0 1024 1024"><path d="M512 894.5c-51.6 0-101.7-10.1-148.9-30.1-45.6-19.3-86.5-46.8-121.6-82-35.1-35.1-62.7-76-82-121.6-20-47.2-30.1-97.3-30.1-148.9s10.1-101.7 30.1-148.9c19.3-45.6 46.8-86.5 82-121.6 35.1-35.1 76-62.7 121.6-82 47.2-20 97.3-30.1 148.9-30.1s101.7 10.1 148.9 30.1c45.6 19.3 86.5 46.8 121.6 82 35.1 35.1 62.7 76 82 121.6 20 47.2 30.1 97.3 30.1 148.9s-10.1 101.7-30.1 148.9c-19.3 45.6-46.8 86.5-82 121.6-35.1 35.1-76 62.7-121.6 82-47.2 20-97.3 30.1-148.9 30.1z m-17.3-361.9v205.8c0 11 9 20 20 20s20-9 20-20l-1-205.7h206.7c11 0 20-9 20-20s-9-20-20-20H534.7V287c0-11-9-20-20-20s-20 9-20 20v205.7H289c-11 0-20 9-20 20s9 20 20 20l205.7-0.1z"  ></path></symbol><symbol id="icon-bofang1" viewBox="0 0 1024 1024"><path d="M514 114.3c-219.9 0-398.9 178.9-398.9 398.9 0.1 219.9 179 398.8 398.9 398.8 219.9 0 398.8-178.9 398.8-398.8S733.9 114.3 514 114.3z m173 421.9L437.1 680.5c-17.7 10.2-39.8-2.6-39.8-23V368.9c0-20.4 22.1-33.2 39.8-23L687 490.2c17.7 10.2 17.7 35.8 0 46z"  ></path></symbol><symbol id="icon-bofang" viewBox="0 0 1024 1024"><path d="M822.824 97.58H201.176c-57.196 0-103.595 46.398-103.595 103.595v621.647c0 57.197 46.4 103.597 103.595 103.597h621.649c57.196 0 103.595-46.4 103.595-103.597V201.176c0-57.198-46.4-103.596-103.596-103.596zM356.607 719.147V304.851l362.54 207.108-362.54 207.188z"  ></path></symbol><symbol id="icon-detail" viewBox="0 0 1024 1024"><path d="M800.111944 127.936032H223.888056C171.178411 127.936032 128.191904 170.922539 128.191904 224.143928V255.872064h767.616192v-32.23988c0-52.709645-42.986507-95.696152-95.696152-95.696152m-167.852074-63.968016l14.328836 100.813593H377.411294l14.328836-100.813593h240.51974M639.936032 0H384.063968c-26.610695 0-51.174413 21.493253-54.756622 47.592204l-18.934532 134.076961c-3.582209 26.098951 14.84058 47.592204 41.451274 47.592204h319.84008c26.610695 0 45.033483-21.493253 41.451274-47.592204l-18.934532-134.076961C691.110445 21.493253 666.546727 0 639.936032 0m176.03998 319.84008H208.023988c-35.310345 0-61.409295 28.657671-58.338831 63.968016l52.197901 576.223888c3.070465 34.798601 34.798601 63.968016 69.597202 63.968016h480.015992c35.310345 0 66.526737-28.657671 69.597201-63.968016L873.803098 383.808096c3.582209-35.310345-22.516742-63.968016-57.827086-63.968016M384.063968 895.552224H287.856072L256.127936 447.776112h127.936032V895.552224z m191.904048 0h-127.936032V447.776112h127.936032V895.552224z m160.175912 0H639.936032V447.776112h127.936032l-31.728136 447.776112z" fill="" ></path></symbol><symbol id="icon-Migration" viewBox="0 0 1024 1024"><path d="M853.840124 948.467989h-62.27438c-34.42119 0-62.274379-27.853189-62.274379-62.274379v-746.806034c0-34.42119 27.853189-62.274379 62.274379-62.27438h62.27438c34.42119 0 62.274379 27.853189 62.274379 62.27438v746.806034c-0.12163 34.42119-27.974819 62.274379-62.274379 62.274379z m-373.403017-373.403017H293.735598V450.516213h186.701509V326.089084l248.975887 186.701509-248.975887 186.701508V575.064972zM231.461219 637.217722h186.701508v248.975888c0 34.42119-27.853189 62.274379-62.274379 62.274379H169.186839c-34.42119 0-62.274379-27.853189-62.274379-62.274379v-746.806034c0-34.42119 27.853189-62.274379 62.274379-62.27438h186.701509c34.42119 0 62.274379 27.853189 62.274379 62.27438v248.975888H231.461219v248.854258z m0 0" fill="" ></path></symbol><symbol id="icon-zanting" viewBox="0 0 1024 1024"><path d="M804.571429 0a146.285714 146.285714 0 0 1 146.285714 146.285714v731.428572a146.285714 146.285714 0 1 1-292.571429 0V146.285714a146.285714 146.285714 0 0 1 146.285715-146.285714zM219.428571 0a146.285714 146.285714 0 0 1 146.285715 146.285714v731.428572a146.285714 146.285714 0 1 1-292.571429 0V146.285714a146.285714 146.285714 0 0 1 146.285714-146.285714z"  ></path></symbol><symbol id="icon-zantingtingzhi" viewBox="0 0 1024 1024"><path d="M720.896 95.232c-47.616 0-89.6 41.472-89.6 89.088v655.36c0 47.616 41.984 89.088 89.6 89.088s89.6-41.472 89.6-89.088V184.32c-0.512-47.616-41.984-89.088-89.6-89.088z m-417.792 0c-47.616 0-89.6 41.472-89.6 89.088v655.36c0 47.616 41.984 89.088 89.6 89.088s89.6-41.472 89.6-89.088V184.32c0-47.616-41.984-89.088-89.6-89.088z"  ></path></symbol><symbol id="icon-xiugai" viewBox="0 0 1024 1024"><path d="M768.487 388.361L590.76 215.067 210.93 594.492l-66.201 242.161v0.4L386.483 769.8zM739.523 66.62l-95.197 95.04 178.296 172.65 92.375-92.296c48.487-48.406 48.487-126.985 0-175.392-48.405-48.407-127.069-48.407-175.474-0.002zM79.029 878.71h872.333v114.976H79.029z"  ></path></symbol></svg>',c=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(c&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}!function(t){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(t,0);else{var c=function(){document.removeEventListener("DOMContentLoaded",c,!1),t()};document.addEventListener("DOMContentLoaded",c,!1)}else document.attachEvent&&(l=t,o=a.document,i=!1,(n=function(){try{o.documentElement.doScroll("left")}catch(t){return void setTimeout(n,50)}e()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,e())});function e(){i||(i=!0,l())}var l,o,i,n}(function(){var t,c,e,l,o,i;(t=document.createElement("div")).innerHTML=n,n=null,(c=t.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",e=c,(l=document.body).firstChild?(o=e,(i=l.firstChild).parentNode.insertBefore(o,i)):l.appendChild(e))})}(window);
\ No newline at end of file

src/assets/icon/icon2/iconfont.json

+{
+  "id": "1565499",
+  "name": "繁星2.0",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "831114",
+      "name": "导出",
+      "font_class": "daochu",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "1010109",
+      "name": "日历",
+      "font_class": "rili",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "1355658",
+      "name": "导入",
+      "font_class": "login",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "6237827",
+      "name": "展示",
+      "font_class": "zhanshi",
+      "unicode": "e87a",
+      "unicode_decimal": 59514
+    },
+    {
+      "icon_id": "6367958",
+      "name": "添加",
+      "font_class": "add-circle-s",
+      "unicode": "e662",
+      "unicode_decimal": 58978
+    },
+    {
+      "icon_id": "7588088",
+      "name": "播放",
+      "font_class": "bofang1",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "7815001",
+      "name": "播放",
+      "font_class": "bofang",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "7978614",
+      "name": "删 除",
+      "font_class": "detail",
+      "unicode": "e644",
+      "unicode_decimal": 58948
+    },
+    {
+      "icon_id": "8147570",
+      "name": "迁移",
+      "font_class": "Migration",
+      "unicode": "e664",
+      "unicode_decimal": 58980
+    },
+    {
+      "icon_id": "8386986",
+      "name": "暂停",
+      "font_class": "zanting",
+      "unicode": "e685",
+      "unicode_decimal": 59013
+    },
+    {
+      "icon_id": "9356268",
+      "name": "暂停 停止",
+      "font_class": "zantingtingzhi",
+      "unicode": "e643",
+      "unicode_decimal": 58947
+    },
+    {
+      "icon_id": "10905634",
+      "name": "修 改",
+      "font_class": "xiugai",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    }
+  ]
+}

src/assets/icon/icon2/iconfont.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="daochu" unicode="&#58910;" d="M179.2 285.6c0-51.2 8.8-100.8 24.8-146.4 58.4 170.4 213.6 292 397.6 292l0-72.8c0-28 15.2-52.8 39.2-65.6 9.6-4.8 20.8-8 31.2-8 15.2 0 29.6 4.8 42.4 14.4l281.6 219.2c17.6 13.6 28 35.2 28 58.4 0 23.2-10.4 44.8-28 58.4L714.4 855.2c-12 9.6-27.2 14.4-42.4 14.4-10.4 0-21.6-2.4-31.2-8-24-12-39.2-37.6-39.2-65.6l0-72.8C368.8 724 179.2 527.2 179.2 285.6zM972.8 307.2c-28 0-51.2-23.2-51.2-51.2l0-51.2 0-10.4c0-108-4-194.4-204.8-194.4L307.2 0c-207.2 0-204.8 92-204.8 204.8l0 256C88 621.6 164 656.8 256 664l0 0 3.2 0c28 0 51.2 23.2 51.2 51.2 0 28-23.2 52-51.2 52l-3.2 0L256 768l-51.2 0C92 768 0 676 0 563.2l0-460.8c0-112.8 92-204.8 204.8-204.8l613.6 0c112.8 0 204.8 92 204.8 204.8L1023.2 256C1024 284 1000.8 307.2 972.8 307.2z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="rili" unicode="&#58902;" d="M329.197037 233.813333l365.605926 0c9.102222 0 16.402963 7.395556 16.402963 16.402963s-7.395556 16.402963-16.402963 16.402963L329.197037 266.619259c-9.102222 0-16.402963-7.395556-16.402963-16.402963S320.094815 233.813333 329.197037 233.813333zM329.197037 330.619259l365.605926 0c9.102222 0 16.402963 7.395556 16.402963 16.402963 0 9.102222-7.395556 16.402963-16.402963 16.402963L329.197037 363.425185c-9.102222 0-16.402963-7.395556-16.402963-16.402963C312.794074 338.014815 320.094815 330.619259 329.197037 330.619259zM724.385185 681.244444l-42.477037 0 0 42.477037-42.477037 0 0-42.477037L384.568889 681.244444l0 42.477037-42.477037 0 0-42.477037L299.614815 681.244444c-46.648889 0-84.859259-38.21037-84.859259-84.859259l0-467.247407c0-46.648889 38.21037-84.859259 84.859259-84.859259l424.77037 0c46.648889 0 84.859259 38.21037 84.859259 84.859259L809.244444 596.385185C809.244444 643.034074 771.034074 681.244444 724.385185 681.244444zM778.145185 129.137778c0-23.419259-30.435556-53.76-53.76-53.76L299.614815 75.377778c-23.419259 0-53.76 30.435556-53.76 53.76L245.854815 468.954074l532.385185 0L778.24 129.137778zM779.093333 500.053333 244.906667 500.053333 244.906667 596.385185c0 23.419259 31.383704 53.76 54.708148 53.76l42.477037 0L342.091852 596.385185l42.477037 0 0 53.854815 254.767407 0L639.336296 596.385185l42.477037 0 0 53.854815L724.385185 650.24c23.419259 0 54.708148-30.435556 54.708148-53.76L779.093333 500.053333z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="login" unicode="&#58880;" d="M780.875 499.612c1.754 1.622 2.427 4.217 1.501 6.574-0.924 2.365-3.182 3.804-5.574 3.804h-166.755l0.359 246.761c0.005 4.603-1.742 9.209-5.254 12.72-3.508 3.514-8.111 5.274-12.715 5.274h-163.328c-4.597 0-9.201-1.76-12.715-5.274-3.506-3.513-5.255-8.117-5.25-12.72l0.332-246.761h-166.764c-2.387 0-4.643-1.438-5.575-3.804-0.925-2.359-0.252-4.951 1.504-6.574l257.895-239.15c3.209-2.971 7.502-4.794 12.218-4.794 4.72 0 9.013 1.824 12.219 4.794l257.902 239.15zM1037.742 245.059l-161.68 126.155c-9.159 7.147-26.16 12.993-37.775 12.993h-64.199l182.757-155.557-211.754-0.103-79.019-113.225h-311.316l-75.815 113.121-210.615 0.103 188.985 155.756-74.142-0.097c-11.617 0-28.618-5.847-37.776-12.993l-161.68-126.154c-9.159-7.148-13.701-22.029-10.091-33.073l64.499-197.362c3.609-11.043 16.067-20.078 27.684-20.078h891.089c11.617 0 24.032 9.049 27.591 20.108l63.447 197.302c3.554 11.061-1.029 25.956-10.19 33.103z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zhanshi" unicode="&#59514;" d="M512 559.9c-124.1 0-232.7-108.6-232.7-175.9 0-67.2 108.6-175.9 232.7-175.9 129.3 0 232.7 124.1 232.7 175.9 0 51.7-103.4 175.9-232.7 175.9z m0-253.5c-41.4 0-77.6 36.2-77.6 77.6 0 41.4 36.2 77.6 77.6 77.6 41.4 0 77.6-36.2 77.6-77.6 0-41.4-36.2-77.6-77.6-77.6z m0 0M512 797.8C284.4 797.8 98.2 611.6 98.2 384S284.4-29.8 512-29.8 925.8 156.4 925.8 384 739.6 797.8 512 797.8z m0-641.4c-150 0-284.5 129.3-284.5 227.6 0 98.3 134.5 227.6 284.5 227.6S796.5 471.9 796.5 384 662 156.4 512 156.4z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="add-circle-s" unicode="&#58978;" d="M512 1.5c-51.6 0-101.7 10.1-148.9 30.1-45.6 19.3-86.5 46.8-121.6 82-35.1 35.1-62.7 76-82 121.6-20 47.2-30.1 97.3-30.1 148.9s10.1 101.7 30.1 148.9c19.3 45.6 46.8 86.5 82 121.6 35.1 35.1 76 62.7 121.6 82 47.2 20 97.3 30.1 148.9 30.1s101.7-10.1 148.9-30.1c45.6-19.3 86.5-46.8 121.6-82 35.1-35.1 62.7-76 82-121.6 20-47.2 30.1-97.3 30.1-148.9s-10.1-101.7-30.1-148.9c-19.3-45.6-46.8-86.5-82-121.6-35.1-35.1-76-62.7-121.6-82-47.2-20-97.3-30.1-148.9-30.1z m-17.3 361.9v-205.8c0-11 9-20 20-20s20 9 20 20l-1 205.7h206.7c11 0 20 9 20 20s-9 20-20 20H534.7V609c0 11-9 20-20 20s-20-9-20-20v-205.7H289c-11 0-20-9-20-20s9-20 20-20l205.7 0.1z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="bofang1" unicode="&#58908;" d="M514 781.7c-219.9 0-398.9-178.9-398.9-398.9 0.1-219.9 179-398.8 398.9-398.8 219.9 0 398.8 178.9 398.8 398.8S733.9 781.7 514 781.7z m173-421.9L437.1 215.5c-17.7-10.2-39.8 2.6-39.8 23V527.1c0 20.4 22.1 33.2 39.8 23L687 405.8c17.7-10.2 17.7-35.8 0-46z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="bofang" unicode="&#58887;" d="M822.824 798.42H201.176c-57.196 0-103.595-46.398-103.595-103.595v-621.647c0-57.197 46.4-103.597 103.595-103.597h621.649c57.196 0 103.595 46.4 103.595 103.597V694.824c0 57.198-46.4 103.596-103.596 103.596zM356.607 176.853V591.149l362.54-207.108-362.54-207.188z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="detail" unicode="&#58948;" d="M800.111944 768.063968H223.888056C171.178411 768.063968 128.191904 725.077461 128.191904 671.856072V640.127936h767.616192v32.23988c0 52.709645-42.986507 95.696152-95.696152 95.696152m-167.852074 63.968016l14.328836-100.813593H377.411294l14.328836 100.813593h240.51974M639.936032 896H384.063968c-26.610695 0-51.174413-21.493253-54.756622-47.592204l-18.934532-134.076961c-3.582209-26.098951 14.84058-47.592204 41.451274-47.592204h319.84008c26.610695 0 45.033483 21.493253 41.451274 47.592204l-18.934532 134.076961C691.110445 874.506747 666.546727 896 639.936032 896m176.03998-319.84008H208.023988c-35.310345 0-61.409295-28.657671-58.338831-63.968016l52.197901-576.223888c3.070465-34.798601 34.798601-63.968016 69.597202-63.968016h480.015992c35.310345 0 66.526737 28.657671 69.597201 63.968016L873.803098 512.191904c3.582209 35.310345-22.516742 63.968016-57.827086 63.968016M384.063968 0.4477759999999762H287.856072L256.127936 448.223888h127.936032V0.4477759999999762z m191.904048 0h-127.936032V448.223888h127.936032V0.4477759999999762z m160.175912 0H639.936032V448.223888h127.936032l-31.728136-447.776112z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="Migration" unicode="&#58980;" d="M853.840124-52.46798899999999h-62.27438c-34.42119 0-62.274379 27.853189-62.274379 62.274379v746.806034c0 34.42119 27.853189 62.274379 62.274379 62.27438h62.27438c34.42119 0 62.274379-27.853189 62.274379-62.27438v-746.806034c-0.12163-34.42119-27.974819-62.274379-62.274379-62.274379z m-373.403017 373.403017H293.735598V445.483787h186.701509V569.910916l248.975887-186.701509-248.975887-186.701508V320.935028zM231.461219 258.782278h186.701508v-248.975888c0-34.42119-27.853189-62.274379-62.274379-62.274379H169.186839c-34.42119 0-62.274379 27.853189-62.274379 62.274379v746.806034c0 34.42119 27.853189 62.274379 62.274379 62.27438h186.701509c34.42119 0 62.274379-27.853189 62.274379-62.27438v-248.975888H231.461219v-248.854258z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zanting" unicode="&#59013;" d="M804.571429 896a146.285714 146.285714 0 0 0 146.285714-146.285714v-731.428572a146.285714 146.285714 0 1 0-292.571429 0V749.714286a146.285714 146.285714 0 0 0 146.285715 146.285714zM219.428571 896a146.285714 146.285714 0 0 0 146.285715-146.285714v-731.428572a146.285714 146.285714 0 1 0-292.571429 0V749.714286a146.285714 146.285714 0 0 0 146.285714 146.285714z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zantingtingzhi" unicode="&#58947;" d="M720.896 800.768c-47.616 0-89.6-41.472-89.6-89.088v-655.36c0-47.616 41.984-89.088 89.6-89.088s89.6 41.472 89.6 89.088V711.68c-0.512 47.616-41.984 89.088-89.6 89.088z m-417.792 0c-47.616 0-89.6-41.472-89.6-89.088v-655.36c0-47.616 41.984-89.088 89.6-89.088s89.6 41.472 89.6 89.088V711.68c0 47.616-41.984 89.088-89.6 89.088z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xiugai" unicode="&#58930;" d="M768.487 507.639L590.76 680.933 210.93 301.508l-66.201-242.161v-0.4L386.483 126.2zM739.523 829.38l-95.197-95.04 178.296-172.65 92.375 92.296c48.487 48.406 48.487 126.985 0 175.392-48.405 48.407-127.069 48.407-175.474 0.002zM79.029 17.29h872.333v-114.976H79.029z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

src/assets/scss/common.scss

@@ -72,6 +72,13 @@ a:active{
 .no-btn{
 .no-btn{
 	color:#cccccc;
 	color:#cccccc;
 }
 }
+.custom-tree-node{
+	width: 100%;
+}
+.tree-btn{
+	float: right;
+	margin-right: 10px;
+}
 .blue{
 .blue{
 	.tableSpanBorder{
 	.tableSpanBorder{
 		display: inline-block;
 		display: inline-block;

src/main.js

@@ -8,8 +8,9 @@ import resetCss from "./assets/resetElementCss/index.css";
 import api from "./api/install";
 import api from "./api/install";
 import "./assets/css/public.css";
 import "./assets/css/public.css";
 import echarts from "echarts";
 import echarts from "echarts";
+import "./assets/icon/icon1/iconfont.css";
+import "./assets/icon/icon2/iconfont.css";
 import "../src/assets/js/vporto";
 import "../src/assets/js/vporto";
-import "./assets/icon/iconfont.css";
 import { buildCode } from "../src/assets/js/buildcodes";
 import { buildCode } from "../src/assets/js/buildcodes";
 import moment from "moment";
 import moment from "moment";
 Vue.prototype.$echarts = echarts;
 Vue.prototype.$echarts = echarts;

src/router/index.js

@@ -51,7 +51,7 @@ export const asyncRouterMap = [
     children: [
     children: [
       {
       {
         path: "/task/sceneSet",
         path: "/task/sceneSet",
-        name: "sceneSet",
+        name: "场景设置",
         meta: {
         meta: {
           icon: "el-icon-location"
           icon: "el-icon-location"
         },
         },
@@ -59,7 +59,7 @@ export const asyncRouterMap = [
       },
       },
       {
       {
         path: "/task/taskSet",
         path: "/task/taskSet",
-        name: "taskSet",
+        name: "任务设置",
         meta: {
         meta: {
           icon: "el-icon-location"
           icon: "el-icon-location"
         },
         },
@@ -117,24 +117,32 @@ export const asyncRouterMap = [
       },
       },
       {
       {
         path: "/search/traficflow",
         path: "/search/traficflow",
-        name: "公共客流查询",
+        name: "交通流量",
 		meta: {
 		meta: {
 		  icon: "el-icon-location"
 		  icon: "el-icon-location"
 		},
 		},
-        component: resolve => require(["../views/search/traficflow.vue"], resolve)
-      },
-      {
-        path: "/search/param",
-        name: "交通参数",
+         component: resolve => require(['../views/search/traficflow.vue'], resolve),
+      },{
+        path: "/search/publicFlow",
+        name: "公共客流",
 		meta: {
 		meta: {
-          icon: "el-icon-user"
+		  icon: "el-icon-location"
 		},
 		},
-        component: resolve => require(["../views/search/publicFlow.vue"], resolve)
+         component: resolve => require(['../views/search/publicFlow.vue'], resolve),
       }
       }
     ]
     ]
+  },{
+    path: "/resource",
+    name: "资源管理",
+    component: resolve => require(["../views/Layout/index.vue"], resolve),
+    meta: {
+      icon: "el-icon-location"
+    },
+    children: [
+		
+	]
   }
   }
 ];
 ];
-console.log(process.env.BASE_URL);
 const router = new VueRouter({
 const router = new VueRouter({
   // mode: "history",
   // mode: "history",
   // base: process.env.BASE_URL,
   // base: process.env.BASE_URL,

src/views/Home.vue

+<<<<<<< HEAD
+<template>
+  <div class="home"  @keyup.esc="KeyUpF11">
+    <el-container class="home-box">
+      <el-header class="headers">
+		  <img class="logoImg" src="../assets/img/home/logo.png" alt="">
+		  <div class="headRight">
+			  <span>2019-11-15 16:50 星期一</span>
+			  <img src="../assets/img/home/user.png" alt="">
+			  <span class="exit">退出<i class="el-icon-arrow-down"></i></span>
+		  </div>
+	  </el-header>
+      <el-container style="min-height:calc(100vh - 64px);">
+        <el-aside :width="menuwidth">
+			<el-menu default-active="/trficcshow" class="el-menu-vertical-demo" :collapse="isCollapse"  @select="handleSelect">
+			  <el-submenu index="1">
+			    <template slot="title">
+			      <i class="el-icon-location"></i>
+			      <span slot="title">首页</span>
+			    </template>
+						<el-menu-item index="/trficcshow"> <i class="el-icon-location"></i>交通展示</el-menu-item>
+			      <el-menu-item index="/behaviorshow"> <i class="el-icon-location"></i>综治展示</el-menu-item>
+			  </el-submenu>
+			  <el-submenu index="2">
+			    <template slot="title">
+			      <i class="el-icon-location"></i>
+			      <span slot="title">任务管理</span>
+			    </template>
+				<el-menu-item index="/task/sceneSet"> <i class="el-icon-location"></i>场景配置</el-menu-item>
+			      <el-menu-item index="/task/taskSet"> <i class="el-icon-location"></i>任务配置</el-menu-item>
+			  </el-submenu>
+			  <el-submenu index="3">
+			    <template slot="title">
+			      <i class="el-icon-document"></i>
+			      <span slot="title">智能检索</span>
+			    </template>
+				<el-menu-item index="/search/vehicleSearch"> <i class="el-icon-location"></i>过车记录检索</el-menu-item>
+				<el-menu-item index="/search/xcycle"> <i class="el-icon-location"></i>非机动车检索</el-menu-item>
+				<el-menu-item index="/search/pedestrian"> <i class="el-icon-location"></i>行人检索</el-menu-item>
+				<el-menu-item index="/search/event"> <i class="el-icon-location"></i>事件查询</el-menu-item>
+				<el-menu-item index="/search/illegal"> <i class="el-icon-location"></i>违法记录查询</el-menu-item>
+				<el-menu-item index="/search/publicFlow"> <i class="el-icon-location"></i>公共客流</el-menu-item>
+				<el-menu-item index="/search/traficflow"> <i class="el-icon-location"></i>交通流量</el-menu-item>
+			  </el-submenu>
+			  <el-submenu index="4">
+			    <template slot="title">
+			      <i class="el-icon-document"></i>
+			      <span slot="title">资源管理</span>
+			    </template>
+				<el-menu-item index="/resource/videoEquipment"> <i class="el-icon-location"></i>视频设备</el-menu-item>
+			  </el-submenu>
+			</el-menu>
+		</el-aside>
+        <el-main>
+			<div class="nav"></div>
+			<router-view></router-view>
+		</el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script>
+// import HelloWorld from "@/components/HelloWorld.vue";
+
+export default {
+  name: "home",
+  data(){
+	  return{
+			isCollapse: false,
+			conHeight:0,
+			menuwidth:"254px",
+			full:false
+	  };
+  },
+  created(){
+	  this.$router.push('/trficcshow')
+  },
+  mounted(){
+	  this.conHeight=window.innerHeight-65;
+		console.log(this.conHeight)
+		 document.addEventListener("keydown", (event)=>{
+				var e = event || window.event || arguments.callee.caller.arguments[0]; 
+				if(e && e.keyCode==122 ){ // 按 Esc  
+					if(this.full) {
+						this.menuwidth = "254px";
+						this.full = false
+						return 
+					}
+					this.menuwidth = 0
+					this.full = true
+				} 
+				
+		});
+	
+  },
+  components: {
+    // HelloWorld
+  },
+  methods:{
+	   handleSelect(key, keyPath) {
+		   this.$router.push(key)
+		  console.log(key, keyPath);
+		}
+  }
+};
+</script>
+<style lang="stylus" scoped>
+
+</style>
\ No newline at end of file

src/views/resource/treeComponents/cameraTree.vue

+<template>
+	<div>
+		<el-tree
+		  class="filter-tree"
+		  :data="data"
+		  :props="defaultProps"
+		  default-expand-all
+		  :filter-node-method="filterNode"
+		  ref="tree">
+		  <span class="custom-tree-node" slot-scope="{ node, data }">
+		      <span>
+		          <span class="tree-label">{{ data.label }}</span>
+		      </span>
+		      <span class="tree-btn">
+		          <i class="el-icon-plus" @click.stop="nodeAdd(node,data)"></i>
+		          <i class="el-icon-edit" @click.stop="nodeEdit(node,data)"></i>
+		          <i class="el-icon-delete" @click.stop="nodeDel(node,data)"></i>
+		      </span>
+		  </span>
+		</el-tree>
+	</div>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				data: [{
+				  id: 1,
+				  label: '一级 1',
+				  children: [{
+				    id: 4,
+				    label: '二级 1-1',
+				    children: [{
+				      id: 9,
+				      label: '三级 1-1-1'
+				    }, {
+				      id: 10,
+				      label: '三级 1-1-2'
+				    }]
+				  }]
+				}, {
+				  id: 2,
+				  label: '一级 2',
+				  children: [{
+				    id: 5,
+				    label: '二级 2-1'
+				  }, {
+				    id: 6,
+				    label: '二级 2-2'
+				  }]
+				}, {
+				  id: 3,
+				  label: '一级 3',
+				  children: [{
+				    id: 7,
+				    label: '二级 3-1'
+				  }, {
+				    id: 8,
+				    label: '二级 3-2'
+				  }]
+				}],
+				defaultProps: {
+				  children: 'children',
+				  label: 'label'
+				},
+			}
+		},
+		props:{
+			filterText:{
+				type:String,
+				default:false
+			},
+		},
+		watch:{
+			filterText(val) {
+			   this.$refs.tree.filter(val);
+			 }
+		},
+		methods:{
+			nodeAdd(node,data){
+				console.log(node,data)
+			},
+			filterNode(value, data) {
+			       if (!value) return true;
+			       return data.label.indexOf(value) !== -1;
+			     },
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/resource/videoEquipment.vue

+<template>
+  <div class="innnerBox">
+	  <el-col :span="4">
+		  <el-input class="search-input"
+		     prefix-icon="el-icon-search"
+		     placeholder="请输入内容"
+		     v-model="searchText"
+		     >
+		   </el-input>
+	<cameraTree :filterText="searchText"></cameraTree>
+	  </el-col>
+		   <el-col :span="22">
+			  <el-form ref="form" label-width="80px" inline>
+					  <el-form-item label="资源类型" >
+						   <span class="inputBox">
+							   <el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.source_type">
+									<el-option value="pull_video_stream" label='拉取视频'></el-option>
+									<el-option value="pull_pic_files" label='拉取图片'></el-option>
+								</el-select>
+						   </span>
+					  </el-form-item>
+					 <el-form-item label="事件类型">
+					 	<span class="selectBox">
+					 	   <el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.type">
+							   <el-option value="" label="全部"></el-option>
+								<el-option v-for='item in eventList' :value="item.code" :key="item.code" :label='item.name'></el-option>
+					 		</el-select>
+					 	</span>
+					 </el-form-item>
+					 <el-form-item label="任务名称">
+					   <span class="inputBox">
+						 <el-input placeholder="请输入任务名称"  v-model="conditions.task_name"></el-input>
+					   </span>
+					 </el-form-item>
+					<el-form-item label="起始时间">
+						  <span class="dateBox">
+							  <el-date-picker
+							   v-model="dates"
+							   value-format="yyyy-MM-dd HH:mm:ss"
+								:default-time="['00:00:00', '23:59:59']"
+							   type="datetimerange"
+							   range-separator="至"
+							   start-placeholder="开始日期"
+							   end-placeholder="结束日期">
+							 </el-date-picker>
+						  </span>
+					  </el-form-item>
+			  </el-form>
+		  </el-col>
+		   <el-col :span="2">
+			   <div style="margin-bottom: 6px;padding-top: 3px;">
+					<el-button type="primary" style="" @click="query" class="block">查询</el-button>
+					<el-button type="success" class="block" @click="exportFun">导出</el-button>
+				</div>
+		   </el-col>
+		  <div  style="">
+			  <el-table
+			       :data="formattterData"
+			       height="574"
+				   stripe
+				   border
+			      @selection-change="handleSelectionChange">
+			       <el-table-column
+			         prop="event_type"
+			          align="center"
+			         label="事件类型">
+			       </el-table-column>
+			         <el-table-column
+			         prop="task_name"
+			          align="center"
+			         label="任务名称">
+			       </el-table-column>
+				   <el-table-column
+				      align="center"
+				     label="地点">
+					 <template slot-scope="scope" >
+					   <div>
+					     <span v-if="scope.row.event_cate == 'behavior'&&scope.row.event_data&&scope.row.event_data">{{scope.row.event_data.locate_name}}</span>
+					   </div>
+					 </template>
+				   </el-table-column>
+				   <el-table-column
+				      align="center"
+				     label="面积(㎡)">
+					 <template slot-scope="scope" >
+					   <div>
+					     <span v-if="scope.row.event_cate == 'behavior'&&scope.row.event_data&&scope.row.event_data.area_list">{{scope.row.area_list[0].area}}</span>
+					   </div>
+					 </template>
+				   </el-table-column>
+				   <el-table-column
+				      align="center"
+				     label="人数(个)">
+					 <template slot-scope="scope" >
+					   <div>
+					      <span v-if="scope.row.event_cate == 'behavior'&&scope.row.event_data&&scope.row.event_data.area_list">{{scope.row.area_list[0].count}}</span>
+					   </div>
+					 </template>
+				   </el-table-column>
+				   <el-table-column
+				      align="center"
+				     label="进入阈值">
+					 <template slot-scope="scope" >
+					   <div>
+					     <span v-if="scope.row.event_cate == 'behavior'&&scope.row.event_data&&scope.row.event_data.area_list">{{scope.row.area_list[0].max_len}}</span>
+					   </div>
+					 </template>
+				   </el-table-column>
+				   <el-table-column
+				      align="center"
+				     label="离开阈值">
+					 <template slot-scope="scope" >
+					   <div>
+					      <span v-if="scope.row.event_cate == 'behavior'&&scope.row.event_data&&scope.row.event_data.area_list">{{scope.row.area_list[0].normal_len}}</span>
+					   </div>
+					 </template>
+				   </el-table-column>
+			        <el-table-column
+			         prop="shoot_date"
+			          align="center"
+			         label="抓拍时间">
+					 <template slot-scope="scope">
+						 <span v-if="scope.row.event_cate == 'behavior'&&scope.row.event_data">{{scope.row.shoot_date}} {{scope.row.shoot_time}}</span>
+					 </template>
+			       </el-table-column>
+				   <el-table-column
+				      align="center"
+				     label="车道号">
+					 <template slot-scope="scope">
+					   <div>
+					     <span v-if="scope.row.event_cate == 'behavior'&&scope.row.event_data">{{scope.row.event_data.lane.number}}</span>
+					   </div>
+					 </template>
+				   </el-table-column>
+				   <el-table-column
+				      align="center"
+				     label="方向类型">
+					 <template slot-scope="scope">
+					   <div>
+					     <span v-if="scope.row.event_cate == 'behavior'&&scope.row.event_data &&scope.row.event_type !=='jinggaidiushi'&&scope.row.event_type !=='daobantingche'">{{scope.row.direction_text}}</span>
+					   </div>
+					 </template>
+				   </el-table-column>
+				   <el-table-column
+				      align="center"
+				     label="车道类型">
+					 <template slot-scope="scope">
+					   <div>
+					     <span v-if="scope.row.event_cate == 'behavior'&&scope.row.event_data">{{scope.row.lane_text}}</span>
+					   </div>
+					 </template>
+				   </el-table-column>
+				   <el-table-column
+				      align="center"
+				     label="事件发生时间">
+					 <template  slot-scope="scope">
+					   <div>
+					     <span v-if="scope.row.event_cate == 'behavior'&&scope.row.event_data">{{$moment($moment.utc(scope.row.event_data.start_dt).format()).local().format('YYYY-MM-DD HH:mm:ss')}}</span>
+					   </div>
+					 </template>
+				   </el-table-column>
+				   <el-table-column
+				      align="center"
+				     label="事件结束时间">
+					 <template  slot-scope="scope">
+					   <div>
+					      <span v-if="scope.row.event_cate == 'behavior'&&scope.row.event_data">{{$moment($moment.utc(scope.row.event_data.end_dt).format()).local().format('YYYY-MM-DD HH:mm:ss')}}</span>
+					   </div>
+					 </template>
+				   </el-table-column>
+			       <el-table-column
+			        align="center"
+			         label="操作">
+			         <template slot-scope="scope">
+						 <el-tooltip content="播放" placement="bottom" effect="light" :visible-arrow=false>
+						 	<span :class="{'iconfont icon-bofang playIcon':true,'no-btn':scope.row.video&&scope.row.video[0].src_url!=''?false:true}"  @click="playFun(scope.$index, scope.row)"></span>
+						 </el-tooltip>
+						 <span class="tableSpanBorder"></span>
+			         	<el-tooltip content="详情" placement="bottom" effect="light" :visible-arrow=false>
+			         		<span class="iconfont icon-xiugai editIcon"   @click="detailFun(scope.$index, scope.row)"></span>
+			         	</el-tooltip>
+			         </template>
+			       </el-table-column>
+			  </el-table>
+				<div style="margin-top: 28px;">
+					<el-pagination
+					style="float: right;"
+					  background
+					  prev-text="上一页"
+					  next-text="下一页"
+					   :page-sizes="[30, 50, 100, 200]"
+					  layout="prev, pager, next,sizes"
+					  :current-page="page"
+					  @size-change="handleSizeChange"
+					  @current-change="handleCurrentChange"
+					  :total="total">
+					</el-pagination>
+					<div style="clear: both;"></div>
+				</div>
+		  </div>
+		  <el-dialog
+		    title="详情"
+		    top="12vh"
+		    :visible.sync="detailVisible"
+		    width="700px">
+			<div style="position: relative;padding: 10px 20px;">
+				<div class="leftArrow" @click="leftFun"><i class="el-icon-d-arrow-left"></i></div>
+				<div class="detaiCon">
+					<el-image style="width: 100%;" :src="this.detailImg">
+					  <div slot="error" class="image-slot">
+						<img :src="carImg" alt="" style="width: 40%;display: block;margin: 0 auto;">
+					  </div>
+					</el-image>
+					<el-form  label-width="120px" inline>
+						<div>
+							<el-form-item label="经过日期:">
+								<span>{{ detailObj.shoot_date ? detailObj.shoot_date : '' }}</span>
+							</el-form-item>
+							<el-form-item label="经过时间:">
+								<span>{{ detailObj.shoot_time ? detailObj.shoot_time : '' }}</span>
+							</el-form-item>
+						</div>
+						<div>
+							<el-form-item label="事件类型:">
+								<span>{{ detailObj.event_type }}</span>
+							</el-form-item>
+						</div>
+					</el-form>
+				</div>
+				<div class="rightArrow"  @click="rightFun"><i class="el-icon-d-arrow-right"></i></div>
+			</div>
+		    <span slot="footer" class="dialog-footer">
+		      <el-button type="primary" @click="detailVisible = false">关 闭</el-button>
+		    </span>
+		  </el-dialog>
+		  <curVideo ref="visableDialog" :playersrc="playurl"></curVideo>
+  </div>
+</template>
+<script>
+	import videoDialog from '@/components/video'
+	import cameraTree from './treeComponents/cameraTree'
+	export default {
+		data(){
+			let start_dt = this.$moment('2019-12-20').format('YYYY-MM-DD')+' 00:00:00';
+			let end_dt = this.$moment().format('YYYY-MM-DD')+' 23:59:59';
+			return{
+				searchText: '',
+				detailObj:{},
+				carImg:require("@/assets/img/home/defaultImg.png"),
+				detailImg:'',
+				detailVisible:false,
+				dates:[ start_dt,end_dt ],
+				conditions: {
+					start_dt:start_dt,
+					end_dt:end_dt,
+					type: '',
+					source_type:'',
+					task_name:''
+				},
+				tableData:[],
+				formattterData:[],
+				total:0,
+				page:1,
+				pageSize:30,
+				selectcheck:[],
+				currentIndex:0,
+				eventList:JSON.parse(window.localStorage.getItem('安防事件')),
+				playurl:''
+			}
+		},
+		watch:{
+			dates(val){
+				this.conditions.start_dt=val[0];
+				this.conditions.end_dt=val[1];
+			}
+		},
+		components:{
+			videoDialog,cameraTree
+		},
+		mounted(){
+			this.getData()
+		},
+		methods:{
+			exportFun(){
+				  window.open(
+				    encodeURI(
+					process.env.VUE_APP_URL+
+					  "/api/v1/behavior/events/export?s=" + Math.random()+
+					 '&event_dt__gte='+ this.$moment(this.conditions.start_dt).utc().format('YYYY-MM-DD HH:mm:ss') +
+					 '&event_dt__lt='+this.$moment(this.conditions.end_dt).utc().format('YYYY-MM-DD HH:mm:ss') +
+					 '&task_name='+this.conditions.task_name+
+					 '&event_type='+this.conditions.type
+				    )
+				  );
+			},
+			leftFun(){
+				if(this.currentIndex-1<0){
+					  this.$message({
+						  message: '目前为第一条',
+						  type: 'warning'
+						});
+						return false;
+				}
+				this.detailObj=this.formattterData[this.currentIndex-1];
+				this.currentIndex-=1;
+				this.getImg(this.detailObj.pics[0].pic_unid);
+			},
+			rightFun(){
+				if(this.currentIndex==this.formattterData.length-1){
+					  this.$message({
+						  message: '目前为最后一条',
+						  type: 'warning'
+						});
+						return false;
+				}
+				this.detailObj=this.formattterData[this.currentIndex+1];
+				this.currentIndex+=1;
+				this.getImg(this.detailObj.pics[0].pic_unid);
+			},
+			handleSelectionChange(obj){
+			   this.selectcheck = [];
+				 obj.forEach(item => {
+				   this.selectcheck.push(item.id)
+				 });
+			},
+			handleSizeChange(val) {
+				this.pageSize=val;
+				this.getData();
+			},
+			handleCurrentChange(val) {
+				this.page=val;
+				this.getData();
+			  },
+			query(){
+				this.getData();
+			},
+			getData(){
+				this.formattterData=[];
+				let offset = (this.page - 1) * this.pageSize;
+				let search_params = {
+					limit: this.pageSize,
+					offset: offset,
+					task_name: this.conditions.task_name ? this.conditions.task_name.replace(/\s\s*/g, '') : this.conditions.task_name,
+					event_type: this.conditions.type,
+					event_dt__gte: this.$moment(this.conditions.start_dt).utc().format('YYYY-MM-DD HH:mm:ss'),
+					event_dt__lt:this.$moment(this.conditions.end_dt).utc().format('YYYY-MM-DD HH:mm:ss')
+				}
+				this.$api.search.eventTableList(search_params
+				).then((res)=>{
+					this.total=res.total_num;
+					res.list_data.forEach((item,index)=>{
+						this.formattterData.push(this.$buildCode.init(item));
+					})
+					
+				}).catch((err)=>{
+					
+				})
+			},
+			getImg(unid){
+				this.$api.search.detailImg({
+				},unid).then(res=>{
+					this.detailImg=res.pic_url ? res.pic_url : carImg;
+				}).catch(e=>{
+					
+				})
+			},
+			playFun(index,row){
+					if(!row.video) {
+						return
+				  }
+					var play_url = '';
+					if(row.video) {
+						play_url = row.video[0].src_url
+				  }
+				  this.$refs.visableDialog.playvideos(play_url);
+			},
+			detailFun(index,row){
+				this.currentIndex=index;
+				if(row.pics.length>0){
+					this.detailObj = Object.assign({},row);
+					this.getImg(row.pics[0].pic_unid);
+				}
+				this.detailVisible=true;
+			}
+		},
+	}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file