1753 lines
62 KiB
HTML
1753 lines
62 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<title>iconfont Demo</title>
|
||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
|
||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
|
||
<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>
|
||
<style>
|
||
.main .logo {
|
||
margin-top: 0;
|
||
height: auto;
|
||
}
|
||
|
||
.main .logo a {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.main .logo .sub-title {
|
||
margin-left: 0.5em;
|
||
font-size: 22px;
|
||
color: #fff;
|
||
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="main">
|
||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
||
|
||
</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=4573174" 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"></span>
|
||
<div class="name">结算</div>
|
||
<div class="code-name">&#xe6bc;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">结算报表</div>
|
||
<div class="code-name">&#xe6c0;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">结算单</div>
|
||
<div class="code-name">&#xe6c5;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">结算管理</div>
|
||
<div class="code-name">&#xe6c7;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">返利规则</div>
|
||
<div class="code-name">&#xe6c9;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">月结</div>
|
||
<div class="code-name">&#xe6ca;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">结算单管理</div>
|
||
<div class="code-name">&#xe6cb;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">月结管理</div>
|
||
<div class="code-name">&#xe6cc;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">智慧销售</div>
|
||
<div class="code-name">&#xe6d0;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">智慧销售管理</div>
|
||
<div class="code-name">&#xe6d2;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">后端商品毛利</div>
|
||
<div class="code-name">&#xe6dc;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">成本查询</div>
|
||
<div class="code-name">&#xe6e1;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">流量</div>
|
||
<div class="code-name">&#xe6bd;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">供应商</div>
|
||
<div class="code-name">&#xe6be;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">分销商</div>
|
||
<div class="code-name">&#xe6bf;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">人群</div>
|
||
<div class="code-name">&#xe6c1;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">人群管理</div>
|
||
<div class="code-name">&#xe6c4;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">分销商结算</div>
|
||
<div class="code-name">&#xe6dd;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">商家数据</div>
|
||
<div class="code-name">&#xe6de;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">搜索</div>
|
||
<div class="code-name">&#xe6a6;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">协同</div>
|
||
<div class="code-name">&#xe6a7;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">招商</div>
|
||
<div class="code-name">&#xe6a8;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">商品</div>
|
||
<div class="code-name">&#xe6a9;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">单据</div>
|
||
<div class="code-name">&#xe6aa;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">工具箱</div>
|
||
<div class="code-name">&#xe6ab;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">券</div>
|
||
<div class="code-name">&#xe6ac;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">平台</div>
|
||
<div class="code-name">&#xe6ad;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">经销</div>
|
||
<div class="code-name">&#xe6ae;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">资源</div>
|
||
<div class="code-name">&#xe6af;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">货</div>
|
||
<div class="code-name">&#xe6bb;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">用户</div>
|
||
<div class="code-name">&#xe6a3;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">安全</div>
|
||
<div class="code-name">&#xe6a2;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">数据</div>
|
||
<div class="code-name">&#xe6a4;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">疑问</div>
|
||
<div class="code-name">&#xe6a1;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">调拨</div>
|
||
<div class="code-name">&#xe6a5;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">用户管理</div>
|
||
<div class="code-name">&#xe6b0;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">商家管理</div>
|
||
<div class="code-name">&#xe6b1;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">分销商管理</div>
|
||
<div class="code-name">&#xe6b2;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">商家</div>
|
||
<div class="code-name">&#xe6b3;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">供应商管理</div>
|
||
<div class="code-name">&#xe6b4;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">商品管理</div>
|
||
<div class="code-name">&#xe6b5;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">商品复制</div>
|
||
<div class="code-name">&#xe6b6;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">采购单</div>
|
||
<div class="code-name">&#xe6b7;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">采购价管理</div>
|
||
<div class="code-name">&#xe6b8;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">定价</div>
|
||
<div class="code-name">&#xe6b9;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">结算报表</div>
|
||
<div class="code-name">&#xe6ba;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">入库</div>
|
||
<div class="code-name">&#xe6c2;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">库存管理</div>
|
||
<div class="code-name">&#xe6c3;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">出入库管理</div>
|
||
<div class="code-name">&#xe6c6;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">退仓管理</div>
|
||
<div class="code-name">&#xe6c8;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">合同</div>
|
||
<div class="code-name">&#xe6d1;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">商品计划</div>
|
||
<div class="code-name">&#xe6d8;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">销量计划</div>
|
||
<div class="code-name">&#xe6da;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">销量实时看板</div>
|
||
<div class="code-name">&#xe6e0;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">结算效率分析</div>
|
||
<div class="code-name">&#xe6df;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">营销流量配置</div>
|
||
<div class="code-name">&#xe6e2;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">运营工具</div>
|
||
<div class="code-name">&#xe6e3;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">目标管理</div>
|
||
<div class="code-name">&#xe6e4;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">目标制定</div>
|
||
<div class="code-name">&#xe6e5;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">活动协同</div>
|
||
<div class="code-name">&#xe6e6;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">目标监控</div>
|
||
<div class="code-name">&#xe6e7;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">增值服务</div>
|
||
<div class="code-name">&#xe6e8;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">全链路可售</div>
|
||
<div class="code-name">&#xe6e9;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">超级服务</div>
|
||
<div class="code-name">&#xe6ea;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">上门取货</div>
|
||
<div class="code-name">&#xe6eb;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">定位</div>
|
||
<div class="code-name">&#xe6ec;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">预约</div>
|
||
<div class="code-name">&#xe6ed;</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont"></span>
|
||
<div class="name">物流</div>
|
||
<div class="code-name">&#xe6ee;</div>
|
||
</li>
|
||
|
||
</ul>
|
||
<div class="article markdown">
|
||
<h2 id="unicode-">Unicode 引用</h2>
|
||
<hr>
|
||
|
||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||
<ul>
|
||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG 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.woff2?t=1718867101197') format('woff2'),
|
||
url('iconfont.woff?t=1718867101197') format('woff'),
|
||
url('iconfont.ttf?t=1718867101197') format('truetype');
|
||
}
|
||
</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"
|
||
><span class="iconfont">&#x33;</span>
|
||
</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-RectangleCopy48"></span>
|
||
<div class="name">
|
||
结算
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy48
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy52"></span>
|
||
<div class="name">
|
||
结算报表
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy52
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy55"></span>
|
||
<div class="name">
|
||
结算单
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy55
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy56"></span>
|
||
<div class="name">
|
||
结算管理
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy56
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy57"></span>
|
||
<div class="name">
|
||
返利规则
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy57
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy58"></span>
|
||
<div class="name">
|
||
月结
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy58
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy61"></span>
|
||
<div class="name">
|
||
结算单管理
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy61
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy62"></span>
|
||
<div class="name">
|
||
月结管理
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy62
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy63"></span>
|
||
<div class="name">
|
||
智慧销售
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy63
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy64"></span>
|
||
<div class="name">
|
||
智慧销售管理
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy64
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy65"></span>
|
||
<div class="name">
|
||
后端商品毛利
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy65
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy66"></span>
|
||
<div class="name">
|
||
成本查询
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy66
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy49"></span>
|
||
<div class="name">
|
||
流量
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy49
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy50"></span>
|
||
<div class="name">
|
||
供应商
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy50
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy51"></span>
|
||
<div class="name">
|
||
分销商
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy51
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy53"></span>
|
||
<div class="name">
|
||
人群
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy53
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy54"></span>
|
||
<div class="name">
|
||
人群管理
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy54
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy59"></span>
|
||
<div class="name">
|
||
分销商结算
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy59
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy60"></span>
|
||
<div class="name">
|
||
商家数据
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy60
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy37"></span>
|
||
<div class="name">
|
||
搜索
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy37
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy38"></span>
|
||
<div class="name">
|
||
协同
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy38
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy39"></span>
|
||
<div class="name">
|
||
招商
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy39
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy40"></span>
|
||
<div class="name">
|
||
商品
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy40
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy41"></span>
|
||
<div class="name">
|
||
单据
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy41
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy42"></span>
|
||
<div class="name">
|
||
工具箱
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy42
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy43"></span>
|
||
<div class="name">
|
||
券
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy43
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy44"></span>
|
||
<div class="name">
|
||
平台
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy44
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy45"></span>
|
||
<div class="name">
|
||
经销
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy45
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy46"></span>
|
||
<div class="name">
|
||
资源
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy46
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy47"></span>
|
||
<div class="name">
|
||
货
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy47
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy"></span>
|
||
<div class="name">
|
||
用户
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy1"></span>
|
||
<div class="name">
|
||
安全
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy1
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy2"></span>
|
||
<div class="name">
|
||
数据
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy2
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy3"></span>
|
||
<div class="name">
|
||
疑问
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy3
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy4"></span>
|
||
<div class="name">
|
||
调拨
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy4
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy5"></span>
|
||
<div class="name">
|
||
用户管理
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy5
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy6"></span>
|
||
<div class="name">
|
||
商家管理
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy6
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy7"></span>
|
||
<div class="name">
|
||
分销商管理
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy7
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy8"></span>
|
||
<div class="name">
|
||
商家
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy8
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy9"></span>
|
||
<div class="name">
|
||
供应商管理
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy9
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy10"></span>
|
||
<div class="name">
|
||
商品管理
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy10
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy11"></span>
|
||
<div class="name">
|
||
商品复制
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy11
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy12"></span>
|
||
<div class="name">
|
||
采购单
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy12
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy13"></span>
|
||
<div class="name">
|
||
采购价管理
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy13
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy14"></span>
|
||
<div class="name">
|
||
定价
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy14
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy15"></span>
|
||
<div class="name">
|
||
结算报表
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy15
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy16"></span>
|
||
<div class="name">
|
||
入库
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy16
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy17"></span>
|
||
<div class="name">
|
||
库存管理
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy17
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy18"></span>
|
||
<div class="name">
|
||
出入库管理
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy18
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy19"></span>
|
||
<div class="name">
|
||
退仓管理
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy19
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy20"></span>
|
||
<div class="name">
|
||
合同
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy20
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy21"></span>
|
||
<div class="name">
|
||
商品计划
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy21
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy22"></span>
|
||
<div class="name">
|
||
销量计划
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy22
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy23"></span>
|
||
<div class="name">
|
||
销量实时看板
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy23
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy24"></span>
|
||
<div class="name">
|
||
结算效率分析
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy24
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy25"></span>
|
||
<div class="name">
|
||
营销流量配置
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy25
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy26"></span>
|
||
<div class="name">
|
||
运营工具
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy26
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy27"></span>
|
||
<div class="name">
|
||
目标管理
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy27
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy28"></span>
|
||
<div class="name">
|
||
目标制定
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy28
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy29"></span>
|
||
<div class="name">
|
||
活动协同
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy29
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy30"></span>
|
||
<div class="name">
|
||
目标监控
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy30
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy31"></span>
|
||
<div class="name">
|
||
增值服务
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy31
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy32"></span>
|
||
<div class="name">
|
||
全链路可售
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy32
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy33"></span>
|
||
<div class="name">
|
||
超级服务
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy33
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy34"></span>
|
||
<div class="name">
|
||
上门取货
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy34
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-dingwei"></span>
|
||
<div class="name">
|
||
定位
|
||
</div>
|
||
<div class="code-name">.icon-dingwei
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy35"></span>
|
||
<div class="name">
|
||
预约
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy35
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<span class="icon iconfont icon-RectangleCopy36"></span>
|
||
<div class="name">
|
||
物流
|
||
</div>
|
||
<div class="code-name">.icon-RectangleCopy36
|
||
</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>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||
</ul>
|
||
<p>使用步骤如下：</p>
|
||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||
</code></pre>
|
||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||
</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-RectangleCopy48"></use>
|
||
</svg>
|
||
<div class="name">结算</div>
|
||
<div class="code-name">#icon-RectangleCopy48</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy52"></use>
|
||
</svg>
|
||
<div class="name">结算报表</div>
|
||
<div class="code-name">#icon-RectangleCopy52</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy55"></use>
|
||
</svg>
|
||
<div class="name">结算单</div>
|
||
<div class="code-name">#icon-RectangleCopy55</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy56"></use>
|
||
</svg>
|
||
<div class="name">结算管理</div>
|
||
<div class="code-name">#icon-RectangleCopy56</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy57"></use>
|
||
</svg>
|
||
<div class="name">返利规则</div>
|
||
<div class="code-name">#icon-RectangleCopy57</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy58"></use>
|
||
</svg>
|
||
<div class="name">月结</div>
|
||
<div class="code-name">#icon-RectangleCopy58</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy61"></use>
|
||
</svg>
|
||
<div class="name">结算单管理</div>
|
||
<div class="code-name">#icon-RectangleCopy61</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy62"></use>
|
||
</svg>
|
||
<div class="name">月结管理</div>
|
||
<div class="code-name">#icon-RectangleCopy62</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy63"></use>
|
||
</svg>
|
||
<div class="name">智慧销售</div>
|
||
<div class="code-name">#icon-RectangleCopy63</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy64"></use>
|
||
</svg>
|
||
<div class="name">智慧销售管理</div>
|
||
<div class="code-name">#icon-RectangleCopy64</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy65"></use>
|
||
</svg>
|
||
<div class="name">后端商品毛利</div>
|
||
<div class="code-name">#icon-RectangleCopy65</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy66"></use>
|
||
</svg>
|
||
<div class="name">成本查询</div>
|
||
<div class="code-name">#icon-RectangleCopy66</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy49"></use>
|
||
</svg>
|
||
<div class="name">流量</div>
|
||
<div class="code-name">#icon-RectangleCopy49</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy50"></use>
|
||
</svg>
|
||
<div class="name">供应商</div>
|
||
<div class="code-name">#icon-RectangleCopy50</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy51"></use>
|
||
</svg>
|
||
<div class="name">分销商</div>
|
||
<div class="code-name">#icon-RectangleCopy51</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy53"></use>
|
||
</svg>
|
||
<div class="name">人群</div>
|
||
<div class="code-name">#icon-RectangleCopy53</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy54"></use>
|
||
</svg>
|
||
<div class="name">人群管理</div>
|
||
<div class="code-name">#icon-RectangleCopy54</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy59"></use>
|
||
</svg>
|
||
<div class="name">分销商结算</div>
|
||
<div class="code-name">#icon-RectangleCopy59</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy60"></use>
|
||
</svg>
|
||
<div class="name">商家数据</div>
|
||
<div class="code-name">#icon-RectangleCopy60</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy37"></use>
|
||
</svg>
|
||
<div class="name">搜索</div>
|
||
<div class="code-name">#icon-RectangleCopy37</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy38"></use>
|
||
</svg>
|
||
<div class="name">协同</div>
|
||
<div class="code-name">#icon-RectangleCopy38</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy39"></use>
|
||
</svg>
|
||
<div class="name">招商</div>
|
||
<div class="code-name">#icon-RectangleCopy39</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy40"></use>
|
||
</svg>
|
||
<div class="name">商品</div>
|
||
<div class="code-name">#icon-RectangleCopy40</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy41"></use>
|
||
</svg>
|
||
<div class="name">单据</div>
|
||
<div class="code-name">#icon-RectangleCopy41</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy42"></use>
|
||
</svg>
|
||
<div class="name">工具箱</div>
|
||
<div class="code-name">#icon-RectangleCopy42</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy43"></use>
|
||
</svg>
|
||
<div class="name">券</div>
|
||
<div class="code-name">#icon-RectangleCopy43</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy44"></use>
|
||
</svg>
|
||
<div class="name">平台</div>
|
||
<div class="code-name">#icon-RectangleCopy44</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy45"></use>
|
||
</svg>
|
||
<div class="name">经销</div>
|
||
<div class="code-name">#icon-RectangleCopy45</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy46"></use>
|
||
</svg>
|
||
<div class="name">资源</div>
|
||
<div class="code-name">#icon-RectangleCopy46</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy47"></use>
|
||
</svg>
|
||
<div class="name">货</div>
|
||
<div class="code-name">#icon-RectangleCopy47</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy"></use>
|
||
</svg>
|
||
<div class="name">用户</div>
|
||
<div class="code-name">#icon-RectangleCopy</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy1"></use>
|
||
</svg>
|
||
<div class="name">安全</div>
|
||
<div class="code-name">#icon-RectangleCopy1</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy2"></use>
|
||
</svg>
|
||
<div class="name">数据</div>
|
||
<div class="code-name">#icon-RectangleCopy2</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy3"></use>
|
||
</svg>
|
||
<div class="name">疑问</div>
|
||
<div class="code-name">#icon-RectangleCopy3</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy4"></use>
|
||
</svg>
|
||
<div class="name">调拨</div>
|
||
<div class="code-name">#icon-RectangleCopy4</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy5"></use>
|
||
</svg>
|
||
<div class="name">用户管理</div>
|
||
<div class="code-name">#icon-RectangleCopy5</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy6"></use>
|
||
</svg>
|
||
<div class="name">商家管理</div>
|
||
<div class="code-name">#icon-RectangleCopy6</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy7"></use>
|
||
</svg>
|
||
<div class="name">分销商管理</div>
|
||
<div class="code-name">#icon-RectangleCopy7</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy8"></use>
|
||
</svg>
|
||
<div class="name">商家</div>
|
||
<div class="code-name">#icon-RectangleCopy8</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy9"></use>
|
||
</svg>
|
||
<div class="name">供应商管理</div>
|
||
<div class="code-name">#icon-RectangleCopy9</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy10"></use>
|
||
</svg>
|
||
<div class="name">商品管理</div>
|
||
<div class="code-name">#icon-RectangleCopy10</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy11"></use>
|
||
</svg>
|
||
<div class="name">商品复制</div>
|
||
<div class="code-name">#icon-RectangleCopy11</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy12"></use>
|
||
</svg>
|
||
<div class="name">采购单</div>
|
||
<div class="code-name">#icon-RectangleCopy12</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy13"></use>
|
||
</svg>
|
||
<div class="name">采购价管理</div>
|
||
<div class="code-name">#icon-RectangleCopy13</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy14"></use>
|
||
</svg>
|
||
<div class="name">定价</div>
|
||
<div class="code-name">#icon-RectangleCopy14</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy15"></use>
|
||
</svg>
|
||
<div class="name">结算报表</div>
|
||
<div class="code-name">#icon-RectangleCopy15</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy16"></use>
|
||
</svg>
|
||
<div class="name">入库</div>
|
||
<div class="code-name">#icon-RectangleCopy16</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy17"></use>
|
||
</svg>
|
||
<div class="name">库存管理</div>
|
||
<div class="code-name">#icon-RectangleCopy17</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy18"></use>
|
||
</svg>
|
||
<div class="name">出入库管理</div>
|
||
<div class="code-name">#icon-RectangleCopy18</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy19"></use>
|
||
</svg>
|
||
<div class="name">退仓管理</div>
|
||
<div class="code-name">#icon-RectangleCopy19</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy20"></use>
|
||
</svg>
|
||
<div class="name">合同</div>
|
||
<div class="code-name">#icon-RectangleCopy20</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy21"></use>
|
||
</svg>
|
||
<div class="name">商品计划</div>
|
||
<div class="code-name">#icon-RectangleCopy21</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy22"></use>
|
||
</svg>
|
||
<div class="name">销量计划</div>
|
||
<div class="code-name">#icon-RectangleCopy22</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy23"></use>
|
||
</svg>
|
||
<div class="name">销量实时看板</div>
|
||
<div class="code-name">#icon-RectangleCopy23</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy24"></use>
|
||
</svg>
|
||
<div class="name">结算效率分析</div>
|
||
<div class="code-name">#icon-RectangleCopy24</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy25"></use>
|
||
</svg>
|
||
<div class="name">营销流量配置</div>
|
||
<div class="code-name">#icon-RectangleCopy25</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy26"></use>
|
||
</svg>
|
||
<div class="name">运营工具</div>
|
||
<div class="code-name">#icon-RectangleCopy26</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy27"></use>
|
||
</svg>
|
||
<div class="name">目标管理</div>
|
||
<div class="code-name">#icon-RectangleCopy27</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy28"></use>
|
||
</svg>
|
||
<div class="name">目标制定</div>
|
||
<div class="code-name">#icon-RectangleCopy28</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy29"></use>
|
||
</svg>
|
||
<div class="name">活动协同</div>
|
||
<div class="code-name">#icon-RectangleCopy29</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy30"></use>
|
||
</svg>
|
||
<div class="name">目标监控</div>
|
||
<div class="code-name">#icon-RectangleCopy30</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy31"></use>
|
||
</svg>
|
||
<div class="name">增值服务</div>
|
||
<div class="code-name">#icon-RectangleCopy31</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy32"></use>
|
||
</svg>
|
||
<div class="name">全链路可售</div>
|
||
<div class="code-name">#icon-RectangleCopy32</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy33"></use>
|
||
</svg>
|
||
<div class="name">超级服务</div>
|
||
<div class="code-name">#icon-RectangleCopy33</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy34"></use>
|
||
</svg>
|
||
<div class="name">上门取货</div>
|
||
<div class="code-name">#icon-RectangleCopy34</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-dingwei"></use>
|
||
</svg>
|
||
<div class="name">定位</div>
|
||
<div class="code-name">#icon-dingwei</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy35"></use>
|
||
</svg>
|
||
<div class="name">预约</div>
|
||
<div class="code-name">#icon-RectangleCopy35</div>
|
||
</li>
|
||
|
||
<li class="dib">
|
||
<svg class="icon svg-icon" aria-hidden="true">
|
||
<use xlink:href="#icon-RectangleCopy36"></use>
|
||
</svg>
|
||
<div class="name">物流</div>
|
||
<div class="code-name">#icon-RectangleCopy36</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"><script src="./iconfont.js"></script>
|
||
</code></pre>
|
||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||
<pre><code class="language-html"><style>
|
||
.icon {
|
||
width: 1em;
|
||
height: 1em;
|
||
vertical-align: -0.15em;
|
||
fill: currentColor;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
</code></pre>
|
||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#icon-xxx"></use>
|
||
</svg>
|
||
</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>
|