Skip to content

P
pet-business-web
Commit 3ddff61a authored by 小费同学阿's avatar 小费同学阿 💬
Browse files
Options

文章管理

parent b4eed874
Hide whitespace changes
Inline Side-by-side
Showing with 0 additions and 513 deletions
src/assets/styles/btn.scss
View file @ 3ddff61a
@import './variables.scss';
@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;
}
}
/** 四个字的绿色按钮*/
.fourWordsBtn{
padding: 7px 13px 7px 11px;
width: 105px;
height: 32px;
background: #5BB647;
border-radius: 4px 4px 4px 4px;
border: 1px solid #5BB647;
opacity: 1;
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
i{
font-size: 11px;
width: 11px;
height: 11px;
}
&:hover {
background: #83C374!important;
color: #FFFFFF!important;
border: 1px solid #83C374!important;
}
&:focus {
background: #55A343!important;
color: #FFFFFF!important;
border: 1px solid #55A343!important;
}
}
/** 查询按钮样式*/
.queryBtn{
padding: 7px 13px 7px 11px;
width: 80px;
height: 32px;
background: #5BB647;
border-radius: 4px 4px 4px 4px;
border: 1px solid #5BB647;
opacity: 1;
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
i{
width: 10px;
font-size: 10px;
height: 11px;
}
&:hover {
background: #83C374!important;
color: #FFFFFF!important;
border: 1px solid #83C374!important;
}
&:focus {
background: #55A343!important;
color: #FFFFFF!important;
border: 1px solid #55A343!important;
}
}
/** 删除按钮(四个字的删除)样式*/
.delBtn{
padding: 7px 13px 7px 11px;
width: 105px;
height: 32px;
background: #DB4747;
border-radius: 4px 4px 4px 4px;
border: 1px solid #DB4747;
opacity: 1;
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
i{
width: 10px;
font-size: 10px;
height: 11px;
}
&:hover {
background: #E07171 !important;
color: #FFFFFF!important;
border: 1px solid #E07171 !important;
}
&:focus {
background: #DB4747!important;
color: #FFFFFF!important;
border: 1px solid #DB4747!important;
}
}
/** 重置按钮样式*/
.resetBtn{
padding: 7px 13px 7px 11px;
width: 80px;
height: 32px;
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
opacity: 1;
border: 1px solid #E5E5E5;
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #333333;
i{
width: 10px;
font-size: 10px;
height: 11px;
}
&:hover {
background: rgba(95,181,75,0.08);
opacity: 1;
border: 1px solid #5FB54B;
color: #333333!important;
}
&:focus {
background: rgba(85,163,67,0.08);
opacity: 1;
border: 1px solid #55A343;
color: #333333!important;
}
}
/** 两个按钮间的间距*/
.el-button + .el-button{
margin-left: 16px;
}
.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;
}
src/assets/styles/element-ui.scss
View file @ 3ddff61a
// 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;
}
/** 下拉框选中样式*/
.el-select .el-input.is-focus .el-input__inner{
border: 1px solid #5FB54B;
}
.el-select-dropdown__item.selected{
background: #F6FCF5;
border-radius: 4px 4px 0px 0px;
font-size: 14px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #5FB54B;
}
.el-input--small .el-input__icon{
color: #AFAFAF;
}
.el-form-item__label{
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #707070;
}
.el-form-item.is-error .el-input__inner{
border-radius: 4px 4px 4px 4px;
opacity: 1;
border: 1px solid #DB4747!important;
}
.el-form-item__error{
font-size: 12px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #DB4747;
}
.el-month-table td .cell{
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #666666;
&:hover {
font-size: 14px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #5FB54B;
}
}
.el-date-picker__header-label{
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #666666;
&:hover {
font-size: 14px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: 400;
color: #5FB54B;
}
}
.el-picker-panel__icon-btn{
color: #AFAFAF;
&:hover {
color: #5FB54B;
}
}
.el-month-table td.current:not(.disabled) .cell{
font-size: 14px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #5FB54B;
}
.el-month-table td.today .cell{
font-size: 14px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #5FB54B;
}
.el-form-item--small.el-form-item{
margin-right: 20px!important;
}
.el-input--small{
width: 220px!important;
}
input::-webkit-input-placeholder {
font-size: 14px!important;
font-family: Microsoft YaHei-Regular, Microsoft YaHei!important;
font-weight: 400!important;
color: #AFAFAF!important;
}
.el-select-dropdown__item{
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #666666;
&:hover {
background: #F6FCF5;
border-radius: 4px 4px 0px 0px;
font-size: 14px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #5FB54B;
}
}
.el-select .el-input__inner:focus{
border: 1px solid #5FB54B!important;
}
.el-input__inner:focus{
border: 1px solid #5FB54B!important;
}
.el-input--small .el-input__inner{
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #333333;
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
opacity: 1;
border: 1px solid #E5E5E5;
}
.el-input--medium .el-input__inner{
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #333333;
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
opacity: 1;
border: 1px solid #E5E5E5;
}
.el-select .el-input .el-select__caret{
color: #AFAFAF;
}
/** 删除弹出层*/
.el-message-box{
width: 399px;
min-height: 195px;
border-radius: 4px 4px 4px 4px;
border: none;
padding-bottom: 0!important;
.el-message-box__header{
background: #5FB54B;
height: 44px;
.el-message-box__title{
font-size: 16px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
}
.el-message-box__content{
padding: 37px 20px;
}
.el-message-box__close{
color: #FFFFFF;
font-size: 14px;
}
.el-message-box__status.el-icon-warning{
color: #FF9D4E;
font-size: 18px!important;
}
.el-message-box__message{
padding-left: 30px!important;
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #666666;
}
.el-message-box__btns{
padding: 0 20px 20px 0;
}
}
/** dialog*/
.el-dialog{
border-radius: 4px 4px 4px 4px!important;
.el-dialog__header{
height: 44px;
padding: 12px 20px;
border-radius: 4px 4px 0px 0px;
background: #5FB54B;
.el-dialog__title{
font-size: 16px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 20px;
}
.el-dialog__headerbtn .el-dialog__close{
color: #FFFFFF;
font-size: 14px;
line-height: 20px;
}
.el-dialog__headerbtn{
top: 14px!important;
}
}
.el-dialog__body{
//padding: 30px 25px 20px 25px;
.dialog-footer{
padding-right: 20px;
padding-top: 30px;
display: flex;
justify-content: end;
}
}
}
.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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment