element-plus (修改主题色 & button新增自定义属性修改样式)
styles ->element_theme.less:root {--el-color-primary: #F74023; // 主题色}// 分页左右箭头居中显示.el-pagination .btn-prev .el-icon, .el-pagination .btn-next .el-icon {margin: auto;}// 表格操作列 无数据时总有一条线问题.el-table_
·
styles -> element_theme.less
:root {
--el-color-primary: #F74023; // 主题色
}
// 分页左右箭头居中显示
.el-pagination .btn-prev .el-icon, .el-pagination .btn-next .el-icon {
margin: auto;
}
// 表格操作列 无数据时总有一条线问题
.el-table__fixed-right {
height: -webkit-fill-available;
}
/*滚动条样式*/
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-thumb {
background: #ECECEC;
}
::-webkit-scrollbar-track {
background: #FAFAFA;
border: none;
}
.el-form-item__label, .my_label {
font-size: 14px;
color: #606266;
font-weight: 700 !important;
}
.el-button--text:hover, .el-button--text:focus, .el-button--text:active {
color: #D7371E;
}
.el-button.is-plain:active, .el-button--default:hover, .el-button--default:focus, .el-button--default:active {
background: var(--el-color-white);
border-color: var(--el-color-primary);
color: var(--el-color-primary);
}
// 查询按钮样式
.el-button--primary, .el-button--primary:active{
background: rgba(247, 64, 35, 1);
border: none;
color: #fff;
}
.el-button--primary:hover, .el-button--primary:focus {
background: rgba(247, 64, 35, 0.8);
border: none;
color: #fff;
}
.el-button--primary.is-disabled, .el-button--primary.is-disabled:hover, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:active {
background: rgba(247, 64, 35, 0.5);
border: none;
color: #fff;
}
// 新增按钮样式
.el-button--success.is-plain {
background: rgba(247, 64, 35, 0.1);
border-color: rgba(247, 64, 35, 0.4);
color: rgba(247, 64, 35, 1);
}
.el-button--success.is-plain:hover, .el-button--success.is-plain:focus, .el-button--success.is-plain:active {
background: rgba(247, 64, 35, 0.8);
border-color: rgba(247, 64, 35, 0.8);
color: #fff;
}
.el-button--success.is-plain.is-disabled, .el-button--success.is-plain.is-disabled:hover, .el-button--success.is-plain.is-disabled:focus, .el-button--success.is-plain.is-disabled:active {
background: rgba(247, 64, 35, 0.1);
border-color: rgba(247, 64, 35, 0.4);
color: rgba(247, 64, 35, 1);
opacity: 0.5;
}
// 蓝色调文件上传导入类 button-style-origin 文件下载导出类 type="warning" 删除按钮 size="mini" type="text"
button[button-style-origin], button[button-style-origin]:hover, button[button-style-origin]:focus, button[button-style-origin]:active {
background: #4A73FE;
border-color: #4A73FE;
color: #ffffff;
}
button[button-style-origin]:hover, button[button-style-origin]:focus, button[button-style-origin]:active {
opacity: 0.8;
}
button[button-style-origin].is-disabled, button[button-style-origin].is-disabled:hover, button[button-style-origin].is-disabled:focus, button[button-style-origin].is-disabled:active {
background: #4A73FE;
border-color: #4A73FE;
color: #ffffff;
opacity: 0.5;
}
// 详情类按钮样式
button[button-style-details] {
background: #4A73FE;
border-color: #4A73FE;
color: #ffffff;
padding: 0px 4px;
min-height: 24px;
}
button[button-style-details]:hover, button[button-style-details]:focus, button[button-style-details]:active {
background: #4A73FE;
border-color: #4A73FE;
color: #ffffff;
opacity: 0.8;
}
button[button-style-details].is-disabled, button[button-style-details].is-disabled:hover, button[button-style-details].is-disabled:focus, button[button-style-details].is-disabled:active {
background: #4A73FE;
border-color: #4A73FE;
color: #ffffff;
opacity: 0.5;
}
// button-style-border-grey 白底灰边框黑字
button[button-style-border-grey], button[button-style-border-grey]:hover, button[button-style-border-grey]:focus, button[button-style-border-grey]:active {
background: #ffffff;
border-color: rgba(0, 0, 0, 0.15);
color: rgba(0, 0, 0, 0.65);
border-radius: 2px;
padding: 0px 4px;
min-height: 24px;
}
button[button-style-border-grey]:hover, button[button-style-border-grey]:focus, button[button-style-border-grey]:active {
opacity: 0.8;
border-color: rgba(247, 64, 35, 1);
color: rgba(247, 64, 35, 1);
}
button[button-style-border-grey].is-disabled, button[button-style-border-grey].is-disabled:hover, button[button-style-border-grey].is-disabled:focus, button[button-style-border-grey].is-disabled:active {
background: #ffffff;
border-color: rgba(0, 0, 0, 0.15);
color: rgba(0, 0, 0, 0.65);
border-radius: 2px;
padding: 0px 4px;
opacity: 0.5;
}
// button-style-border-red 白底红边框红字
button[button-style-border-red], button[button-style-border-red]:hover, button[button-style-border-red]:focus, button[button-style-border-red]:active {
background: #ffffff;
border-color: rgba(247, 64, 35, 0.4);
color: #F74023;
border-radius: 2px;
padding: 0px 4px;
min-height: 24px;
}
button[button-style-border-red]:hover, button[button-style-border-red]:focus, button[button-style-border-red]:active {
opacity: 0.8;
}
button[button-style-border-red].is-disabled, button[button-style-border-red].is-disabled:hover, button[button-style-border-red].is-disabled:focus, button[button-style-border-red].is-disabled:active {
background: #ffffff;
border-color: rgba(247, 64, 35, 0.4);
color: #F74023;
border-radius: 2px;
opacity: 0.5;
}
// button-style-block 黑底白字
button[button-style-block], button[button-style-block]:hover, button[button-style-block]:focus, button[button-style-block]:active {
background: #121926;
border-color: #121926;
color: #ffffff;
padding: 0px 4px;
min-height: 24px;
}
button[button-style-block]:hover, button[button-style-block]:focus, button[button-style-block]:active {
opacity: 0.8;
}
button[button-style-block].is-disabled, button[button-style-block].is-disabled:hover, button[button-style-block].is-disabled:focus, button[button-style-block].is-disabled:active {
background: #121926;
border-color: #121926;
color: #ffffff;
opacity: 0.5;
}
// button-style-view 操作里的按钮 红底白字
button[button-style-view], button[button-style-view]:hover, button[button-style-view]:focus, button[button-style-view]:active {
background: #F74023;
border: none;
color: #ffffff;
padding: 0px 4px;
min-height: 24px;
}
button[button-style-view]:hover, button[button-style-view]:focus, button[button-style-view]:active {
opacity: 0.8;
}
button[button-style-view].is-disabled, button[button-style-view].is-disabled:hover, button[button-style-view].is-disabled:focus, button[button-style-view].is-disabled:active {
background: #F74023;
border: none;
color: #ffffff;
padding: 0px 4px;
min-height: 24px;
opacity: 0.5;
}
// button-style-text-block 黑字
button[button-style-text-block], button[button-style-text-block]:hover, button[button-style-text-block]:focus, button[button-style-text-block]:active {
color: #666;
}
button[button-style-text-block]:hover, button[button-style-text-block]:focus, button[button-style-text-block]:active {
color: #999;
}
button[button-style-text-block].is-disabled, button[button-style-text-block].is-disabled:hover, button[button-style-text-block].is-disabled:focus, button[button-style-text-block].is-disabled:active {
color: #999;
}
使用:
<el-button size="mini" button-style-view @click="toOrder(scope.row)">查看订单</el-button>
参考: https://segmentfault.com/q/1010000040393608?utm_source=sf-similar-question
更多推荐
已为社区贡献1条内容
所有评论(0)