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