yujialong 4 years ago
parent 30d74522ff
commit 6f2d6fbe95
  1. 197
      README.md
  2. 196
      README_EN.md
  3. BIN
      screenshots/wms1.png
  4. BIN
      screenshots/wms2.png
  5. BIN
      screenshots/wms3.png
  6. 11
      src/App.vue
  7. 50
      src/api/index.js
  8. BIN
      src/assets/1.png
  9. 28
      src/assets/css/color-dark.css
  10. 237
      src/assets/css/font_h7x0mu8o3mo/demo_index.html
  11. 29
      src/assets/css/font_h7x0mu8o3mo/iconfont.css
  12. BIN
      src/assets/css/font_h7x0mu8o3mo/iconfont.eot
  13. 1
      src/assets/css/font_h7x0mu8o3mo/iconfont.js
  14. 30
      src/assets/css/font_h7x0mu8o3mo/iconfont.json
  15. 35
      src/assets/css/font_h7x0mu8o3mo/iconfont.svg
  16. BIN
      src/assets/css/font_h7x0mu8o3mo/iconfont.ttf
  17. BIN
      src/assets/css/font_h7x0mu8o3mo/iconfont.woff
  18. BIN
      src/assets/css/font_h7x0mu8o3mo/iconfont.woff2
  19. 539
      src/assets/css/font_iiho0e2wbc/demo.css
  20. 283
      src/assets/css/font_iiho0e2wbc/demo_index.html
  21. 37
      src/assets/css/font_iiho0e2wbc/iconfont.css
  22. BIN
      src/assets/css/font_iiho0e2wbc/iconfont.eot
  23. 1
      src/assets/css/font_iiho0e2wbc/iconfont.js
  24. 44
      src/assets/css/font_iiho0e2wbc/iconfont.json
  25. 41
      src/assets/css/font_iiho0e2wbc/iconfont.svg
  26. BIN
      src/assets/css/font_iiho0e2wbc/iconfont.ttf
  27. BIN
      src/assets/css/font_iiho0e2wbc/iconfont.woff
  28. BIN
      src/assets/css/font_iiho0e2wbc/iconfont.woff2
  29. 4
      src/assets/css/icon.css
  30. 403
      src/assets/css/main.css
  31. 29
      src/assets/css/theme-green/color-green.css
  32. BIN
      src/assets/css/theme-green/fonts/element-icons.ttf
  33. BIN
      src/assets/css/theme-green/fonts/element-icons.woff
  34. 1
      src/assets/css/theme-green/index.css
  35. 539
      src/assets/icon/demo.css
  36. BIN
      src/assets/img/05学生-练习记录_03.png
  37. BIN
      src/assets/img/05学生-练习记录_05.png
  38. BIN
      src/assets/img/17查看成绩1.png
  39. BIN
      src/assets/img/17查看成绩2.png
  40. BIN
      src/assets/img/17查看成绩3.png
  41. BIN
      src/assets/img/17查看成绩4.png
  42. BIN
      src/assets/img/17查看成绩5.png
  43. BIN
      src/assets/img/17查看成绩6.png
  44. BIN
      src/assets/img/17查看成绩7.png
  45. BIN
      src/assets/img/3.png
  46. BIN
      src/assets/img/back.png
  47. BIN
      src/assets/img/done.png
  48. BIN
      src/assets/img/evaluation_bg1.png
  49. BIN
      src/assets/img/evaluation_bg2.png
  50. BIN
      src/assets/img/evaluation_bg3.png
  51. BIN
      src/assets/img/false.png
  52. BIN
      src/assets/img/get.png
  53. BIN
      src/assets/img/home_back.png
  54. BIN
      src/assets/img/hourglass.png
  55. BIN
      src/assets/img/icon-weigouxuan.png
  56. BIN
      src/assets/img/icon-xiangyou.png
  57. BIN
      src/assets/img/icon-yigouxuan.png
  58. BIN
      src/assets/img/icon_1.png
  59. BIN
      src/assets/img/icon_2.png
  60. BIN
      src/assets/img/icon_qq.png
  61. BIN
      src/assets/img/icon_wechat.png
  62. BIN
      src/assets/img/info-bg.png
  63. BIN
      src/assets/img/login-bg.png
  64. BIN
      src/assets/img/login_icon_close.png
  65. BIN
      src/assets/img/match-banner.png
  66. BIN
      src/assets/img/none.png
  67. BIN
      src/assets/img/people.png
  68. BIN
      src/assets/img/ques1.png
  69. BIN
      src/assets/img/station1.png
  70. BIN
      src/assets/img/station2.png
  71. BIN
      src/assets/img/station3.png
  72. BIN
      src/assets/img/station4.png
  73. BIN
      src/assets/img/station5.png
  74. BIN
      src/assets/img/student1.png
  75. BIN
      src/assets/img/student2.png
  76. BIN
      src/assets/img/student3.png
  77. BIN
      src/assets/img/student4.png
  78. BIN
      src/assets/img/time.png
  79. BIN
      src/assets/img/true.png
  80. BIN
      src/assets/logo.png
  81. 2
      src/layouts/header/index.vue
  82. 6
      src/main.js
  83. 7
      src/pages/account/login/index.vue
  84. 262
      src/pages/achievement/detail/index.vue
  85. 61
      src/pages/achievement/list/examResults.vue
  86. 6
      src/pages/achievement/list/practiceResults.vue
  87. 380
      src/pages/exam/do/index.vue
  88. 91
      src/pages/exam/list/index.vue
  89. 6
      src/pages/practice/list/myPractice.vue
  90. 8
      src/pages/practice/list/randomPractice.vue
  91. 2
      src/pages/setting/person/index.vue
  92. 6
      src/pages/wrongBook/list/index.vue
  93. 56
      src/plugins/requests/index.js
  94. 6
      src/router/modules/achievement.js
  95. 5
      src/router/modules/exam.js
  96. 4
      src/setting.js
  97. 28
      src/store/modules/achievement.js
  98. 77
      src/store/modules/exam.js
  99. 162
      src/styles/common.scss
  100. 7
      src/styles/default/index.scss
  101. Some files were not shown because too many files have changed in this diff Show More

@ -1,197 +0,0 @@
# vue-manage-system
<a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/ElemeFE/element">
<img src="https://img.shields.io/badge/element--ui-2.8.2-brightgreen.svg" alt="element-ui">
</a>
<a href="https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
</a>
<a href="https://github.com/lin-xin/vue-manage-system/releases">
<img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release">
</a>
<a href="https://lin-xin.gitee.io/example/work/#/donate">
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
</a>
基于 Vue + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.gitee.io/example/work/)
> React + Ant Design 的版本正在开发中,仓库地址:[react-manage-system](https://github.com/lin-xin/react-manage-system)
[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md)
## 项目截图
### 登录
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms3.png)
### 默认皮肤
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png)
### 浅绿色皮肤
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)
## 赞赏
请作者喝杯咖啡吧!(微信号:linxin_20)
![微信扫一扫](https://lin-xin.gitee.io/images/weixin.jpg)
## 特别鸣谢
- [实验楼](https://www.shiyanlou.com?source=vue-manage-system)
## 前言
该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于 vue.js,使用 vue-cli3 脚手架,引用 Element UI 组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。
## 功能
- [x] Element UI
- [x] 登录/注销
- [x] Dashboard
- [x] 表格
- [x] Tab 选项卡
- [x] 表单
- [x] 图表 :bar_chart:
- [x] 富文本编辑器
- [x] markdown 编辑器
- [x] 图片拖拽/裁剪上传
- [x] 支持切换主题色 :sparkles:
- [x] 列表拖拽排序
- [x] 权限测试
- [x] 404 / 403
- [x] 三级菜单
- [x] 自定义图标
- [x] 可拖拽弹窗
- [x] 国际化
## 安装步骤
```
git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地
cd vue-manage-system // 进入模板目录
npm install // 安装项目依赖,等待安装完成之后,安装失败可用 cnpm 或 yarn
// 开启服务器,浏览器访问 http://localhost:8080
npm run serve
// 执行构建命令,生成的dist文件夹放在服务器下即可访问
npm run build
```
## 组件使用说明与演示
### vue-schart
vue.js 封装 sChart.js 的图表组件。访问地址:[vue-schart](https://github.com/linxin/vue-schart)
<p><a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/dm/vue-schart.svg" alt="Downloads"></a></p>
```html
<template>
<div>
<schart class="wrapper" canvasId="myCanvas" :options="options"></schart>
</div>
</template>
<script>
import Schart from 'vue-schart'; // 导入Schart组件
export default {
data() {
return {
options: {
type: 'bar',
title: {
text: '最近一周各品类销售图'
},
labels: ['周一', '周二', '周三', '周四', '周五'],
datasets: [
{
label: '家电',
data: [234, 278, 270, 190, 230]
},
{
label: '百货',
data: [164, 178, 190, 135, 160]
},
{
label: '食品',
data: [144, 198, 150, 235, 120]
}
]
}
};
},
components: {
Schart
}
};
</script>
<style>
.wrapper {
width: 7rem;
height: 5rem;
}
</style>
```
## 其他注意事项
### 一、如果我不想用到上面的某些组件呢,那我怎么在模板中删除掉不影响到其他功能呢?
举个栗子,我不想用 Vue-Quill-Editor 这个组件,那我需要分四步走。
第一步:删除该组件的路由,在目录 src/router/index.js 中,找到引入改组件的路由,删除下面这段代码。
```JavaScript
{
// 富文本编辑器组件
path: '/editor',
component: resolve => require(['../components/page/VueEditor.vue'], resolve)
},
```
第二步:删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。
第三步:删除该页面的入口。在目录 src/components/common/Sidebar.vue 中,找到该入口,删除下面这段代码。
```js
{
index: 'editor',
title: '富文本编辑器'
},
```
第四步:卸载该组件。执行以下命令:
npm un vue-quill-editor -S
完成。
### 二、如何切换主题色呢?
第一步:打开 src/main.js 文件,找到引入 element 样式的地方,换成浅绿色主题。
```javascript
import 'element-ui/lib/theme-default/index.css'; // 默认主题
// import './assets/css/theme-green/index.css'; // 浅绿色主题
```
第二步:打开 src/App.vue 文件,找到 style 标签引入样式的地方,切换成浅绿色主题。
```javascript
@import "./assets/css/main.css";
@import "./assets/css/color-dark.css"; /*深色主题*/
/*@import "./assets/css/theme-green/color-green.css"; !*浅绿色主题*!*/
```
第三步:打开 src/components/common/Sidebar.vue 文件,找到 el-menu 标签,把 background-color/text-color/active-text-color 属性去掉即可。
## License
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)

@ -1,196 +0,0 @@
# vue-manage-system
<a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/ElemeFE/element">
<img src="https://img.shields.io/badge/element--ui-2.8.2-brightgreen.svg" alt="element-ui">
</a>
<a href="https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
</a>
<a href="https://github.com/lin-xin/vue-manage-system/releases">
<img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release">
</a>
<a href="https://lin-xin.gitee.io/example/work/#/donate">
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
</a>
The web management system solution based on Vue2 and Element-UI。[live demo](https://lin-xin.gitee.io/example/work/)
## Donation
![WeChat](https://lin-xin.gitee.io/images/weixin.jpg)
## Preface
The scheme as a set of multi-function background frame templates, suitable for most of the WEB management system development. Convenient development fast simple good components based on Vue2 and Element-UI. Color separation of color style, support manual switch themes, and it is convenient to use a custom theme color.
## Function
- [x] Element-UI
- [x] Login/Logout
- [x] Dashboard
- [x] Table
- [x] Tabs
- [x] From
- [x] Chart :bar_chart:
- [x] Editor
- [x] Markdown
- [x] Upload pictures by clipping or dragging
- [x] Support manual switch themes :sparkles:
- [x] List drag sort
- [x] Permission
- [x] 404 / 403
- [x] Three level menu
- [x] Custom icon
## Installation steps
git clone https://github.com/lin-xin/vue-manage-system.git // Clone templates
cd vue-manage-system // Enter template directory
npm install // Installation dependency
## Local development
// Open server and access http://localhost:8080 in browser
npm run serve
## Constructing production
// Constructing project
npm run build
## Component description and presentation
### vue-schart
Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vue-schart)
```html
<template>
<div>
<schart class="wrapper" canvasId="myCanvas" :options="options"></schart>
</div>
</template>
<script>
import Schart from 'vue-schart'; // 导入Schart组件
export default {
data() {
return {
options: {
type: 'bar',
title: {
text: '最近一周各品类销售图'
},
labels: ['周一', '周二', '周三', '周四', '周五'],
datasets: [
{
label: '家电',
data: [234, 278, 270, 190, 230]
},
{
label: '百货',
data: [164, 178, 190, 135, 160]
},
{
label: '食品',
data: [144, 198, 150, 235, 120]
}
]
}
};
},
components: {
Schart
}
};
</script>
<style>
.wrapper {
width: 7rem;
height: 5rem;
}
</style>
```
### element-ui
A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout)
### Vue-Quill-Editor
Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
### mavonEditor
A markdown editor based on Vue that supports a variety of personalized features. Github: [mavonEditor](https://github.com/hinesboy/mavonEditor)
### vue-cropperjs
A Vue wrapper component for cropperjs. Github: [vue-cropperjs](https://github.com/Agontuk/vue-cropperjs)
## Notice
### 一、If I don't want to use some components, how can I delete it?
For example, I don't want to use the Vue-Quill-Editor component, I need to take four steps.
The first step to remove the component of the routing. Enter 'src/router/index.js' and delete the code below.
```JavaScript
{
path: '/editor',
component: resolve => require(['../components/page/VueEditor.vue'], resolve)
},
```
Second,delete the component files. Enter 'src/components/page/' and delete 'VueEditor.vue' file.
The third step is to delete the entry. Enter 'src/components/common/Sidebar.vue' and delete the code below.
```js
{
index: 'editor',
title: '富文本编辑器'
},
```
Finally, uninstall this component.
npm un vue-quill-editor -S
Complete!
### 二、How to switch themes?
The first step to enter 'src/main.js' and change into green theme.
```javascript
import 'element-ui/lib/theme-default/index.css'; // default theme
// import '../static/css/theme-green/index.css'; // green theme
```
The second step to enter 'src/App.vue' and change into green theme.
```javascript
@import "../static/css/main.css";
@import "../static/css/color-dark.css"; /*深色主题*/
/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/
```
Finally,enter 'src/components/common/Sidebar.vue' and find el-menu Tags,delete 'background-color/text-color/active-text-color'。
## Screenshot
### Default theme
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png)
### Green theme
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)
## License
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 112 KiB

@ -22,14 +22,3 @@
}
}
</script>
<style>
#app{
}
@import "./assets/css/main.css";
/* @import "./assets/css/color-dark.css"; */
/*深色主题*/
@import "./assets/css/theme-green/color-green.css";
/* 浅绿色主题 */
</style>

@ -1,38 +1,30 @@
import Setting from '@/setting';
let host = Setting.apiBaseURL
let loginhost = 'http://www.liuwanr.cn/liuwanr'
// let host = 'http://192.168.31.117'//宁本地
export default {
host,
logins: `${host}/management/userInfo/login`, //登录 
save: `${host}/management/userInfo/add`, //注册
logins: `management/userInfo/login`, //登录 
save: `management/userInfo/add`, //注册
queryPhone: `${loginhost}/userInfo/queryPhone`, //查询电话是否存在
//查询电话是否存在
queryPhone: `${loginhost}/userInfo/queryPhone`,
queryProvince: `${host}/enterprise/province/queryProvince`,
queryCity: `${host}/enterprise/city/queryCity`,
queryClient: `${host}/enterprise/client/list`,
queryProvince: `enterprise/province/queryProvince`,
queryCity: `enterprise/city/queryCity`,
queryClient: `enterprise/client/list`,
userinfoUpdate:`${host}/management/userInfo/update`,//个人中心信息修改
userinfo:`${host}/management/userInfo/getUserInfo`,//个人中心信息展示
getAccount:`${host}/management/userInfo/getAccount`,//账号判重
// 个人中心
userinfoUpdate:`management/userInfo/update`,
userinfo:`management/userInfo/getUserInfo`,
getAccount:`management/userInfo/getAccount`,
queryCourseByCondition: `${host}/management/edu/course/queryCourseByCondition`,
getCourse: `${host}/management/edu/course/getCourse`,
getPlayAuth: `${host}/oss/manage/getPlayAuth`,
queryContestByCondition: `${host}/enterprise/match/contest/queryContestByCondition`,
queryAllClassification: `${host}/management/edu/courseClassification/queryAllClassification`,
queryAllColumns: `${host}/enterprise/information/column/queryAllColumns`,
getArticle: `${host}/enterprise/information/article/getArticle`,
getArticles: `${host}/enterprise/information/article/getArticles`,
queryArticleByCondition: `${host}/enterprise/information/article/queryArticleByCondition`,
onlineContestQuery: `${host}/enterprise/match/onlineContest/onlineContestQuery`,
getContest: `${host}/enterprise/match/contest/getContest`,
addApplicant: `${host}/enterprise/match/applicant/addApplicant`,
getContestProgress: `${host}/enterprise/match/contest-progress/getContestProgress`,
// 成绩管理
getMyAchievement: `user/testPaperRecord/getMyAchievement`,
answerDetail:`management/paperRecord/answerDetail`,
queryChaptersAndSubsections: `${host}/management/edu/courseChapter/queryChaptersAndSubsections`,
getSubsection: `${host}/management/edu/courseSubsection/getSubsection`, //根据小节id获取预览文件地址
// 我的考试
addGzAnswerDetails: `/user/exam/addGzAnswerDetails`,
addTestPaperRecord: `/user/exam/addTestPaperRecord`,
calculationScore: `/user/exam/calculationScore`,
enterExam: `/user/exam/enterExam`,
queryExam: `/user/exam/queryExam`,
queryGzAnswerDetails: `/user/exam/queryGzAnswerDetails`,
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

@ -1,28 +0,0 @@
.header{
background-color: #242f42;
}
.login-wrap{
background: #324157;
}
.plugins-tips{
background: #eef1f6;
}
.plugins-tips a{
color: #20a0ff;
}
.el-upload--text em {
color: #20a0ff;
}
.pure-button{
background: #20a0ff;
}
.tags-li.active {
border: 1px solid #cb221c;
background-color: #cb221c;
}
.message-title{
color: #20a0ff;
}
.collapse-btn:hover{
background: rgb(40,52,70);
}

@ -1,237 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe65f;</span>
<div class="name">徽章,会员</div>
<div class="code-name">&amp;#xe65f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe798;</span>
<div class="name">皇冠</div>
<div class="code-name">&amp;#xe798;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63a;</span>
<div class="name">学历</div>
<div class="code-name">&amp;#xe63a;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
<ul>
<li>兼容性最好,支持 IE6+,及所有现代浏览器。</li>
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
<li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li>
</ul>
<blockquote>
<p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p>
</blockquote>
<p>Unicode 使用步骤如下:</p>
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-huizhanghuiyuan"></span>
<div class="name">
徽章,会员
</div>
<div class="code-name">.icon-huizhanghuiyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-huangguan"></span>
<div class="name">
皇冠
</div>
<div class="code-name">.icon-huangguan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-edu-line"></span>
<div class="name">
学历
</div>
<div class="code-name">.icon-edu-line
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
<p>与 Unicode 使用方式相比,具有如下特点:</p>
<ul>
<li>兼容性良好,支持 IE8+,及所有现代浏览器。</li>
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
<li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-huizhanghuiyuan"></use>
</svg>
<div class="name">徽章,会员</div>
<div class="code-name">#icon-huizhanghuiyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-huangguan"></use>
</svg>
<div class="name">皇冠</div>
<div class="code-name">#icon-huangguan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-edu-line"></use>
</svg>
<div class="name">学历</div>
<div class="code-name">#icon-edu-line</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
<ul>
<li>支持多色图标了,不再受单色限制。</li>
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差,支持 IE9+,及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</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>

@ -1,29 +0,0 @@
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1591082516626'); /* IE9 */
src: url('iconfont.eot?t=1591082516626#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAX0AAsAAAAAC1AAAAWmAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqKBIdhATYCJAMQCwoABCAFhG0HUBtbCVGUTU6R7AtsG/YkwILRNATAFQSOxzAFQAJcADACgAcQQbVG9uzuIypQgAoVYPlXrxiFfAuYCBXhIlxidMqzjr6tNUsBjcr4sqwiVOgPsnvb41y25Ot0lXoh/4X7gTyt2ZKJUZNBaSe2g9D6YKR3TjYHo47Ej+ovTB3+kX5wLPUj8fEt79veJfI+E6NqFYCjAY+GFY0DDJO57yFe7TJPJtBoQEdpfXU4Q1OhmwLrrox2oJlwKxWsUG+rLdixiHc16tNDuow37/fjn6moJ6nJ9A03TpY+TH7uV5mu7m05BNrhgmB3I2MSKMRZYfhAJcBJz9xYVFo1B9Qb30n83E+/qipKtxVzPTHr+o+XiFq6uRmpM87swLSWJrJAOcGv3BJFLqvXox3EF+I3UPs+v1GWP29n5+g0YaSbo7+LpSXoYQWOv3tXc++e9s4d9e3bhtO3vbruZJ2759t9V8UIJgwTRZ6HYY7m1MxVQkiUIU0HbFmeeyBUJjCwH8dsRAmh38av9yhJmppRWX83SYomlGjukcvFFsB7iGMUxQ5gZMsmFqF4FpOL7AZEyvfZygeO4DjdhFB9XbAQRyPSpk4/P65RAlsdtjEBsB/TC+PcoIalOgTIlkPoFMW+cFufKPaNpjFQGIuwdSGTgPr1HiQIgYO9xRmZTBBgvHG/zIbhesLNPSLXM9IjID8SYUsbzdvK2QNS6ULWHtAxaLGK24hpxQGkaDtM3ICrOJjTsEictp/YWlClFLc7n4AahBZsYA8yI9XxLNDHI3peQnM2gLmWRsVp1FoRUWu45R+eQWcbdJqhjsN1Dga1Ua+dYi+xWzxKgEdsOKCW8BbyE2+NAVozmmdFzFwumnQqDVCwqWrU6JEf5mRLhgGygZxhw2wjwKhwg+xhw3OiukqKbW1KSjq3Ww4b2+hi3BqL+fZgIMh360HczGZ++SQfxTEwr4eD50/G8/+c3fy0l66/ydnoaPI3dbOmQUFYjbiutYWsukfHVd1+v0OJKHa+u1MZP7rLGrLVXC+1JhQN9A3qFzkanU3+om40Poh115i4yjvvdioQ5Y73t6viRndbwdfLdpPwKbXGlHU1N/TlboWkNxRdv/d+bXmaH2hhtdUYFwG67jytOLPDFYyMM26xsjD3TS2tfbinITrViyxUFgY5pUY37HlUi0I+IGS1xRjPSu44ozi909X8+lutINAXKiUe7K2PhpyDClM9ref8z4dfjfEI+R285IwXQI6iGPVulxd1I/ROWslU6zGTsRXC/RmfJ9xz16XwC+uhtDuhoQCxs8s38/3CXqYUjP3tfQmPRMxAu392wsGFXmPz58L/PXcUKgdOGXGfEyNH0hsqpn5JxFoxx0j+Prrm3242z/0QHzzzXKNJikpn4aD/p+NOS5Sfvsk5jrMerB/rW1N40q7vzZSVK59N6bM7mRegtDrkvMmyOKEPO0heGn9jfMvpqRwHRVcz8w/k7yC308EdQJWXK2cA5M/pIeSndOqnX8nO15fv2ub/1zd99Fk/7gl7karopvlztY21v7i24aSi6HVPKZLB0qjsEseg+1fMjZH+xy7Q6W8Ia09j7U9u7YkgqdMPWb1BYqFOQo0mM1Cr3hI0mrDevUkXVhGlAeM+AKHdF5JW3yBr90Ms1F+o0esfarVHhkab0XXAJsNx3l5jcoR8dF9ovDRRpk/afv2RtI0cjus9zpW4MHEc9gbp/JoS4iE2Ke56JKJQcRrjCk5HUZRixumNPOkFItm431dFz9Tz0hja1jDiEMSHXC/I8KQSyplZtDM/f0Q0K+LgimFlxSvCCmbuaKhn0IC4NieNhl1Ka+FOGxESVNDqZakYWpEgiYxMCmXFy90Qj+gJOqQyY30ynWpq7k1vje+w1U0cQT9MiRQ5StRoO7PmHTiJ9hgv62yd2Uytl2oe+7YbmYQAAAAA') format('woff2'),
url('iconfont.woff?t=1591082516626') format('woff'),
url('iconfont.ttf?t=1591082516626') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1591082516626#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-huizhanghuiyuan:before {
content: "\e65f";
}
.icon-huangguan:before {
content: "\e798";
}
.icon-edu-line:before {
content: "\e63a";
}

File diff suppressed because one or more lines are too long

@ -1,30 +0,0 @@
{
"id": "",
"name": "",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "444400",
"name": "徽章,会员",
"font_class": "huizhanghuiyuan",
"unicode": "e65f",
"unicode_decimal": 58975
},
{
"icon_id": "4294111",
"name": "皇冠",
"font_class": "huangguan",
"unicode": "e798",
"unicode_decimal": 59288
},
{
"icon_id": "6119296",
"name": "学历",
"font_class": "edu-line",
"unicode": "e63a",
"unicode_decimal": 58938
}
]
}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 11 KiB

@ -1,539 +0,0 @@
/* 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;
}

@ -1,283 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe65f;</span>
<div class="name">徽章,会员</div>
<div class="code-name">&amp;#xe65f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe663;</span>
<div class="name">学士帽</div>
<div class="code-name">&amp;#xe663;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe763;</span>
<div class="name">学习</div>
<div class="code-name">&amp;#xe763;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe798;</span>
<div class="name">皇冠</div>
<div class="code-name">&amp;#xe798;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63a;</span>
<div class="name">学历</div>
<div class="code-name">&amp;#xe63a;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
<ul>
<li>兼容性最好,支持 IE6+,及所有现代浏览器。</li>
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
<li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li>
</ul>
<blockquote>
<p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p>
</blockquote>
<p>Unicode 使用步骤如下:</p>
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-huizhanghuiyuan"></span>
<div class="name">
徽章,会员
</div>
<div class="code-name">.icon-huizhanghuiyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xueshimao"></span>
<div class="name">
学士帽
</div>
<div class="code-name">.icon-xueshimao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xuexi"></span>
<div class="name">
学习
</div>
<div class="code-name">.icon-xuexi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-huangguan"></span>
<div class="name">
皇冠
</div>
<div class="code-name">.icon-huangguan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-edu-line"></span>
<div class="name">
学历
</div>
<div class="code-name">.icon-edu-line
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
<p>与 Unicode 使用方式相比,具有如下特点:</p>
<ul>
<li>兼容性良好,支持 IE8+,及所有现代浏览器。</li>
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
<li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-huizhanghuiyuan"></use>
</svg>
<div class="name">徽章,会员</div>
<div class="code-name">#icon-huizhanghuiyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xueshimao"></use>
</svg>
<div class="name">学士帽</div>
<div class="code-name">#icon-xueshimao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xuexi"></use>
</svg>
<div class="name">学习</div>
<div class="code-name">#icon-xuexi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-huangguan"></use>
</svg>
<div class="name">皇冠</div>
<div class="code-name">#icon-huangguan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-edu-line"></use>
</svg>
<div class="name">学历</div>
<div class="code-name">#icon-edu-line</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
<ul>
<li>支持多色图标了,不再受单色限制。</li>
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差,支持 IE9+,及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</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>

@ -1,37 +0,0 @@
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1591084244863'); /* IE9 */
src: url('iconfont.eot?t=1591084244863#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAeMAAsAAAAADawAAAc9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDSAqOFIsDATYCJAMYCw4ABCAFhG0HZBtFC6OilG9GyP4ScrLhRTQ2aDQltCjJTeU1/zFQAlz7CgDgIwAYIwUAwN7bXVzhBAAADAES1wMQSLSGZWb3jgusWgUoKxlVbRWQJrAEwrRKEUtAja8JrqZt/2lNmLYUmS5f0Zoq1d0ne5f71Nns0TzCYixKYXGPcDCApyZdUg8ppgxgOwAZIL/die6EGiDAzHxU99cYJr/BubL5d+2PAwVLAzu281Np+wR2DI1tLLW9B0Zhpg6M3NGYqxORqjeDtl5ED1UNjUQmkoj/mEhjoUIspM4inkkvzcrMnw4BQnJ4evXHlzcwi4WLEewwao2CWVsqNkQp+Amuz64W2QDG10W9BlhXf1++kOSD4hi4Tbt3lMHun79lFv4vCJUZ+LPLBq40MEApwF7jZ3yTxmCsvNUThORJWgExPorFqldeR974BYr//7GFUC/EvcFBUEwB/zwXLjZGbnuM04F+0WfGgckIxonRUHgzGYNxYWAaJboZVmcBbWNpJ3CSUrFhx0eIwcRxUvKgWl0pTN1ZttWTpdbzbI5vB36ad/et+9vG7U396biOu0dnrW1a002aK0aI1lJCKDIR5//cflsLVB5ZXN4eCYcqh77Il7Gr5k1/9tzzWIXD+WnP0wy71UwU6RpQH+MiCPgC8WorHAWSk0jzJeTIOStaOLPtrETB3BSQRIacctL3RWHAdqcmA9DPZ6EtFhMeJMjyaieYrHVauJEm6rSR5YEqL8Y6iSnszx67rhJQpedhqBS0i8PQzEVKuJoiipQxywFlToy1Hpm0In7kOBVZf6Ezxy+pWCapXkB+OxG9ZFMBRcLRs3TebVo2faKbu5TC3apGFvZQiTzdQ5iTqEsamTCBsF5CRRKnGsWJqP4X5vjn8Lw/OGvDtnKJrwAQC8PI0BW/f6EBYDjVtVrVyYyiTpt3LhhLkibDI0M/hzu32+DsYraE5Fx3+/XjIrEIabFkWXzFTdSyWS3PK6YX0iRBI23cpwCndgpb/pZa8Vtx+LAR3UUpLaLJwYPsMT+vetSw+BOtKwV3zfyKOUkHL0f42N2Z9N0Y6LzeHfd0pa+uGXEFkuHg0JTEhkSV2lkTkLZlkmvSHmnWSZOqMin1v/tyHYD+CNABdAwPl8LgxYNhBxfJUX/K04NC9vSc3CYmkSnmX9dbjy/gh9SgvukgSBRHLvBOlmMdgpxnehkFKaL4AmqB9WP6bzRHOAb9rXi5o4clToy8GECBidMxxm1XX3LYTBb3xbVWk5gpEkzxv4iRxFk9lZcUf6ExwjnoL8VL5MOQpmKNW6+94LKYbM7Lq23GMdNEiDwHCYAcRhJhd3VcCvKWcENlYYPunTc7va0VIDxxPcRYF6JzeawtDh3SMw5ZI+L55K2wzts7egysZFA3tpu6kJVBz447ncKwHAQT10JMro6cLRaPS+e7+ToRhuRhTPzWzm4DGFF3s5Im5f53YTyJldL8rVG6JQN6H4cV/WJTRvGS1jVrzzRSbIpIdf/NEl9ER3rzjM6pJtj6mpYWKM6dkrd7WbHXwSCj37JnRPWYOIj6LxZBRTJxLnmM/9IcN/bCsRBRuSNRUZUN+kaKv4DyaJD7WFWV89iECRsAk49HfsepOpLPpZ5BJrU3J7SRM7RzZPao1cxl4uZPCgCVrhwJRoAZylHcE9izb6fYdQBrxLbxXYEKG4E9PJ44T/o0goUC9caiRAApQNNRzal/N+OhrRQ5AGmlm9FbEXKAdIwQzVAigRyv6cQAXWQIcxT/Fzq+OD/cZVOy/yKxwZRgoWRhEjVA9lcSDtld09wvduxyVZvOIlHn8ZWzR4Q0+5Qew1UlkTNtqKeiXOUqcroSJ58Otqi9dHqduB3d/vWVgN7uCrh5AzDQOeBY9ftgnco465r3wUQj68RglRi6ZbL6f54xD2B/+iYnenvFR5sXmat3O0qde5ZaU/MgdY56tEWVTdyHrBA8TOdE9qJnEi4ljPDSenuhyXk7lz0uHHayMEoB8P/D7E4MAoB50X9V/Usf1dv6lL+sR/v2auyM5z97V8q/+tGGPO/p4IaV/v+wkE2djwLZvyf7iVPsJ8ih+50V0Ucyu9IH87UKhOaQ/bcw1W9W8Rlk/19FfIYJikc2GHxymZZbCg4RZeDiUwUhJU72jkjDJhAbAMU+AIRkX6AksgeGZN9Myx2DQ6Y/cEnOQEhPaYeMyG9ovo5JCWU4fEObNrUWMmRe63hFxpWKrUHVcEfc2QqMg8jZcEI1cRZbdM8mEdGouanwGM5GZdlgy82IUglykXYQhtpvyyBtKpinDiOKyI4ZNPTmaqUaNT23mHf9/BViOCWFQ0Z8u94hrGMXj2KBiMA8ia1JI1ale+eZkRCWraFYzRqVHn98yiYlX9tArf9KIyQlAnmC6tZAyGbS1Nig+PhqLMczEkfhjuqKihErjrjikTTo7HuuaqMK3hxtbsJRl9tKNVN68audG/RINkZabrYvc35pawIAAAAA') format('woff2'),
url('iconfont.woff?t=1591084244863') format('woff'),
url('iconfont.ttf?t=1591084244863') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1591084244863#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-huizhanghuiyuan:before {
content: "\e65f";
}
.icon-xueshimao:before {
content: "\e663";
}
.icon-xuexi:before {
content: "\e763";
}
.icon-huangguan:before {
content: "\e798";
}
.icon-edu-line:before {
content: "\e63a";
}

File diff suppressed because one or more lines are too long

@ -1,44 +0,0 @@
{
"id": "",
"name": "",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "444400",
"name": "徽章,会员",
"font_class": "huizhanghuiyuan",
"unicode": "e65f",
"unicode_decimal": 58975
},
{
"icon_id": "1495449",
"name": "学士帽",
"font_class": "xueshimao",
"unicode": "e663",
"unicode_decimal": 58979
},
{
"icon_id": "4292658",
"name": "学习",
"font_class": "xuexi",
"unicode": "e763",
"unicode_decimal": 59235
},
{
"icon_id": "4294111",
"name": "皇冠",
"font_class": "huangguan",
"unicode": "e798",
"unicode_decimal": 59288
},
{
"icon_id": "6119296",
"name": "学历",
"font_class": "edu-line",
"unicode": "e63a",
"unicode_decimal": 58938
}
]
}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 15 KiB

@ -1,4 +0,0 @@
[class*=" icon-"], [class^=icon-] {
font-family: iconfont!important;
}

