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