Vue修改ElementUi表格,下拉框,标签页等样式
当在vue页面内对elementui的组件样式修改时,会遇到一些问题。vue页面内一般需要使用scoped这个属性,如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。意思是改样式仅在该页面生效。对修改elementui样式会造成影响。第一次使用时解决办法是重新写一个<style>标签不添加scoped属性做样式修改。后面看到可以使用class >>&..
·
当在vue页面内对elementui的组件样式修改时,会遇到一些问题。
vue页面内一般需要使用scoped这个属性,如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。意思是改样式仅在该页面生效。对修改elementui样式会造成影响。第一次使用时解决办法是重新写一个<style>标签不添加scoped属性做样式修改。后面看到可以使用class >>> elclass的方法进行。例如:
.img_div >>> .el-table th .cell {
color: #fff;
font-size: 1.7vh;
padding: 0.2vh 0;
}
对表格样式进行修改。
表格样式:(以下为公共样式)
/* 表格 */
.el-table {
border: 1px solid #dfe2e5;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
}
.tableName {
background: #0573d2 !important;
}
.el-table th,
.el-table tr {
background: none;
}
.warning-row {
background: #eaeaea !important;
}
.el-table .tableName .cell {
font-size: 20px;
color: #fff;
}
.el-table th {
padding: 0;
}
.el-table td {
padding: 0;
height: 60px;
border-bottom: 1px solid #dfe2e5;
}
.el-table .cell {
font-size: 18px;
color: #050b25;
white-space: nowrap;
text-align: center;
line-height: 60px;
}
.el-table tr.current-row .cell {
color: #354052;
}
.el-button--small {
font-size: 20px;
}
.el-table__expand-icon .el-icon-arrow-right {
font-size: 17px;
top: 30%;
}
.el-table .el-table__row {
position: relative;
}
.el-table__body tr.current-row > td {
background-color: #f1f4f8;
}
.el-table .el-checkbox__input.is-checked .el-checkbox__inner,
.el-table .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #1589ee;
border: solid 1px #0573d2;
}
.el-table .el-checkbox.is-checked {
width: 100%;
}
.el-table td .is-checked::after {
content: "";
position: absolute;
left: 0;
top: 2px;
height: 57px;
width: 7px;
background: #0573d2;
border-radius: 0 2px 2px 0;
}
.el-table .el-checkbox__inner {
width: 20px;
height: 20px;
background-color: #edeff5;
border: solid 1px #ced0da;
}
/* 表格选中样式重写 */
.el-table .el-checkbox__inner::after {
content: "";
border: 2px solid #fff;
border-left: 0;
border-top: 0;
height: 10px;
left: 6px;
position: absolute;
top: 1px;
-webkit-transform: rotate(45deg) scaleY(0);
transform: rotate(45deg) scaleY(0);
width: 4px;
-webkit-transition: -webkit-transform 0.15s ease-in 0.05s;
transition: -webkit-transform 0.15s ease-in 0.05s;
transition: transform 0.15s ease-in 0.05s;
transition: transform 0.15s ease-in 0.05s,
-webkit-transform 0.15s ease-in 0.05s;
transition: transform 0.15s ease-in 0.05s,
-webkit-transform 0.15s ease-in 0.05s;
-webkit-transform-origin: center;
transform-origin: center;
}
.el-table .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
top: 8px;
}
下拉框:
.el-select-dropdown__item {
padding: 0;
}
.el-select-dropdown__wrap {
background: #8795b5 !important;
padding: 0;
}
.el-select-dropdown__list {
padding: 0;
}
.el-select-dropdown__item {
padding-left: 20px;
font-size: 16px;
color: #fff;
height: 45px;
line-height: 45px;
}
.el-select-dropdown__item.selected,
.el-select-dropdown__item.hover {
border-left: 5px #0593d2 solid;
padding-left: 15px;
color: #0593d2;
background: #fff;
}
标签页:
.ip_msg >>> .el-tabs--border-card > .el-tabs__header {
margin: 20px 0;
}
.indexPage >>> .el-tabs__nav-scroll {
background: #fff;
}
.ip_msg >>> .el-tabs__nav-scroll {
text-align: center;
}
.ip_msg >>> .el-tabs__nav {
float: initial;
border-radius: 4px;
border: solid 2px #cad2e2;
display: inline-block;
}
.ip_msg >>> .el-tabs--border-card > .el-tabs__header .el-tabs__item {
border: none;
font-size: 18px;
color: #7481a0;
margin: 5px;
padding: 0;
width: 120px;
}
.ip_msg >>> .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
color: #5f6d8f;
background-color: #cad2e2;
border-radius: 2px;
}
.ip_msg >>> .el-tabs__content {
height: calc(100% - 130px);
}
.ip_msg >>> .el-tabs__content .el-tab-pane {
height: 100%;
}
更多推荐
已为社区贡献1条内容
所有评论(0)