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

temp

Browse Source
This commit is contained in:
ailanyin
2023-05-05 15:55:40 +08:00
parent 8c9afda249
commit 50f75ff394
18 changed files with 1268 additions and 856 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,11 @@
/* 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 {
@ -52,6 +48,7 @@
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
@ -218,35 +215,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;
}
@ -263,7 +260,7 @@
font-weight: 600;
}
.markdown > table {
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
@ -272,21 +269,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 {
@ -321,11 +318,12 @@
display: inline-block;
}
.markdown > br,
.markdown > p > br {
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
@ -406,7 +404,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;
@ -441,6 +439,7 @@ code[class*="language-"] ::selection {
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
@ -450,19 +449,19 @@ code[class*="language-"] ::selection {
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: 0.5em 0;
margin: .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: 0.1em;
border-radius: 0.3em;
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
@ -478,7 +477,7 @@ pre[class*="language-"] {
}
.namespace {
opacity: 0.7;
opacity: .7;
}
.token.property,
@ -506,7 +505,7 @@ pre[class*="language-"] {
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, 0.5);
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
@ -517,7 +516,7 @@ pre[class*="language-"] {
.token.function,
.token.class-name {
color: #dd4a68;
color: #DD4A68;
}
.token.regex,

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

@ -1,170 +1,150 @@
<!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">&#xe613;</span>
<div class="name">close</div>
<div class="code-name">&amp;#xe613;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe83d;</span>
<div class="name">left</div>
<div class="code-name">&amp;#xe83d;</div>
</li>
<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>
<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>
<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>
<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>
<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>
<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=1679885453951') format('woff2'),
url('iconfont.woff?t=1679885453951') format('woff'),
url('iconfont.ttf?t=1679885453951') format('truetype');
src: url('iconfont.woff2?t=1680768207227') format('woff2'),
url('iconfont.woff?t=1680768207227') format('woff'),
url('iconfont.ttf?t=1680768207227') 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;
@ -173,225 +153,252 @@
-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">
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-close"></span>
<div class="name">
close
</div>
<div class="code-name">.icon-close
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-left"></span>
<div class="name">
left
</div>
<div class="code-name">.icon-left
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-down"></span>
<div class="name">
down
</div>
<div class="code-name">.icon-down
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-right"></span>
<div class="name">
right
</div>
<div class="code-name">.icon-right
</div>
</li>
<li class="dib">
<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="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">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-left"></span>
<div class="name">left</div>
<div class="code-name">.icon-left</div>
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
<div class="name">close</div>
<div class="code-name">#icon-close</div>
</li>
<li class="dib">
<span class="icon iconfont icon-down"></span>
<div class="name">down</div>
<div class="code-name">.icon-down</div>
<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">
<span class="icon iconfont icon-right"></span>
<div class="name">right</div>
<div class="code-name">.icon-right</div>
<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">
<span class="icon iconfont icon-up"></span>
<div class="name">up</div>
<div class="code-name">.icon-up</div>
<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">
<span class="icon iconfont icon-prev"></span>
<div class="name">prev</div>
<div class="code-name">.icon-prev</div>
<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">
<span class="icon iconfont icon-next"></span>
<div class="name">next</div>
<div class="code-name">.icon-next</div>
<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">
<span class="icon iconfont icon-quxiaoquanping_o"></span>
<div class="name">取消全屏_o</div>
<div class="code-name">.icon-quxiaoquanping_o</div>
<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">
<span class="icon iconfont icon-bofang_o"></span>
<div class="name">播放_o</div>
<div class="code-name">.icon-bofang_o</div>
<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">
<span class="icon iconfont icon-zanting_o"></span>
<div class="name">暂停_o</div>
<div class="code-name">.icon-zanting_o</div>
<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">
<span class="icon iconfont icon-quanping_o"></span>
<div class="name">全屏_o</div>
<div class="code-name">.icon-quanping_o</div>
<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="font-class-">font-class 引用</h2>
<hr />
<h2 id="symbol-">Symbol 引用</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">
<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>
<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>
<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;
<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;
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
@ -401,33 +408,34 @@
}
&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>
<script>
$(document).ready(function () {
$(".tab-container .content:first").show();
</div>
<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>

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

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 3725111 */
src: url("iconfont.woff2?t=1679885453951") format("woff2"),
url("iconfont.woff?t=1679885453951") format("woff"),
url("iconfont.ttf?t=1679885453951") format("truetype");
src: url('iconfont.woff2?t=1680768207227') format('woff2'),
url('iconfont.woff?t=1680768207227') format('woff'),
url('iconfont.ttf?t=1680768207227') format('truetype');
}
.iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-close:before {
content: "\e613";
}
.icon-left:before {
content: "\e83d";
}
@ -52,3 +56,4 @@
.icon-quanping_o:before {
content: "\eb99";
}

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

File diff suppressed because one or more lines are too long

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

@ -5,6 +5,13 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "11230059",
"name": "close",
"font_class": "close",
"unicode": "e613",
"unicode_decimal": 58899
},
{
"icon_id": "34453005",
"name": "left",

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.

50
src/assets/test.js Normal file
View File

@ -0,0 +1,50 @@
let df = [
0,
1800,
3600,
5400,
7200,
9000,
10800,
12600,
14400,
16200,
18000,
19800,
21600,
23400,
25200,
27000,
28800,
30600,
32400,
34200,
36000,
37800,
39600,
41400,
43200,
45000,
46800,
48600,
50400,
52200,
54000,
55800,
57600,
59400,
61200,
63000,
64800,
66600,
68400,
70200,
72000,
73800,
75600,
77400,
79200,
81000,
82800,
84600
]