18 changed files with 1062 additions and 1035 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 622 B |
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 125 KiB |
@ -1,99 +1,99 @@ |
|||
@import 'variables'; |
|||
|
|||
@mixin colorBtn($color) { |
|||
background: $color; |
|||
|
|||
&:hover { |
|||
color: $color; |
|||
|
|||
&:before, |
|||
&:after { |
|||
background: $color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.blue-btn { |
|||
@include colorBtn($blue) |
|||
} |
|||
|
|||
.light-blue-btn { |
|||
@include colorBtn($light-blue) |
|||
} |
|||
|
|||
.red-btn { |
|||
@include colorBtn($red) |
|||
} |
|||
|
|||
.pink-btn { |
|||
@include colorBtn($pink) |
|||
} |
|||
|
|||
.green-btn { |
|||
@include colorBtn($green) |
|||
} |
|||
|
|||
.tiffany-btn { |
|||
@include colorBtn($tiffany) |
|||
} |
|||
|
|||
.yellow-btn { |
|||
@include colorBtn($yellow) |
|||
} |
|||
|
|||
.pan-btn { |
|||
font-size: 14px; |
|||
color: #fff; |
|||
padding: 14px 36px; |
|||
border-radius: 8px; |
|||
border: none; |
|||
outline: none; |
|||
transition: 600ms ease all; |
|||
position: relative; |
|||
display: inline-block; |
|||
|
|||
&:hover { |
|||
background: #fff; |
|||
|
|||
&:before, |
|||
&:after { |
|||
width: 100%; |
|||
transition: 600ms ease all; |
|||
} |
|||
} |
|||
|
|||
&:before, |
|||
&:after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
height: 2px; |
|||
width: 0; |
|||
transition: 400ms ease all; |
|||
} |
|||
|
|||
&::after { |
|||
right: inherit; |
|||
top: inherit; |
|||
left: 0; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.custom-button { |
|||
display: inline-block; |
|||
line-height: 1; |
|||
white-space: nowrap; |
|||
cursor: pointer; |
|||
background: #fff; |
|||
color: #fff; |
|||
-webkit-appearance: none; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
outline: 0; |
|||
margin: 0; |
|||
padding: 10px 15px; |
|||
font-size: 14px; |
|||
border-radius: 4px; |
|||
} |
|||
@import 'variables'; |
|||
|
|||
@mixin colorBtn($color) { |
|||
background: $color; |
|||
|
|||
&:hover { |
|||
color: $color; |
|||
|
|||
&:before, |
|||
&:after { |
|||
background: $color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.blue-btn { |
|||
@include colorBtn($blue) |
|||
} |
|||
|
|||
.light-blue-btn { |
|||
@include colorBtn($light-blue) |
|||
} |
|||
|
|||
.red-btn { |
|||
@include colorBtn($red) |
|||
} |
|||
|
|||
.pink-btn { |
|||
@include colorBtn($pink) |
|||
} |
|||
|
|||
.green-btn { |
|||
@include colorBtn($green) |
|||
} |
|||
|
|||
.tiffany-btn { |
|||
@include colorBtn($tiffany) |
|||
} |
|||
|
|||
.yellow-btn { |
|||
@include colorBtn($yellow) |
|||
} |
|||
|
|||
.pan-btn { |
|||
font-size: 14px; |
|||
color: #fff; |
|||
padding: 14px 36px; |
|||
border-radius: 8px; |
|||
border: none; |
|||
outline: none; |
|||
transition: 600ms ease all; |
|||
position: relative; |
|||
display: inline-block; |
|||
|
|||
&:hover { |
|||
background: #fff; |
|||
|
|||
&:before, |
|||
&:after { |
|||
width: 100%; |
|||
transition: 600ms ease all; |
|||
} |
|||
} |
|||
|
|||
&:before, |
|||
&:after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
height: 2px; |
|||
width: 0; |
|||
transition: 400ms ease all; |
|||
} |
|||
|
|||
&::after { |
|||
right: inherit; |
|||
top: inherit; |
|||
left: 0; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.custom-button { |
|||
display: inline-block; |
|||
line-height: 1; |
|||
white-space: nowrap; |
|||
cursor: pointer; |
|||
background: #fff; |
|||
color: #fff; |
|||
-webkit-appearance: none; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
outline: 0; |
|||
margin: 0; |
|||
padding: 10px 15px; |
|||
font-size: 14px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
@ -1,205 +1,230 @@ |
|||
.head-container { |
|||
padding-bottom: 10px; |
|||
|
|||
.filter-item { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin: 0 3px 10px 0; |
|||
|
|||
input { |
|||
height: 30.5px; |
|||
line-height: 30.5px; |
|||
} |
|||
} |
|||
|
|||
.el-form-item-label { |
|||
margin: 0 3px 9px 0; |
|||
display: inline-block; |
|||
text-align: right; |
|||
vertical-align: middle; |
|||
font-size: 14px; |
|||
color: #606266; |
|||
line-height: 30.5px; |
|||
padding: 0 7px 0 7px; |
|||
} |
|||
|
|||
.el-button + .el-button { |
|||
margin-left: 0 !important; |
|||
} |
|||
|
|||
.el-select__caret.el-input__icon.el-icon-arrow-up { |
|||
line-height: 30.5px; |
|||
} |
|||
|
|||
.date-item { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin-bottom: 10px; |
|||
height: 30.5px !important; |
|||
width: 230px !important; |
|||
} |
|||
} |
|||
|
|||
.el-avatar { |
|||
display: inline-block; |
|||
text-align: center; |
|||
background: #ccc; |
|||
color: #fff; |
|||
white-space: nowrap; |
|||
position: relative; |
|||
overflow: hidden; |
|||
vertical-align: middle; |
|||
width: 32px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
border-radius: 16px; |
|||
} |
|||
|
|||
.logo-con { |
|||
height: 60px; |
|||
padding: 13px 0 0; |
|||
|
|||
img { |
|||
height: 32px; |
|||
width: 135px; |
|||
display: block; |
|||
//margin: 0 auto; |
|||
} |
|||
} |
|||
|
|||
#el-login-footer { |
|||
height: 40px; |
|||
line-height: 40px; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-family: Arial, serif; |
|||
font-size: 12px; |
|||
letter-spacing: 1px; |
|||
} |
|||
|
|||
#el-main-footer { |
|||
background: none repeat scroll 0 0 white; |
|||
border-top: 1px solid #e7eaec; |
|||
overflow: hidden; |
|||
padding: 10px 6px 0 6px; |
|||
height: 33px; |
|||
font-size: 0.7rem !important; |
|||
color: #7a8b9a; |
|||
letter-spacing: 0.8px; |
|||
font-family: Arial, sans-serif !important; |
|||
position: fixed; |
|||
bottom: 0; |
|||
z-index: 99; |
|||
width: 100%; |
|||
} |
|||
|
|||
.eladmin-upload { |
|||
border: 1px dashed #c0ccda; |
|||
border-radius: 5px; |
|||
height: 45px; |
|||
line-height: 45px; |
|||
width: 368px; |
|||
} |
|||
|
|||
.my-blockquote { |
|||
margin: 0 0 10px; |
|||
padding: 15px; |
|||
line-height: 22px; |
|||
border-left: 5px solid #00437B; |
|||
border-radius: 0 2px 2px 0; |
|||
background-color: #f2f2f2; |
|||
} |
|||
|
|||
.my-code { |
|||
position: relative; |
|||
padding: 15px; |
|||
line-height: 20px; |
|||
border-left: 5px solid #ddd; |
|||
color: #333; |
|||
font-family: Courier New, serif; |
|||
font-size: 12px |
|||
} |
|||
|
|||
.el-tabs { |
|||
margin-bottom: 25px; |
|||
} |
|||
|
|||
|
|||
//修改侧边栏菜单颜色和高度 |
|||
.el-menu-item, .el-submenu__title { |
|||
height: 40px !important; |
|||
//background-color: #776020 !important; |
|||
} |
|||
|
|||
#app .sidebar-container .el-submenu .el-menu-item { |
|||
} |
|||
|
|||
#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title, #app .sidebar-container .el-submenu .el-menu-item { |
|||
} |
|||
|
|||
#app .sidebar-container { |
|||
//background-color: #544b32 !important; |
|||
} |
|||
|
|||
.el-form-item--small.el-form-item { |
|||
margin-bottom: 12px !important; |
|||
} |
|||
|
|||
.el-form-item--mini.el-form-item { |
|||
margin-bottom: 10px !important; |
|||
} |
|||
|
|||
//去除编辑文本框为数字时的上下箭头start |
|||
.el-form--inline .el-form-item__content { |
|||
width: auto !important; |
|||
} |
|||
|
|||
input[type="number"] { |
|||
-moz-appearance: textfield; |
|||
} |
|||
|
|||
input[type="number"]::-webkit-inner-spin-button, |
|||
input[type="number"]::-webkit-outer-spin-button { |
|||
-webkit-appearance: none; |
|||
} |
|||
|
|||
//去除编辑文本框为数字时的上下箭头end |
|||
//设置计数器文字居左 |
|||
.el-input-number--mini .el-input__inner { |
|||
text-align: left; |
|||
} |
|||
|
|||
.el-table:not(.el-table–scrollable-x) .el-table__fixed-right { |
|||
height: 100% !important; |
|||
} |
|||
|
|||
// 修改弹出框距离 |
|||
.el-dialog__body { |
|||
padding-top: 0px !important; |
|||
} |
|||
|
|||
//表格标题样式 |
|||
.el-table { |
|||
.el-table__header-wrapper, |
|||
.el-table__fixed-header-wrapper { |
|||
th { |
|||
word-break: break-word; |
|||
background-color: #f8f8f9; |
|||
color: #515a6e; |
|||
height: 35px; |
|||
font-size: 13px; |
|||
} |
|||
td{ |
|||
color: #f8f8f9; |
|||
} |
|||
} |
|||
.el-table__body-wrapper { |
|||
.el-button [class*="el-icon-"] + span { |
|||
margin-left: 1px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.head-container { |
|||
padding-top: 4px; |
|||
padding-bottom: 6px; |
|||
background-color: #ffffff; |
|||
border-radius: 4px; |
|||
|
|||
.filter-item { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin: 0 3px 10px 0; |
|||
|
|||
input { |
|||
height: 30.5px; |
|||
line-height: 30.5px; |
|||
} |
|||
} |
|||
|
|||
.el-form-item-label { |
|||
margin: 0 3px 9px 0; |
|||
display: inline-block; |
|||
text-align: right; |
|||
vertical-align: middle; |
|||
font-size: 14px; |
|||
color: #606266; |
|||
line-height: 30.5px; |
|||
padding: 0 7px 0 7px; |
|||
} |
|||
|
|||
.el-button + .el-button { |
|||
margin-left: 0 !important; |
|||
} |
|||
|
|||
.el-select__caret.el-input__icon.el-icon-arrow-up { |
|||
line-height: 30.5px; |
|||
} |
|||
|
|||
.date-item { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin-bottom: 10px; |
|||
height: 30.5px !important; |
|||
width: 230px !important; |
|||
} |
|||
} |
|||
|
|||
.el-avatar { |
|||
display: inline-block; |
|||
text-align: center; |
|||
background: #ccc; |
|||
color: #fff; |
|||
white-space: nowrap; |
|||
position: relative; |
|||
overflow: hidden; |
|||
vertical-align: middle; |
|||
width: 32px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
border-radius: 16px; |
|||
} |
|||
|
|||
.logo-con { |
|||
height: 60px; |
|||
padding: 13px 0 0; |
|||
|
|||
img { |
|||
height: 32px; |
|||
width: 135px; |
|||
display: block; |
|||
//margin: 0 auto; |
|||
} |
|||
} |
|||
|
|||
#el-login-footer { |
|||
height: 40px; |
|||
line-height: 40px; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-family: Arial, serif; |
|||
font-size: 12px; |
|||
letter-spacing: 1px; |
|||
} |
|||
|
|||
#el-main-footer { |
|||
background: none repeat scroll 0 0 white; |
|||
border-top: 1px solid #e7eaec; |
|||
overflow: hidden; |
|||
padding: 10px 6px 0 6px; |
|||
height: 33px; |
|||
font-size: 0.7rem !important; |
|||
color: #7a8b9a; |
|||
letter-spacing: 0.8px; |
|||
font-family: Arial, sans-serif !important; |
|||
position: fixed; |
|||
bottom: 0; |
|||
z-index: 99; |
|||
width: 100%; |
|||
} |
|||
|
|||
.eladmin-upload { |
|||
border: 1px dashed #c0ccda; |
|||
border-radius: 5px; |
|||
height: 45px; |
|||
line-height: 45px; |
|||
width: 368px; |
|||
} |
|||
|
|||
.my-blockquote { |
|||
margin: 0 0 10px; |
|||
padding: 15px; |
|||
line-height: 22px; |
|||
border-left: 5px solid #00437B; |
|||
border-radius: 0 2px 2px 0; |
|||
background-color: #f2f2f2; |
|||
} |
|||
|
|||
.my-code { |
|||
position: relative; |
|||
padding: 15px; |
|||
line-height: 20px; |
|||
border-left: 5px solid #ddd; |
|||
color: #333; |
|||
font-family: Courier New, serif; |
|||
font-size: 12px |
|||
} |
|||
|
|||
.el-tabs { |
|||
margin-bottom: 25px; |
|||
} |
|||
|
|||
|
|||
//修改侧边栏菜单颜色和高度 |
|||
.el-menu-item, .el-submenu__title { |
|||
height: 40px !important; |
|||
//background-color: #776020 !important; |
|||
} |
|||
|
|||
#app .sidebar-container .el-submenu .el-menu-item { |
|||
} |
|||
|
|||
#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title, #app .sidebar-container .el-submenu .el-menu-item { |
|||
} |
|||
|
|||
#app .sidebar-container { |
|||
//background-color: #544b32 !important; |
|||
} |
|||
|
|||
.el-form-item--small.el-form-item { |
|||
margin-bottom: 12px !important; |
|||
} |
|||
|
|||
.el-form-item--mini.el-form-item { |
|||
margin-bottom: 10px !important; |
|||
} |
|||
|
|||
//去除编辑文本框为数字时的上下箭头start |
|||
.el-form--inline .el-form-item__content { |
|||
width: auto !important; |
|||
} |
|||
|
|||
input[type="number"] { |
|||
-moz-appearance: textfield; |
|||
} |
|||
|
|||
input[type="number"]::-webkit-inner-spin-button, |
|||
input[type="number"]::-webkit-outer-spin-button { |
|||
-webkit-appearance: none; |
|||
} |
|||
|
|||
//去除编辑文本框为数字时的上下箭头end |
|||
|
|||
//设置计数器文字居左 |
|||
.el-input-number--mini .el-input__inner { |
|||
text-align: left; |
|||
} |
|||
|
|||
.el-table:not(.el-table–scrollable-x) .el-table__fixed-right { |
|||
height: 100% !important; |
|||
} |
|||
|
|||
// 修改弹出框距离 |
|||
.el-dialog__body { |
|||
padding-top: 0px !important; |
|||
} |
|||
|
|||
//表格标题样式 |
|||
.el-table { |
|||
.el-table__header-wrapper, |
|||
.el-table__fixed-header-wrapper { |
|||
th { |
|||
word-break: break-word; |
|||
background-color: #f5f5f5; |
|||
color: #515a6e; |
|||
height: 35px; |
|||
font-size: 13px; |
|||
} |
|||
|
|||
td { |
|||
color: #f8f8f9; |
|||
} |
|||
} |
|||
|
|||
.el-table__body-wrapper { |
|||
.el-button [class*="el-icon-"] + span { |
|||
margin-left: 1px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
//表格固定列最后一行显示不全(https://mp.weixin.qq.com/s/HpoykJNtsynsW4UMHitZbQ) |
|||
.el-table__fixed-right { |
|||
height: 100% !important; |
|||
} |
|||
|
|||
//表头与内容错位 |
|||
.el-table--scrollable-y .el-table__body-wrapper { |
|||
overflow-y: overlay !important; |
|||
} |
|||
//左侧边框不显示start https://blog.csdn.net/m0_37922443/article/details/126487240 |
|||
.el-table__row td:not(.is-hidden):last-child { |
|||
right: -1px; |
|||
} |
|||
|
|||
thead th:not(.is-hidden):last-child { |
|||
right: -1px; |
|||
} |
|||
//左侧边框不显示end |
|||
|
|||
|
|||
@ -1,122 +1,122 @@ |
|||
// cover some element-ui styles |
|||
|
|||
.el-breadcrumb__inner, |
|||
.el-breadcrumb__inner a { |
|||
font-weight: 400 !important; |
|||
} |
|||
|
|||
.el-upload { |
|||
input[type="file"] { |
|||
display: none !important; |
|||
} |
|||
} |
|||
|
|||
.el-upload__input { |
|||
display: none; |
|||
} |
|||
|
|||
.cell { |
|||
.el-tag { |
|||
margin-right: 0px; |
|||
} |
|||
} |
|||
|
|||
.small-padding { |
|||
.cell { |
|||
padding-left: 5px; |
|||
padding-right: 5px; |
|||
} |
|||
} |
|||
|
|||
.fixed-width { |
|||
.el-button--mini { |
|||
padding: 7px 10px; |
|||
width: 60px; |
|||
} |
|||
} |
|||
|
|||
.status-col { |
|||
.cell { |
|||
padding: 0 10px; |
|||
text-align: center; |
|||
|
|||
.el-tag { |
|||
margin-right: 0px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// to fixed https://github.com/ElemeFE/element/issues/2461 |
|||
.el-dialog { |
|||
transform: none; |
|||
left: 0; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
// refine element ui upload |
|||
.upload-container { |
|||
.el-upload { |
|||
width: 100%; |
|||
|
|||
.el-upload-dragger { |
|||
width: 100%; |
|||
height: 200px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// dropdown |
|||
.el-dropdown-menu { |
|||
a { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
// fix date-picker ui bug in filter-item |
|||
.el-range-editor.el-input__inner { |
|||
display: inline-flex !important; |
|||
} |
|||
|
|||
// to fix el-date-picker css style |
|||
.el-range-separator { |
|||
box-sizing: content-box; |
|||
} |
|||
|
|||
.el-menu--collapse |
|||
> div |
|||
> .el-submenu |
|||
> .el-submenu__title |
|||
.el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
|
|||
.el-form-search { |
|||
float: right; |
|||
.el-form-search-item { |
|||
margin-bottom: 0px; |
|||
.el-input__inner { |
|||
width: 140px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
el-table .el-table__cell { |
|||
padding: 8px 0; |
|||
} |
|||
|
|||
.el-table--medium .el-table__cell { |
|||
padding: 6px 0; |
|||
} |
|||
|
|||
.el-table--small .el-table__cell { |
|||
padding: 3px 0; |
|||
} |
|||
|
|||
.el-table--mini .el-table__cell { |
|||
padding: 1px 0; |
|||
} |
|||
|
|||
.el-dialog__body { |
|||
padding: 20px 20px; |
|||
} |
|||
// cover some element-ui styles |
|||
|
|||
.el-breadcrumb__inner, |
|||
.el-breadcrumb__inner a { |
|||
font-weight: 400 !important; |
|||
} |
|||
|
|||
.el-upload { |
|||
input[type="file"] { |
|||
display: none !important; |
|||
} |
|||
} |
|||
|
|||
.el-upload__input { |
|||
display: none; |
|||
} |
|||
|
|||
.cell { |
|||
.el-tag { |
|||
margin-right: 0px; |
|||
} |
|||
} |
|||
|
|||
.small-padding { |
|||
.cell { |
|||
padding-left: 5px; |
|||
padding-right: 5px; |
|||
} |
|||
} |
|||
|
|||
.fixed-width { |
|||
.el-button--mini { |
|||
padding: 7px 10px; |
|||
width: 60px; |
|||
} |
|||
} |
|||
|
|||
.status-col { |
|||
.cell { |
|||
padding: 0 10px; |
|||
text-align: center; |
|||
|
|||
.el-tag { |
|||
margin-right: 0px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// to fixed https://github.com/ElemeFE/element/issues/2461 |
|||
.el-dialog { |
|||
transform: none; |
|||
left: 0; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
// refine element ui upload |
|||
.upload-container { |
|||
.el-upload { |
|||
width: 100%; |
|||
|
|||
.el-upload-dragger { |
|||
width: 100%; |
|||
height: 200px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// dropdown |
|||
.el-dropdown-menu { |
|||
a { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
// fix date-picker ui bug in filter-item |
|||
.el-range-editor.el-input__inner { |
|||
display: inline-flex !important; |
|||
} |
|||
|
|||
// to fix el-date-picker css style |
|||
.el-range-separator { |
|||
box-sizing: content-box; |
|||
} |
|||
|
|||
.el-menu--collapse |
|||
> div |
|||
> .el-submenu |
|||
> .el-submenu__title |
|||
.el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
|
|||
.el-form-search { |
|||
float: right; |
|||
.el-form-search-item { |
|||
margin-bottom: 0px; |
|||
.el-input__inner { |
|||
width: 140px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
el-table .el-table__cell { |
|||
padding: 8px 0; |
|||
} |
|||
|
|||
.el-table--medium .el-table__cell { |
|||
padding: 6px 0; |
|||
} |
|||
|
|||
.el-table--small .el-table__cell { |
|||
padding: 3px 0; |
|||
} |
|||
|
|||
.el-table--mini .el-table__cell { |
|||
padding: 1px 0; |
|||
} |
|||
|
|||
.el-dialog__body { |
|||
padding: 20px 20px; |
|||
} |
|||
|
|||
@ -1,31 +1,31 @@ |
|||
/** |
|||
* I think element-ui's default theme color is too light for long-term use. |
|||
* So I modified the default color and you can modify it to your liking. |
|||
**/ |
|||
|
|||
/* theme color */ |
|||
$--color-primary: #1890ff; |
|||
$--color-success: #13ce66; |
|||
$--color-warning: #FFBA00; |
|||
$--color-danger: #ff4949; |
|||
// $--color-info: #1E1E1E; |
|||
|
|||
$--button-font-weight: 400; |
|||
|
|||
// $--color-text-regular: #1f2d3d; |
|||
|
|||
$--border-color-light: #dfe4ed; |
|||
$--border-color-lighter: #e6ebf5; |
|||
|
|||
$--table-border:1px solid#dfe6ec; |
|||
|
|||
/* icon font path, required */ |
|||
$--font-path: '~element-ui/lib/theme-chalk/fonts'; |
|||
|
|||
@import "../../../node_modules/element-ui/packages/theme-chalk/src/index"; |
|||
|
|||
// the :export directive is the magic sauce for webpack |
|||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|||
:export { |
|||
theme: $--color-primary; |
|||
} |
|||
/** |
|||
* I think element-ui's default theme color is too light for long-term use. |
|||
* So I modified the default color and you can modify it to your liking. |
|||
**/ |
|||
|
|||
/* theme color */ |
|||
$--color-primary: #1890ff; |
|||
$--color-success: #13ce66; |
|||
$--color-warning: #FFBA00; |
|||
$--color-danger: #ff4949; |
|||
// $--color-info: #1E1E1E; |
|||
|
|||
$--button-font-weight: 400; |
|||
|
|||
// $--color-text-regular: #1f2d3d; |
|||
|
|||
$--border-color-light: #dfe4ed; |
|||
$--border-color-lighter: #e6ebf5; |
|||
|
|||
$--table-border:1px solid#dfe6ec; |
|||
|
|||
/* icon font path, required */ |
|||
$--font-path: '~element-ui/lib/theme-chalk/fonts'; |
|||
|
|||
@import "../../../node_modules/element-ui/packages/theme-chalk/src/index"; |
|||
|
|||
// the :export directive is the magic sauce for webpack |
|||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|||
:export { |
|||
theme: $--color-primary; |
|||
} |
|||
|
|||
@ -1,182 +1,183 @@ |
|||
@import 'variables'; |
|||
@import 'mixin'; |
|||
@import 'transition'; |
|||
@import 'element-ui'; |
|||
@import 'sidebar'; |
|||
@import 'btn'; |
|||
@import 'eladmin'; |
|||
|
|||
body { |
|||
height: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; |
|||
} |
|||
|
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
#app { |
|||
height: 100%; |
|||
} |
|||
|
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: inherit; |
|||
} |
|||
|
|||
.no-padding { |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
.padding-content { |
|||
padding: 4px 0; |
|||
} |
|||
|
|||
a:focus, |
|||
a:active { |
|||
outline: none; |
|||
} |
|||
|
|||
a, |
|||
a:focus, |
|||
a:hover { |
|||
cursor: pointer; |
|||
color: inherit; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
div:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
.fr { |
|||
float: right; |
|||
} |
|||
|
|||
.fl { |
|||
float: left; |
|||
} |
|||
|
|||
.pr-5 { |
|||
padding-right: 5px; |
|||
} |
|||
|
|||
.pl-5 { |
|||
padding-left: 5px; |
|||
} |
|||
|
|||
.block { |
|||
display: block; |
|||
} |
|||
|
|||
.pointer { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.inlineBlock { |
|||
display: block; |
|||
} |
|||
|
|||
.clearfix { |
|||
&:after { |
|||
visibility: hidden; |
|||
display: block; |
|||
font-size: 0; |
|||
content: " "; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
aside { |
|||
background: #eef1f6; |
|||
padding: 8px 24px; |
|||
margin-bottom: 20px; |
|||
border-radius: 2px; |
|||
display: block; |
|||
line-height: 32px; |
|||
font-size: 16px; |
|||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; |
|||
color: #2c3e50; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
|
|||
a { |
|||
color: #337ab7; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: rgb(32, 160, 255); |
|||
} |
|||
} |
|||
} |
|||
|
|||
//main-container全局样式 |
|||
.app-container { |
|||
padding: 20px 20px 45px 20px; |
|||
} |
|||
|
|||
.components-container { |
|||
margin: 30px 50px; |
|||
position: relative; |
|||
} |
|||
|
|||
.pagination-container { |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.text-center { |
|||
text-align: center |
|||
} |
|||
|
|||
.sub-navbar { |
|||
height: 50px; |
|||
line-height: 50px; |
|||
position: relative; |
|||
width: 100%; |
|||
text-align: right; |
|||
padding-right: 20px; |
|||
transition: 600ms ease position; |
|||
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); |
|||
|
|||
.subtitle { |
|||
font-size: 20px; |
|||
color: #fff; |
|||
} |
|||
|
|||
&.draft { |
|||
background: #d0d0d0; |
|||
} |
|||
|
|||
&.deleted { |
|||
background: #d0d0d0; |
|||
} |
|||
} |
|||
|
|||
.link-type, |
|||
.link-type:focus { |
|||
color: #337ab7; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: rgb(32, 160, 255); |
|||
} |
|||
} |
|||
|
|||
//refine vue-multiselect plugin |
|||
.multiselect { |
|||
line-height: 16px; |
|||
} |
|||
|
|||
.multiselect--active { |
|||
z-index: 1000 !important; |
|||
} |
|||
@import 'variables'; |
|||
@import 'mixin'; |
|||
@import 'transition'; |
|||
@import 'element-ui'; |
|||
@import 'sidebar'; |
|||
@import 'btn'; |
|||
@import 'eladmin'; |
|||
|
|||
body { |
|||
height: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; |
|||
} |
|||
|
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
//background-color: #eeeeee; |
|||
} |
|||
|
|||
#app { |
|||
height: 100%; |
|||
} |
|||
|
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: inherit; |
|||
} |
|||
|
|||
.no-padding { |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
.padding-content { |
|||
padding: 4px 0; |
|||
} |
|||
|
|||
a:focus, |
|||
a:active { |
|||
outline: none; |
|||
} |
|||
|
|||
a, |
|||
a:focus, |
|||
a:hover { |
|||
cursor: pointer; |
|||
color: inherit; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
div:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
.fr { |
|||
float: right; |
|||
} |
|||
|
|||
.fl { |
|||
float: left; |
|||
} |
|||
|
|||
.pr-5 { |
|||
padding-right: 5px; |
|||
} |
|||
|
|||
.pl-5 { |
|||
padding-left: 5px; |
|||
} |
|||
|
|||
.block { |
|||
display: block; |
|||
} |
|||
|
|||
.pointer { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.inlineBlock { |
|||
display: block; |
|||
} |
|||
|
|||
.clearfix { |
|||
&:after { |
|||
visibility: hidden; |
|||
display: block; |
|||
font-size: 0; |
|||
content: " "; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
aside { |
|||
background: #d40c70; |
|||
padding: 8px 24px; |
|||
margin-bottom: 20px; |
|||
border-radius: 2px; |
|||
display: block; |
|||
line-height: 32px; |
|||
font-size: 16px; |
|||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; |
|||
color: #2c3e50; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
|
|||
a { |
|||
color: #337ab7; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: rgb(32, 160, 255); |
|||
} |
|||
} |
|||
} |
|||
|
|||
//main-container全局样式 |
|||
.app-container { |
|||
padding: 10px 20px 45px 10px; |
|||
} |
|||
|
|||
.components-container { |
|||
margin: 30px 50px; |
|||
position: relative; |
|||
} |
|||
|
|||
.pagination-container { |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.text-center { |
|||
text-align: center |
|||
} |
|||
|
|||
.sub-navbar { |
|||
height: 50px; |
|||
line-height: 50px; |
|||
position: relative; |
|||
width: 100%; |
|||
text-align: right; |
|||
padding-right: 20px; |
|||
transition: 600ms ease position; |
|||
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); |
|||
|
|||
.subtitle { |
|||
font-size: 20px; |
|||
color: #fff; |
|||
} |
|||
|
|||
&.draft { |
|||
background: #d0d0d0; |
|||
} |
|||
|
|||
&.deleted { |
|||
background: #d0d0d0; |
|||
} |
|||
} |
|||
|
|||
.link-type, |
|||
.link-type:focus { |
|||
color: #337ab7; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: rgb(32, 160, 255); |
|||
} |
|||
} |
|||
|
|||
//refine vue-multiselect plugin |
|||
.multiselect { |
|||
line-height: 16px; |
|||
} |
|||
|
|||
.multiselect--active { |
|||
z-index: 1000 !important; |
|||
} |
|||
|
|||
@ -1,66 +1,66 @@ |
|||
@mixin clearfix { |
|||
&:after { |
|||
content: ""; |
|||
display: table; |
|||
clear: both; |
|||
} |
|||
} |
|||
|
|||
@mixin scrollBar { |
|||
&::-webkit-scrollbar-track-piece { |
|||
background: #d3dce6; |
|||
} |
|||
|
|||
&::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-thumb { |
|||
background: #99a9bf; |
|||
border-radius: 20px; |
|||
} |
|||
} |
|||
|
|||
@mixin relative { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
@mixin pct($pct) { |
|||
width: #{$pct}; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
@mixin triangle($width, $height, $color, $direction) { |
|||
$width: $width/2; |
|||
$color-border-style: $height solid $color; |
|||
$transparent-border-style: $width solid transparent; |
|||
height: 0; |
|||
width: 0; |
|||
|
|||
@if $direction==up { |
|||
border-bottom: $color-border-style; |
|||
border-left: $transparent-border-style; |
|||
border-right: $transparent-border-style; |
|||
} |
|||
|
|||
@else if $direction==right { |
|||
border-left: $color-border-style; |
|||
border-top: $transparent-border-style; |
|||
border-bottom: $transparent-border-style; |
|||
} |
|||
|
|||
@else if $direction==down { |
|||
border-top: $color-border-style; |
|||
border-left: $transparent-border-style; |
|||
border-right: $transparent-border-style; |
|||
} |
|||
|
|||
@else if $direction==left { |
|||
border-right: $color-border-style; |
|||
border-top: $transparent-border-style; |
|||
border-bottom: $transparent-border-style; |
|||
} |
|||
} |
|||
@mixin clearfix { |
|||
&:after { |
|||
content: ""; |
|||
display: table; |
|||
clear: both; |
|||
} |
|||
} |
|||
|
|||
@mixin scrollBar { |
|||
&::-webkit-scrollbar-track-piece { |
|||
background: #d3dce6; |
|||
} |
|||
|
|||
&::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-thumb { |
|||
background: #99a9bf; |
|||
border-radius: 20px; |
|||
} |
|||
} |
|||
|
|||
@mixin relative { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
@mixin pct($pct) { |
|||
width: #{$pct}; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
@mixin triangle($width, $height, $color, $direction) { |
|||
$width: $width/2; |
|||
$color-border-style: $height solid $color; |
|||
$transparent-border-style: $width solid transparent; |
|||
height: 0; |
|||
width: 0; |
|||
|
|||
@if $direction==up { |
|||
border-bottom: $color-border-style; |
|||
border-left: $transparent-border-style; |
|||
border-right: $transparent-border-style; |
|||
} |
|||
|
|||
@else if $direction==right { |
|||
border-left: $color-border-style; |
|||
border-top: $transparent-border-style; |
|||
border-bottom: $transparent-border-style; |
|||
} |
|||
|
|||
@else if $direction==down { |
|||
border-top: $color-border-style; |
|||
border-left: $transparent-border-style; |
|||
border-right: $transparent-border-style; |
|||
} |
|||
|
|||
@else if $direction==left { |
|||
border-right: $color-border-style; |
|||
border-top: $transparent-border-style; |
|||
border-bottom: $transparent-border-style; |
|||
} |
|||
} |
|||
|
|||
@ -1,209 +1,209 @@ |
|||
#app { |
|||
|
|||
.main-container { |
|||
min-height: 100%; |
|||
transition: margin-left .28s; |
|||
margin-left: $sideBarWidth; |
|||
position: relative; |
|||
} |
|||
|
|||
.sidebar-container { |
|||
transition: width 0.28s; |
|||
width: $sideBarWidth !important; |
|||
background-color: $menuBg; |
|||
height: 100%; |
|||
position: fixed; |
|||
font-size: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1001; |
|||
overflow: hidden; |
|||
|
|||
// reset element-ui css |
|||
.horizontal-collapse-transition { |
|||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; |
|||
} |
|||
|
|||
.scrollbar-wrapper { |
|||
overflow-x: hidden !important; |
|||
} |
|||
|
|||
.el-scrollbar__bar.is-vertical { |
|||
right: 0; |
|||
} |
|||
|
|||
.el-scrollbar { |
|||
height: 100%; |
|||
} |
|||
|
|||
&.has-logo { |
|||
.el-scrollbar { |
|||
height: calc(100% - 50px); |
|||
} |
|||
} |
|||
|
|||
.is-horizontal { |
|||
display: none; |
|||
} |
|||
|
|||
a { |
|||
display: inline-block; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.svg-icon { |
|||
margin-right: 16px; |
|||
} |
|||
|
|||
.el-menu { |
|||
border: none; |
|||
height: 100%; |
|||
width: 100% !important; |
|||
} |
|||
|
|||
// menu hover |
|||
.submenu-title-noDropdown, |
|||
.el-submenu__title { |
|||
&:hover { |
|||
background-color: $menuHover !important; |
|||
} |
|||
} |
|||
|
|||
.is-active>.el-submenu__title { |
|||
color: $subMenuActiveText !important; |
|||
} |
|||
|
|||
& .nest-menu .el-submenu>.el-submenu__title, |
|||
& .el-submenu .el-menu-item { |
|||
min-width: $sideBarWidth !important; |
|||
background-color: $subMenuBg !important; |
|||
|
|||
&:hover { |
|||
background-color: $subMenuHover !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hideSidebar { |
|||
.sidebar-container { |
|||
width: 54px !important; |
|||
} |
|||
|
|||
.main-container { |
|||
margin-left: 54px; |
|||
} |
|||
|
|||
.submenu-title-noDropdown { |
|||
padding: 0 !important; |
|||
position: relative; |
|||
|
|||
.el-tooltip { |
|||
padding: 0 !important; |
|||
|
|||
.svg-icon { |
|||
margin-left: 20px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-submenu { |
|||
overflow: hidden; |
|||
|
|||
&>.el-submenu__title { |
|||
padding: 0 !important; |
|||
|
|||
.svg-icon { |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
.el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-menu--collapse { |
|||
.el-submenu { |
|||
&>.el-submenu__title { |
|||
&>span { |
|||
height: 0; |
|||
width: 0; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-menu--collapse .el-menu .el-submenu { |
|||
min-width: $sideBarWidth !important; |
|||
} |
|||
|
|||
// mobile responsive |
|||
.mobile { |
|||
.main-container { |
|||
margin-left: 0; |
|||
} |
|||
|
|||
.sidebar-container { |
|||
transition: transform .28s; |
|||
width: $sideBarWidth !important; |
|||
} |
|||
|
|||
&.hideSidebar { |
|||
.sidebar-container { |
|||
pointer-events: none; |
|||
transition-duration: 0.3s; |
|||
transform: translate3d(-$sideBarWidth, 0, 0); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.withoutAnimation { |
|||
|
|||
.main-container, |
|||
.sidebar-container { |
|||
transition: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// when menu collapsed |
|||
.el-menu--vertical { |
|||
&>.el-menu { |
|||
.svg-icon { |
|||
margin-right: 16px; |
|||
} |
|||
} |
|||
|
|||
.nest-menu .el-submenu>.el-submenu__title, |
|||
.el-menu-item { |
|||
&:hover { |
|||
// you can use $subMenuHover |
|||
background-color: $menuHover !important; |
|||
} |
|||
} |
|||
|
|||
// the scroll bar appears when the subMenu is too long |
|||
>.el-menu--popup { |
|||
max-height: 100vh; |
|||
overflow-y: auto; |
|||
|
|||
&::-webkit-scrollbar-track-piece { |
|||
background: #d3dce6; |
|||
} |
|||
|
|||
&::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-thumb { |
|||
background: #99a9bf; |
|||
border-radius: 20px; |
|||
} |
|||
} |
|||
} |
|||
#app { |
|||
|
|||
.main-container { |
|||
min-height: 100%; |
|||
transition: margin-left .28s; |
|||
margin-left: $sideBarWidth; |
|||
position: relative; |
|||
} |
|||
|
|||
.sidebar-container { |
|||
transition: width 0.28s; |
|||
width: $sideBarWidth !important; |
|||
background-color: $menuBg; |
|||
height: 100%; |
|||
position: fixed; |
|||
font-size: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1001; |
|||
overflow: hidden; |
|||
|
|||
// reset element-ui css |
|||
.horizontal-collapse-transition { |
|||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; |
|||
} |
|||
|
|||
.scrollbar-wrapper { |
|||
overflow-x: hidden !important; |
|||
} |
|||
|
|||
.el-scrollbar__bar.is-vertical { |
|||
right: 0; |
|||
} |
|||
|
|||
.el-scrollbar { |
|||
height: 100%; |
|||
} |
|||
|
|||
&.has-logo { |
|||
.el-scrollbar { |
|||
height: calc(100% - 50px); |
|||
} |
|||
} |
|||
|
|||
.is-horizontal { |
|||
display: none; |
|||
} |
|||
|
|||
a { |
|||
display: inline-block; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.svg-icon { |
|||
margin-right: 16px; |
|||
} |
|||
|
|||
.el-menu { |
|||
border: none; |
|||
height: 100%; |
|||
width: 100% !important; |
|||
} |
|||
|
|||
// menu hover |
|||
.submenu-title-noDropdown, |
|||
.el-submenu__title { |
|||
&:hover { |
|||
background-color: $menuHover !important; |
|||
} |
|||
} |
|||
|
|||
.is-active>.el-submenu__title { |
|||
color: $subMenuActiveText !important; |
|||
} |
|||
|
|||
& .nest-menu .el-submenu>.el-submenu__title, |
|||
& .el-submenu .el-menu-item { |
|||
min-width: $sideBarWidth !important; |
|||
background-color: $subMenuBg !important; |
|||
|
|||
&:hover { |
|||
background-color: $subMenuHover !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hideSidebar { |
|||
.sidebar-container { |
|||
width: 54px !important; |
|||
} |
|||
|
|||
.main-container { |
|||
margin-left: 54px; |
|||
} |
|||
|
|||
.submenu-title-noDropdown { |
|||
padding: 0 !important; |
|||
position: relative; |
|||
|
|||
.el-tooltip { |
|||
padding: 0 !important; |
|||
|
|||
.svg-icon { |
|||
margin-left: 20px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-submenu { |
|||
overflow: hidden; |
|||
|
|||
&>.el-submenu__title { |
|||
padding: 0 !important; |
|||
|
|||
.svg-icon { |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
.el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-menu--collapse { |
|||
.el-submenu { |
|||
&>.el-submenu__title { |
|||
&>span { |
|||
height: 0; |
|||
width: 0; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-menu--collapse .el-menu .el-submenu { |
|||
min-width: $sideBarWidth !important; |
|||
} |
|||
|
|||
// mobile responsive |
|||
.mobile { |
|||
.main-container { |
|||
margin-left: 0; |
|||
} |
|||
|
|||
.sidebar-container { |
|||
transition: transform .28s; |
|||
width: $sideBarWidth !important; |
|||
} |
|||
|
|||
&.hideSidebar { |
|||
.sidebar-container { |
|||
pointer-events: none; |
|||
transition-duration: 0.3s; |
|||
transform: translate3d(-$sideBarWidth, 0, 0); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.withoutAnimation { |
|||
|
|||
.main-container, |
|||
.sidebar-container { |
|||
transition: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// when menu collapsed |
|||
.el-menu--vertical { |
|||
&>.el-menu { |
|||
.svg-icon { |
|||
margin-right: 16px; |
|||
} |
|||
} |
|||
|
|||
.nest-menu .el-submenu>.el-submenu__title, |
|||
.el-menu-item { |
|||
&:hover { |
|||
// you can use $subMenuHover |
|||
background-color: $menuHover !important; |
|||
} |
|||
} |
|||
|
|||
// the scroll bar appears when the subMenu is too long |
|||
>.el-menu--popup { |
|||
max-height: 100vh; |
|||
overflow-y: auto; |
|||
|
|||
&::-webkit-scrollbar-track-piece { |
|||
background: #d3dce6; |
|||
} |
|||
|
|||
&::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-thumb { |
|||
background: #99a9bf; |
|||
border-radius: 20px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -1,48 +1,48 @@ |
|||
// global transition css |
|||
|
|||
/* fade */ |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity 0.28s; |
|||
} |
|||
|
|||
.fade-enter, |
|||
.fade-leave-active { |
|||
opacity: 0; |
|||
} |
|||
|
|||
/* fade-transform */ |
|||
.fade-transform-leave-active, |
|||
.fade-transform-enter-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.fade-transform-enter { |
|||
opacity: 0; |
|||
transform: translateX(-30px); |
|||
} |
|||
|
|||
.fade-transform-leave-to { |
|||
opacity: 0; |
|||
transform: translateX(30px); |
|||
} |
|||
|
|||
/* breadcrumb transition */ |
|||
.breadcrumb-enter-active, |
|||
.breadcrumb-leave-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-enter, |
|||
.breadcrumb-leave-active { |
|||
opacity: 0; |
|||
transform: translateX(20px); |
|||
} |
|||
|
|||
.breadcrumb-move { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-leave-active { |
|||
position: absolute; |
|||
} |
|||
// global transition css |
|||
|
|||
/* fade */ |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity 0.28s; |
|||
} |
|||
|
|||
.fade-enter, |
|||
.fade-leave-active { |
|||
opacity: 0; |
|||
} |
|||
|
|||
/* fade-transform */ |
|||
.fade-transform-leave-active, |
|||
.fade-transform-enter-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.fade-transform-enter { |
|||
opacity: 0; |
|||
transform: translateX(-30px); |
|||
} |
|||
|
|||
.fade-transform-leave-to { |
|||
opacity: 0; |
|||
transform: translateX(30px); |
|||
} |
|||
|
|||
/* breadcrumb transition */ |
|||
.breadcrumb-enter-active, |
|||
.breadcrumb-leave-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-enter, |
|||
.breadcrumb-leave-active { |
|||
opacity: 0; |
|||
transform: translateX(20px); |
|||
} |
|||
|
|||
.breadcrumb-move { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-leave-active { |
|||
position: absolute; |
|||
} |
|||
|
|||
@ -1,48 +1,48 @@ |
|||
// base color |
|||
$blue:#324157; |
|||
$light-blue:#3A71A8; |
|||
$red:#C03639; |
|||
$pink: #E65D6E; |
|||
$green: #30B08F; |
|||
$tiffany: #4AB7BD; |
|||
$yellow:#FEC171; |
|||
$panGreen: #30B08F; |
|||
|
|||
$base-logo-title-color: #ffffff; |
|||
$base-logo-light-title-color: #001529; |
|||
$base-menu-light-background:#ffffff; |
|||
|
|||
// sidebar |
|||
$menuText:#bfcbd9; |
|||
$menuActiveText:#409EFF; |
|||
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951 |
|||
|
|||
$menuBg:#304156; //https://cloud.tencent.com/developer/article/1753773 |
|||
$menuHover:#263445; |
|||
|
|||
$base-menu-light-color:rgba(0,0,0,.70); |
|||
|
|||
$subMenuBg:#1f2d3d; |
|||
$subMenuHover:#001528; |
|||
|
|||
$sideBarWidth: 205px; |
|||
|
|||
// the :export directive is the magic sauce for webpack |
|||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|||
:export { |
|||
menuText: $menuText; |
|||
menuActiveText: $menuActiveText; |
|||
subMenuActiveText: $subMenuActiveText; |
|||
menuBg: $menuBg; |
|||
menuLightBackground: $base-menu-light-background; |
|||
menuLightColor: $base-menu-light-color; |
|||
menuHover: $menuHover; |
|||
subMenuBg: $subMenuBg; |
|||
subMenuHover: $subMenuHover; |
|||
sideBarWidth: $sideBarWidth; |
|||
|
|||
logoTitleColor: $base-logo-title-color; |
|||
logoLightTitleColor: $base-logo-light-title-color |
|||
} |
|||
|
|||
$base-sidebar-width: 200px; |
|||
// base color |
|||
$blue:#324157; |
|||
$light-blue:#3A71A8; |
|||
$red:#C03639; |
|||
$pink: #E65D6E; |
|||
$green: #30B08F; |
|||
$tiffany: #4AB7BD; |
|||
$yellow:#FEC171; |
|||
$panGreen: #30B08F; |
|||
|
|||
$base-logo-title-color: #ffffff; |
|||
$base-logo-light-title-color: #001529; |
|||
$base-menu-light-background:#ffffff; |
|||
|
|||
// sidebar |
|||
$menuText: #ffffff; |
|||
$menuActiveText:#409EFF; |
|||
$subMenuActiveText: #ffffff; // https://github.com/ElemeFE/element/issues/12951 |
|||
|
|||
$menuBg: #001529; //https://cloud.tencent.com/developer/article/1753773 |
|||
$menuHover:#4e5465; |
|||
|
|||
$base-menu-light-color:rgba(0,0,0,.70); |
|||
|
|||
$subMenuBg:#000c17; |
|||
$subMenuHover:#4e5465; |
|||
|
|||
$sideBarWidth: 205px; |
|||
|
|||
// the :export directive is the magic sauce for webpack |
|||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|||
:export { |
|||
menuText: $menuText; |
|||
menuActiveText: $menuActiveText; |
|||
subMenuActiveText: $subMenuActiveText; |
|||
menuBg: $menuBg; |
|||
menuLightBackground: $base-menu-light-background; |
|||
menuLightColor: $base-menu-light-color; |
|||
menuHover: $menuHover; |
|||
subMenuBg: $subMenuBg; |
|||
subMenuHover: $subMenuHover; |
|||
sideBarWidth: $sideBarWidth; |
|||
|
|||
logoTitleColor: $base-logo-title-color; |
|||
logoLightTitleColor: $base-logo-light-title-color |
|||
} |
|||
|
|||
$base-sidebar-width: 2010px; |
|||
|
|||
Loading…
Reference in new issue