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