master
parent
92daa966b2
commit
356f120dcd
93 changed files with 3090 additions and 2076 deletions
@ -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) |
|
||||||
|
|
||||||
## 项目截图 |
|
||||||
|
|
||||||
### 登录 |
|
||||||
|
|
||||||
 |
|
||||||
|
|
||||||
### 默认皮肤 |
|
||||||
|
|
||||||
 |
|
||||||
|
|
||||||
### 浅绿色皮肤 |
|
||||||
|
|
||||||
 |
|
||||||
|
|
||||||
## 赞赏 |
|
||||||
|
|
||||||
请作者喝杯咖啡吧！(微信号：linxin_20) |
|
||||||
|
|
||||||
 |
|
||||||
|
|
||||||
## 特别鸣谢 |
|
||||||
|
|
||||||
- [实验楼](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 |
|
||||||
|
|
||||||
 |
|
||||||
|
|
||||||
## 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 |
|
||||||
|
|
||||||
 |
|
||||||
|
|
||||||
### Green theme |
|
||||||
|
|
||||||
 |
|
||||||
|
|
||||||
## 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 |
@ -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 #409EFF; |
|
||||||
background-color: #409EFF; |
|
||||||
} |
|
||||||
.message-title{ |
|
||||||
color: #20a0ff; |
|
||||||
} |
|
||||||
.collapse-btn:hover{ |
|
||||||
background: rgb(40,52,70); |
|
||||||
} |
|
||||||
@ -1,4 +0,0 @@ |
|||||||
|
|
||||||
[class*=" icon-"], [class^=icon-] { |
|
||||||
font-family: iconfont!important; |
|
||||||
} |
|
||||||
@ -1,384 +0,0 @@ |
|||||||
* { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
html, |
|
||||||
body, |
|
||||||
#app, |
|
||||||
.wrapper { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif; |
|
||||||
font-size: 14px; |
|
||||||
background: #f0f0f0; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
text-decoration: none |
|
||||||
} |
|
||||||
i{ |
|
||||||
font-style: normal; |
|
||||||
} |
|
||||||
li { |
|
||||||
list-style-type:none; |
|
||||||
} |
|
||||||
|
|
||||||
.required{ |
|
||||||
margin-right: 5px; |
|
||||||
color: #F56C6C; |
|
||||||
} |
|
||||||
.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; |
|
||||||
} |
|
||||||
|
|
||||||
.el-table th { |
|
||||||
background-color: #f5f7fa !important; |
|
||||||
} |
|
||||||
|
|
||||||
.pagination { |
|
||||||
margin: 20px 0; |
|
||||||
text-align: right; |
|
||||||
} |
|
||||||
|
|
||||||
.plugins-tips { |
|
||||||
padding: 20px 10px; |
|
||||||
margin-bottom: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.el-button+.el-tooltip { |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.el-table tr:hover { |
|
||||||
background: #f6faff; |
|
||||||
} |
|
||||||
|
|
||||||
.orderTable td .el-input{ |
|
||||||
width: 60%; |
|
||||||
} |
|
||||||
|
|
||||||
.orderTable .el-select>.el-input{ |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
|
|
||||||
.mgb20 { |
|
||||||
margin-bottom: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.move-enter-active, |
|
||||||
.move-leave-active { |
|
||||||
transition: opacity .5s; |
|
||||||
} |
|
||||||
|
|
||||||
.move-enter, |
|
||||||
.move-leave { |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
|
|
||||||
/*BaseForm*/ |
|
||||||
|
|
||||||
.form-box { |
|
||||||
width: 600px; |
|
||||||
} |
|
||||||
|
|
||||||
.form-box .line { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.el-time-panel__content::after, |
|
||||||
.el-time-panel__content::before { |
|
||||||
margin-top: -7px; |
|
||||||
} |
|
||||||
|
|
||||||
.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) { |
|
||||||
padding-bottom: 0; |
|
||||||
} |
|
||||||
|
|
||||||
/*Upload*/ |
|
||||||
|
|
||||||
.pure-button { |
|
||||||
width: 150px; |
|
||||||
height: 40px; |
|
||||||
line-height: 40px; |
|
||||||
text-align: center; |
|
||||||
color: #fff; |
|
||||||
border-radius: 3px; |
|
||||||
} |
|
||||||
|
|
||||||
.g-core-image-corp-container .info-aside { |
|
||||||
height: 45px; |
|
||||||
} |
|
||||||
|
|
||||||
.avatar-uploader .el-upload--text { |
|
||||||
background-color: #fff; |
|
||||||
border: 1px dashed #d9d9d9; |
|
||||||
border-radius: 6px; |
|
||||||
box-sizing: border-box; |
|
||||||
width: 360px; |
|
||||||
height: 180px; |
|
||||||
text-align: center; |
|
||||||
cursor: pointer; |
|
||||||
position: relative; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.avatar-uploader .el-upload--text .el-icon-upload { |
|
||||||
font-size: 67px; |
|
||||||
color: #97a8be; |
|
||||||
margin: 40px 0 16px; |
|
||||||
line-height: 50px; |
|
||||||
} |
|
||||||
|
|
||||||
.avatar-uploader .el-upload--text { |
|
||||||
color: #97a8be; |
|
||||||
font-size: 14px; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.avatar-uploader .el-upload--text em { |
|
||||||
font-style: normal; |
|
||||||
} |
|
||||||
|
|
||||||
/* .link_upload .el-upload-list{ |
|
||||||
width: 30%; |
|
||||||
} */ |
|
||||||
|
|
||||||
/*VueEditor*/ |
|
||||||
|
|
||||||
.ql-container { |
|
||||||
min-height: 400px; |
|
||||||
} |
|
||||||
|
|
||||||
.ql-snow .ql-tooltip { |
|
||||||
transform: translateX(117.5px) translateY(10px) !important; |
|
||||||
} |
|
||||||
|
|
||||||
.editor-btn { |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
/*markdown*/ |
|
||||||
|
|
||||||
.v-note-wrapper .v-note-panel { |
|
||||||
min-height: 500px; |
|
||||||
} |
|
||||||
|
|
||||||
.ms-login .el-tabs__nav-wrap::after{ |
|
||||||
background-color: #fff; |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
.ms-login .el-tabs__item{ |
|
||||||
padding: 0 90px; |
|
||||||
color: #999; |
|
||||||
} |
|
||||||
.ms-login .el-tabs__item:hover{ |
|
||||||
color: #000; |
|
||||||
} |
|
||||||
.ms-login .el-tabs__item.is-active{ |
|
||||||
color: #333; |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
.ms-login .el-tabs__active-bar{ |
|
||||||
background-color: #000; |
|
||||||
border-radius:2px; |
|
||||||
} |
|
||||||
.ms-login .el-tabs__nav-scroll{ |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
|
|
||||||
.ms-login .el-input__inner{ |
|
||||||
height: 80px; |
|
||||||
line-height: 80px; |
|
||||||
border:1px solid rgba(220,220,220,1); |
|
||||||
border-radius:2px; |
|
||||||
} |
|
||||||
|
|
||||||
.el-row { |
|
||||||
margin-bottom: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.mgb20 { |
|
||||||
margin-bottom: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
#app .el-table thead{ |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
#app .el-table th{ |
|
||||||
background-color: #cb221c!important; |
|
||||||
font-size: 16px; |
|
||||||
font-weight: normal; |
|
||||||
} |
|
||||||
#app .el-select{ |
|
||||||
display: unset; |
|
||||||
} |
|
||||||
|
|
||||||
/*flex*/ |
|
||||||
.flex-center{ |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.flex-between{ |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
.flex-around{ |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: space-around; |
|
||||||
} |
|
||||||
.flex-start-around{ |
|
||||||
display: flex; |
|
||||||
align-items: flex-start; |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
.flex-end-around{ |
|
||||||
display: flex; |
|
||||||
align-items: flex-end; |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
.flex-column{ |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
.flex-start{ |
|
||||||
display: flex; |
|
||||||
align-items: flex-start; |
|
||||||
} |
|
||||||
.flex-end{ |
|
||||||
display: flex; |
|
||||||
align-items: flex-end; |
|
||||||
} |
|
||||||
.flex-justify-end{ |
|
||||||
display: flex; |
|
||||||
justify-content: flex-end; |
|
||||||
} |
|
||||||
|
|
||||||
.hr_tag{ |
|
||||||
background-color: #cb221c; |
|
||||||
width: 3px; |
|
||||||
height: 15px; |
|
||||||
margin-right: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.user_header{ |
|
||||||
padding: 20px 0; |
|
||||||
border-bottom: 1px dashed #eee; |
|
||||||
} |
|
||||||
.addhr_tag{ |
|
||||||
background-color: #666; |
|
||||||
width: 6px; |
|
||||||
height: 17px; |
|
||||||
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; |
|
||||||
} |
|
||||||
|
|
||||||
/* 溢出省略号 */ |
|
||||||
.ellipsis{ |
|
||||||
overflow: hidden; |
|
||||||
text-overflow: ellipsis; |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
|
|
||||||
.tabs{ |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
padding: 20px 1.5% 20px; |
|
||||||
margin-bottom: 20px; |
|
||||||
z-index: 999; |
|
||||||
background-color: #fff; |
|
||||||
} |
|
||||||
.tabs .item{ |
|
||||||
padding: 12px 20px; |
|
||||||
margin-right: 10px; |
|
||||||
color:#606266; |
|
||||||
line-height: 1; |
|
||||||
border-radius: 4px; |
|
||||||
background-color: #fff; |
|
||||||
border: 1px solid #dcdfe6; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.tabs .active{ |
|
||||||
color: #fff; |
|
||||||
background-color: #cb221c; |
|
||||||
border-color: #cb221c; |
|
||||||
} |
|
||||||
|
|
||||||
.btns{ |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
.btns 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; |
|
||||||
} |
|
||||||
.btns .submit{ |
|
||||||
color: #fff; |
|
||||||
background-color: #e80909; |
|
||||||
border-color: #e80909; |
|
||||||
} |
|
||||||
.btns button:hover{ |
|
||||||
opacity: .8; |
|
||||||
} |
|
||||||
.btns button:focus{ |
|
||||||
outline: none; |
|
||||||
} |
|
||||||
|
|
||||||
.userRadio .el-radio{ |
|
||||||
margin-right: 10px!important; |
|
||||||
} |
|
||||||
.userRadio .el-radio__input{ |
|
||||||
display: none!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; |
|
||||||
} |
|
||||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 875 B After Width: | Height: | Size: 875 B |
@ -0,0 +1,263 @@ |
|||||||
|
<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}`) |
||||||
|
// this.$post(`${this.api.answerDetail}?userId=${1}&assessmentId=${1}&paperId=${1}`) |
||||||
|
.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,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,96 @@ |
|||||||
|
/** |
||||||
|
* 考核管理 |
||||||
|
* */ |
||||||
|
export default { |
||||||
|
namespaced: true, |
||||||
|
state: { |
||||||
|
id: '', |
||||||
|
paperId: '', |
||||||
|
isReview: false, |
||||||
|
reviewStatus: '', |
||||||
|
typeList: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: '期中开始' |
||||||
|
},{ |
||||||
|
id: 2, |
||||||
|
name: '期末考试' |
||||||
|
},{ |
||||||
|
id: 3, |
||||||
|
name: '模拟考' |
||||||
|
} |
||||||
|
], |
||||||
|
stateList: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: '待开始' |
||||||
|
},{ |
||||||
|
id: 2, |
||||||
|
name: '进行中' |
||||||
|
},{ |
||||||
|
id: 3, |
||||||
|
name: '已结束' |
||||||
|
}
|
||||||
|
], |
||||||
|
reviewStatusList: [ |
||||||
|
{ |
||||||
|
id: 0, |
||||||
|
name: '未批阅' |
||||||
|
},{ |
||||||
|
id: 1, |
||||||
|
name: '批阅部分' |
||||||
|
},{ |
||||||
|
id: 2, |
||||||
|
name: '已批阅' |
||||||
|
} |
||||||
|
], |
||||||
|
examStatusList: [ |
||||||
|
{ |
||||||
|
id: 0, |
||||||
|
name: '未考' |
||||||
|
},{ |
||||||
|
id: 1, |
||||||
|
name: '已考试' |
||||||
|
} |
||||||
|
], |
||||||
|
correctingList: [ |
||||||
|
{ |
||||||
|
id: 0, |
||||||
|
name: '待阅' |
||||||
|
},{ |
||||||
|
id: 1, |
||||||
|
name: '已阅' |
||||||
|
} |
||||||
|
], |
||||||
|
}, |
||||||
|
getters: { |
||||||
|
getTypeName: state => id => { |
||||||
|
return state.typeList.find(n => n.id == id).name |
||||||
|
}, |
||||||
|
getStateName: state => id => { |
||||||
|
return state.stateList.find(n => n.id == id).name |
||||||
|
}, |
||||||
|
getReviewStatusName: state => id => { |
||||||
|
return state.reviewStatusList.find(n => n.id == id).name |
||||||
|
}, |
||||||
|
getExamStatusName: state => id => { |
||||||
|
return state.examStatusList.find(n => n.id == id).name |
||||||
|
}, |
||||||
|
getCorrectingName: state => id => { |
||||||
|
return state.correctingList.find(n => n.id == id).name |
||||||
|
}, |
||||||
|
}, |
||||||
|
mutations: { |
||||||
|
SET_INFO: (state, info) => { |
||||||
|
state.id = info.id |
||||||
|
state.paperId = info.paperId |
||||||
|
state.isReview = info.isReview |
||||||
|
state.reviewStatus = info.reviewStatus |
||||||
|
}, |
||||||
|
}, |
||||||
|
actions: { |
||||||
|
setAssInfo({ commit },info) { |
||||||
|
commit('SET_INFO',info) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,145 @@ |
|||||||
|
@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; |
||||||
|
} |
||||||
|
|
||||||
|
.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"; |
||||||
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
@ -0,0 +1,3 @@ |
|||||||
|
[class*=" icon-"], [class^=icon-] { |
||||||
|
font-family: iconfont!important; |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
@import "./default/index.scss"; |
||||||
|
@import "./font/iconfont.css"; |
||||||
|
@import "./font/icon/iconfont.css"; |
||||||
|
@import "./lib/index.scss"; |
||||||
|
@import "./layout/index.scss"; |
||||||
|
@import "./common.scss"; |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
@import "lib/var"; |
||||||
|
html, |
||||||
|
body, |
||||||
|
#app, |
||||||
|
.wrapper { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
font-size: 14px; |
||||||
|
background: $bg-grey; |
||||||
|
} |
||||||
@ -0,0 +1,375 @@ |
|||||||
|
@import "var"; |
||||||
|
// reset 初始化浏览器样式 |
||||||
|
* { |
||||||
|
box-sizing: border-box; |
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
||||||
|
} |
||||||
|
|
||||||
|
*:before, |
||||||
|
*:after { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
html { |
||||||
|
-ms-text-size-adjust: 100%; |
||||||
|
-webkit-text-size-adjust: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
body, |
||||||
|
div, |
||||||
|
dl, |
||||||
|
dt, |
||||||
|
dd, |
||||||
|
ul, |
||||||
|
ol, |
||||||
|
li, |
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
h5, |
||||||
|
h6, |
||||||
|
form, |
||||||
|
fieldset, |
||||||
|
legend, |
||||||
|
input, |
||||||
|
textarea, |
||||||
|
p, |
||||||
|
blockquote, |
||||||
|
th, |
||||||
|
td, |
||||||
|
hr, |
||||||
|
button, |
||||||
|
article, |
||||||
|
aside, |
||||||
|
details, |
||||||
|
figcaption, |
||||||
|
figure, |
||||||
|
footer, |
||||||
|
header, |
||||||
|
hgroup, |
||||||
|
menu, |
||||||
|
nav, |
||||||
|
section { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
button, |
||||||
|
input, |
||||||
|
select, |
||||||
|
textarea { |
||||||
|
font-family: inherit; |
||||||
|
font-size: inherit; |
||||||
|
line-height: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
input::-ms-clear, |
||||||
|
input::-ms-reveal { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
ol,ul{ |
||||||
|
li{ |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
} |
||||||
|
h1 { |
||||||
|
font-size: 2em; |
||||||
|
margin: 0.67em 0; |
||||||
|
} |
||||||
|
|
||||||
|
article, |
||||||
|
aside, |
||||||
|
footer, |
||||||
|
header, |
||||||
|
nav, |
||||||
|
section { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
figcaption, |
||||||
|
figure, |
||||||
|
main { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
figure { |
||||||
|
margin: 1em 40px; |
||||||
|
} |
||||||
|
|
||||||
|
li:focus { |
||||||
|
outline-width: 0; |
||||||
|
} |
||||||
|
|
||||||
|
i{ |
||||||
|
font-style: normal; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Remove the gray background on active links in IE 10. |
||||||
|
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+. |
||||||
|
*/ |
||||||
|
|
||||||
|
a { |
||||||
|
background-color: transparent; |
||||||
|
-webkit-text-decoration-skip: objects; |
||||||
|
text-decoration: none; |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
a:active { |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
a:active, |
||||||
|
a:hover, |
||||||
|
a:focus { |
||||||
|
outline-width: 0; |
||||||
|
} |
||||||
|
|
||||||
|
abbr[title] { |
||||||
|
border-bottom: none; |
||||||
|
text-decoration: underline; |
||||||
|
text-decoration: underline dotted; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Prevent the duplicate application of `bolder` by the next rule in Safari 6. |
||||||
|
*/ |
||||||
|
|
||||||
|
b, |
||||||
|
strong { |
||||||
|
font-weight: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari. |
||||||
|
*/ |
||||||
|
|
||||||
|
b, |
||||||
|
strong { |
||||||
|
font-weight: bolder; |
||||||
|
} |
||||||
|
|
||||||
|
pre, |
||||||
|
code, |
||||||
|
kbd, |
||||||
|
samp { |
||||||
|
font-family: monospace, monospace; |
||||||
|
font-size: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
dfn { |
||||||
|
font-style: italic; |
||||||
|
} |
||||||
|
|
||||||
|
mark { |
||||||
|
background-color: #ff0; |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
|
||||||
|
small { |
||||||
|
font-size: 80%; |
||||||
|
} |
||||||
|
|
||||||
|
sub, |
||||||
|
sup { |
||||||
|
font-size: 75%; |
||||||
|
line-height: 0; |
||||||
|
position: relative; |
||||||
|
vertical-align: baseline; |
||||||
|
} |
||||||
|
|
||||||
|
sub { |
||||||
|
bottom: -0.25em; |
||||||
|
} |
||||||
|
|
||||||
|
sup { |
||||||
|
top: -0.5em; |
||||||
|
} |
||||||
|
|
||||||
|
audio, |
||||||
|
video { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
audio:not([controls]) { |
||||||
|
display: none; |
||||||
|
height: 0; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
border-style: none; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
|
||||||
|
svg:not(:root) { |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
button, |
||||||
|
input, |
||||||
|
optgroup, |
||||||
|
select, |
||||||
|
textarea { |
||||||
|
font-size: 100%; |
||||||
|
line-height: 1.15; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
button, |
||||||
|
input { |
||||||
|
overflow: visible; |
||||||
|
} |
||||||
|
|
||||||
|
button, |
||||||
|
select { |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
|
||||||
|
button, |
||||||
|
html [type="button"], |
||||||
|
[type="reset"], |
||||||
|
[type="submit"] { |
||||||
|
-webkit-appearance: button; |
||||||
|
} |
||||||
|
|
||||||
|
button::-moz-focus-inner, |
||||||
|
[type="button"]::-moz-focus-inner, |
||||||
|
[type="reset"]::-moz-focus-inner, |
||||||
|
[type="submit"]::-moz-focus-inner { |
||||||
|
border-style: none; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Restore the focus styles unset by the previous rule. |
||||||
|
*/ |
||||||
|
|
||||||
|
button:-moz-focusring, |
||||||
|
[type="button"]:-moz-focusring, |
||||||
|
[type="reset"]:-moz-focusring, |
||||||
|
[type="submit"]:-moz-focusring { |
||||||
|
outline: 1px dotted ButtonText; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Change the border, margin, and padding in all browsers (opinionated). |
||||||
|
*/ |
||||||
|
|
||||||
|
fieldset { |
||||||
|
border: 1px solid #c0c0c0; |
||||||
|
margin: 0 2px; |
||||||
|
padding: 0.35em 0.625em 0.75em; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Correct the text wrapping in Edge and IE. |
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE. |
||||||
|
* 3. Remove the padding so developers are not caught out when they zero out |
||||||
|
* `fieldset` elements in all browsers. |
||||||
|
*/ |
||||||
|
|
||||||
|
legend { |
||||||
|
box-sizing: border-box; /* 1 */ |
||||||
|
color: inherit; /* 2 */ |
||||||
|
display: table; /* 1 */ |
||||||
|
max-width: 100%; /* 1 */ |
||||||
|
padding: 0; /* 3 */ |
||||||
|
white-space: normal; /* 1 */ |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Add the correct display in IE 9-. |
||||||
|
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. |
||||||
|
*/ |
||||||
|
|
||||||
|
progress { |
||||||
|
display: inline-block; /* 1 */ |
||||||
|
vertical-align: baseline; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Remove the default vertical scrollbar in IE. |
||||||
|
*/ |
||||||
|
|
||||||
|
textarea { |
||||||
|
overflow: auto; |
||||||
|
resize: vertical; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Add the correct box sizing in IE 10-. |
||||||
|
* 2. Remove the padding in IE 10-. |
||||||
|
*/ |
||||||
|
|
||||||
|
[type="checkbox"], |
||||||
|
[type="radio"] { |
||||||
|
box-sizing: border-box; /* 1 */ |
||||||
|
padding: 0; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Correct the cursor style of increment and decrement buttons in Chrome. |
||||||
|
*/ |
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button, |
||||||
|
[type="number"]::-webkit-outer-spin-button { |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Correct the odd appearance in Chrome and Safari. |
||||||
|
* 2. Correct the outline style in Safari. |
||||||
|
*/ |
||||||
|
|
||||||
|
[type="search"] { |
||||||
|
-webkit-appearance: textfield; /* 1 */ |
||||||
|
outline-offset: -2px; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. |
||||||
|
*/ |
||||||
|
|
||||||
|
[type="search"]::-webkit-search-cancel-button, |
||||||
|
[type="search"]::-webkit-search-decoration { |
||||||
|
-webkit-appearance: none; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Correct the inability to style clickable types in iOS and Safari. |
||||||
|
* 2. Change font properties to `inherit` in Safari. |
||||||
|
*/ |
||||||
|
|
||||||
|
::-webkit-file-upload-button { |
||||||
|
-webkit-appearance: button; /* 1 */ |
||||||
|
font: inherit; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Add the correct display in IE 9-. |
||||||
|
* 1. Add the correct display in Edge, IE, and Firefox. |
||||||
|
*/ |
||||||
|
|
||||||
|
details, /* 1 */ |
||||||
|
menu { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Add the correct display in all browsers. |
||||||
|
*/ |
||||||
|
|
||||||
|
summary { |
||||||
|
display: list-item; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Add the correct display in IE 9-. |
||||||
|
*/ |
||||||
|
|
||||||
|
canvas { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
html { |
||||||
|
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif; |
||||||
|
} |
||||||
@ -0,0 +1,80 @@ |
|||||||
|
// 颜色 size范围 |
||||||
|
$color-black: #333 !default; |
||||||
|
$color-white: #ffffff !default; |
||||||
|
$color-grey: #888 !default; |
||||||
|
$color-green: #19be6b !default; |
||||||
|
$color-blue: #61c3ff !default; |
||||||
|
$color-yellow: #ff9900 !default; |
||||||
|
$color-red: #f35958 !default; |
||||||
|
|
||||||
|
$color-title: #17233d !default; |
||||||
|
$color-content: #515a6e !default; |
||||||
|
$color-disabled: #c5c8ce !default; |
||||||
|
|
||||||
|
$bg-grey:#f0f0f0 !default; |
||||||
|
$bg-white: #ffffff !default; |
||||||
|
$bg-black: #393D49 !default; |
||||||
|
|
||||||
|
$color-border: #dcdfe6 !default; |
||||||
|
|
||||||
|
// 主题背景色 |
||||||
|
$bg-colors: ( |
||||||
|
'white': $bg-white, |
||||||
|
'black': $bg-black, |
||||||
|
'grey': $bg-grey, |
||||||
|
'green': $color-green, |
||||||
|
'blue': $color-blue, |
||||||
|
'yellow': $color-yellow, |
||||||
|
'red': $color-red, |
||||||
|
) !default; |
||||||
|
|
||||||
|
// 文本颜色 |
||||||
|
$text-colors: ( |
||||||
|
'white': $color-white, |
||||||
|
'black': $color-black, |
||||||
|
'grey': $color-grey, |
||||||
|
'green': $color-green, |
||||||
|
'blue': $color-blue, |
||||||
|
'yellow': $color-yellow, |
||||||
|
'red': $color-red, |
||||||
|
'title': $color-title, |
||||||
|
'content': $color-content, |
||||||
|
'disabled': $color-disabled |
||||||
|
) !default; |
||||||
|
|
||||||
|
// 边框颜色 |
||||||
|
$border-colors: ( |
||||||
|
'white': $color-white, |
||||||
|
'black': $color-black, |
||||||
|
'grey': $color-border, |
||||||
|
'green': $color-green, |
||||||
|
'blue': $color-blue, |
||||||
|
'yellow': $color-yellow, |
||||||
|
'red': $color-red |
||||||
|
) !default; |
||||||
|
|
||||||
|
// border |
||||||
|
$border-width-through: 20 !default; |
||||||
|
$border-radius-through: 20 !default; |
||||||
|
|
||||||
|
// margin padding left right top bottom |
||||||
|
$box-sizes: ( |
||||||
|
-20, -15, -12, -10, -8, -6, -5, -4, -3, -2, -1, |
||||||
|
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 15, 20, 25, 30, 35, 40, 50, 60, 80, 100) !default; |
||||||
|
|
||||||
|
// width height |
||||||
|
$sizes: ( |
||||||
|
40, 50, 60, 70, 80, 90, 100, |
||||||
|
120, 150, 200, 250, 300, 400, 500, 600, 800, 1000, 1200) !default; |
||||||
|
|
||||||
|
// font-size |
||||||
|
$font-size-em-through: 10 !default; |
||||||
|
$font-size-em-decimal-through: 5 !default; |
||||||
|
$font-size-rem-through: 10 !default; |
||||||
|
$font-size-rem-decimal-through: 5 !default; |
||||||
|
$font-size-px-through: 80 !default; |
||||||
|
|
||||||
|
// line-height |
||||||
|
$line-height-through: 20 !default; |
||||||
|
$line-height-decimal-through: 5 !default; |
||||||
|
$line-height-px-through: 100 !default; |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
@each $name, $color in $bg-colors { |
||||||
|
.bg-#{$name} { |
||||||
|
background-color: $color; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,78 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
.border { |
||||||
|
border: 1px solid $color-border; |
||||||
|
} |
||||||
|
|
||||||
|
// vertical |
||||||
|
.b-v { |
||||||
|
border-top: 1px solid $color-border; |
||||||
|
border-bottom: 1px solid $color-border; |
||||||
|
} |
||||||
|
|
||||||
|
// horizontal |
||||||
|
.b-h { |
||||||
|
border-left: 1px solid $color-border; |
||||||
|
border-right: 1px solid $color-border; |
||||||
|
} |
||||||
|
|
||||||
|
// border double |
||||||
|
.b-double { |
||||||
|
border: double $color-border; |
||||||
|
} |
||||||
|
|
||||||
|
.b-w-thin { |
||||||
|
border-width: 0.55px; |
||||||
|
} |
||||||
|
|
||||||
|
.b-round { |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.b-none { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
|
||||||
|
@each $side in left, right, top, bottom { |
||||||
|
.b-#{str-slice($side, 0, 1)} { |
||||||
|
border-#{$side}: 1px solid $color-border; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// border-style |
||||||
|
@each $style in dotted, dashed { |
||||||
|
.border-#{$style} { |
||||||
|
border: 1px $style $color-border |
||||||
|
} |
||||||
|
.b-v-#{$style} { |
||||||
|
border-top: 1px $style $color-border; |
||||||
|
border-bottom: 1px $style $color-border; |
||||||
|
} |
||||||
|
.b-h-#{$style} { |
||||||
|
border-left: 1px $style $color-border; |
||||||
|
border-right: 1px $style $color-border; |
||||||
|
} |
||||||
|
@each $side in left, right, top, bottom { |
||||||
|
.b-#{str-slice($side, 0, 1)}-#{$style} { |
||||||
|
border-#{$side}: 1px $style $color-border; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@for $size from 0 through $border-width-through { |
||||||
|
.b-#{$size} { |
||||||
|
border-width: #{$size}px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@for $size from 0 through $border-radius-through { |
||||||
|
.b-radius-#{$size}, .b-r-#{$size} { |
||||||
|
border-radius: #{$size}px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@each $name, $color in $border-colors { |
||||||
|
.b-#{$name} { |
||||||
|
border-color: $color; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
/** |
||||||
|
* margin padding |
||||||
|
* @each 循环多次保证优先级 |
||||||
|
*/ |
||||||
|
|
||||||
|
.m-auto { |
||||||
|
margin-left: auto; |
||||||
|
margin-right: auto; |
||||||
|
} |
||||||
|
|
||||||
|
@each $size in $box-sizes { |
||||||
|
.m-#{$size}, .margin-#{$size} { |
||||||
|
margin: #{$size}px; |
||||||
|
} |
||||||
|
@if $size >= 0 { |
||||||
|
.p-#{$size}, .padding-#{$size} { |
||||||
|
padding: #{$size}px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@each $size in $box-sizes { |
||||||
|
.m-h-#{$size} { |
||||||
|
margin-left: #{$size}px; |
||||||
|
margin-right: #{$size}px; |
||||||
|
} |
||||||
|
.m-v-#{$size} { |
||||||
|
margin-top: #{$size}px; |
||||||
|
margin-bottom: #{$size}px; |
||||||
|
} |
||||||
|
@if $size >= 0 { |
||||||
|
.p-h-#{$size} { |
||||||
|
padding-left: #{$size}px; |
||||||
|
padding-right: #{$size}px; |
||||||
|
} |
||||||
|
.p-v-#{$size} { |
||||||
|
padding-top: #{$size}px; |
||||||
|
padding-bottom: #{$size}px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@each $size in $box-sizes { |
||||||
|
@each $side in top right bottom left { |
||||||
|
.m-#{str-slice($side, 0, 1)}-#{$size} { |
||||||
|
margin-#{$side}: #{$size}px; |
||||||
|
} |
||||||
|
@if $size >= 0 { |
||||||
|
.p-#{str-slice($side, 0, 1)}-#{$size} { |
||||||
|
padding-#{$side}: #{$size}px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
@each $type in default, auto, crosshair, pointer, move, text, wait, help { |
||||||
|
.cursor-#{$type} { |
||||||
|
cursor: $type; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
@each $type in inherit, none, inline, inline-block, block, table, inline-table, table-cell { |
||||||
|
.d-#{$type} { |
||||||
|
display: #{$type}; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.hide { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.show { |
||||||
|
display: block |
||||||
|
} |
||||||
@ -0,0 +1,54 @@ |
|||||||
|
.flex { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.flex-column { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.j-start { |
||||||
|
justify-content: flex-start; |
||||||
|
} |
||||||
|
.j-end { |
||||||
|
justify-content: flex-end; |
||||||
|
} |
||||||
|
.j-center { |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.j-between { |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.j-around { |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
|
|
||||||
|
.a-start { |
||||||
|
align-items: flex-start; |
||||||
|
} |
||||||
|
|
||||||
|
.a-center { |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.a-end { |
||||||
|
align-items: flex-end; |
||||||
|
} |
||||||
|
|
||||||
|
@each $type in nowrap, wrap, wrap-reverse { |
||||||
|
.flex-#{$type} { |
||||||
|
flex-wrap: $type; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@each $size in 1, 2, 3 { |
||||||
|
.flex-#{$size} { |
||||||
|
flex: $size; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@for $i from 0 through 3 { |
||||||
|
.flex-s-#{$i} { |
||||||
|
flex-shrink: $i; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
.cl { |
||||||
|
&:before, &:after { |
||||||
|
content: ' '; |
||||||
|
display: table; |
||||||
|
} |
||||||
|
&:after { |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
} |
||||||
|
.fl { |
||||||
|
float: left; |
||||||
|
} |
||||||
|
|
||||||
|
.fr { |
||||||
|
float: right; |
||||||
|
} |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
@for $size from 0 through $font-size-em-through { |
||||||
|
.fs-em-#{$size} { |
||||||
|
font-size: #{$size}em; |
||||||
|
} |
||||||
|
@if $size <= $font-size-em-decimal-through { |
||||||
|
@for $i from 0 to 10 { |
||||||
|
.fs-em-#{$size}_#{$i} { |
||||||
|
font-size: #{$size}#{'.'}#{$i}em; |
||||||
|
} |
||||||
|
} |
||||||
|
} @else { |
||||||
|
.fs-em-#{$size}_5 { |
||||||
|
font-size: #{$size}#{'.5'}em; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@for $size from 0 through $font-size-rem-through { |
||||||
|
.fs-rem-#{$size} { |
||||||
|
font-size: #{$size}rem; |
||||||
|
} |
||||||
|
@if $size <= $font-size-rem-decimal-through { |
||||||
|
@for $i from 0 to 10 { |
||||||
|
.fs-rem-#{$size}_#{$i} { |
||||||
|
font-size: #{$size}#{'.'}#{$i}rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} @else { |
||||||
|
.fs-rem-#{$size}_5 { |
||||||
|
font-size: #{$size}#{'.5'}rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@for $size from 12 through $font-size-px-through { |
||||||
|
.fs-#{$size} { |
||||||
|
font-size: #{$size}px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
.bold { |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.normal { |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
|
||||||
|
.lighter { |
||||||
|
font-weight: lighter; |
||||||
|
} |
||||||
|
|
||||||
|
@each $weight in 100, 200, 300, 400, 500, 600, 700, 800, 900 { |
||||||
|
.fw-#{$weight} { |
||||||
|
font-weight: $weight; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
/*! |
||||||
|
* quickly-css |
||||||
|
* Github: https://gitee.com/zj1024/quickly-css |
||||||
|
* Author: zhangjing |
||||||
|
*/ |
||||||
|
@import "reset"; |
||||||
|
|
||||||
|
@import "background"; |
||||||
|
@import "border"; |
||||||
|
@import "box"; |
||||||
|
@import "cursor"; |
||||||
|
@import "display"; |
||||||
|
@import "flex"; |
||||||
|
@import "float"; |
||||||
|
@import "font-size"; |
||||||
|
@import "font-weight"; |
||||||
|
@import "line-height"; |
||||||
|
@import "link"; |
||||||
|
@import "overflow"; |
||||||
|
@import "position"; |
||||||
|
@import "size"; |
||||||
|
@import "text-align"; |
||||||
|
@import "text-color"; |
||||||
|
@import "vertical-align"; |
||||||
|
@import "visibility"; |
||||||
|
@import "white-space"; |
||||||
|
|
||||||
|
@import "style"; |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
@for $size from 0 through $line-height-through { |
||||||
|
.l-h-#{$size} { |
||||||
|
line-height: #{$size}em; |
||||||
|
} |
||||||
|
@if $size <= $line-height-decimal-through { |
||||||
|
@for $i from 0 to 10 { |
||||||
|
.l-h-#{$size}_#{$i} { |
||||||
|
line-height: #{$size}#{'.'}#{$i}em; |
||||||
|
} |
||||||
|
} |
||||||
|
} @else { |
||||||
|
.l-h-#{$size}_5 { |
||||||
|
line-height: #{$size}#{'.5'}em; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@for $size from 0 through $line-height-px-through { |
||||||
|
.lh-#{$size} { |
||||||
|
line-height: #{$size}px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
@each $name, $color in $text-colors { |
||||||
|
.link-#{$name} { |
||||||
|
color: $color; |
||||||
|
text-decoration: none; |
||||||
|
cursor: pointer; |
||||||
|
&:hover, &:active, &:focus { |
||||||
|
color: darken($color, 10%); |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
@each $type in visible, hidden, scroll, auto, inherit { |
||||||
|
.o-#{$type} { |
||||||
|
overflow: $type; |
||||||
|
} |
||||||
|
.o-x-#{$type} { |
||||||
|
overflow-x: $type; |
||||||
|
} |
||||||
|
.o-y-#{$type} { |
||||||
|
overflow-y: $type; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
|
||||||
|
@import "var"; |
||||||
|
|
||||||
|
@each $type in static, relative, absolute, fixed, sticky { |
||||||
|
.#{$type} { |
||||||
|
position: $type; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@each $size in $box-sizes { |
||||||
|
@each $side in top, right, bottom, left { |
||||||
|
.#{$side}-#{$size} { |
||||||
|
#{$side}: #{$size}px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
.w-full { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.h-full { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
@for $percent from 0 to 100 { |
||||||
|
.w-p-#{$percent} { |
||||||
|
width: #{$percent}#{'%'}; |
||||||
|
} |
||||||
|
.h-p-#{$percent} { |
||||||
|
height: #{$percent}#{'%'}; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@for $i from 1 through 30 { |
||||||
|
.h-#{$i} { |
||||||
|
height: #{$i}px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@for $i from 1 through 30 { |
||||||
|
.w-#{$i} { |
||||||
|
width: #{$i}px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@each $i in $sizes { |
||||||
|
.w-#{$i} { |
||||||
|
width: #{$i}px; |
||||||
|
} |
||||||
|
.h-#{$i} { |
||||||
|
height: #{$i}px; |
||||||
|
} |
||||||
|
.max-w-#{$i} { |
||||||
|
max-width: #{$i}px; |
||||||
|
} |
||||||
|
.max-h-#{$i} { |
||||||
|
max-height: #{$i}px; |
||||||
|
} |
||||||
|
.min-w-#{$i} { |
||||||
|
min-width: #{$i}px; |
||||||
|
} |
||||||
|
.min-h-#{$i} { |
||||||
|
min-height: #{$i}px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
/** |
||||||
|
* 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit" |
||||||
|
*/ |
||||||
|
@each $type in left, right, center, justify, inherit { |
||||||
|
.text-#{$type} { |
||||||
|
text-align: #{$type}; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
@each $name, $color in $text-colors { |
||||||
|
.text-#{$name} { |
||||||
|
color: $color; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
$types: (baseline, sub, super, top, text-top, middle, bottom, text-bottom, inherit); |
||||||
|
|
||||||
|
@each $type in $types { |
||||||
|
.v-a-#{$type} { |
||||||
|
vertical-align: $type; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
.visible { |
||||||
|
visibility: visible; |
||||||
|
} |
||||||
|
|
||||||
|
.hidden { |
||||||
|
visibility: hidden; |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
@each $type in normal, nowrap, pre, pre-wrap, pre-line { |
||||||
|
.text-#{$type} { |
||||||
|
white-space: $type; |
||||||
|
} |
||||||
|
} |
||||||
@ -1,2 +0,0 @@ |
|||||||
@listBackgroundColor: #f0f0f0; |
|
||||||
@actionBackgroundColor: #fff; |
|
||||||
Loading…
Reference in new issue