yss-project/src/app/pages/hr/assets/assets.scss

// 自定义主题
$primary-color: #1e40af; // 深蓝主色，传递可靠感
$primary-light: #3b82f6; // 浅蓝色，用于悬停效果
$secondary-color: #0d9488; // 薄荷绿，作为强调色
$success-color: #10b981; // 成功色
$warning-color: #f59e0b; // 警告色（浅橙）
$error-color: #ef4444; // 错误色
$text-primary: #1f2937; // 主要文本色
$text-secondary: #4b5563; // 次要文本色
$text-tertiary: #9ca3af; // 辅助文本色
$bg-primary: #ffffff; // 主背景色
$bg-secondary: #f9fafb; // 次要背景色
$bg-tertiary: #f3f4f6; // 辅助背景色
$border-color: #e5e7eb; // 边框色
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
$border-radius: 8px;
$transition: all 0.2s ease;

// 主容器样式
.assets-container {
  padding: 24px;
  min-height: 100vh;
  background-color: $bg-secondary;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

// 页面标题
.page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid $border-color;

  h1 {
    font-size: 28px;
    font-weight: 700;
    color: $text-primary;
    margin: 0 0 8px 0;
  }

  .page-description {
    font-size: 16px;
    color: $text-secondary;
    margin: 0;
  }
}

// 顶部操作栏
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 20px;
  background-color: $bg-primary;
  border-radius: $border-radius;
  box-shadow: $shadow-sm;
  flex-wrap: wrap;
  gap: 16px;

  .action-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .add-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: $primary-color;
    color: white;
    border: none;
    border-radius: $border-radius;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: $transition;

    &:hover {
      background-color: $primary-light;
      transform: translateY(-1px);
      box-shadow: $shadow-md;
    }

    &:active {
      transform: translateY(0);
      box-shadow: $shadow-sm;
    }
  }

  .batch-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    animation: slideIn 0.3s ease-out;

    &.hidden {
      display: none;
    }
  }

  .batch-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid $border-color;
    border-radius: $border-radius;
    background-color: $bg-primary;
    color: $text-secondary;
    font-size: 14px;
    cursor: pointer;
    transition: $transition;

    &:hover {
      background-color: $bg-tertiary;
      border-color: $text-tertiary;
    }

    &:active {
      transform: scale(0.98);
    }
  }

  .search-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .search-container {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 280px;

    .search-icon {
      position: absolute;
      left: 12px;
      color: $text-tertiary;
      z-index: 1;
    }

    .search-input {
      width: 100%;
      padding: 10px 12px 10px 40px;
      border: 1px solid $border-color;
      border-radius: $border-radius;
      font-size: 14px;
      color: $text-primary;
      background-color: $bg-primary;
      transition: $transition;

      &:focus {
        outline: none;
        border-color: $primary-color;
        box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
      }

      &::placeholder {
        color: $text-tertiary;
      }
    }

    .clear-search {
      position: absolute;
      right: 8px;
      color: $text-tertiary;
      padding: 4px;
      transition: $transition;

      &:hover {
        color: $text-primary;
      }
    }
  }

  .filter-container {
    min-width: 150px;
  }

  .filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background-color: $secondary-color;
    color: white;
    border: none;
    border-radius: $border-radius;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: $transition;

    &:hover {
      background-color: #0f766e;
      transform: translateY(-1px);
      box-shadow: $shadow-md;
    }

    &:active {
      transform: translateY(0);
      box-shadow: $shadow-sm;
    }
  }
}

// 表格容器
.table-container {
  background-color: $bg-primary;
  border-radius: $border-radius;
  box-shadow: $shadow-sm;
  overflow: hidden;
  margin-bottom: 24px;
}

