@ -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) |
|
Before Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 81 KiB |
Before Width: | Height: | Size: 112 KiB |
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"></a></h1> |
|
||||||
<div class="nav-tabs"> |
|
||||||
<ul id="tabs" class="dib-box"> |
|
||||||
<li class="dib active"><span>Unicode</span></li> |
|
||||||
<li class="dib"><span>Font class</span></li> |
|
||||||
<li class="dib"><span>Symbol</span></li> |
|
||||||
</ul> |
|
||||||
|
|
||||||
</div> |
|
||||||
<div class="tab-container"> |
|
||||||
<div class="content unicode" style="display: block;"> |
|
||||||
<ul class="icon_lists dib-box"> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<span class="icon iconfont"></span> |
|
||||||
<div class="name">徽章,会员</div> |
|
||||||
<div class="code-name">&#xe65f;</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<span class="icon iconfont"></span> |
|
||||||
<div class="name">皇冠</div> |
|
||||||
<div class="code-name">&#xe798;</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<span class="icon iconfont"></span> |
|
||||||
<div class="name">学历</div> |
|
||||||
<div class="code-name">&#xe63a;</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
</ul> |
|
||||||
<div class="article markdown"> |
|
||||||
<h2 id="unicode-">Unicode 引用</h2> |
|
||||||
<hr> |
|
||||||
|
|
||||||
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p> |
|
||||||
<ul> |
|
||||||
<li>兼容性最好,支持 IE6+,及所有现代浏览器。</li> |
|
||||||
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li> |
|
||||||
<li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li> |
|
||||||
</ul> |
|
||||||
<blockquote> |
|
||||||
<p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p> |
|
||||||
</blockquote> |
|
||||||
<p>Unicode 使用步骤如下:</p> |
|
||||||
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3> |
|
||||||
<pre><code class="language-css" |
|
||||||
>@font-face { |
|
||||||
font-family: 'iconfont'; |
|
||||||
src: url('iconfont.eot'); |
|
||||||
src: url('iconfont.eot?#iefix') format('embedded-opentype'), |
|
||||||
url('iconfont.woff2') format('woff2'), |
|
||||||
url('iconfont.woff') format('woff'), |
|
||||||
url('iconfont.ttf') format('truetype'), |
|
||||||
url('iconfont.svg#iconfont') format('svg'); |
|
||||||
} |
|
||||||
</code></pre> |
|
||||||
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> |
|
||||||
<pre><code class="language-css" |
|
||||||
>.iconfont { |
|
||||||
font-family: "iconfont" !important; |
|
||||||
font-size: 16px; |
|
||||||
font-style: normal; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
} |
|
||||||
</code></pre> |
|
||||||
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3> |
|
||||||
<pre> |
|
||||||
<code class="language-html" |
|
||||||
><span class="iconfont">&#x33;</span> |
|
||||||
</code></pre> |
|
||||||
<blockquote> |
|
||||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> |
|
||||||
</blockquote> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="content font-class"> |
|
||||||
<ul class="icon_lists dib-box"> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<span class="icon iconfont icon-huizhanghuiyuan"></span> |
|
||||||
<div class="name"> |
|
||||||
徽章,会员 |
|
||||||
</div> |
|
||||||
<div class="code-name">.icon-huizhanghuiyuan |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<span class="icon iconfont icon-huangguan"></span> |
|
||||||
<div class="name"> |
|
||||||
皇冠 |
|
||||||
</div> |
|
||||||
<div class="code-name">.icon-huangguan |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<span class="icon iconfont icon-edu-line"></span> |
|
||||||
<div class="name"> |
|
||||||
学历 |
|
||||||
</div> |
|
||||||
<div class="code-name">.icon-edu-line |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
</ul> |
|
||||||
<div class="article markdown"> |
|
||||||
<h2 id="font-class-">font-class 引用</h2> |
|
||||||
<hr> |
|
||||||
|
|
||||||
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p> |
|
||||||
<p>与 Unicode 使用方式相比,具有如下特点:</p> |
|
||||||
<ul> |
|
||||||
<li>兼容性良好,支持 IE8+,及所有现代浏览器。</li> |
|
||||||
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li> |
|
||||||
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li> |
|
||||||
<li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li> |
|
||||||
</ul> |
|
||||||
<p>使用步骤如下:</p> |
|
||||||
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3> |
|
||||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
|
||||||
</code></pre> |
|
||||||
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3> |
|
||||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
|
||||||
</code></pre> |
|
||||||
<blockquote> |
|
||||||
<p>" |
|
||||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> |
|
||||||
</blockquote> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="content symbol"> |
|
||||||
<ul class="icon_lists dib-box"> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<svg class="icon svg-icon" aria-hidden="true"> |
|
||||||
<use xlink:href="#icon-huizhanghuiyuan"></use> |
|
||||||
</svg> |
|
||||||
<div class="name">徽章,会员</div> |
|
||||||
<div class="code-name">#icon-huizhanghuiyuan</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<svg class="icon svg-icon" aria-hidden="true"> |
|
||||||
<use xlink:href="#icon-huangguan"></use> |
|
||||||
</svg> |
|
||||||
<div class="name">皇冠</div> |
|
||||||
<div class="code-name">#icon-huangguan</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<svg class="icon svg-icon" aria-hidden="true"> |
|
||||||
<use xlink:href="#icon-edu-line"></use> |
|
||||||
</svg> |
|
||||||
<div class="name">学历</div> |
|
||||||
<div class="code-name">#icon-edu-line</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
</ul> |
|
||||||
<div class="article markdown"> |
|
||||||
<h2 id="symbol-">Symbol 引用</h2> |
|
||||||
<hr> |
|
||||||
|
|
||||||
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
|
||||||
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p> |
|
||||||
<ul> |
|
||||||
<li>支持多色图标了,不再受单色限制。</li> |
|
||||||
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
|
||||||
<li>兼容性较差,支持 IE9+,及现代浏览器。</li> |
|
||||||
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li> |
|
||||||
</ul> |
|
||||||
<p>使用步骤如下:</p> |
|
||||||
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3> |
|
||||||
<pre><code class="language-html"><script src="./iconfont.js"></script> |
|
||||||
</code></pre> |
|
||||||
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3> |
|
||||||
<pre><code class="language-html"><style> |
|
||||||
.icon { |
|
||||||
width: 1em; |
|
||||||
height: 1em; |
|
||||||
vertical-align: -0.15em; |
|
||||||
fill: currentColor; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
</style> |
|
||||||
</code></pre> |
|
||||||
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3> |
|
||||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
|
||||||
<use xlink:href="#icon-xxx"></use> |
|
||||||
</svg> |
|
||||||
</code></pre> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<script> |
|
||||||
$(document).ready(function () { |
|
||||||
$('.tab-container .content:first').show() |
|
||||||
|
|
||||||
$('#tabs li').click(function (e) { |
|
||||||
var tabContent = $('.tab-container .content') |
|
||||||
var index = $(this).index() |
|
||||||
|
|
||||||
if ($(this).hasClass('active')) { |
|
||||||
return |
|
||||||
} else { |
|
||||||
$('#tabs li').removeClass('active') |
|
||||||
$(this).addClass('active') |
|
||||||
|
|
||||||
tabContent.hide().eq(index).fadeIn() |
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
@ -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,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') format('woff2'), |
|
||||||
url('iconfont.woff?t=1591082516626') format('woff'), |
|
||||||
url('iconfont.ttf?t=1591082516626') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ |
|
||||||
url('iconfont.svg?t=1591082516626#iconfont') format('svg'); /* iOS 4.1- */ |
|
||||||
} |
|
||||||
|
|
||||||
.iconfont { |
|
||||||
font-family: "iconfont" !important; |
|
||||||
font-size: 16px; |
|
||||||
font-style: normal; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-huizhanghuiyuan:before { |
|
||||||
content: "\e65f"; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-huangguan:before { |
|
||||||
content: "\e798"; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-edu-line:before { |
|
||||||
content: "\e63a"; |
|
||||||
} |
|
||||||
|
|
@ -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 |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
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"></a></h1> |
|
||||||
<div class="nav-tabs"> |
|
||||||
<ul id="tabs" class="dib-box"> |
|
||||||
<li class="dib active"><span>Unicode</span></li> |
|
||||||
<li class="dib"><span>Font class</span></li> |
|
||||||
<li class="dib"><span>Symbol</span></li> |
|
||||||
</ul> |
|
||||||
|
|
||||||
</div> |
|
||||||
<div class="tab-container"> |
|
||||||
<div class="content unicode" style="display: block;"> |
|
||||||
<ul class="icon_lists dib-box"> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<span class="icon iconfont"></span> |
|
||||||
<div class="name">徽章,会员</div> |
|
||||||
<div class="code-name">&#xe65f;</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<span class="icon iconfont"></span> |
|
||||||
<div class="name">学士帽</div> |
|
||||||
<div class="code-name">&#xe663;</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<span class="icon iconfont"></span> |
|
||||||
<div class="name">学习</div> |
|
||||||
<div class="code-name">&#xe763;</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<span class="icon iconfont"></span> |
|
||||||
<div class="name">皇冠</div> |
|
||||||
<div class="code-name">&#xe798;</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<span class="icon iconfont"></span> |
|
||||||
<div class="name">学历</div> |
|
||||||
<div class="code-name">&#xe63a;</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
</ul> |
|
||||||
<div class="article markdown"> |
|
||||||
<h2 id="unicode-">Unicode 引用</h2> |
|
||||||
<hr> |
|
||||||
|
|
||||||
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p> |
|
||||||
<ul> |
|
||||||
<li>兼容性最好,支持 IE6+,及所有现代浏览器。</li> |
|
||||||
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li> |
|
||||||
<li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li> |
|
||||||
</ul> |
|
||||||
<blockquote> |
|
||||||
<p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p> |
|
||||||
</blockquote> |
|
||||||
<p>Unicode 使用步骤如下:</p> |
|
||||||
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3> |
|
||||||
<pre><code class="language-css" |
|
||||||
>@font-face { |
|
||||||
font-family: 'iconfont'; |
|
||||||
src: url('iconfont.eot'); |
|
||||||
src: url('iconfont.eot?#iefix') format('embedded-opentype'), |
|
||||||
url('iconfont.woff2') format('woff2'), |
|
||||||
url('iconfont.woff') format('woff'), |
|
||||||
url('iconfont.ttf') format('truetype'), |
|
||||||
url('iconfont.svg#iconfont') format('svg'); |
|
||||||
} |
|
||||||
</code></pre> |
|
||||||
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> |
|
||||||
<pre><code class="language-css" |
|
||||||
>.iconfont { |
|
||||||
font-family: "iconfont" !important; |
|
||||||
font-size: 16px; |
|
||||||
font-style: normal; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
} |
|
||||||
</code></pre> |
|
||||||
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3> |
|
||||||
<pre> |
|
||||||
<code class="language-html" |
|
||||||
><span class="iconfont">&#x33;</span> |
|
||||||
</code></pre> |
|
||||||
<blockquote> |
|
||||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> |
|
||||||
</blockquote> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="content font-class"> |
|
||||||
<ul class="icon_lists dib-box"> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<span class="icon iconfont icon-huizhanghuiyuan"></span> |
|
||||||
<div class="name"> |
|
||||||
徽章,会员 |
|
||||||
</div> |
|
||||||
<div class="code-name">.icon-huizhanghuiyuan |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<span class="icon iconfont icon-xueshimao"></span> |
|
||||||
<div class="name"> |
|
||||||
学士帽 |
|
||||||
</div> |
|
||||||
<div class="code-name">.icon-xueshimao |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<span class="icon iconfont icon-xuexi"></span> |
|
||||||
<div class="name"> |
|
||||||
学习 |
|
||||||
</div> |
|
||||||
<div class="code-name">.icon-xuexi |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<span class="icon iconfont icon-huangguan"></span> |
|
||||||
<div class="name"> |
|
||||||
皇冠 |
|
||||||
</div> |
|
||||||
<div class="code-name">.icon-huangguan |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<span class="icon iconfont icon-edu-line"></span> |
|
||||||
<div class="name"> |
|
||||||
学历 |
|
||||||
</div> |
|
||||||
<div class="code-name">.icon-edu-line |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
</ul> |
|
||||||
<div class="article markdown"> |
|
||||||
<h2 id="font-class-">font-class 引用</h2> |
|
||||||
<hr> |
|
||||||
|
|
||||||
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p> |
|
||||||
<p>与 Unicode 使用方式相比,具有如下特点:</p> |
|
||||||
<ul> |
|
||||||
<li>兼容性良好,支持 IE8+,及所有现代浏览器。</li> |
|
||||||
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li> |
|
||||||
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li> |
|
||||||
<li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li> |
|
||||||
</ul> |
|
||||||
<p>使用步骤如下:</p> |
|
||||||
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3> |
|
||||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
|
||||||
</code></pre> |
|
||||||
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3> |
|
||||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
|
||||||
</code></pre> |
|
||||||
<blockquote> |
|
||||||
<p>" |
|
||||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> |
|
||||||
</blockquote> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="content symbol"> |
|
||||||
<ul class="icon_lists dib-box"> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<svg class="icon svg-icon" aria-hidden="true"> |
|
||||||
<use xlink:href="#icon-huizhanghuiyuan"></use> |
|
||||||
</svg> |
|
||||||
<div class="name">徽章,会员</div> |
|
||||||
<div class="code-name">#icon-huizhanghuiyuan</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<svg class="icon svg-icon" aria-hidden="true"> |
|
||||||
<use xlink:href="#icon-xueshimao"></use> |
|
||||||
</svg> |
|
||||||
<div class="name">学士帽</div> |
|
||||||
<div class="code-name">#icon-xueshimao</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<svg class="icon svg-icon" aria-hidden="true"> |
|
||||||
<use xlink:href="#icon-xuexi"></use> |
|
||||||
</svg> |
|
||||||
<div class="name">学习</div> |
|
||||||
<div class="code-name">#icon-xuexi</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<svg class="icon svg-icon" aria-hidden="true"> |
|
||||||
<use xlink:href="#icon-huangguan"></use> |
|
||||||
</svg> |
|
||||||
<div class="name">皇冠</div> |
|
||||||
<div class="code-name">#icon-huangguan</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li class="dib"> |
|
||||||
<svg class="icon svg-icon" aria-hidden="true"> |
|
||||||
<use xlink:href="#icon-edu-line"></use> |
|
||||||
</svg> |
|
||||||
<div class="name">学历</div> |
|
||||||
<div class="code-name">#icon-edu-line</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
</ul> |
|
||||||
<div class="article markdown"> |
|
||||||
<h2 id="symbol-">Symbol 引用</h2> |
|
||||||
<hr> |
|
||||||
|
|
||||||
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
|
||||||
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p> |
|
||||||
<ul> |
|
||||||
<li>支持多色图标了,不再受单色限制。</li> |
|
||||||
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
|
||||||
<li>兼容性较差,支持 IE9+,及现代浏览器。</li> |
|
||||||
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li> |
|
||||||
</ul> |
|
||||||
<p>使用步骤如下:</p> |
|
||||||
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3> |
|
||||||
<pre><code class="language-html"><script src="./iconfont.js"></script> |
|
||||||
</code></pre> |
|
||||||
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3> |
|
||||||
<pre><code class="language-html"><style> |
|
||||||
.icon { |
|
||||||
width: 1em; |
|
||||||
height: 1em; |
|
||||||
vertical-align: -0.15em; |
|
||||||
fill: currentColor; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
</style> |
|
||||||
</code></pre> |
|
||||||
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3> |
|
||||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
|
||||||
<use xlink:href="#icon-xxx"></use> |
|
||||||
</svg> |
|
||||||
</code></pre> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<script> |
|
||||||
$(document).ready(function () { |
|
||||||
$('.tab-container .content:first').show() |
|
||||||
|
|
||||||
$('#tabs li').click(function (e) { |
|
||||||
var tabContent = $('.tab-container .content') |
|
||||||
var index = $(this).index() |
|
||||||
|
|
||||||
if ($(this).hasClass('active')) { |
|
||||||
return |
|
||||||
} else { |
|
||||||
$('#tabs li').removeClass('active') |
|
||||||
$(this).addClass('active') |
|
||||||
|
|
||||||
tabContent.hide().eq(index).fadeIn() |
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
@ -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,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') format('woff2'), |
|
||||||
url('iconfont.woff?t=1591084244863') format('woff'), |
|
||||||
url('iconfont.ttf?t=1591084244863') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ |
|
||||||
url('iconfont.svg?t=1591084244863#iconfont') format('svg'); /* iOS 4.1- */ |
|
||||||
} |
|
||||||
|
|
||||||
.iconfont { |
|
||||||
font-family: "iconfont" !important; |
|
||||||
font-size: 16px; |
|
||||||
font-style: normal; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-huizhanghuiyuan:before { |
|
||||||
content: "\e65f"; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-xueshimao:before { |
|
||||||
content: "\e663"; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-xuexi:before { |
|
||||||
content: "\e763"; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-huangguan:before { |
|
||||||
content: "\e798"; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-edu-line:before { |
|
||||||
content: "\e63a"; |
|
||||||
} |
|
||||||
|
|
@ -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 |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
Before Width: | Height: | Size: 15 KiB |
@ -1,4 +0,0 @@ |
|||||||
|
|
||||||
[class*=" icon-"], [class^=icon-] { |
|
||||||
font-family: iconfont!important; |
|
||||||
} |
|
@ -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; |
|
||||||
} |
|
@ -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; |
|
||||||
} |
|
Before Width: | Height: | Size: 7.6 KiB |
Before Width: | Height: | Size: 7.4 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 1.0 MiB |
Before Width: | Height: | Size: 384 B |
Before Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 709 B |
Before Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 1.4 MiB |
Before Width: | Height: | Size: 632 B |
Before Width: | Height: | Size: 918 B |
Before Width: | Height: | Size: 499 B |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 683 B |
Before Width: | Height: | Size: 556 B |
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 227 KiB |
Before Width: | Height: | Size: 1.5 MiB |
Before Width: | Height: | Size: 539 B |
Before Width: | Height: | Size: 323 KiB |
Before Width: | Height: | Size: 6.7 KiB |
Before Width: | Height: | Size: 422 B |
Before Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 648 B |
Before Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 673 B |
Before Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 538 B |
Before Width: | Height: | Size: 722 B |
Before Width: | Height: | Size: 6.7 KiB |
@ -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> |
@ -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('<>') |
||||||
|
}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> |
@ -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"; |