/* 基础变量定义 - 工业风浅色配色 */ :root { --primary-color: #3c6382; /* 深蓝色作为主色调,体现工业感 */ --secondary-color: #78909c; /* 辅助色 */ --accent-color: #e67e22; /* 强调色,用于突出按钮和重要操作 */ --background-color: #f5f7fa; /* 浅色背景 */ --card-bg-color: #ffffff; /* 卡片背景 */ --border-color: #cfd8dc; /* 边框颜色 */ --text-primary: #263238; /* 主要文本色 */ --text-secondary: #546e7a; /* 次要文本色 */ --spacing-sm: 4px; --spacing-md: 8px; --spacing-lg: 16px; } /* 全局样式调整 */ body { background-color: var(--background-color); color: var(--text-primary); font-size: 14px; line-height: 1.5; } /* 面包屑导航优化 */ .el-breadcrumb { padding: var(--spacing-md) 0; } .el-breadcrumb__inner, .el-breadcrumb__inner a { font-weight: 400 !important; color: var(--text-secondary) !important; } .el-breadcrumb__separator { margin: 0 var(--spacing-sm); color: var(--border-color); } /* 按钮样式优化 */ .el-button { padding: 6px 12px; border-radius: 2px; font-size: 13px; transition: all 0.2s ease; } .el-button--primary { background-color: var(--primary-color); border-color: var(--primary-color); } .el-button--primary:hover { background-color: #2c3e50; border-color: #2c3e50; } .el-button--success { background-color: #2ecc71; border-color: #2ecc71; } .el-button--warning { background-color: var(--accent-color); border-color: var(--accent-color); } .el-button--mini { padding: 3px 8px; font-size: 12px; } /* 卡片组件优化 */ .el-card { border-radius: 2px; border: 1px solid var(--border-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); overflow: hidden; } .el-card__header { padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border-color); background-color: #f9fafb; } .el-card__body { padding: var(--spacing-lg); } /* 表格样式优化 - 紧凑布局 */ .el-table { border: 1px solid var(--border-color); border-radius: 2px; } .el-table th, .el-table td { padding: 8px 10px; font-size: 13px; } .el-table--border th, .el-table--border td { border-right: 1px solid var(--border-color); } .el-table--border thead tr:last-child th { border-bottom: 1px solid var(--border-color); } /* 输入框样式优化 */ .el-input__inner, .el-textarea__inner { padding: 7px 11px; border-radius: 2px; border: 1px solid var(--border-color); font-size: 13px; transition: border-color 0.2s ease; } .el-input__inner:focus, .el-textarea__inner:focus { border-color: var(--primary-color); box-shadow: none; } /* 下拉菜单优化 */ .el-dropdown-menu { border-radius: 2px; border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding: var(--spacing-sm) 0; } .el-dropdown-menu__item { padding: 6px 16px; font-size: 13px; } .el-dropdown-menu a { display: block; } /* 标签样式优化 */ .el-tag { padding: 2px 8px; border-radius: 2px; font-size: 12px; } /* 上传组件优化 */ .el-upload { input[type="file"] { display: none !important; } } .el-upload__input { display: none; } .upload-container { .el-upload { width: 100%; .el-upload-dragger { width: 100%; height: 200px; border-radius: 2px; border: 2px dashed var(--border-color); } } } /* 对话框样式优化 */ .el-dialog { transform: none; left: 0; position: relative; margin: 0 auto; border-radius: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .el-dialog__header { padding: var(--spacing-lg); border-bottom: 1px solid var(--border-color); } .el-dialog__body { padding: var(--spacing-lg); } .el-dialog__footer { padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--border-color); } /* 日期选择器优化 */ .el-range-editor.el-input__inner { display: inline-flex !important; } .el-range-separator { box-sizing: content-box; } /* 菜单样式优化 */ .el-menu { border-right: 1px solid var(--border-color); } .el-menu-item, .el-submenu__title { padding: 0 16px !important; height: 40px !important; line-height: 40px !important; } .el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow { display: none; } /* 自定义工具类 - 紧凑布局 */ .small-padding { .cell { padding-left: 5px; padding-right: 5px; } } .fixed-width { .el-button--mini { padding: 7px 10px; width: 60px; } } .status-col { .cell { padding: 0 10px; text-align: center; .el-tag { margin-right: 0px; } } } .cell { .el-tag { margin-right: 0px; } } /* 表单样式优化 */ .el-form-item { margin-bottom: 12px; } .el-form-item__label { padding-right: 10px; font-size: 13px; } /* 分页组件优化 */ .el-pagination { margin-top: 16px; padding: 8px 0; } .el-pager li { margin: 0 2px; min-width: 30px; height: 30px; line-height: 30px; } .pagination-container { background-color: transparent !important; }