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> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8" />
<title>iconfont Demo</title> <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="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="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="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css" />
<link rel="stylesheet" href="demo.css"> <link rel="stylesheet" href="demo.css" />
<link rel="stylesheet" href="iconfont.css"> <link rel="stylesheet" href="iconfont.css" />
<script src="iconfont.js"></script> <script src="iconfont.js"></script>
<!-- jQuery --> <!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
...@@ -28,18 +28,19 @@ ...@@ -28,18 +28,19 @@
margin-left: 0.5em; margin-left: 0.5em;
font-size: 22px; font-size: 22px;
color: #fff; color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE); background: linear-gradient(-45deg, #3967ff, #b500fe);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="main"> <div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"> <h1 class="logo">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"> <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> </a>
</h1>
<div class="nav-tabs"> <div class="nav-tabs">
<ul id="tabs" class="dib-box"> <ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li> <li class="dib active"><span>Unicode</span></li>
...@@ -48,12 +49,10 @@ ...@@ -48,12 +49,10 @@
</ul> </ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3111099" target="_blank" class="nav-more">查看项目</a> <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3111099" target="_blank" class="nav-more">查看项目</a>
</div> </div>
<div class="tab-container"> <div class="tab-container">
<div class="content unicode" style="display: block;"> <div class="content unicode" style="display: block">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6e7;</span> <span class="icon iconfont">&#xe6e7;</span>
<div class="name">间接费用字典</div> <div class="name">间接费用字典</div>
...@@ -62,7 +61,7 @@ ...@@ -62,7 +61,7 @@
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6bb;</span> <span class="icon iconfont">&#xe6bb;</span>
<div class="name">加入组织</div> <div class="name">加分组织</div>
<div class="code-name">&amp;#xe6bb;</div> <div class="code-name">&amp;#xe6bb;</div>
</li> </li>
...@@ -395,11 +394,10 @@ ...@@ -395,11 +394,10 @@
<div class="name">箭头 三角形</div> <div class="name">箭头 三角形</div>
<div class="code-name">&amp;#xe605;</div> <div class="code-name">&amp;#xe605;</div>
</li> </li>
</ul> </ul>
<div class="article markdown"> <div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2> <h2 id="unicode-">Unicode 引用</h2>
<hr> <hr />
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul> <ul>
...@@ -407,11 +405,14 @@ ...@@ -407,11 +405,14 @@
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li> <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul> </ul>
<blockquote> <blockquote>
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p> <p>
注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
</p>
</blockquote> </blockquote>
<p>Unicode 使用步骤如下：</p> <p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1645068566372') format('woff2'), src: url('iconfont.woff2?t=1645068566372') format('woff2'),
...@@ -420,7 +421,7 @@ ...@@ -420,7 +421,7 @@
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css" <pre><code class="language-css"
>.iconfont { >.iconfont {
font-family: "iconfont" !important; font-family: "iconfont" !important;
font-size: 16px; font-size: 16px;
...@@ -430,7 +431,7 @@ ...@@ -430,7 +431,7 @@
} }
</code></pre> </code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre> <pre>
<code class="language-html" <code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt; >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre> </code></pre>
...@@ -441,524 +442,351 @@ ...@@ -441,524 +442,351 @@
</div> </div>
<div class="content font-class"> <div class="content font-class">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-jianjiefeiyonzidian"></span> <span class="icon iconfont icon-jianjiefeiyonzidian"></span>
<div class="name"> <div class="name">间接费用字典</div>
间接费用字典 <div class="code-name">.icon-jianjiefeiyonzidian</div>
</div>
<div class="code-name">.icon-jianjiefeiyonzidian
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-jiaruzuzhi"></span> <span class="icon iconfont icon-jiaruzuzhi"></span>
<div class="name"> <div class="name">加分组织</div>
加入组织 <div class="code-name">.icon-jiaruzuzhi</div>
</div>
<div class="code-name">.icon-jiaruzuzhi
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-daoru1"></span> <span class="icon iconfont icon-daoru1"></span>
<div class="name"> <div class="name">导入</div>
导入 <div class="code-name">.icon-daoru1</div>
</div>
<div class="code-name">.icon-daoru1
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-ruyuan"></span> <span class="icon iconfont icon-ruyuan"></span>
<div class="name"> <div class="name">入院</div>
入院 <div class="code-name">.icon-ruyuan</div>
</div>
<div class="code-name">.icon-ruyuan
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-gerenyingkui"></span> <span class="icon iconfont icon-gerenyingkui"></span>
<div class="name"> <div class="name">个人盈亏</div>
个人盈亏 <div class="code-name">.icon-gerenyingkui</div>
</div>
<div class="code-name">.icon-gerenyingkui
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-tuanduibaobiao_yingkuibaobiao"></span> <span class="icon iconfont icon-tuanduibaobiao_yingkuibaobiao"></span>
<div class="name"> <div class="name">团队报表_盈亏报表</div>
团队报表_盈亏报表 <div class="code-name">.icon-tuanduibaobiao_yingkuibaobiao</div>
</div>
<div class="code-name">.icon-tuanduibaobiao_yingkuibaobiao
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yingkuibiji"></span> <span class="icon iconfont icon-yingkuibiji"></span>
<div class="name"> <div class="name">盈亏笔记</div>
盈亏笔记 <div class="code-name">.icon-yingkuibiji</div>
</div>
<div class="code-name">.icon-yingkuibiji
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-feiyong"></span> <span class="icon iconfont icon-feiyong"></span>
<div class="name"> <div class="name">费用</div>
费用 <div class="code-name">.icon-feiyong</div>
</div>
<div class="code-name">.icon-feiyong
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-zhikong"></span> <span class="icon iconfont icon-zhikong"></span>
<div class="name"> <div class="name">质控</div>
质控 <div class="code-name">.icon-zhikong</div>
</div>
<div class="code-name">.icon-zhikong
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-tubiao_huliyizhu_huliyizhu"></span> <span class="icon iconfont icon-tubiao_huliyizhu_huliyizhu"></span>
<div class="name"> <div class="name">图标_护理医嘱_护理医嘱</div>
图标_护理医嘱_护理医嘱 <div class="code-name">.icon-tubiao_huliyizhu_huliyizhu</div>
</div>
<div class="code-name">.icon-tubiao_huliyizhu_huliyizhu
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-bianzu_70"></span> <span class="icon iconfont icon-bianzu_70"></span>
<div class="name"> <div class="name">调度规则</div>
调度规则 <div class="code-name">.icon-bianzu_70</div>
</div>
<div class="code-name">.icon-bianzu_70
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-iconset0254"></span> <span class="icon iconfont icon-iconset0254"></span>
<div class="name"> <div class="name">条码</div>
条码 <div class="code-name">.icon-iconset0254</div>
</div>
<div class="code-name">.icon-iconset0254
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-qianqian-"></span> <span class="icon iconfont icon-qianqian-"></span>
<div class="name"> <div class="name">钱钱-01</div>
钱钱-01 <div class="code-name">.icon-qianqian-</div>
</div>
<div class="code-name">.icon-qianqian-
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-jiandaosvg"></span> <span class="icon iconfont icon-jiandaosvg"></span>
<div class="name"> <div class="name">剪刀svg</div>
剪刀svg <div class="code-name">.icon-jiandaosvg</div>
</div>
<div class="code-name">.icon-jiandaosvg
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-sousuo_o"></span> <span class="icon iconfont icon-sousuo_o"></span>
<div class="name"> <div class="name">搜索_o</div>
搜索_o <div class="code-name">.icon-sousuo_o</div>
</div>
<div class="code-name">.icon-sousuo_o
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-daoru"></span> <span class="icon iconfont icon-daoru"></span>
<div class="name"> <div class="name">导入</div>
导入 <div class="code-name">.icon-daoru</div>
</div>
<div class="code-name">.icon-daoru
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-ipr_tijiao"></span> <span class="icon iconfont icon-ipr_tijiao"></span>
<div class="name"> <div class="name">ipr_提交</div>
ipr_提交 <div class="code-name">.icon-ipr_tijiao</div>
</div>
<div class="code-name">.icon-ipr_tijiao
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-tingzhenqi"></span> <span class="icon iconfont icon-tingzhenqi"></span>
<div class="name"> <div class="name">听诊器</div>
听诊器 <div class="code-name">.icon-tingzhenqi</div>
</div>
<div class="code-name">.icon-tingzhenqi
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-tijianzuhe"></span> <span class="icon iconfont icon-tijianzuhe"></span>
<div class="name"> <div class="name">体检组合</div>
体检组合 <div class="code-name">.icon-tijianzuhe</div>
</div>
<div class="code-name">.icon-tijianzuhe
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-ico_yiyuanguanjia_banliruyuan"></span> <span class="icon iconfont icon-ico_yiyuanguanjia_banliruyuan"></span>
<div class="name"> <div class="name">医院</div>
医院 <div class="code-name">.icon-ico_yiyuanguanjia_banliruyuan</div>
</div>
<div class="code-name">.icon-ico_yiyuanguanjia_banliruyuan
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-keshihuapingtaiicon_pingfen"></span> <span class="icon iconfont icon-keshihuapingtaiicon_pingfen"></span>
<div class="name"> <div class="name">可视化平台icon_评分</div>
可视化平台icon_评分 <div class="code-name">.icon-keshihuapingtaiicon_pingfen</div>
</div>
<div class="code-name">.icon-keshihuapingtaiicon_pingfen
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-fenzu"></span> <span class="icon iconfont icon-fenzu"></span>
<div class="name"> <div class="name">清华-人员管理off</div>
清华-人员管理off <div class="code-name">.icon-fenzu</div>
</div>
<div class="code-name">.icon-fenzu
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-chuyuandaiyao"></span> <span class="icon iconfont icon-chuyuandaiyao"></span>
<div class="name"> <div class="name">出入院流程</div>
出入院流程 <div class="code-name">.icon-chuyuandaiyao</div>
</div>
<div class="code-name">.icon-chuyuandaiyao
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yishengtuandui"></span> <span class="icon iconfont icon-yishengtuandui"></span>
<div class="name"> <div class="name">医生团队</div>
医生团队 <div class="code-name">.icon-yishengtuandui</div>
</div>
<div class="code-name">.icon-yishengtuandui
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yisheng"></span> <span class="icon iconfont icon-yisheng"></span>
<div class="name"> <div class="name">医生</div>
医生 <div class="code-name">.icon-yisheng</div>
</div>
<div class="code-name">.icon-yisheng
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-keshi"></span> <span class="icon iconfont icon-keshi"></span>
<div class="name"> <div class="name">科室</div>
科室 <div class="code-name">.icon-keshi</div>
</div>
<div class="code-name">.icon-keshi
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-shiyuanxingjibingjiance"></span> <span class="icon iconfont icon-shiyuanxingjibingjiance"></span>
<div class="name"> <div class="name">食源性疾病监测</div>
食源性疾病监测 <div class="code-name">.icon-shiyuanxingjibingjiance</div>
</div>
<div class="code-name">.icon-shiyuanxingjibingjiance
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-niandu"></span> <span class="icon iconfont icon-niandu"></span>
<div class="name"> <div class="name">年度</div>
年度 <div class="code-name">.icon-niandu</div>
</div>
<div class="code-name">.icon-niandu
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yisheng1"></span> <span class="icon iconfont icon-yisheng1"></span>
<div class="name"> <div class="name">医生</div>
医生 <div class="code-name">.icon-yisheng1</div>
</div>
<div class="code-name">.icon-yisheng1
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yuce"></span> <span class="icon iconfont icon-yuce"></span>
<div class="name"> <div class="name">预测</div>
预测 <div class="code-name">.icon-yuce</div>
</div>
<div class="code-name">.icon-yuce
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-fenxi"></span> <span class="icon iconfont icon-fenxi"></span>
<div class="name"> <div class="name">分析</div>
分析 <div class="code-name">.icon-fenxi</div>
</div>
<div class="code-name">.icon-fenxi
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-icon-test"></span> <span class="icon iconfont icon-icon-test"></span>
<div class="name"> <div class="name">预算控制</div>
预算控制 <div class="code-name">.icon-icon-test</div>
</div>
<div class="code-name">.icon-icon-test
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-fenxi1"></span> <span class="icon iconfont icon-fenxi1"></span>
<div class="name"> <div class="name">分析</div>
分析 <div class="code-name">.icon-fenxi1</div>
</div>
<div class="code-name">.icon-fenxi1
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yisheng666"></span> <span class="icon iconfont icon-yisheng666"></span>
<div class="name"> <div class="name">医生</div>
医生 <div class="code-name">.icon-yisheng666</div>
</div>
<div class="code-name">.icon-yisheng666
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-shoushudingdan"></span> <span class="icon iconfont icon-shoushudingdan"></span>
<div class="name"> <div class="name">手术订单</div>
手术订单 <div class="code-name">.icon-shoushudingdan</div>
</div>
<div class="code-name">.icon-shoushudingdan
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yusuan"></span> <span class="icon iconfont icon-yusuan"></span>
<div class="name"> <div class="name">预算</div>
预算 <div class="code-name">.icon-yusuan</div>
</div>
<div class="code-name">.icon-yusuan
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-zhanghaoguanli"></span> <span class="icon iconfont icon-zhanghaoguanli"></span>
<div class="name"> <div class="name">账号管理</div>
账号管理 <div class="code-name">.icon-zhanghaoguanli</div>
</div>
<div class="code-name">.icon-zhanghaoguanli
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-jibingguanli"></span> <span class="icon iconfont icon-jibingguanli"></span>
<div class="name"> <div class="name">疾病管理</div>
疾病管理 <div class="code-name">.icon-jibingguanli</div>
</div>
<div class="code-name">.icon-jibingguanli
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-keshikucunguanli"></span> <span class="icon iconfont icon-keshikucunguanli"></span>
<div class="name"> <div class="name">科室库存管理</div>
科室库存管理 <div class="code-name">.icon-keshikucunguanli</div>
</div>
<div class="code-name">.icon-keshikucunguanli
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-fenxi2"></span> <span class="icon iconfont icon-fenxi2"></span>
<div class="name"> <div class="name">分析</div>
分析 <div class="code-name">.icon-fenxi2</div>
</div>
<div class="code-name">.icon-fenxi2
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yisheng2"></span> <span class="icon iconfont icon-yisheng2"></span>
<div class="name"> <div class="name">医生</div>
医生 <div class="code-name">.icon-yisheng2</div>
</div>
<div class="code-name">.icon-yisheng2
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-keshigongzuoliang"></span> <span class="icon iconfont icon-keshigongzuoliang"></span>
<div class="name"> <div class="name">科室工作量</div>
科室工作量 <div class="code-name">.icon-keshigongzuoliang</div>
</div>
<div class="code-name">.icon-keshigongzuoliang
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-quankeyiliaoke"></span> <span class="icon iconfont icon-quankeyiliaoke"></span>
<div class="name"> <div class="name">全科医疗科</div>
全科医疗科 <div class="code-name">.icon-quankeyiliaoke</div>
</div>
<div class="code-name">.icon-quankeyiliaoke
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-zhanghaoguanli1"></span> <span class="icon iconfont icon-zhanghaoguanli1"></span>
<div class="name"> <div class="name">账号管理</div>
账号管理 <div class="code-name">.icon-zhanghaoguanli1</div>
</div>
<div class="code-name">.icon-zhanghaoguanli1
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-ruanzhuyuce"></span> <span class="icon iconfont icon-ruanzhuyuce"></span>
<div class="name"> <div class="name">软著预测</div>
软著预测 <div class="code-name">.icon-ruanzhuyuce</div>
</div>
<div class="code-name">.icon-ruanzhuyuce
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-keshitongji1"></span> <span class="icon iconfont icon-keshitongji1"></span>
<div class="name"> <div class="name">科室统计1</div>
科室统计1 <div class="code-name">.icon-keshitongji1</div>
</div>
<div class="code-name">.icon-keshitongji1
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yusuan1"></span> <span class="icon iconfont icon-yusuan1"></span>
<div class="name"> <div class="name">预算</div>
预算 <div class="code-name">.icon-yusuan1</div>
</div>
<div class="code-name">.icon-yusuan1
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-keshi2"></span> <span class="icon iconfont icon-keshi2"></span>
<div class="name"> <div class="name">科室</div>
科室 <div class="code-name">.icon-keshi2</div>
</div>
<div class="code-name">.icon-keshi2
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-02TPM_yusuankemu"></span> <span class="icon iconfont icon-02TPM_yusuankemu"></span>
<div class="name"> <div class="name">02 TPM_预算科目</div>
02 TPM_预算科目 <div class="code-name">.icon-02TPM_yusuankemu</div>
</div>
<div class="code-name">.icon-02TPM_yusuankemu
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-quankexue"></span> <span class="icon iconfont icon-quankexue"></span>
<div class="name"> <div class="name">全科学</div>
全科学 <div class="code-name">.icon-quankexue</div>
</div>
<div class="code-name">.icon-quankexue
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-jibing"></span> <span class="icon iconfont icon-jibing"></span>
<div class="name"> <div class="name">疾病</div>
疾病 <div class="code-name">.icon-jibing</div>
</div>
<div class="code-name">.icon-jibing
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-daochu"></span> <span class="icon iconfont icon-daochu"></span>
<div class="name"> <div class="name">导出</div>
导出 <div class="code-name">.icon-daochu</div>
</div>
<div class="code-name">.icon-daochu
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-xinrenzhinan"></span> <span class="icon iconfont icon-xinrenzhinan"></span>
<div class="name"> <div class="name">新人指南</div>
新人指南 <div class="code-name">.icon-xinrenzhinan</div>
</div>
<div class="code-name">.icon-xinrenzhinan
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yinhangka"></span> <span class="icon iconfont icon-yinhangka"></span>
<div class="name"> <div class="name">银行卡</div>
银行卡 <div class="code-name">.icon-yinhangka</div>
</div>
<div class="code-name">.icon-yinhangka
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-fufeiguanli"></span> <span class="icon iconfont icon-fufeiguanli"></span>
<div class="name"> <div class="name">付费管理</div>
付费管理 <div class="code-name">.icon-fufeiguanli</div>
</div>
<div class="code-name">.icon-fufeiguanli
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-ziliaoshouce-xianxing"></span> <span class="icon iconfont icon-ziliaoshouce-xianxing"></span>
<div class="name"> <div class="name">22资料、手册-线性</div>
22资料、手册-线性 <div class="code-name">.icon-ziliaoshouce-xianxing</div>
</div>
<div class="code-name">.icon-ziliaoshouce-xianxing
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-jiantou1"></span> <span class="icon iconfont icon-jiantou1"></span>
<div class="name"> <div class="name">箭头 三角形</div>
箭头 三角形 <div class="code-name">.icon-jiantou1</div>
</div>
<div class="code-name">.icon-jiantou1
</div>
</li> </li>
</ul> </ul>
<div class="article markdown"> <div class="article markdown">
<h2 id="font-class-">font-class 引用</h2> <h2 id="font-class-">font-class 引用</h2>
<hr> <hr />
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p> <p>与 Unicode 使用方式相比，具有如下特点：</p>
...@@ -968,20 +796,18 @@ ...@@ -968,20 +796,18 @@
</ul> </ul>
<p>使用步骤如下：</p> <p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> <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> </code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> <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> </code></pre>
<blockquote> <blockquote>
<p>" <p>" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="content symbol"> <div class="content symbol">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jianjiefeiyonzidian"></use> <use xlink:href="#icon-jianjiefeiyonzidian"></use>
...@@ -994,7 +820,7 @@ ...@@ -994,7 +820,7 @@
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiaruzuzhi"></use> <use xlink:href="#icon-jiaruzuzhi"></use>
</svg> </svg>
<div class="name">加入组织</div> <div class="name">加分组织</div>
<div class="code-name">#icon-jiaruzuzhi</div> <div class="code-name">#icon-jiaruzuzhi</div>
</li> </li>
...@@ -1437,14 +1263,15 @@ ...@@ -1437,14 +1263,15 @@
<div class="name">箭头 三角形</div> <div class="name">箭头 三角形</div>
<div class="code-name">#icon-jiantou1</div> <div class="code-name">#icon-jiantou1</div>
</li> </li>
</ul> </ul>
<div class="article markdown"> <div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2> <h2 id="symbol-">Symbol 引用</h2>
<hr> <hr />
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> <p>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p> 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
</p>
<ul> <ul>
<li>支持多色图标了，不再受单色限制。</li> <li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
...@@ -1453,10 +1280,10 @@ ...@@ -1453,10 +1280,10 @@
</ul> </ul>
<p>使用步骤如下：</p> <p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> <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> </code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt; <pre><code class="language-html">&lt;style&gt;
.icon { .icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
...@@ -1467,33 +1294,32 @@ ...@@ -1467,33 +1294,32 @@
&lt;/style&gt; &lt;/style&gt;
</code></pre> </code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> <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;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt; &lt;/svg&gt;
</code></pre> </code></pre>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
$(document).ready(function () { $(document).ready(function () {
$('.tab-container .content:first').show() $(".tab-container .content:first").show();
$('#tabs li').click(function (e) { $("#tabs li").click(function (e) {
var tabContent = $('.tab-container .content') var tabContent = $(".tab-container .content");
var index = $(this).index() var index = $(this).index();
if ($(this).hasClass('active')) { if ($(this).hasClass("active")) {
return return;
} else { } else {
$('#tabs li').removeClass('active') $("#tabs li").removeClass("active");
$(this).addClass('active') $(this).addClass("active");
tabContent.hide().eq(index).fadeIn() tabContent.hide().eq(index).fadeIn();
} }
}) });
}) });
</script> </script>
</body> </body>
</html> </html>
src/assets/font/c/iconfont.json
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
}, },
{ {
"icon_id": "8304933", "icon_id": "8304933",
"name": "加入组织", "name": "加分组织",
"font_class": "jiaruzuzhi", "font_class": "jiaruzuzhi",
"unicode": "e6bb", "unicode": "e6bb",
"unicode_decimal": 59067 "unicode_decimal": 59067
......
src/assets/font/complete/demo_index.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8" />
<title>iconfont Demo</title> <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="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="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="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css" />
<link rel="stylesheet" href="demo.css"> <link rel="stylesheet" href="demo.css" />
<link rel="stylesheet" href="iconfont.css"> <link rel="stylesheet" href="iconfont.css" />
<script src="iconfont.js"></script> <script src="iconfont.js"></script>
<!-- jQuery --> <!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
...@@ -28,18 +28,19 @@ ...@@ -28,18 +28,19 @@
margin-left: 0.5em; margin-left: 0.5em;
font-size: 22px; font-size: 22px;
color: #fff; color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE); background: linear-gradient(-45deg, #3967ff, #b500fe);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="main"> <div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"> <h1 class="logo">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"> <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> </a>
</h1>
<div class="nav-tabs"> <div class="nav-tabs">
<ul id="tabs" class="dib-box"> <ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li> <li class="dib active"><span>Unicode</span></li>
...@@ -48,12 +49,10 @@ ...@@ -48,12 +49,10 @@
</ul> </ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3111099" target="_blank" class="nav-more">查看项目</a> <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3111099" target="_blank" class="nav-more">查看项目</a>
</div> </div>
<div class="tab-container"> <div class="tab-container">
<div class="content unicode" style="display: block;"> <div class="content unicode" style="display: block">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6bc;</span> <span class="icon iconfont">&#xe6bc;</span>
<div class="name">质控图</div> <div class="name">质控图</div>
...@@ -80,7 +79,7 @@ ...@@ -80,7 +79,7 @@
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6bb;</span> <span class="icon iconfont">&#xe6bb;</span>
<div class="name">加入组织</div> <div class="name">加分组织</div>
<div class="code-name">&amp;#xe6bb;</div> <div class="code-name">&amp;#xe6bb;</div>
</li> </li>
...@@ -413,11 +412,10 @@ ...@@ -413,11 +412,10 @@
<div class="name">箭头 三角形</div> <div class="name">箭头 三角形</div>
<div class="code-name">&amp;#xe605;</div> <div class="code-name">&amp;#xe605;</div>
</li> </li>
</ul> </ul>
<div class="article markdown"> <div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2> <h2 id="unicode-">Unicode 引用</h2>
<hr> <hr />
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul> <ul>
...@@ -425,11 +423,14 @@ ...@@ -425,11 +423,14 @@
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li> <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul> </ul>
<blockquote> <blockquote>
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p> <p>
注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
</p>
</blockquote> </blockquote>
<p>Unicode 使用步骤如下：</p> <p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1648635086881') format('woff2'), src: url('iconfont.woff2?t=1648635086881') format('woff2'),
...@@ -438,7 +439,7 @@ ...@@ -438,7 +439,7 @@
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css" <pre><code class="language-css"
>.iconfont { >.iconfont {
font-family: "iconfont" !important; font-family: "iconfont" !important;
font-size: 16px; font-size: 16px;
...@@ -448,7 +449,7 @@ ...@@ -448,7 +449,7 @@
} }
</code></pre> </code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre> <pre>
<code class="language-html" <code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt; >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre> </code></pre>
...@@ -459,551 +460,369 @@ ...@@ -459,551 +460,369 @@
</div> </div>
<div class="content font-class"> <div class="content font-class">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-zhkt"></span> <span class="icon iconfont icon-zhkt"></span>
<div class="name"> <div class="name">质控图</div>
质控图 <div class="code-name">.icon-zhkt</div>
</div>
<div class="code-name">.icon-zhkt
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-guizeguanli-"></span> <span class="icon iconfont icon-guizeguanli-"></span>
<div class="name"> <div class="name">规则管理-01</div>
规则管理-01 <div class="code-name">.icon-guizeguanli-</div>
</div>
<div class="code-name">.icon-guizeguanli-
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-shenhezhuangtai"></span> <span class="icon iconfont icon-shenhezhuangtai"></span>
<div class="name"> <div class="name">审核状态</div>
审核状态 <div class="code-name">.icon-shenhezhuangtai</div>
</div>
<div class="code-name">.icon-shenhezhuangtai
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-jianjiefeiyonzidian"></span> <span class="icon iconfont icon-jianjiefeiyonzidian"></span>
<div class="name"> <div class="name">间接费用字典</div>
间接费用字典 <div class="code-name">.icon-jianjiefeiyonzidian</div>
</div>
<div class="code-name">.icon-jianjiefeiyonzidian
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-jiaruzuzhi"></span> <span class="icon iconfont icon-jiaruzuzhi"></span>
<div class="name"> <div class="name">加分组织</div>
加入组织 <div class="code-name">.icon-jiaruzuzhi</div>
</div>
<div class="code-name">.icon-jiaruzuzhi
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-daoru1"></span> <span class="icon iconfont icon-daoru1"></span>
<div class="name"> <div class="name">导入</div>
导入 <div class="code-name">.icon-daoru1</div>
</div>
<div class="code-name">.icon-daoru1
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-ruyuan"></span> <span class="icon iconfont icon-ruyuan"></span>
<div class="name"> <div class="name">入院</div>
入院 <div class="code-name">.icon-ruyuan</div>
</div>
<div class="code-name">.icon-ruyuan
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-gerenyingkui"></span> <span class="icon iconfont icon-gerenyingkui"></span>
<div class="name"> <div class="name">个人盈亏</div>
个人盈亏 <div class="code-name">.icon-gerenyingkui</div>
</div>
<div class="code-name">.icon-gerenyingkui
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-tuanduibaobiao_yingkuibaobiao"></span> <span class="icon iconfont icon-tuanduibaobiao_yingkuibaobiao"></span>
<div class="name"> <div class="name">团队报表_盈亏报表</div>
团队报表_盈亏报表 <div class="code-name">.icon-tuanduibaobiao_yingkuibaobiao</div>
</div>
<div class="code-name">.icon-tuanduibaobiao_yingkuibaobiao
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yingkuibiji"></span> <span class="icon iconfont icon-yingkuibiji"></span>
<div class="name"> <div class="name">盈亏笔记</div>
盈亏笔记 <div class="code-name">.icon-yingkuibiji</div>
</div>
<div class="code-name">.icon-yingkuibiji
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-feiyong"></span> <span class="icon iconfont icon-feiyong"></span>
<div class="name"> <div class="name">费用</div>
费用 <div class="code-name">.icon-feiyong</div>
</div>
<div class="code-name">.icon-feiyong
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-zhikong"></span> <span class="icon iconfont icon-zhikong"></span>
<div class="name"> <div class="name">质控</div>
质控 <div class="code-name">.icon-zhikong</div>
</div>
<div class="code-name">.icon-zhikong
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-tubiao_huliyizhu_huliyizhu"></span> <span class="icon iconfont icon-tubiao_huliyizhu_huliyizhu"></span>
<div class="name"> <div class="name">图标_护理医嘱_护理医嘱</div>
图标_护理医嘱_护理医嘱 <div class="code-name">.icon-tubiao_huliyizhu_huliyizhu</div>
</div>
<div class="code-name">.icon-tubiao_huliyizhu_huliyizhu
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-bianzu_70"></span> <span class="icon iconfont icon-bianzu_70"></span>
<div class="name"> <div class="name">调度规则</div>
调度规则 <div class="code-name">.icon-bianzu_70</div>
</div>
<div class="code-name">.icon-bianzu_70
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-iconset0254"></span> <span class="icon iconfont icon-iconset0254"></span>
<div class="name"> <div class="name">条码</div>
条码 <div class="code-name">.icon-iconset0254</div>
</div>
<div class="code-name">.icon-iconset0254
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-qianqian-"></span> <span class="icon iconfont icon-qianqian-"></span>
<div class="name"> <div class="name">钱钱-01</div>
钱钱-01 <div class="code-name">.icon-qianqian-</div>
</div>
<div class="code-name">.icon-qianqian-
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-jiandaosvg"></span> <span class="icon iconfont icon-jiandaosvg"></span>
<div class="name"> <div class="name">剪刀svg</div>
剪刀svg <div class="code-name">.icon-jiandaosvg</div>
</div>
<div class="code-name">.icon-jiandaosvg
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-sousuo_o"></span> <span class="icon iconfont icon-sousuo_o"></span>
<div class="name"> <div class="name">搜索_o</div>
搜索_o <div class="code-name">.icon-sousuo_o</div>
</div>
<div class="code-name">.icon-sousuo_o
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-daoru"></span> <span class="icon iconfont icon-daoru"></span>
<div class="name"> <div class="name">导入</div>
导入 <div class="code-name">.icon-daoru</div>
</div>
<div class="code-name">.icon-daoru
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-ipr_tijiao"></span> <span class="icon iconfont icon-ipr_tijiao"></span>
<div class="name"> <div class="name">ipr_提交</div>
ipr_提交 <div class="code-name">.icon-ipr_tijiao</div>
</div>
<div class="code-name">.icon-ipr_tijiao
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-tingzhenqi"></span> <span class="icon iconfont icon-tingzhenqi"></span>
<div class="name"> <div class="name">听诊器</div>
听诊器 <div class="code-name">.icon-tingzhenqi</div>
</div>
<div class="code-name">.icon-tingzhenqi
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-tijianzuhe"></span> <span class="icon iconfont icon-tijianzuhe"></span>
<div class="name"> <div class="name">体检组合</div>
体检组合 <div class="code-name">.icon-tijianzuhe</div>
</div>
<div class="code-name">.icon-tijianzuhe
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-ico_yiyuanguanjia_banliruyuan"></span> <span class="icon iconfont icon-ico_yiyuanguanjia_banliruyuan"></span>
<div class="name"> <div class="name">医院</div>
医院 <div class="code-name">.icon-ico_yiyuanguanjia_banliruyuan</div>
</div>
<div class="code-name">.icon-ico_yiyuanguanjia_banliruyuan
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-keshihuapingtaiicon_pingfen"></span> <span class="icon iconfont icon-keshihuapingtaiicon_pingfen"></span>
<div class="name"> <div class="name">可视化平台icon_评分</div>
可视化平台icon_评分 <div class="code-name">.icon-keshihuapingtaiicon_pingfen</div>
</div>
<div class="code-name">.icon-keshihuapingtaiicon_pingfen
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-fenzu"></span> <span class="icon iconfont icon-fenzu"></span>
<div class="name"> <div class="name">清华-人员管理off</div>
清华-人员管理off <div class="code-name">.icon-fenzu</div>
</div>
<div class="code-name">.icon-fenzu
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-chuyuandaiyao"></span> <span class="icon iconfont icon-chuyuandaiyao"></span>
<div class="name"> <div class="name">出入院流程</div>
出入院流程 <div class="code-name">.icon-chuyuandaiyao</div>
</div>
<div class="code-name">.icon-chuyuandaiyao
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yishengtuandui"></span> <span class="icon iconfont icon-yishengtuandui"></span>
<div class="name"> <div class="name">医生团队</div>
医生团队 <div class="code-name">.icon-yishengtuandui</div>
</div>
<div class="code-name">.icon-yishengtuandui
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yisheng"></span> <span class="icon iconfont icon-yisheng"></span>
<div class="name"> <div class="name">医生</div>
医生 <div class="code-name">.icon-yisheng</div>
</div>
<div class="code-name">.icon-yisheng
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-keshi"></span> <span class="icon iconfont icon-keshi"></span>
<div class="name"> <div class="name">科室</div>
科室 <div class="code-name">.icon-keshi</div>
</div>
<div class="code-name">.icon-keshi
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-shiyuanxingjibingjiance"></span> <span class="icon iconfont icon-shiyuanxingjibingjiance"></span>
<div class="name"> <div class="name">食源性疾病监测</div>
食源性疾病监测 <div class="code-name">.icon-shiyuanxingjibingjiance</div>
</div>
<div class="code-name">.icon-shiyuanxingjibingjiance
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-niandu"></span> <span class="icon iconfont icon-niandu"></span>
<div class="name"> <div class="name">年度</div>
年度 <div class="code-name">.icon-niandu</div>
</div>
<div class="code-name">.icon-niandu
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yisheng1"></span> <span class="icon iconfont icon-yisheng1"></span>
<div class="name"> <div class="name">医生</div>
医生 <div class="code-name">.icon-yisheng1</div>
</div>
<div class="code-name">.icon-yisheng1
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yuce"></span> <span class="icon iconfont icon-yuce"></span>
<div class="name"> <div class="name">预测</div>
预测 <div class="code-name">.icon-yuce</div>
</div>
<div class="code-name">.icon-yuce
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-fenxi"></span> <span class="icon iconfont icon-fenxi"></span>
<div class="name"> <div class="name">分析</div>
分析 <div class="code-name">.icon-fenxi</div>
</div>
<div class="code-name">.icon-fenxi
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-icon-test"></span> <span class="icon iconfont icon-icon-test"></span>
<div class="name"> <div class="name">预算控制</div>
预算控制 <div class="code-name">.icon-icon-test</div>
</div>
<div class="code-name">.icon-icon-test
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-fenxi1"></span> <span class="icon iconfont icon-fenxi1"></span>
<div class="name"> <div class="name">分析</div>
分析 <div class="code-name">.icon-fenxi1</div>
</div>
<div class="code-name">.icon-fenxi1
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yisheng666"></span> <span class="icon iconfont icon-yisheng666"></span>
<div class="name"> <div class="name">医生</div>
医生 <div class="code-name">.icon-yisheng666</div>
</div>
<div class="code-name">.icon-yisheng666
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-shoushudingdan"></span> <span class="icon iconfont icon-shoushudingdan"></span>
<div class="name"> <div class="name">手术订单</div>
手术订单 <div class="code-name">.icon-shoushudingdan</div>
</div>
<div class="code-name">.icon-shoushudingdan
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yusuan"></span> <span class="icon iconfont icon-yusuan"></span>
<div class="name"> <div class="name">预算</div>
预算 <div class="code-name">.icon-yusuan</div>
</div>
<div class="code-name">.icon-yusuan
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-zhanghaoguanli"></span> <span class="icon iconfont icon-zhanghaoguanli"></span>
<div class="name"> <div class="name">账号管理</div>
账号管理 <div class="code-name">.icon-zhanghaoguanli</div>
</div>
<div class="code-name">.icon-zhanghaoguanli
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-jibingguanli"></span> <span class="icon iconfont icon-jibingguanli"></span>
<div class="name"> <div class="name">疾病管理</div>
疾病管理 <div class="code-name">.icon-jibingguanli</div>
</div>
<div class="code-name">.icon-jibingguanli
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-keshikucunguanli"></span> <span class="icon iconfont icon-keshikucunguanli"></span>
<div class="name"> <div class="name">科室库存管理</div>
科室库存管理 <div class="code-name">.icon-keshikucunguanli</div>
</div>
<div class="code-name">.icon-keshikucunguanli
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-fenxi2"></span> <span class="icon iconfont icon-fenxi2"></span>
<div class="name"> <div class="name">分析</div>
分析 <div class="code-name">.icon-fenxi2</div>
</div>
<div class="code-name">.icon-fenxi2
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yisheng2"></span> <span class="icon iconfont icon-yisheng2"></span>
<div class="name"> <div class="name">医生</div>
医生 <div class="code-name">.icon-yisheng2</div>
</div>
<div class="code-name">.icon-yisheng2
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-keshigongzuoliang"></span> <span class="icon iconfont icon-keshigongzuoliang"></span>
<div class="name"> <div class="name">科室工作量</div>
科室工作量 <div class="code-name">.icon-keshigongzuoliang</div>
</div>
<div class="code-name">.icon-keshigongzuoliang
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-quankeyiliaoke"></span> <span class="icon iconfont icon-quankeyiliaoke"></span>
<div class="name"> <div class="name">全科医疗科</div>
全科医疗科 <div class="code-name">.icon-quankeyiliaoke</div>
</div>
<div class="code-name">.icon-quankeyiliaoke
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-zhanghaoguanli1"></span> <span class="icon iconfont icon-zhanghaoguanli1"></span>
<div class="name"> <div class="name">账号管理</div>
账号管理 <div class="code-name">.icon-zhanghaoguanli1</div>
</div>
<div class="code-name">.icon-zhanghaoguanli1
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-ruanzhuyuce"></span> <span class="icon iconfont icon-ruanzhuyuce"></span>
<div class="name"> <div class="name">软著预测</div>
软著预测 <div class="code-name">.icon-ruanzhuyuce</div>
</div>
<div class="code-name">.icon-ruanzhuyuce
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-keshitongji1"></span> <span class="icon iconfont icon-keshitongji1"></span>
<div class="name"> <div class="name">科室统计1</div>
科室统计1 <div class="code-name">.icon-keshitongji1</div>
</div>
<div class="code-name">.icon-keshitongji1
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yusuan1"></span> <span class="icon iconfont icon-yusuan1"></span>
<div class="name"> <div class="name">预算</div>
预算 <div class="code-name">.icon-yusuan1</div>
</div>
<div class="code-name">.icon-yusuan1
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-keshi2"></span> <span class="icon iconfont icon-keshi2"></span>
<div class="name"> <div class="name">科室</div>
科室 <div class="code-name">.icon-keshi2</div>
</div>
<div class="code-name">.icon-keshi2
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-02TPM_yusuankemu"></span> <span class="icon iconfont icon-02TPM_yusuankemu"></span>
<div class="name"> <div class="name">02 TPM_预算科目</div>
02 TPM_预算科目 <div class="code-name">.icon-02TPM_yusuankemu</div>
</div>
<div class="code-name">.icon-02TPM_yusuankemu
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-quankexue"></span> <span class="icon iconfont icon-quankexue"></span>
<div class="name"> <div class="name">全科学</div>
全科学 <div class="code-name">.icon-quankexue</div>
</div>
<div class="code-name">.icon-quankexue
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-jibing"></span> <span class="icon iconfont icon-jibing"></span>
<div class="name"> <div class="name">疾病</div>
疾病 <div class="code-name">.icon-jibing</div>
</div>
<div class="code-name">.icon-jibing
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-daochu"></span> <span class="icon iconfont icon-daochu"></span>
<div class="name"> <div class="name">导出</div>
导出 <div class="code-name">.icon-daochu</div>
</div>
<div class="code-name">.icon-daochu
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-xinrenzhinan"></span> <span class="icon iconfont icon-xinrenzhinan"></span>
<div class="name"> <div class="name">新人指南</div>
新人指南 <div class="code-name">.icon-xinrenzhinan</div>
</div>
<div class="code-name">.icon-xinrenzhinan
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yinhangka"></span> <span class="icon iconfont icon-yinhangka"></span>
<div class="name"> <div class="name">银行卡</div>
银行卡 <div class="code-name">.icon-yinhangka</div>
</div>
<div class="code-name">.icon-yinhangka
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-fufeiguanli"></span> <span class="icon iconfont icon-fufeiguanli"></span>
<div class="name"> <div class="name">付费管理</div>
付费管理 <div class="code-name">.icon-fufeiguanli</div>
</div>
<div class="code-name">.icon-fufeiguanli
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-ziliaoshouce-xianxing"></span> <span class="icon iconfont icon-ziliaoshouce-xianxing"></span>
<div class="name"> <div class="name">22资料、手册-线性</div>
22资料、手册-线性 <div class="code-name">.icon-ziliaoshouce-xianxing</div>
</div>
<div class="code-name">.icon-ziliaoshouce-xianxing
</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-jiantou1"></span> <span class="icon iconfont icon-jiantou1"></span>
<div class="name"> <div class="name">箭头 三角形</div>
箭头 三角形 <div class="code-name">.icon-jiantou1</div>
</div>
<div class="code-name">.icon-jiantou1
</div>
</li> </li>
</ul> </ul>
<div class="article markdown"> <div class="article markdown">
<h2 id="font-class-">font-class 引用</h2> <h2 id="font-class-">font-class 引用</h2>
<hr> <hr />
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p> <p>与 Unicode 使用方式相比，具有如下特点：</p>
...@@ -1013,20 +832,18 @@ ...@@ -1013,20 +832,18 @@
</ul> </ul>
<p>使用步骤如下：</p> <p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> <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> </code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> <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> </code></pre>
<blockquote> <blockquote>
<p>" <p>" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="content symbol"> <div class="content symbol">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhkt"></use> <use xlink:href="#icon-zhkt"></use>
...@@ -1063,7 +880,7 @@ ...@@ -1063,7 +880,7 @@
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiaruzuzhi"></use> <use xlink:href="#icon-jiaruzuzhi"></use>
</svg> </svg>
<div class="name">加入组织</div> <div class="name">加分组织</div>
<div class="code-name">#icon-jiaruzuzhi</div> <div class="code-name">#icon-jiaruzuzhi</div>
</li> </li>
...@@ -1506,14 +1323,15 @@ ...@@ -1506,14 +1323,15 @@
<div class="name">箭头 三角形</div> <div class="name">箭头 三角形</div>
<div class="code-name">#icon-jiantou1</div> <div class="code-name">#icon-jiantou1</div>
</li> </li>
</ul> </ul>
<div class="article markdown"> <div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2> <h2 id="symbol-">Symbol 引用</h2>
<hr> <hr />
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> <p>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p> 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
</p>
<ul> <ul>
<li>支持多色图标了，不再受单色限制。</li> <li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
...@@ -1522,10 +1340,10 @@ ...@@ -1522,10 +1340,10 @@
</ul> </ul>
<p>使用步骤如下：</p> <p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> <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> </code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt; <pre><code class="language-html">&lt;style&gt;
.icon { .icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
...@@ -1536,33 +1354,32 @@ ...@@ -1536,33 +1354,32 @@
&lt;/style&gt; &lt;/style&gt;
</code></pre> </code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> <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;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt; &lt;/svg&gt;
</code></pre> </code></pre>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
$(document).ready(function () { $(document).ready(function () {
$('.tab-container .content:first').show() $(".tab-container .content:first").show();
$('#tabs li').click(function (e) { $("#tabs li").click(function (e) {
var tabContent = $('.tab-container .content') var tabContent = $(".tab-container .content");
var index = $(this).index() var index = $(this).index();
if ($(this).hasClass('active')) { if ($(this).hasClass("active")) {
return return;
} else { } else {
$('#tabs li').removeClass('active') $("#tabs li").removeClass("active");
$(this).addClass('active') $(this).addClass("active");
tabContent.hide().eq(index).fadeIn() tabContent.hide().eq(index).fadeIn();
} }
}) });
}) });
</script> </script>
</body> </body>
</html> </html>
src/assets/font/complete/iconfont.json
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
}, },
{ {
"icon_id": "8304933", "icon_id": "8304933",
"name": "加入组织", "name": "加分组织",
"font_class": "jiaruzuzhi", "font_class": "jiaruzuzhi",
"unicode": "e6bb", "unicode": "e6bb",
"unicode_decimal": 59067 "unicode_decimal": 59067
......
src/utils/echarts.js
import { nextTick } from '@vue/composition-api'; import { nextTick } from "@vue/composition-api";
import * as echarts from 'echarts'; import * as echarts from "echarts";
/** /**
* @param echarts初始化 * @param echarts初始化
...@@ -11,143 +9,146 @@ import * as echarts from 'echarts'; ...@@ -11,143 +9,146 @@ import * as echarts from 'echarts';
export function initEcharts(option, panelId) { export function initEcharts(option, panelId) {
var svChart; var svChart;
return nextTick(() => { return nextTick(() => {
svChart = echarts.getInstanceByDom(document.getElementById(panelId)); svChart = echarts.getInstanceByDom(document.getElementById(panelId));
if (svChart == null) { if (svChart == null) {
svChart = echarts.init(document.getElementById(panelId)); svChart = echarts.init(document.getElementById(panelId));
} }
document.getElementById(panelId).setAttribute('_echarts_instance_', ''); document.getElementById(panelId).setAttribute("_echarts_instance_", "");
svChart.clear(); svChart.clear();
svChart.setOption(option); svChart.setOption(option);
svChart.resize(); svChart.resize();
// 屏幕大小改变 // 屏幕大小改变
window.addEventListener('resize', () => { window.addEventListener("resize", () => {
svChart.resize(); svChart.resize();
}); });
return svChart; return svChart;
}) });
} }
//百分比图 智能分组 //百分比图 智能分组
export function categoryChart(data, tcolor) { export function categoryChart(data, tcolor) {
const option = { const option = {
title: [{ title: [
{
text: data + `%`, text: data + `%`,
x: 'center', x: "center",
top: '38%', top: "38%",
textStyle: { textStyle: {
fontSize: '16', //百分比的样式 fontSize: "16", //百分比的样式
color: tcolor, color: tcolor,
fontFamily: 'Arial', fontFamily: "Arial",
foontWeight: '600', foontWeight: "600",
},
}, },
},], ],
polar: { polar: {
radius: ['100%', '60%'], radius: ["100%", "60%"],
center: ['50%', '50%'], center: ["50%", "50%"],
}, },
angleAxis: { angleAxis: {
max: 100, max: 100,
show: false, show: false,
}, },
radiusAxis: { radiusAxis: {
type: 'category', type: "category",
show: false, show: false,
}, },
series: [{ series: [
name: '', {
type: 'bar', name: "",
type: "bar",
roundCap: true, roundCap: true,
barWidth: 6, barWidth: 6,
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: '#f3fafd', //留白颜色 color: "#f3fafd", //留白颜色
}, },
data: [data], data: [data],
coordinateSystem: 'polar', coordinateSystem: "polar",
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0, offset: 0,
color: tcolor, //填色颜色 color: tcolor, //填色颜色
},]),
}, },
]),
}, },
},], },
},
],
}; };
return option; return option;
} }
//百分比图 病案入组 //百分比图 病案分组
export function categoryChart11(text, data, tcolor) { export function categoryChart11(text, data, tcolor) {
const option = { const option = {
title: [{ title: [
{
text: text, text: text,
x: 'center', x: "center",
top: '52%', top: "52%",
textStyle: { textStyle: {
fontSize: '14', //百分比的样式 fontSize: "14", //百分比的样式
color: tcolor, color: tcolor,
fontFamily: 'PingFang SC', fontFamily: "PingFang SC",
foontWeight: '300', foontWeight: "300",
}, },
}, },
{ {
text: data + `%`, text: data + `%`,
x: 'center', x: "center",
top: '28%', top: "28%",
textStyle: { textStyle: {
fontSize: '20', //百分比的样式 fontSize: "20", //百分比的样式
color: tcolor, color: tcolor,
fontFamily: 'Arial', fontFamily: "Arial",
foontWeight: '600', foontWeight: "600",
}, },
}, },
], ],
polar: { polar: {
radius: ['100%', '60%'], radius: ["100%", "60%"],
center: ['50%', '50%'], center: ["50%", "50%"],
}, },
angleAxis: { angleAxis: {
max: 100, max: 100,
show: false, show: false,
}, },
radiusAxis: { radiusAxis: {
type: 'category', type: "category",
show: false, show: false,
}, },
series: [{ series: [
name: '', {
type: 'bar', name: "",
type: "bar",
roundCap: true, roundCap: true,
barWidth: 6, barWidth: 6,
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: '#f3fafd', //留白颜色 color: "#f3fafd", //留白颜色
}, },
data: [data], data: [data],
coordinateSystem: 'polar', coordinateSystem: "polar",
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0, offset: 0,
color: tcolor, //填色颜色 color: tcolor, //填色颜色
},]),
}, },
]),
}, },
},], },
},
],
}; };
return option; return option;
......
src/views/outHistorygrouping.vue
...@@ -44,13 +44,13 @@ ...@@ -44,13 +44,13 @@
<div class="outsetgrouping_top2_message_left"> <div class="outsetgrouping_top2_message_left">
<span class="outsetgrouping_top2_message_left_tu4"><img src="../assets/img/bianma.png" alt="" /> </span> <span class="outsetgrouping_top2_message_left_tu4"><img src="../assets/img/bianma.png" alt="" /> </span>
<div class="outsetgrouping_top2_message_left_t1"> <div class="outsetgrouping_top2_message_left_t1">
当前入组编码:<span>{{ casehisObj ? casehisObj.drgs.code : "" }}</span> 当前分组编码:<span>{{ casehisObj ? casehisObj.drgs.code : "" }}</span>
</div> </div>
</div> </div>
<div class="outsetgrouping_top2_message_centert"> <div class="outsetgrouping_top2_message_centert">
<span class="outsetgrouping_top2_message_centert_tu5"><img src="../assets/img/daoru.png" alt="" /></span> <span class="outsetgrouping_top2_message_centert_tu5"><img src="../assets/img/daoru.png" alt="" /></span>
<div class="outsetgrouping_top2_message_centert_t2"> <div class="outsetgrouping_top2_message_centert_t2">
入组名称:<span>{{ casehisObj ? casehisObj.drgs.name : "" }}</span> 分组名称:<span>{{ casehisObj ? casehisObj.drgs.name : "" }}</span>
</div> </div>
</div> </div>
<div class="outsetgrouping_top2_message_right"> <div class="outsetgrouping_top2_message_right">
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
<div class="outsetgrouping_centent_totalnum_left_text_msg2"> <div class="outsetgrouping_centent_totalnum_left_text_msg2">
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text3"> <div class="outsetgrouping_centent_totalnum_left_text_msg2_text3">
<span>分组编码：{{ item.code }}</span> <span>分组编码：{{ item.code }}</span>
<span>入组名称：{{ item.coreName }}</span> <span>分组名称：{{ item.coreName }}</span>
</div> </div>
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text4"> <div class="outsetgrouping_centent_totalnum_left_text_msg2_text4">
<span>主诊断编码：{{ item.disCode }}</span <span>主诊断编码：{{ item.disCode }}</span
...@@ -232,7 +232,7 @@ export default { ...@@ -232,7 +232,7 @@ export default {
const submit = () => { const submit = () => {
if (state.radio == "") { if (state.radio == "") {
Message.warning({ Message.warning({
message: "请先选择要入组的病组", message: "请先选择要分组的病组",
type: "warning", type: "warning",
}); });
} else { } else {
......
src/views/outpatientDetails.vue
...@@ -299,8 +299,7 @@ ...@@ -299,8 +299,7 @@
import http from "../utils/http"; import http from "../utils/http";
import { decimal } from "../utils/decimal"; import { decimal } from "../utils/decimal";
import { transformTimestamp } from "../utils/formatTime"; import { transformTimestamp } from "../utils/formatTime";
import { Message } from "element-ui"; import { Loading, Message } from "element-ui";
import { Loading } from "element-ui";
export default { export default {
name: "outpatientDetails", name: "outpatientDetails",
data() { data() {
...@@ -334,6 +333,7 @@ export default { ...@@ -334,6 +333,7 @@ export default {
avgFee: "", avgFee: "",
days: "", days: "",
profitLoss: "", profitLoss: "",
patientType: "",
}, },
checkindex: 0, // 初始化第一个栏块高亮 checkindex: 0, // 初始化第一个栏块高亮
goods: [], //左侧费用类型 goods: [], //左侧费用类型
...@@ -612,23 +612,10 @@ export default { ...@@ -612,23 +612,10 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss">
@import "../styles/mixin.scss"; @import "../styles/mixin.scss";
@import "../styles/media/components/outpatientDetails.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 { .outpatientDetails {
// height: calc(100% - 50px); // height: calc(100% - 50px);
// background-color: white; // background-color: white;
...@@ -1506,5 +1493,17 @@ export default { ...@@ -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> </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