831 lines
15 KiB
SCSS
831 lines
15 KiB
SCSS
// ====================== 1. 基础尺寸变量（Sass直接处理）======================
|
||
// 间距/尺寸变量
|
||
$--spacing-sm: 4px;
|
||
$--spacing-base: 8px;
|
||
$--spacing-md: $--spacing-base;
|
||
$--spacing-lg: $--spacing-base * 2;
|
||
$--form-item-margin: $--spacing-base;
|
||
$--btn-height: 24px;
|
||
|
||
|
||
// ====================== 2. CSS尺寸变量（与Sass变量同步）======================
|
||
:root {
|
||
/* 间距/尺寸体系 */
|
||
--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};
|
||
}
|
||
|
||
|
||
// ====================== 3. Element UI适配 - 尺寸变量 =======================
|
||
// 尺寸变量
|
||
$--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;
|
||
|
||
|
||
// ====================== 4. 全局尺寸样式 ======================
|
||
body {
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
// 标签页内容溢出修复（尺寸相关）
|
||
.el-tabs__content {
|
||
overflow: visible !important;
|
||
}
|
||
|
||
|
||
// ====================== 5. 组件尺寸样式（按优先级合并）======================
|
||
// ---------------------- 5.1 按钮（紧凑尺寸）----------------------
|
||
@mixin button-variant() {
|
||
border-radius: 6px;
|
||
transition: all .25s ease;
|
||
height: $--btn-height;
|
||
padding: 0 var(--spacing-lg);
|
||
font-size: 13px;
|
||
|
||
&:hover,
|
||
&:focus {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
&:active {
|
||
transform: translateY(1px);
|
||
}
|
||
|
||
&.is-disabled,
|
||
&[disabled] {
|
||
cursor: not-allowed;
|
||
}
|
||
}
|
||
|
||
// 主按钮（尺寸相关）
|
||
.el-button--primary {
|
||
@include button-variant();
|
||
}
|
||
|
||
// 功能按钮（尺寸相关）
|
||
.el-button--success,
|
||
.el-button--warning,
|
||
.el-button--danger,
|
||
.el-button--info {
|
||
@include button-variant();
|
||
}
|
||
|
||
// 文本按钮（尺寸相关）
|
||
.el-button--text {
|
||
height: auto;
|
||
padding: 4px 8px;
|
||
}
|
||
|
||
// 图标按钮（圆形紧凑尺寸）
|
||
.el-button.is-circle {
|
||
width: 26px;
|
||
height: 26px;
|
||
padding: 0;
|
||
border-radius: 50%;
|
||
|
||
&:only-child {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
// 按钮组（无缝衔接尺寸）
|
||
.el-button-group {
|
||
.el-button {
|
||
border-radius: 0;
|
||
margin: 0;
|
||
|
||
&:first-child {
|
||
border-radius: 6px 0 0 6px;
|
||
}
|
||
|
||
&: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,
|
||
.el-button--small,
|
||
.el-button {
|
||
padding: 4px 8px !important;
|
||
font-size: 12px;
|
||
height: $--btn-height - 4px;
|
||
|
||
&.is-circle {
|
||
padding: 4px !important;
|
||
}
|
||
}
|
||
|
||
|
||
// ---------------------- 5.2 表格（紧凑尺寸）----------------------
|
||
.el-table {
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
margin-top: $--form-item-margin * 2; // 与表单间距
|
||
|
||
// 表头（紧凑padding）
|
||
.el-table__header-wrapper {
|
||
th.el-table__cell {
|
||
padding: 4px !important;
|
||
height: auto;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
.el-button + .el-button {
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.el-button.el-button--text {
|
||
padding: 0 2px !important;
|
||
}
|
||
|
||
// 表体（紧凑padding）
|
||
.el-table__body-wrapper {
|
||
.el-table__cell {
|
||
padding: 2px 4px !important; // 超紧凑
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
// 表尾（紧凑padding）
|
||
.el-table__footer-wrapper {
|
||
td {
|
||
padding: 4px !important;
|
||
}
|
||
}
|
||
|
||
// 适配尺寸类（统一紧凑）
|
||
&.el-table--medium .el-table__cell,
|
||
&.el-table--mini .el-table__cell {
|
||
padding: 0 !important;
|
||
}
|
||
}
|
||
|
||
.el-table__fixed-right {
|
||
// 表头（紧凑padding）
|
||
.el-table__fixed-header-wrapper {
|
||
th.el-table__cell {
|
||
padding: 4px !important;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 自定义表格工具类（补充紧凑）
|
||
.small-padding .cell {
|
||
padding-left: calc($--spacing-base / 2);
|
||
padding-right: calc($--spacing-base / 2);
|
||
}
|
||
|
||
.status-col .cell {
|
||
padding: 0 10px !important;
|
||
text-align: center;
|
||
}
|
||
|
||
|
||
// ---------------------- 5.3 日期范围选择器（尺寸适配）----------------------
|
||
.el-date-editor {
|
||
height: $--btn-height;
|
||
|
||
// 基础尺寸
|
||
&.el-range-editor {
|
||
padding: 0 8px;
|
||
height: $--btn-height;
|
||
|
||
// 图标尺寸
|
||
.el-input__icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
line-height: 18px;
|
||
}
|
||
|
||
// 输入框尺寸
|
||
.el-range-input {
|
||
padding: 0 4px;
|
||
height: 100%;
|
||
font-size: 13px;
|
||
width: 80px;
|
||
}
|
||
|
||
// 分隔符尺寸
|
||
.el-range-separator {
|
||
padding: 0 4px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
// 清除图标间距
|
||
.el-range__close-icon {
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
|
||
&--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;
|
||
}
|
||
}
|
||
|
||
// 日期选择面板尺寸
|
||
.el-picker-panel {
|
||
border-radius: 6px;
|
||
|
||
// 头部导航尺寸
|
||
.el-picker-panel__header {
|
||
padding: 6px 10px;
|
||
|
||
.el-picker-panel__icon-btn {
|
||
width: 24px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
|
||
// 日期表格尺寸
|
||
.el-date-table {
|
||
border-collapse: separate;
|
||
border-spacing: 2px;
|
||
|
||
th {
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 范围选择器底部按钮尺寸
|
||
.el-range-picker__footer {
|
||
padding: 6px 10px;
|
||
|
||
button {
|
||
height: 24px;
|
||
line-height: 22px;
|
||
padding: 0 12px;
|
||
font-size: 12px;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// ---------------------- 5.4 表单/输入（统一尺寸）----------------------
|
||
// 表单项布局尺寸
|
||
.el-form-item {
|
||
margin-bottom: $--form-item-margin !important;
|
||
font-size: 13px;
|
||
|
||
// 标签间距
|
||
.el-form-item__label {
|
||
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 {
|
||
border-radius: 0;
|
||
height: $--btn-height;
|
||
line-height: $--btn-height;
|
||
font-size: 13px;
|
||
}
|
||
|
||
// 输入框图标尺寸
|
||
.el-input__icon {
|
||
height: $--btn-height;
|
||
line-height: $--btn-height;
|
||
}
|
||
|
||
// 尺寸适配（统一高度）
|
||
&.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;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
// 文本域尺寸
|
||
.el-textarea .el-textarea__inner {
|
||
border-radius: 0;
|
||
padding: $--spacing-base;
|
||
font-size: 13px;
|
||
}
|
||
|
||
// 数字输入框尺寸
|
||
.el-input-number {
|
||
.el-input__inner {
|
||
border-radius: 0;
|
||
}
|
||
|
||
// 增减按钮尺寸
|
||
.el-input-number__increase,
|
||
.el-input-number__decrease {
|
||
transition: all .2s ease;
|
||
height: $--btn-height;
|
||
line-height: $--btn-height;
|
||
}
|
||
|
||
.el-input-number__increase,
|
||
.el-input-number__decrease {
|
||
border-radius: 0;
|
||
}
|
||
|
||
// 迷你尺寸
|
||
&.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 {
|
||
border-radius: 6px;
|
||
|
||
.el-select-dropdown__item {
|
||
padding: 6px 16px;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// ---------------------- 5.5 卡片/对话框（尺寸层级）----------------------
|
||
// 卡片尺寸
|
||
.el-card {
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
|
||
// 卡片头部尺寸
|
||
.el-card__header {
|
||
padding: $--spacing-md $--spacing-lg;
|
||
}
|
||
|
||
// 卡片主体尺寸
|
||
.el-card__body {
|
||
padding: $--spacing-lg;
|
||
}
|
||
}
|
||
|
||
// 对话框尺寸
|
||
.el-dialog {
|
||
transform: none;
|
||
left: 0;
|
||
position: relative;
|
||
margin: 10vh auto 0;
|
||
padding: 0;
|
||
border-radius: 8px;
|
||
|
||
// 对话框头部尺寸
|
||
.el-dialog__header {
|
||
padding: $--spacing-lg;
|
||
}
|
||
|
||
// 对话框主体尺寸
|
||
.el-dialog__body {
|
||
padding: $--spacing-lg;
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
// 对话框底部尺寸
|
||
.el-dialog__footer {
|
||
padding: $--spacing-md $--spacing-lg;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
// 抽屉尺寸
|
||
.el-drawer {
|
||
border-radius: 8px;
|
||
}
|
||
|
||
// Popover尺寸
|
||
.el-popover {
|
||
border-radius: 8px;
|
||
padding: $--spacing-lg;
|
||
|
||
// Popover 标题尺寸
|
||
.el-popover__title {
|
||
padding-bottom: $--spacing-md;
|
||
margin-bottom: $--spacing-md;
|
||
}
|
||
|
||
// Popover 底部尺寸
|
||
.el-popover__footer {
|
||
padding-top: $--spacing-md;
|
||
margin-top: $--spacing-md;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
.el-button-group+.el-popover {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
|
||
// ---------------------- 5.6 标签页组件（el-tabs）尺寸 ----------------======
|
||
.el-tabs {
|
||
// 标签栏尺寸
|
||
.el-tabs__header {
|
||
margin: 0;
|
||
padding: 0;
|
||
|
||
// 标签导航容器尺寸
|
||
.el-tabs__nav {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
padding: 0 var(--spacing-base);
|
||
}
|
||
|
||
// 标签项尺寸
|
||
.el-tabs__item {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
font-size: 13px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
// 标签滚动按钮尺寸
|
||
.el-tabs__nav-prev,
|
||
.el-tabs__nav-next {
|
||
width: 32px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
margin: 4px 0;
|
||
border-radius: 4px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
}
|
||
|
||
// 标签内容区尺寸
|
||
.el-tabs__content {
|
||
padding: var(--spacing-lg);
|
||
border-radius: 0 0 6px 6px;
|
||
min-height: 100px; // 确保有基本高度
|
||
}
|
||
|
||
// 卡片类型标签页尺寸
|
||
&.el-tabs--card {
|
||
.el-tabs__header {
|
||
.el-tabs__nav {
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.el-tabs__item {
|
||
margin: 0 2px;
|
||
border-radius: 6px 6px 0 0;
|
||
}
|
||
}
|
||
|
||
.el-tabs__content {
|
||
border-radius: 0 6px 6px 6px;
|
||
margin-top: -1px;
|
||
}
|
||
}
|
||
|
||
// 左侧/右侧标签页尺寸
|
||
&.el-tabs--left,
|
||
&.el-tabs--right {
|
||
.el-tabs__header {
|
||
margin: 0 var(--spacing-lg) 0 0;
|
||
|
||
.el-tabs__nav {
|
||
flex-direction: column;
|
||
height: auto;
|
||
}
|
||
|
||
.el-tabs__item {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
&.el-tabs--right {
|
||
.el-tabs__header {
|
||
margin: 0 0 0 var(--spacing-lg);
|
||
}
|
||
}
|
||
|
||
.el-tabs__content {
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
|
||
// 标签页关闭按钮间距
|
||
.el-icon-close {
|
||
margin-left: var(--spacing-sm);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
// 可编辑标签添加按钮间距
|
||
.el-tabs__new-tab {
|
||
margin: 0 var(--spacing-sm);
|
||
transition: all 0.2s ease;
|
||
}
|
||
}
|
||
|
||
|
||
// ---------------------- 5.7 日期选择器（尺寸优化）----------------------
|
||
.el-date-picker {
|
||
.el-picker-panel {
|
||
border-radius: 8px;
|
||
|
||
// 头部尺寸
|
||
.el-date-picker__header {
|
||
padding: $--spacing-md;
|
||
}
|
||
|
||
// 日期表格尺寸
|
||
.el-date-table {
|
||
th {
|
||
padding: $--spacing-sm;
|
||
}
|
||
|
||
td {
|
||
padding: $--spacing-sm;
|
||
border-radius: 4px;
|
||
transition: all .2s;
|
||
}
|
||
}
|
||
|
||
// 快捷选项尺寸
|
||
.el-picker-panel__shortcut {
|
||
padding: $--spacing-md;
|
||
|
||
.el-picker-panel__shortcut-btn {
|
||
padding: 4px 10px;
|
||
border-radius: 4px;
|
||
transition: all .2s;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 范围选择器分隔符尺寸
|
||
.el-range-separator {
|
||
padding: 0 $--spacing-md;
|
||
box-sizing: content-box;
|
||
}
|
||
|
||
// 范围输入框布局
|
||
.el-range-editor.el-input__inner {
|
||
display: inline-flex !important;
|
||
}
|
||
}
|
||
|
||
|
||
// ---------------------- 5.8 描述列表组件（el-descriptions）- 尺寸适配 ======================
|
||
.el-descriptions {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
|
||
// 描述列表头部尺寸
|
||
&__header {
|
||
padding: $--spacing-base $--spacing-lg;
|
||
font-size: 14px;
|
||
}
|
||
|
||
// 描述列表主体容器尺寸
|
||
&__body {
|
||
width: 100%;
|
||
}
|
||
|
||
// 描述列表行布局
|
||
&__row {
|
||
display: flex;
|
||
width: 100%;
|
||
|
||
// 最后一行布局
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
// 描述列表标签项尺寸
|
||
.el-descriptions-item__label {
|
||
padding: $--spacing-lg;
|
||
box-sizing: border-box;
|
||
white-space: nowrap;
|
||
font-size: 13px;
|
||
}
|
||
|
||
// 描述列表内容项尺寸
|
||
&-item__content {
|
||
padding: $--spacing-lg;
|
||
flex: 1;
|
||
box-sizing: border-box;
|
||
font-size: 13px;
|
||
word-break: break-word;
|
||
}
|
||
|
||
// 带边框模式尺寸
|
||
&--border {
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
// 尺寸适配
|
||
&--small {
|
||
.el-descriptions__label,
|
||
.el-descriptions__content {
|
||
padding: calc($--spacing-base / 2) $--spacing-base;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.el-descriptions__header {
|
||
padding: calc($--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 {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 菜单尺寸
|
||
.el-menu {
|
||
.el-menu-item,
|
||
.el-submenu__title {
|
||
height: 40px !important;
|
||
line-height: 40px !important;
|
||
}
|
||
|
||
// 折叠菜单布局
|
||
&.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
|
||
// ---------------------- 5.10 其他组件（标签/分页/上传）尺寸 ----------------------
|
||
// 标签尺寸
|
||
.el-tag {
|
||
padding: 2px 8px;
|
||
border-radius: 2px;
|
||
font-size: 12px;
|
||
height: auto;
|
||
margin-right: 0;
|
||
|
||
// 表格内标签尺寸
|
||
.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;
|
||
}
|
||
|
||
// 输入框后缀布局
|
||
.el-input__suffix {
|
||
position: absolute;
|
||
line-height: 0;
|
||
}
|
||
}
|
||
|
||
// 分页容器尺寸
|
||
div.pagination-container {
|
||
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;
|
||
}
|
||
}
|
||
|
||
// 树形组件布局
|
||
.el-tree {
|
||
.el-tree-node {
|
||
&.is-current>.el-tree-node__content {
|
||
width: 100%;
|
||
}
|
||
}
|
||
} |