Skip to content

V
vue-composition-api
Commit 56b5e6e6 by 唐玉峰
Options

入组改分组

parent 2bd76526
Showing with 412 additions and 769 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/utils/echarts.js
import { nextTick } from '@vue/composition-api';
import * as echarts from 'echarts';
import { nextTick } from "@vue/composition-api";
import * as echarts from "echarts";
/**
* @param echarts初始化
......@@ -11,143 +9,146 @@ import * as echarts from 'echarts';
export function initEcharts(option, panelId) {
var svChart;
return nextTick(() => {
svChart = echarts.getInstanceByDom(document.getElementById(panelId));
if (svChart == null) {
svChart = echarts.init(document.getElementById(panelId));
}
document.getElementById(panelId).setAttribute('_echarts_instance_', '');
document.getElementById(panelId).setAttribute("_echarts_instance_", "");
svChart.clear();
svChart.setOption(option);
svChart.resize();
// 屏幕大小改变
window.addEventListener('resize', () => {
window.addEventListener("resize", () => {
svChart.resize();
});
return svChart;
})
});
}
//百分比图 智能分组
export function categoryChart(data, tcolor) {
const option = {
title: [{
title: [
{
text: data + `%`,
x: 'center',
top: '38%',
x: "center",
top: "38%",
textStyle: {
fontSize: '16', //百分比的样式
fontSize: "16", //百分比的样式
color: tcolor,
fontFamily: 'Arial',
foontWeight: '600',
fontFamily: "Arial",
foontWeight: "600",
},
},
},],
],
polar: {
radius: ['100%', '60%'],
center: ['50%', '50%'],
radius: ["100%", "60%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
type: "category",
show: false,
},
series: [{
name: '',
type: 'bar',
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 6,
showBackground: true,
backgroundStyle: {
color: '#f3fafd', //留白颜色
color: "#f3fafd", //留白颜色
},
data: [data],
coordinateSystem: 'polar',
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: tcolor, //填色颜色
},]),
},
]),
},
},],
},
},
],
};
return option;
}
//百分比图 病案入组
//百分比图 病案分组
export function categoryChart11(text, data, tcolor) {
const option = {
title: [{
title: [
{
text: text,
x: 'center',
top: '52%',
x: "center",
top: "52%",
textStyle: {
fontSize: '14', //百分比的样式
fontSize: "14", //百分比的样式
color: tcolor,
fontFamily: 'PingFang SC',
foontWeight: '300',
fontFamily: "PingFang SC",
foontWeight: "300",
},
},
{
text: data + `%`,
x: 'center',
top: '28%',
x: "center",
top: "28%",
textStyle: {
fontSize: '20', //百分比的样式
fontSize: "20", //百分比的样式
color: tcolor,
fontFamily: 'Arial',
foontWeight: '600',
fontFamily: "Arial",
foontWeight: "600",
},
},
],
polar: {
radius: ['100%', '60%'],
center: ['50%', '50%'],
radius: ["100%", "60%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
type: "category",
show: false,
},
series: [{
name: '',
type: 'bar',
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 6,
showBackground: true,
backgroundStyle: {
color: '#f3fafd', //留白颜色
color: "#f3fafd", //留白颜色
},
data: [data],
coordinateSystem: 'polar',
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: tcolor, //填色颜色
},]),
},
]),
},
},],
},
},
],
};
return option;
......
src/views/outHistorygrouping.vue
......@@ -44,13 +44,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">
......@@ -87,7 +87,7 @@
<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.coreName }}</span>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text4">
<span>主诊断编码：{{ item.disCode }}</span
......@@ -232,7 +232,7 @@ export default {
const submit = () => {
if (state.radio == "") {
Message.warning({
message: "请先选择要入组的病组",
message: "请先选择要分组的病组",
type: "warning",
});
} else {
......
src/views/outpatientDetails.vue
......@@ -299,8 +299,7 @@
import http from "../utils/http";
import { decimal } from "../utils/decimal";
import { transformTimestamp } from "../utils/formatTime";
import { Message } from "element-ui";
import { Loading } from "element-ui";
import { Loading, Message } from "element-ui";
export default {
name: "outpatientDetails",
data() {
......@@ -334,6 +333,7 @@ export default {
avgFee: "",
days: "",
profitLoss: "",
patientType: "",
},
checkindex: 0, // 初始化第一个栏块高亮
goods: [], //左侧费用类型
......@@ -612,23 +612,10 @@ export default {
},
};
</script>
<style lang="scss" scoped>
<style lang="scss">
@import "../styles/mixin.scss";
@import "../styles/media/components/outpatientDetails.scss";
// 左侧表格点击高亮背景色
::v-deep .el-table__body tr.current-row > td {
background-color: #ffff !important;
}
// 点击文本颜色
::v-deep .current-row {
color: #55a6da !important;
}
// 点击icon颜色
::v-deep .current-row .el-table__expand-icon {
color: #55a6da !important;
}
.outpatientDetails {
// height: calc(100% - 50px);
// background-color: white;
......@@ -1506,5 +1493,17 @@ export default {
}
}
}
// 左侧表格点击高亮背景色
.el-table__body tr.current-row > td {
background-color: #ffff !important;
}
// 点击文本颜色
.current-row {
color: #55a6da !important;
}
// 点击icon颜色
.current-row .el-table__expand-icon {
color: #55a6da !important;
}
}
</style>
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