liangliang.Li
3 years ago
commit
fcb37c7da8
171 changed files with 27239 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,39 @@ |
|||||||
|
{ |
||||||
|
"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", |
||||||
|
"core-js": "^2.6.12", |
||||||
|
"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,22 @@ |
|||||||
|
<template> |
||||||
|
<div id="app" > |
||||||
|
<router-view></router-view> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'App', |
||||||
|
created () { |
||||||
|
//在页面加载时读取sessionStorage里的状态信息 |
||||||
|
if (sessionStorage.getItem("kd_client_store") ) { |
||||||
|
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("kd_client_store")))) |
||||||
|
} |
||||||
|
|
||||||
|
//在页面刷新时将vuex里的信息保存到sessionStorage里 |
||||||
|
window.addEventListener("beforeunload",()=>{ |
||||||
|
sessionStorage.setItem("kd_client_store",JSON.stringify(this.$store.state)) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -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,510 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"/> |
||||||
|
<title>iconfont Demo</title> |
||||||
|
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/> |
||||||
|
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/> |
||||||
|
<link rel="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> |
||||||
|
<style> |
||||||
|
.main .logo { |
||||||
|
margin-top: 0; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.main .logo a { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.main .logo .sub-title { |
||||||
|
margin-left: 0.5em; |
||||||
|
font-size: 22px; |
||||||
|
color: #fff; |
||||||
|
background: linear-gradient(-45deg, #3967FF, #B500FE); |
||||||
|
-webkit-background-clip: text; |
||||||
|
-webkit-text-fill-color: transparent; |
||||||
|
} |
||||||
|
</style> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="main"> |
||||||
|
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"> |
||||||
|
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"> |
||||||
|
|
||||||
|
</a></h1> |
||||||
|
<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=2363397" 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">房子</div> |
||||||
|
<div class="code-name">&#xe69c;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">右箭头</div> |
||||||
|
<div class="code-name">&#xe65d;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">maxswell</div> |
||||||
|
<div class="code-name">&#xe602;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">MAXSWELL</div> |
||||||
|
<div class="code-name">&#xe601;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">问号</div> |
||||||
|
<div class="code-name">&#xe7b3;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">笔</div> |
||||||
|
<div class="code-name">&#xe624;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">表情</div> |
||||||
|
<div class="code-name">&#xe614;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">图片</div> |
||||||
|
<div class="code-name">&#xe61e;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">联系人</div> |
||||||
|
<div class="code-name">&#xe697;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">单选/复选</div> |
||||||
|
<div class="code-name">&#xe60a;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">密码</div> |
||||||
|
<div class="code-name">&#xe659;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">首页-用户</div> |
||||||
|
<div class="code-name">&#xe629;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">qq</div> |
||||||
|
<div class="code-name">&#xe630;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">微信</div> |
||||||
|
<div class="code-name">&#xe665;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
</ul> |
||||||
|
<div class="article markdown"> |
||||||
|
<h2 id="unicode-">Unicode 引用</h2> |
||||||
|
<hr> |
||||||
|
|
||||||
|
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> |
||||||
|
<ul> |
||||||
|
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li> |
||||||
|
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li> |
||||||
|
</ul> |
||||||
|
<blockquote> |
||||||
|
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG 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.woff2?t=1621759935073') format('woff2'), |
||||||
|
url('iconfont.woff?t=1621759935073') format('woff'), |
||||||
|
url('iconfont.ttf?t=1621759935073') format('truetype'); |
||||||
|
} |
||||||
|
</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-home"></span> |
||||||
|
<div class="name"> |
||||||
|
房子 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-home |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-arrowRight"></span> |
||||||
|
<div class="name"> |
||||||
|
右箭头 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-arrowRight |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-maisiduowei1"></span> |
||||||
|
<div class="name"> |
||||||
|
maxswell |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-maisiduowei1 |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-maisiduowei"></span> |
||||||
|
<div class="name"> |
||||||
|
MAXSWELL |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-maisiduowei |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-wenhao"></span> |
||||||
|
<div class="name"> |
||||||
|
问号 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-wenhao |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-iconset0137"></span> |
||||||
|
<div class="name"> |
||||||
|
笔 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-iconset0137 |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-biaoqing"></span> |
||||||
|
<div class="name"> |
||||||
|
表情 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-biaoqing |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-tupian"></span> |
||||||
|
<div class="name"> |
||||||
|
图片 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-tupian |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-lianxiren"></span> |
||||||
|
<div class="name"> |
||||||
|
联系人 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-lianxiren |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-guanbi"></span> |
||||||
|
<div class="name"> |
||||||
|
单选/复选 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-guanbi |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-mima"></span> |
||||||
|
<div class="name"> |
||||||
|
密码 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-mima |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-yonghu-fuben"></span> |
||||||
|
<div class="name"> |
||||||
|
首页-用户 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-yonghu-fuben |
||||||
|
</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"> |
||||||
|
微信 |
||||||
|
</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>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> |
||||||
|
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</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-home"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">房子</div> |
||||||
|
<div class="code-name">#icon-home</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-arrowRight"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">右箭头</div> |
||||||
|
<div class="code-name">#icon-arrowRight</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-maisiduowei1"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">maxswell</div> |
||||||
|
<div class="code-name">#icon-maisiduowei1</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-maisiduowei"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">MAXSWELL</div> |
||||||
|
<div class="code-name">#icon-maisiduowei</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-wenhao"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">问号</div> |
||||||
|
<div class="code-name">#icon-wenhao</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-iconset0137"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">笔</div> |
||||||
|
<div class="code-name">#icon-iconset0137</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-biaoqing"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">表情</div> |
||||||
|
<div class="code-name">#icon-biaoqing</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-tupian"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">图片</div> |
||||||
|
<div class="code-name">#icon-tupian</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-lianxiren"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">联系人</div> |
||||||
|
<div class="code-name">#icon-lianxiren</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-guanbi"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">单选/复选</div> |
||||||
|
<div class="code-name">#icon-guanbi</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-mima"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">密码</div> |
||||||
|
<div class="code-name">#icon-mima</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-yonghu-fuben"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">首页-用户</div> |
||||||
|
<div class="code-name">#icon-yonghu-fuben</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">微信</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"; /* Project id 2363397 */ |
||||||
|
src: url('iconfont.woff2?t=1621759935073') format('woff2'), |
||||||
|
url('iconfont.woff?t=1621759935073') format('woff'), |
||||||
|
url('iconfont.ttf?t=1621759935073') format('truetype'); |
||||||
|
} |
||||||
|
|
||||||
|
.iconfont { |
||||||
|
font-family: "iconfont" !important; |
||||||
|
font-size: 16px; |
||||||
|
font-style: normal; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-home:before { |
||||||
|
content: "\e69c"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-arrowRight:before { |
||||||
|
content: "\e65d"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-maisiduowei1:before { |
||||||
|
content: "\e602"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-maisiduowei:before { |
||||||
|
content: "\e601"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-wenhao:before { |
||||||
|
content: "\e7b3"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-iconset0137:before { |
||||||
|
content: "\e624"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-biaoqing:before { |
||||||
|
content: "\e614"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-tupian:before { |
||||||
|
content: "\e61e"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-lianxiren:before { |
||||||
|
content: "\e697"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-guanbi:before { |
||||||
|
content: "\e60a"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-mima:before { |
||||||
|
content: "\e659"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-yonghu-fuben:before { |
||||||
|
content: "\e629"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-qq:before { |
||||||
|
content: "\e630"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-weixin:before { |
||||||
|
content: "\e665"; |
||||||
|
} |
||||||
|
|
||||||
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,107 @@ |
|||||||
|
{ |
||||||
|
"id": "2363397", |
||||||
|
"name": "no name", |
||||||
|
"font_family": "iconfont", |
||||||
|
"css_prefix_text": "icon-", |
||||||
|
"description": "", |
||||||
|
"glyphs": [ |
||||||
|
{ |
||||||
|
"icon_id": "1984734", |
||||||
|
"name": "房子", |
||||||
|
"font_class": "home", |
||||||
|
"unicode": "e69c", |
||||||
|
"unicode_decimal": 59036 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "14835595", |
||||||
|
"name": "右箭头", |
||||||
|
"font_class": "arrowRight", |
||||||
|
"unicode": "e65d", |
||||||
|
"unicode_decimal": 58973 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "21174814", |
||||||
|
"name": "maxswell", |
||||||
|
"font_class": "maisiduowei1", |
||||||
|
"unicode": "e602", |
||||||
|
"unicode_decimal": 58882 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "21142810", |
||||||
|
"name": "MAXSWELL", |
||||||
|
"font_class": "maisiduowei", |
||||||
|
"unicode": "e601", |
||||||
|
"unicode_decimal": 58881 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "11759920", |
||||||
|
"name": "问号", |
||||||
|
"font_class": "wenhao", |
||||||
|
"unicode": "e7b3", |
||||||
|
"unicode_decimal": 59315 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "554032", |
||||||
|
"name": "笔", |
||||||
|
"font_class": "iconset0137", |
||||||
|
"unicode": "e624", |
||||||
|
"unicode_decimal": 58916 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "1092116", |
||||||
|
"name": "表情", |
||||||
|
"font_class": "biaoqing", |
||||||
|
"unicode": "e614", |
||||||
|
"unicode_decimal": 58900 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "6049692", |
||||||
|
"name": "图片", |
||||||
|
"font_class": "tupian", |
||||||
|
"unicode": "e61e", |
||||||
|
"unicode_decimal": 58910 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "10487555", |
||||||
|
"name": "联系人", |
||||||
|
"font_class": "lianxiren", |
||||||
|
"unicode": "e697", |
||||||
|
"unicode_decimal": 59031 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "731146", |
||||||
|
"name": "单选/复选", |
||||||
|
"font_class": "guanbi", |
||||||
|
"unicode": "e60a", |
||||||
|
"unicode_decimal": 58890 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "4320350", |
||||||
|
"name": "密码", |
||||||
|
"font_class": "mima", |
||||||
|
"unicode": "e659", |
||||||
|
"unicode_decimal": 58969 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "19104009", |
||||||
|
"name": "首页-用户", |
||||||
|
"font_class": "yonghu-fuben", |
||||||
|
"unicode": "e629", |
||||||
|
"unicode_decimal": 58921 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "1185470", |
||||||
|
"name": "qq", |
||||||
|
"font_class": "qq", |
||||||
|
"unicode": "e630", |
||||||
|
"unicode_decimal": 58928 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "9186709", |
||||||
|
"name": "微信", |
||||||
|
"font_class": "weixin", |
||||||
|
"unicode": "e665", |
||||||
|
"unicode_decimal": 58981 |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 13 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: 127 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 600 KiB |
|
After Width: | Height: | Size: 279 KiB |
|
After Width: | Height: | Size: 832 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 6.1 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: 1.3 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 130 KiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 539 B |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 15 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,130 @@ |
|||||||
|
<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="avatar"></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 { |
||||||
|
userName: this.$store.state.userName, |
||||||
|
avatar: this.$store.state.avatar |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
bus.$on('updateAvatar',avatar => { |
||||||
|
this.avatar = avatar |
||||||
|
}) |
||||||
|
bus.$on('updateAccount',userName => { |
||||||
|
this.userName = userName |
||||||
|
}) |
||||||
|
}, |
||||||
|
// computed: { |
||||||
|
// username() { |
||||||
|
// let username = sessionStorage.getItem('kd_client_username'); |
||||||
|
// return username ? username : this.name; |
||||||
|
// } |
||||||
|
// }, |
||||||
|
methods: { |
||||||
|
loginout() { |
||||||
|
this.$store.replaceState({}) |
||||||
|
sessionStorage.removeItem('kd_client_username'); |
||||||
|
location.reload() |
||||||
|
}, |
||||||
|
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: #328aff; |
||||||
|
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,142 @@ |
|||||||
|
<template> |
||||||
|
<div class="Achievement-container"> |
||||||
|
<div class="header"> |
||||||
|
<p>成绩明细</p> |
||||||
|
<a ref="message"> |
||||||
|
<el-button |
||||||
|
round |
||||||
|
style="background-color:#328aff;color:#FFFFFF;width:110px;height:36px;" |
||||||
|
>导出</el-button> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="score-table"> |
||||||
|
<el-table |
||||||
|
:cell-style="tableRowStyle" |
||||||
|
:header-cell-style="{background:'#328aff',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://120.78.198.231/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://120.78.198.231/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: #328aff; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,90 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-table |
||||||
|
:cell-style="tableRowStyle" |
||||||
|
:header-cell-style="{background:'#328aff',color:'#FFFFFF'}" |
||||||
|
:data="tableData" |
||||||
|
stripe |
||||||
|
style="width: 100%" |
||||||
|
> |
||||||
|
<el-table-column prop="id" label="次序" width="120" align="center" type="index"></el-table-column> |
||||||
|
<el-table-column prop="projectName" label="实验项目名称" align="center"></el-table-column> |
||||||
|
<el-table-column prop="score" label="得分" align="center"></el-table-column> |
||||||
|
<el-table-column prop="timeConsuming" label="耗时" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.row.timeConsuming}}分 |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="startTime" label="起始时间" align="center"></el-table-column> |
||||||
|
<el-table-column prop="endTime" label="结束时间" align="center"></el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="toReport(scope.row)">实验报告</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background :current-page="pageNo" layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange"></el-pagination> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
pattern: Number(sessionStorage.getItem('pattern')), |
||||||
|
totals: 0, |
||||||
|
tableData: [], |
||||||
|
userId: this.$store.state.userId, |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10 |
||||||
|
}; |
||||||
|
}, |
||||||
|
created() { |
||||||
|
console.log(11,this.$route) |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||||
|
if (rowIndex % 2 === 0) { |
||||||
|
return 'background-color: #FFF'; |
||||||
|
} else { |
||||||
|
return 'background-color: #F5F2FF'; |
||||||
|
} |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
getData() { |
||||||
|
this.$post(this.api.fictitiousRecord, { |
||||||
|
userId: this.userId, |
||||||
|
page: this.pageNo, |
||||||
|
size: this.pageSize, |
||||||
|
source: 0, |
||||||
|
systemId: 3, |
||||||
|
pattern: this.pattern |
||||||
|
}) |
||||||
|
.then(res => { |
||||||
|
let data = res.data |
||||||
|
this.tableData = data.list |
||||||
|
this.totals = data.totalCount |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
}, |
||||||
|
exportData() { |
||||||
|
location.href = `${this.api.exportProjectRecord}?userId=${this.userId}` |
||||||
|
}, |
||||||
|
toReport(row) { |
||||||
|
this.$router.push(`/showExperiment?id=${row.reportId}&type=1`) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scopted> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
<template> |
||||||
|
<div class="HeadPortrait"> |
||||||
|
<img :src="this.$store.state.userPhoto" alt=""> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.HeadPortrait { |
||||||
|
img{ |
||||||
|
width: 60px; |
||||||
|
height: 60px; |
||||||
|
background: rgba(146, 120, 255, 1); |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,138 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="tabs"> |
||||||
|
<a class="item" v-for="(item,index) in classTabs" :key="index" :class="{active: index == classActive}" @click="classTabChange(item,index)">{{item.className}}</a> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-input placeholder="请输入考核名称" prefix-icon="el-icon-search" v-model="searchContent" clearable></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table |
||||||
|
:cell-style="tableRowStyle" |
||||||
|
:header-cell-style="{background:'#328aff',color:'#FFFFFF'}" |
||||||
|
:data="tableData" |
||||||
|
stripe |
||||||
|
:row-key="getRowKeys" |
||||||
|
@selection-change="handleSelectionChange" |
||||||
|
class="mat20" |
||||||
|
> |
||||||
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||||
|
<el-table-column prop="id" label="次序" width="120" align="center" type="index"></el-table-column> |
||||||
|
<el-table-column prop="className" label="班级" align="center"></el-table-column> |
||||||
|
<el-table-column prop="experimentalName" label="考核名称" align="center"></el-table-column> |
||||||
|
<el-table-column prop="score" label="得分" align="center"></el-table-column> |
||||||
|
<el-table-column prop="timeConsuming" label="耗时" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.row.timeConsuming}}分 |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="startTime" label="起始时间" align="center"></el-table-column> |
||||||
|
<el-table-column prop="endTime" label="结束时间" align="center"></el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="toReport(scope.row)">实验成绩报告</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background :current-page="pageNo" layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange"></el-pagination> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
pattern: Number(sessionStorage.getItem('pattern')), |
||||||
|
totals: 0, |
||||||
|
tableData: [], |
||||||
|
userId: this.$store.state.userId, |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
classTabs: { |
||||||
|
classId: '', |
||||||
|
className: '全部' |
||||||
|
}, |
||||||
|
classActive: 0, |
||||||
|
classId: '', |
||||||
|
searchContent: '' |
||||||
|
}; |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getData(); |
||||||
|
this.getClassData() |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
searchContent (val) { |
||||||
|
clearTimeout(this.searchTimer) |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.getData() |
||||||
|
},500) |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||||
|
if (rowIndex % 2 === 0) { |
||||||
|
return 'background-color: #FFF'; |
||||||
|
} else { |
||||||
|
return 'background-color: #F5F2FF'; |
||||||
|
} |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
getData() { |
||||||
|
this.$post(this.api.fictitiousRecord, { |
||||||
|
classId: this.classId, |
||||||
|
userId: this.userId, |
||||||
|
page: this.pageNo, |
||||||
|
size: this.pageSize, |
||||||
|
searchContent: this.core.encodeString(this.searchContent), |
||||||
|
source: 2, |
||||||
|
systemId: 3, |
||||||
|
pattern: this.pattern |
||||||
|
}) |
||||||
|
.then(res => { |
||||||
|
let data = res.data |
||||||
|
this.tableData = data.list |
||||||
|
this.totals = data.totalCount |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
}, |
||||||
|
exportData() { |
||||||
|
location.href = `${this.api.exportProjectRecord}?userId=${this.userId}` |
||||||
|
}, |
||||||
|
toReport(row) { |
||||||
|
this.$router.push(`/showExperiment?id=${row.reportId}`) |
||||||
|
}, |
||||||
|
getRowKeys(row){ |
||||||
|
return row.reportId |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.$emit("handleSelect",val) |
||||||
|
}, |
||||||
|
getClassData(){ |
||||||
|
this.$get(`${this.api.mineClass}?userId=${this.userId}`).then(res => { |
||||||
|
res.list.unshift({...this.classTabs}) |
||||||
|
this.classTabs = res.list |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
classTabChange(item,index){ |
||||||
|
this.classActive = index |
||||||
|
this.classId = item.classId |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scopted> |
||||||
|
.mat20{ |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,91 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-table |
||||||
|
:cell-style="tableRowStyle" |
||||||
|
:header-cell-style="{background:'#328aff',color:'#FFFFFF'}" |
||||||
|
:data="tableData" |
||||||
|
stripe |
||||||
|
> |
||||||
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||||
|
<el-table-column prop="id" label="次序" width="120" align="center" type="index"></el-table-column> |
||||||
|
<el-table-column prop="experimentalName" label="实验教学名称" align="center"></el-table-column> |
||||||
|
<el-table-column prop="experimentalClassName" label="班级" align="center"></el-table-column> |
||||||
|
<el-table-column prop="projectName" label="实验项目名称" align="center"></el-table-column> |
||||||
|
<el-table-column prop="score" label="得分" align="center"></el-table-column> |
||||||
|
<el-table-column prop="timeConsuming" label="耗时" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.row.timeConsuming}}分 |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="startTime" label="起始时间" align="center"></el-table-column> |
||||||
|
<el-table-column prop="endTime" label="结束时间" align="center"></el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="toReport(scope.row)">实验成绩报告</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background :current-page="pageNo" layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange"></el-pagination> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
pattern: Number(sessionStorage.getItem('pattern')), |
||||||
|
totals: 0, |
||||||
|
tableData: [], |
||||||
|
userId: this.$store.state.userId, |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10 |
||||||
|
}; |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||||
|
if (rowIndex % 2 === 0) { |
||||||
|
return 'background-color: #FFF'; |
||||||
|
} else { |
||||||
|
return 'background-color: #F5F2FF'; |
||||||
|
} |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
getData() { |
||||||
|
this.$post(this.api.fictitiousRecord, { |
||||||
|
userId: this.userId, |
||||||
|
page: this.pageNo, |
||||||
|
size: this.pageSize, |
||||||
|
source: 1, |
||||||
|
systemId: 3, |
||||||
|
pattern: this.pattern |
||||||
|
}) |
||||||
|
.then(res => { |
||||||
|
let data = res.data |
||||||
|
this.tableData = data.list |
||||||
|
this.totals = data.totalCount |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
}, |
||||||
|
exportData() { |
||||||
|
location.href = `${this.api.exportProjectRecord}?userId=${this.userId}` |
||||||
|
}, |
||||||
|
toReport(row) { |
||||||
|
this.$router.push(`/showExperiment?id=${row.reportId}`) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scopted> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,150 @@ |
|||||||
|
<template> |
||||||
|
<div class="Achievement-container"> |
||||||
|
<!-- <el-tabs v-model="activeName"> |
||||||
|
<el-tab-pane label="虚拟实验" name="first"></el-tab-pane> |
||||||
|
<el-tab-pane label="教学实验" name="second"></el-tab-pane> |
||||||
|
</el-tabs> --> |
||||||
|
<div class="tabs"> |
||||||
|
<a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == activeName}" @click="tabChange(index)">{{item}}</a> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="header" > |
||||||
|
<p>实验记录明细</p> |
||||||
|
<el-button round type="primary" @click="exportData" v-preventReClick>导出</el-button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="score-table" v-if="activeName == 'first'"> |
||||||
|
<fictitiouslist></fictitiouslist> |
||||||
|
</div> |
||||||
|
<div class="score-table" v-if="activeName == 'second'"> |
||||||
|
<competitionList></competitionList> |
||||||
|
</div> |
||||||
|
<div class="score-table" v-if="activeName == 'three'"> |
||||||
|
<teachinglist @handleSelect="handleSelect"></teachinglist> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import fictitiouslist from './FictitiousList.vue'; |
||||||
|
import teachinglist from './TeachingList.vue'; |
||||||
|
import competitionList from './competitionList.vue'; |
||||||
|
import { constants } from 'zlib'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
activeName: 'first', |
||||||
|
userId: this.$store.state.userId, |
||||||
|
tabs: { |
||||||
|
first: '练习模式', |
||||||
|
second: '竞赛模式', |
||||||
|
three: '考核模式' |
||||||
|
}, |
||||||
|
multipleSelection: [] |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
fictitiouslist, |
||||||
|
teachinglist, |
||||||
|
competitionList |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// this.$refs.message.href = `http://liuwanr.cn:8080/attendance/exportPractice?studentId=${this.studentId}&courseId=${this.$store.state.courseId}&titles=%E5%BA%8F%E5%8F%B7,%E9%A1%B9%E7%9B%AE%E5%90%8D%E7%A7%B0,%E5%AE%9E%E9%AA%8C%E9%A1%B9%E7%9B%AE,%E8%80%83%E5%8B%A4%E8%AE%B0%E5%BD%95,%E7%AD%BE%E5%88%B0%E6%97%B6%E9%97%B4`; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
exportData() { |
||||||
|
if(this.activeName == 'first'){ |
||||||
|
location.href = `${this.api.exportProjectRecord}?userId=${this.userId}` |
||||||
|
}else if(this.activeName == 'second'){ |
||||||
|
location.href = `${this.api.exportExperimentProjectRecord}?userId=${this.userId}` |
||||||
|
}else{ |
||||||
|
if(this.multipleSelection.length != 0){ |
||||||
|
let arr = this.multipleSelection.map(e => e.reportId).join() |
||||||
|
location.href = `${this.api.exportKdTeachReport}?reportIds=${arr}&userId=${this.userId}` |
||||||
|
}else{ |
||||||
|
this.$post(this.api.fictitiousRecord, { |
||||||
|
classId: this.$children[1].classId, |
||||||
|
userId: this.userId, |
||||||
|
page: 1, |
||||||
|
size: this.$children[1].totals, |
||||||
|
searchContent: this.core.encodeString(this.$children[1].searchContent), |
||||||
|
source: 2, |
||||||
|
systemId: 3 |
||||||
|
}).then(res => { |
||||||
|
let arr = res.data.list.map(e => e.reportId).join() |
||||||
|
location.href = `${this.api.exportKdTeachReport}?reportIds=${arr}&userId=${this.userId}` |
||||||
|
}).catch(err => {}); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
tabChange(index){ |
||||||
|
this.activeName = index |
||||||
|
}, |
||||||
|
handleSelect(val){ |
||||||
|
this.multipleSelection = val; |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scopted> |
||||||
|
.Achievement-container { |
||||||
|
width: 100%; |
||||||
|
padding: 20px; |
||||||
|
background: rgba(255, 255, 255, 1); |
||||||
|
box-sizing: border-box; |
||||||
|
box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1); |
||||||
|
border-radius: 10px; |
||||||
|
text-align: center; |
||||||
|
overflow: hidden; |
||||||
|
.header { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin-top: 16px; |
||||||
|
p { |
||||||
|
margin-top: 14px; |
||||||
|
font-size: 20px; |
||||||
|
font-family: MicrosoftYaHeil; |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
} |
||||||
|
.score-table { |
||||||
|
margin-top: 18px; |
||||||
|
position: relative; |
||||||
|
.block { |
||||||
|
position: absolute; |
||||||
|
right: 0px; |
||||||
|
bottom: -50px; |
||||||
|
} |
||||||
|
} |
||||||
|
.el-pagination.is-background .el-pager li:not(.disabled).active { |
||||||
|
background-color: #328aff; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
.tabs{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 20px 0 0; |
||||||
|
margin: 0; |
||||||
|
// box-shadow:0px 0px 25px 2px rgba(48,115,248,0.14); |
||||||
|
z-index: 999; |
||||||
|
background-color: #fff; |
||||||
|
.item{ |
||||||
|
padding: 12px 20px; |
||||||
|
margin-right: 10px; |
||||||
|
color:#606266; |
||||||
|
line-height: 1; |
||||||
|
border-radius: 4px; |
||||||
|
background-color: #fff; |
||||||
|
border: 1px solid #dcdfe6; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&.active{ |
||||||
|
color: #fff; |
||||||
|
background-color: #328aff; |
||||||
|
border-color: #328aff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,186 @@ |
|||||||
|
<template> |
||||||
|
<div class="tags" v-if="showTags"> |
||||||
|
<ul> |
||||||
|
<li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index"> |
||||||
|
<router-link :to="item.path" class="tags-li-title"> |
||||||
|
{{item.title}} |
||||||
|
</router-link> |
||||||
|
<span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<div class="tags-close-box"> |
||||||
|
<el-dropdown @command="handleTags"> |
||||||
|
<el-button size="mini" type="primary"> |
||||||
|
标签选项<i class="el-icon-arrow-down el-icon--right"></i> |
||||||
|
</el-button> |
||||||
|
<el-dropdown-menu size="small" slot="dropdown"> |
||||||
|
<el-dropdown-item command="other">关闭其他</el-dropdown-item> |
||||||
|
<el-dropdown-item command="all">关闭所有</el-dropdown-item> |
||||||
|
</el-dropdown-menu> |
||||||
|
</el-dropdown> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import bus from './bus'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
tagsList: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
isActive(path) { |
||||||
|
return path === this.$route.fullPath; |
||||||
|
}, |
||||||
|
// 关闭单个标签 |
||||||
|
closeTags(index) { |
||||||
|
const delItem = this.tagsList.splice(index, 1)[0]; |
||||||
|
const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1]; |
||||||
|
if (item) { |
||||||
|
delItem.path === this.$route.fullPath && this.$router.push(item.path); |
||||||
|
}else{ |
||||||
|
this.$router.push('/'); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 关闭全部标签 |
||||||
|
closeAll(){ |
||||||
|
this.tagsList = []; |
||||||
|
this.$router.push('/'); |
||||||
|
}, |
||||||
|
// 关闭其他标签 |
||||||
|
closeOther(){ |
||||||
|
const curItem = this.tagsList.filter(item => { |
||||||
|
return item.path === this.$route.fullPath; |
||||||
|
}) |
||||||
|
this.tagsList = curItem; |
||||||
|
}, |
||||||
|
// 设置标签 |
||||||
|
setTags(route){ |
||||||
|
const isExist = this.tagsList.some(item => { |
||||||
|
return item.path === route.fullPath; |
||||||
|
}) |
||||||
|
if(!isExist){ |
||||||
|
if(this.tagsList.length >= 8){ |
||||||
|
this.tagsList.shift(); |
||||||
|
} |
||||||
|
this.tagsList.push({ |
||||||
|
title: route.meta.title, |
||||||
|
path: route.fullPath, |
||||||
|
name: route.matched[1].components.default.name |
||||||
|
}) |
||||||
|
} |
||||||
|
bus.$emit('tags', this.tagsList); |
||||||
|
}, |
||||||
|
handleTags(command){ |
||||||
|
command === 'other' ? this.closeOther() : this.closeAll(); |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
showTags() { |
||||||
|
return this.tagsList.length > 0; |
||||||
|
} |
||||||
|
}, |
||||||
|
watch:{ |
||||||
|
$route(newValue, oldValue){ |
||||||
|
this.setTags(newValue); |
||||||
|
} |
||||||
|
}, |
||||||
|
created(){ |
||||||
|
this.setTags(this.$route); |
||||||
|
// 监听关闭当前页面的标签页 |
||||||
|
bus.$on('close_current_tags', () => { |
||||||
|
for (let i = 0, len = this.tagsList.length; i < len; i++) { |
||||||
|
const item = this.tagsList[i]; |
||||||
|
if(item.path === this.$route.fullPath){ |
||||||
|
if(i < len - 1){ |
||||||
|
this.$router.push(this.tagsList[i+1].path); |
||||||
|
}else if(i > 0){ |
||||||
|
this.$router.push(this.tagsList[i-1].path); |
||||||
|
}else{ |
||||||
|
this.$router.push('/'); |
||||||
|
} |
||||||
|
this.tagsList.splice(i, 1); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
<style> |
||||||
|
.tags { |
||||||
|
position: relative; |
||||||
|
height: 30px; |
||||||
|
overflow: hidden; |
||||||
|
background: #fff; |
||||||
|
padding-right: 120px; |
||||||
|
box-shadow: 0 5px 10px #ddd; |
||||||
|
} |
||||||
|
|
||||||
|
.tags ul { |
||||||
|
box-sizing: border-box; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-li { |
||||||
|
float: left; |
||||||
|
margin: 3px 5px 2px 3px; |
||||||
|
border-radius: 3px; |
||||||
|
font-size: 12px; |
||||||
|
overflow: hidden; |
||||||
|
cursor: pointer; |
||||||
|
height: 23px; |
||||||
|
line-height: 23px; |
||||||
|
border: 1px solid #e9eaec; |
||||||
|
background: #fff; |
||||||
|
padding: 0 5px 0 12px; |
||||||
|
vertical-align: middle; |
||||||
|
color: #666; |
||||||
|
-webkit-transition: all .3s ease-in; |
||||||
|
-moz-transition: all .3s ease-in; |
||||||
|
transition: all .3s ease-in; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-li:not(.active):hover { |
||||||
|
background: #f8f8f8; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-li.active { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-li-title { |
||||||
|
float: left; |
||||||
|
max-width: 80px; |
||||||
|
overflow: hidden; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
margin-right: 5px; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-li.active .tags-li-title { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-close-box { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
padding-top: 1px; |
||||||
|
text-align: center; |
||||||
|
width: 110px; |
||||||
|
height: 30px; |
||||||
|
background: #fff; |
||||||
|
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1); |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
import Vue from 'vue'; |
||||||
|
|
||||||
|
// 使用 Event Bus
|
||||||
|
const bus = new Vue(); |
||||||
|
|
||||||
|
export default bus; |
||||||
@ -0,0 +1,80 @@ |
|||||||
|
import Vue from 'vue'; |
||||||
|
|
||||||
|
// v-dialogDrag: 弹窗拖拽属性
|
||||||
|
Vue.directive('dialogDrag', { |
||||||
|
bind(el, binding, vnode, oldVnode) { |
||||||
|
const dialogHeaderEl = el.querySelector('.el-dialog__header'); |
||||||
|
const dragDom = el.querySelector('.el-dialog'); |
||||||
|
|
||||||
|
dialogHeaderEl.style.cssText += ';cursor:move;' |
||||||
|
dragDom.style.cssText += ';top:0px;' |
||||||
|
|
||||||
|
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
|
||||||
|
const sty = (() => { |
||||||
|
if (window.document.currentStyle) { |
||||||
|
return (dom, attr) => dom.currentStyle[attr]; |
||||||
|
} else { |
||||||
|
return (dom, attr) => getComputedStyle(dom, false)[attr]; |
||||||
|
} |
||||||
|
})() |
||||||
|
|
||||||
|
dialogHeaderEl.onmousedown = (e) => { |
||||||
|
// 鼠标按下，计算当前元素距离可视区的距离
|
||||||
|
const disX = e.clientX - dialogHeaderEl.offsetLeft; |
||||||
|
const disY = e.clientY - dialogHeaderEl.offsetTop; |
||||||
|
|
||||||
|
const screenWidth = document.body.clientWidth; // body当前宽度
|
||||||
|
const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)
|
||||||
|
|
||||||
|
const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
|
||||||
|
const dragDomheight = dragDom.offsetHeight; // 对话框高度
|
||||||
|
|
||||||
|
const minDragDomLeft = dragDom.offsetLeft; |
||||||
|
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; |
||||||
|
|
||||||
|
const minDragDomTop = dragDom.offsetTop; |
||||||
|
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; |
||||||
|
|
||||||
|
|
||||||
|
// 获取到的值带px 正则匹配替换
|
||||||
|
let styL = sty(dragDom, 'left'); |
||||||
|
let styT = sty(dragDom, 'top'); |
||||||
|
|
||||||
|
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
|
||||||
|
if (styL.includes('%')) { |
||||||
|
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100); |
||||||
|
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100); |
||||||
|
} else { |
||||||
|
styL = +styL.replace(/\px/g, ''); |
||||||
|
styT = +styT.replace(/\px/g, ''); |
||||||
|
}; |
||||||
|
|
||||||
|
document.onmousemove = function (e) { |
||||||
|
// 通过事件委托，计算移动的距离
|
||||||
|
let left = e.clientX - disX; |
||||||
|
let top = e.clientY - disY; |
||||||
|
|
||||||
|
// 边界处理
|
||||||
|
if (-(left) > minDragDomLeft) { |
||||||
|
left = -(minDragDomLeft); |
||||||
|
} else if (left > maxDragDomLeft) { |
||||||
|
left = maxDragDomLeft; |
||||||
|
} |
||||||
|
|
||||||
|
if (-(top) > minDragDomTop) { |
||||||
|
top = -(minDragDomTop); |
||||||
|
} else if (top > maxDragDomTop) { |
||||||
|
top = maxDragDomTop; |
||||||
|
} |
||||||
|
|
||||||
|
// 移动当前元素
|
||||||
|
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`; |
||||||
|
}; |
||||||
|
|
||||||
|
document.onmouseup = function (e) { |
||||||
|
document.onmousemove = null; |
||||||
|
document.onmouseup = null; |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
export const messages = { |
||||||
|
'zh': { |
||||||
|
i18n: { |
||||||
|
breadcrumb: '国际化产品', |
||||||
|
tips: '通过切换语言按钮，来改变当前内容的语言。', |
||||||
|
btn: '切换英文', |
||||||
|
title1: '常用用法', |
||||||
|
p1: '要是你把你的秘密告诉了风，那就别怪风把它带给树。', |
||||||
|
p2: '没有什么比信念更能支撑我们度过艰难的时光了。', |
||||||
|
p3: '只要能把自己的事做好，并让自己快乐，你就领先于大多数人了。', |
||||||
|
title2: '组件插值', |
||||||
|
info: 'Element组件需要国际化，请参考 {action}。', |
||||||
|
value: '文档' |
||||||
|
} |
||||||
|
}, |
||||||
|
'en': { |
||||||
|
i18n: { |
||||||
|
breadcrumb: 'International Products', |
||||||
|
tips: 'Click on the button to change the current language. ', |
||||||
|
btn: 'Switch Chinese', |
||||||
|
title1: 'Common usage', |
||||||
|
p1: "If you reveal your secrets to the wind you should not blame the wind for revealing them to the trees.", |
||||||
|
p2: "Nothing can help us endure dark times better than our faith. ", |
||||||
|
p3: "If you can do what you do best and be happy, you're further along in life than most people.", |
||||||
|
title2: 'Component interpolation', |
||||||
|
info: 'The default language of Element is Chinese. If you wish to use another language, please refer to the {action}.', |
||||||
|
value: 'documentation' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue