创建分支提交最新代码

build/webpack.base.conf.js

@@ -39,6 +39,10 @@ module.exports = {
         }
       },
       {
+        test: /vue-preview.src.*?js$/,
+        loader: 'babel'
+    },
+      {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: vueLoaderConfig

src/assets/iconfont/iconfont/demo.css

@@ -1,370 +0,0 @@
-*{margin: 0;padding: 0;list-style: none;}
-/*
-KISSY CSS Reset
-理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
-2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
-3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
-特色：1. 适应中文；2. 基于最新主流浏览器。
-维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
- */
-
-/** 清除内外边距 **/
-body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
-dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
-pre, /* text formatting elements 文本格式元素 */
-form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
-th, td /* table elements 表格元素 */ {
-  margin: 0;
-  padding: 0;
-}
-
-/** 设置默认字体 **/
-body,
-button, input, select, textarea /* for ie */ {
-  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
-}
-h1, h2, h3, h4, h5, h6 { font-size: 100%; }
-address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
-code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
-small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
-
-/** 重置列表元素 **/
-ul, ol { list-style: none; }
-
-/** 重置文本格式元素 **/
-a { text-decoration: none; }
-a:hover { text-decoration: underline; }
-
-
-/** 重置表单元素 **/
-legend { color: #000; } /* for ie6 */
-fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
-button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
-/* 注：optgroup 无法扶正 */
-
-/** 重置表格元素 **/
-table { border-collapse: collapse; border-spacing: 0; }
-
-/* 清除浮动 */
-.ks-clear:after, .clear:after {
-  content: '\20';
-  display: block;
-  height: 0;
-  clear: both;
-}
-.ks-clear, .clear {
-  *zoom: 1;
-}
-
-.main {
-  padding: 30px 100px;
-width: 960px;
-margin: 0 auto;
-}
-.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
-
-.helps{margin-top:40px;}
-.helps pre{
-  padding:20px;
-  margin:10px 0;
-  border:solid 1px #e7e1cd;
-  background-color: #fffdef;
-  overflow: auto;
-}
-
-.icon_lists{
-  width: 100% !important;
-
-}
-
-.icon_lists li{
-  float:left;
-  width: 100px;
-  height:180px;
-  text-align: center;
-  list-style: none !important;
-}
-.icon_lists .icon{
-  font-size: 42px;
-  line-height: 100px;
-  margin: 10px 0;
-  color:#333;
-  -webkit-transition: font-size 0.25s ease-out 0s;
-  -moz-transition: font-size 0.25s ease-out 0s;
-  transition: font-size 0.25s ease-out 0s;
-
-}
-.icon_lists .icon:hover{
-  font-size: 100px;
-}
-
-
-
-.markdown {
-  color: #666;
-  font-size: 14px;
-  line-height: 1.8;
-}
-
-.highlight {
-  line-height: 1.5;
-}
-
-.markdown img {
-  vertical-align: middle;
-  max-width: 100%;
-}
-
-.markdown h1 {
-  color: #404040;
-  font-weight: 500;
-  line-height: 40px;
-  margin-bottom: 24px;
-}
-
-.markdown h2,
-.markdown h3,
-.markdown h4,
-.markdown h5,
-.markdown h6 {
-  color: #404040;
-  margin: 1.6em 0 0.6em 0;
-  font-weight: 500;
-  clear: both;
-}
-
-.markdown h1 {
-  font-size: 28px;
-}
-
-.markdown h2 {
-  font-size: 22px;
-}
-
-.markdown h3 {
-  font-size: 16px;
-}
-
-.markdown h4 {
-  font-size: 14px;
-}
-
-.markdown h5 {
-  font-size: 12px;
-}
-
-.markdown h6 {
-  font-size: 12px;
-}
-
-.markdown hr {
-  height: 1px;
-  border: 0;
-  background: #e9e9e9;
-  margin: 16px 0;
-  clear: both;
-}
-
-.markdown p,
-.markdown pre {
-  margin: 1em 0;
-}
-
-.markdown > p,
-.markdown > blockquote,
-.markdown > .highlight,
-.markdown > ol,
-.markdown > ul {
-  width: 80%;
-}
-
-.markdown ul > li {
-  list-style: circle;
-}
-
-.markdown > ul li,
-.markdown blockquote ul > li {
-  margin-left: 20px;
-  padding-left: 4px;
-}
-
-.markdown > ul li p,
-.markdown > ol li p {
-  margin: 0.6em 0;
-}
-
-.markdown ol > li {
-  list-style: decimal;
-}
-
-.markdown > ol li,
-.markdown blockquote ol > li {
-  margin-left: 20px;
-  padding-left: 4px;
-}
-
-.markdown code {
-  margin: 0 3px;
-  padding: 0 5px;
-  background: #eee;
-  border-radius: 3px;
-}
-
-.markdown pre {
-  border-radius: 6px;
-  background: #f7f7f7;
-  padding: 20px;
-}
-
-.markdown pre code {
-  border: none;
-  background: #f7f7f7;
-  margin: 0;
-}
-
-.markdown strong,
-.markdown b {
-  font-weight: 600;
-}
-
-.markdown > table {
-  border-collapse: collapse;
-  border-spacing: 0px;
-  empty-cells: show;
-  border: 1px solid #e9e9e9;
-  width: 95%;
-  margin-bottom: 24px;
-}
-
-.markdown > table th {
-  white-space: nowrap;
-  color: #333;
-  font-weight: 600;
-
-}
-
-.markdown > table th,
-.markdown > table td {
-  border: 1px solid #e9e9e9;
-  padding: 8px 16px;
-  text-align: left;
-}
-
-.markdown > table th {
-  background: #F7F7F7;
-}
-
-.markdown blockquote {
-  font-size: 90%;
-  color: #999;
-  border-left: 4px solid #e9e9e9;
-  padding-left: 0.8em;
-  margin: 1em 0;
-  font-style: italic;
-}
-
-.markdown blockquote p {
-  margin: 0;
-}
-
-.markdown .anchor {
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  margin-left: 8px;
-}
-
-.markdown .waiting {
-  color: #ccc;
-}
-
-.markdown h1:hover .anchor,
-.markdown h2:hover .anchor,
-.markdown h3:hover .anchor,
-.markdown h4:hover .anchor,
-.markdown h5:hover .anchor,
-.markdown h6:hover .anchor {
-  opacity: 1;
-  display: inline-block;
-}
-
-.markdown > br,
-.markdown > p > br {
-  clear: both;
-}
-
-
-.hljs {
-  display: block;
-  background: white;
-  padding: 0.5em;
-  color: #333333;
-  overflow-x: auto;
-}
-
-.hljs-comment,
-.hljs-meta {
-  color: #969896;
-}
-
-.hljs-string,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-strong,
-.hljs-emphasis,
-.hljs-quote {
-  color: #df5000;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-type {
-  color: #a71d5d;
-}
-
-.hljs-literal,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-attribute {
-  color: #0086b3;
-}
-
-.hljs-section,
-.hljs-name {
-  color: #63a35c;
-}
-
-.hljs-tag {
-  color: #333333;
-}
-
-.hljs-title,
-.hljs-attr,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo {
-  color: #795da3;
-}
-
-.hljs-addition {
-  color: #55a532;
-  background-color: #eaffea;
-}
-
-.hljs-deletion {
-  color: #bd2c00;
-  background-color: #ffecec;
-}
-
-.hljs-link {
-  text-decoration: underline;
-}
-
-pre{
-  background: #fff;
-}
-
-
-
-
-

src/assets/iconfont/iconfont/demo_fontclass.html

@@ -1,118 +0,0 @@
-
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8"/>
-    <title>IconFont</title>
-    <link rel="stylesheet" href="demo.css">
-    <link rel="stylesheet" href="iconfont.css">
-</head>
-<body>
-    <div class="main markdown">
-        <h1>IconFont 图标</h1>
-        <ul class="icon_lists clear">
-            
-                <li>
-                <i class="icon iconfont icon-msnui-app"></i>
-                    <div class="name">应用</div>
-                    <div class="fontclass">.icon-msnui-app</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont icon-qiyehechabidui"></i>
-                    <div class="name">企业核查比对</div>
-                    <div class="fontclass">.icon-qiyehechabidui</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont icon-zhongxinyinxing"></i>
-                    <div class="name">中信银行</div>
-                    <div class="fontclass">.icon-zhongxinyinxing</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont icon-duizhangdan"></i>
-                    <div class="name">对账单</div>
-                    <div class="fontclass">.icon-duizhangdan</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont icon-07"></i>
-                    <div class="name">电脑,桌面,技术,imac,苹果,pc,设备,线性,扁平,填充,单色,简约,圆润</div>
-                    <div class="fontclass">.icon-07</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont icon-zhongxinyinhang1"></i>
-                    <div class="name">中信银行</div>
-                    <div class="fontclass">.icon-zhongxinyinhang1</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont icon-xiangmuduizhangdan"></i>
-                    <div class="name">项目对账单</div>
-                    <div class="fontclass">.icon-xiangmuduizhangdan</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont icon-zuoyebaobiao"></i>
-                    <div class="name">作业报表</div>
-                    <div class="fontclass">.icon-zuoyebaobiao</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont icon-zhongxinyinhang"></i>
-                    <div class="name">中信银行</div>
-                    <div class="fontclass">.icon-zhongxinyinhang</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont icon-biaoqianyong"></i>
-                    <div class="name">标签用</div>
-                    <div class="fontclass">.icon-biaoqianyong</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont icon-shezhiyong"></i>
-                    <div class="name">设置用</div>
-                    <div class="fontclass">.icon-shezhiyong</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont icon-anquanguizeyong"></i>
-                    <div class="name">安全规则用</div>
-                    <div class="fontclass">.icon-anquanguizeyong</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont icon-tesefuwu"></i>
-                    <div class="name">特色服务</div>
-                    <div class="fontclass">.icon-tesefuwu</div>
-                </li>
-            
-        </ul>
-
-        <h2 id="font-class-">font-class引用</h2>
-        <hr>
-
-        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
-        <p>与unicode使用方式相比，具有如下特点：</p>
-        <ul>
-        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
-        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
-        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
-        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
-        </ul>
-        <p>使用步骤如下：</p>
-        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
-
-
-        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
-        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
-        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
-        <blockquote>
-        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
-        </blockquote>
-    </div>
-</body>
-</html>

src/assets/iconfont/iconfont/demo_symbol.html

@@ -1,167 +0,0 @@
-
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8"/>
-    <title>IconFont</title>
-    <link rel="stylesheet" href="demo.css">
-    <script src="iconfont.js"></script>
-
-    <style type="text/css">
-        .icon {
-          /* 通过设置 font-size 来改变图标大小 */
-          width: 1em; height: 1em;
-          /* 图标和文字相邻时，垂直对齐 */
-          vertical-align: -0.15em;
-          /* 通过设置 color 来改变 SVG 的颜色/fill */
-          fill: currentColor;
-          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
-             normalize.css 中也包含这行 */
-          overflow: hidden;
-        }
-
-    </style>
-</head>
-<body>
-    <div class="main markdown">
-        <h1>IconFont 图标</h1>
-        <ul class="icon_lists clear">
-            
-                <li>
-                    <svg class="icon" aria-hidden="true">
-                        <use xlink:href="#icon-msnui-app"></use>
-                    </svg>
-                    <div class="name">应用</div>
-                    <div class="fontclass">#icon-msnui-app</div>
-                </li>
-            
-                <li>
-                    <svg class="icon" aria-hidden="true">
-                        <use xlink:href="#icon-qiyehechabidui"></use>
-                    </svg>
-                    <div class="name">企业核查比对</div>
-                    <div class="fontclass">#icon-qiyehechabidui</div>
-                </li>
-            
-                <li>
-                    <svg class="icon" aria-hidden="true">
-                        <use xlink:href="#icon-zhongxinyinxing"></use>
-                    </svg>
-                    <div class="name">中信银行</div>
-                    <div class="fontclass">#icon-zhongxinyinxing</div>
-                </li>
-            
-                <li>
-                    <svg class="icon" aria-hidden="true">
-                        <use xlink:href="#icon-duizhangdan"></use>
-                    </svg>
-                    <div class="name">对账单</div>
-                    <div class="fontclass">#icon-duizhangdan</div>
-                </li>
-            
-                <li>
-                    <svg class="icon" aria-hidden="true">
-                        <use xlink:href="#icon-07"></use>
-                    </svg>
-                    <div class="name">电脑,桌面,技术,imac,苹果,pc,设备,线性,扁平,填充,单色,简约,圆润</div>
-                    <div class="fontclass">#icon-07</div>
-                </li>
-            
-                <li>
-                    <svg class="icon" aria-hidden="true">
-                        <use xlink:href="#icon-zhongxinyinhang1"></use>
-                    </svg>
-                    <div class="name">中信银行</div>
-                    <div class="fontclass">#icon-zhongxinyinhang1</div>
-                </li>
-            
-                <li>
-                    <svg class="icon" aria-hidden="true">
-                        <use xlink:href="#icon-xiangmuduizhangdan"></use>
-                    </svg>
-                    <div class="name">项目对账单</div>
-                    <div class="fontclass">#icon-xiangmuduizhangdan</div>
-                </li>
-            
-                <li>
-                    <svg class="icon" aria-hidden="true">
-                        <use xlink:href="#icon-zuoyebaobiao"></use>
-                    </svg>
-                    <div class="name">作业报表</div>
-                    <div class="fontclass">#icon-zuoyebaobiao</div>
-                </li>
-            
-                <li>
-                    <svg class="icon" aria-hidden="true">
-                        <use xlink:href="#icon-zhongxinyinhang"></use>
-                    </svg>
-                    <div class="name">中信银行</div>
-                    <div class="fontclass">#icon-zhongxinyinhang</div>
-                </li>
-            
-                <li>
-                    <svg class="icon" aria-hidden="true">
-                        <use xlink:href="#icon-biaoqianyong"></use>
-                    </svg>
-                    <div class="name">标签用</div>
-                    <div class="fontclass">#icon-biaoqianyong</div>
-                </li>
-            
-                <li>
-                    <svg class="icon" aria-hidden="true">
-                        <use xlink:href="#icon-shezhiyong"></use>
-                    </svg>
-                    <div class="name">设置用</div>
-                    <div class="fontclass">#icon-shezhiyong</div>
-                </li>
-            
-                <li>
-                    <svg class="icon" aria-hidden="true">
-                        <use xlink:href="#icon-anquanguizeyong"></use>
-                    </svg>
-                    <div class="name">安全规则用</div>
-                    <div class="fontclass">#icon-anquanguizeyong</div>
-                </li>
-            
-                <li>
-                    <svg class="icon" aria-hidden="true">
-                        <use xlink:href="#icon-tesefuwu"></use>
-                    </svg>
-                    <div class="name">特色服务</div>
-                    <div class="fontclass">#icon-tesefuwu</div>
-                </li>
-            
-        </ul>
-
-
-        <h2 id="symbol-">symbol引用</h2>
-        <hr>
-
-        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
-        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
-        <ul>
-          <li>支持多色图标了，不再受单色限制。</li>
-          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
-          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
-          <li>浏览器渲染svg的性能一般，还不如png。</li>
-        </ul>
-        <p>使用步骤如下：</p>
-        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
-        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
-        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
-        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
-.icon {
-   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
-   vertical-align: <span class="hljs-number">-0.15</span>em;
-   fill: currentColor;
-   overflow: hidden;
-}
-&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
-        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
-        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
-  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
-</span>&lt;<span class="hljs-regexp">/svg&gt;
-        </span></code></pre>
-    </div>
-</body>
-</html>

src/assets/iconfont/iconfont/demo_unicode.html

@@ -1,156 +0,0 @@
-
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8"/>
-    <title>IconFont</title>
-    <link rel="stylesheet" href="demo.css">
-
-    <style type="text/css">
-
-        @font-face {font-family: "iconfont";
-          src: url('iconfont.eot'); /* IE9*/
-          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
-          url('iconfont.woff') format('woff'), /* chrome, firefox */
-          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
-        }
-
-        .iconfont {
-          font-family:"iconfont" !important;
-          font-size:16px;
-          font-style:normal;
-          -webkit-font-smoothing: antialiased;
-          -webkit-text-stroke-width: 0.2px;
-          -moz-osx-font-smoothing: grayscale;
-        }
-
-    </style>
-</head>
-<body>
-    <div class="main markdown">
-        <h1>IconFont 图标</h1>
-        <ul class="icon_lists clear">
-            
-                <li>
-                <i class="icon iconfont">&#xe66f;</i>
-                    <div class="name">应用</div>
-                    <div class="code">&amp;#xe66f;</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont">&#xe623;</i>
-                    <div class="name">企业核查比对</div>
-                    <div class="code">&amp;#xe623;</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont">&#xe6cf;</i>
-                    <div class="name">中信银行</div>
-                    <div class="code">&amp;#xe6cf;</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont">&#xe62b;</i>
-                    <div class="name">对账单</div>
-                    <div class="code">&amp;#xe62b;</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont">&#xe69f;</i>
-                    <div class="name">电脑,桌面,技术,imac,苹果,pc,设备,线性,扁平,填充,单色,简约,圆润</div>
-                    <div class="code">&amp;#xe69f;</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont">&#xe73c;</i>
-                    <div class="name">中信银行</div>
-                    <div class="code">&amp;#xe73c;</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont">&#xe622;</i>
-                    <div class="name">项目对账单</div>
-                    <div class="code">&amp;#xe622;</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont">&#xe646;</i>
-                    <div class="name">作业报表</div>
-                    <div class="code">&amp;#xe646;</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont">&#xe634;</i>
-                    <div class="name">中信银行</div>
-                    <div class="code">&amp;#xe634;</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont">&#xe65c;</i>
-                    <div class="name">标签用</div>
-                    <div class="code">&amp;#xe65c;</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont">&#xe65d;</i>
-                    <div class="name">设置用</div>
-                    <div class="code">&amp;#xe65d;</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont">&#xe65e;</i>
-                    <div class="name">安全规则用</div>
-                    <div class="code">&amp;#xe65e;</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont">&#xe660;</i>
-                    <div class="name">特色服务</div>
-                    <div class="code">&amp;#xe660;</div>
-                </li>
-            
-        </ul>
-        <h2 id="unicode-">unicode引用</h2>
-        <hr>
-
-        <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
-        <ul>
-        <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
-        <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
-        <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
-        </ul>
-        <blockquote>
-        <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
-        </blockquote>
-        <p>unicode使用步骤如下：</p>
-        <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
-        <pre><code class="lang-js hljs javascript">@font-face {
-  font-family: <span class="hljs-string">'iconfont'</span>;
-  src: url(<span class="hljs-string">'iconfont.eot'</span>);
-  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
-  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
-  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
-  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
-}
-</code></pre>
-        <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
-        <pre><code class="lang-js hljs javascript">.iconfont{
-  font-family:<span class="hljs-string">"iconfont"</span> !important;
-  font-size:<span class="hljs-number">16</span>px;font-style:normal;
-  -webkit-font-smoothing: antialiased;
-  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
-  -moz-osx-font-smoothing: grayscale;
-}
-</code></pre>
-        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
-        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>
-
-        <blockquote>
-        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
-        </blockquote>
-    </div>
-
-
-</body>
-</html>