Skip to content

V
vue-composition-api
Commit 8855aded by 唐玉峰
Options

.

parent 678cc1a6
Showing with 436 additions and 710 deletions
src/assets/font/c/demo_index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<head>
<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="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">
<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" />
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
......@@ -28,18 +28,19 @@
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
background: linear-gradient(-45deg, #3967ff, #b500fe);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
</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>
<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>
......@@ -48,12 +49,10 @@
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3111099" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<div class="content unicode" style="display: block">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe6e7;</span>
<div class="name">间接费用字典</div>
......@@ -62,7 +61,7 @@
<li class="dib">
<span class="icon iconfont">&#xe6bb;</span>
<div class="name">加入组织</div>
<div class="name">加分组织</div>
<div class="code-name">&amp;#xe6bb;</div>
</li>
......@@ -395,11 +394,10 @@
<div class="name">箭头 三角形</div>
<div class="code-name">&amp;#xe605;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<hr />
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
......@@ -407,11 +405,14 @@
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
<p>
注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
</p>
</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=1645068566372') format('woff2'),
......@@ -420,7 +421,7 @@
}
</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;
......@@ -430,7 +431,7 @@
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
......@@ -441,524 +442,351 @@
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-jianjiefeiyonzidian"></span>
<div class="name">
间接费用字典
</div>
<div class="code-name">.icon-jianjiefeiyonzidian
</div>
<div class="name">间接费用字典</div>
<div class="code-name">.icon-jianjiefeiyonzidian</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiaruzuzhi"></span>
<div class="name">
加入组织
</div>
<div class="code-name">.icon-jiaruzuzhi
</div>
<div class="name">加分组织</div>
<div class="code-name">.icon-jiaruzuzhi</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daoru1"></span>
<div class="name">
导入
</div>
<div class="code-name">.icon-daoru1
</div>
<div class="name">导入</div>
<div class="code-name">.icon-daoru1</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ruyuan"></span>
<div class="name">
入院
</div>
<div class="code-name">.icon-ruyuan
</div>
<div class="name">入院</div>
<div class="code-name">.icon-ruyuan</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gerenyingkui"></span>
<div class="name">
个人盈亏
</div>
<div class="code-name">.icon-gerenyingkui
</div>
<div class="name">个人盈亏</div>
<div class="code-name">.icon-gerenyingkui</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tuanduibaobiao_yingkuibaobiao"></span>
<div class="name">
团队报表_盈亏报表
</div>
<div class="code-name">.icon-tuanduibaobiao_yingkuibaobiao
</div>
<div class="name">团队报表_盈亏报表</div>
<div class="code-name">.icon-tuanduibaobiao_yingkuibaobiao</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yingkuibiji"></span>
<div class="name">
盈亏笔记
</div>
<div class="code-name">.icon-yingkuibiji
</div>
<div class="name">盈亏笔记</div>
<div class="code-name">.icon-yingkuibiji</div>
</li>
<li class="dib">
<span class="icon iconfont icon-feiyong"></span>
<div class="name">
费用
</div>
<div class="code-name">.icon-feiyong
</div>
<div class="name">费用</div>
<div class="code-name">.icon-feiyong</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhikong"></span>
<div class="name">
质控
</div>
<div class="code-name">.icon-zhikong
</div>
<div class="name">质控</div>
<div class="code-name">.icon-zhikong</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tubiao_huliyizhu_huliyizhu"></span>
<div class="name">
图标_护理医嘱_护理医嘱
</div>
<div class="code-name">.icon-tubiao_huliyizhu_huliyizhu
</div>
<div class="name">图标_护理医嘱_护理医嘱</div>
<div class="code-name">.icon-tubiao_huliyizhu_huliyizhu</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bianzu_70"></span>
<div class="name">
调度规则
</div>
<div class="code-name">.icon-bianzu_70
</div>
<div class="name">调度规则</div>
<div class="code-name">.icon-bianzu_70</div>
</li>
<li class="dib">
<span class="icon iconfont icon-iconset0254"></span>
<div class="name">
条码
</div>
<div class="code-name">.icon-iconset0254
</div>
<div class="name">条码</div>
<div class="code-name">.icon-iconset0254</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qianqian-"></span>
<div class="name">
钱钱-01
</div>
<div class="code-name">.icon-qianqian-
</div>
<div class="name">钱钱-01</div>
<div class="code-name">.icon-qianqian-</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiandaosvg"></span>
<div class="name">
剪刀svg
</div>
<div class="code-name">.icon-jiandaosvg
</div>
<div class="name">剪刀svg</div>
<div class="code-name">.icon-jiandaosvg</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sousuo_o"></span>
<div class="name">
搜索_o
</div>
<div class="code-name">.icon-sousuo_o
</div>
<div class="name">搜索_o</div>
<div class="code-name">.icon-sousuo_o</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daoru"></span>
<div class="name">
导入
</div>
<div class="code-name">.icon-daoru
</div>
<div class="name">导入</div>
<div class="code-name">.icon-daoru</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ipr_tijiao"></span>
<div class="name">
ipr_提交
</div>
<div class="code-name">.icon-ipr_tijiao
</div>
<div class="name">ipr_提交</div>
<div class="code-name">.icon-ipr_tijiao</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tingzhenqi"></span>
<div class="name">
听诊器
</div>
<div class="code-name">.icon-tingzhenqi
</div>
<div class="name">听诊器</div>
<div class="code-name">.icon-tingzhenqi</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tijianzuhe"></span>
<div class="name">
体检组合
</div>
<div class="code-name">.icon-tijianzuhe
</div>
<div class="name">体检组合</div>
<div class="code-name">.icon-tijianzuhe</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ico_yiyuanguanjia_banliruyuan"></span>
<div class="name">
医院
</div>
<div class="code-name">.icon-ico_yiyuanguanjia_banliruyuan
</div>
<div class="name">医院</div>
<div class="code-name">.icon-ico_yiyuanguanjia_banliruyuan</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshihuapingtaiicon_pingfen"></span>
<div class="name">
可视化平台icon_评分
</div>
<div class="code-name">.icon-keshihuapingtaiicon_pingfen
</div>
<div class="name">可视化平台icon_评分</div>
<div class="code-name">.icon-keshihuapingtaiicon_pingfen</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenzu"></span>
<div class="name">
清华-人员管理off
</div>
<div class="code-name">.icon-fenzu
</div>
<div class="name">清华-人员管理off</div>
<div class="code-name">.icon-fenzu</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chuyuandaiyao"></span>
<div class="name">
出入院流程
</div>
<div class="code-name">.icon-chuyuandaiyao
</div>
<div class="name">出入院流程</div>
<div class="code-name">.icon-chuyuandaiyao</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yishengtuandui"></span>
<div class="name">
医生团队
</div>
<div class="code-name">.icon-yishengtuandui
</div>
<div class="name">医生团队</div>
<div class="code-name">.icon-yishengtuandui</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng
</div>
<div class="name">医生</div>
<div class="code-name">.icon-yisheng</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshi"></span>
<div class="name">
科室
</div>
<div class="code-name">.icon-keshi
</div>
<div class="name">科室</div>
<div class="code-name">.icon-keshi</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shiyuanxingjibingjiance"></span>
<div class="name">
食源性疾病监测
</div>
<div class="code-name">.icon-shiyuanxingjibingjiance
</div>
<div class="name">食源性疾病监测</div>
<div class="code-name">.icon-shiyuanxingjibingjiance</div>
</li>
<li class="dib">
<span class="icon iconfont icon-niandu"></span>
<div class="name">
年度
</div>
<div class="code-name">.icon-niandu
</div>
<div class="name">年度</div>
<div class="code-name">.icon-niandu</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng1"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng1
</div>
<div class="name">医生</div>
<div class="code-name">.icon-yisheng1</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yuce"></span>
<div class="name">
预测
</div>
<div class="code-name">.icon-yuce
</div>
<div class="name">预测</div>
<div class="code-name">.icon-yuce</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxi"></span>
<div class="name">
分析
</div>
<div class="code-name">.icon-fenxi
</div>
<div class="name">分析</div>
<div class="code-name">.icon-fenxi</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon-test"></span>
<div class="name">
预算控制
</div>
<div class="code-name">.icon-icon-test
</div>
<div class="name">预算控制</div>
<div class="code-name">.icon-icon-test</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxi1"></span>
<div class="name">
分析
</div>
<div class="code-name">.icon-fenxi1
</div>
<div class="name">分析</div>
<div class="code-name">.icon-fenxi1</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng666"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng666
</div>
<div class="name">医生</div>
<div class="code-name">.icon-yisheng666</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shoushudingdan"></span>
<div class="name">
手术订单
</div>
<div class="code-name">.icon-shoushudingdan
</div>
<div class="name">手术订单</div>
<div class="code-name">.icon-shoushudingdan</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yusuan"></span>
<div class="name">
预算
</div>
<div class="code-name">.icon-yusuan
</div>
<div class="name">预算</div>
<div class="code-name">.icon-yusuan</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhanghaoguanli"></span>
<div class="name">
账号管理
</div>
<div class="code-name">.icon-zhanghaoguanli
</div>
<div class="name">账号管理</div>
<div class="code-name">.icon-zhanghaoguanli</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jibingguanli"></span>
<div class="name">
疾病管理
</div>
<div class="code-name">.icon-jibingguanli
</div>
<div class="name">疾病管理</div>
<div class="code-name">.icon-jibingguanli</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshikucunguanli"></span>
<div class="name">
科室库存管理
</div>
<div class="code-name">.icon-keshikucunguanli
</div>
<div class="name">科室库存管理</div>
<div class="code-name">.icon-keshikucunguanli</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxi2"></span>
<div class="name">
分析
</div>
<div class="code-name">.icon-fenxi2
</div>
<div class="name">分析</div>
<div class="code-name">.icon-fenxi2</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng2"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng2
</div>
<div class="name">医生</div>
<div class="code-name">.icon-yisheng2</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshigongzuoliang"></span>
<div class="name">
科室工作量
</div>
<div class="code-name">.icon-keshigongzuoliang
</div>
<div class="name">科室工作量</div>
<div class="code-name">.icon-keshigongzuoliang</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quankeyiliaoke"></span>
<div class="name">
全科医疗科
</div>
<div class="code-name">.icon-quankeyiliaoke
</div>
<div class="name">全科医疗科</div>
<div class="code-name">.icon-quankeyiliaoke</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhanghaoguanli1"></span>
<div class="name">
账号管理
</div>
<div class="code-name">.icon-zhanghaoguanli1
</div>
<div class="name">账号管理</div>
<div class="code-name">.icon-zhanghaoguanli1</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ruanzhuyuce"></span>
<div class="name">
软著预测
</div>
<div class="code-name">.icon-ruanzhuyuce
</div>
<div class="name">软著预测</div>
<div class="code-name">.icon-ruanzhuyuce</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshitongji1"></span>
<div class="name">
科室统计1
</div>
<div class="code-name">.icon-keshitongji1
</div>
<div class="name">科室统计1</div>
<div class="code-name">.icon-keshitongji1</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yusuan1"></span>
<div class="name">
预算
</div>
<div class="code-name">.icon-yusuan1
</div>
<div class="name">预算</div>
<div class="code-name">.icon-yusuan1</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshi2"></span>
<div class="name">
科室
</div>
<div class="code-name">.icon-keshi2
</div>
<div class="name">科室</div>
<div class="code-name">.icon-keshi2</div>
</li>
<li class="dib">
<span class="icon iconfont icon-02TPM_yusuankemu"></span>
<div class="name">
02 TPM_预算科目
</div>
<div class="code-name">.icon-02TPM_yusuankemu
</div>
<div class="name">02 TPM_预算科目</div>
<div class="code-name">.icon-02TPM_yusuankemu</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quankexue"></span>
<div class="name">
全科学
</div>
<div class="code-name">.icon-quankexue
</div>
<div class="name">全科学</div>
<div class="code-name">.icon-quankexue</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jibing"></span>
<div class="name">
疾病
</div>
<div class="code-name">.icon-jibing
</div>
<div class="name">疾病</div>
<div class="code-name">.icon-jibing</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daochu"></span>
<div class="name">
导出
</div>
<div class="code-name">.icon-daochu
</div>
<div class="name">导出</div>
<div class="code-name">.icon-daochu</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xinrenzhinan"></span>
<div class="name">
新人指南
</div>
<div class="code-name">.icon-xinrenzhinan
</div>
<div class="name">新人指南</div>
<div class="code-name">.icon-xinrenzhinan</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yinhangka"></span>
<div class="name">
银行卡
</div>
<div class="code-name">.icon-yinhangka
</div>
<div class="name">银行卡</div>
<div class="code-name">.icon-yinhangka</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fufeiguanli"></span>
<div class="name">
付费管理
</div>
<div class="code-name">.icon-fufeiguanli
</div>
<div class="name">付费管理</div>
<div class="code-name">.icon-fufeiguanli</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ziliaoshouce-xianxing"></span>
<div class="name">
22资料、手册-线性
</div>
<div class="code-name">.icon-ziliaoshouce-xianxing
</div>
<div class="name">22资料、手册-线性</div>
<div class="code-name">.icon-ziliaoshouce-xianxing</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiantou1"></span>
<div class="name">
箭头 三角形
</div>
<div class="code-name">.icon-jiantou1
</div>
<div class="name">箭头 三角形</div>
<div class="code-name">.icon-jiantou1</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<hr />
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
......@@ -968,20 +796,18 @@
</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 icon-xxx"&gt;&lt;/span&gt;
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
<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-jianjiefeiyonzidian"></use>
......@@ -994,7 +820,7 @@
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiaruzuzhi"></use>
</svg>
<div class="name">加入组织</div>
<div class="name">加分组织</div>
<div class="code-name">#icon-jiaruzuzhi</div>
</li>
......@@ -1437,14 +1263,15 @@
<div class="name">箭头 三角形</div>
<div class="code-name">#icon-jiantou1</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<hr />
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
<p>
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
......@@ -1453,10 +1280,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;
......@@ -1467,33 +1294,32 @@
&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>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$(".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
if ($(this).hasClass("active")) {
return;
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
$("#tabs li").removeClass("active");
$(this).addClass("active");
tabContent.hide().eq(index).fadeIn()
tabContent.hide().eq(index).fadeIn();
}
})
})
});
});
</script>
</body>
</body>
</html>
src/assets/font/c/iconfont.json
......@@ -14,7 +14,7 @@
},
{
"icon_id": "8304933",
"name": "加入组织",
"name": "加分组织",
"font_class": "jiaruzuzhi",
"unicode": "e6bb",
"unicode_decimal": 59067
......
src/assets/font/complete/demo_index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<head>
<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="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">
<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" />
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
......@@ -28,18 +28,19 @@
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
background: linear-gradient(-45deg, #3967ff, #b500fe);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
</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>
<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>
......@@ -48,12 +49,10 @@
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3111099" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<div class="content unicode" style="display: block">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe6bc;</span>
<div class="name">质控图</div>
......@@ -80,7 +79,7 @@
<li class="dib">
<span class="icon iconfont">&#xe6bb;</span>
<div class="name">加入组织</div>
<div class="name">加分组织</div>
<div class="code-name">&amp;#xe6bb;</div>
</li>
......@@ -413,11 +412,10 @@
<div class="name">箭头 三角形</div>
<div class="code-name">&amp;#xe605;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<hr />
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
......@@ -425,11 +423,14 @@
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
<p>
注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
</p>
</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=1648635086881') format('woff2'),
......@@ -438,7 +439,7 @@
}
</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;
......@@ -448,7 +449,7 @@
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
......@@ -459,551 +460,369 @@
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-zhkt"></span>
<div class="name">
质控图
</div>
<div class="code-name">.icon-zhkt
</div>
<div class="name">质控图</div>
<div class="code-name">.icon-zhkt</div>
</li>
<li class="dib">
<span class="icon iconfont icon-guizeguanli-"></span>
<div class="name">
规则管理-01
</div>
<div class="code-name">.icon-guizeguanli-
</div>
<div class="name">规则管理-01</div>
<div class="code-name">.icon-guizeguanli-</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shenhezhuangtai"></span>
<div class="name">
审核状态
</div>
<div class="code-name">.icon-shenhezhuangtai
</div>
<div class="name">审核状态</div>
<div class="code-name">.icon-shenhezhuangtai</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jianjiefeiyonzidian"></span>
<div class="name">
间接费用字典
</div>
<div class="code-name">.icon-jianjiefeiyonzidian
</div>
<div class="name">间接费用字典</div>
<div class="code-name">.icon-jianjiefeiyonzidian</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiaruzuzhi"></span>
<div class="name">
加入组织
</div>
<div class="code-name">.icon-jiaruzuzhi
</div>
<div class="name">加分组织</div>
<div class="code-name">.icon-jiaruzuzhi</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daoru1"></span>
<div class="name">
导入
</div>
<div class="code-name">.icon-daoru1
</div>
<div class="name">导入</div>
<div class="code-name">.icon-daoru1</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ruyuan"></span>
<div class="name">
入院
</div>
<div class="code-name">.icon-ruyuan
</div>
<div class="name">入院</div>
<div class="code-name">.icon-ruyuan</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gerenyingkui"></span>
<div class="name">
个人盈亏
</div>
<div class="code-name">.icon-gerenyingkui
</div>
<div class="name">个人盈亏</div>
<div class="code-name">.icon-gerenyingkui</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tuanduibaobiao_yingkuibaobiao"></span>
<div class="name">
团队报表_盈亏报表
</div>
<div class="code-name">.icon-tuanduibaobiao_yingkuibaobiao
</div>
<div class="name">团队报表_盈亏报表</div>
<div class="code-name">.icon-tuanduibaobiao_yingkuibaobiao</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yingkuibiji"></span>
<div class="name">
盈亏笔记
</div>
<div class="code-name">.icon-yingkuibiji
</div>
<div class="name">盈亏笔记</div>
<div class="code-name">.icon-yingkuibiji</div>
</li>
<li class="dib">
<span class="icon iconfont icon-feiyong"></span>
<div class="name">
费用
</div>
<div class="code-name">.icon-feiyong
</div>
<div class="name">费用</div>
<div class="code-name">.icon-feiyong</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhikong"></span>
<div class="name">
质控
</div>
<div class="code-name">.icon-zhikong
</div>
<div class="name">质控</div>
<div class="code-name">.icon-zhikong</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tubiao_huliyizhu_huliyizhu"></span>
<div class="name">
图标_护理医嘱_护理医嘱
</div>
<div class="code-name">.icon-tubiao_huliyizhu_huliyizhu
</div>
<div class="name">图标_护理医嘱_护理医嘱</div>
<div class="code-name">.icon-tubiao_huliyizhu_huliyizhu</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bianzu_70"></span>
<div class="name">
调度规则
</div>
<div class="code-name">.icon-bianzu_70
</div>
<div class="name">调度规则</div>
<div class="code-name">.icon-bianzu_70</div>
</li>
<li class="dib">
<span class="icon iconfont icon-iconset0254"></span>
<div class="name">
条码
</div>
<div class="code-name">.icon-iconset0254
</div>
<div class="name">条码</div>
<div class="code-name">.icon-iconset0254</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qianqian-"></span>
<div class="name">
钱钱-01
</div>
<div class="code-name">.icon-qianqian-
</div>
<div class="name">钱钱-01</div>
<div class="code-name">.icon-qianqian-</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiandaosvg"></span>
<div class="name">
剪刀svg
</div>
<div class="code-name">.icon-jiandaosvg
</div>
<div class="name">剪刀svg</div>
<div class="code-name">.icon-jiandaosvg</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sousuo_o"></span>
<div class="name">
搜索_o
</div>
<div class="code-name">.icon-sousuo_o
</div>
<div class="name">搜索_o</div>
<div class="code-name">.icon-sousuo_o</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daoru"></span>
<div class="name">
导入
</div>
<div class="code-name">.icon-daoru
</div>
<div class="name">导入</div>
<div class="code-name">.icon-daoru</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ipr_tijiao"></span>
<div class="name">
ipr_提交
</div>
<div class="code-name">.icon-ipr_tijiao
</div>
<div class="name">ipr_提交</div>
<div class="code-name">.icon-ipr_tijiao</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tingzhenqi"></span>
<div class="name">
听诊器
</div>
<div class="code-name">.icon-tingzhenqi
</div>
<div class="name">听诊器</div>
<div class="code-name">.icon-tingzhenqi</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tijianzuhe"></span>
<div class="name">
体检组合
</div>
<div class="code-name">.icon-tijianzuhe
</div>
<div class="name">体检组合</div>
<div class="code-name">.icon-tijianzuhe</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ico_yiyuanguanjia_banliruyuan"></span>
<div class="name">
医院
</div>
<div class="code-name">.icon-ico_yiyuanguanjia_banliruyuan
</div>
<div class="name">医院</div>
<div class="code-name">.icon-ico_yiyuanguanjia_banliruyuan</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshihuapingtaiicon_pingfen"></span>
<div class="name">
可视化平台icon_评分
</div>
<div class="code-name">.icon-keshihuapingtaiicon_pingfen
</div>
<div class="name">可视化平台icon_评分</div>
<div class="code-name">.icon-keshihuapingtaiicon_pingfen</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenzu"></span>
<div class="name">
清华-人员管理off
</div>
<div class="code-name">.icon-fenzu
</div>
<div class="name">清华-人员管理off</div>
<div class="code-name">.icon-fenzu</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chuyuandaiyao"></span>
<div class="name">
出入院流程
</div>
<div class="code-name">.icon-chuyuandaiyao
</div>
<div class="name">出入院流程</div>
<div class="code-name">.icon-chuyuandaiyao</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yishengtuandui"></span>
<div class="name">
医生团队
</div>
<div class="code-name">.icon-yishengtuandui
</div>
<div class="name">医生团队</div>
<div class="code-name">.icon-yishengtuandui</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng
</div>
<div class="name">医生</div>
<div class="code-name">.icon-yisheng</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshi"></span>
<div class="name">
科室
</div>
<div class="code-name">.icon-keshi
</div>
<div class="name">科室</div>
<div class="code-name">.icon-keshi</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shiyuanxingjibingjiance"></span>
<div class="name">
食源性疾病监测
</div>
<div class="code-name">.icon-shiyuanxingjibingjiance
</div>
<div class="name">食源性疾病监测</div>
<div class="code-name">.icon-shiyuanxingjibingjiance</div>
</li>
<li class="dib">
<span class="icon iconfont icon-niandu"></span>
<div class="name">
年度
</div>
<div class="code-name">.icon-niandu
</div>
<div class="name">年度</div>
<div class="code-name">.icon-niandu</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng1"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng1
</div>
<div class="name">医生</div>
<div class="code-name">.icon-yisheng1</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yuce"></span>
<div class="name">
预测
</div>
<div class="code-name">.icon-yuce
</div>
<div class="name">预测</div>
<div class="code-name">.icon-yuce</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxi"></span>
<div class="name">
分析
</div>
<div class="code-name">.icon-fenxi
</div>
<div class="name">分析</div>
<div class="code-name">.icon-fenxi</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon-test"></span>
<div class="name">
预算控制
</div>
<div class="code-name">.icon-icon-test
</div>
<div class="name">预算控制</div>
<div class="code-name">.icon-icon-test</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxi1"></span>
<div class="name">
分析
</div>
<div class="code-name">.icon-fenxi1
</div>
<div class="name">分析</div>
<div class="code-name">.icon-fenxi1</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng666"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng666
</div>
<div class="name">医生</div>
<div class="code-name">.icon-yisheng666</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shoushudingdan"></span>
<div class="name">
手术订单
</div>
<div class="code-name">.icon-shoushudingdan
</div>
<div class="name">手术订单</div>
<div class="code-name">.icon-shoushudingdan</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yusuan"></span>
<div class="name">
预算
</div>
<div class="code-name">.icon-yusuan
</div>
<div class="name">预算</div>
<div class="code-name">.icon-yusuan</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhanghaoguanli"></span>
<div class="name">
账号管理
</div>
<div class="code-name">.icon-zhanghaoguanli
</div>
<div class="name">账号管理</div>
<div class="code-name">.icon-zhanghaoguanli</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jibingguanli"></span>
<div class="name">
疾病管理
</div>
<div class="code-name">.icon-jibingguanli
</div>
<div class="name">疾病管理</div>
<div class="code-name">.icon-jibingguanli</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshikucunguanli"></span>
<div class="name">
科室库存管理
</div>
<div class="code-name">.icon-keshikucunguanli
</div>
<div class="name">科室库存管理</div>
<div class="code-name">.icon-keshikucunguanli</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxi2"></span>
<div class="name">
分析
</div>
<div class="code-name">.icon-fenxi2
</div>
<div class="name">分析</div>
<div class="code-name">.icon-fenxi2</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng2"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng2
</div>
<div class="name">医生</div>
<div class="code-name">.icon-yisheng2</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshigongzuoliang"></span>
<div class="name">
科室工作量
</div>
<div class="code-name">.icon-keshigongzuoliang
</div>
<div class="name">科室工作量</div>
<div class="code-name">.icon-keshigongzuoliang</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quankeyiliaoke"></span>
<div class="name">
全科医疗科
</div>
<div class="code-name">.icon-quankeyiliaoke
</div>
<div class="name">全科医疗科</div>
<div class="code-name">.icon-quankeyiliaoke</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhanghaoguanli1"></span>
<div class="name">
账号管理
</div>
<div class="code-name">.icon-zhanghaoguanli1
</div>
<div class="name">账号管理</div>
<div class="code-name">.icon-zhanghaoguanli1</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ruanzhuyuce"></span>
<div class="name">
软著预测
</div>
<div class="code-name">.icon-ruanzhuyuce
</div>
<div class="name">软著预测</div>
<div class="code-name">.icon-ruanzhuyuce</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshitongji1"></span>
<div class="name">
科室统计1
</div>
<div class="code-name">.icon-keshitongji1
</div>
<div class="name">科室统计1</div>
<div class="code-name">.icon-keshitongji1</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yusuan1"></span>
<div class="name">
预算
</div>
<div class="code-name">.icon-yusuan1
</div>
<div class="name">预算</div>
<div class="code-name">.icon-yusuan1</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshi2"></span>
<div class="name">
科室
</div>
<div class="code-name">.icon-keshi2
</div>
<div class="name">科室</div>
<div class="code-name">.icon-keshi2</div>
</li>
<li class="dib">
<span class="icon iconfont icon-02TPM_yusuankemu"></span>
<div class="name">
02 TPM_预算科目
</div>
<div class="code-name">.icon-02TPM_yusuankemu
</div>
<div class="name">02 TPM_预算科目</div>
<div class="code-name">.icon-02TPM_yusuankemu</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quankexue"></span>
<div class="name">
全科学
</div>
<div class="code-name">.icon-quankexue
</div>
<div class="name">全科学</div>
<div class="code-name">.icon-quankexue</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jibing"></span>
<div class="name">
疾病
</div>
<div class="code-name">.icon-jibing
</div>
<div class="name">疾病</div>
<div class="code-name">.icon-jibing</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daochu"></span>
<div class="name">
导出
</div>
<div class="code-name">.icon-daochu
</div>
<div class="name">导出</div>
<div class="code-name">.icon-daochu</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xinrenzhinan"></span>
<div class="name">
新人指南
</div>
<div class="code-name">.icon-xinrenzhinan
</div>
<div class="name">新人指南</div>
<div class="code-name">.icon-xinrenzhinan</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yinhangka"></span>
<div class="name">
银行卡
</div>
<div class="code-name">.icon-yinhangka
</div>
<div class="name">银行卡</div>
<div class="code-name">.icon-yinhangka</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fufeiguanli"></span>
<div class="name">
付费管理
</div>
<div class="code-name">.icon-fufeiguanli
</div>
<div class="name">付费管理</div>
<div class="code-name">.icon-fufeiguanli</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ziliaoshouce-xianxing"></span>
<div class="name">
22资料、手册-线性
</div>
<div class="code-name">.icon-ziliaoshouce-xianxing
</div>
<div class="name">22资料、手册-线性</div>
<div class="code-name">.icon-ziliaoshouce-xianxing</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiantou1"></span>
<div class="name">
箭头 三角形
</div>
<div class="code-name">.icon-jiantou1
</div>
<div class="name">箭头 三角形</div>
<div class="code-name">.icon-jiantou1</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<hr />
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
......@@ -1013,20 +832,18 @@
</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 icon-xxx"&gt;&lt;/span&gt;
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
<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-zhkt"></use>
......@@ -1063,7 +880,7 @@
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiaruzuzhi"></use>
</svg>
<div class="name">加入组织</div>
<div class="name">加分组织</div>
<div class="code-name">#icon-jiaruzuzhi</div>
</li>
......@@ -1506,14 +1323,15 @@
<div class="name">箭头 三角形</div>
<div class="code-name">#icon-jiantou1</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<hr />
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
<p>
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
......@@ -1522,10 +1340,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;
......@@ -1536,33 +1354,32 @@
&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>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$(".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
if ($(this).hasClass("active")) {
return;
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
$("#tabs li").removeClass("active");
$(this).addClass("active");
tabContent.hide().eq(index).fadeIn()
tabContent.hide().eq(index).fadeIn();
}
})
})
});
});
</script>
</body>
</body>
</html>
src/assets/font/complete/iconfont.json
......@@ -35,7 +35,7 @@
},
{
"icon_id": "8304933",
"name": "加入组织",
"name": "加分组织",
"font_class": "jiaruzuzhi",
"unicode": "e6bb",
"unicode_decimal": 59067
......
src/router/index.js
......@@ -55,6 +55,13 @@ const router = new Router({
name: "outClinicalpathway",
component: outClinicalpathway,
},
//临床路径外放页面
{
path: "/medicalRecordImport",
name: "medicalRecordImport",
component: (resolve) => require(["@/views/medicalRecordImport.vue"], resolve),
},
],
// mode: 'history' /*hash*/ /*不显示路由中的#*/
});
......
src/utils/echarts.js
......@@ -85,7 +85,7 @@ export function categoryChart(data, tcolor) {
return option;
}
//百分比图 病案入组
//百分比图 病案分组
export function categoryChart11(text, data, tcolor) {
const option = {
title: [
......
src/views/medicalRecordImport.vue 0 → 100644
<template>
<!-- 病案导入 -->
<div class="medicalRecordImport">
<div class="medicalRecordImport_top"></div>
<div class="main">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="医保反馈数据" name="1"
><iframe src="http://172.16.1.244:8050/#/report/view?workbookId=269" width="100%" height="100%" frameborder="0"></iframe>
</el-tab-pane>
<el-tab-pane label="月度分组数据" name="2"
><iframe src="http://172.16.1.244:8050/#/report/view?workbookId=268" width="100%" height="100%" frameborder="0"></iframe
></el-tab-pane>
<el-tab-pane label="年度结算数据" name="3"
><iframe src="http://172.16.1.244:8050/#/report/view?workbookId=267" width="100%" height="100%" frameborder="0"></iframe
></el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
export default {
name: "medicalRecordImport",
components: {},
data() {
return {
activeName: "1",
};
},
mounted() {
console.log(window.location.origin);
},
methods: {
handleClick(tab, event) {},
},
};
</script>
<style lang="scss">
.medicalRecordImport {
height: 100%;
background-color: white;
overflow: auto;
display: flex;
flex-flow: column;
&_top {
width: 100%;
height: 15px;
background-color: #2cabe3;
}
.main {
padding: 30px;
flex: 1;
.el-tabs__nav-wrap::after {
display: none;
}
.el-tabs {
height: 100%;
.el-tabs__content {
overflow: hidden;
position: relative;
height: calc(100% - 55px);
}
.el-tab-pane {
height: 100%;
}
}
}
}
</style>
src/views/outHistorygrouping.vue
......@@ -9,7 +9,10 @@
<!-- 智能分组 -->
<div class="outsetgrouping" id="setGroupingbox">
<div class="outsetgrouping_button">
<el-button class="outsetgrouping_button_Searchbtn" size="mini" type="primary" @click="topage1">病案质控</el-button>
<router-link target="_blank" :to="{ path: '/medicalRecordImport' }">
<el-button class="outsetgrouping_button_Searchbtn" size="mini" type="primary">DRG历史分组结果查询</el-button></router-link
>
<el-button class="outsetgrouping_button_Searchbtn" style="margin-left: 10px" size="mini" type="primary" @click="topage1">病案质控</el-button>
<el-button class="outsetgrouping_button_Searchbtn" type="primary" size="mini" @click="toPage">
<span class="s2">费用监控</span>
</el-button>
......@@ -62,13 +65,13 @@
<div class="outsetgrouping_top2_message_left">
<span class="outsetgrouping_top2_message_left_tu4"><img src="../assets/img/bianma.png" alt="" /> </span>
<div class="outsetgrouping_top2_message_left_t1">
当前入组编码:<span>{{ casehisObj ? casehisObj.drgs.code : "" }}</span>
当前分组编码:<span>{{ casehisObj ? casehisObj.drgs.code : "" }}</span>
</div>
</div>
<div class="outsetgrouping_top2_message_centert">
<span class="outsetgrouping_top2_message_centert_tu5"><img src="../assets/img/daoru.png" alt="" /></span>
<div class="outsetgrouping_top2_message_centert_t2">
入组名称:<span>{{ casehisObj ? casehisObj.drgs.name : "" }}</span>
分组名称:<span>{{ casehisObj ? casehisObj.drgs.name : "" }}</span>
</div>
</div>
<div class="outsetgrouping_top2_message_right">
......@@ -119,13 +122,13 @@
<span>操作类型:{{ item.opsOrder }}</span>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg1_text44">
<span> 入组类型:{{ item.disNature }}</span>
<span> 分组类型:{{ item.disNature }}</span>
</div>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg2">
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text3">
<span>入组编码：{{ item.code }}</span>
<span>入组名称：{{ item.coreName }}</span>
<span>分组编码：{{ item.code }}</span>
<span>分组名称：{{ item.coreName }}</span>
<span>基准点数：{{ item.score }}</span>
<span>报销类型：{{ item.magnification }}</span>
</div>
......@@ -251,7 +254,7 @@
<!-- 弹出层 -->
<el-dialog center :visible.sync="addrecordEnrollmentShow" class="fullscreen" :before-close="closeDialog" :fullscreen="true">
<!-- 病案入组 -->
<!-- 病案分组 -->
<div class="outaddrecordEnrollment" id="outaddrecordEnrollment">
<div class="outaddrecordEnrollment_search">
<div class="outaddrecordEnrollment_search_div1">
......@@ -347,13 +350,13 @@
<div class="outaddrecordEnrollment_centent_totalnum_left">
<div class="outaddrecordEnrollment_centent_totalnum_left_text1">
<span>分组编码：{{ item.code }}</span>
<span>入组名称：{{ item.coreName }}</span>
<span>分组名称：{{ item.coreName }}</span>
<span>基准点数：{{ item.score }}</span>
</div>
<div class="outaddrecordEnrollment_centent_totalnum_left_text3">
<span>预计DRG支付费用：{{ item.unitfee }}</span>
<span>入组类型：{{ item.disNature }}</span>
<span>预计DRG支付费用：{{ decimal(item.actualfee) }}</span>
<span>分组类型：{{ item.disNature }}</span>
</div>
</div>
<!-- <div class="outaddrecordEnrollment_centent_totalnum_right">
......@@ -752,6 +755,11 @@ export default {
})
.catch((error) => {});
},
toPage2() {
this.$router.push("/medicalRecordImport");
window.open(data.message);
},
},
};
</script>
......
src/views/outaddrecordEnrollment.vue
<template>
<el-dialog center :visible.sync="addrecordEnrollmentShow" :fullscreen="true">
<!-- 病案入组 -->
<!-- 病案分组 -->
<div class="outaddrecordEnrollment" id="outaddrecordEnrollment">
<div class="outaddrecordEnrollment_search">
<div class="outaddrecordEnrollment_search_message">
......@@ -50,7 +50,7 @@
<div class="outaddrecordEnrollment_centent_totalnum_left">
<div class="outaddrecordEnrollment_centent_totalnum_left_text1">
<span>分组编码：{{ item.code }}</span>
<span>入组名称：{{ item.coreName }}</span>
<span>分组名称：{{ item.coreName }}</span>
<span>基准点数：{{ item.score }}</span>
</div>
......
src/views/outpatientDetails.vue
......@@ -74,7 +74,7 @@
<!-- <span>分组:{{ HistoryInfo.doctorName }}</span> -->
<span>分组编码:{{ HistoryInfo.coreCode }}</span>
<span :title="HistoryInfo.coreName">分组名称:{{ HistoryInfo.coreName }}</span>
<span>病种分值:{{ decimal(HistoryInfo.rw) }}</span>
<span>基准点数:{{ decimal(HistoryInfo.rw) }}</span>
<span>预计DRG支付费用:{{ decimal(HistoryInfo.actualfee) }}</span>
<span>总费用:{{ decimal(HistoryInfo.totalFee) }}</span>
<span>预计盈亏:{{ decimal(HistoryInfo.profitLoss) }}</span>
......@@ -311,7 +311,7 @@
<!-- 弹出层 -->
<el-dialog center :visible.sync="addrecordEnrollmentShow" :before-close="closeDialog" class="fullscreen" :fullscreen="true">
<!-- 病案入组 -->
<!-- 病案分组 -->
<div class="outaddrecordEnrollment" id="outaddrecordEnrollment">
<div class="outaddrecordEnrollment_search">
<div class="outaddrecordEnrollment_search_div1">
......@@ -407,12 +407,12 @@
<div class="outaddrecordEnrollment_centent_totalnum_left">
<div class="outaddrecordEnrollment_centent_totalnum_left_text1">
<span>分组编码：{{ item.code }}</span>
<span>入组名称：{{ item.coreName }}</span>
<span>分组名称：{{ item.coreName }}</span>
<span>基准点数：{{ item.score }}</span>
</div>
<div class="outaddrecordEnrollment_centent_totalnum_left_text3">
<span>预计DRG支付费用：{{ item.unitfee }}</span> <span>入组类型：{{ item.disNature }}</span>
<span>预计DRG支付费用：{{ item.unitfee }}</span> <span>分组类型：{{ item.disNature }}</span>
</div>
</div>
<!-- <div class="outaddrecordEnrollment_centent_totalnum_right">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment