mirror of
https://github.com/rubickCenter/rubick
synced 2025-12-23 02:33:48 +08:00
feat: 支持截屏,下载方式调整
This commit is contained in:
BIN
static/plugins/capture/assets/audio/capture.mp3
Normal file
BIN
static/plugins/capture/assets/audio/capture.mp3
Normal file
Binary file not shown.
370
static/plugins/capture/assets/iconfont/demo.css
Normal file
370
static/plugins/capture/assets/iconfont/demo.css
Normal file
@@ -0,0 +1,370 @@
|
||||
*{margin: 0;padding: 0;list-style: none;}
|
||||
/*
|
||||
KISSY CSS Reset
|
||||
理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。
|
||||
2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。
|
||||
3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。
|
||||
特色:1. 适应中文;2. 基于最新主流浏览器。
|
||||
维护:玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
|
||||
*/
|
||||
|
||||
/** 清除内外边距 **/
|
||||
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
|
||||
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
|
||||
pre, /* text formatting elements 文本格式元素 */
|
||||
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
|
||||
th, td /* table elements 表格元素 */ {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/** 设置默认字体 **/
|
||||
body,
|
||||
button, input, select, textarea /* for ie */ {
|
||||
font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
|
||||
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
|
||||
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
|
||||
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
|
||||
|
||||
/** 重置列表元素 **/
|
||||
ul, ol { list-style: none; }
|
||||
|
||||
/** 重置文本格式元素 **/
|
||||
a { text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
|
||||
/** 重置表单元素 **/
|
||||
legend { color: #000; } /* for ie6 */
|
||||
fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
|
||||
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
|
||||
/* 注:optgroup 无法扶正 */
|
||||
|
||||
/** 重置表格元素 **/
|
||||
table { border-collapse: collapse; border-spacing: 0; }
|
||||
|
||||
/* 清除浮动 */
|
||||
.ks-clear:after, .clear:after {
|
||||
content: '\20';
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
.ks-clear, .clear {
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
|
||||
|
||||
.helps{margin-top:40px;}
|
||||
.helps pre{
|
||||
padding:20px;
|
||||
margin:10px 0;
|
||||
border:solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_lists{
|
||||
width: 100% !important;
|
||||
|
||||
}
|
||||
|
||||
.icon_lists li{
|
||||
float:left;
|
||||
width: 100px;
|
||||
height:180px;
|
||||
text-align: center;
|
||||
list-style: none !important;
|
||||
}
|
||||
.icon_lists .icon{
|
||||
font-size: 42px;
|
||||
line-height: 100px;
|
||||
margin: 10px 0;
|
||||
color:#333;
|
||||
-webkit-transition: font-size 0.25s ease-out 0s;
|
||||
-moz-transition: font-size 0.25s ease-out 0s;
|
||||
transition: font-size 0.25s ease-out 0s;
|
||||
|
||||
}
|
||||
.icon_lists .icon:hover{
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.markdown {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: #404040;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: #404040;
|
||||
margin: 1.6em 0 0.6em 0;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #e9e9e9;
|
||||
margin: 16px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p,
|
||||
.markdown pre {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown > p,
|
||||
.markdown > blockquote,
|
||||
.markdown > .highlight,
|
||||
.markdown > ol,
|
||||
.markdown > ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul > li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown > ul li,
|
||||
.markdown blockquote ul > li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown > ul li p,
|
||||
.markdown > ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol > li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown > ol li,
|
||||
.markdown blockquote ol > li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 3px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown pre {
|
||||
border-radius: 6px;
|
||||
background: #f7f7f7;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.markdown pre code {
|
||||
border: none;
|
||||
background: #f7f7f7;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown > table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 95%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown > table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
.markdown > table th,
|
||||
.markdown > table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown > table th {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown > br,
|
||||
.markdown > p > br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre{
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
64
static/plugins/capture/assets/iconfont/demo_fontclass.html
Normal file
64
static/plugins/capture/assets/iconfont/demo_fontclass.html
Normal file
@@ -0,0 +1,64 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>IconFont</title>
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="iconfont.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="main markdown">
|
||||
<h1>IconFont 图标</h1>
|
||||
<ul class="icon_lists clear">
|
||||
|
||||
<li>
|
||||
<i class="icon iconfont icon-xiazai"></i>
|
||||
<div class="name">下载</div>
|
||||
<div class="fontclass">.icon-xiazai</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon iconfont icon-guanbi"></i>
|
||||
<div class="name">关闭</div>
|
||||
<div class="fontclass">.icon-guanbi</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon iconfont icon-zhongzhi"></i>
|
||||
<div class="name">重置</div>
|
||||
<div class="fontclass">.icon-zhongzhi</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon iconfont icon-duihao"></i>
|
||||
<div class="name">对号</div>
|
||||
<div class="fontclass">.icon-duihao</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<h2 id="font-class-">font-class引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。</p>
|
||||
<p>与unicode使用方式相比,具有如下特点:</p>
|
||||
<ul>
|
||||
<li>兼容性良好,支持ie8+,及所有现代浏览器。</li>
|
||||
<li>相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。</li>
|
||||
<li>因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。</li>
|
||||
<li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下:</p>
|
||||
<h3 id="-fontclass-">第一步:引入项目下面生成的fontclass代码:</h3>
|
||||
|
||||
|
||||
<pre><code class="lang-js hljs javascript"><span class="hljs-comment"><link rel="stylesheet" type="text/css" href="./iconfont.css"></span></code></pre>
|
||||
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
|
||||
<pre><code class="lang-css hljs"><<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"></<span class="hljs-selector-tag">i</span>></code></pre>
|
||||
<blockquote>
|
||||
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
95
static/plugins/capture/assets/iconfont/demo_symbol.html
Normal file
95
static/plugins/capture/assets/iconfont/demo_symbol.html
Normal file
@@ -0,0 +1,95 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>IconFont</title>
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<script src="iconfont.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
.icon {
|
||||
/* 通过设置 font-size 来改变图标大小 */
|
||||
width: 1em; height: 1em;
|
||||
/* 图标和文字相邻时,垂直对齐 */
|
||||
vertical-align: -0.15em;
|
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||
fill: currentColor;
|
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||
normalize.css 中也包含这行 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main markdown">
|
||||
<h1>IconFont 图标</h1>
|
||||
<ul class="icon_lists clear">
|
||||
|
||||
<li>
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xiazai"></use>
|
||||
</svg>
|
||||
<div class="name">下载</div>
|
||||
<div class="fontclass">#icon-xiazai</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-guanbi"></use>
|
||||
</svg>
|
||||
<div class="name">关闭</div>
|
||||
<div class="fontclass">#icon-guanbi</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zhongzhi"></use>
|
||||
</svg>
|
||||
<div class="name">重置</div>
|
||||
<div class="fontclass">#icon-zhongzhi</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-duihao"></use>
|
||||
</svg>
|
||||
<div class="name">对号</div>
|
||||
<div class="fontclass">#icon-duihao</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<h2 id="symbol-">symbol引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||
这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:</p>
|
||||
<ul>
|
||||
<li>支持多色图标了,不再受单色限制。</li>
|
||||
<li>通过一些技巧,支持像字体那样,通过<code>font-size</code>,<code>color</code>来调整样式。</li>
|
||||
<li>兼容性较差,支持 ie9+,及现代浏览器。</li>
|
||||
<li>浏览器渲染svg的性能一般,还不如png。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下:</p>
|
||||
<h3 id="-symbol-">第一步:引入项目下面生成的symbol代码:</h3>
|
||||
<pre><code class="lang-js hljs javascript"><span class="hljs-comment"><script src="./iconfont.js"></script></span></code></pre>
|
||||
<h3 id="-css-">第二步:加入通用css代码(引入一次就行):</h3>
|
||||
<pre><code class="lang-js hljs javascript"><style type=<span class="hljs-string">"text/css"</span>>
|
||||
.icon {
|
||||
width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
|
||||
vertical-align: <span class="hljs-number">-0.15</span>em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
<<span class="hljs-regexp">/style></span></code></pre>
|
||||
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
|
||||
<pre><code class="lang-js hljs javascript"><svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>><span class="xml"><span class="hljs-tag">
|
||||
<<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>></span><span class="hljs-tag"></<span class="hljs-name">use</span>></span>
|
||||
</span><<span class="hljs-regexp">/svg>
|
||||
</span></code></pre>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
102
static/plugins/capture/assets/iconfont/demo_unicode.html
Normal file
102
static/plugins/capture/assets/iconfont/demo_unicode.html
Normal file
@@ -0,0 +1,102 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>IconFont</title>
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
@font-face {font-family: "iconfont";
|
||||
src: url('iconfont.eot'); /* IE9*/
|
||||
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('iconfont.woff') format('woff'), /* chrome, firefox */
|
||||
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family:"iconfont" !important;
|
||||
font-size:16px;
|
||||
font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: 0.2px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main markdown">
|
||||
<h1>IconFont 图标</h1>
|
||||
<ul class="icon_lists clear">
|
||||
|
||||
<li>
|
||||
<i class="icon iconfont"></i>
|
||||
<div class="name">下载</div>
|
||||
<div class="code">&#xe627;</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon iconfont"></i>
|
||||
<div class="name">关闭</div>
|
||||
<div class="code">&#xe66c;</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon iconfont"></i>
|
||||
<div class="name">重置</div>
|
||||
<div class="code">&#xe633;</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="icon iconfont"></i>
|
||||
<div class="name">对号</div>
|
||||
<div class="code">&#xeeda;</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<h2 id="unicode-">unicode引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>unicode是字体在网页端最原始的应用方式,特点是:</p>
|
||||
<ul>
|
||||
<li>兼容性最好,支持ie6+,及所有现代浏览器。</li>
|
||||
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
|
||||
<li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p>注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式</p>
|
||||
</blockquote>
|
||||
<p>unicode使用步骤如下:</p>
|
||||
<h3 id="-font-face">第一步:拷贝项目下面生成的font-face</h3>
|
||||
<pre><code class="lang-js hljs javascript">@font-face {
|
||||
font-family: <span class="hljs-string">'iconfont'</span>;
|
||||
src: url(<span class="hljs-string">'iconfont.eot'</span>);
|
||||
src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
|
||||
url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
|
||||
url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
|
||||
url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步:定义使用iconfont的样式</h3>
|
||||
<pre><code class="lang-js hljs javascript">.iconfont{
|
||||
font-family:<span class="hljs-string">"iconfont"</span> !important;
|
||||
font-size:<span class="hljs-number">16</span>px;font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
|
||||
<pre><code class="lang-js hljs javascript"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>>&#x33;<span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></code></pre>
|
||||
|
||||
<blockquote>
|
||||
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
25
static/plugins/capture/assets/iconfont/iconfont.css
Normal file
25
static/plugins/capture/assets/iconfont/iconfont.css
Normal file
@@ -0,0 +1,25 @@
|
||||
|
||||
@font-face {font-family: "iconfont";
|
||||
src: url('iconfont.eot?t=1538684099545'); /* IE9*/
|
||||
src: url('iconfont.eot?t=1538684099545#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAWQAAsAAAAACCQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8nVDMY21hcAAAAYAAAABrAAABsu3anlxnbHlmAAAB7AAAAZYAAAG869Cas2hlYWQAAAOEAAAALgAAADYS2G+AaGhlYQAAA7QAAAAcAAAAJAfeA4ZobXR4AAAD0AAAAA4AAAAUFAAAAGxvY2EAAAPgAAAADAAAAAwBEAFgbWF4cAAAA+wAAAAfAAAAIAESAENuYW1lAAAEDAAAAUUAAAJtPlT+fXBvc3QAAAVUAAAAPAAAAE0pDHeHeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeqb+7xdzwv4EhhrmBoQEozAiSAwDxJgzseJztkbsNgDAMRF8+IBSxBw0dC2SgVIzLAC5ZIdgxBUNw0bPsU+LiAkxAUnYlQzgJmJq6YfiJMvxM1bmwEImyySHtvnqHb/8q6D0/1id9Ybtnfq2j1nfKlp5jacvh2I9IczQ77sshP1MOG7MAeJwdj0FrE1EUhe95z8zLvOnM9GVC0pSZmEybmSKYTdsZRIhKXRgQLfgTpIiLoJtCdZFqf4HQnRsLhazabNxamD/gyoIb/QkK3ehqUu/4Npdzz8c795AkfvKSR0gRZUSIrQgtS/WtJN/eSirVRbs/Qr49RO0eMt75MJWjTJrEymreZEJ+9hq4vVV+vLOBRrgkHmXiJBujZhbj1XM76Oi3JjJ444SW1ufMbxp/kuZC3t2Y+Mb4x8xinB375p2a6U5gT1BU+8X9iW3rjp5Jj0j8v/WpmJNNAVGA1ggpEg8DWF3kyIb4IR7qSOnywgnr4kn5RddDR+xoFYnD8oKHZr8errLBlNhhir8E0XUpL8Uv6rEYQnlQa+18jTtzdRZxknJKq80hI8jTzW/T6VnjtCg+NWf7R3Mp50fZ81t6ZVnovb8vXzzA9f6BH5xNi+L1h8pkZD1Worli71qPd39XedzjvTihZaJBnA6SEdo1ZF0oWApftb347tZ6HgwOdezqxav60jN15fRd5yf+uDd6bnmlBf0D1bBUzQAAeJxjYGRgYADi+Y6Xrsbz23xl4GZhAIHrd6YeRtD//7IwMIO4HAxMIAoAaF8MWwAAeJxjYGRgYG7438AQw8IAAkCSkQEVsAIARwsCbnicY2FgYGBBwwABBAAVAAAAAAAAAFYAggC6AN54nGNgZGBgYGUwZ2BmAAEmIOYCQgaG/2A+AwAOdQFWAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgJWRiZGZkYWRlZGNga0iM7EqMZMtvTQxLymToyojPy+9KiOTLaU0MyMxn4EBAMN8Cyw=') format('woff'),
|
||||
url('iconfont.ttf?t=1538684099545') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
url('iconfont.svg?t=1538684099545#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family:"iconfont" !important;
|
||||
font-size:16px;
|
||||
font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-xiazai:before { content: "\e627"; }
|
||||
|
||||
.icon-guanbi:before { content: "\e66c"; }
|
||||
|
||||
.icon-zhongzhi:before { content: "\e633"; }
|
||||
|
||||
.icon-duihao:before { content: "\eeda"; }
|
||||
|
||||
BIN
static/plugins/capture/assets/iconfont/iconfont.eot
Normal file
BIN
static/plugins/capture/assets/iconfont/iconfont.eot
Normal file
Binary file not shown.
1
static/plugins/capture/assets/iconfont/iconfont.js
Normal file
1
static/plugins/capture/assets/iconfont/iconfont.js
Normal file
@@ -0,0 +1 @@
|
||||
(function(window){var svgSprite='<svg><symbol id="icon-xiazai" viewBox="0 0 1024 1024"><path d="M947.2 588.8c-19.2 0-32 12.8-32 32v108.8c0 51.2-25.6 96-96 96H204.8c-76.8 6.4-96-44.8-96-96V620.8c0-19.2-12.8-32-32-32s-25.6 12.8-25.6 32V768c0 70.4 57.6 128 128 128h672c70.4 0 128-57.6 128-128V620.8c-6.4-19.2-19.2-32-32-32zM518.4 716.8" fill="" ></path><path d="M544 710.4l172.8-166.4c12.8-12.8 12.8-32 0-44.8s-32-12.8-44.8 0L550.4 608v-448c0-19.2-12.8-32-32-32s-32 12.8-32 32v448L364.8 499.2c-12.8-12.8-38.4-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l172.8 166.4s25.6 25.6 51.2 0z" fill="" ></path></symbol><symbol id="icon-guanbi" viewBox="0 0 1024 1024"><path d="M220.3136 256.512l579.2768 579.2768a25.6 25.6 0 1 0 36.1984-36.1984L256.512 220.3136a25.6 25.6 0 1 0-36.1984 36.1984z" ></path><path d="M799.5904 220.3136L220.3136 799.5904a25.6 25.6 0 1 0 36.1984 36.1984L835.7888 256.512a25.6 25.6 0 1 0-36.1984-36.1984z" ></path></symbol><symbol id="icon-zhongzhi" viewBox="0 0 1024 1024"><path d="M931.07 384.75a368 368 0 0 0-704 95.25H64l192 192 192-192H288.91C312 333.51 439.12 221.13 592 221.13c169.21 0 306.87 137.66 306.87 306.87S761.21 834.87 592 834.87a307.37 307.37 0 0 1-194.56-69.55 30.57 30.57 0 0 0-38.79 47.25 368.1 368.1 0 0 0 572.42-427.82z" ></path></symbol><symbol id="icon-duihao" viewBox="0 0 1024 1024"><path d="M461.28 813.14a30 30 0 0 1-18.89-6.69L145 565.48a30 30 0 1 1 37.78-46.61l273.35 221.5 382.5-502.29a30 30 0 1 1 47.73 36.35L485.15 801.32a30 30 0 0 1-20.29 11.61 30.83 30.83 0 0 1-3.58 0.21z" ></path></symbol></svg>';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window)
|
||||
38
static/plugins/capture/assets/iconfont/iconfont.svg
Normal file
38
static/plugins/capture/assets/iconfont/iconfont.svg
Normal file
@@ -0,0 +1,38 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<!--
|
||||
2013-9-30: Created.
|
||||
-->
|
||||
<svg>
|
||||
<metadata>
|
||||
Created by iconfont
|
||||
</metadata>
|
||||
<defs>
|
||||
|
||||
<font id="iconfont" horiz-adv-x="1024" >
|
||||
<font-face
|
||||
font-family="iconfont"
|
||||
font-weight="500"
|
||||
font-stretch="normal"
|
||||
units-per-em="1024"
|
||||
ascent="896"
|
||||
descent="-128"
|
||||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="xiazai" unicode="" d="M947.2 307.2c-19.2 0-32-12.8-32-32v-108.8c0-51.2-25.6-96-96-96H204.8c-76.8-6.4-96 44.8-96 96V275.2c0 19.2-12.8 32-32 32s-25.6-12.8-25.6-32V128c0-70.4 57.6-128 128-128h672c70.4 0 128 57.6 128 128V275.2c-6.4 19.2-19.2 32-32 32zM518.4 179.2M544 185.6l172.8 166.4c12.8 12.8 12.8 32 0 44.8s-32 12.8-44.8 0L550.4 288v448c0 19.2-12.8 32-32 32s-32-12.8-32-32v-448L364.8 396.8c-12.8 12.8-38.4 12.8-44.8 0-12.8-12.8-12.8-32 0-44.8l172.8-166.4s25.6-25.6 51.2 0z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="guanbi" unicode="" d="M220.3136 639.488l579.2768-579.2768a25.6 25.6 0 1 1 36.1984 36.1984L256.512 675.6864a25.6 25.6 0 1 1-36.1984-36.1984zM799.5904 675.6864L220.3136 96.4096a25.6 25.6 0 1 1 36.1984-36.1984L835.7888 639.488a25.6 25.6 0 1 1-36.1984 36.1984z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="zhongzhi" unicode="" d="M931.07 511.25a368 368 0 0 1-704-95.25H64l192-192 192 192H288.91C312 562.49 439.12 674.87 592 674.87c169.21 0 306.87-137.66 306.87-306.87S761.21 61.13 592 61.13a307.37 307.37 0 0 0-194.56 69.55 30.57 30.57 0 0 1-38.79-47.25 368.1 368.1 0 0 1 572.42 427.82z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="duihao" unicode="" d="M461.28 82.86a30 30 0 0 0-18.89 6.69L145 330.52a30 30 0 1 0 37.78 46.61l273.35-221.5 382.5 502.29a30 30 0 1 0 47.73-36.35L485.15 94.68a30 30 0 0 0-20.29-11.61 30.83 30.83 0 0 0-3.58-0.21z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
|
||||
|
||||
</font>
|
||||
</defs></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
BIN
static/plugins/capture/assets/iconfont/iconfont.ttf
Normal file
BIN
static/plugins/capture/assets/iconfont/iconfont.ttf
Normal file
Binary file not shown.
BIN
static/plugins/capture/assets/iconfont/iconfont.woff
Normal file
BIN
static/plugins/capture/assets/iconfont/iconfont.woff
Normal file
Binary file not shown.
Reference in New Issue
Block a user