209f03a238
主要改进： - 新增 variables.css 统一管理所有主题相关的CSS变量 - 新增 utilities.css 提供可复用的工具类组件 - 重构所有Vue组件，移除重复的CSS代码 - 统一使用CSS变量实现一致的粉色主题(#FF6B9D) - 改进代码组织结构，提升可维护性 - 优化样式继承和复用机制 修改文件： - 新增：frontend/src/styles/variables.css, utilities.css - 重构：App.vue, 所有视图组件和组件文件 - 更新：style.css, element-plus.css 技术亮点： - 模块化CSS架构，使用@import导入 - 统一的颜色、间距、阴影、过渡效果变量 - 卡片、按钮、布局等通用工具类 - 响应式设计支持
367 lines
8.0 KiB
CSS
367 lines
8.0 KiB
CSS
.el-input__wrapper {
|
|
box-shadow: 0 0 0 1px var(--border) inset !important;
|
|
}
|
|
|
|
.el-input__wrapper:hover,
|
|
.el-input__wrapper.is-focus {
|
|
box-shadow: 0 0 0 1px var(--primary) inset !important;
|
|
}
|
|
|
|
.el-select__wrapper {
|
|
box-shadow: 0 0 0 1px var(--border) inset !important;
|
|
}
|
|
|
|
.el-select__wrapper:hover,
|
|
.el-select__wrapper.is-focused {
|
|
box-shadow: 0 0 0 1px var(--primary) inset !important;
|
|
}
|
|
|
|
.el-select__placeholder {
|
|
color: var(--text-secondary) !important;
|
|
}
|
|
|
|
.el-select__caret {
|
|
color: var(--primary) !important;
|
|
}
|
|
|
|
.el-select-dropdown {
|
|
border: 1px solid var(--border) !important;
|
|
box-shadow: var(--shadow-md) !important;
|
|
background: white !important;
|
|
}
|
|
|
|
.el-select-dropdown__item {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.el-select-dropdown__item:hover {
|
|
background: rgba(255, 107, 157, 0.1) !important;
|
|
color: var(--primary) !important;
|
|
}
|
|
|
|
.el-select-dropdown__item.is-selected {
|
|
color: var(--primary) !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.el-input-number__decrease,
|
|
.el-input-number__increase {
|
|
background: var(--bg-light) !important;
|
|
color: var(--text-secondary) !important;
|
|
border: 1px solid var(--border) !important;
|
|
}
|
|
|
|
.el-input-number__decrease:hover,
|
|
.el-input-number__increase:hover {
|
|
background: rgba(255, 107, 157, 0.1) !important;
|
|
color: var(--primary) !important;
|
|
border-color: var(--primary) !important;
|
|
}
|
|
|
|
.el-input-number__decrease.is-disabled,
|
|
.el-input-number__increase.is-disabled {
|
|
color: #ccc !important;
|
|
border-color: var(--border) !important;
|
|
}
|
|
|
|
.el-input-number__wrapper {
|
|
box-shadow: 0 0 0 1px var(--border) inset !important;
|
|
}
|
|
|
|
.el-input-number__wrapper:hover,
|
|
.el-input-number__wrapper.is-focus {
|
|
box-shadow: 0 0 0 1px var(--primary) inset !important;
|
|
}
|
|
|
|
.el-button {
|
|
border: 1px solid var(--border) !important;
|
|
}
|
|
|
|
.el-button--primary {
|
|
background: var(--gradient-primary) !important;
|
|
border-color: var(--primary) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.el-button--primary:hover {
|
|
box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3) !important;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.el-button--success {
|
|
background: var(--gradient-cyan) !important;
|
|
border-color: var(--cyan) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.el-button--success:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3) !important;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.el-button--warning {
|
|
background: var(--gradient-yellow) !important;
|
|
border-color: var(--yellow) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.el-button--warning:hover {
|
|
box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3) !important;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.el-button--danger {
|
|
background: var(--gradient-danger) !important;
|
|
border-color: var(--danger) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.el-button--danger:hover {
|
|
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3) !important;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.el-card {
|
|
border: 1px solid var(--border) !important;
|
|
box-shadow: var(--shadow-sm) !important;
|
|
}
|
|
|
|
.el-card__header {
|
|
border-bottom: 1px solid var(--border) !important;
|
|
}
|
|
|
|
.el-card__body {
|
|
background: var(--bg-card) !important;
|
|
}
|
|
|
|
.el-table {
|
|
border: 1px solid var(--border) !important;
|
|
background: white !important;
|
|
}
|
|
|
|
.el-table th.el-table__cell {
|
|
background: var(--bg-light) !important;
|
|
color: var(--text-primary) !important;
|
|
border-bottom: 1px solid var(--border) !important;
|
|
}
|
|
|
|
.el-table td.el-table__cell {
|
|
border-bottom: 1px solid var(--border) !important;
|
|
}
|
|
|
|
.el-table__border-left {
|
|
border-left: 1px solid var(--border) !important;
|
|
}
|
|
|
|
.el-table__border-right {
|
|
border-right: 1px solid var(--border) !important;
|
|
}
|
|
|
|
.el-table tr:hover > td {
|
|
background: #FFF0F5 !important;
|
|
}
|
|
|
|
.el-table__body tr.current-row > td.el-table__cell {
|
|
background: var(--border) !important;
|
|
}
|
|
|
|
.el-checkbox__inner {
|
|
border: 1px solid var(--border) !important;
|
|
background: white !important;
|
|
}
|
|
|
|
.el-checkbox__inner:hover {
|
|
border-color: var(--primary) !important;
|
|
}
|
|
|
|
.el-checkbox__input.is-checked .el-checkbox__inner {
|
|
background: var(--primary) !important;
|
|
border-color: var(--primary) !important;
|
|
}
|
|
|
|
.el-checkbox__input.is-disabled .el-checkbox__inner {
|
|
background: #f5f5f5 !important;
|
|
border-color: #e4e7ed !important;
|
|
}
|
|
|
|
.el-pagination button {
|
|
border: 1px solid var(--border) !important;
|
|
background: var(--bg-light) !important;
|
|
color: var(--text-secondary) !important;
|
|
}
|
|
|
|
.el-pagination button:hover {
|
|
background: rgba(255, 107, 157, 0.1) !important;
|
|
color: var(--primary) !important;
|
|
}
|
|
|
|
.el-pagination li.is-active {
|
|
background: var(--primary) !important;
|
|
color: white !important;
|
|
border-color: var(--primary) !important;
|
|
}
|
|
|
|
.el-pager li {
|
|
background: var(--bg-light) !important;
|
|
color: var(--text-secondary) !important;
|
|
border: 1px solid var(--border) !important;
|
|
}
|
|
|
|
.el-pager li:hover {
|
|
color: var(--primary) !important;
|
|
}
|
|
|
|
.el-tag--primary {
|
|
background: rgba(255, 107, 157, 0.1) !important;
|
|
color: var(--primary) !important;
|
|
border-color: rgba(255, 107, 157, 0.3) !important;
|
|
}
|
|
|
|
.el-tag--success {
|
|
background: rgba(0, 212, 255, 0.1) !important;
|
|
color: var(--cyan) !important;
|
|
border-color: rgba(0, 212, 255, 0.3) !important;
|
|
}
|
|
|
|
.el-tag--warning {
|
|
background: rgba(255, 184, 0, 0.1) !important;
|
|
color: var(--yellow) !important;
|
|
border-color: rgba(255, 184, 0, 0.3) !important;
|
|
}
|
|
|
|
.el-tag--danger {
|
|
background: rgba(255, 107, 107, 0.1) !important;
|
|
color: var(--danger) !important;
|
|
border-color: rgba(255, 107, 107, 0.3) !important;
|
|
}
|
|
|
|
.el-rate__icon {
|
|
color: var(--border) !important;
|
|
}
|
|
|
|
.el-rate__icon.hover {
|
|
color: var(--primary) !important;
|
|
}
|
|
|
|
.el-dialog {
|
|
border: 1px solid var(--border) !important;
|
|
}
|
|
|
|
.el-dialog__header {
|
|
border-bottom: 1px solid var(--border) !important;
|
|
}
|
|
|
|
.el-dialog__body {
|
|
background: white !important;
|
|
}
|
|
|
|
.el-dialog__footer {
|
|
border-top: 1px solid var(--border) !important;
|
|
}
|
|
|
|
.el-dropdown-menu {
|
|
border: 1px solid var(--border) !important;
|
|
box-shadow: var(--shadow-md) !important;
|
|
}
|
|
|
|
.el-dropdown-menu__item {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.el-dropdown-menu__item:hover {
|
|
background: rgba(255, 107, 157, 0.1) !important;
|
|
color: var(--primary) !important;
|
|
}
|
|
|
|
.el-scrollbar__wrap::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.el-scrollbar__wrap::-webkit-scrollbar-thumb {
|
|
background: var(--border);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.el-scrollbar__wrap::-webkit-scrollbar-thumb:hover {
|
|
background: var(--primary);
|
|
}
|
|
|
|
.el-form-item__label {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
|
|
.el-form-item__error {
|
|
color: var(--danger) !important;
|
|
}
|
|
|
|
.el-message {
|
|
border: 1px solid var(--border) !important;
|
|
box-shadow: var(--shadow-md) !important;
|
|
}
|
|
|
|
.el-message--success {
|
|
background: rgba(0, 212, 255, 0.1) !important;
|
|
border-color: rgba(0, 212, 255, 0.3) !important;
|
|
color: var(--cyan) !important;
|
|
}
|
|
|
|
.el-message--error {
|
|
background: rgba(255, 107, 107, 0.1) !important;
|
|
border-color: rgba(255, 107, 107, 0.3) !important;
|
|
color: var(--danger) !important;
|
|
}
|
|
|
|
.el-message--warning {
|
|
background: rgba(255, 184, 0, 0.1) !important;
|
|
border-color: rgba(255, 184, 0, 0.3) !important;
|
|
color: var(--yellow) !important;
|
|
}
|
|
|
|
.el-message--info {
|
|
background: rgba(255, 107, 157, 0.1) !important;
|
|
border-color: rgba(255, 107, 157, 0.3) !important;
|
|
color: var(--primary) !important;
|
|
}
|
|
|
|
.el-message-box {
|
|
border: 1px solid var(--border) !important;
|
|
box-shadow: var(--shadow-md) !important;
|
|
}
|
|
|
|
.el-message-box__header {
|
|
border-bottom: 1px solid var(--border) !important;
|
|
}
|
|
|
|
.el-message-box__title {
|
|
color: var(--primary) !important;
|
|
}
|
|
|
|
.el-message-box__content {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.el-message-box__btns {
|
|
border-top: 1px solid var(--border) !important;
|
|
}
|
|
|
|
.el-alert--success {
|
|
background-color: rgba(0, 255, 136, 0.1) !important;
|
|
border-color: var(--green) !important;
|
|
}
|
|
|
|
.el-alert--info {
|
|
background-color: rgba(255, 107, 157, 0.1) !important;
|
|
border-color: var(--primary) !important;
|
|
}
|
|
|
|
.el-alert--warning {
|
|
background-color: rgba(255, 184, 0, 0.1) !important;
|
|
border-color: var(--yellow) !important;
|
|
}
|
|
|
|
.el-alert--error {
|
|
background-color: rgba(255, 51, 102, 0.1) !important;
|
|
border-color: var(--danger) !important;
|
|
}
|