yinzuomei
6 years ago
269 changed files with 31446 additions and 0 deletions
@ -0,0 +1,17 @@ |
|||
*.class |
|||
|
|||
# Mobile Tools for Java (J2ME) |
|||
.mtj.tmp/ |
|||
|
|||
# Package Files # |
|||
*.jar |
|||
*.war |
|||
*.ear |
|||
*.zip |
|||
|
|||
# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml |
|||
hs_err_pid* |
|||
node_modules |
|||
dist |
|||
epmet-oper |
|||
.idea/ |
|||
@ -0,0 +1,2 @@ |
|||
NODE_ENV=development |
|||
VUE_APP_NODE_ENV=dev |
|||
@ -0,0 +1,2 @@ |
|||
NODE_ENV=production |
|||
VUE_APP_NODE_ENV=prod |
|||
@ -0,0 +1,2 @@ |
|||
NODE_ENV=production |
|||
VUE_APP_NODE_ENV=prod:sit |
|||
@ -0,0 +1,2 @@ |
|||
NODE_ENV=production |
|||
VUE_APP_NODE_ENV=prod:uat |
|||
@ -0,0 +1 @@ |
|||
/src/icons/iconfont.js |
|||
@ -0,0 +1,21 @@ |
|||
# epmet-oper-web |
|||
|
|||
## Project setup |
|||
``` |
|||
npm install |
|||
``` |
|||
|
|||
### Compiles and hot-reloads for development |
|||
``` |
|||
npm run serve |
|||
``` |
|||
|
|||
### Compiles and minifies for production |
|||
``` |
|||
npm run build |
|||
``` |
|||
|
|||
### Lints and fixes files |
|||
``` |
|||
npm run lint |
|||
``` |
|||
@ -0,0 +1,5 @@ |
|||
module.exports = { |
|||
presets: [ |
|||
'@vue/app' |
|||
] |
|||
} |
|||
@ -0,0 +1,105 @@ |
|||
var gulp = require('gulp') |
|||
var $ = require('gulp-load-plugins')() |
|||
var fs = require('fs') |
|||
var path = require('path') |
|||
var del = require('del') |
|||
//var colors = require('colors')
|
|||
var child_process = require('child_process') |
|||
|
|||
var theme = {} |
|||
var themeList = require('./src/element-ui/config.js').filter(item => !item.hasBuild) |
|||
var styleFileDir = './src/assets/scss' |
|||
var styleFileDirTemp = `${styleFileDir}-temp` |
|||
var themeFileDir = './public/element-theme' |
|||
var et = require('element-theme') |
|||
var etOptions = require('./package.json')['element-theme'] |
|||
var themeFileName = etOptions.config.replace(/.*\/(.+\.scss)/, '$1') |
|||
|
|||
|
|||
/** |
|||
* 构建生成主题 |
|||
*/ |
|||
gulp.task('themes', () => { |
|||
//console.log(colors.green('-------------------- 构建中，主题============= -------------------------'))
|
|||
if (themeList.length <= 0) { return del(styleFileDirTemp) } |
|||
|
|||
// 删除临时文件，保证本次操作正常执行
|
|||
//del(styleFileDirTemp)
|
|||
|
|||
// 拷贝一份scss样式文件夹，作为构建的临时处理文件夹
|
|||
//child_process.spawnSync('cp', ['-r', styleFileDir, styleFileDirTemp])
|
|||
|
|||
// 拷贝element组件scss变量样式文件至临时处理文件夹中，并修改相应配置信息
|
|||
//child_process.spawnSync('cp', ['-r', etOptions.config, styleFileDirTemp])
|
|||
etOptions.config = `${styleFileDirTemp}/${themeFileName}` |
|||
|
|||
// 开始构建生成
|
|||
fnCreate(themeList) |
|||
|
|||
function fnCreate (themeList) { |
|||
if (themeList.length >= 1) { |
|||
// 保存当前构建生成的主题对象
|
|||
theme = themeList[0] |
|||
|
|||
console.log('\n') |
|||
//console.log(colors.green('-------------------- 待构建，主题 -------------------------'))
|
|||
console.log(themeList) |
|||
console.log('\n') |
|||
//console.log(colors.green('-------------------- 构建中，主题 -------------------------'))
|
|||
console.log(theme) |
|||
console.log('\n') |
|||
|
|||
// 修改.scss临时文件中的$--color-primary主题变量值
|
|||
var data = fs.readFileSync(etOptions.config, 'utf8') |
|||
var result = data.replace(/\$--color-primary:(.*) !default;/, `$--color-primary:${theme.color} !default;`) |
|||
fs.writeFileSync(path.resolve(etOptions.config), result) |
|||
|
|||
// 修改aui.scss临时文件中引入element组件主题变量文件路径
|
|||
var data = fs.readFileSync(`${styleFileDirTemp}/aui.scss`, 'utf8') |
|||
var result = data.replace(new RegExp(`(@import \")(.*\/)(${themeFileName}\";)`), '$1./$3') |
|||
fs.writeFileSync(path.resolve(`${styleFileDirTemp}/aui.scss`), result) |
|||
|
|||
// 调用element-theme插件，生成element组件主题
|
|||
etOptions.out = `${themeFileDir}/${theme.name}` |
|||
et.run(etOptions, () => { |
|||
// 生成后，构建同主题色aui.css项目主题
|
|||
gulp.start(['styles'], () => { |
|||
// 递归下一步
|
|||
themeList.splice(0, 1) |
|||
fnCreate(themeList) |
|||
}) |
|||
}) |
|||
} else { |
|||
// 删除临时文件
|
|||
del(styleFileDirTemp) |
|||
console.log('\n') |
|||
//console.log(colors.green('-------------------- 构建完毕，删除临时文件 -------------------------'))
|
|||
console.log(styleFileDirTemp) |
|||
console.log('\n') |
|||
|
|||
// 删除主题不需要的部分文件
|
|||
var files = [ |
|||
`${themeFileDir}/**/*.css`, |
|||
`!${themeFileDir}/**/index.css`, |
|||
`!${themeFileDir}/**/aui.css`, |
|||
`!${themeFileDir}/**/fonts` |
|||
] |
|||
del(files) |
|||
//console.log(colors.green('-------------------- 构建完毕，删除主题独立组件文件 -------------------------'))
|
|||
console.log(files) |
|||
console.log('\n') |
|||
} |
|||
} |
|||
}) |
|||
|
|||
gulp.task('styles', () => { |
|||
return gulp.src([`${styleFileDirTemp}/aui.scss`]) |
|||
.pipe($.sass().on('error', $.sass.logError)) |
|||
.pipe($.autoprefixer({ |
|||
browsers: etOptions.browsers, |
|||
cascade: false |
|||
})) |
|||
.pipe($.cleanCss()) |
|||
.pipe($.rename('aui.css')) |
|||
.pipe(gulp.dest(`${themeFileDir}/${theme.name}`)) |
|||
}) |
|||
File diff suppressed because it is too large
@ -0,0 +1,88 @@ |
|||
{ |
|||
"name": "epmet-oper-web", |
|||
"version": "2.0.0", |
|||
"private": true, |
|||
"scripts": { |
|||
"serve": "vue-cli-service serve", |
|||
"build": "vue-cli-service build", |
|||
"build:sit": "vue-cli-service build --mode production.sit", |
|||
"build:uat": "vue-cli-service build --mode production.uat", |
|||
"build:prod": "vue-cli-service build --mode production", |
|||
"lint": "vue-cli-service lint", |
|||
"et": "node_modules/.bin/et", |
|||
"et:init": "node_modules/.bin/et -i", |
|||
"et:list": "gulp themes" |
|||
}, |
|||
"dependencies": { |
|||
"axios": "^0.19.0", |
|||
"babel-eslint": "^8.0.1", |
|||
"babel-plugin-component": "^1.1.1", |
|||
"element-theme": "^2.0.1", |
|||
"element-ui": "^2.13.0", |
|||
"gulp-autoprefixer": "^6.1.0", |
|||
"gulp-clean-css": "^4.2.0", |
|||
"gulp-load-plugins": "^2.0.0", |
|||
"gulp-rename": "^1.4.0", |
|||
"gulp-sass": "^4.0.2", |
|||
"js-cookie": "^2.2.0", |
|||
"lodash": "^4.17.15", |
|||
"node-sass": "^4.12.0", |
|||
"portfinder": "^1.0.21", |
|||
"qs": "^6.7.0", |
|||
"quill": "^1.3.6", |
|||
"sass-loader": "^7.1.0", |
|||
"screenfull": "^4.2.1", |
|||
"svg-sprite-loader": "^4.1.6", |
|||
"vue": "^2.6.11", |
|||
"vue-i18n": "^8.12.0", |
|||
"vue-router": "^3.0.7", |
|||
"vuex": "^3.1.1" |
|||
}, |
|||
"devDependencies": { |
|||
"@vue/cli-plugin-babel": "^3.10.0", |
|||
"@vue/cli-plugin-eslint": "^3.10.0", |
|||
"@vue/cli-service": "^3.10.0", |
|||
"@vue/eslint-config-standard": "^4.0.0", |
|||
"element-theme-chalk": "^2.13.0", |
|||
"natives": "^1.1.6", |
|||
"vue-template-compiler": "^2.6.11" |
|||
}, |
|||
"eslintConfig": { |
|||
"root": true, |
|||
"env": { |
|||
"node": true |
|||
}, |
|||
"extends": [ |
|||
"plugin:vue/essential", |
|||
"@vue/standard" |
|||
], |
|||
"rules": {}, |
|||
"parserOptions": { |
|||
"parser": "babel-eslint" |
|||
} |
|||
}, |
|||
"postcss": { |
|||
"plugins": { |
|||
"autoprefixer": {} |
|||
} |
|||
}, |
|||
"engines": { |
|||
"node": ">= 8.11.1", |
|||
"npm": ">= 5.6.0" |
|||
}, |
|||
"browserslist": [ |
|||
"> 1%", |
|||
"last 2 versions", |
|||
"not ie <= 10" |
|||
], |
|||
"element-theme": { |
|||
"config": "./src/element-ui/theme-variables.scss", |
|||
"out": "./src/element-ui/theme", |
|||
"minimize": true, |
|||
"browsers": [ |
|||
"> 1%", |
|||
"last 2 versions", |
|||
"not ie <= 10" |
|||
] |
|||
} |
|||
} |
|||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,50 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
|||
<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico"> |
|||
<!-- 站点配置 --> |
|||
<script> |
|||
window.SITE_CONFIG = {}; |
|||
window.SITE_CONFIG['version'] = 'v2.0.0'; |
|||
window.SITE_CONFIG['nodeEnv'] = '<%= process.env.VUE_APP_NODE_ENV %>'; |
|||
window.SITE_CONFIG['apiURL'] = ''; // api请求地址 |
|||
window.SITE_CONFIG['storeState'] = {}; // vuex本地储存初始化状态（用于不刷新页面的情况下，也能重置初始化项目中所有状态） |
|||
window.SITE_CONFIG['contentTabDefault'] = { // 内容标签页默认属性对象 |
|||
'name': '', // 名称, 由 this.$route.name 自动赋值（默认，名称 === 路由名称 === 路由路径） |
|||
'params': {}, // 参数, 由 this.$route.params 自动赋值 |
|||
'query': {}, // 查询参数, 由 this.$route.query 自动赋值 |
|||
'menuId': '', // 菜单id（用于选中侧边栏菜单，与this.$store.state.sidebarMenuActiveName进行匹配） |
|||
'title': '', // 标题 |
|||
'isTab': true, // 是否通过tab展示内容? |
|||
'iframeURL': '' // 是否通过iframe嵌套展示内容? (以http[s]://开头, 自动匹配) |
|||
}; |
|||
window.SITE_CONFIG['menuList'] = []; // 左侧菜单列表（后台返回，未做处理） |
|||
window.SITE_CONFIG['permissions'] = []; // 页面按钮操作权限（后台返回，未做处理） |
|||
window.SITE_CONFIG['dynamicRoutes'] = []; // 动态路由列表 |
|||
window.SITE_CONFIG['dynamicMenuRoutes'] = []; // 动态(菜单)路由列表 |
|||
window.SITE_CONFIG['dynamicMenuRoutesHasAdded'] = false; // 动态(菜单)路由是否已经添加的状态标示（用于判断是否需要重新拉取数据并进行动态添加操作） |
|||
</script> |
|||
|
|||
<!-- 开发环境 --> |
|||
<% if (process.env.VUE_APP_NODE_ENV === 'dev') { %> |
|||
<script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/api';</script> |
|||
<% } %> |
|||
<!-- 集成测试环境 --> |
|||
<% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %> |
|||
<script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/api/oper';</script> |
|||
<% } %> |
|||
<!-- 验收测试环境 --> |
|||
<% if (process.env.VUE_APP_NODE_ENV === 'prod:uat') { %> |
|||
<script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/api/oper';</script> |
|||
<% } %> |
|||
<!-- 生产环境 --> |
|||
<% if (process.env.VUE_APP_NODE_ENV === 'prod') { %> |
|||
<script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/api/oper';</script> |
|||
<% } %> |
|||
</head> |
|||
<body> |
|||
<div id="app"></div> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,29 @@ |
|||
<template> |
|||
<transition name="el-fade-in-linear"> |
|||
<router-view /> |
|||
</transition> |
|||
</template> |
|||
|
|||
<script> |
|||
import Cookies from 'js-cookie' |
|||
import { messages } from '@/i18n' |
|||
export default { |
|||
watch: { |
|||
'$i18n.locale': 'i18nHandle' |
|||
}, |
|||
created () { |
|||
this.i18nHandle(this.$i18n.locale) |
|||
}, |
|||
methods: { |
|||
i18nHandle (val, oldVal) { |
|||
Cookies.set('language', val) |
|||
document.querySelector('html').setAttribute('lang', val) |
|||
document.title = messages[val].brand.lg |
|||
// 非登录页面，切换语言刷新页面 |
|||
if (this.$route.name !== 'login' && oldVal) { |
|||
window.location.reload() |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 135 KiB |
@ -0,0 +1,11 @@ |
|||
// 变量 |
|||
@import "~@/element-ui/theme-variables.scss"; |
|||
@import "./variables.scss"; |
|||
// 公共 |
|||
@import "./normalize.scss"; |
|||
@import "./common.scss"; |
|||
// 页面 |
|||
@import "./pages/login.scss"; |
|||
@import "./pages/404.scss"; |
|||
// 模块 |
|||
@import "./modules/home.scss"; |
|||
@ -0,0 +1,713 @@ |
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: border-box; |
|||
} |
|||
body { |
|||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; |
|||
font-size: $--font-size-base; |
|||
line-height: $base--line-height; |
|||
color: $--color-text-primary; |
|||
background-color: #fff; |
|||
} |
|||
a { |
|||
color: mix(#fff, $--color-primary, 20%); |
|||
text-decoration: none; |
|||
&:focus, |
|||
&:hover { |
|||
color: $--color-primary; |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
img { |
|||
vertical-align: middle; |
|||
} |
|||
:focus, |
|||
:hover { |
|||
outline: none; |
|||
} |
|||
|
|||
/* Utils |
|||
------------------------------ */ |
|||
[v-cloak] { |
|||
display: none; |
|||
} |
|||
.clearfix:before, |
|||
.clearfix:after { |
|||
content: " "; |
|||
display: table; |
|||
} |
|||
.clearfix:after { |
|||
clear: both; |
|||
} |
|||
.fr { |
|||
float: right !important; |
|||
} |
|||
.fl { |
|||
float: left !important; |
|||
} |
|||
.fi { |
|||
float: initial !important; |
|||
} |
|||
.m-auto { |
|||
margin: auto !important; |
|||
} |
|||
.mt-auto { |
|||
margin-top: auto !important; |
|||
} |
|||
.mr-auto { |
|||
margin-right: auto !important; |
|||
} |
|||
.mb-auto { |
|||
margin-bottom: auto !important; |
|||
} |
|||
.ml-auto { |
|||
margin-left: auto !important; |
|||
} |
|||
.text-right { |
|||
text-align: right !important; |
|||
} |
|||
.text-center { |
|||
text-align: center !important; |
|||
} |
|||
.text-left { |
|||
text-align: left !important; |
|||
} |
|||
.w-percent-100 { |
|||
width: 100% !important; |
|||
} |
|||
.base-line-height { |
|||
line-height: $base--line-height !important; |
|||
} |
|||
|
|||
|
|||
/* Reset element-ui |
|||
------------------------------ */ |
|||
.aui-wrapper { |
|||
.el-card + .el-card { |
|||
margin-top: 15px; |
|||
} |
|||
.el-input__prefix .el-input__icon { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
.el-date-editor .el-range-separator { |
|||
width: 8%; |
|||
} |
|||
.el-table th { |
|||
color: $--color-text-primary; |
|||
background-color: $--background-color-base; |
|||
} |
|||
.el-pagination { |
|||
margin-top: 15px; |
|||
text-align: right; |
|||
} |
|||
.el-table__expand-icon { |
|||
display: inline-block; |
|||
width: 14px; |
|||
vertical-align: middle; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
|
|||
|
|||
/* Common |
|||
------------------------------ */ |
|||
// 图标 |
|||
.icon-svg { |
|||
width: 1em; |
|||
height: 1em; |
|||
fill: currentColor; |
|||
vertical-align: middle; |
|||
overflow: hidden; |
|||
} |
|||
// 卡片 |
|||
.aui-card--fill .el-card__header { |
|||
height: $content--card-header-height; |
|||
line-height: $content--card-header-height - 36px; |
|||
} |
|||
.aui-card__title { |
|||
font-size: 16px; |
|||
} |
|||
// 表单 |
|||
.aui-form__label-icon { |
|||
display: inline-block; |
|||
margin: 0 3px; |
|||
vertical-align: middle; |
|||
font-size: 18px; |
|||
color: $--color-text-secondary; |
|||
} |
|||
// 按钮 |
|||
.aui-button--dashed { |
|||
border-style: dashed; |
|||
&:focus, |
|||
&:hover { |
|||
background-color: transparent; |
|||
} |
|||
&-add { |
|||
> span > *[class*="el-icon-"], |
|||
> span > *[class*="icon"] { |
|||
vertical-align: middle; |
|||
font-size: 18px; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
// 主题工具 |
|||
.aui-theme-tools { |
|||
position: fixed; |
|||
top: $navbar--height + $content--tabs-header-height + 15px; |
|||
right: -210px; |
|||
bottom: 0; |
|||
z-index: 1010; |
|||
width: 210px; |
|||
transition: right .3s; |
|||
&--open { |
|||
right: 0; |
|||
} |
|||
&__toggle { |
|||
position: absolute; |
|||
top: 80px; |
|||
left: -40px; |
|||
width: 40px; |
|||
padding: 10px 8px; |
|||
text-align: center; |
|||
font-size: 20px; |
|||
border-right: 0; |
|||
border-radius: $--border-radius-base 0 0 $--border-radius-base; |
|||
color: #fff; |
|||
background-color: $--color-primary; |
|||
cursor: pointer; |
|||
} |
|||
&__content { |
|||
height: 100%; |
|||
padding: 5px 20px 20px; |
|||
border: 1px solid $--border-color-lighter; |
|||
border-radius: $--border-radius-base 0 0 $--border-radius-base; |
|||
background-color: #fff; |
|||
.el-radio { |
|||
display: block; |
|||
margin-left: 0 !important; |
|||
line-height: 28px; |
|||
} |
|||
} |
|||
&__item + &__item { |
|||
margin-top: 15px; |
|||
border-top: 1px solid $--border-color-lighter; |
|||
} |
|||
} |
|||
|
|||
|
|||
/* Layout |
|||
------------------------------ */ |
|||
.aui-wrapper { |
|||
position: relative; |
|||
padding-top: $navbar--height; |
|||
} |
|||
|
|||
|
|||
/* Sidebar fold |
|||
------------------------------ */ |
|||
.aui-sidebar--fold { |
|||
.aui-navbar { |
|||
&__header, |
|||
&__brand { |
|||
width: $sidebar--width-fold; |
|||
} |
|||
&__brand { |
|||
&-lg { |
|||
display: none; |
|||
} |
|||
&-mini { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
&__icon-menu--switch { |
|||
transform: rotateZ(180deg); |
|||
} |
|||
} |
|||
.aui-sidebar { |
|||
&__inner { |
|||
width: $sidebar--width-fold + 20px; |
|||
} |
|||
&, |
|||
&__menu { |
|||
width: $sidebar--width-fold; |
|||
} |
|||
&__menu > li > .el-submenu__title { |
|||
text-align: center; |
|||
} |
|||
&__menu-icon { |
|||
margin-right: 0; |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
.aui-content { |
|||
&__wrapper { |
|||
margin-left: $sidebar--width-fold; |
|||
} |
|||
&--tabs > .el-tabs > .el-tabs__header { |
|||
left: $sidebar--width-fold; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
/* Navbar |
|||
------------------------------ */ |
|||
.aui-navbar { |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
left: 0; |
|||
z-index: 1030; |
|||
display: flex; |
|||
align-items: stretch; |
|||
height: $navbar--height; |
|||
background-color: $--color-primary; |
|||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05); |
|||
&--colorful { |
|||
.aui-navbar__body { |
|||
background-color: transparent; |
|||
} |
|||
.aui-navbar__menu { |
|||
> .el-menu-item, |
|||
> .el-submenu > .el-submenu__title { |
|||
color: #fff; |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
background-color: mix(#000, $--color-primary, 15%); |
|||
} |
|||
} |
|||
> .el-menu-item.is-active, |
|||
> .el-submenu.is-active > .el-submenu__title { |
|||
color: #fff; |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
} |
|||
} |
|||
.el-menu-item i, |
|||
.el-submenu__title i, |
|||
.el-menu-item svg, |
|||
.el-submenu__title svg, |
|||
.el-menu-item .el-dropdown { |
|||
color: #fff !important; |
|||
} |
|||
.el-button { |
|||
color: #fff; |
|||
background-color: transparent; |
|||
} |
|||
} |
|||
.aui-navbar__search { |
|||
&-txt { |
|||
.el-input__inner { |
|||
color: #fff; |
|||
border-color: #fff; |
|||
&::-webkit-input-placeholder { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
&__header { |
|||
position: relative; |
|||
width: $sidebar--width; |
|||
height: $navbar--height; |
|||
transition: width .3s; |
|||
} |
|||
&__brand { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 5px; |
|||
margin: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 20px; |
|||
text-transform: uppercase; |
|||
white-space: nowrap; |
|||
color: #fff; |
|||
overflow: hidden; |
|||
transition: width .3s; |
|||
&-lg, |
|||
&-mini { |
|||
max-width: 100%; |
|||
color: #fff; |
|||
cursor: pointer; |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
&-mini { |
|||
display: none; |
|||
} |
|||
} |
|||
&__body { |
|||
position: relative; |
|||
display: flex; |
|||
flex: 1; |
|||
background-color: #fff; |
|||
overflow: hidden; |
|||
} |
|||
&__menu { |
|||
background-color: transparent; |
|||
border-bottom: 0 !important; |
|||
a:focus, |
|||
a:hover { |
|||
text-decoration: none; |
|||
} |
|||
.el-menu-item, |
|||
.el-submenu > .el-submenu__title { |
|||
height: $navbar--height; |
|||
padding: 0 15px; |
|||
line-height: $navbar--height; |
|||
border-color: transparent !important; |
|||
} |
|||
.el-menu-item.is-active, |
|||
.el-submenu.is-active > .el-submenu__title { |
|||
color: $--color-text-secondary; |
|||
&:focus, |
|||
&:hover { |
|||
color: $--color-text-primary; |
|||
} |
|||
} |
|||
.el-menu-item { |
|||
&:focus, |
|||
&:hover { |
|||
.aui-navbar__icon-menu { |
|||
color: $--color-text-primary; |
|||
} |
|||
.el-dropdown { |
|||
color: $--color-text-primary; |
|||
.el-icon-arrow-down { |
|||
transform: rotateZ(180deg); |
|||
} |
|||
} |
|||
} |
|||
* { |
|||
vertical-align: initial; |
|||
} |
|||
.aui-navbar__icon-menu { |
|||
vertical-align: middle; |
|||
font-size: 16px; |
|||
} |
|||
.el-dropdown { |
|||
color: $--color-text-secondary; |
|||
.el-icon-arrow-down { |
|||
width: auto; |
|||
font-size: 12px; |
|||
margin: 0 0 0 5px; |
|||
transition: transform .3s; |
|||
} |
|||
} |
|||
} |
|||
.el-badge { |
|||
display: inline; |
|||
z-index: 2; |
|||
&__content { |
|||
line-height: 16px; |
|||
} |
|||
} |
|||
} |
|||
&__search { |
|||
> *[class*="el-icon-"], |
|||
> *[class*="icon"] { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
&-txt { |
|||
width: 0; |
|||
transition: width .3s, margin-left .3s; |
|||
&.is-show { |
|||
width: 210px; |
|||
margin-left: 8px; |
|||
} |
|||
.el-input__inner { |
|||
height: $navbar--height - 20px; |
|||
padding: 0; |
|||
line-height: $navbar--height - 20px; |
|||
border-color: $--color-text-primary; |
|||
border-top: 0; |
|||
border-right: 0; |
|||
border-left: 0; |
|||
border-radius: 0; |
|||
background: transparent; |
|||
} |
|||
} |
|||
} |
|||
&__avatar { |
|||
.el-dropdown-link { |
|||
> img { |
|||
width: 36px; |
|||
height: auto; |
|||
margin-right: 5px; |
|||
border-radius: 100%; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
/* Sidebar |
|||
------------------------------ */ |
|||
.aui-sidebar { |
|||
position: fixed; |
|||
top: $navbar--height; |
|||
left: 0; |
|||
bottom: 0; |
|||
z-index: 1020; |
|||
width: $sidebar--width; |
|||
background-color: #fff; |
|||
box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05); |
|||
overflow: hidden; |
|||
transition: width .3s; |
|||
&--dark { |
|||
background-color: $sidebar--background-color-dark; |
|||
.aui-sidebar__menu, |
|||
> .el-menu--popup { |
|||
background-color: $sidebar--background-color-dark; |
|||
.el-menu-item, |
|||
.el-submenu > .el-submenu__title { |
|||
color: $sidebar--text-color-dark; |
|||
&:focus, |
|||
&:hover { |
|||
color: mix(#fff, $sidebar--text-color-dark, 50%); |
|||
background-color: mix(#fff, $sidebar--background-color-dark, 2.5%); |
|||
} |
|||
} |
|||
.el-menu, |
|||
.el-submenu.is-opened { |
|||
background-color: mix(#000, $sidebar--background-color-dark, 15%); |
|||
} |
|||
.el-menu-item.is-active, |
|||
.el-submenu.is-active > .el-submenu__title { |
|||
color: mix(#fff, $sidebar--text-color-dark, 80%); |
|||
} |
|||
} |
|||
} |
|||
&__inner { |
|||
position: relative; |
|||
z-index: 1; |
|||
width: $sidebar--width + 20px; |
|||
height: 100%; |
|||
padding-bottom: 15px; |
|||
overflow-x: hidden; |
|||
overflow-y: scroll; |
|||
transition: width .3s; |
|||
} |
|||
&__menu { |
|||
width: $sidebar--width; |
|||
border-right: 0; |
|||
transition: width .3s; |
|||
.el-menu-item, |
|||
.el-submenu__title { |
|||
height: $sidebar--menu-item-height; |
|||
line-height: $sidebar--menu-item-height; |
|||
} |
|||
} |
|||
&__menu-icon { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
width: 24px !important; |
|||
margin-right: 5px; |
|||
text-align: center; |
|||
font-size: 16px; |
|||
color: inherit !important; |
|||
transition: font-size .3s; |
|||
} |
|||
} |
|||
|
|||
|
|||
/* Content |
|||
------------------------------ */ |
|||
.aui-content { |
|||
position: relative; |
|||
padding: $content--padding; |
|||
min-height: calc(100vh - #{$navbar--height}); |
|||
&__wrapper { |
|||
position: relative; |
|||
margin-left: $sidebar--width; |
|||
min-height: calc(100vh - #{$navbar--height}); |
|||
background-color: $content--background-color; |
|||
transition: margin-left .3s; |
|||
} |
|||
> .aui-card--fill > .el-card__body { |
|||
min-height: calc(#{$content--fill-height} - 2px); |
|||
} |
|||
> .aui-card--fill > .el-card__header + .el-card__body { |
|||
min-height: calc(#{$content--fill-height} - #{$content--card-header-height} - 2px); |
|||
} |
|||
&--tabs { |
|||
padding: $content--tabs-header-height 0 0; |
|||
} |
|||
&--tabs-tools { |
|||
position: fixed; |
|||
top: $navbar--height; |
|||
right: 0; |
|||
z-index: 931; |
|||
min-width: $content--tabs-header-height; |
|||
height: $content--tabs-header-height; |
|||
padding: 0 12px; |
|||
text-align: center; |
|||
font-size: 16px; |
|||
line-height: $content--tabs-header-height; |
|||
background-color: $--background-color-base; |
|||
cursor: pointer; |
|||
} |
|||
&--tabs-icon-nav { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
font-size: 16px; |
|||
} |
|||
> .el-tabs { |
|||
> .el-tabs__header { |
|||
position: fixed; |
|||
top: $navbar--height; |
|||
left: $sidebar--width; |
|||
right: 0; |
|||
z-index: 930; |
|||
padding: 0 55px 0 15px; |
|||
margin: 0; |
|||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); |
|||
background-color: #fff; |
|||
transition: left .3s; |
|||
> .el-tabs__nav-wrap { |
|||
margin-bottom: 0; |
|||
&:after { |
|||
display: none; |
|||
} |
|||
> .el-tabs__nav-next, |
|||
> .el-tabs__nav-prev { |
|||
line-height: $content--tabs-header-height; |
|||
} |
|||
> .el-tabs__nav-scroll > .el-tabs__nav { |
|||
& > .el-tabs__active-bar { |
|||
display: none; |
|||
} |
|||
& > .el-tabs__item { |
|||
height: $content--tabs-header-height; |
|||
padding: 0 15px; |
|||
line-height: $content--tabs-header-height; |
|||
border: 0; |
|||
color: $--color-text-regular; |
|||
&:focus, |
|||
&:hover, |
|||
&.is-active { |
|||
color: $--color-text-primary; |
|||
background-color: $--background-color-base; |
|||
&:after { |
|||
display: block; |
|||
} |
|||
> .el-icon-close { |
|||
color: $--color-text-primary; |
|||
} |
|||
} |
|||
&:after { |
|||
display: none; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
content: ''; |
|||
width: 100%; |
|||
height: 2px; |
|||
background-color: $--color-primary; |
|||
} |
|||
+ .el-tabs__item { |
|||
margin-left: 1px; |
|||
} |
|||
> .el-icon-close { |
|||
width: 14px; |
|||
margin-left: 15px; |
|||
color: $--color-text-secondary; |
|||
} |
|||
> i.icon { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
> .el-tabs__content { |
|||
padding: $content--padding; |
|||
.el-loading-mask { |
|||
z-index: 830; |
|||
} |
|||
> .el-tab-pane { |
|||
min-height: calc(#{$content--fill-height-tabs}); |
|||
> .aui-card--fill > .el-card__body { |
|||
min-height: calc(#{$content--fill-height-tabs} - 2px); |
|||
} |
|||
> .aui-card--fill > .el-card__header + .el-card__body { |
|||
min-height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px); |
|||
} |
|||
&.is-iframe { |
|||
height: calc(#{$content--fill-height-tabs} + #{$content--padding * 2}); |
|||
margin: -$content--padding; |
|||
min-height: auto; |
|||
> .aui-card--fill { |
|||
background-color: transparent; |
|||
} |
|||
> .aui-card--fill > .el-card__header { |
|||
background-color: #fff; |
|||
} |
|||
> .aui-card--fill > .el-card__body { |
|||
height: calc(#{$content--fill-height-tabs} - 2px); |
|||
margin: $content--padding; |
|||
min-height: auto; |
|||
border: $--border-base; |
|||
border-color: $--border-color-lighter; |
|||
border-radius: $--border-radius-base; |
|||
background-color: #fff; |
|||
} |
|||
> .aui-card--fill > .el-card__header + .el-card__body { |
|||
height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
// quill富文本编辑器 |
|||
.ql-toolbar { |
|||
line-height: 20px; |
|||
&.ql-snow { |
|||
border-color: $--border-color-base; |
|||
} |
|||
.ql-formats { |
|||
margin: 0 5px; |
|||
} |
|||
} |
|||
.ql-container { |
|||
height: 150px; |
|||
&.ql-snow { |
|||
border-color: $--border-color-base; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
/* Page |
|||
------------------------------ */ |
|||
*[class*="aui-page__"] { |
|||
padding-top: 0; |
|||
.aui-content { |
|||
min-height: auto; |
|||
&__wrapper { |
|||
min-height: 100vh; |
|||
margin-left: 0; |
|||
} |
|||
> .aui-card--fill > .el-card__body { |
|||
min-height: calc(100vh - #{$content--padding * 2} - 2px); |
|||
} |
|||
> .aui-card--fill > .el-card__header + .el-card__body { |
|||
min-height: calc(100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
.mod-home { |
|||
line-height: 1.8; |
|||
ul li { |
|||
color: $--color-text-regular; |
|||
} |
|||
} |
|||
@ -0,0 +1,447 @@ |
|||
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ |
|||
|
|||
/* Document |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* 1. Correct the line height in all browsers. |
|||
* 2. Prevent adjustments of font size after orientation changes in |
|||
* IE on Windows Phone and in iOS. |
|||
*/ |
|||
|
|||
html { |
|||
line-height: 1.15; /* 1 */ |
|||
-ms-text-size-adjust: 100%; /* 2 */ |
|||
-webkit-text-size-adjust: 100%; /* 2 */ |
|||
} |
|||
|
|||
/* Sections |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Remove the margin in all browsers (opinionated). |
|||
*/ |
|||
|
|||
body { |
|||
margin: 0; |
|||
} |
|||
|
|||
/** |
|||
* Add the correct display in IE 9-. |
|||
*/ |
|||
|
|||
article, |
|||
aside, |
|||
footer, |
|||
header, |
|||
nav, |
|||
section { |
|||
display: block; |
|||
} |
|||
|
|||
/** |
|||
* Correct the font size and margin on `h1` elements within `section` and |
|||
* `article` contexts in Chrome, Firefox, and Safari. |
|||
*/ |
|||
|
|||
h1 { |
|||
font-size: 2em; |
|||
margin: 0.67em 0; |
|||
} |
|||
|
|||
/* Grouping content |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Add the correct display in IE 9-. |
|||
* 1. Add the correct display in IE. |
|||
*/ |
|||
|
|||
figcaption, |
|||
figure, |
|||
main { /* 1 */ |
|||
display: block; |
|||
} |
|||
|
|||
/** |
|||
* Add the correct margin in IE 8. |
|||
*/ |
|||
|
|||
figure { |
|||
margin: 1em 40px; |
|||
} |
|||
|
|||
/** |
|||
* 1. Add the correct box sizing in Firefox. |
|||
* 2. Show the overflow in Edge and IE. |
|||
*/ |
|||
|
|||
hr { |
|||
box-sizing: content-box; /* 1 */ |
|||
height: 0; /* 1 */ |
|||
overflow: visible; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the inheritance and scaling of font size in all browsers. |
|||
* 2. Correct the odd `em` font sizing in all browsers. |
|||
*/ |
|||
|
|||
pre { |
|||
font-family: monospace, monospace; /* 1 */ |
|||
font-size: 1em; /* 2 */ |
|||
} |
|||
|
|||
/* Text-level semantics |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* 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; /* 1 */ |
|||
-webkit-text-decoration-skip: objects; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* 1. Remove the bottom border in Chrome 57- and Firefox 39-. |
|||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. |
|||
*/ |
|||
|
|||
abbr[title] { |
|||
border-bottom: none; /* 1 */ |
|||
text-decoration: underline; /* 2 */ |
|||
text-decoration: underline dotted; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* 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; |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the inheritance and scaling of font size in all browsers. |
|||
* 2. Correct the odd `em` font sizing in all browsers. |
|||
*/ |
|||
|
|||
code, |
|||
kbd, |
|||
samp { |
|||
font-family: monospace, monospace; /* 1 */ |
|||
font-size: 1em; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Add the correct font style in Android 4.3-. |
|||
*/ |
|||
|
|||
dfn { |
|||
font-style: italic; |
|||
} |
|||
|
|||
/** |
|||
* Add the correct background and color in IE 9-. |
|||
*/ |
|||
|
|||
mark { |
|||
background-color: #ff0; |
|||
color: #000; |
|||
} |
|||
|
|||
/** |
|||
* Add the correct font size in all browsers. |
|||
*/ |
|||
|
|||
small { |
|||
font-size: 80%; |
|||
} |
|||
|
|||
/** |
|||
* Prevent `sub` and `sup` elements from affecting the line height in |
|||
* all browsers. |
|||
*/ |
|||
|
|||
sub, |
|||
sup { |
|||
font-size: 75%; |
|||
line-height: 0; |
|||
position: relative; |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
sub { |
|||
bottom: -0.25em; |
|||
} |
|||
|
|||
sup { |
|||
top: -0.5em; |
|||
} |
|||
|
|||
/* Embedded content |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Add the correct display in IE 9-. |
|||
*/ |
|||
|
|||
audio, |
|||
video { |
|||
display: inline-block; |
|||
} |
|||
|
|||
/** |
|||
* Add the correct display in iOS 4-7. |
|||
*/ |
|||
|
|||
audio:not([controls]) { |
|||
display: none; |
|||
height: 0; |
|||
} |
|||
|
|||
/** |
|||
* Remove the border on images inside links in IE 10-. |
|||
*/ |
|||
|
|||
img { |
|||
border-style: none; |
|||
} |
|||
|
|||
/** |
|||
* Hide the overflow in IE. |
|||
*/ |
|||
|
|||
svg:not(:root) { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/* Forms |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* 1. Change the font styles in all browsers (opinionated). |
|||
* 2. Remove the margin in Firefox and Safari. |
|||
*/ |
|||
|
|||
button, |
|||
input, |
|||
optgroup, |
|||
select, |
|||
textarea { |
|||
font-family: sans-serif; /* 1 */ |
|||
font-size: 100%; /* 1 */ |
|||
line-height: 1.15; /* 1 */ |
|||
margin: 0; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Show the overflow in IE. |
|||
* 1. Show the overflow in Edge. |
|||
*/ |
|||
|
|||
button, |
|||
input { /* 1 */ |
|||
overflow: visible; |
|||
} |
|||
|
|||
/** |
|||
* Remove the inheritance of text transform in Edge, Firefox, and IE. |
|||
* 1. Remove the inheritance of text transform in Firefox. |
|||
*/ |
|||
|
|||
button, |
|||
select { /* 1 */ |
|||
text-transform: none; |
|||
} |
|||
|
|||
/** |
|||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` |
|||
* controls in Android 4. |
|||
* 2. Correct the inability to style clickable types in iOS and Safari. |
|||
*/ |
|||
|
|||
button, |
|||
html [type="button"], /* 1 */ |
|||
[type="reset"], |
|||
[type="submit"] { |
|||
-webkit-appearance: button; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Remove the inner border and padding in Firefox. |
|||
*/ |
|||
|
|||
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; |
|||
} |
|||
|
|||
/** |
|||
* Correct the padding in Firefox. |
|||
*/ |
|||
|
|||
fieldset { |
|||
padding: 0.35em 0.75em 0.625em; |
|||
} |
|||
|
|||
/** |
|||
* 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; |
|||
} |
|||
|
|||
/** |
|||
* 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 */ |
|||
} |
|||
|
|||
/* Interactive |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* 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; |
|||
} |
|||
|
|||
/* Scripting |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Add the correct display in IE 9-. |
|||
*/ |
|||
|
|||
canvas { |
|||
display: inline-block; |
|||
} |
|||
|
|||
/** |
|||
* Add the correct display in IE. |
|||
*/ |
|||
|
|||
template { |
|||
display: none; |
|||
} |
|||
|
|||
/* Hidden |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Add the correct display in IE 10-. |
|||
*/ |
|||
|
|||
[hidden] { |
|||
display: none; |
|||
} |
|||
@ -0,0 +1,48 @@ |
|||
.aui-page__not-found { |
|||
.aui-content { |
|||
display: flex; |
|||
flex-flow: column wrap; |
|||
align-items: center; |
|||
min-height: 100vh; |
|||
padding: 15% 50px 50px; |
|||
text-align: center; |
|||
&__wrapper { |
|||
height: 100vh; |
|||
background-color: transparent; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
} |
|||
.title { |
|||
margin: 0 0 15px; |
|||
font-size: 10em; |
|||
font-weight: 400; |
|||
color: $--color-text-regular; |
|||
} |
|||
.desc { |
|||
margin: 0 0 20px; |
|||
font-size: 26px; |
|||
color: $--color-text-secondary; |
|||
> em { |
|||
margin: 0 5px; |
|||
font-style: normal; |
|||
color: $--color-warning; |
|||
} |
|||
} |
|||
.btn-bar .el-button { |
|||
margin: 0 15px; |
|||
} |
|||
} |
|||
@media (max-width: 767px) { |
|||
.aui-page__not-found { |
|||
.title { |
|||
font-size: 8em; |
|||
} |
|||
.desc { |
|||
font-size: 20px; |
|||
} |
|||
.btn-bar .el-button { |
|||
margin: 0 7.5px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,220 @@ |
|||
.aui-page__login { |
|||
&::before, |
|||
&::after { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: -1; |
|||
content: ""; |
|||
} |
|||
&::before { |
|||
background-image: url(~@/assets/img/login_bg.jpg); |
|||
background-size: cover; |
|||
} |
|||
&::after { |
|||
background-color: rgba(38, 50, 56, .4); |
|||
} |
|||
.aui-content { |
|||
display: flex; |
|||
flex-flow: column wrap; |
|||
justify-content: center; |
|||
align-items: center; |
|||
min-height: 100vh; |
|||
padding: 50px 20px 150px; |
|||
text-align: center; |
|||
&__wrapper { |
|||
height: 100vh; |
|||
background-color: transparent; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
} |
|||
.login-header { |
|||
padding: 20px; |
|||
color: #fff; |
|||
.login-brand { |
|||
margin: 0 0 15px; |
|||
font-size: 40px; |
|||
font-weight: 400; |
|||
letter-spacing: 2px; |
|||
text-transform: uppercase; |
|||
} |
|||
.login-intro { |
|||
padding: 0; |
|||
margin: 0; |
|||
list-style: none; |
|||
> li { |
|||
font-size: 16px; |
|||
line-height: 1.5; |
|||
color: rgba(255, 255, 255, .6); |
|||
& + li { |
|||
margin-top: 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.login-body, |
|||
.login-footer { |
|||
width: 460px; |
|||
} |
|||
.login-body { |
|||
padding: 20px 30px; |
|||
background-color: #fff; |
|||
.login-title { |
|||
font-size: 18px; |
|||
font-weight: 400; |
|||
} |
|||
.el-input__prefix .el-input__icon { |
|||
font-size: 16px; |
|||
} |
|||
.login-captcha { |
|||
height: $--input-height; |
|||
line-height: $--input-height -2px; |
|||
> img { |
|||
max-width: 100%; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
.login-shortcut { |
|||
margin-bottom: 20px; |
|||
&__title { |
|||
position: relative; |
|||
margin: 0 0 15px; |
|||
font-weight: 400; |
|||
|
|||
&::before { |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 0; |
|||
left: 0; |
|||
z-index: 1; |
|||
content: ""; |
|||
height: 1px; |
|||
margin-top: -.5px; |
|||
background-color: $--border-color-base; |
|||
overflow: hidden; |
|||
} |
|||
> span { |
|||
position: relative; |
|||
z-index: 2; |
|||
padding: 0 20px; |
|||
color: rgba(0, 0, 0, .3); |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
&__list { |
|||
padding: 0; |
|||
margin: 0; |
|||
list-style: none; |
|||
font-size: 0; |
|||
> li { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin: 0 10px; |
|||
font-size: 28px; |
|||
} |
|||
} |
|||
} |
|||
.login-guide { |
|||
color: rgba(0, 0, 0, .3); |
|||
} |
|||
} |
|||
.login-footer { |
|||
position: absolute; |
|||
bottom: 0; |
|||
padding: 20px; |
|||
color: rgba(255, 255, 255, .6); |
|||
p { |
|||
margin: 10px 0; |
|||
} |
|||
a { |
|||
padding: 0 5px; |
|||
color: rgba(255, 255, 255, .6); |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
// 右侧垂直风格 |
|||
&--right-vertical { |
|||
.aui-content { |
|||
flex-flow: row nowrap; |
|||
justify-content: flex-start; |
|||
align-items: stretch; |
|||
padding: 0; |
|||
} |
|||
.login-header { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-flow: column wrap; |
|||
justify-content: center; |
|||
padding: 30px 120px; |
|||
text-align: left; |
|||
} |
|||
.login-body { |
|||
position: relative; |
|||
display: flex; |
|||
flex-flow: column wrap; |
|||
justify-content: center; |
|||
padding: 120px 30px 150px; |
|||
text-align: center; |
|||
.login-guide { |
|||
margin-top: 0; |
|||
} |
|||
} |
|||
.login-footer { |
|||
right: 0; |
|||
color: $--color-text-regular; |
|||
a { |
|||
color: $--color-text-regular; |
|||
&:focus, |
|||
&:hover { |
|||
color: $--color-primary; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@media (max-width: 991px) { |
|||
.aui-page__login { |
|||
&--right-vertical { |
|||
.login-header { |
|||
padding: 30px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@media (max-width: 767px) { |
|||
.aui-page__login { |
|||
&--right-vertical { |
|||
.login-header { |
|||
.login-brand, |
|||
.login-intro { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@media (max-width: 575px) { |
|||
.aui-page__login { |
|||
.login-body, |
|||
.login-footer { |
|||
width: 100%; |
|||
} |
|||
.login-captcha { |
|||
text-align: left; |
|||
> img { |
|||
width: 136px; |
|||
} |
|||
} |
|||
&--right-vertical { |
|||
.login-header { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
// Base |
|||
$base--line-height: 1.15; |
|||
|
|||
// Navbar |
|||
$navbar--height: 50px; |
|||
|
|||
// Sidebar |
|||
$sidebar--width: 230px; |
|||
$sidebar--width-fold: 64px; |
|||
$sidebar--background-color-dark: #263238; |
|||
$sidebar--text-color-dark: #8a979e; |
|||
$sidebar--menu-item-height: 48px; |
|||
|
|||
// Content |
|||
$content--padding: 15px; |
|||
$content--background-color: #f1f4f5; |
|||
$content--card-header-height: 60px; |
|||
$content--tabs-header-height: 38px; |
|||
// Content, 填充整屏高度(非tabs状态) = 整屏高度 - 导航条高度 - aui-content上下内边距高度 |
|||
$content--fill-height: calc(100vh - #{$navbar--height} - #{$content--padding * 2}); |
|||
// Content, 填充整屏高度(是tabs状态) = 整屏高度 - 导航条高度 - tabs组件header高度 - tabs组件content上下内边距高度 |
|||
$content--fill-height-tabs: calc(100vh - #{$navbar--height} - #{$content--tabs-header-height} - #{$content--padding * 2}); |
|||
@ -0,0 +1,7 @@ |
|||
import RenDeptTree from './src/ren-dept-tree' |
|||
|
|||
RenDeptTree.install = function (Vue) { |
|||
Vue.component(RenDeptTree.name, RenDeptTree) |
|||
} |
|||
|
|||
export default RenDeptTree |
|||
@ -0,0 +1,118 @@ |
|||
<template> |
|||
<div> |
|||
<el-input v-model="showDeptName" :placeholder="placeholder" @focus="deptDialog"> |
|||
<el-button slot="append" icon="el-icon-search" @click="deptDialog"></el-button> |
|||
</el-input> |
|||
<el-input :value="value" style="display: none"></el-input> |
|||
<el-dialog :visible.sync="visibleDept" width="30%" :modal="false" :title="placeholder" :close-on-click-modal="false" :close-on-press-escape="false"> |
|||
<el-form size="mini" :inline="true"> |
|||
<el-form-item :label="$t('keyword')"> |
|||
<el-input v-model="filterText"></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="default">{{ $t('query') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-tree |
|||
class="filter-tree" |
|||
:data="deptList" |
|||
:default-expanded-keys="expandedKeys" |
|||
:props="{ label: 'name', children: 'children' }" |
|||
:expand-on-click-node="false" |
|||
:filter-node-method="filterNode" |
|||
:highlight-current="true" |
|||
node-key="id" |
|||
ref="tree"> |
|||
</el-tree> |
|||
<template slot="footer"> |
|||
<el-button type="default" @click="cancelHandle()" size="mini">{{ $t('cancel') }}</el-button> |
|||
<el-button v-if="query" type="info" @click="clearHandle()" size="mini">{{ $t('clear') }}</el-button> |
|||
<el-button type="primary" @click="commitHandle()" size="mini">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'RenDeptTree', |
|||
data () { |
|||
return { |
|||
filterText: '', |
|||
visibleDept: false, |
|||
deptList: [], |
|||
showDeptName: '', |
|||
expandedKeys: null, |
|||
defaultProps: { |
|||
children: 'children', |
|||
label: 'label' |
|||
} |
|||
} |
|||
}, |
|||
props: { |
|||
value: [Number, String], |
|||
deptName: String, |
|||
query: Boolean, |
|||
placeholder: String |
|||
}, |
|||
watch: { |
|||
filterText (val) { |
|||
this.$refs.tree.filter(val) |
|||
}, |
|||
deptName (val) { |
|||
this.showDeptName = val |
|||
} |
|||
}, |
|||
methods: { |
|||
deptDialog () { |
|||
this.expandedKeys = null |
|||
if (this.$refs.tree) { |
|||
this.$refs.tree.setCurrentKey(null) |
|||
} |
|||
this.visibleDept = true |
|||
this.getDeptList(this.value) |
|||
}, |
|||
filterNode (value, data) { |
|||
if (!value) return true |
|||
return data.name.indexOf(value) !== -1 |
|||
}, |
|||
getDeptList (id) { |
|||
return this.$http.get('/sys/dept/list').then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.deptList = res.data |
|||
this.$nextTick(() => { |
|||
this.$refs.tree.setCurrentKey(id) |
|||
this.expandedKeys = [id] |
|||
}) |
|||
}).catch(() => {}) |
|||
}, |
|||
cancelHandle () { |
|||
this.visibleDept = false |
|||
this.deptList = [] |
|||
this.filterText = '' |
|||
}, |
|||
clearHandle () { |
|||
this.$emit('input', '') |
|||
this.$emit('update:deptName', '') |
|||
this.showDeptName = '' |
|||
this.visibleDept = false |
|||
this.deptList = [] |
|||
this.filterText = '' |
|||
}, |
|||
commitHandle () { |
|||
const node = this.$refs.tree.getCurrentNode() |
|||
if (!node) { |
|||
this.$message.error(this.$t('dept.chooseerror')) |
|||
return |
|||
} |
|||
this.$emit('input', node.id) |
|||
this.$emit('update:deptName', node.name) |
|||
this.showDeptName = node.name |
|||
this.visibleDept = false |
|||
this.deptList = [] |
|||
this.filterText = '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,7 @@ |
|||
import RenProcessDetail from './src/ren-process-detail' |
|||
|
|||
RenProcessDetail.install = function (Vue) { |
|||
Vue.component(RenProcessDetail.name, RenProcessDetail) |
|||
} |
|||
|
|||
export default RenProcessDetail |
|||
@ -0,0 +1,79 @@ |
|||
<template> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<h4>{{ $t('process.flowImage') }}</h4> |
|||
<img :src="getResourceURL()" class="image"> |
|||
<h4>{{ $t('process.circulation') }}</h4> |
|||
<div class="mod-sys__dict"> |
|||
<el-table |
|||
v-loading="dataListLoading" |
|||
:data="dataList" |
|||
border |
|||
@selection-change="dataListSelectionChangeHandle" |
|||
@sort-change="dataListSortChangeHandle" |
|||
style="width: 100%;"> |
|||
<el-table-column prop="activityName" :label="$t('process.taskName')" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="assignee" :label="$t('process.assignee')" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="startTime" :label="$t('task.startTime')" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="endTime" :label="$t('task.endTime')" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="comment" :label="$t('process.comment')" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="durationInSeconds" :label="$t('task.durationInSeconds')" header-align="center" align="center" width="180"></el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
v-if="dataForm.pid === '0'" |
|||
:current-page="page" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="limit" |
|||
:total="total" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="pageSizeChangeHandle" |
|||
@current-change="pageCurrentChangeHandle"> |
|||
</el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
<style scoped> |
|||
.image { |
|||
width: 60%; |
|||
display: block; |
|||
margin: 0 auto 30px auto; |
|||
} |
|||
</style> |
|||
|
|||
<script> |
|||
import Cookies from 'js-cookie' |
|||
import qs from 'qs' |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
name: 'RenProcessDetail', |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/activiti/his/getTaskHandleDetailInfo', |
|||
getDataListIsPage: false, |
|||
createdIsNeed: false, |
|||
deleteIsBatch: true, |
|||
deleteIsBatchKey: 'deploymentId' |
|||
}, |
|||
dataForm: { |
|||
processInstanceId: '' |
|||
} |
|||
} |
|||
}, |
|||
created () { |
|||
this.dataForm.processInstanceId = this.$route.params.processInstanceId |
|||
this.getResourceURL() |
|||
this.getDataList() |
|||
}, |
|||
methods: { |
|||
// 获取流程(xml/image)url地址 |
|||
getResourceURL () { |
|||
var params = qs.stringify({ |
|||
'token': Cookies.get('token'), |
|||
'processInstanceId': this.dataForm.processInstanceId |
|||
}) |
|||
return `${window.SITE_CONFIG['apiURL']}/activiti/his/getInstImage?${params}` |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,7 @@ |
|||
import RenProcessMultiple from './src/ren-process-multiple' |
|||
|
|||
RenProcessMultiple.install = function (Vue) { |
|||
Vue.component(RenProcessMultiple.name, RenProcessMultiple) |
|||
} |
|||
|
|||
export default RenProcessMultiple |
|||
@ -0,0 +1,87 @@ |
|||
<template> |
|||
<div> |
|||
<ren-process-start v-if="startProcessVisible" :saveFormUrl="saveFormUrl" :updateInstanceIdUrl="updateInstanceIdUrl" :dataFormName="dataFormName" ref="renProcessStart"></ren-process-start> |
|||
<ren-process-running v-if="runningHandleVisible" ref="renProcessRunning"></ren-process-running> |
|||
<ren-process-detail v-if="processDetailVisible" ref="renProcessDetail"></ren-process-detail> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'RenProcessMultiple', |
|||
data () { |
|||
return { |
|||
// 是否显示启动流程 |
|||
startProcessVisible: false, |
|||
// 是否任务处理 |
|||
runningHandleVisible: false, |
|||
// 是否显示流程处理详情 |
|||
processDetailVisible: false, |
|||
// 用于区分流程启动（start）、任务处理(taskHandle)以及查看详情(null) |
|||
showType: null, |
|||
// 父级对象 |
|||
parentObj: null, |
|||
dataForm: { |
|||
processDefinitionKey: '', |
|||
taskId: '', |
|||
businessKey: '', |
|||
processInstanceId: '' |
|||
}, |
|||
// 回调函数 |
|||
callbacks: { |
|||
// 启动成功回调 |
|||
startProcessSuccessCallback: null, |
|||
// 启动失败回调 |
|||
startProcessErrorCallback: null, |
|||
// 任务处理成功回调 |
|||
taskHandleSuccessCallback: null, |
|||
// 任务处理失败回调 |
|||
taskHandleErrorCallback: null, |
|||
// 表单保存成功回调 |
|||
formSaveSuccessCallback: null, |
|||
// 表单保存失败回调 |
|||
formSaveErrorCallback: null |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
}, |
|||
created () { |
|||
this.$nextTick(() => { |
|||
if (!this.showType) { |
|||
this.startProcessVisible = false |
|||
this.runningHandleVisible = false |
|||
this.processDetailVisible = true |
|||
} else if (this.showType === 'start') { |
|||
// 启动流程 |
|||
this.startProcessVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.renProcessStart.rootObj = this.parentObj |
|||
this.$refs.renProcessStart.callbacks = this.callbacks |
|||
this.$refs.renProcessStart.dataForm.processDefinitionKey = this.dataForm.processDefinitionKey |
|||
}) |
|||
} else if (this.showType === 'taskHandle') { |
|||
// 任务处理 |
|||
this.runningHandleVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.renProcessRunning.rootObj = this.parentObj |
|||
this.$refs.renProcessRunning.dataForm.taskId = this.dataForm.taskId |
|||
this.$refs.renProcessRunning.dataForm.processInstanceId = this.dataForm.processInstanceId |
|||
this.$refs.renProcessRunning.callbacks = this.callbacks |
|||
this.$refs.renProcessRunning.dataForm.businessKey = this.dataForm.businessKey |
|||
this.$refs.renProcessRunning.dataForm.processDefinitionKey = this.dataForm.processDefinitionKey |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
props: { |
|||
saveFormUrl: String, |
|||
updateInstanceIdUrl: String, |
|||
dataFormName: String |
|||
}, |
|||
watch: { |
|||
}, |
|||
methods: { |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,7 @@ |
|||
import RenProcessRunning from './src/ren-process-running' |
|||
|
|||
RenProcessRunning.install = function (Vue) { |
|||
Vue.component(RenProcessRunning.name, RenProcessRunning) |
|||
} |
|||
|
|||
export default RenProcessRunning |
|||
@ -0,0 +1,100 @@ |
|||
<template> |
|||
<div> |
|||
<el-button type="primary" @click="completeTask()">{{ $t('process.completeTask') }}</el-button> |
|||
<el-button type="warning" @click="rejectTask()">{{ $t('process.rejectTask') }}</el-button> |
|||
<el-button type="success" @click="rollbackTask()">{{ $t('process.doBackRollback') }}</el-button> |
|||
<el-button type="info" @click="entrustTask()">{{ $t('process.entrustTask') }}</el-button> |
|||
<el-button type="danger" @click="terminationTask()">{{ $t('process.terminationTask') }}</el-button> |
|||
<ren-task-back v-if="renTaskBackVisible" ref="renTaskBack"></ren-task-back> |
|||
<ren-task-entrust v-if="renTaskEntrustVisible" ref="renTaskEntrust"></ren-task-entrust> |
|||
<ren-task-handle v-if="renTaskHandleVisible" ref="renTaskHandle"></ren-task-handle> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import RenTaskBack from './ren-task-back' |
|||
import RenTaskEntrust from './ren-task-entrust' |
|||
import RenTaskHandle from './ren-task-handle' |
|||
export default { |
|||
name: 'RenProcessRunning', |
|||
data () { |
|||
return { |
|||
// 是否显示退回窗口 |
|||
renTaskBackVisible: false, |
|||
renTaskEntrustVisible: false, |
|||
renTaskHandleVisible: false, |
|||
parentObj: null, |
|||
dataForm: { |
|||
taskId: '', |
|||
businessKey: '', |
|||
processDefinitionKey: '', |
|||
processInstanceId: '' |
|||
}, |
|||
// 回调函数 |
|||
callbacks: { |
|||
taskHandleSuccessCallback: null, |
|||
taskHandleErrorCallback: null |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
RenTaskBack, |
|||
RenTaskEntrust, |
|||
RenTaskHandle |
|||
}, |
|||
created () { |
|||
this.$nextTick(() => { |
|||
}) |
|||
}, |
|||
props: { |
|||
}, |
|||
watch: { |
|||
}, |
|||
methods: { |
|||
completeTask () { |
|||
this.renTaskHandleVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.renTaskHandle.dataForm.taskId = this.dataForm.taskId |
|||
this.$refs.renTaskHandle.callbacks = this.callbacks |
|||
this.$refs.renTaskHandle.handleType = 'complete' |
|||
this.$refs.renTaskHandle.init() |
|||
}) |
|||
}, |
|||
rejectTask () { |
|||
this.renTaskHandleVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.renTaskHandle.dataForm.taskId = this.dataForm.taskId |
|||
this.$refs.renTaskHandle.callbacks = this.callbacks |
|||
this.$refs.renTaskHandle.handleType = 'reject' |
|||
this.$refs.renTaskHandle.init() |
|||
}) |
|||
}, |
|||
rollbackTask () { |
|||
this.renTaskBackVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.renTaskBack.dataForm.taskId = this.dataForm.taskId |
|||
this.$refs.renTaskBack.dataForm.processInstanceId = this.dataForm.processInstanceId |
|||
this.$refs.renTaskBack.callbacks = this.callbacks |
|||
this.$refs.renTaskBack.init() |
|||
}) |
|||
}, |
|||
entrustTask () { |
|||
this.renTaskEntrustVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.renTaskEntrust.dataForm.taskId = this.dataForm.taskId |
|||
this.$refs.renTaskEntrust.callbacks = this.callbacks |
|||
this.$refs.renTaskEntrust.init() |
|||
}) |
|||
}, |
|||
terminationTask () { |
|||
this.renTaskHandleVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.renTaskHandle.dataForm.taskId = this.dataForm.taskId |
|||
this.$refs.renTaskHandle.callbacks = this.callbacks |
|||
this.$refs.renTaskHandle.handleType = 'termination' |
|||
this.$refs.renTaskHandle.init() |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,85 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="visible" :title="$t('process.doBackRollback')" :close-on-click-modal="false" :close-on-press-escape="false"> |
|||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"> |
|||
<el-form-item :label="$t('process.comment')" prop="comment"> |
|||
<el-input type="textarea" v-model="dataForm.comment" :placeholder="$t('process.comment')"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="doBackRollback()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
import qs from 'qs' |
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
id: '', |
|||
comment: '', |
|||
taskId: '', |
|||
processInstanceId: '' |
|||
}, |
|||
// 回调函数 |
|||
callbacks: { |
|||
taskHandleSuccessCallback: null, |
|||
taskHandleErrorCallback: null |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
comment: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init () { |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
}) |
|||
}, |
|||
doBackRollback: debounce(function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
var params = qs.stringify({ |
|||
'taskId': this.dataForm.taskId, |
|||
'processInstanceId': this.dataForm.processInstanceId, |
|||
'comment': this.dataForm.comment |
|||
}) |
|||
this.$http['post']('/activiti/task/backPreviousTask?', params).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
this.$message.error(res.msg) |
|||
if (this.callbacks.taskHandleErrorCallback) { |
|||
this.callbacks.taskHandleErrorCallback(res) |
|||
} |
|||
return |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
if (this.callbacks.taskHandleSuccessCallback) { |
|||
this.callbacks.taskHandleSuccessCallback(res) |
|||
} |
|||
} |
|||
}) |
|||
}) |
|||
}) |
|||
}, 1000, { 'leading': true, 'trailing': false }) |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,102 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="visible" :title="$t('process.entrustTask')" :close-on-click-modal="false" :close-on-press-escape="false"> |
|||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"> |
|||
<el-form-item :label="$t('process.assignee')"> |
|||
<el-input v-model="dataForm.entrustUserName" class="input-with-select"> |
|||
<el-button slot="append" icon="el-icon-search" @click="selectUserInfo()"></el-button> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="entrustTask()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
<select-user v-if="selectUserVisible" ref="selectUser" ></select-user> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import SelectUser from './select-user' |
|||
import qs from 'qs' |
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
selectUserVisible: false, |
|||
dataForm: { |
|||
id: '', |
|||
entrustUserId: '', |
|||
entrustUserName: '', |
|||
taskId: '' |
|||
}, |
|||
// 回调函数 |
|||
callbacks: { |
|||
taskHandleSuccessCallback: null, |
|||
taskHandleErrorCallback: null |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
entrustUserName: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
SelectUser |
|||
}, |
|||
methods: { |
|||
init () { |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
}) |
|||
}, |
|||
// 委托 |
|||
entrustTask () { |
|||
if (!this.dataForm.entrustUserId) { |
|||
this.$message.error(this.$t('process.entrustError')) |
|||
return |
|||
} |
|||
var task = qs.stringify({ |
|||
taskId: this.dataForm.taskId, |
|||
assignee: this.dataForm.entrustUserId |
|||
}) |
|||
this.$http['post']('/activiti/task/entrust', task).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
this.$message.error(res.msg) |
|||
if (this.callbacks.taskHandleErrorCallback) { |
|||
this.callbacks.taskHandleErrorCallback(res) |
|||
} |
|||
return |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
if (this.callbacks.taskHandleSuccessCallback) { |
|||
this.callbacks.taskHandleSuccessCallback(res) |
|||
} |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
}, |
|||
selectUserInfo () { |
|||
this.selectUserVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.selectUser.dataForm.id = '' |
|||
this.$refs.selectUser.init(this.setUserInfo) |
|||
}) |
|||
}, |
|||
setUserInfo (userInfo) { |
|||
this.dataForm.entrustUserId = userInfo.id |
|||
this.dataForm.entrustUserName = userInfo.realName |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,175 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="visible" :title="handleTitle" :close-on-click-modal="false" :close-on-press-escape="false"> |
|||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"> |
|||
<el-form-item :label="$t('process.comment')" prop="comment"> |
|||
<el-input type="textarea" v-model="dataForm.comment" :placeholder="$t('process.comment')"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
import qs from 'qs' |
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
handleType: '', |
|||
handleTitle: '', |
|||
dataForm: { |
|||
comment: '', |
|||
taskId: '' |
|||
}, |
|||
// 回调函数 |
|||
callbacks: { |
|||
taskHandleSuccessCallback: null, |
|||
taskHandleErrorCallback: null |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
comment: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init () { |
|||
this.visible = true |
|||
if (this.handleType === 'complete') { |
|||
this.handleTitle = this.$t('process.completeTask') |
|||
} else if (this.handleType === 'reject') { |
|||
this.handleTitle = this.$t('process.rejectTask') |
|||
} else if (this.handleType === 'termination') { |
|||
this.handleTitle = this.$t('process.terminationTask') |
|||
} |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
}) |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle () { |
|||
if (this.handleType === 'complete') { |
|||
this.completeTask() |
|||
} else if (this.handleType === 'reject') { |
|||
this.rejectTask() |
|||
} else if (this.handleType === 'termination') { |
|||
this.terminationTask() |
|||
} |
|||
}, |
|||
// 驳回 |
|||
rejectTask: debounce(function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
if (!this.dataForm.taskId) { |
|||
return false |
|||
} |
|||
var params = qs.stringify({ |
|||
'taskId': this.dataForm.taskId, |
|||
'comment': this.dataForm.comment |
|||
}) |
|||
this.$http['post']('/activiti/task/backToFirst?', params).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
this.$message.error(res.msg) |
|||
if (this.callbacks.taskHandleErrorCallback) { |
|||
this.callbacks.taskHandleErrorCallback(res) |
|||
} |
|||
return |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
if (this.callbacks.taskHandleSuccessCallback) { |
|||
this.callbacks.taskHandleSuccessCallback(res) |
|||
} |
|||
} |
|||
}) |
|||
}) |
|||
}) |
|||
}, 1000, { 'leading': true, 'trailing': false }), |
|||
// 通过 |
|||
completeTask: debounce(function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
if (!this.dataForm.taskId) { |
|||
return false |
|||
} |
|||
var params = qs.stringify({ |
|||
'taskId': this.dataForm.taskId, |
|||
'comment': this.dataForm.comment |
|||
}) |
|||
this.$http.post('/activiti/task/complete?' + params).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
this.$message.error(res.msg) |
|||
if (this.callbacks.taskHandleErrorCallback) { |
|||
this.callbacks.taskHandleErrorCallback(res) |
|||
} |
|||
return |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
if (this.callbacks.taskHandleSuccessCallback) { |
|||
this.callbacks.taskHandleSuccessCallback(res) |
|||
} |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
}) |
|||
}, 1000, { 'leading': true, 'trailing': false }), |
|||
// 终止 |
|||
terminationTask: debounce(function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
if (!this.dataForm.taskId) { |
|||
return false |
|||
} |
|||
var task = qs.stringify({ |
|||
taskId: this.dataForm.taskId, |
|||
comment: this.dataForm.comment |
|||
}) |
|||
this.$http['post']('/activiti/task/endProcess', task).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
this.$message.error(res.msg) |
|||
if (this.callbacks.taskHandleErrorCallback) { |
|||
this.callbacks.taskHandleErrorCallback(res) |
|||
} |
|||
return |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
if (this.callbacks.taskHandleSuccessCallback) { |
|||
this.callbacks.taskHandleSuccessCallback(res) |
|||
} |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
}) |
|||
}, 1000, { 'leading': true, 'trailing': false }) |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,84 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="visibleSelect" width="60%" :modal="false" :title="$t('user.select')" :close-on-click-modal="false" :close-on-press-escape="false"> |
|||
<div class="mod-sys__user"> |
|||
<el-form :inline="true" size="mini" :model="dataForm" @keyup.enter.native="getDataList()"> |
|||
<el-form-item> |
|||
<el-input v-model="dataForm.username" :placeholder="$t('user.username')" clearable></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button @click="getDataList()">{{ $t('query') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table |
|||
v-loading="dataListLoading" |
|||
:data="dataList" |
|||
border |
|||
@selection-change="dataListSelectionChangeHandle" |
|||
@sort-change="dataListSortChangeHandle" |
|||
style="width: 100%;" size="mini"> |
|||
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> |
|||
<el-table-column prop="username" :label="$t('user.username')" sortable="custom" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="deptName" :label="$t('user.deptName')" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="email" :label="$t('user.email')" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="mobile" :label="$t('user.mobile')" sortable="custom" header-align="center" align="center"></el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
:current-page="page" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="limit" |
|||
:total="total" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="pageSizeChangeHandle" |
|||
@current-change="pageCurrentChangeHandle"> |
|||
</el-pagination> |
|||
</div> |
|||
<template slot="footer"> |
|||
<el-button type="default" @click="cancelHandle()">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="commitHandle()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
visibleSelect: false, |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/sys/user/page', |
|||
getDataListIsPage: true |
|||
}, |
|||
dataForm: { |
|||
username: '' |
|||
}, |
|||
callback: null |
|||
} |
|||
}, |
|||
components: {}, |
|||
methods: { |
|||
init (callback) { |
|||
this.visibleSelect = true |
|||
this.callback = callback |
|||
this.$nextTick(() => { |
|||
this.getDataList() |
|||
}) |
|||
}, |
|||
cancelHandle () { |
|||
this.visibleSelect = false |
|||
}, |
|||
commitHandle () { |
|||
if (this.callback) { |
|||
if (this.dataListSelections.length !== 1) { |
|||
this.$message.error(this.$t('user.selecterror')) |
|||
return |
|||
} else { |
|||
this.callback(this.dataListSelections[0]) |
|||
} |
|||
} |
|||
this.visibleSelect = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,7 @@ |
|||
import RenProcessStart from './src/ren-process-start' |
|||
|
|||
RenProcessStart.install = function (Vue) { |
|||
Vue.component(RenProcessStart.name, RenProcessStart) |
|||
} |
|||
|
|||
export default RenProcessStart |
|||
@ -0,0 +1,134 @@ |
|||
<template> |
|||
<el-button type="primary" @click="processStartHandle()">{{ $t('process.createInstance') }}</el-button> |
|||
</template> |
|||
|
|||
<script> |
|||
import qs from 'qs' |
|||
export default { |
|||
name: 'RenProcessStart', |
|||
data () { |
|||
return { |
|||
formUrl: '', |
|||
instanceIdUrl: '', |
|||
formName: null, |
|||
rootObj: null, |
|||
dataForm: { |
|||
processDefinitionKey: '' |
|||
}, |
|||
// 回调函数 |
|||
callbacks: { |
|||
startProcessSuccessCallback: null, |
|||
startProcessErrorCallback: null, |
|||
formSaveSuccessCallback: null, |
|||
formSaveErrorCallback: null |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
}, |
|||
created () { |
|||
this.$nextTick(() => { |
|||
this.formUrl = this.saveFormUrl |
|||
this.instanceIdUrl = this.updateInstanceIdUrl |
|||
this.formName = this.dataFormName |
|||
}) |
|||
}, |
|||
props: { |
|||
saveFormUrl: String, |
|||
updateInstanceIdUrl: String, |
|||
dataFormName: String |
|||
}, |
|||
watch: { |
|||
saveFormUrl (val) { |
|||
this.formUrl = val |
|||
}, |
|||
updateInstanceIdUrl (val) { |
|||
this.instanceIdUrl = val |
|||
}, |
|||
dataFormName (val) { |
|||
this.formName = val |
|||
} |
|||
}, |
|||
methods: { |
|||
// 启动流程事件 |
|||
processStartHandle () { |
|||
if (!this.formUrl) { |
|||
return this.$message.error(this.$t('process.formURLError')) |
|||
} |
|||
if (!this.dataForm.processDefinitionKey) { |
|||
return this.$message.error(this.$t('process.keyError')) |
|||
} |
|||
if (!this.formName) { |
|||
return this.$message.error(this.$t('process.formNameError')) |
|||
} |
|||
this.rootObj.$refs[this.formName].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
this.$http.get(`/activiti/process/lastestPage`, { |
|||
params: { |
|||
key: this.dataForm.processDefinitionKey |
|||
} |
|||
}).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
if (!res.data.list || res.data.list.length <= 0) { |
|||
return this.$message.error(this.$t('process.notExistError')) |
|||
} |
|||
this.$http['post'](this.formUrl, this.rootObj[this.formName]).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
this.$message.error(res.msg) |
|||
if (this.callbacks.formSaveErrorCallback) { |
|||
this.callbacks.formSaveErrorCallback(res) |
|||
} |
|||
} |
|||
if (this.callbacks.formSaveSuccessCallback) { |
|||
this.callbacks.formSaveSuccessCallback(res) |
|||
} |
|||
if (!res.data.businessKey) { |
|||
return this.$message.error(this.$t('process.businessKeyError')) |
|||
// this.startProcess(this.dataForm.processDefinitionKey, null, this.rootObj[this.formName]) |
|||
} else { |
|||
this.startProcess(this.dataForm.processDefinitionKey, res.data.businessKey, this.rootObj[this.formName]) |
|||
} |
|||
}).catch(() => {}) |
|||
}).catch(() => {}) |
|||
}) |
|||
}, |
|||
// 启动流程 |
|||
startProcess (processDefinitionKey, businessKey, formData) { |
|||
var data = { |
|||
processDefinitionKey: processDefinitionKey, |
|||
businessKey: businessKey, |
|||
variables: formData |
|||
} |
|||
this.$http['post']('/activiti/running/startOfBusinessKey', data).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
if (this.callbacks.startProcessErrorCallback) { |
|||
this.callbacks.startProcessErrorCallback(res.data) |
|||
} |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
if (this.callbacks.startProcessSuccessCallback) { |
|||
this.callbacks.startProcessSuccessCallback(res.data) |
|||
} |
|||
} |
|||
}) |
|||
if (this.instanceIdUrl) { |
|||
var params = qs.stringify({ |
|||
processInstanceId: res.data.processInstanceId, |
|||
processDefinitionKey: processDefinitionKey, |
|||
businessKey: businessKey |
|||
}) |
|||
this.$http['post'](this.instanceIdUrl + '?' + params).then(({ data: res }) => {}) |
|||
} |
|||
}).catch(() => {}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,7 @@ |
|||
import RenRadioGroup from './src/ren-radio-group' |
|||
|
|||
RenRadioGroup.install = function (Vue) { |
|||
Vue.component(RenRadioGroup.name, RenRadioGroup) |
|||
} |
|||
|
|||
export default RenRadioGroup |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<el-radio-group :value="value+''" @input="$emit('input', $event)"> |
|||
<el-radio :label="data.dictValue" v-for="data in dataList" :key="data.dictValue">{{data.dictLabel}}</el-radio> |
|||
</el-radio-group> |
|||
</template> |
|||
<script> |
|||
import { getDictDataList } from '@/utils' |
|||
export default { |
|||
name: 'RenRadioGroup', |
|||
data () { |
|||
return { |
|||
dataList: getDictDataList(this.dictType) |
|||
} |
|||
}, |
|||
props: { |
|||
value: [Number, String], |
|||
dictType: String |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,7 @@ |
|||
import RenRegionTree from './src/ren-region-tree' |
|||
|
|||
RenRegionTree.install = function (Vue) { |
|||
Vue.component(RenRegionTree.name, RenRegionTree) |
|||
} |
|||
|
|||
export default RenRegionTree |
|||
@ -0,0 +1,132 @@ |
|||
<template> |
|||
<div class="ren-region"> |
|||
<el-input v-model="showName" :placeholder="placeholder" @focus="treeDialog"> |
|||
<el-button slot="append" icon="el-icon-search" @click="treeDialog"></el-button> |
|||
</el-input> |
|||
<el-input :value="value" style="display: none"></el-input> |
|||
<el-dialog :visible.sync="visibleTree" width="360px" :modal="false" :title="placeholder" :close-on-click-modal="false" :close-on-press-escape="false"> |
|||
<el-form size="mini" :inline="true"> |
|||
<el-form-item :label="$t('keyword')"> |
|||
<el-input v-model="filterText"></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="default">{{ $t('query') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-tree |
|||
class="filter-tree" |
|||
:data="dataList" |
|||
:default-expanded-keys="expandedKeys" |
|||
:props="{ label: 'name', children: 'children' }" |
|||
:expand-on-click-node="false" |
|||
:filter-node-method="filterNode" |
|||
:highlight-current="true" |
|||
node-key="id" |
|||
ref="tree"> |
|||
</el-tree> |
|||
<template slot="footer"> |
|||
<el-button type="default" @click="cancelHandle()" size="mini">{{ $t('cancel') }}</el-button> |
|||
<el-button type="info" @click="clearHandle()" size="mini">{{ $t('clear') }}</el-button> |
|||
<el-button type="primary" @click="commitHandle()" size="mini">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<style lang="scss"> |
|||
.ren-region { |
|||
.filter-tree { |
|||
max-height: 230px; |
|||
overflow: auto; |
|||
} |
|||
.el-dialog__body { |
|||
padding: 0px 0px 0px 20px; |
|||
} |
|||
.el-dialog__footer { |
|||
padding: 10px 20px 8px 20px; |
|||
} |
|||
} |
|||
</style> |
|||
<script> |
|||
import { treeDataTranslate } from '@/utils' |
|||
export default { |
|||
name: 'RenRegionTree', |
|||
data () { |
|||
return { |
|||
filterText: '', |
|||
visibleTree: false, |
|||
dataList: [], |
|||
showName: '', |
|||
expandedKeys: null, |
|||
defaultProps: { |
|||
children: 'children', |
|||
label: 'name' |
|||
} |
|||
} |
|||
}, |
|||
props: { |
|||
value: [Number, String], |
|||
parentName: String, |
|||
placeholder: String |
|||
}, |
|||
watch: { |
|||
filterText (val) { |
|||
this.$refs.tree.filter(val) |
|||
}, |
|||
parentName (val) { |
|||
this.showName = val |
|||
} |
|||
}, |
|||
methods: { |
|||
treeDialog () { |
|||
this.expandedKeys = null |
|||
if (this.$refs.tree) { |
|||
this.$refs.tree.setCurrentKey(null) |
|||
} |
|||
this.visibleTree = true |
|||
this.getDataList(this.value) |
|||
}, |
|||
filterNode (value, data) { |
|||
if (!value) return true |
|||
return data.name.indexOf(value) !== -1 |
|||
}, |
|||
getDataList (id) { |
|||
return this.$http.get('/sys/region/tree').then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.dataList = treeDataTranslate(res.data) |
|||
this.$nextTick(() => { |
|||
this.$refs.tree.setCurrentKey(id) |
|||
this.expandedKeys = [id] |
|||
}) |
|||
}).catch(() => {}) |
|||
}, |
|||
cancelHandle () { |
|||
this.visibleTree = false |
|||
this.dataList = [] |
|||
this.filterText = '' |
|||
}, |
|||
clearHandle () { |
|||
this.$emit('input', '0') |
|||
this.$emit('update:parentName', '') |
|||
this.showName = '' |
|||
this.visibleTree = false |
|||
this.dataList = [] |
|||
this.filterText = '' |
|||
}, |
|||
commitHandle () { |
|||
const node = this.$refs.tree.getCurrentNode() |
|||
if (!node) { |
|||
this.$message.error(this.$t('choose')) |
|||
return |
|||
} |
|||
this.$emit('input', node.id) |
|||
this.$emit('update:parentName', node.name) |
|||
this.showName = node.name |
|||
this.visibleTree = false |
|||
this.dataList = [] |
|||
this.filterText = '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,7 @@ |
|||
import RenSelect from './src/ren-select' |
|||
|
|||
RenSelect.install = function (Vue) { |
|||
Vue.component(RenSelect.name, RenSelect) |
|||
} |
|||
|
|||
export default RenSelect |
|||
@ -0,0 +1,21 @@ |
|||
<template> |
|||
<el-select :value="value+''" @input="$emit('input', $event)" :placeholder="placeholder" clearable> |
|||
<el-option :label="data.dictLabel" v-for="data in dataList" :key="data.dictValue" :value ="data.dictValue">{{data.dictLabel}}</el-option> |
|||
</el-select> |
|||
</template> |
|||
<script> |
|||
import { getDictDataList } from '@/utils' |
|||
export default { |
|||
name: 'RenSelect', |
|||
data () { |
|||
return { |
|||
dataList: getDictDataList(this.dictType) |
|||
} |
|||
}, |
|||
props: { |
|||
value: [Number, String], |
|||
dictType: String, |
|||
placeholder: String |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,23 @@ |
|||
/* eslint-disable */ |
|||
/** |
|||
* 主题配置信息 |
|||
* |
|||
* hasBuild 是否已构建？ |
|||
* true ：已构建，不再构建 |
|||
* false：未构建，执行命令后会自动构建 |
|||
*/ |
|||
module.exports = [ |
|||
{ name: 'default', color: '#409EFF', desc: '默认色', hasBuild: false }, |
|||
{ name: 'cyan', color: '#0BB2D4', desc: '青色', hasBuild: false }, |
|||
{ name: 'blue', color: '#3E8EF7', desc: '蓝色', hasBuild: false }, |
|||
{ name: 'green', color: '#11C26D', desc: '绿色', hasBuild: false }, |
|||
{ name: 'turquoise', color: '#17B3A3', desc: '蓝绿色', hasBuild: false }, |
|||
{ name: 'indigo', color: '#667AFA', desc: '靛青色', hasBuild: false }, |
|||
{ name: 'brown', color: '#997B71', desc: '棕色', hasBuild: false }, |
|||
{ name: 'purple', color: '#9463F7', desc: '紫色', hasBuild: false }, |
|||
{ name: 'gray', color: '#757575', desc: '灰色', hasBuild: false }, |
|||
{ name: 'orange', color: '#EB6709', desc: '橙色', hasBuild: false }, |
|||
{ name: 'pink', color: '#F74584', desc: '粉红色', hasBuild: false }, |
|||
{ name: 'yellow', color: '#FCB900', desc: '黄色', hasBuild: false }, |
|||
{ name: 'red', color: '#FF4C52', desc: '红色', hasBuild: false } |
|||
] |
|||
@ -0,0 +1,994 @@ |
|||
/* Element Chalk Variables */ |
|||
|
|||
// Special comment for theme configurator |
|||
// type|skipAutoTranslation|Category|Order |
|||
// skipAutoTranslation 1 |
|||
|
|||
/* Transition |
|||
-------------------------- */ |
|||
$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default; |
|||
$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default; |
|||
$--fade-linear-transition: opacity 200ms linear !default; |
|||
$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default; |
|||
$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default; |
|||
$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default; |
|||
|
|||
/* Color |
|||
-------------------------- */ |
|||
/// color|1|Brand Color|0 |
|||
$--color-primary: #17B3A3 !default; |
|||
/// color|1|Background Color|4 |
|||
$--color-white: #FFFFFF !default; |
|||
/// color|1|Background Color|4 |
|||
$--color-black: #000000 !default; |
|||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ |
|||
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ |
|||
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ |
|||
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ |
|||
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ |
|||
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ |
|||
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ |
|||
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ |
|||
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ |
|||
/// color|1|Functional Color|1 |
|||
$--color-success: #67C23A !default; |
|||
/// color|1|Functional Color|1 |
|||
$--color-warning: #E6A23C !default; |
|||
/// color|1|Functional Color|1 |
|||
$--color-danger: #F56C6C !default; |
|||
/// color|1|Functional Color|1 |
|||
$--color-info: #909399 !default; |
|||
|
|||
$--color-success-light: mix($--color-white, $--color-success, 80%) !default; |
|||
$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default; |
|||
$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default; |
|||
$--color-info-light: mix($--color-white, $--color-info, 80%) !default; |
|||
|
|||
$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default; |
|||
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default; |
|||
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default; |
|||
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default; |
|||
/// color|1|Font Color|2 |
|||
$--color-text-primary: #303133 !default; |
|||
/// color|1|Font Color|2 |
|||
$--color-text-regular: #606266 !default; |
|||
/// color|1|Font Color|2 |
|||
$--color-text-secondary: #909399 !default; |
|||
/// color|1|Font Color|2 |
|||
$--color-text-placeholder: #C0C4CC !default; |
|||
/// color|1|Border Color|3 |
|||
$--border-color-base: #DCDFE6 !default; |
|||
/// color|1|Border Color|3 |
|||
$--border-color-light: #E4E7ED !default; |
|||
/// color|1|Border Color|3 |
|||
$--border-color-lighter: #EBEEF5 !default; |
|||
/// color|1|Border Color|3 |
|||
$--border-color-extra-light: #F2F6FC !default; |
|||
|
|||
// Background |
|||
/// color|1|Background Color|4 |
|||
$--background-color-base: #F5F7FA !default; |
|||
|
|||
/* Link |
|||
-------------------------- */ |
|||
$--link-color: $--color-primary-light-2 !default; |
|||
$--link-hover-color: $--color-primary !default; |
|||
|
|||
/* Border |
|||
-------------------------- */ |
|||
$--border-width-base: 1px !default; |
|||
$--border-style-base: solid !default; |
|||
$--border-color-hover: $--color-text-placeholder !default; |
|||
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default; |
|||
/// borderRadius|1|Radius|0 |
|||
$--border-radius-base: 4px !default; |
|||
/// borderRadius|1|Radius|0 |
|||
$--border-radius-small: 2px !default; |
|||
/// borderRadius|1|Radius|0 |
|||
$--border-radius-circle: 100% !default; |
|||
/// borderRadius|1|Radius|0 |
|||
$--border-radius-zero: 0 !default; |
|||
|
|||
// Box-shadow |
|||
/// boxShadow|1|Shadow|1 |
|||
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default; |
|||
// boxShadow|1|Shadow|1 |
|||
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default; |
|||
/// boxShadow|1|Shadow|1 |
|||
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default; |
|||
|
|||
/* Fill |
|||
-------------------------- */ |
|||
$--fill-base: $--color-white !default; |
|||
|
|||
/* Typography |
|||
-------------------------- */ |
|||
$--font-path: 'fonts' !default; |
|||
$--font-display: 'auto' !default; |
|||
/// fontSize|1|Font Size|0 |
|||
$--font-size-extra-large: 20px !default; |
|||
/// fontSize|1|Font Size|0 |
|||
$--font-size-large: 18px !default; |
|||
/// fontSize|1|Font Size|0 |
|||
$--font-size-medium: 16px !default; |
|||
/// fontSize|1|Font Size|0 |
|||
$--font-size-base: 14px !default; |
|||
/// fontSize|1|Font Size|0 |
|||
$--font-size-small: 13px !default; |
|||
/// fontSize|1|Font Size|0 |
|||
$--font-size-extra-small: 12px !default; |
|||
/// fontWeight|1|Font Weight|1 |
|||
$--font-weight-primary: 500 !default; |
|||
/// fontWeight|1|Font Weight|1 |
|||
$--font-weight-secondary: 100 !default; |
|||
/// fontLineHeight|1|Line Height|2 |
|||
$--font-line-height-primary: 24px !default; |
|||
/// fontLineHeight|1|Line Height|2 |
|||
$--font-line-height-secondary: 16px !default; |
|||
$--font-color-disabled-base: #bbb !default; |
|||
/* Size |
|||
-------------------------- */ |
|||
$--size-base: 14px !default; |
|||
|
|||
/* z-index |
|||
-------------------------- */ |
|||
$--index-normal: 1 !default; |
|||
$--index-top: 1000 !default; |
|||
$--index-popper: 2000 !default; |
|||
|
|||
/* Disable base |
|||
-------------------------- */ |
|||
$--disabled-fill-base: $--background-color-base !default; |
|||
$--disabled-color-base: $--color-text-placeholder !default; |
|||
$--disabled-border-base: $--border-color-light !default; |
|||
|
|||
/* Icon |
|||
-------------------------- */ |
|||
$--icon-color: #666 !default; |
|||
$--icon-color-base: $--color-info !default; |
|||
|
|||
/* Checkbox |
|||
-------------------------- */ |
|||
/// fontSize||Font|1 |
|||
$--checkbox-font-size: 14px !default; |
|||
/// fontWeight||Font|1 |
|||
$--checkbox-font-weight: $--font-weight-primary !default; |
|||
/// color||Color|0 |
|||
$--checkbox-font-color: $--color-text-regular !default; |
|||
$--checkbox-input-height: 14px !default; |
|||
$--checkbox-input-width: 14px !default; |
|||
/// borderRadius||Border|2 |
|||
$--checkbox-border-radius: $--border-radius-small !default; |
|||
/// color||Color|0 |
|||
$--checkbox-background-color: $--color-white !default; |
|||
$--checkbox-input-border: $--border-base !default; |
|||
|
|||
/// color||Color|0 |
|||
$--checkbox-disabled-border-color: $--border-color-base !default; |
|||
$--checkbox-disabled-input-fill: #edf2fc !default; |
|||
$--checkbox-disabled-icon-color: $--color-text-placeholder !default; |
|||
|
|||
$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default; |
|||
$--checkbox-disabled-checked-input-border-color: $--border-color-base !default; |
|||
$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default; |
|||
|
|||
/// color||Color|0 |
|||
$--checkbox-checked-font-color: $--color-primary !default; |
|||
$--checkbox-checked-input-border-color: $--color-primary !default; |
|||
/// color||Color|0 |
|||
$--checkbox-checked-background-color: $--color-primary !default; |
|||
$--checkbox-checked-icon-color: $--fill-base !default; |
|||
|
|||
$--checkbox-input-border-color-hover: $--color-primary !default; |
|||
/// height||Other|4 |
|||
$--checkbox-bordered-height: 40px !default; |
|||
/// padding||Spacing|3 |
|||
$--checkbox-bordered-padding: 9px 20px 9px 10px !default; |
|||
/// padding||Spacing|3 |
|||
$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default; |
|||
/// padding||Spacing|3 |
|||
$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default; |
|||
/// padding||Spacing|3 |
|||
$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default; |
|||
$--checkbox-bordered-medium-input-height: 14px !default; |
|||
$--checkbox-bordered-medium-input-width: 14px !default; |
|||
/// height||Other|4 |
|||
$--checkbox-bordered-medium-height: 36px !default; |
|||
$--checkbox-bordered-small-input-height: 12px !default; |
|||
$--checkbox-bordered-small-input-width: 12px !default; |
|||
/// height||Other|4 |
|||
$--checkbox-bordered-small-height: 32px !default; |
|||
$--checkbox-bordered-mini-input-height: 12px !default; |
|||
$--checkbox-bordered-mini-input-width: 12px !default; |
|||
/// height||Other|4 |
|||
$--checkbox-bordered-mini-height: 28px !default; |
|||
|
|||
/// color||Color|0 |
|||
$--checkbox-button-checked-background-color: $--color-primary !default; |
|||
/// color||Color|0 |
|||
$--checkbox-button-checked-font-color: $--color-white !default; |
|||
/// color||Color|0 |
|||
$--checkbox-button-checked-border-color: $--color-primary !default; |
|||
|
|||
|
|||
|
|||
/* Radio |
|||
-------------------------- */ |
|||
/// fontSize||Font|1 |
|||
$--radio-font-size: $--font-size-base !default; |
|||
/// fontWeight||Font|1 |
|||
$--radio-font-weight: $--font-weight-primary !default; |
|||
/// color||Color|0 |
|||
$--radio-font-color: $--color-text-regular !default; |
|||
$--radio-input-height: 14px !default; |
|||
$--radio-input-width: 14px !default; |
|||
/// borderRadius||Border|2 |
|||
$--radio-input-border-radius: $--border-radius-circle !default; |
|||
/// color||Color|0 |
|||
$--radio-input-background-color: $--color-white !default; |
|||
$--radio-input-border: $--border-base !default; |
|||
/// color||Color|0 |
|||
$--radio-input-border-color: $--border-color-base !default; |
|||
/// color||Color|0 |
|||
$--radio-icon-color: $--color-white !default; |
|||
|
|||
$--radio-disabled-input-border-color: $--disabled-border-base !default; |
|||
$--radio-disabled-input-fill: $--disabled-fill-base !default; |
|||
$--radio-disabled-icon-color: $--disabled-fill-base !default; |
|||
|
|||
$--radio-disabled-checked-input-border-color: $--disabled-border-base !default; |
|||
$--radio-disabled-checked-input-fill: $--disabled-fill-base !default; |
|||
$--radio-disabled-checked-icon-color: $--color-text-placeholder !default; |
|||
|
|||
/// color||Color|0 |
|||
$--radio-checked-font-color: $--color-primary !default; |
|||
/// color||Color|0 |
|||
$--radio-checked-input-border-color: $--color-primary !default; |
|||
/// color||Color|0 |
|||
$--radio-checked-input-background-color: $--color-white !default; |
|||
/// color||Color|0 |
|||
$--radio-checked-icon-color: $--color-primary !default; |
|||
|
|||
$--radio-input-border-color-hover: $--color-primary !default; |
|||
|
|||
$--radio-bordered-height: 40px !default; |
|||
$--radio-bordered-padding: 12px 20px 0 10px !default; |
|||
$--radio-bordered-medium-padding: 10px 20px 0 10px !default; |
|||
$--radio-bordered-small-padding: 8px 15px 0 10px !default; |
|||
$--radio-bordered-mini-padding: 6px 15px 0 10px !default; |
|||
$--radio-bordered-medium-input-height: 14px !default; |
|||
$--radio-bordered-medium-input-width: 14px !default; |
|||
$--radio-bordered-medium-height: 36px !default; |
|||
$--radio-bordered-small-input-height: 12px !default; |
|||
$--radio-bordered-small-input-width: 12px !default; |
|||
$--radio-bordered-small-height: 32px !default; |
|||
$--radio-bordered-mini-input-height: 12px !default; |
|||
$--radio-bordered-mini-input-width: 12px !default; |
|||
$--radio-bordered-mini-height: 28px !default; |
|||
|
|||
/// fontSize||Font|1 |
|||
$--radio-button-font-size: $--font-size-base !default; |
|||
/// color||Color|0 |
|||
$--radio-button-checked-background-color: $--color-primary !default; |
|||
/// color||Color|0 |
|||
$--radio-button-checked-font-color: $--color-white !default; |
|||
/// color||Color|0 |
|||
$--radio-button-checked-border-color: $--color-primary !default; |
|||
$--radio-button-disabled-checked-fill: $--border-color-extra-light !default; |
|||
|
|||
/* Select |
|||
-------------------------- */ |
|||
$--select-border-color-hover: $--border-color-hover !default; |
|||
$--select-disabled-border: $--disabled-border-base !default; |
|||
/// fontSize||Font|1 |
|||
$--select-font-size: $--font-size-base !default; |
|||
$--select-close-hover-color: $--color-text-secondary !default; |
|||
|
|||
$--select-input-color: $--color-text-placeholder !default; |
|||
$--select-multiple-input-color: #666 !default; |
|||
/// color||Color|0 |
|||
$--select-input-focus-border-color: $--color-primary !default; |
|||
/// fontSize||Font|1 |
|||
$--select-input-font-size: 14px !default; |
|||
|
|||
$--select-option-color: $--color-text-regular !default; |
|||
$--select-option-disabled-color: $--color-text-placeholder !default; |
|||
$--select-option-disabled-background: $--color-white !default; |
|||
/// height||Other|4 |
|||
$--select-option-height: 34px !default; |
|||
$--select-option-hover-background: $--background-color-base !default; |
|||
/// color||Color|0 |
|||
$--select-option-selected-font-color: $--color-primary !default; |
|||
$--select-option-selected-hover: $--background-color-base !default; |
|||
|
|||
$--select-group-color: $--color-info !default; |
|||
$--select-group-height: 30px !default; |
|||
$--select-group-font-size: 12px !default; |
|||
|
|||
$--select-dropdown-background: $--color-white !default; |
|||
$--select-dropdown-shadow: $--box-shadow-light !default; |
|||
$--select-dropdown-empty-color: #999 !default; |
|||
/// height||Other|4 |
|||
$--select-dropdown-max-height: 274px !default; |
|||
$--select-dropdown-padding: 6px 0 !default; |
|||
$--select-dropdown-empty-padding: 10px 0 !default; |
|||
$--select-dropdown-border: solid 1px $--border-color-light !default; |
|||
|
|||
/* Alert |
|||
-------------------------- */ |
|||
$--alert-padding: 8px 16px !default; |
|||
/// borderRadius||Border|2 |
|||
$--alert-border-radius: $--border-radius-base !default; |
|||
/// fontSize||Font|1 |
|||
$--alert-title-font-size: 13px !default; |
|||
/// fontSize||Font|1 |
|||
$--alert-description-font-size: 12px !default; |
|||
/// fontSize||Font|1 |
|||
$--alert-close-font-size: 12px !default; |
|||
/// fontSize||Font|1 |
|||
$--alert-close-customed-font-size: 13px !default; |
|||
|
|||
$--alert-success-color: $--color-success-lighter !default; |
|||
$--alert-info-color: $--color-info-lighter !default; |
|||
$--alert-warning-color: $--color-warning-lighter !default; |
|||
$--alert-danger-color: $--color-danger-lighter !default; |
|||
|
|||
/// height||Other|4 |
|||
$--alert-icon-size: 16px !default; |
|||
/// height||Other|4 |
|||
$--alert-icon-large-size: 28px !default; |
|||
|
|||
/* MessageBox |
|||
-------------------------- */ |
|||
/// color||Color|0 |
|||
$--messagebox-title-color: $--color-text-primary !default; |
|||
$--msgbox-width: 420px !default; |
|||
$--msgbox-border-radius: 4px !default; |
|||
/// fontSize||Font|1 |
|||
$--messagebox-font-size: $--font-size-large !default; |
|||
/// fontSize||Font|1 |
|||
$--messagebox-content-font-size: $--font-size-base !default; |
|||
/// color||Color|0 |
|||
$--messagebox-content-color: $--color-text-regular !default; |
|||
/// fontSize||Font|1 |
|||
$--messagebox-error-font-size: 12px !default; |
|||
$--msgbox-padding-primary: 15px !default; |
|||
/// color||Color|0 |
|||
$--messagebox-success-color: $--color-success !default; |
|||
/// color||Color|0 |
|||
$--messagebox-info-color: $--color-info !default; |
|||
/// color||Color|0 |
|||
$--messagebox-warning-color: $--color-warning !default; |
|||
/// color||Color|0 |
|||
$--messagebox-danger-color: $--color-danger !default; |
|||
|
|||
/* Message |
|||
-------------------------- */ |
|||
$--message-shadow: $--box-shadow-base !default; |
|||
$--message-min-width: 380px !default; |
|||
$--message-background-color: #edf2fc !default; |
|||
$--message-padding: 15px 15px 15px 20px !default; |
|||
/// color||Color|0 |
|||
$--message-close-icon-color: $--color-text-placeholder !default; |
|||
/// height||Other|4 |
|||
$--message-close-size: 16px !default; |
|||
/// color||Color|0 |
|||
$--message-close-hover-color: $--color-text-secondary !default; |
|||
|
|||
/// color||Color|0 |
|||
$--message-success-font-color: $--color-success !default; |
|||
/// color||Color|0 |
|||
$--message-info-font-color: $--color-info !default; |
|||
/// color||Color|0 |
|||
$--message-warning-font-color: $--color-warning !default; |
|||
/// color||Color|0 |
|||
$--message-danger-font-color: $--color-danger !default; |
|||
|
|||
/* Notification |
|||
-------------------------- */ |
|||
$--notification-width: 330px !default; |
|||
/// padding||Spacing|3 |
|||
$--notification-padding: 14px 26px 14px 13px !default; |
|||
$--notification-radius: 8px !default; |
|||
$--notification-shadow: $--box-shadow-light !default; |
|||
/// color||Color|0 |
|||
$--notification-border-color: $--border-color-lighter !default; |
|||
$--notification-icon-size: 24px !default; |
|||
$--notification-close-font-size: $--message-close-size !default; |
|||
$--notification-group-margin-left: 13px !default; |
|||
$--notification-group-margin-right: 8px !default; |
|||
/// fontSize||Font|1 |
|||
$--notification-content-font-size: $--font-size-base !default; |
|||
/// color||Color|0 |
|||
$--notification-content-color: $--color-text-regular !default; |
|||
/// fontSize||Font|1 |
|||
$--notification-title-font-size: 16px !default; |
|||
/// color||Color|0 |
|||
$--notification-title-color: $--color-text-primary !default; |
|||
|
|||
/// color||Color|0 |
|||
$--notification-close-color: $--color-text-secondary !default; |
|||
/// color||Color|0 |
|||
$--notification-close-hover-color: $--color-text-regular !default; |
|||
|
|||
/// color||Color|0 |
|||
$--notification-success-icon-color: $--color-success !default; |
|||
/// color||Color|0 |
|||
$--notification-info-icon-color: $--color-info !default; |
|||
/// color||Color|0 |
|||
$--notification-warning-icon-color: $--color-warning !default; |
|||
/// color||Color|0 |
|||
$--notification-danger-icon-color: $--color-danger !default; |
|||
|
|||
/* Input |
|||
-------------------------- */ |
|||
$--input-font-size: $--font-size-base !default; |
|||
/// color||Color|0 |
|||
$--input-font-color: $--color-text-regular !default; |
|||
/// height||Other|4 |
|||
$--input-width: 140px !default; |
|||
/// height||Other|4 |
|||
$--input-height: 40px !default; |
|||
$--input-border: $--border-base !default; |
|||
$--input-border-color: $--border-color-base !default; |
|||
/// borderRadius||Border|2 |
|||
$--input-border-radius: $--border-radius-base !default; |
|||
$--input-border-color-hover: $--border-color-hover !default; |
|||
/// color||Color|0 |
|||
$--input-background-color: $--color-white !default; |
|||
$--input-fill-disabled: $--disabled-fill-base !default; |
|||
$--input-color-disabled: $--font-color-disabled-base !default; |
|||
/// color||Color|0 |
|||
$--input-icon-color: $--color-text-placeholder !default; |
|||
/// color||Color|0 |
|||
$--input-placeholder-color: $--color-text-placeholder !default; |
|||
$--input-max-width: 314px !default; |
|||
|
|||
$--input-hover-border: $--border-color-hover !default; |
|||
$--input-clear-hover-color: $--color-text-secondary !default; |
|||
|
|||
$--input-focus-border: $--color-primary !default; |
|||
$--input-focus-fill: $--color-white !default; |
|||
|
|||
$--input-disabled-fill: $--disabled-fill-base !default; |
|||
$--input-disabled-border: $--disabled-border-base !default; |
|||
$--input-disabled-color: $--disabled-color-base !default; |
|||
$--input-disabled-placeholder-color: $--color-text-placeholder !default; |
|||
|
|||
/// fontSize||Font|1 |
|||
$--input-medium-font-size: 14px !default; |
|||
/// height||Other|4 |
|||
$--input-medium-height: 36px !default; |
|||
/// fontSize||Font|1 |
|||
$--input-small-font-size: 13px !default; |
|||
/// height||Other|4 |
|||
$--input-small-height: 32px !default; |
|||
/// fontSize||Font|1 |
|||
$--input-mini-font-size: 12px !default; |
|||
/// height||Other|4 |
|||
$--input-mini-height: 28px !default; |
|||
|
|||
/* Cascader |
|||
-------------------------- */ |
|||
/// color||Color|0 |
|||
$--cascader-menu-font-color: $--color-text-regular !default; |
|||
/// color||Color|0 |
|||
$--cascader-menu-selected-font-color: $--color-primary !default; |
|||
$--cascader-menu-fill: $--fill-base !default; |
|||
$--cascader-menu-font-size: $--font-size-base !default; |
|||
$--cascader-menu-radius: $--border-radius-base !default; |
|||
$--cascader-menu-border: solid 1px $--border-color-light !default; |
|||
$--cascader-menu-shadow: $--box-shadow-light !default; |
|||
$--cascader-node-background-hover: $--background-color-base !default; |
|||
$--cascader-node-color-disabled:$--color-text-placeholder !default; |
|||
$--cascader-color-empty:$--color-text-placeholder !default; |
|||
$--cascader-tag-background: #f0f2f5; |
|||
|
|||
/* Group |
|||
-------------------------- */ |
|||
$--group-option-flex: 0 0 (1/5) * 100% !default; |
|||
$--group-option-offset-bottom: 12px !default; |
|||
$--group-option-fill-hover: rgba($--color-black, 0.06) !default; |
|||
$--group-title-color: $--color-black !default; |
|||
$--group-title-font-size: $--font-size-base !default; |
|||
$--group-title-width: 66px !default; |
|||
|
|||
/* Tab |
|||
-------------------------- */ |
|||
$--tab-font-size: $--font-size-base !default; |
|||
$--tab-border-line: 1px solid #e4e4e4 !default; |
|||
$--tab-header-color-active: $--color-text-secondary !default; |
|||
$--tab-header-color-hover: $--color-text-regular !default; |
|||
$--tab-header-color: $--color-text-regular !default; |
|||
$--tab-header-fill-active: rgba($--color-black, 0.06) !default; |
|||
$--tab-header-fill-hover: rgba($--color-black, 0.06) !default; |
|||
$--tab-vertical-header-width: 90px !default; |
|||
$--tab-vertical-header-count-color: $--color-white !default; |
|||
$--tab-vertical-header-count-fill: $--color-text-secondary !default; |
|||
|
|||
/* Button |
|||
-------------------------- */ |
|||
/// fontSize||Font|1 |
|||
$--button-font-size: $--font-size-base !default; |
|||
/// fontWeight||Font|1 |
|||
$--button-font-weight: $--font-weight-primary !default; |
|||
/// borderRadius||Border|2 |
|||
$--button-border-radius: $--border-radius-base !default; |
|||
/// padding||Spacing|3 |
|||
$--button-padding-vertical: 12px !default; |
|||
/// padding||Spacing|3 |
|||
$--button-padding-horizontal: 20px !default; |
|||
|
|||
/// fontSize||Font|1 |
|||
$--button-medium-font-size: $--font-size-base !default; |
|||
/// borderRadius||Border|2 |
|||
$--button-medium-border-radius: $--border-radius-base !default; |
|||
/// padding||Spacing|3 |
|||
$--button-medium-padding-vertical: 10px !default; |
|||
/// padding||Spacing|3 |
|||
$--button-medium-padding-horizontal: 20px !default; |
|||
|
|||
/// fontSize||Font|1 |
|||
$--button-small-font-size: 12px !default; |
|||
$--button-small-border-radius: #{$--border-radius-base - 1} !default; |
|||
/// padding||Spacing|3 |
|||
$--button-small-padding-vertical: 9px !default; |
|||
/// padding||Spacing|3 |
|||
$--button-small-padding-horizontal: 15px !default; |
|||
/// fontSize||Font|1 |
|||
$--button-mini-font-size: 12px !default; |
|||
$--button-mini-border-radius: #{$--border-radius-base - 1} !default; |
|||
/// padding||Spacing|3 |
|||
$--button-mini-padding-vertical: 7px !default; |
|||
/// padding||Spacing|3 |
|||
$--button-mini-padding-horizontal: 15px !default; |
|||
|
|||
/// color||Color|0 |
|||
$--button-default-font-color: $--color-text-regular !default; |
|||
/// color||Color|0 |
|||
$--button-default-background-color: $--color-white !default; |
|||
/// color||Color|0 |
|||
$--button-default-border-color: $--border-color-base !default; |
|||
|
|||
/// color||Color|0 |
|||
$--button-disabled-font-color: $--color-text-placeholder !default; |
|||
/// color||Color|0 |
|||
$--button-disabled-background-color: $--color-white !default; |
|||
/// color||Color|0 |
|||
$--button-disabled-border-color: $--border-color-lighter !default; |
|||
|
|||
/// color||Color|0 |
|||
$--button-primary-border-color: $--color-primary !default; |
|||
/// color||Color|0 |
|||
$--button-primary-font-color: $--color-white !default; |
|||
/// color||Color|0 |
|||
$--button-primary-background-color: $--color-primary !default; |
|||
/// color||Color|0 |
|||
$--button-success-border-color: $--color-success !default; |
|||
/// color||Color|0 |
|||
$--button-success-font-color: $--color-white !default; |
|||
/// color||Color|0 |
|||
$--button-success-background-color: $--color-success !default; |
|||
/// color||Color|0 |
|||
$--button-warning-border-color: $--color-warning !default; |
|||
/// color||Color|0 |
|||
$--button-warning-font-color: $--color-white !default; |
|||
/// color||Color|0 |
|||
$--button-warning-background-color: $--color-warning !default; |
|||
/// color||Color|0 |
|||
$--button-danger-border-color: $--color-danger !default; |
|||
/// color||Color|0 |
|||
$--button-danger-font-color: $--color-white !default; |
|||
/// color||Color|0 |
|||
$--button-danger-background-color: $--color-danger !default; |
|||
/// color||Color|0 |
|||
$--button-info-border-color: $--color-info !default; |
|||
/// color||Color|0 |
|||
$--button-info-font-color: $--color-white !default; |
|||
/// color||Color|0 |
|||
$--button-info-background-color: $--color-info !default; |
|||
|
|||
$--button-hover-tint-percent: 20% !default; |
|||
$--button-active-shade-percent: 10% !default; |
|||
|
|||
|
|||
/* cascader |
|||
-------------------------- */ |
|||
$--cascader-height: 200px !default; |
|||
|
|||
/* Switch |
|||
-------------------------- */ |
|||
/// color||Color|0 |
|||
$--switch-on-color: $--color-primary !default; |
|||
/// color||Color|0 |
|||
$--switch-off-color: $--border-color-base !default; |
|||
/// fontSize||Font|1 |
|||
$--switch-font-size: $--font-size-base !default; |
|||
$--switch-core-border-radius: 10px !default; |
|||
// height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义 |
|||
$--switch-width: 40px !default; |
|||
// height||Other|4 |
|||
$--switch-height: 20px !default; |
|||
// height||Other|4 |
|||
$--switch-button-size: 16px !default; |
|||
|
|||
/* Dialog |
|||
-------------------------- */ |
|||
$--dialog-background-color: $--color-white !default; |
|||
$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default; |
|||
/// fontSize||Font|1 |
|||
$--dialog-title-font-size: $--font-size-large !default; |
|||
/// fontSize||Font|1 |
|||
$--dialog-content-font-size: 14px !default; |
|||
/// fontLineHeight||LineHeight|2 |
|||
$--dialog-font-line-height: $--font-line-height-primary !default; |
|||
/// padding||Spacing|3 |
|||
$--dialog-padding-primary: 20px !default; |
|||
|
|||
/* Table |
|||
-------------------------- */ |
|||
/// color||Color|0 |
|||
$--table-border-color: $--border-color-lighter !default; |
|||
$--table-border: 1px solid $--table-border-color !default; |
|||
/// color||Color|0 |
|||
$--table-font-color: $--color-text-regular !default; |
|||
/// color||Color|0 |
|||
$--table-header-font-color: $--color-text-secondary !default; |
|||
/// color||Color|0 |
|||
$--table-row-hover-background-color: $--background-color-base !default; |
|||
$--table-current-row-background-color: $--color-primary-light-9 !default; |
|||
/// color||Color|0 |
|||
$--table-header-background-color: $--color-white !default; |
|||
$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default; |
|||
|
|||
/* Pagination |
|||
-------------------------- */ |
|||
/// fontSize||Font|1 |
|||
$--pagination-font-size: 13px !default; |
|||
/// color||Color|0 |
|||
$--pagination-background-color: $--color-white !default; |
|||
/// color||Color|0 |
|||
$--pagination-font-color: $--color-text-primary !default; |
|||
$--pagination-border-radius: 3px !default; |
|||
/// color||Color|0 |
|||
$--pagination-button-color: $--color-text-primary !default; |
|||
/// height||Other|4 |
|||
$--pagination-button-width: 35.5px !default; |
|||
/// height||Other|4 |
|||
$--pagination-button-height: 28px !default; |
|||
/// color||Color|0 |
|||
$--pagination-button-disabled-color: $--color-text-placeholder !default; |
|||
/// color||Color|0 |
|||
$--pagination-button-disabled-background-color: $--color-white !default; |
|||
/// color||Color|0 |
|||
$--pagination-hover-color: $--color-primary !default; |
|||
|
|||
/* Popup |
|||
-------------------------- */ |
|||
/// color||Color|0 |
|||
$--popup-modal-background-color: $--color-black !default; |
|||
/// opacity||Other|1 |
|||
$--popup-modal-opacity: 0.5 !default; |
|||
|
|||
/* Popover |
|||
-------------------------- */ |
|||
/// color||Color|0 |
|||
$--popover-background-color: $--color-white !default; |
|||
/// fontSize||Font|1 |
|||
$--popover-font-size: $--font-size-base !default; |
|||
/// color||Color|0 |
|||
$--popover-border-color: $--border-color-lighter !default; |
|||
$--popover-arrow-size: 6px !default; |
|||
/// padding||Spacing|3 |
|||
$--popover-padding: 12px !default; |
|||
$--popover-padding-large: 18px 20px !default; |
|||
/// fontSize||Font|1 |
|||
$--popover-title-font-size: 16px !default; |
|||
/// color||Color|0 |
|||
$--popover-title-font-color: $--color-text-primary !default; |
|||
|
|||
/* Tooltip |
|||
-------------------------- */ |
|||
/// color|1|Color|0 |
|||
$--tooltip-fill: $--color-text-primary !default; |
|||
/// color|1|Color|0 |
|||
$--tooltip-color: $--color-white !default; |
|||
/// fontSize||Font|1 |
|||
$--tooltip-font-size: 12px !default; |
|||
/// color||Color|0 |
|||
$--tooltip-border-color: $--color-text-primary !default; |
|||
$--tooltip-arrow-size: 6px !default; |
|||
/// padding||Spacing|3 |
|||
$--tooltip-padding: 10px !default; |
|||
|
|||
/* Tag |
|||
-------------------------- */ |
|||
/// color||Color|0 |
|||
$--tag-info-color: $--color-info !default; |
|||
/// color||Color|0 |
|||
$--tag-primary-color: $--color-primary !default; |
|||
/// color||Color|0 |
|||
$--tag-success-color: $--color-success !default; |
|||
/// color||Color|0 |
|||
$--tag-warning-color: $--color-warning !default; |
|||
/// color||Color|0 |
|||
$--tag-danger-color: $--color-danger !default; |
|||
/// fontSize||Font|1 |
|||
$--tag-font-size: 12px !default; |
|||
$--tag-border-radius: 4px !default; |
|||
$--tag-padding: 0 10px !default; |
|||
|
|||
/* Tree |
|||
-------------------------- */ |
|||
/// color||Color|0 |
|||
$--tree-node-hover-background-color: $--background-color-base !default; |
|||
/// color||Color|0 |
|||
$--tree-font-color: $--color-text-regular !default; |
|||
/// color||Color|0 |
|||
$--tree-expand-icon-color: $--color-text-placeholder !default; |
|||
|
|||
/* Dropdown |
|||
-------------------------- */ |
|||
$--dropdown-menu-box-shadow: $--box-shadow-light !default; |
|||
$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default; |
|||
$--dropdown-menuItem-hover-color: $--link-color !default; |
|||
|
|||
/* Badge |
|||
-------------------------- */ |
|||
/// color||Color|0 |
|||
$--badge-background-color: $--color-danger !default; |
|||
$--badge-radius: 10px !default; |
|||
/// fontSize||Font|1 |
|||
$--badge-font-size: 12px !default; |
|||
/// padding||Spacing|3 |
|||
$--badge-padding: 6px !default; |
|||
/// height||Other|4 |
|||
$--badge-size: 18px !default; |
|||
|
|||
/* Card |
|||
--------------------------*/ |
|||
/// color||Color|0 |
|||
$--card-border-color: $--border-color-lighter !default; |
|||
$--card-border-radius: 4px !default; |
|||
/// padding||Spacing|3 |
|||
$--card-padding: 20px !default; |
|||
|
|||
/* Slider |
|||
--------------------------*/ |
|||
/// color||Color|0 |
|||
$--slider-main-background-color: $--color-primary !default; |
|||
/// color||Color|0 |
|||
$--slider-runway-background-color: $--border-color-light !default; |
|||
$--slider-button-hover-color: mix($--color-primary, black, 97%) !default; |
|||
$--slider-stop-background-color: $--color-white !default; |
|||
$--slider-disable-color: $--color-text-placeholder !default; |
|||
$--slider-margin: 16px 0 !default; |
|||
$--slider-border-radius: 3px !default; |
|||
/// height|1|Other|4 |
|||
$--slider-height: 6px !default; |
|||
/// height||Other|4 |
|||
$--slider-button-size: 16px !default; |
|||
$--slider-button-wrapper-size: 36px !default; |
|||
$--slider-button-wrapper-offset: -15px !default; |
|||
|
|||
/* Steps |
|||
--------------------------*/ |
|||
$--steps-border-color: $--disabled-border-base !default; |
|||
$--steps-border-radius: 4px !default; |
|||
$--steps-padding: 20px !default; |
|||
|
|||
/* Menu |
|||
--------------------------*/ |
|||
/// fontSize||Font|1 |
|||
$--menu-item-font-size: $--font-size-base !default; |
|||
/// color||Color|0 |
|||
$--menu-item-font-color: $--color-text-primary !default; |
|||
/// color||Color|0 |
|||
$--menu-background-color: $--color-white !default; |
|||
$--menu-item-hover-fill: $--color-primary-light-9 !default; |
|||
|
|||
/* Rate |
|||
--------------------------*/ |
|||
$--rate-height: 20px !default; |
|||
/// fontSize||Font|1 |
|||
$--rate-font-size: $--font-size-base !default; |
|||
/// height||Other|3 |
|||
$--rate-icon-size: 18px !default; |
|||
/// margin||Spacing|2 |
|||
$--rate-icon-margin: 6px !default; |
|||
$--rate-icon-color: $--color-text-placeholder !default; |
|||
|
|||
/* DatePicker |
|||
--------------------------*/ |
|||
$--datepicker-font-color: $--color-text-regular !default; |
|||
/// color|1|Color|0 |
|||
$--datepicker-off-font-color: $--color-text-placeholder !default; |
|||
/// color||Color|0 |
|||
$--datepicker-header-font-color: $--color-text-regular !default; |
|||
$--datepicker-icon-color: $--color-text-primary !default; |
|||
$--datepicker-border-color: $--disabled-border-base !default; |
|||
$--datepicker-inner-border-color: #e4e4e4 !default; |
|||
/// color||Color|0 |
|||
$--datepicker-inrange-background-color: $--border-color-extra-light !default; |
|||
/// color||Color|0 |
|||
$--datepicker-inrange-hover-background-color: $--border-color-extra-light !default; |
|||
/// color||Color|0 |
|||
$--datepicker-active-color: $--color-primary !default; |
|||
/// color||Color|0 |
|||
$--datepicker-hover-font-color: $--color-primary !default; |
|||
$--datepicker-cell-hover-color: #fff !default; |
|||
|
|||
/* Loading |
|||
--------------------------*/ |
|||
/// height||Other|4 |
|||
$--loading-spinner-size: 42px !default; |
|||
/// height||Other|4 |
|||
$--loading-fullscreen-spinner-size: 50px !default; |
|||
|
|||
/* Scrollbar |
|||
--------------------------*/ |
|||
$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default; |
|||
$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default; |
|||
|
|||
/* Carousel |
|||
--------------------------*/ |
|||
/// fontSize||Font|1 |
|||
$--carousel-arrow-font-size: 12px !default; |
|||
$--carousel-arrow-size: 36px !default; |
|||
$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default; |
|||
$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default; |
|||
/// width||Other|4 |
|||
$--carousel-indicator-width: 30px !default; |
|||
/// height||Other|4 |
|||
$--carousel-indicator-height: 2px !default; |
|||
$--carousel-indicator-padding-horizontal: 4px !default; |
|||
$--carousel-indicator-padding-vertical: 12px !default; |
|||
$--carousel-indicator-out-color: $--border-color-hover !default; |
|||
|
|||
/* Collapse |
|||
--------------------------*/ |
|||
/// color||Color|0 |
|||
$--collapse-border-color: $--border-color-lighter !default; |
|||
/// height||Other|4 |
|||
$--collapse-header-height: 48px !default; |
|||
/// color||Color|0 |
|||
$--collapse-header-background-color: $--color-white !default; |
|||
/// color||Color|0 |
|||
$--collapse-header-font-color: $--color-text-primary !default; |
|||
/// fontSize||Font|1 |
|||
$--collapse-header-font-size: 13px !default; |
|||
/// color||Color|0 |
|||
$--collapse-content-background-color: $--color-white !default; |
|||
/// fontSize||Font|1 |
|||
$--collapse-content-font-size: 13px !default; |
|||
/// color||Color|0 |
|||
$--collapse-content-font-color: $--color-text-primary !default; |
|||
|
|||
/* Transfer |
|||
--------------------------*/ |
|||
$--transfer-border-color: $--border-color-lighter !default; |
|||
$--transfer-border-radius: $--border-radius-base !default; |
|||
/// height||Other|4 |
|||
$--transfer-panel-width: 200px !default; |
|||
/// height||Other|4 |
|||
$--transfer-panel-header-height: 40px !default; |
|||
/// color||Color|0 |
|||
$--transfer-panel-header-background-color: $--background-color-base !default; |
|||
/// height||Other|4 |
|||
$--transfer-panel-footer-height: 40px !default; |
|||
/// height||Other|4 |
|||
$--transfer-panel-body-height: 246px !default; |
|||
/// height||Other|4 |
|||
$--transfer-item-height: 30px !default; |
|||
/// height||Other|4 |
|||
$--transfer-filter-height: 32px !default; |
|||
|
|||
/* Header |
|||
--------------------------*/ |
|||
$--header-padding: 0 20px !default; |
|||
|
|||
/* Footer |
|||
--------------------------*/ |
|||
$--footer-padding: 0 20px !default; |
|||
|
|||
/* Main |
|||
--------------------------*/ |
|||
$--main-padding: 20px !default; |
|||
|
|||
/* Timeline |
|||
--------------------------*/ |
|||
$--timeline-node-size-normal: 12px !default; |
|||
$--timeline-node-size-large: 14px !default; |
|||
$--timeline-node-color: $--border-color-light !default; |
|||
|
|||
/* Backtop |
|||
--------------------------*/ |
|||
/// color||Color|0 |
|||
$--backtop-background-color: $--color-white !default; |
|||
/// color||Color|0 |
|||
$--backtop-font-color: $--color-primary !default; |
|||
/// color||Color|0 |
|||
$--backtop-hover-background-color: $--border-color-extra-light !default; |
|||
|
|||
/* Link |
|||
--------------------------*/ |
|||
/// fontSize||Font|1 |
|||
$--link-font-size: $--font-size-base !default; |
|||
/// fontWeight||Font|1 |
|||
$--link-font-weight: $--font-weight-primary !default; |
|||
/// color||Color|0 |
|||
$--link-default-font-color: $--color-text-regular !default; |
|||
/// color||Color|0 |
|||
$--link-default-active-color: $--color-primary !default; |
|||
/// color||Color|0 |
|||
$--link-disabled-font-color: $--color-text-placeholder !default; |
|||
/// color||Color|0 |
|||
$--link-primary-font-color: $--color-primary !default; |
|||
/// color||Color|0 |
|||
$--link-success-font-color: $--color-success !default; |
|||
/// color||Color|0 |
|||
$--link-warning-font-color: $--color-warning !default; |
|||
/// color||Color|0 |
|||
$--link-danger-font-color: $--color-danger !default; |
|||
/// color||Color|0 |
|||
$--link-info-font-color: $--color-info !default; |
|||
/* Calendar |
|||
--------------------------*/ |
|||
/// border||Other|4 |
|||
$--calendar-border: $--table-border !default; |
|||
/// color||Other|4 |
|||
$--calendar-selected-background-color: #F2F8FE !default; |
|||
$--calendar-cell-width: 85px !default; |
|||
|
|||
/* Form |
|||
-------------------------- */ |
|||
/// fontSize||Font|1 |
|||
$--form-label-font-size: $--font-size-base !default; |
|||
|
|||
/* Avatar |
|||
--------------------------*/ |
|||
/// color||Color|0 |
|||
$--avatar-font-color: #fff !default; |
|||
/// color||Color|0 |
|||
$--avatar-background-color: #C0C4CC !default; |
|||
/// fontSize||Font Size|1 |
|||
$--avatar-text-font-size: 14px !default; |
|||
/// fontSize||Font Size|1 |
|||
$--avatar-icon-font-size: 18px !default; |
|||
/// borderRadius||Border|2 |
|||
$--avatar-border-radius: $--border-radius-base !default; |
|||
/// size|1|Avatar Size|3 |
|||
$--avatar-large-size: 40px !default; |
|||
/// size|1|Avatar Size|3 |
|||
$--avatar-medium-size: 36px !default; |
|||
/// size|1|Avatar Size|3 |
|||
$--avatar-small-size: 28px !default; |
|||
|
|||
/* Break-point |
|||
--------------------------*/ |
|||
$--sm: 768px !default; |
|||
$--md: 992px !default; |
|||
$--lg: 1200px !default; |
|||
$--xl: 1920px !default; |
|||
|
|||
$--breakpoints: ( |
|||
'xs' : (max-width: $--sm - 1), |
|||
'sm' : (min-width: $--sm), |
|||
'md' : (min-width: $--md), |
|||
'lg' : (min-width: $--lg), |
|||
'xl' : (min-width: $--xl) |
|||
); |
|||
|
|||
$--breakpoints-spec: ( |
|||
'xs-only' : (max-width: $--sm - 1), |
|||
'sm-and-up' : (min-width: $--sm), |
|||
'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})", |
|||
'sm-and-down': (max-width: $--md - 1), |
|||
'md-and-up' : (min-width: $--md), |
|||
'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})", |
|||
'md-and-down': (max-width: $--lg - 1), |
|||
'lg-and-up' : (min-width: $--lg), |
|||
'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})", |
|||
'lg-and-down': (max-width: $--xl - 1), |
|||
'xl-only' : (min-width: $--xl), |
|||
); |
|||
@ -0,0 +1 @@ |
|||
.el-alert{width:100%;padding:8px 16px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;position:relative;background-color:#FFF;overflow:hidden;opacity:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity .2s;transition:opacity .2s}.el-alert.is-light .el-alert__closebtn{color:#C0C4CC}.el-alert.is-dark .el-alert__closebtn,.el-alert.is-dark .el-alert__description{color:#FFF}.el-alert.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-alert--success.is-light{background-color:#f0f9eb;color:#67C23A}.el-alert--success.is-light .el-alert__description{color:#67C23A}.el-alert--success.is-dark{background-color:#67C23A;color:#FFF}.el-alert--info.is-light{background-color:#f4f4f5;color:#909399}.el-alert--info.is-dark{background-color:#909399;color:#FFF}.el-alert--info .el-alert__description{color:#909399}.el-alert--warning.is-light{background-color:#fdf6ec;color:#E6A23C}.el-alert--warning.is-light .el-alert__description{color:#E6A23C}.el-alert--warning.is-dark{background-color:#E6A23C;color:#FFF}.el-alert--error.is-light{background-color:#fef0f0;color:#F56C6C}.el-alert--error.is-light .el-alert__description{color:#F56C6C}.el-alert--error.is-dark{background-color:#F56C6C;color:#FFF}.el-alert__content{display:table-cell;padding:0 8px}.el-alert__icon{font-size:16px;width:16px}.el-alert__icon.is-big{font-size:28px;width:28px}.el-alert__title{font-size:13px;line-height:18px}.el-alert__title.is-bold{font-weight:700}.el-alert .el-alert__description{font-size:12px;margin:5px 0 0}.el-alert__closebtn{font-size:12px;opacity:1;position:absolute;top:12px;right:15px;cursor:pointer}.el-alert__closebtn.is-customed{font-style:normal;font-size:13px;top:9px}.el-alert-fade-enter,.el-alert-fade-leave-active{opacity:0} |
|||
@ -0,0 +1 @@ |
|||
.el-aside{overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0} |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue