monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 04bca6bf74d705501d2e06e0b3b9e83431c7ed02 1 parent 056acb1d

乙方运维人员信息汇总提示

Inline Side-by-side
Showing 8 changed files with 117 additions and 9 deletions
... ... @@ -3,8 +3,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="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.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">
... ... @@ -55,6 +55,24 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe710;</span>
<div class="name">感叹号</div>
<div class="code-name">&amp;#xe710;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7f3;</span>
<div class="name">警示 感叹号 ！</div>
<div class="code-name">&amp;#xe7f3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe83d;</span>
<div class="name">拓扑</div>
<div class="code-name">&amp;#xe83d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe67c;</span>
<div class="name">提示</div>
<div class="code-name">&amp;#xe67c;</div>
... ... @@ -1452,9 +1470,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1659325108758') format('woff2'),
url('iconfont.woff?t=1659325108758') format('woff'),
url('iconfont.ttf?t=1659325108758') format('truetype');
src: url('iconfont.woff2?t=1663752017313') format('woff2'),
url('iconfont.woff?t=1663752017313') format('woff'),
url('iconfont.ttf?t=1663752017313') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
... ... @@ -1481,6 +1499,33 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-gantanhao"></span>
<div class="name">
感叹号
</div>
<div class="code-name">.icon-gantanhao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jingshigantanhao"></span>
<div class="name">
警示 感叹号 ！
</div>
<div class="code-name">.icon-jingshigantanhao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tuopu"></span>
<div class="name">
拓扑
</div>
<div class="code-name">.icon-tuopu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tishi"></span>
<div class="name">
提示
... ... @@ -3579,6 +3624,30 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gantanhao"></use>
</svg>
<div class="name">感叹号</div>
<div class="code-name">#icon-gantanhao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jingshigantanhao"></use>
</svg>
<div class="name">警示 感叹号 ！</div>
<div class="code-name">#icon-jingshigantanhao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tuopu"></use>
</svg>
<div class="name">拓扑</div>
<div class="code-name">#icon-tuopu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tishi"></use>
</svg>
<div class="name">提示</div>
... ...
@font-face {
font-family: "iconfont"; /* Project id 2843738 */
src: url('iconfont.woff2?t=1659325108758') format('woff2'),
url('iconfont.woff?t=1659325108758') format('woff'),
url('iconfont.ttf?t=1659325108758') format('truetype');
src: url('iconfont.woff2?t=1663752017313') format('woff2'),
url('iconfont.woff?t=1663752017313') format('woff'),
url('iconfont.ttf?t=1663752017313') format('truetype');
}
.iconfont {
... ... @@ -13,6 +13,18 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-gantanhao:before {
content: "\e710";
}
.icon-jingshigantanhao:before {
content: "\e7f3";
}
.icon-tuopu:before {
content: "\e83d";
}
.icon-tishi:before {
content: "\e67c";
}
... ...
... ... @@ -6,6 +6,27 @@
"description": "",
"glyphs": [
{
"icon_id": "9974757",
"name": "感叹号",
"font_class": "gantanhao",
"unicode": "e710",
"unicode_decimal": 59152
},
{
"icon_id": "689255",
"name": "警示 感叹号 ！",
"font_class": "jingshigantanhao",
"unicode": "e7f3",
"unicode_decimal": 59379
},
{
"icon_id": "1415612",
"name": "拓扑",
"font_class": "tuopu",
"unicode": "e83d",
"unicode_decimal": 59453
},
{
"icon_id": "577891",
"name": "提示",
"font_class": "tishi",
... ...
<div>
<div>
<!-- 人员信息总汇-->
<el-divider content-position="left">人员信息汇总</el-divider>
<el-divider content-position="left">
人员信息汇总
<el-tooltip placement="bottom-start" effect="light">
<template #content> 人员信息统计规则：<br/> &nbsp;&nbsp;&nbsp;&nbsp;• 左侧树：只统计业务下在职运维人员<br/> &nbsp;&nbsp;&nbsp;&nbsp;•人员信息汇总：统计业务下所有运维人员 </template>
<i class="iconfont icon-gantanhao" style="color:rgb(30,159,255);"></i><span></span>
</el-tooltip>
</el-divider>
<cm-table-page :columns="columns" :dataList="dataList" @loaddata="getPage" :showIndex="true"
:showBorder="true" :currentPage="currentPage" :total="total" :loading="false"
:showPage="true" :height="height" :pageSize="pageSize"></cm-table-page>
... ...