// 员工表格
.employee-table {
  width: 100%;

  .mat-header-row {
    background-color: $bg-tertiary;
    font-weight: 600;
    color: $text-primary;

    .mat-header-cell {
      padding: 16px;
      font-size: 14px;
      color: $text-primary;
      font-weight: 600;
      border-bottom: 1px solid $border-color;
    }
  }

  .mat-row {
    transition: $transition;
    cursor: pointer;

    &:hover {
      background-color: color-mix(in srgb, $primary-color 2%, transparent);
      transform: translateY(-1px);
    }

    .mat-cell {
      padding: 16px;
      font-size: 14px;
      color: $text-secondary;
      border-bottom: 1px solid $border-color;
      vertical-align: middle;
    }

    &:last-child .mat-cell {
      border-bottom: none;
    }
  }

  .name-column {
    min-width: 150px;

    .employee-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .employee-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
    }

    .employee-name {
      font-weight: 500;
      color: $text-primary;
    }
  }

  .actions-column {
    min-width: 120px;

    .action-buttons {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .edit-btn,
    .delete-btn,
    .view-btn {
      color: $text-tertiary;
      transition: $transition;
      opacity: 0.8;

      &:hover {
        opacity: 1;
        transform: scale(1.1);
      }

      &.edit-btn:hover {
        color: $primary-color;
      }

      &.delete-btn:hover {
        color: $error-color;
      }

      &.view-btn:hover {
        color: $secondary-color;
      }
    }
  }

  // 合同信息样式
  .contract-info {
    display: flex;
    align-items: center;
    gap: 8px;

    .contract-date {
      font-size: 12px;
      color: $text-secondary;
    }

    .expiring-soon {
      background-color: color-mix(in srgb, $warning-color 15%, transparent);
      color: $warning-color;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 500;
      animation: pulse 2s infinite;
    }

    .contract-btn {
      color: $primary-color;
      transition: $transition;

      &:hover {
        color: $primary-light;
        transform: scale(1.1);
      }
    }
  }

  .no-contract {
    color: $text-tertiary;
    font-size: 12px;
    font-style: italic;
  }

  // 状态选择器样式
  .status-select {
    min-width: 100px;
    .mat-select-trigger {
      font-size: 14px;
    }
  }

  // 空状态样式
  .empty-state {
    text-align: center;
    padding: 60px 20px;

    .empty-icon {
      font-size: 48px;
      color: $text-tertiary;
      margin-bottom: 16px;
    }

    p {
      color: $text-secondary;
      font-size: 16px;
      margin-bottom: 24px;
    }
  }
}

// 分页组件
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: $bg-primary;
  border-radius: $border-radius;
  box-shadow: $shadow-sm;

  .pagination-info {
    font-size: 14px;
    color: $text-secondary;
  }

  .mat-paginator {
    display: flex;
    justify-content: flex-end;
    flex: 1;
  }
}

// 自定义对话框样式 - 以深蓝色和白色为主色调
.add-employee-dialog-container {
  .mat-dialog-container {
    background-color: #1e293b;
    color: white;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  }

  .mat-dialog-title {
    color: white;
    font-size: 24px;
    font-weight: 600;
    padding: 24px 24px 0;
    margin: 0;
  }

  .mat-dialog-content {
    padding: 24px;
    background-color: white;
    color: #1e293b;
    margin: 0;
  }

  .mat-dialog-actions {
    padding: 16px 24px;
    background-color: #1e293b;
    justify-content: flex-end;
    margin: 0;
  }
}

