// element-plus 皮肤层 —— 把 EP 组件的观感统一收口到设计 token。
|
//
|
// 多数业务页用的是裸 el-form / el-table / el-dialog，没有任何包裹类，
|
// 所以这一层是「整体重做」的主杠杆：改这里一次，150+ 页面同时生效。
|
// 只调观感（底色/描边/圆角/阴影/字重），不改尺寸与布局，避免影响页面版式。
|
|
/* ============ 全局底 ============ */
|
body {
|
background-color: var(--lims-bg);
|
color: var(--lims-text);
|
}
|
|
.el-overlay {
|
background-color: rgba(16, 40, 38, 0.35);
|
}
|
|
/* ============ 表格 ============ */
|
.el-table {
|
--el-table-border-color: var(--lims-border);
|
--el-table-header-bg-color: var(--lims-table-head-bg);
|
--el-table-header-text-color: var(--lims-table-head-text);
|
--el-table-row-hover-bg-color: var(--lims-surface-hover);
|
--el-table-text-color: var(--lims-text);
|
font-size: 13px;
|
border-radius: var(--lims-radius);
|
|
th.el-table__cell {
|
font-weight: 600;
|
font-size: 13px;
|
height: 44px;
|
padding: 0;
|
}
|
|
td.el-table__cell {
|
padding: 9px 0;
|
}
|
|
/* 去掉外框粗线，只留单元格间细线 */
|
&::before,
|
&--border::after,
|
&--group::after {
|
background-color: var(--lims-border);
|
}
|
|
&--border {
|
border-color: var(--lims-border);
|
|
.el-table__inner-wrapper::after {
|
background-color: var(--lims-border);
|
}
|
}
|
|
.el-table__empty-text {
|
color: var(--lims-text-3);
|
}
|
|
/* 排序箭头在浅底上提高对比 */
|
.sort-caret.ascending {
|
border-bottom-color: var(--lims-text-3);
|
}
|
|
.sort-caret.descending {
|
border-top-color: var(--lims-text-3);
|
}
|
}
|
|
/* ============ 弹窗 / 确认框 ============ */
|
.el-dialog {
|
border-radius: var(--lims-radius-lg);
|
overflow: hidden;
|
box-shadow: var(--lims-shadow-lg);
|
|
.el-dialog__title {
|
font-weight: 600;
|
color: var(--lims-text);
|
}
|
|
.el-dialog__body {
|
padding: 20px 24px;
|
color: var(--lims-text-2);
|
}
|
}
|
|
.el-message-box {
|
border-radius: var(--lims-radius-lg);
|
border-color: var(--lims-border);
|
box-shadow: var(--lims-shadow-lg);
|
|
.el-message-box__title {
|
font-weight: 600;
|
color: var(--lims-text);
|
}
|
|
.el-message-box__content {
|
color: var(--lims-text-2);
|
}
|
}
|
|
/* ============ 卡片 ============ */
|
.el-card {
|
border: none;
|
border-radius: var(--lims-radius-lg);
|
box-shadow: var(--lims-shadow);
|
|
.el-card__header {
|
border-bottom: 1px solid var(--lims-divider);
|
font-weight: 600;
|
color: var(--lims-text);
|
}
|
}
|
|
/* ============ 表单 ============ */
|
.el-form-item__label {
|
color: var(--lims-text-2);
|
font-weight: 600;
|
}
|
|
.el-form-item__error {
|
padding-top: 2px;
|
}
|
|
/* ============ 输入 / 选择 / 文本域 ============ */
|
.el-input__wrapper,
|
.el-select__wrapper,
|
.el-textarea__inner {
|
border-radius: var(--lims-radius);
|
}
|
|
.el-input__inner::placeholder,
|
.el-textarea__inner::placeholder {
|
color: var(--lims-text-3);
|
}
|
|
/* ============ 按钮 ============ */
|
.el-button {
|
font-weight: 500;
|
border-radius: var(--lims-radius);
|
|
&--small {
|
border-radius: var(--lims-radius-sm);
|
}
|
|
/* 文字按钮统一走主色，避免 element-ui 时代的灰色正文观感 */
|
&.is-text {
|
padding: 0 6px;
|
}
|
}
|
|
/* ============ 页签（border-card 在 CNAS 页面大量使用） ============ */
|
.el-tabs__item {
|
color: var(--lims-text-2);
|
|
&.is-active,
|
&:hover {
|
color: var(--el-color-primary);
|
}
|
}
|
|
.el-tabs__active-bar {
|
background-color: var(--el-color-primary);
|
}
|
|
.el-tabs__nav-wrap::after {
|
background-color: var(--lims-divider);
|
}
|
|
.el-tabs--border-card {
|
border-color: var(--lims-border);
|
border-radius: var(--lims-radius);
|
box-shadow: none;
|
background-color: var(--lims-surface);
|
|
> .el-tabs__header {
|
background-color: var(--lims-surface-2);
|
border-bottom-color: var(--lims-border);
|
|
.el-tabs__item {
|
color: var(--lims-text-2);
|
|
&.is-active {
|
background-color: var(--lims-surface);
|
color: var(--el-color-primary);
|
font-weight: 600;
|
border-right-color: var(--lims-border);
|
border-left-color: var(--lims-border);
|
}
|
}
|
}
|
}
|
|
/* ============ 标签 ============ */
|
.el-tag {
|
border-radius: var(--lims-radius-sm);
|
font-weight: 500;
|
}
|
|
/* ============ 分页 ============ */
|
.el-pagination {
|
--el-pagination-button-bg-color: transparent;
|
--el-pagination-hover-color: var(--el-color-primary);
|
font-weight: 400;
|
color: var(--lims-text-2);
|
|
&.is-background {
|
.el-pager li,
|
.btn-prev,
|
.btn-next {
|
background-color: var(--lims-surface-2);
|
border-radius: var(--lims-radius-sm);
|
color: var(--lims-text-2);
|
font-weight: 500;
|
|
&:hover {
|
color: var(--el-color-primary);
|
}
|
|
&.is-active {
|
background-color: var(--el-color-primary);
|
color: #fff;
|
}
|
}
|
}
|
}
|
|
/* ============ 下拉 / 弹出层 ============ */
|
.el-popper,
|
.el-dropdown__popper,
|
.el-select__popper {
|
border-radius: var(--lims-radius) !important;
|
border-color: var(--lims-border) !important;
|
box-shadow: var(--lims-shadow-lg) !important;
|
}
|
|
.el-dropdown-menu__item:not(.is-disabled):focus,
|
.el-dropdown-menu__item:not(.is-disabled):hover {
|
background-color: var(--lims-surface-hover);
|
color: var(--el-color-primary);
|
}
|
|
/* ============ 抽屉 ============ */
|
.el-drawer {
|
.el-drawer__header {
|
margin-bottom: 0;
|
padding-bottom: 16px;
|
border-bottom: 1px solid var(--lims-divider);
|
font-weight: 600;
|
color: var(--lims-text);
|
}
|
}
|
|
/* ============ 树 ============ */
|
.el-tree {
|
--el-tree-node-hover-bg-color: var(--lims-surface-hover);
|
color: var(--lims-text);
|
|
.el-tree-node.is-current > .el-tree-node__content {
|
background-color: var(--sidebar-active-bg);
|
color: var(--el-color-primary);
|
font-weight: 500;
|
}
|
|
.el-tree-node__content {
|
border-radius: var(--lims-radius-sm);
|
height: 34px;
|
}
|
}
|
|
/* ============ 描述列表 / 分割线 / 面包屑 ============ */
|
.el-descriptions {
|
.el-descriptions__label {
|
color: var(--lims-text-2);
|
font-weight: 600;
|
}
|
|
.el-descriptions__content {
|
color: var(--lims-text);
|
}
|
}
|
|
.el-divider {
|
border-color: var(--lims-divider);
|
}
|
|
.el-breadcrumb__inner,
|
.el-breadcrumb__inner a {
|
color: var(--lims-text-3);
|
}
|
|
.el-breadcrumb__item:last-child .el-breadcrumb__inner {
|
color: var(--lims-text-2);
|
}
|
|
/* ============ 提示条 / 通知 ============ */
|
.el-message,
|
.el-notification {
|
border-radius: var(--lims-radius);
|
border-color: var(--lims-border);
|
}
|
|
/* ============ 日期选择器 / 步骤条 / 进度条 ============ */
|
.el-date-picker,
|
.el-date-range-picker {
|
border-radius: var(--lims-radius-lg);
|
}
|
|
.el-step__title.is-process {
|
font-weight: 600;
|
}
|
|
.el-progress-bar__outer {
|
border-radius: var(--lims-radius-sm);
|
}
|
|
/* ============ 上传 ============ */
|
.el-upload-list__item {
|
border-radius: var(--lims-radius-sm);
|
}
|
|
.el-upload--picture-card,
|
.el-upload-list--picture-card .el-upload-list__item {
|
border-radius: var(--lims-radius);
|
border-color: var(--lims-border);
|
}
|
|
/* ============ 折叠面板 ============ */
|
.el-collapse {
|
border-color: var(--lims-divider);
|
|
.el-collapse-item__header,
|
.el-collapse-item__wrap {
|
border-color: var(--lims-divider);
|
background-color: transparent;
|
}
|
|
.el-collapse-item__header {
|
font-weight: 600;
|
color: var(--lims-text);
|
}
|
}
|
