commit
c91030f0a5
158 changed files with 32498 additions and 0 deletions
@ -0,0 +1,3 @@ |
||||
> 1% |
||||
last 2 versions |
||||
not ie <= 8 |
||||
@ -0,0 +1,22 @@ |
||||
.DS_Store |
||||
node_modules |
||||
/dist |
||||
example.html |
||||
favicon.ico |
||||
# local env files |
||||
.env.local |
||||
.env.*.local |
||||
|
||||
# Log files |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
|
||||
# Editor directories and files |
||||
.idea |
||||
.vscode |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw* |
||||
@ -0,0 +1,6 @@ |
||||
{ |
||||
"tabWidth": 4, |
||||
"singleQuote": true, |
||||
"trailingComma": "none", |
||||
"printWidth": 140 |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
MIT License |
||||
|
||||
Copyright (c) 2016-2019 vue-manage-system |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
SOFTWARE. |
||||
@ -0,0 +1,5 @@ |
||||
module.exports = { |
||||
presets: [ |
||||
'@vue/app' |
||||
] |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,38 @@ |
||||
{ |
||||
"name": "vue-manage-system", |
||||
"version": "4.2.0", |
||||
"private": true, |
||||
"scripts": { |
||||
"dev": "npm run serve", |
||||
"serve": "vue-cli-service serve", |
||||
"build": "vue-cli-service build" |
||||
}, |
||||
"dependencies": { |
||||
"axios": "^0.18.0", |
||||
"babel-polyfill": "^6.26.0", |
||||
"echarts": "^4.8.0", |
||||
"element-theme": "^2.0.1", |
||||
"element-ui": "^2.13.0", |
||||
"html2canvas": "^1.0.0-rc.7", |
||||
"jspdf": "^2.1.1", |
||||
"mavon-editor": "^2.6.17", |
||||
"postcss-px2rem": "^0.3.0", |
||||
"px2rem-loader": "^0.1.9", |
||||
"vue": "^2.6.10", |
||||
"vue-cropperjs": "^3.0.0", |
||||
"vue-i18n": "^8.10.0", |
||||
"vue-quill-editor": "^3.0.6", |
||||
"vue-router": "^3.0.3", |
||||
"vue-schart": "^2.0.0", |
||||
"vuedraggable": "^2.17.0", |
||||
"vuex": "^3.4.0" |
||||
}, |
||||
"devDependencies": { |
||||
"@vue/cli-plugin-babel": "^3.9.0", |
||||
"@vue/cli-service": "^3.9.0", |
||||
"element-theme-chalk": "^2.13.0", |
||||
"node-sass": "^4.13.0", |
||||
"sass-loader": "^8.0.0", |
||||
"vue-template-compiler": "^2.6.10" |
||||
} |
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
module.exports = { |
||||
plugins: { |
||||
autoprefixer: {} |
||||
} |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> |
||||
<link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css"> |
||||
<title>四川大学虚拟仿真系统</title> |
||||
</head> |
||||
<body> |
||||
<noscript> |
||||
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
</noscript> |
||||
<div id="app"></div> |
||||
<!-- built files will be auto injected --> |
||||
</body> |
||||
|
||||
</html> |
||||
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 112 KiB |
@ -0,0 +1,35 @@ |
||||
<template> |
||||
<div id="app" > |
||||
<router-view></router-view> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'App', |
||||
created () { |
||||
//在页面加载时读取sessionStorage里的状态信息 |
||||
if (sessionStorage.getItem("cd_client_store") ) { |
||||
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("cd_client_store")))) |
||||
} |
||||
|
||||
//在页面刷新时将vuex里的信息保存到sessionStorage里 |
||||
window.addEventListener("beforeunload",()=>{ |
||||
sessionStorage.setItem("cd_client_store",JSON.stringify(this.$store.state)) |
||||
}) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
#app{ |
||||
} |
||||
@import "./assets/css/main.css"; |
||||
/* @import "./assets/css/color-dark.css"; */ |
||||
/*深色主题*/ |
||||
/* @import "./assets/css/theme-green/color-green.css"; */ |
||||
/* 浅绿色主题 */ |
||||
@import "./assets/css/theme-red/color-red.css"; |
||||
/* 红色主题 */ |
||||
|
||||
</style> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,28 @@ |
||||
.header{ |
||||
background-color: #242f42; |
||||
} |
||||
.login-wrap{ |
||||
background: #324157; |
||||
} |
||||
.plugins-tips{ |
||||
background: #eef1f6; |
||||
} |
||||
.plugins-tips a{ |
||||
color: #20a0ff; |
||||
} |
||||
.el-upload--text em { |
||||
color: #20a0ff; |
||||
} |
||||
.pure-button{ |
||||
background: #20a0ff; |
||||
} |
||||
.tags-li.active { |
||||
border: 1px solid #409EFF; |
||||
background-color: #409EFF; |
||||
} |
||||
.message-title{ |
||||
color: #20a0ff; |
||||
} |
||||
.collapse-btn:hover{ |
||||
background: rgb(40,52,70); |
||||
} |
||||
@ -0,0 +1,539 @@ |
||||
/* Logo 字体 */ |
||||
@font-face { |
||||
font-family: "iconfont logo"; |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); |
||||
} |
||||
|
||||
.logo { |
||||
font-family: "iconfont logo"; |
||||
font-size: 160px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
/* tabs */ |
||||
.nav-tabs { |
||||
position: relative; |
||||
} |
||||
|
||||
.nav-tabs .nav-more { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 42px; |
||||
line-height: 42px; |
||||
color: #666; |
||||
} |
||||
|
||||
#tabs { |
||||
border-bottom: 1px solid #eee; |
||||
} |
||||
|
||||
#tabs li { |
||||
cursor: pointer; |
||||
width: 100px; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
border-bottom: 2px solid transparent; |
||||
position: relative; |
||||
z-index: 1; |
||||
margin-bottom: -1px; |
||||
color: #666; |
||||
} |
||||
|
||||
|
||||
#tabs .active { |
||||
border-bottom-color: #f00; |
||||
color: #222; |
||||
} |
||||
|
||||
.tab-container .content { |
||||
display: none; |
||||
} |
||||
|
||||
/* 页面布局 */ |
||||
.main { |
||||
padding: 30px 100px; |
||||
width: 960px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.main .logo { |
||||
color: #333; |
||||
text-align: left; |
||||
margin-bottom: 30px; |
||||
line-height: 1; |
||||
height: 110px; |
||||
margin-top: -50px; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.main .logo a { |
||||
font-size: 160px; |
||||
color: #333; |
||||
} |
||||
|
||||
.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; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.icon_lists li { |
||||
width: 100px; |
||||
margin-bottom: 10px; |
||||
margin-right: 20px; |
||||
text-align: center; |
||||
list-style: none !important; |
||||
cursor: default; |
||||
} |
||||
|
||||
.icon_lists li .code-name { |
||||
line-height: 1.2; |
||||
} |
||||
|
||||
.icon_lists .icon { |
||||
display: block; |
||||
height: 100px; |
||||
line-height: 100px; |
||||
font-size: 42px; |
||||
margin: 10px auto; |
||||
color: #333; |
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
||||
transition: font-size 0.25s linear, width 0.25s linear; |
||||
} |
||||
|
||||
.icon_lists .icon:hover { |
||||
font-size: 100px; |
||||
} |
||||
|
||||
.icon_lists .svg-icon { |
||||
/* 通过设置 font-size 来改变图标大小 */ |
||||
width: 1em; |
||||
/* 图标和文字相邻时，垂直对齐 */ |
||||
vertical-align: -0.15em; |
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||
fill: currentColor; |
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||
normalize.css 中也包含这行 */ |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.icon_lists li .name, |
||||
.icon_lists li .code-name { |
||||
color: #666; |
||||
} |
||||
|
||||
/* markdown 样式 */ |
||||
.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 { |
||||
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 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; |
||||
} |
||||
|
||||
.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; |
||||
} |
||||
|
||||
/* 代码高亮 */ |
||||
/* PrismJS 1.15.0 |
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ |
||||
/** |
||||
* prism.js default theme for JavaScript, CSS and HTML |
||||
* Based on dabblet (http://dabblet.com) |
||||
* @author Lea Verou |
||||
*/ |
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
color: black; |
||||
background: none; |
||||
text-shadow: 0 1px white; |
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||
text-align: left; |
||||
white-space: pre; |
||||
word-spacing: normal; |
||||
word-break: normal; |
||||
word-wrap: normal; |
||||
line-height: 1.5; |
||||
|
||||
-moz-tab-size: 4; |
||||
-o-tab-size: 4; |
||||
tab-size: 4; |
||||
|
||||
-webkit-hyphens: none; |
||||
-moz-hyphens: none; |
||||
-ms-hyphens: none; |
||||
hyphens: none; |
||||
} |
||||
|
||||
pre[class*="language-"]::-moz-selection, |
||||
pre[class*="language-"] ::-moz-selection, |
||||
code[class*="language-"]::-moz-selection, |
||||
code[class*="language-"] ::-moz-selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
pre[class*="language-"]::selection, |
||||
pre[class*="language-"] ::selection, |
||||
code[class*="language-"]::selection, |
||||
code[class*="language-"] ::selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
@media print { |
||||
|
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
text-shadow: none; |
||||
} |
||||
} |
||||
|
||||
/* Code blocks */ |
||||
pre[class*="language-"] { |
||||
padding: 1em; |
||||
margin: .5em 0; |
||||
overflow: auto; |
||||
} |
||||
|
||||
:not(pre)>code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
background: #f5f2f0; |
||||
} |
||||
|
||||
/* Inline code */ |
||||
:not(pre)>code[class*="language-"] { |
||||
padding: .1em; |
||||
border-radius: .3em; |
||||
white-space: normal; |
||||
} |
||||
|
||||
.token.comment, |
||||
.token.prolog, |
||||
.token.doctype, |
||||
.token.cdata { |
||||
color: slategray; |
||||
} |
||||
|
||||
.token.punctuation { |
||||
color: #999; |
||||
} |
||||
|
||||
.namespace { |
||||
opacity: .7; |
||||
} |
||||
|
||||
.token.property, |
||||
.token.tag, |
||||
.token.boolean, |
||||
.token.number, |
||||
.token.constant, |
||||
.token.symbol, |
||||
.token.deleted { |
||||
color: #905; |
||||
} |
||||
|
||||
.token.selector, |
||||
.token.attr-name, |
||||
.token.string, |
||||
.token.char, |
||||
.token.builtin, |
||||
.token.inserted { |
||||
color: #690; |
||||
} |
||||
|
||||
.token.operator, |
||||
.token.entity, |
||||
.token.url, |
||||
.language-css .token.string, |
||||
.style .token.string { |
||||
color: #9a6e3a; |
||||
background: hsla(0, 0%, 100%, .5); |
||||
} |
||||
|
||||
.token.atrule, |
||||
.token.attr-value, |
||||
.token.keyword { |
||||
color: #07a; |
||||
} |
||||
|
||||
.token.function, |
||||
.token.class-name { |
||||
color: #DD4A68; |
||||
} |
||||
|
||||
.token.regex, |
||||
.token.important, |
||||
.token.variable { |
||||
color: #e90; |
||||
} |
||||
|
||||
.token.important, |
||||
.token.bold { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.token.italic { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.token.entity { |
||||
cursor: help; |
||||
} |
||||
@ -0,0 +1,237 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>IconFont Demo</title> |
||||
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> |
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||
<link rel="stylesheet" href="demo.css"> |
||||
<link rel="stylesheet" href="iconfont.css"> |
||||
<script src="iconfont.js"></script> |
||||
<!-- jQuery --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||
<!-- 代码高亮 --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||
</head> |
||||
<body> |
||||
<div class="main"> |
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1> |
||||
<div class="nav-tabs"> |
||||
<ul id="tabs" class="dib-box"> |
||||
<li class="dib active"><span>Unicode</span></li> |
||||
<li class="dib"><span>Font class</span></li> |
||||
<li class="dib"><span>Symbol</span></li> |
||||
</ul> |
||||
|
||||
</div> |
||||
<div class="tab-container"> |
||||
<div class="content unicode" style="display: block;"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">徽章，会员</div> |
||||
<div class="code-name">&#xe65f;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">皇冠</div> |
||||
<div class="code-name">&#xe798;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">学历</div> |
||||
<div class="code-name">&#xe63a;</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<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">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> |
||||
<pre><code class="language-css" |
||||
>@font-face { |
||||
font-family: 'iconfont'; |
||||
src: url('iconfont.eot'); |
||||
src: url('iconfont.eot?#iefix') format('embedded-opentype'), |
||||
url('iconfont.woff2') format('woff2'), |
||||
url('iconfont.woff') format('woff'), |
||||
url('iconfont.ttf') format('truetype'), |
||||
url('iconfont.svg#iconfont') format('svg'); |
||||
} |
||||
</code></pre> |
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> |
||||
<pre><code class="language-css" |
||||
>.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> |
||||
<pre> |
||||
<code class="language-html" |
||||
><span class="iconfont">&#x33;</span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content font-class"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-huizhanghuiyuan"></span> |
||||
<div class="name"> |
||||
徽章，会员 |
||||
</div> |
||||
<div class="code-name">.icon-huizhanghuiyuan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-huangguan"></span> |
||||
<div class="name"> |
||||
皇冠 |
||||
</div> |
||||
<div class="code-name">.icon-huangguan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-edu-line"></span> |
||||
<div class="name"> |
||||
学历 |
||||
</div> |
||||
<div class="code-name">.icon-edu-line |
||||
</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<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="language-html"><link rel="stylesheet" href="./iconfont.css"> |
||||
</code></pre> |
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>" |
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content symbol"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-huizhanghuiyuan"></use> |
||||
</svg> |
||||
<div class="name">徽章，会员</div> |
||||
<div class="code-name">#icon-huizhanghuiyuan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-huangguan"></use> |
||||
</svg> |
||||
<div class="name">皇冠</div> |
||||
<div class="code-name">#icon-huangguan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-edu-line"></use> |
||||
</svg> |
||||
<div class="name">学历</div> |
||||
<div class="code-name">#icon-edu-line</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<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="language-html"><script src="./iconfont.js"></script> |
||||
</code></pre> |
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> |
||||
<pre><code class="language-html"><style> |
||||
.icon { |
||||
width: 1em; |
||||
height: 1em; |
||||
vertical-align: -0.15em; |
||||
fill: currentColor; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-xxx"></use> |
||||
</svg> |
||||
</code></pre> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
<script> |
||||
$(document).ready(function () { |
||||
$('.tab-container .content:first').show() |
||||
|
||||
$('#tabs li').click(function (e) { |
||||
var tabContent = $('.tab-container .content') |
||||
var index = $(this).index() |
||||
|
||||
if ($(this).hasClass('active')) { |
||||
return |
||||
} else { |
||||
$('#tabs li').removeClass('active') |
||||
$(this).addClass('active') |
||||
|
||||
tabContent.hide().eq(index).fadeIn() |
||||
} |
||||
}) |
||||
}) |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,29 @@ |
||||
@font-face {font-family: "iconfont"; |
||||
src: url('iconfont.eot?t=1591082516626'); /* IE9 */ |
||||
src: url('iconfont.eot?t=1591082516626#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), |
||||
url('iconfont.woff?t=1591082516626') format('woff'), |
||||
url('iconfont.ttf?t=1591082516626') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ |
||||
url('iconfont.svg?t=1591082516626#iconfont') format('svg'); /* iOS 4.1- */ |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.icon-huizhanghuiyuan:before { |
||||
content: "\e65f"; |
||||
} |
||||
|
||||
.icon-huangguan:before { |
||||
content: "\e798"; |
||||
} |
||||
|
||||
.icon-edu-line:before { |
||||
content: "\e63a"; |
||||
} |
||||
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,30 @@ |
||||
{ |
||||
"id": "", |
||||
"name": "", |
||||
"font_family": "iconfont", |
||||
"css_prefix_text": "icon-", |
||||
"description": "", |
||||
"glyphs": [ |
||||
{ |
||||
"icon_id": "444400", |
||||
"name": "徽章，会员", |
||||
"font_class": "huizhanghuiyuan", |
||||
"unicode": "e65f", |
||||
"unicode_decimal": 58975 |
||||
}, |
||||
{ |
||||
"icon_id": "4294111", |
||||
"name": "皇冠", |
||||
"font_class": "huangguan", |
||||
"unicode": "e798", |
||||
"unicode_decimal": 59288 |
||||
}, |
||||
{ |
||||
"icon_id": "6119296", |
||||
"name": "学历", |
||||
"font_class": "edu-line", |
||||
"unicode": "e63a", |
||||
"unicode_decimal": 58938 |
||||
} |
||||
] |
||||
} |
||||
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,539 @@ |
||||
/* Logo 字体 */ |
||||
@font-face { |
||||
font-family: "iconfont logo"; |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); |
||||
} |
||||
|
||||
.logo { |
||||
font-family: "iconfont logo"; |
||||
font-size: 160px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
/* tabs */ |
||||
.nav-tabs { |
||||
position: relative; |
||||
} |
||||
|
||||
.nav-tabs .nav-more { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 42px; |
||||
line-height: 42px; |
||||
color: #666; |
||||
} |
||||
|
||||
#tabs { |
||||
border-bottom: 1px solid #eee; |
||||
} |
||||
|
||||
#tabs li { |
||||
cursor: pointer; |
||||
width: 100px; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
border-bottom: 2px solid transparent; |
||||
position: relative; |
||||
z-index: 1; |
||||
margin-bottom: -1px; |
||||
color: #666; |
||||
} |
||||
|
||||
|
||||
#tabs .active { |
||||
border-bottom-color: #f00; |
||||
color: #222; |
||||
} |
||||
|
||||
.tab-container .content { |
||||
display: none; |
||||
} |
||||
|
||||
/* 页面布局 */ |
||||
.main { |
||||
padding: 30px 100px; |
||||
width: 960px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.main .logo { |
||||
color: #333; |
||||
text-align: left; |
||||
margin-bottom: 30px; |
||||
line-height: 1; |
||||
height: 110px; |
||||
margin-top: -50px; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.main .logo a { |
||||
font-size: 160px; |
||||
color: #333; |
||||
} |
||||
|
||||
.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; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.icon_lists li { |
||||
width: 100px; |
||||
margin-bottom: 10px; |
||||
margin-right: 20px; |
||||
text-align: center; |
||||
list-style: none !important; |
||||
cursor: default; |
||||
} |
||||
|
||||
.icon_lists li .code-name { |
||||
line-height: 1.2; |
||||
} |
||||
|
||||
.icon_lists .icon { |
||||
display: block; |
||||
height: 100px; |
||||
line-height: 100px; |
||||
font-size: 42px; |
||||
margin: 10px auto; |
||||
color: #333; |
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
||||
transition: font-size 0.25s linear, width 0.25s linear; |
||||
} |
||||
|
||||
.icon_lists .icon:hover { |
||||
font-size: 100px; |
||||
} |
||||
|
||||
.icon_lists .svg-icon { |
||||
/* 通过设置 font-size 来改变图标大小 */ |
||||
width: 1em; |
||||
/* 图标和文字相邻时，垂直对齐 */ |
||||
vertical-align: -0.15em; |
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||
fill: currentColor; |
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||
normalize.css 中也包含这行 */ |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.icon_lists li .name, |
||||
.icon_lists li .code-name { |
||||
color: #666; |
||||
} |
||||
|
||||
/* markdown 样式 */ |
||||
.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 { |
||||
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 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; |
||||
} |
||||
|
||||
.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; |
||||
} |
||||
|
||||
/* 代码高亮 */ |
||||
/* PrismJS 1.15.0 |
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ |
||||
/** |
||||
* prism.js default theme for JavaScript, CSS and HTML |
||||
* Based on dabblet (http://dabblet.com) |
||||
* @author Lea Verou |
||||
*/ |
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
color: black; |
||||
background: none; |
||||
text-shadow: 0 1px white; |
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||
text-align: left; |
||||
white-space: pre; |
||||
word-spacing: normal; |
||||
word-break: normal; |
||||
word-wrap: normal; |
||||
line-height: 1.5; |
||||
|
||||
-moz-tab-size: 4; |
||||
-o-tab-size: 4; |
||||
tab-size: 4; |
||||
|
||||
-webkit-hyphens: none; |
||||
-moz-hyphens: none; |
||||
-ms-hyphens: none; |
||||
hyphens: none; |
||||
} |
||||
|
||||
pre[class*="language-"]::-moz-selection, |
||||
pre[class*="language-"] ::-moz-selection, |
||||
code[class*="language-"]::-moz-selection, |
||||
code[class*="language-"] ::-moz-selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
pre[class*="language-"]::selection, |
||||
pre[class*="language-"] ::selection, |
||||
code[class*="language-"]::selection, |
||||
code[class*="language-"] ::selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
@media print { |
||||
|
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
text-shadow: none; |
||||
} |
||||
} |
||||
|
||||
/* Code blocks */ |
||||
pre[class*="language-"] { |
||||
padding: 1em; |
||||
margin: .5em 0; |
||||
overflow: auto; |
||||
} |
||||
|
||||
:not(pre)>code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
background: #f5f2f0; |
||||
} |
||||
|
||||
/* Inline code */ |
||||
:not(pre)>code[class*="language-"] { |
||||
padding: .1em; |
||||
border-radius: .3em; |
||||
white-space: normal; |
||||
} |
||||
|
||||
.token.comment, |
||||
.token.prolog, |
||||
.token.doctype, |
||||
.token.cdata { |
||||
color: slategray; |
||||
} |
||||
|
||||
.token.punctuation { |
||||
color: #999; |
||||
} |
||||
|
||||
.namespace { |
||||
opacity: .7; |
||||
} |
||||
|
||||
.token.property, |
||||
.token.tag, |
||||
.token.boolean, |
||||
.token.number, |
||||
.token.constant, |
||||
.token.symbol, |
||||
.token.deleted { |
||||
color: #905; |
||||
} |
||||
|
||||
.token.selector, |
||||
.token.attr-name, |
||||
.token.string, |
||||
.token.char, |
||||
.token.builtin, |
||||
.token.inserted { |
||||
color: #690; |
||||
} |
||||
|
||||
.token.operator, |
||||
.token.entity, |
||||
.token.url, |
||||
.language-css .token.string, |
||||
.style .token.string { |
||||
color: #9a6e3a; |
||||
background: hsla(0, 0%, 100%, .5); |
||||
} |
||||
|
||||
.token.atrule, |
||||
.token.attr-value, |
||||
.token.keyword { |
||||
color: #07a; |
||||
} |
||||
|
||||
.token.function, |
||||
.token.class-name { |
||||
color: #DD4A68; |
||||
} |
||||
|
||||
.token.regex, |
||||
.token.important, |
||||
.token.variable { |
||||
color: #e90; |
||||
} |
||||
|
||||
.token.important, |
||||
.token.bold { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.token.italic { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.token.entity { |
||||
cursor: help; |
||||
} |
||||
@ -0,0 +1,283 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>IconFont Demo</title> |
||||
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> |
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||
<link rel="stylesheet" href="demo.css"> |
||||
<link rel="stylesheet" href="iconfont.css"> |
||||
<script src="iconfont.js"></script> |
||||
<!-- jQuery --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||
<!-- 代码高亮 --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||
</head> |
||||
<body> |
||||
<div class="main"> |
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1> |
||||
<div class="nav-tabs"> |
||||
<ul id="tabs" class="dib-box"> |
||||
<li class="dib active"><span>Unicode</span></li> |
||||
<li class="dib"><span>Font class</span></li> |
||||
<li class="dib"><span>Symbol</span></li> |
||||
</ul> |
||||
|
||||
</div> |
||||
<div class="tab-container"> |
||||
<div class="content unicode" style="display: block;"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">徽章，会员</div> |
||||
<div class="code-name">&#xe65f;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">学士帽</div> |
||||
<div class="code-name">&#xe663;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">学习</div> |
||||
<div class="code-name">&#xe763;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">皇冠</div> |
||||
<div class="code-name">&#xe798;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">学历</div> |
||||
<div class="code-name">&#xe63a;</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<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">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> |
||||
<pre><code class="language-css" |
||||
>@font-face { |
||||
font-family: 'iconfont'; |
||||
src: url('iconfont.eot'); |
||||
src: url('iconfont.eot?#iefix') format('embedded-opentype'), |
||||
url('iconfont.woff2') format('woff2'), |
||||
url('iconfont.woff') format('woff'), |
||||
url('iconfont.ttf') format('truetype'), |
||||
url('iconfont.svg#iconfont') format('svg'); |
||||
} |
||||
</code></pre> |
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> |
||||
<pre><code class="language-css" |
||||
>.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> |
||||
<pre> |
||||
<code class="language-html" |
||||
><span class="iconfont">&#x33;</span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content font-class"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-huizhanghuiyuan"></span> |
||||
<div class="name"> |
||||
徽章，会员 |
||||
</div> |
||||
<div class="code-name">.icon-huizhanghuiyuan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-xueshimao"></span> |
||||
<div class="name"> |
||||
学士帽 |
||||
</div> |
||||
<div class="code-name">.icon-xueshimao |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-xuexi"></span> |
||||
<div class="name"> |
||||
学习 |
||||
</div> |
||||
<div class="code-name">.icon-xuexi |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-huangguan"></span> |
||||
<div class="name"> |
||||
皇冠 |
||||
</div> |
||||
<div class="code-name">.icon-huangguan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-edu-line"></span> |
||||
<div class="name"> |
||||
学历 |
||||
</div> |
||||
<div class="code-name">.icon-edu-line |
||||
</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<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="language-html"><link rel="stylesheet" href="./iconfont.css"> |
||||
</code></pre> |
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>" |
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content symbol"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-huizhanghuiyuan"></use> |
||||
</svg> |
||||
<div class="name">徽章，会员</div> |
||||
<div class="code-name">#icon-huizhanghuiyuan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-xueshimao"></use> |
||||
</svg> |
||||
<div class="name">学士帽</div> |
||||
<div class="code-name">#icon-xueshimao</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-xuexi"></use> |
||||
</svg> |
||||
<div class="name">学习</div> |
||||
<div class="code-name">#icon-xuexi</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-huangguan"></use> |
||||
</svg> |
||||
<div class="name">皇冠</div> |
||||
<div class="code-name">#icon-huangguan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-edu-line"></use> |
||||
</svg> |
||||
<div class="name">学历</div> |
||||
<div class="code-name">#icon-edu-line</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<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="language-html"><script src="./iconfont.js"></script> |
||||
</code></pre> |
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> |
||||
<pre><code class="language-html"><style> |
||||
.icon { |
||||
width: 1em; |
||||
height: 1em; |
||||
vertical-align: -0.15em; |
||||
fill: currentColor; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-xxx"></use> |
||||
</svg> |
||||
</code></pre> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
<script> |
||||
$(document).ready(function () { |
||||
$('.tab-container .content:first').show() |
||||
|
||||
$('#tabs li').click(function (e) { |
||||
var tabContent = $('.tab-container .content') |
||||
var index = $(this).index() |
||||
|
||||
if ($(this).hasClass('active')) { |
||||
return |
||||
} else { |
||||
$('#tabs li').removeClass('active') |
||||
$(this).addClass('active') |
||||
|
||||
tabContent.hide().eq(index).fadeIn() |
||||
} |
||||
}) |
||||
}) |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,37 @@ |
||||
@font-face {font-family: "iconfont"; |
||||
src: url('iconfont.eot?t=1591084244863'); /* IE9 */ |
||||
src: url('iconfont.eot?t=1591084244863#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), |
||||
url('iconfont.woff?t=1591084244863') format('woff'), |
||||
url('iconfont.ttf?t=1591084244863') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ |
||||
url('iconfont.svg?t=1591084244863#iconfont') format('svg'); /* iOS 4.1- */ |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.icon-huizhanghuiyuan:before { |
||||
content: "\e65f"; |
||||
} |
||||
|
||||
.icon-xueshimao:before { |
||||
content: "\e663"; |
||||
} |
||||
|
||||
.icon-xuexi:before { |
||||
content: "\e763"; |
||||
} |
||||
|
||||
.icon-huangguan:before { |
||||
content: "\e798"; |
||||
} |
||||
|
||||
.icon-edu-line:before { |
||||
content: "\e63a"; |
||||
} |
||||
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,44 @@ |
||||
{ |
||||
"id": "", |
||||
"name": "", |
||||
"font_family": "iconfont", |
||||
"css_prefix_text": "icon-", |
||||
"description": "", |
||||
"glyphs": [ |
||||
{ |
||||
"icon_id": "444400", |
||||
"name": "徽章，会员", |
||||
"font_class": "huizhanghuiyuan", |
||||
"unicode": "e65f", |
||||
"unicode_decimal": 58975 |
||||
}, |
||||
{ |
||||
"icon_id": "1495449", |
||||
"name": "学士帽", |
||||
"font_class": "xueshimao", |
||||
"unicode": "e663", |
||||
"unicode_decimal": 58979 |
||||
}, |
||||
{ |
||||
"icon_id": "4292658", |
||||
"name": "学习", |
||||
"font_class": "xuexi", |
||||
"unicode": "e763", |
||||
"unicode_decimal": 59235 |
||||
}, |
||||
{ |
||||
"icon_id": "4294111", |
||||
"name": "皇冠", |
||||
"font_class": "huangguan", |
||||
"unicode": "e798", |
||||
"unicode_decimal": 59288 |
||||
}, |
||||
{ |
||||
"icon_id": "6119296", |
||||
"name": "学历", |
||||
"font_class": "edu-line", |
||||
"unicode": "e63a", |
||||
"unicode_decimal": 58938 |
||||
} |
||||
] |
||||
} |
||||
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,4 @@ |
||||
|
||||
[class*=" icon-"], [class^=icon-] { |
||||
font-family: iconfont!important; |
||||
} |
||||
@ -0,0 +1,29 @@ |
||||
.header{ |
||||
background-color: #fff; |
||||
} |
||||
.login-wrap{ |
||||
background: rgba(56, 157, 170, 0.82);; |
||||
} |
||||
.plugins-tips{ |
||||
background: #f2f2f2; |
||||
} |
||||
.plugins-tips a{ |
||||
color: #00d1b2; |
||||
} |
||||
.el-upload--text em { |
||||
color: #00d1b2; |
||||
} |
||||
.pure-button{ |
||||
background: #00d1b2; |
||||
} |
||||
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { |
||||
background-color: #00d1b2 !important; |
||||
border-color: #00d1b2 !important; |
||||
} |
||||
.tags-li.active { |
||||
border: 1px solid #00d1b2; |
||||
background-color: #00d1b2; |
||||
} |
||||
.collapse-btn:hover{ |
||||
background: #00d1b2; |
||||
} |
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,29 @@ |
||||
.header{ |
||||
background-color: #fff; |
||||
} |
||||
.login-wrap{ |
||||
background: rgba(56, 157, 170, 0.82);; |
||||
} |
||||
.plugins-tips{ |
||||
background: #f2f2f2; |
||||
} |
||||
.plugins-tips a{ |
||||
color: #00d1b2; |
||||
} |
||||
.el-upload--text em { |
||||
color: #00d1b2; |
||||
} |
||||
.pure-button{ |
||||
background: #00d1b2; |
||||
} |
||||
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { |
||||
background-color: #00d1b2 !important; |
||||
border-color: #00d1b2 !important; |
||||
} |
||||
.tags-li.active { |
||||
border: 1px solid #00d1b2; |
||||
background-color: #00d1b2; |
||||
} |
||||
.collapse-btn:hover{ |
||||
background: #00d1b2; |
||||
} |
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,539 @@ |
||||
/* Logo 字体 */ |
||||
@font-face { |
||||
font-family: "iconfont logo"; |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); |
||||
} |
||||
|
||||
.logo { |
||||
font-family: "iconfont logo"; |
||||
font-size: 160px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
/* tabs */ |
||||
.nav-tabs { |
||||
position: relative; |
||||
} |
||||
|
||||
.nav-tabs .nav-more { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 42px; |
||||
line-height: 42px; |
||||
color: #666; |
||||
} |
||||
|
||||
#tabs { |
||||
border-bottom: 1px solid #eee; |
||||
} |
||||
|
||||
#tabs li { |
||||
cursor: pointer; |
||||
width: 100px; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
border-bottom: 2px solid transparent; |
||||
position: relative; |
||||
z-index: 1; |
||||
margin-bottom: -1px; |
||||
color: #666; |
||||
} |
||||
|
||||
|
||||
#tabs .active { |
||||
border-bottom-color: #f00; |
||||
color: #222; |
||||
} |
||||
|
||||
.tab-container .content { |
||||
display: none; |
||||
} |
||||
|
||||
/* 页面布局 */ |
||||
.main { |
||||
padding: 30px 100px; |
||||
width: 960px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.main .logo { |
||||
color: #333; |
||||
text-align: left; |
||||
margin-bottom: 30px; |
||||
line-height: 1; |
||||
height: 110px; |
||||
margin-top: -50px; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.main .logo a { |
||||
font-size: 160px; |
||||
color: #333; |
||||
} |
||||
|
||||
.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; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.icon_lists li { |
||||
width: 100px; |
||||
margin-bottom: 10px; |
||||
margin-right: 20px; |
||||
text-align: center; |
||||
list-style: none !important; |
||||
cursor: default; |
||||
} |
||||
|
||||
.icon_lists li .code-name { |
||||
line-height: 1.2; |
||||
} |
||||
|
||||
.icon_lists .icon { |
||||
display: block; |
||||
height: 100px; |
||||
line-height: 100px; |
||||
font-size: 42px; |
||||
margin: 10px auto; |
||||
color: #333; |
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
||||
transition: font-size 0.25s linear, width 0.25s linear; |
||||
} |
||||
|
||||
.icon_lists .icon:hover { |
||||
font-size: 100px; |
||||
} |
||||
|
||||
.icon_lists .svg-icon { |
||||
/* 通过设置 font-size 来改变图标大小 */ |
||||
width: 1em; |
||||
/* 图标和文字相邻时，垂直对齐 */ |
||||
vertical-align: -0.15em; |
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||
fill: currentColor; |
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||
normalize.css 中也包含这行 */ |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.icon_lists li .name, |
||||
.icon_lists li .code-name { |
||||
color: #666; |
||||
} |
||||
|
||||
/* markdown 样式 */ |
||||
.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 { |
||||
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 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; |
||||
} |
||||
|
||||
.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; |
||||
} |
||||
|
||||
/* 代码高亮 */ |
||||
/* PrismJS 1.15.0 |
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ |
||||
/** |
||||
* prism.js default theme for JavaScript, CSS and HTML |
||||
* Based on dabblet (http://dabblet.com) |
||||
* @author Lea Verou |
||||
*/ |
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
color: black; |
||||
background: none; |
||||
text-shadow: 0 1px white; |
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||
text-align: left; |
||||
white-space: pre; |
||||
word-spacing: normal; |
||||
word-break: normal; |
||||
word-wrap: normal; |
||||
line-height: 1.5; |
||||
|
||||
-moz-tab-size: 4; |
||||
-o-tab-size: 4; |
||||
tab-size: 4; |
||||
|
||||
-webkit-hyphens: none; |
||||
-moz-hyphens: none; |
||||
-ms-hyphens: none; |
||||
hyphens: none; |
||||
} |
||||
|
||||
pre[class*="language-"]::-moz-selection, |
||||
pre[class*="language-"] ::-moz-selection, |
||||
code[class*="language-"]::-moz-selection, |
||||
code[class*="language-"] ::-moz-selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
pre[class*="language-"]::selection, |
||||
pre[class*="language-"] ::selection, |
||||
code[class*="language-"]::selection, |
||||
code[class*="language-"] ::selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
@media print { |
||||
|
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
text-shadow: none; |
||||
} |
||||
} |
||||
|
||||
/* Code blocks */ |
||||
pre[class*="language-"] { |
||||
padding: 1em; |
||||
margin: .5em 0; |
||||
overflow: auto; |
||||
} |
||||
|
||||
:not(pre)>code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
background: #f5f2f0; |
||||
} |
||||
|
||||
/* Inline code */ |
||||
:not(pre)>code[class*="language-"] { |
||||
padding: .1em; |
||||
border-radius: .3em; |
||||
white-space: normal; |
||||
} |
||||
|
||||
.token.comment, |
||||
.token.prolog, |
||||
.token.doctype, |
||||
.token.cdata { |
||||
color: slategray; |
||||
} |
||||
|
||||
.token.punctuation { |
||||
color: #999; |
||||
} |
||||
|
||||
.namespace { |
||||
opacity: .7; |
||||
} |
||||
|
||||
.token.property, |
||||
.token.tag, |
||||
.token.boolean, |
||||
.token.number, |
||||
.token.constant, |
||||
.token.symbol, |
||||
.token.deleted { |
||||
color: #905; |
||||
} |
||||
|
||||
.token.selector, |
||||
.token.attr-name, |
||||
.token.string, |
||||
.token.char, |
||||
.token.builtin, |
||||
.token.inserted { |
||||
color: #690; |
||||
} |
||||
|
||||
.token.operator, |
||||
.token.entity, |
||||
.token.url, |
||||
.language-css .token.string, |
||||
.style .token.string { |
||||
color: #9a6e3a; |
||||
background: hsla(0, 0%, 100%, .5); |
||||
} |
||||
|
||||
.token.atrule, |
||||
.token.attr-value, |
||||
.token.keyword { |
||||
color: #07a; |
||||
} |
||||
|
||||
.token.function, |
||||
.token.class-name { |
||||
color: #DD4A68; |
||||
} |
||||
|
||||
.token.regex, |
||||
.token.important, |
||||
.token.variable { |
||||
color: #e90; |
||||
} |
||||
|
||||
.token.important, |
||||
.token.bold { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.token.italic { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.token.entity { |
||||
cursor: help; |
||||
} |
||||
@ -0,0 +1,446 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>IconFont Demo</title> |
||||
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> |
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||
<link rel="stylesheet" href="demo.css"> |
||||
<link rel="stylesheet" href="iconfont.css"> |
||||
<script src="iconfont.js"></script> |
||||
<!-- jQuery --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||
<!-- 代码高亮 --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||
</head> |
||||
<body> |
||||
<div class="main"> |
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1> |
||||
<div class="nav-tabs"> |
||||
<ul id="tabs" class="dib-box"> |
||||
<li class="dib active"><span>Unicode</span></li> |
||||
<li class="dib"><span>Font class</span></li> |
||||
<li class="dib"><span>Symbol</span></li> |
||||
</ul> |
||||
|
||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1540265" target="_blank" class="nav-more">查看项目</a> |
||||
|
||||
</div> |
||||
<div class="tab-container"> |
||||
<div class="content unicode" style="display: block;"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">已勾选32</div> |
||||
<div class="code-name">&#xe63d;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">未勾选32</div> |
||||
<div class="code-name">&#xe63e;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">未勾选40</div> |
||||
<div class="code-name">&#xe64a;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">已勾选40</div> |
||||
<div class="code-name">&#xe64b;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">实 向右箭头-01</div> |
||||
<div class="code-name">&#xe626;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">实 向下箭头-01</div> |
||||
<div class="code-name">&#xe625;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">加号-填充</div> |
||||
<div class="code-name">&#xe72d;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">42指向上、上箭头</div> |
||||
<div class="code-name">&#xe769;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">44指向下、下箭头</div> |
||||
<div class="code-name">&#xe76b;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">群蜂删除-充</div> |
||||
<div class="code-name">&#xe6e9;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">qq</div> |
||||
<div class="code-name">&#xe614;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">微信-36</div> |
||||
<div class="code-name">&#xe68a;</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<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">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> |
||||
<pre><code class="language-css" |
||||
>@font-face { |
||||
font-family: 'iconfont'; |
||||
src: url('iconfont.eot'); |
||||
src: url('iconfont.eot?#iefix') format('embedded-opentype'), |
||||
url('iconfont.woff2') format('woff2'), |
||||
url('iconfont.woff') format('woff'), |
||||
url('iconfont.ttf') format('truetype'), |
||||
url('iconfont.svg#iconfont') format('svg'); |
||||
} |
||||
</code></pre> |
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> |
||||
<pre><code class="language-css" |
||||
>.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> |
||||
<pre> |
||||
<code class="language-html" |
||||
><span class="iconfont">&#x33;</span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content font-class"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-yigouxuan"></span> |
||||
<div class="name"> |
||||
已勾选32 |
||||
</div> |
||||
<div class="code-name">.icon-yigouxuan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-weigouxuan"></span> |
||||
<div class="name"> |
||||
未勾选32 |
||||
</div> |
||||
<div class="code-name">.icon-weigouxuan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-weigouxuan1"></span> |
||||
<div class="name"> |
||||
未勾选40 |
||||
</div> |
||||
<div class="code-name">.icon-weigouxuan1 |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-yigouxuan1"></span> |
||||
<div class="name"> |
||||
已勾选40 |
||||
</div> |
||||
<div class="code-name">.icon-yigouxuan1 |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-shixiangyoujiantou-"></span> |
||||
<div class="name"> |
||||
实 向右箭头-01 |
||||
</div> |
||||
<div class="code-name">.icon-shixiangyoujiantou- |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-shixiangxiajiantou-"></span> |
||||
<div class="name"> |
||||
实 向下箭头-01 |
||||
</div> |
||||
<div class="code-name">.icon-shixiangxiajiantou- |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-jiahao"></span> |
||||
<div class="name"> |
||||
加号-填充 |
||||
</div> |
||||
<div class="code-name">.icon-jiahao |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-up"></span> |
||||
<div class="name"> |
||||
42指向上、上箭头 |
||||
</div> |
||||
<div class="code-name">.icon-up |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-down"></span> |
||||
<div class="name"> |
||||
44指向下、下箭头 |
||||
</div> |
||||
<div class="code-name">.icon-down |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-delete"></span> |
||||
<div class="name"> |
||||
群蜂删除-充 |
||||
</div> |
||||
<div class="code-name">.icon-delete |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-qq"></span> |
||||
<div class="name"> |
||||
qq |
||||
</div> |
||||
<div class="code-name">.icon-qq |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-weixin"></span> |
||||
<div class="name"> |
||||
微信-36 |
||||
</div> |
||||
<div class="code-name">.icon-weixin |
||||
</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<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="language-html"><link rel="stylesheet" href="./iconfont.css"> |
||||
</code></pre> |
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>" |
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content symbol"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-yigouxuan"></use> |
||||
</svg> |
||||
<div class="name">已勾选32</div> |
||||
<div class="code-name">#icon-yigouxuan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-weigouxuan"></use> |
||||
</svg> |
||||
<div class="name">未勾选32</div> |
||||
<div class="code-name">#icon-weigouxuan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-weigouxuan1"></use> |
||||
</svg> |
||||
<div class="name">未勾选40</div> |
||||
<div class="code-name">#icon-weigouxuan1</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-yigouxuan1"></use> |
||||
</svg> |
||||
<div class="name">已勾选40</div> |
||||
<div class="code-name">#icon-yigouxuan1</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-shixiangyoujiantou-"></use> |
||||
</svg> |
||||
<div class="name">实 向右箭头-01</div> |
||||
<div class="code-name">#icon-shixiangyoujiantou-</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-shixiangxiajiantou-"></use> |
||||
</svg> |
||||
<div class="name">实 向下箭头-01</div> |
||||
<div class="code-name">#icon-shixiangxiajiantou-</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-jiahao"></use> |
||||
</svg> |
||||
<div class="name">加号-填充</div> |
||||
<div class="code-name">#icon-jiahao</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-up"></use> |
||||
</svg> |
||||
<div class="name">42指向上、上箭头</div> |
||||
<div class="code-name">#icon-up</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-down"></use> |
||||
</svg> |
||||
<div class="name">44指向下、下箭头</div> |
||||
<div class="code-name">#icon-down</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-delete"></use> |
||||
</svg> |
||||
<div class="name">群蜂删除-充</div> |
||||
<div class="code-name">#icon-delete</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-qq"></use> |
||||
</svg> |
||||
<div class="name">qq</div> |
||||
<div class="code-name">#icon-qq</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-weixin"></use> |
||||
</svg> |
||||
<div class="name">微信-36</div> |
||||
<div class="code-name">#icon-weixin</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<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="language-html"><script src="./iconfont.js"></script> |
||||
</code></pre> |
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> |
||||
<pre><code class="language-html"><style> |
||||
.icon { |
||||
width: 1em; |
||||
height: 1em; |
||||
vertical-align: -0.15em; |
||||
fill: currentColor; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-xxx"></use> |
||||
</svg> |
||||
</code></pre> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
<script> |
||||
$(document).ready(function () { |
||||
$('.tab-container .content:first').show() |
||||
|
||||
$('#tabs li').click(function (e) { |
||||
var tabContent = $('.tab-container .content') |
||||
var index = $(this).index() |
||||
|
||||
if ($(this).hasClass('active')) { |
||||
return |
||||
} else { |
||||
$('#tabs li').removeClass('active') |
||||
$(this).addClass('active') |
||||
|
||||
tabContent.hide().eq(index).fadeIn() |
||||
} |
||||
}) |
||||
}) |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,71 @@ |
||||
@font-face {font-family: "iconfont"; |
||||
src: url('iconfont.eot?t=1589437921018'); /* IE9 */ |
||||
src: url('iconfont.eot?t=1589437921018#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), |
||||
url('iconfont.woff?t=1589437921018') format('woff'), |
||||
url('iconfont.ttf?t=1589437921018') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ |
||||
url('iconfont.svg?t=1589437921018#iconfont') format('svg'); /* iOS 4.1- */ |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.icon-yigouxuan:before { |
||||
content: "\e63d"; |
||||
} |
||||
|
||||
.icon-weigouxuan:before { |
||||
content: "\e63e"; |
||||
} |
||||
|
||||
.icon-weigouxuan1:before { |
||||
content: "\e64a"; |
||||
} |
||||
|
||||
.icon-yigouxuan1:before { |
||||
content: "\e64b"; |
||||
} |
||||
|
||||
.icon-shixiangyoujiantou-:before { |
||||
content: "\e626"; |
||||
} |
||||
|
||||
.icon-shixiangxiajiantou-:before { |
||||
content: "\e625"; |
||||
} |
||||
|
||||
.icon-jiahao:before { |
||||
content: "\e72d"; |
||||
} |
||||
|
||||
.icon-up:before { |
||||
content: "\e769"; |
||||
} |
||||
|
||||
.icon-down:before { |
||||
content: "\e76b"; |
||||
} |
||||
|
||||
.icon-delete:before { |
||||
content: "\e6e9"; |
||||
} |
||||
|
||||
.icon-qq:before { |
||||
content: "\e614"; |
||||
font-size: 60px; |
||||
color: #22aaf8; |
||||
margin-left: 32px; |
||||
} |
||||
|
||||
.icon-weixin:before { |
||||
content: "\e68a"; |
||||
font-size: 60px; |
||||
color: #10b747; |
||||
margin-right: 32px; |
||||
} |
||||
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,93 @@ |
||||
{ |
||||
"id": "1540265", |
||||
"name": "education", |
||||
"font_family": "iconfont", |
||||
"css_prefix_text": "icon-", |
||||
"description": "", |
||||
"glyphs": [ |
||||
{ |
||||
"icon_id": "2716513", |
||||
"name": "已勾选32", |
||||
"font_class": "yigouxuan", |
||||
"unicode": "e63d", |
||||
"unicode_decimal": 58941 |
||||
}, |
||||
{ |
||||
"icon_id": "2716516", |
||||
"name": "未勾选32", |
||||
"font_class": "weigouxuan", |
||||
"unicode": "e63e", |
||||
"unicode_decimal": 58942 |
||||
}, |
||||
{ |
||||
"icon_id": "2892929", |
||||
"name": "未勾选40", |
||||
"font_class": "weigouxuan1", |
||||
"unicode": "e64a", |
||||
"unicode_decimal": 58954 |
||||
}, |
||||
{ |
||||
"icon_id": "2892954", |
||||
"name": "已勾选40", |
||||
"font_class": "yigouxuan1", |
||||
"unicode": "e64b", |
||||
"unicode_decimal": 58955 |
||||
}, |
||||
{ |
||||
"icon_id": "5979965", |
||||
"name": "实 向右箭头-01", |
||||
"font_class": "shixiangyoujiantou-", |
||||
"unicode": "e626", |
||||
"unicode_decimal": 58918 |
||||
}, |
||||
{ |
||||
"icon_id": "5979966", |
||||
"name": "实 向下箭头-01", |
||||
"font_class": "shixiangxiajiantou-", |
||||
"unicode": "e625", |
||||
"unicode_decimal": 58917 |
||||
}, |
||||
{ |
||||
"icon_id": "8349103", |
||||
"name": "加号-填充", |
||||
"font_class": "jiahao", |
||||
"unicode": "e72d", |
||||
"unicode_decimal": 59181 |
||||
}, |
||||
{ |
||||
"icon_id": "6129078", |
||||
"name": "42指向上、上箭头", |
||||
"font_class": "up", |
||||
"unicode": "e769", |
||||
"unicode_decimal": 59241 |
||||
}, |
||||
{ |
||||
"icon_id": "6129081", |
||||
"name": "44指向下、下箭头", |
||||
"font_class": "down", |
||||
"unicode": "e76b", |
||||
"unicode_decimal": 59243 |
||||
}, |
||||
{ |
||||
"icon_id": "410692", |
||||
"name": "群蜂删除-充", |
||||
"font_class": "delete", |
||||
"unicode": "e6e9", |
||||
"unicode_decimal": 59113 |
||||
}, |
||||
{ |
||||
"icon_id": "468193", |
||||
"name": "qq", |
||||
"font_class": "qq", |
||||
"unicode": "e614", |
||||
"unicode_decimal": 58900 |
||||
}, |
||||
{ |
||||
"icon_id": "7009153", |
||||
"name": "微信-36", |
||||
"font_class": "weixin", |
||||
"unicode": "e68a", |
||||
"unicode_decimal": 59018 |
||||
} |
||||
] |
||||
} |
||||
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 709 B |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 632 B |
|
After Width: | Height: | Size: 918 B |
|
After Width: | Height: | Size: 499 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 683 B |
|
After Width: | Height: | Size: 556 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 859 KiB |
|
After Width: | Height: | Size: 539 B |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 722 B |
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,195 @@ |
||||
<template> |
||||
<div> |
||||
<div class="main" @click.stop="open(item)" v-for="(item,index) in data" :key="index"> |
||||
<div class="item" @click.stop="open(item)"> |
||||
<div> |
||||
<img |
||||
:class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}" |
||||
src="../../assets/img/3.png" |
||||
alt |
||||
/> |
||||
</div> |
||||
{{item.label}} |
||||
</div> |
||||
<div v-show="item.ifVisible" v-if="item.children&&item.children.length!=0"> |
||||
<div v-for="(item1,index1) in item.children" :key="index1"> |
||||
<div class="item1" @click.stop="open(item1)"> |
||||
<div style="margin-left:40px"> |
||||
<img |
||||
:class="{ 'arrowTransform': !item1.ifVisible, 'arrowTransformReturn': item1.ifVisible}" |
||||
src="../../assets/img/3.png" |
||||
alt |
||||
/> |
||||
</div> |
||||
{{item1.label}} |
||||
</div> |
||||
<div v-show="item1.ifVisible" v-if="item1.children&&item1.children.length!=0"> |
||||
<div |
||||
class="item4" |
||||
@click.stop="choose(item2)" |
||||
v-for="(item2,index2) in item1.children" |
||||
:key="index2" |
||||
> |
||||
<span :class="{checkBox:true,isActive:item2.ifVisible}"></span> |
||||
{{item2.label}} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
Array.prototype.removeByValue = function (val) { |
||||
for (var i = 0; i < this.length; i++) { |
||||
if (JSON.stringify(this[i]).indexOf(JSON.stringify(val)) != -1) { |
||||
this.splice(i, 1); |
||||
break; |
||||
} |
||||
} |
||||
}; |
||||
export default { |
||||
data() { |
||||
return { |
||||
chooseList: [] |
||||
}; |
||||
}, |
||||
watch: { |
||||
chooseList(n, o) { |
||||
this.$emit('chooseNode', n); |
||||
} |
||||
}, |
||||
|
||||
props: { |
||||
data: { |
||||
type: Array |
||||
} |
||||
}, |
||||
methods: { |
||||
//点击节点时伸展或收缩列表 |
||||
open(item) { |
||||
item.ifVisible = !item.ifVisible; |
||||
}, |
||||
|
||||
//选中叶子节点时将选中的叶子节点添加进数组，如果叶子节点存在则删除，removeByvalue函数定义在main.js中 |
||||
choose(item) { |
||||
item.ifVisible = !item.ifVisible; |
||||
if (item.ifVisible) { |
||||
this.chooseList.push(item); |
||||
} else { |
||||
this.chooseList.removeByValue(item); |
||||
} |
||||
}, |
||||
//判断数组中是否包含某个对象 |
||||
isHasObj(arr, val) { |
||||
var flag = 0; //1为有 0为没有 |
||||
for (var i = 0; i < arr.length; i++) { |
||||
if (JSON.stringify(arr[i]).indexOf(JSON.stringify(val)) != -1) { |
||||
flag = 1; |
||||
} |
||||
} |
||||
if (flag == 1) { |
||||
return true; |
||||
} else { |
||||
return false; |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
$insideColor: rgba(245, 242, 255, 0.8); //内部节点的边框颜色 |
||||
$outColor: rgba(255, 255, 255, 0.8); //外部节点的边框颜色 |
||||
|
||||
//混合代码,提取item共同样式 |
||||
@mixin public { |
||||
height: 50px; |
||||
line-height: 50px; |
||||
cursor: pointer; |
||||
font-size: 18px; |
||||
color: #333333; |
||||
display: flex; |
||||
div { |
||||
margin: 0 10px; |
||||
position: relative; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
border-radius: 50%; |
||||
width: 30px; |
||||
height: 30px; |
||||
background: rgba(146, 120, 255, 1); |
||||
img { |
||||
height: 12px; |
||||
width: 8px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.main { |
||||
width: 100%; |
||||
} |
||||
|
||||
.item { |
||||
@include public; |
||||
border-bottom: 1px solid $outColor; |
||||
background: rgba(245, 242, 255, 1); |
||||
} |
||||
.item1 { |
||||
@include public; |
||||
border-bottom: 1px solid $insideColor; |
||||
background: rgba(255, 255, 255, 1); |
||||
} |
||||
.item2 { |
||||
@include public; |
||||
border-bottom: 1px solid $insideColor; |
||||
background: rgba(255, 255, 255, 1); |
||||
} |
||||
.item4 { |
||||
@include public; |
||||
align-items: center; |
||||
border-bottom: 1px solid $insideColor; |
||||
padding-left: 80px; |
||||
background: rgba(255, 255, 255, 1); |
||||
} |
||||
|
||||
//清除ul,li的默认样式 |
||||
ul, |
||||
li { |
||||
padding: 0; |
||||
margin: 0; |
||||
list-style: none; |
||||
} |
||||
|
||||
// 使三角形旋转动画 |
||||
.arrowTransform { |
||||
transition: 0.2s; |
||||
transform-origin: center; |
||||
transform: rotateZ(0deg); |
||||
} |
||||
.arrowTransformReturn { |
||||
transition: 0.2s; |
||||
transform-origin: center; |
||||
transform: rotateZ(90deg); |
||||
} |
||||
|
||||
//复选框样式 |
||||
.checkBox { |
||||
width: 14px; |
||||
height: 14px; |
||||
border-radius: 7px; |
||||
margin-left: 10px; |
||||
margin-right: 10px; |
||||
border: 2px solid rgba(146, 120, 255, 1); |
||||
} |
||||
|
||||
//当点击复选框时候切换背景图片 |
||||
.isActive { |
||||
background: url('../../assets/img/get.png'); |
||||
background-size: 14px 14px; /*按比例缩放*/ |
||||
} |
||||
</style> |
||||
@ -0,0 +1,124 @@ |
||||
<template> |
||||
<div class="header flex-between"> |
||||
<div v-if="this.$route.path=='/personalcenter'" |
||||
class="goBack" v-preventReClick @click="back"><i class="el-icon-arrow-left"></i>返回</div> |
||||
<div v-else class="logo"> |
||||
<img src="../../assets/img/logo-fill.png"> |
||||
</div> |
||||
<div class="header-right"> |
||||
<div class="header-user-con"> |
||||
<div class="user" @click="toPersonalCenter"> |
||||
<el-avatar :size="40" :src="this.$store.state.userPhoto"></el-avatar> |
||||
<span class="user-avator">{{username}}</span> |
||||
</div> |
||||
<el-divider class="ml20" direction="vertical"></el-divider> |
||||
<el-button type="text" class="ml20" @click="loginout">退出</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import bus from '../common/bus'; |
||||
export default { |
||||
data() { |
||||
return { |
||||
// name: 'huoran', |
||||
username: this.$store.state.name, |
||||
circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", |
||||
}; |
||||
}, |
||||
mounted(){ |
||||
}, |
||||
// computed: { |
||||
// username() { |
||||
// let username = sessionStorage.getItem('cd_client_username'); |
||||
// return username ? username : this.name; |
||||
// } |
||||
// }, |
||||
methods: { |
||||
loginout() { |
||||
sessionStorage.removeItem('cd_client_username'); |
||||
this.$router.push('/login'); |
||||
}, |
||||
toPersonalCenter(){ |
||||
this.$router.push('/personalcenter') |
||||
}, |
||||
back(){ |
||||
if(this.$route.path == '/addassessment'){ |
||||
this.$router.push({ path: '/teacherhome', query: { active: true }}) |
||||
}else{ |
||||
this.$router.go(-1) |
||||
} |
||||
} |
||||
}, |
||||
}; |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.goBack{ |
||||
cursor: pointer; |
||||
line-height: 60px; |
||||
height: 60px; |
||||
font-size: 16px; |
||||
font-weight: bold; |
||||
margin-left: 20px; |
||||
} |
||||
.goBack i{ |
||||
color: #e05e5a; |
||||
font-size: 20px; |
||||
} |
||||
.header { |
||||
position: relative; |
||||
box-sizing: border-box; |
||||
width: 100%; |
||||
height: 60px; |
||||
font-size: 16px; |
||||
color: #333; |
||||
} |
||||
.header .logo { |
||||
float: left; |
||||
width: 170px; |
||||
height: 40px; |
||||
margin-left: 20px; |
||||
} |
||||
.header .logo img{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.header-right { |
||||
float: right; |
||||
padding-right: 50px; |
||||
} |
||||
.header-user-con { |
||||
display: flex; |
||||
height: 70px; |
||||
align-items: center; |
||||
|
||||
.user{ |
||||
display: inline-flex; |
||||
align-items: center; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.user-avator { |
||||
margin-left: 10px; |
||||
} |
||||
.ml20{ |
||||
margin-left: 20px; |
||||
} |
||||
.user-avator img { |
||||
display: block; |
||||
width: 40px; |
||||
height: 40px; |
||||
border-radius: 50%; |
||||
} |
||||
.header-right .el-button--text{ |
||||
color: #333; |
||||
} |
||||
.header-right .el-divider--vertical{ |
||||
width: 2px; |
||||
height: 15px; |
||||
} |
||||
.header-right .el-divider{ |
||||
background-color: #333; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,52 @@ |
||||
<template> |
||||
<div class="wrapper"> |
||||
<v-head></v-head> |
||||
<!-- <v-sidebar></v-sidebar> --> |
||||
<div class="content-box" :class="{'content-collapse':collapse}"> |
||||
<!-- <v-tags></v-tags> --> |
||||
<div class="content"> |
||||
<transition name="move" mode="out-in"> |
||||
<keep-alive :include="tagsList"> |
||||
<router-view></router-view> |
||||
</keep-alive> |
||||
</transition> |
||||
<el-backtop target=".content"></el-backtop> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import vHead from './Header.vue'; |
||||
import vSidebar from './Sidebar.vue'; |
||||
import vTags from './Tags.vue'; |
||||
import bus from './bus'; |
||||
export default { |
||||
data() { |
||||
return { |
||||
tagsList: [], |
||||
collapse: false |
||||
}; |
||||
}, |
||||
components: { |
||||
vHead, |
||||
vSidebar, |
||||
vTags |
||||
}, |
||||
created() { |
||||
bus.$on('collapse-content', msg => { |
||||
this.collapse = msg; |
||||
}); |
||||
|
||||
|
||||
// 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。 |
||||
bus.$on('tags', msg => { |
||||
let arr = []; |
||||
for (let i = 0, len = msg.length; i < len; i++) { |
||||
msg[i].name && arr.push(msg[i].name); |
||||
} |
||||
this.tagsList = arr; |
||||
}); |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,189 @@ |
||||
<template> |
||||
<div class="sidebar"> |
||||
<el-menu |
||||
class="sidebar-el-menu" |
||||
:default-active="onRoutes" |
||||
:collapse="collapse" |
||||
background-color="#324157" |
||||
text-color="#bfcbd9" |
||||
active-text-color="#20a0ff" |
||||
unique-opened |
||||
router |
||||
> |
||||
<template v-for="item in items"> |
||||
<template v-if="item.subs"> |
||||
<el-submenu :index="item.index" :key="item.index"> |
||||
<template slot="title"> |
||||
<i :class="item.icon"></i> |
||||
<span slot="title">{{ item.title }}</span> |
||||
</template> |
||||
<template v-for="subItem in item.subs"> |
||||
<el-submenu |
||||
v-if="subItem.subs" |
||||
:index="subItem.index" |
||||
:key="subItem.index" |
||||
> |
||||
<template slot="title">{{ subItem.title }}</template> |
||||
<el-menu-item |
||||
v-for="(threeItem,i) in subItem.subs" |
||||
:key="i" |
||||
:index="threeItem.index" |
||||
>{{ threeItem.title }}</el-menu-item> |
||||
</el-submenu> |
||||
<el-menu-item |
||||
v-else |
||||
:index="subItem.index" |
||||
:key="subItem.index" |
||||
>{{ subItem.title }}</el-menu-item> |
||||
</template> |
||||
</el-submenu> |
||||
</template> |
||||
<template v-else> |
||||
<el-menu-item :index="item.index" :key="item.index"> |
||||
<i :class="item.icon"></i> |
||||
<span slot="title">{{ item.title }}</span> |
||||
</el-menu-item> |
||||
</template> |
||||
</template> |
||||
</el-menu> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import bus from '../common/bus'; |
||||
export default { |
||||
data() { |
||||
return { |
||||
collapse: false, |
||||
items: [ |
||||
{ |
||||
icon: 'el-icon-lx-home', |
||||
index: 'dashboard', |
||||
title: '系统首页' |
||||
}, |
||||
{ |
||||
icon: 'el-icon-lx-cascades', |
||||
index: 'table', |
||||
title: '基础表格' |
||||
}, |
||||
{ |
||||
icon: 'el-icon-lx-copy', |
||||
index: 'tabs', |
||||
title: 'tab选项卡' |
||||
}, |
||||
{ |
||||
icon: 'el-icon-lx-calendar', |
||||
index: '3', |
||||
title: '表单相关', |
||||
subs: [ |
||||
{ |
||||
index: 'form', |
||||
title: '基本表单' |
||||
}, |
||||
{ |
||||
index: '3-2', |
||||
title: '三级菜单', |
||||
subs: [ |
||||
{ |
||||
index: 'editor', |
||||
title: '富文本编辑器' |
||||
}, |
||||
{ |
||||
index: 'markdown', |
||||
title: 'markdown编辑器' |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
index: 'upload', |
||||
title: '文件上传' |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
icon: 'el-icon-lx-emoji', |
||||
index: 'icon', |
||||
title: '自定义图标' |
||||
}, |
||||
{ |
||||
icon: 'el-icon-pie-chart', |
||||
index: 'charts', |
||||
title: 'schart图表' |
||||
}, |
||||
{ |
||||
icon: 'el-icon-rank', |
||||
index: '6', |
||||
title: '拖拽组件', |
||||
subs: [ |
||||
{ |
||||
index: 'drag', |
||||
title: '拖拽列表' |
||||
}, |
||||
{ |
||||
index: 'dialog', |
||||
title: '拖拽弹框' |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
icon: 'el-icon-lx-global', |
||||
index: 'i18n', |
||||
title: '国际化功能' |
||||
}, |
||||
{ |
||||
icon: 'el-icon-lx-warn', |
||||
index: '7', |
||||
title: '错误处理', |
||||
subs: [ |
||||
{ |
||||
index: 'permission', |
||||
title: '权限测试' |
||||
}, |
||||
{ |
||||
index: '404', |
||||
title: '404页面' |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
icon: 'el-icon-lx-redpacket_fill', |
||||
index: '/donate', |
||||
title: '支持作者' |
||||
} |
||||
] |
||||
}; |
||||
}, |
||||
computed: { |
||||
onRoutes() { |
||||
return this.$route.path.replace('/', ''); |
||||
} |
||||
}, |
||||
created() { |
||||
// 通过 Event Bus 进行组件间通信，来折叠侧边栏 |
||||
bus.$on('collapse', msg => { |
||||
this.collapse = msg; |
||||
bus.$emit('collapse-content', msg); |
||||
}); |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.sidebar { |
||||
display: block; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 70px; |
||||
bottom: 0; |
||||
overflow-y: scroll; |
||||
} |
||||
.sidebar::-webkit-scrollbar { |
||||
width: 0; |
||||
} |
||||
.sidebar-el-menu:not(.el-menu--collapse) { |
||||
width: 250px; |
||||
} |
||||
.sidebar > ul { |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,238 @@ |
||||
<template> |
||||
<div class="Statistics"> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="24"> |
||||
<el-card shadow="hover" class="mgb20"> |
||||
<p class="header_title">关键指标</p> |
||||
<el-col :span="6"> |
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div class="browse"> |
||||
<p class="mgb20">浏览量（PV）</p> |
||||
<p> |
||||
<span class="browse_volume">253</span> |
||||
<span>/日</span> |
||||
<span class="mgl10">12% |
||||
<i class="icon-up up_color"></i> |
||||
</span> |
||||
</p> |
||||
</div> |
||||
<div> |
||||
|
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div class="browse"> |
||||
<p class="mgb20">独立用户（UV）</p> |
||||
<p> |
||||
<span class="browse_volume">70</span> |
||||
<span>/日</span> |
||||
<span class="mgl10">12% |
||||
<i class="icon-up up_color"></i> |
||||
</span> |
||||
</p> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div class="browse"> |
||||
<p class="mgb20">访问次数（VV）</p> |
||||
<p> |
||||
<span class="browse_volume">152</span> |
||||
<span>/日</span> |
||||
<span class="mgl10">105.41% |
||||
<i class="icon-up up_color"></i> |
||||
</span> |
||||
</p> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div class="browse"> |
||||
<p class="mgb20">独立IP</p> |
||||
<p> |
||||
<span class="browse_volume">67</span> |
||||
<span>/日</span> |
||||
<span class="mgl10">82.27% |
||||
<i class="icon-up up_color"></i> |
||||
</span> |
||||
</p> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
</el-card> |
||||
</el-col> |
||||
|
||||
<el-col :span="24"> |
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div class="schart-box"> |
||||
<el-radio-group v-model="radio2" size="medium"> |
||||
<el-radio-button v-for="(item,index) in dateList" :key="index" label="item.id" >{{item.name}}</el-radio-button> |
||||
</el-radio-group> |
||||
<schart class="schart" canvasId="line" :options="options2"></schart> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
|
||||
<el-col :span="24"> |
||||
<el-card shadow="hover"> |
||||
<p class="mgb20"> |
||||
<span class="header_title">客户列表</span> |
||||
</p> |
||||
<el-table :data="customerData" class="table" stripe header-align="center"> |
||||
<el-table-column type="selection" width="55" align="center"></el-table-column> |
||||
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column> |
||||
<el-table-column prop="id" label="时间" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="age" label="浏览量（PV）" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="storeName" label="独立用户（UV）" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="total" label="访问次数（VV）" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="payamount" label="独立IP" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="payamount" label="跳出率" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="payamount" label="平均在线时长" align="center"> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="pages"> |
||||
</el-pagination> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import bus from '../common/bus'; |
||||
import Schart from 'vue-schart'; |
||||
export default { |
||||
data() { |
||||
return { |
||||
CountryName: '中国', |
||||
countryList: [{ |
||||
name:'中国' |
||||
}, |
||||
{ |
||||
name:'美国' |
||||
}, |
||||
{ |
||||
name:'日本' |
||||
}], |
||||
CustomerSearch: '', |
||||
customerData:[{ |
||||
id: 1, |
||||
age: '10', |
||||
storeName:'中国', |
||||
total: '金融', |
||||
payamount: '广东' |
||||
}], |
||||
options2: { |
||||
type: 'line', |
||||
title: { |
||||
text: '最近几个月各品类销售趋势图' |
||||
}, |
||||
bgColor: '#fbfbfb', |
||||
labels: ['6月', '7月', '8月', '9月', '10月'], |
||||
datasets: [ |
||||
{ |
||||
label: '家电', |
||||
data: [234, 278, 270, 190, 230] |
||||
}, |
||||
{ |
||||
label: '百货', |
||||
data: [164, 178, 150, 135, 160] |
||||
}, |
||||
{ |
||||
label: '食品', |
||||
data: [114, 138, 200, 235, 190] |
||||
} |
||||
] |
||||
}, |
||||
radio2: 1, |
||||
dateList: [{ |
||||
id: 0, |
||||
name: '小时指标' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '浏览量（PV）' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '独立用户（UV）' |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: '访问次数（VV）' |
||||
}, |
||||
{ |
||||
id: 4, |
||||
name: '独立IP' |
||||
}, |
||||
{ |
||||
id: 5, |
||||
name: '跳出率' |
||||
}, |
||||
{ |
||||
id: 6, |
||||
name: '平均在线时长' |
||||
}], |
||||
pages: 10 |
||||
}; |
||||
}, |
||||
components: { |
||||
Schart |
||||
}, |
||||
methods: { |
||||
permission(){ |
||||
this.$router.push('/permission') |
||||
}, |
||||
handleCurrentChange(){} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.el-row { |
||||
margin-bottom: 20px; |
||||
padding: 20px 16px; |
||||
} |
||||
.Statistics{ |
||||
background-color: #f0f0f0; |
||||
} |
||||
.browse{ |
||||
font-size: 20px; |
||||
color: #333; |
||||
} |
||||
.browse_volume{ |
||||
font-size: 36px; |
||||
} |
||||
.mgl10{ |
||||
margin-left: 10px; |
||||
} |
||||
.header_title{ |
||||
margin-left: 10px; |
||||
margin-bottom: 30px; |
||||
} |
||||
.up_color{ |
||||
color: #FF3232; |
||||
} |
||||
|
||||
.schart-box { |
||||
margin-top: 20px; |
||||
margin-left: 10px; |
||||
} |
||||
.schart { |
||||
width: 100%; |
||||
height: 400px; |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,142 @@ |
||||
<template> |
||||
<div class="Achievement-container"> |
||||
<div class="header"> |
||||
<p>成绩明细</p> |
||||
<a ref="message"> |
||||
<el-button |
||||
round |
||||
style="background-color:#e05e5a;color:#FFFFFF;width:110px;height:36px;" |
||||
>导出</el-button> |
||||
</a> |
||||
</div> |
||||
|
||||
<div class="score-table"> |
||||
<el-table |
||||
:cell-style="tableRowStyle" |
||||
:header-cell-style="{background:'#e05e5a',color:'#FFFFFF'}" |
||||
:data="tableData" |
||||
stripe |
||||
> |
||||
<el-table-column label="次序" width="120px" type="index" align="center"></el-table-column> |
||||
<el-table-column prop="projectName" label="考核名称" min-width="12%" align="center"></el-table-column> |
||||
<el-table-column prop="projectName" min-width="12%" label="实验项目" align="center"></el-table-column> |
||||
<el-table-column prop="score" label="得分" min-width="12%" align="center"></el-table-column> |
||||
<el-table-column prop="timeSum" label="耗时" min-width="12%" align="center"></el-table-column> |
||||
<el-table-column prop="createTime" label="起始时间" min-width="12%" align="center"></el-table-column> |
||||
<el-table-column prop="endTime" label="结束时间" min-width="12%" align="center"></el-table-column> |
||||
<!-- <el-table-column fixed="right" label="查看" min-width="12%" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-button @click="handleClick(scope.row)" type="text" size="small">实验报告</el-button> |
||||
</template> |
||||
</el-table-column> --> |
||||
</el-table> |
||||
<div class="block"> |
||||
<el-pagination |
||||
background |
||||
@current-change="handleCurrentChange" |
||||
layout="prev, pager, next, jumper" |
||||
:total="dataTotal" |
||||
></el-pagination> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
studentId: this.$store.state.studentId, |
||||
tableData: [], //成绩明细列表数据 |
||||
dataTotal: 1, |
||||
courseId: this.$store.state.courseId |
||||
}; |
||||
}, |
||||
props: ['AssesmentRecord', 'projectPermissions', 'value'], |
||||
mounted() { |
||||
this.handleCurrentChange(1); //初始化成绩明细列表 |
||||
//设置导出接口的链接 |
||||
this.$refs.message.href = `http://www.liuwanr.cn:8080/experiment/exportPractice?courseId=${this.courseId}&studentId=${this.studentId}&projectPermissions=${this.projectPermissions}&titles=%E6%AC%A1%E5%BA%8F,%E7%BB%83%E4%B9%A0%E5%90%8D%E7%A7%B0,%E5%AE%9E%E9%AA%8C%E9%A1%B9%E7%9B%AE,%E5%BE%97%E5%88%86,%E8%80%97%E6%97%B6,%E8%B5%B7%E5%A7%8B%E6%97%B6%E9%97%B4,%E7%BB%93%E6%9D%9F%E6%97%B6%E9%97%B4,%E6%9F%A5%E7%9C%8B`; |
||||
}, |
||||
watch: { |
||||
changeCourseId(n, o) { |
||||
this.$refs.message.href = `http://www.liuwanr.cn:8080/experiment/exportPractice?courseId=${this.courseId}&studentId=${this.studentId}&projectPermissions=${this.projectPermissions}&titles=%E6%AC%A1%E5%BA%8F,%E7%BB%83%E4%B9%A0%E5%90%8D%E7%A7%B0,%E5%AE%9E%E9%AA%8C%E9%A1%B9%E7%9B%AE,%E5%BE%97%E5%88%86,%E8%80%97%E6%97%B6,%E8%B5%B7%E5%A7%8B%E6%97%B6%E9%97%B4,%E7%BB%93%E6%9D%9F%E6%97%B6%E9%97%B4,%E6%9F%A5%E7%9C%8B`; |
||||
this.handleCurrentChange(1); |
||||
} |
||||
}, |
||||
computed: { |
||||
changeCourseId() { |
||||
return this.courseId; |
||||
} |
||||
}, |
||||
methods: { |
||||
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
if (rowIndex % 2 === 0) { |
||||
return 'background-color: #FFF'; |
||||
} else { |
||||
return 'background-color: #F5F2FF'; |
||||
} |
||||
}, |
||||
//请求成绩明细表格数据 |
||||
handleCurrentChange(val) { |
||||
this.$get(this.api.queryStudentByPage, { |
||||
studentId: this.studentId, |
||||
pageSize: 5, |
||||
pageNum: val, |
||||
projectPermissions: this.projectPermissions, |
||||
courseId: this.courseId |
||||
}) |
||||
.then(res => { |
||||
this.tableData = res.message.rows; |
||||
this.dataTotal = res.message.total; |
||||
}) |
||||
.catch(err => { |
||||
console.log(err); |
||||
}); |
||||
}, |
||||
handleClick(){} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.Achievement-container { |
||||
width: 98%; |
||||
height: 600px; |
||||
background: rgba(255, 255, 255, 1); |
||||
box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1); |
||||
border-radius: 10px; |
||||
text-align: center; |
||||
overflow: hidden; |
||||
.header { |
||||
width: 97%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin: 0 auto; |
||||
margin-top: 16px; |
||||
p { |
||||
font-size: 20px; |
||||
margin-top: 14px; |
||||
margin-bottom: 0px; |
||||
padding: 0; |
||||
font-family: MicrosoftYaHeil; |
||||
color: #333333; |
||||
} |
||||
} |
||||
.score-table { |
||||
width: 97%; |
||||
margin: 0 auto; |
||||
margin-top: 18px; |
||||
position: relative; |
||||
.block { |
||||
position: absolute; |
||||
right: 0px; |
||||
bottom: -50px; |
||||
} |
||||
} |
||||
.el-pagination.is-background .el-pager li:not(.disabled).active { |
||||
background-color: #e05e5a; |
||||
color: #fff; |
||||
} |
||||
} |
||||
</style> |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue