//饿了么UI组件的样式重绘 .el-button[block] { width: 100%; } //单选框、多选框 .el-checkbox.size-xl .el-checkbox__inner, .el-radio.size-xl .el-radio__inner{ width: 18px; height: 18px; } .el-checkbox.size-xl .el-checkbox__label, .el-radio.size-xl .el-radio__label { font-size: 16px; font-weight: 400; } .el-checkbox.size-xl .el-checkbox__inner::after { height: 10px; left: 6px; top: 1px; } .el-radio.size-xl .el-radio__inner::after { width: 8px; height: 8px; } //消息提示 .el-message { --el-message-padding: 10px 20px; border: 0; box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.012), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); } //按钮重绘 .el-button[hc-btn] { border-radius: 6px; padding: 8px 20px; font-weight: 400; height: 40px; border: 0; box-shadow: var(--hc-shadow); &.is-loading:not([class*='el-button--']) { --el-button-bg-color: #f3f3f3; --el-button-text-color: #8c9099; } &.is-disabled:not([class*='el-button--']) { --el-button-disabled-text-color: #bfbfbf; --el-button-disabled-bg-color: #f3f3f3; } &:not([class*='el-button--']) { --el-button-bg-color: #f1f5f8; --el-button-text-color: #838791; --el-button-hover-text-color: #838791; --el-button-active-text-color: #838791; --el-button-hover-bg-color: var(--el-color-primary-light-9); --el-button-active-bg-color: var(--el-color-primary-light-8); } &.el-button--primary.is-plain { --el-button-text-color: var(--el-color-primary); --el-button-bg-color: var(--el-color-primary-light-9); --el-button-hover-text-color: var(--el-color-primary); --el-button-hover-bg-color: var(--el-color-primary-light-8); --el-button-active-text-color: var(--el-color-primary); --el-button-active-bg-color: var(--el-color-primary-light-7); } .material-symbols-rounded { font-size: 18px; margin-right: 4px; } } .el-button + .el-button { margin-left: 20px; } //表单 .el-form { position: relative; overflow: hidden; } //滚动条 .el-scrollbar { overflow: initial; .el-scrollbar__bar.is-vertical { right: -16px; } .el-scrollbar__bar.is-horizontal { bottom: -20px; } } //个人中心项目列表 .hc-project-menu.el-menu { --el-menu-level: 0; background-color: initial; border: initial; .el-sub-menu { border: 1px solid #e9e9e9; border-radius: 3px; margin-bottom: 20px; .el-sub-menu__title .hc-menu-icon { font-size: 20px; margin-right: 10px; } &.is-opened .el-sub-menu__title { color: var(--el-color-primary); background-color: var(--el-color-primary-light-8); } .el-menu { background-color: initial; } .el-menu-item { padding-left: 50px; } } .el-menu-item.is-active { color: var(--el-menu-active-color); background-color: var(--el-color-primary-light-9); .hc-menu-icon { position: absolute; font-size: 22px; left: 22px; } } } //表格 .el-table[hc] { border: 1px solid #e9e9e9; --el-table-bg-color: initial; --el-table-header-bg-color: #DAE8F3; --el-table-header-text-color: #50545E; --el-table-tr-bg-color: #F1F5F8; --el-fill-color-lighter: #E7EEF4; --el-table-text-color: #666666; --el-table-row-hover-bg-color: var(--el-color-primary-light-9); th.el-table__cell>.cell { font-weight: 400; } .el-table__cell { padding: 12px 0; } } //下拉框 .el-select[block] { width: 100%; } //工单服务的时间轴 .time-line-box .el-timeline.hc-time-line { padding-left: 5px; padding-top: 5px; .el-timeline-item { padding-bottom: 24px; .el-timeline-item__tail { top: 28px; left: 6px; height: calc(100% - 36px); border-width: 1px; border-color: #838791; } .el-timeline-item__node { display: none; } .el-timeline-item__wrapper { padding-left: 38px; .el-timeline-item__content { .timeline-item-icon { position: absolute; width: 24px; height: 24px; left: -5px; border: 1px solid #838791; border-radius: 50px; display: flex; justify-content: center; align-items: center; color: #838791; .check-icon { font-size: 18px; } } .reply-name { color: #838791; font-size: 18px; } .reply-content { color: #838791; margin-top: 5px; } } } &.success { .el-timeline-item__tail { border-color: var(--el-color-primary); } .el-timeline-item__wrapper .el-timeline-item__content .timeline-item-icon { color: var(--el-color-primary); border: 1px solid var(--el-color-primary); } } &.primary { .el-timeline-item__wrapper .el-timeline-item__content { .reply-name { color: #1A1A1A; } .timeline-item-icon { background-color: var(--el-color-primary); border: 1px solid var(--el-color-primary); color: #ffffff; } } } } } //滚动条 .el-scrollbar { scroll-behavior: smooth; .el-scrollbar__wrap--hidden-default { scroll-behavior: smooth; } } //弹窗 .el-overlay-dialog { .el-dialog.hc-modal-border { .el-dialog__header { padding-bottom: var(--el-dialog-padding-primary); border-bottom: 1px solid #EEEEEE; margin-right: 0; } .el-dialog__footer { border-top: 1px solid #EEEEEE; padding-top: var(--el-dialog-padding-primary); } } } //上传 .el-upload-list.el-upload-list--picture-card { --el-upload-list-picture-card-size: 88px; .el-upload--picture-card { --el-upload-picture-card-size: 88px; .hc-upload-icon { font-size: 39px; } } } //头像 .el-avatar { color: initial !important; background: initial !important; } //表格 .hc-table-ref-box { position: relative; display: inline-grid; width: 100%; } //naiveui 鼠标右键菜单的图标 .n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix.n-dropdown-option-body__prefix--show-icon { font-size: 22px; } //树 .el-tree.hc-tree-node { --el-fill-color-blank: transparent; --el-tree-node-hover-bg-color: var(--el-color-primary-light-9); --el-tree-text-color: #50545E; --el-tree-expand-icon-color: #838791; background: var(--el-fill-color-blank); color: var(--el-tree-text-color); .el-tree-node__content { border-radius: 2px; } &.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { background-color: var(--el-color-primary-light-7); } .el-tree-node__expand-icon { font-size: 16px; } }