cxc/monitor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

arrow control

Browse Source
This commit is contained in:
ailanyin
2023-03-27 11:10:09 +08:00
parent 3f75b5b378
commit afb4a42b34
32 changed files with 1519 additions and 810 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/assets/fonts/demo.css
View File

@ -1,11 +1,15 @@
/* 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');
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 {
@ -48,7 +52,6 @@
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
@ -215,35 +218,35 @@
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
.markdown > p,
.markdown > blockquote,
.markdown > .highlight,
.markdown > ol,
.markdown > ul {
width: 80%;
}
.markdown ul>li {
.markdown ul > li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
.markdown > ul li,
.markdown blockquote ul > li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
.markdown > ul li p,
.markdown > ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
.markdown ol > li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
.markdown > ol li,
.markdown blockquote ol > li {
margin-left: 20px;
padding-left: 4px;
}
@ -260,7 +263,7 @@
font-weight: 600;
}
.markdown>table {
.markdown > table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
@ -269,21 +272,21 @@
margin-bottom: 24px;
}
.markdown>table th {
.markdown > table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
.markdown > table th,
.markdown > table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
.markdown > table th {
background: #f7f7f7;
}
.markdown blockquote {
@ -318,12 +321,11 @@
display: inline-block;
}
.markdown>br,
.markdown>p>br {
.markdown > br,
.markdown > p > br {
clear: both;
}
.hljs {
display: block;
background: white;
@ -404,7 +406,7 @@ pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
@ -439,7 +441,6 @@ code[class*="language-"] ::selection {
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
@ -449,19 +450,19 @@ code[class*="language-"] ::selection {
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
margin: 0.5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
:not(pre) > code[class*="language-"] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
@ -477,7 +478,7 @@ pre[class*="language-"] {
}
.namespace {
opacity: .7;
opacity: 0.7;
}
.token.property,
@ -505,7 +506,7 @@ pre[class*="language-"] {
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
background: hsla(0, 0%, 100%, 0.5);
}
.token.atrule,
@ -516,7 +517,7 @@ pre[class*="language-"] {
.token.function,
.token.class-name {
color: #DD4A68;
color: #dd4a68;
}
.token.regex,

585
src/assets/fonts/demo_index.html
View File

@ -1,108 +1,170 @@
<!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;
}
<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 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=3725111" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
.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=3725111"
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">&#xe83d;</span>
<div class="name">left</div>
<div class="code-name">&amp;#xe83d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe839;</span>
<div class="name">down</div>
<div class="code-name">&amp;#xe839;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe840;</span>
<div class="name">right</div>
<div class="code-name">&amp;#xe840;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe845;</span>
<div class="name">up</div>
<div class="code-name">&amp;#xe845;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe659;</span>
<div class="name">prev</div>
<div class="code-name">&amp;#xe659;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe609;</span>
<div class="name">next</div>
<div class="code-name">&amp;#xe609;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeb98;</span>
<div class="name">取消全屏_o</div>
<div class="code-name">&amp;#xeb98;</div>
</li>
<div class="name">取消全屏_o</div>
<div class="code-name">&amp;#xeb98;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeb5e;</span>
<div class="name">播放_o</div>
<div class="code-name">&amp;#xeb5e;</div>
</li>
<div class="name">播放_o</div>
<div class="code-name">&amp;#xeb5e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeb6c;</span>
<div class="name">暂停_o</div>
<div class="code-name">&amp;#xeb6c;</div>
</li>
<div class="name">暂停_o</div>
<div class="code-name">&amp;#xeb6c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeb99;</span>
<div class="name">全屏_o</div>
<div class="code-name">&amp;#xeb99;</div>
</li>
<div class="name">全屏_o</div>
<div class="code-name">&amp;#xeb99;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<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"
<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=1666600319624') format('woff2'),
url('iconfont.woff?t=1666600319624') format('woff'),
url('iconfont.ttf?t=1666600319624') format('truetype');
src: url('iconfont.woff2?t=1679885453951') format('woff2'),
url('iconfont.woff?t=1679885453951') format('woff'),
url('iconfont.ttf?t=1679885453951') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
@ -111,133 +173,225 @@
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<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>
<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-quxiaoquanping_o"></span>
<div class="name">
取消全屏_o
</div>
<div class="code-name">.icon-quxiaoquanping_o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bofang_o"></span>
<div class="name">
播放_o
</div>
<div class="code-name">.icon-bofang_o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zanting_o"></span>
<div class="name">
暂停_o
</div>
<div class="code-name">.icon-zanting_o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quanping_o"></span>
<div class="name">
全屏_o
</div>
<div class="code-name">.icon-quanping_o
</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">&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">
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quxiaoquanping_o"></use>
</svg>
<div class="name">取消全屏_o</div>
<div class="code-name">#icon-quxiaoquanping_o</div>
<span class="icon iconfont icon-left"></span>
<div class="name">left</div>
<div class="code-name">.icon-left</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bofang_o"></use>
</svg>
<div class="name">播放_o</div>
<div class="code-name">#icon-bofang_o</div>
<span class="icon iconfont icon-down"></span>
<div class="name">down</div>
<div class="code-name">.icon-down</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zanting_o"></use>
</svg>
<div class="name">暂停_o</div>
<div class="code-name">#icon-zanting_o</div>
<span class="icon iconfont icon-right"></span>
<div class="name">right</div>
<div class="code-name">.icon-right</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quanping_o"></use>
</svg>
<div class="name">全屏_o</div>
<div class="code-name">#icon-quanping_o</div>
<span class="icon iconfont icon-up"></span>
<div class="name">up</div>
<div class="code-name">.icon-up</div>
</li>
<li class="dib">
<span class="icon iconfont icon-prev"></span>
<div class="name">prev</div>
<div class="code-name">.icon-prev</div>
</li>
<li class="dib">
<span class="icon iconfont icon-next"></span>
<div class="name">next</div>
<div class="code-name">.icon-next</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quxiaoquanping_o"></span>
<div class="name">取消全屏_o</div>
<div class="code-name">.icon-quxiaoquanping_o</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bofang_o"></span>
<div class="name">播放_o</div>
<div class="code-name">.icon-bofang_o</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zanting_o"></span>
<div class="name">暂停_o</div>
<div class="code-name">.icon-zanting_o</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quanping_o"></span>
<div class="name">全屏_o</div>
<div class="code-name">.icon-quanping_o</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<h2 id="font-class-">font-class 引用</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;
<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">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
<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-left"></use>
</svg>
<div class="name">left</div>
<div class="code-name">#icon-left</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-down"></use>
</svg>
<div class="name">down</div>
<div class="code-name">#icon-down</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-right"></use>
</svg>
<div class="name">right</div>
<div class="code-name">#icon-right</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-up"></use>
</svg>
<div class="name">up</div>
<div class="code-name">#icon-up</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-prev"></use>
</svg>
<div class="name">prev</div>
<div class="code-name">#icon-prev</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-next"></use>
</svg>
<div class="name">next</div>
<div class="code-name">#icon-next</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quxiaoquanping_o"></use>
</svg>
<div class="name">取消全屏_o</div>
<div class="code-name">#icon-quxiaoquanping_o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bofang_o"></use>
</svg>
<div class="name">播放_o</div>
<div class="code-name">#icon-bofang_o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zanting_o"></use>
</svg>
<div class="name">暂停_o</div>
<div class="code-name">#icon-zanting_o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quanping_o"></use>
</svg>
<div class="name">全屏_o</div>
<div class="code-name">#icon-quanping_o</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;
@ -247,34 +401,33 @@
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
<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>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
<script>
$(document).ready(function () {
$(".tab-container .content:first").show();
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
$("#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')
if ($(this).hasClass("active")) {
return;
} else {
$("#tabs li").removeClass("active");
$(this).addClass("active");
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
tabContent.hide().eq(index).fadeIn();
}
});
});
</script>
</body>
</html>

31
src/assets/fonts/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 3725111 */
src: url('iconfont.woff2?t=1666600319624') format('woff2'),
url('iconfont.woff?t=1666600319624') format('woff'),
url('iconfont.ttf?t=1666600319624') format('truetype');
src: url("iconfont.woff2?t=1679885453951") format("woff2"),
url("iconfont.woff?t=1679885453951") format("woff"),
url("iconfont.ttf?t=1679885453951") format("truetype");
}
.iconfont {
@ -13,6 +13,30 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-left:before {
content: "\e83d";
}
.icon-down:before {
content: "\e839";
}
.icon-right:before {
content: "\e840";
}
.icon-up:before {
content: "\e845";
}
.icon-prev:before {
content: "\e659";
}
.icon-next:before {
content: "\e609";
}
.icon-quxiaoquanping_o:before {
content: "\eb98";
}
@ -28,4 +52,3 @@
.icon-quanping_o:before {
content: "\eb99";
}

70
src/assets/fonts/iconfont.js
View File

@ -1 +1,69 @@
window._iconfont_svg_string_3725111='<svg><symbol id="icon-quxiaoquanping_o" viewBox="0 0 1024 1024"><path d="M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z" fill="#444444" ></path></symbol><symbol id="icon-bofang_o" viewBox="0 0 1024 1024"><path d="M533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333z m149.333334-320L469.333333 682.666667V384l213.333334 149.333333z m-68.266667 0L512 460.8v145.066667l102.4-72.533334z" fill="#444444" ></path></symbol><symbol id="icon-zanting_o" viewBox="0 0 1024 1024"><path d="M533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333zM469.333333 426.666667v213.333333h-42.666666v-213.333333h42.666666z m170.666667 0v213.333333h-42.666667v-213.333333h42.666667z" fill="#444444" ></path></symbol><symbol id="icon-quanping_o" viewBox="0 0 1024 1024"><path d="M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z" fill="#444444" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,i,l,d,a,c=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__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)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_3725111,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?c(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(l=o,d=n.document,a=!1,v(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,s())})}function s(){a||(a=!0,l())}function v(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(v,50)}s()}}(window);
(window._iconfont_svg_string_3725111 =
'<svg><symbol id="icon-left" viewBox="0 0 1024 1024"><path d="M659.748571 245.272381l-51.687619-51.687619-318.439619 318.585905 318.415238 318.268952 51.712-51.736381-266.703238-266.556952z" ></path></symbol><symbol id="icon-down" viewBox="0 0 1024 1024"><path d="M512.146286 619.52L245.296762 352.792381 193.584762 404.48l318.585905 318.415238 318.268952-318.415238-51.736381-51.687619z" ></path></symbol><symbol id="icon-right" viewBox="0 0 1024 1024"><path d="M605.086476 512.146286L338.358857 245.272381l51.760762-51.687619 318.415238 318.585905L390.095238 830.415238l-51.687619-51.736381z" ></path></symbol><symbol id="icon-up" viewBox="0 0 1024 1024"><path d="M512.146286 454.753524l-266.849524 266.727619L193.584762 669.744762l318.585905-318.415238 318.268952 318.415238-51.736381 51.687619z" ></path></symbol><symbol id="icon-prev" viewBox="0 0 1024 1024"><path d="M784.652701 955.6957 346.601985 517.644983c-2.822492-2.822492-2.822492-7.902977 0-11.289967l439.179713-439.179713c6.77398-6.77398 10.725469-16.370452 10.725469-25.966924L796.507166 36.692393c0-20.32194-16.370452-36.692393-36.692393-36.692393l-4.515987 0c-9.596472 0-19.192944 3.951488-25.966924 10.725469L250.072767 489.420066c-12.418964 12.418964-12.418964 32.740904 0 45.159868l477.565601 477.565601c7.338479 7.338479 17.499449 11.854465 28.224917 11.854465l0 0c22.015436 0 40.079383-18.063947 40.079383-40.079383l0 0C796.507166 973.759647 791.99118 963.598677 784.652701 955.6957z" ></path></symbol><symbol id="icon-next" viewBox="0 0 1024 1024"><path d="M778.541176 490.706824L352.557176 64.752941a30.117647 30.117647 0 0 0-42.586352 42.586353L714.631529 512 310.061176 916.570353a30.087529 30.087529 0 0 0-0.060235 42.646588 29.967059 29.967059 0 0 0 42.646588-0.030117l425.833412-425.86353a30.087529 30.087529 0 0 0 0.030118-42.61647z" fill="#000000" ></path></symbol><symbol id="icon-quxiaoquanping_o" viewBox="0 0 1024 1024"><path d="M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z" fill="#444444" ></path></symbol><symbol id="icon-bofang_o" viewBox="0 0 1024 1024"><path d="M533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333z m149.333334-320L469.333333 682.666667V384l213.333334 149.333333z m-68.266667 0L512 460.8v145.066667l102.4-72.533334z" fill="#444444" ></path></symbol><symbol id="icon-zanting_o" viewBox="0 0 1024 1024"><path d="M533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333zM469.333333 426.666667v213.333333h-42.666666v-213.333333h42.666666z m170.666667 0v213.333333h-42.666667v-213.333333h42.666667z" fill="#444444" ></path></symbol><symbol id="icon-quanping_o" viewBox="0 0 1024 1024"><path d="M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z" fill="#444444" ></path></symbol></svg>'),
(function (o) {
var t = (t = document.getElementsByTagName("script"))[t.length - 1],
e = t.getAttribute("data-injectcss"),
t = t.getAttribute("data-disable-injectsvg");
if (!t) {
var i,
n,
l,
a,
d,
c = function (t, e) {
e.parentNode.insertBefore(t, e);
};
if (e && !o.__iconfont__svg__cssinject__) {
o.__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);
}
}
(i = function () {
var t,
e = document.createElement("div");
(e.innerHTML = o._iconfont_svg_string_3725111),
(e = e.getElementsByTagName("svg")[0]) &&
(e.setAttribute("aria-hidden", "true"),
(e.style.position = "absolute"),
(e.style.width = 0),
(e.style.height = 0),
(e.style.overflow = "hidden"),
(e = e),
(t = document.body).firstChild
? c(e, t.firstChild)
: t.appendChild(e));
}),
document.addEventListener
? ~["complete", "loaded", "interactive"].indexOf(document.readyState)
? setTimeout(i, 0)
: ((n = function () {
document.removeEventListener("DOMContentLoaded", n, !1), i();
}),
document.addEventListener("DOMContentLoaded", n, !1))
: document.attachEvent &&
((l = i),
(a = o.document),
(d = !1),
h(),
(a.onreadystatechange = function () {
"complete" == a.readyState &&
((a.onreadystatechange = null), s());
}));
}
function s() {
d || ((d = !0), l());
}
function h() {
try {
a.documentElement.doScroll("left");
} catch (t) {
return void setTimeout(h, 50);
}
s();
}
})(window);

42
src/assets/fonts/iconfont.json
View File

@ -5,6 +5,48 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "34453005",
"name": "left",
"font_class": "left",
"unicode": "e83d",
"unicode_decimal": 59453
},
{
"icon_id": "34452987",
"name": "down",
"font_class": "down",
"unicode": "e839",
"unicode_decimal": 59449
},
{
"icon_id": "34453038",
"name": "right",
"font_class": "right",
"unicode": "e840",
"unicode_decimal": 59456
},
{
"icon_id": "34453072",
"name": "up",
"font_class": "up",
"unicode": "e845",
"unicode_decimal": 59461
},
{
"icon_id": "879141",
"name": "prev",
"font_class": "prev",
"unicode": "e659",
"unicode_decimal": 58969
},
{
"icon_id": "8078256",
"name": "next",
"font_class": "next",
"unicode": "e609",
"unicode_decimal": 58889
},
{
"icon_id": "5387942",
"name": "取消全屏_o",

BIN
src/assets/fonts/iconfont.ttf
View File

Binary file not shown.

BIN
src/assets/fonts/iconfont.woff
View File

Binary file not shown.

BIN
src/assets/fonts/iconfont.woff2
View File

Binary file not shown.