@ -1,403 +0,0 @@
* {
margin: 0;
padding: 0;
}
html,
body,
#app,
.wrapper {
width: 100%;
height: 100%;
}
body {
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
background-color: #f0f0f0;
}
a {
text-decoration: none
}
i{
font-style: normal;
}
li {
list-style-type:none;
}
.pd20{
padding: 20px;
}
.per_title span{
font-size: 16px;
font-weight: bold;
}
.per_back{
margin-left: 5px;
}
.per_school{
margin-left: 30px;
}
.per_title:hover{
cursor:pointer;
}
.content-box {
padding-bottom: 0;
-webkit-transition: left .3s ease-in-out;
transition: left .3s ease-in-out;
}
.content {
width: auto;
height: 100%;
box-sizing: border-box;
}
.content-collapse {
left: 65px;
}
.container {
padding: 30px;
background: #f0f0f0;
border: 1px solid #ddd;
border-radius: 5px;
}
.crumbs {
margin: 10px 0;
}
.el-table th {
background-color: #cb221c !important;
}
.pagination {
margin: 20px 0;
text-align: right;
}
.plugins-tips {
padding: 20px 10px;
margin-bottom: 20px;
}
.el-button+.el-tooltip {
margin-left: 10px;
}
.el-table tr:hover {
background: #f6faff;
}
.el-row {
margin-bottom: 20px;
}
.mgb20 {
margin-bottom: 20px;
}
.mar20{
margin-right: 20px;
}
#app .el-table thead{
color: #fff;
}
#app .el-table th{
background-color: #cb221c!important;
font-size: 16px;
font-weight: normal;
}
#app .el-select{
display: unset;
}
.move-enter-active,
.move-leave-active {
transition: opacity .5s;
}
.move-enter,
.move-leave {
opacity: 0;
}
/*BaseForm*/
.form-box {
width: 600px;
}
.form-box .line {
text-align: center;
}
.el-time-panel__content::after,
.el-time-panel__content::before {
margin-top: -7px;
}
.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
padding-bottom: 0;
}
/*Upload*/
.pure-button {
width: 150px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
border-radius: 3px;
}
.g-core-image-corp-container .info-aside {
height: 45px;
}
/* .el-upload--text {
background-color: #fff;
border: 1px dashed #d9d9d9;
border-radius: 6px;
box-sizing: border-box;
width: 360px;
height: 180px;
text-align: center;
cursor: pointer;
position: relative;
overflow: hidden;
}
.el-upload--text .el-icon-upload {
font-size: 67px;
color: #97a8be;
margin: 40px 0 16px;
line-height: 50px;
}
.el-upload--text {
color: #97a8be;
font-size: 14px;
text-align: center;
}
.el-upload--text em {
font-style: normal
} */
/*VueEditor*/
.ql-container {
min-height: 400px;
}
.ql-snow .ql-tooltip {
transform: translateX(117.5px) translateY(10px) !important;
}
.editor-btn {
margin-top: 20px;
}
#app .ml10{
margin-left: 10px;
}
#app .mr10{
margin-right: 10px;
}
/*markdown*/
.v-note-wrapper .v-note-panel {
min-height: 500px;
}
.ms-login .el-tabs__nav-wrap::after{
background-color: #fff;
opacity: 0;
}
.ms-login .el-tabs__item{
padding: 0 90px;
color: #999;
}
.ms-login .el-tabs__item:hover{
color: #000;
}
.ms-login .el-tabs__item.is-active{
color: #333;
font-weight: bold;
}
.ms-login .el-tabs__active-bar{
background-color: #000;
border-radius:2px;
}
.ms-login .el-tabs__nav-scroll{
display: flex;
justify-content: center;
}
.ms-login .el-input__inner{
height: 80px;
line-height: 80px;
border:1px solid rgba(220,220,220,1);
border-radius:2px;
}
.header_tab{
box-shadow:0px 0px 25px 2px rgba(255,45,45,0.14);
}
.header_tab .el-tabs__nav-wrap::after{
background-color: #fff;
}
.header_tab .el-tabs__header{
padding: 20px 60px 0;
margin: 0;
z-index: 999;
background-color: #fff;
}
.header_tab .el-tabs__item{
padding: 0 30px;
font-size: 15px;
}
/*flex*/
.flex-center{
display: flex;
align-items: center;
}
.flex-end{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.flex-start{
display: flex;
align-items: flex-start;
}
.flex-between{
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-around{
display: flex;
align-items: center;
justify-content: space-around;
}
.flex-start-around{
display: flex;
align-items: flex-start;
justify-content: center;
}
.flex-end-content{
display: flex;
align-items: center;
justify-content: flex-end;
}
/* .teacher_tab .el-checkbox__inner{
border-radius: 50%;
} */
#app .el-dialog{
border-radius: 17px;
}
/* #app .el-form-item__label{
font-size: 40px;
} */
.el-dialog .el-input__inner{
height: 50px;
line-height: 50px;
}
/* card倒角 */
#app .el-card, .el-message{
border-radius: 10px;
}
/* 输入框圆角 */
#app .el-input--suffix .el-input__inner{
border-radius: 18px;
}
/* 输入框圆角 */
#app .dialog .el-input--suffix .el-input__inner{
border-radius: 0;
}
/* 单选 */
#app .el-radio__label{
font-size: 16px!important;
}
#app .ml20{
margin-left: 20px;
}
/* 消除数字input箭头 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}
.class_name .el-form-item__content{
margin-left: 0!important;
}
.ft{
font-size: 24px;
}
.class_detail .el-row{
margin-left: 20px!important;
margin-right: 20px!important;
}
.hvCenter{
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.hr_tag{
background-color: #cb221c;
width: 3px;
height: 15px;
margin-right: 5px;
}
.userRadio .el-radio{
margin-right: 10px!important;
}
.userRadio .el-radio__input{
display: none!important;
}
.box{
margin: 20px;
}
.tabs{
display: flex;
align-items: center;
padding: 20px 1.5% 20px;
margin-bottom: 20px;
z-index: 999;
background-color: #fff;
}
.tabs .item{
padding: 12px 20px;
margin-right: 10px;
color:#606266;
line-height: 1;
border-radius: 4px;
background-color: #fff;
border: 1px solid #dcdfe6;
cursor: pointer;
}
.tabs .active{
color: #fff;
background-color: #cb221c;
border-color: #cb221c;
}
[v-cloak] {
display: none;
}

@ -1,29 +0,0 @@
.header{
background-color: #fff;
}
.login-wrap{
background: rgba(56, 157, 170, 0.82);;
}
.plugins-tips{
background: #f2f2f2;
}
.plugins-tips a{
color: #cb221c;
}
.el-upload--text em {
color: #cb221c;
}
.pure-button{
background: #cb221c;
}
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
background-color: #cb221c !important;
border-color: #cb221c !important;
}
.tags-li.active {
border: 1px solid #cb221c;
background-color: #cb221c;
}
.collapse-btn:hover{
background: #cb221c;
}

File diff suppressed because one or more lines are too long

@ -1,539 +0,0 @@
/* 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;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 384 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 709 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 632 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 918 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 499 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 683 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 556 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 227 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 539 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 323 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 422 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 648 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 673 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 538 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 722 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

@ -1,5 +1,5 @@
<template>
<div class="header flex-between">
<div class="header flex j-between">
<div v-if="showBack" class="goBack" v-throttle @click="back"><i class="el-icon-arrow-left"></i>返回</div>
<div v-else class="logo">
<img src="../../assets/img/logo-fill.png">

@ -2,14 +2,10 @@ import Vue from 'vue';
import App from '@/App.vue';
import router from '@/router';
import ElementUI from 'element-ui';
import '@/styles/index.scss'
import VueI18n from 'vue-i18n';
import mixinApp from '@/mixins/app';
import { messages } from '@/i18n';
// import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
import './assets/css/theme-green/index.css'; // 浅绿色主题
import './assets/css/icon.css';
import './assets/icon/iconfont.css';
import './assets/css/font_iiho0e2wbc/iconfont.css'
import 'babel-polyfill';
import '@/libs/resize';
import {post,get,del,put} from '@/plugins/requests/index.js';

@ -11,7 +11,7 @@
<div class="left">
<div class="text">
<p>欢迎进入</p>
<p>电子竞技<br>数字化考试系统</p>
<p>电子竞技<br>数字化考试系统<br><span>学生用户端</span></p>
</div>
</div>
<div class="right">
@ -33,7 +33,7 @@
</el-input>
</el-form-item>
<el-button class="submit" type="primary" @click="submitForm">登录</el-button>
<!-- <div class="links flex-between">
<!-- <div class="links flex j-between">
<el-button type="text" class="ques" @click="toReg">前往注册</el-button>
<el-button type="text" class="forget">忘记密码</el-button>
</div> -->
@ -173,6 +173,9 @@ export default {
p:first-child{
margin-bottom: 30px;
}
span{
font-size: 36px;
}
}
}
.right{

@ -0,0 +1,262 @@
<template>
<div class="box">
<h1 class="title">{{paperName }}</h1>
<div class="metas">
<div style="margin-right: 20px;">
<span class="name">总分</span>
<span class="val">100</span>
</div>
<div>
<span class="name">考试时长</span>
<span class="val">{{time}}分钟</span>
</div>
</div>
<ul class="tab">
<li v-for="(item,index) in tabs" :key="index" :class="{active: active == item.id}" @click="tabChange(item.id)">{{item.name}}</li>
</ul>
<div class="wrap">
<div class="item" v-for="(item,index) in curType" :key="index">
<div class="answer">
<div class="info">
<p class="key">序号</p>
<p class="val">{{index+1}}</p>
</div>
<div class="info">
<p class="key">得分</p>
<p class="val">{{item.question_score}}</p>
</div>
</div>
<div class="meta">
<p class="key">题干</p>
<p class="val" v-html="item.question_stem"></p>
</div>
<div class="meta">
<p class="key">选项</p>
<div class="val">
<p v-for="(option,i) in item.options" :key="i">{{i}}.{{item.options[i]}}</p>
</div>
</div>
<div class="meta ans">
<div class="info">
<p class="key">正确答案</p>
<p class="val">{{item.answer}}</p>
</div>
<div class="info">
<p class="key">学生答案</p>
<p class="val">{{item.user_answer}}</p>
</div>
</div>
<div class="meta">
<p class="key">答案解析</p>
<p class="val" v-html="item.answer_analysis"></p>
</div>
</div>
</div>
</div>
</template>
<script>
import mixins from '@/mixins/setBackground'
import { mapState } from 'vuex'
export default {
mixins: [ mixins ],
data() {
return {
paperName: '',
time: 0,
selectVisible: false,
tabs: [
{
id: 1,
name: '单选题'
},{
id: 2,
name: '多选题'
},{
id: 3,
name: '填空题'
},{
id: 4,
name: '判断题'
},{
id: 5,
name: '简答题'
}
],
active: 1,
curType: []
};
},
computed: {
...mapState('user', [
'userId'
]),
...mapState('achievement', [
'id','assessmentId'
])
},
mounted() {
this.getData()
},
methods: {
getData() {
this.$post(`${this.api.answerDetail}?userId=${this.userId}&assessmentId=${this.assessmentId}&paperId=${this.id}`)
.then(res => {
this.paperName = res.paperName
this.time = res.time
this.allData = res.data
this.curType = this.allData.list1
this.handleOptions()
})
.catch(err => {});
},
tabChange(id){
this.active = id
this.curType = this.allData[`list${id}`]
this.handleOptions()
},
handleOptions(){
let curType = this.curType
curType.forEach(n => {
if(!n.options){
let options = {}
for(let i in n){
if(i.includes('option') && n[i]){
console.log(i.replace('option_',''))
options[i.replace('option_','')] = n[i]
}
}
n.options = options
}
})
this.curType = curType
}
},
};
</script>
<style lang="scss" scoped>
.box{
width: 90%;
margin: 0 auto;
}
.title{
text-align: center;
font-size: 18px;
font-weight: 600;
}
.metas{
display: flex;
justify-content: center;
margin: 20px 0 30px;
.name{
font-size: 12px;
color: #717171;
}
.val{
font-size: 12px;
color: #929292;
}
}
.tab{
display: flex;
align-items: center;
margin-bottom: 10px;
li{
position: relative;
padding: 0 44px;
margin-right: 7px;
font-size: 13px;
line-height: 46px;
text-align: center;
color: #444;
border: 1px solid #ececec;
cursor: pointer;
&:hover{
opacity: .8;
}
&.active:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #e80909;
}
}
}
.wrap{
.item{
padding-bottom: 30px;
margin-bottom: 30px;
border-bottom: 1px dashed #f4f4f4;
.key{
font-weight: bold;
color: #333;
font-size: 14px;
}
.val{
color: #757575;
font-size: 14px;
}
.answer{
display: flex;
align-items: center;
padding: 15px;
margin: 15px 0;
font-size: 12px;
border: 1px solid #e8e8e8;
background-color: #f3f2f2;
.info{
display: inline-flex;
align-items: center;
margin-right: 30px;
}
}
.meta{
padding-left: 10px;
margin: 20px 0;
font-size: 12px;
&.ans{
display: flex;
align-items: center;
.info{
margin-right: 20px;
}
}
.key{
margin-bottom: 5px;
}
}
}
}
.btns{
display: flex;
justify-content: center;
margin-top: 20px;
button{
height: 30px;
padding: 0 30px;
margin: 0 15px;
font-size: 14px;
color: #333;
line-height: 30px;
background-color: #fff;
border: 1px solid #ededed;
border-radius: 4px;
cursor: pointer;
&.submit{
color: #fff;
background-color: #e80909;
border-color: #e80909;
}
&:hover{
opacity: .8;
}
}
}
</style>

@ -1,13 +1,13 @@
<template>
<div>
<el-card shadow="hover" class="mgb20">
<el-card shadow="hover" class="m-b-20">
<div>
<div class="flex-center mgb20">
<div class="flex a-center m-b-20">
<p class="hr_tag"></p>
<span>筛选</span>
</div>
<div>
<div class="flex-end-content">
<div class="flex">
<div>
<el-input placeholder="请输入考核名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input>
</div>
@ -17,17 +17,17 @@
</el-card>
<el-card shadow="hover">
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id">
<el-table :data="listData" class="table" ref="table" stripe header-align="center" row-key="id">
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
<el-table-column type="index" width="100" label="序号" align="center">
<template slot-scope="scope">
{{scope.$index + (page - 1) * pageSize + 1}}
</template>
</el-table-column>
<el-table-column prop="name" label="考试名称" align="center"></el-table-column>
<el-table-column prop="gmtCreate" label="用时(分钟)" align="center"></el-table-column>
<el-table-column prop="founder" label="考试时间" align="center"></el-table-column>
<el-table-column prop="classification" label="得分" align="center"></el-table-column>
<el-table-column prop="assessmentName" label="考试名称" align="center"></el-table-column>
<el-table-column prop="timeSpent" label="用时(分钟)" align="center"></el-table-column>
<el-table-column prop="totalDuration" label="考试时间" align="center"></el-table-column>
<el-table-column prop="thisScore" label="得分" align="center"></el-table-column>
<el-table-column label="操作" align="center" width="180">
<template slot-scope="scope">
<el-button type="text" @click="show(scope.row)">查看详情</el-button>
@ -43,12 +43,11 @@
</template>
<script>
import { mapState,mapActions } from 'vuex'
export default {
data() {
return {
schoolId: this.$store.state.schoolId,
keyword: '',
classificationId: '',
listData: [],
multipleSelection: [],
page: 1,
@ -57,6 +56,11 @@ export default {
searchTimer: null
};
},
computed: {
...mapState('user', [
'userId'
])
},
watch: {
keyword: function(val) {
clearTimeout(this.searchTimer)
@ -69,39 +73,26 @@ export default {
this.getData()
},
methods: {
...mapActions('achievement', [
'setInfo'
]),
getData() {
let data = {
classificationId: this.classificationId,
name: this.keyword,
schoolId: this.schoolId
}
this.$get(`${this.api.queryCourseByCondition}/${this.page}/${this.pageSize}`,data).then(res => {
this.listData = res.data.courseList
this.total = res.data.total
}).catch(res => {});
},
handleDelete(row) {
this.$confirm('确定要删除吗?', '提示', {
type: 'warning'
})
.then(() => {
this.$del(`${this.api.deleteCourse}/${row.id}`).then(res => {
this.$message.success('删除成功');
this.getData()
this.$post(`${this.api.getMyAchievement}?userId=${1}&pageSize=${this.pageSize}&pageNum=${this.page}`).then(res => {
this.listData = res.data.list.list
this.total = res.data.list.totalCount
}).catch(res => {});
})
.catch(() => {});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleCurrentChange(val) {
this.page = val;
this.getData();
},
show(row){
}
this.setInfo({
id: row.paperId,
assessmentId: row.id
})
this.$router.push('detail')
},
}
};
</script>

@ -1,13 +1,13 @@
<template>
<div>
<el-card shadow="hover" class="mgb20">
<el-card shadow="hover" class="m-b-20">
<div>
<div class="flex-center mgb20">
<div class="flex a-center m-b-20">
<p class="hr_tag"></p>
<span>筛选</span>
</div>
<div>
<div class="flex-end-content">
<div class="flex">
<div>
<el-input placeholder="请输入练习/试卷名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input>
</div>

@ -0,0 +1,380 @@
<template>
<div class="box">
<div class="left">
<p class="title">答题卡</p>
<div class="item">
<p class="type">单选题</p>
<p class="total">共10题合计20分</p>
<div class="nums">
<span v-for="n in 10">{{n}}</span>
</div>
</div>
<div class="item">
<p class="type">多选题</p>
<p class="total">共10题合计20分</p>
<div class="nums">
<span v-for="n in 10">{{n}}</span>
</div>
</div>
<div class="item">
<p class="type">判断题</p>
<p class="total">共10题合计20分</p>
<div class="nums">
<span v-for="n in 5">{{n}}</span>
</div>
</div>
<div class="item">
<p class="type">填空题</p>
<p class="total">共10题合计20分</p>
<div class="nums">
<span v-for="n in 5">{{n}}</span>
</div>
</div>
<div class="item">
<p class="type">简答题</p>
<p class="total">共10题合计20分</p>
<div class="nums">
<span v-for="n in 5">{{n}}</span>
</div>
</div>
<div class="btn">
<el-button size="mini" type="primary" @click="save">提交考试</el-button>
</div>
</div>
<div class="middle">
<div class="ques">
<div class="item" v-for="(subject,k) in subjects" :key="k">
<p v-if="subjects[k].length" class="title">{{questionType[k]}}{{subjects[k].length}}合计20分</p>
<div class="ques-wrap" v-for="(item,index) in subject" :key="index">
<div class="name-wrap">
<span class="index">{{index+1}}.</span>
<div class="name" v-html="item.questionStem"></div>
</div>
<div class="options">
<template v-if="item.typeId == 1 || item.typeId == 3">
<div class="option" v-for="(option,i) in item.options" :key="i">
<el-radio v-model="item.val" :label="i">
{{i}}.{{item.options[i]}}
</el-radio>
</div>
</template>
<template v-if="item.typeId == 2">
<el-checkbox-group v-model="item.val">
<el-checkbox class="option-check" :label="i" v-for="(option,i) in item.options" :key="i">
{{i}}.{{item.options[i]}}
</el-checkbox>
</el-checkbox-group>
</template>
<template v-if="item.typeId == 4">
<el-input type="textarea" rows="5" v-model="item.val"></el-input>
</template>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<p class="title">剩余时间</p>
<p class="time" v-countdown>00:59:00</p>
<div class="ans">答题进度</div>
<el-progress :percentage="50"></el-progress>
</div>
</div>
</template>
<script>
import { mapState,mapGetters,mapActions } from 'vuex'
import mixins from '@/mixins/setBackground'
import util from '@/libs/util'
export default {
mixins: [ mixins ],
data() {
return {
subjects: [],
timer: null,
questionType: ['单选题','多选题','判断题','填空题','简答题'],
};
},
computed: {
...mapState('user', [
'userId'
]),
...mapState('exam', [
'testPaperId','assessmentId'
]),
},
directives: {
countdown: {
bind: function(el,binding,vnode) {
let that = vnode.context
let time = el.innerHTML
that.timer = setInterval(() => {
let timeList = time.split(':')
let total = Number.parseInt(timeList[0] * 60 * 60) + Number.parseInt(timeList[1] * 60) + Number.parseInt(timeList[2])
if(total > 0){
--total
let hours = Math.floor(total / (60 * 60))
let minutes = Math.floor(total % (60 * 60) / 60)
let seconds = Math.floor(total % (60 * 60) % 60)
time = `${util.formateTime(hours)}:${util.formateTime(minutes)}:${util.formateTime(seconds)}`
}else{
clearInterval(that.timer)
}
el.innerHTML = time
},1000)
}
}
},
mounted() {
this.getData()
this.getAnswer()
},
destroyed(){
// this.$get(`${this.api.queryGzAnswerDetails}?userId=${this.userId}&assessmentId=${this.assessmentId}&questionId=${1}`)
// .then(res => {
// })
// .catch(err => {});
},
methods: {
getData() {
this.$get(`${this.api.enterExam}?testPaperId=${this.testPaperId}`)
.then(res => {
let data = res.data
this.subjects = [
[...data.singleChoiceList],
[...data.multipleChoiceList],
[...data.trueOrFalseQuestionsList],
[...data.fillInTheBlanklist],
[...data.shortAnswerList],
]
this.handleOptions()
})
.catch(err => {});
},
getAnswer() {
this.$get(`${this.api.queryGzAnswerDetails}?userId=${this.userId}&assessmentId=${this.assessmentId}&questionId=${this.testPaperId}`)
.then(res => {
this.subjects.forEach(e => {
e.forEach(n => {
n.questionStatus = 0
})
})
console.log(33,this.subjects)
})
.catch(err => {})
},
handleOptions(){
let subjects = this.subjects
subjects.forEach(e => {
e.forEach(n => {
if(n.typeId == 2){
this.$set(n,'val',[])
}else if(n.typeId == 4){
}else{
this.$set(n,'val','')
}
if(!n.options){
let options = {}
for(let i in n){
if(i.includes('option') && n[i]){
options[i.replace('option','')] = n[i]
}
}
n.options = options
}
})
})
this.subjects = subjects
},
save(){
console.log(this.subjects)
let invalid = false
this.subjects.map(e => {
e.map(n => {
if(n.typeId == 2){
if(!n.val.length) invalid = true
}else{
if(n.val === '') invalid = true
}
})
})
if(invalid) return this.$message.warning('请先答完所有题目')
let data1 = []
this.subjects.map((e,i) => {
e.map(n => {
let userAnswer = ''
if(i == 1){
userAnswer = n.val.join('')
}else if(i == 3){
// userAnswer = n.val.join('&lt;&gt;')
}else{
userAnswer = n.val
}
data1.push({
assessmentId: this.assessmentId,
questionId: n.id,
questionStatus : n.questionStatus,
testPaperId: this.testPaperId,
userAnswer: userAnswer,
userId: this.userId,
})
})
})
this.$post(`${this.api.addGzAnswerDetails}`,data1)
.then(res => {
let data2 = {
assessmentId: this.assessmentId,
classId: this.classId,
paperId: this.testPaperId,
stuId: this.userId,
teacherId: this.teacherId,
timeSpent: 2,
totalDuration: 10,
totalScore: 100
}
this.$post(`${this.api.addTestPaperRecord}`,data2)
.then(res => {
this.$post(`${this.api.calculationScore}`,data1)
.then(res => {
})
.catch(err => {});
})
.catch(err => {});
})
.catch(err => {});
}
},
}
</script>
<style lang="scss" scoped>
$borderColor: #ececec;
.box{
display: flex;
justify-content: space-between;
width: 90%;
margin: 0 auto;
.left,.middle,.right{
border: 1px solid $borderColor;
}
.left,.right{
width: 160px;
padding: 10px;
margin-right: 10px;
box-sizing: border-box;
.title{
padding: 10px 0;
font-size: 14px;
color: #444;
text-align: center;
}
.item{
padding: 10px 0;
margin-bottom: 10px;
border-bottom: 1px solid $borderColor;
.type,.total{
color: #444;
font-size: 12px;
}
.total{
margin: 10px 0;
}
.nums{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
span{
width: 24px;
margin: 2px 0;
line-height: 24px;
text-align: center;
color: #888;
font-size: 10px;
box-sizing: border-box;
border: 1px solid #e6e6e6;
border-radius: 50%;
}
&.active{
color: #fff;
background-color: #e80909;
}
}
}
.btn{
margin: 20px 0;
text-align: center;
}
}
.middle{
flex: 1;
margin-right: 10px;
overflow: auto;
.title{
padding: 10px;
margin-bottom: 10px;
font-size: 14px;
color: #444;
border-bottom: 1px solid $borderColor;
}
.ques{
.ques-wrap{
padding: 0 15px;
margin: 10px 0 20px;
}
.item{
margin: 10px 0 20px;
&:first-child{
margin-top: 0;
}
.name-wrap{
display: flex;
align-items: flex-start;
margin-bottom: 10px;
font-size: 13px;
color: #444;
.index{
font-size: 13px;
color: #444;
}
}
.options{
margin-top: 10px;
font-size: 14px;
color: #8b8b8b;
.option{
margin: 5px 0;
&.selected{
font-weight: bold;
color: #555;
}
}
.option-check{
display: block;
margin-right: 6px;
}
/deep/.el-radio__label{
padding-left: 6px;
}
}
}
}
}
.right{
.time,.ans{
font-size: 14px;
color: #444;
text-align: center;
}
.ans{
margin: 20px 0 10px;
font-size: 15px;
}
}
}
</style>

@ -1,17 +1,18 @@
<template>
<div class="box">
<el-card shadow="hover" class="mgb20">
<el-card shadow="hover" class="m-b-20">
<div>
<div class="flex-center mgb20">
<div class="flex a-center m-b-20">
<p class="hr_tag"></p>
<span>筛选</span>
</div>
<div>
<div class="flex-between">
<div class="flex j-between">
<el-form label-width="80px">
<el-form-item class="no-mb" label="考试类型">
<el-select v-model="publishStatus" clearable placeholder="请选择考试类型" @change="getData">
<el-option v-for="(item,index) in statusList" :key="index" :label="item.name" :value="item.value"></el-option>
<el-select v-model="type" clearable placeholder="请选择考试类型" @change="getData">
<el-option label="不限" value=""></el-option>
<el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-form>
@ -24,25 +25,33 @@
</el-card>
<el-card shadow="hover">
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id">
<el-table :data="listData" class="table" ref="table" stripe header-align="center" row-key="id">
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
<el-table-column type="index" width="100" label="序号" align="center">
<template slot-scope="scope">
{{scope.$index + (page - 1) * pageSize + 1}}
</template>
</el-table-column>
<el-table-column prop="name" label="考核名称" align="center"></el-table-column>
<el-table-column prop="gmtCreate" label="所属课程" align="center"></el-table-column>
<el-table-column prop="assessmentName" label="考核名称" align="center"></el-table-column>
<el-table-column prop="courses" label="所属课程" align="center"></el-table-column>
<el-table-column prop="founder" label="知识点" align="center"></el-table-column>
<el-table-column prop="classification" label="难易程度" align="center"></el-table-column>
<el-table-column prop="classification" label="考生开始时间" align="center"></el-table-column>
<el-table-column prop="classification" label="考试结束时间" align="center"></el-table-column>
<el-table-column prop="classification" label="用时(分钟)" align="center"></el-table-column>
<el-table-column prop="classification" label="得分" align="center"></el-table-column>
<el-table-column prop="classification" label="考试状态" align="center"></el-table-column>
<el-table-column prop="name" label="难易程度" align="center">
<template slot-scope="scope">
{{getDegreeName(scope.row.degree)}}
</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 prop="timeCost" label="用时(分钟)" align="center"></el-table-column>
<el-table-column prop="score" label="得分" align="center"></el-table-column>
<el-table-column prop="state" label="考试状态" align="center">
<template slot-scope="scope">
{{getStateName(scope.row.state)}}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="180">
<template slot-scope="scope">
<el-button type="text" @click="practice(scope.row)">进入练习</el-button>
<el-button type="text" @click="toExam(scope.row)">进入考试</el-button>
<el-button type="text" @click="query(scope.row)">成绩查询</el-button>
</template>
</el-table-column>
@ -56,20 +65,31 @@
</template>
<script>
import { mapState,mapGetters,mapActions } from 'vuex'
export default {
data() {
return {
schoolId: this.$store.state.schoolId,
type: '',
assessmentName: '',
keyword: '',
classificationId: '',
listData: [],
multipleSelection: [],
page: 1,
pageSize: 10,
total: 0,
searchTimer: null
};
},
computed: {
...mapState('user', [
'userId'
]),
...mapState('exam', [
'typeList'
]),
...mapGetters('exam', [
'getDegreeName','getTypeName','getStateName'
])
},
watch: {
keyword: function(val) {
clearTimeout(this.searchTimer)
@ -82,38 +102,25 @@ export default {
this.getData()
},
methods: {
...mapActions('exam', [
'setInfo'
]),
getData() {
let data = {
classificationId: this.classificationId,
name: this.keyword,
schoolId: this.schoolId
}
this.$get(`${this.api.queryCourseByCondition}/${this.page}/${this.pageSize}`,data).then(res => {
this.listData = res.data.courseList
this.$get(`${this.api.queryExam}?type=${this.type}&assessmentName=${this.keyword}&userId=${1}`).then(res => {
this.listData = res.data.Assessment
this.total = res.data.total
}).catch(res => {});
},
handleDelete(row) {
this.$confirm('确定要删除吗?', '提示', {
type: 'warning'
})
.then(() => {
this.$del(`${this.api.deleteCourse}/${row.id}`).then(res => {
this.$message.success('删除成功');
this.getData()
}).catch(res => {});
})
.catch(() => {});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleCurrentChange(val) {
this.page = val;
this.getData();
},
practice(row){
toExam(row){
this.setInfo({
testPaperId: row.testPaperId,
assessmentId: row.assessmentId,
})
this.$router.push('do')
},
query(row){

@ -1,13 +1,13 @@
<template>
<div>
<el-card shadow="hover" class="mgb20">
<el-card shadow="hover" class="m-b-20">
<div>
<div class="flex-center mgb20">
<div class="flex a-center m-b-20">
<p class="hr_tag"></p>
<span>筛选</span>
</div>
<div>
<div class="flex-end-content">
<div class="flex">
<div>
<el-input placeholder="请输入练习名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input>
</div>

@ -1,13 +1,13 @@
<template>
<div>
<el-card shadow="hover" class="mgb20">
<el-card shadow="hover" class="m-b-20">
<div>
<div class="flex-center mgb20">
<div class="flex a-center m-b-20">
<p class="hr_tag"></p>
<span>筛选</span>
</div>
<div>
<div class="flex-end-content">
<div class="flex">
<div>
<el-input placeholder="请输入练习名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input>
</div>
@ -17,7 +17,7 @@
</el-card>
<el-card shadow="hover">
<div class="flex-end-content mgb20">
<div class="flex-end-content m-b-20">
<div>
<el-button
type="primary"

@ -156,7 +156,7 @@
</div>
</div>
<div class="card mgb20">
<div class="card m-b-20">
<p class="block-title">账号信息</p>
<div class="information">
<div class="block">

@ -1,13 +1,13 @@
<template>
<div class="box">
<el-card shadow="hover" class="mgb20">
<el-card shadow="hover" class="m-b-20">
<div>
<div class="flex-center mgb20">
<div class="flex a-center m-b-20">
<p class="hr_tag"></p>
<span>筛选</span>
</div>
<div>
<div class="flex-between">
<div class="flex j-between">
<el-form label-width="80px" inline>
<el-form-item class="no-mb" label="题库来源">
<el-select v-model="publishStatus" clearable placeholder="请选择题库来源" @change="getData">

@ -33,12 +33,18 @@ service.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
// 响应拦截器
service.interceptors.response.use(
response => {
// consol.log(res.status)
const res = response.data
if (res.success) {
return Promise.resolve(res);
return Promise.resolve(res).catch(e => {})
} else {
return Promise.reject(res);
switch (res.code) {
case 201:
Message.error(res.message)
break;
default:
Promise.reject(res).catch(e => {})
}
return Promise.reject(res).catch(e => {})
}
},
// 服务器状态码不是200的情况
@ -93,44 +99,64 @@ service.interceptors.response.use(
function get(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params
})
service.get(url, {params: params})
.then(res => {
resolve(res.data)
if(res){
resolve(res)
}else{
reject()
}
}).catch(err => {
reject(err.data)
})
})
}
function post(url, params){
return new Promise((resolve, reject) =>{
axios.post(url, {
params
})
service.post(url,params)
.then(res => {
resolve(res.data)
if(res){
resolve(res)
}else{
reject()
}
}).catch(err => {
reject(err.data)
})
})
}
function del(url, params){
return new Promise((resolve, reject) =>{
axios.delete(url, {
service.delete(url, {
params
})
.then(res => {
resolve(res.data)
if(res){
resolve(res)
}else{
reject()
}
}).catch(err => {
reject(err.data)
})
})
}
function put(url, params){
return new Promise((resolve, reject) =>{
axios.put(url, {
service.put(url, {
params
})
.then(res => {
resolve(res.data)
if(res){
resolve(res)
}else{
reject()
}
}).catch(err => {
reject(err.data)
})
})
}

@ -19,5 +19,11 @@ export default {
component: () => import('@/pages/achievement/list'),
meta: { title: '我的成绩' }
},
{
name: `${pre}detail`,
path: `detail`,
component: () => import('@/pages/achievement/detail'),
meta: { title: '答题详情' }
},
]
};

@ -18,6 +18,11 @@ export default {
path: `list`,
component: () => import('@/pages/exam/list'),
meta: { title: '我的考试' }
},{
name: `${pre}do`,
path: `do`,
component: () => import('@/pages/exam/do'),
meta: { title: '我的考试' }
},
]
};

@ -15,7 +15,7 @@ const Setting = {
// 页面切换时,是否显示模拟的进度条
showProgressBar: true,
// 接口请求地址
apiBaseURL: env === 'development' ? 'http://39.108.250.202:8000' : 'http://39.108.250.202:8000',
apiBaseURL: env === 'development' ? 'http://192.168.31.152:8001' : 'http://39.108.250.202:8000',
// 接口请求返回错误时,弹窗的持续时间,单位:秒
modalDuration: 3,
// 接口请求返回错误时,弹窗的类型,可选值为 Message 或 Notice
@ -50,7 +50,7 @@ const Setting = {
menuSideWidth: 256,
layout: {
// 需要隐藏顶栏的页面路径
hideNavList: ['index-do','setting-person'],
hideNavList: ['index-do','setting-person','achievement-detail','exam-do'],
// 侧边栏风格,可选值为 dark 或 light
siderTheme: 'dark',
// 顶栏风格,可选值为 light、dark 或 primary

@ -0,0 +1,28 @@
/**
* 成绩管理
* */
export default {
namespaced: true,
state: {
id: '',
assessmentId: '',
assessmentName: '',
classId: ''
},
getters: {
},
mutations: {
SET_INFO: (state, info) => {
state.id = info.id
state.assessmentId = info.assessmentId
state.assessmentName = info.assessmentName
state.classId = info.classId
},
},
actions: {
setInfo({ commit },info) {
commit('SET_INFO',info)
},
}
}

@ -0,0 +1,77 @@
/**
* 试卷管理
* */
export default {
namespaced: true,
state: {
typeList: [
{
id: 1,
name: '期中开始'
},{
id: 2,
name: '期末考试'
},{
id: 3,
name: '模拟考'
}
],
stateList: [
{
id: 1,
name: '待开始'
},{
id: 2,
name: '进行中'
},{
id: 3,
name: '已结束'
}
],
degreeList: [
{
id: 0,
label: '简单'
},{
id: 1,
label: '一般'
},{
id: 2,
label: '较难'
},{
id: 3,
label: '很难'
},
],
assessmentName: '',
testPaperId: '',
assessmentId: '',
paperName: '',
totalDuration: ''
},
getters: {
getDegreeName: state => id => {
return state.degreeList.find(n => n.id == id).label
},
getTypeName: state => id => {
return state.typeList.find(n => n.id == id).name
},
getStateName: state => id => {
return state.stateList.find(n => n.id == id).name
},
},
mutations: {
SET_INFO: (state, info) => {
state.assessmentName = info.assessmentName
state.assessmentId = info.assessmentId
state.testPaperId = info.testPaperId
state.paperName = info.paperName
state.totalDuration = info.totalDuration
},
},
actions: {
setInfo({ commit },info) {
commit('SET_INFO',info)
},
}
}

@ -0,0 +1,162 @@
@import "./default/index.scss";
.content-box {
-webkit-transition: left .3s ease-in-out;
transition: left .3s ease-in-out;
}
.content {
width: auto;
height: 100%;
padding: 20px;
box-sizing: border-box;
}
.content-collapse {
left: 65px;
}
.container {
padding: 30px;
background: #fff;
border: 1px solid #ddd;
border-radius: 5px;
}
.crumbs {
margin: 10px 0;
}
.pagination {
margin: 20px 0;
text-align: right;
}
.el-button+.el-tooltip {
margin-left: 10px;
}
.ql-snow .ql-tooltip {
transform: translateX(117.5px) translateY(10px) !important;
}
.el-row {
margin-bottom: 20px;
}
#app .el-table thead{
color: #fff;
}
#app .el-table th{
background-color: $--color-primary!important;
font-size: 16px;
font-weight: normal;
}
#app .el-select{
display: unset;
}
.required{
margin-right: 5px;
color: #F56C6C;
}
.hr_tag{
background-color: $--color-primary;
width: 3px;
height: 15px;
margin-right: 5px;
}
.per_title span{
font-size: 16px;
font-weight: bold;
}
.per_back{
margin-left: 5px;
}
.per_school{
margin-left: 30px;
}
.per_title:hover{
cursor:pointer;
}
[v-cloak] {
display: none;
}
.header_tab{
box-shadow:0px 0px 25px 2px rgba(255,45,45,0.14);
.el-tabs__nav-wrap::after{
background-color: #fff;
}
.el-tabs__header{
padding: 20px 60px 0;
margin: 0;
z-index: 999;
background-color: #fff;
}
.el-tabs__item{
padding: 0 30px;
font-size: 15px;
}
}
.tabs{
display: flex;
align-items: center;
padding: 20px 1.5% 20px;
margin-bottom: 20px;
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: $--color-primary;
border-color: $--color-primary;
}
}
}
.btns{
display: flex;
justify-content: center;
margin-top: 20px;
button{
height: 30px;
padding: 0 30px;
margin: 0 15px;
font-size: 14px;
color: #333;
line-height: 30px;
background-color: #fff;
border: 1px solid #ededed;
border-radius: 4px;
cursor: pointer;
&.submit{
color: #fff;
background-color: #e80909;
border-color: #e80909;
}
&:hover{
opacity: .8;
}
&:focus{
outline: none;
}
}
}
.userRadio .el-radio{
margin-right: 10px!important;
}
.userRadio .el-radio__input{
display: none!important;
}

@ -0,0 +1,7 @@
/* 改变主题色变量 */
$--color-primary: #cb221c;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save