.custom-dialog {
  // 对话框容器样式
  .mat-dialog-container {
    border-radius: $border-radius;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15), 0 10px 15px -6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-color: $bg-primary; // 使用白色作为主背景
    border: 2px solid $primary-color; // 深蓝色边框
    max-width: 700px; // 增加对话框宽度
    width: 95vw;
    animation: slideIn 0.3s ease-out; // 添加动画效果
  }
  
  // 对话框标题样式
  h2 {
    font-size: 24px; // 增大标题字体
    font-weight: 700;
    color: $primary-color; // 使用深蓝色标题
    margin: 0;
  }
  
  // 输入框样式
  .mat-input-element {
    color: $text-primary;
    font-size: 16px; // 增大输入框字体
    font-weight: 500;
  }
  
  .mat-form-field {
    width: 100%;
    transition: all 0.2s ease;
  }
  
  .mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: $bg-primary; // 输入框白色背景
    border-radius: $border-radius;
    border: 1px solid $border-color;
    transition: all 0.2s ease;
  }
  
  .mat-form-field-appearance-fill .mat-form-field-outline {
    border: none;
  }
  
  .mat-form-field-appearance-fill .mat-form-field-underline {
    display: none;
  }
  
  // 输入框聚焦效果增强
  .mat-form-field-appearance-fill .mat-form-field-focus-overlay {
    background-color: rgba(30, 64, 175, 0.08);
  }
  
  .mat-form-field:focus-within .mat-form-field-flex {
    border-color: $primary-color;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
  }
  
  // 选择框样式增强
  .mat-select {
    color: $text-primary;
    font-size: 16px;
  }
  
  .mat-select-panel {
    background-color: $bg-primary;
    border-radius: $border-radius;
    box-shadow: $shadow-lg;
    margin-top: 8px;
    border: 1px solid $border-color;
    animation: slideIn 0.2s ease-out;
  }
  
  .mat-option {
    color: $text-primary;
    padding: 12px 20px; // 增加选项间距
    font-size: 16px; // 增大选项字体
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: $border-radius;
    margin: 2px 8px;
    
    &:hover {
      background-color: rgba(30, 64, 175, 0.1);
      transform: translateX(4px); // 悬停时轻微移动
    }
    
    &.mat-selected {
      background-color: color-mix(in srgb, $primary-color 20%, transparent);
      color: $primary-color;
      font-weight: 600;
    }
    
    &:active {
      transform: scale(0.98);
    }
  }
  
  // 按钮样式优化
  button[mat-button] {
    color: $text-secondary;
    font-size: 16px; // 增大按钮字体
    font-weight: 600;
    padding: 10px 24px;
    transition: all 0.2s ease;
    border-radius: $border-radius;
    
    &:hover {
      color: $primary-color;
      background-color: rgba(30, 64, 175, 0.08);
      transform: translateY(-1px);
    }
    
    &:active {
      transform: translateY(0);
    }
  }
  
  button[mat-raised-button][color="primary"] {
    background-color: $primary-color;
    color: white;
    font-size: 16px; // 增大按钮字体
    font-weight: 600;
    border-radius: $border-radius;
    padding: 12px 32px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
    
    &:hover {
      background-color: $primary-light;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(30, 64, 175, 0.4);
    }
    
    &:active {
      transform: translateY(0);
      box-shadow: 0 4px 10px rgba(30, 64, 175, 0.3);
    }
    
    &:disabled {
      background-color: $text-tertiary;
      transform: none;
      box-shadow: none;
    }
  }
  
  // 日期选择器样式增强
  .mat-datepicker-toggle {
    color: $text-tertiary;
    transition: all 0.2s ease;
    
    &:hover {
      color: $primary-color;
      transform: scale(1.1);
    }
  }
  
  .mat-datepicker-content {
    border-radius: $border-radius;
    overflow: hidden;
    border: 1px solid $border-color;
  }
  
  // 表单标签样式增强
  label {
    color: $text-primary;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 8px;
    display: block;
  }
  
  // 必填标记样式
  .required-mark {
    color: $error-color;
    font-size: 16px;
    margin-left: 4px;
  }
  
  // 错误状态样式增强
  .mat-error {
    color: $error-color;
    font-size: 14px;
    margin-top: 6px;
    display: block;
    font-weight: 500;
  }
  
  .mat-form-field-invalid .mat-form-field-flex {
    border-color: $error-color;
    background-color: rgba(239, 68, 68, 0.05);
  }
  
  .mat-form-field-invalid .mat-input-element {
    color: $error-color;
  }
}

// 自定义通知消息样式
.success-snackbar {
  background-color: $success-color;
  color: white;
}

.error-snackbar {
  background-color: $error-color;
  color: white;
}

// 动画定义
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .assets-container {
    padding: 16px;
  }

  .action-bar {
    flex-direction: column;
    align-items: stretch;

    .search-filters {
      justify-content: space-between;
    }
  }
}

@media (max-width: 768px) {
  .assets-container {
    padding: 12px;
  }

  .page-header {
    text-align: center;
  }

  .action-bar {
    padding: 12px;

    .search-filters {
      flex-direction: column;
      align-items: stretch;

      .search-container,
      .filter-container,
      .filter-btn {
        width: 100%;
        min-width: auto;
      }
    }
  }

  .table-container {
    overflow-x: auto;
  }

  .pagination {
    flex-direction: column;
    gap: 12px;
    align-items: center;

    .mat-paginator {
      justify-content: center;
    }
  }
}