463 lines
9.1 KiB
SCSS
463 lines
9.1 KiB
SCSS
/**
|
|
* @description 全局通用样式
|
|
* @author yslg
|
|
* @since 2025-10-30
|
|
* @figma https://www.figma.com/design/4aM0yqyoAjtW2jTZcqPAtN
|
|
*/
|
|
|
|
// ============ 设计令牌 (Design Tokens) ============
|
|
|
|
// 颜色
|
|
$color-primary: #C62828; // 主色（红色）
|
|
$color-primary-hover: #B71C1C; // 主色悬停
|
|
$color-text-primary: #1D2129; // 主要文字
|
|
$color-text-secondary: #4E5969; // 次要文字
|
|
$color-text-disabled: #C9CDD4; // 禁用文字/图标
|
|
$color-bg-secondary: #F2F3F5; // 次要背景
|
|
$color-bg-white: #FFFFFF; // 白色背景
|
|
$color-border: #dcdfe6; // 边框
|
|
|
|
// 字体
|
|
$font-family-cn: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
$font-family-en: 'Nunito Sans', sans-serif;
|
|
$font-size-base: 14px;
|
|
$line-height-base: 1.571428571em;
|
|
|
|
// 圆角
|
|
$border-radius-small: 2px;
|
|
$border-radius-medium: 4px;
|
|
$border-radius-large: 8px;
|
|
|
|
// 间距
|
|
$spacing-xs: 4px;
|
|
$spacing-sm: 8px;
|
|
$spacing-md: 12px;
|
|
$spacing-lg: 16px;
|
|
$spacing-xl: 20px;
|
|
$spacing-xxl: 24px;
|
|
|
|
// ============ 按钮样式 ============
|
|
|
|
// 主要操作按钮
|
|
.btn-primary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-xs;
|
|
padding: $spacing-sm $spacing-xl;
|
|
background: #409eff;
|
|
border: none;
|
|
border-radius: $border-radius-medium;
|
|
color: $color-bg-white;
|
|
font-size: $font-size-base;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
|
|
&:hover {
|
|
background: #66b1ff;
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
// 创建/新增按钮（红色主题）
|
|
.btn-create {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-xs;
|
|
padding: $spacing-sm $spacing-lg;
|
|
background: #E7000B;
|
|
border: none;
|
|
border-radius: $border-radius-large;
|
|
color: $color-bg-white;
|
|
font-size: $font-size-base;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
|
|
.icon {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&:hover {
|
|
background: #C70009;
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
// 搜索按钮
|
|
.btn-search {
|
|
padding: $spacing-sm $spacing-xl;
|
|
border-radius: $border-radius-medium;
|
|
font-size: $font-size-base;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
border: none;
|
|
background: #409eff;
|
|
color: $color-bg-white;
|
|
|
|
&:hover {
|
|
background: #66b1ff;
|
|
}
|
|
}
|
|
|
|
// 重置按钮
|
|
.btn-reset {
|
|
padding: $spacing-sm $spacing-xl;
|
|
border-radius: $border-radius-medium;
|
|
font-size: $font-size-base;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
border: 1px solid $color-border;
|
|
background: $color-bg-white;
|
|
color: #606266;
|
|
|
|
&:hover {
|
|
color: #409eff;
|
|
border-color: #409eff;
|
|
}
|
|
}
|
|
|
|
// 危险操作按钮
|
|
.btn-danger {
|
|
padding: $spacing-sm $spacing-xl;
|
|
border-radius: $border-radius-medium;
|
|
font-size: $font-size-base;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
border: none;
|
|
background: #f56c6c;
|
|
color: $color-bg-white;
|
|
|
|
&:hover {
|
|
background: #f78989;
|
|
}
|
|
}
|
|
|
|
// 链接样式按钮（用于表格操作列）
|
|
.btn-link {
|
|
border: none;
|
|
padding: 6px 12px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
border-radius: $border-radius-medium;
|
|
min-width: 64px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
color: $color-bg-white;
|
|
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
&.btn-primary {
|
|
background: #409eff;
|
|
}
|
|
|
|
&.btn-warning {
|
|
background: #e6a23c;
|
|
}
|
|
|
|
&.btn-success {
|
|
background: #67c23a;
|
|
}
|
|
|
|
&.btn-danger {
|
|
background: #f56c6c;
|
|
}
|
|
|
|
&.btn-info {
|
|
background: #909399;
|
|
}
|
|
}
|
|
|
|
// ============ 分页样式 (基于Figma设计) ============
|
|
|
|
// 分页容器
|
|
.pagination-container {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: $spacing-md 0;
|
|
margin-top: 32px;
|
|
background: #F9FAFB;
|
|
border-radius: $border-radius-large;
|
|
|
|
// Element Plus 分页组件自定义样式
|
|
:deep(.el-pagination) {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-sm;
|
|
padding: 0 $spacing-xxl;
|
|
|
|
// 总条数文本
|
|
.el-pagination__total {
|
|
font-family: $font-family-cn;
|
|
font-size: $font-size-base;
|
|
font-weight: 400;
|
|
line-height: $line-height-base;
|
|
color: $color-text-primary;
|
|
margin-right: 0;
|
|
}
|
|
|
|
// 每页条数选择器
|
|
.el-pagination__sizes {
|
|
margin: 0;
|
|
|
|
.el-select {
|
|
.el-select__wrapper {
|
|
background: $color-bg-secondary;
|
|
border: none;
|
|
border-radius: $border-radius-small;
|
|
padding: $spacing-xs $spacing-md;
|
|
min-height: 32px;
|
|
box-shadow: none;
|
|
|
|
.el-select__selected-item {
|
|
font-family: $font-family-cn;
|
|
font-size: $font-size-base;
|
|
font-weight: 400;
|
|
line-height: $line-height-base;
|
|
color: $color-text-primary;
|
|
}
|
|
|
|
.el-select__suffix {
|
|
.el-icon {
|
|
color: $color-text-secondary;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background: darken($color-bg-secondary, 3%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 上一页/下一页按钮
|
|
.btn-prev,
|
|
.btn-next {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 10px;
|
|
min-width: auto;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: $border-radius-small;
|
|
|
|
.el-icon {
|
|
color: $color-text-secondary;
|
|
}
|
|
|
|
&:hover:not(:disabled) {
|
|
background: rgba($color-primary, 0.08);
|
|
|
|
.el-icon {
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
background: transparent;
|
|
cursor: not-allowed;
|
|
|
|
.el-icon {
|
|
color: $color-text-disabled;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 页码列表
|
|
.el-pager {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $spacing-xs;
|
|
|
|
li {
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: $border-radius-small;
|
|
padding: $spacing-xs;
|
|
min-width: 32px;
|
|
height: 32px;
|
|
line-height: 24px;
|
|
font-family: $font-family-en;
|
|
font-size: $font-size-base;
|
|
font-weight: 600;
|
|
color: $color-text-secondary;
|
|
text-align: center;
|
|
margin: 0;
|
|
|
|
&:hover:not(.is-active):not(.is-disabled) {
|
|
background: rgba($color-primary, 0.08);
|
|
color: $color-primary;
|
|
}
|
|
|
|
&.is-active {
|
|
background: $color-primary;
|
|
color: $color-bg-white;
|
|
}
|
|
|
|
&.is-disabled {
|
|
color: $color-text-disabled;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
// 更多页省略号
|
|
&.more {
|
|
background: transparent;
|
|
color: $color-text-secondary;
|
|
|
|
&:hover {
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 跳转输入框
|
|
.el-pagination__jump {
|
|
margin-left: 0;
|
|
font-family: $font-family-cn;
|
|
font-size: $font-size-base;
|
|
color: $color-text-primary;
|
|
|
|
.el-input {
|
|
.el-input__wrapper {
|
|
background: $color-bg-white;
|
|
border: 1px solid $color-border;
|
|
border-radius: $border-radius-small;
|
|
padding: $spacing-xs $spacing-sm;
|
|
box-shadow: none;
|
|
width: 60px;
|
|
|
|
.el-input__inner {
|
|
font-family: $font-family-en;
|
|
font-size: $font-size-base;
|
|
font-weight: 600;
|
|
color: $color-text-primary;
|
|
text-align: center;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: $color-primary;
|
|
}
|
|
|
|
&.is-focus {
|
|
border-color: $color-primary;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ============ 加载状态 ============
|
|
|
|
.loading-container,
|
|
.empty-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 100px 20px;
|
|
color: #909399;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid #f3f3f3;
|
|
border-top: 4px solid $color-primary;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-bottom: $spacing-lg;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 64px;
|
|
margin-bottom: $spacing-lg;
|
|
}
|
|
|
|
// ============ 表格加载和空状态 ============
|
|
|
|
.loading-cell,
|
|
.empty-cell {
|
|
text-align: center;
|
|
padding: 60px 20px !important;
|
|
color: #909399;
|
|
}
|
|
|
|
// ============ 搜索栏 ============
|
|
|
|
.search-bar {
|
|
background: $color-bg-white;
|
|
padding: $spacing-xl;
|
|
border-radius: $border-radius-large;
|
|
margin-bottom: $spacing-xl;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
gap: $spacing-lg;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.search-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacing-sm;
|
|
min-width: 180px;
|
|
}
|
|
|
|
.search-label {
|
|
font-size: $font-size-base;
|
|
font-weight: 500;
|
|
color: #606266;
|
|
}
|
|
|
|
.search-input,
|
|
.search-select {
|
|
padding: $spacing-sm $spacing-md;
|
|
border: 1px solid $color-border;
|
|
border-radius: $border-radius-medium;
|
|
font-size: $font-size-base;
|
|
color: #606266;
|
|
transition: border-color 0.3s;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: #409eff;
|
|
}
|
|
}
|
|
|
|
.search-select {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.search-actions {
|
|
display: flex;
|
|
gap: $spacing-md;
|
|
margin-left: auto;
|
|
}
|
|
|
|
// ============ 工具栏 ============
|
|
|
|
.toolbar {
|
|
margin-bottom: $spacing-xl;
|
|
}
|