发表于 2024-8-6 14:25:01

CSS : EL 树形控件-设置字体大小和设置一些颜色





/*设置EL 树形控件字体为16px*/
.el-tree {
font-size: 16px;
}

/*设置EL 树形控件选中背景和选中字体颜色*/
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: #015293;
    color: #ffffff;
}



发表于 2024-8-6 17:53:46

本帖最后由 胡 于 2024-8-31 15:10 编辑

EL-CSS 在楼下,这是系统模板 里的CSS,看不懂但感觉有用的css
/*库存管理系统的CSS 开始*/

.divided-line-vertical{
    width: auto;
    height: auto;
    background-color: #5820f8;
    border-radius: 15px;
}

.radio-selection{
    border-radius: 5px;
    padding: 8px 16px 8px 16px;
    box-shadow: 0 0 3px #888888;
}

.hyperlink-padding{
    padding-left: 10px;
}

.img-button-pd3{
    padding: 3px;
    box-shadow: none !important;
}

.img-button-pd8{
    padding: 8px;
    box-shadow: none !important;
}

/* el-组件 样式 */
/* el-input */
.el-input-cus-number{
    text-align: right;
}

/* padding */
.pd-3 {
    padding: 3px;
}
.pd-4 {
    padding: 4px;
}
.pd-5 {
    padding: 5px;
}
.pd-6 {
    padding: 6px;
}
.pd-7 {
    padding: 7px;
}
.pd-8 {
    padding: 8px;
}
.pd-9 {
    padding: 9px;
}
.pd-10 {
    padding: 10px;
}

/* toolbarnav */
.toolbarnav-left ul {
    justify-content: flex-start;
}
.toolbarnav-center ul {
    justify-content: center;
}
.toolbarnav-right ul {
    justify-content: flex-end;
}

.toolbarnav ul {
    box-sizing: inherit;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
}

.toolbarnav li>a {
    padding: 3px 16px !important;
    max-height: 40px;
}

.toolbarnav li>a span {
    margin: 0 !important;
    line-height: 24px !important;
}

.toolbarnav li>a div {
    margin-right: 6px !important;
}

.toolbarnav li {
    width: auto !important;
    margin: 0 3px !important;
   
}

.toolbarnav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
}

.wrap-centenr .fgc-align__inner {
    justify-content: center !important;
}

/* menu */
.menuContainerStandard li{
    margin: 0 5px auto;
}

/* el-select */
.menu-bar-select{
    border: 5px solid white;
}
.menu-bar-select .el-select:focus{
    border-color: white !important;
}

/* action-bar */
.fgc-bpm-panel-actionbutton, .fgc-bpm-panel-morebutton{
    width:80px;
    height: 32px;
    line-height: 32px;
    text-align: center;
}
.action-bar-right{
    display: flex;
    float: right;
}

/* image-text-view-list */
.tight-card-list{
    padding: 2px;
}

.el-menu--horizontal{
    border-bottom: 0px !important;
}

/* group-button */
.group-button {
    border-right: 1px solid #dcdfe6;
}
.group-button label{
    margin-right: 0px !important;
    border-right: 0px;
}

/* table-selected */
.SPanel-header{
margin: 0px 0px !important;
padding: 0px 0px !important;
}

/* scroll */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    /* background-color: transparent; */
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.3);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,.5);
}

/*库存管理系统的CSS 结束*/


发表于 2024-8-8 16:02:37

本帖最后由 胡 于 2024-8-31 15:11 编辑


.el-select__selected-item{
    user-select: auto;/*EL禁用 选择器文本可以选中*/
}

html:root{
--el-disabled-text-color: #000000;/*EL禁用字体颜色*/
--el-disabled-bg-color: #F7F7F7;/*EL禁用背景颜色*/
--el-fill-color-light:#F7F7F7;/*EL禁用 选择器背景颜色*/
}

input:disabled, textarea:disabled, select:disabled {
    opacity: 1 !important;/*EL禁用字体透明度*/
}

/*EL禁用鼠标模式---------------------------------------- 以下*/
.el-input.is-disabled,
.el-input.is-disabled .el-input__icon,
.el-select .el-input.is-disabled .el-input__wrapper,
input,
.el-select__wrapper.is-disabled,
select,
textarea {
    cursor: text !important;/*EL禁用鼠标模式*/
}
/*EL禁用鼠标模式------------------------------------------ 以上*/

.el-cascader-menu__wrap.el-scrollbar__wrap {
    height: 300px; /*EL级联选择器 下拉框高度*/
}
.el-cascader__suggestion-list {
    max-height: 300px;/*EL级联选择器 搜索后下拉框高度*/

}

/*设置EL 树形控件字体为16px*/
.el-tree {
font-size: 16px;
}
/*设置EL 树形控件选中背景和选中字体颜色*/
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: #015293;
    color: #ffffff;
}


/*设置EL 级联选择器 内边距为0 */
.el-cascader-custom .el-cascader{
    padding: 0;
}

遇见未知的自己 发表于 2024-8-9 12:18:00

:hjyzw:太棒了,感谢分享

牧野流云 发表于 2024-8-28 12:09:27

高级,谢谢分享!

muto 发表于 2024-8-28 15:29:05

感谢分享!!!!!
页: [1]
查看完整版本: CSS : EL 树形控件-设置字体大小和设置一些颜色