@ -0,0 +1,18 @@ |
|||||
|
{ |
||||
|
"presets": [ |
||||
|
"@babel/preset-env", |
||||
|
"@babel/preset-react" |
||||
|
], |
||||
|
"plugins": [ |
||||
|
"@babel/plugin-proposal-class-properties", |
||||
|
"@babel/plugin-proposal-object-rest-spread", |
||||
|
["import", { |
||||
|
"libraryName": "antd", |
||||
|
"libraryDirectory": "es" |
||||
|
|
||||
|
}] |
||||
|
], |
||||
|
"env": { |
||||
|
"development": {} |
||||
|
} |
||||
|
} |
@ -0,0 +1,42 @@ |
|||||
|
module.exports = { |
||||
|
env: { |
||||
|
browser: true, |
||||
|
es2021: true, |
||||
|
node: true, |
||||
|
}, |
||||
|
extends: [ |
||||
|
'eslint:recommended', |
||||
|
'plugin:react/recommended', |
||||
|
'airbnb', |
||||
|
'airbnb/hooks', |
||||
|
], |
||||
|
parserOptions: { |
||||
|
ecmaFeatures: { |
||||
|
jsx: true, |
||||
|
}, |
||||
|
ecmaVersion: 13, |
||||
|
sourceType: 'module', |
||||
|
}, |
||||
|
plugins: [ |
||||
|
'react', |
||||
|
], |
||||
|
settings: { |
||||
|
'import/resolver': 'webpack', |
||||
|
}, |
||||
|
rules: { |
||||
|
'no-console': 'off', |
||||
|
'linebreak-style': [0, 'error', 'windows'], |
||||
|
'react/jsx-filename-extension': [1, { |
||||
|
extensions: ['.js', '.jsx'], |
||||
|
}], |
||||
|
'no-unused-expressions': [1, { |
||||
|
allowShortCircuit: true, |
||||
|
allowTernary: true, |
||||
|
}], |
||||
|
'max-len': [1, { |
||||
|
code: 300, |
||||
|
}], |
||||
|
'react/prop-types': 0, |
||||
|
'class-methods-use-this': 'off', |
||||
|
}, |
||||
|
}; |
@ -0,0 +1,19 @@ |
|||||
|
{ |
||||
|
"version": "0.2.0", |
||||
|
"configurations": [ |
||||
|
{ |
||||
|
"name": "Server", |
||||
|
"type": "node", |
||||
|
"request": "launch", |
||||
|
"program": "${workspaceRoot}/server.js", |
||||
|
"args": [ |
||||
|
"-u http://127.0.0.1:4000" |
||||
|
//"-u http://10.8.30.211:8089" |
||||
|
], |
||||
|
"outputCapture": "std", |
||||
|
"env": { |
||||
|
"NODE_ENV": "development" |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
@ -0,0 +1,21 @@ |
|||||
|
// 将设置放入此文件中以覆盖默认值和用户设置。 |
||||
|
{ |
||||
|
"editor.fontSize": 16, |
||||
|
"editor.codeActionsOnSave": { |
||||
|
"source.fixAll.eslint": true |
||||
|
}, |
||||
|
"eslint.validate": [ |
||||
|
"javascript", |
||||
|
"javascriptreact", |
||||
|
"vue" |
||||
|
], |
||||
|
"files.autoSave": "afterDelay", |
||||
|
"editor.formatOnType": true, |
||||
|
"editor.formatOnSave": true, |
||||
|
"files.associations": { |
||||
|
"*.js": "javascriptreact" |
||||
|
}, |
||||
|
"emmet.triggerExpansionOnTab": true, |
||||
|
"vsicons.projectDetection.disableDetect": true, |
||||
|
"editor.tabSize": 2, |
||||
|
} |
@ -0,0 +1,14 @@ |
|||||
|
|
||||
|
FROM repository.anxinyun.cn/base-images/nodejs12:20.10.12.2 |
||||
|
|
||||
|
MAINTAINER pengling "peng.ling@free-sun.com.cn" |
||||
|
|
||||
|
COPY . /var/app |
||||
|
|
||||
|
WORKDIR /var/app |
||||
|
|
||||
|
EXPOSE 8080 |
||||
|
|
||||
|
CMD ["-u", "http://localhost:8088"] |
||||
|
|
||||
|
ENTRYPOINT [ "node", "server.js" ] |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 202 KiB |
@ -0,0 +1,370 @@ |
|||||
|
*{margin: 0;padding: 0;list-style: none;} |
||||
|
/* |
||||
|
KISSY CSS Reset |
||||
|
理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。 |
||||
|
2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。 |
||||
|
3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。 |
||||
|
特色:1. 适应中文;2. 基于最新主流浏览器。 |
||||
|
维护:玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com> |
||||
|
*/ |
||||
|
|
||||
|
/** 清除内外边距 **/ |
||||
|
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ |
||||
|
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ |
||||
|
pre, /* text formatting elements 文本格式元素 */ |
||||
|
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ |
||||
|
th, td /* table elements 表格元素 */ { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
/** 设置默认字体 **/ |
||||
|
body, |
||||
|
button, input, select, textarea /* for ie */ { |
||||
|
font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; |
||||
|
} |
||||
|
h1, h2, h3, h4, h5, h6 { font-size: 100%; } |
||||
|
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ |
||||
|
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ |
||||
|
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ |
||||
|
|
||||
|
/** 重置列表元素 **/ |
||||
|
ul, ol { list-style: none; } |
||||
|
|
||||
|
/** 重置文本格式元素 **/ |
||||
|
a { text-decoration: none; } |
||||
|
a:hover { text-decoration: underline; } |
||||
|
|
||||
|
|
||||
|
/** 重置表单元素 **/ |
||||
|
legend { color: #000; } /* for ie6 */ |
||||
|
fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */ |
||||
|
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ |
||||
|
/* 注:optgroup 无法扶正 */ |
||||
|
|
||||
|
/** 重置表格元素 **/ |
||||
|
table { border-collapse: collapse; border-spacing: 0; } |
||||
|
|
||||
|
/* 清除浮动 */ |
||||
|
.ks-clear:after, .clear:after { |
||||
|
content: '\20'; |
||||
|
display: block; |
||||
|
height: 0; |
||||
|
clear: both; |
||||
|
} |
||||
|
.ks-clear, .clear { |
||||
|
*zoom: 1; |
||||
|
} |
||||
|
|
||||
|
.main { |
||||
|
padding: 30px 100px; |
||||
|
width: 960px; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} |
||||
|
|
||||
|
.helps{margin-top:40px;} |
||||
|
.helps pre{ |
||||
|
padding:20px; |
||||
|
margin:10px 0; |
||||
|
border:solid 1px #e7e1cd; |
||||
|
background-color: #fffdef; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
.icon_lists{ |
||||
|
width: 100% !important; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.icon_lists li{ |
||||
|
float:left; |
||||
|
width: 100px; |
||||
|
height:180px; |
||||
|
text-align: center; |
||||
|
list-style: none !important; |
||||
|
} |
||||
|
.icon_lists .icon{ |
||||
|
font-size: 42px; |
||||
|
line-height: 100px; |
||||
|
margin: 10px 0; |
||||
|
color:#333; |
||||
|
-webkit-transition: font-size 0.25s ease-out 0s; |
||||
|
-moz-transition: font-size 0.25s ease-out 0s; |
||||
|
transition: font-size 0.25s ease-out 0s; |
||||
|
|
||||
|
} |
||||
|
.icon_lists .icon:hover{ |
||||
|
font-size: 100px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.markdown { |
||||
|
color: #666; |
||||
|
font-size: 14px; |
||||
|
line-height: 1.8; |
||||
|
} |
||||
|
|
||||
|
.highlight { |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.markdown img { |
||||
|
vertical-align: middle; |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
|
||||
|
.markdown h1 { |
||||
|
color: #404040; |
||||
|
font-weight: 500; |
||||
|
line-height: 40px; |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
|
||||
|
.markdown h2, |
||||
|
.markdown h3, |
||||
|
.markdown h4, |
||||
|
.markdown h5, |
||||
|
.markdown h6 { |
||||
|
color: #404040; |
||||
|
margin: 1.6em 0 0.6em 0; |
||||
|
font-weight: 500; |
||||
|
clear: both; |
||||
|
} |
||||
|
|
||||
|
.markdown h1 { |
||||
|
font-size: 28px; |
||||
|
} |
||||
|
|
||||
|
.markdown h2 { |
||||
|
font-size: 22px; |
||||
|
} |
||||
|
|
||||
|
.markdown h3 { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.markdown h4 { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.markdown h5 { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.markdown h6 { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.markdown hr { |
||||
|
height: 1px; |
||||
|
border: 0; |
||||
|
background: #e9e9e9; |
||||
|
margin: 16px 0; |
||||
|
clear: both; |
||||
|
} |
||||
|
|
||||
|
.markdown p, |
||||
|
.markdown pre { |
||||
|
margin: 1em 0; |
||||
|
} |
||||
|
|
||||
|
.markdown > p, |
||||
|
.markdown > blockquote, |
||||
|
.markdown > .highlight, |
||||
|
.markdown > ol, |
||||
|
.markdown > ul { |
||||
|
width: 80%; |
||||
|
} |
||||
|
|
||||
|
.markdown ul > li { |
||||
|
list-style: circle; |
||||
|
} |
||||
|
|
||||
|
.markdown > ul li, |
||||
|
.markdown blockquote ul > li { |
||||
|
margin-left: 20px; |
||||
|
padding-left: 4px; |
||||
|
} |
||||
|
|
||||
|
.markdown > ul li p, |
||||
|
.markdown > ol li p { |
||||
|
margin: 0.6em 0; |
||||
|
} |
||||
|
|
||||
|
.markdown ol > li { |
||||
|
list-style: decimal; |
||||
|
} |
||||
|
|
||||
|
.markdown > ol li, |
||||
|
.markdown blockquote ol > li { |
||||
|
margin-left: 20px; |
||||
|
padding-left: 4px; |
||||
|
} |
||||
|
|
||||
|
.markdown code { |
||||
|
margin: 0 3px; |
||||
|
padding: 0 5px; |
||||
|
background: #eee; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
.markdown pre { |
||||
|
border-radius: 6px; |
||||
|
background: #f7f7f7; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.markdown pre code { |
||||
|
border: none; |
||||
|
background: #f7f7f7; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.markdown strong, |
||||
|
.markdown b { |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.markdown > table { |
||||
|
border-collapse: collapse; |
||||
|
border-spacing: 0px; |
||||
|
empty-cells: show; |
||||
|
border: 1px solid #e9e9e9; |
||||
|
width: 95%; |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
|
||||
|
.markdown > table th { |
||||
|
white-space: nowrap; |
||||
|
color: #333; |
||||
|
font-weight: 600; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.markdown > table th, |
||||
|
.markdown > table td { |
||||
|
border: 1px solid #e9e9e9; |
||||
|
padding: 8px 16px; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.markdown > table th { |
||||
|
background: #F7F7F7; |
||||
|
} |
||||
|
|
||||
|
.markdown blockquote { |
||||
|
font-size: 90%; |
||||
|
color: #999; |
||||
|
border-left: 4px solid #e9e9e9; |
||||
|
padding-left: 0.8em; |
||||
|
margin: 1em 0; |
||||
|
font-style: italic; |
||||
|
} |
||||
|
|
||||
|
.markdown blockquote p { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.markdown .anchor { |
||||
|
opacity: 0; |
||||
|
transition: opacity 0.3s ease; |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
|
||||
|
.markdown .waiting { |
||||
|
color: #ccc; |
||||
|
} |
||||
|
|
||||
|
.markdown h1:hover .anchor, |
||||
|
.markdown h2:hover .anchor, |
||||
|
.markdown h3:hover .anchor, |
||||
|
.markdown h4:hover .anchor, |
||||
|
.markdown h5:hover .anchor, |
||||
|
.markdown h6:hover .anchor { |
||||
|
opacity: 1; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.markdown > br, |
||||
|
.markdown > p > br { |
||||
|
clear: both; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.hljs { |
||||
|
display: block; |
||||
|
background: white; |
||||
|
padding: 0.5em; |
||||
|
color: #333333; |
||||
|
overflow-x: auto; |
||||
|
} |
||||
|
|
||||
|
.hljs-comment, |
||||
|
.hljs-meta { |
||||
|
color: #969896; |
||||
|
} |
||||
|
|
||||
|
.hljs-string, |
||||
|
.hljs-variable, |
||||
|
.hljs-template-variable, |
||||
|
.hljs-strong, |
||||
|
.hljs-emphasis, |
||||
|
.hljs-quote { |
||||
|
color: #df5000; |
||||
|
} |
||||
|
|
||||
|
.hljs-keyword, |
||||
|
.hljs-selector-tag, |
||||
|
.hljs-type { |
||||
|
color: #a71d5d; |
||||
|
} |
||||
|
|
||||
|
.hljs-literal, |
||||
|
.hljs-symbol, |
||||
|
.hljs-bullet, |
||||
|
.hljs-attribute { |
||||
|
color: #0086b3; |
||||
|
} |
||||
|
|
||||
|
.hljs-section, |
||||
|
.hljs-name { |
||||
|
color: #63a35c; |
||||
|
} |
||||
|
|
||||
|
.hljs-tag { |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.hljs-title, |
||||
|
.hljs-attr, |
||||
|
.hljs-selector-id, |
||||
|
.hljs-selector-class, |
||||
|
.hljs-selector-attr, |
||||
|
.hljs-selector-pseudo { |
||||
|
color: #795da3; |
||||
|
} |
||||
|
|
||||
|
.hljs-addition { |
||||
|
color: #55a532; |
||||
|
background-color: #eaffea; |
||||
|
} |
||||
|
|
||||
|
.hljs-deletion { |
||||
|
color: #bd2c00; |
||||
|
background-color: #ffecec; |
||||
|
} |
||||
|
|
||||
|
.hljs-link { |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
|
||||
|
pre{ |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
@ -0,0 +1,514 @@ |
|||||
|
|
||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta charset="utf-8"/> |
||||
|
<title>IconFont</title> |
||||
|
<link rel="stylesheet" href="demo.css"> |
||||
|
<link rel="stylesheet" href="iconfont.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="main markdown"> |
||||
|
<h1>IconFont 图标</h1> |
||||
|
<ul class="icon_lists clear"> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-liuliang"></i> |
||||
|
<div class="name">流量</div> |
||||
|
<div class="fontclass">.icon-liuliang</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-iconfontditie"></i> |
||||
|
<div class="name">轻轨</div> |
||||
|
<div class="fontclass">.icon-iconfontditie</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-fengsu3"></i> |
||||
|
<div class="name">风速3</div> |
||||
|
<div class="fontclass">.icon-fengsu3</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-calendar"></i> |
||||
|
<div class="name">calendar</div> |
||||
|
<div class="fontclass">.icon-calendar</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-box"></i> |
||||
|
<div class="name">box</div> |
||||
|
<div class="fontclass">.icon-box</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-shenheshibai"></i> |
||||
|
<div class="name">审核失败</div> |
||||
|
<div class="fontclass">.icon-shenheshibai</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-slope"></i> |
||||
|
<div class="name">边坡</div> |
||||
|
<div class="fontclass">.icon-slope</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-icon2"></i> |
||||
|
<div class="name">公路</div> |
||||
|
<div class="fontclass">.icon-icon2</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-gnsscaidian"></i> |
||||
|
<div class="name">GNSS采点</div> |
||||
|
<div class="fontclass">.icon-gnsscaidian</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-chuanganqishebei"></i> |
||||
|
<div class="name">传感器设备</div> |
||||
|
<div class="fontclass">.icon-chuanganqishebei</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-dianliuchuanganqi"></i> |
||||
|
<div class="name">电流传感器</div> |
||||
|
<div class="fontclass">.icon-dianliuchuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-dianyachuanganqi"></i> |
||||
|
<div class="name">电压传感器</div> |
||||
|
<div class="fontclass">.icon-dianyachuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-wenduchuanganqi"></i> |
||||
|
<div class="name">温度传感器</div> |
||||
|
<div class="fontclass">.icon-wenduchuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-xinjian"></i> |
||||
|
<div class="name">新建</div> |
||||
|
<div class="fontclass">.icon-xinjian</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-handong"></i> |
||||
|
<div class="name">涵洞</div> |
||||
|
<div class="fontclass">.icon-handong</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-guanwanggongcheng"></i> |
||||
|
<div class="name">管网工程</div> |
||||
|
<div class="fontclass">.icon-guanwanggongcheng</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-shenhe"></i> |
||||
|
<div class="name">审核</div> |
||||
|
<div class="fontclass">.icon-shenhe</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-zhihuishequ"></i> |
||||
|
<div class="name">智慧城市</div> |
||||
|
<div class="fontclass">.icon-zhihuishequ</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-bianpoweiyi"></i> |
||||
|
<div class="name">边坡位移</div> |
||||
|
<div class="fontclass">.icon-bianpoweiyi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-jianzhu"></i> |
||||
|
<div class="name">建筑</div> |
||||
|
<div class="fontclass">.icon-jianzhu</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-chuguan"></i> |
||||
|
<div class="name">储罐</div> |
||||
|
<div class="fontclass">.icon-chuguan</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-suidao"></i> |
||||
|
<div class="name">隧道</div> |
||||
|
<div class="fontclass">.icon-suidao</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-data"></i> |
||||
|
<div class="name">data</div> |
||||
|
<div class="fontclass">.icon-data</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-kuangshankaicai"></i> |
||||
|
<div class="name">矿山开采</div> |
||||
|
<div class="fontclass">.icon-kuangshankaicai</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-wangluo"></i> |
||||
|
<div class="name">网络</div> |
||||
|
<div class="fontclass">.icon-wangluo</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-jiankong"></i> |
||||
|
<div class="name">监控</div> |
||||
|
<div class="fontclass">.icon-jiankong</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-dashuju"></i> |
||||
|
<div class="name">大数据</div> |
||||
|
<div class="fontclass">.icon-dashuju</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-shuju"></i> |
||||
|
<div class="name">数据库</div> |
||||
|
<div class="fontclass">.icon-shuju</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-shenhechenggong"></i> |
||||
|
<div class="name">审核成功</div> |
||||
|
<div class="fontclass">.icon-shenhechenggong</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-jiankong1"></i> |
||||
|
<div class="name">监控</div> |
||||
|
<div class="fontclass">.icon-jiankong1</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-wangluoxitong"></i> |
||||
|
<div class="name">网络系统</div> |
||||
|
<div class="fontclass">.icon-wangluoxitong</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-dingwei"></i> |
||||
|
<div class="name">定位</div> |
||||
|
<div class="fontclass">.icon-dingwei</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-xitongyunzhuanqingkuang"></i> |
||||
|
<div class="name">系统运转情况</div> |
||||
|
<div class="fontclass">.icon-xitongyunzhuanqingkuang</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-chakan"></i> |
||||
|
<div class="name">查看</div> |
||||
|
<div class="fontclass">.icon-chakan</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-lianjie"></i> |
||||
|
<div class="name">链接</div> |
||||
|
<div class="fontclass">.icon-lianjie</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-shujudaochu-01"></i> |
||||
|
<div class="name">数据导出-01</div> |
||||
|
<div class="fontclass">.icon-shujudaochu-01</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-xitongzhuangtai"></i> |
||||
|
<div class="name">系统状态</div> |
||||
|
<div class="fontclass">.icon-xitongzhuangtai</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-xiaofeimingxidan"></i> |
||||
|
<div class="name">消费明细单</div> |
||||
|
<div class="fontclass">.icon-xiaofeimingxidan</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-SQLshenhe"></i> |
||||
|
<div class="name">SQL审核</div> |
||||
|
<div class="fontclass">.icon-SQLshenhe</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-aislogo"></i> |
||||
|
<div class="name">aislogo</div> |
||||
|
<div class="fontclass">.icon-aislogo</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-qiao"></i> |
||||
|
<div class="name">桥</div> |
||||
|
<div class="fontclass">.icon-qiao</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-tashiqizhongji"></i> |
||||
|
<div class="name">塔式起重机</div> |
||||
|
<div class="fontclass">.icon-tashiqizhongji</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-dwggeshi"></i> |
||||
|
<div class="name">dwg格式</div> |
||||
|
<div class="fontclass">.icon-dwggeshi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-luyouqi"></i> |
||||
|
<div class="name">路由器</div> |
||||
|
<div class="fontclass">.icon-luyouqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-anzhuangshigong-xianxing"></i> |
||||
|
<div class="name">244安装、施工-线性</div> |
||||
|
<div class="fontclass">.icon-anzhuangshigong-xianxing</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-shaixuanguolv"></i> |
||||
|
<div class="name">245筛选过滤</div> |
||||
|
<div class="fontclass">.icon-shaixuanguolv</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-anzhuangshigong"></i> |
||||
|
<div class="name">244安装、施工</div> |
||||
|
<div class="fontclass">.icon-anzhuangshigong</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-tiaoxingtu-xianxing"></i> |
||||
|
<div class="name">408条形图-线性</div> |
||||
|
<div class="fontclass">.icon-tiaoxingtu-xianxing</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-zhexiantu-xianxing"></i> |
||||
|
<div class="name">409折线图-线性</div> |
||||
|
<div class="fontclass">.icon-zhexiantu-xianxing</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-tieta"></i> |
||||
|
<div class="name">铁塔</div> |
||||
|
<div class="fontclass">.icon-tieta</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-geshi_wendangtxt"></i> |
||||
|
<div class="name">800格式_文档txt</div> |
||||
|
<div class="fontclass">.icon-geshi_wendangtxt</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-geshi_wendangdoc"></i> |
||||
|
<div class="name">801格式_文档doc</div> |
||||
|
<div class="fontclass">.icon-geshi_wendangdoc</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-geshi_wendangpdf"></i> |
||||
|
<div class="name">807格式_文档pdf</div> |
||||
|
<div class="fontclass">.icon-geshi_wendangpdf</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-geshi_wendangxls"></i> |
||||
|
<div class="name">803格式_文档xls</div> |
||||
|
<div class="fontclass">.icon-geshi_wendangxls</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-geshi_tongyongwendang"></i> |
||||
|
<div class="name">819格式_通用文档</div> |
||||
|
<div class="fontclass">.icon-geshi_tongyongwendang</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-geshi_shipinmp"></i> |
||||
|
<div class="name">840格式_视频mp4</div> |
||||
|
<div class="fontclass">.icon-geshi_shipinmp</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-geshi_tupianjpg"></i> |
||||
|
<div class="name">860格式_图片jpg</div> |
||||
|
<div class="fontclass">.icon-geshi_tupianjpg</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-geshi_tupianpng"></i> |
||||
|
<div class="name">865格式_图片png</div> |
||||
|
<div class="fontclass">.icon-geshi_tupianpng</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-guangzhaochuanganqi"></i> |
||||
|
<div class="name">光照传感器</div> |
||||
|
<div class="fontclass">.icon-guangzhaochuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-building"></i> |
||||
|
<div class="name">建筑</div> |
||||
|
<div class="fontclass">.icon-building</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-yanwuchuanganqi"></i> |
||||
|
<div class="name">烟雾传感器</div> |
||||
|
<div class="fontclass">.icon-yanwuchuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-shizheng"></i> |
||||
|
<div class="name">市政</div> |
||||
|
<div class="fontclass">.icon-shizheng</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-chuanganqi"></i> |
||||
|
<div class="name">传感器</div> |
||||
|
<div class="fontclass">.icon-chuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-WSD"></i> |
||||
|
<div class="name">温湿度传感器</div> |
||||
|
<div class="fontclass">.icon-WSD</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-yalichuanganqi"></i> |
||||
|
<div class="name">压力传感器</div> |
||||
|
<div class="fontclass">.icon-yalichuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-yinglichuanganqi"></i> |
||||
|
<div class="name">应力传感器</div> |
||||
|
<div class="fontclass">.icon-yinglichuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-chenjiangchuanganqi"></i> |
||||
|
<div class="name">沉降传感器</div> |
||||
|
<div class="fontclass">.icon-chenjiangchuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-yalichuanganqi1"></i> |
||||
|
<div class="name">压力传感器</div> |
||||
|
<div class="fontclass">.icon-yalichuanganqi1</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-YWC"></i> |
||||
|
<div class="name">液位传感器</div> |
||||
|
<div class="fontclass">.icon-YWC</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-computer"></i> |
||||
|
<div class="name">computer</div> |
||||
|
<div class="fontclass">.icon-computer</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-empty"></i> |
||||
|
<div class="name">empty</div> |
||||
|
<div class="fontclass">.icon-empty</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-offline"></i> |
||||
|
<div class="name">offline</div> |
||||
|
<div class="fontclass">.icon-offline</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-daba"></i> |
||||
|
<div class="name">大坝</div> |
||||
|
<div class="fontclass">.icon-daba</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-shenbuweiyi"></i> |
||||
|
<div class="name">深部位移</div> |
||||
|
<div class="fontclass">.icon-shenbuweiyi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-maosuochuanganqi"></i> |
||||
|
<div class="name">锚索传感器</div> |
||||
|
<div class="fontclass">.icon-maosuochuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-yuliangchuanganqi"></i> |
||||
|
<div class="name">雨量传感器</div> |
||||
|
<div class="fontclass">.icon-yuliangchuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-weiyiji"></i> |
||||
|
<div class="name">位移计</div> |
||||
|
<div class="fontclass">.icon-weiyiji</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-qixiangzhan_"></i> |
||||
|
<div class="name">气象站_1</div> |
||||
|
<div class="fontclass">.icon-qixiangzhan_</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc icon-shenjikeng"></i> |
||||
|
<div class="name">深基坑</div> |
||||
|
<div class="fontclass">.icon-shenjikeng</div> |
||||
|
</li> |
||||
|
|
||||
|
</ul> |
||||
|
|
||||
|
<h2 id="font-class-">font-class引用</h2> |
||||
|
<hr> |
||||
|
|
||||
|
<p>font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。</p> |
||||
|
<p>与unicode使用方式相比,具有如下特点:</p> |
||||
|
<ul> |
||||
|
<li>兼容性良好,支持ie8+,及所有现代浏览器。</li> |
||||
|
<li>相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。</li> |
||||
|
<li>因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。</li> |
||||
|
<li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li> |
||||
|
</ul> |
||||
|
<p>使用步骤如下:</p> |
||||
|
<h3 id="-fontclass-">第一步:引入项目下面生成的fontclass代码:</h3> |
||||
|
|
||||
|
|
||||
|
<pre><code class="lang-js hljs javascript"><span class="hljs-comment"><link rel="stylesheet" type="text/css" href="./iconfont.css"></span></code></pre> |
||||
|
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3> |
||||
|
<pre><code class="lang-css hljs"><<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">sc</span> <span class="hljs-selector-tag">icon-xxx</span>"></<span class="hljs-selector-tag">i</span>></code></pre> |
||||
|
<blockquote> |
||||
|
<p>"sc"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p> |
||||
|
</blockquote> |
||||
|
</div> |
||||
|
</body> |
||||
|
</html> |
@ -0,0 +1,695 @@ |
|||||
|
|
||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta charset="utf-8"/> |
||||
|
<title>IconFont</title> |
||||
|
<link rel="stylesheet" href="demo.css"> |
||||
|
<script src="iconfont.js"></script> |
||||
|
|
||||
|
<style type="text/css"> |
||||
|
.icon { |
||||
|
/* 通过设置 font-size 来改变图标大小 */ |
||||
|
width: 1em; height: 1em; |
||||
|
/* 图标和文字相邻时,垂直对齐 */ |
||||
|
vertical-align: -0.15em; |
||||
|
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||
|
fill: currentColor; |
||||
|
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||
|
normalize.css 中也包含这行 */ |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="main markdown"> |
||||
|
<h1>IconFont 图标</h1> |
||||
|
<ul class="icon_lists clear"> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-liuliang"></use> |
||||
|
</svg> |
||||
|
<div class="name">流量</div> |
||||
|
<div class="fontclass">#icon-liuliang</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-iconfontditie"></use> |
||||
|
</svg> |
||||
|
<div class="name">轻轨</div> |
||||
|
<div class="fontclass">#icon-iconfontditie</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-fengsu3"></use> |
||||
|
</svg> |
||||
|
<div class="name">风速3</div> |
||||
|
<div class="fontclass">#icon-fengsu3</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-calendar"></use> |
||||
|
</svg> |
||||
|
<div class="name">calendar</div> |
||||
|
<div class="fontclass">#icon-calendar</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-box"></use> |
||||
|
</svg> |
||||
|
<div class="name">box</div> |
||||
|
<div class="fontclass">#icon-box</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-shenheshibai"></use> |
||||
|
</svg> |
||||
|
<div class="name">审核失败</div> |
||||
|
<div class="fontclass">#icon-shenheshibai</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-slope"></use> |
||||
|
</svg> |
||||
|
<div class="name">边坡</div> |
||||
|
<div class="fontclass">#icon-slope</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-icon2"></use> |
||||
|
</svg> |
||||
|
<div class="name">公路</div> |
||||
|
<div class="fontclass">#icon-icon2</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-gnsscaidian"></use> |
||||
|
</svg> |
||||
|
<div class="name">GNSS采点</div> |
||||
|
<div class="fontclass">#icon-gnsscaidian</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-chuanganqishebei"></use> |
||||
|
</svg> |
||||
|
<div class="name">传感器设备</div> |
||||
|
<div class="fontclass">#icon-chuanganqishebei</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-dianliuchuanganqi"></use> |
||||
|
</svg> |
||||
|
<div class="name">电流传感器</div> |
||||
|
<div class="fontclass">#icon-dianliuchuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-dianyachuanganqi"></use> |
||||
|
</svg> |
||||
|
<div class="name">电压传感器</div> |
||||
|
<div class="fontclass">#icon-dianyachuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-wenduchuanganqi"></use> |
||||
|
</svg> |
||||
|
<div class="name">温度传感器</div> |
||||
|
<div class="fontclass">#icon-wenduchuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-xinjian"></use> |
||||
|
</svg> |
||||
|
<div class="name">新建</div> |
||||
|
<div class="fontclass">#icon-xinjian</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-handong"></use> |
||||
|
</svg> |
||||
|
<div class="name">涵洞</div> |
||||
|
<div class="fontclass">#icon-handong</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-guanwanggongcheng"></use> |
||||
|
</svg> |
||||
|
<div class="name">管网工程</div> |
||||
|
<div class="fontclass">#icon-guanwanggongcheng</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-shenhe"></use> |
||||
|
</svg> |
||||
|
<div class="name">审核</div> |
||||
|
<div class="fontclass">#icon-shenhe</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-zhihuishequ"></use> |
||||
|
</svg> |
||||
|
<div class="name">智慧城市</div> |
||||
|
<div class="fontclass">#icon-zhihuishequ</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-bianpoweiyi"></use> |
||||
|
</svg> |
||||
|
<div class="name">边坡位移</div> |
||||
|
<div class="fontclass">#icon-bianpoweiyi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-jianzhu"></use> |
||||
|
</svg> |
||||
|
<div class="name">建筑</div> |
||||
|
<div class="fontclass">#icon-jianzhu</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-chuguan"></use> |
||||
|
</svg> |
||||
|
<div class="name">储罐</div> |
||||
|
<div class="fontclass">#icon-chuguan</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-suidao"></use> |
||||
|
</svg> |
||||
|
<div class="name">隧道</div> |
||||
|
<div class="fontclass">#icon-suidao</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-data"></use> |
||||
|
</svg> |
||||
|
<div class="name">data</div> |
||||
|
<div class="fontclass">#icon-data</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-kuangshankaicai"></use> |
||||
|
</svg> |
||||
|
<div class="name">矿山开采</div> |
||||
|
<div class="fontclass">#icon-kuangshankaicai</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-wangluo"></use> |
||||
|
</svg> |
||||
|
<div class="name">网络</div> |
||||
|
<div class="fontclass">#icon-wangluo</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-jiankong"></use> |
||||
|
</svg> |
||||
|
<div class="name">监控</div> |
||||
|
<div class="fontclass">#icon-jiankong</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-dashuju"></use> |
||||
|
</svg> |
||||
|
<div class="name">大数据</div> |
||||
|
<div class="fontclass">#icon-dashuju</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-shuju"></use> |
||||
|
</svg> |
||||
|
<div class="name">数据库</div> |
||||
|
<div class="fontclass">#icon-shuju</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-shenhechenggong"></use> |
||||
|
</svg> |
||||
|
<div class="name">审核成功</div> |
||||
|
<div class="fontclass">#icon-shenhechenggong</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-jiankong1"></use> |
||||
|
</svg> |
||||
|
<div class="name">监控</div> |
||||
|
<div class="fontclass">#icon-jiankong1</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-wangluoxitong"></use> |
||||
|
</svg> |
||||
|
<div class="name">网络系统</div> |
||||
|
<div class="fontclass">#icon-wangluoxitong</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-dingwei"></use> |
||||
|
</svg> |
||||
|
<div class="name">定位</div> |
||||
|
<div class="fontclass">#icon-dingwei</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-xitongyunzhuanqingkuang"></use> |
||||
|
</svg> |
||||
|
<div class="name">系统运转情况</div> |
||||
|
<div class="fontclass">#icon-xitongyunzhuanqingkuang</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-chakan"></use> |
||||
|
</svg> |
||||
|
<div class="name">查看</div> |
||||
|
<div class="fontclass">#icon-chakan</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-lianjie"></use> |
||||
|
</svg> |
||||
|
<div class="name">链接</div> |
||||
|
<div class="fontclass">#icon-lianjie</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-shujudaochu-01"></use> |
||||
|
</svg> |
||||
|
<div class="name">数据导出-01</div> |
||||
|
<div class="fontclass">#icon-shujudaochu-01</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-xitongzhuangtai"></use> |
||||
|
</svg> |
||||
|
<div class="name">系统状态</div> |
||||
|
<div class="fontclass">#icon-xitongzhuangtai</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-xiaofeimingxidan"></use> |
||||
|
</svg> |
||||
|
<div class="name">消费明细单</div> |
||||
|
<div class="fontclass">#icon-xiaofeimingxidan</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-SQLshenhe"></use> |
||||
|
</svg> |
||||
|
<div class="name">SQL审核</div> |
||||
|
<div class="fontclass">#icon-SQLshenhe</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-aislogo"></use> |
||||
|
</svg> |
||||
|
<div class="name">aislogo</div> |
||||
|
<div class="fontclass">#icon-aislogo</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-qiao"></use> |
||||
|
</svg> |
||||
|
<div class="name">桥</div> |
||||
|
<div class="fontclass">#icon-qiao</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-tashiqizhongji"></use> |
||||
|
</svg> |
||||
|
<div class="name">塔式起重机</div> |
||||
|
<div class="fontclass">#icon-tashiqizhongji</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-dwggeshi"></use> |
||||
|
</svg> |
||||
|
<div class="name">dwg格式</div> |
||||
|
<div class="fontclass">#icon-dwggeshi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-luyouqi"></use> |
||||
|
</svg> |
||||
|
<div class="name">路由器</div> |
||||
|
<div class="fontclass">#icon-luyouqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-anzhuangshigong-xianxing"></use> |
||||
|
</svg> |
||||
|
<div class="name">244安装、施工-线性</div> |
||||
|
<div class="fontclass">#icon-anzhuangshigong-xianxing</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-shaixuanguolv"></use> |
||||
|
</svg> |
||||
|
<div class="name">245筛选过滤</div> |
||||
|
<div class="fontclass">#icon-shaixuanguolv</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-anzhuangshigong"></use> |
||||
|
</svg> |
||||
|
<div class="name">244安装、施工</div> |
||||
|
<div class="fontclass">#icon-anzhuangshigong</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-tiaoxingtu-xianxing"></use> |
||||
|
</svg> |
||||
|
<div class="name">408条形图-线性</div> |
||||
|
<div class="fontclass">#icon-tiaoxingtu-xianxing</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-zhexiantu-xianxing"></use> |
||||
|
</svg> |
||||
|
<div class="name">409折线图-线性</div> |
||||
|
<div class="fontclass">#icon-zhexiantu-xianxing</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-tieta"></use> |
||||
|
</svg> |
||||
|
<div class="name">铁塔</div> |
||||
|
<div class="fontclass">#icon-tieta</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-geshi_wendangtxt"></use> |
||||
|
</svg> |
||||
|
<div class="name">800格式_文档txt</div> |
||||
|
<div class="fontclass">#icon-geshi_wendangtxt</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-geshi_wendangdoc"></use> |
||||
|
</svg> |
||||
|
<div class="name">801格式_文档doc</div> |
||||
|
<div class="fontclass">#icon-geshi_wendangdoc</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-geshi_wendangpdf"></use> |
||||
|
</svg> |
||||
|
<div class="name">807格式_文档pdf</div> |
||||
|
<div class="fontclass">#icon-geshi_wendangpdf</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-geshi_wendangxls"></use> |
||||
|
</svg> |
||||
|
<div class="name">803格式_文档xls</div> |
||||
|
<div class="fontclass">#icon-geshi_wendangxls</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-geshi_tongyongwendang"></use> |
||||
|
</svg> |
||||
|
<div class="name">819格式_通用文档</div> |
||||
|
<div class="fontclass">#icon-geshi_tongyongwendang</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-geshi_shipinmp"></use> |
||||
|
</svg> |
||||
|
<div class="name">840格式_视频mp4</div> |
||||
|
<div class="fontclass">#icon-geshi_shipinmp</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-geshi_tupianjpg"></use> |
||||
|
</svg> |
||||
|
<div class="name">860格式_图片jpg</div> |
||||
|
<div class="fontclass">#icon-geshi_tupianjpg</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-geshi_tupianpng"></use> |
||||
|
</svg> |
||||
|
<div class="name">865格式_图片png</div> |
||||
|
<div class="fontclass">#icon-geshi_tupianpng</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-guangzhaochuanganqi"></use> |
||||
|
</svg> |
||||
|
<div class="name">光照传感器</div> |
||||
|
<div class="fontclass">#icon-guangzhaochuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-building"></use> |
||||
|
</svg> |
||||
|
<div class="name">建筑</div> |
||||
|
<div class="fontclass">#icon-building</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-yanwuchuanganqi"></use> |
||||
|
</svg> |
||||
|
<div class="name">烟雾传感器</div> |
||||
|
<div class="fontclass">#icon-yanwuchuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-shizheng"></use> |
||||
|
</svg> |
||||
|
<div class="name">市政</div> |
||||
|
<div class="fontclass">#icon-shizheng</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-chuanganqi"></use> |
||||
|
</svg> |
||||
|
<div class="name">传感器</div> |
||||
|
<div class="fontclass">#icon-chuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-WSD"></use> |
||||
|
</svg> |
||||
|
<div class="name">温湿度传感器</div> |
||||
|
<div class="fontclass">#icon-WSD</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-yalichuanganqi"></use> |
||||
|
</svg> |
||||
|
<div class="name">压力传感器</div> |
||||
|
<div class="fontclass">#icon-yalichuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-yinglichuanganqi"></use> |
||||
|
</svg> |
||||
|
<div class="name">应力传感器</div> |
||||
|
<div class="fontclass">#icon-yinglichuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-chenjiangchuanganqi"></use> |
||||
|
</svg> |
||||
|
<div class="name">沉降传感器</div> |
||||
|
<div class="fontclass">#icon-chenjiangchuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-yalichuanganqi1"></use> |
||||
|
</svg> |
||||
|
<div class="name">压力传感器</div> |
||||
|
<div class="fontclass">#icon-yalichuanganqi1</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-YWC"></use> |
||||
|
</svg> |
||||
|
<div class="name">液位传感器</div> |
||||
|
<div class="fontclass">#icon-YWC</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-computer"></use> |
||||
|
</svg> |
||||
|
<div class="name">computer</div> |
||||
|
<div class="fontclass">#icon-computer</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-empty"></use> |
||||
|
</svg> |
||||
|
<div class="name">empty</div> |
||||
|
<div class="fontclass">#icon-empty</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-offline"></use> |
||||
|
</svg> |
||||
|
<div class="name">offline</div> |
||||
|
<div class="fontclass">#icon-offline</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-daba"></use> |
||||
|
</svg> |
||||
|
<div class="name">大坝</div> |
||||
|
<div class="fontclass">#icon-daba</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-shenbuweiyi"></use> |
||||
|
</svg> |
||||
|
<div class="name">深部位移</div> |
||||
|
<div class="fontclass">#icon-shenbuweiyi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-maosuochuanganqi"></use> |
||||
|
</svg> |
||||
|
<div class="name">锚索传感器</div> |
||||
|
<div class="fontclass">#icon-maosuochuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-yuliangchuanganqi"></use> |
||||
|
</svg> |
||||
|
<div class="name">雨量传感器</div> |
||||
|
<div class="fontclass">#icon-yuliangchuanganqi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-weiyiji"></use> |
||||
|
</svg> |
||||
|
<div class="name">位移计</div> |
||||
|
<div class="fontclass">#icon-weiyiji</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-qixiangzhan_"></use> |
||||
|
</svg> |
||||
|
<div class="name">气象站_1</div> |
||||
|
<div class="fontclass">#icon-qixiangzhan_</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-shenjikeng"></use> |
||||
|
</svg> |
||||
|
<div class="name">深基坑</div> |
||||
|
<div class="fontclass">#icon-shenjikeng</div> |
||||
|
</li> |
||||
|
|
||||
|
</ul> |
||||
|
|
||||
|
|
||||
|
<h2 id="symbol-">symbol引用</h2> |
||||
|
<hr> |
||||
|
|
||||
|
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
||||
|
这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:</p> |
||||
|
<ul> |
||||
|
<li>支持多色图标了,不再受单色限制。</li> |
||||
|
<li>通过一些技巧,支持像字体那样,通过<code>font-size</code>,<code>color</code>来调整样式。</li> |
||||
|
<li>兼容性较差,支持 ie9+,及现代浏览器。</li> |
||||
|
<li>浏览器渲染svg的性能一般,还不如png。</li> |
||||
|
</ul> |
||||
|
<p>使用步骤如下:</p> |
||||
|
<h3 id="-symbol-">第一步:引入项目下面生成的symbol代码:</h3> |
||||
|
<pre><code class="lang-js hljs javascript"><span class="hljs-comment"><script src="./iconfont.js"></script></span></code></pre> |
||||
|
<h3 id="-css-">第二步:加入通用css代码(引入一次就行):</h3> |
||||
|
<pre><code class="lang-js hljs javascript"><style type=<span class="hljs-string">"text/css"</span>> |
||||
|
.icon { |
||||
|
width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em; |
||||
|
vertical-align: <span class="hljs-number">-0.15</span>em; |
||||
|
fill: currentColor; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
<<span class="hljs-regexp">/style></span></code></pre> |
||||
|
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3> |
||||
|
<pre><code class="lang-js hljs javascript"><svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>><span class="xml"><span class="hljs-tag"> |
||||
|
<<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>></span><span class="hljs-tag"></<span class="hljs-name">use</span>></span> |
||||
|
</span><<span class="hljs-regexp">/svg> |
||||
|
</span></code></pre> |
||||
|
</div> |
||||
|
</body> |
||||
|
</html> |
@ -0,0 +1,552 @@ |
|||||
|
|
||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta charset="utf-8"/> |
||||
|
<title>IconFont</title> |
||||
|
<link rel="stylesheet" href="demo.css"> |
||||
|
|
||||
|
<style type="text/css"> |
||||
|
|
||||
|
@font-face {font-family: "sc"; |
||||
|
src: url('iconfont.eot'); /* IE9*/ |
||||
|
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
|
url('iconfont.woff') format('woff'), /* chrome, firefox */ |
||||
|
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ |
||||
|
url('iconfont.svg#sc') format('svg'); /* iOS 4.1- */ |
||||
|
} |
||||
|
|
||||
|
.sc { |
||||
|
font-family:"sc" !important; |
||||
|
font-size:16px; |
||||
|
font-style:normal; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-webkit-text-stroke-width: 0.2px; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="main markdown"> |
||||
|
<h1>IconFont 图标</h1> |
||||
|
<ul class="icon_lists clear"> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">流量</div> |
||||
|
<div class="code">&#xe602;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">轻轨</div> |
||||
|
<div class="code">&#xe66f;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">风速3</div> |
||||
|
<div class="code">&#xe635;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">calendar</div> |
||||
|
<div class="code">&#xe74a;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">box</div> |
||||
|
<div class="code">&#xe6cb;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">审核失败</div> |
||||
|
<div class="code">&#xe61d;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">边坡</div> |
||||
|
<div class="code">&#xe676;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">公路</div> |
||||
|
<div class="code">&#xe607;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">GNSS采点</div> |
||||
|
<div class="code">&#xe825;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">传感器设备</div> |
||||
|
<div class="code">&#xe612;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">电流传感器</div> |
||||
|
<div class="code">&#xe62c;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">电压传感器</div> |
||||
|
<div class="code">&#xe62f;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">温度传感器</div> |
||||
|
<div class="code">&#xe637;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">新建</div> |
||||
|
<div class="code">&#xe61f;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">涵洞</div> |
||||
|
<div class="code">&#xe89b;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">管网工程</div> |
||||
|
<div class="code">&#xe646;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">审核</div> |
||||
|
<div class="code">&#xe639;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">智慧城市</div> |
||||
|
<div class="code">&#xe600;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">边坡位移</div> |
||||
|
<div class="code">&#xe60a;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">建筑</div> |
||||
|
<div class="code">&#xe65f;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">储罐</div> |
||||
|
<div class="code">&#xe636;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">隧道</div> |
||||
|
<div class="code">&#xe61e;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">data</div> |
||||
|
<div class="code">&#xe757;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">矿山开采</div> |
||||
|
<div class="code">&#xe608;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">网络</div> |
||||
|
<div class="code">&#xe617;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">监控</div> |
||||
|
<div class="code">&#xe619;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">大数据</div> |
||||
|
<div class="code">&#xe61a;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">数据库</div> |
||||
|
<div class="code">&#xe61b;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">审核成功</div> |
||||
|
<div class="code">&#xe627;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">监控</div> |
||||
|
<div class="code">&#xe620;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">网络系统</div> |
||||
|
<div class="code">&#xe62e;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">定位</div> |
||||
|
<div class="code">&#xe630;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">系统运转情况</div> |
||||
|
<div class="code">&#xe631;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">查看</div> |
||||
|
<div class="code">&#xe63e;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">链接</div> |
||||
|
<div class="code">&#xe63f;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">数据导出-01</div> |
||||
|
<div class="code">&#xe640;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">系统状态</div> |
||||
|
<div class="code">&#xe642;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">消费明细单</div> |
||||
|
<div class="code">&#xe643;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">SQL审核</div> |
||||
|
<div class="code">&#xe645;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">aislogo</div> |
||||
|
<div class="code">&#xe648;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">桥</div> |
||||
|
<div class="code">&#xe715;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">塔式起重机</div> |
||||
|
<div class="code">&#xe615;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">dwg格式</div> |
||||
|
<div class="code">&#xe82b;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">路由器</div> |
||||
|
<div class="code">&#xe603;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">244安装、施工-线性</div> |
||||
|
<div class="code">&#xe8d6;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">245筛选过滤</div> |
||||
|
<div class="code">&#xe8d7;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">244安装、施工</div> |
||||
|
<div class="code">&#xe8d8;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">408条形图-线性</div> |
||||
|
<div class="code">&#xe904;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">409折线图-线性</div> |
||||
|
<div class="code">&#xe906;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">铁塔</div> |
||||
|
<div class="code">&#xe605;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">800格式_文档txt</div> |
||||
|
<div class="code">&#xe6b8;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">801格式_文档doc</div> |
||||
|
<div class="code">&#xe6b9;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">807格式_文档pdf</div> |
||||
|
<div class="code">&#xe6bc;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">803格式_文档xls</div> |
||||
|
<div class="code">&#xe6be;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">819格式_通用文档</div> |
||||
|
<div class="code">&#xe6c0;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">840格式_视频mp4</div> |
||||
|
<div class="code">&#xe6c8;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">860格式_图片jpg</div> |
||||
|
<div class="code">&#xe6cc;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">865格式_图片png</div> |
||||
|
<div class="code">&#xe6ce;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">光照传感器</div> |
||||
|
<div class="code">&#xe638;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">建筑</div> |
||||
|
<div class="code">&#xe61c;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">烟雾传感器</div> |
||||
|
<div class="code">&#xe610;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">市政</div> |
||||
|
<div class="code">&#xe6ca;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">传感器</div> |
||||
|
<div class="code">&#xe60f;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">温湿度传感器</div> |
||||
|
<div class="code">&#xe697;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">压力传感器</div> |
||||
|
<div class="code">&#xe60e;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">应力传感器</div> |
||||
|
<div class="code">&#xe611;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">沉降传感器</div> |
||||
|
<div class="code">&#xe601;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">压力传感器</div> |
||||
|
<div class="code">&#xe606;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">液位传感器</div> |
||||
|
<div class="code">&#xe699;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">computer</div> |
||||
|
<div class="code">&#xe6eb;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">empty</div> |
||||
|
<div class="code">&#xe6f7;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">offline</div> |
||||
|
<div class="code">&#xe712;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">大坝</div> |
||||
|
<div class="code">&#xe632;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">深部位移</div> |
||||
|
<div class="code">&#xe613;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">锚索传感器</div> |
||||
|
<div class="code">&#xe614;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">雨量传感器</div> |
||||
|
<div class="code">&#xe616;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">位移计</div> |
||||
|
<div class="code">&#xe618;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">气象站_1</div> |
||||
|
<div class="code">&#xe60d;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li> |
||||
|
<i class="icon sc"></i> |
||||
|
<div class="name">深基坑</div> |
||||
|
<div class="code">&#xe62a;</div> |
||||
|
</li> |
||||
|
|
||||
|
</ul> |
||||
|
<h2 id="unicode-">unicode引用</h2> |
||||
|
<hr> |
||||
|
|
||||
|
<p>unicode是字体在网页端最原始的应用方式,特点是:</p> |
||||
|
<ul> |
||||
|
<li>兼容性最好,支持ie6+,及所有现代浏览器。</li> |
||||
|
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li> |
||||
|
<li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li> |
||||
|
</ul> |
||||
|
<blockquote> |
||||
|
<p>注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式</p> |
||||
|
</blockquote> |
||||
|
<p>unicode使用步骤如下:</p> |
||||
|
<h3 id="-font-face">第一步:拷贝项目下面生成的font-face</h3> |
||||
|
<pre><code class="lang-js hljs javascript">@font-face { |
||||
|
font-family: <span class="hljs-string">'sc'</span>; |
||||
|
src: url(<span class="hljs-string">'iconfont.eot'</span>); |
||||
|
src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>), |
||||
|
url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>), |
||||
|
url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>), |
||||
|
url(<span class="hljs-string">'iconfont.svg#sc'</span>) format(<span class="hljs-string">'svg'</span>); |
||||
|
} |
||||
|
</code></pre> |
||||
|
<h3 id="-iconfont-">第二步:定义使用iconfont的样式</h3> |
||||
|
<pre><code class="lang-js hljs javascript">.sc{ |
||||
|
font-family:<span class="hljs-string">"sc"</span> !important; |
||||
|
font-size:<span class="hljs-number">16</span>px;font-style:normal; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-webkit-text-stroke-width: <span class="hljs-number">0.2</span>px; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
} |
||||
|
</code></pre> |
||||
|
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3> |
||||
|
<pre><code class="lang-js hljs javascript"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"sc"</span>>&#x33;<span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></code></pre> |
||||
|
|
||||
|
<blockquote> |
||||
|
<p>"sc"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p> |
||||
|
</blockquote> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
</body> |
||||
|
</html> |
After Width: | Height: | Size: 148 KiB |
@ -0,0 +1,521 @@ |
|||||
|
|
||||
|
@font-face {font-family: "anticon"; |
||||
|
src: url('iconfont.eot?t=1494480257283'); /* IE9*/ |
||||
|
src: url('iconfont.eot?t=1494480257283#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
|
url('iconfont.woff?t=1494480257283') format('woff'), /* chrome, firefox */ |
||||
|
url('iconfont.ttf?t=1494480257283') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ |
||||
|
url('iconfont.svg?t=1494480257283#anticon') format('svg'); /* iOS 4.1- */ |
||||
|
} |
||||
|
|
||||
|
.anticon { |
||||
|
font-family:"anticon" !important; |
||||
|
font-size:16px; |
||||
|
font-style:normal; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
} |
||||
|
|
||||
|
.icon-stepforward:before { content: "\e600"; } |
||||
|
|
||||
|
.icon-stepbackward:before { content: "\e601"; } |
||||
|
|
||||
|
.icon-forward:before { content: "\e602"; } |
||||
|
|
||||
|
.icon-banckward:before { content: "\e603"; } |
||||
|
|
||||
|
.icon-caretright:before { content: "\e604"; } |
||||
|
|
||||
|
.icon-caretleft:before { content: "\e605"; } |
||||
|
|
||||
|
.icon-caretdown:before { content: "\e606"; } |
||||
|
|
||||
|
.icon-caretup:before { content: "\e607"; } |
||||
|
|
||||
|
.icon-rightcircle:before { content: "\e608"; } |
||||
|
|
||||
|
.icon-leftcircle:before { content: "\e609"; } |
||||
|
|
||||
|
.icon-upcircle:before { content: "\e60a"; } |
||||
|
|
||||
|
.icon-downcircle:before { content: "\e60b"; } |
||||
|
|
||||
|
.icon-rightcircleo:before { content: "\e60c"; } |
||||
|
|
||||
|
.icon-leftcircleo:before { content: "\e60d"; } |
||||
|
|
||||
|
.icon-upcircleo:before { content: "\e60e"; } |
||||
|
|
||||
|
.icon-downcircleo:before { content: "\e60f"; } |
||||
|
|
||||
|
.icon-verticleleft:before { content: "\e610"; } |
||||
|
|
||||
|
.icon-verticleright:before { content: "\e611"; } |
||||
|
|
||||
|
.icon-rollback:before { content: "\e612"; } |
||||
|
|
||||
|
.icon-retweet:before { content: "\e613"; } |
||||
|
|
||||
|
.icon-shrink:before { content: "\e614"; } |
||||
|
|
||||
|
.icon-arrowsalt:before { content: "\e615"; } |
||||
|
|
||||
|
.icon-doubleright:before { content: "\e617"; } |
||||
|
|
||||
|
.icon-doubleleft:before { content: "\e618"; } |
||||
|
|
||||
|
.icon-arrowdown:before { content: "\e619"; } |
||||
|
|
||||
|
.icon-arrowup:before { content: "\e61a"; } |
||||
|
|
||||
|
.icon-arrowright:before { content: "\e61b"; } |
||||
|
|
||||
|
.icon-arrowleft:before { content: "\e61c"; } |
||||
|
|
||||
|
.icon-down:before { content: "\e61d"; } |
||||
|
|
||||
|
.icon-up:before { content: "\e61e"; } |
||||
|
|
||||
|
.icon-right:before { content: "\e61f"; } |
||||
|
|
||||
|
.icon-left:before { content: "\e620"; } |
||||
|
|
||||
|
.icon-minussquareo:before { content: "\e621"; } |
||||
|
|
||||
|
.icon-minuscircle:before { content: "\e622"; } |
||||
|
|
||||
|
.icon-minuscircleo:before { content: "\e623"; } |
||||
|
|
||||
|
.icon-minus:before { content: "\e624"; } |
||||
|
|
||||
|
.icon-pluscircleo:before { content: "\e625"; } |
||||
|
|
||||
|
.icon-pluscircle:before { content: "\e626"; } |
||||
|
|
||||
|
.icon-plus:before { content: "\e627"; } |
||||
|
|
||||
|
.icon-infocirlce:before { content: "\e628"; } |
||||
|
|
||||
|
.icon-infocirlceo:before { content: "\e629"; } |
||||
|
|
||||
|
.icon-info:before { content: "\e62a"; } |
||||
|
|
||||
|
.icon-exclamation:before { content: "\e62b"; } |
||||
|
|
||||
|
.icon-exclamationcircle:before { content: "\e62c"; } |
||||
|
|
||||
|
.icon-exclamationcircleo:before { content: "\e62d"; } |
||||
|
|
||||
|
.icon-closecircle:before { content: "\e62e"; } |
||||
|
|
||||
|
.icon-closecircleo:before { content: "\e62f"; } |
||||
|
|
||||
|
.icon-checkcircle:before { content: "\e630"; } |
||||
|
|
||||
|
.icon-checkcircleo:before { content: "\e631"; } |
||||
|
|
||||
|
.icon-check:before { content: "\e632"; } |
||||
|
|
||||
|
.icon-close:before { content: "\e633"; } |
||||
|
|
||||
|
.icon-customerservice:before { content: "\e634"; } |
||||
|
|
||||
|
.icon-creditcard:before { content: "\e635"; } |
||||
|
|
||||
|
.icon-codesquareo:before { content: "\e636"; } |
||||
|
|
||||
|
.icon-book:before { content: "\e637"; } |
||||
|
|
||||
|
.icon-barschart:before { content: "\e638"; } |
||||
|
|
||||
|
.icon-bars:before { content: "\e639"; } |
||||
|
|
||||
|
.icon-question:before { content: "\e63a"; } |
||||
|
|
||||
|
.icon-questioncircle:before { content: "\e63b"; } |
||||
|
|
||||
|
.icon-questioncircleo:before { content: "\e63c"; } |
||||
|
|
||||
|
.icon-pause:before { content: "\e63d"; } |
||||
|
|
||||
|
.icon-pausecircle:before { content: "\e63e"; } |
||||
|
|
||||
|
.icon-pausecircleo:before { content: "\e63f"; } |
||||
|
|
||||
|
.icon-clockcircle:before { content: "\e640"; } |
||||
|
|
||||
|
.icon-clockcircleo:before { content: "\e641"; } |
||||
|
|
||||
|
.icon-swap:before { content: "\e642"; } |
||||
|
|
||||
|
.icon-swapleft:before { content: "\e643"; } |
||||
|
|
||||
|
.icon-swapright:before { content: "\e644"; } |
||||
|
|
||||
|
.icon-plussquareo:before { content: "\e645"; } |
||||
|
|
||||
|
.icon-frown:before { content: "\e646"; } |
||||
|
|
||||
|
.icon-menufold:before { content: "\e658"; } |
||||
|
|
||||
|
.icon-mail:before { content: "\e659"; } |
||||
|
|
||||
|
.icon-link:before { content: "\e65b"; } |
||||
|
|
||||
|
.icon-areachart:before { content: "\e65c"; } |
||||
|
|
||||
|
.icon-linechart:before { content: "\e65d"; } |
||||
|
|
||||
|
.icon-home:before { content: "\e65e"; } |
||||
|
|
||||
|
.icon-laptop:before { content: "\e65f"; } |
||||
|
|
||||
|
.icon-star:before { content: "\e660"; } |
||||
|
|
||||
|
.icon-staro:before { content: "\e661"; } |
||||
|
|
||||
|
.icon-filter:before { content: "\e663"; } |
||||
|
|
||||
|
.icon-meho:before { content: "\e666"; } |
||||
|
|
||||
|
.icon-meh:before { content: "\e667"; } |
||||
|
|
||||
|
.icon-shoppingcart:before { content: "\e668"; } |
||||
|
|
||||
|
.icon-save:before { content: "\e669"; } |
||||
|
|
||||
|
.icon-user:before { content: "\e66a"; } |
||||
|
|
||||
|
.icon-videocamera:before { content: "\e66b"; } |
||||
|
|
||||
|
.icon-totop:before { content: "\e66c"; } |
||||
|
|
||||
|
.icon-team:before { content: "\e66d"; } |
||||
|
|
||||
|
.icon-sharealt:before { content: "\e671"; } |
||||
|
|
||||
|
.icon-setting:before { content: "\e672"; } |
||||
|
|
||||
|
.icon-picture:before { content: "\e674"; } |
||||
|
|
||||
|
.icon-phone:before { content: "\e675"; } |
||||
|
|
||||
|
.icon-paperclip:before { content: "\e676"; } |
||||
|
|
||||
|
.icon-notification:before { content: "\e677"; } |
||||
|
|
||||
|
.icon-menuunfold:before { content: "\e679"; } |
||||
|
|
||||
|
.icon-inbox:before { content: "\e67a"; } |
||||
|
|
||||
|
.icon-lock:before { content: "\e67b"; } |
||||
|
|
||||
|
.icon-qrcode:before { content: "\e67c"; } |
||||
|
|
||||
|
.icon-tags:before { content: "\e67d"; } |
||||
|
|
||||
|
.icon-tagso:before { content: "\e67e"; } |
||||
|
|
||||
|
.icon-cloudo:before { content: "\e67f"; } |
||||
|
|
||||
|
.icon-cloud:before { content: "\e680"; } |
||||
|
|
||||
|
.icon-cloudupload:before { content: "\e681"; } |
||||
|
|
||||
|
.icon-clouddownload:before { content: "\e682"; } |
||||
|
|
||||
|
.icon-clouddownloado:before { content: "\e683"; } |
||||
|
|
||||
|
.icon-clouduploado:before { content: "\e684"; } |
||||
|
|
||||
|
.icon-enviroment:before { content: "\e685"; } |
||||
|
|
||||
|
.icon-enviromento:before { content: "\e686"; } |
||||
|
|
||||
|
.icon-eye:before { content: "\e687"; } |
||||
|
|
||||
|
.icon-eyeo:before { content: "\e688"; } |
||||
|
|
||||
|
.icon-camera:before { content: "\e689"; } |
||||
|
|
||||
|
.icon-camerao:before { content: "\e68a"; } |
||||
|
|
||||
|
.icon-windows:before { content: "\e68b"; } |
||||
|
|
||||
|
.icon-export2:before { content: "\e690"; } |
||||
|
|
||||
|
.icon-export:before { content: "\e691"; } |
||||
|
|
||||
|
.icon-circledowno:before { content: "\e693"; } |
||||
|
|
||||
|
.icon-circledown:before { content: "\e694"; } |
||||
|
|
||||
|
.icon-hdd:before { content: "\e69a"; } |
||||
|
|
||||
|
.icon-ie:before { content: "\e69b"; } |
||||
|
|
||||
|
.icon-delete:before { content: "\e69f"; } |
||||
|
|
||||
|
.icon-enter:before { content: "\e6a0"; } |
||||
|
|
||||
|
.icon-pushpino:before { content: "\e6a1"; } |
||||
|
|
||||
|
.icon-pushpin:before { content: "\e6a2"; } |
||||
|
|
||||
|
.icon-heart:before { content: "\e6a3"; } |
||||
|
|
||||
|
.icon-hearto:before { content: "\e6a4"; } |
||||
|
|
||||
|
.icon-smile-circle:before { content: "\e6a7"; } |
||||
|
|
||||
|
.icon-smileo:before { content: "\e6a8"; } |
||||
|
|
||||
|
.icon-frowno:before { content: "\e6a9"; } |
||||
|
|
||||
|
.icon-calculator:before { content: "\e6aa"; } |
||||
|
|
||||
|
.icon-chrome:before { content: "\e6ac"; } |
||||
|
|
||||
|
.icon-github:before { content: "\e6ad"; } |
||||
|
|
||||
|
.icon-iconfontdesktop:before { content: "\e6b4"; } |
||||
|
|
||||
|
.icon-caretcircleoup:before { content: "\e6b5"; } |
||||
|
|
||||
|
.icon-upload:before { content: "\e6b6"; } |
||||
|
|
||||
|
.icon-download:before { content: "\e6b7"; } |
||||
|
|
||||
|
.icon-piechart:before { content: "\e6b8"; } |
||||
|
|
||||
|
.icon-lock1:before { content: "\e6b9"; } |
||||
|
|
||||
|
.icon-unlock:before { content: "\e6ba"; } |
||||
|
|
||||
|
.icon-windowso:before { content: "\e6bc"; } |
||||
|
|
||||
|
.icon-dotchart:before { content: "\e6bd"; } |
||||
|
|
||||
|
.icon-barchart:before { content: "\e6be"; } |
||||
|
|
||||
|
.icon-codesquare:before { content: "\e6bf"; } |
||||
|
|
||||
|
.icon-plussquare:before { content: "\e6c0"; } |
||||
|
|
||||
|
.icon-minussquare:before { content: "\e6c1"; } |
||||
|
|
||||
|
.icon-closesquare:before { content: "\e6c2"; } |
||||
|
|
||||
|
.icon-closesquareo:before { content: "\e6c3"; } |
||||
|
|
||||
|
.icon-checksquare:before { content: "\e6c4"; } |
||||
|
|
||||
|
.icon-checksquareo:before { content: "\e6c5"; } |
||||
|
|
||||
|
.icon-fastbackward:before { content: "\e6c6"; } |
||||
|
|
||||
|
.icon-fastforward:before { content: "\e6c7"; } |
||||
|
|
||||
|
.icon-upsquare:before { content: "\e6c8"; } |
||||
|
|
||||
|
.icon-downsquare:before { content: "\e6c9"; } |
||||
|
|
||||
|
.icon-leftsquare:before { content: "\e6ca"; } |
||||
|
|
||||
|
.icon-rightsquare:before { content: "\e6cb"; } |
||||
|
|
||||
|
.icon-rightsquareo:before { content: "\e6cc"; } |
||||
|
|
||||
|
.icon-leftsquareo:before { content: "\e6cd"; } |
||||
|
|
||||
|
.icon-down-square-o:before { content: "\e6ce"; } |
||||
|
|
||||
|
.icon-up-square-o:before { content: "\e6cf"; } |
||||
|
|
||||
|
.icon-play:before { content: "\e6d0"; } |
||||
|
|
||||
|
.icon-playcircleo:before { content: "\e6d1"; } |
||||
|
|
||||
|
.icon-tag:before { content: "\e6d2"; } |
||||
|
|
||||
|
.icon-tago:before { content: "\e6d3"; } |
||||
|
|
||||
|
.icon-addfile:before { content: "\e910"; } |
||||
|
|
||||
|
.icon-folder1:before { content: "\e662"; } |
||||
|
|
||||
|
.icon-file1:before { content: "\e664"; } |
||||
|
|
||||
|
.icon-switcher:before { content: "\e913"; } |
||||
|
|
||||
|
.icon-addfolder:before { content: "\e914"; } |
||||
|
|
||||
|
.icon-folderopen:before { content: "\e699"; } |
||||
|
|
||||
|
.icon-search1:before { content: "\e670"; } |
||||
|
|
||||
|
.icon-ellipsis1:before { content: "\e647"; } |
||||
|
|
||||
|
.icon-calendar:before { content: "\e6bb"; } |
||||
|
|
||||
|
.icon-filetext1:before { content: "\e698"; } |
||||
|
|
||||
|
.icon-copy1:before { content: "\e648"; } |
||||
|
|
||||
|
.icon-jpgfile1:before { content: "\e69c"; } |
||||
|
|
||||
|
.icon-pdffile1:before { content: "\e6b3"; } |
||||
|
|
||||
|
.icon-exclefile1:before { content: "\e6b0"; } |
||||
|
|
||||
|
.icon-pptfile1:before { content: "\e6b1"; } |
||||
|
|
||||
|
.icon-unknowfile1:before { content: "\e6af"; } |
||||
|
|
||||
|
.icon-wordfile1:before { content: "\e6b2"; } |
||||
|
|
||||
|
.icon-dingding:before { content: "\e923"; } |
||||
|
|
||||
|
.icon-dingding-o:before { content: "\e925"; } |
||||
|
|
||||
|
.icon-mobile1:before { content: "\e678"; } |
||||
|
|
||||
|
.icon-tablet1:before { content: "\e66e"; } |
||||
|
|
||||
|
.icon-bells:before { content: "\e64e"; } |
||||
|
|
||||
|
.icon-disconnect:before { content: "\e64f"; } |
||||
|
|
||||
|
.icon-database:before { content: "\e650"; } |
||||
|
|
||||
|
.icon-barcode:before { content: "\e652"; } |
||||
|
|
||||
|
.icon-hourglass:before { content: "\e653"; } |
||||
|
|
||||
|
.icon-key:before { content: "\e654"; } |
||||
|
|
||||
|
.icon-flag:before { content: "\e655"; } |
||||
|
|
||||
|
.icon-layout:before { content: "\e656"; } |
||||
|
|
||||
|
.icon-printer:before { content: "\e673"; } |
||||
|
|
||||
|
.icon-USB:before { content: "\e6d7"; } |
||||
|
|
||||
|
.icon-skin:before { content: "\e6d8"; } |
||||
|
|
||||
|
.icon-tool:before { content: "\e6d9"; } |
||||
|
|
||||
|
.icon-car:before { content: "\e6dc"; } |
||||
|
|
||||
|
.icon-addusergroup:before { content: "\e6dd"; } |
||||
|
|
||||
|
.icon-carryout:before { content: "\e6df"; } |
||||
|
|
||||
|
.icon-deleteuser:before { content: "\e6e0"; } |
||||
|
|
||||
|
.icon-deleteusergroup:before { content: "\e6e1"; } |
||||
|
|
||||
|
.icon-man:before { content: "\e6e2"; } |
||||
|
|
||||
|
.icon-isv:before { content: "\e6e3"; } |
||||
|
|
||||
|
.icon-gift:before { content: "\e6e4"; } |
||||
|
|
||||
|
.icon-idcard:before { content: "\e6e5"; } |
||||
|
|
||||
|
.icon-medicinebox:before { content: "\e6e6"; } |
||||
|
|
||||
|
.icon-redenvelopes:before { content: "\e6e7"; } |
||||
|
|
||||
|
.icon-rest:before { content: "\e6e8"; } |
||||
|
|
||||
|
.icon-Safety:before { content: "\e6ea"; } |
||||
|
|
||||
|
.icon-wallet:before { content: "\e6eb"; } |
||||
|
|
||||
|
.icon-woman:before { content: "\e6ec"; } |
||||
|
|
||||
|
.icon-adduser:before { content: "\e6ed"; } |
||||
|
|
||||
|
.icon-bank:before { content: "\e6ee"; } |
||||
|
|
||||
|
.icon-Trophy:before { content: "\e6ef"; } |
||||
|
|
||||
|
.icon-loading1:before { content: "\e6ae"; } |
||||
|
|
||||
|
.icon-loading2:before { content: "\e64d"; } |
||||
|
|
||||
|
.icon-like2:before { content: "\e69d"; } |
||||
|
|
||||
|
.icon-dislike2:before { content: "\e69e"; } |
||||
|
|
||||
|
.icon-like1:before { content: "\e64c"; } |
||||
|
|
||||
|
.icon-dislike1:before { content: "\e64b"; } |
||||
|
|
||||
|
.icon-bulb1:before { content: "\e649"; } |
||||
|
|
||||
|
.icon-rocket1:before { content: "\e90f"; } |
||||
|
|
||||
|
.icon-select1:before { content: "\e64a"; } |
||||
|
|
||||
|
.icon-apple1:before { content: "\e68c"; } |
||||
|
|
||||
|
.icon-apple-o:before { content: "\e6d4"; } |
||||
|
|
||||
|
.icon-android1:before { content: "\e938"; } |
||||
|
|
||||
|
.icon-android:before { content: "\e68d"; } |
||||
|
|
||||
|
.icon-aliwangwang-o1:before { content: "\e68f"; } |
||||
|
|
||||
|
.icon-aliwangwang:before { content: "\e68e"; } |
||||
|
|
||||
|
.icon-pay-circle1:before { content: "\e6a5"; } |
||||
|
|
||||
|
.icon-pay-circle-o1:before { content: "\e6a6"; } |
||||
|
|
||||
|
.icon-poweroff:before { content: "\e6d5"; } |
||||
|
|
||||
|
.icon-trademark:before { content: "\e651"; } |
||||
|
|
||||
|
.icon-find:before { content: "\e6db"; } |
||||
|
|
||||
|
.icon-copyright:before { content: "\e6de"; } |
||||
|
|
||||
|
.icon-sound:before { content: "\e6e9"; } |
||||
|
|
||||
|
.icon-earth:before { content: "\e6f1"; } |
||||
|
|
||||
|
.icon-wifi:before { content: "\e6d6"; } |
||||
|
|
||||
|
.icon-sync:before { content: "\e6da"; } |
||||
|
|
||||
|
.icon-login:before { content: "\e657"; } |
||||
|
|
||||
|
.icon-logout:before { content: "\e65a"; } |
||||
|
|
||||
|
.icon-reload1:before { content: "\e616"; } |
||||
|
|
||||
|
.icon-message1:before { content: "\e6ab"; } |
||||
|
|
||||
|
.icon-shake:before { content: "\e94f"; } |
||||
|
|
||||
|
.icon-API:before { content: "\e951"; } |
||||
|
|
||||
|
.icon-appstore-o:before { content: "\e695"; } |
||||
|
|
||||
|
.icon-appstore1:before { content: "\e696"; } |
||||
|
|
||||
|
.icon-scan1:before { content: "\e697"; } |
||||
|
|
||||
|
.icon-exception1:before { content: "\e665"; } |
||||
|
|
||||
|
.icon-contacts:before { content: "\e6f0"; } |
||||
|
|
||||
|
.icon-solution1:before { content: "\e66f"; } |
||||
|
|
||||
|
.icon-fork:before { content: "\e6f2"; } |
||||
|
|
||||
|
.icon-edit1:before { content: "\e692"; } |
||||
|
|
After Width: | Height: | Size: 140 KiB |
After Width: | Height: | Size: 465 B |
After Width: | Height: | Size: 25 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 31 KiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 6.9 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 27 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 37 KiB |
After Width: | Height: | Size: 25 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 32 KiB |
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 32 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 521 B |
After Width: | Height: | Size: 2.3 MiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 63 KiB |
After Width: | Height: | Size: 56 KiB |
After Width: | Height: | Size: 72 KiB |
After Width: | Height: | Size: 82 KiB |
After Width: | Height: | Size: 54 KiB |
After Width: | Height: | Size: 76 KiB |
After Width: | Height: | Size: 52 KiB |
After Width: | Height: | Size: 74 KiB |
After Width: | Height: | Size: 76 KiB |
After Width: | Height: | Size: 82 KiB |
After Width: | Height: | Size: 69 KiB |
After Width: | Height: | Size: 49 KiB |
After Width: | Height: | Size: 59 KiB |
After Width: | Height: | Size: 91 KiB |
After Width: | Height: | Size: 62 KiB |
After Width: | Height: | Size: 72 KiB |
After Width: | Height: | Size: 78 KiB |
After Width: | Height: | Size: 82 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 539 B |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 249 KiB |
After Width: | Height: | Size: 228 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 521 B |
After Width: | Height: | Size: 539 B |
@ -0,0 +1,121 @@ |
|||||
|
.App { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.App-logo { |
||||
|
height: 40vmin; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
@media (prefers-reduced-motion: no-preference) { |
||||
|
.App-logo { |
||||
|
animation: App-logo-spin infinite 20s linear; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.App-header { |
||||
|
background-color: #282c34; |
||||
|
min-height: 100vh; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: calc(10px + 2vmin); |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.App-link { |
||||
|
color: #61dafb; |
||||
|
} |
||||
|
|
||||
|
@keyframes App-logo-spin { |
||||
|
from { |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
to { |
||||
|
transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.root { |
||||
|
display: flex; |
||||
|
place-content: center; |
||||
|
margin-top: 3rem; |
||||
|
} |
||||
|
|
||||
|
.jessibucaContainer-shell { |
||||
|
backdrop-filter: blur(5px); |
||||
|
background: hsla(0, 0%, 50%, 0.5); |
||||
|
padding: 30px 4px 10px 4px; |
||||
|
/* border: 2px solid black; */ |
||||
|
width: auto; |
||||
|
position: relative; |
||||
|
border-radius: 5px; |
||||
|
box-shadow: 0 10px 20px; |
||||
|
} |
||||
|
|
||||
|
.jessibucaContainer-shell:before { |
||||
|
content: "jessibuca demo player"; |
||||
|
position: absolute; |
||||
|
color: darkgray; |
||||
|
top: 4px; |
||||
|
left: 10px; |
||||
|
text-shadow: 1px 1px black; |
||||
|
} |
||||
|
|
||||
|
#jessibucaContainer { |
||||
|
background: rgba(13, 14, 27, 0.7); |
||||
|
width: 340px; |
||||
|
height: 198px; |
||||
|
} |
||||
|
|
||||
|
.input { |
||||
|
display: flex; |
||||
|
margin-top: 10px; |
||||
|
color: white; |
||||
|
place-content: stretch; |
||||
|
} |
||||
|
|
||||
|
.input2 { |
||||
|
bottom: 0px; |
||||
|
} |
||||
|
|
||||
|
.input input { |
||||
|
flex: auto; |
||||
|
} |
||||
|
|
||||
|
.err { |
||||
|
position: absolute; |
||||
|
top: 40px; |
||||
|
left: 10px; |
||||
|
color: red; |
||||
|
} |
||||
|
|
||||
|
.option { |
||||
|
position: absolute; |
||||
|
top: 4px; |
||||
|
right: 10px; |
||||
|
display: flex; |
||||
|
place-content: center; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.option span { |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.page { |
||||
|
/* background: url('./bg.jpg'); */ |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: top; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 720px) { |
||||
|
#jessibucaContainer { |
||||
|
width: 90vw; |
||||
|
height: 52.7vw; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1,620 @@ |
|||||
|
declare namespace Jessibuca { |
||||
|
|
||||
|
/** 超时信息 */ |
||||
|
enum TIMEOUT { |
||||
|
/** 当play()的时候,如果没有数据返回 */ |
||||
|
loadingTimeout = 'loadingTimeout', |
||||
|
/** 当播放过程中,如果超过timeout之后没有数据渲染 */ |
||||
|
delayTimeout = 'delayTimeout', |
||||
|
} |
||||
|
|
||||
|
/** 错误信息 */ |
||||
|
enum ERROR { |
||||
|
/** 播放错误,url 为空的时候,调用 play 方法 */ |
||||
|
playError = 'playError', |
||||
|
/** http 请求失败 */ |
||||
|
fetchError = 'fetchError', |
||||
|
/** websocket 请求失败 */ |
||||
|
websocketError = 'websocketError', |
||||
|
/** webcodecs 解码 h265 失败 */ |
||||
|
webcodecsH265NotSupport = 'webcodecsH265NotSupport', |
||||
|
/** mediaSource 解码 h265 失败 */ |
||||
|
mediaSourceH265NotSupport = 'mediaSourceH265NotSupport', |
||||
|
/** wasm 解码失败 */ |
||||
|
wasmDecodeError = 'wasmDecodeError', |
||||
|
} |
||||
|
|
||||
|
interface Config { |
||||
|
/** |
||||
|
* 播放器容器 |
||||
|
* * 若为 string ,则底层调用的是 document.getElementById('id') |
||||
|
* */ |
||||
|
container: HTMLElement | string; |
||||
|
/** |
||||
|
* 设置最大缓冲时长,单位秒,播放器会自动消除延迟 |
||||
|
*/ |
||||
|
videoBuffer?: number; |
||||
|
/** |
||||
|
* worker地址 |
||||
|
* * 默认引用的是根目录下面的decoder.js文件 ,decoder.js 与 decoder.wasm文件必须是放在同一个目录下面。 */ |
||||
|
decoder?: string; |
||||
|
/** |
||||
|
* 是否不使用离屏模式(提升渲染能力) |
||||
|
*/ |
||||
|
forceNoOffscreen?: boolean; |
||||
|
/** |
||||
|
* 是否开启当页面的'visibilityState'变为'hidden'的时候,自动暂停播放。 |
||||
|
*/ |
||||
|
hiddenAutoPause?: boolean; |
||||
|
/** |
||||
|
* 是否有音频,如果设置`false`,则不对音频数据解码,提升性能。 |
||||
|
*/ |
||||
|
hasAudio?: boolean; |
||||
|
/** |
||||
|
* 设置旋转角度,只支持,0(默认),180,270 三个值 |
||||
|
*/ |
||||
|
rotate?: boolean; |
||||
|
/** |
||||
|
* 1. 当为`true`的时候:视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边。 等同于 `setScaleMode(1)` |
||||
|
* 2. 当为`false`的时候:视频画面完全填充canvas区域,画面会被拉伸。等同于 `setScaleMode(0)` |
||||
|
*/ |
||||
|
isResize?: boolean; |
||||
|
/** |
||||
|
* 1. 当为`true`的时候:视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全。等同于 `setScaleMode(2)` |
||||
|
*/ |
||||
|
isFullSize?: boolean; |
||||
|
/** |
||||
|
* 1. 当为`true`的时候:ws协议不检验是否以.flv为依据,进行协议解析。 |
||||
|
*/ |
||||
|
isFlv?: boolean; |
||||
|
/** |
||||
|
* 是否开启控制台调试打 |
||||
|
*/ |
||||
|
debug?: boolean; |
||||
|
/** |
||||
|
* 1. 设置超时时长, 单位秒 |
||||
|
* 2. 在连接成功之前(loading)和播放中途(heart),如果超过设定时长无数据返回,则回调timeout事件 |
||||
|
*/ |
||||
|
timeout?: number; |
||||
|
/** |
||||
|
* 1. 设置超时时长, 单位秒 |
||||
|
* 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件 |
||||
|
*/ |
||||
|
heartTimeout?: number; |
||||
|
/** |
||||
|
* 1. 设置超时时长, 单位秒 |
||||
|
* 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件 |
||||
|
*/ |
||||
|
loadingTimeout?: number; |
||||
|
/** |
||||
|
* 是否支持屏幕的双击事件,触发全屏,取消全屏事件 |
||||
|
*/ |
||||
|
supportDblclickFullscreen?: boolean; |
||||
|
/** |
||||
|
* 是否显示网 |
||||
|
*/ |
||||
|
showBandwidth?: boolean; |
||||
|
/** |
||||
|
* 配置操作按钮 |
||||
|
*/ |
||||
|
operateBtns?: { |
||||
|
/** 是否显示全屏按钮 */ |
||||
|
fullscreen?: boolean; |
||||
|
/** 是否显示截图按钮 */ |
||||
|
screenshot?: boolean; |
||||
|
/** 是否显示播放暂停按钮 */ |
||||
|
play?: boolean; |
||||
|
/** 是否显示声音按钮 */ |
||||
|
audio?: boolean; |
||||
|
/** 是否显示录制按 */ |
||||
|
record?: boolean; |
||||
|
}; |
||||
|
/** |
||||
|
* 开启屏幕常亮,在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮 |
||||
|
*/ |
||||
|
keepScreenOn?: boolean; |
||||
|
/** |
||||
|
* 是否开启声音,默认是关闭声音播放的 |
||||
|
*/ |
||||
|
isNotMute?: boolean; |
||||
|
/** |
||||
|
* 加载过程中文案 |
||||
|
*/ |
||||
|
loadingText?: boolean; |
||||
|
/** |
||||
|
* 背景图片 |
||||
|
*/ |
||||
|
background?: string; |
||||
|
/** |
||||
|
* 是否开启MediaSource硬解码 |
||||
|
* * 视频编码只支持H.264视频(Safari on iOS不支持) |
||||
|
* * 不支持 forceNoOffscreen 为 false (开启离屏渲染) |
||||
|
*/ |
||||
|
useMSE?: boolean; |
||||
|
/** |
||||
|
* 是否开启Webcodecs硬解码 |
||||
|
* * 视频编码只支持H.264视频 (需在chrome 94版本以上,需要https或者localhost环境) |
||||
|
* * 支持 forceNoOffscreen 为 false (开启离屏渲染) |
||||
|
* */ |
||||
|
useWCS?: boolean; |
||||
|
/** |
||||
|
* 是否开启键盘快捷键 |
||||
|
* 目前支持的键盘快捷键有:esc -> 退出全屏;arrowUp -> 声音增加;arrowDown -> 声音减少; |
||||
|
*/ |
||||
|
hotKey?: boolean; |
||||
|
/** |
||||
|
* 在使用MSE或者Webcodecs 播放H265的时候,是否自动降级到wasm模式。 |
||||
|
* 设置为false 则直接关闭播放,抛出Error 异常,设置为true 则会自动切换成wasm模式播放。 |
||||
|
*/ |
||||
|
autoWasm?: boolean; |
||||
|
/** |
||||
|
* heartTimeout 心跳超时之后自动再播放,不再抛出异常,而直接重新播放视频地址。 |
||||
|
*/ |
||||
|
heartTimeoutReplay?: boolean, |
||||
|
/** |
||||
|
* wasm解码报错之后,不再抛出异常,而是直接重新播放视频地址。 |
||||
|
*/ |
||||
|
wasmDecodeErrorReplay?: boolean, |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
declare class Jessibuca { |
||||
|
|
||||
|
constructor(config?: Jessibuca.Config); |
||||
|
|
||||
|
/** |
||||
|
* 是否开启控制台调试打印 |
||||
|
@example |
||||
|
// 开启
|
||||
|
jessibuca.setDebug(true) |
||||
|
// 关闭
|
||||
|
jessibuca.setDebug(false) |
||||
|
*/ |
||||
|
setDebug(flag: boolean): void; |
||||
|
|
||||
|
/** |
||||
|
* 静音 |
||||
|
@example |
||||
|
jessibuca.mute() |
||||
|
*/ |
||||
|
mute(): void; |
||||
|
|
||||
|
/** |
||||
|
* 取消静音 |
||||
|
@example |
||||
|
jessibuca.cancelMute() |
||||
|
*/ |
||||
|
cancelMute(): void; |
||||
|
|
||||
|
/** |
||||
|
* 留给上层用户操作来触发音频恢复的方法。 |
||||
|
* |
||||
|
* iPhone,chrome等要求自动播放时,音频必须静音,需要由一个真实的用户交互操作来恢复,不能使用代码。 |
||||
|
* |
||||
|
* https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
|
||||
|
*/ |
||||
|
audioResume(): void; |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* 设置超时时长, 单位秒 |
||||
|
* 在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件 |
||||
|
|
||||
|
@example |
||||
|
jessibuca.setTimeout(10) |
||||
|
|
||||
|
jessibuca.on('timeout',function(){ |
||||
|
//
|
||||
|
}); |
||||
|
*/ |
||||
|
setTimeout(): void; |
||||
|
|
||||
|
/** |
||||
|
* @param mode |
||||
|
* 0 视频画面完全填充canvas区域,画面会被拉伸 等同于参数 `isResize` 为false |
||||
|
* |
||||
|
* 1 视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 等同于参数 `isResize` 为true |
||||
|
* |
||||
|
* 2 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 等同于参数 `isFullResize` 为true |
||||
|
@example |
||||
|
jessibuca.setScaleMode(0) |
||||
|
|
||||
|
jessibuca.setScaleMode(1) |
||||
|
|
||||
|
jessibuca.setScaleMode(2) |
||||
|
*/ |
||||
|
setScaleMode(mode: number): void; |
||||
|
|
||||
|
/** |
||||
|
* 暂停播放 |
||||
|
* |
||||
|
* 可以在pause 之后,再调用 `play()`方法就继续播放之前的流。 |
||||
|
@example |
||||
|
jessibuca.pause().then(()=>{ |
||||
|
console.log('pause success') |
||||
|
|
||||
|
jessibuca.play().then(()=>{ |
||||
|
|
||||
|
}).catch((e)=>{ |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
}).catch((e)=>{ |
||||
|
console.log('pause error',e); |
||||
|
}) |
||||
|
*/ |
||||
|
pause(): Promise<void>; |
||||
|
|
||||
|
/** |
||||
|
* 关闭视频,不释放底层资源 |
||||
|
@example |
||||
|
jessibuca.close(); |
||||
|
*/ |
||||
|
close(): void; |
||||
|
|
||||
|
/** |
||||
|
* 关闭视频,释放底层资源 |
||||
|
@example |
||||
|
jessibuca.destroy() |
||||
|
*/ |
||||
|
destroy(): void; |
||||
|
|
||||
|
/** |
||||
|
* 清理画布为黑色背景 |
||||
|
@example |
||||
|
jessibuca.clearView() |
||||
|
*/ |
||||
|
clearView(): void; |
||||
|
|
||||
|
/** |
||||
|
* 播放视频 |
||||
|
@example |
||||
|
|
||||
|
jessibuca.play('url').then(()=>{ |
||||
|
console.log('play success') |
||||
|
}).catch((e)=>{ |
||||
|
console.log('play error',e) |
||||
|
}) |
||||
|
//
|
||||
|
jessibuca.play() |
||||
|
*/ |
||||
|
play(url?: string): Promise<void>; |
||||
|
|
||||
|
/** |
||||
|
* 重新调整视图大小 |
||||
|
*/ |
||||
|
resize(): void; |
||||
|
|
||||
|
/** |
||||
|
* 设置最大缓冲时长,单位秒,播放器会自动消除延迟。 |
||||
|
* |
||||
|
* 等同于 `videoBuffer` 参数。 |
||||
|
* |
||||
|
@example |
||||
|
// 设置 200ms 缓冲
|
||||
|
jessibuca.setBufferTime(0.2) |
||||
|
*/ |
||||
|
setBufferTime(time: number): void; |
||||
|
|
||||
|
/** |
||||
|
* 设置旋转角度,只支持,0(默认) ,180,270 三个值。 |
||||
|
* |
||||
|
* > 可用于实现监控画面小窗和全屏效果,由于iOS没有全屏API,此方法可以模拟页面内全屏效果而且多端效果一致。 * |
||||
|
@example |
||||
|
jessibuca.setRotate(0) |
||||
|
|
||||
|
jessibuca.setRotate(90) |
||||
|
|
||||
|
jessibuca.setRotate(270) |
||||
|
*/ |
||||
|
setRotate(deg: number): void; |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* 设置音量大小,取值0 — 1 |
||||
|
* |
||||
|
* > 区别于 mute 和 cancelMute 方法,虽然设置setVolume(0) 也能达到 mute方法,但是mute 方法是不调用底层播放音频的,能提高性能。而setVolume(0)只是把声音设置为0 ,以达到效果。 |
||||
|
* @param volume 当为0时,完全无声;当为1时,最大音量,默认值 |
||||
|
@example |
||||
|
jessibuca.setVolume(0.2) |
||||
|
|
||||
|
jessibuca.setVolume(0) |
||||
|
|
||||
|
jessibuca.setVolume(1) |
||||
|
*/ |
||||
|
setVolume(volume: number): void; |
||||
|
|
||||
|
/** |
||||
|
* 返回是否加载完毕 |
||||
|
@example |
||||
|
var result = jessibuca.hasLoaded() |
||||
|
console.log(result) // true
|
||||
|
*/ |
||||
|
hasLoaded(): boolean; |
||||
|
|
||||
|
/** |
||||
|
* 开启屏幕常亮,在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。 |
||||
|
* H5目前在chrome\edge 84, android chrome 84及以上有原生亮屏API, 需要是https页面 |
||||
|
* 其余平台为模拟实现,此时为兼容实现,并不保证所有浏览器都支持 |
||||
|
@example |
||||
|
jessibuca.setKeepScreenOn() |
||||
|
*/ |
||||
|
setKeepScreenOn(): boolean; |
||||
|
|
||||
|
/** |
||||
|
* 全屏(取消全屏)播放视频 |
||||
|
@example |
||||
|
jessibuca.setFullscreen(true) |
||||
|
//
|
||||
|
jessibuca.setFullscreen(false) |
||||
|
*/ |
||||
|
setFullscreen(flag: boolean): void; |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* 截图,调用后弹出下载框保存截图 |
||||
|
* @param filename 可选参数, 保存的文件名, 默认 `时间戳` |
||||
|
* @param format 可选参数, 截图的格式,可选png或jpeg或者webp ,默认 `png` |
||||
|
* @param quality 可选参数, 当格式是jpeg或者webp时,压缩质量,取值0 ~ 1 ,默认 `0.92` |
||||
|
* @param type 可选参数, 可选download或者base64或者blob,默认`download` |
||||
|
|
||||
|
@example |
||||
|
|
||||
|
jessibuca.screenshot("test","png",0.5) |
||||
|
|
||||
|
const base64 = jessibuca.screenshot("test","png",0.5,'base64') |
||||
|
|
||||
|
const fileBlob = jessibuca.screenshot("test",'blob') |
||||
|
*/ |
||||
|
screenshot(filename?: string, format?: string, quality?: number, type?: string); |
||||
|
|
||||
|
/** |
||||
|
* 开始录制。 |
||||
|
* @param fileName 可选,默认时间戳 |
||||
|
* @param fileType 可选,默认webm,支持webm 和mp4 格式 |
||||
|
|
||||
|
@example |
||||
|
jessibuca.startRecord('xxx','webm') |
||||
|
*/ |
||||
|
startRecord(fileName: string, fileType: string) |
||||
|
|
||||
|
/** |
||||
|
* 暂停录制并下载。 |
||||
|
@example |
||||
|
jessibuca.stopRecordAndSave() |
||||
|
*/ |
||||
|
stopRecordAndSave(); |
||||
|
|
||||
|
/** |
||||
|
* 返回是否正在播放中状态。 |
||||
|
@example |
||||
|
var result = jessibuca.isPlaying() |
||||
|
console.log(result) // true
|
||||
|
*/ |
||||
|
isPlaying(): boolean; |
||||
|
|
||||
|
/** |
||||
|
* 返回是否静音。 |
||||
|
@example |
||||
|
var result = jessibuca.isMute() |
||||
|
console.log(result) // true
|
||||
|
*/ |
||||
|
isMute(): boolean; |
||||
|
|
||||
|
/** |
||||
|
* 返回是否正在录制。 |
||||
|
@example |
||||
|
var result = jessibuca.isRecording() |
||||
|
console.log(result) // true
|
||||
|
*/ |
||||
|
isRecording(): boolean; |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 监听 jessibuca 初始化事件 |
||||
|
* @example |
||||
|
* jessibuca.on("load",function(){console.log('load')}) |
||||
|
*/ |
||||
|
on(event: 'load', callback: () => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 视频播放持续时间,单位ms |
||||
|
* @example |
||||
|
* jessibuca.on('timeUpdate',function (ts) {console.log('timeUpdate',ts);}) |
||||
|
*/ |
||||
|
on(event: 'timeUpdate', callback: () => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 当解析出视频信息时回调,2个回调参数 |
||||
|
* @example |
||||
|
* jessibuca.on("videoInfo",function(data){console.log('width:',data.width,'height:',data.width)}) |
||||
|
*/ |
||||
|
on(event: 'videoInfo', callback: (data: { |
||||
|
/** 视频宽 */ |
||||
|
width: number; |
||||
|
/** 视频高 */ |
||||
|
height: number; |
||||
|
}) => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 当解析出音频信息时回调,2个回调参数 |
||||
|
* @example |
||||
|
* jessibuca.on("audioInfo",function(data){console.log('numOfChannels:',data.numOfChannels,'sampleRate',data.sampleRate)}) |
||||
|
*/ |
||||
|
on(event: 'audioInfo', callback: (data: { |
||||
|
/** 声频通道 */ |
||||
|
numOfChannels: number; |
||||
|
/** 采样率 */ |
||||
|
sampleRate: number; |
||||
|
}) => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 信息,包含错误信息 |
||||
|
* @example |
||||
|
* jessibuca.on("log",function(data){console.log('data:',data)}) |
||||
|
*/ |
||||
|
on(event: 'log', callback: () => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 错误信息 |
||||
|
* @example |
||||
|
* jessibuca.on("error",function(error){ |
||||
|
if(error === Jessibuca.ERROR.fetchError){ |
||||
|
//
|
||||
|
} |
||||
|
else if(error === Jessibuca.ERROR.webcodecsH265NotSupport){ |
||||
|
//
|
||||
|
} |
||||
|
console.log('error:',error) |
||||
|
}) |
||||
|
*/ |
||||
|
on(event: 'error', callback: (err: Jessibuca.ERROR) => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 当前网速, 单位KB 每秒1次, |
||||
|
* @example |
||||
|
* jessibuca.on("kBps",function(data){console.log('kBps:',data)}) |
||||
|
*/ |
||||
|
on(event: 'kBps', callback: (value: number) => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 渲染开始 |
||||
|
* @example |
||||
|
* jessibuca.on("start",function(){console.log('start render')}) |
||||
|
*/ |
||||
|
on(event: 'start', callback: () => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 当设定的超时时间内无数据返回,则回调 |
||||
|
* @example |
||||
|
* jessibuca.on("timeout",function(error){console.log('timeout:',error)}) |
||||
|
*/ |
||||
|
on(event: 'timeout', callback: (error: Jessibuca.TIMEOUT) => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 当play()的时候,如果没有数据返回,则回调 |
||||
|
* @example |
||||
|
* jessibuca.on("loadingTimeout",function(){console.log('timeout')}) |
||||
|
*/ |
||||
|
on(event: 'loadingTimeout', callback: () => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 当播放过程中,如果超过timeout之后没有数据渲染,则抛出异常。 |
||||
|
* @example |
||||
|
* jessibuca.on("delayTimeout",function(){console.log('timeout')}) |
||||
|
*/ |
||||
|
on(event: 'delayTimeout', callback: () => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 当前是否全屏 |
||||
|
* @example |
||||
|
* jessibuca.on("fullscreen",function(flag){console.log('is fullscreen',flag)}) |
||||
|
*/ |
||||
|
on(event: 'fullscreen', callback: () => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 触发播放事件 |
||||
|
* @example |
||||
|
* jessibuca.on("play",function(flag){console.log('play')}) |
||||
|
*/ |
||||
|
on(event: 'play', callback: () => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 触发暂停事件 |
||||
|
* @example |
||||
|
* jessibuca.on("pause",function(flag){console.log('pause')}) |
||||
|
*/ |
||||
|
on(event: 'pause', callback: () => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 触发声音事件,返回boolean值 |
||||
|
* @example |
||||
|
* jessibuca.on("mute",function(flag){console.log('is mute',flag)}) |
||||
|
*/ |
||||
|
on(event: 'mute', callback: () => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 流状态统计,流开始播放后回调,每秒1次。 |
||||
|
* @example |
||||
|
* jessibuca.on("stats",function(s){console.log("stats is",s)}) |
||||
|
*/ |
||||
|
on(event: 'stats', callback: (stats: { |
||||
|
/** 当前缓冲区时长,单位毫秒 */ |
||||
|
buf: number; |
||||
|
/** 当前视频帧率 */ |
||||
|
fps: number; |
||||
|
/** 当前音频码率,单位bit */ |
||||
|
abps: number; |
||||
|
/** 当前视频码率,单位bit */ |
||||
|
vbps: number; |
||||
|
/** 当前视频帧pts,单位毫秒 */ |
||||
|
ts: number; |
||||
|
}) => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 渲染性能统计,流开始播放后回调,每秒1次。 |
||||
|
* @param performance 0: 表示卡顿,1: 表示流畅,2: 表示非常流程 |
||||
|
* @example |
||||
|
* jessibuca.on("performance",function(performance){console.log("performance is",performance)}) |
||||
|
*/ |
||||
|
on(event: 'performance', callback: (performance: 0 | 1 | 2) => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 录制开始的事件 |
||||
|
|
||||
|
* @example |
||||
|
* jessibuca.on("recordStart",function(){console.log("record start")}) |
||||
|
*/ |
||||
|
on(event: 'recordStart', callback: () => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 录制结束的事件 |
||||
|
|
||||
|
* @example |
||||
|
* jessibuca.on("recordEnd",function(){console.log("record end")}) |
||||
|
*/ |
||||
|
on(event: 'recordEnd', callback: () => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 录制的时候,返回的录制时长,1s一次 |
||||
|
|
||||
|
* @example |
||||
|
* jessibuca.on("recordingTimestamp",function(timestamp){console.log("recordingTimestamp is",timestamp)}) |
||||
|
*/ |
||||
|
on(event: 'recordingTimestamp', callback: (timestamp: number) => void): void; |
||||
|
|
||||
|
/** |
||||
|
* 监听调用play方法 经过 初始化-> 网络请求-> 解封装 -> 解码 -> 渲染 一系列过程的时间消耗 |
||||
|
* @param event |
||||
|
* @param callback |
||||
|
*/ |
||||
|
on(event: 'playToRenderTimes', callback: (times: { |
||||
|
playInitStart: number, // 1 初始化
|
||||
|
playStart: number, // 2 初始化
|
||||
|
streamStart: number, // 3 网络请求
|
||||
|
streamResponse: number, // 4 网络请求
|
||||
|
demuxStart: number, // 5 解封装
|
||||
|
decodeStart: number, // 6 解码
|
||||
|
videoStart: number, // 7 渲染
|
||||
|
playTimestamp: number,// playStart- playInitStart
|
||||
|
streamTimestamp: number,// streamStart - playStart
|
||||
|
streamResponseTimestamp: number,// streamResponse - streamStart
|
||||
|
demuxTimestamp: number, // demuxStart - streamResponse
|
||||
|
decodeTimestamp: number, // decodeStart - demuxStart
|
||||
|
videoTimestamp: number,// videoStart - decodeStart
|
||||
|
allTimestamp: number // videoStart - playInitStart
|
||||
|
}) => void): void |
||||
|
|
||||
|
/** |
||||
|
* 监听方法 |
||||
|
* |
||||
|
@example |
||||
|
|
||||
|
jessibuca.on("load",function(){console.log('load')}) |
||||
|
*/ |
||||
|
on(event: string, callback: Function): void; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
export default Jessibuca; |