1665 lines
38 KiB
SCSS
1665 lines
38 KiB
SCSS
// ====================== 1. 基础颜色变量（Sass直接处理）======================
|
||
$primary-base: #5F7BA0;
|
||
/* 工业蓝灰（主色原始值） */
|
||
$success-base: #2ECC71;
|
||
/* 成功色原始值 */
|
||
$warning-base: #E67E22;
|
||
/* 警告色原始值 */
|
||
$danger-base: #E74C3C;
|
||
/* 危险色原始值 */
|
||
$info-base: #AEB6BF;
|
||
/* 次主色原始值 */
|
||
|
||
// 背景色原始值
|
||
// 暗色
|
||
// $background-base: #2B2F36;
|
||
// $background-light-base: lighten($background-base, 5%);
|
||
// $background-lighter-base: lighten($background-base, 10%);
|
||
// $panel-bg-base: #3A3F45;
|
||
// $table-bg-base: #1E2227;
|
||
|
||
// // 暗色边框色原始值
|
||
// $border-color-base: #6E757D;
|
||
// $border-color-light: #828991;
|
||
// $border-color-lighter: #9AA1A9;
|
||
|
||
// 亮色
|
||
$background-base: #F5F5F5;
|
||
$background-light-base: lighten($background-base, 5%);
|
||
$background-lighter-base: lighten($background-base, 10%);
|
||
$--color-text-primary: #1a1a1a;
|
||
$panel-bg-base: $--color-text-primary;
|
||
$table-bg-base: transparent;
|
||
|
||
// 亮色边框色原始值
|
||
$border-color-base: #6E757D;
|
||
$border-color-light: #828991;
|
||
$border-color-lighter: #9AA1A9;
|
||
|
||
|
||
// ====================== 2. 间距/尺寸变量（Sass变量）======================
|
||
$--spacing-sm: 4px;
|
||
$--spacing-base: 8px;
|
||
$--spacing-md: $--spacing-base;
|
||
$--spacing-lg: $--spacing-base * 2;
|
||
$--form-item-margin: $--spacing-base;
|
||
$--btn-height: 24px;
|
||
|
||
// 关键修复：添加缺失的$--border-color变量，指向基础边框色
|
||
$--border-color: $border-color-base;
|
||
|
||
|
||
// ====================== 3. CSS变量（与Sass变量同步）======================
|
||
:root {
|
||
/* 颜色体系 - 同步自Sass原始变量 */
|
||
--color-primary: #{$primary-base};
|
||
--color-success: #{$success-base};
|
||
--color-warning: #{$warning-base};
|
||
--color-danger: #{$danger-base};
|
||
--color-info: #{$info-base};
|
||
|
||
/* 背景层级 */
|
||
--color-background: #{$background-base};
|
||
--color-background-light: #{$background-light-base};
|
||
--color-background-lighter: #{$background-lighter-base};
|
||
--panel-bg: #{$panel-bg-base};
|
||
--table-bg: #{$table-bg-base};
|
||
|
||
/* 文本色 */
|
||
--color-text-primary: #{$--color-text-primary};
|
||
--color-text-regular: #333333;
|
||
--color-text-secondary: #555555;
|
||
--color-text-placeholder: #777777;
|
||
|
||
/* 边框色 */
|
||
--border-color-base: #{$border-color-base};
|
||
--border-color-light: #{$border-color-light};
|
||
--border-color-lighter: #{$border-color-lighter};
|
||
--border-color: #{$--border-color};
|
||
/* 同步新增的边框色变量 */
|
||
|
||
/* 间距/尺寸体系 */
|
||
--spacing-sm: #{$--spacing-sm};
|
||
--spacing-base: #{$--spacing-base};
|
||
--spacing-md: #{$--spacing-md};
|
||
--spacing-lg: #{$--spacing-lg};
|
||
--form-item-margin: #{$--form-item-margin};
|
||
--btn-height: #{$--btn-height};
|
||
|
||
/* 金属质感变量 */
|
||
// --metal-gradient-light: linear-gradient(145deg, #3E434A, #363B41);
|
||
// --metal-gradient-dark: linear-gradient(145deg, #363B41, #3E434A);
|
||
--metal-gradient-light: linear-gradient(145deg, $--color-background-light, $--color-background);
|
||
--metal-gradient-dark: linear-gradient(145deg, $--color-background, $--color-background-light);
|
||
--metal-highlight: rgba(255, 255, 255, .14);
|
||
--metal-shadow: 5px 5px 12px rgba(0, 0, 0, .22), -5px -5px 12px rgba(255, 255, 255, .06);
|
||
--metal-shadow-inset: inset 3px 3px 6px rgba(0, 0, 0, .28), inset -3px -3px 6px rgba(255, 255, 255, .06);
|
||
}
|
||
|
||
|
||
// ====================== 4. Element UI适配变量 =======================
|
||
$--color-primary: $primary-base !default;
|
||
$--color-success: $success-base !default;
|
||
$--color-warning: $warning-base !default;
|
||
$--color-danger: $danger-base !default;
|
||
$--color-info: $info-base !default;
|
||
|
||
$--color-background: $background-base !default;
|
||
$--color-background-light: $background-light-base !default;
|
||
$--color-background-lighter: $background-lighter-base !default;
|
||
$--panel-bg: $panel-bg-base !default;
|
||
$--table-bg: $table-bg-base !default;
|
||
|
||
$--color-text-primary: var(--color-text-primary) !default;
|
||
$--color-text-regular: var(--color-text-regular) !default;
|
||
$--color-text-secondary: var(--color-text-secondary) !default;
|
||
$--color-text-placeholder: var(--color-text-placeholder) !default;
|
||
|
||
// 边框色变量（包括新增的$--border-color）
|
||
$--border-color-base: $border-color-base !default;
|
||
$--border-color-light: $border-color-light !default;
|
||
$--border-color-lighter: $border-color-lighter !default;
|
||
$--border-color: $--border-color !default;
|
||
/* 关键修复：同步到Element变量 */
|
||
|
||
// 间距变量
|
||
$--spacing-sm: $--spacing-sm !default;
|
||
$--spacing-base: $--spacing-base !default;
|
||
$--spacing-md: $--spacing-md !default;
|
||
$--spacing-lg: $--spacing-lg !default;
|
||
$--form-item-margin: $--form-item-margin !default;
|
||
$--btn-height: $--btn-height !default;
|
||
|
||
$--metal-gradient-light: var(--metal-gradient-light) !default;
|
||
$--metal-gradient-dark: var(--metal-gradient-dark) !default;
|
||
$--metal-highlight: var(--metal-highlight) !default;
|
||
$--metal-shadow: var(--metal-shadow) !default;
|
||
$--metal-shadow-inset: var(--metal-shadow-inset) !default;
|
||
|
||
// Element UI兼容变量
|
||
$--font-color-primary: $--color-text-regular !default;
|
||
$--font-color-regular: $--color-text-regular !default;
|
||
$--font-color-secondary: $--color-text-secondary !default;
|
||
$--font-color-placeholder: $--color-text-placeholder !default;
|
||
$--color-loading: $--color-primary !default;
|
||
|
||
|
||
// ====================== 2. 全局样式 ======================
|
||
body {
|
||
background: $--color-background;
|
||
color: $--color-text-regular;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
// Element容器适配
|
||
.el-container,
|
||
.el-main,
|
||
.el-aside,
|
||
.el-header,
|
||
.el-footer {
|
||
background: $--color-background;
|
||
color: $--color-text-regular;
|
||
border: none;
|
||
}
|
||
|
||
// 标签页内容溢出修复
|
||
.el-tabs__content {
|
||
overflow: visible !important;
|
||
}
|
||
|
||
|
||
// ====================== 3. 组件样式（按优先级合并）======================
|
||
// ---------------------- 3.1 按钮（金属质感 + 紧凑尺寸）----------------------
|
||
@mixin button-variant($text-color, $border-color) {
|
||
color: $text-color;
|
||
background: $--metal-gradient-light;
|
||
border: 1px solid $border-color;
|
||
box-shadow: $--metal-shadow;
|
||
border-radius: 6px;
|
||
text-shadow: 0 1px 0 rgba(0, 0, 0, .16);
|
||
transition: all .25s ease;
|
||
height: $--btn-height;
|
||
padding: 0 var(--spacing-lg);
|
||
font-size: 13px;
|
||
|
||
&:hover,
|
||
&:focus {
|
||
color: $text-color;
|
||
background: $--metal-gradient-dark;
|
||
border-color: $--border-color-base;
|
||
box-shadow: 6px 6px 14px rgba(0, 0, 0, .28), -6px -6px 14px rgba(255, 255, 255, .08);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
&:active {
|
||
box-shadow: $--metal-shadow-inset;
|
||
transform: translateY(1px);
|
||
}
|
||
|
||
&.is-disabled,
|
||
&[disabled] {
|
||
opacity: .6;
|
||
filter: grayscale(.1);
|
||
box-shadow: none;
|
||
cursor: not-allowed;
|
||
}
|
||
}
|
||
|
||
// 主按钮（品牌梯度）
|
||
.el-button--primary {
|
||
@include button-variant($--color-text-primary, darken($--color-primary, 10%));
|
||
background: linear-gradient(145deg, lighten($--color-primary, 6%), darken($--color-primary, 6%));
|
||
border-color: darken($--color-primary, 10%);
|
||
|
||
&:hover {
|
||
background: linear-gradient(145deg, $--color-primary, darken($--color-primary, 8%));
|
||
}
|
||
}
|
||
|
||
// 功能按钮（统一风格）
|
||
.el-button--success {
|
||
@include button-variant($--color-text-primary, darken($--color-success, 10%));
|
||
background: linear-gradient(145deg, lighten($--color-success, 6%), darken($--color-success, 6%));
|
||
}
|
||
|
||
.el-button--warning {
|
||
@include button-variant($--color-text-primary, darken($--color-warning, 10%));
|
||
background: linear-gradient(145deg, lighten($--color-warning, 6%), darken($--color-warning, 6%));
|
||
}
|
||
|
||
.el-button--danger {
|
||
@include button-variant($--color-text-primary, darken($--color-danger, 10%));
|
||
background: linear-gradient(145deg, lighten($--color-danger, 6%), darken($--color-danger, 6%));
|
||
}
|
||
|
||
.el-button--info {
|
||
@include button-variant(#111, darken($--color-info, 10%));
|
||
background: linear-gradient(145deg, lighten($--color-info, 6%), darken($--color-info, 6%));
|
||
}
|
||
|
||
// 文本按钮（低干扰）
|
||
.el-button--text {
|
||
color: $--color-text-secondary;
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
height: auto;
|
||
padding: 4px 8px;
|
||
|
||
&:hover {
|
||
color: $--color-primary;
|
||
background: rgba($--color-primary, .12);
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
// 图标按钮（圆形紧凑）
|
||
.el-button--icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
padding: 0;
|
||
border-radius: 8px;
|
||
|
||
&:only-child {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
// 按钮组（无缝衔接）
|
||
.el-button-group {
|
||
.el-button {
|
||
border-radius: 0;
|
||
margin: 0;
|
||
border-left: 1px solid $--border-color-lighter;
|
||
|
||
&:first-child {
|
||
border-radius: 6px 0 0 6px;
|
||
border-left: none;
|
||
}
|
||
|
||
&:last-child {
|
||
border-radius: 0 6px 6px 0;
|
||
}
|
||
|
||
&:not(:last-child) {
|
||
border-right: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-button--medium {
|
||
padding: 4px 8px !important;
|
||
font-size: 12px;
|
||
height: $--btn-height - 4px;
|
||
}
|
||
|
||
// 迷你按钮（超紧凑）
|
||
.el-button--mini {
|
||
padding: 4px 8px !important;
|
||
font-size: 12px;
|
||
height: $--btn-height - 4px;
|
||
&.is-circle {
|
||
padding: 4px !important;
|
||
}
|
||
}
|
||
|
||
.el-button--small {
|
||
padding: 4px 8px !important;
|
||
font-size: 12px;
|
||
height: $--btn-height - 4px;
|
||
}
|
||
|
||
|
||
// ---------------------- 3.2 表格（深色交替 + 金属边框）----------------------
|
||
.el-table {
|
||
background: $--table-bg;
|
||
// border: 1px solid $--border-color-light;
|
||
border-radius: 8px;
|
||
box-shadow: $--metal-shadow;
|
||
color: $--color-text-regular;
|
||
overflow: hidden;
|
||
margin-top: $--form-item-margin * 2; // 与表单间距
|
||
|
||
// 分割线
|
||
&::before {
|
||
background-color: $--border-color-lighter;
|
||
}
|
||
|
||
// 表头（深灰黑 + 纯白文字）
|
||
.el-table__header-wrapper {
|
||
th.el-table__cell {
|
||
background: $--color-background;
|
||
color: $--color-text-primary;
|
||
font-weight: 600;
|
||
border-bottom: 1px solid $--border-color-lighter;
|
||
padding: 4px !important; // 紧凑 padding
|
||
height: auto;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
// 表体（奇偶行交替 + hover高亮）
|
||
.el-table__body-wrapper {
|
||
.el-table__row {
|
||
|
||
// 奇数行
|
||
&:nth-child(odd) .el-table__cell {
|
||
background: $--color-background-light;
|
||
color: $--color-text-regular;
|
||
}
|
||
|
||
// 偶数行
|
||
&:nth-child(even) .el-table__cell {
|
||
background: $--color-background-light;
|
||
color: $--color-text-regular;
|
||
}
|
||
|
||
// hover
|
||
&:hover .el-table__cell {
|
||
background: rgba($--color-primary, 0.25);
|
||
color: #888888;
|
||
}
|
||
|
||
// 当前行
|
||
&.current-row .el-table__cell {
|
||
background: rgba($--color-primary, 0.35);
|
||
color: $--color-text-primary;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
// 单元格（统一边框 + 紧凑 padding）
|
||
.el-table__cell {
|
||
border-bottom: 1px solid $--border-color-lighter;
|
||
color: $--color-text-regular;
|
||
padding: 2px 4px !important; // 超紧凑
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
// 表尾
|
||
.el-table__footer-wrapper {
|
||
border-top: 1px solid $--border-color-lighter;
|
||
|
||
td {
|
||
background: linear-gradient(0deg, $--color-background-light, $--color-background);
|
||
color: $--color-text-secondary;
|
||
padding: 4px !important;
|
||
}
|
||
}
|
||
|
||
// 列宽调整线
|
||
.el-table__column-resize-proxy {
|
||
background-color: $--color-primary;
|
||
}
|
||
|
||
// 展开图标
|
||
.el-table__expand-icon {
|
||
color: $--color-text-secondary;
|
||
|
||
&.is-expanded,
|
||
&:hover {
|
||
color: $--color-primary;
|
||
}
|
||
}
|
||
|
||
&__empty-block {
|
||
background: $--color-background;
|
||
}
|
||
|
||
// 适配尺寸类（统一紧凑）
|
||
&.el-table--medium .el-table__cell,
|
||
&.el-table--mini .el-table__cell {
|
||
padding: 0 !important;
|
||
}
|
||
}
|
||
|
||
.el-table__fixed-right {
|
||
// 表头（深灰黑 + 纯白文字）
|
||
.el-table__fixed-header-wrapper {
|
||
th.el-table__cell {
|
||
background: $--color-background;
|
||
color: $--color-text-primary;
|
||
font-weight: 600;
|
||
border-bottom: 1px solid $--border-color-lighter;
|
||
padding: 4px !important; // 紧凑 padding
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
// 表体（奇偶行交替 + hover高亮）
|
||
.el-table__fixed-body-wrapper {
|
||
.el-table__row {
|
||
|
||
// 奇数行
|
||
&:nth-child(odd) .el-table__cell {
|
||
background: $--color-background-light;
|
||
color: $--color-text-regular;
|
||
}
|
||
|
||
// 偶数行
|
||
&:nth-child(even) .el-table__cell {
|
||
background: $--color-background-light;
|
||
color: $--color-text-regular;
|
||
}
|
||
|
||
// 当前行
|
||
&.current-row .el-table__cell {
|
||
background: rgba($--color-primary, 0.35);
|
||
color: $--color-text-primary;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// ---------------------- 3.2 日期范围选择器 ----------------------
|
||
// 日期范围选择器主题样式
|
||
.el-date-editor {
|
||
height: $--btn-height;
|
||
|
||
// 基础样式
|
||
&.el-range-editor {
|
||
background: $--color-background;
|
||
border: 1px solid $--border-color;
|
||
border-radius: 4px;
|
||
color: $--color-text-regular;
|
||
height: $--btn-height;
|
||
padding: 0 8px;
|
||
box-shadow: none;
|
||
transition: all 0.2s ease;
|
||
|
||
// 悬停状态
|
||
&:hover {
|
||
border-color: $--color-primary;
|
||
box-shadow: 0 0 0 2px rgba($--color-primary, 0.2);
|
||
}
|
||
|
||
// 聚焦状态
|
||
&.is-focus {
|
||
border-color: $--color-primary;
|
||
box-shadow: 0 0 0 2px rgba($--color-primary, 0.2);
|
||
outline: none;
|
||
}
|
||
|
||
// 图标样式
|
||
.el-input__icon {
|
||
color: $--color-text-secondary;
|
||
width: 18px;
|
||
height: 18px;
|
||
line-height: 18px;
|
||
|
||
&:hover {
|
||
color: $--color-primary;
|
||
}
|
||
}
|
||
|
||
// 输入框样式
|
||
.el-range-input {
|
||
background: transparent;
|
||
border: none;
|
||
color: $--color-text-regular;
|
||
padding: 0 4px;
|
||
height: 100%;
|
||
font-size: 13px;
|
||
width: 80px;
|
||
|
||
&::placeholder {
|
||
color: $--color-text-placeholder;
|
||
}
|
||
|
||
&:focus {
|
||
outline: none;
|
||
}
|
||
}
|
||
|
||
// 分隔符样式
|
||
.el-range-separator {
|
||
color: $--color-text-secondary;
|
||
padding: 0 4px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
// 清除图标
|
||
.el-range__close-icon {
|
||
margin-left: 4px;
|
||
|
||
&:hover {
|
||
color: $--color-danger;
|
||
}
|
||
}
|
||
}
|
||
|
||
&--medium.el-input__inner {
|
||
height: auto;
|
||
}
|
||
}
|
||
|
||
.el-range-editor--medium.el-input__inner {
|
||
height: $--btn-height !important;
|
||
width: auto !important;
|
||
|
||
.el-range-separator {
|
||
padding: 0;
|
||
line-height: 16px;
|
||
font-size: 13px;
|
||
color: $--color-text-secondary;
|
||
}
|
||
}
|
||
|
||
// 日期选择面板样式
|
||
.el-picker-panel {
|
||
background: $--color-background;
|
||
border: 1px solid $--border-color;
|
||
border-radius: 6px;
|
||
box-shadow: $--metal-shadow;
|
||
color: $--color-text-regular;
|
||
|
||
// 头部导航
|
||
.el-picker-panel__header {
|
||
border-bottom: 1px solid $--border-color-lighter;
|
||
padding: 6px 10px;
|
||
|
||
button {
|
||
color: $--color-text-secondary;
|
||
|
||
&:hover {
|
||
color: $--color-primary;
|
||
background: rgba($--color-primary, 0.1);
|
||
}
|
||
}
|
||
|
||
.el-picker-panel__icon-btn {
|
||
width: 24px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.el-date-picker__header-label {
|
||
color: $--color-text-primary;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
// 日期表格
|
||
.el-date-table {
|
||
border-collapse: separate;
|
||
border-spacing: 2px;
|
||
|
||
th {
|
||
color: $--color-text-secondary;
|
||
font-weight: normal;
|
||
padding: 4px 0;
|
||
font-size: 12px;
|
||
}
|
||
|
||
td {
|
||
padding: 0;
|
||
|
||
.el-date-table__cell {
|
||
width: 28px;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
border-radius: 4px;
|
||
margin: 1px;
|
||
font-size: 13px;
|
||
|
||
&:hover {
|
||
background: rgba($--color-primary, 0.2);
|
||
}
|
||
|
||
&.current {
|
||
background: $--color-primary;
|
||
color: $--color-text-primary;
|
||
}
|
||
|
||
&.in-range {
|
||
background: rgba($--color-primary, 0.1);
|
||
|
||
&::before {
|
||
background: $--color-primary;
|
||
}
|
||
}
|
||
|
||
&.start-date,
|
||
&.end-date {
|
||
background: $--color-primary;
|
||
color: $--color-text-primary;
|
||
}
|
||
}
|
||
}
|
||
|
||
.available.in-range div {
|
||
background-color: $--color-background;
|
||
}
|
||
}
|
||
|
||
// 范围选择器底部按钮
|
||
.el-range-picker__footer {
|
||
border-top: 1px solid $--border-color-lighter;
|
||
padding: 6px 10px;
|
||
|
||
button {
|
||
background: $--color-background-light;
|
||
border: 1px solid $--border-color;
|
||
color: $--color-text-regular;
|
||
height: 24px;
|
||
line-height: 22px;
|
||
padding: 0 12px;
|
||
font-size: 12px;
|
||
border-radius: 4px;
|
||
|
||
&:hover {
|
||
background: rgba($--color-primary, 0.2);
|
||
border-color: $--color-primary;
|
||
}
|
||
|
||
&.el-button--primary {
|
||
background: $--color-primary;
|
||
border-color: $--color-primary;
|
||
color: $--color-text-primary;
|
||
|
||
&:hover {
|
||
background: lighten($--color-primary, 10%);
|
||
border-color: lighten($--color-primary, 10%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 自定义表格工具类（补充紧凑）
|
||
.small-padding .cell {
|
||
padding-left: $--spacing-base / 2;
|
||
padding-right: $--spacing-base / 2;
|
||
}
|
||
|
||
.status-col .cell {
|
||
padding: 0 10px !important;
|
||
text-align: center;
|
||
}
|
||
|
||
|
||
// ---------------------- 3.3 表单/输入（金属内阴影 + 统一高度）----------------------
|
||
// 表单项布局
|
||
.el-form-item {
|
||
margin-bottom: $--form-item-margin !important;
|
||
font-size: 13px;
|
||
|
||
// 标签样式
|
||
.el-form-item__label {
|
||
color: $--color-text-secondary;
|
||
padding-right: $--spacing-base;
|
||
font-size: 13px;
|
||
}
|
||
|
||
// 搜索表单 inline 布局
|
||
&.search-form-item {
|
||
display: inline-block;
|
||
margin-right: $--spacing-base;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
|
||
// 输入框（统一高度 + 金属内阴影）
|
||
.el-input {
|
||
height: $--btn-height;
|
||
|
||
.el-input__inner {
|
||
background: $--metal-gradient-light;
|
||
border-color: $--border-color-light;
|
||
color: $--color-text-regular;
|
||
// box-shadow: $--metal-shadow-inset;
|
||
border-radius: 0;
|
||
height: $--btn-height;
|
||
line-height: $--btn-height;
|
||
font-size: 13px;
|
||
|
||
&::placeholder {
|
||
color: $--color-text-placeholder;
|
||
}
|
||
|
||
&:focus {
|
||
border-color: $--color-primary;
|
||
box-shadow: $--metal-shadow-inset;
|
||
}
|
||
}
|
||
|
||
// 输入框图标
|
||
.el-input__icon {
|
||
color: $--color-text-secondary;
|
||
height: $--btn-height;
|
||
line-height: $--btn-height;
|
||
|
||
&:hover {
|
||
color: $--color-primary;
|
||
}
|
||
}
|
||
|
||
// 尺寸适配（统一高度）
|
||
&.el-input--small .el-input__inner,
|
||
&.el-input--medium .el-input__inner,
|
||
&.el-input--large .el-input__inner {
|
||
height: $--btn-height;
|
||
line-height: $--btn-height;
|
||
}
|
||
|
||
.el-input-group__append,
|
||
.el-input-group__prepend {
|
||
border-radius: 0;
|
||
border-left: 1px solid $--border-color-light;
|
||
background: $--metal-gradient-light;
|
||
color: $--color-text-regular;
|
||
// box-shadow: $--metal-shadow-inset;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
// 文本域
|
||
.el-textarea .el-textarea__inner {
|
||
background: $--metal-gradient-light;
|
||
border-color: $--border-color-light;
|
||
color: $--color-text-regular;
|
||
// box-shadow: $--metal-shadow-inset;
|
||
border-radius: 0;
|
||
padding: $--spacing-base;
|
||
font-size: 13px;
|
||
|
||
&::placeholder {
|
||
color: $--color-text-placeholder;
|
||
}
|
||
|
||
&:focus {
|
||
border-color: $--color-primary;
|
||
box-shadow: $--metal-shadow-inset, 0 0 0 2px rgba($--color-primary, .22);
|
||
}
|
||
}
|
||
|
||
// 数字输入框
|
||
.el-input-number {
|
||
.el-input__inner {
|
||
border-radius: 0;
|
||
}
|
||
|
||
// 增减按钮
|
||
.el-input-number__increase,
|
||
.el-input-number__decrease {
|
||
background: $--metal-gradient-light;
|
||
border-color: $--border-color-light;
|
||
box-shadow: $--metal-shadow;
|
||
transition: all .2s ease;
|
||
height: $--btn-height;
|
||
line-height: $--btn-height;
|
||
|
||
&:hover {
|
||
background: $--metal-gradient-dark;
|
||
border-color: $--border-color-base;
|
||
box-shadow: 0 0 0 1px $--border-color-base;
|
||
}
|
||
|
||
&.is-disabled {
|
||
background: $--color-background-lighter;
|
||
border-color: $--border-color-lighter;
|
||
color: $--color-text-placeholder;
|
||
cursor: not-allowed;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
.el-input-number__increase {
|
||
border-radius: 0;
|
||
|
||
.el-icon-plus {
|
||
color: $--color-text-regular;
|
||
}
|
||
}
|
||
|
||
.el-input-number__decrease {
|
||
border-radius: 0;
|
||
|
||
.el-icon-minus {
|
||
color: $--color-text-regular;
|
||
}
|
||
}
|
||
|
||
// 迷你尺寸
|
||
&.el-input-number--small {
|
||
|
||
.el-input-number__increase,
|
||
.el-input-number__decrease {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
}
|
||
|
||
// 无控制按钮
|
||
&.is-without-controls .el-input__inner {
|
||
border-radius: 0;
|
||
}
|
||
}
|
||
|
||
// 选择器/下拉框
|
||
.el-select {
|
||
.el-input__inner {
|
||
border-radius: 0;
|
||
}
|
||
|
||
// 下拉面板
|
||
.el-select-dropdown {
|
||
background: $--metal-gradient-light;
|
||
border: 1px solid $--border-color-light;
|
||
box-shadow: $--metal-shadow;
|
||
color: $--color-text-regular;
|
||
border-radius: 6px;
|
||
|
||
.el-select-dropdown__item {
|
||
color: $--color-text-regular;
|
||
padding: 6px 16px;
|
||
font-size: 13px;
|
||
|
||
&:hover {
|
||
background-color: rgba($--color-primary, .12);
|
||
}
|
||
|
||
&.selected {
|
||
background-color: rgba($--color-primary, .20);
|
||
color: $--color-text-primary;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 开关
|
||
.el-switch {
|
||
.el-switch__core {
|
||
background-color: $--border-color-base;
|
||
box-shadow: $--metal-shadow-inset;
|
||
}
|
||
|
||
&.is-checked .el-switch__core {
|
||
background-color: $--color-primary;
|
||
}
|
||
}
|
||
|
||
// 滑块
|
||
.el-slider__bar {
|
||
background: $--metal-gradient-dark;
|
||
}
|
||
|
||
.el-slider__button {
|
||
background: $--metal-gradient-light;
|
||
border-color: $--border-color-light;
|
||
box-shadow: $--metal-shadow;
|
||
}
|
||
|
||
// 复选框
|
||
.el-checkbox {
|
||
.el-checkbox__inner {
|
||
background: $--metal-gradient-light;
|
||
border-color: $--border-color-light;
|
||
box-shadow: $--metal-shadow-inset;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
&.is-checked .el-checkbox__inner {
|
||
background: $--metal-gradient-dark;
|
||
border-color: $--border-color-base;
|
||
|
||
&::after {
|
||
border-color: $--color-text-primary;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// ---------------------- 3.4 卡片/对话框（金属外阴影 + 层级）----------------------
|
||
// 卡片
|
||
.el-card {
|
||
background: $--metal-gradient-light;
|
||
border: 1px solid $--border-color-light;
|
||
box-shadow: $--metal-shadow;
|
||
border-radius: 8px;
|
||
color: $--color-text-regular;
|
||
overflow: hidden;
|
||
|
||
// 卡片头部
|
||
.el-card__header {
|
||
padding: $--spacing-md $--spacing-lg;
|
||
border-bottom: 1px solid $--border-color-lighter;
|
||
color: $--color-text-primary;
|
||
background: transparent;
|
||
}
|
||
|
||
// 卡片主体
|
||
.el-card__body {
|
||
padding: $--spacing-lg;
|
||
}
|
||
}
|
||
|
||
// 对话框
|
||
.el-dialog {
|
||
transform: none;
|
||
left: 0;
|
||
position: relative;
|
||
margin: 10vh auto 0;
|
||
// background: $--metal-gradient-light !important;
|
||
background-color: white !important;
|
||
border: 1px solid $--border-color-light;
|
||
box-shadow: $--metal-shadow;
|
||
border-radius: 8px;
|
||
color: $--color-text-regular;
|
||
|
||
// 对话框头部
|
||
.el-dialog__header {
|
||
padding: $--spacing-lg;
|
||
border-bottom: 1px solid $--border-color-lighter;
|
||
}
|
||
|
||
.el-dialog__title {
|
||
color: $--color-text-primary;
|
||
}
|
||
|
||
// 对话框主体
|
||
.el-dialog__body {
|
||
padding: $--spacing-lg;
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
// 对话框底部
|
||
.el-dialog__footer {
|
||
padding: $--spacing-md $--spacing-lg;
|
||
border-top: 1px solid $--border-color-lighter;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
// 抽屉
|
||
.el-drawer {
|
||
background: $--metal-gradient-light;
|
||
border: 1px solid $--border-color-light;
|
||
box-shadow: $--metal-shadow;
|
||
border-radius: 8px;
|
||
color: $--color-text-regular;
|
||
}
|
||
|
||
// Popover
|
||
.el-popover {
|
||
background: $--metal-gradient-light;
|
||
border: 1px solid $--border-color-light;
|
||
border-radius: 8px;
|
||
box-shadow: $--metal-shadow;
|
||
color: $--color-text-regular;
|
||
padding: $--spacing-lg;
|
||
|
||
&:focus {
|
||
outline: none;
|
||
}
|
||
|
||
// Popover 标题
|
||
.el-popover__title {
|
||
color: $--color-text-primary;
|
||
border-bottom: 1px solid $--border-color-lighter;
|
||
padding-bottom: $--spacing-md;
|
||
margin-bottom: $--spacing-md;
|
||
font-weight: 600;
|
||
}
|
||
|
||
// Popover 底部
|
||
.el-popover__footer {
|
||
border-top: 1px solid $--border-color-lighter;
|
||
padding-top: $--spacing-md;
|
||
margin-top: $--spacing-md;
|
||
text-align: right;
|
||
}
|
||
|
||
// 箭头样式
|
||
.popper__arrow {
|
||
&::after {
|
||
background: $--metal-gradient-light;
|
||
}
|
||
|
||
border-color: $--border-color-light;
|
||
}
|
||
}
|
||
|
||
.el-button-group+.el-popover {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
// ====================== 标签页组件（el-tabs）样式 =======================
|
||
.el-tabs {
|
||
// 标签页容器
|
||
background-color: transparent;
|
||
color: $--color-text-regular;
|
||
|
||
// 标签栏
|
||
.el-tabs__header {
|
||
margin: 0;
|
||
padding: 0;
|
||
border-bottom: 1px solid $--border-color-light;
|
||
background-color: transparent;
|
||
|
||
// 标签导航容器
|
||
.el-tabs__nav {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
// background-color: $--color-background-light;
|
||
border-radius: 6px 6px 0 0;
|
||
padding: 0 var(--spacing-base);
|
||
box-shadow: inset 0 -1px 0 $--border-color-light;
|
||
}
|
||
|
||
// 标签项
|
||
.el-tabs__item {
|
||
color: $--color-text-secondary;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
// padding: 0 var(--spacing-lg);
|
||
// margin: 0 var(--spacing-sm);
|
||
font-size: 13px;
|
||
transition: all 0.2s ease;
|
||
border-bottom: 2px solid transparent;
|
||
|
||
// 悬停状态
|
||
&:hover {
|
||
color: $--color-primary;
|
||
// background-color: rgba($--color-primary, 0.08);
|
||
border-bottom-color: rgba($--color-primary, 0.3);
|
||
}
|
||
|
||
// 激活状态
|
||
&.is-active {
|
||
color: $--color-primary;
|
||
font-weight: 500;
|
||
border-bottom-color: $--color-primary;
|
||
// background-color: rgba($--color-primary, 0.1);
|
||
}
|
||
|
||
// 禁用状态
|
||
&.is-disabled {
|
||
color: $--color-text-placeholder;
|
||
cursor: not-allowed;
|
||
|
||
&:hover {
|
||
color: $--color-text-placeholder;
|
||
background-color: transparent;
|
||
border-bottom-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 标签滚动按钮
|
||
.el-tabs__nav-prev,
|
||
.el-tabs__nav-next {
|
||
width: 32px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
margin: 4px 0;
|
||
color: $--color-text-secondary;
|
||
border-radius: 4px;
|
||
transition: all 0.2s ease;
|
||
|
||
&:hover {
|
||
color: $--color-primary;
|
||
background-color: rgba($--color-primary, 0.1);
|
||
}
|
||
|
||
&.is-disabled {
|
||
color: $--color-text-placeholder;
|
||
cursor: not-allowed;
|
||
|
||
&:hover {
|
||
color: $--color-text-placeholder;
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 标签分隔线
|
||
.el-tabs__nav-wrap::after {
|
||
background-color: $--border-color-light;
|
||
}
|
||
}
|
||
|
||
// 标签内容区
|
||
.el-tabs__content {
|
||
padding: var(--spacing-lg);
|
||
background-color: $--metal-gradient-light;
|
||
border: 1px solid $--border-color-light;
|
||
border-radius: 0 0 6px 6px;
|
||
min-height: 100px; // 确保有基本高度
|
||
}
|
||
|
||
// 卡片类型标签页
|
||
&.el-tabs--card {
|
||
.el-tabs__header {
|
||
border-bottom: none;
|
||
|
||
.el-tabs__nav {
|
||
background-color: transparent;
|
||
box-shadow: none;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.el-tabs__item {
|
||
border: 1px solid $--border-color-light;
|
||
border-bottom: none;
|
||
border-radius: 6px 6px 0 0;
|
||
margin: 0 2px;
|
||
background-color: $--metal-gradient-light;
|
||
|
||
&.is-active {
|
||
border-color: $--border-color-light;
|
||
border-bottom-color: $--metal-gradient-light;
|
||
background-color: $--metal-gradient-light;
|
||
position: relative;
|
||
bottom: -1px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-tabs__content {
|
||
border-radius: 0 6px 6px 6px;
|
||
margin-top: -1px;
|
||
}
|
||
}
|
||
|
||
// 左侧/右侧标签页
|
||
&.el-tabs--left,
|
||
&.el-tabs--right {
|
||
.el-tabs__header {
|
||
border-bottom: none;
|
||
border-right: 1px solid $--border-color-light;
|
||
margin: 0 var(--spacing-lg) 0 0;
|
||
|
||
.el-tabs__nav {
|
||
flex-direction: column;
|
||
height: auto;
|
||
background-color: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.el-tabs__item {
|
||
width: 100%;
|
||
border-bottom: none;
|
||
border-right: 2px solid transparent;
|
||
|
||
&.is-active {
|
||
border-right-color: $--color-primary;
|
||
background-color: rgba($--color-primary, 0.1);
|
||
}
|
||
}
|
||
}
|
||
|
||
&.el-tabs--right {
|
||
.el-tabs__header {
|
||
border-right: none;
|
||
border-left: 1px solid $--border-color-light;
|
||
margin: 0 0 0 var(--spacing-lg);
|
||
}
|
||
|
||
.el-tabs__item {
|
||
border-right: none;
|
||
border-left: 2px solid transparent;
|
||
|
||
&.is-active {
|
||
border-left-color: $--color-primary;
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-tabs__content {
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
|
||
// 标签页关闭按钮
|
||
.el-icon-close {
|
||
color: $--color-text-secondary;
|
||
margin-left: var(--spacing-sm);
|
||
opacity: 0.7;
|
||
transition: all 0.2s ease;
|
||
|
||
&:hover {
|
||
color: $--color-danger;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
// 可编辑标签添加按钮
|
||
.el-tabs__new-tab {
|
||
color: $--color-text-secondary;
|
||
margin: 0 var(--spacing-sm);
|
||
transition: all 0.2s ease;
|
||
|
||
&:hover {
|
||
color: $--color-primary;
|
||
background-color: rgba($--color-primary, 0.08);
|
||
}
|
||
}
|
||
}
|
||
|
||
// ---------------------- 3.5 日期选择器（深色适配 + 交互优化）----------------------
|
||
.el-date-picker {
|
||
.el-picker-panel {
|
||
background: $--metal-gradient-light;
|
||
border: 1px solid $--border-color-light;
|
||
border-radius: 8px;
|
||
box-shadow: $--metal-shadow;
|
||
color: $--color-text-regular;
|
||
|
||
// 头部（年月切换）
|
||
.el-date-picker__header {
|
||
border-bottom: 1px solid $--border-color-lighter;
|
||
color: $--color-text-primary;
|
||
padding: $--spacing-md;
|
||
|
||
.el-date-picker__header-label {
|
||
cursor: pointer;
|
||
transition: color .2s;
|
||
|
||
&:hover {
|
||
color: $--color-primary;
|
||
}
|
||
}
|
||
|
||
.el-date-picker__header-btn {
|
||
color: $--color-text-secondary;
|
||
cursor: pointer;
|
||
transition: color .2s;
|
||
|
||
&:hover {
|
||
color: $--color-primary;
|
||
}
|
||
|
||
&.is-disabled {
|
||
color: $--color-text-placeholder;
|
||
cursor: not-allowed;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 日期表格
|
||
.el-date-table {
|
||
th {
|
||
color: $--color-text-secondary;
|
||
font-weight: normal;
|
||
padding: $--spacing-sm;
|
||
}
|
||
|
||
td {
|
||
color: $--color-text-regular;
|
||
border-radius: 4px;
|
||
transition: all .2s;
|
||
padding: $--spacing-sm;
|
||
|
||
&.available {
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
background: $--metal-highlight;
|
||
}
|
||
}
|
||
|
||
&.today {
|
||
color: $--color-primary;
|
||
font-weight: 600;
|
||
}
|
||
|
||
&.current,
|
||
&.selected {
|
||
background: $--color-primary;
|
||
color: $--color-text-primary;
|
||
|
||
&:hover {
|
||
background: darken($--color-primary, 5%);
|
||
}
|
||
}
|
||
|
||
&.disabled {
|
||
color: $--color-text-placeholder;
|
||
cursor: not-allowed;
|
||
|
||
&:hover {
|
||
background: transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 快捷选项
|
||
.el-picker-panel__shortcut {
|
||
padding: $--spacing-md;
|
||
border-top: 1px solid $--border-color-lighter;
|
||
|
||
.el-picker-panel__shortcut-btn {
|
||
padding: 4px 10px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all .2s;
|
||
color: $--color-text-regular;
|
||
|
||
&:hover {
|
||
background: $--metal-highlight;
|
||
color: $--color-text-primary;
|
||
}
|
||
|
||
&.is-selected {
|
||
background: $--color-primary;
|
||
color: $--color-text-primary;
|
||
|
||
&:hover {
|
||
background: darken($--color-primary, 5%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 范围选择器分隔符
|
||
.el-range-separator {
|
||
color: $--color-text-regular;
|
||
padding: 0 $--spacing-md;
|
||
box-sizing: content-box;
|
||
}
|
||
|
||
// 范围输入框
|
||
.el-range-input {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
.el-range-editor.el-input__inner {
|
||
display: inline-flex !important;
|
||
}
|
||
}
|
||
|
||
// ====================== 描述列表组件（el-descriptions）- 深色模式 ======================
|
||
.el-descriptions {
|
||
width: 100%;
|
||
background: $--color-background !important; // 黑色背景
|
||
box-shadow: $--metal-shadow;
|
||
overflow: hidden;
|
||
color: $--color-text-primary; // 白色文字
|
||
|
||
// 描述列表头部
|
||
&__header {
|
||
padding: $--spacing-base $--spacing-lg;
|
||
border-bottom: 1px solid $--border-color-lighter;
|
||
background: $--metal-gradient-dark;
|
||
color: $--color-text-primary; // 白色标题
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
|
||
// 描述列表主体容器
|
||
&__body {
|
||
width: 100%;
|
||
}
|
||
|
||
// 描述列表行
|
||
&__row {
|
||
display: flex;
|
||
width: 100%;
|
||
border-bottom: 1px solid $--border-color-lighter;
|
||
|
||
// 最后一行移除底部边框
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
// 描述列表标签项（左侧）
|
||
.el-descriptions-item__label {
|
||
padding: $--spacing-lg;
|
||
background: $--color-background !important; // 极浅灰背景区分标签
|
||
color: $--color-text-secondary; // 浅灰文字
|
||
font-weight: 500;
|
||
border-right: 1px solid $--border-color-lighter;
|
||
box-sizing: border-box;
|
||
white-space: nowrap;
|
||
font-size: 13px;
|
||
}
|
||
|
||
// 描述列表内容项（右侧）
|
||
&-item__content {
|
||
padding: $--spacing-lg;
|
||
background: $--color-background-light;
|
||
color: $--color-text-primary; // 白色文字
|
||
flex: 1;
|
||
box-sizing: border-box;
|
||
font-size: 13px;
|
||
word-break: break-word;
|
||
}
|
||
|
||
// 带边框模式适配
|
||
&--border {
|
||
border: 1px solid $--border-color-light;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
|
||
.el-descriptions__label,
|
||
.el-descriptions__content {
|
||
border-color: $--border-color-lighter;
|
||
}
|
||
|
||
.el-descriptions__header {
|
||
border-bottom: 1px solid $--border-color-light;
|
||
}
|
||
}
|
||
|
||
// 尺寸适配
|
||
&--small {
|
||
|
||
.el-descriptions__label,
|
||
.el-descriptions__content {
|
||
padding: $--spacing-base / 2 $--spacing-base;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.el-descriptions__header {
|
||
padding: $--spacing-base / 2 $--spacing-base;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
&--large {
|
||
|
||
.el-descriptions__label,
|
||
.el-descriptions__content {
|
||
padding: $--spacing-lg $--spacing-lg * 1.5;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.el-descriptions__header {
|
||
padding: $--spacing-base $--spacing-lg * 1.5;
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
|
||
// 响应式适配
|
||
@media (max-width: 768px) {
|
||
.el-descriptions__row {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.el-descriptions__label {
|
||
border-right: none;
|
||
border-bottom: 1px solid $--border-color-lighter;
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// ---------------------- 3.6 导航类（面包屑/菜单）----------------------
|
||
// 面包屑
|
||
.el-breadcrumb {
|
||
padding: $--spacing-md 0;
|
||
font-size: 13px;
|
||
|
||
.el-breadcrumb__inner,
|
||
.el-breadcrumb__inner a {
|
||
font-weight: 400 !important;
|
||
color: $--color-text-secondary !important;
|
||
}
|
||
|
||
.el-breadcrumb__separator {
|
||
margin: 0 $--spacing-sm;
|
||
color: $--border-color;
|
||
}
|
||
}
|
||
|
||
// 菜单
|
||
.el-menu {
|
||
border-right: 1px solid $--border-color;
|
||
background: $--color-background;
|
||
|
||
.el-menu-item,
|
||
.el-submenu__title {
|
||
padding: 0 16px !important;
|
||
height: 40px !important;
|
||
line-height: 40px !important;
|
||
color: $--color-text-secondary;
|
||
font-size: 13px;
|
||
|
||
&:hover {
|
||
background: rgba($--color-primary, .12);
|
||
color: $--color-primary;
|
||
}
|
||
}
|
||
|
||
// 折叠菜单
|
||
&.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
|
||
display: none;
|
||
}
|
||
|
||
// 激活菜单
|
||
.el-menu-item.is-active {
|
||
color: $--color-primary;
|
||
background: rgba($--color-primary, .15);
|
||
border-right: 3px solid $--color-primary;
|
||
}
|
||
}
|
||
|
||
|
||
// ---------------------- 3.7 其他组件（标签/分页/上传）----------------------
|
||
// 标签
|
||
.el-tag {
|
||
background: $--metal-gradient-light;
|
||
border-color: $--border-color-light;
|
||
color: $--color-text-regular;
|
||
padding: 2px 8px;
|
||
border-radius: 2px;
|
||
font-size: 12px;
|
||
height: auto;
|
||
margin-right: 0;
|
||
|
||
// 主色标签
|
||
&.el-tag--primary {
|
||
background: rgba($--color-primary, .22);
|
||
color: $--color-primary;
|
||
border-color: transparent;
|
||
}
|
||
|
||
// 表格内标签（无圆角）
|
||
.cell & {
|
||
margin-right: 0;
|
||
padding: 1px !important;
|
||
border-radius: 0 !important;
|
||
}
|
||
}
|
||
|
||
// 分页
|
||
.el-pagination {
|
||
margin-top: 16px;
|
||
padding: 8px 0;
|
||
text-align: right;
|
||
|
||
.el-pager li {
|
||
margin: 0 2px;
|
||
min-width: 30px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
border-radius: 4px;
|
||
background: $--metal-gradient-light;
|
||
border: 1px solid $--border-color-light;
|
||
|
||
&:hover {
|
||
background: $--metal-gradient-dark;
|
||
color: $--color-primary;
|
||
}
|
||
|
||
&.active {
|
||
background: $--color-primary;
|
||
color: $--color-text-primary;
|
||
border-color: $--color-primary;
|
||
}
|
||
}
|
||
|
||
// 输入框后缀
|
||
.el-input__suffix {
|
||
position: absolute;
|
||
line-height: 0;
|
||
}
|
||
}
|
||
|
||
// 分页容器（透明背景）
|
||
div.pagination-container {
|
||
background-color: transparent !important;
|
||
padding: 0 !important;
|
||
margin-top: 0 !important;
|
||
margin-bottom: 0 !important;
|
||
|
||
.el-pagination {
|
||
padding: 0 !important;
|
||
}
|
||
}
|
||
|
||
// 上传组件
|
||
.el-upload {
|
||
input[type="file"] {
|
||
display: none !important;
|
||
}
|
||
|
||
.el-upload__input {
|
||
display: none;
|
||
}
|
||
|
||
// 拖拽上传容器
|
||
.el-upload-dragger {
|
||
width: 100%;
|
||
height: 200px;
|
||
border-radius: 6px;
|
||
border: 2px dashed $--border-color;
|
||
background: $--metal-gradient-light;
|
||
color: $--color-text-secondary;
|
||
|
||
&:hover {
|
||
border-color: $--color-primary;
|
||
background: $--metal-gradient-dark;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 树形组件
|
||
.el-tree {
|
||
background-color: transparent !important;
|
||
color: $--color-text-regular;
|
||
|
||
.el-tree-node {
|
||
// &:hover {
|
||
// background: rgba($--color-primary, .12);
|
||
// }
|
||
|
||
&.is-current>.el-tree-node__content {
|
||
background: rgba($--color-primary, .2);
|
||
color: $--color-primary;
|
||
}
|
||
}
|
||
} |