ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

图标替换

Browse Source
yanzili 3 years ago
parent 813f36619c
commit c1e2fa5c29
9 changed files with 2240 additions and 2179 deletions
Show Stats Download Patch File Download Diff File

4
report-ui/config/dev.env.js
Unescape Escape View File

@ -4,6 +4,6 @@ const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://127.0.0.1:9095"'
// BASE_API: '"http://10.108.26.197:9095"'
// BASE_API: '"http://127.0.0.1:9095"'
BASE_API: '"http://10.108.26.197:9095"'
})

85
report-ui/src/assets/iconfont/demo_index.html
Unescape Escape View File

@ -1,13 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico"
type="image/x-icon" />
<link rel="icon" type="image/svg+xml"
href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg" />
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.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">
@ -37,12 +34,10 @@
}
</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">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
@ -52,14 +47,25 @@
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1513211" target="_blank"
class="nav-more">查看项目</a>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1513211" 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">&#xe72e;</span>
<div class="name">仪表盘-抄表</div>
<div class="code-name">&amp;#xe72e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe851;</span>
<div class="name">南丁格尔玫瑰图</div>
<div class="code-name">&amp;#xe851;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe631;</span>
<div class="name">展 开 </div>
@ -669,16 +675,16 @@
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1624613153423') format('woff2'),
url('iconfont.woff?t=1624613153423') format('woff'),
url('iconfont.ttf?t=1624613153423') format('truetype');
src: url('iconfont.woff2?t=1624933667537') format('woff2'),
url('iconfont.woff?t=1624933667537') format('woff'),
url('iconfont.ttf?t=1624933667537') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
@ -688,7 +694,7 @@
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
@ -700,6 +706,24 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont iconyibiaopan-chaobiao"></span>
<div class="name">
仪表盘-抄表
</div>
<div class="code-name">.iconyibiaopan-chaobiao
</div>
</li>
<li class="dib">
<span class="icon iconfont iconnandinggeermeiguitu"></span>
<div class="name">
南丁格尔玫瑰图
</div>
<div class="code-name">.iconnandinggeermeiguitu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhankai"></span>
<div class="name">
@ -1604,10 +1628,10 @@
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
<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 iconxxx"&gt;&lt;/span&gt;
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
@ -1618,6 +1642,22 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyibiaopan-chaobiao"></use>
</svg>
<div class="name">仪表盘-抄表</div>
<div class="code-name">#iconyibiaopan-chaobiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconnandinggeermeiguitu"></use>
</svg>
<div class="name">南丁格尔玫瑰图</div>
<div class="code-name">#iconnandinggeermeiguitu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhankai"></use>
@ -2425,10 +2465,10 @@
</ul>
<p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
<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;
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
@ -2439,7 +2479,7 @@
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
<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>
@ -2468,5 +2508,4 @@
})
</script>
</body>
</html>

14
report-ui/src/assets/iconfont/iconfont.css
Unescape Escape View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 1513211 */
src: url('iconfont.woff2?t=1624613153423') format('woff2'),
url('iconfont.woff?t=1624613153423') format('woff'),
url('iconfont.ttf?t=1624613153423') format('truetype');
src: url('iconfont.woff2?t=1624933667537') format('woff2'),
url('iconfont.woff?t=1624933667537') format('woff'),
url('iconfont.ttf?t=1624933667537') format('truetype');
}
.iconfont {
@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.iconyibiaopan-chaobiao:before {
content: "\e72e";
}
.iconnandinggeermeiguitu:before {
content: "\e851";
}
.iconzhankai:before {
content: "\e631";
}

2
report-ui/src/assets/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

14
report-ui/src/assets/iconfont/iconfont.json
Unescape Escape View File

@ -5,6 +5,20 @@
"css_prefix_text": "icon",
"description": "",
"glyphs": [
{
"icon_id": "16466332",
"name": "仪表盘-抄表",
"font_class": "yibiaopan-chaobiao",
"unicode": "e72e",
"unicode_decimal": 59182
},
{
"icon_id": "15872322",
"name": "南丁格尔玫瑰图",
"font_class": "nandinggeermeiguitu",
"unicode": "e851",
"unicode_decimal": 59473
},
{
"icon_id": "11990084",
"name": "展 开 ",

BIN
report-ui/src/assets/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
report-ui/src/assets/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
report-ui/src/assets/iconfont/iconfont.woff2
View File

Binary file not shown.

4
report-ui/src/views/report/bigscreen/designer/tools.js
Unescape Escape View File

@ -4469,8 +4469,8 @@ const widgetTools = [
{
code: 'WidgetPieNightingaleRoseArea',
type: 'chart',
label: '饼图-南丁格尔-面积',
icon: 'iconicon_tubiao_bingtu',
label: '南丁格尔玫瑰图',
icon: 'iconnandinggeermeiguitu',
options: {
// 配置
setup: [

Write Preview
Loading…
Cancel
Save